/* =====================================================
   LicitaBot — capa de tokens
   Nivel 1  primitivas + semantica (nomenclatura shadcn/ui)
   Nivel 2  puente a Bootstrap 5.3 (--bs-*)
   Nivel 3  cada sistema visual (.cfg-*, .tpl-*, .cp-*, .pe-*,
            .up-*) apunta aqui, nunca a un hex suelto.
   Cambiar la marca = tocar este bloque, no las pantallas.
   ===================================================== */

:root {
    /* --- Superficies --- */
    --background: #f8f7f4;          /* blanco hueso */
    --foreground: #1f2937;          /* 13.7:1 sobre el hueso */
    --card: #ffffff;
    --popover: #ffffff;
    --muted: #f9fafb;
    --sidebar: #f9fafb;
    --secondary: #f3f4f6;
    --accent: #f3f4f6;
    --border: #e5e7eb;
    --input: #e5e7eb;
    --icon-muted: #c9cfd9;          /* iconos grandes de estado vacio */
    /* #6b7280 se queda en 4,5:1 sobre el hueso: cero margen para el texto de
       .72-.78rem que usan cfg/tpl/cp. Bajado a 5,6:1 conservando el matiz. */
    --muted-fg: #5b6472;

    /* --- Marca --- */
    --primary: #7c3aed;             /* violeta del degradado del logo IDIA */
    --primary-strong: #6d28d9;      /* hover/active — 7,1:1 sobre blanco */
    --primary-fg: #ffffff;          /* 5,7:1 sobre --primary */
    --primary-weak: #a78bfa;        /* escalon intermedio de rampas categoricas */
    --primary-soft: #f5f3ff;        /* fila seleccionada, chips */
    --primary-tint: rgba(124, 58, 237, .08);
    --ring: #7c3aed;
    --ring-shadow: 0 0 0 .2rem rgba(124, 58, 237, .22);

    /* --- Superficie profunda: navbar y heroes de la app interna --- */
    --deep: #4c1d95;                /* blanco encima: 11,0:1 */
    --deep-2: #7c3aed;              /* blanco encima:  5,7:1 */
    --deep-grad: linear-gradient(135deg, var(--deep) 0%, var(--deep-2) 100%);

    /* --- Estados: el relleno y la tinta NO son el mismo color ---
       Los planos (#d97706, #3b82f6, #10b981) rinden 3,2 / 3,7 / 2,5:1 sobre
       blanco: solo valen como relleno (puntos, barras, bordes, iconos grandes).
       Para texto sobre fondo tintado se usa la variante "-ink", verificada
       a >=4,5:1 — es la correccion que ya vivia en los tokens --cp-*. */
    --destructive: #dc2626;  --destructive-ink: #b02a37;  --destructive-soft: #fbe9ea;
    --warning:     #d97706;  --warning-ink:     #8a5300;  --warning-soft:     #fdf3e3;
    --info:        #3b82f6;  --info-ink:        #1a5c8f;  --info-soft:        #e7f0f8;
    --success:     #10b981;  --success-ink:     #19703b;  --success-soft:     #e9f6ef;

    /* --- Elevacion --- */
    --shadow-sm: 0 .125rem .5rem rgba(31, 41, 55, .06);
    --shadow-md: 0 .35rem .9rem rgba(31, 41, 55, .09);
    --shadow-lg: 0 .5rem 1.25rem rgba(76, 29, 149, .18);

    /* --- Puente a Bootstrap 5.3 ---
       Las utilidades que se calculan con rgba(var(--bs-*-rgb)) — .bg-*, .text-*,
       .border-*, .link-* — obedecen a esto. Los componentes (.btn-*, .alert-*)
       no: llevan valores literales y se corrigen mas abajo, uno por uno. */
    --bs-primary: #7c3aed;
    --bs-primary-rgb: 124, 58, 237;
    --bs-body-bg: #f8f7f4;
    --bs-body-color: #1f2937;
    --bs-secondary-color: #5b6472;
    --bs-border-color: #e5e7eb;
    --bs-link-color: #7c3aed;
    --bs-link-color-rgb: 124, 58, 237;
    --bs-link-hover-color: #6d28d9;
    --bs-link-hover-color-rgb: 109, 40, 217;
    --bs-danger-rgb: 220, 38, 38;
    --bs-success-rgb: 16, 185, 129;
    --bs-warning-rgb: 217, 119, 6;
    --bs-info-rgb: 59, 130, 246;
    --bs-focus-ring-color: rgba(124, 58, 237, .25);
    --bs-emphasis-color: #1f2937;
}

/* General Styles */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--background);
    color: var(--foreground);
}

/* Navigation */
.navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
}

/* Cards */
.card {
    border: none;
    background-color: var(--card);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s ease-in-out;
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-header {
    background-color: var(--muted);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
}

/* Buttons */
.btn {
    border-radius: 0.375rem;
    font-weight: 500;
    transition: all 0.15s ease-in-out;
}

/* Bootstrap 5.3 genera cada .btn-* con valores literales en --bs-btn-*, asi que
   redefinir --bs-primary no los alcanza: hay que reasignarlos por componente.
   Los solidos usan la variante que pasa 4,5:1 con texto blanco, no el color
   plano de relleno (#10b981 en blanco es 2,5:1). */
.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary-strong);
    --bs-btn-hover-border-color: var(--primary-strong);
    --bs-btn-active-bg: var(--primary-strong);
    --bs-btn-active-border-color: var(--primary-strong);
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-active-bg: var(--primary-strong);
    --bs-btn-active-border-color: var(--primary-strong);
    --bs-btn-disabled-color: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
}

/* Secundario neutro: superficie clara con tinta oscura, no el gris solido de
   Bootstrap. Es el "Cancelar" de los modales y el boton mas repetido. */
.btn-secondary {
    --bs-btn-bg: var(--secondary);
    --bs-btn-border-color: var(--border);
    --bs-btn-color: var(--foreground);
    --bs-btn-hover-bg: var(--border);
    --bs-btn-hover-border-color: #d6dae1;
    --bs-btn-hover-color: var(--foreground);
    --bs-btn-active-bg: var(--border);
    --bs-btn-active-border-color: #d6dae1;
    --bs-btn-active-color: var(--foreground);
    --bs-btn-disabled-bg: var(--secondary);
    --bs-btn-disabled-border-color: var(--border);
    --bs-btn-disabled-color: var(--muted-fg);
}

.btn-outline-secondary {
    --bs-btn-color: var(--foreground);
    --bs-btn-border-color: var(--border);
    --bs-btn-hover-bg: var(--secondary);
    --bs-btn-hover-border-color: #d6dae1;
    --bs-btn-hover-color: var(--foreground);
    --bs-btn-active-bg: var(--border);
    --bs-btn-active-border-color: #d6dae1;
    --bs-btn-active-color: var(--foreground);
    --bs-btn-disabled-color: var(--muted-fg);
    --bs-btn-disabled-border-color: var(--border);
}

.btn-danger {
    --bs-btn-bg: var(--destructive);
    --bs-btn-border-color: var(--destructive);
    --bs-btn-hover-bg: var(--destructive-ink);
    --bs-btn-hover-border-color: var(--destructive-ink);
    --bs-btn-active-bg: var(--destructive-ink);
    --bs-btn-active-border-color: var(--destructive-ink);
    --bs-btn-disabled-bg: var(--destructive);
    --bs-btn-disabled-border-color: var(--destructive);
}

.btn-outline-danger {
    --bs-btn-color: var(--destructive-ink);
    --bs-btn-border-color: var(--destructive);
    --bs-btn-hover-bg: var(--destructive);
    --bs-btn-hover-border-color: var(--destructive);
    --bs-btn-active-bg: var(--destructive-ink);
    --bs-btn-active-border-color: var(--destructive-ink);
    --bs-btn-disabled-color: var(--destructive-ink);
    --bs-btn-disabled-border-color: var(--destructive);
}

.btn-success {
    --bs-btn-bg: var(--success-ink);
    --bs-btn-border-color: var(--success-ink);
    --bs-btn-hover-bg: #135a2f;
    --bs-btn-hover-border-color: #135a2f;
    --bs-btn-active-bg: #135a2f;
    --bs-btn-active-border-color: #135a2f;
    --bs-btn-disabled-bg: var(--success-ink);
    --bs-btn-disabled-border-color: var(--success-ink);
}

.btn-outline-success {
    --bs-btn-color: var(--success-ink);
    --bs-btn-border-color: var(--success-ink);
    --bs-btn-hover-bg: var(--success-ink);
    --bs-btn-hover-border-color: var(--success-ink);
    --bs-btn-active-bg: #135a2f;
    --bs-btn-active-border-color: #135a2f;
    --bs-btn-disabled-color: var(--success-ink);
    --bs-btn-disabled-border-color: var(--success-ink);
}

