/*
 * Mediclad — sistema visual del sitio y del panel.
 *
 * Un solo archivo para el registro público y el panel del cliente. Quien pasa
 * de la página de precios a su cuenta no debería notar que cambió de sitio.
 *
 * Fondo profundo y acento turquesa, igual que la aplicación Android. Es una
 * decisión y no una copia: la mayoría del software de salud es blanco y azul
 * clínico, y este producto se mira de noche, junto a una cama, en el teléfono
 * de alguien preocupado. El fondo oscuro es lo correcto ahí, y de paso hace
 * que el producto se reconozca.
 *
 * Sin framework y sin paso de compilación, como el resto del servidor.
 */

:root {
  /* --- superficie ------------------------------------------------------ */
  --pg:     #07182a;   /* fondo de página */
  --pg2:    #0a1f35;   /* bandas alternas */
  --sf:     #0f2c45;   /* tarjeta */
  --sf2:    #143755;   /* tarjeta elevada */
  --ink:    #061423;   /* hueco, campos */
  --solid:  #123c5e;   /* bloque sólido, barra */

  /* --- texto ----------------------------------------------------------- */
  /* Los tres grises están calculados contra el fondo MÁS CLARO sobre el que
     llegan a pintarse, que es --solid, no el fondo de página. Medirlos contra
     la página daba un --m3 aparentemente correcto que dentro de una tarjeta
     caía a 4.13:1 — y .tenue vive casi siempre dentro de una tarjeta.
     Con estos valores: m1 7.5:1, m2 5.2:1, m3 4.6:1 en el peor caso. */
  --tx:     #eef4f9;
  --m1:     rgba(238, 244, 249, 0.82);
  --m2:     rgba(238, 244, 249, 0.64);
  --m3:     rgba(238, 244, 249, 0.58);

  /* --- líneas ---------------------------------------------------------- */
  --ln:     rgba(255, 255, 255, 0.11);
  --ln2:    rgba(255, 255, 255, 0.22);
  --ln3:    rgba(255, 255, 255, 0.34);

  /* --- acentos --------------------------------------------------------- */
  --teal:   #00c4b5;
  --teal2:  #4fe0d4;
  --teal-d: #00a497;
  --crit:   #ff6a5c;
  --warn:   #f0ae4a;
  --ok:     #46d39a;

  /* --- forma ----------------------------------------------------------- */
  --r:      14px;
  --r-s:    10px;
  --r-l:    20px;

  /* Escala de espaciado. Densidad media: ni marketing aireado ni tablero
     apretado. El sitio hace las dos cosas. */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;

  --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.22);
  --paso: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--pg);
  color: var(--tx);
  font-family: Barlow, system-ui, -apple-system, sans-serif;
  font-size: 16px;          /* nunca menos: es el cuerpo de texto */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Quien pidió menos movimiento recibe menos movimiento. No es un detalle de
   cortesía: para algunas personas una animación es un mareo. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ================================================================ tipografía */

h1, h2, h3, h4, .cifra, .rotulo, .num, button, .boton, .marca, .tab, th {
  font-family: 'Barlow Condensed', Barlow, sans-serif;
}

h1, h2, h3, h4 { margin: 0 0 var(--e2); font-weight: 600; line-height: 1.06; }

h1 { font-size: clamp(34px, 6vw, 60px); letter-spacing: -0.01em; }
h2 { font-size: clamp(26px, 4vw, 38px); }
h3 { font-size: 22px; }
h4 { font-size: 18px; }

/* Un título de dos líneas no debe dejar una palabra suelta abajo. */
h1, h2, h3 { text-wrap: balance; }

p { margin: 0 0 var(--e3); }
p:last-child { margin-bottom: 0; }

.rotulo {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--m3);
  margin-bottom: var(--e2);
}

.guia   { font-size: 18px; color: var(--m1); max-width: 62ch; }
.apagado{ color: var(--m2); }
.tenue  { color: var(--m3); font-size: 14px; }
.num    { font-variant-numeric: tabular-nums; }

a { color: var(--teal2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--teal); }

/* El foco se ve siempre. Quitarlo deja el sitio inservible con teclado. */
:focus-visible {
  outline: 3px solid var(--teal2);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==================================================================== marco */

.envoltorio { max-width: 1120px; margin: 0 auto; padding: 0 var(--e5); }
.estrecho   { max-width: 720px; margin: 0 auto; padding: 0 var(--e5); }

.seccion { padding: var(--e8) 0; }
.seccion.alterna { background: var(--pg2); }

.barra {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--e4);
  /* Menos aire arriba y abajo que antes: con un logotipo de 69 px, el relleno
     de 12 dejaba una barra de 93 px pegada en lo alto de la pantalla. */
  padding: var(--e2) var(--e5);
  background: rgba(7, 24, 42, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ln);
}
.barra .crece { flex: 1; }

