:root {
    --navy: #0b2a4a;
    --navy-dark: #071c33;
    --blue: #1f5fa8;
    --blue-light: #2f7fd6;
    --sky: #3b9df0;
    --ice: #eef5fc;
    --text: #1c2b3a;
    --muted: #5b6b7b;
    --white: #ffffff;
    --danger: #c0392b;
    --danger-dark: #a93226;
    --success-bg: #e5f6ec;
    --success-text: #1e7e4a;
    --error-bg: #fdecea;
    --error-text: #c0392b;
    --radius: 8px;
    --shadow: 0 4px 16px rgba(11, 42, 74, 0.12);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
    color: var(--text);
    background: var(--white);
    line-height: 1.6;
    font-size: 0.92rem;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

.container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- Navbar ---------- */
.navbar {
    background: linear-gradient(90deg, var(--navy-dark), var(--navy));
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

.brand {
    color: var(--white);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-decoration: none;
}

.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-links a {
    display: block;
    color: #cfe0f5;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: var(--radius);
    font-weight: 600;
    transition: background 0.2s, color 0.2s;
}

.nav-links a:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.12);
}

.nav-links a.active {
    color: var(--white);
    background: var(--blue-light);
}

.nav-toggle {
    display: none;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: var(--white);
    font-size: 1.4rem;
    padding: 4px 12px;
    border-radius: var(--radius);
    cursor: pointer;
}

/* ---------- Dropdown (Parametrización) ---------- */
.dropdown {
    position: relative;
}

.dropdown-toggle {
    cursor: pointer;
}

.caret {
    font-size: 0.7em;
    margin-left: 4px;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    list-style: none;
    background: var(--navy-dark);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    padding: 6px 0;
    z-index: 100;
}

.dropdown-menu a {
    color: #cfe0f5;
    padding: 10px 18px;
    border-radius: 0;
}

.dropdown-menu a:hover {
    color: var(--white);
    background: var(--blue);
}

.dropdown.open .dropdown-menu {
    display: block;
}

@media (max-width: 720px) {
    .nav-toggle {
        display: block;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        align-items: stretch;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: var(--navy-dark);
        padding: 10px 20px 16px;
        gap: 4px;
    }

    .nav-links.open {
        display: flex;
    }

    .dropdown-menu {
        position: static;
        box-shadow: none;
        background: transparent;
        padding: 0 0 0 16px;
    }

    .dropdown.open .dropdown-menu {
        display: block;
    }
}

/* ---------- Hero ---------- */
.hero {
    background: linear-gradient(135deg, var(--navy-dark), var(--blue) 55%, var(--sky));
    color: var(--white);
    padding: 96px 0;
    text-align: center;
}

.hero-content h1 {
    font-size: 2.6rem;
    margin-bottom: 16px;
}

.hero-content p {
    font-size: 1.15rem;
    max-width: 620px;
    margin: 0 auto 28px;
    color: #dbe9fb;
}

/* ---------- Botones ---------- */
.btn {
    display: inline-block;
    background: var(--blue-light);
    color: var(--white);
    border: none;
    padding: 8px 18px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
}

.btn:hover {
    background: var(--sky);
}

.btn-ghost {
    background: transparent;
    border: 1px solid var(--blue-light);
    background-color: #eaf3fc;
    color: var(--blue);
}

.btn-ghost:hover {
    background-color: #d8e9f9;
}

.btn-sm {
    padding: 6px 14px;
    font-size: 0.85rem;
}

.btn-edit {
    background: var(--blue);
}

.btn-edit:hover {
    background: var(--blue-light);
}

.btn-delete {
    background: var(--danger);
}

.btn-delete:hover {
    background: var(--danger-dark);
}

.btn-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

.btn-stack .btn {
    width: auto;
    text-align: left;
}

.btn-tc {
    background: #0e7a3d;
    border: 1px solid #0e7a3d;
}

.btn-tc:hover {
    background: #0c6b35;
}

.btn-tp {
    background: #b8860b;
    border: 1px solid #b8860b;
}

.btn-tp:hover {
    background: #a07a0a;
}

.btn-auditar {
    background: #3b0a8a;
    border: 1px solid #3b0a8a;
}

.btn-auditar:hover {
    background: #32077a;
}

.btn-export {
    background: #1f6fb2;
    border: 1px solid #1f6fb2;
}

.btn-export:hover {
    background: #1a5d96;
}

.btn-traza {
    background: #0e7a6e;
    border: 1px solid #0e7a6e;
    color: #fff;
}

.btn-traza:hover {
    background: #0c675d;
}

.btn-danger {
    background: #c0392b;
    border: 1px solid #c0392b;
    color: #fff;
}

