@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400..700,0..1,-50..200&display=swap');

/* Intranet UI shared components */

:root,
html[data-theme='light'] {
    color-scheme: light;
    --theme-ink-900: #0f2a43;
    --theme-ink-700: #2d4c66;
    --theme-line: #d4e0ea;
    --theme-line-soft: #d8e5ef;
    --theme-surface: #ffffff;
    --theme-surface-soft: #f6fbff;
    --theme-surface-subtle: #f5f5f5;
    --theme-page-bg-gradient: radial-gradient(circle at 4% 4%, rgba(165, 203, 228, 0.28), transparent 34%), linear-gradient(145deg, #eaf2f8, #f7fbff 45%, #ecf4fa);
    --theme-auth-bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    --theme-accent: #0f7ccc;
    --theme-accent-2: #1b5ea7;
    --theme-accent-soft: #0b6aa5;
    --theme-focus: #1a8de0;
    --theme-ok: #0f7a58;
    --theme-warn: #9b321f;

    --theme-success-bg: #d4edda;
    --theme-success-border: #c3e6cb;
    --theme-success-text: #155724;
    --theme-danger-bg: #f8d7da;
    --theme-danger-border: #f5c6cb;
    --theme-danger-text: #721c24;
    --theme-yellow-bg: #fff3cd;
    --theme-yellow-border: #e6cc80;
    --theme-yellow-text: #7a5b00;
    --theme-info-bg: #d1ecf1;
    --theme-info-border: #bee5eb;
    --theme-info-text: #0c5460;

    --theme-auth-primary: #667eea;
    --theme-auth-secondary: #764ba2;
    --theme-text-neutral: #333333;
    --theme-text-muted: #999999;

    --ink-900: var(--theme-ink-900);
    --ink-700: var(--theme-ink-700);
    --line: var(--theme-line);
    --surface: var(--theme-surface);
    --surface-soft: var(--theme-surface-soft);
    --ok: var(--theme-ok);
    --warn: var(--theme-warn);
    --focus: var(--theme-focus);
    --accent: var(--theme-accent);
    --accent-2: var(--theme-accent-2);
    --bg: #f2f7fb;
    --card: var(--theme-surface);
    --ink: var(--theme-ink-900);
    --ink-soft: var(--theme-ink-700);
    --line-soft: var(--theme-line-soft);

    --ncs-blue-900: #062848;
    --ncs-blue-700: #0b4e82;
    --ncs-blue-500: #1274b8;
    --ncs-cyan-200: #a5e4ff;
    --ncs-cyan-300: #5ac7ff;

    /* Compatibility aliases enforced for legacy per-page variables */
    --text-strong: var(--theme-ink-900) !important;
    --text-soft: var(--theme-ink-700) !important;
    --surface-edge: var(--theme-line-soft) !important;
    --error: var(--theme-danger-text) !important;
    --success: var(--theme-success-text) !important;
}

html[data-theme='dark'] {
    color-scheme: dark;
    --theme-ink-900: #e8f1fb;
    --theme-ink-700: #b8c9dc;
    --theme-line: #35516b;
    --theme-line-soft: #486987;
    --theme-surface: #122235;
    --theme-surface-soft: #1a2f47;
    --theme-surface-subtle: #24384f;
    --theme-page-bg-gradient: radial-gradient(circle at 7% 5%, rgba(47, 94, 137, 0.35), transparent 33%), linear-gradient(145deg, #0a1726, #102237 48%, #15314d);
    --theme-auth-bg-gradient: linear-gradient(135deg, #243b7d 0%, #422962 100%);

    --theme-accent: #57a8e6;
    --theme-accent-2: #3d91d0;
    --theme-accent-soft: #4e9dd9;
    --theme-focus: #74c3ff;
    --theme-ok: #5fcf9d;
    --theme-warn: #ff8f70;

    --theme-success-bg: rgba(35, 88, 62, 0.6);
    --theme-success-border: #3f8f67;
    --theme-success-text: #b8f2d3;
    --theme-danger-bg: rgba(99, 41, 48, 0.6);
    --theme-danger-border: #b9646d;
    --theme-danger-text: #ffd2d6;
    --theme-yellow-bg: rgba(112, 84, 22, 0.55);
    --theme-yellow-border: #b8962f;
    --theme-yellow-text: #ffe9a8;
    --theme-info-bg: rgba(25, 66, 90, 0.6);
    --theme-info-border: #5b9ac1;
    --theme-info-text: #c6ebff;

    --theme-auth-primary: #7fa7ff;
    --theme-auth-secondary: #a57ed6;
    --theme-text-neutral: #dbe8f7;
    --theme-text-muted: #9fb4cb;

    --bg: #0f1f30;
    --card: var(--theme-surface);
    --ncs-blue-900: #12263d;
    --ncs-blue-700: #1a3a58;
    --ncs-blue-500: #25517a;
    --ncs-cyan-200: #70b8dd;
    --ncs-cyan-300: #7bd0f6;

    /* Compatibility aliases enforced for legacy per-page variables */
    --text-strong: var(--theme-ink-900) !important;
    --text-soft: var(--theme-ink-700) !important;
    --surface-edge: var(--theme-line-soft) !important;
    --error: var(--theme-danger-text) !important;
    --success: var(--theme-success-text) !important;
}

body {
    color: var(--theme-ink-900);
}

/* Global form and card defaults to reduce per-page style duplication */
input,
select,
textarea {
    color: var(--theme-ink-900);
}

input,
select,
textarea,
button {
    font: inherit;
}

input,
select,
textarea {
    border-color: var(--theme-line-soft);
    background: var(--theme-surface-soft);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--theme-focus);
}

/* Standardized opt-in form system to keep controls aligned across modules */
.ui-form-standard {
    --ui-control-height: 2.75rem;
    --ui-control-radius: 10px;
    --ui-control-padding-x: 0.75rem;
    --ui-control-padding-y: 0.68rem;
    --ui-form-gap: 0.85rem;
}

.ui-form-standard .ui-field-grid,
.ui-form-standard .form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ui-form-gap);
    align-items: start;
}

.ui-form-standard .ui-field,
.ui-form-standard .field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.ui-form-standard .ui-label,
.ui-form-standard label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--theme-ink-700);
}

.ui-form-standard :is(input:not([type='hidden']):not([type='checkbox']):not([type='radio']):not([type='file']), select, textarea, .ui-control) {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: var(--ui-control-height);
    min-height: var(--ui-control-height);
    padding: var(--ui-control-padding-y) var(--ui-control-padding-x);
    border: 1px solid var(--theme-line-soft);
    border-radius: var(--ui-control-radius);
    background: var(--theme-surface-soft);
    color: var(--theme-ink-900);
    font: inherit;
    line-height: 1.3;
}

.ui-form-standard select,
.ui-form-standard .ui-control-select {
    height: var(--ui-control-height);
    line-height: 1.3;
}

.ui-form-standard textarea,
.ui-form-standard .ui-control-textarea {
    height: auto;
    min-height: calc(var(--ui-control-height) * 2.25);
    resize: vertical;
}

.ui-form-standard :is(input:not([type='hidden']):not([type='checkbox']):not([type='radio']):not([type='file']), select, textarea, .ui-control):focus {
    outline: none;
    border-color: var(--theme-focus);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-focus) 22%, transparent);
    background: var(--theme-surface);
}

.ui-form-standard :is(input:not([type='hidden']):not([type='checkbox']):not([type='radio']):not([type='file']), select, textarea, .ui-control):disabled {
    opacity: 0.78;
    cursor: not-allowed;
}

.ui-form-standard .ui-actions,
.ui-form-standard .actions {
    margin-top: 0.95rem;
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
}

