/* ============================================================================
   PORTAL DE LA PACIENTE · identidad de Hestia Fertility
   ----------------------------------------------------------------------------
   ⛔ LOS COLORES NO SON INVENTADOS: están medidos de hestiafertility.com.
      #FAFBF0 marfil (su fondo)   ·   #2F3A26 verde bosque (su texto)
      #F4AD95 durazno (su botón)  ·   #AFC9AB salvia   ·   #4F702D olivo
      #B3452F terracota           ·   Montserrat (su tipografía)

   ⚠ Y NO es el rosa del ERP. El ERP usa #c46a7a porque es una herramienta
   interna; esto lo abre una paciente en su teléfono y tiene que sentirse como
   el sitio de la clínica, no como el sistema de administración.

   ⛔ UN CAMBIO RESPECTO AL SITIO, A PROPÓSITO: el título y los importes van en
   una serif ligera (Cormorant Garamond) y no en Montserrat pesada. El sitio es
   una página de venta y grita; esto es el expediente de una mujer y su
   tratamiento. La serif echa mano del logotipo —que es una Didone— y baja el
   volumen.

   ⚠ Pero SÓLO ahí. Cormorant dibuja la tilde alta y separada de la letra, y el
   español de este producto está lleno de acentos: en «Fertilización» o
   «Estimulación» el acento se ve flotando. Los nombres de tratamiento van en
   Montserrat. Se descubrió mirando la pantalla, no leyendo el código.

   ⚠ El botón lleva texto VERDE sobre durazno, no blanco. Blanco sobre #F4AD95
   da 1.9:1 de contraste y no se lee al sol; el verde bosque da 7.5:1.
   ============================================================================ */

/* ⛔ Las tipografías NO se cargan con @import: van en un <link> en index.html.
   Un `@import` dentro del CSS bloquea el pintado hasta que baja la hoja de
   fuera, y además esconde la dependencia — hay que abrir el CSS para verla.
   La CSP tiene que permitir fonts.googleapis.com y fonts.gstatic.com; si no,
   el navegador las bloquea EN SILENCIO y la página sale con fuentes de
   sistema sin que nada lo diga. Pasó el 26-ago-2026. */

:root {
  --marfil:     #FAFBF0;
  --marfil-2:   #F3F4E6;
  --tarjeta:    #FFFFFF;
  --bosque:     #2F3A26;
  --bosque-2:   #56604B;
  --tenue:      #8A9280;
  --durazno:    #F4AD95;
  --durazno-2:  #FBDDD2;
  --salvia:     #AFC9AB;
  --salvia-2:   #E6EFE4;
  --olivo:      #4F702D;
  --terracota:  #B3452F;
  --terracota-2:#FBEAE5;
  --linea:      #E2E4D2;
  --linea-2:    #EEEFE2;
  /* ⛔ EL TEXTO SOBRE EL DURAZNO NO CAMBIA CON EL TEMA, porque el durazno
     tampoco. Usándolo con `--bosque` el botón salía con texto CLARO sobre durazno
     en modo oscuro — 1.9:1, justo el contraste que este archivo dice que no
     sirve. Se vio probando el tema oscuro, no leyendo el CSS. */
  --sobre-durazno: #2F3A26;

  --sans:  'Montserrat', ui-sans-serif, system-ui, -apple-system, sans-serif;
  /* ⛔ LA TIPOGRAFÍA DE TÍTULOS ES LA DE LA MARCA. El brandbook manda Cabrito Didone
     Norm, que es comercial: quien tenga la licencia instalada ve la original, y el resto
     ve **Playfair Display**, que es el sustituto APROBADO. Antes había Cormorant Garamond
     — bonita, pero no es de Hestia. */
  --display: 'Cabrito Didone Norm', 'Playfair Display', ui-serif, Georgia, serif;
  /* Las dos formas de la marca: la píldora (esquinas totalmente redondeadas) es un recurso
     gráfico característico del brandbook, y la tarjeta va a 24 px como dice su token. */
  --radio: 22px;
  --radio-chico: 12px;
  --pildora: 999px;
  --sombra: 0 1px 2px rgba(47,58,38,.04), 0 8px 24px -12px rgba(47,58,38,.10);
}

