/* ==========================================================================
   Aluna DS v1.0 — COMPONENTES (atomic design)
   Requiere: ../tokens/tokens.css  +  Google Font Quicksand 500/700
   Convención: clases .al-*  ·  variantes .al-x--variante  ·  estados con :hover/:active/:disabled,
   [aria-*], [data-state] o .is-*.  Nunca hardcodear colores: usar var(--al-*).
   ========================================================================== */
@import url("../tokens/tokens.css");

/* =====================================================================
   0. BASE
   ===================================================================== */
.al-root, .al-root *, .al-root *::before, .al-root *::after { box-sizing: border-box; }
.al-root { font: var(--al-text-body-l); color: var(--al-text-body-black); -webkit-font-smoothing: antialiased; }
.al-sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.al-focus-ring:focus-visible, .al-root :focus-visible { outline: var(--al-border-2) solid var(--al-border-diagramming-interactive); outline-offset: 3px; }

/* =====================================================================
   1. ÁTOMOS
   ===================================================================== */

/* 1.1 Tipografía — estilos de texto del sistema -------------------------- */
.al-display    { font: var(--al-text-display);    color: var(--al-text-heading-black); margin: 0; }
.al-headline-l { font: var(--al-text-headline-l); color: var(--al-text-heading-black); margin: 0; }
.al-headline-m { font: var(--al-text-headline-m); color: var(--al-text-heading-black); margin: 0; }
.al-headline-s { font: var(--al-text-headline-s); color: var(--al-text-heading-black); margin: 0; }
.al-body-l     { font: var(--al-text-body-l);     color: var(--al-text-body-black);    margin: 0; }
.al-body-m     { font: var(--al-text-body-m);     color: var(--al-text-body-black);    margin: 0; }
.al-label      { font: var(--al-text-label);      color: var(--al-text-heading-black); margin: 0; }
.al-caption    { font: var(--al-text-caption);    color: var(--al-text-body-black);    margin: 0; }
.al-overline   { font: var(--al-text-overline);   color: var(--al-text-body-black);    margin: 0; }
.al-text--regular { font-weight: 400; }
.al-text--white   { color: var(--al-text-heading-white); }
.al-text--info    { color: var(--al-text-information-default); }
.al-text--info-dark  { color: var(--al-text-information-dark); }
.al-text--info-light { color: var(--al-text-information-light); }
.al-text--muted   { color: var(--al-text-body-disabled); }

/* 1.2 Iconos -------------------------------------------------------------- */
.al-icon { display: inline-block; flex: none; width: 24px; height: 24px; object-fit: contain; }
.al-icon--xs { width: 20px; height: 20px; }
.al-icon--s  { width: 24px; height: 24px; }
.al-icon--m  { width: 32px; height: 32px; }
.al-icon--l  { width: 88px; height: 88px; }
.al-icon--down  { transform: rotate(0deg); }       /* icono_micro_cta apunta hacia abajo por defecto */
.al-icon--right { transform: rotate(-90deg); }
.al-icon--up    { transform: rotate(180deg); }
.al-icon--left  { transform: rotate(90deg); }

/* 1.3 button_primary_secondary ------------------------------------------- */
.al-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--al-space-8);
  min-height: 52px; padding: var(--al-space-16) var(--al-space-24); border: 0; border-radius: var(--al-radius-full);
  font: var(--al-text-botones); text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--al-duration-base) var(--al-ease-standard), color var(--al-duration-base), transform var(--al-duration-fast), box-shadow var(--al-duration-base);
  -webkit-tap-highlight-color: transparent;
}
.al-btn--block { display: flex; width: 100%; }
/* Principal · On */
.al-btn--primary { background: var(--al-surface-button-primary-on-button-2); color: var(--al-text-on-button-default); box-shadow: var(--al-shadow-interaccion-reposo); -webkit-backdrop-filter: blur(var(--al-blur-interaccion-reposo)); backdrop-filter: blur(var(--al-blur-interaccion-reposo)); }
/* Principal · Over */
.al-btn--primary:hover { background: var(--al-surface-button-primary-on-button-1); color: var(--al-text-on-button-default); }
/* Principal · Presionado */
.al-btn--primary:active, .al-btn--primary.is-pressed { background: var(--al-surface-button-primary-on-button-hover); color: var(--al-text-on-button-hover); box-shadow: var(--al-shadow-interaccion-presionado); transform: scale(.99); }
/* Principal · Off */
.al-btn--primary:disabled, .al-btn--primary[aria-disabled="true"] { background: var(--al-surface-disabled-default); color: var(--al-text-body-white); box-shadow: none; cursor: not-allowed; transform: none; }
/* Secundario · On */
.al-btn--secondary { background: var(--al-surface-button-secondary-on-button); color: var(--al-text-on-button-disabled); box-shadow: inset 0 0 0 var(--al-border-hairline) var(--al-border-button-primary), var(--al-shadow-interaccion-presionado); }
/* Secundario · Over */
.al-btn--secondary:hover { background: var(--al-surface-button-secondary-on-button-hover); color: var(--al-text-on-button-default); box-shadow: inset 0 0 0 var(--al-border-hairline) var(--al-border-button-primary), var(--al-shadow-interaccion-reposo); }
/* Secundario · Presionado */
.al-btn--secondary:active, .al-btn--secondary.is-pressed { background: var(--al-surface-button-secondary-on-button-hover); color: var(--al-text-on-button-hover); box-shadow: inset 0 0 0 var(--al-border-hairline) var(--al-border-button-primary), var(--al-shadow-interaccion-presionado); }
/* Secundario · Off */
.al-btn--secondary:disabled, .al-btn--secondary[aria-disabled="true"] { background: var(--al-surface-button-secondary-on-button-disabled); color: var(--al-text-body-white); box-shadow: inset 0 0 0 var(--al-border-hairline) var(--al-border-button-disabled); cursor: not-allowed; }
/* Halo opcional (uso en landing/web): superficie solido_2 alrededor del botón principal */
.al-btn-halo { display: flex; border-radius: var(--al-radius-full); background: rgba(255, 170, 0, .24); }
.al-btn-halo > .al-btn { flex: 1; }

