/* ============================================================================
   AURELIAI · Base de diseño de demos — CAPA 2: COMPONENTES VANILLA
   Requiere tokens/base.css + un tema de tokens/<vertical>.css.
   Ningún hex literal acá: todo sale de los tokens. Si necesitás un color que
   no existe, el arreglo es agregar el token al tema, no hardcodearlo.
   HTML de ejemplo de cada componente: components/<nombre>.html
   ========================================================================== */

/* ---------------------------- PRIMITIVAS --------------------------------- */
.au-container { width: 100%; max-width: var(--au-container); margin-inline: auto; padding-inline: var(--au-space-4); }
.au-container--narrow { max-width: var(--au-container-narrow); }
.au-stack > * + * { margin-top: var(--au-space-4); }
.au-card {
  background: var(--au-base-100);
  border: 1px solid var(--au-border);
  border-radius: var(--au-radius-lg);
  padding: var(--au-space-5);
  box-shadow: var(--au-shadow-sm);
}
.au-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--au-space-2);
  min-height: var(--au-touch-min);
  padding: var(--au-space-3) var(--au-space-5);
  font: inherit; font-weight: var(--au-weight-semibold);
  border: 1px solid transparent; border-radius: var(--au-radius);
  background: var(--au-primary); color: var(--au-primary-content);
  cursor: pointer; text-decoration: none;
  transition: background-color .15s ease;
}
.au-btn:hover { background: var(--au-primary-hover); }
.au-btn--secondary { background: transparent; color: var(--au-primary-text); border-color: var(--au-primary-text); }
.au-btn--secondary:hover { background: var(--au-primary-soft); }
.au-btn--accent { background: var(--au-accent); color: var(--au-accent-content); }
.au-btn--ghost { background: transparent; color: var(--au-base-content-70); border-color: var(--au-border); }
.au-btn--pill { border-radius: var(--au-radius-pill); }
.au-btn--block { width: 100%; }
.au-btn[disabled] { opacity: .5; cursor: not-allowed; }

.au-badge {
  display: inline-flex; align-items: center; gap: var(--au-space-1);
  padding: 2px var(--au-space-2);
  font-size: var(--au-text-xs); font-weight: var(--au-weight-semibold);
  border-radius: var(--au-radius-pill);
  background: var(--au-base-300); color: var(--au-base-content);
}
.au-badge--ok     { background: var(--au-status-ok-bg);     color: var(--au-status-ok); }
.au-badge--late   { background: var(--au-status-late-bg);   color: var(--au-status-late); }
.au-badge--missed { background: var(--au-status-missed-bg); color: var(--au-status-missed); }
/* El violeta AURELIAI vive ACÁ y sólo acá: marcar lo que hizo la IA. */
.au-badge--ai { background: var(--au-ai-soft); color: var(--au-ai); }

/* ============ 1 · LOGIN DE DEMO =============================================
   Patrón consensuado: tarjeta grande del decisor arriba + lista vertical de
   perfiles debajo + deep link ?perfil=<id>. El formulario va PLEGADO (la demo
   se muestra, no se teclea), autocomplete="off" en todo, y NUNCA se hace
   submit programático — el que entra hace clic. ---------------------------- */