/* Modo oscuro: el sitio de la clínica no lo tiene, pero esto se abre de noche
   en un teléfono. Se conserva la identidad — el verde pasa a ser el FONDO. */
@media (prefers-color-scheme: dark) {
  :root {
    --marfil:     #191D17;
    --marfil-2:   #212619;
    --tarjeta:    #232A20;
    --bosque:     #EDEFE0;
    --bosque-2:   #B6BCA8;
    --tenue:      #838B78;
    --durazno:    #F4AD95;
    --durazno-2:  #40302A;
    --salvia:     #7FA37A;
    --salvia-2:   #253021;
    --olivo:      #9BC072;
    --terracota:  #EE8E75;
    --terracota-2:#3A231C;
    --linea:      #333A2C;
    --linea-2:    #2A3123;
    --sombra: 0 1px 2px rgba(0,0,0,.2), 0 8px 24px -12px rgba(0,0,0,.4);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--marfil);
  color: var(--bosque);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  justify-content: center;
  padding: 34px 18px 40px;
}

/* Un halo muy tenue detrás del contenido, como el aire de su sitio. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 42% at 50% -6%, var(--durazno-2) 0%, transparent 62%),
    radial-gradient(55% 40% at 92% 104%, var(--salvia-2) 0%, transparent 60%);
  opacity: .75;
}

.tarjeta {
  width: 100%; max-width: 520px;
  display: flex; flex-direction: column;
}

/* ── Cabeza ──────────────────────────────────────────────────────────────── */
.cabeza { text-align: center; margin-bottom: 30px; }
/* ⛔ 96 px, no 62. El logotipo es un ARO con «HESTIA FERTILITY» escrito
   alrededor: a 62 px esas letras son ilegibles y la marca se ve como una mancha.
   Sin `border-radius` — el PNG ya es redondo y recortarlo le comería el aro. */
.logo {
  width: 96px; height: 96px;
  object-fit: contain; margin-bottom: 10px;
  /* ⛔ EL PNG NO TIENE TRANSPARENCIA (es RGB, no RGBA), así que arrastra un
     CUADRO BLANCO. Sobre el marfil #FAFBF0 se ve, y en una pantalla de marca eso
     canta. `multiply` hace que el blanco desaparezca en cualquier fondo más
     claro que él, y el durazno del logotipo se conserva.
     ⭐ Lo bueno sería un PNG con transparencia; esto es el arreglo de mientras. */
  mix-blend-mode: multiply;
}
/* En oscuro `multiply` borraría el logotipo (todo es más oscuro que el blanco),
   así que ahí el blanco se asume: queda una moneda clara con la marca dentro. */
@media (prefers-color-scheme: dark) {
  .logo {
    mix-blend-mode: normal;
    background: #fff; border-radius: 50%; padding: 6px;
  }
}
#titulo {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.1rem, 8vw, 2.7rem); line-height: 1.06;
  letter-spacing: .005em; margin: 0; color: var(--bosque);
}
/* El filete corto bajo el título: es su remate de sección. */
#titulo::after {
  content: ''; display: block; width: 46px; height: 2px;
  background: var(--durazno); margin: 15px auto 0;
}
.sub {
  font-size: 13px; font-weight: 500; letter-spacing: .04em;
  color: var(--bosque-2); margin: 14px 0 0;
}

/* ── Avisos ──────────────────────────────────────────────────────────────── */
.aviso {
  font-size: 13.5px; line-height: 1.5; border-radius: 10px;
  padding: 12px 15px; margin: 0 0 20px;
  background: var(--marfil-2); color: var(--bosque-2);
  border-left: 3px solid var(--linea);
}
.aviso.malo { background: var(--terracota-2); color: var(--terracota); border-left-color: var(--terracota); }
.aviso.bien { background: var(--salvia-2); color: var(--olivo); border-left-color: var(--salvia); }

