/* 
 * RGM Advanced - Estilos Generales Centralizados
 * Compatible con Tailwind CSS y modo oscuro
 */

/* ===== TIPOGRAFÍA ===== */
/* Instrument Sans (texto) + Instrument Serif (títulos), al estilo de syncroapp.dev
   (8-oct-2026). Antes: Inter + EB Garamond. La serif solo tiene peso 400 (y cursiva):
   los títulos que la usan van en 400, nunca en negrita, o el navegador la engorda falsa. */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Instrument+Serif:ital@0;1&display=swap');

/* Evitar FOUT: ocultar títulos hasta que la fuente esté lista */
.page-title,
.section-title,
main h2,
main h3 {
  transition: opacity 0.15s ease;
}
html:not(.fonts-loaded) .page-title,
html:not(.fonts-loaded) .section-title,
html:not(.fonts-loaded) main h2,
html:not(.fonts-loaded) main h3 {
  opacity: 0;
}
html.fonts-loaded .page-title,
html.fonts-loaded .section-title,
html.fonts-loaded main h2,
html.fonts-loaded main h3 {
  opacity: 1;
}

/* ===== DESIGN TOKENS ===== */
:root {
  /* — Tipografía — */
  --font-sans: 'Instrument Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Instrument Serif', 'Georgia', 'Times New Roman', serif;

  /* — Superficies — crema y arena (syncroapp.dev) — */
  --surface-canvas: #f6f2eb;
  --surface-primary: #ffffff;
  --surface-secondary: #f3ebdb;
  --surface-inset: #f7f3ec;
  --surface-sidebar: #efe8dc;

  /* — Texto — tinta cálida, no azul pizarra — */
  --ink-primary: #2b2a26;
  --ink-secondary: #5b564c;
  --ink-tertiary: #756e62;
  --ink-muted: #a39b8c;

  /* — Bordes — */
  --edge-default: rgba(43, 42, 38, 0.09);
  --edge-subtle: rgba(43, 42, 38, 0.05);
  --edge-emphasis: rgba(43, 42, 38, 0.15);
  --edge-strong: rgba(43, 42, 38, 0.22);

  /* — Marca — bronce, el tono de los acentos en cursiva — */
  --brand: #6b5b3e;
  --brand-hover: #574930;
  --brand-light: #efe7d8;
  --brand-subtle: #f6f2eb;

  /* — Botón primario: píldora de tinta con texto crema — */
  --btn-primary-top: #2b2a26;
  --btn-primary-bottom: #2b2a26;
  --btn-primary-hover-top: #45423b;
  --btn-primary-hover-bottom: #45423b;
  --btn-primary-ink: #f6f2eb;

  /* — Botón secundario: verde menta oscuro — */
  --btn-secondary-top: #2e7d6b;
  --btn-secondary-bottom: #2e7d6b;
  --btn-secondary-hover-top: #256858;
  --btn-secondary-hover-bottom: #256858;

  /* — Semánticos — apagados, de la misma familia que la paleta — */
  --success: #2e7d6b;
  --success-light: #e2f1ec;
  --warning: #a9793f;
  --warning-light: #f3ebdb;
  --danger: #b4483c;
  --danger-light: #f7e6e2;
  --info: #2f6f6a;
  --info-light: #e7f0ef;

  /* — Sombras — */
  --shadow-xs: 0 1px 2px rgba(43, 42, 38, 0.04);
  --shadow-sm: 0 1px 3px rgba(43, 42, 38, 0.06), 0 1px 2px rgba(43, 42, 38, 0.03);
  --shadow-md: 0 4px 14px rgba(43, 42, 38, 0.07), 0 1px 3px rgba(43, 42, 38, 0.04);
  --shadow-lg: 0 12px 32px rgba(43, 42, 38, 0.09), 0 2px 6px rgba(43, 42, 38, 0.04);
  --shadow-focus: 0 0 0 3px rgba(107, 91, 62, 0.18);

  /* — Espaciado base — */
  --space: 4px;

  /* — Radios — más redondos; las tarjetas grandes van a 24px — */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* — Tabla — */
  --table-row-odd: #ffffff;
  --table-row-even: #fbf9f5;
  --table-row-hover: rgba(107, 91, 62, 0.05);
  --table-header-bg: #f3eee5;
  --table-border: rgba(43, 42, 38, 0.06);
}

/* — Dark mode tokens —
   Gris cálido, el respectivo oscuro del marfil y el beige del modo claro
   (antes era azul marino: #0c1222, #141c2e). Misma luminosidad que antes. */
.dark {
  --surface-canvas: #151311;
  --surface-primary: #201e1a;
  --surface-secondary: #282521;
  --surface-inset: #1a1815;
  --surface-sidebar: #1b1916;

  /* Primario invertido: píldora crema con texto de tinta */
  --btn-primary-top: #ece6db;
  --btn-primary-bottom: #ece6db;
  --btn-primary-hover-top: #f6f2eb;
  --btn-primary-hover-bottom: #f6f2eb;
  --btn-primary-ink: #2b2a26;

  --btn-secondary-top: #3f8f7b;
  --btn-secondary-bottom: #3f8f7b;
  --btn-secondary-hover-top: #4c9e89;
  --btn-secondary-hover-bottom: #4c9e89;

  --ink-primary: #edebe7;
  --ink-secondary: #a9a49c;
  --ink-tertiary: #7b7770;
  --ink-muted: #5b5752;

  --edge-default: rgba(233, 228, 220, 0.09);
  --edge-subtle: rgba(233, 228, 220, 0.05);
  --edge-emphasis: rgba(233, 228, 220, 0.13);
  --edge-strong: rgba(233, 228, 220, 0.19);

  --brand: #d2b48a;
  --brand-hover: #e0c7a2;
  --brand-light: #2e2920;
  --brand-subtle: #221f19;

  --success: #7cc4a8;
  --success-light: #16261f;
  --warning: #d9b27a;
  --warning-light: #2a2114;
  --danger: #e58a7c;
  --danger-light: #2c1714;
  --info: #8cc2bb;
  --info-light: #142321;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-focus: 0 0 0 3px rgba(210, 180, 138, 0.25);

  --table-row-odd: #201e1a;
  --table-row-even: #282521;
  --table-row-hover: #2f2c27;
  --table-header-bg: #282521;
  --table-border: rgba(233, 228, 220, 0.06);
}

/* ===== GRISES DE TAILWIND =====
   general.js (configurarTailwind) pinta `gray-*` y `slate-*` con estas
   variables (RGB separados por espacio). En claro, gris cálido de la paleta
   crema/tinta (8-oct-2026; antes eran los de Tailwind, azulados): 900 es la
   tinta #2b2a26 y 100 el crema #f6f2eb. En oscuro, los mismos tonos en gris
   cálido. Las pizarras son las mismas que los grises en los dos modos.
   `--rgm-mezcla`: con qué se mezclan los colores con transparencia
   (`/30`, `/50`). En claro, `transparent` (igual que antes); en oscuro, el fondo
   de las tarjetas, para que se vean sólidos. */
:root {
  --gris-50: 251 249 245;
  --gris-100: 246 242 235;
  --gris-200: 234 228 218;
  --gris-300: 216 209 196;
  --gris-400: 166 158 144;
  --gris-500: 117 110 98;
  --gris-600: 91 86 76;
  --gris-700: 72 68 60;
  --gris-800: 54 52 46;
  --gris-900: 43 42 38;
  --gris-950: 26 25 22;

  --pizarra-50: var(--gris-50);
  --pizarra-100: var(--gris-100);
  --pizarra-200: var(--gris-200);
  --pizarra-300: var(--gris-300);
  --pizarra-400: var(--gris-400);
  --pizarra-500: var(--gris-500);
  --pizarra-600: var(--gris-600);
  --pizarra-700: var(--gris-700);
  --pizarra-800: var(--gris-800);
  --pizarra-900: var(--gris-900);
  --pizarra-950: var(--gris-950);

  --rgm-mezcla: transparent;
}