/* 1.4 button_aux ---------------------------------------------------------- */
.al-btn-aux {
  display: inline-flex; align-items: center; justify-content: center; min-height: 22px; padding: var(--al-space-4) var(--al-space-16);
  border: var(--al-border-1) solid var(--al-border-button-primary); border-radius: var(--al-radius-full);
  background: var(--al-surface-button-secondary-on-button); color: var(--al-text-heading-disabled);
  font: var(--al-text-overline); text-decoration: none; cursor: pointer; transition: background-color var(--al-duration-fast);
}
.al-btn-aux:hover, .al-btn-aux:active, .al-btn-aux.is-pressed { background: var(--al-surface-button-secondary-on-button-hover); border-color: transparent; }
.al-btn-aux:disabled, .al-btn-aux--inactivo { background: var(--al-surface-button-secondary-on-button-disabled); border-color: var(--al-border-button-disabled); cursor: not-allowed; }
.al-btn-aux--informando { background: var(--al-surface-information-default); border-color: var(--al-border-information-light); color: var(--al-text-heading-white); font: var(--al-text-caption); font-weight: 700; }

/* 1.5 boton_atras ---------------------------------------------------------- */
.al-btn-back { display: inline-flex; align-items: center; gap: var(--al-space-8); padding: 0; border: 0; background: none; color: var(--al-text-heading-black); font: var(--al-text-botones); text-decoration: none; cursor: pointer; }
.al-btn-back img { width: 24px; height: 24px; transition: transform var(--al-duration-fast); }
.al-btn-back:hover img { transform: translateX(-2px); }

/* 1.6 Micro CTA (texto + icono_micro_cta) -------------------------------- */
.al-micro-cta { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--al-space-8); font: var(--al-text-body-l); font-weight: 700; color: inherit; text-decoration: none; cursor: pointer; }
.al-micro-cta img { width: 20px; height: 20px; transition: transform var(--al-duration-base) var(--al-ease-calm); }
.al-micro-cta:hover img { transform: translateY(3px); }

/* 1.7 control_buttons: dots ---------------------------------------------- */
.al-dots { display: flex; justify-content: center; gap: var(--al-space-24); padding: 10px; }
.al-dot { width: 20px; height: 20px; padding: 0; border: var(--al-border-2) solid var(--al-border-button-primary); border-radius: 50%; background: var(--al-surface-button-secondary-on-button); cursor: pointer; transition: background-color var(--al-duration-fast), transform var(--al-duration-fast); }
.al-dot[aria-current="true"], .al-dot.is-active { background: var(--al-surface-button-primary-on-button-1); border-color: var(--al-surface-button-primary-on-button-1); }
.al-dot:hover { transform: scale(1.1); }
.al-dots--web .al-dot { width: 32px; height: 32px; }
@media (min-width: 1024px) { .al-dots:not(.al-dots--app) .al-dot { width: 32px; height: 32px; } }

/* 1.8 control_buttons: switch -------------------------------------------- */
.al-switch { display: inline-flex; align-items: center; gap: var(--al-space-8); font: var(--al-text-label); color: var(--al-text-heading-black); cursor: pointer; }
.al-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.al-switch__track { position: relative; width: 67px; height: 35px; padding: var(--al-space-4); border-radius: var(--al-radius-full); background: var(--al-surface-disabled-light); transition: background-color var(--al-duration-base); flex: none; }
.al-switch__track::after { content: ""; position: absolute; top: 4px; left: 4px; width: 27px; height: 27px; border-radius: 50%; background: var(--al-surface-disabled-default); transition: transform var(--al-duration-base) var(--al-ease-standard), background-color var(--al-duration-base); }
.al-switch input:checked + .al-switch__track { background: var(--al-surface-button-primary-on-button-1); }
.al-switch input:checked + .al-switch__track::after { transform: translateX(32px); background: var(--al-surface-button-secondary-on-button); }
.al-switch input:focus-visible + .al-switch__track { outline: var(--al-border-2) solid var(--al-border-diagramming-interactive); outline-offset: 3px; }