.btn-danger:hover {
    background: #a93226;
}

.btn-disabled {
    background: #b0b0b0;
    border: 1px solid #b0b0b0;
    cursor: not-allowed;
    opacity: 0.7;}

.btn-disabled:hover {
    background: #b0b0b0;
}

/* ---------- Secciones ---------- */
.section {
    padding: 48px 0;
}

.section-title {
    color: var(--navy);
    font-size: 1.7rem;
    margin-bottom: 14px;
}

.section-text {
    color: var(--muted);
    max-width: 680px;
}

.card {
    background: var(--white);
    border: 1px solid #dce9f5;
    border-left: 5px solid var(--blue-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    max-width: 480px;
}

.card h3 {
    color: var(--navy);
    margin-bottom: 8px;
}

.card p {
    color: var(--muted);
    margin-bottom: 16px;
}

.cards-row {
    display: flex;
    gap: 12px;
    flex-wrap: nowrap;
    align-items: flex-start;
    margin-bottom: 6px;
}

.cards-row .card-compact {
    flex: 1 1 0;
    max-width: none;
    min-width: 0;
}

.cards-row .card-compact:last-child {
    margin-left: auto;
}

@media (max-width: 760px) {
    .cards-row {
        flex-direction: column;
    }
    .cards-row .card-compact {
        width: 100%;
    }
    .cards-row .card-compact:last-child {
        margin-left: 0;
    }
}

.card-compact {
    margin-left: 0;
    margin-right: auto;
    padding: 8px 12px;
    border-width: 1px;
    box-shadow: none;
}

.card-compact h3 {
    font-size: 0.8rem;
    margin-bottom: 4px;
}

.card-compact p {
    text-align: justify;
    font-size: 0.72rem;
    line-height: 1.3;
    margin-bottom: 8px;
}

.form-compact {
    max-width: 100%;
}

.form-compact .form-group {
    margin-bottom: 6px;
}

.form-compact label {
    font-size: 0.72rem;
    margin-bottom: 2px;
}

.form-compact input {
    padding: 4px 8px;
    font-size: 0.78rem;
}

.form-compact .form-actions {
    margin-top: 2px;
}

.form-compact .btn {
    padding: 4px 10px;
    font-size: 0.75rem;
}

/* ---------- Alerts ---------- */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 18px;
    font-weight: 600;
}

.alert-success {
    background: var(--success-bg);
    color: var(--success-text);
}

.alert-error {
    background: var(--error-bg);
    color: var(--error-text);
}

.alert-info {
    background: #e8f4fd;
    color: #1a5276;
}

/* ---------- Encabezado de página ---------- */
.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

/* ---------- Tabla ---------- */
.table-count {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--muted);
}

.table-wrap {
    overflow-x: auto;
    background: var(--white);
    border: 1px solid #dce9f5;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.table-scroll-top {
    overflow-x: auto;
    overflow-y: hidden;
    height: 18px;
    background: #eef3f8;
    border: 1px solid #dce9f5;
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    margin-bottom: -1px;
}

.scroll-top-inner {
    height: 1px;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    text-align: left;
    padding: 12px 16px;
    font-size: 0.85rem;
    border-bottom: 1px solid #e8f1f9;
}

.table thead th {
    background: var(--navy);
    color: var(--white);
    font-weight: 600;
}