.dark {
  --gris-50: 251 250 249;
  --gris-100: 245 244 242;
  --gris-200: 233 231 228;
  --gris-300: 216 212 208;
  --gris-400: 164 160 154;
  --gris-500: 118 113 107;
  --gris-600: 87 83 78;
  --gris-700: 67 64 59;
  --gris-800: 43 40 36;
  --gris-900: 26 24 21;
  --gris-950: 8 7 6;

  --pizarra-50: var(--gris-50);
  --pizarra-100: var(--gris-100);
  --pizarra-200: var(--gris-200);
  --pizarra-300: var(--gris-300);
  --pizarra-400: var(--gris-400);
  --pizarra-500: var(--gris-500);
  --pizarra-600: var(--gris-600);
  --pizarra-700: var(--gris-700);
  --pizarra-800: var(--gris-800);
  --pizarra-900: var(--gris-900);
  --pizarra-950: var(--gris-950);

  --rgm-mezcla: rgb(var(--gris-800));
}

/* ===== BASE HTML/BODY ===== */
html, body {
  height: 100%;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Transición de color SOLO durante el cambio claro/oscuro.
   Antes esta regla usaba el selector universal de forma permanente: cada
   elemento del documento cargaba una transición de 200ms, lo que hacía que el
   cambio de tema (y cualquier repintado) se sintiera lento. Ahora la clase la
   pone y quita `toggleTheme()` durante ~180ms. */
html.rgm-theme-switching body,
html.rgm-theme-switching main,
html.rgm-theme-switching header,
html.rgm-theme-switching #mobileSidebar,
html.rgm-theme-switching .table-container,
html.rgm-theme-switching .modal-content,
html.rgm-theme-switching #menuList a,
html.rgm-theme-switching #menuList button {
  transition: background-color 120ms linear, color 120ms linear,
              border-color 120ms linear;
}

/* El sidebar fija su `transition` en `aside#sidebar` (shorthand, especificidad
   1-0-1) para el colapso, así que su fondo cambiaba de golpe mientras el texto
   de dentro tardaba: ese desfase era lo que se percibía como lentitud. */
html.rgm-theme-switching aside#sidebar {
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 120ms linear,
              border-color 120ms linear;
}

/* Afordancias interactivas: conservan una transición de color propia sin pagar
   el coste del selector universal. */
a,
button,
input,
select,
textarea {
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  html.rgm-theme-switching,
  html.rgm-theme-switching * {
    transition: none !important;
  }
}

/* ===== NAVEGACIÓN ENTRE PÁGINAS (View Transitions) ===== */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 260ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(root) {
  animation-name: rgm-vt-fade-out;
}

::view-transition-new(root) {
  animation-name: rgm-vt-fade-in;
}

@keyframes rgm-vt-fade-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0.9; transform: translateY(8px); }
}

@keyframes rgm-vt-fade-in {
  from { opacity: 0.9; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Mantener sidebar estable y animar principalmente el contenido */
#sidebar { view-transition-name: rgm-sidebar; }
main { view-transition-name: rgm-main; }

::view-transition-group(rgm-sidebar),
::view-transition-old(rgm-sidebar),
::view-transition-new(rgm-sidebar) {
  animation: none !important;
}

::view-transition-old(rgm-main),
::view-transition-new(rgm-main) {
  animation-duration: 260ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Fallback universal: animación de entrada si se navega por enlace interno */
:root.rgm-page-enter main {
  animation: rgm-main-enter 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes rgm-main-enter {
  from { opacity: 0.92; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 1ms;
  }

  :root.rgm-page-enter main {
    animation: none !important;
  }

  img {
    transition: none !important;
    opacity: 1 !important;
  }
}

/* ===== IMÁGENES — FADE-IN SUTIL AL CARGAR ===== */
/* Esta transición estaba anulada por el antiguo selector universal de color;
   al recuperarla se acorta para que la página termine de asentarse antes. */
img {
  opacity: 0;
  transition: opacity 0.25s ease;
}

img.img-loaded {
  opacity: 1;
}

/* ===== TIPOGRAFÍA DISPLAY — TÍTULOS DE PÁGINA ===== */
/* Instrument Serif en 400 y con el interletrado un poco cerrado, como los
   titulares de syncroapp.dev. Sin negritas: la fuente no las tiene. */
.page-title,
.section-title {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  font-weight: 400 !important;
}

/* Títulos principales de página (h2.page-title); más chicos en el celular.
   8-oct-2026: más grandes (Fernando), cerca de los 52px de escritorio. */
.page-title {
  font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem) !important;
  line-height: 1.1;
}

/* Subtítulo pegado al título de página: con aire y un punto más grande.
   Le gana a los `text-sm` / `mt-1` de Tailwind por especificidad. */
.page-title + p {
  margin-top: 0.875rem;
  font-size: 1rem;
  line-height: 1.5;
}

/* Títulos de sección en serif (inicio: «Mis horas de capacitación…», «Tickets») */
.section-title {
  font-size: clamp(1.6rem, 1.3rem + 0.7vw, 1.9rem) !important;
  line-height: 1.15;
}

/* Acento en cursiva, como «SyncroApp lo tiene.» de syncroapp.dev: un <em> dentro
   de un título serif sale en cursiva y bronce (crema dorado en oscuro). Con
   medida: una frase por título (el nombre del saludo, un calificativo). */
:is(.page-title, .section-title, main h2) em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--brand);
}

/* Todos los h2 del contenido principal, igual que page-title */
main h2 {
  font-family: var(--font-display);
  font-size: clamp(1.95rem, 1.5rem + 1.4vw, 2.6rem) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
/* Los h3 (tarjetas, sub-secciones) van en la sans semibold, como los títulos de
   las tarjetas de syncroapp; la serif sin negrita se perdía en tamaños chicos. */
main h3 {
  font-family: var(--font-sans);
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}
/* Un escalón más grandes que el Tailwind de cada página (los títulos de sección
   como «Historial del catálogo» o «Cursos»); los h3 chicos (`text-sm`, rótulos
   en mayúsculas) se quedan igual. */
main h3.text-lg:not(.section-title) { font-size: 1.3rem; line-height: 1.6rem; }
main h3.text-xl:not(.section-title) { font-size: 1.5rem; line-height: 1.85rem; }

/* ===== SIDEBAR — OCULTAR PLACEHOLDERS ORIGINALES (evita flash) ===== */
/* Estos selectores coinciden con el HTML estático original. Después de que
   rewriteSidebar() los reemplaza, los nuevos elementos tienen clases
   distintas y no son afectados por estas reglas. */
#sidebar > .flex.items-center.gap-3.mb-8,
#sidebar > div.mt-6,
#sidebar > div.mt-4.text-sm {
  display: none !important;
}

/* ===== SIDEBAR — AVATAR ===== */
.sidebar-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--btn-primary-top), var(--btn-primary-bottom));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.85rem;
  flex-shrink: 0;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 1px rgba(0,0,0,0.15);
}

/* ===== SIDEBAR — FOOTER COMPACTO ===== */
.sidebar-footer {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--edge-subtle);
}
.sidebar-footer-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 0;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sidebar-footer-btn:hover {
  background: var(--edge-default);
  color: var(--ink-primary);
}
.sidebar-footer-btn--danger:hover {
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
}
.dark .sidebar-footer-btn--danger:hover {
  background: color-mix(in srgb, rgb(248 113 113) 10%, var(--rgm-mezcla));
  color: #f87171;
}

/* ===== SIDEBAR — KEYBOARD FOCUS ===== */
#menuList a.menu-kb-focus {
  outline: 2px solid var(--btn-primary-top);
  outline-offset: -2px;
  background: var(--surface-canvas);
  border-radius: var(--radius-sm);
}
.dark #menuList a.menu-kb-focus {
  outline-color: var(--btn-primary-top);
  background: rgba(255,255,255,0.08);
}

/* ===== SIDEBAR — MENU ICONS (Phosphor) ===== */
#menuList .menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
}

/* Placeholder cuando no hay icono — ocupa el mismo espacio */
#menuList .menu-icon-placeholder {
  display: inline-block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* ===== SIDEBAR — MENU HOVER PERSONALIZADO ===== */
#menuList a.menu-custom-hover {
  transition: background-color 0.12s ease, color 0.12s ease;
}

/* ===== SIDEBAR — SUBMENÚS ===== */
#menuList .menu-item-group {
  list-style: none;
}

#menuList .menu-parent-row,
#menuList .menu-leaf-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

#menuList .menu-parent-row > a,
#menuList .menu-parent-row > button,
#menuList .menu-leaf-row > a,
#menuList .menu-leaf-row > button {
  flex: 1;
  width: 100%;
  /* Sin esto el enlace no baja de lo que mide su palabra más larga y la
     fila empuja al menú hacia los lados. */
  min-width: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