/* La marca es el logotipo, que ya trae la palabra dentro. El nombre viaja
   igualmente en el `alt` para quien no ve la imagen o no llega a cargarse. */
.marca {
  display: inline-flex; align-items: center;
  text-decoration: none;
  /* Reserva la altura antes de que cargue la imagen, para que la barra no
     pegue un salto al terminar de pintarse. */
  min-height: 69px;
}
.marca img {
  height: 69px; width: auto;   /* 180 x 69, sobre un original de 464 x 177 */
  display: block;
}
.marca.grande img { height: 96px; }

/* En un teléfono, 180 px de logotipo más «Entrar» y «Crear cuenta» no caben
   en 360. Se reduce lo justo para que quepan los tres, que es lo que hace
   falta ahí: sin el botón de entrar la barra no sirve de nada. */
@media (max-width: 720px) {
  .marca, .marca img { min-height: 44px; height: 44px; }
  .marca.grande img { height: 64px; }
}

/* ================================================================= piezas */

.tarjeta {
  background: var(--sf);
  border: 1px solid var(--ln);
  border-radius: var(--r);
  padding: var(--e4);
}
.tarjeta + .tarjeta { margin-top: var(--e3); }
.tarjeta.plana { background: transparent; }
.tarjeta.honda { background: var(--ink); }
.tarjeta.alta  { background: var(--sf2); box-shadow: var(--sombra); }

.filo-teal { border-left: 3px solid var(--teal); }
.filo-warn { border-left: 3px solid var(--warn); }
.filo-crit { border-left: 3px solid var(--crit); }
.filo-ok   { border-left: 3px solid var(--ok); }
.filo-mudo { border-left: 3px solid var(--ln2); }

.pulsable {
  cursor: pointer;
  transition: border-color var(--paso), background var(--paso);
  text-align: left; width: 100%;
}
.pulsable:hover { border-color: var(--ln3); background: var(--sf2); }

.fila { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.fila.arriba { align-items: flex-start; }
.pila { display: flex; flex-direction: column; gap: var(--e3); }
.tira { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }

.rejilla { display: grid; gap: var(--e3); }
.rejilla.dos  { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.rejilla.tres { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ============================================================== distintivos */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--ln2);
  font-size: 13px;
  color: var(--m1);
  /* Un distintivo no parte su etiqueta en dos líneas. */
  white-space: nowrap;
}
.chip i { font-size: 11px; }
.chip.teal { border-color: var(--teal); color: var(--teal2); background: rgba(0, 196, 181, 0.1); }
.chip.warn { border-color: var(--warn); color: var(--warn); background: rgba(240, 174, 74, 0.1); }
.chip.crit { border-color: var(--crit); color: var(--crit); background: rgba(255, 106, 92, 0.1); }
.chip.ok   { border-color: var(--ok);   color: var(--ok);   background: rgba(70, 211, 154, 0.1); }
.chip.mudo { color: var(--m3); }

/* Círculo con iniciales. Evita pedir una foto que nadie va a subir. */
.avatar {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--solid);
  border: 1px solid var(--ln2);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px; font-weight: 600;
  color: var(--teal2);
}
.avatar.medico { background: rgba(0, 196, 181, 0.14); border-color: var(--teal); }

/* =================================================================== formas */

label { display: block; margin-bottom: var(--e4); }
label > .rotulo { margin-bottom: 6px; }

input[type=text], input[type=email], input[type=password],
input[type=tel], input[type=number], input[type=date], select, textarea {
  width: 100%;
  min-height: 50px;              /* toque cómodo, por encima del mínimo */
  padding: 12px 14px;
  background: var(--ink);
  border: 1px solid var(--ln2);
  border-radius: var(--r-s);
  color: var(--tx);
  font-family: Barlow, sans-serif;
  font-size: 16px;               /* menos de 16 hace que iOS haga zoom */
  transition: border-color var(--paso);
}
input:hover, select:hover, textarea:hover { border-color: var(--ln3); }
input:focus, select:focus, textarea:focus { border-color: var(--teal); }
input::placeholder { color: var(--m3); }
input[aria-invalid="true"] { border-color: var(--crit); }

select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23eef4f9' opacity='.55' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 38px;
}

.ayuda { font-size: 14px; color: var(--m3); margin-top: 6px; }
/* El error va pegado al campo. En una lista al principio del formulario
   obliga a buscar de qué campo hablaba. */
.error-campo { font-size: 14px; color: var(--crit); margin-top: 6px; display: block; }

/* =================================================================== botones */

button, .boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 50px;
  padding: 0 var(--e5);
  border: 0;
  border-radius: var(--r-s);
  background: var(--teal);
  color: #04202c;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: filter var(--paso), transform var(--paso), border-color var(--paso);
}
button:hover, .boton:hover { filter: brightness(1.12); }
button:active, .boton:active { transform: translateY(1px); }
button:disabled { opacity: 0.45; cursor: not-allowed; filter: none; transform: none; }