.table tbody tr:hover {
    background: var(--ice);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

/* Tabla compacta: celdas del ancho del contenido (no se expanden). */
.table.tabla-compacta {
    width: auto;
    min-width: 0;
}
.table.tabla-compacta th,
.table.tabla-compacta td {
    width: auto;
    white-space: nowrap;
    padding: 5px 10px;
    font-size: 0.78rem;
}

.table .empty {
    text-align: center;
    color: var(--muted);
    padding: 28px;
}

.table.table-wide th,
.table.table-wide td {
    padding: 5px 6px;
    font-size: 11.5px;
    line-height: 1.25;
}

.table.table-wide {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.table.table-wide th,
.table.table-wide td {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table.table-wide .desc-cell {
    max-width: 260px;
}

.table.table-wide .alt-cell {
    max-width: 160px;
}

.table.table-wide .num-cell {
    max-width: 110px;
    text-align: right;
    white-space: nowrap;
}

/* Tabla de Convenios: encabezados más pequeños y ajustados al contenido */
.table.convenios-table {
    table-layout: auto;
    width: 100%;
}

.table.convenios-table th,
.table.convenios-table td {
    padding: 6px 8px;
    font-size: 12px;
    line-height: 1.2;
}

.table.convenios-table thead th {
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    text-align: left;
}

.table.convenios-table .actions-col {
    text-align: right;
}


.group-cont { background: #eaf4ee; }
.group-param { background: #fbf3dc; }
.group-cont.group-cont, .table thead tr:first-child th.group-cont { background: #d3ead8; }
.group-param.group-param, .table thead tr:first-child th.group-param { background: #f2e2b3; }

.big-num {
    font-size: 2rem;
    font-weight: 800;
    color: var(--navy);
    margin: 4px 0 0 0;
}

.card-error {
    border: 2px solid #d64545;
    background: #fdf2f2;
}

.big-num-error {
    color: #c62828;
}

.cards-row .card h3 { margin: 0 0 6px 0; }

.actions-col {
    white-space: nowrap;
}

.inline {
    display: inline-block;
}

/* ---------- Formularios ---------- */
.form {
    background: var(--white);
    border: 1px solid #dce9f5;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    max-width: 520px;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 6px;
}

.form-group input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #c3d7ea;
    border-radius: var(--radius);
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus {
    outline: none;
    border-color: var(--blue-light);
    box-shadow: 0 0 0 3px rgba(47, 127, 214, 0.2);
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

/* Formulario a pantalla ancha: sin tope de ancho, campos en cuadrícula
   que aprovechan todo el ancho del PC con tamaños compactos. */
.form.form-wide {
    max-width: none;
    width: 100%;
    box-sizing: border-box;
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px 18px;
    padding: 18px;
}
.form-grid .form-group {
    margin-bottom: 0;
}
.form-grid select,
.form-grid input {
    padding: 4px 8px;
    font-size: 0.78rem;
}
.form-grid label {
    font-size: 0.72rem;
    margin-bottom: 2px;
}
.form-grid #permBox,
.form-grid .form-actions {
    grid-column: 1 / -1;
}
.form-grid .form-actions {
    margin-top: 2px;
}
.form-grid .btn {
    padding: 4px 10px;
    font-size: 0.75rem;
}
.form-grid .perm-table {
    width: 100%;
    max-width: none;
    font-size: 0.72rem;
}
.form-grid .perm-table select {
    padding: 2px 4px;
    font-size: 0.7rem;
}

/* Formulario Control de Cambios (G_Actividades): rejilla propia, campos alineados */
.form-control-cambios {
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap: 10px 16px;
    max-width: 1100px;
    padding: 14px 16px;
}
.form-control-cambios .form-group,
.form-control-cambios .form-actions {
    margin-bottom: 0;
}
.form-control-cambios .form-group-full,
.form-control-cambios .form-actions {
    grid-column: 1 / -1;
}
.form-control-cambios input[type="date"],
.form-control-cambios input[type="text"],
.form-control-cambios input[type="file"],
.form-control-cambios select,
.form-control-cambios textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 8px;
    border: 1px solid #c3d7ea;
    border-radius: var(--radius);
    font-size: 0.8rem;
    background: #fff;
}
.form-control-cambios textarea {
    resize: vertical;
}
.form-control-cambios label {
    font-size: 0.75rem;
}
.form-control-cambios .form-group label {
    margin-bottom: 3px;
}
.form-control-cambios .radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 4px;
}
.form-control-cambios .radio-inline,
.form-control-cambios .checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 500;
    color: var(--text);
    font-size: 0.8rem;
}
.form-control-cambios .radio-inline input,
.form-control-cambios .checkbox-inline input {
    width: auto;
    padding: 0;
    margin: 0;
}
.form-control-cambios .actual-adjunto {
    margin: 4px 0 2px;
}
.form-control-cambios .form-actions {
    margin-top: 4px;
}
.form-control-cambios .form-actions .btn {
    padding: 5px 12px;
    font-size: 0.8rem;
}
.form-control-cambios #adjuntoZone {
    padding: 10px;
    border: 2px dashed #c3d7ea;
    border-radius: var(--radius);
    transition: border-color 0.2s, background-color 0.2s;
}
.form-control-cambios #adjuntoZone.drag-over {
    border-color: var(--blue-light);
    background: rgba(47, 127, 214, 0.06);
}
.form-control-cambios .adjunto-prev {
    margin-top: 10px;
}
.form-control-cambios .adjunto-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}
.form-control-cambios .adjunto-thumb {
    max-width: 90px;
    max-height: 70px;
    border: 1px solid #c3d7ea;
    border-radius: 6px;
    object-fit: cover;
}
.form-control-cambios .adjunto-info {
    font-size: 0.85rem;
    color: var(--text);
    word-break: break-all;
}

/* ---------- Footer ---------- */
.footer {
    background: var(--navy-dark);
    color: #a9bef0;
    text-align: center;
    padding: 18px 0;
    font-size: 0.9rem;
}

/* ---------- Dashboard / PLANES ---------- */
.page-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.filter-bar input[type="text"] {
    flex: 1 1 260px;
    padding: 10px 12px;
    border: 1px solid #c3d7ea;
    border-radius: var(--radius);
    font-size: 1rem;
}

.filter-bar select {
    padding: 10px 12px;
    border: 1px solid #c3d7ea;
    border-radius: var(--radius);
    font-size: 1rem;
    background: var(--white);
}

.filter-bar input:focus,
.filter-bar select:focus {
    outline: none;
    border-color: var(--blue-light);
    box-shadow: 0 0 0 3px rgba(47, 127, 214, 0.2);
}

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
}

.badge-activo {
    background: var(--success-bg);
    color: var(--success-text);
}

.badge-inactivo {
    background: #fdf0e2;
    color: #a86a00;
}

.badge-tc {
    background: #e3f3e9;
    color: #0e7a3d;
}

.badge-tp {
    background: #f7edc9;
    color: #b8860b;
}

.badge-ok {
    background: var(--success-bg);
    color: var(--success-text);
}

.badge-warn {
    background: #fdf0e2;
    color: #a86a00;
}

.badge-error {
    background: #fde8e8;
    color: #b42318;
}

.rutas-input {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 8px;
    border: 1px solid #c3d7ea;
    border-radius: var(--radius);
    font-size: 0.8rem;
    background: #fff;
}

.pagination {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 18px;
}

.pagination a,
.pagination .current {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #c3d7ea;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--blue);
    background: var(--white);
    font-size: 0.9rem;
}

.pagination a:hover {
    background: var(--ice);
}

.pagination .current {
    background: var(--blue-light);
    color: var(--white);
    border-color: var(--blue-light);
}

muted-count,
.muted-count {
    color: var(--muted);
    font-weight: 400;
    font-size: 0.9rem;
}

.muted {
    color: var(--muted);
    font-size: 0.9rem;
    margin-top: 8px;
}

.cell-corto {
    display: inline-block;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    font-size: 0.75rem;
}

.cell-eps,
.cell-conv,
.col-eps,
.col-conv {
    font-size: 0.78rem;
}

.ruta-texto {
    display: inline-block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.75rem;
    color: var(--text);
}

/* Switch ON/OFF (Auditando) */
.switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 30px;
    border: 1px solid #cbd6e3;
    background: var(--white);
    color: var(--navy);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    user-select: none;
}