/* El menú nunca se desplaza de lado: lo que no quepa se parte en renglones
   dentro de su fila. Con el tercer nivel (actualizacion81: Compras >
   Abastecimiento > Requisiciones) «Abastecimiento» y su flecha se salían
   38 px y aparecía una barra horizontal. */
#sidebar nav,
#mobileSidebar nav {
  overflow-x: hidden;
}

#menuList .menu-parent-row > a > span.font-medium,
#menuList .menu-parent-row > button > span.font-medium,
#menuList .menu-leaf-row > a > span.font-medium,
#menuList .menu-leaf-row > button > span.font-medium {
  min-width: 0;
  overflow-wrap: break-word;
}

/* Filas de submenú compactas (letra de 14 px, icono de 18, flecha de 24,
   menos relleno): con las medidas de la raíz, «Abastecimiento» con su flecha
   pedía 241 px y el menú tiene 201. Solo con el menú abierto (el de escritorio
   sin colapsar y el del celular): colapsado, cada fila es un icono de 44 px
   con sus propias reglas. */
:is(:root:not(.rgm-sidebar-collapsed) #sidebar:not(.sidebar-collapsed), #mobileSidebar) #menuList .submenu-list :is(.menu-parent-row, .menu-leaf-row) > :is(a, button) {
  padding: 8px;
  gap: 8px;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

:is(:root:not(.rgm-sidebar-collapsed) #sidebar:not(.sidebar-collapsed), #mobileSidebar) #menuList .submenu-list :is(.menu-icon, .menu-icon-placeholder) {
  width: 18px;
  height: 18px;
  font-size: 17px;
}

:is(:root:not(.rgm-sidebar-collapsed) #sidebar:not(.sidebar-collapsed), #mobileSidebar) #menuList .submenu-list .submenu-toggle-btn {
  width: 24px;
  height: 28px;
}

#menuList .menu-parent-row > .submenu-toggle-btn,
#menuList .menu-leaf-row > .submenu-toggle-btn,
#menuList .submenu-toggle-btn {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: var(--ink-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#menuList .submenu-toggle-btn:hover {
  background: var(--edge-default);
  color: var(--ink-primary);
}

#menuList .submenu-chevron {
  transition: transform 0.2s ease;
}

#menuList .submenu-chevron.submenu-chevron-open {
  transform: rotate(180deg);
}

/* Sangría de 18 px por nivel (antes 26): con tres niveles, cada píxel de
   sangría se lo quita al texto del nieto. */
#menuList .submenu-list {
  margin-left: 8px;
  padding-left: 8px;
  border-left: 2px solid var(--edge-default);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#menuList .submenu-list.hidden {
  display: none !important;
}

#menuList .submenu-list.submenu-open {
  animation: submenuSlideDown 0.18s ease;
}

@keyframes submenuSlideDown {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== MENÚ — OPCIÓN ACTIVA ===== */
/* menu.js marca la página actual con bg-blue-100 / text-blue-700; aquí se
   pinta como la etiqueta arena de syncroapp, con texto de tinta. */
#menuList a.bg-blue-100 {
  background-color: var(--brand-light) !important;
  color: var(--ink-primary) !important;
}
.dark #menuList a.bg-blue-100 {
  background-color: rgb(var(--gris-800)) !important;
  color: var(--ink-primary) !important;
}

/* ===== SIDEBAR — LAYOUT ===== */
.sidebar-transition {
  transition: width 0.2s ease, transform 0.3s ease;
}

/* Sidebar — fondo cálido diferenciado, borde sutil */
aside#sidebar,
#sidebar {
  background-color: var(--surface-sidebar) !important;
  border-right: 1px solid var(--edge-default) !important;
}

.dark aside#sidebar,
.dark #sidebar {
  background-color: var(--surface-sidebar) !important;
  border-right-color: var(--edge-default) !important;
}

/* ===== Z-INDEX LAYERING ===== */
/* Asegurar que el contenido esté por encima de la marca de agua */
#app,
aside,
main,
nav,
table,
.bg-white,
.dark\:bg-gray-800,
.bg-gray-50,
.dark\:bg-gray-900 {
  position: relative;
  z-index: 1;
}

/* ===== SCROLLBAR MODERNA ===== */
/* Scrollbar para navegación */
nav::-webkit-scrollbar,
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

nav::-webkit-scrollbar-track,
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

nav::-webkit-scrollbar-thumb,
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgb(var(--pizarra-300));
  border-radius: 3px;
}

.dark nav::-webkit-scrollbar-thumb,
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgb(var(--gris-600));
}

nav::-webkit-scrollbar-thumb:hover,
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--pizarra-400));
}

.dark nav::-webkit-scrollbar-thumb:hover,
.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--gris-500));
}

/* Scrollbar para modales */
/* Esta clase da estilo a su propia scrollbar pero no declaraba ni max-height ni
   overflow: los paneles que la usan crecían sin límite y el contenido de abajo
   quedaba fuera de la pantalla, sin forma de alcanzarlo. */
.modal-content {
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
}

.modal-content::-webkit-scrollbar {
  width: 8px;
}

.modal-content::-webkit-scrollbar-track {
  background: transparent;
}

.modal-content::-webkit-scrollbar-thumb {
  background: rgb(var(--pizarra-300));
  border-radius: 4px;
}

.dark .modal-content::-webkit-scrollbar-thumb {
  background: rgb(var(--gris-600));
}

.modal-content::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--pizarra-400));
}

.dark .modal-content::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--gris-500));
}

/* ===== TABLA MODERNA - SCROLLBAR HORIZONTAL ===== */
/* Contenedor de tabla con scrollbar horizontal siempre visible */
.table-container {
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--pizarra-300)) rgb(var(--gris-100));
  overflow-x: auto;
  overflow-y: auto; /* Scroll vertical habilitado */
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: calc(100vh - 240px); /* Altura máxima para forzar scrollbar visible */
  max-height: calc(100dvh - 240px);
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  /* Asegurar que el borde redondeado no corte el scrollbar */
  border-radius: 0.75rem; 
}

/* Ajuste para móviles */
@media (max-width: 767.98px) {
  .table-container {
    max-height: calc(100vh - 200px);
    max-height: calc(100dvh - 200px);
  }
}

/* Variante flex: la tabla se estira para llenar todo el espacio vertical disponible.
   Usar cuando el padre sea un flex-column con altura definida (p.ej. main flex flex-col overflow-hidden). */
.table-container.table-flex {
  flex: 1 1 0%;
  min-height: 0;
  max-height: none;
  height: auto;
}

/* En móvil también anular el max-height */
@media (max-width: 767.98px) {
  .table-container.table-flex {
    max-height: none;
  }
}

.dark .table-container {
  scrollbar-color: rgb(var(--gris-600)) rgb(var(--gris-800));
}

/* ===== ALTO DE TABLA ARRASTRABLE =====
   Se activa poniendo `data-alto-ajustable` en el .table-container. El tirador
   lo inyecta initAltoTablas() de general.js como HERMANO POSTERIOR del
   contenedor, nunca como hijo: initTableDragScroll() engancha `pointerdown`
   en el propio .table-container para el arrastre HORIZONTAL, y un tirador
   dentro dispararia los dos gestos a la vez.

   Promovido desde css/pages/proveedores.css, donde estaba hecho a mano para
   una sola pagina. Mismos nombres de clase para no crear un segundo
   vocabulario. */

.tabla-resizer {
  height: 14px;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  touch-action: none;
}

.tabla-resizer-grip {
  width: 46px;
  height: 4px;
  border-radius: 9999px;
  background: rgb(var(--gris-300));
  transition: background 0.15s ease, width 0.15s ease;
}

.tabla-resizer:hover .tabla-resizer-grip,
.tabla-resizer.arrastrando .tabla-resizer-grip {
  background: var(--brand);
  width: 72px;
}

.dark .tabla-resizer-grip { background: rgb(var(--gris-600)); }
.dark .tabla-resizer:hover .tabla-resizer-grip,
.dark .tabla-resizer.arrastrando .tabla-resizer-grip { background: var(--brand); }

/* Mientras se arrastra, el cursor manda en toda la ventana: si el puntero se
   sale del tirador (y se sale siempre) el cursor volveria a la flecha y el
   gesto pareceria haberse soltado. */
body.redimensionando-tabla {
  cursor: ns-resize;
  user-select: none;
}

/* El alto va en la variable y ADEMAS en linea desde el JS con !important,
   porque tres hojas de pagina declaran su propio max-height y una de ellas
   (inventario-planta.css) lo hacia con !important. */
