/* =====================================================
   AVISOS · Fase 1 — shell visual (sin datos reales)
   Usa exclusivamente tokens de croma-ds.css / style.css.
   No define colores, radios ni sombras nuevos.
   ===================================================== */

.avz-shell {
  display: flex;
  flex-direction: column;
  gap: var(--space-6, 24px);
  padding: var(--space-6, 24px);
  max-width: 1180px;
  margin: 0 auto;
}

/* ── Header ─────────────────────────────────────────── */
.avz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3, 12px);
}
.avz-titulo {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 1px;
  color: var(--croma-black, var(--black));
  margin: 0;
}
.avz-header-acciones {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
}

/* Buscador (mismo lenguaje visual que .top-search, pero propio) */
.avz-search {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-sunken, var(--gray-50));
  border: 1px solid var(--border-neutral, var(--gray-200));
  border-radius: var(--radius-md);
  padding: 7px 12px;
  min-width: 220px;
}
.avz-search svg { color: var(--text-muted, var(--gray-400)); flex-shrink: 0; }
.avz-search input {
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--gray-800);
  width: 100%;
}
.avz-search input::placeholder { color: var(--text-muted, var(--gray-400)); }

/* ── Toggle de vista (Hoy / Calendario / Lista) — pill tabs ── */
.avz-view-toggle {
  display: flex;
  gap: 4px;
  background: var(--surface-sunken, #f1f5f9);
  border: 1px solid var(--border-neutral, #e2e8f0);
  border-radius: var(--radius-md);
  padding: 4px;
  width: fit-content;
}
.avz-view-btn {
  padding: 7px 16px;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, var(--gray-600));
  cursor: pointer;
  border-radius: 7px;
  transition: background-color .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}
.avz-view-btn:hover { color: var(--croma-black, var(--black)); background: rgba(255,255,255,.6); }
.avz-view-btn.active {
  color: var(--croma-black, var(--black));
  background: #fff;
  box-shadow: var(--shadow-sm);
}

/* ── Tabs de sucursal (subrayado, scrolleable) ───────── */
.avz-suc-tabs {
  display: flex;
  gap: var(--space-1, 4px);
  overflow-x: auto;
  border-bottom: 1px solid var(--border-neutral, var(--gray-200));
  padding-bottom: 0;
  scrollbar-width: thin;
}
.avz-suc-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, var(--gray-600));
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.avz-suc-tab:hover { color: var(--croma-black, var(--black)); }
.avz-suc-tab.active {
  color: var(--croma-black, var(--black));
  border-bottom-color: var(--suc-dot, var(--croma-red));
  font-weight: 600;
}
.avz-suc-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--suc-dot, var(--gray-400));
  flex-shrink: 0;
}

.avz-beta-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  padding: 2px 7px;
  border-radius: var(--radius-pill, 999px);
  background: var(--gray-100);
  color: var(--text-secondary, var(--gray-600));
  margin-left: 6px;
  vertical-align: 1px;
}

/* ── Cuerpo ───────────────────────────────────────────── */
.avz-body { min-height: 320px; }

/* ── Vista Hoy ────────────────────────────────────────── */
.avz-hoy-fecha {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: .5px;
  color: var(--croma-black, var(--black));
  margin: 0 0 var(--space-4, 16px);
}
.avz-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 10px;
  background: #fff;
  border: 1px solid var(--border-neutral, var(--gray-200));
}
.avz-card-cierre {
  background: var(--suc-bg, var(--gray-50));
  border-color: transparent;
}
.avz-card-urgente {
  border-left: 3px solid var(--danger, var(--croma-red));
}
.avz-card-icono { font-size: 14px; line-height: 1.4; flex-shrink: 0; margin-top: 1px; }
.avz-card-texto { flex: 1; min-width: 0; }
.avz-card-titulo { font-size: 14px; font-weight: 600; color: var(--croma-black, var(--black)); }
.avz-card-sub { font-size: 12px; color: var(--text-secondary, var(--gray-600)); margin-top: 2px; }
.avz-card-fecha { font-size: 12px; color: var(--text-muted, var(--gray-400)); white-space: nowrap; flex-shrink: 0; }

.avz-proximos-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted, var(--gray-400));
  margin: var(--space-5, 20px) 0 8px;
}
.avz-proximo-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  font-size: 13px;
  border-bottom: 1px solid var(--border-neutral, var(--gray-100));
}
.avz-proximo-fila .avz-card-icono { font-size: 12px; }
.avz-proximo-fecha { color: var(--text-muted, var(--gray-400)); width: 70px; flex-shrink: 0; }
.avz-proximo-titulo { flex: 1; color: var(--gray-800); }
.avz-proximo-dest { color: var(--text-secondary, var(--gray-600)); font-size: 12px; }