.au-login { min-height: 100dvh; display: grid; place-items: center; padding: var(--au-space-5) var(--au-space-4); background: var(--au-base-200); }
.au-login__inner { width: 100%; max-width: 440px; }
.au-login__brand { text-align: center; margin-bottom: var(--au-space-6); }
.au-login__hero {
  display: flex; align-items: center; gap: var(--au-space-4); width: 100%;
  text-align: left; cursor: pointer;
  padding: var(--au-space-5);
  background: var(--au-primary); color: var(--au-primary-content);
  border: none; border-radius: var(--au-radius-lg);
  box-shadow: var(--au-shadow);
  min-height: var(--au-touch-comfortable);
}
.au-login__hero:hover { background: var(--au-primary-hover); }
.au-login__hero .au-avatar { background: rgb(255 255 255 / .18); color: var(--au-primary-content); width: 56px; height: 56px; font-size: var(--au-text-lg); }
.au-login__hero-name { font-size: var(--au-text-lg); font-weight: var(--au-weight-bold); }
.au-login__hero-role { font-size: var(--au-text-sm); opacity: .85; }
.au-login__sep { margin: var(--au-space-5) 0 var(--au-space-3); font-size: var(--au-text-sm); color: var(--au-base-content-50); }
.au-login__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--au-space-2); }
.au-login__profile {
  display: flex; align-items: center; gap: var(--au-space-3); width: 100%;
  text-align: left; cursor: pointer;
  min-height: var(--au-touch-comfortable);
  padding: var(--au-space-3) var(--au-space-4);
  background: var(--au-base-100); color: var(--au-base-content);
  border: 1px solid var(--au-border); border-radius: var(--au-radius);
  font: inherit;
}
.au-login__profile:hover { border-color: var(--au-primary); background: var(--au-primary-soft); }
.au-login__profile-role { margin-left: auto; font-size: var(--au-text-sm); color: var(--au-base-content-50); }
.au-login__manual { margin-top: var(--au-space-5); }
.au-login__manual > summary { cursor: pointer; font-size: var(--au-text-sm); color: var(--au-base-content-50); min-height: var(--au-touch-min); display: flex; align-items: center; }
.au-login__manual[open] > summary { margin-bottom: var(--au-space-3); }
.au-avatar {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--au-primary-soft); color: var(--au-primary-text);
  font-weight: var(--au-weight-bold); font-size: var(--au-text-sm);
}

/* ============ 2 · AGENDA / GRILLA DE HORAS ==================================
   Modelo Doctoralia: especialidad → profesional → slots en grilla.
   En móvil colapsa a una columna por día, con el día como encabezado sticky. */
.au-agenda { background: var(--au-base-100); border: 1px solid var(--au-border); border-radius: var(--au-radius-lg); overflow: hidden; }
.au-agenda__head { display: flex; align-items: center; justify-content: space-between; gap: var(--au-space-3); padding: var(--au-space-4); border-bottom: 1px solid var(--au-border); flex-wrap: wrap; }
.au-agenda__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--au-border); }
.au-agenda__day { background: var(--au-base-100); padding: var(--au-space-3); min-width: 0; }
.au-agenda__daylabel { font-size: var(--au-text-sm); font-weight: var(--au-weight-semibold); color: var(--au-base-content-70); margin-bottom: var(--au-space-3); text-align: center; }
.au-agenda__slots { display: flex; flex-direction: column; gap: var(--au-space-2); }
.au-slot {
  display: block; width: 100%; min-height: var(--au-touch-min);
  padding: var(--au-space-2) var(--au-space-3);
  font: inherit; font-size: var(--au-text-sm); font-variant-numeric: tabular-nums;
  border: 1px solid var(--au-primary-text); border-radius: var(--au-radius-sm);
  background: var(--au-base-100); color: var(--au-primary-text);
  cursor: pointer;
}
.au-slot:hover { background: var(--au-primary); color: var(--au-primary-content); }
.au-slot[aria-pressed="true"] { background: var(--au-primary); color: var(--au-primary-content); }
.au-slot--taken { border-color: var(--au-border); background: var(--au-base-200); color: var(--au-base-content-30); cursor: not-allowed; text-decoration: line-through; }
.au-slot--ai { border-color: var(--au-ai); color: var(--au-ai); background: var(--au-ai-soft); }
@media (max-width: 640px) {
  .au-agenda__grid { grid-template-columns: 1fr; }
  .au-agenda__daylabel { text-align: left; }
  .au-agenda__slots { flex-direction: row; flex-wrap: wrap; }
  .au-slot { width: auto; flex: 1 1 90px; }
}