.table-container.alto-personalizado {
  max-height: var(--alto-tabla);
  height: var(--alto-tabla);
}

/* En movil la altura util la manda la pantalla, no el gusto del usuario: un
   alto guardado en escritorio deja la tabla mas alta que el telefono y con
   doble scroll. Se oculta el tirador y no se personaliza. */
@media (max-width: 767.98px) {
  .tabla-resizer { display: none; }
}

/* Una tabla que se puede estirar SIN cabecera pegajosa es un retroceso: al
   crecer se pierde de vista que columna es cual. `equipo-critico` (7 tablas) y
   `bitacora-equipo` no la tienen, asi que se da por defecto a todo lo que se
   apunta a ser ajustable.

   `:where()` NO aporta especificidad, asi que este selector pesa lo mismo que
   `thead th` (0-0-2) y CUALQUIER regla de pagina lo vence: las de consumibles
   (`#tableConsumibles th`, 1-0-1), las de planta y catalogo
   (`.page-inventario-planta th`, 0-1-1) y la cabecera de dos filas del
   historial de consumibles siguen mandando con su propio z-index y su `top`
   calculado. El fondo ya lo pone `table thead` mas abajo en este archivo. */
:where(.table-container[data-alto-ajustable]) thead th {
  position: sticky;
  top: 0;
  z-index: 5;
}

/* Forzar que la tabla tenga ancho mínimo para scroll */
.table-container table {
  min-width: 100%;
  width: max-content;
  table-layout: auto;
  border-collapse: separate; /* Necesario para border-radius */
  border-spacing: 0;
}

/* Scrollbar horizontal moderna - siempre visible */
.table-container::-webkit-scrollbar {
  height: 14px;
  -webkit-appearance: none;
}

.table-container::-webkit-scrollbar-track {
  background: rgb(var(--gris-100));
  border-radius: 8px;
  margin: 0 12px;
  border: 1px solid rgb(var(--gris-200));
}

.dark .table-container::-webkit-scrollbar-track {
  background: rgb(var(--gris-800));
  border-color: rgb(var(--gris-700));
}

.table-container::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, rgb(var(--gris-400)), rgb(var(--gris-500)));
  border-radius: 8px;
  border: 2px solid rgb(var(--gris-100));
  min-width: 40px;
}

.dark .table-container::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, rgb(var(--gris-400)), rgb(var(--gris-600)));
  border-color: rgb(var(--gris-800));
}

.table-container::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, rgb(var(--gris-500)), rgb(var(--gris-600)));
  cursor: pointer;
}

.dark .table-container::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, rgb(var(--gris-500)), rgb(var(--gris-700)));
}

.table-container::-webkit-scrollbar-thumb:active {
  background: linear-gradient(90deg, rgb(var(--gris-600)), rgb(var(--gris-700)));
}

/* Scrollbar corner */
.table-container::-webkit-scrollbar-corner {
  background: transparent;
}

/* Ocultar scrollbar manteniendo scroll funcional (para barras de stats horizontales) */
.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Filas de tabla — zebra susurrada, se siente más que se ve */
.table-container tbody tr:nth-child(odd) {
  background-color: var(--table-row-odd);
}

.table-container tbody tr:nth-child(even) {
  background-color: var(--table-row-even);
}

.dark .table-container tbody tr:nth-child(odd) {
  background-color: var(--table-row-odd);
}

.dark .table-container tbody tr:nth-child(even) {
  background-color: var(--table-row-even);
}

/* Hover en filas de tabla */
.table-container tbody tr {
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.table-container tbody tr:hover {
  background-color: var(--table-row-hover) !important;
}

.dark .table-container tbody tr:hover {
  background-color: var(--table-row-hover) !important;
}

.table-container th,
.table-container td {
  padding: 0.75rem 1rem;
}

/* Variante: columnas ajustadas al contenido (sin anchos mínimos forzados) */
.table-container.table-fit-content th,
.table-container.table-fit-content td {
  min-width: 0;
  width: auto;
}

.table-container.table-fit-content th:first-child,
.table-container.table-fit-content td:first-child,
.table-container.table-fit-content th:last-child,
.table-container.table-fit-content td:last-child {
  min-width: 0;
}

/* ===== MODAL STYLES ===== */
.modal-scroll {
  max-height: 80vh;
  max-height: 80dvh;
  overflow-y: auto;
}

.modal-backdrop {
  backdrop-filter: blur(4px);
  transition: opacity 0.2s ease;
}

.modal-content {
  max-height: 90vh;
  overflow-y: auto;
  animation: modalSlideIn 0.2s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ===== FORM INPUTS ===== */
.form-input {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--shadow-focus);
}

/* ===== MOBILE MENU ===== */
/* Overlay del menú móvil */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Sidebar móvil moderno */
/* Mismo fondo que el sidebar de escritorio: las clases Tailwind del clon
   (bg-white / dark:bg-gray-800) daban un color distinto al de --surface-sidebar. */
.mobile-sidebar,
aside.mobile-sidebar {
  background-color: var(--surface-sidebar) !important;
  border-right: 1px solid var(--edge-default) !important;
}

/* El menú móvil es un clon del sidebar: el botón de contraer no aplica aquí
   (quedaba justo debajo de la X de cerrar). Sólo se queda la X. */
.mobile-sidebar .sidebar-toggle-btn,
.mobile-sidebar #sidebarToggleBtn {
  display: none !important;
}

/* Deja hueco a la X de cerrar para que no se encime con el nombre del usuario. */
.mobile-sidebar > .flex.items-center.gap-3 {
  padding-right: 2.75rem;
}

.mobile-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 280px;
  max-width: 85vw;
  z-index: 50;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-sidebar.active {
  transform: translateX(0);
}

/* Botón hamburguesa mejorado */
.mobile-menu-btn {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 35;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 0.75rem;
  background-color: white;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  border: 1px solid rgb(var(--gris-200));
  transition: all 0.2s ease;
}

.dark .mobile-menu-btn {
  background-color: rgb(var(--gris-800));
  border-color: rgb(var(--gris-700));
}

.mobile-menu-btn:hover {
  background-color: rgb(var(--gris-100));
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.dark .mobile-menu-btn:hover {
  background-color: rgb(var(--gris-700));
}

.mobile-menu-btn:active {
  transform: scale(0.95);
}

/* Icono hamburguesa animado */
.hamburger-icon {
  position: relative;
  width: 20px;
  height: 14px;
}

.hamburger-icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: rgb(var(--gris-700));
  border-radius: 1px;
  transition: all 0.3s ease;
}

.dark .hamburger-icon span {
  background-color: rgb(var(--gris-300));
}

.hamburger-icon span:nth-child(1) {
  top: 0;
}

.hamburger-icon span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.hamburger-icon span:nth-child(3) {
  bottom: 0;
}

/* Estado activo del hamburguesa (X) */
.mobile-menu-btn.active .hamburger-icon span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.mobile-menu-btn.active .hamburger-icon span:nth-child(2) {
  opacity: 0;
  transform: translateX(-10px);
}

.mobile-menu-btn.active .hamburger-icon span:nth-child(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

/* Botón cerrar menú */
.close-menu-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 0.5rem;
  background-color: transparent;
  transition: background-color 0.2s ease;
}

.close-menu-btn:hover {
  background-color: rgb(var(--gris-100));
}

.dark .close-menu-btn:hover {
  background-color: rgb(var(--gris-700));
}

/* ===== HEADER MOBILE SPACING ===== */
/* Dar espacio al contenido en móvil para el header */
@media (max-width: 767.98px) {
  main {
    padding-top: 4.5rem !important;
  }
}

/* ===== CONTENIDO PRINCIPAL ===== */
/* Evitar que el contenido tenga problemas de scroll */
#app {
  min-height: 100vh;
  display: flex;
}

main {
  flex: 1;
  /* Explícito: un hijo ancho dentro de un flex item lo ensancha porque
     min-width vale `auto` por defecto. Hoy lo resuelve de rebote el
     overflow-x, pero conviene no depender de ese efecto colateral. */
  min-width: 0;
  overflow-x: hidden;
}

/* ===== TABLAS RESPONSIVAS ===== */
.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Estilos específicos de páginas movidos a /css/pages/*.css */