.ui-form-standard .btn,
.ui-form-standard .ui-btn {
    min-height: calc(var(--ui-control-height) - 0.2rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

@media (max-width: 980px) {
    .ui-form-standard .ui-field-grid,
    .ui-form-standard .form-grid {
        grid-template-columns: 1fr;
    }
}

.ui-surface {
    background: var(--theme-surface);
    border: 1px solid var(--theme-line-soft);
    color: var(--theme-ink-900);
}

.ui-soft {
    background: var(--theme-surface-soft);
    border: 1px solid var(--theme-line-soft);
    color: var(--theme-ink-700);
}

.ui-muted {
    color: var(--theme-ink-700);
}

.theme-toggle-inline,
.theme-toggle-floating {
    cursor: pointer;
}

.theme-toggle-inline {
    border-radius: 999px;
    padding: 0.34rem 0.62rem;
    gap: 0.42rem;
}

/* Selector claro/oscuro como interruptor deslizante (no boton) */
.theme-toggle-inline .theme-toggle-track {
    flex: 0 0 auto;
    background: var(--theme-line-soft);
    border-color: var(--theme-line);
}

.theme-toggle-inline .theme-toggle-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.58rem;
    line-height: 1;
}

.theme-toggle-inline.is-dark .theme-toggle-thumb {
    transform: translateX(1.13rem);
}

.theme-toggle-inline .theme-toggle-icon,
.theme-toggle-inline .theme-toggle-label {
    transition: transform 120ms ease, opacity 120ms ease;
}

.theme-toggle-inline.is-dark .theme-toggle-icon {
    transform: rotate(14deg);
}

.theme-toggle-floating {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 995;
    border: 1px solid var(--theme-line-soft);
    background: var(--theme-surface);
    color: var(--theme-ink-900);
    border-radius: 999px;
    padding: 0.45rem 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    box-shadow: 0 10px 18px rgba(10, 39, 66, 0.16);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
}

.theme-toggle-track {
    width: 2.35rem;
    height: 1.25rem;
    border-radius: 999px;
    border: 1px solid var(--theme-line-soft);
    background: var(--theme-surface-soft);
    position: relative;
    display: inline-flex;
    align-items: center;
}

.theme-toggle-thumb {
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-2));
    transform: translateX(0.13rem);
    transition: transform 160ms ease;
}

.theme-toggle-floating.is-dark .theme-toggle-thumb {
    transform: translateX(1.13rem);
}

.theme-toggle-floating:hover,
.theme-toggle-inline:hover {
    border-color: var(--theme-accent);
}

@media (max-width: 640px) {
    .theme-toggle-floating {
        left: 0.75rem;
        bottom: 0.75rem;
        padding: 0.4rem 0.62rem;
    }
}

.hero {
    margin-bottom: 1rem;
    border-radius: 18px;
    padding: 1rem 1.2rem;
    background: linear-gradient(180deg, var(--theme-surface), var(--theme-surface-soft));
    border: 1px solid var(--theme-line);
    box-shadow: 0 10px 24px rgba(17, 59, 91, 0.08);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
}

.hero h2 {
    font-size: clamp(1.35rem, 1rem + 0.8vw, 1.8rem);
    line-height: 1.2;
    margin: 0;
    color: var(--theme-ink-900);
    text-align: center;
    min-width: 0;
    overflow-wrap: break-word;
}

.hero-nav-left,
.hero-nav-right {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.hero-nav-right {
    justify-content: flex-end;
}

.hero-link {
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
    padding: 0.46rem 0.62rem;
    border-radius: 10px;
    border: 1px solid var(--theme-line);
    background: var(--theme-surface-soft);
    color: var(--theme-ink-900);
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
}

.hero-link-form {
    display: inline-flex;
    margin: 0;
}

/* Acceso reducido a solo icono (p. ej. selector de temas) */
.hero-link--compact {
    padding: 0.3rem 0.42rem;
    min-width: 1.9rem;
    justify-content: center;
}

.hero-link--compact .hero-link-label {
    display: none;
}

.hero-link:hover {
    border-color: var(--theme-accent);
    background: var(--theme-surface);
}

.hero-link-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1rem;
    font-size: 1.15rem;
    line-height: 1;
}

.hero-link-ico .mat-ico {
    font-size: 1.25rem;
    vertical-align: middle;
}

.form-actions {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    justify-content: center;
    margin-top: 1.25rem;
}

.btn-primary {
    cursor: pointer;
    border: none;
    font-weight: 800;
    padding: 0.92rem 1.2rem;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-2));
    box-shadow: 0 12px 20px rgba(7, 86, 145, 0.23);
    min-width: 190px;
}

.btn-primary:hover {
    filter: brightness(1.05);
}

.fab-plus {
    position: fixed;
    right: 1.2rem;
    bottom: 1.2rem;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--theme-accent-2), var(--theme-accent));
    color: #fff;
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 8px 18px rgba(9, 80, 132, 0.35);
    border: 0;
    z-index: 999;
    cursor: pointer;
}

.fab-plus:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 22px rgba(9, 80, 132, 0.45);
}

@media (max-width: 900px) {
    .hero-link-label {
        display: none;
    }

    .hero-link {
        min-width: 2.05rem;
        justify-content: center;
        padding: 0.48rem;
    }
}

/* ===== HEADER MÓVIL / TABLET (menú hamburguesa <=768px) ===== */
.header-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--theme-line);
    border-radius: 10px;
    background: var(--theme-surface-soft);
    color: var(--theme-ink-900);
    cursor: pointer;
    font: inherit;
}

.header-menu-toggle:hover {
    border-color: var(--theme-accent);
    background: var(--theme-surface);
}

.header-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
}

.header-menu-toggle[aria-expanded='true'] .header-menu-icon {
    color: var(--theme-accent);
}

@media (max-width: 768px) {
    .hero {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .header-menu-toggle {
        display: inline-flex;
    }

    .hero-nav-left {
        display: none;
        grid-column: 1 / -1;
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
        padding-top: 0.6rem;
        margin-top: 0.4rem;
        border-top: 1px solid var(--theme-line-soft);
    }

    .hero-nav-left.open {
        display: flex;
    }

    .hero-nav-left.open .hero-link {
        justify-content: flex-start;
        width: 100%;
        padding: 0.6rem 0.75rem;
    }

    .hero-nav-left.open .hero-link-label {
        display: inline;
    }

    /* Targets táctiles y controles usables con el dedo */
    button,
    .btn,
    .btn-light,
    .btn-primary,
    .filter-btn,
    .quick-action,
    .hero-link {
        min-height: 44px;
    }

    .hero-link {
        padding: 0.55rem 0.7rem;
    }

    /* Evita el zoom automático de iOS al enfocar inputs */
    input,
    select,
    textarea {
        font-size: 16px;
    }

    /* Contenedores flex/grid: no expandir por contenido (min-width:auto) */
    section.card,
    .layout,
    .layout > *,
    .panel,
    .panel > * {
        min-width: 0;
        max-width: 100%;
    }

    /* Tablas: scroll horizontal táctil contenido, sin desborde de página */
    .table-wrap,
    .scroll-x {
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    /* Red de seguridad: si algo desborda en móvil, se puede acceder con scroll */
    html,
    body {
        max-width: 100%;
        overflow-x: auto;
    }
}

/* ===== Margen y largo definidos de la página =====
 * Directriz: márgenes proporcionales en % (con mínimo en px para pantallas
 * pequeñas) y ancho máximo centrado. Evita que el layout dependa del tamaño
 * exacto del dispositivo o de los formularios modales. */
body {
    overflow-x: auto;
}

.container {
    max-width: 1220px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-inline: max(1rem, 3%) !important;
}

@media (max-width: 640px) {
    .form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-primary {
        width: 100%;
    }

    /* Formularios de página: una sola columna en móvil */
    .form-grid,
    .ui-field-grid {
        grid-template-columns: 1fr !important;
    }

    /* Acciones de formulario a ancho completo en móvil */
    .form-actions .btn,
    .form-actions .btn-light,
    .ui-actions .btn,
    .ui-actions .btn-light,
    .form-actions .btn-primary,
    .ui-actions .btn-primary {
        width: 100%;
    }

    /* Modales bottom-sheet: ver overrides al final del archivo (cascada) */
}

/* Dark mode — legacy status badge colors (no need for base variables, they inherit from :root) */
body[data-theme='dark'] {
    --status-pendiente-bg: rgba(86, 109, 133, 0.26) !important;
    --status-pendiente-text: #c6d5e6 !important;
    --status-pendiente-border: #607a95 !important;

    --status-proceso-bg: rgba(44, 112, 196, 0.24) !important;
    --status-proceso-text: #b9d9ff !important;
    --status-proceso-border: #3f7fc0 !important;

    --status-piezas-bg: rgba(153, 98, 31, 0.24) !important;
    --status-piezas-text: #ffd9a6 !important;
    --status-piezas-border: #b9833e !important;

    --status-completado-bg: rgba(48, 124, 92, 0.24) !important;
    --status-completado-text: #b8f2d3 !important;
    --status-completado-border: #4aa479 !important;
}

body[data-theme='dark'] table tr:hover td,
body[data-theme='dark'] tbody tr:hover {
    background: rgba(31, 73, 112, 0.16) !important;
}

/* ===== FLASH MESSAGES (light) ===== */
.flash {
    border-radius: 10px;
    padding: 0.72rem 0.85rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    font-size: 0.92rem;
}

.flash.success {
    background: var(--theme-success-bg);
    border-color: var(--theme-success-border);
    color: var(--theme-success-text);
}

.flash.error {
    background: var(--theme-danger-bg);
    border-color: var(--theme-danger-border);
    color: var(--theme-danger-text);
}

body[data-theme='dark'] .flash.success,
body[data-theme='dark'] .status-active,
body[data-theme='dark'] .chip.ok {
    background: var(--theme-success-bg) !important;
    border-color: var(--theme-success-border) !important;
    color: var(--theme-success-text) !important;
}

body[data-theme='dark'] .flash.error,
body[data-theme='dark'] .status-expired,
body[data-theme='dark'] .btn-danger,
body[data-theme='dark'] .btn-danger-sm {
    background: var(--theme-danger-bg) !important;
    border-color: var(--theme-danger-border) !important;
    color: var(--theme-danger-text) !important;
}

/* ===== FILTER SYSTEM (tarjetas filtrables) ===== */
.filter-controls {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.6rem 0;
}

.filter-btn {
    border: 2px solid var(--theme-line-soft);
    background: var(--theme-surface);
    color: var(--theme-accent-2);
    border-radius: 20px;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: capitalize;
}

.filter-btn:hover {
    border-color: var(--theme-accent);
    background: var(--theme-surface-soft);
}

.filter-btn.active {
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-2));
    color: var(--theme-surface);
    border-color: var(--theme-accent-2);
}

