/* Extensiones PQRSD sobre el tema SIRUTA (no modifica el archivo fuente SIRUTA). */

.pqrsd-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    padding: 10px 16px;
    background: var(--green);
    color: #fff;
    font-weight: 700;
}
.pqrsd-skip-link:focus {
    left: 14px;
    top: 14px;
}

.pqrsd-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0 28px;
}
.pqrsd-nav a {
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
}
.pqrsd-nav a:hover,
.pqrsd-nav a.is-active,
.pqrsd-nav a[aria-current="page"] {
    color: var(--text-primary);
    border-color: var(--green);
    box-shadow: inset 0 -2px 0 var(--green);
}

.table-wrap { overflow-x: auto; }
.pqrsd-table {
    width: 100%;
    border-collapse: collapse;
}
.pqrsd-table th,
.pqrsd-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 14px;
    vertical-align: top;
}
.pqrsd-table th {
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.pqrsd-table tbody tr:hover {
    background: var(--bg-card-secondary);
}

/* Bandeja: columnas principales + acción siempre visible */
.bandeja-table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border:1px solid var(--border);
    border-radius:10px;
}
.bandeja-table-wrap:focus{
    outline:2px solid var(--green);
    outline-offset:2px;
}
.bandeja-table{
    table-layout:fixed;
    width:100%;
    min-width:920px;
    margin:0;
}
.bandeja-table th,
.bandeja-table td{
    padding:10px 10px;
}
.bandeja-table .col-radicado{width:20%}
.bandeja-table .col-solicitante{width:13%}
.bandeja-table .col-tipo{width:13%}
.bandeja-table .col-riesgo{width:9%}
.bandeja-table .col-estado{width:11%}
.bandeja-table .col-limite{width:11%}
.bandeja-table .col-cumplimiento{width:12%}
.bandeja-table .col-accion{width:11%; min-width:118px}
.bandeja-table .radicado-link{
    display:inline-block;
    white-space:nowrap;
    font-weight:700;
    letter-spacing:.01em;
}
.bandeja-table .bandeja-meta{
    margin-top:4px;
    font-size:12px;
    line-height:1.35;
    color:var(--text-muted);
    white-space:normal;
}
.bandeja-table .bandeja-tipo-main{font-weight:600}
.bandeja-table .col-accion,
.bandeja-table th.col-accion{
    position:sticky;
    right:0;
    z-index:2;
    background:var(--bg-card, #fff);
    box-shadow:-6px 0 10px rgba(0,0,0,.06);
    white-space:nowrap;
    text-align:center;
    vertical-align:middle;
}
[data-theme="dark"] .bandeja-table .col-accion,
[data-theme="dark"] .bandeja-table th.col-accion{
    background:var(--bg-card, #121820);
    box-shadow:-6px 0 10px rgba(0,0,0,.35);
}
.bandeja-table tbody tr:hover .col-accion{
    background:var(--bg-card-secondary, #f3f6f9);
}
[data-theme="dark"] .bandeja-table tbody tr:hover .col-accion{
    background:var(--bg-card-secondary, #1a2330);
}
.bandeja-table .btn-ver-expediente{
    padding:7px 10px;
    font-size:13px;
    white-space:nowrap;
}
.bandeja-scroll-hint{
    display:none;
    margin:0 0 8px;
    font-size:12px;
    color:var(--text-muted);
}

@media (max-width:1100px){
    .bandeja-scroll-hint{display:block}
}

@media (max-width:760px){
    .bandeja-table-wrap{border:0; overflow:visible}
    .bandeja-scroll-hint{display:none}
    .bandeja-table{
        min-width:0;
        table-layout:auto;
    }
    .bandeja-table thead{display:none}
    .bandeja-table tbody{display:grid; gap:12px}
    .bandeja-table tr{
        display:grid;
        grid-template-columns:1fr auto;
        gap:6px 10px;
        padding:14px;
        border:1px solid var(--border);
        border-radius:12px;
        background:var(--bg-card);
    }
    .bandeja-table td{
        border:0;
        padding:0;
        width:auto !important;
        max-width:none;
    }
    .bandeja-table .col-radicado{grid-column:1 / -1}
    .bandeja-table .col-solicitante,
    .bandeja-table .col-tipo,
    .bandeja-table .col-riesgo,
    .bandeja-table .col-estado,
    .bandeja-table .col-limite,
    .bandeja-table .col-cumplimiento{
        grid-column:1 / -1;
        display:flex;
        justify-content:space-between;
        align-items:flex-start;
        gap:12px;
        padding-top:4px;
        border-top:1px dashed var(--border);
        font-size:13px;
    }
    .bandeja-table .col-solicitante::before{content:"Solicitante"; color:var(--text-muted); font-weight:600; flex:0 0 42%}
    .bandeja-table .col-tipo::before{content:"Tipo / motivo"; color:var(--text-muted); font-weight:600; flex:0 0 42%}
    .bandeja-table .col-riesgo::before{content:"Riesgo"; color:var(--text-muted); font-weight:600; flex:0 0 42%}
    .bandeja-table .col-estado::before{content:"Estado"; color:var(--text-muted); font-weight:600; flex:0 0 42%}
    .bandeja-table .col-limite::before{content:"Fecha límite"; color:var(--text-muted); font-weight:600; flex:0 0 42%}
    .bandeja-table .col-cumplimiento::before{content:"Cumplimiento"; color:var(--text-muted); font-weight:600; flex:0 0 42%}
    .bandeja-table .col-accion{
        grid-column:1 / -1;
        position:static;
        box-shadow:none;
        background:transparent;
        text-align:stretch;
        padding-top:10px;
        min-width:0;
    }
    .bandeja-table .btn-ver-expediente{
        display:flex;
        width:100%;
        justify-content:center;
        text-align:center;
        box-sizing:border-box;
    }
}

.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.badge-green { background: rgba(22,163,74,.12); color: var(--green); }
.badge-red { background: rgba(239,68,68,.12); color: var(--red); }
.badge-blue { background: rgba(37,99,235,.12); color: var(--blue); }
.badge-muted { background: rgba(120,144,165,.12); color: var(--text-secondary); }
.badge-yellow { background: rgba(202,138,4,.15); color: #ca8a04; }

.grid-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.stat-card { padding: 18px; }
.stat-card .label { color: var(--text-secondary); font-size: 13px; }
.stat-card .value { font-size: 28px; font-weight: 750; margin-top: 6px; }
.stat-card a { color: inherit; }

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.form-grid .full { grid-column: 1 / -1; }
.card-pad { padding: 22px; }
.stack-gap { display: flex; flex-direction: column; gap: 14px; }

.timeline-item {
    border-left: 3px solid var(--border);
    padding: 0 0 16px 14px;
    margin-left: 6px;
}
.timeline-item strong { display: block; }
.muted { color: var(--text-muted); font-size: 13px; }

.alert-warning {
    background: rgba(202, 138, 4, 0.12);
    border: 1px solid rgba(202, 138, 4, 0.35);
    color: #a16207;
    border-radius: 9px;
    padding: 13px 15px;
    margin-bottom: 20px;
    font-size: 14px;
}
html[data-theme="dark"] .alert-warning {
    color: #fbbf24;
}
.alert-info {
    background: rgba(37, 99, 235, 0.10);
    border: 1px solid rgba(37, 99, 235, 0.30);
    color: var(--blue);
    border-radius: 9px;
    padding: 13px 15px;
    margin-bottom: 20px;
    font-size: 14px;
}

.theme-toggle {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    padding: 8px 12px;
    font-size: 18px;
    line-height: 1;
    font-weight: 500;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.theme-toggle:hover {
    border-color: var(--text-muted);
}

.brand-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
    flex-shrink: 0;
    line-height: 0;
}
.brand-logo {
    display: block;
    width: auto;
    height: 52px;
    max-width: min(160px, 36vw);
    aspect-ratio: 172 / 77;
    object-fit: contain;
    object-position: left center;
    border-radius: 6px;
    flex-shrink: 0;
    /* Placa blanca fija: el PNG tiene fondo blanco; no invertir en tema oscuro */
    background: #fff;
    padding: 3px 5px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent);
    filter: none;
}
[data-theme="dark"] .brand-logo {
    background: #fff;
    filter: none;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.app-header {
    min-height: 80px;
}
.app-header-inner {
    padding: 12px 0 12px 64px;
    box-sizing: border-box;
    align-items: center;
}
.app-header .brand-area {
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}
.guest-body .app-header-inner,
.publico-body .app-header-inner {
    padding-left: 0;
}
.nav-brand {
    display: flex;
    align-items: center;
    min-width: 0;
}
.nav-brand-logo {
    display: block;
    height: 40px;
    width: auto;
    max-width: 128px;
    aspect-ratio: 172 / 77;
    object-fit: contain;
    object-position: left center;
    border-radius: 6px;
    background: #fff;
    padding: 2px 4px;
    filter: none;
}
[data-theme="dark"] .nav-brand-logo {
    background: #fff;
    filter: none;
}
/* Wordmark tipográfico temporal hasta logo institucional definitivo */
.brand-wordmark {
    display: inline-flex;
    align-items: center;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    line-height: 1.15;
    max-width: min(100%, 16rem);
}
.brand-wordmark--header {
    font-size: clamp(0.95rem, 2.4vw, 1.2rem);
}
.brand-wordmark--nav {
    font-size: 0.95rem;
    max-width: 11rem;
}
@media (max-width: 900px) {
    .brand-logo {
        height: 44px;
        max-width: min(140px, 42vw);
    }
    .nav-brand-logo {
        height: 36px;
        max-width: 112px;
    }
    .app-header {
        min-height: 72px;
    }
    .app-header-inner {
        /* Botón Menú fijo (~67px) + holgura */
        padding: 14px 0 14px 80px;
    }
    .brand-wordmark--header {
        max-width: 10.5rem;
        font-size: 0.95rem;
    }
}
@media (max-width: 650px) {
    .brand-logo {
        height: 36px;
        max-width: min(112px, 40vw);
    }
    .nav-brand-logo {
        height: 32px;
        max-width: 96px;
    }
    .app-header {
        min-height: 64px;
    }
    .app-header-inner {
        padding: 12px 0 12px 88px;
    }
    .brand-wordmark--header {
        max-width: 8.5rem;
        font-size: 0.85rem;
    }
}
.nav-admin-group {
    margin-top: 18px;
    border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    padding-top: 10px;
}
.nav-admin-group > summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    list-style: none;
    padding: 8px 0;
}
.nav-admin-group > summary::-webkit-details-marker { display: none; }
.nav-admin-group .nav-admin-label {
    margin: 12px 0 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .7;
}
.guest-body {
    min-height: 100vh;
}
.guest-card {
    max-width: 420px;
    margin: 24px auto 40px;
}
.header-user {
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

.public-hero {
    max-width: 820px;
    margin: 0 auto;
}
.public-hero .card { margin-top: 18px; }
.qr-panel {
    text-align: center;
    padding: 24px;
}
.qr-panel img {
    max-width: 260px;
    width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    padding: 12px;
}

.chart-bars {
    display: grid;
    gap: 10px;
}
.chart-bar-row {
    display: grid;
    grid-template-columns: minmax(100px, 180px) 1fr auto;
    gap: 10px;
    align-items: center;
    font-size: 13px;
}
.chart-bar-track {
    height: 10px;
    background: var(--bg-card-secondary);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.chart-bar-fill {
    height: 100%;
    background: var(--green);
    border-radius: 999px;
}

.filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end;
}

@media (max-width: 800px) {
    .form-grid { grid-template-columns: 1fr; }
    .chart-bar-row { grid-template-columns: 1fr; }
}

/* ——— Expediente PQRSD ——— */
.badge-yellow{background:rgba(202,138,4,.15);color:#ca8a04;padding:4px 10px;border-radius:6px;font-weight:700;font-size:13px}
.badge-green{background:rgba(22,163,74,.15);color:#15803d;padding:4px 10px;border-radius:6px;font-weight:700;font-size:13px}
.badge-blue{background:rgba(37,99,235,.12);color:#1d4ed8;padding:4px 10px;border-radius:6px;font-weight:700;font-size:13px}
.badge-gray{background:rgba(100,116,139,.12);color:#475569;padding:4px 10px;border-radius:6px;font-weight:700;font-size:13px}
[data-theme="dark"] .badge-yellow{color:#facc15}
[data-theme="dark"] .badge-green{color:#4ade80}
[data-theme="dark"] .badge-blue{color:#93c5fd}
[data-theme="dark"] .badge-gray{color:#cbd5e1}

.exp-alert{
    margin-top:14px;
    padding:12px 14px;
    border-radius:10px;
    border:1px solid var(--border);
    font-size:14px;
    line-height:1.45;
}
.exp-alert-warn{
    border-color:rgba(202,138,4,.45);
    background:rgba(250,204,21,.1);
}
.exp-alert-danger{
    border-color:rgba(239,68,68,.4);
    background:rgba(239,68,68,.1);
}
.exp-alert-info{
    border-color:rgba(37,99,235,.35);
    background:rgba(37,99,235,.08);
}

.exp-summary{margin-top:16px}
.exp-summary-vital{border-color:rgba(239,68,68,.45)!important;box-shadow:inset 4px 0 0 var(--red)}
.exp-summary-vencido{border-color:rgba(239,68,68,.4)!important}
.exp-summary-pendiente{border-color:rgba(202,138,4,.45)!important;box-shadow:inset 4px 0 0 #ca8a04}
.exp-summary-top{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:14px;
}
.exp-kicker{
    margin:0 0 4px;
    font-size:12px;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--text-muted);
}
.exp-radicado{
    margin:0;
    font-size:clamp(1.25rem,2.5vw,1.6rem);
    line-height:1.2;
}
.exp-summary-meta{margin:6px 0 0}
.exp-summary-semaforo{text-align:right}
.exp-chips{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin:0;
}
.exp-chips > div{
    display:flex;
    flex-direction:column;
    min-height:76px;
    padding:12px 14px;
    border-radius:10px;
    background:var(--bg-card-secondary, rgba(0,0,0,.03));
    border:1px solid var(--border);
}
.exp-chips dt{
    margin:0;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.03em;
    color:var(--text-muted);
}
.exp-chips dd{
    margin:auto 0 0;
    padding-top:8px;
    font-size:14px;
    font-weight:700;
    line-height:1.35;
    color:var(--text-primary);
    word-break:break-word;
}
.exp-text-danger{color:var(--red)!important}
.exp-text-warn{color:#a16207!important}
[data-theme="dark"] .exp-text-warn{color:#facc15!important}
.exp-sla-note{margin:12px 0 0;font-size:13px}

.exp-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:14px 0 4px;
}
.exp-actions .btn{font-size:13px;padding:8px 12px}

.exp-section{
    margin-top:12px;
    overflow:hidden;
}
.exp-section-summary{
    list-style:none;
    cursor:pointer;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    column-gap:12px;
    row-gap:4px;
    min-height:52px;
    padding:14px 16px;
    font-weight:700;
    color:var(--text-primary);
    text-align:left;
    user-select:none;
}
.exp-section-summary::-webkit-details-marker{display:none}
.exp-section-summary::before{
    content:'▸';
    grid-column:1;
    justify-self:start;
    color:var(--text-muted);
    transition:transform .15s ease;
    line-height:1;
}
.exp-section[open] > .exp-section-summary::before{transform:rotate(90deg)}
.exp-section-title{
    grid-column:2;
    justify-self:start;
    text-align:left;
    font-size:15px;
    line-height:1.3;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.exp-section-meta{
    grid-column:3;
    justify-self:end;
    text-align:right;
    font-weight:500;
    font-size:13px;
    line-height:1.3;
    max-width:38%;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.exp-chip-provisional dd{font-weight:600}
.exp-chip-provisional .exp-provisional-note{
    display:block;
    margin-top:4px;
    font-size:11px;
    font-weight:500;
    color:var(--text-muted);
}
.exp-cierre-pendientes{margin:8px 0 0 18px}
.exp-envio-campos{margin-top:10px;display:none}
.exp-envio-campos.is-visible{display:block}
.exp-section-summary:hover{background:rgba(0,0,0,.03)}
[data-theme="dark"] .exp-section-summary:hover{background:rgba(255,255,255,.04)}
.exp-section-body{
    border-top:1px solid var(--border);
    padding-top:16px;
}
.respuesta-ayuda{
    margin:6px 0 0;
    font-size:13px;
    color:var(--text-muted);
    line-height:1.4;
}
.respuesta-opciones{
    margin-top:14px;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--bg-card-secondary, rgba(0,0,0,.02));
}
.respuesta-opciones legend{
    padding:0 6px;
    font-size:13px;
    font-weight:700;
}
.exp-section-toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:14px;
}
.exp-two-col{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}
.exp-subtitle{
    margin:0 0 10px;
    font-size:15px;
}
.exp-descripcion{
    white-space:pre-wrap;
    line-height:1.5;
}
.exp-adjuntos{margin:0;padding-left:1.2rem}
.exp-form-narrow{max-width:520px}
.exp-solicitudes-lista{margin:0;padding-left:1.2rem;line-height:1.6}
.exp-solicitudes-lista a{margin-left:6px}
.exp-form-solicitar{
    margin-top:12px;
    padding-top:14px;
    border-top:1px solid var(--border);
}

@media (max-width:960px){
    .exp-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:800px){
    .exp-two-col{grid-template-columns:1fr}
    .exp-summary-semaforo{text-align:left}
    .exp-actions .btn{flex:1 1 calc(50% - 8px);text-align:center}
    .exp-section-summary{
        grid-template-columns:auto minmax(0,1fr) auto;
        column-gap:8px;
        padding:12px 14px;
    }
    .exp-section-title{font-size:14px}
    .exp-section-meta{
        grid-column:3;
        justify-self:end;
        text-align:right;
        max-width:40%;
        font-size:12px;
    }
}
@media (max-width:480px){
    .exp-chips{grid-template-columns:1fr}
    .exp-actions .btn{flex:1 1 100%}
}