/* ===== DROPDOWN MENUS ===== */
/* Dropdowns y menús desplegables */
[class*="dropdown"],
.dropdown-menu,
.context-menu {
  background-color: #ffffff;
  border: 1px solid rgb(var(--gris-200));
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.dark [class*="dropdown"],
.dark .dropdown-menu,
.dark .context-menu {
  background-color: rgb(var(--gris-800));
  border-color: rgb(var(--gris-700));
}

/* ===== TOOLTIP STYLES ===== */
.tooltip,
[role="tooltip"] {
  background-color: rgb(var(--gris-800));
  color: rgb(var(--gris-50));
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
}

.dark .tooltip,
.dark [role="tooltip"] {
  background-color: rgb(var(--gris-50));
  color: rgb(var(--gris-800));
}

/* ===== NOTIFICATION BADGES ===== */
/* Badges de notificación con colores específicos */
.count-badge {
  font-weight: 600;
}

/* ===== GRADIENT CARDS (Recordatorios) ===== */
/* Mejorar contraste en cards con gradiente en modo claro */
.bg-gradient-to-br {
  border-width: 1px;
}

/* Gradientes específicos para modo claro */
.from-red-50 {
  --tw-gradient-from: #fef2f2;
}

.from-orange-50 {
  --tw-gradient-from: #fff7ed;
}

.from-blue-50 {
  --tw-gradient-from: #eff6ff;
}

.from-green-50 {
  --tw-gradient-from: #f0fdf4;
}

.from-yellow-50 {
  --tw-gradient-from: #fefce8;
}

.from-purple-50 {
  --tw-gradient-from: #faf5ff;
}

/* ===== FIELD STATES (for edit modals) ===== */
.field-unchanged {
  background-color: rgb(var(--gris-100)) !important;
  border-color: rgb(var(--gris-300)) !important;
  opacity: 0.7;
}

.dark .field-unchanged {
  background-color: rgb(var(--gris-700)) !important;
  border-color: rgb(var(--gris-600)) !important;
}

.field-changed {
  background-color: #fef3c7 !important;
  border-color: #f59e0b !important;
  border-width: 2px !important;
}

.dark .field-changed {
  background-color: #451a03 !important;
  border-color: #f59e0b !important;
}

/* ===== UTILITY CLASSES ===== */
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== ANIMATIONS ===== */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out;
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate-slide-in-left {
  animation: slideInLeft 0.3s ease-out;
}

@keyframes slideInUp {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-slide-in-up {
  animation: slideInUp 0.3s ease-out;
}

/* ===== FOCUS VISIBLE ===== */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ===== TABLE STYLES - ZEBRA STRIPING ===== */
/* Filas alternadas con alta especificidad para sobreescribir Tailwind */
tbody tr {
  transition: background-color 0.15s ease;
}

table.striped-table tbody tr:nth-child(even),
tbody tr:nth-child(even) {
  background-color: var(--table-row-even) !important;
}

tbody tr:nth-child(odd) {
  background-color: var(--table-row-odd) !important;
}

/* Modo oscuro */
.dark tbody tr:nth-child(even) {
  background-color: var(--table-row-even) !important;
}

.dark tbody tr:nth-child(odd) {
  background-color: var(--table-row-odd) !important;
}

/* Hover en filas — tinte sutil, no grito */
tbody tr:hover {
  background-color: var(--table-row-hover) !important;
}

.dark tbody tr:hover {
  background-color: var(--table-row-hover) !important;
}

/* Bordes entre filas — apenas perceptibles */
tbody tr {
  border-bottom: 1px solid var(--edge-default) !important;
}

.dark tbody tr {
  border-bottom: 1px solid var(--edge-default) !important;
}

/* Bordes verticales entre columnas — sutiles */
table th,
table td {
  border-right: 1px solid var(--edge-subtle) !important;
}

table th:last-child,
table td:last-child {
  border-right: none !important;
}

/* Borde izquierdo para primera columna */
table th:first-child,
table td:first-child {
  border-left: 1px solid var(--edge-subtle) !important;
}

.dark table th,
.dark table td {
  border-right: 1px solid var(--edge-subtle) !important;
}

.dark table th:first-child,
.dark table td:first-child {
  border-left: 1px solid var(--edge-subtle) !important;
}

/* Celdas de tabla */
table tbody td {
  color: var(--ink-primary) !important;
}

.dark table tbody td {
  color: var(--ink-primary) !important;
}

/* Texto de todas las celdas en modo oscuro */
.dark table td,
.dark table th,
.dark tbody td,
.dark thead th {
  color: var(--ink-primary) !important;
}

/* Encabezados de tabla — presencia sin peso */
table thead {
  background-color: var(--table-header-bg) !important;
}

table thead th {
  color: var(--ink-secondary) !important;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--edge-emphasis) !important;
}

.dark table thead {
  background-color: var(--table-header-bg) !important;
}

.dark table thead th {
  color: var(--ink-secondary) !important;
  border-bottom-color: var(--edge-emphasis) !important;
}

/* ===== FORM INPUTS - FONDO GRIS SUAVE ===== */
/* Inputs con fondo gris claro para mejor visibilidad en modo claro */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
textarea,
select {
  background-color: var(--surface-inset) !important;
  border: 1px solid var(--edge-emphasis) !important;
  color: var(--ink-primary) !important;
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Modo oscuro para inputs */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="number"],
.dark input[type="tel"],
.dark input[type="url"],
.dark input[type="search"],
.dark input[type="date"],
.dark input[type="time"],
.dark input[type="datetime-local"],
.dark input[type="month"],
.dark input[type="week"],
.dark textarea,
.dark select {
  background-color: var(--surface-inset) !important;
  border-color: var(--edge-emphasis) !important;
  color: var(--ink-primary) !important;
}

/* Clases específicas para inputs que pueden no tener type */
.form-input,
input.border,
input.rounded-lg,
select.border,
select.rounded-lg,
textarea.border,
textarea.rounded-lg {
  background-color: var(--surface-inset) !important;
  border-color: rgb(var(--gris-300)) !important;
  color: var(--ink-primary) !important;
}

/* Clases específicas para inputs en modo oscuro */
.dark .form-input,
.dark input.border,
.dark input.rounded-lg,
.dark select.border,
.dark select.rounded-lg,
.dark textarea.border,
.dark textarea.rounded-lg {
  background-color: rgb(var(--gris-800)) !important; /* gray-800 */
  border-color: rgb(var(--gris-600)) !important; /* gray-600 */
  color: rgb(var(--gris-100)) !important; /* gray-100 */
}

/* Estados focus para inputs — anillo de marca */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
textarea:focus,
select:focus,
.form-input:focus,
input.border:focus,
input.rounded-lg:focus {
  border-color: var(--brand) !important;
  box-shadow: var(--shadow-focus);
  outline: none;
  background-color: var(--surface-primary) !important;
}

.dark input:focus,
.dark textarea:focus,
.dark select:focus {
  border-color: var(--brand) !important;
  box-shadow: var(--shadow-focus);
  background-color: var(--surface-primary) !important;
}

/* Placeholder text */
input::placeholder,
textarea::placeholder {
  color: rgb(var(--gris-400)) !important; /* gray-400 */
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: rgb(var(--gris-500)) !important; /* gray-500 */
}

/* Date/time inputs específicos para modo claro (icono del calendario) */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  filter: none;
  cursor: pointer;
}

.dark input[type="date"]::-webkit-calendar-picker-indicator,
.dark input[type="time"]::-webkit-calendar-picker-indicator,
.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.dark input[type="month"]::-webkit-calendar-picker-indicator,
.dark input[type="week"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

/* Select arrow styling */
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

.dark select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
}

/* Disabled inputs */
input:disabled,
textarea:disabled,
select:disabled {
  background-color: rgb(var(--gris-100)) !important; /* gray-100 */
  color: rgb(var(--gris-400)) !important; /* gray-400 */
  cursor: not-allowed;
}

.dark input:disabled,
.dark textarea:disabled,
.dark select:disabled {
  background-color: rgb(var(--gris-700)) !important; /* gray-700 */
  color: rgb(var(--gris-500)) !important; /* gray-500 */
}

/* ===== CARDS Y CONTENEDORES ===== */
/* Cards en modo claro */
.bg-white {
  background-color: #ffffff;
}

/* Cards con sombra sutil y cálida en modo claro */
section > .bg-white,
div > .bg-white {
  box-shadow: var(--shadow-sm);
}

.dark section > .bg-white,
.dark div > .bg-white {
  box-shadow: none;
}

/* ===== BADGES Y TAGS ===== */
/* Mejor contraste para badges en modo claro */
.bg-gray-100 {
  background-color: rgb(var(--gris-100));
}