.filter-btn.active .stats-badge {
    background: rgba(255, 255, 255, 0.3);
    color: var(--theme-surface);
}

.stats-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 1.6rem;
    background: var(--theme-surface-soft);
    color: var(--theme-accent-2);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-left: 0.3rem;
}

/* ===== Iconos (emojis con color) ===== */
.mat-ico {
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    font-size: 1.15em;
    line-height: 1;
    display: inline-block;
    white-space: nowrap;
    flex-shrink: 0;
    vertical-align: -0.15em;
}

/* Iconos vectoriales especiales (SVG, p.ej. logo WhatsApp) */
.mat-ico svg {
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.15em;
    display: inline-block;
}

/* Alineación uniforme: todo elemento con clase de botón/enlace que contenga
   un icono se vuelve flex con gap (icono + texto centrados). */
.btn .mat-ico,
.btn-light .mat-ico,
.btn-primary .mat-ico,
.btn-secondary .mat-ico,
.btn-danger .mat-ico,
.btn-soft .mat-ico,
.btn-guardar .mat-ico,
.btn-bono .mat-ico,
.filter-btn .mat-ico,
.search-btn .mat-ico,
.search-reset .mat-ico,
.quick-action .mat-ico,
.hero-link .mat-ico,
.estado-pill .mat-ico {
    vertical-align: middle;
    font-size: 1.15em;
    line-height: 1;
}

/* Iconos en contenedores decorativos (tarjetas, KPIs, módulos) */
.module-icon .mat-ico,
.kpi-icon .mat-ico {
    font-size: 1.7rem;
    line-height: 1;
    vertical-align: middle;
}

.module-icon,
.kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Iconos en encabezados de sección (h3/h4 con icono) */
h3 .mat-ico,
h4 .mat-ico,
.card-badge .mat-ico,
.chip .mat-ico {
    vertical-align: -0.18em;
    font-size: 1.1em;
    margin-right: 0.2rem;
}

/* Botones/acciones con icono: garantizar flex + gap aunque la clase base
   no lo defina (botones embebidos por página). */
.btn:has(.mat-ico),
.btn-light:has(.mat-ico),
.btn-primary:has(.mat-ico),
.btn-secondary:has(.mat-ico),
.btn-danger:has(.mat-ico),
.btn-soft:has(.mat-ico),
.btn-guardar:has(.mat-ico),
.btn-bono:has(.mat-ico),
.search-btn:has(.mat-ico),
.search-reset:has(.mat-ico),
.quick-action:has(.mat-ico),
.estado-pill:has(.mat-ico) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    text-decoration: none;
}

/* Hover más dinámico en pills de estado */
.estado-pill {
    position: relative;
}

.estado-pill::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    pointer-events: none;
}

.estado-pill:hover::after {
    opacity: 1;
}

.estado-pill.active::after {
    opacity: 0;
}

/* ===== Estado filter pills (botones de estado) ===== */
.estado-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    border: 2px solid var(--theme-line-soft);
    background: var(--theme-surface);
    color: var(--theme-ink-700);
    border-radius: 20px;
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: capitalize;
}

.estado-pill .mat-ico {
    font-size: 1.05em;
    vertical-align: middle;
}

.estado-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-color: var(--theme-accent);
    color: var(--theme-accent-2);
}

.estado-pill.active {
    background: var(--theme-surface-soft);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Tonos por estado */
.estado-pill.tone-pendiente.active {
    border-color: var(--theme-accent);
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-2));
    color: var(--theme-surface);
}

.estado-pill.tone-proceso.active {
    border-color: var(--theme-info-border);
    background: var(--theme-info-bg);
    color: var(--theme-info-text);
}

.estado-pill.tone-piezas.active {
    border-color: #e0a33d;
    background: #fdf3e3;
    color: #7a4d12;
}

.estado-pill.tone-completado.active {
    border-color: var(--theme-success-border);
    background: var(--theme-success-bg);
    color: var(--theme-success-text);
}

.estado-pill.tone-archivado.active {
    border-color: var(--theme-line-soft);
    background: var(--theme-surface-subtle);
    color: var(--theme-ink-700);
}

body[data-theme='dark'] .estado-pill.tone-proceso.active {
    background: var(--theme-info-bg);
    color: var(--theme-info-text);
    border-color: var(--theme-info-border);
}

body[data-theme='dark'] .estado-pill.tone-piezas.active {
    background: rgba(153, 98, 31, 0.35);
    color: #ffd9a6;
    border-color: #b9833e;
}

body[data-theme='dark'] .estado-pill.tone-completado.active {
    background: var(--theme-success-bg);
    color: var(--theme-success-text);
    border-color: var(--theme-success-border);
}

body[data-theme='dark'] .estado-pill.tone-archivado.active {
    background: var(--theme-surface-soft);
    color: var(--theme-ink-700);
    border-color: var(--theme-line-soft);
}

/* ===== CARD GRID (detalles / tarjetas) ===== */
.detalles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.detalle-card {
    background: var(--theme-surface);
    border: 1px solid var(--theme-line-soft);
    border-radius: 10px;
    padding: 1rem;
    transition: all 0.2s ease;
    border-left: 4px solid var(--theme-accent-2);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    animation: slideIn 0.3s ease forwards;
    opacity: 0;
}

.detalle-card:hover {
    box-shadow: 0 8px 16px rgba(17, 59, 91, 0.12);
    transform: translateY(-2px);
}

.detalle-card.hidden {
    display: none;
}

.detalle-card.type-hardware {
    border-left-color: var(--theme-danger-border);
}

.detalle-card.type-red {
    border-left-color: var(--theme-info-border);
}

.detalle-card.type-software {
    border-left-color: var(--theme-accent);
}

.detalle-card.type-mantenimiento {
    border-left-color: var(--theme-success-border);
}

.detalle-card.type-otro {
    border-left-color: var(--theme-line-soft);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.6rem;
}

.card-badge {
    display: inline-flex;
    align-items: center;
    background: var(--theme-surface-soft);
    color: var(--theme-accent-2);
    border: 1px solid var(--theme-line-soft);
    border-radius: 8px;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: capitalize;
    white-space: nowrap;
}

.card-badge.type-hardware {
    background: var(--theme-danger-bg);
    color: var(--theme-danger-text);
    border-color: var(--theme-danger-border);
}

.card-badge.type-red {
    background: var(--theme-info-bg);
    color: var(--theme-info-text);
    border-color: var(--theme-info-border);
}

.card-badge.type-software {
    background: var(--theme-surface-soft);
    color: var(--theme-accent-2);
    border-color: var(--theme-line-soft);
}

.card-badge.type-mantenimiento {
    background: var(--theme-success-bg);
    color: var(--theme-success-text);
    border-color: var(--theme-success-border);
}

.card-badge.type-otro {
    background: var(--theme-surface-soft);
    color: var(--theme-ink-700);
    border-color: var(--theme-line-soft);
}

.card-date {
    color: var(--theme-ink-700);
    font-size: 0.78rem;
    text-align: right;
    min-width: 120px;
}

.card-text {
    color: var(--theme-ink-900);
    font-size: 0.85rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    flex-grow: 1;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.6rem;
    border-top: 1px solid var(--theme-line-soft);
    color: var(--theme-ink-700);
    font-size: 0.76rem;
}

.card-author {
    font-weight: 600;
    color: var(--theme-ink-700);
}

.card-consumed {
    color: var(--theme-accent-2);
    font-weight: 700;
}

.edit-box {
    margin-top: 0.6rem;
    border-top: 1px solid var(--theme-line-soft);
    padding-top: 0.6rem;
}

.edit-box summary {
    cursor: pointer;
    color: var(--theme-accent-2);
    font-weight: 700;
    font-size: 0.82rem;
}

