/* ==========================================================================
   Panel de administración · capa del panel
   Estilos propios del panel encima de tokens.css y del tema tailwind3 de
   Syncfusion: estructura (cabecera, menú, contenido), piezas comunes y el
   aspecto de los componentes Syncfusion. Los colores, radios y fuentes salen
   de los tokens. Orden de carga en index.html:
     bootstrap → tokens.css → tailwind3.css (Syncfusion) → este archivo

   1. Puente Syncfusion → tokens
   2. Superficies del navegador (selección, scroll, caret)
   3. Estructura: cabecera, menú lateral, contenido
   4. Piezas del panel: cabecera de página, filtros, formularios
   5. Componentes Syncfusion reestilizados (botón, input, grid, toolbar,
      diálogo, toast, pestañas)
   ========================================================================== */

/* ── 1. Puente Syncfusion → tokens ──────────────────────────────────────── */
:root {
  --e-font-name: system-ui;
  --e-font-family: var(--font-sans);

  --color-sf-content-bg-color: #FFFFFF;
  --color-sf-content-bg-color-alt1: #F1F5F9;
  --color-sf-content-bg-color-alt2: #F1F5F9;
  --color-sf-content-bg-color-alt3: #E2E8F0;
  --color-sf-content-bg-color-hover: #F8FAFC;           /* gris piedra al 50% */
  --color-sf-content-bg-color-pressed: #F1F5F9;
  --color-sf-content-bg-color-focus: #F8FAFC;
  --color-sf-content-bg-color-selected: #F1F5F9;
  --color-sf-content-bg-color-dragged: #F1F5F9;
  --color-sf-flyout-bg-color: #FFFFFF;
  --color-sf-flyout-bg-color-hover: #F1F5F9;
  --color-sf-flyout-bg-color-pressed: #F1F5F9;
  --color-sf-flyout-bg-color-focus: #F1F5F9;
  --color-sf-flyout-bg-color-selected: #F1F5F9;
  --color-sf-overlay-bg-color: rgb(0 0 0 / 0.8);        /* overlay de diálogo: negro al 80% */
  --color-sf-table-bg-color-hover: #F8FAFC;
  --color-sf-table-bg-color-pressed: #F1F5F9;
  --color-sf-table-bg-color-selected: #F1F5F9;
  --color-sf-treeview-item-active-hover-bg: #F1F5F9;

  --color-sf-content-text-color: #0F172A;
  --color-sf-content-text-color-alt1: #0F172A;
  --color-sf-content-text-color-alt2: #64748B;
  --color-sf-content-text-color-alt3: #64748B;
  --color-sf-content-text-color-hover: #0F172A;
  --color-sf-content-text-color-pressed: #0F172A;
  --color-sf-content-text-color-focus: #0F172A;
  --color-sf-content-text-color-selected: #0F172A;
  --color-sf-content-text-color-dragged: #0F172A;
  --color-sf-placeholder-text-color: #64748B;
  --color-sf-flyout-text-color: #0F172A;
  --color-sf-flyout-text-color-hover: #0F172A;
  --color-sf-flyout-text-color-pressed: #0F172A;
  --color-sf-flyout-text-color-focus: #0F172A;
  --color-sf-flyout-text-color-selected: #0F172A;
  --color-sf-table-text-color-hover: #0F172A;
  --color-sf-table-text-color-pressed: #0F172A;
  --color-sf-table-text-color-selected: #0F172A;
  --color-sf-icon-color: #64748B;
  --color-sf-icon-color-hover: #0F172A;
  --color-sf-icon-color-pressed: #0F172A;

  --color-sf-border-light: #E2E8F0;
  --color-sf-border: #E2E8F0;
  --color-sf-border-hover: #E2E8F0;
  --color-sf-border-focus: #E2E8F0;
  --color-sf-border-dragged: #E2E8F0;
  --color-sf-border-disabled: #E2E8F0;
  --color-sf-border-error: #EF4444;
  --color-sf-border-success: #15803D;
  --color-sf-border-warning: #78350F;
  --color-sf-flyout-border: #E2E8F0;

  --color-sf-primary: #D32027;
  --color-sf-primary-text-color: #FFFFFF;
  --color-sf-primary-light: #D7363D;
  --color-sf-primary-lighter: #F1F5F9;                  /* sin tintes rosas: fondo neutro */
  --color-sf-primary-dark: #BD1D23;
  --color-sf-primary-darker: #BD1D23;
  --color-sf-primary-outline: #D32027;
  --color-sf-primary-bg-color: #D32027;
  --color-sf-primary-border-color: #D32027;
  --color-sf-primary-text: #FFFFFF;
  --color-sf-primary-bg-color-hover: #D7363D;
  --color-sf-primary-border-color-hover: #D7363D;
  --color-sf-primary-text-hover: #FFFFFF;
  --color-sf-primary-bg-color-pressed: #BD1D23;
  --color-sf-primary-border-color-pressed: #BD1D23;
  --color-sf-primary-text-pressed: #FFFFFF;
  --color-sf-primary-bg-color-focus: #D7363D;
  --color-sf-primary-border-color-focus: #D7363D;
  --color-sf-primary-text-focus: #FFFFFF;
  --color-sf-primary-bg-color-disabled: #D32027;
  --color-sf-primary-border-color-disabled: #D32027;
  --color-sf-primary-text-disabled: #FFFFFF;

  /* Botón por defecto de Syncfusion = outline del sistema. */
  --color-sf-secondary-bg-color: #FFFFFF;
  --color-sf-secondary-border-color: #E2E8F0;
  --color-sf-secondary-text-color: #0F172A;
  --color-sf-secondary-bg-color-hover: #F1F5F9;
  --color-sf-secondary-border-color-hover: #E2E8F0;
  --color-sf-secondary-text-color-hover: #0F172A;
  --color-sf-secondary-bg-color-pressed: #F1F5F9;
  --color-sf-secondary-border-color-pressed: #E2E8F0;
  --color-sf-secondary-text-color-pressed: #0F172A;
  --color-sf-secondary-bg-color-focus: #F1F5F9;
  --color-sf-secondary-border-color-focus: #E2E8F0;
  --color-sf-secondary-text-color-focus: #0F172A;
  --color-sf-secondary-outline: #E2E8F0;

  --color-sf-danger: #EF4444;
  --color-sf-danger-bg-color: #EF4444;
  --color-sf-danger-border-color: #EF4444;
  --color-sf-danger-text: #F8FAFC;
  --color-sf-danger-bg-color-hover: #F15757;
  --color-sf-danger-border-color-hover: #F15757;
  --color-sf-danger-bg-color-pressed: #DC2626;
  --color-sf-danger-border-color-pressed: #DC2626;
  --color-sf-danger-bg-color-focus: #F15757;
  --color-sf-danger-border-color-focus: #F15757;
  --color-sf-danger-outline: #EF4444;

  --color-sf-tooltip-bg-color: #0F172A;
  --color-sf-tooltip-border: #0F172A;
  --color-sf-tooltip-text-color: #FFFFFF;

  --color-sf-chip-primary-bg-color: #F1F5F9;
  --color-sf-chip-primary-border-color: #E2E8F0;
  --color-sf-chip-primary-text: #0F172A;
}