/* ============ 3 · TARJETA DE PACIENTE ======================================= */
.au-patient { display: flex; gap: var(--au-space-4); align-items: flex-start; background: var(--au-base-100); border: 1px solid var(--au-border); border-radius: var(--au-radius-lg); padding: var(--au-space-4); }
.au-patient__body { min-width: 0; flex: 1; }
.au-patient__name { font-family: var(--au-font-display); font-size: var(--au-text-lg); font-weight: var(--au-weight-bold); color: var(--au-base-content); margin: 0 0 2px; }
.au-patient__meta { font-size: var(--au-text-sm); color: var(--au-base-content-70); margin: 0 0 var(--au-space-3); }
.au-patient__tags { display: flex; flex-wrap: wrap; gap: var(--au-space-2); }
.au-patient__actions { display: flex; flex-direction: column; gap: var(--au-space-2); }
@media (max-width: 560px) { .au-patient { flex-wrap: wrap; } .au-patient__actions { flex-direction: row; width: 100%; } .au-patient__actions .au-btn { flex: 1; } }

/* ============ 4 · CHECKLIST DE MEDICAMENTOS CON HORA ========================
   La hora va en cifras tabulares y a la izquierda: es la columna que se escanea.
   El estado NO se codifica sólo por color (regla NHS): hay ícono y texto. ---- */
.au-meds { list-style: none; margin: 0; padding: 0; border: 1px solid var(--au-border); border-radius: var(--au-radius-lg); overflow: hidden; background: var(--au-base-100); }
.au-med { display: flex; align-items: flex-start; gap: var(--au-space-3); padding: var(--au-space-3) var(--au-space-4); border-bottom: 1px solid var(--au-border); min-height: var(--au-touch-comfortable); }
.au-med:last-child { border-bottom: 0; }
.au-med__time { flex: 0 0 4.5rem; font-variant-numeric: tabular-nums; font-weight: var(--au-weight-bold); color: var(--au-base-content-70); padding-top: 2px; }
.au-med__body { flex: 1; min-width: 0; }
.au-med__name { font-weight: var(--au-weight-semibold); }
.au-med__dose { font-size: var(--au-text-sm); color: var(--au-base-content-70); }
.au-med__check { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--au-space-2); font-size: var(--au-text-sm); font-weight: var(--au-weight-semibold); min-height: var(--au-touch-min); }
.au-med__check input { width: 24px; height: 24px; accent-color: var(--au-status-ok); }
.au-med--done .au-med__name { color: var(--au-base-content-50); }
.au-med--done .au-med__check { color: var(--au-status-ok); }
.au-med--late .au-med__time { color: var(--au-status-late); }
.au-med--missed .au-med__time { color: var(--au-status-missed); }

/* ============ 5 · SEMÁFORO DE TURNOS / CUMPLIMIENTO =========================
   Nunca sólo color: cada estado lleva punto + etiqueta escrita. ------------- */
.au-traffic { display: flex; flex-wrap: wrap; gap: var(--au-space-3); }
.au-traffic__item { flex: 1 1 150px; display: flex; align-items: center; gap: var(--au-space-3); padding: var(--au-space-3) var(--au-space-4); border-radius: var(--au-radius); border: 1px solid var(--au-border); background: var(--au-base-100); }
.au-traffic__dot { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; }
.au-traffic__n { font-size: var(--au-text-xl); font-weight: var(--au-weight-bold); font-variant-numeric: tabular-nums; line-height: 1; }
.au-traffic__label { font-size: var(--au-text-sm); color: var(--au-base-content-70); }
.au-traffic__item--ok     { background: var(--au-status-ok-bg); }
.au-traffic__item--ok     .au-traffic__dot { background: var(--au-status-ok); }
.au-traffic__item--ok     .au-traffic__n   { color: var(--au-status-ok); }
.au-traffic__item--late   { background: var(--au-status-late-bg); }
.au-traffic__item--late   .au-traffic__dot { background: var(--au-status-late); }
.au-traffic__item--late   .au-traffic__n   { color: var(--au-status-late); }
.au-traffic__item--missed { background: var(--au-status-missed-bg); }
.au-traffic__item--missed .au-traffic__dot { background: var(--au-status-missed); }
.au-traffic__item--missed .au-traffic__n   { color: var(--au-status-missed); }