.b-borde { background: transparent; border: 1px solid var(--ln2); color: var(--tx); }
.b-borde:hover { border-color: var(--teal); filter: none; }
.b-solido { background: var(--solid); color: #fff; }
.b-fantasma { background: transparent; color: var(--m1); padding: 0 var(--e3); }
.b-fantasma:hover { color: var(--tx); filter: none; }
.b-crit { background: transparent; border: 1px solid var(--crit); color: var(--crit); }
.b-crit:hover { background: rgba(255, 106, 92, 0.12); filter: none; }
.b-chico { min-height: 40px; padding: 0 var(--e4); font-size: 15px; }
.b-ancho { width: 100%; }

/* ==================================================================== avisos */

.aviso {
  display: flex; gap: var(--e3);
  padding: var(--e3) var(--e4);
  border-radius: var(--r-s);
  border-left: 3px solid var(--ln2);
  background: rgba(255, 255, 255, 0.045);
  font-size: 15px;
  margin-bottom: var(--e4);
}
.aviso i { margin-top: 3px; flex: 0 0 auto; }
.aviso.error    { border-color: var(--crit); background: rgba(255, 106, 92, 0.11); }
.aviso.error i  { color: var(--crit); }
.aviso.bien     { border-color: var(--ok);   background: rgba(70, 211, 154, 0.1); }
.aviso.bien i   { color: var(--ok); }
.aviso.ojo      { border-color: var(--warn); background: rgba(240, 174, 74, 0.1); }
.aviso.ojo i    { color: var(--warn); }
.aviso.dato     { border-color: var(--teal); background: rgba(0, 196, 181, 0.09); }
.aviso.dato i   { color: var(--teal); }

/* ==================================================================== cifras */

.cifra { font-size: 44px; font-weight: 600; line-height: 1; letter-spacing: -0.01em; }
.cifra.chica { font-size: 28px; }
.unidad { font-size: 14px; color: var(--m2); }

.codigo {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 40px; font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--teal2);
  text-align: center;
  background: var(--ink);
  border: 1px solid var(--ln);
  border-radius: var(--r-s);
  padding: var(--e3) 0 var(--e3) 0.32em;
}

/* ==================================================================== varios */

.oculto { display: none !important; }
.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

hr { border: 0; border-top: 1px solid var(--ln); margin: var(--e5) 0; }

/* Lo ancho se desplaza dentro de su caja. El cuerpo de la página nunca. */
.desborda { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.cargando {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid var(--ln2); border-top-color: var(--teal);
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Aparición al entrar en pantalla. Corta y en una sola dirección: aquí el
   movimiento sirve para ordenar la lectura, no para lucirse. */
.revelar { opacity: 0; transform: translateY(12px); }
.revelar.visible {
  opacity: 1; transform: none;
  transition: opacity 340ms ease-out, transform 340ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; }
}

/* ================================================================ fotografía */

/* Marco de foto. El filo turquesa la ata al resto del producto en vez de
   dejarla flotando como una imagen pegada encima del diseño. */
.foto {
  display: block;
  width: 100%; height: auto;
  border-radius: var(--r-l);
  border: 1px solid var(--ln);
  box-shadow: var(--sombra);
}

.foto-caja { position: relative; }

/* Velo del color de la página sobre la foto, en degradado desde abajo. Cose
   la imagen con el fondo: sin él, el borde inferior corta en seco y la foto
   parece recortada y pegada. */
.foto-caja::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: var(--r-l);
  background: linear-gradient(to top, rgba(7, 24, 42, .55), transparent 52%);
  pointer-events: none;
}

/* Banda con fotografía de fondo y texto encima.
   El velo NO es decorativo: sin él, un texto claro sobre una foto clara se
   vuelve ilegible en cuanto cambia el encuadre. Con estos valores el fondo
   efectivo queda tan oscuro como la página, y el texto conserva su contraste
   pase lo que pase por detrás. */
.banda-foto {
  position: relative;
  overflow: hidden;
  background: var(--pg2) center / cover no-repeat;
}
.banda-foto::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    100deg,
    rgba(7, 24, 42, .95) 0%,
    rgba(7, 24, 42, .90) 45%,
    rgba(7, 24, 42, .84) 100%);
}
.banda-foto > * { position: relative; }

@media (max-width: 700px) {
  .envoltorio, .estrecho { padding: 0 var(--e4); }
  .seccion { padding: var(--e7) 0; }
  .barra { padding: var(--e2) var(--e4); }
  /* En vertical la foto queda debajo del texto: el velo se hace plano para
     que no oscurezca la mitad de una imagen que ya se ve pequeña. */
  .foto-caja::after { background: linear-gradient(to top, rgba(7, 24, 42, .35), transparent 60%); }
}