/* ── Estado vacío ─────────────────────────────────────── */
.avz-vacio {
  text-align: center;
  padding: 56px 20px;
  color: var(--text-secondary, var(--gray-600));
}
.avz-vacio-titulo { font-size: 14px; font-weight: 600; color: var(--gray-800); margin-bottom: 4px; }
.avz-vacio-sub { font-size: 13px; color: var(--text-muted, var(--gray-400)); margin-bottom: 16px; }

/* ── Vista Calendario ─────────────────────────────────── */
.avz-cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4, 16px);
  flex-wrap: wrap;
  gap: 10px;
}
.avz-cal-nav { display: flex; align-items: center; gap: 6px; }
.avz-cal-nav-btn {
  width: 30px; height: 30px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-neutral, var(--gray-200));
  background: #fff;
  color: var(--gray-600);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s;
}
.avz-cal-nav-btn:hover { background: var(--gray-50); }
.avz-cal-mes {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: .5px;
  min-width: 160px;
  text-align: center;
}
.avz-cal-hoy-btn {
  padding: 6px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-neutral, var(--gray-200));
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  cursor: pointer;
}
.avz-cal-hoy-btn:hover { background: var(--gray-50); }

.avz-cal-grid {
  border: 1px solid var(--border-neutral, var(--gray-200));
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.avz-cal-dias-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--surface-sunken, var(--gray-50));
}
.avz-cal-dias-header span {
  padding: 8px 0;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-muted, var(--gray-400));
}
.avz-cal-semanas { display: flex; flex-direction: column; }
.avz-cal-semana { display: grid; grid-template-columns: repeat(7, 1fr); }
.avz-cal-celda {
  min-height: 92px;
  padding: 6px 8px;
  border-top: 1px solid var(--border-neutral, var(--gray-200));
  border-left: 1px solid var(--border-neutral, var(--gray-200));
}
.avz-cal-celda:nth-child(7n+1) { border-left: none; }
.avz-cal-celda.fuera-de-mes { background: var(--surface-sunken, #fafaf8); }
.avz-cal-celda.fuera-de-mes .avz-cal-num { color: var(--text-muted, var(--gray-300)); }
.avz-cal-celda.es-hoy { background: var(--gray-50); }
.avz-cal-num {
  font-size: 12px;
  color: var(--gray-600);
  font-weight: 500;
}
.avz-cal-celda.es-hoy .avz-cal-num {
  color: var(--danger, var(--croma-red));
  font-weight: 700;
}

/* Domingo — background propio para distinguirlo de un día hábil de un
   vistazo. Va ANTES que las reglas de feriado (mismo peso de
   especificidad, 0-2-0 las dos) para que un feriado que cae domingo se
   vea como feriado, no como domingo — la regla que aparece después en
   el archivo es la que gana el empate. */
.avz-cal-celda.es-domingo { background: var(--gray-100); }
.avz-cal-celda.es-domingo .avz-cal-num { color: var(--gray-500); }

/* ── Feriados de Argentina (ver feriados-ar.js) ──────────────────────
   Background completo de la celda (a propósito más "vistoso" que solo
   una franja) — gana siempre, incluso sobre "es-hoy", que se sigue
   notando por el número en rojo/negrita. El hover (más abajo) no pisa
   este color: en vez de cambiar background usa un filter, así conviven
   sin pelearse por especificidad CSS. */
.avz-cal-celda.avz-cal-celda-nacional { background: var(--danger-bg, #fee2e2); }
.avz-cal-celda.avz-cal-celda-turistico { background: var(--warning-bg, #fef3c7); }
.avz-cal-celda.es-feriado .avz-cal-num { color: var(--danger, var(--croma-red)); font-weight: 700; }
.avz-cal-celda.avz-cal-celda-turistico .avz-cal-num { color: var(--warning, #d97706); }
.avz-cal-feriado {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--danger, var(--croma-red));
}
.avz-cal-feriado-turistico { color: var(--warning, #d97706); }

.avz-cal-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: var(--space-4, 16px);
  font-size: 12px;
  color: var(--text-secondary, var(--gray-600));
}
.avz-cal-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.avz-cal-legenda-feriado::before {
  content: ''; width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0;
}
.avz-cal-legenda-nacional::before { background: var(--danger, var(--croma-red)); }
.avz-cal-legenda-turistico::before { background: var(--warning, #d97706); }

/* ── Vista Lista ──────────────────────────────────────── */
.avz-lista-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--space-4, 16px);
}
.avz-select {
  padding: 7px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-neutral, var(--gray-200));
  background: #fff;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--gray-600);
}
.avz-lista-grupo-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted, var(--gray-400));
  margin: var(--space-4, 16px) 0 6px;
}
.avz-lista-grupo-label:first-child { margin-top: 0; }
.avz-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 10px;
  border-radius: var(--radius-md);
  transition: background-color .12s;
}
.avz-fila:hover { background: var(--gray-50); }
.avz-fila-icono { font-size: 13px; width: 18px; text-align: center; flex-shrink: 0; }
.avz-fila-info { flex: 1; min-width: 0; }
.avz-fila-titulo {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--croma-black, var(--black));
  display: flex;
  align-items: center;
  gap: 6px;
}
.avz-fila-dest { font-size: 12px; color: var(--text-secondary, var(--gray-600)); margin-top: 1px; }
.avz-fila-fecha { font-size: 12px; color: var(--text-muted, var(--gray-400)); flex-shrink: 0; white-space: nowrap; }
.avz-fila-acciones {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity .12s;
  flex-shrink: 0;
}
.avz-fila:hover .avz-fila-acciones { opacity: 1; }
.avz-fila-accion-btn {
  width: 26px; height: 26px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--gray-400);
  cursor: not-allowed;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
}
.avz-fila-accion-btn:hover { background: var(--gray-100); }

.avz-archivados-toggle {
  margin-top: var(--space-4, 16px);
  font-size: 12px;
  color: var(--text-muted, var(--gray-400));
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 4px;
}
.avz-archivados-toggle:hover { color: var(--gray-600); }

/* Badges de estado / prioridad — reusan .badge del design system,
   solo agregamos el modificador de urgente (punto rojo) */
.avz-urgente-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--danger, var(--croma-red));
  display: inline-block;
  flex-shrink: 0;
}