/* ===== EMPTY STATE ===== */
.empty,
.empty-state {
    color: var(--theme-ink-700);
    border: 1px dashed var(--theme-line-soft);
    border-radius: 10px;
    padding: 0.7rem;
    background: var(--theme-surface-soft);
    font-size: 0.9rem;
}

.empty-state {
    padding: 2rem;
    text-align: center;
    grid-column: 1 / -1;
}

/* ===== ANIMACIONES ===== */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== MODAL GLOBAL (AppModal) ===== */
.ncs-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.ncs-modal[hidden] {
    display: none;
}

.ncs-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 20, 32, 0.55);
    backdrop-filter: blur(2px);
}

.ncs-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(680px, 96vw);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: var(--theme-surface);
    color: var(--theme-ink-900);
    border: 1px solid var(--theme-line);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(8, 20, 32, 0.35);
    animation: slideIn 0.16s ease;
}

.ncs-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--theme-line-soft);
}

.ncs-modal-head h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--theme-ink-900);
}

.ncs-modal-close {
    border: none;
    background: transparent;
    color: var(--theme-ink-700);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 8px;
    width: 2rem;
    height: 2rem;
}

.ncs-modal-close:hover {
    background: var(--theme-surface-soft);
    color: var(--theme-ink-900);
}

.ncs-modal-body {
    padding: 1.1rem;
    overflow-y: auto;
}

.ncs-modal-loading,
.ncs-modal-error {
    padding: 1.2rem;
    text-align: center;
    color: var(--theme-ink-700);
    font-size: 0.92rem;
}

.ncs-modal-error {
    color: var(--theme-danger-text);
}

/* Formularios dentro del modal */
.ncs-modal-body .field,
.ncs-modal-body .field-wide {
    margin-bottom: 0.7rem;
}

.ncs-modal-body .form-actions {
    margin-top: 1rem;
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.ncs-modal-body input[type='text'],
.ncs-modal-body input[type='email'],
.ncs-modal-body input[type='password'],
.ncs-modal-body input[type='number'],
.ncs-modal-body input[type='datetime-local'],
.ncs-modal-body textarea,
.ncs-modal-body select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--theme-line);
    border-radius: 10px;
    background: var(--theme-surface-soft);
    color: var(--theme-ink-900);
    font-family: inherit;
    font-size: 0.92rem;
}

.ncs-modal-body input:focus,
.ncs-modal-body textarea:focus,
.ncs-modal-body select:focus {
    outline: none;
    border-color: var(--theme-accent-2);
    box-shadow: 0 0 0 3px var(--theme-accent-soft);
}

/* ===== TOAST (AppToast) ===== */
.ncs-toast {
    position: fixed;
    bottom: 1.4rem;
    right: 1.4rem;
    z-index: 10001;
    padding: 0.8rem 1.1rem;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 12px 30px rgba(8, 20, 32, 0.3);
    animation: slideIn 0.18s ease;
    max-width: min(420px, 90vw);
}

.ncs-toast.is-success {
    background: var(--theme-ok);
}

.ncs-toast.is-error {
    background: var(--theme-danger-text);
}

.ncs-toast[hidden] {
    display: none;
}

/* ===== ACCESOS RAPIDOS (portada) ===== */
.quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0.25rem 0 0.5rem;
}

.quick-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.95rem;
    border: 1px solid var(--theme-line);
    border-radius: 12px;
    background: var(--theme-surface);
    color: var(--theme-ink-900);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    transition: transform 0.1s, box-shadow 0.1s, border-color 0.1s;
}

.quick-action:hover {
    transform: translateY(-1px);
    border-color: var(--theme-accent-2);
    box-shadow: 0 6px 16px rgba(17, 59, 91, 0.1);
}

.quick-action.primary {
    background: linear-gradient(180deg, var(--theme-accent), var(--theme-accent-2));
    border-color: transparent;
    color: #fff;
}

.kpi-card a,
a.kpi-card {
    text-decoration: none;
    color: inherit;
    display: block;
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(17, 59, 91, 0.12);
}

.kpi-card .kpi-go {
    font-size: 0.72rem;
    font-weight: 700;
    margin-top: 0.35rem;
    opacity: 0.75;
}

/* ===== ENTITY LOOKUP (empresa/cliente) ===== */
.lookup {
    display: grid;
    gap: 0.5rem;
}

.lookup-input {
    width: 100%;
    border: 1px solid var(--theme-line-soft);
    border-radius: 10px;
    padding: 0.68rem 0.75rem;
    background: var(--theme-surface-soft);
    color: var(--theme-ink-900);
    font: inherit;
    font-size: 0.92rem;
}

.lookup-input:focus {
    outline: none;
    border-color: var(--theme-focus);
    background: var(--theme-surface);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-focus) 22%, transparent);
}

.lookup-list {
    display: none;
    border: 1px solid var(--theme-line-soft);
    border-radius: 10px;
    max-height: 200px;
    overflow: auto;
    background: var(--theme-surface);
    box-shadow: 0 10px 24px rgba(17, 59, 91, 0.12);
}

.lookup-list.open {
    display: block;
}

.lookup-item {
    width: 100%;
    text-align: left;
    border: 0;
    border-bottom: 1px solid var(--theme-line-soft);
    padding: 0.58rem 0.72rem;
    cursor: pointer;
    background: var(--theme-surface);
    font: inherit;
    color: var(--theme-ink-900);
}

.lookup-item:hover {
    background: var(--theme-surface-soft);
}

.lookup-item:last-child {
    border-bottom: 0;
}

.lookup-sub {
    display: block;
    font-size: 0.8rem;
    color: var(--theme-ink-700);
    margin-top: 0.16rem;
}

/* ===== ACCIONES DE TARJETA / FILA ===== */
.card-actions,
.row-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0.7rem;
}

.row-actions {
    margin-top: 0;
}