/* #d97706 con texto blanco da 3,2:1; con la tinta base da 5,3:1. */
.btn-warning {
    --bs-btn-bg: var(--warning);
    --bs-btn-border-color: var(--warning);
    --bs-btn-color: var(--foreground);
    --bs-btn-hover-bg: #c26a05;
    --bs-btn-hover-border-color: #c26a05;
    --bs-btn-hover-color: var(--foreground);
    --bs-btn-active-bg: #c26a05;
    --bs-btn-active-border-color: #c26a05;
    --bs-btn-active-color: var(--foreground);
    --bs-btn-disabled-bg: var(--warning);
    --bs-btn-disabled-border-color: var(--warning);
    --bs-btn-disabled-color: var(--foreground);
}

.btn-outline-warning {
    --bs-btn-color: var(--warning-ink);
    --bs-btn-border-color: var(--warning);
    --bs-btn-hover-bg: var(--warning);
    --bs-btn-hover-border-color: var(--warning);
    --bs-btn-hover-color: var(--foreground);
    --bs-btn-active-bg: var(--warning);
    --bs-btn-active-border-color: var(--warning);
    --bs-btn-active-color: var(--foreground);
    --bs-btn-disabled-color: var(--warning-ink);
    --bs-btn-disabled-border-color: var(--warning);
}

.btn-info,
.btn-outline-info {
    --bs-btn-color: var(--info-ink);
    --bs-btn-border-color: var(--info);
    --bs-btn-hover-bg: var(--info);
    --bs-btn-hover-border-color: var(--info);
    --bs-btn-hover-color: var(--foreground);
    --bs-btn-active-bg: var(--info);
    --bs-btn-active-border-color: var(--info);
    --bs-btn-active-color: var(--foreground);
    --bs-btn-disabled-color: var(--info-ink);
    --bs-btn-disabled-border-color: var(--info);
}

.btn-info {
    --bs-btn-bg: var(--info);
    --bs-btn-color: var(--foreground);
}

/* El anillo de foco es el mismo violeta en toda la app. */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.page-link:focus-visible,
.dropdown-item:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 1px;
    box-shadow: none;
}

.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1.125rem;
}

/* Progress bars */
.progress {
    height: 1rem;
    background-color: var(--secondary);
    border-radius: 0.5rem;
}

.progress-bar {
    border-radius: 0.5rem;
    background-color: var(--primary);
}

/* Forms */
.form-control,
.form-select {
    border-radius: 0.375rem;
    border: 1px solid var(--input);
    background-color: var(--card);
    color: var(--foreground);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ring);
    box-shadow: var(--ring-shadow);
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.form-control-lg {
    padding: 0.75rem 1rem;
    font-size: 1.125rem;
    border-radius: 0.5rem;
}

/* Login/Register Pages */
.vh-100 {
    min-height: 100vh;
}

/* Superficie profunda de marca.
   Antes .bg-primary llevaba el degradado con !important, asi que secuestraba la
   utilidad de Bootstrap: los <span class="badge bg-primary"> tambien recibian un
   degradado completo. Ahora .bg-primary vuelve a ser el violeta plano que define
   --bs-primary-rgb, y el degradado se pide de forma explicita. */
.bg-header-primary {
    background: var(--deep-grad) !important;
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Module cards */
.card.border-primary {
    border-color: var(--primary) !important;
}

.card.border-secondary {
    border-color: var(--border) !important;
}

.card.border-info {
    border-color: var(--info) !important;
}

.card.border-success {
    border-color: var(--success) !important;
}

/* Status indicators */
.badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

/* Spinner */
.spinner-border-sm {
    width: 1rem;
    height: 1rem;
}

/* Progress container */
.progress-container {
    background-color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 1.5rem;
}

/* Results table */
.results-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    box-shadow: var(--shadow-sm);
    border-radius: 0.5rem;
    overflow: hidden;
}

.results-table th {
    background-color: var(--deep);
    color: var(--primary-fg);
    padding: 0.75rem;
    text-align: left;
    font-weight: 600;
    border: none;
}

.results-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.results-table tr:nth-child(even) {
    background-color: var(--muted);
}

.results-table tr:hover {
    background-color: var(--secondary);
}

/* Responsive utilities */
@media (max-width: 768px) {
    .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .btn-lg {
        padding: 0.5rem 1rem;
        font-size: 1rem;
    }
    
    .display-1 {
        font-size: 3rem;
    }
    
    .display-4 {
        font-size: 1.5rem;
    }
}

@media (max-width: 576px) {
    .navbar-brand {
        font-size: 1.25rem;
    }
    
    .h3 {
        font-size: 1.5rem;
    }
    
    .lead {
        font-size: 1rem;
    }
}

/* Custom alerts */
.alert {
    border: none;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
}

.alert-success {
    background-color: var(--success-soft);
    color: var(--success-ink);
}

.alert-danger {
    background-color: var(--destructive-soft);
    color: var(--destructive-ink);
}

.alert-warning {
    background-color: var(--warning-soft);
    color: var(--warning-ink);
}

.alert-info {
    background-color: var(--info-soft);
    color: var(--info-ink);
}

/* Footer */
footer {
    margin-top: auto;
    background-color: var(--muted) !important;
}

/* Loading states */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Utility classes */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

.shadow {
    box-shadow: var(--shadow-md) !important;
}

.shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}

/* Session History - Lateral View Styles */
.session-container {
    position: relative;
    min-height: 70vh;
}

.full-view {
    width: 100%;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.full-view.slide-left {
    transform: translateX(-100%);
    opacity: 0;
}

.detail-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}

.detail-view.show {
    display: block !important;
    transform: translateX(0);
}

/* Sessions Sidebar */
.sessions-sidebar-list {
    max-height: calc(100vh - 250px);
    overflow-y: auto;
}

.session-item,
.session-item-link {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.session-item:hover,
.session-item-link:hover {
    background-color: var(--muted);
}

/* La selección se marca con fondo y color de título, no con una barra lateral
   de acento (mismo criterio que .cp-req.active en la carpeta de aplicación).
   El realce del título compensa el contraste que aportaba la barra. */
.session-item.active {
    background-color: var(--primary-soft);
}

.session-item.active .session-date {
    color: var(--primary-strong);
}

.session-date {
    font-weight: 600;
    color: var(--foreground);
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.session-user {
    margin-bottom: 0.2rem;
}

.session-user small {
    font-size: 0.8rem;
    color: var(--muted-fg);
}

.session-dates {
    margin-bottom: 0.4rem;
}

.session-dates small {
    font-size: 0.8rem;
    color: var(--muted-fg);
}

.session-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.session-type {
    font-size: 0.85rem;
    color: var(--muted-fg);
}

.session-status {
    font-size: 0.8rem;
}

.session-status.success {
    color: var(--success-ink);
}

.session-status.error {
    color: var(--destructive);
}

.session-status.warning {
    color: var(--warning);
}

.session-status.secondary {
    color: var(--muted-fg);
}

.session-results {
    font-size: 0.8rem;
    color: var(--info-ink);
    font-weight: 500;
}

/* Session Details Table */
.session-details-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.session-details-table th {
    background: var(--muted);
    padding: 12px 8px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--border);
}

.session-details-table td {
    padding: 12px 8px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.session-details-table tr:hover {
    background: var(--secondary);
}

.expediente-description-col { 
    width: 55%; 
    font-weight: bold; 
    color: var(--foreground); 
}

.importe-col { 
    width: 15%; 
    text-align: right; 
    font-weight: bold; 
    color: var(--success-ink); 
}

.fecha-col { 
    width: 15%; 
    text-align: center; 
}

.acciones-col {
    width: 15%;
    text-align: center;
}

/* Sort buttons */
.sort-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font-weight: 600;
    font-size: inherit;
}
.sort-btn:hover { color: var(--primary); }
.sort-btn-inactive { font-weight: 500; opacity: 0.7; }
.sort-btn-inactive:hover { opacity: 1; }

.acciones-col .btn-group {
    display: flex;
    gap: 2px;
}

.acciones-col .btn-sm {
    padding: 0.25rem 0.4rem;
    font-size: 0.8rem;
}

/* =====================================================
   RESPONSIVE DESIGN - Desktop-first (media queries down)
   ===================================================== */

/* --- Page Header Responsive --- */
@media (max-width: 768px) {
    .session-history-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem;
    }

    .session-history-header .header-actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .session-history-header .header-actions .btn {
        flex: 1 1 auto;
        font-size: 0.85rem;
    }

    .session-history-header .header-actions small {
        width: 100%;
        text-align: center;
    }
}

