/* -- Variables - paleta base + tokens del Design Kit -------------------- */
:root {
    --primary:        #1e5aa8;
    --primary-dark:   #1a4c8f;
    --primary-light:  #346ab1;
    --primary-rgb:    30,90,168;
    --accent:         #ff7a18;
    --accent-light:   #ff8a34;
    --accent-rgb:     255,122,24;
    --font-family:    Inter, 'Segoe UI', Roboto, sans-serif;
    --topbar-from:    #0f2b46;
    --topbar-to:      #1a4a7a;
    --sidebar-bg:     #0a1929;
    --sidebar-bg-2:   #0f2b46;
    --sidebar-text:   #e2e8f0;
    --sidebar-muted:  rgba(255,255,255,.55);
    --sidebar-line:   rgba(255,255,255,.06);
    --surface:        #ffffff;
    --border:         #e2e8f0;
    --text:           #1e293b;
    --text-muted:     #64748b;
    --success:        #10b981;
    --danger:         #ef4444;
    --warning:        #f59e0b;
    --radius:         8px;
    /* Carril reservado a la derecha para los botones FLOTANTES (.ai-fab,
       .pm-feedback-button): son position:fixed en la esquina inferior derecha,
       así que toda barra inferior con controles a la derecha queda debajo.
       Token del kit: tokens.layout.fabLane. Se declara AQUÍ, una sola vez;
       overrides.css lo CONSUME y no lo redeclara. */
    --pm-fab-lane:    96px;
    --shadow:         0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --shadow-md:      0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
}

/* -- Theme Engine - 4 temas prefab seleccionables vía data-theme ----- */
[data-theme="vibrant"] {
    --primary:        #8b5cf6;
    --primary-dark:   #7c3aed;
    --primary-light:  #ec4899;
    --primary-rgb:    139,92,246;
    --topbar-from:    #6d28d9;
    --topbar-to:      #db2777;
    --sidebar-bg:     #1e1b4b;
    --sidebar-bg-2:   #312e81;
    --radius:         12px;
}
[data-theme="minimalist"] {
    --primary:        #000000;
    --primary-dark:   #1f2937;
    --primary-light:  #4b5563;
    --primary-rgb:    0,0,0;
    --topbar-from:    #111827;
    --topbar-to:      #1f2937;
    --sidebar-bg:     #0a0a0a;
    --sidebar-bg-2:   #171717;
    --radius:         4px;
}
[data-theme="warm"] {
    --primary:        #dc2626;
    --primary-dark:   #b91c1c;
    --primary-light:  #f59e0b;
    --primary-rgb:    220,38,38;
    --topbar-from:    #991b1b;
    --topbar-to:      #c2410c;
    --sidebar-bg:     #292524;
    --sidebar-bg-2:   #44403c;
    --radius:         16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; transition: background-color .15s, border-color .15s; }
body { font-family: var(--font-family); color: var(--text); background: #f4f7fb; -webkit-font-smoothing: antialiased; }

/* -- Microinteracciones globales ------------------------------------ */
button:not(:disabled):active { transform: scale(0.97); }
.card-hoverable { transition: transform .2s ease-out, box-shadow .2s ease-out; }
.card-hoverable:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.10); }