/* ── Botones de navegación propios (no ".nav-btn"/".drawer-nav-btn"
   a propósito: esas clases están enganchadas al router genérico
   setView() de app.js, que no debe tocarse en esta fase) ────── */
/* CSS copiado a propósito de .nav-btn/.nav-btn.active (style.css, la
   versión "pill" que gana la cascada, no la más vieja) — mismo look que
   el resto de los botones del top bar sin engancharse a su clase. */
.avz-nav-btn {
  min-height: 34px; display: inline-flex; align-items: center;
  padding: 0 16px; border: none; background: transparent;
  color: #bfbfba; font-family: var(--font-body);
  font-size: 13px; font-weight: 400; cursor: pointer;
  border-radius: 999px; letter-spacing: .3px;
  transition: background-color .15s, color .15s;
}
.avz-nav-btn:hover { background: rgba(255,255,255,.10); }
.avz-nav-btn.active {
  color: var(--black); background: var(--white);
  box-shadow: 0 4px 14px rgba(0,0,0,.22); font-weight: 600;
}

.avz-drawer-nav-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border: none; background: transparent;
  color: var(--gray-400); font-family: var(--font-body);
  font-size: 15px; font-weight: 400; cursor: pointer;
  border-radius: var(--radius-md); text-align: left; width: 100%;
  transition: background-color .15s, color .15s;
}
.avz-drawer-nav-btn:hover { background: rgba(255,255,255,.06); color: var(--white); }
.avz-drawer-nav-btn.active { background: rgba(255,255,255,.1); color: var(--white); font-weight: 500; }

/* ── Accesibilidad ─────────────────────────────────────── */
.avz-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
[data-abrir-aviso] { cursor: pointer; }
[data-abrir-aviso]:focus-visible,
.avz-suc-tab:focus-visible,
.avz-view-btn:focus-visible,
.avz-cal-aviso-item:focus-visible {
  outline: 2px solid var(--croma-red, var(--accent));
  outline-offset: 1px;
}

/* ── Calendario: indicadores de aviso dentro de la celda ── */
.avz-cal-avisos { display: flex; flex-direction: column; gap: 2px; margin-top: 3px; }
.avz-cal-aviso-item {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; line-height: 1.3;
  padding: 1px 3px; border-radius: 4px;
  background: var(--gray-50);
  cursor: pointer; border: none; text-align: left; width: 100%;
  color: var(--gray-800);
}
.avz-cal-aviso-item:hover { background: var(--gray-100); }
.avz-cal-aviso-icono { flex-shrink: 0; font-size: 10px; }
.avz-cal-aviso-titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avz-cal-mas {
  font-size: 11px; color: var(--text-muted, var(--gray-400));
  background: none; border: none; cursor: pointer; padding: 1px 3px; text-align: left;
}
.avz-cal-mas:hover { color: var(--gray-600); text-decoration: underline; }