/* --- Main History Table: Card layout on mobile --- */
@media (max-width: 768px) {
    /* Convert table to card layout */
    #fullView .session-details-table thead {
        display: none;
    }

    #fullView .session-details-table,
    #fullView .session-details-table tbody {
        display: block;
    }

    #fullView .session-details-table tr {
        display: block;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 0.5rem;
        padding: 0.75rem;
        margin-bottom: 0.75rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    #fullView .session-details-table td {
        display: flex;
        align-items: flex-start;
        padding: 0.3rem 0;
        border-bottom: none;
        font-size: 0.85rem;
    }

    #fullView .session-details-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--muted-fg);
        min-width: 7rem;
        flex-shrink: 0;
        font-size: 0.8rem;
    }

    /* Acciones column: buttons 50/50 */
    #fullView .session-details-table td[data-label="Acciones"] {
        padding-top: 0.5rem;
        border-top: 1px solid var(--secondary);
        margin-top: 0.25rem;
    }

    #fullView .session-details-table td[data-label="Acciones"]::before {
        display: none;
    }

    #fullView .session-details-table td[data-label="Acciones"] .btn-group {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        width: 100%;
    }

    #fullView .session-details-table td[data-label="Acciones"] .btn-group .btn {
        flex: 1 1 50%;
    }

}

@media (max-width: 576px) {
    #fullView .session-details-table td::before {
        min-width: 6rem;
        font-size: 0.75rem;
    }

    #fullView .session-details-table td {
        font-size: 0.8rem;
    }

    #fullView .session-details-table tr {
        padding: 0.6rem;
    }
}

/* --- Mobile Session Info Header (hidden on desktop) --- */
.mobile-session-header {
    display: none;
}

/* --- Detail View: Sidebar + Panel Responsive --- */
@media (max-width: 992px) {
    .detail-view {
        position: relative !important;
        transform: none !important;
        height: auto !important;
    }

    .detail-view.show {
        transform: none !important;
    }

    .detail-view .row.h-100 {
        height: auto !important;
        flex-direction: column;
    }

    .detail-view .col-lg-3 {
        flex: none;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin-bottom: 1rem;
    }

    .detail-view .col-lg-9 {
        flex: none;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .detail-view .col-lg-3 .card {
        height: auto !important;
    }

    .detail-view .col-lg-9 .card {
        height: auto !important;
    }

    .detail-view .col-lg-9 .card-body {
        max-height: none !important;
        overflow: visible !important;
    }

    .sessions-sidebar-list {
        max-height: 40vh;
    }

    .session-container {
        min-height: auto;
    }

    /* Fix slide animation on tablet/mobile */
    .full-view.slide-left {
        display: none;
    }
}

@media (max-width: 768px) {
    /* Hide sidebar on mobile, show mobile session header instead */
    .detail-view .col-lg-3 {
        display: none !important;
    }

    .mobile-session-header {
        display: block;
        background: linear-gradient(135deg, var(--muted), var(--secondary));
        border: 1px solid var(--border);
        border-radius: 0.5rem;
        padding: 0.75rem 1rem;
        margin-bottom: 1rem;
    }

    .mobile-session-header .mobile-session-title {
        font-weight: 600;
        font-size: 0.95rem;
        color: var(--foreground);
        margin-bottom: 0.25rem;
    }

    .mobile-session-header .mobile-session-meta {
        font-size: 0.8rem;
        color: var(--muted-fg);
    }

    .mobile-session-header .mobile-session-meta span {
        margin-right: 0.75rem;
    }

    .session-item {
        padding: 0.6rem 0.75rem;
    }

    .session-date {
        font-size: 0.9rem;
    }

    .session-user small,
    .session-dates small {
        font-size: 0.75rem;
    }

    .session-type {
        font-size: 0.8rem;
    }
}

@media (max-width: 576px) {
    .mobile-session-header {
        padding: 0.6rem 0.75rem;
    }

    .mobile-session-header .mobile-session-title {
        font-size: 0.85rem;
    }

    .mobile-session-header .mobile-session-meta {
        font-size: 0.75rem;
    }

    .session-item {
        padding: 0.5rem 0.65rem;
    }

    .session-date {
        font-size: 0.85rem;
    }

    .session-user small,
    .session-dates small {
        font-size: 0.7rem;
    }

    .session-type {
        font-size: 0.75rem;
    }

    .session-results {
        font-size: 0.75rem;
    }
}

/* --- Inner Results Table (detail panel): Card layout on mobile --- */
@media (max-width: 768px) {
    #sessionDetailsContent .session-details-table thead {
        display: none;
    }

    #sessionDetailsContent .session-details-table,
    #sessionDetailsContent .session-details-table tbody {
        display: block;
    }

    #sessionDetailsContent .session-details-table tr {
        display: block;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 0.5rem;
        padding: 0.75rem;
        margin-bottom: 0.75rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    #sessionDetailsContent .session-details-table td {
        display: block;
        padding: 0.3rem 0;
        border-bottom: none;
        font-size: 0.85rem;
        width: 100% !important;
        text-align: left !important;
    }

    #sessionDetailsContent .session-details-table td::before {
        content: attr(data-label);
        display: block;
        font-weight: 600;
        color: var(--muted-fg);
        font-size: 0.75rem;
        margin-bottom: 0.15rem;
    }

    /* Expediente column: full width */
    #sessionDetailsContent .session-details-table td.expediente-description-col {
        width: 100% !important;
    }

    /* Importe column: show label */
    #sessionDetailsContent .session-details-table td.importe-col {
        text-align: left !important;
        color: var(--success-ink);
        font-weight: bold;
    }

    /* Acciones column: buttons 50/50 */
    #sessionDetailsContent .session-details-table td.acciones-col {
        text-align: left !important;
        padding-top: 0.5rem;
        border-top: 1px solid var(--secondary);
        margin-top: 0.25rem;
    }

    #sessionDetailsContent .session-details-table td.acciones-col::before {
        display: none;
    }

    #sessionDetailsContent .session-details-table td.acciones-col .d-grid {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.5rem;
    }

    #sessionDetailsContent .session-details-table td.acciones-col .d-grid .btn {
        flex: 1 1 50%;
    }

    /* Section headers in favorites */
    .automation-section-header {
        font-size: 0.95rem;
        padding: 10px 12px;
    }
}

@media (max-width: 576px) {
    #sessionDetailsContent .session-details-table tr {
        padding: 0.6rem;
    }

    #sessionDetailsContent .session-details-table td {
        font-size: 0.8rem;
    }

    #sessionDetailsContent .session-details-table td::before {
        font-size: 0.7rem;
    }

    .automation-section-header {
        font-size: 0.85rem;
        padding: 8px 10px;
    }
}

/* --- Results Table (licitaciones search): Card layout on mobile --- */
@media (max-width: 768px) {
    .results-table thead {
        display: none;
    }

    .results-table,
    .results-table tbody {
        display: block;
    }

    .results-table tr {
        display: block;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 0.5rem;
        padding: 0.75rem;
        margin-bottom: 0.75rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    .results-table td {
        display: block;
        padding: 0.3rem 0;
        border-bottom: none;
        font-size: 0.85rem;
        width: 100% !important;
        text-align: left !important;
    }

    .results-table td::before {
        content: attr(data-label);
        display: block;
        font-weight: 600;
        color: var(--muted-fg);
        font-size: 0.75rem;
        margin-bottom: 0.15rem;
    }

    .results-table td.expediente-description-col {
        width: 100% !important;
    }

    .results-table td.importe-col {
        text-align: left !important;
    }

    .results-table td.estado-col {
        display: block !important;
    }

    .results-table td.acciones-col {
        padding-top: 0.5rem;
        border-top: 1px solid var(--secondary);
        margin-top: 0.25rem;
    }

    .results-table td.acciones-col::before {
        display: none;
    }

    .results-table td.acciones-col .d-grid {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.5rem;
    }

    .results-table td.acciones-col .d-grid .btn {
        flex: 1 1 50%;
    }
}

@media (max-width: 576px) {
    .results-table tr {
        padding: 0.6rem;
    }

    .results-table td {
        font-size: 0.8rem;
    }

    .results-table td::before {
        font-size: 0.7rem;
    }
}

/* --- Modals: Responsive --- */
@media (max-width: 768px) {
    #sessionDetailsModal .modal-dialog {
        max-width: 95%;
        margin: 1rem auto;
    }

    #errorDetailsModal .modal-dialog {
        max-width: 95%;
        margin: 1rem auto;
    }
}

/* --- Touch improvements --- */
@media (hover: none) and (pointer: coarse) {
    .session-item {
        padding: 0.75rem 1rem;
        min-height: 3rem;
    }

    .session-item:active {
        background-color: var(--info-soft);
    }

    /* Ensure minimum touch target size */
    #fullView .session-details-table td[data-label="Acciones"] .btn,
    #sessionDetailsContent .session-details-table td.acciones-col .btn {
        min-height: 2.5rem;
        min-width: 2.5rem;
    }
}

/* Favorite Rating Widget Styles (apagar + 3 estrellas) */
.fav-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    line-height: 1;
}

