/* Portal de Soporte de IT de Biotrust.
   Paleta y tipografía del sistema visual de Biotrust (los mismos tokens que el panel de asistencias
   y el registro de certificadores): fondo verdoso claro, acento turquesa, Inter, tarjetas de 16 px. */
:root {
  --fondo: #f2f6f7;
  --superficie: #ffffff;
  --superficie-2: #f8fafc;
  --texto: #0f172a;
  --suave: #64748b;
  --borde: #e7ebf2;
  --borde-fuerte: #cbd5e1;
  --marca: #0b8ea3;            /* texto y enlaces de acento */
  --marca-fuerte: #097a8c;
  --marca-relleno: #0b8ea3;    /* fondo de los botones principales (texto blanco) */
  --marca-relleno-h: #097a8c;
  --marca-suave: #e2f4f7;
  --turquesa: #22b8cf;
  --foco: rgba(11, 142, 163, .35);

  --ok: #16a34a;     --ok-suave: #e8f8ee;
  --error: #e11d48;  --error-suave: #fdecef;
  --aviso: #d97706;  --aviso-suave: #fef5e4;
  --info: #3567c9;   --info-suave: #e9effb;
  --violeta: #7c3aed; --violeta-suave: #f2ecfe;
  --gris: #64748b;   --gris-suave: #eef1f5;

  --radio: 16px;
  --radio-ctl: 10px;
  --sombra: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .04);
  color-scheme: light;
}
/* Oscuro: lo pinta tema.js en data-theme (automático = el del sistema). */
[data-theme="dark"] {
  --fondo: #0a1519;
  --superficie: #10212a;
  --superficie-2: #0d1b22;
  --texto: #e5e9f2;
  --suave: #8a96ad;
  --borde: #1d3540;
  --borde-fuerte: #2b4552;
  --marca: #39b9cc;
  --marca-fuerte: #6fd0de;
  --marca-relleno: #0b8ea3;
  --marca-relleno-h: #0a7f92;
  --marca-suave: #0f3a43;
  --foco: rgba(57, 185, 204, .5);

  --ok: #4ade80;     --ok-suave: #0f2e1e;
  --error: #f45b7a;  --error-suave: #3a1420;
  --aviso: #fbbf24;  --aviso-suave: #3a2a0e;
  --info: #6f95e8;   --info-suave: #172647;
  --violeta: #a78bfa; --violeta-suave: #2a1a4a;
  --gris: #94a3b8;   --gris-suave: #1e273b;

  --sombra: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--fondo); color: var(--texto);
  font: 15px/1.55 Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: var(--marca); }
a:hover { color: var(--marca-fuerte); }
h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 .5rem; font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: 1.1rem; margin: 1.5rem 0 .75rem; font-weight: 600; }
h3 { font-size: 1rem; margin: 1rem 0 .5rem; font-weight: 600; }
code, .mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .92em; }
small { color: var(--suave); }
.oculto { display: none !important; }