/* ── Formularios ─────────────────────────────────────────────────────────── */
.paso { display: flex; flex-direction: column; }
.explica {
  font-size: 14px; line-height: 1.55; color: var(--bosque-2);
  margin: 0 0 22px; text-align: center;
}
.etq {
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tenue);
  margin: 0 0 7px 2px;
}
.etq + .campo { margin-bottom: 18px; }
.campo {
  width: 100%; font-family: inherit; font-size: 15.5px; color: var(--bosque);
  background: var(--tarjeta);
  border: 1px solid var(--linea); border-radius: 11px;
  padding: 14px 16px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.campo::placeholder { color: var(--tenue); }
.campo:focus {
  outline: none; border-color: var(--salvia);
  box-shadow: 0 0 0 3px var(--salvia-2);
}
.campo.codigo {
  text-align: center; letter-spacing: .34em; font-size: 22px;
  font-weight: 600; font-variant-numeric: tabular-nums;
}
select.campo { appearance: none; -webkit-appearance: none; cursor: pointer; }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.btn {
  width: 100%; font-family: inherit; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--pildora);
  padding: 16px 22px; margin-top: 4px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
  transition: transform .12s ease, background .16s ease, border-color .16s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
/* Verde sobre durazno: blanco sobre #F4AD95 no se lee al sol. */
.btn.primario { background: var(--durazno); color: var(--sobre-durazno); }
.btn.primario:hover:not(:disabled) { background: #EF9C80; }
/* El secundario habla más bajo: sin mayúsculas ni tracking. En mayúsculas su
   texto partía en dos líneas y pesaba más que el botón principal, que es al revés
   de lo que debe. */
.btn.plano {
  background: transparent; color: var(--bosque-2);
  border-color: var(--linea); margin-top: 10px;
  text-transform: none; letter-spacing: .01em;
  font-size: 13.5px; font-weight: 600;
}
.btn.plano:hover:not(:disabled) { border-color: var(--salvia); color: var(--olivo); }
.btn:focus-visible, .campo:focus-visible, .pest:focus-visible, .op-ver:focus-visible,
.op-factura:focus-visible, a:focus-visible {
  outline: 2px solid var(--olivo); outline-offset: 2px;
}

.pie {
  font-size: 12.5px; line-height: 1.5; color: var(--tenue);
  margin: 16px 2px 0; text-align: center;
}
.pie strong { color: var(--bosque-2); font-weight: 600; }

/* ── Pestañas ────────────────────────────────────────────────────────────── */
.pestanas {
  display: flex; gap: 3px; margin-bottom: 24px;
  background: var(--marfil-2); border-radius: var(--pildora); padding: 4px;
}
.pest {
  flex: 1; border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 11.5px; font-weight: 600;
  letter-spacing: .04em; color: var(--bosque-2);
  padding: 10px 4px; border-radius: var(--pildora); line-height: 1.3;
  transition: background .16s ease, color .16s ease;
}
.pest.activa {
  background: var(--tarjeta); color: var(--bosque);
  box-shadow: 0 1px 3px rgba(47,58,38,.08);
}

/* ── Mi tratamiento ──────────────────────────────────────────────────────── */
.ciclo {
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 24px 22px; margin-bottom: 16px;
}
/* ⛔ EN MONTSERRAT, NO EN LA SERIF, Y NO ES CAPRICHO. Cormorant dibuja la tilde
   alta y separada de la letra: en «Fertilización», «Estimulación», «Valoración»
   se lee como si el acento flotara. El español de este producto está lleno de
   acentos, así que sería un tropezón en CADA nombre de tratamiento.
   La serif se queda para los momentos de marca — el título y el importe—, que no
   llevan acentos. Se vio mirando la pantalla, no leyendo el código. */
.ciclo-titulo {
  font-family: var(--sans); font-weight: 600; font-size: 1.22rem;
  letter-spacing: -.015em; line-height: 1.25; margin: 0 0 6px; color: var(--bosque);
}
.ciclo-meta {
  font-size: 12px; font-weight: 500; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tenue); margin: 0 0 20px;
}
.barra {
  height: 7px; border-radius: 99px; background: var(--marfil-2);
  overflow: hidden; margin-bottom: 9px;
}
.barra span {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--salvia), var(--olivo));
  transition: width .5s ease;
}
.avance {
  font-size: 12.5px; font-weight: 600; color: var(--olivo);
  margin: 0 0 20px; letter-spacing: .02em;
}