.text-gray-700 {
  color: rgb(var(--gris-700));
}

/* ===== MODAL MEJORADOS ===== */
/* Fondo de modales */
.modal-content,
[class*="modal"] .bg-white {
  background-color: #ffffff;
}

.dark .modal-content,
.dark [class*="modal"] .bg-white {
  background-color: rgb(var(--gris-800));
}

/* ===== FILE INPUT STYLING ===== */
input[type="file"] {
  background-color: #ffffff !important;
  border: 1px solid rgb(var(--gris-300)) !important;
  color: rgb(var(--gris-800)) !important;
}

.dark input[type="file"] {
  background-color: rgb(var(--gris-800)) !important;
  border-color: rgb(var(--gris-600)) !important;
  color: rgb(var(--gris-100)) !important;
}

input[type="file"]::file-selector-button {
  background-color: var(--btn-primary-top);
  color: var(--btn-primary-ink);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  cursor: pointer;
  margin-right: 1rem;
}

input[type="file"]::file-selector-button:hover {
  background-color: var(--btn-primary-hover-top);
}

/* ===== CHECKBOX Y RADIO ===== */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--btn-primary-top);
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}

.dark input[type="checkbox"],
.dark input[type="radio"] {
  accent-color: var(--btn-primary-top);
}

/* ===== BORDES DE SECCIÓN ===== */
section.border,
div.border {
  border-color: rgb(var(--gris-200)); /* gray-200 */
}

.dark section.border,
.dark div.border {
  border-color: rgb(var(--gris-700)); /* gray-700 */
}

/* ===== PRINT STYLES ===== */
@media print {
  .no-print,
  .mobile-menu-btn,
  .mobile-menu-overlay,
  .mobile-sidebar,
  #page-watermark {
    display: none !important;
  }
  
  aside {
    display: none !important;
  }
  
  main {
    margin: 0 !important;
    padding: 1rem !important;
    width: 100% !important;
  }
}

/* ===== STAT CARDS — CENTRADO VERTICAL ===== */
/* Force stat cards inside grids to vertically center their content
   so that cards of different label lengths align consistently.       */
section[class*="grid"] > div[class*="text-center"],
div[class*="grid"] > div[class*="text-center"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ===== FONDO CANVAS CÁLIDO ===== */
/* Override Tailwind bg-gray-50 con el tono cálido del token */
body.bg-gray-50 {
  background-color: var(--surface-canvas) !important;
}
.dark body.bg-gray-50,
body.dark.bg-gray-50 {
  background-color: var(--surface-canvas) !important;
}

/* ===== BOTONES PRIMARIOS — PÍLDORA DE TINTA (syncroapp.dev) ===== */
/* Aplica a todos los botones azules/indigo del sitio. Planos: sin degradado
   ni sombra en el texto; en oscuro se invierten (crema con texto de tinta). */
button.bg-blue-500,
button.bg-blue-600,
button.bg-indigo-600,
input[type="submit"].bg-blue-500,
input[type="submit"].bg-blue-600,
input[type="submit"].bg-indigo-600,
a.bg-blue-500,
a.bg-blue-600,
a.bg-indigo-600 {
  background: linear-gradient(to bottom, var(--btn-primary-top), var(--btn-primary-bottom)) !important;
  border: none !important;
  color: var(--btn-primary-ink) !important;
}
button.bg-blue-500:hover,
button.bg-blue-600:hover,
button.bg-indigo-600:hover,
input[type="submit"].bg-blue-500:hover,
input[type="submit"].bg-blue-600:hover,
input[type="submit"].bg-indigo-600:hover,
a.bg-blue-500:hover,
a.bg-blue-600:hover,
a.bg-indigo-600:hover,
button.hover\:bg-blue-600:hover,
button.hover\:bg-blue-700:hover,
button.hover\:bg-indigo-700:hover {
  background: linear-gradient(to bottom, var(--btn-primary-hover-top), var(--btn-primary-hover-bottom)) !important;
}
button.bg-blue-500:active,
button.bg-blue-600:active,
button.bg-indigo-600:active {
  background: var(--btn-primary-hover-bottom) !important;
}

/* ===== BOTONES SECUNDARIOS — VERDE MENTA ===== */
button.bg-green-500,
button.bg-green-600,
button.bg-emerald-600,
input[type="submit"].bg-green-500,
input[type="submit"].bg-green-600,
a.bg-green-500,
a.bg-green-600 {
  background: linear-gradient(to bottom, var(--btn-secondary-top), var(--btn-secondary-bottom)) !important;
  border: none !important;
  color: #ffffff !important;
}

/* ===== FORMA DE PÍLDORA ===== */
/* Botones de acción (primario, secundario, peligro) y los neutros de una sola
   línea (Cancelar, Cerrar). Los grises solo si traen padding vertical de botón:
   un botón-tarjeta alto con radio de píldora quedaría como estadio. El menú
   lateral conserva su forma. */
:is(button, a, input[type="submit"]):is(.bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-indigo-600,
  .bg-green-500, .bg-green-600, .bg-emerald-600, .bg-red-500, .bg-red-600, .bg-amber-500, .bg-amber-600):not(#sidebar *, #mobileSidebar *),
button:is(.bg-gray-100, .bg-gray-200, .bg-gray-300):is(.py-1, .py-1\.5, .py-2, .py-2\.5):not(#sidebar *, #mobileSidebar *) {
  border-radius: 9999px !important;
  font-weight: 600;
}
button.bg-green-500:hover,
button.bg-green-600:hover,
button.bg-emerald-600:hover,
input[type="submit"].bg-green-500:hover,
input[type="submit"].bg-green-600:hover,
a.bg-green-500:hover,
a.bg-green-600:hover,
button.hover\:bg-green-600:hover,
button.hover\:bg-green-700:hover,
button.hover\:bg-emerald-700:hover {
  background: linear-gradient(to bottom, var(--btn-secondary-hover-top), var(--btn-secondary-hover-bottom)) !important;
}
button.bg-green-500:active,
button.bg-green-600:active,
button.bg-emerald-600:active {
  background: var(--btn-secondary-hover-bottom) !important;
}

/* ===== BOTONES DESHABILITADOS — Override para que disabled gane a gradient ===== */
button:disabled,
button[disabled],
input[type="submit"]:disabled,
input[type="submit"][disabled] {
  background: rgb(var(--gris-400)) !important;
  color: #ffffff !important;
  cursor: not-allowed !important;
  text-shadow: none !important;
  opacity: 0.7;
}

/* ===== SIDEBAR COLLAPSE FUNCTIONALITY ===== */

/* Animación de transición para el ancho del sidebar */
aside#sidebar {
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-x: hidden;
}

/* Evita animación inicial cuando la página carga ya en modo colapsado */
:root.rgm-sidebar-preload #sidebar {
  transition: none !important;
}

:root.rgm-sidebar-preload #sidebar .sidebar-avatar,
:root.rgm-sidebar-preload #sidebar .sidebar-user-name,
:root.rgm-sidebar-preload #sidebar .sidebar-toggle-btn,
:root.rgm-sidebar-preload #sidebar .sidebar-user-row {
  transition: none !important;
  animation: none !important;
}

/* El estado colapsado se declara una sola vez, más abajo, con el selector
   agrupado `:root.rgm-sidebar-collapsed #sidebar, #sidebar.sidebar-collapsed`:
   el primero lo pone el script de <head> antes del primer pintado (evita el
   parpadeo al navegar) y el segundo lo pone applySidebarState en runtime.
   Antes había aquí un bloque aparte que solo replicaba 10 de las ~35 reglas,
   así que entre el pre-render y el DOMContentLoaded se veían los textos del
   menú recortados. */

/* Botón toggle del sidebar */
.sidebar-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.2s ease;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
}

.sidebar-toggle-btn:hover {
  background: var(--edge-default);
  color: var(--ink-primary);
  transform: scale(1.05);
}

.sidebar-toggle-btn:active {
  transform: scale(0.95);
}

.sidebar-toggle-btn svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

/* Sidebar colapsado — ancho reducido */
:root.rgm-sidebar-collapsed #sidebar,
#sidebar.sidebar-collapsed {
  width: 68px;
  padding: 12px 6px;
}

:root.rgm-sidebar-collapsed #sidebar > .flex.items-center,
#sidebar.sidebar-collapsed > .flex.items-center {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 0;
}