.btn-light {
    cursor: pointer;
    border: 1px solid var(--theme-line-soft);
    border-radius: 10px;
    background: var(--theme-surface-soft);
    color: var(--theme-ink-700);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.btn-light:hover {
    border-color: var(--theme-accent);
    color: var(--theme-accent-2);
    background: var(--theme-surface);
}

body[data-theme='dark'] .lookup-input,
body[data-theme='dark'] .lookup-item {
    background: var(--theme-surface-soft);
    color: var(--theme-ink-900);
}

body[data-theme='dark'] .lookup-item:hover {
    background: var(--theme-surface-subtle);
}

/* Fuentes ocultas para modales inline ([data-ncs-modal-src]) */
.ncs-modal-src {
    display: none;
}





/* ===== Banner de entorno (dev / live) ===== */
.env-banner {
    position: sticky;
    top: 0;
    z-index: 100;
    text-align: center;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .06em;
    padding: .35rem 1rem;
    box-shadow: 0 2px 6px rgba(17, 59, 91, .12);
}
.env-dev {
    background: #f4b942;
    color: #3d2c00;
}
body[data-theme='dark'] .env-dev {
    background: #8a6a1a;
    color: #fff3cd;
}

/* ===== Banner del modo «Ver como» (simulación de rol) ===== */
.view-as-banner {
    position: sticky;
    top: 0;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .4rem 1rem;
    background: #4b2e83;
    color: #f4ecff;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-align: center;
    box-shadow: 0 2px 6px rgba(17, 59, 91, .18);
}
.view-as-banner-note {
    font-weight: 600;
    opacity: .85;
}
.view-as-banner-form {
    margin: 0;
    display: inline-flex;
}
.view-as-banner-exit {
    padding: .2rem .7rem;
    border: 0;
    border-radius: 999px;
    background: #f4ecff;
    color: #3b1f6b;
    font: inherit;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.view-as-banner-exit:hover,
.view-as-banner-exit:focus-visible {
    background: #ffffff;
    text-decoration: none;
}
body[data-theme='dark'] .view-as-banner {
    background: #6a4bb0;
    color: #ffffff;
}
body[data-theme='dark'] .view-as-banner-exit {
    background: #201436;
    color: #f0e6ff;
}

/* Aviso de caducidad de sesión (inactividad): 5 minutos antes del cierre */
.session-expiry-banner {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    z-index: 950;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .75rem;
    max-width: min(680px, calc(100vw - 2rem));
    padding: .6rem 1rem;
    border: 1px solid #e6b566;
    border-radius: 12px;
    background: #fdf3e0;
    color: #5a3b06;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.35;
    box-shadow: 0 10px 24px rgba(15, 42, 67, .18);
}
.session-expiry-actions {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.session-expiry-form {
    margin: 0;
    display: inline-flex;
}
.session-expiry-stay,
.session-expiry-logout {
    padding: .35rem .85rem;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}
.session-expiry-stay {
    background: #0f7ccc;
    color: #ffffff;
}
.session-expiry-stay:hover:not(:disabled),
.session-expiry-stay:focus-visible {
    background: #1b5ea7;
}
.session-expiry-stay:disabled {
    opacity: .7;
    cursor: default;
}
.session-expiry-logout {
    background: transparent;
    color: #7a4a06;
    text-decoration: underline;
}
body[data-theme='dark'] .session-expiry-banner {
    background: #3a2c14;
    border-color: #7a5a25;
    color: #ffe6b8;
}
body[data-theme='dark'] .session-expiry-logout {
    color: #ffd694;
}
@media (max-width: 480px) {
    .session-expiry-banner {
        left: 1rem;
        right: 1rem;
        bottom: 2rem;
        transform: none;
    }
}

/* Marca de agua de versión (abajo-derecha, semitransparente) */
.app-version-badge {
    position: fixed;
    right: 0.5rem;
    bottom: 0.25rem;
    z-index: 900;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--theme-ink-700);
    opacity: 0.35;
    pointer-events: none;
    user-select: none;
}

@media (max-width: 640px) {
    .app-version-badge {
        bottom: 0.35rem;
        font-size: 0.62rem;
        opacity: 0.4;
    }
}

/* ===== Overrides responsive móvil (al final para ganar por cascada) ===== */
@media (max-width: 640px) {
    .ncs-modal {
        padding: 0;
        align-items: flex-end;
    }

    .ncs-modal-dialog {
        width: 100%;
        max-width: 100vw;
        max-height: 94vh;
        border-radius: 18px 18px 0 0;
    }
}

@media (max-width: 768px) {
    .filter-controls {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.25rem;
    }
}

/* Modales propios de página (WhatsApp, calendario, pedidos): bottom-sheet con scroll
 * para que el último cuadro (botones) quede accesible al fondo de la pantalla. */
@media (max-width: 768px) {
    .wa-modal-overlay,
    #finalizadoModal,
    .modal-overlay {
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    .wa-modal-box,
    #finalizadoModal > div,
    .modal-overlay .modal-box {
        max-height: 94vh !important;
        max-width: 100vw !important;
        width: 100% !important;
        border-radius: 18px 18px 0 0 !important;
        overflow-y: auto !important;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1.1rem) !important;
    }
}

/* Calendario compacto en móvil: cada día ocupa solo su número + contador de
 * actividades (el contador solo aparece cuando el día tiene algo apuntado). */
@media (max-width: 768px) {
    #mesView .mes-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 0.3rem;
    }

    #mesView .day-card {
        min-height: 2.75rem;
        padding: 0.2rem;
        justify-content: center;
        align-items: center;
        gap: 0.1rem;
        border-radius: 10px;
    }

    #mesView .day-evs {
        display: none;
    }

    #mesView .day-cnt {
        margin-left: 0;
        min-width: 1.25rem;
        text-align: center;
        font-size: 0.62rem;
        padding: 0.04rem 0.32rem;
    }

    /* Vista semana: días compactos con contador, sin eje de horas */
    #semanaView .semana-cols {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        min-width: 0;
        gap: 0.3rem;
    }

    #semanaView .semana-day-col {
        cursor: pointer;
    }

    #semanaView .semana-day-body {
        display: none;
    }

    #semanaView .semana-day-head {
        padding: 0.5rem 0.15rem;
        font-size: 0.68rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.2rem;
        line-height: 1.1;
    }

    #semanaView .semana-day-head .day-cnt {
        margin-left: 0;
    }
}

/* Contenido de página: el largo llega hasta el fondo de la pantalla en móvil
 * (las secciones/tarjetas finales se estiran en vez de quedar a media altura). */
@media (max-width: 768px) {
    .container {
        min-height: calc(100vh - 3.4rem);
        display: flex;
        flex-direction: column;
        padding-bottom: 5rem !important;
    }

    .container > .modules-grid,
    .container > section,
    .container > .panel,
    .container > .card {
        flex: 1 1 auto;
    }

    .container > .modules-grid {
        display: flex;
        flex-direction: column;
    }

    .container > .modules-grid > * {
        flex: 1 1 auto;
    }

    /* Grids de módulos anidados (p. ej. tarjeta de WhatsApp en el landing):
     * también se estiran para que la última tarjeta llegue al fondo. */
    .container .panel .modules-grid,
    .container .admin-section .modules-grid {
        display: flex;
        flex-direction: column;
    }

    .container .panel .modules-grid > *,
    .container .admin-section .modules-grid > * {
        flex: 1 1 auto;
    }
}

/* ===== Listados en móvil: cada registro = tarjeta apilada (sin scroll lateral) ===== */
@media (max-width: 768px) {
    .table-wrap table,
    .table-wrap thead,
    .table-wrap tbody,
    .table-wrap tr,
    .table-wrap td,
    .table-wrap th {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .table-wrap thead {
        display: none;
    }

    .table-wrap table {
        min-width: 0;
    }

    .table-wrap tr {
        border: 1px solid var(--theme-line-soft);
        border-radius: 14px;
        background: var(--theme-surface);
        padding: 0.35rem 0.6rem;
        margin-bottom: 0.8rem;
        box-shadow: 0 6px 14px rgba(17, 59, 91, 0.06);
    }

    .table-wrap td {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.35rem 0.5rem;
        padding: 0.4rem 0;
        border: 0;
        border-bottom: 1px solid var(--theme-line-soft);
        min-height: 0;
        text-align: left;
        white-space: normal;
    }

    .table-wrap td:last-child {
        border-bottom: 0;
    }

    .table-wrap tr:hover {
        transform: none;
        box-shadow: 0 6px 14px rgba(17, 59, 91, 0.06);
    }
}


/* ============================================================
   SKINS GLOBALES DE LA INTRANET
   ------------------------------------------------------------
   El tema del usuario (usuarios.dashboard_layout) se aplica en
   <html data-skin="..."> desde src/components/_theme_head.php.
   Cada skin redefine los tokens --theme-* para TODA la app, así
   que las páginas no necesitan cambios individuales.

   Añadir un tema nuevo = añadir un bloque
   html[data-skin='nuevo'][data-theme='light'|'dark'] aquí.
   ============================================================ */

/* ---------- NCS Móvil (táctil, alto contraste) ---------- */
html[data-skin='movil'][data-theme='light'] {
    --theme-ink-900: #0b2537;
    --theme-ink-700: #2b4759;
    --theme-line: #cddbe6;
    --theme-line-soft: #dbe7f0;
    --theme-surface: #ffffff;
    --theme-surface-soft: #f4f9fd;
    --theme-surface-subtle: #edf3f8;
    --theme-page-bg-gradient: linear-gradient(160deg, #eef5fa, #f8fbfe 55%, #e9f1f8);
    --theme-accent: #0d6fb2;
    --theme-accent-2: #0b5c95;
    --theme-accent-soft: #0a6aa5;
    --theme-focus: #1a8de0;
    --theme-text-neutral: #22333f;
    --theme-text-muted: #5f7486;
    --bg: #eef4f9;
    --card: #ffffff;
    --ncs-blue-900: #0b2537;
    --ncs-blue-700: #0d4e7d;
    --ncs-blue-500: #0d6fb2;
    --ncs-cyan-200: #a9def8;
    --ncs-cyan-300: #66c6f5;
}

html[data-skin='movil'][data-theme='dark'] {
    --theme-ink-900: #eaf2fb;
    --theme-ink-700: #bcccdc;
    --theme-line: #34506a;
    --theme-line-soft: #476785;
    --theme-surface: #112032;
    --theme-surface-soft: #182c42;
    --theme-surface-subtle: #22364d;
    --theme-page-bg-gradient: radial-gradient(circle at 8% 4%, rgba(47, 94, 137, 0.3), transparent 34%), linear-gradient(150deg, #0a1726, #0f2236 55%, #132c45);
    --theme-accent: #5fb0ea;
    --theme-accent-2: #3f92d2;
    --theme-accent-soft: #4e9dd9;
    --theme-focus: #74c3ff;
    --theme-text-neutral: #dbe8f7;
    --theme-text-muted: #9fb4cb;
    --bg: #0e1d2d;
    --card: var(--theme-surface);
    --ncs-blue-900: #12263d;
    --ncs-blue-700: #1a3a58;
    --ncs-blue-500: #25517a;
}

/* Objetivos táctiles de 44 px (WCAG 2.5.5) en la navegación del tema móvil. */
html[data-skin='movil'] .hero-link {
    min-width: 44px;
    min-height: 44px;
}

html[data-skin='movil'] .pref-use,
html[data-skin='movil'] .pulse-cmd,
html[data-skin='movil'] .btn-primary,
html[data-skin='movil'] .btn-light {
    min-height: 44px;
}

/* Buscador del panel NCS Móvil: abre la misma paleta de comandos. */
body.layout-movil .dash-search {
    margin-bottom: .8rem;
}

body.layout-movil .dash-search-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    min-height: 44px;
    padding: .6rem .85rem;
    border: 1px solid var(--theme-line);
    border-radius: 14px;
    background: var(--theme-surface);
    color: var(--theme-ink-700);
    font-family: inherit;
    font-size: .9rem;
    text-align: left;
    cursor: pointer;
}

body.layout-movil .dash-search-btn:hover,
body.layout-movil .dash-search-btn:focus-visible {
    border-color: var(--theme-accent);
    color: var(--theme-ink-900);
}

body.layout-movil .dash-search-ico {
    font-size: 1rem;
    line-height: 1;
}

/* Panel NCS Móvil: tarjetas compactas en dos columnas y KPIs legibles. */
@media (max-width: 768px) {
    body.layout-movil .container {
        padding-inline: .85rem !important;
        margin-top: .9rem !important;
    }

    body.layout-movil .dash-hero {
        padding: .95rem;
        border-radius: 16px;
    }

    body.layout-movil .modules-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .7rem !important;
    }

    body.layout-movil .module-card {
        min-height: 0 !important;
        padding: .85rem .55rem !important;
        gap: .3rem;
        border-radius: 16px;
    }

    body.layout-movil .module-card p {
        display: none;
    }

    body.layout-movil .module-card h3 {
        font-size: .95rem;
    }

    body.layout-movil .kpi-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .6rem;
    }

    body.layout-movil .kpi-card {
        padding: .7rem .5rem;
    }

    body.layout-movil .kpi-card .kpi-value {
        font-size: 1.5rem;
    }
}

