/* Agenda de eventos · DUAGA
   Mismo sistema visual que `cronograma-lic`: idénticos tokens, materiales,
   muelles y capas de accesibilidad. Lo que cambia es el contenido —aquí hay
   eventos agrupados por mes en vez de un diagrama de Gantt—, así que las
   piezas propias del calendario se construyen con ese mismo vocabulario. */

:root{
  --duaga:#2E75B6; --duaga-d:#223260;
  --tal:#0E9AA7; --tal-d:#0A6E77;
  --all:#64748B;
  --gate:#F59E0B;
  --crit:#E11D48;
  --key:#0EA5E9;
  --ok:#059669;
  --bg:#EEF1F6; --card:#FFFFFF; --ink:#1E2633; --muted:#6B7787;
  --line:#DCE2EC; --done:#94A3B8;
  --shadow:0 1px 3px rgba(20,30,50,.08),0 6px 24px rgba(20,30,50,.06);

  /* Los mismos colores en tripleta RGB: permite usarlos con transparencia
     (vidrio, sombras, anillos de foco) sin introducir ningún tono nuevo. */
  --duaga-rgb:46,117,182;
  --duaga-d-rgb:34,50,96;
  --tal-rgb:14,154,167;
  --gate-rgb:245,158,11;
  --key-rgb:14,165,233;
  --crit-rgb:225,29,72;
  --ok-rgb:5,150,105;
  --ink-rgb:30,38,51;

  /* Resortes (amortiguación + respuesta) muestreados como linear(). Sin
     librerías. smooth/snap: críticamente amortiguados, no rebotan → interfaz
     en general. bounce/sheet: rebote leve → solo superficies que "llegan"
     (modal, panel, aviso), nunca un simple hover. */
  --sp-smooth: linear(0, 0.0501, 0.1599, 0.2891, 0.4162, 0.531, 0.6293, 0.7108, 0.7768, 0.8291, 0.8702, 0.9019, 0.9263, 0.9449, 0.959, 0.9695, 0.9775, 0.9834, 0.9878, 0.991, 0.9934, 0.9952, 0.9965, 0.9974, 0.9981, 0.9986, 1);
  --sp-smooth-t:589ms;
  --sp-snap: linear(0, 0.0503, 0.1603, 0.2897, 0.417, 0.5319, 0.6302, 0.7117, 0.7776, 0.8298, 0.8708, 0.9025, 0.9268, 0.9453, 0.9592, 0.9698, 0.9776, 0.9835, 0.9879, 0.9911, 0.9935, 0.9952, 0.9965, 0.9975, 0.9982, 0.9987, 1);
  --sp-snap-t:413ms;
  --sp-bounce: linear(0, 0.0449, 0.1505, 0.2832, 0.4211, 0.5506, 0.6644, 0.7596, 0.8359, 0.8946, 0.9381, 0.969, 0.9898, 1.003, 1.0106, 1.0142, 1.0152, 1.0145, 1.0129, 1.0109, 1.0088, 1.0068, 1.0051, 1.0036, 1.0025, 1.0016, 1);
  --sp-bounce-t:474ms;
  --sp-sheet: linear(0, 0.0449, 0.1503, 0.2829, 0.4207, 0.5501, 0.664, 0.7592, 0.8355, 0.8943, 0.9378, 0.9688, 0.9897, 1.0029, 1.0105, 1.0142, 1.0152, 1.0145, 1.0129, 1.0109, 1.0088, 1.0068, 1.0051, 1.0037, 1.0025, 1.0016, 1);
  --sp-sheet-t:406ms;
  /* respuesta inmediata al pulsar: por debajo del umbral de percepción */
  --press:90ms cubic-bezier(.2,0,.2,1);

  /* La superficie más grande lee como más gruesa: más desenfoque y sombra más
     profunda que un chip pequeño. */
  --shadow-lift:0 1px 2px rgba(20,30,50,.07),0 10px 30px rgba(20,30,50,.09);
  --shadow-float:0 2px 6px rgba(10,20,40,.10),0 24px 70px rgba(10,20,40,.22);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.65);

  --brand-grad:linear-gradient(135deg,#223260 0%,#2E75B6 62%,#0E9AA7 130%);
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  /* La fuente del sistema ya trae tamaño óptico, kerning y ajuste de
     legibilidad; Arial queda solo como último recurso. En rem para respetar
     el tamaño de texto configurado en el navegador. */
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"Inter","Helvetica Neue",Arial,sans-serif;
  font-size:.875rem;line-height:1.5;letter-spacing:0;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{color:var(--duaga)}
[hidden]{display:none!important}
.spacer{flex:1}
.muted{color:var(--muted)}

/* Foco visible en todo lo enfocable: solo con teclado, nunca al hacer clic. */
:where(a,button,input,select,textarea,[tabindex],.filter,.text-button):focus-visible{
  outline:2px solid var(--duaga);outline-offset:2px}
/* sin retardo de 300 ms al tocar en móvil */
button,.filter,.event-card,.text-button,input[type=checkbox]{touch-action:manipulation}

/* ---------------------------------------------------------------- PUERTA --- */
.gate{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:var(--brand-grad);padding:20px}
/* Vidrio de verdad: la caja flota sobre el degradado y lo deja translucir.
   El borde superior claro es la luz pegando en el canto del material. */
.gate-card{background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  border:1px solid rgba(255,255,255,.45);border-top-color:rgba(255,255,255,.85);
  border-radius:20px;box-shadow:var(--shadow-float),var(--glass-edge);
  padding:28px 26px;width:100%;max-width:400px;
  animation:sheet-in var(--sp-bounce-t) var(--sp-bounce) both}
/* Logotipo institucional, centrado y protagonista. Alto fijo y ancho
   automático: la marca conserva su proporción pase lo que pase con el ancho
   de la tarjeta. */
.gate-logo{display:block;height:88px;width:auto;max-width:100%;margin:2px auto 22px}
.gate-card .eyebrow{color:var(--muted);text-align:center}
.gate-card h1{margin:6px 0 22px;font-size:22px;line-height:1.15;letter-spacing:-.015em;
  text-align:center}
.gate-wait{display:none;font-size:13px;color:var(--muted);padding:10px 0 4px;text-align:center}
/* mientras se verifica la sesión no se muestra el formulario: evita pedir
   clave a quien ya está dentro, y evita la pantalla en blanco */
.gate.checking .gate-wait{display:block}
.gate.checking .field,.gate.checking .button,.gate.checking .form-error{display:none!important}

/* ----------------------------------------------------------------- SHELL --- */
.shell{max-width:1220px;margin:0 auto;padding:22px 20px 60px}

/* ----------------------------------------------------------------- HERO --- */
.hero{background:var(--brand-grad);color:#fff;border-radius:20px;padding:26px 28px;
  box-shadow:var(--shadow-lift);position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;
  background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%)}
