/* Estilos base del consultorio: marca "Serene Balance Medical" (diseño de Stitch en stitch/, DESIGN.md).
   Lo comparten el formulario, las páginas de turno y el panel. Reproduce el estilo con CSS propio:
   sin librerías, sin fuentes ni íconos de otros sitios.

   Accesibilidad (se mantiene por encima del diseño original):
   - Texto normal con contraste AA o mejor (mínimo 4,5:1); bordes de campos y botones, 3:1 o más.
   - Letra base de 18 px, nada de texto por debajo de 14 px.
   - Botones, campos y controles de al menos 44 px de alto (acá, 48 px).
   - El foco se ve siempre: anillo turquesa de 3 px más un halo celeste. */

/* Letras de la marca, guardadas en el sitio (licencia SIL OFL; ver comun/fuentes/OFL-*.txt). Solo caracteres latinos, que alcanzan para el español. */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fuentes/plus-jakarta-sans-latin.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fuentes/manrope-latin.woff2") format("woff2"); }

:root {
  /* ---------- Colores de marca (DESIGN.md) ---------- */
  --color-primario: #0e7490;            /* Deep Ocean Teal: acciones, encabezados activos */
  --color-primario-oscuro: #0a5c73;     /* hover del botón principal */
  --color-primario-fuerte: #005a71;     /* texto sobre fondos celestes: contraste 7:1 o más */
  --color-secundario: #86e1f0;          /* Soft Cerulean: bordes suaves, halos, resaltes */
  --color-bruma: #e0f7fa;               /* Luminous Mist Cyan: fondos de aviso y de botón secundario */
  --color-bruma-fuerte: #cdeef4;        /* hover sobre la bruma */
  --color-lienzo: #f4fbfc;              /* fondo de la página */
  --color-lienzo-2: #f0fbfd;            /* fin del degradado del fondo */
  --color-superficie: #ffffff;          /* tarjetas y campos */
  --color-superficie-baja: #f0f3ff;     /* fondos tenues (surface-container-low) */
  --color-superficie-media: #e7eeff;    /* pestañas apagadas, fondos de controles (surface-container) */
  --color-tinta: #1e293b;               /* Deep Slate: todo el texto (en vez de negro puro) */
  --color-tinta-suave: #475569;         /* texto secundario: 7,6:1 sobre blanco */
  --color-borde: #cbd5e1;               /* líneas decorativas (separadores) */
  --color-borde-suave: rgba(134, 225, 240, 0.4);   /* contorno de tarjetas */
  --color-borde-control: #64748b;       /* contorno de campos y casillas: 4,8:1 sobre blanco */

  /* Estados (la marca no define estos; se arman con la misma paleta) */
  --color-error: #ba1a1a;
  --color-error-texto: #93000a;
  --color-error-fondo: #ffdad6;
  --color-ok: #1f6f3a;
  --color-ok-fondo: #e3f5e9;
  --color-aviso-borde: #c98a00;
  --color-aviso-texto: #5c3d00;
  --color-aviso-fondo: #fff4d6;

  /* ---------- Tipografía ---------- */
  /* Plus Jakarta Sans (títulos) y Manrope (texto), incluidas en el sitio; si no cargan, la letra del sistema. */
  --fuente-titulos: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --fuente-texto: "Manrope", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --texto-xl: clamp(2rem, 1.5rem + 2.2vw, 3rem);      /* headline-xl: 34 a 48 px */
  --texto-lg: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem); /* headline-lg: 26 a 36 px */
  --texto-md: 1.5rem;                                   /* headline-md: 24 px */
  --texto-sm: 1.25rem;                                  /* headline-sm: 20 px */
  --texto-cuerpo: 1.125rem;                             /* body-lg: 18 px */
  --texto-chico: 1rem;                                  /* mínimo para texto de lectura: 16 px */
  --texto-etiqueta: 0.875rem;                           /* chips y rótulos cortos: 14 px, en negrita */
  --interlineado: 1.55;

  /* ---------- Bordes redondeados ---------- */
  --radio-sm: 0.25rem;
  --radio: 0.5rem;           /* campos, botones, insignias */
  --radio-md: 0.75rem;
  --radio-lg: 1rem;          /* tarjetas */
  --radio-xl: 1.5rem;        /* módulos destacados */
  --radio-pildora: 9999px;   /* solo para chips de estado */

  /* ---------- Espaciado ---------- */
  --espacio-xs: 0.375rem;
  --espacio-sm: 0.75rem;
  --espacio-md: 1.25rem;
  --espacio-lg: 2rem;
  --espacio-xl: 3.5rem;
  --margen-pagina: 1.25rem;
  --alto-control: 3rem;      /* 48 px: campos y botones */

  /* ---------- Sombras (luz difusa de mañana, no sombras duras) ---------- */
  --sombra-1: 0 8px 24px -4px rgba(14, 116, 144, 0.07), 0 2px 6px -1px rgba(14, 116, 144, 0.04);
  --sombra-2: 0 16px 36px -6px rgba(14, 116, 144, 0.12), 0 4px 12px -2px rgba(14, 116, 144, 0.06);
  --sombra-3: 0 24px 48px -12px rgba(15, 23, 42, 0.15);
  --sombra-boton: 0 8px 20px -6px rgba(14, 116, 144, 0.45);
  --halo-foco: 0 0 0 4px rgba(134, 225, 240, 0.7);

  /* ---------- Nombres que ya usaban las páginas (se mantienen para no tocar todo el código) ---------- */
  --fondo: var(--color-lienzo);
  --texto: var(--color-tinta);
  --borde: var(--color-borde-control);
  --acento: var(--color-primario);
  --acento-oscuro: var(--color-primario-oscuro);
  --error: var(--color-error);
  --ok: var(--color-ok);
  --suave: var(--color-superficie-media);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  color: var(--color-tinta);
  font-family: var(--fuente-texto);
  font-size: var(--texto-cuerpo);
  line-height: var(--interlineado);
  background-color: var(--color-lienzo);
  background-image:
    radial-gradient(60rem 28rem at 50% -8rem, rgba(134, 225, 240, 0.28), transparent 70%),
    linear-gradient(180deg, #ffffff 0, var(--color-lienzo-2) 32rem);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--color-secundario); color: var(--color-tinta); }

h1, h2, h3, h4, legend { font-family: var(--fuente-titulos); color: var(--color-tinta); letter-spacing: -0.01em; }
h1 { font-size: var(--texto-lg); line-height: 1.2; font-weight: 700; margin: 0 0 var(--espacio-sm); }
h2 { font-size: var(--texto-md); line-height: 1.3; font-weight: 600; margin: 0.5rem 0 1rem; }
h3 { font-size: var(--texto-sm); line-height: 1.35; font-weight: 600; margin: 0 0 0.25rem; }
p { margin: 0 0 var(--espacio-sm); }
a { color: var(--color-primario); }
strong { font-weight: 700; }
small, .chico { font-size: var(--texto-chico); }

/* Foco visible en todo lo que se puede tocar */
:focus-visible { outline: 3px solid var(--color-primario); outline-offset: 2px; box-shadow: var(--halo-foco); }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 0; }