/* ---------- NCS Pulse (teal + pizarra) ---------- */
html[data-skin='pulse'][data-theme='light'] {
    --theme-ink-900: #10222e;
    --theme-ink-700: #40586a;
    --theme-line: #d5e1e8;
    --theme-line-soft: #e1eaef;
    --theme-surface: #ffffff;
    --theme-surface-soft: #f1f6f8;
    --theme-surface-subtle: #e8eff3;
    --theme-page-bg-gradient: radial-gradient(circle at 10% 0%, rgba(63, 179, 163, 0.18), transparent 38%), linear-gradient(150deg, #eef4f7, #f7fafb 55%, #e7eff3);
    --theme-accent: #1f7f74;
    --theme-accent-2: #16685f;
    --theme-accent-soft: #2a9c8f;
    --theme-focus: #1f9d8f;
    --theme-text-neutral: #24323a;
    --theme-text-muted: #6b7f8c;
    --bg: #eef3f6;
    --card: #ffffff;
    --ncs-blue-900: #0f2937;
    --ncs-blue-700: #134a5c;
    --ncs-blue-500: #1f7f74;
    --ncs-cyan-200: #9fe0d6;
    --ncs-cyan-300: #6fcdbf;
}

html[data-skin='pulse'][data-theme='dark'] {
    --theme-ink-900: #eef6f7;
    --theme-ink-700: #b6c9d3;
    --theme-line: #22394a;
    --theme-line-soft: #2d495c;
    --theme-surface: #101f2b;
    --theme-surface-soft: #162a38;
    --theme-surface-subtle: #1c3444;
    --theme-page-bg-gradient: radial-gradient(circle at 10% 0%, rgba(63, 179, 163, 0.16), transparent 38%), linear-gradient(150deg, #0b1c28, #07131c 60%, #0d2532);
    --theme-accent: #3fb3a3;
    --theme-accent-2: #2b8f83;
    --theme-accent-soft: #4cc4b4;
    --theme-focus: #5ad3c2;
    --theme-text-neutral: #d8e8ec;
    --theme-text-muted: #93aeb9;
    --bg: #07131c;
    --card: #101f2b;
    --ncs-blue-900: #0b2230;
    --ncs-blue-700: #14384a;
    --ncs-blue-500: #2f7f83;
    --ncs-cyan-200: #7fc9c3;
    --ncs-cyan-300: #97e0d6;
}

/* ---------- NCS Cuaderno (papel editorial, claro y nocturno) ---------- */
html[data-skin='cuaderno'][data-theme='light'] {
    --theme-ink-900: #26332c;
    --theme-ink-700: #5a5142;
    --theme-line: #d8ceb8;
    --theme-line-soft: #e2d8c4;
    --theme-surface: #fbf7ee;
    --theme-surface-soft: #f4eee0;
    --theme-surface-subtle: #ece5d5;
    --theme-page-bg-gradient: radial-gradient(circle at 10% 4%, rgba(154, 95, 36, 0.10), transparent 34%), linear-gradient(155deg, #f7f2e7, #efe8d8 55%, #e7dfcf);
    --theme-auth-bg-gradient: linear-gradient(135deg, #8a6a3a 0%, #3c4a3f 100%);
    --theme-accent: #9a5f24;
    --theme-accent-2: #7a5b3a;
    --theme-accent-soft: #b4703a;
    --theme-focus: #a8631f;
    --theme-ok: #2f6b4f;
    --theme-warn: #9a3d24;
    --theme-text-neutral: #33302a;
    --theme-text-muted: #8a8272;
    --bg: #efe8d8;
    --card: #fbf7ee;
    --ncs-blue-900: #3a3428;
    --ncs-blue-700: #5a5142;
    --ncs-blue-500: #7a5b3a;
    --ncs-cyan-200: #c9bfa9;
    --ncs-cyan-300: #d8ceb8;
}

html[data-skin='cuaderno'][data-theme='dark'] {
    --theme-ink-900: #efe6d4;
    --theme-ink-700: #c2b69d;
    --theme-line: #3c3628;
    --theme-line-soft: #4a4234;
    --theme-surface: #1c1914;
    --theme-surface-soft: #241f18;
    --theme-surface-subtle: #2c261d;
    --theme-page-bg-gradient: radial-gradient(circle at 10% 4%, rgba(217, 160, 91, 0.14), transparent 36%), linear-gradient(155deg, #12100c, #191510 55%, #201b14);
    --theme-auth-bg-gradient: linear-gradient(135deg, #4a3a22 0%, #1b1f19 100%);
    --theme-accent: #d9a05b;
    --theme-accent-2: #c98f4e;
    --theme-accent-soft: #a97a44;
    --theme-focus: #e0b070;
    --theme-ok: #6fbf94;
    --theme-warn: #e08a6b;
    --theme-text-neutral: #e6dcc4;
    --theme-text-muted: #a89c84;
    --bg: #12100c;
    --card: #1c1914;
    --ncs-blue-900: #1f1b13;
    --ncs-blue-700: #33291c;
    --ncs-blue-500: #5a4a30;
    --ncs-cyan-200: #a89a7d;
    --ncs-cyan-300: #c9b894;
}

/* ---------- NCS Ops (consola verde, claro y oscuro) ---------- */
html[data-skin='ops'][data-theme='light'] {
    --theme-ink-900: #0d2319;
    --theme-ink-700: #33513f;
    --theme-line: #c3d6ca;
    --theme-line-soft: #d3e2d8;
    --theme-surface: #ffffff;
    --theme-surface-soft: #f2f8f4;
    --theme-surface-subtle: #e8f1eb;
    --theme-page-bg-gradient: radial-gradient(circle at 8% 4%, rgba(18, 153, 106, 0.14), transparent 36%), linear-gradient(150deg, #eef5f0, #f8fbf9 50%, #e7f0ea);
    --theme-accent: #0c7a4f;
    --theme-accent-2: #075c3b;
    --theme-accent-soft: #12996a;
    --theme-focus: #0f9265;
    --theme-text-neutral: #1c3227;
    --theme-text-muted: #5d7568;
    --bg: #eef5f0;
    --card: #ffffff;
    --ncs-blue-900: #0a2a1d;
    --ncs-blue-700: #0f4a31;
    --ncs-blue-500: #146b46;
    --ncs-cyan-200: #9fe0c2;
    --ncs-cyan-300: #6fd2a6;
}

html[data-skin='ops'][data-theme='dark'] {
    --theme-ink-900: #cfe6da;
    --theme-ink-700: #93b7a5;
    --theme-line: #1d3a2c;
    --theme-line-soft: #274a38;
    --theme-surface: #0a1a14;
    --theme-surface-soft: #0f241b;
    --theme-surface-subtle: #143024;
    --theme-page-bg-gradient: radial-gradient(circle at 8% 4%, rgba(95, 214, 164, 0.12), transparent 36%), linear-gradient(150deg, #05100c, #081a12 55%, #0b2418);
    --theme-accent: #5fd6a4;
    --theme-accent-2: #39a97c;
    --theme-accent-soft: #7ce7ba;
    --theme-focus: #6ff0b5;
    --theme-text-neutral: #d9efe4;
    --theme-text-muted: #86a898;
    --bg: #05100c;
    --card: #0a1a14;
    --ncs-blue-900: #061a12;
    --ncs-blue-700: #0b3323;
    --ncs-blue-500: #145c3c;
    --ncs-cyan-200: #7fd8ae;
    --ncs-cyan-300: #9ef0c6;
}

/* ---------- Ajustes globales por skin (sin tocar las páginas) ---------- */
html[data-skin='pulse'] body,
html[data-skin='cuaderno'] body,
html[data-skin='ops'] body {
    background: var(--theme-page-bg-gradient);
    color: var(--theme-ink-900);
}

html[data-skin='cuaderno'] body {
    font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
}

html[data-skin='cuaderno'] .hero h2,
html[data-skin='cuaderno'] h1,
html[data-skin='cuaderno'] h2,
html[data-skin='cuaderno'] h3 {
    letter-spacing: -0.01em;
}

html[data-skin='ops'] body,
html[data-skin='ops'] button,
html[data-skin='ops'] input,
html[data-skin='ops'] select,
html[data-skin='ops'] textarea {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- Tokens de contraste y color de componentes ---------- */
:root {
    --theme-on-accent: #fff;
    --theme-media-bg: #000;
    --theme-whatsapp: #25d366;
    --theme-via: #e8742a;
}

/* ---------- Utilidades de layout (sustituyen style="" en las páginas) ---------- */
.u-hidden { display: none !important; }
.u-invisible { visibility: hidden; }
.inline-form { display: inline; }
.u-full { grid-column: 1 / -1; }
.u-flex { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.u-flex-col { display: flex; flex-direction: column; gap: .4rem; }
.u-flex-between { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.u-flex-inline { display: inline-flex; align-items: center; gap: .3rem; }
.u-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.u-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.u-stack-06 { display: grid; gap: .6rem; }
.u-muted { color: var(--theme-ink-700); }
.u-small { font-size: .88rem; }
.u-tiny { font-size: .75rem; }
.u-m-0 { margin: 0; }
.u-mb-05 { margin-bottom: .5rem; }
.u-mb-075 { margin-bottom: .75rem; }
.u-mb-1 { margin-bottom: 1rem; }
.u-mt-02 { margin-top: .2rem; }
.u-mt-05 { margin-top: .5rem; }
.u-mt-07 { margin-top: .7rem; }
.u-mt-08 { margin-top: .8rem; }
.u-ml-06 { margin-left: .6rem; }
.u-text-center { text-align: center; }

/* ---------- Paginación de listados ---------- */
.ncs-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.ncs-pagination .page-link {
    padding: .4rem .7rem;
    border: 1px solid var(--theme-line-soft);
    border-radius: 8px;
    text-decoration: none;
    color: var(--theme-accent-2);
    background: var(--theme-surface-soft);
    font-size: .85rem;
}

.ncs-pagination .page-current {
    padding: .4rem .7rem;
    border: 2px solid var(--theme-accent-2);
    border-radius: 8px;
    background: var(--theme-accent-2);
    color: var(--theme-on-accent);
    font-weight: 700;
    font-size: .85rem;
}

.ncs-pagination .page-gap {
    padding: .4rem .3rem;
    color: var(--theme-ink-700);
    font-size: .85rem;
}

/* ---------- Botones compactos reutilizados en listados y detalles ---------- */
.mask-toggle {
    font-size: .72rem;
    cursor: pointer;
    background: none;
    border: 1px solid var(--theme-line-soft);
    border-radius: 4px;
    padding: .1rem .3rem;
    color: var(--theme-ink-700);
    margin-left: .2rem;
}

.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .3rem .6rem;
    border-radius: 8px;
    background: var(--theme-whatsapp);
    color: var(--theme-on-accent);
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
}

.btn-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .5rem;
    border-radius: 8px;
    background: var(--theme-surface-soft);
    color: var(--theme-text-muted);
    font-size: .75rem;
    text-decoration: none;
}

/* ---------- Modal de pedido finalizado ---------- */
.ncs-modal-fin {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.ncs-modal-fin.is-open { display: flex; }

.ncs-modal-fin-card {
    background: var(--theme-surface);
    border: 1px solid var(--theme-line);
    border-radius: 18px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .25);
    padding: 1.5rem;
    max-width: 520px;
    width: 90%;
}

.ncs-modal-fin-title {
    margin: 0 0 .5rem;
    color: var(--theme-ink-900);
}

.ncs-modal-fin-text {
    color: var(--theme-ink-700);
    font-size: .9rem;
    margin-bottom: 1rem;
}

.ncs-modal-fin-actions {
    display: grid;
    gap: .6rem;
}

.ncs-modal-target {
    display: none;
    gap: .6rem;
    margin-bottom: .8rem;
    padding: .8rem;
    background: var(--theme-surface-soft);
    border-radius: 10px;
    border: 1px solid var(--theme-line-soft);
}

.ncs-modal-target.is-open { display: grid; }

.ncs-modal-target p {
    font-size: .85rem;
    color: var(--theme-ink-700);
    margin: 0 0 .4rem;
}

.ncs-modal-target-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}

.ncs-modal-btn {
    display: block;
    width: 100%;
    padding: .7rem .9rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: .9rem;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
}

.ncs-modal-btn--empresa { background: var(--theme-ok); color: var(--theme-on-accent); }
.ncs-modal-btn--calendar { background: var(--theme-accent-2); color: var(--theme-on-accent); }
.ncs-modal-btn--skip { background: var(--theme-surface-soft); color: var(--theme-ink-700); border-color: var(--theme-line-soft); }

.ncs-modal-target .ncs-choice {
    padding: .6rem;
    border-radius: 8px;
    border: 1px solid var(--theme-line-soft);
    cursor: pointer;
    color: var(--theme-on-accent);
    font-weight: 700;
    font-size: .85rem;
}

.ncs-modal-target .ncs-choice--empresa { background: var(--theme-ok); }
.ncs-modal-target .ncs-choice--cliente { background: var(--theme-accent-2); }

/* ---------- Formularios en línea (grid de contacto) ---------- */
.ncs-inline-input {
    padding: .62rem .72rem;
    border: 1px solid var(--theme-line-soft);
    border-radius: 10px;
    background: var(--theme-surface);
    color: var(--theme-ink-900);
    width: 100%;
}

.ncs-contacto-direccion { margin-top: .35rem; }

/* ---------- Indicadores KPI ---------- */
.kpi-value--ok { color: var(--theme-ok); }
.kpi-value--warn { color: var(--theme-warn); }
.kpi-value--alert { color: var(--theme-yellow-text); }
.kpi-value--danger { color: var(--theme-danger-text); }
.kpi-value--accent { color: var(--theme-accent); }

/* ---------- Miniaturas del selector de apariencia ---------- */
.pref-preview--pulse { background: #0c1a26; grid-template-columns: 1.3fr .8fr; grid-template-rows: 30px 1fr 1fr; }
.pref-preview--pulse span { background: #17303f; }
.pref-preview--pulse span.hero { grid-column: span 2; background: #1f4157; }
.pref-preview--pulse span.accent { background: #2f8f83; }
.pref-preview--pulse span.warm { background: #b4703a; }
.pref-preview--cuaderno { background: #f7f2e7; grid-template-columns: 1fr; align-content: start; border-color: #d9cfb9; }
.pref-preview--cuaderno span { height: 3px; background: #d9cfb9; border-radius: 2px; }
.pref-preview--cuaderno span.title { height: 14px; width: 62%; background: #2d3a33; border-radius: 2px; }
.pref-preview--cuaderno span.short { width: 78%; }
.pref-preview--ops { background: #08120f; grid-template-columns: 1fr 1fr; align-content: start; gap: .3rem; }
.pref-preview--ops span { height: 10px; background: #17352b; border-radius: 2px; }
.pref-preview--ops span.head { grid-column: span 2; height: 20px; background: #1f5c45; }
.pref-preview--ops span.warn { background: #8a6420; }

[hidden] { display: none !important; }

/* ---------- Calendario ---------- */
.cal-nav { margin-bottom: .7rem; }
.dot-via { background: var(--theme-via); }

/* ---------- Botones de texto y cajas de acción ---------- */
.link-button {
    color: inherit;
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.danger-box--top {
    padding-top: .2rem;
    border-top: 1px solid var(--theme-line);
}

.btn--center {
    text-align: center;
    text-decoration: none;
}

.btn--flex-center {
    flex: 1;
    text-align: center;
}

.u-float-right { float: right; }
.u-ml-auto { margin-left: auto; }
.text-warn { color: var(--theme-warn); }

/* ---------- Banner de entorno fijo (login) ---------- */
.env-banner--fixed { position: fixed; left: 0; right: 0; top: 0; z-index: 50; }

/* ---------- Avisos y cabeceras de sección ---------- */
.flash-narrow { max-width: 720px; margin: 0 auto; }
.ncs-section-title { margin: 0 0 .5rem; font-size: 1.15rem; }
.ncs-section-hint { color: var(--theme-ink-700); font-size: .9rem; margin: 0 0 1rem; }

/* ---------- Ficha multimedia ---------- */
.media-preview { background: var(--theme-media-bg); }



/* ---------- Formulario de facturación (modal) ---------- */
.ncs-modal-body [data-fact-lineas-form] *{box-sizing:border-box;}
.ncs-modal-body [data-fact-lineas-form] .field{min-width:0;}
.ncs-modal-body [data-fact-lineas-form] .field-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.6rem;
    margin-top:.7rem;
}
.ncs-modal-body [data-fact-lineas-form] input[type='text'],
.ncs-modal-body [data-fact-lineas-form] select,
.ncs-modal-body [data-fact-lineas-form] textarea{
    width:100%;
    max-width:100%;
    padding:.5rem .6rem;
    border:1px solid var(--line-soft);
    border-radius:8px;
    background:var(--surface);
    color:var(--ink);
    font:inherit;
    font-size:.86rem;
}
.ncs-modal-body [data-fact-lineas-form] textarea{resize:vertical;min-height:64px;}
.fact-lineas-wrap{border:1px solid var(--line-soft);border-radius:12px;background:var(--surface-soft);padding:.6rem;}
.fact-linea-head,.fact-linea{display:grid;grid-template-columns:minmax(92px,110px) minmax(0,1fr) 60px 86px 86px 34px;gap:.4rem;align-items:center;}
.fact-linea-head{font-size:.72rem;font-weight:800;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em;margin-bottom:.3rem;}
.fact-linea{margin-bottom:.4rem;}
.ncs-modal-body [data-fact-lineas-form] .fact-linea select,
.ncs-modal-body [data-fact-lineas-form] .fact-linea input{width:100%;padding:.42rem .45rem;}
.fact-linea-importe{font-weight:800;font-size:.85rem;text-align:right;white-space:nowrap;}
.fact-linea-remove{justify-content:center;padding:.3rem .5rem;}
.fact-linea-total{text-align:right;font-size:.9rem;margin-top:.5rem;}
.form-actions{display:flex;gap:.5rem;margin-top:1rem;justify-content:flex-end;}
.field-wide{margin-top:.7rem;}
@media(max-width:640px){
    .fact-linea-head{display:none;}
    .fact-linea{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:.4rem;}
    .fact-linea select,.fact-linea input{width:100%;}
    .fact-linea-importe{grid-column:1/3;text-align:left;}
    .field-grid{grid-template-columns:1fr !important;}
}


/* ---------- Vínculos entre entidades (modal) ---------- */
.vinculos-list{display:grid;gap:.45rem;margin:.6rem 0;}
.vinculo-item{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap;background:var(--theme-surface-soft);border:1px solid var(--theme-line-soft);border-radius:10px;padding:.5rem .7rem;font-size:.88rem;}
.vinculo-item a{color:var(--theme-accent-2);font-weight:700;text-decoration:none;}
.vinculo-item form{display:inline-flex;margin:0;}
.vinculos-add{margin-top:.8rem;border:1px dashed var(--theme-line);border-radius:12px;padding:.7rem .85rem;background:var(--theme-surface);}
.vinculos-add summary{cursor:pointer;font-weight:700;font-size:.9rem;}
.vinculos-duplicados{border:1px solid var(--theme-warn);background:var(--theme-danger-bg);border-radius:12px;padding:.7rem .8rem;margin-bottom:.9rem;display:grid;gap:.4rem;font-size:.88rem;}
.vinculo-dup-opt{display:flex;align-items:flex-start;gap:.45rem;font-size:.88rem;cursor:pointer;}

/* ---------- Copiar enlace ---------- */
.copy-btn.is-copied > * { display: none; }
.copy-btn.is-copied::after { content: '✓ Copiado'; }
.logo-current { margin-bottom: .45rem; }
.logo-current-img { max-height: 64px; max-width: 64px; border-radius: 10px; object-fit: contain; }

/* ---------- Revisión de factura pendiente (modal) ---------- */
.ncs-modal-body .fact-review *{box-sizing:border-box;}
.fact-review .rv-head{display:flex;justify-content:space-between;gap:.6rem;align-items:flex-start;flex-wrap:wrap;margin-bottom:.6rem;}
.fact-review .rv-title{font-size:1.05rem;font-weight:900;color:var(--ink);}
.fact-review .rv-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.45rem;margin:.5rem 0 .9rem;}
.fact-review .rv-meta-item{border:1px solid var(--line-soft);border-radius:10px;background:var(--surface);padding:.5rem .6rem;font-size:.82rem;}
.fact-review .rv-meta-item strong{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);margin-bottom:.1rem;}
.fact-review table{width:100%;border-collapse:collapse;font-size:.85rem;margin-top:.4rem;}
.fact-review th{text-align:left;padding:.45rem .4rem;color:var(--ink-soft);font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--line-soft);}
.fact-review td{padding:.45rem .4rem;border-bottom:1px solid var(--line-soft);}
.fact-review td.num,.fact-review th.num{text-align:right;}
.fact-review .totals{margin-top:.7rem;margin-left:auto;max-width:320px;display:grid;gap:.3rem;font-size:.88rem;}
.fact-review .totals .trow{display:flex;justify-content:space-between;color:var(--ink-soft);}
.fact-review .totals .trow.grand{color:var(--ink);font-weight:900;font-size:1rem;border-top:1px solid var(--line-soft);padding-top:.4rem;}
.fact-review .rv-desc{margin:.5rem 0 .9rem;font-size:.86rem;color:var(--ink-soft);white-space:pre-line;}
.fact-review .rv-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem;justify-content:flex-end;}
.fact-review .pill{display:inline-block;padding:.2rem .6rem;border-radius:999px;font-size:.74rem;font-weight:800;border:1px solid transparent;white-space:nowrap;}
.fact-review .pill-pendiente{background:var(--status-pendiente-bg, var(--theme-yellow-bg));color:var(--status-pendiente-text, var(--theme-yellow-text));border-color:var(--status-pendiente-border, var(--theme-yellow-border));}
.fact-review .pill-facturado{background:var(--theme-success-bg);color:var(--theme-success-text);border-color:var(--theme-success-border);}
.fact-review .pill-descartado{background:var(--surface-soft);color:var(--ink-soft);border-color:var(--line-soft);}
.fact-review .btn{display:inline-flex;align-items:center;gap:.3rem;border-radius:10px;border:1px solid var(--line-soft);background:var(--surface-soft);color:var(--ink);padding:.45rem .8rem;font:inherit;font-size:.84rem;font-weight:700;cursor:pointer;text-decoration:none;}
.fact-review .btn-primary{background:var(--theme-accent);border-color:var(--theme-accent-2);color:rgb(255 255 255);}
.fact-review .btn-danger{background:var(--theme-danger-bg);border-color:var(--theme-danger-border);color:var(--theme-danger-text);}
.fact-review .rv-actions form{display:inline-flex;margin:0;}

/* ---------- Consentimientos RGPD (altas y fichas) ---------- */
.consent-fieldset{border:1px solid var(--line-soft);border-radius:12px;background:var(--surface-soft);padding:.75rem .85rem;margin:1rem 0 0;display:grid;gap:.6rem;}
.consent-fieldset legend{font-weight:800;font-size:.85rem;color:var(--ink);padding:0 .35rem;}
.consent-item{display:grid;gap:.35rem;border:1px solid var(--line-soft);border-radius:10px;background:var(--surface);padding:.55rem .7rem;}
.consent-check{display:flex;align-items:flex-start;gap:.5rem;font-size:.88rem;line-height:1.35;cursor:pointer;}
.consent-check input{margin-top:.15rem;flex:0 0 auto;}
.consent-check strong{font-weight:800;color:var(--ink);}
.consent-check em{font-style:normal;color:var(--ink-soft);font-size:.8rem;}
.consent-info{font-size:.82rem;color:var(--ink-soft);}
.consent-info summary{cursor:pointer;font-weight:700;color:var(--theme-accent-2);}
.consent-info dl{display:grid;grid-template-columns:minmax(120px,150px) minmax(0,1fr);gap:.25rem .6rem;margin:.45rem 0 0;}
.consent-info dt{font-weight:700;color:var(--ink);}
.consent-info dd{margin:0;}
.consent-table{width:100%;border-collapse:collapse;font-size:.85rem;}
.consent-table th{text-align:left;padding:.45rem .4rem;color:var(--ink-soft);font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--line-soft);}
.consent-table td{padding:.45rem .4rem;border-bottom:1px solid var(--line-soft);}
@media(max-width:640px){
    .consent-info dl{grid-template-columns:1fr;}
}