.fases { list-style: none; margin: 0; padding: 0; }
.fase {
  display: flex; gap: 14px; padding: 13px 0;
  border-top: 1px solid var(--linea-2);
}
.fase:first-child { border-top: 0; padding-top: 4px; }
/* El estado es un punto, no un emoji: los emoji se ven distintos en cada
   teléfono y en algunos ni salen. */
.fase-marca {
  flex: 0 0 auto; width: 13px; height: 13px; margin-top: 5px;
  border-radius: 50%; border: 2px solid var(--linea);
  background: var(--tarjeta);
}
.fase.cerrada  .fase-marca { background: var(--olivo);  border-color: var(--olivo); }
.fase.en_curso .fase-marca {
  background: var(--durazno); border-color: var(--durazno);
  box-shadow: 0 0 0 4px var(--durazno-2);
}
.fase.saltada  .fase-marca { background: var(--linea); border-color: var(--linea); }
.fase-cuerpo { flex: 1; min-width: 0; }
.fase-nombre { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.fase.cerrada .fase-nombre { color: var(--bosque-2); font-weight: 500; }
.fase.en_curso .fase-nombre { color: var(--bosque); }
.fase-dato { font-size: 12.5px; color: var(--tenue); margin-top: 2px; }

/* ── Estado de cuenta ────────────────────────────────────────────────────── */
/* ⛔ REJILLA, no flex. Con `flex:1` un importe largo empuja su celda más allá del
   ancho de la pantalla — a 375 px, «$38,500.00» se salía cortado por la derecha.
   `minmax(0, 1fr)` obliga a las tres a caber. Se vio en el teléfono, no en el código. */
.resumen-caja {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; margin-bottom: 20px;
}
.resumen-item {
  min-width: 0; text-align: center; padding: 14px 6px;
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: 12px;
}
.resumen-etq {
  font-size: 10px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tenue);
}
.resumen-num {
  font-size: 15px; font-weight: 700; margin-top: 5px;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.resumen-item.debe { background: var(--terracota-2); border-color: transparent; }
.resumen-item.debe .resumen-etq { color: var(--terracota); }
.resumen-item.debe .resumen-num { color: var(--terracota); }
.resumen-nota {
  font-size: 12px; color: var(--tenue); text-align: center;
  margin: -10px 0 18px;
}

.op {
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 18px 20px; margin-bottom: 12px;
}
/* Una cancelada se ve distinta a propósito: si se viera igual, su importe
   parecería deuda y esa llamada la contesta quien menos contexto tiene. */
.op.cancelada { opacity: .62; box-shadow: none; }
.op.cancelada .op-folio { text-decoration: line-through; }
.op-enc { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.op-folio {
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  color: var(--bosque-2);
}
.op-fecha { font-size: 12px; color: var(--tenue); }
.op-cifras {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-top: 8px;
}
.op-total {
  font-family: var(--display); font-weight: 500; font-size: 1.65rem;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.op-saldo {
  font-size: 12px; font-weight: 700; color: var(--terracota);
  background: var(--terracota-2); padding: 4px 10px; border-radius: 99px;
  white-space: nowrap;
}
.op-pagada {
  font-size: 12px; font-weight: 700; color: var(--olivo);
  background: var(--salvia-2); padding: 4px 10px; border-radius: 99px;
  white-space: nowrap;
}
.op-pie {
  font-size: 12px; color: var(--tenue); margin-top: 9px;
  padding-top: 9px; border-top: 1px solid var(--linea-2);
}
/* El folio fiscal va completo y seleccionable: es lo que le pide su contador. */
.op-uuid {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; color: var(--tenue); margin-top: 5px;
  word-break: break-all; user-select: all; line-height: 1.45;
}
/* Sus dos archivos, uno al lado del otro. El XML es el documento fiscal valido
   (el que pide su contador) y el PDF el que ella entiende: dar solo uno la
   obliga a llamar a la clinica por el otro. */
/* ── Pagar lo que debe ─────────────────────────────────────────────────────
   La referencia va PRIMERO y grande: es lo unico que ella tiene que copiar
   bien, y de eso depende que su pago se encuentre el mismo dia. */
.op-pagar {
  margin-top: 12px; border: 1px solid var(--olivo); background: transparent;
  cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700;
  color: var(--olivo); padding: 11px 18px; border-radius: var(--pildora); width: 100%;
}
.op-pagar:hover { background: var(--linea-2); }
.op-pagar:focus-visible { outline: 2px solid var(--olivo); outline-offset: 2px; }

.pago-caja {
  margin-top: 11px; padding: 15px 16px; border-radius: 13px;
  background: var(--linea-2); font-size: 13px; line-height: 1.5;
}
.pago-titulo {
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tenue); margin-bottom: 11px;
}
/* ── Por aceptar y pagar ───────────────────────────────────────────────────
   Se ve DISTINTO de su estado de cuenta a proposito: no es deuda, es una
   propuesta. El borde punteado y el fondo claro lo dicen sin decirlo. */
.ordenes { margin-bottom: 26px; }
.ordenes-titulo {
  font-family: var(--display); font-size: 19px; font-weight: 400;
  margin: 0 0 4px; color: var(--tinta);
}
.ordenes-nota { font-size: 12.5px; color: var(--tenue); margin: 0 0 13px; line-height: 1.5; }
.orden {
  border: 1px dashed var(--linea); border-radius: var(--radio);
  padding: 15px 16px; margin-bottom: 11px; background: var(--fondo);
}
.orden-cab {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap; margin-bottom: 6px;
}
.orden-folio { font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.orden-vig { font-size: 11.5px; color: var(--tenue); }
.orden-que { font-size: 13px; line-height: 1.5; margin-bottom: 8px; }
.orden-monto {
  font-family: var(--display); font-size: 25px;
  margin-bottom: 12px; color: var(--tinta);
}

/* El unico camino que se acredita SOLO: va primero y se ve como el principal. */
.pago-tarjeta {
  display: block; text-align: center; text-decoration: none;
  background: var(--olivo); color: var(--fondo);
  font-family: inherit; font-size: 13px; font-weight: 700;
  padding: 14px 20px; border-radius: var(--pildora); margin-bottom: 4px;
}
.pago-tarjeta:hover { opacity: .9; }
.pago-tarjeta:focus-visible { outline: 2px solid var(--olivo); outline-offset: 3px; }
.pago-o {
  text-align: center; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tenue); margin: 14px 0 11px;
}

.pago-ref {
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 13px; border-radius: 10px; background: var(--fondo);
  border: 1px dashed var(--olivo);
}
.pago-ref-et {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tenue);
}
.pago-ref-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 17px; letter-spacing: .04em; user-select: all; color: var(--olivo);
}
.pago-ayuda { font-size: 11.5px; color: var(--tenue); margin: 7px 0 13px; }
.pago-fila {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 0; border-top: 1px solid var(--fondo);
}
.pago-et { color: var(--tenue); font-size: 12px; flex-shrink: 0; }
.pago-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; user-select: all; text-align: right; word-break: break-all;
}
.pago-nota, .pago-tarda {
  font-size: 11.5px; color: var(--tenue); margin-top: 11px; line-height: 1.5;
}
.pago-sub { margin-top: 13px; }
.pago-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.op-liga.ocupado { opacity: .55; pointer-events: none; }
.pago-eco { font-size: 11.5px; color: var(--tenue); margin-top: 7px; }