/* ============ 6 · FORMULARIO LARGO (patrón NHS) =============================
   Una cosa por pantalla · label grande arriba · hint SIN punto final ·
   error summary arriba, enlazado al campo · nunca placeholder como label. --- */
.au-form { max-width: var(--au-container-narrow); }
.au-field { margin-bottom: var(--au-space-6); }
.au-field__label { display: block; font-size: var(--au-text-lg); font-weight: var(--au-weight-semibold); margin-bottom: var(--au-space-1); }
.au-field__hint { display: block; font-size: var(--au-text-base); color: var(--au-base-content-70); margin-bottom: var(--au-space-2); }
.au-field__input {
  width: 100%; min-height: var(--au-touch-comfortable);
  padding: var(--au-space-3);
  font: inherit; font-size: var(--au-text-base);
  color: var(--au-base-content); background: var(--au-base-100);
  border: 2px solid var(--au-base-content); border-radius: var(--au-radius-sm);
}
.au-field__input:focus-visible { outline: var(--au-focus-width) solid var(--au-focus-color); outline-offset: 0; }
.au-field__error { display: block; font-weight: var(--au-weight-bold); color: var(--au-error-text); margin-bottom: var(--au-space-2); }
.au-field--invalid { border-left: 4px solid var(--au-error); padding-left: var(--au-space-4); }
.au-field--invalid .au-field__input { border-color: var(--au-error); }
.au-error-summary { border: 4px solid var(--au-error); border-radius: var(--au-radius-sm); padding: var(--au-space-4); margin-bottom: var(--au-space-6); background: var(--au-base-100); }
.au-error-summary h2 { font-size: var(--au-text-xl); color: var(--au-error-text); margin-bottom: var(--au-space-2); }
.au-error-summary ul { margin: 0; padding-left: var(--au-space-5); }
.au-error-summary a { color: var(--au-error-text); font-weight: var(--au-weight-semibold); }
/* Listas sí/no del NHS: cada "no" empieza literalmente con la palabra "no". */
.au-do-dont { display: grid; gap: var(--au-space-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.au-do-dont__col { border-top: 4px solid var(--au-success); padding-top: var(--au-space-3); }
.au-do-dont__col--dont { border-top-color: var(--au-error); }
.au-do-dont ul { margin: 0; padding-left: var(--au-space-5); }
.au-do-dont li { margin-bottom: var(--au-space-2); }

/* ============ 7 · TIMELINE HUMANA ===========================================
   Bitácora del turno / historia del paciente. Se lee como un relato, no como
   un log: hora en tabular a la izquierda, hecho concreto a la derecha. ------ */
.au-timeline { list-style: none; margin: 0; padding: 0 0 0 var(--au-space-5); border-left: 2px solid var(--au-border); }
.au-timeline__item { position: relative; padding: 0 0 var(--au-space-5) var(--au-space-4); }
.au-timeline__item::before { content: ""; position: absolute; left: calc(-1 * var(--au-space-5) - 7px); top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--au-primary); border: 2px solid var(--au-base-100); }
.au-timeline__item--ai::before { background: var(--au-ai); }
.au-timeline__item--alert::before { background: var(--au-error); }
.au-timeline__time { font-size: var(--au-text-sm); font-variant-numeric: tabular-nums; color: var(--au-base-content-50); }
.au-timeline__title { font-weight: var(--au-weight-semibold); margin: 2px 0; }
.au-timeline__text { font-size: var(--au-text-sm); color: var(--au-base-content-70); margin: 0; }

/* ============ 8 · KPI CON DELTA ============================================= */
.au-kpis { display: grid; gap: var(--au-space-4); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.au-kpi { background: var(--au-base-100); border: 1px solid var(--au-border); border-radius: var(--au-radius-lg); padding: var(--au-space-4); }
.au-kpi__label { font-size: var(--au-text-sm); color: var(--au-base-content-70); margin-bottom: var(--au-space-2); }
.au-kpi__value { font-family: var(--au-font-display); font-size: var(--au-text-2xl); font-weight: var(--au-weight-bold); font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--au-base-content); }
.au-kpi__delta { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--au-space-2); font-size: var(--au-text-sm); font-weight: var(--au-weight-semibold); }
.au-kpi__delta--up   { color: var(--au-status-ok); }
.au-kpi__delta--down { color: var(--au-status-missed); }
.au-kpi__delta--flat { color: var(--au-base-content-50); }