.switch-track {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 22px;
    background: #c2ccd8;
    transition: background 0.2s;
    flex-shrink: 0;
}

.switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    transition: transform 0.2s;
}

.switch-btn.on .switch-track {
    background: #0e7a3d;
}

.switch-btn.on .switch-thumb {
    transform: translateX(18px);
}

.switch-btn:not(.on) .switch-label::after {
    content: " (off)";
    color: var(--muted);
    font-weight: 400;
}
.filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--white);
    border: 1px solid #dce9f5;
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: 18px;
    box-shadow: var(--shadow);
    flex-wrap: wrap;
}

.filter-bar label {
    font-weight: 600;
    color: var(--text);
}

.filter-bar select {
    padding: 8px 10px;
    border: 1px solid #c3d6e8;
    border-radius: var(--radius);
    background: #fff;
    font-size: 14px;
    min-width: 280px;
    color: var(--text);
}

.card-grafico {
    margin-bottom: 20px;
}

.card-grafico h3 {
    margin-top: 0;
    margin-bottom: 12px;
}

.chart-wrap {
    position: relative;
    height: 360px;
    width: 100%;
}

.small {
    font-size: 12px;
}

.auditoria-cell {
    text-align: center;
}

.audit-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    position: relative;
    user-select: none;
}

.audit-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    cursor: pointer;
}

.audit-check .checkmark {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 2px solid #b0bec5;
    border-radius: 5px;
    background: #fff;
    position: relative;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.audit-check:hover .checkmark {
    border-color: #0e7a6e;
}

.audit-check input[type="checkbox"]:checked + .checkmark {
    background: #0e7a6e;
    border-color: #0e7a6e;
}

.audit-check input[type="checkbox"]:checked + .checkmark::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 1px;
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.audit-label {
    font-size: 12px;
}

/* ---------- Login ---------- */
.login-body {
    background: linear-gradient(135deg, var(--navy-dark), var(--blue) 60%, var(--sky));
    justify-content: center;
}

.login-main {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 40px 20px;
    box-sizing: border-box;
}

.login-card {
    width: 100%;
    max-width: 400px;
    padding: 40px 32px;
    text-align: center;
}

.login-title {
    color: var(--navy);
    margin-bottom: 4px;
}

.login-body .btn-block {
    width: 100%;
}

/* ---------- Usuario en navbar ---------- */
.nav-user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 8px;
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.nav-user-name {
    color: var(--white);
    font-weight: 600;
    font-size: 0.92rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.3;
}

.nav-user-name .badge {
    margin-top: 2px;
}

@media (max-width: 720px) {
    .nav-user {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }
    .nav-user-name {
        align-items: flex-start;
    }
}

/* ---------- Avance (checks automáticos de convenio) ---------- */
.avance-cell {
    vertical-align: top;
}

.check-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #c0392b;
    margin: 2px 0;
}