.fav-rating.is-loading {
    opacity: 0.6;
}

.fav-rating .fav-icon {
    background: none;
    border: none;
    padding: 0 2px;
    margin: 0;
    line-height: 1;
    cursor: pointer;
    font-size: 1.05rem;
    color: var(--input); /* gris apagado por defecto */
    transition: color 0.12s ease-in-out;
}

.fav-rating .fav-icon:focus {
    outline: none;
}

.fav-rating .fav-icon i {
    display: block;
}

/* Boton "apagar" (nivel 0) separado de las estrellas */
.fav-rating .fav-off {
    margin-right: 0.4rem;
    font-size: 0.95rem;
}

.fav-rating .fav-off.is-active {
    color: var(--muted-fg); /* off seleccionado */
}

.fav-rating .fav-off:hover {
    color: var(--destructive); /* hover sobre apagar -> rojo de quitar */
}

/* Estrellas coloreadas segun nivel (las pinta el JS al hacer hover/click) */
.fav-rating .fav-star.is-gold {
    color: var(--warning); /* niveles 1-2 */
}

.fav-rating .fav-star.is-red {
    color: var(--destructive); /* nivel 3 */
}

/* La cuenta regresiva para quitar de favoritos (.fav-removing, .fav-removing-bar,
   .fav-removing-fill, .fav-cancel-remove) se eliminó: ninguna plantilla ni script
   la renderiza ya. Solo sobrevive .fav-rating, que sí está en uso. */

/* Modal Z-Index Management for Nested Modals */
#deleteConfirmModal {
    z-index: 1070 !important;
}

#deleteConfirmModal.show ~ .modal-backdrop.show {
    z-index: 1069 !important;
}

/* =====================================================
   Configuración: pantalla unificada con pestañas (.cfg-*)
   Mismo lenguaje visual que el Perfil de evaluación:
   gradiente petróleo/teal de marca (var(--deep) -> var(--primary)).
   ===================================================== */
.cfg-wrap { --cfg-deep:var(--deep); --cfg-teal:var(--primary); --cfg-ink:var(--foreground); --cfg-muted:var(--muted-fg); }

.cfg-hero {
    background: linear-gradient(135deg, var(--deep) 0%, var(--primary) 100%);
    color: #fff; border-radius: 1rem 1rem 0 0;
    padding: 1.6rem 1.75rem 1.1rem;
    box-shadow: 0 .5rem 1.25rem rgba(31, 41, 55, .2);
}
.cfg-hero .eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.72); }
.cfg-hero h1 { font-weight: 700; font-size: 1.55rem; margin: .1rem 0 .25rem; }
.cfg-hero p { color: rgba(255,255,255,.82); margin: 0; font-size: .9rem; max-width: 62ch; }