:root.rgm-sidebar-collapsed #sidebar > .flex.items-center .min-w-0,
#sidebar.sidebar-collapsed > .flex.items-center .min-w-0 {
  width: 100%;
  min-width: 0;
  flex: none;
}

:root.rgm-sidebar-collapsed #sidebar .sidebar-user-row,
#sidebar.sidebar-collapsed .sidebar-user-row {
  justify-content: center;
}

:root.rgm-sidebar-collapsed #sidebar .sidebar-user-name,
#sidebar.sidebar-collapsed .sidebar-user-name {
  display: none;
}

:root.rgm-sidebar-collapsed #sidebar .sidebar-toggle-btn,
#sidebar.sidebar-collapsed .sidebar-toggle-btn {
  width: 36px;
  height: 36px;
}

/* Mostrar búsqueda solo cuando está expandido */
:root.rgm-sidebar-collapsed #sidebar #menuSearchContainer,
#sidebar.sidebar-collapsed #menuSearchContainer {
  display: none !important;
}

/* Menú en modo colapsado */
:root.rgm-sidebar-collapsed #sidebar #menuList,
#sidebar.sidebar-collapsed #menuList {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

:root.rgm-sidebar-collapsed #sidebar #menuList li,
#sidebar.sidebar-collapsed #menuList li {
  display: block;
}

/* El <ul> lleva `space-y-2` de Tailwind (margin-top: 8px), que se sumaba al
   `gap: 3px` del contenedor flex: la separación real era de 11px. */
:root.rgm-sidebar-collapsed #sidebar #menuList > li,
#sidebar.sidebar-collapsed #menuList > li {
  margin-top: 0 !important;
}

:root.rgm-sidebar-collapsed #sidebar #menuList a,
#sidebar.sidebar-collapsed #menuList a {
  width: 44px;
  height: 44px;
  padding: 5px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  position: relative;
  overflow: visible;
}

:root.rgm-sidebar-collapsed #sidebar #menuList > li > a,
#sidebar.sidebar-collapsed #menuList > li > a {
  margin: 0 auto;
}

:root.rgm-sidebar-collapsed #sidebar #menuList button[data-tooltip],
#sidebar.sidebar-collapsed #menuList button[data-tooltip] {
  width: 44px;
  height: 44px;
  padding: 5px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  position: relative;
  overflow: visible;
}

:root.rgm-sidebar-collapsed #sidebar #menuList .menu-parent-row,
#sidebar.sidebar-collapsed #menuList .menu-parent-row,
:root.rgm-sidebar-collapsed #sidebar #menuList .menu-leaf-row,
#sidebar.sidebar-collapsed #menuList .menu-leaf-row {
  justify-content: center;
}

:root.rgm-sidebar-collapsed #sidebar #menuList .menu-parent-row > a,
#sidebar.sidebar-collapsed #menuList .menu-parent-row > a,
:root.rgm-sidebar-collapsed #sidebar #menuList .menu-parent-row > button,
#sidebar.sidebar-collapsed #menuList .menu-parent-row > button,
:root.rgm-sidebar-collapsed #sidebar #menuList .menu-leaf-row > a,
#sidebar.sidebar-collapsed #menuList .menu-leaf-row > a,
:root.rgm-sidebar-collapsed #sidebar #menuList .menu-leaf-row > button,
#sidebar.sidebar-collapsed #menuList .menu-leaf-row > button {
  margin: 0 auto;
  /* La regla base de fila declara `flex: 1`, y flex-basis manda sobre width:
     sin esto el pill se estiraba a todo el ancho útil y el icono quedaba con
     un hueco enorme a cada lado. */
  flex: 0 0 auto;
  width: 44px;
}

:root.rgm-sidebar-collapsed #sidebar #menuList .submenu-toggle-btn,
#sidebar.sidebar-collapsed #menuList .submenu-toggle-btn {
  display: none !important;
}

/* Submenú inline en modo colapsado (mostrar todos los iconos, incluyendo submenús) */
:root.rgm-sidebar-collapsed #sidebar #menuList .menu-item-group,
#sidebar.sidebar-collapsed #menuList .menu-item-group {
  position: relative;
}

:root.rgm-sidebar-collapsed #sidebar #menuList .menu-item-group > .submenu-list,
#sidebar.sidebar-collapsed #menuList .menu-item-group > .submenu-list {
  display: flex !important;
  position: static;
  top: auto;
  left: auto;
  margin-left: 0;
  padding: 0;
  min-width: 0;
  max-width: none;
  width: 100%;
  border-left: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  z-index: auto;
  gap: 3px;
}

:root.rgm-sidebar-collapsed #sidebar #menuList .menu-item-group:hover > .submenu-list,
#sidebar.sidebar-collapsed #menuList .menu-item-group:hover > .submenu-list,
:root.rgm-sidebar-collapsed #sidebar #menuList .menu-item-group.submenu-popover-open > .submenu-list,
#sidebar.sidebar-collapsed #menuList .menu-item-group.submenu-popover-open > .submenu-list {
  display: flex !important;
}

:root.rgm-sidebar-collapsed #sidebar #menuList .submenu-list.hidden,
#sidebar.sidebar-collapsed #menuList .submenu-list.hidden,
:root.rgm-sidebar-collapsed #sidebar #menuList .submenu-list.submenu-open,
#sidebar.sidebar-collapsed #menuList .submenu-list.submenu-open {
  display: flex !important;
}

:root.rgm-sidebar-collapsed #sidebar #menuList .submenu-list a,
#sidebar.sidebar-collapsed #menuList .submenu-list a,
:root.rgm-sidebar-collapsed #sidebar #menuList .submenu-list button[data-tooltip],
#sidebar.sidebar-collapsed #menuList .submenu-list button[data-tooltip] {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 5px !important;
  justify-content: center;
  border-radius: var(--radius-md);
}

:root.rgm-sidebar-collapsed #sidebar #menuList .submenu-list a span,
#sidebar.sidebar-collapsed #menuList .submenu-list a span,
:root.rgm-sidebar-collapsed #sidebar #menuList .submenu-list button[data-tooltip] span,
#sidebar.sidebar-collapsed #menuList .submenu-list button[data-tooltip] span {
  display: none !important;
}

:root.rgm-sidebar-collapsed #sidebar #menuList .submenu-list .menu-icon,
#sidebar.sidebar-collapsed #menuList .submenu-list .menu-icon,
:root.rgm-sidebar-collapsed #sidebar #menuList .submenu-list .menu-icon-placeholder,
#sidebar.sidebar-collapsed #menuList .submenu-list .menu-icon-placeholder {
  margin: 0 !important;
}

:root.rgm-sidebar-collapsed #sidebar #menuList .submenu-list .submenu-toggle-btn,
#sidebar.sidebar-collapsed #menuList .submenu-list .submenu-toggle-btn {
  display: inline-flex !important;
}

/* Ocultar texto en modo colapsado (excepto iconos) */
:root.rgm-sidebar-collapsed #sidebar #menuList a span:not(.menu-icon),
#sidebar.sidebar-collapsed #menuList a span:not(.menu-icon) {
  display: none;
}

:root.rgm-sidebar-collapsed #sidebar #menuList button[data-tooltip] span:not(.menu-icon),
#sidebar.sidebar-collapsed #menuList button[data-tooltip] span:not(.menu-icon) {
  display: none;
}

:root.rgm-sidebar-collapsed #sidebar #menuList a .menu-icon,
#sidebar.sidebar-collapsed #menuList a .menu-icon {
  margin: 0 !important;
}

:root.rgm-sidebar-collapsed #sidebar #menuList button[data-tooltip] .menu-icon,
#sidebar.sidebar-collapsed #menuList button[data-tooltip] .menu-icon {
  margin: 0 !important;
}

:root.rgm-sidebar-collapsed #sidebar #menuList a .menu-icon-placeholder,
#sidebar.sidebar-collapsed #menuList a .menu-icon-placeholder {
  margin: 0 !important;
}

/* Avatar en modo colapsado */
:root.rgm-sidebar-collapsed #sidebar .sidebar-avatar,
#sidebar.sidebar-collapsed .sidebar-avatar {
  width: 38px;
  height: 38px;
  font-size: 0.8rem;
}

/* Footer en modo colapsado - cambiar a columna */
:root.rgm-sidebar-collapsed #sidebar .sidebar-footer,
#sidebar.sidebar-collapsed .sidebar-footer {
  flex-direction: column;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
}