/* 1.9 control_buttons: check --------------------------------------------- */
.al-check { display: inline-flex; align-items: center; gap: var(--al-space-8); font: var(--al-text-label); color: var(--al-text-body-black); cursor: pointer; }
.al-check--body { font: var(--al-text-body-l); }
.al-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.al-check__box { position: relative; flex: none; width: 20px; height: 20px; border: var(--al-border-2) solid var(--al-border-button-primary); border-radius: var(--al-radius-4); background: transparent; transition: background-color var(--al-duration-fast); }
.al-check__box::after { content: ""; position: absolute; inset: 0; background: center / 65% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20' fill='none'%3E%3Cpath d='M2 10.5L9 17.5L22 2.5' stroke='%23FDFDFC' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); opacity: 0; transition: opacity var(--al-duration-fast); }
.al-check input:checked + .al-check__box { background: var(--al-surface-button-primary-on-button-1); border-color: var(--al-surface-button-primary-on-button-1); }
.al-check input:checked + .al-check__box::after { opacity: 1; }
.al-check input:focus-visible + .al-check__box { outline: var(--al-border-2) solid var(--al-border-diagramming-interactive); outline-offset: 2px; }
.al-check--web .al-check__box { width: 32px; height: 32px; border-width: var(--al-border-4); }
@media (min-width: 1024px) { .al-check:not(.al-check--app) .al-check__box { width: 32px; height: 32px; border-width: var(--al-border-4); } }

/* 1.10 Favicon ------------------------------------------------------------ */
.al-favicon { display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--al-surface-background-white-soft); box-shadow: var(--al-shadow-favicon); text-decoration: none; }
.al-favicon img { width: 26px; height: auto; }
.al-favicon--sm { width: 30px; height: 30px; }
.al-favicon--sm img { width: 16px; }
.al-favicon--cta { background: rgba(255, 170, 0, .4) radial-gradient(circle, rgba(255, 170, 0, .4), rgba(255, 170, 0, .4)); box-shadow: 0 0 2px rgba(49,49,48,.1), 0 1px 12px var(--al-surface-button-primary-on-button-1), inset 4px 4px .5px var(--al-surface-background-white-soft), inset -2px -2px .5px rgba(49,49,48,.35), inset 0 0 8px var(--al-surface-background-major); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform var(--al-duration-fast); }
.al-favicon--cta:hover { transform: scale(1.08); }
.al-favicon--cta.is-off { background: var(--al-surface-background-white); box-shadow: var(--al-shadow-favicon); }

/* 1.11 Signifier deslizar, puntero, divisores ----------------------------- */
.al-signifier-drag { display: block; width: 78px; height: 6px; margin: 0 auto; border-radius: var(--al-radius-full); background: var(--al-surface-button-primary-on-button-1); }
.al-caret { display: inline-block; width: 1px; height: 15px; background: var(--al-text-body-black); animation: al-blink 1s steps(1) infinite; vertical-align: middle; }
@keyframes al-blink { 50% { opacity: 0; } }
.al-divider { width: 100%; height: 0; margin: 0; border: 0; border-top: var(--al-border-1) solid var(--al-border-diagramming-line); }
.al-divider--interactive { border-top-color: var(--al-border-diagramming-interactive); }
.al-divider--dashed { border-top-style: dashed; }
.al-divider--white { border-top-color: var(--al-border-diagramming-white); border-top-width: 1.5px; }

/* 1.12 Chip categorias_contenido ----------------------------------------- */
.al-chip { display: inline-flex; align-items: center; min-height: 42px; padding: var(--al-space-8) var(--al-space-16); border: 0; border-radius: var(--al-radius-full); font: var(--al-text-body-m); text-decoration: none; cursor: pointer; transition: background-color var(--al-duration-fast), box-shadow var(--al-duration-fast); }
.al-chip--primary { background: var(--al-principal-1); color: var(--al-text-heading-white); }
.al-chip--primary.is-off { background: var(--al-surface-button-primary-on-button-disabled); color: var(--al-text-heading-disabled); }
.al-chip--secondary { background: var(--al-surface-button-secondary-on-button); color: var(--al-text-heading-black); box-shadow: inset 0 0 0 var(--al-border-hairline) var(--al-border-button-primary), var(--al-shadow-on); }
.al-chip--secondary.is-off { background: var(--al-surface-background-white-soft-a4); color: var(--al-text-heading-disabled); box-shadow: inset 0 0 0 var(--al-border-hairline) var(--al-border-button-disabled), inset 2px 2px 10px rgba(26,28,61,.24); }

/* =====================================================================
   2. MOLÉCULAS
   ===================================================================== */