/* ---------- Encabezado de marca ---------- */
.marca {
  display: flex; align-items: center; gap: var(--espacio-sm);
  min-height: 4rem; padding: 0.5rem var(--margen-pagina);
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-borde-suave);
  box-shadow: 0 1px 0 rgba(14, 116, 144, 0.04);
}
.marca-icono {            /* cruz médica dibujada con CSS (sin imágenes ni fuentes de íconos) */
  position: relative; flex: none; width: 2.5rem; height: 2.5rem;
  border-radius: var(--radio-md); background: rgba(14, 116, 144, 0.1);
}
.marca-icono::before, .marca-icono::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--color-primario);
  border-radius: 2px; transform: translate(-50%, -50%);
}
.marca-icono::before { width: 1.2rem; height: 0.3rem; }
.marca-icono::after { width: 0.3rem; height: 1.2rem; }
.marca-nombre { font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.05rem; line-height: 1.2; color: var(--color-primario-fuerte); }
.marca-detalle { font-size: var(--texto-chico); color: var(--color-tinta-suave); }

/* ---------- Tarjetas ---------- */
.tarjeta, .bloque {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-1);
}
.tarjeta { padding: var(--espacio-md); }

/* ---------- Botones ---------- */
button, .boton {
  font: inherit; font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.0625rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; text-align: center;
  min-height: var(--alto-control); padding: 0.75rem 1.75rem;
  border: 1.5px solid transparent; border-radius: var(--radio);
  cursor: pointer; text-decoration: none;
  transition: background-color 0.15s, box-shadow 0.15s, border-color 0.15s, transform 0.15s;
}
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.6; cursor: wait; box-shadow: none; }
.principal {
  color: #ffffff; background: var(--color-primario); border-color: var(--color-primario);
}
.principal:hover:not(:disabled) { background: var(--color-primario-oscuro); border-color: var(--color-primario-oscuro); box-shadow: var(--sombra-boton); }
.secundario {
  color: var(--color-primario-fuerte); background: var(--color-bruma); border-color: var(--color-secundario);
}
.secundario:hover:not(:disabled) { background: var(--color-bruma-fuerte); border-color: var(--color-primario); }
.peligro { color: var(--color-error-texto); background: var(--color-superficie); border-color: var(--color-error); }
.peligro:hover:not(:disabled) { background: var(--color-error-fondo); }
.enlace {
  color: var(--color-primario); background: none; border-color: transparent; box-shadow: none;
  text-decoration: underline; text-underline-offset: 3px; font-weight: 600; padding: 0.5rem 0.25rem; min-height: 2.75rem;
}
.enlace:hover:not(:disabled) { color: var(--color-primario-oscuro); background: none; }