/* ============ 9 · TABLA RESPONSIVE QUE COLAPSA A TARJETAS ===================
   Desktop: tabla real (semántica intacta). <=720px: cada fila se vuelve una
   tarjeta y cada celda muestra su encabezado vía data-label. ---------------- */
.au-table-wrap { overflow-x: auto; }
.au-table { width: 100%; border-collapse: collapse; background: var(--au-base-100); font-variant-numeric: tabular-nums; }
.au-table th, .au-table td { text-align: left; padding: var(--au-space-3) var(--au-space-4); border-bottom: 1px solid var(--au-border); }
.au-table th { font-size: var(--au-text-sm); text-transform: none; color: var(--au-base-content-70); background: var(--au-base-200); font-weight: var(--au-weight-semibold); }
.au-table tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 720px) {
  .au-table, .au-table tbody, .au-table tr, .au-table td { display: block; width: 100%; }
  .au-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .au-table tr { border: 1px solid var(--au-border); border-radius: var(--au-radius); margin-bottom: var(--au-space-3); padding: var(--au-space-2); }
  .au-table td { display: flex; justify-content: space-between; gap: var(--au-space-4); border-bottom: 1px solid var(--au-border); padding: var(--au-space-2) var(--au-space-3); }
  .au-table tr td:last-child { border-bottom: 0; }
  .au-table td::before { content: attr(data-label); font-size: var(--au-text-sm); font-weight: var(--au-weight-semibold); color: var(--au-base-content-70); flex: 0 0 auto; }
}

/* ============ 10 · BANNER DE ESTADO / CARE CARD (3 niveles NHS) =============
   NHS care card: no-urgente / urgente / emergencia. El nivel se anuncia con
   texto oculto ("No urgente:") para que un lector de pantalla no dependa del
   color, y el encabezado lleva fondo sólido de severidad. ------------------- */
.au-care { border-radius: var(--au-radius); overflow: hidden; margin-bottom: var(--au-space-4); }
.au-care__head { padding: var(--au-space-3) var(--au-space-4); font-family: var(--au-font-display); font-size: var(--au-text-lg); font-weight: var(--au-weight-bold); margin: 0; }
.au-care__body { padding: var(--au-space-4); background: var(--au-base-100); border: 1px solid var(--au-border); border-top: 0; }
.au-care__body > :last-child { margin-bottom: 0; }
.au-care--nonurgent .au-care__head { background: var(--au-info);    color: var(--au-info-content); }
.au-care--nonurgent .au-care__body { background: var(--au-info-bg); border-color: var(--au-info); }
.au-care--urgent    .au-care__head { background: var(--au-warning); color: var(--au-warning-content); }
.au-care--urgent    .au-care__body { background: var(--au-warning-bg); border-color: var(--au-warning); }
.au-care--emergency .au-care__head { background: var(--au-error);   color: var(--au-error-content); }
.au-care--emergency .au-care__body { background: var(--au-error-bg); border-color: var(--au-error); }
/* Warning callout NHS: barra gruesa, sin fondo de color */
.au-callout { border: 5px solid var(--au-base-content); border-radius: var(--au-radius-sm); padding: var(--au-space-4); background: var(--au-base-100); }
.au-callout__title { font-family: var(--au-font-display); font-size: var(--au-text-lg); font-weight: var(--au-weight-bold); margin-bottom: var(--au-space-2); }
/* Banner de estado corto (una línea) */
.au-banner { display: flex; align-items: flex-start; gap: var(--au-space-3); padding: var(--au-space-3) var(--au-space-4); border-radius: var(--au-radius); border-left: 5px solid var(--au-info); background: var(--au-info-bg); color: var(--au-info-text); }
.au-banner--success { border-left-color: var(--au-success); background: var(--au-success-bg); color: var(--au-success-text); }
.au-banner--warning { border-left-color: var(--au-warning); background: var(--au-warning-bg); color: var(--au-warning-text); }
.au-banner--error   { border-left-color: var(--au-error);   background: var(--au-error-bg);   color: var(--au-error-text); }