/* 2.1 input (input_reposo / input_activo / error / disabled) ------------- */
.al-field { display: flex; flex-direction: column; gap: var(--al-space-8); min-width: 0; }
.al-field__main { display: flex; flex-direction: column; }
.al-field__label { font: var(--al-text-label); color: var(--al-text-heading-black); }
.al-field__control {
  position: relative; display: flex; align-items: center; gap: var(--al-space-8); min-height: 48px; padding: var(--al-space-8) var(--al-space-16);
  border: var(--al-border-2) solid transparent; border-radius: var(--al-radius-12); background: var(--al-surface-background-white-soft); box-shadow: var(--al-shadow-off);
  transition: border-color var(--al-duration-fast), box-shadow var(--al-duration-fast);
}
.al-field__control:focus-within { border-color: var(--al-border-diagramming-interactive); box-shadow: var(--al-shadow-on); }
.al-field__input { flex: 1; min-width: 0; width: 100%; padding: 0; border: 0; outline: 0; box-shadow: none; -webkit-appearance: none; appearance: none; background: transparent; font: var(--al-text-body-m); color: var(--al-text-body-black); }
.al-field__input:focus, .al-field__input:focus-visible { border: 0; outline: 0; box-shadow: none; }
.al-field__control:focus-within .al-field__input { font: var(--al-text-body-l); }
.al-field__input::placeholder { color: var(--al-text-body-disabled); }
.al-field__icon { flex: none; width: 20px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; }
.al-field__icon img { width: 20px; height: 20px; }
.al-field__helper { padding: 0 var(--al-space-16); font: var(--al-text-body-m); color: var(--al-text-body-black); }
.al-field__aux { align-self: flex-start; }
.al-field.is-error .al-field__control { border-color: var(--al-border-alert-default); }
.al-field.is-error .al-field__helper { color: var(--al-text-alert-default); }
.al-field.is-success .al-field__control { border-color: var(--al-border-success-default); }
.al-field.is-disabled .al-field__control { background: var(--al-surface-disabled-light); box-shadow: none; }
.al-field.is-disabled .al-field__input { color: var(--al-text-disabled-dark); cursor: not-allowed; }
/* textarea (textbox) */
.al-field__control--textbox { align-items: flex-start; min-height: 100px; }
.al-field__control--textbox .al-field__input { min-height: 84px; resize: vertical; }
/* select (desplegado) */
.al-field__control--select::after { content: ""; flex: none; width: 20px; height: 20px; background: center / 20px no-repeat url("../assets/icons/icono_micro_cta.svg"); pointer-events: none; transition: transform var(--al-duration-base); }
.al-field__control--select select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.al-field__control--select select:invalid, .al-field__control--select select.is-placeholder { color: var(--al-text-body-disabled); }
/* celular */
.al-field__phone { display: flex; gap: var(--al-space-8); }
.al-field__phone .al-field__control:first-child { flex: none; width: 96px; }
.al-field__phone .al-field__control:last-child { flex: 1; }

/* 2.2 input buscar -------------------------------------------------------- */
.al-search { display: flex; align-items: center; gap: var(--al-space-8); }
.al-search .al-field__control { flex: 1; min-height: 32px; border-radius: var(--al-radius-full); }

/* 2.3 input código / pass (OTP) ------------------------------------------ */
.al-otp { display: flex; gap: var(--al-space-8); }
.al-otp input { width: 48px; height: 48px; padding: 0; border: var(--al-border-2) solid transparent; border-radius: var(--al-radius-12); background: var(--al-surface-background-white-soft); box-shadow: var(--al-shadow-off); font: var(--al-text-headline-s); color: var(--al-text-body-black); text-align: center; outline: 0; transition: border-color var(--al-duration-fast), box-shadow var(--al-duration-fast); }
.al-otp input::placeholder { color: var(--al-text-body-disabled); }
.al-otp input:focus { border-color: var(--al-border-diagramming-interactive); box-shadow: var(--al-shadow-on); }

/* 2.4 campo_input (lista de opciones del desplegable) --------------------- */
.al-options { display: flex; flex-direction: column; overflow: hidden; border: var(--al-border-2) solid var(--al-border-diagramming-interactive); border-radius: var(--al-radius-12); background: var(--al-surface-background-white); box-shadow: var(--al-shadow-off); }
.al-option { display: flex; align-items: center; min-height: 48px; padding: var(--al-space-8) var(--al-space-16); border: var(--al-border-2) solid transparent; border-radius: var(--al-radius-12); background: var(--al-surface-background-white-soft); font: var(--al-text-body-m); color: var(--al-text-body-black); text-align: left; cursor: pointer; }
.al-option:hover, .al-option[aria-selected="true"] { border-color: var(--al-border-diagramming-interactive); box-shadow: var(--al-shadow-on); font: var(--al-text-body-l); }