/* ── 2. Superficies del navegador ───────────────────────────────────────── */
html { scrollbar-color: hsl(var(--muted-foreground) / 0.45) transparent; }
body { caret-color: var(--color-primary); }
::selection { background: var(--color-foreground); color: #FFFFFF; }
a { text-underline-offset: 0.2em; }
.num, .tabular { font-variant-numeric: tabular-nums; }

/* Bootstrap: el "azul" no existe. Los spinners van en tinta gris (no son marca). */
.spinner-border.text-primary, .spinner-border { color: var(--color-muted-foreground) !important; }
.text-primary { color: var(--color-primary) !important; }
.text-muted, .text-body-secondary { color: var(--color-muted-foreground) !important; }

/* ── 3. Estructura ──────────────────────────────────────────────────────── */
.ag-shell { min-height: 100vh; background: var(--color-background); }

/* Por debajo de los diálogos de Syncfusion (z-index 1000) para que el overlay los cubra. */
.ag-topbar { position: sticky; top: 0; z-index: 960; }
.ag-topbar-start, .ag-topbar-end { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.ag-brand { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--color-foreground); }
.ag-brand:hover { color: var(--color-foreground); }
.ag-brand-product {
  font-size: 0.875rem; font-weight: 600; color: var(--color-foreground);
  padding-left: 0.75rem; border-left: 1px solid var(--color-border); white-space: nowrap;
}
.ag-menu-toggle { display: none; }
.ag-user-name { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ag-body { display: flex; align-items: stretch; }

.ag-sidebar {
  flex: 0 0 240px;
  position: sticky; top: 3.5rem;
  height: calc(100vh - 3.5rem);
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.ag-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ag-nav-label { font-size: 0.75rem; font-weight: 600; color: var(--color-muted-foreground); padding: 1.25rem 0.75rem 0.375rem; }
.ag-sidebar .nav-link i { width: 1rem; text-align: center; color: var(--color-muted-foreground); font-size: 1rem; }
.ag-sidebar .nav-link.active i { color: var(--color-foreground); }
.ag-sidebar-foot { margin-top: auto; padding: 1rem 0.75rem 0.25rem; font-size: 0.75rem; color: var(--color-muted-foreground); }

.ag-main { flex: 1 1 auto; min-width: 0; }
.ag-main-inner { max-width: 1280px; padding: 1.5rem; }
.ag-backdrop { display: none; }

@media (max-width: 991.98px) {
  .ag-menu-toggle { display: inline-flex; }
  .ag-brand-product { display: none; }
  .ag-sidebar {
    position: fixed; left: 0; top: 3.5rem; bottom: 0; height: auto; z-index: 950;
    transform: translateX(-100%); transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
    visibility: hidden;
  }
  .ag-shell.is-menu-open .ag-sidebar { transform: none; visibility: visible; box-shadow: var(--shadow-float); }
  .ag-shell.is-menu-open .ag-backdrop {
    display: block; position: fixed; inset: 3.5rem 0 0 0; z-index: 940; background: rgb(0 0 0 / 0.8);
  }
  .ag-main-inner { padding: 1rem; }
}
@media (max-width: 575.98px) {
  .ag-topbar { padding: 0 0.75rem; }
  .ag-topbar-end { gap: 0.25rem; }
  .ag-user-name, .ag-topbar .ag-btn-label, .ag-hide-sm { display: none; }
  .ag-topbar .btn { padding-left: 0.625rem; padding-right: 0.625rem; }
}

/* Botones de icono y desplegables Bootstrap de la cabecera (menú de la cuenta). */
.ag-icon-btn { position: relative; width: 2.5rem; padding: 0 !important; }
.ag-icon-btn i { font-size: 1rem; }
.dropdown-menu {
  --bs-dropdown-border-color: var(--color-border);
  --bs-dropdown-border-radius: var(--radius-lg);
  --bs-dropdown-box-shadow: var(--shadow-float);
  --bs-dropdown-font-size: 0.875rem;
  --bs-dropdown-link-color: var(--color-foreground);
  --bs-dropdown-link-hover-bg: var(--color-muted);
  --bs-dropdown-link-active-bg: var(--color-muted);
  --bs-dropdown-link-active-color: var(--color-foreground);
  box-shadow: var(--shadow-float);
}
.dropdown-item { display: flex; align-items: center; gap: 0.5rem; min-height: 2.25rem; }
.dropdown-item i { width: 1rem; text-align: center; color: var(--color-muted-foreground); }

/* Carga inicial (arranque y comprobación de sesión). */
.ag-splash {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; background: #FFFFFF; color: var(--color-muted-foreground); font-size: 0.875rem;
}
.ag-splash img { height: 2.5rem; width: auto; }

/* ── 4. Piezas del panel ────────────────────────────────────────────────── */
.ag-page-header { flex-wrap: wrap; }
.ag-page-header h1 { min-width: 0; }
.ag-page-sub { margin-top: 0.25rem; color: var(--color-muted-foreground); font-size: 0.875rem; }

.ag-filters > div { display: flex; flex-direction: column; min-width: 10rem; }
.ag-filters .ag-filter-grow { flex: 1 1 14rem; max-width: 26rem; }
.ag-filters input[type="date"] { width: 9.5rem; }
.ag-filters .form-label { margin-bottom: 0.375rem; }
.ag-filters-count { align-self: flex-end; min-height: 2.5rem; display: inline-flex; align-items: center; font-size: 0.875rem; color: var(--color-muted-foreground); font-variant-numeric: tabular-nums; }
.btn-ghost:disabled, .btn-ghost.disabled { background: transparent; border-color: transparent; }

/* Selector de vista (Grid / Calendario): segmento plano, activo en gris piedra. */
.ag-segmented { display: inline-flex; border: 1px solid var(--color-input); border-radius: var(--radius-md); padding: 2px; gap: 2px; background: var(--color-background); }
.ag-segmented button {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.125rem; padding: 0 0.875rem;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-foreground);
  font-size: 0.875rem; font-weight: 500; transition: background-color 150ms;
}
.ag-segmented button i { color: var(--color-muted-foreground); }
.ag-segmented button:hover { background: hsl(var(--muted) / 0.6); }
.ag-segmented button[aria-pressed="true"] { background: var(--color-muted); font-weight: 600; }
.ag-segmented button[aria-pressed="true"] i { color: var(--color-foreground); }

/* Texto de ayuda bajo un campo o un bloque. */
.ag-help { font-size: 0.875rem; color: var(--color-muted-foreground); }

/* Espaciado de formularios dentro de diálogos. */
.form-group { margin-bottom: 1rem; }
.form-group:last-child { margin-bottom: 0; }
.row.material { --bs-gutter-x: 0; margin: 0; }

/* Pie de formulario en diálogos: [Cancelar] [Guardar] alineados a la derecha. */
.e-dialog .e-dlg-content { display: flex; flex-direction: column; }
.e-dialog .e-dlg-content > form,
.e-dialog .e-dlg-content > div,
.e-dialog .e-dlg-content > .e-tab,
.e-dialog .e-dlg-content .row.material {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
}
.e-dialog .e-dlg-content .e-tab .e-content,
.e-dialog .e-dlg-content .e-tab .e-content > .e-item,
.e-dialog .e-dlg-content .e-tab .e-content > .e-item > div {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
}
.e-dialog .e-dlg-content:has(.footer-form),
.e-dialog .e-dlg-content:has(.footer-form) .row.material,
.e-dialog .e-dlg-content:has(.footer-form) > div,
.e-dialog .e-dlg-content:has(.footer-form) form,
.e-dialog .e-dlg-content:has(.footer-form) form > div { padding-bottom: 0 !important; }
.footer-form {
  position: relative; margin-top: auto; padding: 1rem 0 1.5rem;
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem;
  border-top: 1px solid var(--color-border); background: var(--color-background);
  width: 100%; z-index: 1;
}
.e-dialog .footer-form { margin-top: 1.5rem; }
.footer-form .button-footer-form { flex: 0 0 auto; width: auto; }
.footer-form .e-primary, .footer-form .btn-primary { order: 2; }

/* ── 5. Componentes Syncfusion ──────────────────────────────────────────── */

/* Botones */
.e-btn, .e-css.e-btn {
  border-radius: var(--radius-md);
  font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; line-height: 1.25rem;
  text-transform: none; box-shadow: none;
  transition: background-color 150ms, color 150ms, border-color 150ms;
}
.e-btn:not(.e-icon-btn):not(.e-tbar-btn):not(.e-dlg-closeicon-btn):not(.e-small) {
  min-height: 2.5rem; padding: 0 1rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.e-btn:focus-visible, .e-btn.e-focus-visible { box-shadow: var(--focus-ring) !important; outline: none; }
.e-btn:disabled, .e-btn.e-disabled { opacity: 0.5; cursor: not-allowed; }
/* Primaria: rojo de marca relleno, también en los botones "flat" de los diálogos. */
.e-btn.e-primary, .e-btn.e-flat.e-primary, .e-css.e-btn.e-primary {
  background: var(--color-primary); border-color: var(--color-primary); color: #FFFFFF;
}
.e-btn.e-primary:hover, .e-btn.e-flat.e-primary:hover { background: #D7363D; border-color: #D7363D; color: #FFFFFF; }
.e-btn.e-primary:active, .e-btn.e-flat.e-primary:active { background: #BD1D23; border-color: #BD1D23; }
.e-btn.e-primary i, .e-btn.e-primary .e-btn-icon { color: #FFFFFF; }
/* Outline (por defecto, e-outline y los flat no primarios de los diálogos). */
.e-btn:not(.e-primary):not(.e-danger):not(.e-link):not(.e-icon-btn):not(.e-tbar-btn):not(.e-dlg-closeicon-btn),
.e-btn.e-outline:not(.e-danger),
.e-btn.e-success, .e-btn.e-info, .e-btn.e-warning {
  background: var(--color-background); border: 1px solid var(--color-input); color: var(--color-foreground);
}
.e-btn:not(.e-primary):not(.e-danger):not(.e-link):not(.e-icon-btn):not(.e-tbar-btn):not(.e-dlg-closeicon-btn):hover,
.e-btn.e-outline:not(.e-danger):hover {
  background: var(--color-muted); border-color: var(--color-input); color: var(--color-foreground);
}
.e-btn:not(.e-primary):not(.e-danger) > i,
.e-btn:not(.e-primary):not(.e-danger) .e-btn-icon { color: var(--color-primary); }
.e-btn.e-danger, .e-css.e-btn.e-danger { background: #EF4444; border-color: #EF4444; color: #F8FAFC; }
.e-btn.e-danger:hover { background: #F15757; border-color: #F15757; color: #F8FAFC; }
.e-btn.e-danger > i, .e-btn.e-danger .e-btn-icon { color: #F8FAFC; }
.e-btn.e-link { color: var(--color-foreground); text-decoration: underline; }

/* Inputs (textbox, numeric, dropdown, datepicker…) */
.e-input-group, .e-input-group.e-control-wrapper,
.e-float-input, .e-float-input.e-control-wrapper {
  font-family: var(--font-sans);
}
.e-input-group:not(.e-float-icon-left):not(.e-float-input),
.e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input),
.e-float-input.e-input-group:not(.e-float-icon-left) .e-input-in-wrap,
.e-float-input.e-input-group.e-control-wrapper,
.e-float-input.e-input-group {
  border-radius: var(--radius-md);
}
.e-input-group, .e-input-group.e-control-wrapper, .e-float-input.e-input-group {
  min-height: 2.5rem; border: 1px solid var(--color-input) !important; background: var(--color-background);
}
.e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input,
.e-float-input input, .e-float-input.e-control-wrapper input,
input.e-input, textarea.e-input {
  font-size: 0.875rem; color: var(--color-foreground); min-height: 2.375rem;
}
.e-input-group textarea.e-input, .e-float-input textarea { min-height: 5rem; padding: 0.5rem 0.75rem; }
.e-input-group:not(.e-disabled) input.e-input, .e-input-group input.e-input { padding: 0 0.75rem; }
.e-input-group.e-input-focus:not(.e-error):not(.e-success):not(.e-warning),
.e-input-group.e-control-wrapper.e-input-focus:not(.e-error),
.e-float-input.e-input-group.e-input-focus:not(.e-error) {
  border-color: var(--color-input) !important; box-shadow: var(--focus-ring) !important;
}
.e-input-group::before, .e-input-group::after,
.e-input-group.e-control-wrapper::before, .e-input-group.e-control-wrapper::after,
.e-float-input::before, .e-float-input::after { display: none !important; }
.e-input-group.e-error, .e-input-group.e-control-wrapper.e-error, .e-float-input.e-error { border-color: var(--color-destructive) !important; }
.e-input-group .e-input-group-icon, .e-input-group.e-control-wrapper .e-input-group-icon { color: var(--color-muted-foreground); }
/* Etiqueta flotante en modo "Always": se lee como label encima del campo (14 px / 500 navy). */
.e-float-input.e-control-wrapper, .e-float-input { margin-top: 1.625rem !important; }
.e-float-input .e-float-text, .e-float-input.e-control-wrapper .e-float-text,
.e-float-input label.e-float-text.e-label-top, .e-float-input.e-control-wrapper label.e-float-text.e-label-top {
  font-size: 0.875rem !important; font-weight: 500 !important; color: var(--color-foreground) !important;
  transform: none !important; top: -1.625rem !important; left: 0 !important; line-height: 1.25rem;
  letter-spacing: normal;
}
.e-float-input.e-input-focus label.e-float-text, .e-float-input.e-control-wrapper.e-input-focus label.e-float-text { color: var(--color-foreground) !important; }
.validation-message { margin-top: 0.375rem; }

/* Checkbox y switch */
.e-checkbox-wrapper .e-frame.e-check, .e-css.e-checkbox-wrapper .e-frame.e-check { background-color: #D32027; border-color: #D32027; }
.e-checkbox-wrapper .e-frame, .e-css.e-checkbox-wrapper .e-frame { border-color: var(--color-muted-foreground); border-radius: var(--radius-sm); }
.e-switch-wrapper .e-switch-inner.e-switch-active, .e-css.e-switch-wrapper .e-switch-inner.e-switch-active { background-color: #D32027; border-color: #D32027; }

/* Desplegables */
.e-ddl.e-popup, .e-popup.e-popup-open.e-ddl, .e-dropdownbase, .e-popup {
  border-color: var(--color-border); border-radius: var(--radius-md);
}
.e-popup.e-popup-open { box-shadow: var(--shadow-float); }
.e-dropdownbase .e-list-item { font-size: 0.875rem; color: var(--color-foreground); min-height: 2.25rem; }
.e-dropdownbase .e-list-item.e-active, .e-dropdownbase .e-list-item.e-active.e-hover {
  background: var(--color-muted); color: var(--color-foreground); font-weight: 600;
}

/* Grid: card con borde piedra, cabecera gris piedra, filas de 44 px, sin cebra. */
.e-grid {
  border: 1px solid var(--color-border) !important; border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-card); font-family: var(--font-sans);
}
.e-grid .e-gridheader { border-color: var(--color-border); background: var(--color-muted); }
.e-grid .e-headercell, .e-grid .e-detailheadercell, .e-grid .e-gridheader .e-columnheader, .e-grid .e-headercontent {
  background: var(--color-muted);
}
.e-grid .e-headercell { height: 2.75rem; padding: 0 1rem; }
.e-grid .e-headercelldiv, .e-grid .e-headercell .e-headertext {
  font-size: 0.75rem; font-weight: 600; color: var(--color-foreground); text-transform: none; letter-spacing: normal;
}
.e-grid .e-rowcell, .e-grid .e-summarycell {
  height: 2.75rem; padding: 0.5rem 1rem; font-size: 0.875rem; color: var(--color-foreground); border-color: var(--color-border);
}
.e-grid .e-altrow { background: transparent; }
.e-grid .e-row:hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active),
.e-grid.e-gridhover tr[role="row"]:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
  background: #F8FAFC; color: var(--color-foreground);
}
.e-grid td.e-active, .e-grid .e-rowcell.e-active { background: var(--color-muted) !important; color: var(--color-foreground) !important; }
.e-grid .e-rowcell a { color: var(--color-foreground); font-weight: 500; }
.e-grid .e-rowcell a:hover { color: var(--color-primary); }
.e-grid .e-content { background: var(--color-background); }
.e-grid .e-filtermenudiv, .e-grid .e-sortfilterdiv { color: var(--color-muted-foreground); }
.e-grid .e-emptyrow td { text-align: center; color: var(--color-muted-foreground); padding: 2rem 1rem; }
.e-grid .e-gridpager, .e-pager { border-color: var(--color-border); font-size: 0.875rem; }
.e-pager .e-currentitem, .e-pager .e-currentitem:hover { background: var(--color-foreground); color: #FFFFFF; border-radius: var(--radius-sm); }
.e-grid .e-checkbox-wrapper .e-frame.e-check { background-color: var(--color-foreground); border-color: var(--color-foreground); }

/* Toolbar de las grids: barra blanca con botones outline; "Nuevo" es la primaria. */
.e-grid .e-toolbar {
  background: var(--color-background); border: 0; border-bottom: 1px solid var(--color-border);
  border-radius: 0; min-height: 3.5rem; padding: 0 0.75rem; box-shadow: none;
}
.e-grid .e-toolbar .e-toolbar-items { background: transparent; min-height: 3.5rem; display: flex; align-items: center; }
.e-grid .e-toolbar .e-toolbar-item { min-height: 3.5rem; padding: 0 0.25rem; }
.e-grid .e-toolbar .e-toolbar-item .e-tbar-btn {
  min-height: 2.25rem; height: 2.25rem; padding: 0 0.75rem; gap: 0.375rem;
  display: inline-flex; align-items: center;
  background: var(--color-background); border: 1px solid var(--color-input); border-radius: var(--radius-md);
  color: var(--color-foreground); box-shadow: none;
}
.e-grid .e-toolbar .e-toolbar-item .e-tbar-btn:hover { background: var(--color-muted); border-color: var(--color-input); }
.e-grid .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text { font-size: 0.875rem; font-weight: 500; color: var(--color-foreground); padding: 0; }
.e-grid .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons { color: var(--color-primary); font-size: 0.875rem; margin: 0; min-width: 0; width: auto; }
.e-grid .e-toolbar .e-toolbar-item.ag-tb-primary .e-tbar-btn { background: var(--color-primary); border-color: var(--color-primary); }
.e-grid .e-toolbar .e-toolbar-item.ag-tb-primary .e-tbar-btn:hover { background: #D7363D; border-color: #D7363D; }
.e-grid .e-toolbar .e-toolbar-item.ag-tb-primary .e-tbar-btn .e-tbar-btn-text,
.e-grid .e-toolbar .e-toolbar-item.ag-tb-primary .e-tbar-btn .e-icons { color: #FFFFFF; }
.e-grid .e-toolbar .e-toolbar-item.e-overlay { opacity: 0.5; }

/* Diálogos: título 18/600, padding 24, sombra de capa flotante, overlay negro 80%. */
.e-dialog {
  border: 1px solid var(--color-border) !important; border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-float) !important; max-width: calc(100vw - 2rem);
}
.e-dialog .e-dlg-header-content {
  padding: 1.25rem 1.5rem 0.75rem; border: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--color-background);
}
.e-dialog .e-dlg-header, .e-dialog .e-dlg-header * {
  font-family: var(--font-sans); font-size: 1.125rem; font-weight: 600; color: var(--color-foreground); line-height: 1.3;
}
.e-dialog .e-dlg-content { padding: 0.5rem 1.5rem 1.5rem; font-size: 0.875rem; color: var(--color-foreground); }
.e-dialog .e-footer-content {
  padding: 1rem 1.5rem; border-top: 1px solid var(--color-border); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  display: flex; justify-content: flex-end; gap: 0.5rem; background: var(--color-background);
}
.e-dialog .e-footer-content .e-btn { margin: 0 !important; }
.e-dialog .e-footer-content .e-btn.e-primary { order: 2; }
.e-dlg-overlay { background-color: rgb(0 0 0 / 0.8) !important; opacity: 1 !important; }
.e-dialog .e-btn.e-dlg-closeicon-btn { border-radius: var(--radius-md); }

/* Toasts: abajo a la derecha, blancos con borde piedra; variante destructive para fallos.
   Siempre por encima de los diálogos modales: Syncfusion da al toast un z-index calculado donde se declara (dentro de la
   página) y al diálogo abierto el máximo del body + 1, así que el velo del diálogo lo tapaba. Con el máximo posible, el
   cálculo de los diálogos lo ignora (solo cuenta los menores) y nunca lo supera. Se fija en el contenedor y en el
   elemento que lo envuelve en el body (el que recibe el z-index en línea, de ahí !important). */
.e-toast-container,
body > div:has(> .e-toast-container) { z-index: 2147483647 !important; }
.e-toast-container .e-toast {
  background: var(--color-background) !important; color: var(--color-foreground) !important;
  border: 1px solid var(--color-border) !important; border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-float) !important; font-family: var(--font-sans);
}
.e-toast-container .e-toast .e-toast-message .e-toast-title { font-size: 0.875rem; font-weight: 600; color: var(--color-foreground) !important; }
.e-toast-container .e-toast .e-toast-message .e-toast-content { font-size: 0.875rem; color: var(--color-foreground) !important; }
.e-toast-container .e-toast .e-toast-icon, .e-toast-container .e-toast .e-toast-close-icon { color: var(--color-muted-foreground) !important; }
.e-toast-container .e-toast .e-toast-progress { background: var(--color-border) !important; height: 2px; }
.e-toast-container .e-toast.e-toast-danger {
  background: var(--color-destructive) !important; border-color: var(--color-destructive) !important;
}
.e-toast-container .e-toast.e-toast-danger .e-toast-title,
.e-toast-container .e-toast.e-toast-danger .e-toast-content,
.e-toast-container .e-toast.e-toast-danger .e-toast-icon,
.e-toast-container .e-toast.e-toast-danger .e-toast-close-icon { color: var(--color-destructive-foreground) !important; }
.e-toast-container .e-toast.e-toast-danger .e-toast-progress { background: rgb(255 255 255 / 0.5) !important; }

/* Pestañas: activa en navy con subrayado navy (el rojo se reserva a la acción primaria). */
.e-tab .e-tab-header { border-bottom: 1px solid var(--color-border); }
.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap { padding: 0 1rem; height: 2.75rem; }
.e-tab .e-tab-header .e-toolbar-item .e-tab-text { font-size: 0.875rem; font-weight: 500; color: var(--color-muted-foreground); text-transform: none; }
.e-tab .e-tab-header .e-toolbar-item .e-tab-icon { color: var(--color-muted-foreground); }
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-icon,
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap .e-tab-text,
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap .e-tab-icon,
.e-tab .e-tab-header .e-toolbar-item.e-active:hover .e-tab-wrap .e-tab-text { color: var(--color-foreground) !important; font-weight: 600; }
.e-tab .e-tab-header .e-indicator { background: var(--color-foreground) !important; height: 2px; }
.e-tab .e-tab-header .e-toolbar-item:not(.e-active):hover .e-tab-text { color: var(--color-foreground); }

@media (prefers-reduced-motion: reduce) {
  .ag-sidebar { transition: none; }
}

/* ── Entrada al panel (login) ───────────────────────────────────────────── */
/* Fondo fotográfico (petición del cliente). Gris piedra de respaldo mientras carga la imagen;
   la card es opaca y lleva la sombra de capa flotante para separarse de la foto. */
.ag-login {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem;
  background: var(--color-muted) url("../images/login-background.jpg") center / cover no-repeat;
}
.ag-login-card { width: 100%; max-width: 25rem; box-shadow: var(--shadow-float); }
.ag-login-card .card-body { padding: 2rem; }
.ag-login-logo { display: block; height: 3.5rem; width: auto; margin: 0 auto 1.5rem; }
.ag-login-card h1 { text-align: center; }
.ag-login-form { margin-top: 1.5rem; }
.ag-btn-block, .e-btn.ag-btn-block { width: 100%; margin-top: 0.5rem; min-height: 2.75rem !important; }