/* Registros repetidos en el Informe Total: se resaltan en rojo. */
.fila-duplicada td {
    background: #fdecea;
    color: #7b241c;
}

.fila-duplicada td strong,
.fila-duplicada td {
    color: #922b21;
}

.dup-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    background: #c0392b;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    vertical-align: middle;
    letter-spacing: 0.5px;
}

.text-danger {
    color: #c0392b;
}

.check-item .check-label {
    color: #c0392b;
}

.check-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #c0392b;
    background: #fdecea;
    color: #c0392b;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.check-item.done {
    color: #1e7e4a;
}

.check-item.done .check-label {
    color: #1e7e4a;
}

.check-item.done .check-icon {
    border-color: #1e7e4a;
    background: var(--success-bg);
    color: #1e7e4a;
}

/* ---------- Check auditado con errores / ok todo ---------- */
.audit-toggle {
    font-size: 0.72rem;
    font-weight: 600;
    margin-top: 3px;
    color: #c0392b;
}

.audit-mode {
    border-top: 1px dashed #cfd8dc;
    padding-top: 6px;
    margin-top: 6px;
}

.audit-toggle .check-label {
    color: #c0392b;
}

.audit-toggle .checkmark {
    width: 16px;
    height: 16px;
    border-width: 2px;
    border-radius: 50%;
    border-color: #c0392b;
    background: #fdecea;
}

.audit-toggle:hover .checkmark {
    border-color: #c0392b;
    background: #fdecea;
}

.audit-toggle input[type="checkbox"]:checked + .checkmark {
    background: var(--success-bg);
    border-color: #1e7e4a;
}

.audit-toggle input[type="checkbox"]:checked + .checkmark::after {
    left: 4px;
    top: 0;
    width: 5px;
    height: 9px;
    border-color: #1e7e4a;
}

.audit-toggle.done .check-label {
    color: #1e7e4a;
}

.audit-toggle input[type="checkbox"]:disabled + .checkmark {
    opacity: 0.45;
    cursor: not-allowed;
}