.op-descargas {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px;
}
.op-liga {
  border: 1px solid var(--linea-2); background: transparent; cursor: pointer;
  font-family: inherit; font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; color: var(--olivo);
  padding: 8px 16px; border-radius: var(--pildora); line-height: 1.2;
  transition: background .15s ease, border-color .15s ease;
}
.op-liga:hover:not(:disabled) { background: var(--linea-2); }
.op-liga:disabled { opacity: .55; cursor: default; }
.op-liga:focus-visible { outline: 2px solid var(--olivo); outline-offset: 2px; }

.op-ver {
  margin-top: 12px; border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 11.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--olivo); padding: 4px 0;
}
.op-ver:hover { color: var(--bosque); }
.op-detalle { margin-top: 12px; border-top: 1px solid var(--linea-2); padding-top: 12px; }

.det-titulo {
  font-size: 10px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tenue); margin: 12px 0 6px;
}
.det-lista { list-style: none; margin: 0; padding: 0; }
.det-linea {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap; padding: 8px 0;
  border-bottom: 1px solid var(--linea-2);
}
.det-linea:last-child { border-bottom: 0; }
.det-nom { flex: 1; min-width: 55%; font-size: 14px; line-height: 1.45; }
.det-imp {
  font-size: 14px; font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.det-desc { flex-basis: 100%; font-size: 12px; color: var(--olivo); }
.det-origen {
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
  color: var(--bosque-2); background: var(--marfil-2);
  padding: 3px 9px; border-radius: 99px; white-space: nowrap;
}

/* ── Pedir factura ───────────────────────────────────────────────────────── */
.op-factura {
  margin-top: 14px; width: 100%; cursor: pointer;
  font-family: inherit; font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--bosque); background: var(--durazno-2);
  border: 1px solid var(--durazno); border-radius: 10px; padding: 11px 14px;
  transition: background .16s ease;
}
.op-factura:hover { background: var(--durazno); color: var(--sobre-durazno); }
.op-estado-fact {
  font-size: 12.5px; color: var(--bosque-2); margin-top: 11px;
  background: var(--marfil-2); padding: 9px 12px; border-radius: 9px;
  line-height: 1.45;
}