/* 2.5 tooltip ------------------------------------------------------------- */
.al-tooltip { position: relative; display: inline-flex; padding: var(--al-space-12) var(--al-space-24); border-radius: var(--al-radius-8); background: var(--al-surface-background-white-soft); box-shadow: var(--al-shadow-off); font: var(--al-text-body-l); color: var(--al-text-heading-black); }
[data-al-tooltip] { position: relative; }
[data-al-tooltip]::after { content: attr(data-al-tooltip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px); width: max-content; max-width: 240px; padding: var(--al-space-12) var(--al-space-24); border-radius: var(--al-radius-8); background: var(--al-surface-background-white-soft); box-shadow: var(--al-shadow-off); font: var(--al-text-body-m); color: var(--al-text-heading-black); opacity: 0; pointer-events: none; transition: opacity var(--al-duration-fast), transform var(--al-duration-fast); z-index: 10; }
[data-al-tooltip]:hover::after, [data-al-tooltip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* 2.6 stepper ------------------------------------------------------------- */
.al-stepper { display: flex; align-items: center; gap: var(--al-space-16); padding: var(--al-space-8); border-radius: var(--al-radius-full); background: var(--al-surface-background-major); }
.al-stepper__icon { display: grid; place-items: center; width: 32px; height: 32px; border: var(--al-border-2) solid var(--al-border-button-primary); border-radius: 50%; flex: none; }
.al-stepper__icon img { width: 22px; height: 22px; }
.al-stepper__meta { display: flex; flex-direction: column; gap: 2px; }
.al-stepper__step { font: var(--al-text-caption); color: var(--al-text-body-black); }
.al-stepper__step b { color: var(--al-text-heading-black); }
.al-stepper__title { font: var(--al-text-body-l); color: var(--al-text-heading-black); }

/* 2.7 menu_superior_microaccion ------------------------------------------ */
.al-menu-pop { display: flex; flex-direction: column; gap: var(--al-space-16); padding: var(--al-space-16) var(--al-space-48); border-radius: var(--al-radius-12) 0 var(--al-radius-12) var(--al-radius-12); background: var(--al-surface-background-white-soft); box-shadow: var(--al-shadow-menu-superior); }
.al-menu-pop a, .al-menu-pop button { padding: 0; border: 0; background: none; font: var(--al-text-body-l); color: var(--al-text-on-button-hover); text-align: left; text-decoration: none; cursor: pointer; }

/* 2.8 card_sesion_permanente --------------------------------------------- */
.al-session-card { display: flex; align-items: center; justify-content: space-between; gap: var(--al-space-12); padding: var(--al-space-24) var(--al-space-12) var(--al-space-24) var(--al-space-24); border-radius: var(--al-radius-24); background: var(--al-surface-information-light); color: var(--al-text-heading-black); }
.al-session-card.is-off { background: var(--al-surface-disabled-dark); color: var(--al-text-heading-white); }
.al-session-card__title { font: var(--al-text-body-m); }
.al-session-card__copy { font: var(--al-text-body-l); }

/* =====================================================================
   3. ORGANISMOS
   ===================================================================== */

/* 3.1 menu_superior (brand / navigation / principal / navigation_full) ---- */
.al-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--al-space-16); min-height: 48px; padding: var(--al-space-8) var(--al-space-24); }
.al-topbar--navigation, .al-topbar--principal { border-radius: var(--al-radius-full); background: var(--al-surface-solido-3); box-shadow: var(--al-shadow-menu-superior); -webkit-backdrop-filter: blur(var(--al-blur-menu-superior)); backdrop-filter: blur(var(--al-blur-menu-superior)); }
.al-topbar--full { border-radius: 0; background: var(--al-surface-solido-3); box-shadow: 0 8px 16px rgba(26,28,61,.08); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.al-topbar--brand { justify-content: center; }
.al-avatar { width: 32px; height: 32px; border: var(--al-border-2) solid var(--al-border-button-primary); border-radius: 50%; object-fit: cover; box-shadow: 0 4px 8px rgba(26,28,61,.32); }

/* 3.2 navbar -------------------------------------------------------------- */
.al-navbar { display: inline-flex; align-items: center; gap: var(--al-space-16); padding: var(--al-space-8) var(--al-space-16); border-radius: 100px; background: var(--al-surface-background-white-soft-a4); box-shadow: 0 1px 8px rgba(0,0,0,.1), 0 0 2px rgba(0,0,0,.1), inset 0 0 8px #f2f2f2, inset 0 0 0 1px #a6a6a6, inset -2px -2px .5px -2px #262626, inset 2px 2px .5px -2px #262626, inset 3px 3px .5px -3.5px #fff; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.al-navbar__btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--al-surface-background-white); cursor: pointer; transition: box-shadow var(--al-duration-base), transform var(--al-duration-fast); }
.al-navbar__btn img { width: 24px; height: 24px; }
.al-navbar__btn[aria-current="page"], .al-navbar__btn.is-active { box-shadow: var(--al-shadow-circulo-reposo), inset 0 0 0 var(--al-border-2) var(--al-border-button-primary); }
.al-navbar__btn:hover { transform: translateY(-2px); }

/* 3.3 cards (guia / informativa / formulario) ----------------------------- */
.al-card { display: flex; flex-direction: column; gap: var(--al-space-24); padding: var(--al-space-48) var(--al-space-24); border-radius: var(--al-radius-32); background: var(--al-surface-background-white-soft); box-shadow: var(--al-shadow-card-global); }
.al-card--formulario { background: var(--al-surface-background-major); }
.al-card--guia { position: relative; margin-top: 152px; padding-top: var(--al-space-48); background: var(--al-surface-background-white); }
.al-card__guide { position: absolute; left: 50%; top: -152px; width: 182px; transform: translateX(-50%); }
.al-card__head { display: flex; flex-direction: column; gap: var(--al-space-16); }
.al-card__section { display: flex; flex-direction: column; gap: var(--al-space-24); }

/* 3.4 modals (bottom sheet: informativa / formulario / titular) ----------- */
.al-modal-backdrop { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; background: rgba(26, 28, 61, .32); opacity: 0; visibility: hidden; transition: opacity var(--al-duration-base), visibility var(--al-duration-base); }
.al-modal-backdrop.is-open { opacity: 1; visibility: visible; }
.al-modal { display: flex; flex-direction: column; gap: var(--al-space-40); width: 100%; max-width: 560px; padding: var(--al-space-24) var(--al-space-24) var(--al-space-48); border-radius: var(--al-radius-32) var(--al-radius-32) 0 0; background: var(--al-surface-background-white-soft); box-shadow: var(--al-shadow-modal); -webkit-backdrop-filter: blur(var(--al-blur-modal)); backdrop-filter: blur(var(--al-blur-modal)); transform: translateY(24px); transition: transform var(--al-duration-slow) var(--al-ease-calm); }
.al-modal-backdrop.is-open .al-modal { transform: none; }
.al-modal--formulario { background: var(--al-surface-background-major); }
.al-modal--titular { gap: var(--al-space-24); background: var(--al-surface-degradado-1); border-top: 1px solid var(--al-border-diagramming-white); box-shadow: none; }

/* 3.5 popup (informativo / navegación) ----------------------------------- */
.al-popup-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--al-space-24); background: rgba(26, 28, 61, .45); opacity: 0; visibility: hidden; transition: opacity var(--al-duration-base), visibility var(--al-duration-base); }
.al-popup-backdrop.is-open { opacity: 1; visibility: visible; }
.al-popup { display: flex; flex-direction: column; align-items: center; gap: var(--al-space-24); width: 100%; min-width: min(300px, 100%); max-width: 400px; padding: var(--al-space-24); border-radius: var(--al-radius-32); background: var(--al-surface-background-white); box-shadow: var(--al-shadow-modal-up); text-align: center; transform: scale(.96); transition: transform var(--al-duration-base) var(--al-ease-calm); }
.al-popup-backdrop.is-open .al-popup { transform: none; }
.al-popup__icon { width: 88px; height: 88px; }
.al-popup__title { font: var(--al-text-headline-m); color: var(--al-text-heading-black); margin: 0; }
.al-popup__subs { display: flex; flex-direction: column; gap: var(--al-space-8); }
.al-popup__sub1 { font: var(--al-text-headline-s); color: var(--al-text-heading-black); margin: 0; }
.al-popup__sub2 { font: var(--al-text-body-l); font-weight: 700; color: var(--al-text-body-black); margin: 0; }
.al-popup__copy { font: var(--al-text-body-l); color: var(--al-text-body-black); margin: 0; }
.al-popup__actions { display: flex; flex-direction: column; gap: var(--al-space-16); width: 100%; }
/* Cierre opcional (X) arriba a la derecha — v1.2. Área táctil de 40px, trazo con el color de icono primario. */
.al-popup { position: relative; }
.al-popup__close { position: absolute; top: var(--al-space-12); right: var(--al-space-12); z-index: 1; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--al-radius-full); background: var(--al-surface-background-white-soft); box-shadow: var(--al-shadow-off); cursor: pointer; transition: box-shadow var(--al-duration-fast), transform var(--al-duration-fast); }
.al-popup__close::before, .al-popup__close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; border-radius: 2px; background: var(--al-icon-primary); }
.al-popup__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.al-popup__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.al-popup__close:hover { box-shadow: var(--al-shadow-on); }
.al-popup__close:active { transform: scale(.94); }
.al-popup__close:focus-visible { outline: 2px solid var(--al-border-information-dark); outline-offset: 2px; }

