/*
 * Nota de Transparencia: Código generado/refactorizado con asistencia de IA Generativa (Claude Code) bajo la Política ODTI012 del CCS. Requiere supervisión y validación humana permanente.
 *
 * Tema del Portal del Contratista (plantilla "Portal Contratista").
 * Se carga al final de layouts/header.php: tokens claro/oscuro, layout (sidebar, topbar, footer)
 * y ajustes de Bootstrap 5.3 / DataTables / tablas cds-* para que las vistas existentes tomen la plantilla.
 */

/* ---------- Fuentes ---------- */
@font-face { font-family: 'Inter'; font-weight: 100 900; font-display: swap; src: url('../fonts/portal/InterVariable.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 600; font-display: swap; src: url('../fonts/portal/hanken-600.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 700; font-display: swap; src: url('../fonts/portal/hanken-700.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
:root, [data-theme="light"] {
    color-scheme: light;
    --bg: #F5F7FD; --card: #ffffff; --low: #f7f8fc; --high: #eceff6; --input: #ffffff; --hover: #f3f5fb;
    --ink: #2A2F5B; --ink2: #555b78; --muted: #7c8397; --line: #d9dde8; --line2: #ebedf3;
    /* Color principal del software: #0262bf */
    --pri: #0262bf; --pri-hover: #0251a0; --pri-ink: #0257ab; --pri-tint: rgba(2, 98, 191, .08);
    --pri-rgb: 2, 98, 191;
    /* Sidebar claro y topbar con el color del software (estilo Honoris) */
    --side: #ffffff; --side-ink: #555b78; --side-label: #7c8397; --side-line: #ebedf3; --side-hover: #f3f5fb;
    --side-active-bg: rgba(2, 98, 191, .08); --side-active-ink: #0262bf;
    /* Color de marca (#0262bf): navbar, banner del dashboard y panel izquierdo del login */
    --brand: #0262bf;
    --top-bg: var(--brand); --top-ink: #ffffff; --top-ink2: rgba(255, 255, 255, .78); --top-hover: rgba(255, 255, 255, .14);
    --ok: #1b8a20; --ok-bg: #eafaea; --warn: #a85f00; --warn-bg: #fff4e4;
    --bad: #c62f38; --bad-bg: #fdedee; --info: #1a75bd; --info-bg: #e9f4fe;
    --shadow: 0 1px 3px 0 rgb(0 0 0 / .05);
    /* Bordes de estado (callouts y botones outline) y sólidos de botones */
    --pri-line: rgba(2, 98, 191, .40); --ok-line: rgba(27, 138, 32, .40); --warn-line: rgba(168, 95, 0, .40);
    --bad-line: rgba(198, 47, 56, .40); --info-line: rgba(26, 117, 189, .40);
    --ok-solid: #1f9d26; --ok-solid-hover: #18801e; --bad-solid: #c62f38; --bad-solid-hover: #a8262e;
    --warn-solid: #d17f00; --warn-solid-hover: #b06a00; --info-solid: #1a75bd; --info-solid-hover: #155f9a;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-title: 'Hanken Grotesk', 'Inter', system-ui, sans-serif;
    --side-w: 16rem; --side-w-min: 5rem; --top-h: 4rem;
    /* Pasos de la auditoría (chips y barras de progreso): tonos azules */
    --step-bg: #dbe6f5; --step-ink: #163a6b; --step-line: #b3c8e6; --step-soft: #eef3fa; --step-soft-ink: #4d6687;
    --step-bar: #0262bf; --step-track: #e3e9f3;
}
[data-theme="dark"] {
    color-scheme: dark;
    --bg: #151a2b; --card: #202940; --low: #1a2035; --high: #2a3452; --input: #1a2035; --hover: rgba(255, 255, 255, .04);
    --ink: #e8eaf2; --ink2: #b3b9cc; --muted: #8d94a8; --line: #3a4566; --line2: #2c3654;
    /* En oscuro se aclara el #0262bf para que contraste sobre las tarjetas */
    --pri: #1f74d6; --pri-hover: #3586e3; --pri-ink: #7fb3f2; --pri-tint: rgba(31, 116, 214, .2);
    --pri-rgb: 31, 116, 214;
    --side: #202940; --side-ink: #b3b9cc; --side-label: #8d94a8; --side-line: #2c3654; --side-hover: rgba(255, 255, 255, .04);
    --side-active-bg: rgba(31, 116, 214, .2); --side-active-ink: #7fb3f2;
    --brand: #1a2035;   /* en oscuro la marca conserva el azul oscuro original de la plantilla */
    --top-bg: var(--brand); --top-ink: #ffffff; --top-ink2: rgba(255, 255, 255, .75); --top-hover: rgba(255, 255, 255, .12);
    --ok: #62dc67; --ok-bg: rgba(49, 206, 54, .13); --warn: #ffc06a; --warn-bg: rgba(255, 173, 70, .13);
    --bad: #ff8d93; --bad-bg: rgba(242, 89, 97, .14); --info: #80c4fa; --info-bg: rgba(72, 171, 247, .14);
    --shadow: none;
    --pri-line: rgba(127, 179, 242, .40); --ok-line: rgba(98, 220, 103, .35); --warn-line: rgba(255, 192, 106, .35);
    --bad-line: rgba(255, 141, 147, .35); --info-line: rgba(128, 196, 250, .35);
    --step-bg: rgba(110, 155, 220, .20); --step-ink: #b4cdf0; --step-line: rgba(140, 180, 235, .35);
    --step-soft: rgba(255, 255, 255, .04); --step-soft-ink: #9aa9c2; --step-bar: #4b93e8; --step-track: #2a3452;
}

/* Bootstrap 5.3 y tablas cds-* leen los tokens de la plantilla */
:root, [data-theme] {
    --bs-body-bg: var(--bg); --bs-body-color: var(--ink); --bs-body-font-family: var(--font-body);
    --bs-emphasis-color: var(--ink); --bs-secondary-color: var(--muted); --bs-tertiary-bg: var(--low); --bs-secondary-bg: var(--high);
    --bs-border-color: var(--line); --bs-border-color-translucent: var(--line2);
    --bs-primary: var(--pri); --bs-primary-rgb: var(--pri-rgb); --bs-link-color: var(--pri-ink); --bs-link-hover-color: var(--pri-hover);
    --bs-link-color-rgb: var(--pri-rgb); --bs-link-hover-color-rgb: var(--pri-rgb);
    --bs-border-radius: .5rem; --bs-border-radius-lg: 1rem;
    --cds-layer-01: var(--card); --cds-layer-02: var(--low); --cds-border-subtle: var(--line2); --cds-border-strong: var(--line);
    --cds-text-primary: var(--ink); --cds-text-secondary: var(--ink2); --cds-text-placeholder: var(--muted);
    --cds-link-primary: var(--pri-ink); --cds-hover-row: var(--hover); --cds-font-family: var(--font-body);
    /* Variables que usaba Kaiadmin (main.css las referencia con !important) */
    --primary-color: var(--pri); --secondary-color: var(--ink2); --success-color: var(--ok-solid);
    --info-color: var(--info-solid); --warning-color: var(--warn-solid); --danger-color: var(--bad-solid);
    --white-color: var(--card); --dark-color: var(--ink);
}

/* ---------- Base ---------- */
html, body.pc-body { margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }
body.pc-body {
    font-family: var(--font-body); font-size: .9375rem; line-height: 1.5;
    background: var(--bg); color: var(--ink); overflow: hidden;
}
.pc-body h1, .pc-body h2, .pc-body h3, .pc-body h4, .pc-body h5, .pc-body h6 { font-family: var(--font-title); color: var(--ink); font-weight: 600; }
.pc-body h2 { font-size: 1.75rem; line-height: 2.25rem; }
.pc-body h5 { font-size: 1.0625rem; }
.pc-body a { color: var(--pri-ink); }
.pc-body a:hover { color: var(--pri-hover); }
.pc-body input:focus, .pc-body select:focus, .pc-body textarea:focus,
.pc-body .form-control:focus, .pc-body .form-select:focus {
    outline: none; border-color: var(--pri) !important; box-shadow: 0 0 0 3px var(--pri-tint);
}
.pc-body ::-webkit-scrollbar { width: 8px; height: 8px; }
.pc-body ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.pc-icon { flex-shrink: 0; display: block; }
@keyframes pc-spin { to { transform: rotate(360deg); } }
@keyframes pc-pop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Layout ---------- */
.pc-shell { display: flex; height: 100vh; height: 100dvh; overflow: hidden; background: var(--bg); }

.pc-sidebar {
    width: var(--side-w); flex-shrink: 0; background: var(--side); border-right: 1px solid var(--side-line);
    display: flex; flex-direction: column; height: 100%; transition: width 200ms ease; z-index: 1040;
}
/* Celda del logo con el color de la topbar: forma una sola franja superior (estilo Honoris).
   El logo tiene texto azul oscuro, así que va sobre una placa clara para conservar sus colores. */
.pc-sidebar-logo {
    height: var(--top-h); flex-shrink: 0; background: var(--top-bg); border-right: 1px solid rgba(255, 255, 255, .08);
    margin-right: -1px; display: flex; align-items: center; padding: 0 1rem; overflow: hidden;
}
.pc-logo-full, .pc-logo-mark { display: block; background: #ffffff; border-radius: .5rem; flex-shrink: 0; padding: .2rem .45rem; }
.pc-logo-mark { display: none; padding: .2rem .25rem; }
/* Los PNG originales (Logo_*_programador.png) traen margen transparente: .pc-logo-crop muestra solo el dibujo.
   --h es la altura visible; los factores salen de la caja del dibujo dentro de cada PNG. */
.pc-logo-crop { --h: 2.35rem; display: block; height: var(--h); overflow: hidden; }
.pc-logo-crop img { display: block; max-width: none; }
.pc-logo-crop--largo { width: calc(var(--h) * 4.6288); }   /* 2172x724, dibujo 1995x431 en (112,164) */
.pc-logo-crop--largo img { height: calc(var(--h) * 1.6798); margin: calc(var(--h) * -0.3805) 0 0 calc(var(--h) * -0.2599); }
.pc-logo-crop--corto { width: calc(var(--h) * 1.1179); }   /* 1254x1254, dibujo 967x865 en (148,216) */
.pc-logo-crop--corto img { height: calc(var(--h) * 1.4497); margin: calc(var(--h) * -0.2497) 0 0 calc(var(--h) * -0.1711); }
.pc-nav { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.pc-nav-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 1rem .75rem; display: flex; flex-direction: column; gap: .25rem; }
.pc-nav-foot { flex-shrink: 0; padding: .5rem .75rem .75rem; border-top: 1px solid var(--side-line); display: flex; flex-direction: column; gap: .25rem; }
.pc-nav-label {
    padding: .875rem .75rem .375rem; font-size: .6875rem; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--side-label); white-space: nowrap;
}
.pc-nav-sep { border-top: 1px solid var(--side-line); margin: .5rem 0; }
.pc-body .pc-nav-item {
    display: flex; align-items: center; gap: .75rem; padding: .625rem .75rem; border-radius: .625rem; width: 100%;
    border: 0; background: transparent; cursor: pointer; text-align: left; font-size: .875rem; font-weight: 500;
    color: var(--side-ink); text-decoration: none; line-height: 1.3;
}
.pc-body .pc-nav-item:hover, .pc-body .pc-nav-item:focus-visible { color: var(--ink); background: var(--side-hover); text-decoration: none; }
.pc-body .pc-nav-item.active { color: var(--side-active-ink); font-weight: 600; background: var(--side-active-bg); }
.pc-body .pc-nav-item.pc-nav-salir { color: var(--bad); }
.pc-body .pc-nav-item.pc-nav-salir:hover { background: var(--bad-bg); color: var(--bad); }
.pc-nav-text { flex: 1; min-width: 0; }
.pc-nav-badge { font-size: .6875rem; font-weight: 600; padding: .0625rem .5rem; border-radius: 9999px; background: var(--ok-bg); color: var(--ok); white-space: nowrap; }
.pc-nav-badge.bg-success { background: var(--ok-bg) !important; color: var(--ok); }
.pc-nav-badge.bg-danger { background: var(--bad-bg) !important; color: var(--bad); }
.pc-nav-badge.bg-info { background: var(--info-bg) !important; color: var(--info); }
.pc-nav-badge.pc-badge-unread { background: #F25961 !important; color: #fff; }
.pc-nav-badge:empty { display: none; }
.pc-nav-caret { transition: transform .2s ease; }
.pc-nav-item[aria-expanded="true"] .pc-nav-caret { transform: rotate(90deg); }

/* Submenú (pasos de auditoría) */
.pc-nav-sub { display: none; margin: .125rem 0 .375rem 1.25rem; padding-left: .75rem; border-left: 1px solid var(--side-line); }
.pc-nav-sub.show { display: block; }
.pc-nav-sub ul { list-style: none; margin: 0; padding: 0; }
.pc-nav-sub li { border-radius: .5rem; }
.pc-body .pc-nav-sub a { display: block; padding: .4rem .5rem; color: var(--side-ink); font-size: .8125rem; border-radius: .5rem; text-decoration: none; }
.pc-body .pc-nav-sub a:hover { color: var(--ink); background: var(--side-hover); }
.pc-nav-sub .text-white-50, .pc-nav-sub .text-muted { color: var(--side-label) !important; }
.pc-nav-sub .sub-item { display: flex; align-items: flex-start; gap: 6px; }
.pc-nav-sub .paso-icon { width: 16px; min-width: 16px; margin-top: 2px; }
.pc-nav-sub .paso-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pc-nav-sub .paso-nombre { white-space: normal; word-break: break-word; line-height: 1.3; }
.pc-nav-sub .paso-requerido-tag { font-size: 10px; padding: 1px 7px; border-radius: 9999px; width: fit-content; line-height: 1.4; }
.pc-nav-sub .progress { height: 5px; background: var(--step-track); }
.pc-nav-sub .progress-bar { background-color: var(--step-bar) !important; }
.pc-nav-sub .progress-bar.bg-danger { background-color: var(--bad-solid) !important; }

/* Nombre de un botón citado dentro de un aviso (p. ej. "Continuar proceso") */
.pc-btn-ref {
    display: inline-block; padding: .05rem .5rem; border-radius: .375rem; background: var(--pri); color: #fff;
    font-size: .8125rem; font-weight: 600; white-space: nowrap; line-height: 1.5;
}

/* Acciones de Programación auditoría: botones de texto del mismo ancho */
.pc-acciones-auditoria { display: grid; gap: .375rem; width: 10.5rem; margin: 0 auto; }
.pc-acciones-auditoria .btn { width: 100%; white-space: nowrap; }
.spin-icon { display: inline-block; animation: pc-spin 1s linear infinite; }

.pc-side-card {
    flex-shrink: 0; margin: .75rem; padding: .875rem; border-radius: .875rem;
    border: 1px solid var(--pri-line); background: var(--pri-tint);
    display: flex; flex-direction: column; gap: .25rem;
}
.pc-side-card-label { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pri-ink); }
.pc-side-card-date { font-size: .8125rem; color: var(--ink); font-weight: 500; }
.pc-side-card-rest { font-size: .75rem; color: var(--ink2); }
.pc-side-card.is-vencida { border-color: var(--bad-line); background: var(--bad-bg); }
.pc-side-card.is-vencida .pc-side-card-label { color: var(--bad); }

/* Sidebar contraído (escritorio): solo el símbolo del logo */
html.pc-collapsed .pc-sidebar { width: var(--side-w-min); }
html.pc-collapsed .pc-sidebar-logo { justify-content: center; padding: 0; }
html.pc-collapsed .pc-logo-full { display: none; }
html.pc-collapsed .pc-logo-mark { display: block; }
html.pc-collapsed .pc-nav-label, html.pc-collapsed .pc-nav-text, html.pc-collapsed .pc-nav-badge,
html.pc-collapsed .pc-nav-caret, html.pc-collapsed .pc-side-card, html.pc-collapsed .pc-nav-sub { display: none !important; }
html.pc-collapsed .pc-body .pc-nav-item { justify-content: center; }

.pc-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.pc-topbar {
    height: var(--top-h); flex-shrink: 0; background: var(--top-bg); color: var(--top-ink);
    display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; gap: .75rem;
    position: relative; z-index: 1030;   /* el dropdown de la campana queda sobre el contenido */
}
.pc-topbar-left { display: flex; align-items: center; gap: .75rem; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.pc-topbar-right { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.pc-company { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.pc-company-name { font-size: .875rem; font-weight: 600; color: var(--top-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-company-meta { font-size: .75rem; color: var(--top-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-body .pc-icon-btn {
    position: relative; padding: .5rem; border-radius: .5rem; color: var(--top-ink2); background: none; border: 0;
    cursor: pointer; display: inline-flex; text-decoration: none;
}
.pc-body .pc-icon-btn:hover, .pc-body .pc-icon-btn[aria-expanded="true"] { background: var(--top-hover); color: var(--top-ink); }
.pc-body .pc-icon-btn:focus { outline: none; }
.pc-body .pc-icon-btn:focus-visible { box-shadow: 0 0 0 3px rgba(118, 172, 246, .45); }
.pc-bell-count {
    position: absolute; top: .15rem; right: .15rem; min-width: 16px; height: 16px; padding: 0 3px; background: #F25961;
    color: #fff; font-size: 10px; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
}
.pc-chip-deadline {
    display: inline-flex; align-items: center; gap: .4rem; padding: .375rem .75rem; border-radius: 9999px;
    background: var(--warn-bg); color: var(--warn); font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.pc-chip-deadline.is-vencida { background: var(--bad-bg); color: var(--bad); }
.pc-avatar {
    width: 2rem; height: 2rem; border-radius: 9999px; background: #fff; color: var(--brand); display: flex;   /* contrasta sobre la navbar azul */
    align-items: center; justify-content: center; font-weight: 600; font-size: .8rem; flex-shrink: 0;
}
.pc-theme-dark-icon { display: none; }
[data-theme="dark"] .pc-theme-dark-icon { display: block; }
[data-theme="dark"] .pc-theme-light-icon { display: none; }

.pc-content { flex: 1 1 auto; overflow-y: auto; padding: 1.75rem 2rem; }
.pc-container { max-width: 1320px; margin: 0 auto; }
.pc-footer { background: var(--card); border-top: 1px solid var(--line2); text-align: center; padding: .75rem; flex-shrink: 0; }
.pc-body .pc-footer a { color: var(--ink2); font-size: .75rem; }
.pc-footer-copy { font-size: 11px; color: var(--ink2); margin-top: .1rem; }
.pc-backdrop { display: none; }

/* Móvil / tablet: sidebar como panel deslizable */
@media (max-width: 991.98px) {
    .pc-sidebar { position: fixed; inset: 0 auto 0 0; transform: translateX(-100%); transition: transform 200ms ease; width: var(--side-w) !important; }
    html.pc-collapsed .pc-nav-label, html.pc-collapsed .pc-nav-text, html.pc-collapsed .pc-nav-badge,
    html.pc-collapsed .pc-nav-caret, html.pc-collapsed .pc-side-card { display: revert !important; }
    html.pc-collapsed .pc-body .pc-nav-item { justify-content: flex-start; }
    html.pc-collapsed .pc-nav-sub.show { display: block !important; }
    html.pc-collapsed .pc-logo-full { display: block; } html.pc-collapsed .pc-logo-mark { display: none; }
    html.pc-collapsed .pc-sidebar-logo { justify-content: flex-start; padding: 0 1.125rem; }
    html.pc-side-open .pc-sidebar { transform: none; }
    html.pc-side-open .pc-backdrop { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, .5); z-index: 1035; }
    .pc-topbar { padding: 0 1rem; }
    .pc-content { padding: 1.25rem 1rem; }
    .pc-chip-deadline span { display: none; }
}
@media (max-width: 575.98px) {
    .pc-company-meta, .pc-chip-deadline { display: none; }
}

/* Compatibilidad con vistas que aún usan clases de Kaiadmin */
.page-inner { padding: 0; }
.pc-body .table-head-bg-principal thead th, .pc-body .table-head-bg-principal thead td { background: var(--low) !important; color: var(--ink2) !important; }

/* ---------- Encabezado de página ---------- */
.pc-eyebrow { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--pri-ink); margin-bottom: .25rem; }
.pc-page-title { font-family: var(--font-title); font-size: 2rem; line-height: 2.5rem; font-weight: 600; color: var(--ink); margin: 0; }
.pc-page-sub { color: var(--ink2); margin: .25rem 0 0; }
/* Las vistas existentes usan <h2> como título de página: toma el estilo de la plantilla */
.pc-body .pc-container h2 { font-family: var(--font-title); font-size: 2rem; line-height: 2.5rem; font-weight: 600; color: var(--ink); margin-bottom: .5rem; }
.pc-body .pc-container .modal h2 { font-size: 1.25rem; line-height: 1.75rem; }
.pc-body .pc-container hr { border-color: var(--line2); opacity: 1; }

/* ---------- Componentes Bootstrap ---------- */
.pc-body .card, .pc-body .modal-content, .pc-body .tab-content.bg-white {
    background: var(--card) !important; border: 1px solid var(--line2); border-radius: 1rem; box-shadow: var(--shadow); color: var(--ink);
}
.pc-body .card-header { background: transparent; border-bottom: 1px solid var(--line2); }
.pc-body .modal-header, .pc-body .modal-footer { border-color: var(--line2); }
.pc-body .modal-content { animation: pc-pop 160ms ease; }
.pc-body .modal-backdrop.show { opacity: 1; background: rgba(15, 23, 42, .5); }
.pc-body hr { border-color: var(--line2); opacity: 1; }
.pc-body .bg-white { background-color: var(--card) !important; }
.pc-body .text-muted { color: var(--muted) !important; }
.pc-body .bg-light { background-color: var(--low) !important; }
.pc-body .text-dark, .pc-body .text-black { color: var(--ink) !important; }
.pc-body .text-secondary { color: var(--ink2) !important; }
.pc-body .border, .pc-body .border-top, .pc-body .border-bottom, .pc-body .border-start, .pc-body .border-end { border-color: var(--line2) !important; }
.pc-body .border.border-danger, .pc-body .border-danger { border-color: var(--bad) !important; }
.pc-body .border.border-warning, .pc-body .border-warning { border-color: var(--warn) !important; }
.pc-body .border.border-success, .pc-body .border-success { border-color: var(--ok) !important; }
.pc-body .border.border-primary, .pc-body .border-primary { border-color: var(--pri) !important; }
.pc-body .border.border-info, .pc-body .border-info { border-color: var(--info) !important; }

/* ---------- Botones (sistema de la plantilla) ----------
 * Sólidos: color pleno, hover más oscuro. Outline: borde del color + texto, hover con fondo teñido.
 * Secundario / light / default: fondo de tarjeta con borde. !important para vencer main.css (legado Kaiadmin). */
.pc-body .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
    border-radius: .5rem; font-weight: 500; font-size: .875rem; line-height: 1.25rem; padding: .5rem .875rem;
    border-width: 1px; transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.pc-body .btn-sm, .pc-body .btn-xs { font-size: .8125rem; padding: .3125rem .625rem; border-radius: .4375rem; }
.pc-body .btn-lg { font-size: 1rem; padding: .625rem 1.125rem; }
.pc-body .btn:focus-visible { box-shadow: 0 0 0 3px var(--pri-tint) !important; outline: none; }
.pc-body .btn:disabled, .pc-body .btn.disabled { opacity: .5; }
.pc-body .btn-close { display: inline-block; padding: .25em; }

.pc-body .btn-primary { background: var(--pri) !important; border-color: var(--pri) !important; color: #fff !important; }
.pc-body .btn-primary:hover, .pc-body .btn-primary:active { background: var(--pri-hover) !important; border-color: var(--pri-hover) !important; color: #fff !important; }
.pc-body .btn-success { background: var(--ok-solid) !important; border-color: var(--ok-solid) !important; color: #fff !important; }
.pc-body .btn-success:hover, .pc-body .btn-success:active { background: var(--ok-solid-hover) !important; border-color: var(--ok-solid-hover) !important; color: #fff !important; }
.pc-body .btn-danger { background: var(--bad-solid) !important; border-color: var(--bad-solid) !important; color: #fff !important; }
.pc-body .btn-danger:hover, .pc-body .btn-danger:active { background: var(--bad-solid-hover) !important; border-color: var(--bad-solid-hover) !important; color: #fff !important; }
.pc-body .btn-warning { background: var(--warn-solid) !important; border-color: var(--warn-solid) !important; color: #fff !important; }
.pc-body .btn-warning:hover, .pc-body .btn-warning:active { background: var(--warn-solid-hover) !important; border-color: var(--warn-solid-hover) !important; color: #fff !important; }
.pc-body .btn-info { background: var(--info-solid) !important; border-color: var(--info-solid) !important; color: #fff !important; }
.pc-body .btn-info:hover, .pc-body .btn-info:active { background: var(--info-solid-hover) !important; border-color: var(--info-solid-hover) !important; color: #fff !important; }

.pc-body .btn-outline-primary { background: transparent !important; border-color: var(--pri-line) !important; color: var(--pri-ink) !important; }
.pc-body .btn-outline-primary:hover, .pc-body .btn-outline-primary:active, .pc-body .btn-check:checked + .btn-outline-primary { background: var(--pri-tint) !important; border-color: var(--pri) !important; color: var(--pri-ink) !important; }
.pc-body .btn-outline-success { background: transparent !important; border-color: var(--ok-line) !important; color: var(--ok) !important; }
.pc-body .btn-outline-success:hover, .pc-body .btn-outline-success:active { background: var(--ok-bg) !important; border-color: var(--ok) !important; color: var(--ok) !important; }
.pc-body .btn-outline-danger { background: transparent !important; border-color: var(--bad-line) !important; color: var(--bad) !important; }
.pc-body .btn-outline-danger:hover, .pc-body .btn-outline-danger:active { background: var(--bad-bg) !important; border-color: var(--bad) !important; color: var(--bad) !important; }
.pc-body .btn-outline-warning { background: transparent !important; border-color: var(--warn-line) !important; color: var(--warn) !important; }
.pc-body .btn-outline-warning:hover, .pc-body .btn-outline-warning:active { background: var(--warn-bg) !important; border-color: var(--warn) !important; color: var(--warn) !important; }
.pc-body .btn-outline-info { background: transparent !important; border-color: var(--info-line) !important; color: var(--info) !important; }
.pc-body .btn-outline-info:hover, .pc-body .btn-outline-info:active { background: var(--info-bg) !important; border-color: var(--info) !important; color: var(--info) !important; }

.pc-body .btn-secondary, .pc-body .btn-outline-secondary, .pc-body .btn-light, .pc-body .btn-default, .pc-body .btn-outline-light {
    background: var(--card) !important; border-color: var(--line) !important; color: var(--ink2) !important;
}
.pc-body .btn-secondary:hover, .pc-body .btn-outline-secondary:hover, .pc-body .btn-light:hover,
.pc-body .btn-default:hover, .pc-body .btn-outline-light:hover {
    background: var(--high) !important; border-color: var(--line) !important; color: var(--ink) !important;
}
.pc-body .btn-link { color: var(--pri-ink) !important; background: transparent !important; border-color: transparent !important; text-decoration: none; }
.pc-body .btn-link:hover { color: var(--pri-hover) !important; background: var(--pri-tint) !important; }

/* Botones dentro de tablas
 * - Solo ícono (.pc-btn-icon, lo asigna portal-layout.js): sin fondo ni borde, ícono gris; hover suave (estilo Honoris).
 * - Con texto: color principal de la plantilla, teñido y compacto. Los de peligro conservan el rojo. */
.pc-body table td .btn { padding: .3125rem .625rem; font-size: .8125rem; border-radius: .5rem; }
.pc-body table td .btn:not(.pc-btn-icon) { background: var(--pri-tint) !important; border-color: transparent !important; color: var(--pri-ink) !important; }
.pc-body table td .btn:not(.pc-btn-icon):hover { background: var(--pri) !important; border-color: var(--pri) !important; color: #fff !important; }
.pc-body table td .btn-danger:not(.pc-btn-icon), .pc-body table td .btn-outline-danger:not(.pc-btn-icon) { background: var(--bad-bg) !important; color: var(--bad) !important; }
.pc-body table td .btn-danger:not(.pc-btn-icon):hover, .pc-body table td .btn-outline-danger:not(.pc-btn-icon):hover { background: var(--bad-solid) !important; border-color: var(--bad-solid) !important; color: #fff !important; }

.pc-body table td .btn.pc-btn-icon {
    width: 2rem; height: 2rem; padding: 0; border-radius: .5rem;
    background: transparent !important; border-color: transparent !important; color: var(--muted) !important;
}
.pc-body table td .btn.pc-btn-icon:hover, .pc-body table td .btn.pc-btn-icon:focus-visible { background: var(--pri-tint) !important; color: var(--pri-ink) !important; }
.pc-body table td .btn.pc-btn-icon.btn-danger:hover, .pc-body table td .btn.pc-btn-icon.btn-outline-danger:hover,
.pc-body table td .btn.pc-btn-icon.btn-hover-danger:hover { background: var(--bad-bg) !important; color: var(--bad) !important; }
.pc-body table td .btn.pc-btn-icon i, .pc-body table td .btn.pc-btn-icon svg { font-size: 1rem; }
.pc-body table td .btn.pc-btn-icon.disabled, .pc-body table td .btn.pc-btn-icon:disabled { opacity: .35; }

.pc-body .form-control, .pc-body .form-select {
    background-color: var(--input); border: 1px solid var(--line); color: var(--ink); border-radius: .5rem; min-height: 2.625rem; font-size: .9375rem;
}
.pc-body .form-control:disabled, .pc-body .form-control[readonly] { background-color: var(--low); color: var(--muted); }
/* Validación Bootstrap: el borde de estado gana sobre el borde base del tema (lo usa campos_con_error.js) */
.pc-body .form-control.is-invalid, .pc-body .form-select.is-invalid, .pc-body .was-validated .form-control:invalid { border-color: var(--bad) !important; }
.pc-body .form-control.is-invalid:focus, .pc-body .form-select.is-invalid:focus { box-shadow: 0 0 0 3px var(--bad-bg); }
.pc-body .form-control.is-valid, .pc-body .form-select.is-valid { border-color: var(--ok) !important; }
.pc-body .invalid-feedback { color: var(--bad); font-size: .8125rem; }
.pc-body label, .pc-body .form-label { font-size: .875rem; font-weight: 500; color: var(--ink2); }

.pc-body .table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-striped-bg: var(--low); --bs-table-hover-bg: var(--hover); --bs-table-border-color: var(--line2); color: var(--ink); }
.pc-body .table thead th, .pc-body .table-light th, .pc-body .table-primary th {
    background: var(--low) !important; color: var(--ink2) !important; font-size: .75rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--line2);
}
.pc-body .table-responsive { border: 1px solid var(--line2); border-radius: .75rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pc-body table.dataTable { width: 100% !important; }
.pc-body .table-responsive > .table { margin-bottom: 0; }
.pc-body .dataTables_wrapper .dataTables_filter input, .pc-body .dataTables_wrapper .dataTables_length select {
    background: var(--input); border: 1px solid var(--line); border-radius: .5rem; color: var(--ink); padding: .25rem .5rem;
}
.pc-body .dataTables_wrapper .dataTables_info, .pc-body .dataTables_wrapper .dataTables_paginate { color: var(--muted); font-size: .8125rem; }
.pc-body .page-link { background: var(--card); border-color: var(--line2); color: var(--pri-ink); }
.pc-body .page-item.active .page-link { background: var(--pri); border-color: var(--pri); color: #fff; }

/* Botones de acción en tablas: ícono + tooltip */
.pc-body .pc-action {
    display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0;
    border: 0; border-radius: .5rem; background: transparent; color: var(--muted);
}
.pc-body .pc-action:hover, .pc-body .pc-action:focus-visible { background: var(--pri-tint); color: var(--pri-ink); }
.pc-body .pc-action.pc-action-danger:hover, .pc-body .pc-action.pc-action-danger:focus-visible { background: var(--bad-bg); color: var(--bad); }
.pc-body .pc-action:disabled, .pc-body .pc-action.disabled { opacity: .4; pointer-events: none; }

/* Alertas como callouts de la plantilla */
.pc-body .alert { border: 1px solid transparent; border-radius: .75rem; padding: .875rem 1.25rem; font-size: .875rem; }
.pc-body .alert h5 { font-size: .9375rem; margin-bottom: .25rem; color: inherit; }
.pc-body .alert-info { background: var(--info-bg); color: var(--info); border-color: var(--info-line); }
.pc-body .alert-primary { background: var(--pri-tint); color: var(--pri-ink); border-color: var(--pri-line); }
.pc-body .alert-warning { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.pc-body .alert-danger { background: var(--bad-bg); color: var(--bad); border-color: var(--bad-line); }
.pc-body .alert-success { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.pc-body .alert strong, .pc-body .alert ol, .pc-body .alert ul, .pc-body .alert p { color: var(--ink2); }
.pc-body .alert-info h5, .pc-body .alert-info > .bi { color: var(--info); }
.pc-body .info { background: var(--info-bg); color: var(--info); border: 1px solid var(--info-line); border-radius: .75rem; }

/* Pestañas */
.pc-body .nav-tabs { border-bottom: 1px solid var(--line2); gap: .25rem; }
.pc-body .nav-tabs .nav-link { color: var(--ink2); border: 0; border-bottom: 2px solid transparent; font-weight: 500; }
.pc-body .nav-tabs .nav-link:hover { color: var(--ink); background: var(--hover); }
.pc-body .nav-tabs .nav-link.active { color: var(--pri-ink); background: transparent; border-bottom-color: var(--pri); }

/* Badges tipo pastilla */
.pc-pill { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .625rem; border-radius: 9999px; font-size: .75rem; font-weight: 600; }
.pc-pill-ok { background: var(--ok-bg); color: var(--ok); }
.pc-pill-warn { background: var(--warn-bg); color: var(--warn); }
.pc-pill-bad { background: var(--bad-bg); color: var(--bad); }
.pc-pill-info { background: var(--info-bg); color: var(--info); }
.pc-pill-neu { background: var(--high); color: var(--ink2); }
.pc-pill:empty { display: none; }

/* Toasts (abajo a la derecha, punto de color) */
.pc-toast-container { z-index: 3500; }
.pc-body .pc-toast {
    background: var(--card); color: var(--ink); border: 1px solid var(--line2); border-radius: .625rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1); font-size: .8125rem; font-weight: 500; animation: pc-pop 160ms ease;
}
.pc-toast-dot { width: .5rem; height: .5rem; border-radius: 9999px; flex-shrink: 0; margin-left: .875rem; }
.pc-toast-ok .pc-toast-dot { background: var(--ok); }
.pc-toast-bad .pc-toast-dot { background: var(--bad); }
.pc-body .pc-toast .btn-close { filter: none; }
[data-theme="dark"] .pc-body .pc-toast .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* Alertas del portal (SweetAlert2 en modo toast, minimalistas) */
/* Arriba a la derecha, bajo la topbar (abajo está el botón de WhatsApp) */
.swal2-container.swal2-top-end { padding: calc(var(--top-h) + .75rem) 1.5rem 1.5rem; z-index: 3500; }
.swal2-popup.swal2-toast.pc-swal {
    display: flex !important; align-items: flex-start; gap: .5rem; width: min(24rem, calc(100vw - 2rem));
    padding: .75rem .75rem .875rem .875rem; background: var(--card); color: var(--ink);
    border: 1px solid var(--line2); border-left: 3px solid var(--pri); border-radius: .75rem;
    box-shadow: 0 10px 25px -8px rgb(15 23 42 / .25); font-family: var(--font-body);
}
.pc-swal-ok { border-left-color: var(--ok) !important; }
.pc-swal-bad { border-left-color: var(--bad) !important; }
.pc-swal-warn { border-left-color: var(--warn) !important; }
.pc-swal-info { border-left-color: var(--info) !important; }
.swal2-popup.swal2-toast .pc-swal-html { margin: 0; padding: 0; text-align: left; flex: 1; min-width: 0; font-size: .8125rem; color: var(--ink2); }
.pc-swal-body { display: flex; align-items: flex-start; gap: .625rem; }
.pc-swal-dot { width: .5rem; height: .5rem; border-radius: 9999px; margin-top: .375rem; flex-shrink: 0; background: var(--pri); }
.pc-swal-ok .pc-swal-dot { background: var(--ok); }
.pc-swal-bad .pc-swal-dot { background: var(--bad); }
.pc-swal-warn .pc-swal-dot { background: var(--warn); }
.pc-swal-info .pc-swal-dot { background: var(--info); }
.pc-swal-text { min-width: 0; line-height: 1.45; }
.pc-swal-title { display: block; font-size: .8125rem; font-weight: 600; color: var(--ink); margin-bottom: .125rem; }
.pc-swal-msg { word-break: break-word; }
.pc-swal-msg ul, .pc-swal-msg ol { margin: .25rem 0 0; padding-left: 1.1rem; }
.swal2-popup.swal2-toast .pc-swal-close {
    position: static; order: 2; width: 1.5rem; height: 1.5rem; margin: 0; font-size: 1.125rem; color: var(--muted);
    border-radius: .375rem; flex-shrink: 0; box-shadow: none !important;
}
.swal2-popup.swal2-toast .pc-swal-close:hover { color: var(--ink); background: var(--hover); }
.swal2-popup.swal2-toast .pc-swal-progress { height: 2px; background: var(--line); }
.pc-swal-ok .pc-swal-progress { background: var(--ok-line); }
.pc-swal-bad .pc-swal-progress { background: var(--bad-line); }
.pc-swal-warn .pc-swal-progress { background: var(--warn-line); }
.pc-swal-info .pc-swal-progress { background: var(--info-line); }
.pc-swal-in { animation: pc-pop 160ms ease; }
.pc-swal-out { animation: pc-pop 120ms ease reverse forwards; }

/* Dropdown de notificaciones (campana) */
.pc-notif-menu {
    width: min(24rem, calc(100vw - 2rem)); padding: 0; background: var(--card); color: var(--ink);
    border: 1px solid var(--line2); border-radius: .875rem; box-shadow: 0 12px 30px -10px rgb(15 23 42 / .3); overflow: hidden;
}
.pc-notif-head { display: flex; justify-content: space-between; align-items: center; padding: .75rem 1rem; border-bottom: 1px solid var(--line2); }
.pc-notif-head strong { font-family: var(--font-title); font-size: .9375rem; }
.pc-notif-list { max-height: 22rem; overflow-y: auto; }
.pc-body .pc-notif-item {
    display: flex; gap: .625rem; padding: .75rem 1rem; border-bottom: 1px solid var(--line2);
    color: var(--ink); text-decoration: none;
}
.pc-body .pc-notif-item:hover { background: var(--hover); color: var(--ink); }
.pc-notif-dot { width: .5rem; height: .5rem; border-radius: 9999px; margin-top: .375rem; flex-shrink: 0; background: transparent; }
.pc-notif-item.is-nueva .pc-notif-dot { background: #F25961; }
.pc-notif-item.is-nueva .pc-notif-title { font-weight: 600; }
.pc-notif-title { display: block; font-size: .8125rem; line-height: 1.35; }
.pc-notif-date { display: block; font-size: .75rem; color: var(--muted); margin-top: .125rem; }
.pc-notif-empty { padding: 1.5rem 1rem; text-align: center; color: var(--muted); font-size: .8125rem; }
.pc-body .pc-notif-foot { display: block; text-align: center; padding: .625rem; font-size: .8125rem; font-weight: 500; }
.pc-body .pc-notif-foot:hover { background: var(--pri-tint); }

/* Tooltip (tippy) con el estilo de la plantilla */
.tippy-box { background: #1a2035; color: #fff; font-size: .75rem; font-weight: 500; line-height: 1.4; border-radius: .5rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / .15); }
.tippy-box .tippy-arrow { color: #1a2035; }
.tippy-content { padding: .3rem .55rem; }

/* Loader global */
.loader_header {
    position: fixed; inset: 0; display: flex; justify-content: center; align-items: center;
    background-color: rgb(26 32 53 / 70%); backdrop-filter: blur(5px); z-index: 99999999;
}
.spinner_header {
    width: 100px; height: 100px; border-radius: 50%; display: inline-block; position: relative; border: 14px solid;
    border-color: rgba(255, 255, 255, .15) #fff rgba(255, 255, 255, .35) #fff; box-sizing: border-box; animation: pc-spin 1s linear infinite;
}
.logo_ccs { width: 45px; height: 45px; position: absolute; margin: auto; inset: 0; }

/* Acciones de fila sin btn-group: botones sueltos con separación */
.pc-acciones-fila { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .375rem; }

/* Novedades del cargue: estado con texto, chips de campos a corregir y "+N más" */
.pc-body .pc-estado { margin: 0 .25rem .25rem 0; cursor: default; white-space: nowrap; }
.pc-body .pc-estado:focus-visible, .pc-body .pc-campo-chip:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }
.pc-campos { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .25rem; margin-top: .125rem; }
.pc-body .pc-campo-chip {
    display: inline-flex; align-items: center; padding: .0625rem .5rem; border-radius: .375rem; font-size: .75rem; font-weight: 500;
    background: var(--high); color: var(--ink2); border: 1px solid var(--line); cursor: default; line-height: 1.5;
}
.pc-body .pc-campo-no_encontrado, .pc-body .pc-campo-no_permitido, .pc-body .pc-campo-fecha_invalida { background: var(--bad-bg); color: var(--bad); border-color: var(--bad-line); }
.pc-body .pc-campo-vacio, .pc-body .pc-campo-fuera_rango, .pc-body .pc-campo-duplicado { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.pc-campos-mas { display: inline-block; }
.pc-campos-vacio { display: block; margin-top: .25rem; font-size: .75rem; color: var(--muted); font-style: italic; }
.pc-campos-mas > summary {
    display: inline-flex; align-items: center; list-style: none; cursor: pointer; padding: .0625rem .5rem; border-radius: .375rem;
    font-size: .75rem; font-weight: 600; color: var(--pri-ink); border: 1px dashed var(--pri-line);
}
.pc-campos-mas > summary::-webkit-details-marker { display: none; }
.pc-campos-mas[open] { flex-basis: 100%; }
.pc-campos-mas[open] > summary { background: var(--pri-tint); }
.pc-campos-mas > .pc-campos { margin-top: .25rem; }

/* Leyenda de la pestaña Novedades */
.pc-leyenda-novedades { font-size: .8125rem; color: var(--ink2); margin-bottom: 1rem; }
.pc-leyenda-titulo { display: block; font-weight: 600; color: var(--ink); margin-bottom: .375rem; }
.pc-leyenda-lista { display: flex; flex-wrap: wrap; gap: .375rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.pc-leyenda-lista li { display: flex; align-items: center; gap: .375rem; }
.pc-leyenda-lista .pc-pill, .pc-leyenda-lista .pc-campo-chip { white-space: nowrap; flex-shrink: 0; }

/* Modal "Resumen del cargue" */
.pc-resumen-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; }
.pc-resumen-kpi { display: flex; flex-direction: column; padding: .75rem 1rem; border-radius: .75rem; }
.pc-resumen-kpi-num { font-family: var(--font-title); font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.pc-resumen-kpi-txt { font-size: .8125rem; color: var(--ink2); }
.pc-body .pc-resumen-tabla th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pc-resumen-total { min-width: 9rem; }
.pc-resumen-num { font-weight: 700; }
.pc-resumen-barra { display: block; height: 6px; margin-top: .25rem; border-radius: 9999px; background: var(--step-bar); }

/* Pasos del modal de cargue masivo: texto normal; solo el enlace de descarga lleva color */
.pc-body .pc-cargue-pasos { color: var(--ink); font-size: .9375rem; line-height: 1.6; }
.pc-body .pc-cargue-pasos ol { padding-left: 1.25rem; }
.pc-body .pc-link-descarga { color: var(--pri-ink); font-weight: 600; text-decoration: underline; }
.pc-body .pc-link-descarga:hover { color: var(--pri-hover); }

/* Guardado de Estadística ATEL: solo el botón flotante, sin franja que tape los campos */
.pc-body .atel-barra-guardado { background: transparent; border: 0; box-shadow: none; }
.pc-body .atel-cambios-pendientes { color: var(--warn); }

@media (prefers-reduced-motion: reduce) {
    .pc-sidebar, .pc-body .modal-content, .pc-body .pc-toast { transition: none; animation: none; }
}

/* ---------- Dashboard (Inicio) ---------- */
.pc-dash { display: flex; flex-direction: column; gap: 1.5rem; }
.pc-dash > .mb-4 { margin-bottom: 0 !important; }
.pc-dash-banner {
    position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    padding: 2rem 2.25rem; border-radius: 1rem; background: var(--brand); color: #fff; min-height: 10rem;
}
.pc-dash-banner-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .08; pointer-events: none; }
.pc-dash-banner-text, .pc-dash-banner-count { position: relative; }
.pc-dash-banner-eyebrow { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .8); margin-bottom: .5rem; }
.pc-body .pc-container .pc-dash-banner-title { font-family: var(--font-title); font-size: 1.125rem; line-height: 1.5rem; font-weight: 500; color: #fff; margin: 0; max-width: 40ch; }
.pc-dash-banner-sub { margin: .5rem 0 0; font-size: .875rem; color: rgba(255, 255, 255, .72); }
.pc-dash-banner-count { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; line-height: 1; }
.pc-dash-banner-count-label { font-size: .875rem; color: rgba(255, 255, 255, .72); margin-bottom: .25rem; }
.pc-dash-banner-count-num { font-family: var(--font-title); font-size: 4rem; font-weight: 700; color: #fff; }
.pc-dash-banner-count-unit { font-size: 1rem; color: rgba(255, 255, 255, .8); margin-top: .25rem; }
.pc-dash-banner.is-vencida .pc-dash-banner-eyebrow { color: #ffd2d5; }
/* Estado de la auditoría (informativo) dentro de la tarjeta azul: fila completa bajo el texto */
.pc-dash-banner { flex-wrap: wrap; }
.pc-dash-estado { position: relative; width: 100%; padding-top: .5rem; }
/* Con pasos: "Cierra en 15" en una fila y "días" debajo, pegado a la esquina superior derecha */
.pc-dash-banner.has-estado .pc-dash-banner-count {
    display: grid; grid-template-columns: auto auto; column-gap: .375rem; align-items: baseline; justify-items: end;
    align-self: flex-start; margin: -.75rem -1rem 0 0;
}
.pc-dash-banner.has-estado .pc-dash-banner-count-label { margin-bottom: 0; }
.pc-dash-banner.has-estado .pc-dash-banner-count-num { font-size: 1.75rem; }
.pc-dash-banner.has-estado .pc-dash-banner-count-unit { grid-column: 1 / -1; font-size: .875rem; margin-top: .125rem; }
.pc-dash-banner.has-estado .pc-dash-banner-sub { margin-top: .25rem; }
.pc-dash-estado-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.pc-dash-estado-paso { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; opacity: .6; }
.pc-dash-estado-paso:not(:last-child)::after {
    content: ""; position: absolute; top: 1.1875rem; left: calc(50% + 1.75rem); right: calc(-50% + .75rem); height: 2px; background: rgba(255, 255, 255, .25);
}
.pc-dash-estado-icon {
    width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center; border: 2px solid rgba(255, 255, 255, .45); background: var(--brand); color: #fff;
}
.pc-dash-estado-text { display: flex; flex-direction: column; align-items: center; gap: .125rem; min-width: 0; }
.pc-dash-estado-titulo { font-size: .9375rem; font-weight: 600; color: #fff; }
.pc-dash-estado-desc { font-size: .8125rem; color: rgba(255, 255, 255, .75); }
.pc-dash-estado-paso.is-done, .pc-dash-estado-paso.is-current { opacity: 1; }
.pc-dash-estado-paso.is-done .pc-dash-estado-icon { background: rgba(255, 255, 255, .2); border-color: transparent; }
.pc-dash-estado-paso.is-done::after { background: rgba(255, 255, 255, .7); }
.pc-dash-estado-paso.is-current .pc-dash-estado-icon { background: #fff; color: var(--brand); border-color: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .25); }
@media (max-width: 575.98px) {
    .pc-dash-estado-pasos { grid-template-columns: minmax(0, 1fr); }
    .pc-dash-estado-paso { flex-direction: row; align-items: center; text-align: left; }
    .pc-dash-estado-text { align-items: flex-start; }
    .pc-dash-estado-paso:not(:last-child)::after { display: none; }
}
/* KPI con barra de progreso (documentos de la auditoría) */
.pc-kpi-body.is-wide { flex: 1; }
.pc-kpi-bar { display: block; height: .375rem; margin-top: .5rem; border-radius: 9999px; background: var(--line2); overflow: hidden; }
.pc-kpi-bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--pri); transition: width .3s ease; }
.pc-kpi-bar-fill.is-ok { background: var(--ok-solid); }

.pc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
/* Con 6 indicadores: 2 filas de 3 (evita una fila de 5 + 1); en pantallas angostas 2 y luego 1 columna */
.pc-kpis:has(> :nth-child(6)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 991.98px) { .pc-kpis:has(> :nth-child(6)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .pc-kpis:has(> :nth-child(6)) { grid-template-columns: minmax(0, 1fr); } }
.pc-body .pc-kpi {
    display: flex; align-items: center; gap: 1rem; padding: 1.25rem; border-radius: 1rem; text-decoration: none;
    background: var(--card); border: 1px solid var(--line2); box-shadow: var(--shadow); color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pc-body .pc-kpi:hover { border-color: var(--pri-line); box-shadow: 0 6px 16px -8px rgb(15 23 42 / .2); transform: translateY(-1px); color: var(--ink); }
.pc-kpi-icon { width: 3.25rem; height: 3.25rem; border-radius: .875rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pc-kpi-body { display: flex; flex-direction: column; min-width: 0; }
.pc-kpi-value { font-family: var(--font-title); font-size: 1.875rem; line-height: 2.25rem; font-weight: 600; color: var(--ink); }
.pc-kpi-value small { font-size: 1rem; color: var(--muted); font-weight: 500; }
.pc-kpi-label { font-size: .875rem; color: var(--ink2); }
.pc-tone-pri { background: var(--pri-tint); color: var(--pri-ink); }
.pc-tone-ok { background: var(--ok-bg); color: var(--ok); }
.pc-tone-warn { background: var(--warn-bg); color: var(--warn); }
.pc-tone-bad { background: var(--bad-bg); color: var(--bad); }
.pc-tone-info { background: var(--info-bg); color: var(--info); }

.pc-dash-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.pc-dash-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.pc-body .pc-dash-card { padding: 1.5rem; display: flex; flex-direction: column; }
.pc-dash-card-head { margin-bottom: 1rem; }
.pc-dash-card-head h3 { font-family: var(--font-title); font-size: 1.125rem; font-weight: 600; margin: 0; color: var(--ink); }
.pc-dash-card-head p { margin: .25rem 0 0; font-size: .875rem; color: var(--ink2); }

.pc-todo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.pc-body .pc-todo-item {
    display: flex; align-items: center; gap: .875rem; padding: .75rem .875rem; border-radius: .75rem;
    border: 1px solid var(--line2); color: var(--ink); text-decoration: none;
}
.pc-body .pc-todo-item:hover { background: var(--hover); border-color: var(--line); color: var(--ink); }
.pc-todo-icon { width: 2.25rem; height: 2.25rem; border-radius: .625rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pc-todo-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pc-todo-title { font-size: .875rem; font-weight: 600; }
.pc-todo-desc { font-size: .8125rem; color: var(--ink2); }
.pc-todo-chev { color: var(--muted); }
.pc-todo-empty { display: flex; align-items: center; gap: .75rem; padding: 1rem; border-radius: .75rem; background: var(--ok-bg); color: var(--ok); font-size: .875rem; font-weight: 500; }

.pc-bars { display: flex; flex-direction: column; gap: 1rem; }
.pc-bar-head { display: flex; justify-content: space-between; font-size: .875rem; color: var(--ink2); margin-bottom: .375rem; }
.pc-bar-pct { font-weight: 600; color: var(--ink); }
.pc-bar-track { height: .5rem; border-radius: 9999px; background: var(--high); overflow: hidden; }
.pc-bar-fill { display: block; height: 100%; border-radius: 9999px; background: var(--step-bar); transition: width .4s ease; }
.pc-bar-fill.is-ok { background: #31CE36; }

@media (max-width: 991.98px) {
    .pc-dash-grid { grid-template-columns: minmax(0, 1fr); }
    .pc-dash-banner { flex-direction: column; align-items: flex-start; padding: 1.5rem; }
    .pc-dash-banner-count { align-items: flex-start; }
    .pc-dash-banner-count-num { font-size: 3rem; }
    .pc-dash-banner.has-estado .pc-dash-banner-count { margin: 0; justify-items: start; }
}

/* Tutorial guiado (Driver.js): popover con los tokens del portal, claro y oscuro */
.driver-popover.pc-tour {
    background: var(--card); color: var(--ink); font-family: var(--font-body);
    border: 1px solid var(--line); border-radius: .75rem; padding: 1.1rem 1.15rem 1rem;
    max-width: min(22rem, calc(100vw - 2rem)); box-shadow: 0 10px 30px rgb(0 0 0 / .18);
}
.pc-tour .driver-popover-title { font-family: var(--font-title); font-size: 1.05rem; color: var(--ink); padding-right: 1.5rem; }
.pc-tour .driver-popover-description { font-size: .875rem; color: var(--ink2); }
.pc-tour .driver-popover-description strong { color: var(--ink); }
.pc-tour .driver-popover-close-btn { color: var(--muted); }
.pc-tour .driver-popover-close-btn:hover, .pc-tour .driver-popover-close-btn:focus { color: var(--ink); }
.pc-tour .driver-popover-progress-text { color: var(--muted); font-size: .75rem; }
.pc-tour .driver-popover-footer { margin-top: 1rem; gap: .5rem; }
.pc-tour .driver-popover-footer-btn {
    font-size: .8rem; font-weight: 500; line-height: 1.2; padding: .4rem .75rem; border-radius: .4rem; text-shadow: none;
    background: var(--card); color: var(--ink2); border: 1px solid var(--line);
}
.pc-tour .driver-popover-footer-btn:hover, .pc-tour .driver-popover-footer-btn:focus-visible { background: var(--hover); color: var(--ink); }
.pc-tour .driver-popover-next-btn { background: var(--pri); border-color: var(--pri); color: #fff; }
.pc-tour .driver-popover-next-btn:hover, .pc-tour .driver-popover-next-btn:focus-visible { background: var(--pri-hover); border-color: var(--pri-hover); color: #fff; }
.pc-tour .driver-popover-footer-btn:focus-visible { outline: 2px solid var(--pri-line); outline-offset: 2px; }
.pc-tour .driver-popover-arrow-side-left { border-left-color: var(--card); }
.pc-tour .driver-popover-arrow-side-right { border-right-color: var(--card); }
.pc-tour .driver-popover-arrow-side-top { border-top-color: var(--card); }
.pc-tour .driver-popover-arrow-side-bottom { border-bottom-color: var(--card); }