/* ── Medicamentos ────────────────────────────────────────────────────────── */
.med-grupo {
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 18px 20px; margin-bottom: 12px;
}
.med-fecha {
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tenue);
  margin: 0 0 8px;
}

/* ── Vacío ───────────────────────────────────────────────────────────────── */
.vacio {
  background: var(--tarjeta); border: 1px dashed var(--linea);
  border-radius: var(--radio); padding: 34px 24px;
  text-align: center; color: var(--bosque-2); font-size: 14px; line-height: 1.6;
}

/* ── Pie ─────────────────────────────────────────────────────────────────── */
.pie-clinica {
  margin-top: 30px; text-align: center;
  font-size: 12.5px; color: var(--tenue);
}
.pie-clinica a {
  color: var(--olivo); font-weight: 700; text-decoration: none;
  border-bottom: 1px solid var(--salvia);
}
.pie-clinica a:hover { color: var(--bosque); }

.oculto { display: none; }

/* ══ VISTA DE COMPUTADORA ═══════════════════════════════════════
   Hasta aquí todo está pensado para el teléfono, que es donde se va a abrir casi
   siempre. En una pantalla grande esa misma columna de 520 px se ve como una
   tira perdida en medio del vacío.

   ⛔ PERO NO TODO SE ENSANCHA. Los formularios se quedan angostos: un campo de
   correo de 800 px de ancho es ridículo y además cuesta leerlo — el ojo pierde
   el renglón. Lo que crece es el EXPEDIENTE, que es lista y se aprovecha en dos
   columnas. */