/* Vacaciones (Fase 4) — mismo tamaño/compacidad que .avz-cal-aviso-item
   (reutiliza .avz-cal-aviso-icono/.avz-cal-aviso-titulo por dentro), pero
   con su propio color (--success, tokens ya existentes en croma-ds.css) —
   claramente distinto de informacion/evento/local_cerrado sin agregar
   paleta nueva. Sin cursor:pointer forzado: en esta fase el click no hace
   nada (ver wireCalendario), el estilo no debe prometer una acción que
   todavía no existe. */
.avz-cal-vacacion-item {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; line-height: 1.3;
  padding: 1px 3px; border-radius: 4px;
  background: var(--success-bg, var(--gray-50));
  color: var(--success, var(--gray-800));
  border: none; text-align: left; width: 100%;
}
.avz-cal-celda { cursor: pointer; position: relative; }
/* filter en vez de background: así el hover se nota SIEMPRE, incluso
   sobre una celda ya coloreada (feriado, domingo) sin pelearse por
   especificidad CSS contra esos colores. */
.avz-cal-celda:hover { filter: brightness(0.96); }

/* Botón "+" — atajo para cargar un aviso en ese día puntual, sin pasar
   por el resumen del día. Solo visible al pasar el cursor (o con foco de
   teclado) para no ensuciar la grilla cuando no hace falta. */
.avz-cal-celda-nuevo {
  position: absolute; right: 4px; bottom: 4px;
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--croma-red); color: #fff; border: none; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  opacity: 0; transform: scale(.85); pointer-events: none;
  transition: opacity .12s, transform .12s;
}
.avz-cal-celda:hover .avz-cal-celda-nuevo,
.avz-cal-celda-nuevo:focus-visible {
  opacity: 1; transform: scale(1); pointer-events: auto;
}
.avz-cal-celda-nuevo:hover { background: var(--danger-dark, #b91c1c); }
.avz-cal-celda-nuevo svg { width: 16px; height: 16px; }

/* ── Panel lateral único (detalle / form / cerrar-local / resumen) ── */
.avz-panel-overlay {
  position: fixed; inset: 0; background: rgba(13,13,13,.32);
  z-index: 2000; display: flex; justify-content: flex-end;
}
.avz-panel {
  width: min(420px, 100vw);
  height: 100%;
  background: #fff;
  box-shadow: var(--shadow-lg, var(--shadow-md));
  display: flex; flex-direction: column;
  animation: avzPanelIn .2s ease-out;
}
@keyframes avzPanelIn {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.avz-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5, 20px) var(--space-6, 24px);
  border-bottom: 1px solid var(--border-neutral, var(--gray-200));
  flex-shrink: 0;
}
.avz-panel-titulo { font-family: var(--font-display); font-size: 19px; letter-spacing: .4px; margin: 0; }
.avz-panel-close {
  width: 30px; height: 30px; border: none; background: transparent;
  font-size: 20px; line-height: 1; color: var(--gray-500); cursor: pointer;
  border-radius: var(--radius-sm);
}
.avz-panel-close:hover { background: var(--gray-100); color: var(--gray-800); }
.avz-panel-body { flex: 1; overflow-y: auto; padding: var(--space-6, 24px); }
.avz-panel-footer {
  display: flex; gap: 8px; padding: var(--space-4, 16px) var(--space-6, 24px);
  border-top: 1px solid var(--border-neutral, var(--gray-200)); flex-shrink: 0;
}
.avz-panel-footer .btn { flex: 1; }

/* Detalle */
.avz-detalle-tipo { font-size: 12px; color: var(--text-secondary, var(--gray-600)); margin-bottom: 4px; }
.avz-detalle-titulo { font-family: var(--font-display); font-size: 22px; letter-spacing: .3px; margin: 0 0 8px; }
.avz-detalle-meta { display: flex; gap: 6px; margin-bottom: 8px; }
.avz-detalle-fecha { font-size: 13px; color: var(--text-muted, var(--gray-400)); margin-bottom: 16px; }
.avz-detalle-mensaje { font-size: 14px; line-height: 1.6; color: var(--gray-800); margin: 0 0 20px; }
.avz-detalle-fila {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 13px; padding: 8px 0; border-top: 1px solid var(--border-neutral, var(--gray-100));
}
.avz-detalle-fila span { color: var(--text-muted, var(--gray-400)); }
.avz-detalle-fila strong { color: var(--gray-800); font-weight: 500; text-align: right; }

/* Formulario */
.avz-field { margin-bottom: var(--space-4, 16px); }
.avz-field-row { display: flex; gap: 10px; margin-bottom: var(--space-4, 16px); }
/* min-width:0 — sin esto, un <input type="date"> nativo no se achica más
   allá de su ancho intrínseco (mm/dd/yyyy + ícono) y en un panel angosto
   los dos campos se pisan/desbordan en vez de repartirse el espacio. */
.avz-field-row .avz-field { flex: 1; min-width: 0; margin-bottom: 0; }
.avz-field-row .form-control { width: 100%; min-width: 0; }
.avz-field-label { display: block; font-size: 12px; font-weight: 600; color: var(--gray-600); margin-bottom: 6px; }
.avz-field-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.avz-field-error { font-size: 12px; color: var(--danger); margin-top: 4px; }
.avz-link-btn {
  background: none; border: none; color: var(--info, var(--croma-red));
  font-size: 12px; font-weight: 600; cursor: pointer; padding: 0;
}
.avz-link-btn:hover { text-decoration: underline; }

.avz-tipo-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.avz-tipo-chip {
  padding: 8px 14px; border-radius: var(--radius-md);
  border: 1px solid var(--border-neutral, var(--gray-200)); background: #fff;
  font-family: var(--font-body); font-size: 13px; color: var(--gray-600); cursor: pointer;
}
.avz-tipo-chip:hover { background: var(--gray-50); }
.avz-tipo-chip.active { background: var(--croma-black); color: #fff; border-color: var(--croma-black); }

.avz-radio-group, .avz-check-grid { display: flex; flex-direction: column; gap: 6px; }
.avz-radio-row, .avz-check-row {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray-800); cursor: pointer;
}

.avz-mas-opciones-btn {
  background: none; border: none; padding: 6px 0; font-size: 12px; font-weight: 600;
  color: var(--text-secondary, var(--gray-600)); cursor: pointer; margin-bottom: var(--space-3, 12px);
}
.avz-mas-opciones-btn:hover { color: var(--gray-800); }
.avz-mas-opciones-body {
  border: 1px solid var(--border-neutral, var(--gray-200)); border-radius: var(--radius-md);
  padding: var(--space-4, 16px); margin-bottom: var(--space-4, 16px); background: var(--surface-sunken, var(--gray-50));
}

.avz-preview-box {
  font-size: 12.5px; color: var(--text-secondary, var(--gray-600));
  background: var(--surface-sunken, var(--gray-50)); border-radius: var(--radius-md);
  padding: 10px 12px; line-height: 1.5;
}
.avz-preview-box strong { color: var(--gray-800); }

.avz-resumen-canales { font-size: 12.5px; color: var(--text-secondary, var(--gray-600)); margin-bottom: var(--space-3, 12px); }

/* Resumen de día */
.avz-resumen-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 4px; border: none; background: none; text-align: left; cursor: pointer;
  border-bottom: 1px solid var(--border-neutral, var(--gray-100));
}
.avz-resumen-item:hover { background: var(--gray-50); }
.avz-resumen-item-titulo { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--croma-black, var(--black)); }