:root.rgm-sidebar-collapsed #sidebar .sidebar-footer-btn,
#sidebar.sidebar-collapsed .sidebar-footer-btn {
  width: 40px;
  height: 40px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  flex: none !important;
}

:root.rgm-sidebar-collapsed #sidebar .sidebar-footer-btn span,
#sidebar.sidebar-collapsed .sidebar-footer-btn span {
  display: none;
}

:root.rgm-sidebar-collapsed #sidebar .sidebar-footer-btn svg,
#sidebar.sidebar-collapsed .sidebar-footer-btn svg {
  width: 18px;
  height: 18px;
}

/* Tooltip para items del menú en modo colapsado */
:root.rgm-sidebar-collapsed #sidebar #menuList a,
#sidebar.sidebar-collapsed #menuList a {
  position: relative;
}

/* Usar ::after para tooltip con data-tooltip */
:root.rgm-sidebar-collapsed #sidebar #menuList a[data-tooltip]::after,
#sidebar.sidebar-collapsed #menuList a[data-tooltip]::after,
:root.rgm-sidebar-collapsed #sidebar #menuList button[data-tooltip]::after,
#sidebar.sidebar-collapsed #menuList button[data-tooltip]::after {
  content: attr(data-tooltip);
  display: none;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 12px;
  padding: 6px 10px;
  background: var(--ink-primary);
  color: var(--surface-primary);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 999;
  box-shadow: var(--shadow-md);
}

:root.rgm-sidebar-collapsed #sidebar #menuList a:hover[data-tooltip]::after,
#sidebar.sidebar-collapsed #menuList a:hover[data-tooltip]::after,
:root.rgm-sidebar-collapsed #sidebar #menuList button:hover[data-tooltip]::after,
#sidebar.sidebar-collapsed #menuList button:hover[data-tooltip]::after {
  display: block;
  opacity: 1;
  visibility: visible;
}

:root.rgm-sidebar-collapsed.dark #sidebar #menuList a[data-tooltip]::after,
.dark #sidebar.sidebar-collapsed #menuList a[data-tooltip]::after,
:root.rgm-sidebar-collapsed.dark #sidebar #menuList button[data-tooltip]::after,
.dark #sidebar.sidebar-collapsed #menuList button[data-tooltip]::after {
  background: var(--surface-primary);
  color: var(--ink-primary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Tooltips también en submenús (porque en colapsado solo se muestran iconos) */
:root.rgm-sidebar-collapsed #sidebar #menuList .submenu-list a[data-tooltip]::after,
#sidebar.sidebar-collapsed #menuList .submenu-list a[data-tooltip]::after,
:root.rgm-sidebar-collapsed #sidebar #menuList .submenu-list button[data-tooltip]::after,
#sidebar.sidebar-collapsed #menuList .submenu-list button[data-tooltip]::after {
  display: none;
}

:root.rgm-sidebar-collapsed.dark #sidebar #menuList .menu-item-group > .submenu-list,
.dark #sidebar.sidebar-collapsed #menuList .menu-item-group > .submenu-list {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* Asegurar que el nav scroll funciona en modo colapsado */
:root.rgm-sidebar-collapsed #sidebar nav,
#sidebar.sidebar-collapsed nav {
  overflow-y: auto;
  overflow-x: hidden;
}

/* ════════════════════════════════════════════
   NOTIFICATION ANIMATIONS
   ════════════════════════════════════════════ */

/* ── Bell ring/shake ── */
@keyframes notif-ring {
  0%, 65%, 100% { transform: rotate(0deg); }
  68%, 78% { transform: rotate(14deg); }
  73% { transform: rotate(-14deg); }
  83% { transform: rotate(0deg); }
}
.notif-bell-ring {
  display: inline-block;
  animation: notif-ring 4s ease-in-out infinite;
  transform-origin: top center;
}

/* ── Badge glow pulse (reemplaza animate-pulse) ── */
@keyframes notif-badge-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(220, 38, 38, 0);
    transform: scale(1.1);
  }
}
.notif-badge-glow {
  animation: notif-badge-glow 2s ease-in-out infinite;
}

/* ── Container pop/scale every 10s ── */
@keyframes notif-pop {
  0%, 89%, 100% { transform: scale(1); }
  91% { transform: scale(1.35); }
  93% { transform: scale(1); }
  95% { transform: scale(1.2); }
  97% { transform: scale(1); }
}
.notif-pop {
  animation: notif-pop 10s ease-in-out infinite;
}

/* ════════════════════════════════════════════
   Animación sutil para el nombre de usuario
   en el sidebar (todas las páginas autenticadas)
   ════════════════════════════════════════════ */

.sidebar-user-name {
  display: inline-block;
  animation: userNameFloat 6s ease-in-out infinite;
}

@keyframes userNameFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}

/* ════════════════════════════════════════════
   Watermark — desplazamiento continuo hacia la derecha
   ════════════════════════════════════════════ */

.watermark-pattern {
  animation: watermark-scroll 35s linear infinite;
}

@keyframes watermark-scroll {
  from { transform: rotate(-45deg) translate(0, 0); }
  to { transform: rotate(-45deg) translate(450px, 0); }
}

/* ============================================================
   Notificaciones de tipo RESUMEN
   Un resumen semanal lleva 15-20 líneas. Se pinta plegado a 3 y se despliega
   con el botón «Ver más», respetando los saltos de línea del cuerpo.
   ============================================================ */
.notif-resumen-cuerpo {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notif-resumen-cuerpo.notif-resumen-abierto {
  display: block;
  overflow: visible;
  max-height: 60vh;
  overflow-y: auto;
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════
   ANIMACIONES DE ENTRADA — APARICIÓN ESCALONADA
   ════════════════════════════════════════════
   El JS (initRevealAnimations en general.js) marca los elementos con
   `.rgm-reveal` y un `--rgm-reveal-delay` creciente. Se usa `animation` con
   fill `both`: durante el retardo se mantiene el fotograma inicial, así no hay
   parpadeo aunque el elemento ya esté pintado. La clase se retira al terminar,
   de modo que si el JS fallara nada quedaría invisible. */

@keyframes rgm-reveal-up {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes rgm-reveal-left {
  from { opacity: 0; transform: translate3d(-14px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.rgm-reveal {
  animation: rgm-reveal-up 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--rgm-reveal-delay, 0ms);
}

/* Los ítems del menú entran desde la izquierda, acompañando al sidebar. */
#menuList > .rgm-reveal,
#menuList .rgm-reveal {
  animation-name: rgm-reveal-left;
  animation-duration: 300ms;
}

/* Evita duplicar movimiento: si hay aparición escalonada, el <main> completo
   no necesita su propia animación de entrada. */
:root.rgm-reveal-active.rgm-page-enter main {
  animation: none !important;
}

/* ════════════════════════════════════════════
   INTRO DEL MENÚ — PRIMERA VISITA DEL DÍA
   ════════════════════════════════════════════
   En inicio, la primera vez del día, el sidebar entra desde la izquierda y se
   despliega desde el ancho colapsado. Si el usuario lo dejó colapsado en
   localStorage, sólo entra deslizándose y se queda colapsado. */

@keyframes rgm-sidebar-slide-in {
  from { opacity: 0; transform: translate3d(-100%, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

:root.rgm-menu-intro #sidebar {
  animation: rgm-sidebar-slide-in 340ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Mientras dura la intro el ancho debe poder animarse aunque venga del
   pre-render colapsado. */
:root.rgm-menu-intro #sidebar {
  transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
  .rgm-reveal,
  :root.rgm-menu-intro #sidebar {
    animation: none !important;
  }

  :root.rgm-menu-intro #sidebar {
    transition: none !important;
  }
}

/* ════════════════════════════════════════════
   MODALES — PATRÓN ENVOLTORIO + CENTRADOR
   ════════════════════════════════════════════
   Algunas páginas usan: <div class="fixed inset-0 hidden">
                           <div class="absolute inset-0"> (fondo)
                           <div class="flex items-center justify-center min-h-screen p-4">
                             <panel>
   El centrador pide `min-height: 100vh` DENTRO de un `fixed inset-0` que ya mide
   la pantalla, y el envoltorio no desplaza: si el panel crece, lo que queda
   abajo es inalcanzable (un elemento fijo no alarga el scroll de la página). */

[class~="fixed"][class~="inset-0"] > [class~="min-h-screen"] {
  min-height: 100%;
}

[class~="fixed"][class~="inset-0"]:has(> [class~="min-h-screen"]) {
  overflow-y: auto;
  overscroll-behavior: contain;
}