:root {
    /* Misma paleta que verificar.losangeles.com.gt — los dos sitios publicos
       del laboratorio se tienen que ver hermanos. */
    --turq:#1ecad3; --turq-deep:#0e7d83;
    --petroleo:#0d3247; --petroleo-2:#12455f;
    --teal:#0E7D83; --hi:#16232B; --lo:#3C4C55; --bg:#F2F6F7;
    /* Bordes: el #D5DEE2 de antes se comia el sol y el campo desaparecia.
       Un campo que no se ve es un campo donde el medico no sabe si toco. */
    --borde:#6B818C;
    --ok:#0E7D83; --no:#C0392B; --okbg:#E3F2F3; --nobg:#FDEDEC;
    /* Ambar: ya se la hicieron pero el valor todavia no esta revisado.
       Ni verde ni rojo — la accion es la misma que en verde (NO lo mandes)
       pero no hay valor que mostrar. */
    --esp:#9A6206; --espbg:#FEF6E6;
  }
  * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html, body { height:100%; }
  body {
    margin:0; font-family:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
    color:var(--hi);
    background:linear-gradient(160deg,var(--petroleo),var(--petroleo-2));
    min-height:100%;
    display:flex; flex-direction:column; align-items:center;
    padding:20px 14px 28px;
  }
  .wrap { width:100%; max-width:460px; display:flex; flex-direction:column; align-items:center; }

  /* La barra del logo: tarjeta blanca aparte, como en el verificador. */
  .logobar {
    background:#fff; border-radius:16px; padding:18px 22px; margin-bottom:16px;
    box-shadow:0 10px 30px rgba(0,0,0,.22);
    width:100%; display:flex; align-items:center; justify-content:center;
    transition:padding .18s ease;
  }
  /* El logo es 661x384 (1.72:1). El tope de ALTO era el que lo estrangulaba:
     lo dejaba en 134px de ancho. Ahora manda el ancho y el alto lo sigue. */
  .logobar img {
    width:62%; max-width:300px; height:auto; display:block;
    transition:width .18s ease;
  }

  /* Ya trabajando, el logo se achica solo. En el canal, cada pixel que ocupa la
     marca es un pixel que no ve el medico del DPI y del veredicto — que es lo
     unico que necesita mirar mientras avanza la fila. La marca importa cuando
     abre la pagina, no en la consulta numero cuatrocientos. */
  body.trabajando .logobar { padding:10px 22px; }
  body.trabajando .logobar img { width:38%; max-width:170px; }

  .card {
    width:100%; background:#fff; border-radius:18px; padding:18px 16px;
    box-shadow:0 18px 50px rgba(0,0,0,.28);
  }

  /* Pie: mismo credito que el verificador. */
  .credit {
    display:inline-flex; align-items:center; gap:8px; margin-top:16px;
    font-size:12px; font-weight:500; color:#9fb3ba; letter-spacing:.01em;
  }
  .credit svg { width:17px; height:17px; color:#18a89a; flex-shrink:0; }
  .credit b { color:#18a89a; font-weight:800; letter-spacing:.08em; }
  h1 { font-size:20px; font-weight:800; margin:0 0 14px; line-height:1.25; }
  label { font-size:15px; font-weight:800; display:block; margin:12px 0 6px; color:var(--hi); }
  input {
    width:100%; border:2px solid var(--borde); border-radius:10px; padding:13px;
    font-size:17px; font-weight:700; font-family:inherit; color:var(--hi);
    outline:none; background:#fff;
  }
  input:focus { border-color:var(--teal); box-shadow:0 0 0 3px #BFE0E2; }
  /* El texto de ayuda tampoco puede ser un fantasma: se tiene que leer QUE
     forma tiene el DPI antes de teclearlo. */
  input::placeholder { color:#7E9099; font-weight:600; opacity:1; }
  /* DPI: letra grande, gruesa y centrada — se lee y se teclea con guantes y sol. */
  #dpi { font-size:30px; font-weight:800; text-align:center; letter-spacing:1px; padding:16px 12px; }
  button {
    width:100%; padding:14px; border:none; border-radius:10px; background:var(--teal);
    color:#fff; font-size:18px; font-weight:800; font-family:inherit; cursor:pointer; margin-top:14px;
  }
  button[disabled] { opacity:.55; cursor:default; }
  .msg { font-size:15px; font-weight:700; margin-top:10px; min-height:18px; line-height:1.4; }
  .msg.err { color:var(--no); }
  .msg.espera { color:#7A5F00; }

  /* ── El veredicto: lo unico que hace falta leer ── */
  .veredicto {
    border-radius:14px; padding:22px 14px; text-align:center; margin-top:14px;
  }
  .veredicto.si { background:var(--okbg); border:3px solid var(--ok); }
  .veredicto.no { background:var(--nobg); border:3px solid var(--no); }
  .veredicto.esp { background:var(--espbg); border:3px solid var(--esp); }
  .veredicto h2 { margin:0; font-size:30px; line-height:1.15; font-weight:900; letter-spacing:-.01em; }
  .veredicto.si h2 { color:var(--ok); }
  .veredicto.no h2 { color:var(--no); }
  .veredicto.esp h2 { color:var(--esp); }
  .veredicto .sub { margin-top:8px; font-size:14.5px; font-weight:700; }
  .veredicto.no .sub { color:var(--no); }
  .veredicto.esp .sub { color:var(--esp); }

  /* ── Ficha del paciente: confirma que es la persona correcta, es secundaria ── */
  .ficha { display:flex; gap:12px; align-items:center; margin-top:14px; }
  /* Era gris claro con letra BLANCA encima: al sol desaparecia entero. */
  .iniciales {
    width:58px; height:58px; border-radius:12px; background:var(--teal); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; flex:0 0 auto;
  }
  .nom { font-size:17px; font-weight:800; line-height:1.25; }
  /* El DPI y la edad son lo que el medico usa para confirmar que le esta
     contestando de la persona que tiene enfrente. Eso NO es letra chica. */
  .met { font-size:14px; font-weight:600; color:var(--lo); margin-top:3px; }

  /* ── Detalle: fecha, sede, valor — el dato fino, no el titular ── */
  .detalle { margin-top:10px; }
  .dato {
    display:flex; justify-content:space-between; gap:10px; font-size:15.5px;
    font-weight:600; color:var(--lo); padding:7px 0;
    border-bottom:1px solid #D5DEE2;
  }
  .dato:last-child { border-bottom:none; }
  .dato b { font-variant-numeric:tabular-nums; text-align:right; color:var(--hi); font-weight:800; }

  /* La cuenta de la jornada. Tres columnas IGUALES: con `min-width` cada celda
     medía lo que medía su rotulo y los numeros quedaban desfasados. */
  .cuenta {
    display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
    margin-top:18px; text-align:center;
  }
  .cuenta div {
    background:#F2F6F7; border:1px solid #D5DEE2; border-radius:12px;
    padding:10px 4px 8px;
  }
  .cuenta b {
    display:block; font-size:26px; font-weight:800; line-height:1.05;
    color:var(--hi); font-variant-numeric:tabular-nums;
  }
  .cuenta span {
    display:block; margin-top:4px; font-size:11px; font-weight:800;
    letter-spacing:.03em; text-transform:uppercase; color:var(--lo); line-height:1.2;
  }
  /* Los dos que importan van del color de su veredicto: de un vistazo, cuantos
     ya estan y cuantos hay que mandar, sin leer el rotulo. */
  .cuenta .c-si  { background:var(--okbg);  border-color:var(--ok); }
  .cuenta .c-si b, .cuenta .c-si span   { color:var(--ok); }
  .cuenta .c-no  { background:var(--nobg); border-color:var(--no); }
  .cuenta .c-no b, .cuenta .c-no span   { color:var(--no); }
  .salir { background:none; color:var(--lo); font-weight:700; font-size:15px; padding:10px; margin-top:18px; }
  /* ── El ojito de la clave ──
     Con guantes y sol se teclea mal y no hay forma de saber que se escribio.
     Sin esto, el unico camino es fallar, esperar el mensaje, y volver a
     intentar — y a los 5 intentos la cuenta se bloquea 15 minutos. */
  .campo { position:relative; }
  .campo input { padding-right:56px; }
  .ojo {
    position:absolute; right:5px; top:50%; transform:translateY(-50%);
    width:46px; height:46px;            /* blanco de toque grande: va con guante */
    margin:0; padding:0; border:none; border-radius:9px;
    background:none; color:var(--lo);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .ojo:active { background:#E3F2F3; }
  .ojo svg { width:26px; height:26px; }

  .oculto { display:none; }