.cfg-tabs-bar {
    background: #fff; border: 1px solid var(--border); border-top: none;
    border-radius: 0 0 1rem 1rem; padding: .6rem .75rem;
    box-shadow: 0 .125rem .5rem rgba(31, 41, 55,.06);
    margin-bottom: 1.5rem; overflow-x: auto;
}
.cfg-tabs { display: inline-flex; gap: .25rem; min-width: min-content; }
.cfg-tab {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .5rem .95rem; border-radius: .55rem;
    color: var(--cfg-muted); font-weight: 600; font-size: .9rem;
    text-decoration: none; white-space: nowrap;
    transition: background .12s ease, color .12s ease;
}
.cfg-tab:hover { color: var(--cfg-ink); background: var(--secondary); }
.cfg-tab.active { color: #fff; background: linear-gradient(135deg, var(--deep), var(--primary)); box-shadow: 0 1px 3px rgba(31, 41, 55,.25); }
.cfg-tab i { font-size: 1rem; }

.cfg-card { background: #fff; border-radius: 1rem; box-shadow: 0 .125rem .5rem rgba(31, 41, 55,.06); border: 1px solid var(--border); margin-bottom: 1.25rem; }
.cfg-card:hover { box-shadow: 0 .35rem .9rem rgba(31, 41, 55,.08); }
.cfg-card-head { padding: 1.1rem 1.25rem .35rem; }
.cfg-card-title { font-weight: 600; color: var(--cfg-ink); font-size: 1.02rem; display: flex; align-items: center; gap: .5rem; margin: 0; }
.cfg-card-title i { color: var(--cfg-teal); }
.cfg-card-sub { color: var(--cfg-muted); font-size: .84rem; margin: .15rem 0 0; }
.cfg-card-body { padding: .9rem 1.25rem 1.25rem; }

.cfg-btn-teal { background: var(--primary); color: #fff; border: none; }
.cfg-btn-teal:hover, .cfg-btn-teal:focus { background: var(--primary-strong); color: #fff; }
.cfg-btn-save { background: linear-gradient(135deg, var(--deep), var(--primary)); color: #fff; border: none; }
.cfg-btn-save:hover, .cfg-btn-save:focus { filter: brightness(1.09); color: #fff; }
.cfg-input:focus { border-color: var(--cfg-teal); box-shadow: 0 0 0 .2rem rgba(124, 58, 237,.18); }
.cfg-help { color: var(--cfg-muted); font-size: .82rem; }

/* status dot for the AI/keys tab */
.cfg-dot { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; }
.cfg-dot.on { background: var(--success-ink); }
.cfg-dot.off { background: var(--input); }

@media (max-width: 600px) {
    .cfg-hero { padding: 1.25rem 1.1rem .9rem; }
    .cfg-hero h1 { font-size: 1.3rem; }
    .cfg-tab { padding: .45rem .7rem; font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) { .cfg-tab { transition: none; } }

/* Sub-pestañas dentro de la sección Códigos CPV (Mis códigos / Biblioteca) */
.cpv-subtabs { display: inline-flex; gap: .25rem; border-bottom: 1px solid var(--border); }
.cpv-subtab {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .55rem .9rem; margin-bottom: -1px;
    color: var(--cfg-muted, var(--muted-fg)); font-weight: 600; font-size: .88rem;
    text-decoration: none; border-bottom: 2px solid transparent;
    transition: color .12s ease, border-color .12s ease;
}
.cpv-subtab:hover { color: var(--cfg-ink, var(--foreground)); }
.cpv-subtab.active { color: var(--cfg-teal, var(--primary)); border-bottom-color: var(--cfg-teal, var(--primary)); }
@media (prefers-reduced-motion: reduce) { .cpv-subtab { transition: none; } }

/* Códigos CPV (Mis códigos / Biblioteca): polish compartido por ambas pantallas,
   layered on top of the shared .cfg-* system. */
.cpv-toolbar { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.cpv-btn-outline {
    background: #fff; border: 1px solid var(--border); color: var(--cfg-ink, var(--foreground)); font-weight: 500;
}
.cpv-btn-outline:hover, .cpv-btn-outline:focus { background: var(--secondary); color: var(--cfg-ink, var(--foreground)); border-color: var(--border); }
.cpv-btn-outline:disabled { opacity: .55; cursor: not-allowed; }

.cpv-code {
    color: var(--cfg-deep, var(--deep)); background: var(--primary-soft); border: 1px solid var(--border);
    padding: .2rem .5rem; border-radius: .4rem; font-size: .85rem; font-weight: 600;
}

.cpv-chip {
    display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600;
    padding: .25rem .6rem; border-radius: 2rem; white-space: nowrap;
}
.cpv-chip-automation { background: rgba(124, 58, 237,.1); color: var(--cfg-teal, var(--primary)); }
.cpv-chip-active { background: rgba(16, 185, 129,.12); color: var(--success-ink); }
.cpv-chip-inactive { background: var(--secondary); color: var(--cfg-muted, var(--muted-fg)); }
.cpv-chip i { font-size: .7rem; }

.cpv-table thead th {
    text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; font-weight: 700;
    color: var(--cfg-muted, var(--muted-fg)); background: var(--muted); border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.cpv-table tbody td { vertical-align: middle; font-size: .9rem; color: var(--cfg-ink, var(--foreground)); }
.cpv-table tbody tr:hover { background: var(--muted); }

.cpv-actions .btn { border-color: var(--border); }
.cpv-actions .btn-outline-danger:hover { background: var(--destructive); border-color: var(--destructive); }

.cpv-empty { text-align: center; padding: 3rem 1rem; color: var(--cfg-muted, var(--muted-fg)); }
.cpv-empty i.big { font-size: 2.4rem; color: var(--icon-muted); }

@media (max-width: 600px) {
    .cpv-toolbar { justify-content: stretch; }
    .cpv-toolbar .btn { flex: 1 1 auto; }
}

/* =====================================================
   Plantillas (.tpl-*): biblioteca de formatos + diccionario
   de variables. Se apoya en el sistema .cfg-* (mismo gradiente
   petróleo/teal, mismas cards, mismos botones) y añade solo lo
   propio de esta pantalla: zona de subida, filas de plantilla y
   chips de variable coloreados por cómo se va a resolver cada una.
   ===================================================== */
.tpl-wrap {
    --tpl-deep: var(--deep);
    --tpl-teal: var(--primary);
    --tpl-ink: var(--foreground);
    --tpl-muted: var(--muted-fg);
    --tpl-line: var(--border);
    --tpl-surface: var(--muted);
}

/* --- Cabecera --- */
.tpl-hero-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.tpl-hero-help {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: .45rem;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff; font-size: .85rem; font-weight: 600;
    padding: .45rem .85rem; border-radius: .55rem;
    transition: background .15s ease, border-color .15s ease;
}
.tpl-hero-help:hover, .tpl-hero-help:focus-visible { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .5); color: #fff; }

/* Pestañas de la pantalla: reutilizan .cfg-tab pero son <button>. */
.tpl-tab { border: 0; background-color: transparent; font-family: inherit; }
.tpl-tab-count {
    font-size: .72rem; font-weight: 700; line-height: 1;
    padding: .2rem .4rem; border-radius: .35rem;
    background: var(--border); color: var(--tpl-muted, var(--muted-fg));
}
.cfg-tab.active .tpl-tab-count { background: rgba(255, 255, 255, .22); color: #fff; }

/* --- Panel de ayuda (en línea, no modal) --- */
.tpl-help {
    background: #fff; border: 1px solid var(--tpl-line, var(--border)); border-radius: 1rem;
    padding: 1.25rem 1.35rem; margin-bottom: 1.25rem;
    box-shadow: 0 .125rem .5rem rgba(31, 41, 55, .06);
}
.tpl-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.tpl-step-n {
    width: 1.6rem; height: 1.6rem; border-radius: 50%; flex-shrink: 0;
    background: var(--primary-soft); color: var(--tpl-teal, var(--primary));
    font-weight: 700; font-size: .78rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.tpl-step h3 { font-size: .92rem; font-weight: 600; color: var(--tpl-ink, var(--foreground)); margin: 0 0 .2rem; }
.tpl-step p { font-size: .84rem; color: var(--tpl-muted, var(--muted-fg)); margin: 0; }

/* --- Barra de herramientas --- */
.tpl-toolbar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.tpl-search { position: relative; flex: 1 1 18rem; max-width: 26rem; }
.tpl-search i {
    position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
    color: var(--muted-fg); font-size: .95rem; pointer-events: none;
}
.tpl-search input { padding-left: 2.3rem; }
.tpl-search input:focus { border-color: var(--tpl-teal, var(--primary)); box-shadow: 0 0 0 .2rem rgba(124, 58, 237, .18); }
.tpl-search-clear {
    position: absolute; right: .45rem; top: 50%; transform: translateY(-50%);
    border: 0; background: transparent; color: var(--muted-fg); line-height: 1;
    padding: .25rem; border-radius: .3rem;
}
.tpl-search-clear:hover { color: var(--tpl-ink, var(--foreground)); background: var(--secondary); }

/* --- Zona de subida --- */
.tpl-drop {
    width: 100%; text-align: left;
    display: flex; align-items: center; gap: .95rem;
    padding: 1rem 1.15rem;
    border: 1.5px dashed var(--border); border-radius: .9rem;
    background: var(--muted); color: var(--tpl-ink, var(--foreground)); cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.tpl-drop:hover { border-color: var(--primary); background: var(--muted); }
.tpl-drop.is-over {
    border-color: var(--tpl-teal, var(--primary)); border-style: solid; background: var(--primary-soft);
    box-shadow: 0 .35rem .9rem rgba(124, 58, 237, .16);
}
.tpl-drop-icon {
    width: 2.6rem; height: 2.6rem; border-radius: .7rem; flex-shrink: 0;
    background: var(--primary-soft); color: var(--tpl-teal, var(--primary)); font-size: 1.2rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.tpl-drop-title { font-weight: 600; font-size: .93rem; margin: 0; }
.tpl-drop-sub { font-size: .82rem; color: var(--tpl-muted, var(--muted-fg)); margin: .1rem 0 0; }

/* Paso de confirmación tras elegir el archivo */
.tpl-staged {
    border: 1px solid var(--border); border-radius: .9rem; background: var(--primary-soft);
    padding: 1rem 1.15rem;
    animation: tplRise .18s ease-out;
}
.tpl-staged-file {
    display: inline-flex; align-items: center; gap: .5rem;
    background: #fff; border: 1px solid var(--border); border-radius: .5rem;
    padding: .35rem .6rem; font-size: .85rem; max-width: 100%;
}
.tpl-staged-file .bi { flex-shrink: 0; }
.tpl-staged-size { color: var(--tpl-muted, var(--muted-fg)); font-size: .78rem; white-space: nowrap; }

@keyframes tplRise {
    from { opacity: 0; transform: translateY(-.35rem); }
    to { opacity: 1; transform: none; }
}

/* --- Lista de plantillas --- */
.tpl-list { list-style: none; margin: 0; padding: 0; }
.tpl-item {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start; gap: .55rem .95rem;
    padding: 1rem 1.35rem;
    border-top: 1px solid var(--tpl-line, var(--border));
    transition: background-color .15s ease;
}
.tpl-list > .tpl-item:first-child { border-top: 0; }
.tpl-item:hover { background: var(--tpl-surface, var(--muted)); }
.tpl-item.is-new { animation: tplLand 1.6s ease-out; }

@keyframes tplLand {
    0% { background-color: var(--primary-soft); }
    100% { background-color: transparent; }
}

.tpl-kind {
    width: 2.35rem; height: 2.35rem; border-radius: .6rem; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.tpl-kind-docx { background: #eaf0fa; color: #1f4e9c; }
.tpl-kind-xlsx { background: var(--success-soft); color: var(--success-ink); }

.tpl-name { font-weight: 600; font-size: .95rem; color: var(--tpl-ink, var(--foreground)); margin: 0; word-break: break-word; }
.tpl-file { font-size: .78rem; color: var(--tpl-muted, var(--muted-fg)); margin: .1rem 0 0; word-break: break-all; }
.tpl-vars { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }

.tpl-actions { display: flex; gap: .2rem; align-items: center; }
.tpl-icon-btn {
    width: 2rem; height: 2rem; border: 0; border-radius: .45rem; background: transparent;
    color: var(--tpl-muted, var(--muted-fg)); font-size: .95rem; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color .15s ease, color .15s ease;
}
.tpl-icon-btn:hover { background: var(--border); color: var(--tpl-ink, var(--foreground)); }
.tpl-icon-btn.is-danger:hover { background: var(--destructive-soft); color: var(--destructive-ink); }

/* --- Chips de variable (fuente mono: son tokens literales del documento) --- */
.tpl-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .75rem; font-weight: 600; line-height: 1.35;
    padding: .2rem .45rem; border-radius: .4rem;
    border: 0; max-width: 100%;
}
.tpl-chip .bi { font-size: .68rem; flex-shrink: 0; }
.tpl-chip-ok { background: var(--success-soft); color: var(--success-ink); }
.tpl-chip-ia { background: var(--primary-soft); color: var(--primary-strong); }
.tpl-chip-miss { background: var(--warning-soft); color: var(--warning-ink); }
button.tpl-chip { cursor: pointer; transition: filter .15s ease; }
button.tpl-chip:hover { filter: brightness(.96); }

/* Leyenda de estados */
.tpl-legend { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .78rem; color: var(--tpl-muted, var(--muted-fg)); }
.tpl-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.tpl-legend i { font-size: .6rem; }
.tpl-legend .dot-ok { color: var(--success-ink); }
.tpl-legend .dot-ia { color: var(--primary-strong); }
.tpl-legend .dot-miss { color: var(--warning-ink); }

/* --- Aviso de variables sin definir (superficie tintada, sin barra lateral gruesa) --- */
.tpl-note {
    display: flex; align-items: flex-start; gap: .7rem;
    background: var(--warning-soft); border: 1px solid #f2e0c4; border-radius: .7rem;
    padding: .75rem .95rem; font-size: .86rem; color: var(--warning-ink);
}
.tpl-note .bi { color: var(--warning-ink); font-size: 1rem; line-height: 1.4; flex-shrink: 0; }
.tpl-note-link {
    border: 0; background: transparent; padding: 0; font: inherit;
    color: var(--warning-ink); font-weight: 600; text-decoration: underline; text-underline-offset: .15em;
}
.tpl-note-link:hover { color: #4a2f00; }

/* --- Secciones planas dentro de la pestaña Variables (sin cards anidadas) --- */
.tpl-section { padding: 1.25rem 1.35rem; border-top: 1px solid var(--tpl-line, var(--border)); }
.tpl-section:first-child { border-top: 0; }
/* Sin flex-wrap: con títulos largos en móvil, envolver dejaba el icono solo en
   una línea por encima del texto. Así el icono ancla a la izquierda y el texto
   se parte dentro de su propio item. */
.tpl-section-title {
    display: flex; align-items: flex-start; gap: .5rem;
    font-size: 1rem; font-weight: 600; color: var(--tpl-ink, var(--foreground)); margin: 0;
}
.tpl-section-title i { color: var(--tpl-teal, var(--primary)); line-height: 1.5; flex-shrink: 0; }
.tpl-section-title .tpl-badge-ia { align-self: center; flex-shrink: 0; }
.tpl-section-sub { font-size: .84rem; color: var(--tpl-muted, var(--muted-fg)); margin: .2rem 0 0; max-width: 72ch; }

/* Filas clave/valor */
.tpl-var-list { list-style: none; margin: .9rem 0 0; padding: 0; border: 1px solid var(--tpl-line, var(--border)); border-radius: .7rem; overflow: hidden; }
.tpl-var-row {
    display: grid; grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr) auto;
    align-items: center; gap: .75rem;
    padding: .6rem .85rem; border-top: 1px solid var(--tpl-line, var(--border));
    transition: background-color .15s ease;
}
.tpl-var-list > .tpl-var-row:first-child { border-top: 0; }
.tpl-var-row:hover { background: var(--tpl-surface, var(--muted)); }
.tpl-var-row.is-target { animation: tplLand 1.6s ease-out; }
.tpl-var-value { font-size: .88rem; color: var(--tpl-ink, var(--foreground)); word-break: break-word; }
.tpl-var-value.is-empty { color: var(--muted-fg); font-style: italic; }
.tpl-var-label { display: none; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--tpl-muted, var(--muted-fg)); }

/* Chips del perfil, agrupados */
.tpl-group { margin-bottom: .9rem; }
.tpl-group-name { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tpl-muted, var(--muted-fg)); margin: 0 0 .35rem; }
.tpl-group-chips { display: flex; flex-wrap: wrap; gap: .35rem; }

/* --- Estados vacíos y de carga --- */
.tpl-empty { text-align: center; padding: 3rem 1.5rem; color: var(--tpl-muted, var(--muted-fg)); }
.tpl-empty .big { font-size: 2.4rem; color: var(--icon-muted); }
.tpl-empty h3 { font-size: 1.05rem; font-weight: 600; color: var(--tpl-ink, var(--foreground)); margin: .75rem 0 .35rem; }
.tpl-empty p { font-size: .88rem; max-width: 46ch; margin: 0 auto; }

.tpl-skel { background: linear-gradient(90deg, var(--border) 25%, var(--muted) 37%, var(--border) 63%); background-size: 400% 100%; border-radius: .35rem; animation: tplShimmer 1.4s ease-in-out infinite; }
@keyframes tplShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.tpl-error { display: flex; align-items: center; gap: .6rem; padding: 1.5rem 1.35rem; color: var(--destructive-ink); font-size: .88rem; }

/* --- Responsive --- */
@media (max-width: 768px) {
    .tpl-steps { grid-template-columns: 1fr; gap: .9rem; }
}

@media (max-width: 576px) {
    .tpl-item { grid-template-columns: auto minmax(0, 1fr); padding: .85rem 1rem; }
    .tpl-actions { grid-column: 1 / -1; justify-content: flex-end; margin-top: .25rem; }
    .tpl-var-row { grid-template-columns: 1fr; gap: .25rem; padding: .75rem .85rem; }
    .tpl-var-label { display: block; }
    .tpl-var-row .tpl-actions { justify-content: flex-start; margin-top: .35rem; }
    .tpl-section { padding: 1rem; }
    .tpl-search { max-width: none; }
    .tpl-drop { padding: .85rem .9rem; gap: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .tpl-drop, .tpl-item, .tpl-icon-btn, .tpl-var-row, .tpl-hero-help, button.tpl-chip { transition: none; }
    .tpl-staged, .tpl-item.is-new, .tpl-var-row.is-target, .tpl-skel { animation: none; }
    .tpl-skel { background: var(--border); }
}

/* Alinea el padding horizontal heredado de .cfg-* con el de las filas (1.35rem)
   para que títulos, buscador y lista compartan la misma columna óptica. */
.tpl-wrap .cfg-card-head { padding-left: 1.35rem; padding-right: 1.35rem; }
.tpl-wrap .cfg-card-body { padding-left: 1.35rem; padding-right: 1.35rem; }
.tpl-pad { padding: 1rem 1.35rem; }
.tpl-pad-t { border-top: 1px solid var(--tpl-line, var(--border)); }

@media (max-width: 576px) {
    .tpl-wrap .cfg-card-head { padding-left: 1rem; padding-right: 1rem; }
    .tpl-wrap .cfg-card-body { padding-left: 1rem; padding-right: 1rem; }
    .tpl-pad { padding: .85rem 1rem; }
}

/* El atributo [hidden] viene del UA stylesheet, así que cualquier display de autor
   (.tpl-drop es flex, .tpl-chip inline-flex, .d-block de Bootstrap) lo pisa. Esta
   regla devuelve a [hidden] la última palabra dentro de la pantalla. */
.tpl-wrap [hidden] { display: none !important; }

.tpl-note-wrap { padding: 0 1.35rem 1rem; }
.tpl-var-empty { grid-column: 1 / -1; }
.tpl-miss-count { color: var(--warning-ink); font-weight: 600; }
/* El botón nativo de limpiar de <input type="search"> duplicaría el nuestro. */
.tpl-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

@media (max-width: 576px) {
    .tpl-note-wrap { padding: 0 1rem .85rem; }
}

/* Bootstrap 5.3 pinta el placeholder casi tan oscuro como un valor real, así que
   en los formularios de variables no se distingue un campo vacío de uno relleno. */
.tpl-wrap .form-control::placeholder { color: var(--muted-fg); opacity: 1; }

/* Etiqueta "IA" del título: no es un token del documento, así que no lleva mono. */
.tpl-badge-ia {
    display: inline-flex; align-items: center;
    font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: .15rem .4rem; border-radius: .3rem;
    background: var(--primary-soft); color: var(--primary-strong);
}

/* Zona de subida: variante grande que hace de estado vacío de la biblioteca. */
.tpl-drop-text { min-width: 0; }
.tpl-drop-title, .tpl-drop-sub { display: block; }
.tpl-drop-more { display: none; }

.tpl-drop.is-hero {
    flex-direction: column; align-items: center; text-align: center;
    padding: 2.75rem 1.5rem; gap: .7rem;
}
.tpl-drop.is-hero .tpl-drop-icon { width: 3.25rem; height: 3.25rem; font-size: 1.5rem; border-radius: .85rem; }
.tpl-drop.is-hero .tpl-drop-title { font-size: 1.05rem; }
.tpl-drop.is-hero .tpl-drop-more {
    display: block; margin: .45rem auto 0; max-width: 46ch;
    font-size: .86rem; color: var(--tpl-muted, var(--muted-fg));
}

/* Los <code> de la ayuda son tokens de plantilla: mismo lenguaje que .cpv-code,
   no el rosa por defecto de Bootstrap. */
.tpl-wrap :not(pre) > code {
    color: var(--deep); background: var(--primary-soft); border: 1px solid var(--border);
    padding: .1rem .3rem; border-radius: .3rem;
    font-size: .82em; white-space: nowrap;
}

/* El corte agresivo es solo para nombres de archivo largos sin espacios; aplicado a
   toda la línea partía palabras del resumen ("1 sin defin/ir"). */
.tpl-file { word-break: normal; overflow-wrap: break-word; }
.tpl-filename { word-break: break-all; }
.tpl-miss-count { white-space: nowrap; }

@media (max-width: 576px) {
    /* Objetivo táctil en la fila de acciones. */
    .tpl-icon-btn { width: 2.75rem; height: 2.75rem; font-size: 1.05rem; }
    .tpl-actions { gap: .1rem; }
}

/* =====================================================
   Carpeta de aplicación (.cp-*): prepara los documentos que
   exige un pliego. Comparte tokens y superficies con .cfg-*
   y .tpl-*; lo propio de esta pantalla es el estado por
   documento (lista maestro-detalle) y el nivel de formato
   oficial publicado por la entidad.
   ===================================================== */
.cp-wrap {
    --cp-deep: var(--deep);
    --cp-teal: var(--primary);
    --cp-ink: var(--foreground);
    --cp-muted: var(--muted-fg);
    --cp-line: var(--border);
    --cp-surface: var(--muted);
    /* Pares fondo/texto verificados a >=4.5:1 (el juego original —#27ae60 sobre
       #e6f6ec, #d9891a sobre #fbf0dd— se quedaba en 2,5:1 en texto de .62rem).
       Esa correccion ahora vive en los tokens "-ink" de :root, que es de donde
       cuelgan estas variables: el mismo criterio, aplicado a toda la app. */
    --cp-ok:   var(--success-ink);      --cp-ok-soft:   var(--success-soft);
    --cp-warn: var(--warning-ink);      --cp-warn-soft: var(--warning-soft);
    --cp-bad:  var(--destructive-ink);  --cp-bad-soft:  var(--destructive-soft);
    --cp-info: var(--info-ink);         --cp-info-soft: var(--info-soft);
}
.cp-wrap [hidden] { display: none !important; }

/* --- Cabecera --- */
.cp-hero {
    background: linear-gradient(135deg, var(--cp-deep), var(--cp-teal));
    color: #fff; border-radius: 1rem;
    padding: 1.35rem 1.5rem;
    display: flex; gap: 1.5rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
    box-shadow: 0 .5rem 1.25rem rgba(31, 41, 55, .2);
}
.cp-hero h1 { font-size: 1.4rem; font-weight: 700; margin: 0 0 .35rem; }
.cp-id { min-width: 0; flex: 1 1 26rem; }
.cp-ref {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .85rem;
    font-size: .85rem; color: rgba(255, 255, 255, .88);
}
.cp-ref span { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; }
.cp-ref .bi { opacity: .75; flex-shrink: 0; }
.cp-desc {
    font-size: .85rem; color: rgba(255, 255, 255, .72);
    margin: .5rem 0 0; max-width: 70ch;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cp-due { font-weight: 600; color: #fff; }
.cp-due.is-near { color: #ffd9a3; }

.cp-hero-help {
    display: inline-flex; align-items: center; gap: .45rem; flex-shrink: 0;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3);
    color: #fff; font-size: .85rem; font-weight: 600;
    padding: .45rem .85rem; border-radius: .55rem;
    transition: background-color .15s ease, border-color .15s ease;
}
.cp-hero-help:hover, .cp-hero-help:focus-visible {
    background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .5); color: #fff;
}

/* Avance de la carpeta: barra segmentada con recuentos reales, no un anillo. */
.cp-progress { flex: 0 1 17rem; min-width: 13rem; }
.cp-progress-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
    font-size: .82rem; color: rgba(255, 255, 255, .82); margin-bottom: .4rem;
}
.cp-progress-head b { font-size: 1.05rem; color: #fff; font-weight: 700; }
.cp-progress-track {
    height: .5rem; border-radius: 999px; overflow: hidden;
    background: rgba(255, 255, 255, .22); display: flex;
}
.cp-progress-track i { display: block; height: 100%; }
.cp-progress-track .seg-ok { background: #7fd6a4; }
.cp-progress-track .seg-mid { background: #f0c07a; }
.cp-progress-legend {
    display: flex; flex-wrap: wrap; gap: .1rem .8rem;
    margin-top: .45rem; font-size: .75rem; color: rgba(255, 255, 255, .8);
}
.cp-progress-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.cp-progress-legend i { width: .5rem; height: .5rem; border-radius: 50%; display: inline-block; }

/* --- Acciones de la carpeta (antes .cp-guide) --- */
.cp-stage {
    background: #fff; border: 1px solid var(--cp-line); border-radius: 1rem;
    padding: 1rem 1.25rem; margin: 1rem 0 1.25rem;
    box-shadow: 0 .125rem .5rem rgba(31, 41, 55, .06);
}
.cp-steps { display: flex; gap: 1rem; flex-wrap: wrap; align-items: stretch; }
.cp-step { display: flex; gap: .7rem; align-items: flex-start; flex: 1 1 17rem; min-width: 0; }
.cp-step-n {
    width: 1.65rem; height: 1.65rem; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 700;
    background: var(--border); color: var(--cp-muted);
}
.cp-step.is-done .cp-step-n { background: var(--cp-ok-soft); color: var(--cp-ok); }
.cp-step.is-active .cp-step-n { background: var(--cp-teal); color: #fff; }
.cp-step h2 { font-size: .9rem; font-weight: 600; color: var(--cp-ink); margin: 0 0 .15rem; }
.cp-step p { font-size: .82rem; color: var(--cp-muted); margin: 0 0 .5rem; max-width: 46ch; }
.cp-step-state { font-size: .78rem; font-weight: 600; color: var(--cp-ok); display: inline-flex; align-items: center; gap: .3rem; }

.cp-btn-teal { background: var(--cp-teal); color: #fff; border: none; }
.cp-btn-teal:hover, .cp-btn-teal:focus { background: var(--primary-strong); color: #fff; }
.cp-btn-ghost { background: #fff; border: 1px solid var(--border); color: var(--cp-ink); font-weight: 500; }
.cp-btn-ghost:hover, .cp-btn-ghost:focus { background: var(--secondary); color: var(--cp-ink); border-color: var(--border); }
.cp-btn-ghost:disabled { opacity: .55; }

/* --- Panel (lista y detalle) --- */
.cp-panel {
    background: #fff; border: 1px solid var(--cp-line); border-radius: 1rem;
    box-shadow: 0 .125rem .5rem rgba(31, 41, 55, .06);
    overflow: hidden;
}
.cp-panel-head { padding: .9rem 1.15rem; border-bottom: 1px solid var(--cp-line); }
.cp-panel-title {
    font-size: .95rem; font-weight: 600; color: var(--cp-ink); margin: 0;
    display: flex; align-items: center; gap: .45rem;
}
.cp-panel-title i { color: var(--cp-teal); }
.cp-panel-body { padding: 1.15rem; }

/* Buscador y filtros de la lista */
.cp-search { position: relative; margin-top: .7rem; }
.cp-search i { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--muted-fg); font-size: .9rem; pointer-events: none; }
.cp-search input { padding-left: 2.2rem; font-size: .87rem; }
.cp-search input:focus { border-color: var(--cp-teal); box-shadow: 0 0 0 .2rem rgba(124, 58, 237, .18); }
.cp-filters { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .6rem; }
.cp-filter {
    border: 1px solid var(--border); background: #fff; color: var(--cp-muted);
    font-size: .78rem; font-weight: 600; padding: .25rem .6rem; border-radius: 999px;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.cp-filter:hover { background: var(--secondary); color: var(--cp-ink); }
.cp-filter.active { background: var(--cp-teal); border-color: var(--cp-teal); color: #fff; }

/* --- Lista de documentos --- */
.cp-list { list-style: none; margin: 0; padding: 0; max-height: min(60vh, 34rem); overflow-y: auto; }
.cp-req {
    width: 100%; text-align: left; font: inherit;
    display: flex; gap: .65rem; align-items: flex-start;
    padding: .7rem 1.15rem; border: 0; border-top: 1px solid var(--cp-line);
    background: #fff; color: var(--cp-ink);
    transition: background-color .15s ease;
}
.cp-list > li:first-child .cp-req { border-top: 0; }
.cp-req:hover { background: var(--cp-surface); }
/* La selección se marca con fondo y color de texto, no con una barra lateral de
   acento: el detector la señala en otras pantallas y sería incoherente
   introducirla aquí. aria-selected lo comunica al lector de pantalla. */
.cp-req.active { background: var(--primary-soft); }
.cp-req.active .nm { color: var(--cp-deep); }
.cp-req:focus-visible { outline: 2px solid var(--cp-teal); outline-offset: -2px; }

.cp-st {
    width: 1.35rem; height: 1.35rem; border-radius: 50%; flex: none; margin-top: .1rem;
    display: grid; place-items: center; font-size: .68rem; font-weight: 700; color: #fff;
}
.cp-st.listo { background: var(--success-ink); }
.cp-st.pendiente { background: var(--muted-fg); }
.cp-st.en_progreso { background: var(--warning-ink); }
.cp-req .nm { font-weight: 600; font-size: .87rem; line-height: 1.35; word-break: break-word; }
.cp-tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }

/* Insignias: texto de interfaz, no código -> sin monoespaciada. */
.cp-badge {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .68rem; font-weight: 600; line-height: 1.4;
    padding: .1rem .4rem; border-radius: .3rem;
}
.cp-badge .bi { font-size: .62rem; }
.cp-badge.auto, .cp-badge.nivel1 { background: var(--cp-ok-soft); color: var(--cp-ok); }
.cp-badge.manual { background: var(--info-soft); color: var(--info-ink); }
.cp-badge.none { background: var(--secondary); color: var(--cp-muted); }
.cp-badge.nivel2 { background: var(--cp-warn-soft); color: var(--cp-warn); }
.cp-badge.nivel3 { background: var(--cp-bad-soft); color: var(--cp-bad); }

.cp-pill {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .68rem; font-weight: 600; padding: .1rem .45rem; border-radius: 999px;
    background: var(--cp-ok-soft); color: var(--cp-ok);
}
.cp-pill.pliego { background: var(--cp-info-soft); color: var(--cp-info); }
.cp-pill.ia { background: var(--primary-soft); color: var(--primary-strong); }

/* --- Detalle: secciones separadas --- */
.cp-section { padding: 1.15rem; border-top: 1px solid var(--cp-line); }
.cp-section:first-child { border-top: 0; }
.cp-section-title {
    display: flex; align-items: flex-start; gap: .45rem;
    font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--cp-muted); margin: 0 0 .75rem;
}
.cp-section-title i { color: var(--cp-teal); font-size: .95rem; line-height: 1.3; flex-shrink: 0; }

.cp-field {
    border: 1px solid var(--cp-line); border-radius: .55rem;
    padding: .6rem .8rem; margin-bottom: .45rem; background: #fff;
}
.cp-field .lab { font-weight: 600; font-size: .85rem; color: var(--cp-ink); }
.cp-field .val { font-size: .82rem; color: var(--muted-fg); word-break: break-word; }
.cp-field input {
    font-size: .85rem; padding: .35rem .55rem; border: 1px solid var(--input);
    border-radius: .4rem; width: 100%; max-width: 320px; margin-top: .3rem;
}
.cp-field input:focus { outline: none; border-color: var(--cp-teal); box-shadow: 0 0 0 .2rem rgba(124, 58, 237, .18); }

/* Medidor de campos del detalle (lo pinta el JS con anchos en línea). */
.cp-meter { height: .5rem; border-radius: 999px; background: var(--secondary); overflow: hidden; display: flex; margin: .4rem 0; }
.cp-meter i { height: 100%; display: block; }

.cp-note {
    display: flex; align-items: flex-start; gap: .6rem;
    background: var(--cp-info-soft); border: 1px solid var(--border); border-radius: .6rem;
    padding: .7rem .9rem; font-size: .84rem; color: var(--info-ink);
}
.cp-note .bi { color: var(--cp-info); font-size: .95rem; line-height: 1.4; flex-shrink: 0; }

/* --- Vacíos y carga --- */
.cp-empty { text-align: center; padding: 2.5rem 1.25rem; color: var(--cp-muted); }
.cp-empty .big { font-size: 2.2rem; color: var(--icon-muted); }
.cp-empty h3 { font-size: 1rem; font-weight: 600; color: var(--cp-ink); margin: .7rem 0 .3rem; }
.cp-empty p { font-size: .86rem; max-width: 42ch; margin: 0 auto; }

.spin {
    display: inline-block; width: 1rem; height: 1rem; vertical-align: -.15em;
    border: 2px solid var(--border); border-top-color: var(--cp-teal, var(--primary));
    border-radius: 50%; animation: cpspin .7s linear infinite;
}
@keyframes cpspin { to { transform: rotate(360deg); } }

/* --- Modal de ayuda --- */
.cp-guide-step { display: flex; gap: .8rem; align-items: flex-start; padding: .8rem 0; border-top: 1px solid var(--cp-line); }
.cp-guide-step:first-of-type { border-top: 0; padding-top: 0; }
.cp-guide-step h3 { font-size: .93rem; font-weight: 600; color: var(--cp-ink); margin: 0 0 .2rem; }
.cp-guide-step p { font-size: .85rem; color: var(--cp-muted); margin: 0; }
.cp-cases { width: 100%; font-size: .84rem; border-collapse: collapse; }
.cp-cases th {
    text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--cp-muted); font-weight: 700; padding: .5rem .6rem;
    background: var(--cp-surface); border-bottom: 1px solid var(--cp-line); white-space: nowrap;
}
.cp-cases td { padding: .65rem .6rem; border-bottom: 1px solid var(--cp-line); vertical-align: top; color: var(--cp-ink); }
.cp-cases tr:last-child td { border-bottom: 0; }
.cp-cases .cost { white-space: nowrap; font-weight: 600; }

/* --- Responsive --- */
@media (max-width: 991.98px) {
    /* Apilado, el detalle va debajo y la página ya scrollea: un contenedor con
       scroll propio dentro de otro es incómodo en táctil. */
    .cp-list { max-height: none; overflow-y: visible; }
}
@media (max-width: 767.98px) {
    .cp-hero { padding: 1.1rem 1.15rem; gap: 1rem; }
    .cp-hero h1 { font-size: 1.2rem; }
    .cp-progress { flex: 1 1 100%; }
    .cp-steps { gap: .85rem; }
    .cp-step { flex: 1 1 100%; }
    .cp-panel-body, .cp-section { padding: 1rem; }
    .cp-req { padding: .7rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .spin { animation: none; }
    .cp-req, .cp-filter, .cp-hero-help { transition: none; }
}

/* El cuerpo de la fila debe poder encogerse para que el nombre largo trunque
   en vez de empujar las insignias fuera del panel. */
.cp-req-body { flex: 1 1 auto; min-width: 0; }

/* En la tabla de casos la insignia parte a dos líneas dentro de la píldora; la
   primera columna se ajusta al contenido y el resto absorbe el ancho. */
.cp-cases .cp-badge { white-space: nowrap; }
.cp-cases td:first-child { width: 1%; white-space: nowrap; }
.cp-cases td:first-child .small { white-space: normal; }

/* ── Seguimiento SECOP II · Mis ofertas ─────────────────────────────── */
.session-item-link { display: block; color: inherit; text-decoration: none; }
.mo-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.mo-kpi { background: #fff; border: 1px solid var(--border); border-radius: .75rem; padding: .9rem 1rem; display: flex; flex-direction: column; gap: .15rem; }
.mo-kpi-valor { font-size: 1.35rem; font-weight: 600; color: var(--deep); font-variant-numeric: tabular-nums; }
.mo-kpi-valor small { font-size: .85rem; color: var(--muted-fg); font-weight: 500; }
.mo-kpi-etiqueta { font-size: .8rem; color: var(--muted-fg); text-transform: uppercase; letter-spacing: .04em; }
.mo-tabla { background: #fff; border: 1px solid var(--border); border-radius: .75rem; padding: .25rem .75rem; }
.mo-tabla th { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-fg); }
.mo-objeto { max-width: 320px; }
.mo-chip { display: inline-block; font-size: .74rem; font-weight: 600; padding: .1rem .5rem; border-radius: 1rem; white-space: nowrap; }
.mo-chip-ganada { background: var(--success-soft); color: var(--success-ink); }
.mo-chip-perdida { background: var(--destructive-soft); color: var(--destructive-ink); }
.mo-chip-pendiente { background: var(--info-soft); color: var(--info-ink); }
.mo-chip-cancelada, .mo-chip-sin_resultado { background: var(--secondary); color: var(--muted-fg); }
.mo-chip-grupo { background: var(--primary-soft); color: var(--deep); margin-top: .25rem; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.mo-vacio { background: #fff; border: 1px dashed var(--border); border-radius: .75rem; padding: 2rem; text-align: center; color: var(--muted-fg); }
.mo-vacio i { font-size: 2rem; color: var(--icon-muted); display: block; margin-bottom: .5rem; }
.mo-vacio h6 { color: var(--foreground); }
.mo-fuente { font-size: .78rem; color: var(--muted-fg); margin-top: 1rem; }

/* ── Seguimiento SECOP II · campana y avisos ─────────────────────────── */
#campanaBoton { padding-right: 1rem; }
#campanaBoton .bi-bell { font-size: 1.2rem; line-height: 1; }
.campana-globo { position: absolute; top: .15rem; left: 1.45rem; right: auto; font-size: .6rem; line-height: 1; padding: .2em .42em; box-shadow: 0 0 0 2px var(--primary, #5b21b6); }
.campana-menu { width: 360px; max-width: 92vw; }
.campana-lista { max-height: 420px; overflow-y: auto; }
.campana-item { border-bottom: 1px solid var(--secondary); color: inherit; }
.campana-item:hover { background: var(--muted); }
.campana-no-leida { background: var(--primary-soft); }
.nt-lista { display: flex; flex-direction: column; gap: .75rem; }
.nt-item { background: #fff; border: 1px solid var(--border); border-radius: .75rem; padding: .85rem 1rem; }
.nt-no-leida { background: var(--primary-soft); }
.nt-cabecera { display: flex; justify-content: space-between; gap: .5rem; font-size: .75rem; margin-bottom: .25rem; }
.nt-prioridad { font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.nt-alta .nt-prioridad { color: var(--destructive-ink); }
.nt-media .nt-prioridad { color: var(--info-ink); }
.nt-baja .nt-prioridad { color: var(--muted-fg); }
.nt-fecha { color: var(--muted-fg); }
.nt-titulo { font-weight: 600; }
.nt-detalle { font-size: .85rem; color: var(--muted-fg); }
.nt-accion { font-size: .9rem; margin-top: .35rem; }
.nt-enlace { font-size: .82rem; display: inline-block; margin-top: .35rem; }