/* -- Status badges (Smart Capabilities) ----------------------------- */
.status-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 12px;
    font-size: .72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .03em;
}
.status-badge::before {
    content: "●"; font-size: .85rem; line-height: 1;
}
.status-badge--ok    { background: rgba(16,185,129,.12); color: #10b981; }
.status-badge--info  { background: #cdf4f4; color: #0f7f86; }
.status-badge--warn  { background: rgba(245,158,11,.12); color: #d97706; }
.status-badge--bad   { background: rgba(239,68,68,.12);  color: #ef4444; }
.status-badge--neutral { background: rgba(148,163,184,.12); color: #64748b; }

/* -- Currency cell - derecha, bold, brand color --------------------- */
.currency-cell {
    text-align: right; font-variant-numeric: tabular-nums;
    font-weight: 600; color: var(--text);
}

/* -- Image thumbnail en lista --------------------------------------- */
.entity-thumb {
    width: 40px; height: 40px;
    object-fit: cover; border-radius: 6px;
    background: #f1f5f9;
    box-shadow: 0 1px 2px rgba(0,0,0,.10);
}

/* -- Hero header en detail page (cuando entidad tiene [Image]) ----- */
.entity-hero {
    position: relative;
    width: 100%; height: 280px;
    background-size: cover; background-position: center;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 20px;
}
.entity-hero::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.65) 100%);
}
.entity-hero-content {
    position: absolute; bottom: 18px; left: 22px; z-index: 1;
    color: #fff;
}
.entity-hero-title {
    font-size: 1.9rem; font-weight: 700;
    letter-spacing: -.5px; text-shadow: 0 2px 6px rgba(0,0,0,.40);
    margin: 0;
}

/* -- Mailto/tel/url links ------------------------------------------- */
.smart-link {
    color: var(--primary); text-decoration: none;
    display: inline-flex; align-items: center; gap: 5px;
    transition: color .15s;
}
.smart-link:hover { color: var(--primary-dark); text-decoration: underline; }

/* -- Avatar circular gradient con iniciales ------------------------- */
.entity-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .78rem;
    box-shadow: 0 2px 4px rgba(0,0,0,.15);
}

/* -- SfSidebar override - navy DPO style -------------------------------- */
.e-sidebar.app-sidebar,
.app-sidebar.e-sidebar,
.e-sidebar.e-left.app-sidebar,
div.app-sidebar.e-sidebar,
.e-sidebar {
    background: var(--sidebar-bg) !important;
    border-right: 1px solid rgba(255,255,255,.04) !important;
    box-shadow: 2px 0 12px rgba(0,0,0,.18) !important;
}
/* -- Sidebar: forzar texto blanco (override Syncfusion) ------------ */
.e-sidebar .sb-link,
.e-sidebar .sb-nav .sb-link,
.e-sidebar .sb-nav a,
.e-sidebar .sb-label,
.e-sidebar .sb-nav .sb-label {
    color: #fff !important;
    opacity: .9;
}
.e-sidebar .sb-link:hover,
.e-sidebar .sb-nav .sb-link:hover { opacity: 1 !important; }
.e-sidebar .sb-link.active,
.e-sidebar .sb-nav .sb-link.active { opacity: 1 !important; background: rgba(255,255,255,.2) !important; }
.e-sidebar .sb-icon,
.e-sidebar .sb-nav .sb-icon,
.e-sidebar .sb-nav i {
    color: #fff !important;
    opacity: .85;
}
.e-sidebar .sb-group-header,
.e-sidebar .sb-group-label {
    color: rgba(255,255,255,.8) !important;
}
.e-sidebar .sb-chevron { color: rgba(255,255,255,.6) !important; }
.e-sidebar .sb-user-info,
.e-sidebar .sb-user-name,
.e-sidebar .sb-user-icon { color: #fff !important; }
.e-sidebar .sb-logout { color: #fca5a5 !important; }

/* -- Cascada flotante del HAT: el SfSidebar NO debe recortar los paneles --
   (overflow:auto/hidden en e-sidebar/.sb-inner cortaría los submenús a la
   derecha; el menú fly no necesita scroll: solo muestra los grupos top).
   OJO: CssClass="app-sidebar" NO llega al elemento .e-sidebar real — el
   selector debe ser .e-sidebar a secas. */
.e-sidebar:has(.sb-nav--fly) { overflow: visible !important; }
.e-sidebar:has(.sb-nav--fly) .sb-inner { overflow: visible !important; }
.e-sidebar:has(.sb-nav--fly) .sb-nav { overflow: visible !important; }
.e-sidebar:has(.sb-nav--fly) .fly-link,
.e-sidebar:has(.sb-nav--fly) .fly-row,
.e-sidebar:has(.sb-nav--fly) .fly-text { color: #e8e8e8 !important; }
.e-sidebar:has(.sb-nav--fly) .fly-link:hover,
.e-sidebar:has(.sb-nav--fly) .fly-item:hover > .fly-row { color: #fff !important; }

/* -- Syncfusion dock-closed (collapsed) state ----------------------- */
.e-sidebar.e-dock.e-close:not(:has(.sb-nav--fly)) { overflow-x: hidden !important; }
.e-sidebar.e-dock.e-close:not(:has(.sb-nav--fly)) .sb-inner { overflow-x: hidden !important; }
.e-sidebar.e-dock.e-close .sb-nav { align-items: center; }
.e-sidebar.e-dock.e-close:has(.sb-nav--fly),
.e-sidebar.e-dock.e-close:has(.sb-nav--fly) .sb-inner,
.e-sidebar.e-dock.e-close:has(.sb-nav--fly) .sb-nav { overflow: visible !important; }
.e-sidebar.e-dock.e-close .sb-brand { justify-content: center; padding: 14px 0; gap: 0; }
.e-sidebar.e-dock.e-close .sb-group { width: 100%; }
.e-sidebar.e-dock.e-close .sb-link {
    display: flex !important; justify-content: center !important; align-items: center !important;
    width: 40px !important; height: 40px !important;
    padding: 0 !important; margin: 2px auto !important;
    border-radius: 8px !important; border-left: none !important;
    transform: none !important; box-sizing: border-box !important;
}
.e-sidebar.e-dock.e-close .sb-link i { margin: 0 !important; width: auto !important; font-size: 1.1rem !important; }
.e-sidebar.e-dock.e-close .sb-items { display: flex; flex-direction: column; align-items: center; padding: 0; }
.ai-badge {
    font-size: .7rem; color: #93c5fd;
    background: rgba(0,102,204,.2);
    padding: 4px 10px; border-radius: 20px; display: inline-block;
}

/* -- Main content --------------------------------------------------------- */
.main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.page-body { flex: 1; overflow-y: auto; padding: 24px; }

/* -- Topbar (Sidebar-only mode) - gradient navy DPO style ------------ */
.topbar {
    height: 52px;
    background: linear-gradient(135deg, var(--topbar-from) 0%, var(--topbar-to) 100%);
    border-bottom: 1px solid rgba(0,0,0,.15);
    display: flex; align-items: center;
    padding: 0 14px; gap: 12px; flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
    color: #fff;
}
.topbar-toggle {
    width: 36px; height: 36px; background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,.85); display: flex; align-items: center; justify-content: center;
    border-radius: 6px; transition: background .15s, color .15s; font-size: 1rem;
}
.topbar-toggle:hover { background: rgba(255,255,255,.12); color: #fff; }
.topbar-title {
    font-weight: 700; font-size: 1rem; color: #fff;
    letter-spacing: -.2px;
}
.topbar-search {
    margin-left: 16px;
    display: flex; align-items: center; gap: 8px;
    padding: 6px 14px; min-width: 240px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    color: rgba(255,255,255,.7);
    cursor: pointer; transition: all .18s;
    font-size: .82rem; font-family: inherit;
}
.topbar-search:hover {
    background: rgba(255,255,255,.14);
    border-color: rgba(var(--primary-rgb),.4);
    color: #fff;
}
.topbar-search i { color: rgba(255,255,255,.5); font-size: .85rem; }
.topbar-search-label { flex: 1; text-align: left; }
.topbar-search-kbd {
    font-size: .65rem; font-family: 'JetBrains Mono','Consolas',monospace;
    color: rgba(255,255,255,.5);
    background: rgba(255,255,255,.06);
    padding: 2px 6px; border-radius: 3px; white-space: nowrap;
}
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.env-badge {
    font-size: .65rem; background: rgba(255,255,255,.14); color: #fff;
    padding: 2px 9px; border-radius: 4px; font-weight: 700; letter-spacing: .08em;
    border: 1px solid rgba(255,255,255,.18);
}
.topbar-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: linear-gradient(135deg, #2ea3f2 0%, #47b5ff 100%);
    color: #fff; font-weight: 700; font-size: .72rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
    cursor: pointer;
}

/* -- Agentes/roles del usuario en el topbar (visibilidad por rol) -- */
.topbar-roles { display: flex; align-items: center; gap: 6px; max-width: 46vw; overflow: hidden; }
.topbar-roles-label { font-size: .68rem; opacity: .7; color: inherit; white-space: nowrap; }
.role-chip {
    font-size: .66rem; font-weight: 700; white-space: nowrap;
    padding: 2px 8px; border-radius: 999px;
    color: var(--accent, #ff7a18);
    background: color-mix(in srgb, var(--accent, #ff7a18) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent, #ff7a18) 38%, transparent);
}
.role-chip--more { color: inherit; opacity: .7; background: rgba(128,128,128,.14); border-color: rgba(128,128,128,.28); }

/* -- Ribbon-only mode ---------------------------------------------- */
.app-shell--ribbon-only { flex-direction: column; }
.app-shell--ribbon-only .main-content { flex: 1; display: flex; flex-direction: column; }

/* -- Custom Ribbon (HTML) ------------------------------------------ */
.ribbon { flex-shrink: 0; }
.ribbon-tabs {
    display: flex; align-items: flex-end; gap: 0;
    background: linear-gradient(180deg, #0d1f3c 0%, #16213e 100%);
    padding: 0 12px; height: 32px;
}
.ribbon-tab {
    padding: 6px 16px; font-size: 12px; font-weight: 600;
    color: #93c5fd; background: transparent; border: none;
    cursor: pointer; border-bottom: 2px solid transparent;
    border-radius: 4px 4px 0 0; transition: all .15s;
    font-family: inherit;
}
.ribbon-tab:hover { color: #fff; background: rgba(255,255,255,.08); }
.ribbon-tab.active { color: #fff; background: #f8fafc; color: var(--text); border-bottom-color: var(--primary); }
.ribbon-tab--logout { margin-left: 8px; color: #fca5a5; }
.ribbon-tab--logout:hover { color: #fef2f2; background: rgba(239,68,68,.2); }
.ribbon-tabs-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.ribbon-user { font-size: 12px; color: #93c5fd; display: flex; align-items: center; gap: 5px; padding: 0 8px; }

.ribbon-panel {
    display: flex; align-items: stretch; gap: 0;
    background: var(--surface); padding: 4px 12px;
    border-bottom: 1px solid var(--border); min-height: 38px;
}
.ribbon-group { display: flex; flex-direction: column; gap: 1px; padding: 0 8px; }
.ribbon-group-items { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.ribbon-group-label {
    font-size: .6rem; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .08em; text-align: center;
    padding-top: 1px;
}
.ribbon-sep { width: 1px; background: var(--border); margin: 2px 4px; align-self: stretch; }

.ribbon-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 4px;
    background: transparent; border: 1px solid transparent;
    color: var(--text); font-size: 12px; font-weight: 500;
    cursor: pointer; transition: all .12s; text-decoration: none;
    font-family: inherit; white-space: nowrap;
}
.ribbon-btn:hover { background: rgba(var(--primary-rgb),.08); border-color: rgba(var(--primary-rgb),.2); color: var(--primary); }
.ribbon-btn i { font-size: 11px; }

/* -- Ribbon dropdown buttons --------------------------------------- */
.ribbon-dd.e-dropdown-btn {
    background: transparent !important; border: 1px solid transparent !important;
    color: var(--text) !important; font-size: 12px !important; font-weight: 500 !important;
    padding: 4px 10px !important; border-radius: 4px !important;
    font-family: inherit !important;
}
.ribbon-dd.e-dropdown-btn:hover { background: rgba(var(--primary-rgb),.08) !important; border-color: rgba(var(--primary-rgb),.2) !important; color: var(--primary) !important; }
.ribbon-dd .e-caret { font-size: 8px !important; }
.e-dropdown-popup { border-radius: 6px !important; box-shadow: var(--shadow-md) !important; }
.e-dropdown-popup .e-item { padding: 7px 16px !important; font-size: .85rem !important; }
.e-dropdown-popup .e-item:hover { background: rgba(var(--primary-rgb),.06) !important; }
.e-dropdown-popup .e-item a { color: var(--text) !important; text-decoration: none !important; }

/* -- Ribbon bar (toggle + ribbon) ----------------------------------- */
.ribbon-bar {
    flex-shrink: 0; display: flex; align-items: stretch;
    border-bottom: 1px solid var(--border); background: var(--surface);
}
.rb-toggle {
    width: 44px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; border-right: 1px solid var(--border);
    cursor: pointer; color: var(--text-muted); font-size: 1rem;
    transition: background .15s, color .15s;
}
.rb-toggle:hover { background: #f1f5f9; color: var(--primary); }
.app-ribbon { flex: 1; }
.app-ribbon.e-ribbon { background: var(--surface) !important; border: none !important; }
.app-ribbon .e-ribbon-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    color: var(--text) !important; font-weight: 500 !important;
}
.app-ribbon .e-ribbon-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
    color: var(--primary) !important; font-weight: 600 !important;
}
.app-ribbon .e-ribbon-tab .e-tab-header .e-indicator {
    background: var(--primary) !important;
}
.app-ribbon .e-ribbon-group-header {
    color: var(--text-muted) !important; font-size: .7rem !important;
    text-transform: uppercase !important; letter-spacing: .04em !important;
}

/* -- Breadcrumb ----------------------------------------------------------- */
.breadcrumb {
    display: flex; align-items: center; gap: 6px;
    font-size: .82rem; color: var(--text-muted);
    margin-bottom: 16px; padding: 0;
    background: none; list-style: none;
}
.bc-link {
    color: var(--primary); text-decoration: none;
    font-weight: 500; transition: color .15s;
}
.bc-link:hover { color: var(--primary-dark); text-decoration: underline; }
.bc-sep { color: #d1d5db; font-size: .7rem; margin: 0 2px; }
.bc-current { font-weight: 600; color: var(--text); }
/* Volver del breadcrumb encadenado (lista navegada desde un maestro) */
.bc-volver {
    margin-left: 12px; padding: 2px 12px; border-radius: 999px;
    border: 1px solid var(--primary); background: none; color: var(--primary);
    font-size: .8rem; font-weight: 600; cursor: pointer; transition: all .15s;
}
.bc-volver:hover { background: var(--primary); color: #fff; }

/* -- Module layout -------------------------------------------------------- */
.module-layout { position: relative; }
.module-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.module-header h2 { font-size: 1.25rem; font-weight: 700; }

/* Chip de vista navegacional (opción del menú HAT con filtro del modelo) */
.vista-chip {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: 999px;
    background: rgba(46,163,242,.12); color: var(--primary, #2ea3f2);
    border: 1px solid rgba(46,163,242,.35);
    font-size: .78rem; font-weight: 600; white-space: nowrap;
    max-width: 420px; overflow: hidden; text-overflow: ellipsis;
}

/* -- NL Search bar -------------------------------------------------------- */
.nl-search-bar {
    display: flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
    border: 1px solid #93c5fd;
    border-radius: var(--radius); padding: 10px 14px;
    margin-bottom: 16px;
}
.nl-search-icon { font-size: 1.2rem; }
.nl-input { flex: 1; }
.btn-nl-search {
    background: var(--primary); color: #fff; border: none;
    padding: 8px 16px; border-radius: var(--radius); cursor: pointer;
    font-weight: 600; white-space: nowrap;
}
.btn-nl-search:hover { background: var(--primary-dark); }
.btn-nl-search:disabled { opacity: .6; cursor: not-allowed; }
.btn-nl-clear {
    background: none; border: 1px solid var(--border);
    padding: 6px 10px; border-radius: var(--radius); cursor: pointer;
}
.nl-status { font-size: .8rem; color: var(--text-muted); }

/* -- Buttons --------------------------------------------------------------- */
.btn-primary {
    background: var(--primary); color: #fff; border: none;
    padding: 8px 16px; border-radius: var(--radius); cursor: pointer; font-weight: 600;
}
.btn-primary:hover { background: var(--primary-dark); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.btn-danger {
    background: var(--danger); color: #fff; border: none;
    padding: 8px 16px; border-radius: var(--radius); cursor: pointer; font-weight: 600;
}
.btn-back {
    background: none; border: 1px solid var(--border);
    padding: 6px 12px; border-radius: var(--radius); cursor: pointer;
}
.grid-btn {
    background: none; border: 1px solid var(--primary); color: var(--primary);
    padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: .8rem;
}
.grid-btn:hover { background: var(--primary); color: #fff; }

/* -- Forms ----------------------------------------------------------------- */
.form-layout { width: 100%; max-width: none; }
.form-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.form-header h2 { font-size: 1.25rem; font-weight: 700; }
.entity-form {
    background: var(--surface); border-radius: var(--radius);
    padding: 24px; box-shadow: var(--shadow);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px 24px;
}
/* Validation summary, actions y alertas ocupan la fila completa */
.entity-form > .validation-summary, .entity-form > .validation-message,
.entity-form > .form-actions, .entity-form > .alert-error,
.entity-form > .validation-errors, .entity-form > ul.validation-errors { grid-column: 1 / -1; }
.form-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-field--wide { grid-column: 1 / -1; }   /* textarea, etc */
.field-label { font-weight: 600; font-size: .9rem; }
.field-required { color: var(--danger); }
.form-actions { display: flex; gap: 12px; margin-top: 8px; }
.alert-error {
    background: #fef2f2; border: 1px solid #fecaca;
    color: var(--danger); padding: 12px; border-radius: var(--radius);
    margin-top: 16px;
}

/* -- SfDataForm (alta/edición): espaciado entre filas + editores full-width --
   El layout en columnas lo hace SfDataForm (ColumnCount); aquí solo damos aire
   vertical y forzamos que cada editor ocupe TODO el ancho de su celda (por
   defecto el combo/fecha rinde más angosto que el contenedor). */
.e-data-form { background: transparent; }
/* La rejilla interna de DataForm es .e-form-layout (celdas .e-colspan-N). Damos aire vertical. */
.e-data-form .e-form-layout { row-gap: 10px; }
.e-data-form .field-label {
    display: block; margin-bottom: 6px; font-weight: 600; font-size: .9rem; color: var(--text);
}
/* Campos OBLIGATORIOS en amarillo (Ignacio 29-jun): la celda del FormItem que contiene el '*'
   (.field-required) se tinta de amarillo suave con acento a la izquierda. Cubre alta/edición/diálogo
   y el '*' DINÁMICO de SetMandatory (aparece/desaparece con la regla). :has() = Chrome/Edge/Safari. */
.e-data-form .e-label-position-top:has(.field-required) {
    background: #fff8d6; border-radius: 6px; box-shadow: inset 3px 0 0 #f2c200;
}
/* Editores al 100% de su celda (refuerzo del Width="100%" del combo). */
.e-data-form .e-control-wrapper,
.e-data-form .e-input-group,
.e-data-form .sf-select { width: 100% !important; box-sizing: border-box; }
/* Títulos de SECCIÓN (FormGroup del SIU: "Crear Nómina", "Fecha de Nómina"…) como en Angular. */
.e-data-form .e-form-group { margin-bottom: 6px; }
.e-data-form .e-group-title {
    font-weight: 700; font-size: .95rem; color: var(--primary);
    padding-bottom: 6px; margin: 4px 0 14px; border-bottom: 2px solid var(--border);
}
/* Tarjeta del formulario de PÁGINA (la página no es un diálogo): da padding/fondo/sombra. */
.entity-form-card {
    background: var(--surface); border-radius: var(--radius);
    padding: 24px; box-shadow: var(--shadow);
}
.entity-form-card .form-actions { margin-top: 4px; }

/* -- Grid --------------------------------------------------------------------
   Scope .e-grid (NO .entity-grid): el CssClass del SfGrid no llega al DOM en
   Syncfusion 33.1.44 — verificado en runtime, el root solo trae sf-grid/e-grid. */
.e-grid { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.e-grid .e-gridheader { background: #f8fafc !important; }
.e-grid .e-headercell { font-weight: 600 !important; color: var(--text) !important; font-size: .82rem !important; }
/* Word-wrap de títulos de columna (Ignacio 29-jun): el título largo se va a 2ª línea en vez de
   ensanchar la columna o cortarse — "se adapta a contenido, no al título". Cubre TODOS los grids. */
.e-grid .e-gridheader .e-headercelldiv { white-space: normal !important; line-height: 1.2; height: auto !important; text-overflow: clip; overflow: visible; }
.e-grid .e-gridheader .e-headercell, .e-grid .e-gridheader tr { height: auto !important; }
.e-grid .e-gridheader .e-headertext { white-space: normal !important; }
.e-grid .e-row:hover td { background: rgba(var(--primary-rgb),.04) !important; }
.e-grid .e-content { font-size: .88rem; }
.loading-spinner { text-align: center; padding: 40px; font-size: 1.2rem; color: var(--text-muted); }

/* -- Estado badges -------------------------------------------------------- */
.badge {
    display: inline-block; padding: 3px 10px; border-radius: 20px;
    font-size: .75rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}
.badge--pendiente { background: #fef9c3; color: #854d0e; }
.badge--aprobado  { background: #dbeafe; color: #1d4ed8; }
.badge--entregado { background: #dcfce7; color: #166534; }
.badge--cancelado { background: #fee2e2; color: #991b1b; }

/* -- Native select con estilo consistente ---------------------------------- */
.sf-select {
    padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius);
    font-size: 0.9rem; font-family: inherit; background: white;
    width: 100%; color: var(--text); cursor: pointer;
}
.sf-select:focus {
    outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary);
}

/* -- Dialog form (SfDataForm dentro hace el layout en columnas) ------------ */
.dlg-form { padding: 8px 4px; }

/* -- [PP-SIU-TABS] Ventana de argumentos con la agrupación que declara el SIU --
   Sólo aplica a las ventanas que TIENEN pestañas: la lista llana de siempre no
   lleva ninguna de estas clases y queda exactamente igual que antes. */
.dlg-tab-grid, .dlg-loose {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px 20px;
}
.dlg-loose { margin-bottom: 14px; }
/* Marco de los grupos de nivel 2-3: ocupa la fila entera y reanuda la rejilla dentro. */
.dlg-group {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px 20px;
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 12px 14px;
}
.dlg-group-title {
    grid-column: 1 / -1;
    font-weight: 600; font-size: .85rem; color: var(--text-muted);
}
.svc-args-dialog--tabs .e-dlg-content { padding: 12px 16px; }
.svc-args-tabs .e-tab-header { overflow-x: auto !important; }
.dlg-warning { color: var(--danger); font-size: .85rem; margin-top: 8px; }

/* -- Dialogs anchos para entidades con detalles -------------------------- */
.entity-edit-dialog .e-dlg-content { padding: 16px 20px; }
.entity-edit-dialog--wide .e-dlg-content { display: flex; flex-direction: column; gap: 16px; }
.entity-edit-dialog--wide .dlg-child-tabs { flex: 1; min-height: 320px; }
.dlg-child-tabs .e-tab-header { overflow-x: auto !important; }

/* -- Grid action buttons (edit/delete icons) ------------------------------- */
.grid-actions { display: flex; gap: 4px; justify-content: center; }
.btn-action {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border: none; border-radius: 6px;
    cursor: pointer; transition: all .15s; background: none;
}
.btn-action svg { width: 16px; height: 16px; }
.btn-action--edit  { color: var(--primary); }
.btn-action--edit:hover  { background: #dbeafe; }
.btn-action--delete { color: var(--danger); }
.btn-action--delete:hover { background: #fef2f2; }

/* -- Vocabulario de las PESTAÑAS master-detail ------------------------------
   Reportado por Isel (1-ago): «las acciones de los padres están bonitas y en
   azul, las de los grids de abajo parece faltarle el css». No lo parecía: le
   faltaba. Los emisores de las pestañas escriben .btn-sm / .btn-danger-sm /
   .md-svc-btn / .link-action, y NINGUNA de esas clases tenía una sola regla —
   salían como botones crudos del navegador. Las filas de los hijos pasan a usar
   el mismo .btn-action del padre (ver MasterDetailRenderer); esto viste lo que
   queda: barra de servicios de la pestaña, asociar/desasociar y confirmaciones. */
.btn-sm {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 5px 11px; border-radius: 6px; cursor: pointer;
    font-size: .82rem; font-weight: 600; line-height: 1.3;
    border: 1px solid var(--border); background: #fff; color: var(--text);
    transition: all .15s;
}
.btn-sm:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); background: #f8fafc; }
.btn-sm:disabled { opacity: .5; cursor: not-allowed; }
.btn-danger-sm { border-color: rgba(220,38,38,.35); color: var(--danger); }
.btn-danger-sm:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); background: #fef2f2; }
/* El botón de servicio va en una barra con muchos hermanos: no debe crecer. */
.md-svc-btn { flex: 0 0 auto; }
.md-svc-confirm {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 8px 10px; border-radius: 6px;
    background: #fef2f2; border: 1px solid rgba(220,38,38,.35);
    font-size: .85rem;
}
/* Enlace-icono dentro de un grid (📋 ↗ ✏️). .link-detail ya existía y sí estaba
   vestido; .link-action se emitía en las pestañas y no. Misma pinta las dos. */
.link-action {
    color: var(--primary); text-decoration: none; font-size: 12px;
    display: inline-flex; align-items: center; justify-content: center;
}
.link-action:hover { text-decoration: underline; }

/* -- Reports page ---------------------------------------------------------- */
.reports-content { display: flex; flex-direction: column; gap: 24px; }
.report-group-title {
    font-size: .8rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--text-muted); margin-bottom: 10px;
}
.report-cards { display: flex; flex-direction: column; gap: 8px; }
.report-card {
    display: flex; align-items: center; gap: 14px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 12px 16px;
    box-shadow: var(--shadow); transition: box-shadow .15s;
}
.report-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.report-card-icon { font-size: 1.4rem; width: 32px; text-align: center; flex-shrink: 0; }
.report-card-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.report-card-name { font-weight: 600; font-size: .9rem; }
.report-card-type { font-size: .75rem; color: var(--text-muted); }
.btn-report-pdf {
    background: var(--primary); color: #fff; border: none;
    padding: 6px 14px; border-radius: var(--radius); cursor: pointer;
    font-size: .82rem; font-weight: 600; text-decoration: none;
    white-space: nowrap; transition: background .15s; display: inline-block;
}
.btn-report-pdf:hover { background: var(--primary-dark); color: #fff; }
.btn-report-pdf:disabled, .btn-report-pdf.disabled { background: #cbd5e1; color: #94a3b8; cursor: not-allowed; }
.reports-empty { color: var(--text-muted); padding: 32px 0; text-align: center; }

/* -- Search box en /reports ------------------------------------------ */
.reports-search {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; min-width: 360px;
    background: #fff; border: 1px solid var(--border);
    border-radius: 8px;
    transition: border-color .15s, box-shadow .15s;
}
.reports-search:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .15);
}
.reports-search i { color: var(--text-muted); font-size: .9rem; }
.reports-search-input {
    flex: 1; border: none; outline: none;
    font-size: .88rem; font-family: inherit;
    background: transparent; color: var(--text);
}
.reports-search-input::placeholder { color: var(--text-muted); }
.reports-search-clear {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: .8rem;
    padding: 2px 6px; border-radius: 4px;
    transition: background .15s;
}
.reports-search-clear:hover { background: rgba(0,0,0,.05); color: var(--text); }
.reports-section-count {
    font-size: .75rem; font-weight: 500;
    color: var(--text-muted); margin-left: 10px;
    background: rgba(var(--primary-rgb), .10);
    padding: 2px 8px; border-radius: 10px;
}
.module-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }

/* -- Crystal parameter dialog --------------------------------------- */
.crystal-param-overlay {
    position: fixed; inset: 0; background: rgba(15,23,42,.55);
    backdrop-filter: blur(3px); z-index: 9000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.crystal-param-modal {
    background: #fff; border-radius: 12px; max-width: 560px; width: 100%;
    max-height: 86vh; display: flex; flex-direction: column;
    box-shadow: 0 25px 60px -12px rgba(0,0,0,.4);
    overflow: hidden;
}
.crystal-param-header {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--topbar-from) 0%, var(--topbar-to) 100%);
    color: #fff;
}
.crystal-param-icon { font-size: 1.6rem; line-height: 1; }
.crystal-param-title { font-weight: 700; font-size: 1rem; letter-spacing: -.2px; }
.crystal-param-sub { font-size: .75rem; color: rgba(255,255,255,.7); margin-top: 2px; }
.crystal-param-close {
    margin-left: auto; background: rgba(255,255,255,.12); border: none;
    color: #fff; width: 28px; height: 28px; border-radius: 6px;
    cursor: pointer; font-size: .9rem; transition: background .15s;
}
.crystal-param-close:hover { background: rgba(255,255,255,.22); }
.crystal-param-body {
    flex: 1; overflow-y: auto;
    padding: 16px 20px;
    display: flex; flex-direction: column; gap: 10px;
}
.crystal-param-row { display: flex; flex-direction: column; gap: 4px; }
.crystal-param-label {
    font-size: .72rem; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .05em;
}
.crystal-param-input {
    padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px;
    font-size: .88rem; font-family: inherit; color: var(--text);
    background: #fff; transition: border-color .15s, box-shadow .15s;
}
.crystal-param-input:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .15);
}
.crystal-param-empty { color: var(--text-muted); font-size: .85rem; padding: 16px 0; text-align: center; }
.crystal-param-loading { color: var(--text-muted); font-size: .9rem; padding: 32px 0; text-align: center; }
.crystal-param-required { color: #ef4444; margin-left: 4px; font-weight: 700; }
.crystal-param-type {
    margin-left: 8px; padding: 1px 7px;
    background: rgba(var(--primary-rgb), .08); color: var(--primary);
    border-radius: 10px; font-size: .65rem;
    text-transform: lowercase; letter-spacing: .03em;
    font-weight: 500;
}
/* context:* — parámetro auto-rellenado (Username/CityHallName): chip read-only */
.crystal-param-auto {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border: 1px dashed var(--border); border-radius: 6px;
    background: rgba(var(--primary-rgb), .04); color: var(--text-muted);
    font-size: .88rem;
}
.crystal-param-auto i { color: var(--primary); font-size: .8rem; }
.crystal-param-auto-val { color: var(--text); font-weight: 600; }
.crystal-param-footer {
    display: flex; gap: 8px; justify-content: flex-end; align-items: center;
    padding: 12px 20px; background: #f8fafc;
    border-top: 1px solid var(--border);
}
/* [PP-REPORTE-PARAMETROS] Motivo en el pie del diálogo: qué requerido falta / por qué falló */
.crystal-param-hint {
    margin-right: auto; font-size: .78rem; color: var(--text-muted);
    text-align: left;
}
.crystal-param-error {
    margin-right: auto; font-size: .8rem; color: #b91c1c;
    background: #fef2f2; border: 1px solid #fecaca; border-radius: 6px;
    padding: 6px 10px; text-align: left;
}
/* [PP-REPORTE-TOKEN] Estado de la descarga en /reports (progreso o fallo legible) */
.reports-pdf-msg {
    margin: 10px 0 0; padding: 8px 14px;
    background: rgba(var(--primary-rgb), .07); border: 1px solid var(--border);
    border-radius: 8px; font-size: .85rem; color: var(--text);
}
.btn-secondary {
    background: #fff; color: var(--text);
    border: 1px solid var(--border);
    padding: 8px 16px; border-radius: var(--radius);
    font-weight: 500; font-size: .85rem; cursor: pointer;
    transition: background .15s;
}
.btn-secondary:hover { background: #f1f5f9; }

/* -- Tenant admin (multi-tenant) ----------------------------------- */
.tadmin-shell { padding: 24px 28px; }
.tadmin-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; gap: 16px; }
.tadmin-title { font-size: 1.3rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 10px; }
.tadmin-title i { color: var(--primary); }
.tadmin-sub { color: var(--text-muted); font-size: .85rem; margin-top: 4px; }
.tadmin-empty { color: var(--text-muted); padding: 40px 0; text-align: center; }
.tadmin-table { width: 100%; border-collapse: collapse; font-size: .85rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.tadmin-table th { text-align: left; padding: 10px 12px; background: #f8fafc; color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: .68rem; letter-spacing: .04em; border-bottom: 1px solid var(--border); }
.tadmin-table td { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; }
.tadmin-table tr:last-child td { border-bottom: none; }
.tadmin-inactive { opacity: .55; }
.tadmin-mono { font-family: ui-monospace, monospace; font-size: .78rem; color: var(--text); }
.tadmin-actions { display: flex; gap: 10px; }
.tadmin-link { background: none; border: none; color: var(--primary); cursor: pointer; font-size: .82rem; padding: 0; }
.tadmin-link:hover { text-decoration: underline; }
.tadmin-error { color: #ef4444; margin-top: 12px; font-size: .85rem; }

.app-auth-loading {
    min-height: 100vh;
    display: grid;
    place-items: center;
    color: #e5e7eb;
    font-weight: 600;
    background: linear-gradient(135deg, #0f172a 0%, #16213e 100%);
}

/* -- Login ------------------------------------------------------------- */
.login-shell {
    min-height: 100vh;
    display: flex;
    background: #f0f4f8;
}
.login-brand {
    flex: 1; display: none;
    background: linear-gradient(135deg, #0f172a 0%, #16213e 50%, #1a1a2e 100%);
    align-items: center; justify-content: center;
    flex-direction: column; gap: 24px; padding: 48px;
    color: #fff; position: relative; overflow: hidden;
}
.login-brand::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 70%, rgba(0,102,204,.25) 0%, transparent 60%);
}
.login-brand-logo { font-size: 2.5rem; font-weight: 800; position: relative; z-index: 1; letter-spacing: -1px; }
.login-brand-sub { font-size: 1rem; color: #93c5fd; position: relative; z-index: 1; text-align: center; max-width: 320px; line-height: 1.6; }
.login-brand-badge { background: rgba(0,102,204,.3); border: 1px solid rgba(0,102,204,.4); border-radius: 20px; padding: 6px 16px; font-size: .8rem; color: #93c5fd; position: relative; z-index: 1; }
@media (min-width: 900px) { .login-brand { display: flex; } }
.login-side {
    flex: 0 0 480px; display: flex; align-items: center; justify-content: center;
    padding: 24px; background: #fff;
}
@media (max-width: 899px) { .login-side { flex: 1; } }
.login-card {
    width: 100%; max-width: 400px;
}
.login-logo {
    font-size: 1.4rem; font-weight: 800;
    color: #0066CC; text-align: center; margin-bottom: .35rem;
}
.login-subtitle {
    font-size: .82rem; color: #64748b;
    text-align: center; margin-bottom: 1.8rem;
}
.login-form { display: flex; flex-direction: column; gap: 1rem; }
.login-field { display: flex; flex-direction: column; gap: .4rem; }
.login-field label { font-size: .8rem; color: #64748b; font-weight: 600; }
.login-input {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: .75rem 1rem; color: #1e293b; font-size: .95rem;
    transition: border-color .2s, box-shadow .2s;
}
.login-input:focus { outline: none; border-color: #0066CC; box-shadow: 0 0 0 3px rgba(0,102,204,.15); }
.login-error {
    background: #fef2f2; border: 1px solid #fecaca;
    border-radius: 6px; padding: .65rem .9rem; color: #dc2626; font-size: .85rem;
}
.login-btn {
    background: #0066CC; color: #fff; border: none;
    border-radius: 8px; padding: .85rem; font-size: .98rem; font-weight: 700;
    cursor: pointer; transition: background .2s;
}
.login-btn:hover:not(:disabled) { background: #0052a3; }
.login-btn:disabled { opacity: .65; cursor: not-allowed; }

/* -- Detail Page (PARTE 1D) ------------------------------------------------- */
.detail-page { padding: 24px; max-width: 1200px; margin: 0 auto; }
.detail-header {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 20px;
}
.detail-title { flex: 1; font-size: 1.2rem; font-weight: 700; margin: 0; }
.btn-back {
    font-size: 0.85rem; padding: 6px 14px;
    background: transparent; border: 1px solid var(--border);
    border-radius: 6px; color: var(--text-secondary); cursor: pointer;
    transition: all 0.15s;
}
.btn-back:hover { border-color: var(--accent-light); color: var(--accent-light); }
.detail-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 20px;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px; margin-bottom: 24px;
}
.detail-field { display: flex; flex-direction: column; gap: 4px; }
.detail-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.detail-value { font-size: 0.95rem; color: var(--text); font-weight: 500; }
.link-detail {
    color: var(--primary); text-decoration: none; font-size: 12px;
    margin-left: 8px; display: inline-flex; align-items: center; justify-content: center;
}
.link-detail:hover { text-decoration: underline; }

/* -- Overlay de anotación del manifest ----------------------------------- */
.pm-feedback-button {
    position: fixed; right: 18px; bottom: 18px; z-index: 2100;
    border: 1px solid rgba(var(--primary-rgb), .35);
    background: var(--primary); color: #fff;
    border-radius: 999px; padding: 10px 15px;
    font-size: .86rem; font-weight: 700;
    box-shadow: 0 8px 24px rgba(15,23,42,.18);
    cursor: pointer;
}
.pm-feedback-button:hover { background: var(--primary-dark); }

/* -- Manifest navigation links: saltos cross-entity ----------------------- */
.nav-bar.manifest-nav-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin: 0 0 16px; padding: 10px 12px;
    background: #f8fafc; border: 1px solid var(--border);
    border-radius: 10px;
}
.nav-bar.manifest-nav-bar::before {
    content: "Navegar a";
    color: var(--text-muted); font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    margin-right: 4px;
}
.nav-link.manifest-nav-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--primary); background: #ffffff;
    border: 1px solid rgba(var(--primary-rgb), .24);
    border-radius: 999px; padding: 5px 11px;
    font-size: .8rem; font-weight: 600; text-decoration: none;
    line-height: 1.2; white-space: nowrap;
    transition: border-color .15s, background .15s, color .15s;
}
.nav-link.manifest-nav-link::after {
    content: "›"; font-size: .95rem; line-height: 1; color: var(--text-muted);
}
.nav-link.manifest-nav-link:hover {
    color: var(--primary-dark); background: rgba(var(--primary-rgb), .06);
    border-color: rgba(var(--primary-rgb), .48);
}

/* -- Service Actions (PARTE 2) ----------------------------------------------- */
details.svc-section {
    margin: 12px 0 16px; padding: 0;
    background: rgba(0, 102, 204, 0.04);
    border: 1px solid rgba(0, 102, 204, 0.18);
    border-radius: 10px;
}
details.svc-section[open] { background: rgba(0, 102, 204, 0.06); }
.svc-summary {
    cursor: pointer; padding: 10px 14px;
    font-size: 0.85rem; font-weight: 700;
    color: var(--primary); user-select: none;
    list-style: none; outline: none;
    display: flex; align-items: center; gap: 8px;
}
.svc-summary::-webkit-details-marker { display: none; }
.svc-summary::before {
    content: "▸"; transition: transform 0.15s;
    color: var(--primary);
}
details.svc-section[open] .svc-summary::before { transform: rotate(90deg); }
.svc-summary:hover { background: rgba(0, 102, 204, 0.08); border-radius: 10px 10px 0 0; }
.svc-title {
    font-size: 0.85rem; font-weight: 700;
    color: var(--primary); margin-bottom: 12px;
}
.svc-buttons {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 12px 14px 14px;
    border-top: 1px solid rgba(0, 102, 204, 0.12);
}
/* Detail tabs ocupan el ancho completo del contenedor */
.detail-tabs { width: 100%; }
.detail-tabs .e-tab-header { overflow-x: auto !important; }
.btn-service {
    background: rgba(0, 102, 204, 0.1);
    border: 1px solid rgba(0, 102, 204, 0.3);
    border-radius: 8px; padding: 8px 16px;
    color: var(--primary); font-size: 0.85rem; font-weight: 600;
    cursor: pointer; transition: all 0.15s;
}
.btn-service:hover { background: rgba(0, 102, 204, 0.2); }
.svc-error {
    color: var(--danger); font-size: 0.85rem;
    background: rgba(248,81,73,.08); border: 1px solid rgba(248,81,73,.2);
    border-radius: 6px; padding: 8px 12px; margin-top: 8px;
}
.svc-notification {
    position: fixed; bottom: 24px; right: 24px;
    background: var(--success); color: #fff;
    padding: 12px 20px; border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    font-weight: 600; z-index: 2000;
}

/* -- List page action bar ------------------------------------------------ */
.action-bar {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 8px; margin: 10px 0;
}
.action-bar-btn {
    background: var(--primary); color: #fff;
    border: 1px solid var(--primary); border-radius: 6px;
    padding: 6px 14px; font-size: .82rem; font-weight: 600;
    cursor: pointer; transition: background .15s, box-shadow .15s;
    white-space: nowrap;
}
.action-bar-btn:hover:not(:disabled) {
    background: var(--primary-dark);
    box-shadow: 0 2px 8px rgba(var(--primary-rgb),.25);
}
.action-bar-btn:disabled {
    background: #cbd5e1; border-color: #cbd5e1;
    color: #64748b; cursor: not-allowed; opacity: 1;
}
.action-bar .action-bar-more.e-dropdown-btn {
    background: var(--primary); color: #fff;
    border: 1px solid var(--primary); border-radius: 6px;
    padding: 6px 12px; font-size: .82rem; font-weight: 600;
    box-shadow: none; white-space: nowrap;
}
.action-bar .action-bar-more.e-dropdown-btn:hover:not(:disabled) {
    background: var(--primary-dark);
}
.action-bar .action-bar-more.e-dropdown-btn:disabled {
    background: #cbd5e1; border-color: #cbd5e1;
    color: #64748b; opacity: 1;
}
.action-bar__analytics {
    margin-left: auto; border-radius: 6px; padding: 6px 14px;
}

/* Syncfusion 33.1.x no conserva de forma fiable AddClass de RowDataBound.
   La categoría se deriva del badge que sí llega al DOM. SOLO se colorea la CELDA
   del Status (feedback Ignacio 2-jul: filas enteras amarillas "lo estaban matando"). */
.e-grid .e-row td:has(.status-badge--ok) { background-color: #e7f6e7 !important; }
.e-grid .e-row td:has(.status-badge--info) { background-color: #cdf4f4 !important; }
.e-grid .e-row td:has(.status-badge--warn) { background-color: #fff9d6 !important; }
.e-grid .e-row td:has(.status-badge--bad) { background-color: #fde2e2 !important; }
.e-grid .e-row:hover td:has(.status-badge--ok) { background-color: #d8efd8 !important; }
.e-grid .e-row:hover td:has(.status-badge--info) { background-color: #b9e7e7 !important; }
.e-grid .e-row:hover td:has(.status-badge--warn) { background-color: #fff2b8 !important; }
.e-grid .e-row:hover td:has(.status-badge--bad) { background-color: #f8cccc !important; }

/* Chip de navegación CON CONTEXTO (fila seleccionada → destino filtrado por ella) */
.list-nav-chip--ctx {
    border-color: #2563eb !important; color: #1d4ed8 !important;
    background: #eff6ff !important; font-weight: 600;
}
.list-nav-bar__hint { color: #64748b; font-size: .75rem; margin-left: 6px; }

/* Banner de paginación server-side ("N de M · Cargar más") */
.page-cap-banner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin: 10px 0 0; padding: 8px 14px;
    background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px;
    color: #1e40af; font-size: .85rem;
}
.page-cap-banner .page-cap-more {
    background: #2563eb; color: #fff; border: none; border-radius: 6px;
    padding: 6px 14px; font-weight: 600; cursor: pointer;
}
.page-cap-banner .page-cap-more:disabled { background: #93c5fd; cursor: default; }

.status-legend {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 8px; margin: 10px 0 0;
}
.status-legend__chip {
    display: inline-flex; align-items: center;
    border: 1px solid #cbd5e1; border-radius: 999px;
    padding: 3px 10px; color: #475569;
    font-size: .75rem; font-weight: 600;
}
.status-legend__chip--ok { background: #e7f6e7; border-color: #b7dfb7; }
.status-legend__chip--info { background: #cdf4f4; border-color: #9bdede; }
.status-legend__chip--warn { background: #fff9d6; border-color: #eadb84; }
.status-legend__chip--bad { background: #fde2e2; border-color: #efb8b8; }
.status-legend__chip--neutral { background: #f1f5f9; border-color: #cbd5e1; }

/* -- MDIU inline al fondo del listado (datos relacionados de la fila sel.) -- */
.md-inline-panel {
    margin: 14px 0 0; background: #fff;
    border: 1px solid #e2e8f0; border-radius: 12px;
    box-shadow: 0 4px 16px rgba(15,23,42,.06);
    padding: 12px 14px 16px;
    animation: md-inline-in .25s ease;
}
.md-inline-panel__title {
    font-weight: 800; font-size: .82rem; color: #334155;
    text-transform: uppercase; letter-spacing: .04em;
    margin: 0 0 8px;
}
.md-inline-tabs { --md-accent: #1e5aa8; }
.md-inline-grid { font-size: .86rem; }
@keyframes md-inline-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* -- Navegaciones inline en el listado (paridad Angular) ------------------ */
.list-nav-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin: 8px 0 0; padding: 8px 10px;
    background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 10px;
}
.list-nav-bar__label {
    font-size: .76rem; font-weight: 800; color: #64748b;
    text-transform: uppercase; letter-spacing: .03em;
}
.list-nav-chip {
    display: inline-flex; align-items: center; cursor: pointer;
    background: #fff; border: 1px solid #bcd0ea; border-radius: 999px;
    padding: 3px 12px; color: #1e5aa8; font-size: .8rem; font-weight: 600;
    text-decoration: none; transition: all .15s ease;
}
.list-nav-chip:hover { background: #1e5aa8; color: #fff; border-color: #1e5aa8; }
/* Chip INHABILITADO: exige fila seleccionada en el grid (pedido Isel 6-ago — sin fila se
   navegaba "a algo con todo"). Misma lectura visual que .action-bar-btn:disabled: gris,
   not-allowed. El clic lo bloquea el guard C# del handler; esto es la señal visual/aria. */
.list-nav-chip.chip-needs-row {
    background: #cbd5e1; border-color: #cbd5e1;
    color: #64748b; cursor: not-allowed; opacity: 1;
}
.list-nav-chip.chip-needs-row:hover { background: #cbd5e1; color: #64748b; border-color: #cbd5e1; cursor: not-allowed; }
/* Barra de navegación POR TAB (grids de detalle): separada del grid, fondo sutil distinto */
.md-tab-nav-bar {
    margin: 10px 0 2px; background: #eef4fb; border-style: solid; border-color: #d6e3f3;
}

/* -- Service Toast notification ------------------------------------------- */
.svc-toast {
    /* bottom 84px: por ENCIMA del botón "Sugerir cambio" (en DEV lo tapaba — Pedro 17-jul). */
    position: fixed; bottom: 84px; right: 24px;
    background: #1e293b; color: #e2e8f0;
    padding: 12px 24px; border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
    font-weight: 600; font-size: .9rem; z-index: 2000;
    animation: svc-toast-in .3s ease;
}
@keyframes svc-toast-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* -- Grid row selection highlight ---------------------------------------- */
.e-grid .e-row.e-selectionbackground {
    background: rgba(var(--primary-rgb),.08) !important;
}
.e-grid .e-row.e-selectionbackground td {
    border-color: rgba(99,102,241,.15) !important;
}

/* -- Detail child grid --------------------------------------------------- */
.detail-child-grid { border-radius: 8px; overflow: hidden; }

/* -- Grid Aggregates footer ------------------------------------------- */
.agg-sum {
    font-weight: 700; color: var(--primary);
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: .85rem;
}
.agg-count {
    font-weight: 700; color: var(--text-muted);
    font-size: .82rem;
}

/* -- Grid Toolbar styling --------------------------------------------- */
.e-grid .e-toolbar {
    border-bottom: 1px solid var(--border) !important;
    background: rgba(var(--primary-rgb),.03) !important;
}
.e-grid .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn {
    border-radius: 6px !important;
}

/* -- Column Chooser polish -------------------------------------------- */
.e-grid .e-ccdlg { border-radius: 12px !important; }

/* -- Alternate rows --------------------------------------------------- */
.e-grid .e-altrow { background: rgba(var(--primary-rgb),.02) !important; }

/* -- Grouping bar ----------------------------------------------------- */
.e-grid .e-groupdroparea {
    background: rgba(var(--primary-rgb),.04) !important;
    border-bottom: 1px solid rgba(var(--primary-rgb),.1) !important;
    padding: 8px 16px !important;
    font-size: .82rem !important;
}

/* -- Sticky header shadow --------------------------------------------- */
.e-grid .e-sticky { box-shadow: 0 2px 8px rgba(0,0,0,.08) !important; }

/* -- Pivot Analytics Page -------------------------------------------- */
.pivot-page { padding: 24px; }
.pivot-skeleton { padding: 16px 0; }
.skel-bar {
    height: 40px; border-radius: var(--radius); margin-bottom: 12px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%; animation: skel-shimmer 1.5s infinite;
}
.skel-grid { display: flex; flex-direction: column; gap: 6px; }
.skel-row {
    height: 34px; border-radius: 4px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%; animation: skel-shimmer 1.5s infinite;
}
.skel-row:nth-child(odd) { animation-delay: .15s; }
@keyframes skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.pivot-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.pivot-header h2 { font-size: 1.5rem; font-weight: 600; color: var(--text); margin: 0; }
.pivot-header .pivot-load-btn { margin-left: auto; }
.pivot-badge { background: var(--primary); color: #fff; padding: 4px 12px; border-radius: 20px; font-size: .85rem; }
.e-pivotview { border-radius: var(--radius); box-shadow: var(--shadow); }
.btn-analytics { background: linear-gradient(135deg, #0066CC, #004C99); color: #fff; border: none; padding: 8px 16px; border-radius: var(--radius); cursor: pointer; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.btn-analytics:hover { filter: brightness(1.1); }

/* Pivot lazy-load prompt (patrón PeopleWorksGPT) */
.pivot-prompt {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 60px 40px; background: var(--surface); border: 2px dashed var(--border);
    border-radius: 12px; text-align: center; gap: 16px; box-shadow: var(--shadow);
}
.pivot-prompt-icon { font-size: 64px; color: var(--primary); opacity: 0.85; }
.pivot-prompt h3 { font-size: 1.35rem; color: var(--text); margin: 0; font-weight: 600; }
.pivot-prompt p { max-width: 520px; color: var(--text-muted); line-height: 1.6; margin: 0; }
.pivot-prompt .btn-primary {
    background: var(--primary); color: #fff; border: none; padding: 10px 22px;
    border-radius: var(--radius); cursor: pointer; font-weight: 500; font-size: .95rem;
    display: inline-flex; align-items: center; gap: 8px; transition: all .15s;
}
.pivot-prompt .btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); }

/* Pivot container — dimensiones explícitas para evitar error 'auto' en Syncfusion */
.pivot-container {
    position: relative; width: 100%; height: 520px;
    background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
}

/* Overlay mientras el engine procesa los datos (primera carga) */
.pivot-overlay {
    position: absolute; inset: 0; z-index: 10;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; background: rgba(255, 255, 255, 0.92); border-radius: var(--radius);
    backdrop-filter: blur(2px);
}
.pivot-overlay p { margin: 0; font-weight: 500; color: var(--text); }
.pivot-overlay small { color: var(--text-muted); }
.pivot-overlay-spinner {
    width: 48px; height: 48px; border: 4px solid var(--border);
    border-top-color: var(--primary); border-radius: 50%;
    animation: pivot-spin 0.8s linear infinite;
}
@keyframes pivot-spin { to { transform: rotate(360deg); } }

/* Botón genérico primary (reutilizable) */
.btn-primary {
    background: var(--primary); color: #fff; border: none; padding: 8px 16px;
    border-radius: var(--radius); cursor: pointer; font-weight: 500;
    display: inline-flex; align-items: center; gap: 6px; transition: background .15s;
}
.btn-primary:hover { background: var(--primary-dark); }

/* -- Topbar - title wrap + customer subtitle ------------------------ */
.topbar-title-wrap { display: flex; flex-direction: column; line-height: 1.05; }
.topbar-customer { font-size: .7rem; color: rgba(255,255,255,.7); font-weight: 500; letter-spacing: .02em; margin-top: 1px; }

/* -- Login - customer subtitle ------------------------------------- */
.login-brand-customer { font-size: 1.1rem; font-weight: 600; color: rgba(255,255,255,.85); margin-top: 6px; letter-spacing: -.1px; }


/* -- Topbar clara (token layout.topbarStyle=light - diseño Isel) ------ */
.topbar {
    background: #ffffff;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(15,23,42,.06);
}
.topbar-toggle { color: var(--text-muted); }
.topbar-toggle:hover { background: rgba(15,23,42,.06); color: var(--text); }
.topbar-title { color: var(--text); }
.topbar-search {
    background: #f1f5f9;
    border: 1px solid var(--border);
    color: var(--text-muted);
}
.topbar-search:hover {
    background: #e9eef5;
    border-color: rgba(var(--primary-rgb),.45);
    color: var(--text);
}
.topbar-search i { color: var(--text-muted); }
.topbar-search-kbd {
    color: var(--text-muted);
    background: #e2e8f0;
}
.topbar-customer { color: var(--text-muted); }

/* [PP-ARG-OBJETO-UNIVERSAL] Los campos del panel de búsqueda van EN FILA, como en el
   Angular de Integranova. No había NINGUNA regla para .search-fields: cada campo caía
   como bloque y ocupaba el ancho entero, así que tres criterios llenaban la pantalla
   (hallazgo 3 de la QA de Isel del 17-ago, filtro de Notas de Crédito). El selector de
   referencia pide más sitio que una caja — casillas de clave + lupa + descripción. */
.search-panel-body .search-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: flex-end;
}
.search-panel-body .search-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 1 240px;
    min-width: 180px;
}
.search-panel-body .search-field > label {
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-panel-body .search-field[data-pm-control="picker"] {
    flex: 0 1 360px;
    min-width: 280px;
}


/* -- CARRIL DE LOS FLOTANTES ------------------------------------------
   Los botones flotantes (.ai-fab, .pm-feedback-button) viven en
   position:fixed pegados a la esquina inferior derecha del VIEWPORT, y
   ocupan los `right` + `width` px de la derecha. Toda barra inferior que
   alinee controles a la derecha (el pie del listado, el banner de
   "Cargar más") acaba DEBAJO de ellos: medido el 30-jul, el flotante
   tapaba los botones «›» y «»» del paginador (17x23 y 28x23 px) y el
   botón «Cargar más» (45x19). No son adornos: sin ellos no se puede
   pasar de página.

   Se reserva un CARRIL a la derecha en vez de recolocar cada botón
   pantalla a pantalla. El ancho es un TOKEN DEL DESIGN KIT
   (tokens.layout.fabLane), declarado como --pm-fab-lane en el :root del
   tema. Aquí sólo se CONSUME. */
.page-cap-banner {
    padding-right: var(--pm-fab-lane) !important;
}

/* -- CODEX 31: UiDensidad2026 (capa BASE emitida por WebGenerator) ------ */
/* La clase se repite a propósito (0-2-0 -> 0-3-0). Sin eso esta regla CASA
   pero NO GANA: MainLayout.razor.css emite .page-body{padding:24px} y Blazor
   lo compila a .page-body[b-xxxxx], que empata en especificidad y se carga
   DESPUÉS de app.css. La regla llevaba desde el corte del 1-ago sin aplicar.

   ⚠️ SOLO el padding. La versión original traía además `overflow: hidden`, y al
   despertar la regla eso ROMPIÓ el panel de datos relacionados en TODAS las
   listas (reporte de Pedro, 3-ago): al seleccionar una fila, el panel se
   renderiza DEBAJO del marco de la rejilla — medido, empezaba en y=868 con la
   ventana en 898 y `scrollHeight` 1622 contra `clientHeight` 816 — así que
   quedaba fuera de la vista y sin barra para llegar a él: parecía haber
   desaparecido. El overflow se escribió cuando la lista era lo ÚNICO de la
   página; con master-detail la página TIENE que poder desplazarse. El encaje de
   la rejilla no depende de él: lo hace el `flex: 1` de .ui-density-2026-grid-frame.

   Lección: una regla que lleva días MUERTA no es «lo pretendido que falta».
   Encenderla es un cambio de comportamiento y hay que verificarlo como código
   nuevo — y en la superficie con TODOS sus estados (aquí, con una fila
   seleccionada, que es cuando aparece el panel). */
.page-body.page-body:has(> .module-layout.ui-density-2026) {
    padding: 12px 16px;
}
.ui-density-2026 {
    --ui26-blue-900: #123d70;
    --ui26-blue-600: #1e5aa8;
    --ui26-blue-200: #dbe8f5;
    --ui26-blue-100: #f1f6fb;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.ui-density-2026 .module-main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.ui-density-2026 .module-header {
    height: 30px;
    min-height: 30px;
    margin: 0;
    padding: 3px 10px;
    background: var(--ui26-blue-900);
    color: #fff;
    border-radius: 8px 8px 0 0;
}
.ui-density-2026 .module-header h2 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.35;
    color: inherit;
}
/* El fondo va en el azul MEDIO, no en el claro: el texto de este breadcrumb es
   blanco (regla de abajo), y sobre --ui26-blue-200 quedaba en un contraste de
   1,1:1, ilegible. En las LISTAS no se veía porque la capa de overrides del
   Design Kit ya forzaba el azul medio, pero sólo para .module-layout — o sea
   que la base llevaba el defecto y lo tapaba un parche de una sola superficie.
   Al llevar el rediseño a la ficha y al formulario salió a la luz. */
.ui-density-2026 .breadcrumb {
    height: 26px;
    min-height: 26px;
    margin: 0;
    padding: 2px 10px;
    background: var(--ui26-blue-600);
    border-inline: 1px solid rgba(var(--primary-rgb), .18);
}
.ui-density-2026 .breadcrumb .bc-link,
.ui-density-2026 .breadcrumb .bc-current,
.ui-density-2026 .breadcrumb .bc-sep,
.ui-density-2026 .breadcrumb .bc-volver {
    color: #fff;
}
.ui-density-2026 .breadcrumb .bc-link:hover {
    color: #fff;
}
.ui-density-2026 .action-bar {
    position: relative;
    min-height: 28px;
    margin: 0;
    padding: 2px 8px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    background: color-mix(in srgb, var(--ui26-blue-200) 55%, #fff);
    border-inline: 1px solid rgba(var(--primary-rgb), .18);
    overflow: visible;
}
.ui-density-2026 .action-bar-btn,
.ui-density-2026 .action-bar__analytics {
    min-height: 24px;
    margin: 0;
    padding: 2px 8px;
    font-size: .78rem;
    line-height: 1;
    flex: 0 0 auto;
}
.ui-density-2026 .nl-search-bar,
.ui-density-2026 .search-panel {
    margin: 0;
    border-radius: 0;
    flex: 0 0 auto;
}
.ui-density-2026 > .module-main > .search-panel {
    min-height: 28px;
    padding: 2px 8px;
    background: var(--ui26-blue-100);
    border-inline: 1px solid rgba(var(--primary-rgb), .18);
}
.ui-density-2026 .nl-search-bar {
    padding: 5px 10px;
    gap: 6px;
    background: var(--ui26-blue-100);
    border-color: rgba(var(--primary-rgb), .18);
}
.ui-density-2026 .search-panel-toggle {
    min-height: 24px;
    padding: 2px 8px;
    font-size: .78rem;
}
.ui-density-2026-grid-frame {
    flex: 1 1 auto;
    min-height: 220px;
    overflow: hidden;
    background: #fff;
    border-inline: 1px solid rgba(var(--primary-rgb), .18);
}
.ui-density-2026-grid-frame > .e-grid {
    height: 100% !important;
    border-radius: 0;
    border: 0;
    box-shadow: none;
}
/* La TABLA no se estira: quien llena el marco es .e-content (el contenedor con
   scroll), y ya lo hace. Una <table> con height:100% reparte el sobrante entre
   sus filas, asi que en una lista de POCOS registros la fila se lo come todo —
   medido en Alcaldia (HR), 1 registro: la fila median 407 px en vez de 31.
   Con muchas filas el reparto era invisible, por eso paso desapercibido. */
.ui-density-2026 .e-grid .e-gridcontent .e-table {
    height: auto !important;
}
.ui-density-2026 .e-grid .e-toolbar {
    height: 32px !important;
    min-height: 32px !important;
    padding: 2px 6px !important;
    background: var(--ui26-blue-100) !important;
    border-color: rgba(var(--primary-rgb), .18) !important;
    white-space: nowrap;
}
.ui-density-2026 .e-grid .e-toolbar-items {
    height: 26px !important;
    min-height: 26px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
}
.ui-density-2026 .e-grid .e-toolbar-item {
    flex: 0 0 auto;
}
.ui-density-2026 .e-grid .e-toolbar .e-tbar-btn {
    min-height: 24px !important;
    padding: 2px 7px !important;
}
.ui-density-2026 .e-grid .e-gridheader .e-columnheader,
.ui-density-2026 .e-grid .e-headercell {
    height: 42px !important;
}
.ui-density-2026 .e-grid .e-headercell {
    padding: 2px 6px !important;
    background: var(--ui26-blue-200) !important;
    border-color: rgba(var(--primary-rgb), .20) !important;
}
.ui-density-2026 .e-grid .e-headercelldiv {
    font-size: .75rem;
    line-height: 16px !important;
}
.ui-density-2026 .e-grid .e-row,
.ui-density-2026 .e-grid .e-rowcell {
    height: 30px !important;
    min-height: 30px !important;
}
.ui-density-2026 .e-grid .e-rowcell {
    padding: 3px 7px !important;
    line-height: 1.2 !important;
}
.ui-density-2026 .e-grid .e-rowcell.e-rightalign {
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums;
}
.ui-density-2026 .e-grid .e-altrow td {
    background: var(--ui26-blue-100) !important;
}
.ui-density-2026 .e-grid .e-gridheader th:first-child,
.ui-density-2026 .e-grid .e-gridcontent td:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--ui26-blue-100) !important;
    box-shadow: 1px 0 rgba(var(--primary-rgb), .18);
}
.ui-density-2026 .e-grid .e-gridheader th:first-child {
    z-index: 4;
    background: var(--ui26-blue-200) !important;
}
.ui-density-2026 .e-grid .e-pager {
    display: none !important;
}
.ui-density-2026-footer {
    min-height: 38px;
    /* Envolver, NO desbordar. El carril de la derecha es sólo relleno: si el
       contenido no cabe, los hijos del flex se salen y el paginador vuelve a
       meterse debajo del flotante — medido el 30-jul a 375px: desbordaba 61px
       y el botón «›» seguía tapado. La condición real es «¿cabe?», que no
       coincide con ningún corte de media query, así que la regla es universal.
       Con `flex: 0 0 auto` + min-height, cuando cabe el pie mide 38px igual
       que antes; sólo crece cuando tiene que envolver. */
    flex: 0 0 auto;
    flex-wrap: wrap;
    row-gap: 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    /* el carril de la derecha deja el paginador fuera de los flotantes */
    padding: 4px var(--pm-fab-lane) 4px 10px;
    color: var(--ui26-blue-900);
    background: var(--ui26-blue-100);
    border: 1px solid rgba(var(--primary-rgb), .24);
    border-radius: 0 0 8px 8px;
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}
.ui-density-2026-footer__total,
.ui-density-2026-footer__pager span {
    white-space: nowrap;
    overflow: visible;
}
.ui-density-2026-footer__total {
    font-weight: 700;
}
.ui-density-2026-footer__pager {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ui-density-2026-footer__pager button {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(var(--primary-rgb), .28);
    border-radius: 4px;
    background: #fff;
    color: var(--ui26-blue-600);
    cursor: pointer;
}
.ui-density-2026-footer__pager button:disabled {
    opacity: .38;
    cursor: default;
}
.pm-feedback-button--ui-density-2026 {
    top: 8px;
    right: 64px;
    bottom: auto;
}
.ui-density-2026 .module-header {
    padding-right: 10px;
}
.ui-density-2026-overflow {
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
    z-index: 40;
}
.ui-density-2026-overflow > summary {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    list-style: none;
    border: 1px solid var(--ui26-blue-600);
    border-radius: 4px;
    background: var(--ui26-blue-600);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.ui-density-2026-overflow > summary::-webkit-details-marker { display: none; }
.ui-density-2026-overflow__menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 220px;
    max-width: min(360px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px;
    border: 1px solid rgba(var(--primary-rgb), .22);
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .20);
}
.ui-density-2026-overflow__menu > * {
    width: 100%;
    min-height: 30px;
    justify-content: flex-start;
    text-align: left;
}

/* -- UiDensidad2026 en la FICHA y el FORMULARIO -------------------------
   El vocabulario es UNO en las tres superficies: quien abre una ficha ve
   la misma cabecera, el mismo breadcrumb y los mismos botones que en la
   lista de la que viene. Lo que la ficha NO puede heredar es el layout de
   ALTURA COMPLETA (.ui-density-2026 = height:100% + flex column): la lista
   cabe en la pantalla por diseño, pero una ficha con muchos campos y
   pestañas, o un formulario largo, tienen que poder desplazarse. Ese es
   justo, y sólo, el resto que hace el modificador --flow. */
.ui-density-2026--flow {
    height: auto;
    min-height: 0;
    display: block;
}
/* Pareja del .page-body de la lista, con la misma corrección de
   especificidad: la clase se repite para ganarle al CSS *scoped* de Blazor
   (.page-body[b-xxxxx], 0-2-0), que se carga después de app.css. */
.page-body.page-body:has(> .ui-density-2026--flow) {
    padding: 12px 16px;
}
/* El corsé de la ficha: max-width 1200px centrado tiraba 336 px de 1536
   (22 % del ancho) mientras la lista de al lado usaba 1488. */
.detail-page.ui-density-2026,
.form-layout.ui-density-2026,
.global-service-page.ui-density-2026 {
    max-width: none;
    margin: 0;
    padding: 0;
}
/* La cabecera, la misma banda azul del módulo. En estas dos superficies la
   cabecera ya CONTIENE los botones (Volver / Editar / Guardar), así que la
   banda hace de cabecera y de barra de acciones a la vez. */
.ui-density-2026 .detail-header,
.ui-density-2026 .form-header {
    min-height: 30px;
    margin: 0;
    padding: 3px 10px;
    gap: 8px;
    display: flex;
    align-items: center;
    background: var(--ui26-blue-900);
    color: #fff;
    border-radius: 8px 8px 0 0;
}
.ui-density-2026 .detail-header .detail-title,
.ui-density-2026 .form-header h2 {
    flex: 1;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.35;
    color: inherit;
}
/* Los botones de la cabecera: el mismo tamaño que los de la barra del
   módulo (24 px), legibles sobre el azul. */
.ui-density-2026 .detail-header .btn-back,
.ui-density-2026 .detail-header .btn-primary,
.ui-density-2026 .form-header .btn-back {
    min-height: 24px;
    margin: 0;
    padding: 2px 10px;
    font-size: .78rem;
    line-height: 1;
    flex: 0 0 auto;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    cursor: pointer;
}
.ui-density-2026 .detail-header .btn-back:hover,
.ui-density-2026 .detail-header .btn-primary:hover,
.ui-density-2026 .form-header .btn-back:hover {
    background: rgba(255, 255, 255, .24);
    color: #fff;
}
/* Editar es la acción principal de la ficha: se mantiene destacada. */
.ui-density-2026 .detail-header .btn-primary {
    background: #fff;
    color: var(--ui26-blue-900);
    border-color: #fff;
    font-weight: 600;
}
.ui-density-2026 .detail-header .btn-primary:hover {
    background: var(--ui26-blue-100);
    color: var(--ui26-blue-900);
}
/* El breadcrumb hereda la banda de .ui-density-2026 .breadcrumb; aquí sólo
   se cierra el borde inferior, porque debajo no va una rejilla sino una
   tarjeta con su propio marco. */
.ui-density-2026--flow .breadcrumb {
    border-bottom: 1px solid rgba(var(--primary-rgb), .18);
}
.ui-density-2026--flow .detail-card,
.ui-density-2026--flow .entity-form-card,
.ui-density-2026--flow .entity-form {
    margin-top: 10px;
}
@media (max-width: 1100px) {
    .ui-density-2026 .e-grid .e-toolbar-item:not(.e-search-wrapper) .e-tbar-btn-text {
        display: none !important;
    }
    .pm-feedback-button--ui-density-2026 {
        top: 6px;
        right: 58px;
        bottom: auto;
        width: 40px;
        min-width: 40px;
        padding-inline: 0;
        overflow: hidden;
        font-size: 0;
    }
    .pm-feedback-button--ui-density-2026::before {
        content: "✏️";
        font-size: 16px;
    }
    .ui-density-2026 .module-header { padding-right: 10px; }
    /* el carril se mantiene: los flotantes también son fixed en móvil */
    .ui-density-2026-footer { padding-right: var(--pm-fab-lane); }
}
@media (max-width: 600px) {
    .ui-density-2026-footer {
        gap: 4px;
        /* padding-inline pisaría el carril: se declara lado a lado */
        padding-left: 5px;
        padding-right: var(--pm-fab-lane);
        font-size: .70rem;
    }
    .ui-density-2026-footer__pager { gap: 2px; }
    .ui-density-2026-footer__pager button {
        width: 24px;
        min-width: 24px;
        height: 24px;
    }
    .ui-density-2026-footer__pager button:first-child,
    .ui-density-2026-footer__pager button:last-child {
        display: none;
    }
}


/* +--- Design Kit - capa de overrides (overrides.css / visión IA) ---+ */
/* ===========================================================================
   Design Kit · capa de OVERRIDES de la suite Monet
   ---------------------------------------------------------------------------
   CSS crudo que el generador anexa al FINAL de app.css (gana por cascada).
   Cada bloque va entre marcadores de superficie para que el loop de visión IA
   pueda reemplazar solo ese bloque sin tocar el resto.

   Pasada de visión Claude (12-jun): bloques consolidados (se eliminaron los
   duplicados de shell/list de la pasada anterior) + hallazgos nuevos:
   login flotante claro, fila seleccionada azul, estados a color pleno,
   paginador centrado, diálogo Ok/Cancel del legado.
   =========================================================================== */

/* >>> surface: login >>> */
/* Ref: login.png — página CLARA con tarjeta hero oscura flotante (izq) y
   card de login compacta flotante (der). El generado era split full-bleed:
   el padding+gap del shell convierte ambos paneles en tarjetas flotantes. */

.login-shell {
    background: #eef1f5;
    padding: 28px;
    gap: 28px;
}

/* Panel de marca → tarjeta hero redondeada; texto abajo-izquierda como el diseño */
.login-brand {
    border-radius: 18px;
    box-shadow: 0 14px 40px rgba(13, 31, 60, .28);
    align-items: flex-start;
    justify-content: flex-end;
    text-align: left;
    gap: 10px;
    padding: 40px 44px;
    background: linear-gradient(135deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 50%, #0d1f3c 100%);
}
.login-brand::before {
    background: radial-gradient(circle at 30% 70%, rgba(var(--primary-rgb),.30) 0%, transparent 60%);
}
.login-brand-sub {
    text-align: left;
    max-width: 420px;
    font-size: .95rem;
}

/* Lado derecho: transparente (la página es clara); la card es la que flota */
.login-side {
    background: transparent;
    flex: 0 0 460px;
}
.login-card {
    background: var(--surface);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .12);
    border: 1px solid #e5e9f0;
    padding: 34px 30px 28px;
    max-width: 380px;
}

/* Logo: usa el PNG del kit (logo-lockup = icono + texto).
   Si no hay imagen, fallback a texto con diamante verde. */
.login-brand-logo {
    display: flex; align-items: center; gap: 12px;
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.5px;
}
.login-brand-logo-img {
    height: 42px;
    width: auto;
    object-fit: contain;
}
.login-brand-logo-fallback {
    font-size: 1.8rem;
    color: #22c55e;
    text-shadow: 0 0 20px rgba(34,197,94,.4);
}

/* Botón de login: variable primary, no hardcode #0066CC */
.login-btn {
    background: var(--primary);
    border-radius: var(--radius);
    transition: background .2s, box-shadow .2s;
}
.login-btn:hover:not(:disabled) {
    background: var(--primary-dark);
    box-shadow: 0 4px 14px rgba(var(--primary-rgb),.3);
}

/* Input focus: var(--primary) en vez de #0066CC */
.login-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.15);
}

.login-subtitle {
    font-size: .85rem;
    color: var(--text-muted);
    letter-spacing: .01em;
}

/* Customer name en login (multi-tenant) */
.login-brand-customer {
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(255,255,255,.85);
    margin-top: 6px;
    letter-spacing: -.1px;
}

/* Badge "ERP Suite" */
.login-brand-badge {
    background: rgba(var(--primary-rgb),.25);
    border: 1px solid rgba(var(--primary-rgb),.35);
    font-weight: 600;
    letter-spacing: .03em;
}

/* >>> surface: login <<< */


/* >>> surface: shell >>> */
/* Ref: shell.png — topbar clara (token layout.topbarStyle) + sidebar navy.
   Rail de iconos ACTIVO (layout.sidebar=rail, Codex R13) — DockSize 64px. */

.sb-brand {
    gap: 10px;
    padding: 16px 16px;
    min-height: 56px;
}
.sb-brand-icon {
    font-size: 1.3rem;
    width: 28px;
    text-align: center;
    line-height: 1;
}
.sb-brand-name {
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: -.3px;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

.topbar {
    height: 50px;
    padding: 0 16px;
    gap: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.10);
}
.topbar-title {
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: -.2px;
}
.topbar-customer {
    font-size: .68rem;
    color: rgba(255,255,255,.65);
    font-weight: 500;
    letter-spacing: .02em;
}
.topbar-search {
    min-width: 220px;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: .8rem;
}

.sb-footer {
    padding: 10px 16px;
    font-size: .72rem;
}

/* ── Colapso del sidebar a prueba de carreras (defecto 12-jun) ──────────
   El estado visual lo manda la clase e-close de Syncfusion (siempre llega);
   los @if(IsExpanded) de Blazor pueden llegar TARDE si el toggle se hace
   durante una carga → textos recortados y footer fantasma. Regla: con
   e-close, SOLO iconos — pase lo que pase con el render del servidor. */
.e-sidebar.e-dock.e-close .sb-label,
.e-sidebar.e-dock.e-close .sb-brand-name,
.e-sidebar.e-dock.e-close .sb-footer,
.e-sidebar.e-dock.e-close .sb-user-name,
.e-sidebar.e-dock.e-close .sb-logout,
.e-sidebar.e-dock.e-close .fly-group-row > .fly-caret {
    display: none !important;
}
.e-sidebar.e-dock.e-close .fly-group-row,
.e-sidebar.e-dock.e-close .sb-link {
    justify-content: center !important;
}

/* El margen del contenido NO depende del style inline de Syncfusion
   (un re-render de Blazor lo pierde y el contenido queda DEBAJO del rail).
   Con !important el CSS gana al inline y el layout es determinista. */
@media (min-width: 900px) {
    /* 64px = DockSize del modo rail (Codex R13); el kit Monet usa rail */
    .app-shell:has(.e-sidebar.e-dock.e-close) > .main-content {
        margin-left: 64px !important;
    }
    .app-shell:has(.e-sidebar.e-dock.e-open) > .main-content {
        margin-left: 240px !important;
    }
    .main-content.e-content-animation {
        transition: margin-left .25s ease;
    }
}

/* Portal / module cards (del loop anterior — conservado) */
.module-grid, .apps-grid {
    gap: 20px;
}
.portal-modules .card, [class*='portal'] .card {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    padding: 28px 20px;
    text-align: center;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.2s, transform 0.2s;
}
.portal-modules .card:hover, [class*='portal'] .card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}
.portal-modules .card .card-title, [class*='portal'] .card .card-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
    margin-top: 12px;
    text-align: center;
}
.portal-modules .card .card-subtitle,
.portal-modules .card .card-description,
[class*='portal'] .card .card-subtitle,
[class*='portal'] .card .card-description {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    margin-top: 4px;
}
.portal-modules .card img, .portal-modules .card .module-icon,
[class*='portal'] .card img, [class*='portal'] .card .module-icon {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 8px;
}
.portal-modules, [class*='portal-modules'] {
    background: #f5f6fa;
    padding: 24px;
}

/* >>> surface: shell <<< */


/* >>> surface: home >>> */
/* Ref: home.png — bienvenida clara con cards de acceso */

.home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    padding: 0;
}
.home-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    transition: box-shadow .2s, transform .2s;
    cursor: pointer;
}
.home-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.home-card-icon {
    font-size: 1.6rem;
    color: var(--primary);
    margin-bottom: 10px;
}
.home-card-title {
    font-weight: 700;
    font-size: .95rem;
    color: var(--text);
    margin-bottom: 4px;
}
.home-card-desc {
    font-size: .8rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 16px;
}
.stat-card-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    background: rgba(var(--primary-rgb),.10);
    color: var(--primary);
}
.stat-card-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.1;
}
.stat-card-label {
    font-size: .75rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* >>> surface: home <<< */


/* >>> surface: list >>> */
/* Ref: list.png — grid denso del legado: header gris centrado, filas mint
   alternadas, fila SELECCIONADA azul con texto blanco, paginador centrado. */

.breadcrumb {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
    gap: 4px;
}
.page-title, .list-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

/* Densidad: filas compactas (~34px como el legado) */
.e-grid .e-row {
    min-height: 34px;
}
.e-grid .e-row td {
    font-size: 13px;
    padding: 4px 8px;
    border-bottom: 1px solid #e4e8ec;
}

/* Filas alternadas mint/honeydew (del diseño de Isel) */
.e-grid .e-row.e-altrow td {
    background-color: #f0faf4;
}

/* Header: gris-azulado, bold, centrado, borde inferior marcado */
.e-grid .e-headercell {
    background: #e8eaf0 !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    padding: 6px 8px !important;
    border-bottom: 2px solid #b0b8c8 !important;
    text-align: center !important;
}
.e-grid .e-gridheader {
    border-bottom: 1px solid var(--border) !important;
}

/* Fila seleccionada: azul pleno con texto blanco (como el legado) */
.e-grid td.e-selectionbackground,
.e-grid .e-row.e-selectionbackground td {
    background: var(--primary) !important;
    color: #fff !important;
}
.e-grid .e-row td.e-selectionbackground a,
.e-grid .e-row td.e-selectionbackground .e-icons {
    color: #fff !important;
}

/* Toolbar del grid */
.e-grid .e-toolbar {
    background: #f8f9fb !important;
    padding: 6px 8px !important;
}
.e-grid .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn {
    border-radius: 6px !important;
    font-size: .8rem;
    padding: 4px 10px !important;
}

/* Paginador: centrado, página activa con primary (como el legado).
   El msgbar ("1 of N pages") se ancla a la derecha en absoluto para que
   el contenedor de páginas quede realmente centrado. */
.e-grid .e-pager {
    position: relative;
    text-align: center;
}
.e-grid .e-pager .e-pagercontainer {
    float: none !important;
    display: inline-flex !important;
    margin: 0 auto;
}
.e-grid .e-pager .e-parentmsgbar {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    float: none !important;
    padding: 0;
}
.e-pager .e-currentitem,
.e-pager .e-currentpage,
.e-grid .e-pager .e-active {
    background: var(--primary) !important;
    color: #fff !important;
    border-radius: 4px !important;
}

/* Action bar: botones compactos azul sólido (el diseño los muestra todos primary).
   Con la agrupación "Más acciones" (Codex R13) quedarán 6-8 visibles. */
.action-bar {
    gap: 6px;
    margin: 8px 0 12px;
}
.action-bar .btn-primary,
.action-bar .btn-secondary,
.action-bar-btn {
    padding: 4px 12px;
    font-size: 13px;
    border-radius: 4px;
}
.action-bar .btn-secondary:not(:disabled) {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.action-bar .btn-secondary:not(:disabled):hover {
    background: var(--primary-dark);
}
.action-bar .btn-secondary:disabled {
    background: #eceff3;
    color: #9aa4b2;
    border-color: #dde2e9;
}

/* Column chooser */
.e-grid .e-ccdlg {
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-md) !important;
}

/* >>> surface: list <<< */


/* >>> surface: detail >>> */
/* Ref: detail.png — detalle denso del legado (labels arriba, valores con peso) */

.detail-card {
    padding: 24px;
    gap: 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.detail-title {
    font-size: 1.15rem;
    font-weight: 700;
}

/* Valores del detalle con presencia (el capture mostraba labels sin valor visible) */
.detail-field-value, .detail-value {
    font-weight: 600;
    color: var(--text);
}

details.svc-section {
    border-radius: var(--radius);
    margin: 16px 0;
}
.svc-summary {
    padding: 12px 16px;
    font-size: .82rem;
}
.svc-buttons {
    padding: 14px 16px 16px;
    gap: 10px;
}
.btn-service {
    padding: 6px 14px;
    font-size: .82rem;
    border-radius: var(--radius);
}

/* >>> surface: detail <<< */


/* >>> surface: filter >>> */
/* Ref: filter.png — consulta del legado: panel "Opciones de búsqueda" con
   label-arriba, y grid con FILAS A COLOR PLENO por estado + leyenda de chips.
   Los colores suaves del default no se leen como el legado → color pleno. */

/* Estados: color PLENO del legado pero SOLO EN LA CELDA del Status
   (feedback Ignacio 2-jul: "todos esos registros amarillos juntos me están matando" —
   pidió acotar el color a la columna del estado, como decisión estética final).
   Vía :has() sobre el status-badge de la celda — verificado que en 33.1.44 las
   clases del RowDataBound no siempre llegan al DOM, el :has() no falla. */
.e-grid .e-row td:has(.status-badge--warn) { background-color: #ffe94d !important; color: #4a3c00 !important; }
.e-grid .e-row td:has(.status-badge--ok)   { background-color: #97d784 !important; color: #103c10 !important; }
.e-grid .e-row td:has(.status-badge--bad)  { background-color: #f25c5c !important; color: #fff !important; }
.e-grid .e-row:hover td:has(.status-badge--warn) { background-color: #f5dd33 !important; }
.e-grid .e-row:hover td:has(.status-badge--ok)   { background-color: #86cc72 !important; }
.e-grid .e-row:hover td:has(.status-badge--bad)  { background-color: #e04848 !important; }
/* El badge dentro de la celda teñida se funde con ella */
.e-grid .e-row td:has(.status-badge--warn) .status-badge,
.e-grid .e-row td:has(.status-badge--ok) .status-badge,
.e-grid .e-row td:has(.status-badge--bad) .status-badge {
    background: transparent !important;
    border-color: transparent !important;
    color: inherit !important;
    font-weight: 700;
}
/* La selección azul gana sobre el tinte de estado (como el legado).
   IMPORTANTE: las filas se tiñen vía :has(.status-badge--*) (alta especificidad, 0-4-1) y
   ese selector solo pone background. Para que la selección (azul + texto blanco) gane hay que
   igualar/superar esa especificidad — por eso se incluye :has(.status-badge) aquí. Sin esto,
   una fila de estado seleccionada quedaba con texto BLANCO sobre fondo CLARO = ilegible. */
.e-grid .e-row.row-status--warn td.e-selectionbackground,
.e-grid .e-row.row-status--ok td.e-selectionbackground,
.e-grid .e-row.row-status--bad td.e-selectionbackground,
.e-grid .e-row:has(.status-badge) td.e-selectionbackground,
.e-grid .e-row td.e-selectionbackground {
    background: var(--primary) !important;
    color: #fff !important;
}

/* Blindaje de legibilidad (el texto blanco SOLO acompaña al fondo azul de selección): */
/* 1) Celda enfocada/activa SIN fondo de selección (solo el recuadro de foco) → texto oscuro. */
.e-grid .e-rowcell.e-active:not(.e-selectionbackground),
.e-grid .e-rowcell.e-focused:not(.e-selectionbackground),
.e-grid .e-rowcell.e-focus:not(.e-selectionbackground) {
    color: #1f2937 !important;
}
/* 2) Estados sin color propio (neutral/info): texto oscuro legible en base y hover. */
.e-grid .e-row:has(.status-badge--neutral) td:not(.e-selectionbackground),
.e-grid .e-row:has(.status-badge--info) td:not(.e-selectionbackground) {
    color: #1f2937 !important;
}

/* Leyenda de chips: mismos colores plenos */
.status-legend__chip--warn { background: #ffe94d; border-color: #d9c52e; color: #4a3c00; }
.status-legend__chip--ok   { background: #97d784; border-color: #6fb95c; color: #103c10; }
.status-legend__chip--bad  { background: #f25c5c; border-color: #d23f3f; color: #fff; }
.status-legend__chip--neutral { background: #fff; border-color: #cbd5e1; color: var(--text); }

/* Panel de filtros de consulta: card CLARA con campos label-arriba.
   !important: la página de consulta emite un <style> propio con un panel
   DARK hardcodeado (#1e1e2e, resto de tema oscuro) que gana por orden de
   documento — Codex R13 lo corrige en el generador; esto lo tapa ya. */
.consulta-filtros {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 14px 16px !important;
    box-shadow: var(--shadow);
}
.cf-label {
    color: var(--text-muted) !important;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ro-badge {
    background: #eef2f7 !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border);
}

.filter-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
}
.filter-panel h3 {
    font-size: .9rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.filter-field {
    display: flex; flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}
.filter-field label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.filter-field input,
.filter-field select {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: .85rem;
    font-family: inherit;
    color: var(--text);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.filter-field input:focus,
.filter-field select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.12);
}
.filter-actions {
    display: flex; gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.nl-search-bar {
    padding: 8px 12px;
    gap: 6px;
    border-radius: var(--radius);
}
.nl-input input {
    font-size: .88rem;
    font-family: inherit;
}

/* >>> surface: filter <<< */


/* >>> surface: action >>> */
/* Ref: action.png — el "action" del legado es el DIÁLOGO del proceso (Crear/
   Someter): título bold + X, secciones tipo fieldset, Ok azul + Cancel rojo
   CENTRADOS al pie. Se estiliza el SfDialog generado. */

/* Diálogo: bordes y header del legado */
.e-dialog {
    border-radius: 10px !important;
    box-shadow: 0 18px 50px rgba(15,23,42,.25) !important;
}
.e-dialog .e-dlg-header-content {
    border-bottom: 1px solid var(--border) !important;
    padding: 12px 18px !important;
}
.e-dialog .e-dlg-header {
    font-size: 1rem !important;
    font-weight: 700 !important;
}
/* Pie del diálogo: botones centrados como el legado (Ok azul / Cancel rojo) */
.e-dialog .e-footer-content {
    text-align: center !important;
    padding: 12px 18px 16px !important;
}
.e-dialog .e-footer-content .e-btn.e-primary {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    border-radius: 6px !important;
    padding: 6px 22px !important;
}
.e-dialog .e-footer-content .e-btn.btn-cancel,
.e-dialog .e-footer-content .e-btn.e-dlg-cancel {
    background: #e0493f !important;
    border-color: #e0493f !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 6px 18px !important;
}

/* Botón de acción principal */
.btn-process {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 10px 22px;
    border-radius: var(--radius);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
    display: inline-flex; align-items: center; gap: 8px;
}
.btn-process:hover:not(:disabled) {
    background: var(--primary-dark);
    box-shadow: 0 4px 14px rgba(var(--primary-rgb),.3);
}
.btn-process:disabled {
    background: #cbd5e1;
    color: #64748b;
    cursor: not-allowed;
}

.process-steps {
    display: flex; flex-direction: column;
    gap: 2px;
}
.process-step {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: .85rem;
    cursor: pointer;
    transition: background .12s;
    color: var(--text-muted);
}
.process-step:hover { background: rgba(var(--primary-rgb),.04); }
.process-step.active {
    background: rgba(var(--primary-rgb),.08);
    color: var(--primary);
    font-weight: 600;
}
.process-step.done {
    color: var(--success);
}
.process-step-icon {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem;
    border: 2px solid currentColor;
}

.action-result {
    margin-top: 16px;
    padding: 14px 18px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: .88rem;
}
.action-result--ok {
    background: #dcfce7;
    border: 1px solid #86efac;
    color: #166534;
}
.action-result--error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

/* >>> surface: action <<< */


/* >>> surface: report >>> */
/* Ref: report.png — listado de reportes + visor PDF */

.reports-content {
    gap: 20px;
}
.report-card {
    padding: 10px 14px;
    border-radius: var(--radius);
    transition: box-shadow .15s, transform .15s;
}
.report-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateX(2px);
}
.report-card-name {
    font-size: .88rem;
}
.btn-report-pdf {
    padding: 5px 12px;
    font-size: .8rem;
    border-radius: var(--radius);
}
.reports-search {
    min-width: 300px;
    padding: 7px 12px;
    border-radius: var(--radius);
}

/* >>> surface: report <<< */


/* >>> surface: form >>> */
/* Ref: form.png (pendiente de Isel) + action.png — el form popup hereda el
   estilo de diálogo del bloque action. Campos con focus ring primary. */

.entity-form {
    padding: 20px;
    gap: 14px 20px;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.12);
}
.form-actions .btn-primary {
    padding: 8px 18px;
    font-size: .88rem;
}

/* >>> surface: form <<< */

/* >>> CODEX31 UiDensidad2026 >>> */
/*
 * Capa OVERRIDES del rediseño de densidad universal.
 * WebGenerator solamente conserva este bloque cuando CodeGenOptions.UiDensidad2026=true.
 */
/* Los tokens se declaran en .ui-density-2026 a secas, NO en .module-layout: desde el 3-ago el
   rediseño vive también en la ficha, el formulario y las transacciones globales. Acotados a la
   lista, esas tres superficies caían al azul de la capa base del WebGenerator (--ui26-*) y la
   suite mostraba DOS azules distintos según la pantalla. */
.ui-density-2026 {
    --ui-density-blue-900: #123b67;
    --ui-density-blue-600: #2f6fa9;
    --ui-density-blue-200: #d8e8f6;
    --ui-density-blue-100: #eef6fc;
    min-height: 0;
}

/* .module-header es de la lista; .detail-header y .form-header son la MISMA banda en la ficha,
   el formulario y las transacciones globales. Un solo vocabulario. */
.ui-density-2026 .module-header,
.ui-density-2026 .detail-header,
.ui-density-2026 .form-header {
    height: 30px;
    min-height: 30px;
    padding: 3px 10px;
    border-radius: 0;
    background: var(--ui-density-blue-900);
    color: #fff;
}

.module-layout.ui-density-2026 .breadcrumb,
.module-layout.ui-density-2026 .module-actions,
.module-layout.ui-density-2026 .nl-query-bar,
.module-layout.ui-density-2026 .list-search-row {
    min-height: 26px;
    margin: 0;
    padding: 2px 8px;
    border-radius: 0;
}

/* El breadcrumb, igual en las cuatro superficies. Ojo: el fondo y el texto van JUNTOS —
   este parche acotado a .module-layout era justo lo que escondía que la regla base pintaba
   azul CLARO con texto blanco (contraste 1,1:1). */
.ui-density-2026 .breadcrumb {
    background: var(--ui-density-blue-600);
    color: #fff;
}

.ui-density-2026 .breadcrumb .bc-link,
.ui-density-2026 .breadcrumb .bc-current,
.ui-density-2026 .breadcrumb .bc-sep,
.ui-density-2026 .breadcrumb .bc-volver {
    color: #fff;
}

.ui-density-2026 .breadcrumb .bc-link:hover {
    color: #fff;
}

.module-layout.ui-density-2026 .module-actions {
    background: var(--ui-density-blue-200);
}

.module-layout.ui-density-2026 .nl-query-bar,
.module-layout.ui-density-2026 .list-search-row,
.module-layout.ui-density-2026 > .module-main > .search-panel {
    background: var(--ui-density-blue-100);
}

.module-layout.ui-density-2026 .breadcrumb {
    height: 26px;
}

.module-layout.ui-density-2026 .action-bar {
    min-height: 28px;
    padding: 2px 8px;
}

.module-layout.ui-density-2026 .ui-density-2026-grid-frame {
    min-height: 220px;
}

/* La tabla NO se estira (ver la nota de la capa base). Con una sola fila, height:100%
   hacia que esa fila midiera 407 px en vez de 31. Quien llena el marco es .e-content. */
.ui-density-2026 .e-grid .e-gridcontent .e-table {
    height: auto !important;
}

.module-layout.ui-density-2026 .e-grid .e-toolbar {
    height: 32px !important;
    min-height: 32px !important;
    padding: 2px 6px !important;
    flex-wrap: nowrap !important;
}

.module-layout.ui-density-2026 .e-grid .e-gridheader .e-columnheader,
.module-layout.ui-density-2026 .e-grid .e-headercell {
    height: 42px !important;
}

.module-layout.ui-density-2026 .e-grid .e-headercell {
    padding: 2px 6px !important;
    background: var(--ui-density-blue-200) !important;
}

.module-layout.ui-density-2026 .e-grid .e-rowcell {
    height: 30px !important;
    padding: 3px 8px !important;
    line-height: 22px !important;
}

.module-layout.ui-density-2026 .e-grid .e-altrow {
    background: var(--ui-density-blue-100) !important;
}

/* CARRIL DE LOS FLOTANTES (segunda capa; la base la emite WebGenerator).
   .ai-fab y .pm-feedback-button son position:fixed en la esquina inferior derecha
   del viewport y ocupan sus 84px de la derecha. Medido el 30-jul: tapaban los
   botones «›» y «»» del paginador y el botón «Cargar más». Se reserva el carril
   en las barras inferiores en vez de recolocar cada botón.

   El ancho es un TOKEN DEL DESIGN KIT: Design/Monet/kit.json → tokens.layout.fabLane,
   que el generador emite como --pm-fab-lane en el :root del tema. AQUÍ SÓLO SE
   CONSUME: no se redeclara, o las dos capas derivarían. El fallback 96px es por si
   esta hoja se usa suelta, fuera de una app generada. */
.page-cap-banner {
    padding-right: var(--pm-fab-lane, 96px) !important;
}

.module-layout.ui-density-2026 .ui-density-2026-footer {
    min-height: 38px;
    background: var(--ui-density-blue-900);
    color: #fff;
    padding-right: var(--pm-fab-lane, 96px);
    /* Envolver, NO desbordar: el carril es sólo relleno, y si el contenido no cabe los
       hijos del flex se salen y el paginador vuelve a meterse debajo del flotante
       (medido el 30-jul a 375px: desbordaba 61px). La condición real es «¿cabe?», que
       no coincide con ningún corte de media query: la regla va sin breakpoint. */
    flex: 0 0 auto;
    flex-wrap: wrap;
    row-gap: 2px;
}

.module-layout.ui-density-2026 .ui-density-2026-footer button {
    min-width: 28px;
    min-height: 26px;
}

.module-layout.ui-density-2026 .ui-density-2026-overflow__menu {
    border-top: 3px solid var(--ui-density-blue-600);
}

.pm-feedback-button--ui-density-2026 {
    z-index: 1500;
    top: 8px;
    right: 64px;
    bottom: auto;
}

@media (max-width: 600px) {
    .pm-feedback-button--ui-density-2026 {
        top: 6px;
        right: 58px;
    }

    .module-layout.ui-density-2026 .ui-density-2026-footer {
        gap: 4px;
        /* padding-inline pisaría el carril: se declara lado a lado */
        padding-left: 5px;
        padding-right: var(--pm-fab-lane, 96px);
        font-size: .70rem;
    }

    .module-layout.ui-density-2026 .ui-density-2026-footer__pager {
        gap: 2px;
    }

    .module-layout.ui-density-2026 .ui-density-2026-footer__pager button {
        width: 24px;
        min-width: 24px;
        height: 24px;
        min-height: 24px;
    }

    .module-layout.ui-density-2026 .ui-density-2026-footer__pager button:first-child,
    .module-layout.ui-density-2026 .ui-density-2026-footer__pager button:last-child {
        display: none;
    }
}
/* <<< CODEX31 UiDensidad2026 <<< */
/* +--- fin overrides ---+ */