/* ============ 11 · SHEET / MODAL ============================================
   <dialog> nativo. En móvil sube desde abajo (sheet); en desktop es modal
   centrado. Foco y Esc los gestiona el navegador con showModal(). ---------- */
.au-sheet { border: 0; padding: 0; max-width: 560px; width: calc(100% - var(--au-space-6)); border-radius: var(--au-radius-lg); background: var(--au-base-100); color: var(--au-base-content); box-shadow: var(--au-shadow-lg); }
.au-sheet::backdrop { background: rgb(0 0 0 / .45); }
.au-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--au-space-3); padding: var(--au-space-4) var(--au-space-5); border-bottom: 1px solid var(--au-border); }
.au-sheet__title { margin: 0; font-size: var(--au-text-xl); }
.au-sheet__body { padding: var(--au-space-5); }
.au-sheet__foot { display: flex; gap: var(--au-space-3); justify-content: flex-end; padding: var(--au-space-4) var(--au-space-5); border-top: 1px solid var(--au-border); }
.au-sheet__close { min-width: var(--au-touch-min); min-height: var(--au-touch-min); border: 0; background: transparent; font-size: var(--au-text-xl); line-height: 1; cursor: pointer; color: var(--au-base-content-70); border-radius: var(--au-radius-sm); }
@media (max-width: 640px) {
  .au-sheet { width: 100%; max-width: 100%; margin: 0; position: fixed; inset: auto 0 0 0; border-radius: var(--au-radius-lg) var(--au-radius-lg) 0 0; }
  .au-sheet__foot { flex-direction: column-reverse; }
  .au-sheet__foot .au-btn { width: 100%; }
}

/* ============ 12 · TOAST ====================================================
   Región aria-live. En móvil arriba (no tapa el pulgar ni el CTA fijo). ----- */
.au-toasts { position: fixed; z-index: 60; right: var(--au-space-4); bottom: var(--au-space-4); display: flex; flex-direction: column; gap: var(--au-space-2); max-width: 380px; pointer-events: none; }
.au-toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: var(--au-space-3);
  padding: var(--au-space-3) var(--au-space-4);
  border-radius: var(--au-radius); border-left: 5px solid var(--au-info);
  background: var(--au-base-100); color: var(--au-base-content);
  box-shadow: var(--au-shadow-lg);
  animation: au-toast-in .18s ease-out;
}
.au-toast--success { border-left-color: var(--au-success); }
.au-toast--warning { border-left-color: var(--au-warning); }
.au-toast--error   { border-left-color: var(--au-error); }
.au-toast--ai      { border-left-color: var(--au-ai); }
.au-toast__body { flex: 1; min-width: 0; font-size: var(--au-text-sm); }
.au-toast__title { font-weight: var(--au-weight-semibold); font-size: var(--au-text-base); }
.au-toast__close { border: 0; background: transparent; cursor: pointer; color: var(--au-base-content-50); min-width: var(--au-touch-min); min-height: var(--au-touch-min); font-size: var(--au-text-lg); border-radius: var(--au-radius-sm); }
@keyframes au-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .au-toasts { right: var(--au-space-3); left: var(--au-space-3); bottom: auto; top: var(--au-space-3); max-width: none; }
  @keyframes au-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
}