@media (min-width: 860px) {
  body { padding: 52px 32px 64px; }
  .tarjeta { max-width: 880px; }

  .cabeza { margin-bottom: 38px; }
  .logo { width: 108px; height: 108px; }
  #titulo { font-size: 3.1rem; }
  .sub { font-size: 14px; }

  /* Los formularios, centrados y angostos. */
  #paso-entrar, #paso-activar, #paso-factura {
    max-width: 420px; margin: 0 auto; width: 100%;
  }
  .aviso { max-width: 560px; margin-left: auto; margin-right: auto; }

  /* Las pestañas no se estiran a lo tonto: quedan al centro, a su medida. */
  .pestanas { max-width: 560px; margin: 0 auto 28px; }
  .pest { padding: 11px 18px; font-size: 12.5px; }

  /* El expediente en DOS columnas: son listas y caben de sobra. */
  #cuenta, #medicamentos {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px; align-items: start;
  }
  /* ⚠ Cada tarjeta manda su propio margen inferior; en rejilla eso sumaría al
     `gap` y las filas quedarían desparejas. */
  #cuenta .op, #medicamentos .med-grupo { margin-bottom: 0; }
  /* Al abrir el detalle la tarjeta crece mucho: ocupa las dos columnas para que
     no empuje a su vecina ni deje un hueco alto al lado. */
  #cuenta .op:has(.op-detalle:not(.oculto)) { grid-column: 1 / -1; }

  .resumen-caja { max-width: 560px; margin: 0 auto 22px; }
  .resumen-num { font-size: 18px; }
  .resumen-item { padding: 18px 10px; }
  .resumen-nota { margin-top: -14px; }

  /* El ciclo se queda en una sola columna: es UNA cosa y partirla en dos no
     ayuda a leerla. */
  #ciclos { max-width: 640px; margin: 0 auto; }
  .ciclo { padding: 30px 30px; }

  .vacio { max-width: 560px; margin: 0 auto; }
  #btn-salir { max-width: 260px; margin: 28px auto 0; }

  /* ── Lo que nació después de este bloque ──────────────────────────────────
     Las órdenes, el panel de pago y las descargas se escribieron pensando en el
     teléfono. En rejilla de dos columnas se aprietan, y justo ahí viven los
     datos que ella tiene que COPIAR BIEN: una CLABE de 18 dígitos partida en
     tres renglones se teclea mal. */

  /* Las propuestas van ANCHO COMPLETO, arriba de sus operaciones: es lo primero
     que se lee y lo único que pide una decisión. */
  .ordenes { grid-column: 1 / -1; max-width: 640px; margin: 0 auto 30px; }
  .ordenes-titulo { font-size: 22px; }
  .orden { padding: 20px 22px; }
  .orden-monto { font-size: 29px; }

  /* ⛔ LA TARJETA CON EL PANEL DE PAGO ABIERTO OCUPA LAS DOS COLUMNAS. Es el
     mismo trato que ya tenía el detalle, y por la misma razón: al abrirse crece
     mucho, y en media columna la CLABE y la referencia quedan estrujadas contra
     el borde. */
  #cuenta .op:has(.pago-caja) { grid-column: 1 / -1; }

  .pago-caja { padding: 20px 22px; }
  .pago-ref { padding: 14px 16px; }
  .pago-ref-val { font-size: 20px; }
  /* Con sitio de sobra, etiqueta y valor en dos columnas fijas: así los valores
     quedan alineados entre sí y se leen de una pasada, no en zigzag. */
  .pago-fila {
    display: grid; grid-template-columns: 150px 1fr;
    align-items: baseline; padding: 8px 0;
  }
  .pago-val { text-align: left; font-size: 13.5px; }
  .pago-tarjeta { padding: 14px 18px; font-size: 14px; }

  /* Los dos archivos, uno al lado del otro y con aire. */
  .op-descargas { gap: 10px; }
  .op-liga { padding: 9px 16px; }
}

/* ── Pantallas grandes de verdad ────────────────────────────────────────────
   ⚠ SE CRECE POCO Y A PROPÓSITO. Un portal que se estira a 1600 px no se lee
   mejor: se lee peor, porque el ojo pierde el renglón. Lo que gana con el
   ancho son las TARJETAS — caben los conceptos sin partirse y la CLABE en un
   solo renglón—, no el texto. */
@media (min-width: 1180px) {
  body { padding: 60px 40px 72px; }
  .tarjeta { max-width: 1040px; }
  #cuenta, #medicamentos { gap: 18px; }
  .op { padding: 24px 26px; }
  .ordenes { max-width: 720px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}