/* Vacaciones dentro de resumen-dia — mismo layout de fila que
   .avz-resumen-item. Fase 5: abre detalle-vacacion (solo lectura) al
   click, mismo affordance visual que un aviso — no promete ninguna
   acción de escritura, solo navegación a un detalle. */
.avz-resumen-seccion-titulo {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
  color: var(--text-muted, var(--gray-400)); margin: var(--space-3, 12px) 0 4px;
}
.avz-resumen-seccion-titulo:first-child { margin-top: 0; }
.avz-resumen-item-vacacion {
  cursor: pointer;
  color: var(--success, var(--gray-800));
}
.avz-resumen-item-vacacion:hover { background: var(--gray-50); }
.avz-resumen-item-vacacion:hover { background: none; }

/* Toast con Deshacer */
.avz-toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 2100;
  background: var(--croma-black); color: #fff;
  border-radius: var(--radius-md); padding: 12px 16px;
  display: flex; align-items: center; gap: 16px;
  font-size: 13px; box-shadow: var(--shadow-lg, var(--shadow-md));
}
.avz-toast-deshacer {
  background: none; border: none; color: #fff; font-weight: 700;
  font-size: 13px; cursor: pointer; text-decoration: underline; padding: 0;
}

/* ── Responsive (tablet) ──────────────────────────────── */
@media (max-width: 900px) {
  .avz-shell { padding: var(--space-4, 16px); }
  .avz-header { flex-direction: column; align-items: flex-start; }
  .avz-search { min-width: 0; width: 100%; }
  .avz-cal-celda { min-height: 72px; }
}