/* 3.6 carrusel (pista con scroll-snap + dots) ---------------------------- */
.al-carousel { display: flex; gap: var(--al-space-24); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.al-carousel::-webkit-scrollbar { display: none; }
.al-carousel > * { scroll-snap-align: start; flex: none; }

/* 3.7 Toast (feedback breve no bloqueante) ------------------------------- */
.al-toast { position: fixed; left: 50%; bottom: var(--al-space-24); z-index: 110; display: flex; align-items: center; gap: var(--al-space-12); max-width: calc(100% - 48px); padding: var(--al-space-12) var(--al-space-24); border-radius: var(--al-radius-full); background: var(--al-surface-background-white-soft); box-shadow: var(--al-shadow-card-global); font: var(--al-text-body-m); color: var(--al-text-heading-black); transform: translate(-50%, 24px); opacity: 0; transition: opacity var(--al-duration-base), transform var(--al-duration-base) var(--al-ease-calm); }
.al-toast.is-open { opacity: 1; transform: translate(-50%, 0); }
.al-toast img { width: 24px; height: 24px; }

/* =====================================================================
   4. COMPONENTES DE GESTIÓN (admin / herramientas internas) — v1.1
   Derivados de los tokens y patrones existentes (cards, chips, inputs, estados).
   ===================================================================== */

/* 4.1 Badge de estado ----------------------------------------------------- */
.al-badge { display: inline-flex; align-items: center; gap: var(--al-space-4); min-height: 24px; padding: var(--al-space-4) var(--al-space-12); border-radius: var(--al-radius-full); font: var(--al-text-caption); font-weight: var(--al-font-weight-bold); white-space: nowrap; background: var(--al-surface-background-major); color: var(--al-text-body-black); }
.al-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .9; }
.al-badge--draft     { background: var(--al-surface-background-major); color: var(--al-text-body-black); }
.al-badge--review    { background: var(--al-surface-information-light); color: var(--al-text-information-dark); }
.al-badge--reviewed  { background: var(--al-surface-button-secondary-on-button); color: var(--al-p-doradosuave-700); }
.al-badge--approved  { background: var(--al-surface-button-primary-on-button-hover); color: var(--al-p-naranja-700); }
.al-badge--published { background: var(--al-p-verde-100); color: var(--al-text-success-dark); }
.al-badge--changes   { background: var(--al-surface-alert-light-bg); color: var(--al-surface-alert-dark); }
.al-badge--off       { background: var(--al-surface-disabled-light); color: var(--al-text-disabled-dark); }