/* ---------- Campos ---------- */
label, legend { display: block; font-weight: 600; margin-bottom: var(--espacio-xs); }
.opcional { font-weight: 400; color: var(--color-tinta-suave); }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="date"], input[type="time"], textarea, select {
  width: 100%; font: inherit; color: inherit; background: var(--color-superficie);
  min-height: var(--alto-control); padding: 0.6rem 0.85rem;
  border: 1.5px solid var(--color-borde-control); border-radius: var(--radio);
}
select { width: auto; }
textarea { min-height: 6rem; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--color-tinta-suave); opacity: 1; }
input:focus, textarea:focus, select:focus { border-color: var(--color-primario); box-shadow: var(--halo-foco); outline: 3px solid var(--color-primario); outline-offset: 0; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-primario); }

/* ---------- Avisos ---------- */
.aviso, .listo {
  color: var(--color-tinta); background: var(--color-ok-fondo);
  border: 1.5px solid var(--color-ok); border-radius: var(--radio-md); padding: 0.75rem 1rem; font-weight: 600;
}
.error {
  color: var(--color-error-texto); background: var(--color-error-fondo);
  border: 1.5px solid var(--color-error); border-radius: var(--radio-md); padding: 0.75rem 1rem; font-weight: 600;
}
.urgencia, .duplicado {
  color: var(--color-tinta); background: var(--color-aviso-fondo);
  border: 1.5px solid var(--color-aviso-borde); border-left-width: 6px; border-radius: var(--radio-md); padding: 0.75rem 1rem;
}

/* ---------- Chips de estado (únicos con forma de píldora) ---------- */
.etiqueta {
  display: inline-block; font-family: var(--fuente-titulos); font-size: var(--texto-etiqueta); font-weight: 700; line-height: 1.3;
  color: var(--color-primario-fuerte); background: rgba(14, 116, 144, 0.1);
  border-radius: var(--radio-pildora); padding: 0.15rem 0.75rem; margin-right: 0.4rem;
}

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