.hero-grid{display:flex;gap:14px;align-items:flex-start;position:relative}
.hero-copy{min-width:0;flex:1}
.eyebrow,.label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  margin:0 0 4px;color:var(--muted)}
.eyebrow.light{color:rgba(255,255,255,.85)}
/* texto grande = interletraje negativo e interlínea corta; el cuerpo queda en 0 */
.hero-copy h1{margin:6px 0 4px;font-size:clamp(21px,2.4vw,27px);line-height:1.12;letter-spacing:-.021em}
.hero-subtitle{margin:0;opacity:.92;font-size:14px;line-height:1.45;letter-spacing:-.002em;max-width:66ch}

/* Contadores: chip pequeño → desenfoque suave y sombra corta. Compárese con
   .modal, que es una superficie mucho mayor y lee más gruesa. */
.metrics{display:flex;gap:14px;margin-top:16px;flex-wrap:wrap;position:relative}
.metric{background:rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);
  border:1px solid rgba(255,255,255,.22);border-top-color:rgba(255,255,255,.38);
  border-radius:14px;padding:10px 16px;min-width:132px;flex:1}
.metric-value{display:block;font-size:24px;font-weight:800;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.metric-label{display:block;font-size:11.5px;opacity:.9;margin-top:4px;line-height:1.3}
.metric[data-metric=si] .metric-value{color:#9FF3D2}
.metric[data-metric=tal] .metric-value{color:#FFD79A}
.metric[data-metric=speaker] .metric-value{color:#A9E4F5}

/* ------------------------------------------------------------------ SYNC --- */
.syncbar{display:flex;align-items:center;gap:9px;margin:14px 2px 0;font-size:12px;
  color:var(--muted);flex-wrap:wrap}
.sync{display:inline-flex;align-items:center;gap:8px}
.sync i{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none;
  transition:background var(--sp-snap-t) var(--sp-snap)}
.sync.pending i{background:var(--gate);animation:breathe 1.8s ease-in-out infinite}
.sync.error i{background:var(--crit)}
/* Nombre en verde: el mismo tono del punto de sincronización, sin colores
   nuevos. En caja alta el texto pierde legibilidad si va apretado, de ahí el
   interletraje positivo — al revés que en los titulares. */
.text-button{border:0;background:none;padding:0;font-weight:800;color:var(--ok);
  text-transform:uppercase;letter-spacing:.07em;font-size:11.5px;
  border-bottom:1px dashed rgba(var(--ok-rgb),.45);border-radius:3px;
  transition:color var(--sp-snap-t) var(--sp-snap),border-color var(--sp-snap-t) var(--sp-snap)}
.text-button:hover{color:var(--duaga);border-bottom-color:var(--duaga)}

/* ------------------------------------------------------------- DASHBOARD --- */
.dashboard{display:grid;grid-template-columns:1.25fr .75fr;gap:14px;margin:16px 0 0}
.next-card,.focus-card{background:var(--card);border-radius:16px;box-shadow:var(--shadow);
  padding:16px 18px}
.next-card{display:flex;align-items:center;gap:16px;position:relative;overflow:hidden}
/* El vidrio necesita algo que dejar ver: campo de luz con los tonos de firma,
   dentro de la tarjeta sólida (no otra capa translúcida debajo). */
.next-card:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(420px 160px at 4% 130%,rgba(var(--duaga-rgb),.14),transparent 72%),
    radial-gradient(380px 150px at 92% -40%,rgba(var(--tal-rgb),.12),transparent 72%)}
.next-card > *{position:relative}
.next-date{width:62px;height:66px;border-radius:13px;background:var(--duaga-d);color:#fff;
  display:flex;flex-direction:column;justify-content:center;align-items:center;flex:none;
  box-shadow:0 2px 8px rgba(var(--duaga-d-rgb),.24)}
.next-date span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#B8D1E9}
.next-date strong{font-size:27px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.next-copy{min-width:0;flex:1}
.next-copy .label{margin:0 0 2px;color:var(--muted)}
.next-copy h2{margin:2px 0 4px;font-size:17px;letter-spacing:-.014em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.next-copy p:last-child{margin:0;font-size:12.5px}
.countdown{margin-left:auto;text-align:right;white-space:nowrap;color:var(--muted);font-size:11.5px}
.countdown strong{display:block;color:var(--duaga-d);font-size:23px;font-weight:800;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}

.focus-card{display:flex;flex-direction:column}
.focus-top{display:flex;justify-content:space-between;gap:10px;align-items:center;
  color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:10px;font-weight:800}
.focus-card h2{font-size:15px;margin:10px 0 5px;letter-spacing:-.012em;line-height:1.25}
.focus-card p{color:var(--muted);line-height:1.5;margin:0;font-size:12.5px}
.focus-meta{border-top:1px solid var(--line);margin-top:auto;padding-top:11px;font-size:11.5px;
  color:var(--muted)}
.status-pill{padding:3px 8px;border-radius:20px;background:rgba(var(--ok-rgb),.12);color:#0A6E4E;
  font-size:10px;font-weight:800;letter-spacing:.06em;flex:none}

/* ---------------------------------------------------------------- CRUCES --- */
.alerts{background:#FFF8EC;border:1px solid #F6E4BD;border-radius:14px;padding:14px 18px;
  margin-top:14px;display:grid;grid-template-columns:30px 1fr;gap:13px;align-items:start}
.alert-icon{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:#FEF0D3;color:#8A5A00;font-weight:900;flex:none}
.alerts .label{color:#8A5A00;margin-bottom:2px;letter-spacing:.09em;font-size:11px}
.alerts h2{font-size:15px;margin:0 0 6px;letter-spacing:-.012em;color:#6B4600}
.conflict-line{color:#725F3F;line-height:1.5;margin:5px 0;font-size:12.5px}
.conflict-line strong{color:#503C1E}

/* --------------------------------------------------------------- TOOLBAR --- */
.calendar-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;
  margin:26px 4px 10px;flex-wrap:wrap}
.calendar-head h2{font-size:16px;font-weight:800;margin:0;letter-spacing:-.014em}
.calendar-head .eyebrow{color:var(--muted);font-size:11px;letter-spacing:.14em}
.view-actions,.summary-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Capa flotante translúcida: el contenido pasa por debajo en vez de que la
   barra se coma una franja fija de la pantalla. */
.filter-bar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0 0 14px;
  position:sticky;top:8px;z-index:20;padding:8px 10px;border-radius:16px;
  background:rgba(255,255,255,.68);
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 1px 2px rgba(20,30,50,.05),0 8px 28px rgba(20,30,50,.07),var(--glass-edge)}
.filter{cursor:pointer;user-select:none;border:1.5px solid var(--line);background:var(--card);
  border-radius:30px;padding:6px 13px;font-size:12.5px;font-weight:700;color:var(--muted);
  transition:background var(--sp-snap-t) var(--sp-snap),color var(--sp-snap-t) var(--sp-snap),
             border-color var(--sp-snap-t) var(--sp-snap),transform var(--press)}
.filter:hover{border-color:rgba(var(--duaga-rgb),.45);color:var(--ink)}
.filter.active{color:#fff;border-color:var(--duaga-d);background:var(--duaga-d)}
.filter:active{transform:scale(.96)}

/* --------------------------------------------------------------- BOTONES --- */
.button{cursor:pointer;border:none;background:var(--duaga-d);color:#fff;border-radius:10px;
  padding:8px 14px;font-weight:700;font-size:12.5px;letter-spacing:.002em;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  box-shadow:0 1px 2px rgba(var(--duaga-d-rgb),.22);
  transition:transform var(--press),box-shadow var(--sp-snap-t) var(--sp-snap),
             background var(--sp-snap-t) var(--sp-snap),border-color var(--sp-snap-t) var(--sp-snap)}
.button:hover{box-shadow:0 2px 8px rgba(var(--duaga-d-rgb),.26)}
/* la respuesta vive en el pulsado, y es inmediata */
.button:active{transform:scale(.96)}
.button.primary{background:var(--duaga);box-shadow:0 1px 2px rgba(var(--duaga-rgb),.24)}
.button.primary:hover{box-shadow:0 2px 8px rgba(var(--duaga-rgb),.3)}
.button.secondary{background:#fff;color:var(--duaga-d);border:1.5px solid var(--line);box-shadow:none}
.button.secondary:hover{border-color:var(--duaga);box-shadow:0 1px 4px rgba(var(--duaga-rgb),.14)}
.button.quiet{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.32);color:#fff;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:none}
.button.quiet:hover{background:rgba(255,255,255,.3);border-color:rgba(255,255,255,.55)}
.button.danger{background:var(--crit);box-shadow:0 1px 2px rgba(var(--crit-rgb),.25)}
.button.wide{width:100%;padding:11px}
.button:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
.mini-button{cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--muted);
  border-radius:8px;width:26px;height:26px;font-size:12px;line-height:1;flex:none;
  display:inline-grid;place-items:center;
  transition:transform var(--press),color var(--sp-snap-t) var(--sp-snap),
             border-color var(--sp-snap-t) var(--sp-snap)}
.mini-button:hover{color:var(--duaga-d);border-color:var(--duaga)}
.mini-button:active{transform:scale(.92)}
.icon-button{cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--muted);
  border-radius:8px;width:28px;height:28px;font-size:14px;line-height:1;flex:none;
  display:inline-grid;place-items:center;
  transition:transform var(--press),color var(--sp-snap-t) var(--sp-snap),
             border-color var(--sp-snap-t) var(--sp-snap)}
.icon-button:hover{color:var(--duaga-d);border-color:var(--duaga)}
.icon-button:active{transform:scale(.92)}

/* --------------------------------------------------------------- EVENTOS --- */
.event-list{min-height:140px}
.month-heading{display:flex;align-items:center;gap:11px;margin:22px 2px 9px;color:var(--muted);
  font-size:12px;text-transform:uppercase;letter-spacing:.09em;font-weight:800}
.month-heading:after{content:"";height:1px;background:var(--line);flex:1}

.event-card{--ec-rgb:var(--duaga-rgb);
  display:grid;grid-template-columns:150px minmax(0,1fr) 180px;gap:20px;
  background:var(--card);border-radius:14px;box-shadow:var(--shadow);
  border-left:4px solid var(--duaga);padding:15px 18px;margin:0 0 9px;position:relative;
  transition:transform var(--sp-snap-t) var(--sp-snap),box-shadow var(--sp-snap-t) var(--sp-snap),
             opacity var(--sp-smooth-t) var(--sp-smooth)}
.event-card:hover{transform:translateY(-2px);
  box-shadow:0 8px 22px -10px rgba(var(--ec-rgb),.45),var(--shadow-lift)}
.event-card.type-propio{--ec-rgb:var(--duaga-d-rgb);border-left-color:var(--duaga-d)}
.event-card.has-conflict{--ec-rgb:var(--gate-rgb);border-left-color:var(--gate)}
/* Un evento descartado se retira visualmente, pero sigue teniendo que leerse:
   se atenúa la tarjeta o se apaga el titular, nunca las dos cosas a la vez. */
.event-card[data-status=no]{opacity:.72}
.event-card[data-status=no] .event-dates{color:var(--muted)}

.event-dates{color:var(--duaga-d);font-weight:800;font-size:13px;line-height:1.4;
  letter-spacing:-.008em;font-variant-numeric:tabular-nums}
.event-dates small{display:block;color:var(--muted);font-weight:600;margin-top:3px;
  font-size:11.5px;letter-spacing:0}
.event-main{min-width:0}
.event-main h3{font-size:15px;margin:0 0 4px;letter-spacing:-.012em;line-height:1.3}
.event-location{color:var(--muted);font-size:12px;margin:0}
.event-notes{color:#4A5563;font-size:12.5px;line-height:1.5;margin:9px 0 0;white-space:pre-line;
  max-width:70ch}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.tag{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  padding:2px 7px;border-radius:20px;background:#DCF0FB;color:#075985}
.tag.own{background:#E7EAF1;color:var(--duaga-d)}
.tag.warn{background:#FEF0D3;color:#8A5A00}
.tag.speaker{background:rgba(var(--tal-rgb),.14);color:var(--tal-d)}

.event-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right}
.attendance{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  padding:3px 9px;border-radius:20px;flex:none}
.attendance.confirmed{background:#DCFCE7;color:#166534}
.attendance.tentative{background:#FEF0D3;color:#8A5A00}
.attendance.declined{background:#EEF1F6;color:var(--muted)}
.event-owner{font-size:11px;color:var(--muted);line-height:1.4}
.event-owner strong{color:var(--ink)}
.next-action{font-size:11.5px;line-height:1.4;color:var(--ink)}
.next-action strong{color:var(--duaga-d)}
.card-actions{display:none;gap:5px;margin-top:auto}
.editing .card-actions{display:flex}
.edit-only{display:none}
.editing .edit-only{display:inline-flex}
.empty{color:var(--muted);font-size:12.5px;text-align:center;padding:40px 16px;
  background:var(--card);border:1px dashed #CFD7E2;border-radius:14px}

/* --------------------------------------------------------------- RESUMEN --- */
.print-summary{background:var(--card);border-radius:16px;box-shadow:var(--shadow);
  padding:20px 22px;margin-top:30px}
.summary-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin-bottom:14px;flex-wrap:wrap}
.summary-head h2{font-size:16px;font-weight:800;margin:0;letter-spacing:-.014em}
.summary-head .eyebrow{color:var(--muted);font-size:11px;letter-spacing:.14em}
.summary-scroll{overflow-x:auto;overscroll-behavior-x:contain}
table{border-collapse:collapse;width:100%;font-size:12.5px}
th{text-align:left;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
  font-size:10px;font-weight:800;padding:9px 10px;border-bottom:2px solid var(--duaga-d);
  white-space:nowrap}
td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.45}
tr:last-child td{border-bottom:0}
td strong{color:var(--duaga-d)}

footer{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:24px;color:var(--muted);font-size:12px}

/* --------------------------------------------------------------- MODALES --- */
/* Atenuar para enfocar: el fondo se oscurece y se desenfoca, la tarea flota
   encima. El velo y la superficie entran juntos y salen por el mismo camino. */
.overlay{position:fixed;inset:0;z-index:40;background:rgba(20,30,50,.45);
  -webkit-backdrop-filter:blur(14px) saturate(115%);backdrop-filter:blur(14px) saturate(115%);
  display:flex;align-items:center;justify-content:center;padding:18px;
  animation:scrim-in 220ms ease-out both}
.modal,.drawer{background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  border:1px solid rgba(255,255,255,.5);border-radius:20px;
  box-shadow:var(--shadow-float),var(--glass-edge);
  width:100%;display:flex;flex-direction:column}
.modal{max-width:600px;max-height:90vh;
  animation:sheet-in var(--sp-bounce-t) var(--sp-bounce) both}
/* El panel entra desde la derecha y se va por la derecha: mismo camino. */
.drawer-wrap{justify-content:flex-end}
.drawer{max-width:620px;max-height:92vh;margin-left:auto;
  animation:drawer-in var(--sp-sheet-t) var(--sp-sheet) both}
/* La cadena flex debe llegar entera hasta .panel-body: si algún eslabón no
   puede encogerse, el cuerpo no desplaza y el pie del modal se sale de la
   pantalla en formularios largos. */
.modal form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.panel-head{display:flex;align-items:center;gap:10px;padding:15px 18px;flex:none;
  border-bottom:1px solid rgba(var(--ink-rgb),.08)}
.panel-head h2{font-size:15px;font-weight:800;margin:0;flex:1;min-width:0;letter-spacing:-.012em}
.panel-body{padding:16px 18px;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.panel-footer{padding:13px 18px;border-top:1px solid rgba(var(--ink-rgb),.08);flex:none;
  display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}

/* --------------------------------------------------------------- CAMPOS --- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.span-2{grid-column:span 2}
.field{display:block;margin-bottom:13px;font-size:11.5px;font-weight:800;color:var(--muted);
  text-transform:uppercase;letter-spacing:.07em}
.field input,.field select,.field textarea{display:block;width:100%;margin-top:5px;
  padding:9px 11px;border:1.5px solid var(--line);border-radius:10px;font-size:13.5px;
  background:#fff;color:var(--ink);text-transform:none;letter-spacing:0;font-weight:500;
  transition:border-color var(--sp-snap-t) var(--sp-snap),box-shadow var(--sp-snap-t) var(--sp-snap)}
.field textarea{min-height:88px;line-height:1.5;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--duaga);
  box-shadow:0 0 0 3px rgba(var(--duaga-rgb),.18)}
.field small{display:block;font-size:11px;color:var(--muted);margin-top:5px;line-height:1.4;
  text-transform:none;letter-spacing:0;font-weight:600}
.field input[type=checkbox]{display:inline-block;width:16px;height:16px;margin:0 8px 0 0;
  accent-color:var(--duaga);transition:transform var(--press)}
.field input[type=checkbox]:active{transform:scale(.88)}
.checkbox-field{display:flex;align-items:center;text-transform:none;letter-spacing:0;
  font-size:13px;font-weight:600;color:var(--ink)}
.form-error{background:#FCE1E7;color:#9F1239;border-radius:9px;padding:8px 11px;
  font-size:12.5px;margin-bottom:12px;
  animation:pop-in var(--sp-snap-t) var(--sp-snap) both}

/* --------------------------------------------------------------- PANELES --- */
.list-item{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:9px;
  font-size:12.5px;
  transition:border-color var(--sp-snap-t) var(--sp-snap),box-shadow var(--sp-snap-t) var(--sp-snap)}
.list-item:hover{border-color:rgba(var(--duaga-rgb),.35);box-shadow:0 2px 10px rgba(20,30,50,.05)}
.list-item-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.list-item-head strong{flex:1;min-width:0;font-weight:700}
.list-meta{color:var(--muted);font-size:11.5px;margin-top:4px;line-height:1.45}
.change{background:#F7F9FC;border-radius:8px;padding:6px 9px;margin-top:6px;font-size:11.5px;
  line-height:1.45}
.change strong{color:var(--duaga-d)}
.panel-note{background:#F7F9FC;border-radius:10px;padding:10px 12px;font-size:12px;
  color:var(--muted);margin-bottom:14px;line-height:1.45}

/* El aviso sube desde abajo y se va por abajo, por el mismo camino. */
.toast{position:fixed;left:50%;bottom:24px;z-index:60;
  background:rgba(var(--duaga-d-rgb),.86);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;padding:11px 18px;border-radius:12px;font-size:13px;font-weight:700;
  box-shadow:var(--shadow-float);max-width:90vw;
  animation:toast-in var(--sp-sheet-t) var(--sp-sheet) both}
.toast.error{background:rgba(var(--crit-rgb),.9)}

/* la app aparece materializándose, no de golpe */
#app:not([hidden]){animation:app-in var(--sp-smooth-t) var(--sp-smooth) both}

/* ----------------------------------------------------------- ANIMACIONES --- */
/* Materializar, no solo aparecer: el desenfoque y la escala se mueven juntos,
   así la superficie lee como material que llega y no como opacidad. */
@keyframes sheet-in{
  from{opacity:0;transform:scale(.94) translateY(10px);filter:blur(6px)}
  to{opacity:1;transform:none;filter:blur(0)}}
@keyframes drawer-in{
  from{opacity:0;transform:translateX(36px) scale(.985)}
  to{opacity:1;transform:none}}
@keyframes scrim-in{from{opacity:0}to{opacity:1}}
@keyframes toast-in{
  from{opacity:0;transform:translate(-50%,22px) scale(.96)}
  to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes pop-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes app-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.35}}

/* ------------------------------------------------------------ RESPONSIVE --- */
@media (max-width:900px){
  .dashboard{grid-template-columns:1fr}
  .event-card{grid-template-columns:140px minmax(0,1fr);gap:8px 18px}
  .event-side{grid-column:2;align-items:flex-start;text-align:left;margin-top:4px}
}
@media (max-width:640px){
  .shell{padding:14px 12px 40px}
  .hero{padding:20px 18px}
  .metrics{gap:8px}
  .metric{min-width:calc(50% - 4px);padding:9px 13px}
  .next-card{flex-wrap:wrap}
  .countdown{display:none}
  .calendar-head{align-items:flex-start}
  .view-actions{width:100%}
  .filter-bar{top:6px}
  .event-card{grid-template-columns:1fr;gap:9px;padding:14px 16px}
  .event-side{grid-column:1}
  .card-actions{position:absolute;right:12px;top:12px;margin-top:0}
  .form-grid{grid-template-columns:1fr}
  .span-2{grid-column:auto}
  .modal,.drawer{max-height:94vh}
  .gate-card{padding:24px 20px}
}

/* ------------------------------------------------------- ACCESIBILIDAD --- */
/* Movimiento reducido no es "sin respuesta": es la misma información con una
   transición corta de opacidad, sin desplazamientos ni rebotes. */
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:120ms!important;scroll-behavior:auto!important}
  .modal,.drawer,.gate-card,.toast,#app:not([hidden]){
    animation:none!important;transform:none!important;filter:none!important}
  .overlay{animation:scrim-in 120ms linear both}
  .button:active,.filter:active,.mini-button:active,.icon-button:active,
  .field input[type=checkbox]:active{transform:none}
  .event-card:hover{transform:none}
  .sync.pending i{animation:none}
}
/* Transparencia reducida: los materiales se vuelven sólidos, sin desenfoque. */
@media (prefers-reduced-transparency:reduce){
  .filter-bar,.gate-card,.modal,.drawer,.metric,.toast,.button.quiet{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .next-card:before{display:none}
  .filter-bar,.gate-card,.modal,.drawer{background:#fff}
  .overlay{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(20,30,50,.6)}
  .toast{background:var(--duaga-d)} .toast.error{background:var(--crit)}
  .metric,.button.quiet{background:rgba(255,255,255,.2)}
}
/* Contraste alto: fondos casi sólidos y bordes definidos. */
@media (prefers-contrast:more){
  .filter-bar,.modal,.drawer,.gate-card{background:#fff;border:1px solid var(--ink)}
  .filter,.button.secondary,.mini-button,.icon-button,
  .field input,.field select,.field textarea{border-color:var(--ink)}
  .next-card:before{display:none}
  .event-notes,.list-meta,.focus-card p,.next-copy p,.conflict-line{color:#4A5563}
  .metric-label,.next-date span{opacity:1}
}

/* -------------------------------------------------------------- IMPRESIÓN --- */
@media print{
  body{background:#fff}
  .filter-bar,.view-actions,.summary-actions,.syncbar,.button,.mini-button,.icon-button,
  .card-actions,.overlay,.toast,.focus-card,.next-card,footer{display:none!important}
  .shell{max-width:none;padding:0}
  .hero{background:#223260!important;border-radius:0;box-shadow:none;padding:20px 22px}
  .metrics{gap:10px}
  .metric{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4)}
  .dashboard{display:block;margin:0}
  .alerts{break-inside:avoid}
  .event-card{break-inside:avoid;box-shadow:none;border:1px solid #D4DBE5;border-left-width:4px}
  .event-card:hover{transform:none}
  .print-summary{box-shadow:none;border:1px solid #ddd;margin-top:22px}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;animation:none!important}
}