/* 4.2 Alerta en línea ----------------------------------------------------- */
.al-alert { display: flex; align-items: flex-start; gap: var(--al-space-12); padding: var(--al-space-16) var(--al-space-24); border-radius: var(--al-radius-24); background: var(--al-surface-information-light); color: var(--al-text-information-dark); font: var(--al-text-body-m); }
.al-alert img { width: 24px; height: 24px; flex: none; }
.al-alert--success { background: var(--al-p-verde-100); color: var(--al-text-success-dark); }
.al-alert--error   { background: var(--al-surface-alert-light-bg); color: var(--al-surface-alert-dark); }
.al-alert--warning { background: var(--al-surface-button-primary-on-button-hover); color: var(--al-p-naranja-800); }

/* 4.3 Tabs (pestañas) ----------------------------------------------------- */
.al-tabs { display: inline-flex; gap: var(--al-space-4); padding: var(--al-space-4); border-radius: var(--al-radius-full); background: var(--al-surface-background-major); box-shadow: inset 0 0 0 var(--al-border-1) var(--al-border-diagramming-line); }
.al-tab { display: inline-flex; align-items: center; gap: var(--al-space-8); min-height: 40px; padding: var(--al-space-8) var(--al-space-24); border: 0; border-radius: var(--al-radius-full); background: transparent; font: var(--al-text-label); color: var(--al-text-body-black); text-decoration: none; cursor: pointer; transition: background-color var(--al-duration-fast), color var(--al-duration-fast); }
.al-tab:hover { color: var(--al-text-heading-black); background: var(--al-surface-button-secondary-on-button); }
.al-tab[aria-selected="true"], .al-tab.is-active { background: var(--al-principal-1); color: var(--al-text-heading-white); }

/* 4.4 Tabla --------------------------------------------------------------- */
.al-table-wrap { overflow-x: auto; border-radius: var(--al-radius-24); background: var(--al-surface-background-white-soft); box-shadow: var(--al-shadow-off); }
.al-table { width: 100%; border-collapse: collapse; font: var(--al-text-body-m); color: var(--al-text-body-black); }
.al-table th { padding: var(--al-space-16) var(--al-space-24); text-align: left; font: var(--al-text-label); color: var(--al-text-heading-black); background: var(--al-surface-background-major); white-space: nowrap; }
.al-table td { padding: var(--al-space-16) var(--al-space-24); border-top: var(--al-border-1) solid var(--al-border-diagramming-line); vertical-align: middle; }
.al-table tr:hover td { background: var(--al-p-blancomarfil-300); }
.al-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.al-table__actions { display: flex; gap: var(--al-space-8); justify-content: flex-end; }

/* 4.5 Matriz de permisos (tabla de checks) -------------------------------- */
.al-matrix th, .al-matrix td { text-align: center; }
.al-matrix th:first-child, .al-matrix td:first-child { text-align: left; }
.al-matrix .al-check { justify-content: center; }
.al-matrix .al-check__box { width: 24px; height: 24px; border-width: var(--al-border-2); }

/* 4.6 Estado vacío -------------------------------------------------------- */
.al-empty { display: flex; flex-direction: column; align-items: center; gap: var(--al-space-12); padding: var(--al-space-48) var(--al-space-24); text-align: center; color: var(--al-text-body-black); }
.al-empty img { width: 88px; height: 88px; opacity: .9; }