.audit-toggle input[type="checkbox"]:disabled ~ .check-label {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Modo "Auditado con errores": amarillo al marcar (leyenda incluida) */
.audit-toggle:has(input[data-tipo="errores"]:checked) {
    color: #b8860b;
}
.audit-toggle:has(input[data-tipo="errores"]:checked) .check-label {
    color: #b8860b;
}
.audit-toggle:has(input[data-tipo="errores"]:checked) .checkmark {
    background: var(--warning-bg, #fff8e1);
    border-color: #e0a800;
}
.audit-toggle:has(input[data-tipo="errores"]:checked) .checkmark::after {
    border-color: #b8860b;
}

/* Grilla de Informes — PANTALLA: 3 gráficas por fila */
.informes-full.container {
    max-width: 100%;
    padding: 0 24px;
}

.informes-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 14px;
    align-items: stretch;
}

@media (max-width: 900px) {
    .informes-grid {
        grid-template-columns: 1fr;
    }
}

.card-informe {
    border: 1px solid #dce9f5;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: var(--white);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
}

.informe-head {
    margin-bottom: 10px;
}

.informe-head h3 {
    font-size: 15px;
    margin: 0 0 6px;
}

.informe-head h3.informe-titulo-rojo {
    color: #c0392b;
}

.informe-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.informe-analisis {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text);
    background: var(--ice, #f2f7fb);
    border-left: 3px solid var(--navy, #2f3e70);
    padding: 8px 10px;
    border-radius: 4px;
    /* En pantalla el análisis solo se ve en el tooltip al pasar el mouse; se oculta aquí */
    display: none;
}

.informes-grid.pdf-modo .informe-analisis {
    display: block;
}

.chart-wrap-informe {
    position: relative;
    flex: 1;
    width: 100%;
    margin-top: 6px;
    height: 260px;
}

/* MODQ PDF: el contenedor .informes-grid.pdf-modo se aplica solo durante la exportación.
   Una columna, aspecto de media hoja carta y salto de página por cada par. */
.informes-grid.pdf-modo {
    grid-template-columns: 1fr;
    gap: 2px;
}

.informes-grid.pdf-modo .chart-wrap-informe {
    height: auto;
    aspect-ratio: 215.9 / 139.7;
}

.informes-grid.pdf-modo .salto-pag {
    page-break-before: always;
    break-before: page;
}

/* ---------- Permisos por módulo ---------- */
.perm-table {
    max-width: 520px;
    font-size: 0.92rem;
}

.perm-table th,
.perm-table td {
    padding: 7px 10px;
}

.perm-table select {
    padding: 5px 8px;
    border: 1px solid #c3d7ea;
    border-radius: 6px;
}

/* Grupo por menú en el selector de permisos */
.perm-table-menu {
    min-width: 560px;
}

.perm-table-menu .perm-table th:first-child,
.perm-table-menu .perm-table td:first-child {
    width: 72%;
}

.perm-table-menu tr.perm-menu-row td {
    background: #e7f0f8;
    border-bottom: 1px solid #d0e2f0;
}

.perm-table-menu tr.perm-menu-row td:first-child {
    width: auto;
}

.perm-table-menu tr.perm-menu-row strong {
    font-size: 0.95rem;
    letter-spacing: 0.3px;
}

/* ---------- Matriz Control Citas ---------- */
.table.matriz-citas {
    font-size: 0.72rem;
    width: 100%;
    table-layout: fixed;
}

.table.matriz-citas th,
.table.matriz-citas td {
    min-width: 0;
    max-width: none;
    text-align: center;
    padding: 2px 1px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.table.matriz-citas thead th {
    font-size: 0.68rem;
    padding: 4px 1px;
    background: var(--navy);
    color: var(--white);
}

.table.matriz-citas tbody tr:hover {
    background: transparent;
}

.table.matriz-citas tbody tr:nth-child(even) {
    background: var(--ice);
}

.table.matriz-citas tbody td:first-child,
.table.matriz-citas thead th:first-child {
    width: 120px;
}

.table.matriz-citas .matriz-fila {
    text-align: left;
    background: var(--white);
    overflow: hidden;
    text-overflow: ellipsis;
}

.table.matriz-citas tbody .matriz-fila:first-child,
.table.matriz-citas thead .matriz-fila:first-child {
    position: sticky;
    left: 0;
    width: 120px;
    z-index: 1;
    box-shadow: 2px 0 0 rgba(0,0,0,0.04);
}

.table.matriz-citas .celda-cita {
    width: 100%;
    min-width: 0;
    max-width: none;
    text-align: center;
    padding: 2px 1px;
    border: 1px solid #c3d7ea;
    border-radius: 3px;
    font-size: 0.7rem;
    box-sizing: border-box;
    -moz-appearance: textfield;
}

.table.matriz-citas .celda-cita::-webkit-outer-spin-button,
.table.matriz-citas .celda-cita::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.table.matriz-citas .celda-cita:focus {
    outline: 2px solid #1a5d96;
    border-color: #1a5d96;
}

/* Botón/icono de comentario en celdas de la matriz */
.btn-comentario {
    display: inline-block;
    margin-left: 2px;
    padding: 0 3px;
    border: 1px solid transparent;
    background: none;
    color: #9aa7b5;
    font-size: 0.7rem;
    cursor: pointer;
    line-height: 1;
    vertical-align: middle;
    border-radius: 3px;
}
.btn-comentario:hover {
    color: #1a5d96;
    border-color: #c3d7ea;
    background: #eef6ff;
}
.btn-comentario.activo {
    color: #1a5d96;
    background: #eef6ff;
    border-color: #c3d7ea;
}
.comentario-ico {
    display: inline-block;
    margin-left: 0;
    padding: 0 3px;
    color: #1a5d96;
    font-size: 0.7rem;
    cursor: help;
}
.table.matriz-citas .comentario-ico {
    vertical-align: baseline;
    line-height: 1;
}

/* Tabla de matriz en modo "Insertar Datos" (visualización amplia).
   Cada día recibe un ancho fijo para que se vean ~20+ días y el resto
   se accede con la barra de desplazamiento horizontal del contenedor. */
.table.matriz-citas.matriz-ancha {
    table-layout: auto;
    min-width: max-content;
}
.table.matriz-citas.matriz-ancha th,
.table.matriz-citas.matriz-ancha td {
    min-width: 46px;
    max-width: none;
    white-space: nowrap;
}
.table.matriz-citas.matriz-ancha thead th,
.table.matriz-citas.matriz-ancha td {
    padding: 4px 3px;
    font-size: 0.72rem;
}
.table.matriz-citas.matriz-ancha .celda-cita {
    width: 42px;
}
.table.matriz-citas.matriz-ancha tbody td:first-child,
.table.matriz-citas.matriz-ancha thead th:first-child {
    width: 140px;
    min-width: 140px;
}
/* Contenedor con barra de desplazamiento horizontal */
.matriz-scroll {
    overflow-x: auto;
    max-width: 100%;
}

/* Tabla de informe: cada cuadro ocupa todo el ancho de la pantalla.
   Las celdas (días) se reparten/ajustan para llenar el 100% del ancho. */
.informe-cuadro {
    width: 100%;
    max-width: none;
    margin: 0 0 22px;
    border-radius: 0;
    border-left: none;
    border-right: none;
    box-sizing: border-box;
}
.table.matriz-citas.matriz-full {
    table-layout: fixed;
    width: 100%;
    min-width: 100%;
    font-size: 0.78rem;
}
.table.matriz-citas.matriz-full th,
.table.matriz-citas.matriz-full td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: none;
    width: auto;
    padding: 2px 2px;
    font-size: 0.78rem;
}
.table.matriz-citas.matriz-full thead th {
    font-size: 0.78rem;
}
.table.matriz-citas.matriz-full tbody td:first-child,
.table.matriz-citas.matriz-full thead th:first-child {
    width: 140px;
    min-width: 140px;
    text-align: left;
}
/* Título de cada cuadro en el informe: mismo tamaño que las celdas/días. */
.informe-cuadro > h3,
.informe-titulo {
    font-size: 0.78rem;
    padding: 10px 20px;
    margin: 0;
}

.btn-delete-link {
    background: none;
    border: none;    padding: 0;
    text-decoration: underline;
    cursor: pointer;
}

/* Bloqueo de días por el super admin */
.table.matriz-citas th.dia-bloqueado {
    background: #fff6e0;
    color: #7a5b00;
}
.table.matriz-citas td.celda-bloqueada {
    background: #fbf7ef;
}
.table.matriz-citas .bloqueo-badge {
    display: block;
    font-size: 0.56rem;
    font-weight: normal;
    color: #8a6d1d;
    background: #f3e3bc;
    border-radius: 3px;
    padding: 0 3px;
    margin: 2px 0 1px;
    line-height: 1.4;
    white-space: nowrap;
}
.table.matriz-citas .btn-bloqueo {
    display: inline-block;
    font-size: 0.56rem;
    font-weight: normal;
    color: #fff;
    background: #e67e22;
    border-radius: 3px;
    padding: 1px 4px;
    margin-top: 2px;
    text-decoration: none;
    white-space: nowrap;
}
.table.matriz-citas .btn-bloqueo:hover {
    background: #d35400;
}

/* Layout con barra lateral para los módulos internos */
.layout-sidebar {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.sidebar {
    flex: 0 0 220px;
    background: var(--ice);
    border: 1px solid #d8dee6;
    border-radius: var(--radius);
    padding: 10px 0;
}

.sidebar-menu {
    display: flex;
    flex-direction: column;
}

.sidebar-menu .sidebar-titulo {
    margin: 0;
    padding: 8px 16px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    border-bottom: 1px solid #d8dee6;
}

.sidebar-menu a {
    display: block;
    padding: 10px 16px;
    color: var(--text);
    text-decoration: none;
    font-size: 0.9rem;
    border-left: 3px solid transparent;
}

.sidebar-menu a:hover {
    background: rgba(95, 140, 190, 0.10);
}

.sidebar-menu a.active {
    background: var(--blue-light);
    color: var(--white);
    border-left-color: var(--navy);
}

.sidebar-content {
    flex: 1;
    min-width: 0;
}

@media (max-width: 768px) {
    .layout-sidebar {
        flex-direction: column;
    }
    .sidebar {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* Lista de casillas (variable -> servicios) */
.checkbox-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px 18px;
    margin-top: 6px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid #d8dee6;
    border-radius: 6px;
    background: var(--white);
    cursor: pointer;
    font-size: 0.9rem;
}

.checkbox-item:hover {
    background: var(--ice);
}

.checkbox-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--blue);
}

/* Página Capacidad Instalada: vista compacta */
.capacidad-page {
    font-size: 0.85rem;
}

.capacidad-page .section-title {
    font-size: 1.25rem;
    margin-bottom: 8px;
}

.capacidad-page .muted {
    font-size: 0.8rem;
    margin-top: 4px;
    margin-bottom: 6px;
}

.capacidad-page .alert {
    font-size: 0.8rem;
    padding: 8px 12px;
}

.capacidad-page .table th,
.capacidad-page .table td {
    padding: 6px 10px;
    font-size: 0.78rem;
}

.capacidad-page .cell-corto {
    max-width: 200px;
    font-size: 0.72rem;
}

.capacidad-page .btn {
    padding: 5px 12px;
    font-size: 0.78rem;
}

.capacidad-page .btn-sm {
    padding: 3px 9px;
    font-size: 0.75rem;
}

.capacidad-page .form-group {
    margin-bottom: 12px;
}

.capacidad-page .form-group label {
    margin-bottom: 4px;
}

.capacidad-page .form-group input,
.capacidad-page .form-group select {
    padding: 7px 10px;
    font-size: 0.85rem;
}

.capacidad-page .form-group textarea {
    padding: 7px 10px;
    font-size: 0.85rem;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #c3d7ea;
    border-radius: var(--radius);
}

.capacidad-page .checkbox-list {
    gap: 4px 14px;
}

.capacidad-page .checkbox-item {
    padding: 3px 8px;
    font-size: 0.8rem;
}

/* Matriz de capacidad instalada */
.capacidad-matriz th {
    white-space: normal;
    min-width: 40px;
}

.capacidad-matriz thead th {
    padding: 4px 5px;
}

.capacidad-matriz td {
    padding: 3px 4px;
}

.capacidad-matriz .cap-col {
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.2;
}

.capacidad-matriz .cap-tipo {
    display: block;
    font-size: 0.52rem;
    color: var(--muted);
    font-weight: 400;
    text-transform: none;
    margin-top: 1px;
}

.capacidad-matriz .cap-num {
    text-align: center;
    font-size: 0.72rem;
}

.capacidad-matriz .valor-texto,
.capacidad-matriz textarea.valor-texto,
.capacidad-matriz select.valor-texto {
    width: 100%;
    box-sizing: border-box;
    padding: 3px 5px;
    font-size: 0.72rem;
    border: 1px solid #c3d7ea;
    border-radius: 4px;
}

.capacidad-matriz .btn-sm {
    padding: 2px 6px;
    font-size: 0.68rem;
}

.capacidad-matriz .valor-texto:focus {
    outline: none;
    border-color: var(--blue-light);
    box-shadow: 0 0 0 2px rgba(47, 127, 214, 0.2);
}

.capacidad-matriz .cap-pct {
    display: flex;
    align-items: center;
    gap: 0;
}

.capacidad-matriz .cap-pct .valor-texto {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.capacidad-matriz .cap-pct-sign {
    flex: 0 0 auto;
    padding: 3px 5px;
    font-size: 0.72rem;
    border: 1px solid #c3d7ea;
    border-left: 0;
    border-radius: 4px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background: #f4f8fc;
    color: var(--muted);
}

.capacidad-matriz .cap-adjunto {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.capacidad-matriz .cap-adjunto input[type="file"] {
    width: 100%;
    font-size: 0.68rem;
}

.capacidad-matriz .cap-quitar {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.66rem;
    color: var(--muted);
    cursor: pointer;
}

.capacidad-matriz .cap-auto {
    display: block;
    width: 100%;
    text-align: right;
    border: 1px dashed #b9d0e6;
    background: #f0f6fc;
    color: #1d4e89;
    cursor: default;
}

/* Capacidad Instalada: ancho completo */
.container-wide {
    max-width: none;
}

.container-wide .card {
    max-width: none;
}

.container-wide .layout-sidebar {
    gap: 12px;
}

.container-wide .table-wrap {
    overflow-x: auto;
    width: 100%;
}

.container-wide .capacidad-matriz {
    width: 100%;
    table-layout: auto;
}

.container-wide .capacidad-matriz .valor-texto {
    min-width: 150px;
}

/* Columnas que se ajustan al tamaño del contenido (respuestas).
   HORARIO y PERFIL no reciben .cap-hug y quedan con el ancho fijo. */
.capacidad-matriz td.cap-hug .valor-texto,
.capacidad-matriz td.cap-hug textarea.valor-texto,
.capacidad-matriz td.cap-hug select.valor-texto {
    width: auto;
    min-width: 34px;
    max-width: 280px;
    field-sizing: content;
}

.capacidad-matriz td.cap-hug .cap-pct {
    display: inline-flex;
}

.capacidad-matriz td.cap-hug .cap-pct .valor-texto {
    max-width: 100px;
}

.capacidad-matriz td.cap-hug .cap-auto {
    display: inline-block;
    width: auto;
    min-width: 34px;
}

.capacidad-matriz td.cap-hug textarea.valor-texto {
    min-height: 30px;
}

.capacidad-matriz td.cap-hug .cap-adjunto input[type="file"] {
    width: auto;
}