/* ------------------------------------------------------------------ barra */
.barra {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .55rem 1rem; background: var(--superficie); border-bottom: 1px solid var(--borde);
}
.marca { display: flex; align-items: center; gap: .65rem; color: var(--texto); text-decoration: none; }
.marca:hover { color: var(--texto); }
.marca .logo { display: block; border-radius: 9px; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.15; }
.marca-empresa { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--suave); }
.marca-app { font-size: 1.05rem; font-weight: 700; color: var(--marca); letter-spacing: -.01em; }
.barra-derecha { display: flex; align-items: center; gap: .5rem; }
.acceso-it {
  font-size: .82rem; font-weight: 500; color: var(--suave); text-decoration: none;
  border: 1px solid var(--borde); border-radius: 999px; padding: .3rem .8rem;
}
.acceso-it:hover { color: var(--marca); border-color: var(--marca); }
.menu { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.menu > a { padding: .4rem .75rem; border-radius: var(--radio-ctl); text-decoration: none; color: var(--texto); font-weight: 500; }
.menu > a[aria-current="page"], .menu > a:hover { background: var(--marca-suave); color: var(--marca); }
.cuenta, .tema { position: relative; }
.cuenta summary { cursor: pointer; list-style: none; padding: .4rem .7rem; border-radius: var(--radio-ctl); color: var(--suave); }
.cuenta summary::-webkit-details-marker, .tema summary::-webkit-details-marker { display: none; }
.cuenta summary::after { content: " ▾"; }
.cuenta-menu, .tema-menu {
  position: absolute; right: 0; top: 2.5rem; z-index: 10; min-width: 14rem;
  display: flex; flex-direction: column; padding: .4rem;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}
.cuenta-menu a, .cuenta-menu .enlace { padding: .45rem .6rem; text-decoration: none; text-align: left; border-radius: 8px; color: var(--texto); }
.cuenta-menu a:hover, .cuenta-menu .enlace:hover { background: var(--marca-suave); }

/* Selector de tema: Automático / Claro / Oscuro (como en las otras apps de Biotrust). */
.tema summary.cambiar-tema {
  list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem;
  border: 1px solid var(--borde); border-radius: 999px; color: var(--suave); cursor: pointer;
}
.tema summary.cambiar-tema:hover { color: var(--marca); border-color: var(--marca); }
.tema svg { width: 1.1rem; height: 1.1rem; flex: none; }
.tema .icono-luna { display: none; }
[data-theme="dark"] .tema .icono-luna { display: block; }
[data-theme="dark"] .tema .icono-sol { display: none; }
.tema-menu { min-width: 13rem; }
.tema-menu button {
  display: flex; align-items: center; gap: .65rem; width: 100%; text-align: left; font: inherit; color: var(--texto);
  background: none; border: 0; border-radius: 8px; padding: .5rem .6rem; cursor: pointer;
}
.tema-menu button span { display: flex; flex-direction: column; line-height: 1.2; font-weight: 500; }
.tema-menu button small { font-weight: 400; font-size: .8rem; }
.tema-menu button:hover { background: var(--marca-suave); }
.tema-menu button[aria-checked="true"] { color: var(--marca); background: var(--marca-suave); }

/* ------------------------------------------------------------------ estructura */
.contenido { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 1.5rem 1rem 2rem; }
.contenido.angosto { max-width: 680px; }
.contenido.medio { max-width: 900px; }
.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 1.35rem; box-shadow: var(--sombra);
}
.tarjeta + .tarjeta { margin-top: 1rem; }
.tarjeta.centrada { text-align: center; }
.bajada { color: var(--suave); margin: 0 0 1.25rem; }
.nota-pie { text-align: center; color: var(--suave); font-size: .9rem; margin-top: 1rem; }
.miga { margin: 0 0 .75rem; }
.miga a { text-decoration: none; }
.pie { text-align: center; padding: 1rem; font-size: .82rem; color: var(--suave); }
.pie a { color: var(--suave); }
.encabezado-pagina { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.encabezado-pagina h1 { margin: 0; }
.acciones { display: flex; gap: .5rem; flex-wrap: wrap; }
.dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; }
.lateral .tarjeta + .tarjeta { margin-top: 1rem; }
.lateral h2 { margin-top: 0; }
@media (max-width: 900px) { .dos-columnas { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .marca-empresa { display: none; } .marca-app { font-size: .98rem; } }
.separado { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--borde); }
.fila-accion { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.en-linea { display: inline; margin-left: .5rem; }
.vacio { color: var(--suave); text-align: center; padding: 2rem 1rem; }

/* ------------------------------------------------------------------ formularios */
.campo { margin-bottom: 1rem; }
.campo > label { display: block; font-weight: 600; margin-bottom: .3rem; }
.campo .ayuda, .ayuda { display: block; color: var(--suave); font-size: .85rem; margin-top: .3rem; }
input[type=text], input[type=email], input[type=url], input[type=search], input[type=password],
input[type=date], input[type=file], select, textarea {
  width: 100%; font: inherit; color: var(--texto); background: var(--superficie);
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-ctl); padding: .55rem .7rem;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus, .boton:focus-visible, a:focus-visible, summary:focus-visible, .tema-menu button:focus-visible {
  outline: 3px solid var(--foco); outline-offset: 1px; border-color: var(--marca);
}
.con-error input, .con-error select, .con-error textarea, input[aria-invalid="true"] { border-color: var(--error); }
.error, p.error { color: var(--error); font-size: .9rem; margin: .3rem 0 0; }
.check { display: flex; align-items: center; gap: .5rem; font-weight: 600; cursor: pointer; }
.check input { width: 1.1rem; height: 1.1rem; accent-color: var(--marca-relleno); }
fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
legend { font-weight: 700; margin-bottom: .75rem; }
.bloque-correo { background: var(--marca-suave); border-radius: 12px; padding: 1rem 1rem .25rem; margin-bottom: 1.25rem; }
.estado-correo { margin: -.5rem 0 .9rem; font-size: .9rem; min-height: 1.2em; color: var(--suave); }
.estado-correo.ok { color: var(--ok); font-weight: 600; }
.estado-correo.error { color: var(--error); }
.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 1rem; }
.form-compacto .campo { margin-bottom: .75rem; }
.lista-archivos { list-style: none; padding: 0; margin: -.5rem 0 1rem; font-size: .9rem; color: var(--suave); }
.lista-archivos li::before { content: "📎 "; }
.copiable { display: flex; gap: .5rem; }
.copiable input { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }
#texto-invitacion { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; margin-bottom: 1rem; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  padding: .55rem 1rem; border-radius: var(--radio-ctl); border: 1px solid var(--borde-fuerte);
  background: var(--superficie); color: var(--texto);
}
.boton:hover { border-color: var(--marca); color: var(--marca); }
.boton.primario { background: var(--marca-relleno); border-color: var(--marca-relleno); color: #fff; }
.boton.primario:hover { background: var(--marca-relleno-h); border-color: var(--marca-relleno-h); color: #fff; }
.boton.ancho { width: 100%; padding: .75rem; }
.boton.chico { padding: .2rem .6rem; font-size: .85rem; }
.enlace { background: none; border: 0; padding: 0; font: inherit; color: var(--marca); cursor: pointer; text-decoration: underline; }

/* ------------------------------------------------------------------ avisos */
.mensajes { margin-bottom: 1rem; }
.mensaje, .alerta { border-radius: 12px; padding: .75rem .95rem; margin: 0 0 .75rem; border: 1px solid var(--borde); background: var(--marca-suave); }
.alerta p { margin: .2rem 0; }
.alerta h2 { margin-top: 0; }
.mensaje.success, .alerta.exito { background: var(--ok-suave); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.mensaje.error, .alerta.error { background: var(--error-suave); border-color: color-mix(in srgb, var(--error) 45%, transparent); }
.mensaje.warning, .alerta.aviso { background: var(--aviso-suave); border-color: color-mix(in srgb, var(--aviso) 45%, transparent); }
.separador { text-align: center; color: var(--suave); font-size: .9rem; }

/* ------------------------------------------------------------------ pedidos */
.cabecera-ticket { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.cabecera-ticket h1 { margin: 0; }
.numero { color: var(--suave); font-weight: 500; }
.estado, .etiqueta {
  display: inline-block; white-space: nowrap; font-size: .76rem; font-weight: 600;
  padding: .15rem .6rem; border-radius: 999px; background: var(--marca-suave); color: var(--marca);
}
.estado-nuevo { background: var(--info-suave); color: var(--info); }
.estado-en_curso { background: var(--aviso-suave); color: var(--aviso); }
.estado-esperando { background: var(--violeta-suave); color: var(--violeta); }
.estado-resuelto { background: var(--ok-suave); color: var(--ok); }
.estado-rechazado { background: var(--gris-suave); color: var(--gris); }
.etiqueta.urgente { background: var(--error-suave); color: var(--error); }
.conversacion { list-style: none; padding: 0; margin: 0; }
.hilo { border: 1px solid var(--borde); border-radius: 12px; padding: .9rem 1rem; margin-bottom: .75rem; }
.hilo.de-it { background: var(--marca-suave); border-color: transparent; }
.hilo.interno { background: var(--aviso-suave); border-style: dashed; border-color: color-mix(in srgb, var(--aviso) 45%, transparent); }
.cabecera-hilo { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; margin-bottom: .4rem; }
.cabecera-hilo time, .evento-hilo time { color: var(--suave); font-size: .8rem; }
.evento-hilo { color: var(--suave); font-size: .86rem; padding: .2rem 1rem .8rem; }
.texto { white-space: normal; overflow-wrap: anywhere; }
.datos-pedido { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
.datos-pedido dt { color: var(--suave); }
.datos-pedido dd { margin: 0; }
.url { font-family: ui-monospace, Consolas, monospace; font-size: .9rem; overflow-wrap: anywhere; }
.adjuntos { list-style: none; padding: 0; margin: .75rem 0 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.adjuntos li { display: flex; flex-direction: column; gap: .25rem; max-width: 220px; font-size: .9rem; overflow-wrap: anywhere; }
.miniatura { max-width: 220px; max-height: 160px; border-radius: 8px; border: 1px solid var(--borde); object-fit: cover; }
.titulo-respuesta { border-top: 1px solid var(--borde); padding-top: 1.25rem; }
.resumen { list-style: none; display: flex; gap: 1.25rem; padding: 0; margin: 0; color: var(--suave); flex-wrap: wrap; }
.resumen strong { color: var(--texto); font-size: 1.15rem; }
.resumen .urgente strong { color: var(--error); }

/* ------------------------------------------------------------------ tablas y filtros */
.filtros { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filtros select { width: auto; }
.filtros input[type=search] { flex: 1; min-width: 220px; }
.tabla-scroll { overflow-x: auto; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla th, .tabla td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla th { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); background: var(--superficie-2); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .fila-urgente td:first-child { box-shadow: inset 3px 0 0 var(--error); }
.falta { color: var(--error); }
.paginas { display: flex; gap: 1rem; justify-content: center; margin-top: 1rem; }
.ficha { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: 0 0 1rem; }
.ficha dt { color: var(--suave); }
.ficha dd { margin: 0; overflow-wrap: anywhere; }
.lista-simple { padding-left: 1.1rem; margin: 0; }
.lista-simple li { margin-bottom: .35rem; }

/* ------------------------------------------------------------------ QR */
.logo-qr { display: block; margin: 0 auto .75rem; border-radius: 20px; }
.qr { width: 260px; height: 260px; margin: 1rem auto; display: block; background: #fff; padding: 8px; border-radius: 12px; }
.url-grande { font-weight: 700; font-size: 1.1rem; overflow-wrap: anywhere; }
.texto-largo h2 { margin-top: 1.5rem; }
@media print {
  .barra, .pie, .no-imprimir, .miga { display: none !important; }
  body, .tarjeta { background: #fff; color: #000; box-shadow: none; border: 0; }
}