/* 4.7 Layout de aplicación con barra lateral ------------------------------ */
.al-shell { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; background: var(--al-surface-background-major); }
.al-sidebar { position: sticky; top: 0; display: flex; flex-direction: column; gap: var(--al-space-24); height: 100vh; overflow-y: auto; padding: var(--al-space-32) var(--al-space-16); background: var(--al-principal-1); color: var(--al-text-body-white); }
.al-sidebar__brand { display: flex; align-items: center; gap: var(--al-space-12); padding: 0 var(--al-space-12); }
.al-sidebar__group { display: flex; flex-direction: column; gap: var(--al-space-4); }
.al-sidebar__label { padding: 0 var(--al-space-12); margin-bottom: var(--al-space-4); font: var(--al-text-overline); letter-spacing: .1em; text-transform: uppercase; color: var(--al-principal-2); }
.al-sidebar__link { display: flex; align-items: center; justify-content: space-between; gap: var(--al-space-8); min-height: 44px; padding: var(--al-space-8) var(--al-space-12); border-radius: var(--al-radius-12); font: var(--al-text-body-m); color: var(--al-text-body-white); text-decoration: none; opacity: .85; transition: background-color var(--al-duration-fast), opacity var(--al-duration-fast); }
.al-sidebar__link:hover { opacity: 1; background: rgba(253, 253, 252, .08); }
.al-sidebar__link[aria-current="page"] { opacity: 1; background: rgba(255, 170, 0, .18); box-shadow: inset 3px 0 0 var(--al-surface-button-primary-on-button-1); color: var(--al-text-heading-white); }
.al-sidebar__count { min-width: 24px; padding: 0 var(--al-space-8); border-radius: var(--al-radius-full); background: var(--al-surface-button-primary-on-button-1); color: var(--al-text-on-button-default); font: var(--al-text-overline); line-height: 24px; text-align: center; }
.al-main { min-width: 0; padding: var(--al-space-32) var(--al-space-40) var(--al-space-80); }
.al-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--al-space-16); margin-bottom: var(--al-space-32); }
.al-pagehead__meta { display: flex; flex-direction: column; gap: var(--al-space-4); }
.al-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--al-space-12); }
.al-btn--sm { min-height: 40px; padding: var(--al-space-8) var(--al-space-16); font: var(--al-text-label); }
.al-panel { padding: var(--al-space-32); border-radius: var(--al-radius-32); background: var(--al-surface-background-white-soft); box-shadow: var(--al-shadow-card-global); }
.al-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--al-space-16); }
.al-stack { display: flex; flex-direction: column; gap: var(--al-space-24); }
@media (max-width: 1023px) {
  .al-shell { grid-template-columns: 1fr; }
  .al-sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: var(--al-space-16); }
  .al-sidebar__group { flex-direction: row; flex-wrap: wrap; }
  .al-sidebar__label { display: none; }
  .al-main { padding: var(--al-space-24) var(--al-space-16) var(--al-space-64); }
  .al-grid-2 { grid-template-columns: 1fr; }
}

/* 4.8 Línea de tiempo (historial / flujo de aprobación) ------------------- */
.al-timeline { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.al-timeline li { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: var(--al-space-12); padding-bottom: var(--al-space-16); }
.al-timeline li::before { content: ""; width: 12px; height: 12px; margin: 6px; border-radius: 50%; background: var(--al-border-diagramming-line); box-shadow: 0 0 0 3px var(--al-surface-background-white-soft); }
.al-timeline li::after { content: ""; position: absolute; left: 11px; top: 22px; bottom: 0; width: 2px; background: var(--al-border-diagramming-line); }
.al-timeline li:last-child::after { display: none; }
.al-timeline li.is-done::before { background: var(--al-surface-success-default); }
.al-timeline li.is-current::before { background: var(--al-surface-button-primary-on-button-1); box-shadow: 0 0 0 3px var(--al-surface-background-white-soft), var(--al-shadow-on); }
.al-timeline__title { font: var(--al-text-label); color: var(--al-text-heading-black); }
.al-timeline__meta { font: var(--al-text-caption); color: var(--al-text-body-disabled); }

/* 4.9 Campo de imagen (vista previa + reemplazo) -------------------------- */
.al-image-field { display: flex; align-items: center; gap: var(--al-space-16); padding: var(--al-space-12); border-radius: var(--al-radius-12); background: var(--al-surface-background-white-soft); box-shadow: var(--al-shadow-off); }
.al-image-field img { width: 88px; height: 88px; object-fit: cover; border-radius: var(--al-radius-8); background: var(--al-surface-background-major); }
.al-image-field__meta { display: flex; flex: 1; flex-direction: column; gap: var(--al-space-8); min-width: 0; }
.al-image-field__path { font: var(--al-text-caption); color: var(--al-text-body-disabled); word-break: break-all; }

/* 4.10 Repetidor (lista de ítems editables) ------------------------------- */
.al-repeater { display: flex; flex-direction: column; gap: var(--al-space-16); }
.al-repeater__item { position: relative; display: flex; flex-direction: column; gap: var(--al-space-16); padding: var(--al-space-24); border-radius: var(--al-radius-24); background: var(--al-surface-background-white-soft); box-shadow: inset 0 0 0 var(--al-border-1) var(--al-border-diagramming-line); }
.al-repeater__head { display: flex; align-items: center; justify-content: space-between; gap: var(--al-space-12); }
.al-repeater__tools { display: flex; gap: var(--al-space-4); }
.al-icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transition: background-color var(--al-duration-fast); }
.al-icon-btn:hover { background: var(--al-icon-primary-background); }
.al-icon-btn img { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
  .al-root *, .al-root *::before, .al-root *::after { transition: none !important; animation: none !important; }
}