/* =============================================================================
   VARIABLES CSS LEGADAS (mantenidas para compatibilidad con luaz/clases viejas
   referenciadas vía var(--xxx) en este mismo archivo). Estas variables vivían
   originalmente en luaz-styles.css; se copiaron aquí para que sigme sea
   autosuficiente cuando luaz no se carga.
   ============================================================================= */
:root {
    --text-gray: rgb(247, 247, 247);
    --blue: #4080e9;
    --dark-blue: #3675d9;
    --dark-red: #bb0d0d;
    --comfortable-blue: rgb(242, 247, 255);
    --light-blue: #679aec;
    --light-gray: rgb(210, 210, 210);
    --light-blue-for-table: rgb(245, 245, 245);
    --red: #ff4b5c;
    --orange: #e0700e;
    --green: #269a1c;
    --cake-green: #279a1ca4;
    --shadow-green: #96e39c;
    --light-shadow-green: #ebffed;
    --light-orange: #eec7a5;
    --shadow-red: #ffebeb;
    --shadow-fort-red: #ffd7d7;
    --shadow-forty-red: #f7b7b7;
    --shadow-forter-red: #e77d7d;
    --shadow-gray: #afafaf;
    --hover-gray: #dcdcdc;
    --hover-blue: #f1f3ff;
    --hover-light-blue: #eaeeff;
    --turk-btn-blue: #1bb9d5;
    --light-black: #575757;
    --opacity-black: #383838;
    --very-light-black: #747474;
    --very-light-gray: #efefef;
    --very-light-blue: rgb(209, 221, 250);
    --real-shadow: #98989872;
    --input-valid: #f6f6f6ce;
    --input-field: #fafafa;
    --tainted-blue: #3276e2;
    --tainted-dark-blue: #2b67c8;
    --tainted-turk-btn-blue: #249aae;
    --tainted-green: #186c10;
    --tainted-orange: #ad5202;
    --background-blue: #4080e9;
    --background-gray: #e9e9e9;
}


/* =============================================================================
   RESET BASE / LAYOUT GLOBAL (heredado de luaz-styles.css para que sigme sea
   autosuficiente). Cubre box-sizing, layout root del #app y la .container,
   normalizaciones de body/html y scrollbar por defecto.
   ============================================================================= */
* {
    box-sizing: border-box !important;
    font-family: 'Roboto', sans-serif;
}
body, html {
    display: contents !important;
    margin: 0;
    overflow: hidden !important;
}
body { transition: opacity 0.2s ease-in; }
a { text-decoration: none; }
ul { margin: 0; padding: 0; }
#app {
    width: 100vw;
    height: 100vh;
    display: flex;
    margin: 0 !important;
}
.contents { display: contents !important; }

/* El <footer> del layout app.blade.php se oculta globalmente. Vivía en luaz.
   IMPORTANTE: si necesitas un footer-like en algún componente, usa <div> no <footer>. */
footer { display: none !important; }

/* Scrollbar por defecto (los componentes con scrollbars custom lo sobrescriben) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 0.4rem; }
::-webkit-scrollbar-thumb { border-radius: 0.4rem; background: #888; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* Layout root: la .container que envuelve todas las pantallas. El login la
   usa con background plano; las pantallas del shell admin la usan con flex
   horizontal sidebar + contenido. */
.container {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden !important;
    position: relative;
    background-color: var(--background-blue);
}

/* NOTA: .btn vive en luaz-styles.css con sus variantes (.btn-green/.btn-red/etc.).
   No re-declarar la base aquí o pisará el background de las variantes por orden
   de carga (luaz se carga antes que sigme; redeclarar .btn aquí sobrescribiría
   .btn-green con el background gris por igualdad de especificidad). */


/**
 * SIGME - Estilos personalizados
 * Estilos adicionales para los módulos rediseñados del sistema SIGME.
 */

/* ================================================
   CONSEJO: Ajuste de altura del contenedor
   ================================================ */
.data-consejo-component .main-element--vertical .flow-container.flow-container--vertical{
    height: calc(100vh - 10rem);
    overflow-y: auto;
}

/* ================================================
   CONSEJO: Vertical tabs layout
   ================================================ */
.data-consejo-component .main-element--vertical{
    display: flex;
    flex-flow: row nowrap;
    gap: 0;
    height: 100%;
}
.data-consejo-component .main-element--vertical .vertical-tabs{
    display: flex;
    flex-flow: column nowrap;
    min-width: 14rem;
    max-width: 14rem;
    padding: 0;
    gap: 0.2rem;
}
.data-consejo-component .main-element--vertical .vertical-tabs a{
    text-decoration: none;
}
.data-consejo-component .main-element--vertical .vertical-tab{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.8rem;
    background-color: var(--very-light-gray);
    border-radius: 0.4rem 0 0 0.4rem;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
    user-select: none;
}
.data-consejo-component .main-element--vertical .vertical-tab span.material-symbols-outlined{
    font-size: 1.25rem;
    color: var(--opacity-black);
    flex-shrink: 0;
}
.data-consejo-component .main-element--vertical .vertical-tab h2{
    margin: 0;
    font-size: 0.9rem;
    color: var(--opacity-black);
    font-weight: 500;
    line-height: 1.2;
}
.data-consejo-component .main-element--vertical .vertical-tab:hover{
    background-color: var(--hover-gray);
}
.data-consejo-component .main-element--vertical .vertical-tab-active{
    background-color: white;
    box-shadow: -0.1rem 0 0.2rem var(--shadow-gray);
    position: relative;
    z-index: 2;
    margin-right: -1px;
}
.data-consejo-component .main-element--vertical .vertical-tab-active span.material-symbols-outlined{
    color: var(--blue);
}
.data-consejo-component .main-element--vertical .vertical-tab-active h2{
    color: var(--blue);
    font-weight: 600;
}
.data-consejo-component .main-element--vertical .vertical-tabs-separator{
    height: 1px;
    background-color: var(--shadow-gray);
    margin: 0.4rem 0.8rem;
    opacity: 0.4;
}
.data-consejo-component .main-element--vertical .flow-container--vertical{
    flex: 1;
    border-radius: 0 0.4rem 0.4rem 0.4rem;
    box-shadow: 0 0 0.2rem var(--shadow-gray);
    height: 100%;
    position: relative;
    z-index: 1;
}

/* ================================================
   ESPECIALIDADES: Listado con cards
   ================================================ */

/* Contenedor principal */
/* =====================================================================
   ESPECIALIDADES — Listado de cards (navy palette)
   ---------------------------------------------------------------------
   Componente que usa estos estilos:
   - resources/js/components/especialidades/ListComponent.vue
   ===================================================================== */
.sigme-esp-list{
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
}

/* Grid de cards */
.sigme-esp-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 0.85rem;
    width: 100%;
}

/* Card individual */
.sigme-esp-card{
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.7rem;
    box-shadow: 0 0.15rem 0.4rem rgba(15, 23, 42, 0.05);
    padding: 0.85rem 1rem 0.95rem 1.15rem;
    gap: 0.75rem;
    min-width: 0;
    transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}
.sigme-esp-card::before{
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    border-top-left-radius: 0.7rem;
    border-bottom-left-radius: 0.7rem;
}
.sigme-esp-card:hover{
    transform: translateY(-1px);
    box-shadow: 0 0.35rem 0.85rem rgba(15, 23, 42, 0.1);
    border-color: rgba(46, 92, 158, 0.3);
}

/* Header: nombre + descripción */
.sigme-esp-card-header{
    min-width: 0;
}
.sigme-esp-card-header h3{
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #1a3c6e;
    line-height: 1.3;
    overflow-wrap: break-word;
}
.sigme-esp-card-header small{
    color: #475569;
    font-size: 0.82rem;
    line-height: 1.4;
}
.sigme-esp-desc{
    margin-top: 0.35rem;
    padding: 0.45rem 0.7rem;
    background: linear-gradient(135deg, #eef4ff 0%, #f8fafc 100%);
    border-left: 3px solid #2e5c9e;
    border-radius: 0 0.4rem 0.4rem 0;
}
.sigme-esp-toggle{
    color: #2e5c9e;
    font-size: 0.78rem;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    margin-left: 0.25rem;
}
.sigme-esp-toggle:hover{
    color: #1a3c6e;
    text-decoration: underline;
}

/* Costos en columnas (mini-cards por proceso) */
.sigme-esp-cost-cols{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
    gap: 0.45rem;
    padding-top: 0.6rem;
    border-top: 1px dashed #e2e8f0;
}
.sigme-esp-cost-col{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    gap: 0.2rem;
    padding: 0.5rem 0.5rem 0.55rem;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    text-align: center;
}
.sigme-esp-cost-label{
    font-size: 0.65rem;
    color: #94a3b8;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sigme-esp-cost-amount{
    font-size: 1rem;
    font-weight: 800;
    color: #1a3c6e;
    letter-spacing: 0.01em;
}
.sigme-esp-card-no-costs{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.7rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
    border: 1px solid #fde68a;
    border-radius: 0.5rem;
    color: #78350f;
    border-top: none;
}
.sigme-esp-card-no-costs span{
    font-size: 1.15rem;
    color: #d97706;
}
.sigme-esp-card-no-costs small{
    font-size: 0.82rem;
    font-weight: 600;
}
@media (max-width: 560px){
    .sigme-esp-cost-cols{
        grid-template-columns: 1fr;
    }
    .sigme-esp-cost-col{
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
    }
}

/* Sedes */
.sigme-esp-card-sedes{
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
}
.sigme-esp-card-sedes > span{
    font-size: 1.1rem;
    color: #2e5c9e;
    flex-shrink: 0;
    margin-top: 0.05rem;
}
.sigme-esp-sedes-content{
    display: flex;
    flex-flow: column nowrap;
    gap: 0.3rem;
    min-width: 0;
}
.sigme-esp-sedes-label{
    font-size: 0.66rem;
    color: #94a3b8;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sigme-esp-sedes-chips{
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.sigme-esp-chip{
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #eef4ff 0%, #dbeafe 100%);
    border: 1px solid #c7d2fe;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    color: #1a3c6e;
    white-space: nowrap;
}

/* Estado troncales */
.sigme-esp-card-status{
    padding: 0;
}
.sigme-esp-status{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.83rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    line-height: 1.35;
}
.sigme-esp-status span.material-symbols-outlined{
    font-size: 1.2rem;
    flex-shrink: 0;
}
.sigme-esp-status--ok{
    background: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 100%);
    color: #14532d;
    border-color: #86efac;
}
.sigme-esp-status--ok span.material-symbols-outlined{ color: #16a34a; }
.sigme-esp-status--warn{
    background: linear-gradient(135deg, #fee2e2 0%, #fef2f2 100%);
    color: #991b1b;
    border-color: #fca5a5;
    font-weight: 600;
}
.sigme-esp-status--warn span.material-symbols-outlined{ color: #dc2626; }
.sigme-esp-status--info{
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    color: #1a3c6e;
    border-color: #93c5fd;
}
.sigme-esp-status--info span.material-symbols-outlined{ color: #2e5c9e; }
.sigme-esp-complementos-list{
    display: flex;
    flex-flow: column nowrap;
    gap: 0.3rem;
    min-width: 0;
}
.sigme-esp-complemento-item{
    display: flex;
    flex-flow: column nowrap;
    line-height: 1.3;
}
.sigme-esp-complemento-item b{
    font-size: 0.85rem;
    color: #14532d;
    overflow-wrap: break-word;
}
.sigme-esp-complemento-item small{
    font-size: 0.72rem;
    color: #166534;
    font-weight: 500;
}

/* Botones de acción */
.sigme-esp-card-actions{
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding-top: 0.6rem;
    border-top: 1px solid #f1f5f9;
    margin-top: auto;
    flex-wrap: wrap;
}
.sigme-esp-btn{
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: 0.45rem;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.sigme-esp-btn:hover{
    transform: translateY(-1px);
}
.sigme-esp-btn span{
    font-size: 1.05rem;
}
.sigme-esp-btn--green{
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    border-color: #15803d;
}
.sigme-esp-btn--green:hover{
    background: linear-gradient(135deg, #15803d 0%, #14532d 100%);
    box-shadow: 0 0.2rem 0.5rem rgba(22, 101, 52, 0.3);
}
.sigme-esp-btn--blue{
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    border-color: #1a3c6e;
}
.sigme-esp-btn--blue:hover{
    background: linear-gradient(135deg, #142e54 0%, #234b81 100%);
    box-shadow: 0 0.2rem 0.5rem rgba(26, 60, 110, 0.3);
}
.sigme-esp-btn--turk{
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    border-color: #0891b2;
}
.sigme-esp-btn--turk:hover{
    background: linear-gradient(135deg, #0891b2 0%, #155e75 100%);
    box-shadow: 0 0.2rem 0.5rem rgba(8, 145, 178, 0.35);
}

/* Empty state */
.sigme-esp-empty{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 1rem;
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 0.7rem;
    text-align: center;
    color: #64748b;
}
.sigme-esp-empty .material-symbols-outlined{
    font-size: 3rem;
    color: #cbd5e1;
}
.sigme-esp-empty h5{
    margin: 0.5rem 0 0;
    font-size: 1rem;
    color: #475569;
    font-weight: 700;
}


/* =====================================================================
   ESPECIALIDADES — Costos por proceso
   ---------------------------------------------------------------------
   Componente que usa estos estilos:
   - resources/js/components/especialidades/FormComponent.vue
   ===================================================================== */
.esp-cost-grid {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

/* Cada fila: info del proceso + input de costo */
.esp-cost-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 0.85rem;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid #e2e8f0;
    border-radius: 0.55rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.esp-cost-row:hover {
    border-color: rgba(46, 92, 158, 0.35);
    box-shadow: 0 0.2rem 0.5rem rgba(26, 60, 110, 0.08);
}

.esp-cost-row__info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    min-width: 0;
}
.esp-cost-row__icon {
    width: 2.2rem; height: 2.2rem;
    border-radius: 0.45rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem !important;
    flex-shrink: 0;
}
.esp-cost-row__name {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #1a3c6e;
    line-height: 1.25;
    word-break: break-word;
}
.esp-cost-row__hint {
    margin: 0.15rem 0 0;
    font-size: 0.72rem;
    color: #94a3b8;
}

/* Input de costo con símbolo $ */
.esp-cost-row__field {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    flex-shrink: 0;
    width: 11rem;
    max-width: 50%;
}
.esp-cost-row__currency {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.7rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    border: 1px solid #1a3c6e;
    border-right: none;
    border-top-left-radius: 0.45rem;
    border-bottom-left-radius: 0.45rem;
    font-weight: 700;
    font-size: 0.95rem;
}
.esp-cost-row__input {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.7rem;
    border: 1px solid #cbd5e1;
    border-top-right-radius: 0.45rem;
    border-bottom-right-radius: 0.45rem;
    background: #ffffff;
    color: #1a3c6e;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: right;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.esp-cost-row__input:focus {
    outline: none;
    border-color: #2e5c9e;
    box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.15);
}
/* Quitar las flechas de incremento del number input */
.esp-cost-row__input::-webkit-outer-spin-button,
.esp-cost-row__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.esp-cost-row__input { -moz-appearance: textfield; }

@media (max-width: 560px) {
    .esp-cost-row { flex-direction: column; align-items: stretch; }
    .esp-cost-row__field { width: 100%; max-width: 100%; }
}


/* =====================================================================
   ESPECIALIDADES — Especialidades troncales (complementos)
   ---------------------------------------------------------------------
   Componente que usa estos estilos:
   - resources/js/components/especialidades/ComplementComponent.vue
   ===================================================================== */
.esp-tron-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 0.6rem;
}

.esp-tron {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.85rem 0.7rem 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid #e2e8f0;
    border-radius: 0.55rem;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.esp-tron::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    border-top-left-radius: 0.55rem;
    border-bottom-left-radius: 0.55rem;
}
.esp-tron:hover {
    border-color: rgba(46, 92, 158, 0.35);
    box-shadow: 0 0.25rem 0.6rem rgba(26, 60, 110, 0.1);
    transform: translateY(-1px);
}

.esp-tron__icon {
    width: 2.2rem; height: 2.2rem;
    border-radius: 0.45rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem !important;
    flex-shrink: 0;
}

.esp-tron__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.esp-tron__name {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a3c6e;
    line-height: 1.25;
    word-break: break-word;
}
.esp-tron__consejo {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.74rem;
    color: #64748b;
    font-weight: 500;
}
.esp-tron__consejo .material-symbols-outlined {
    font-size: 0.9rem;
    color: #94a3b8;
}


/* =====================================================================
   ESPECIALIDADES — Sedes del examen
   ---------------------------------------------------------------------
   Componente que usa estos estilos:
   - resources/js/components/especialidades/SedesComponent.vue
   ===================================================================== */
.esp-sedes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 0.65rem;
}

.esp-sedes {
    position: relative;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid #e2e8f0;
    border-radius: 0.55rem;
    padding: 0.7rem 0.85rem 0.75rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.esp-sedes::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    border-top-left-radius: 0.55rem;
    border-bottom-left-radius: 0.55rem;
}
.esp-sedes:hover {
    border-color: rgba(46, 92, 158, 0.35);
    box-shadow: 0 0.25rem 0.6rem rgba(26, 60, 110, 0.1);
}

.esp-sedes__head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 0.55rem;
}
.esp-sedes__icon {
    color: #2e5c9e;
    font-size: 1.2rem !important;
    flex-shrink: 0;
}
.esp-sedes__estado {
    flex: 1;
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #1a3c6e;
}

.esp-sedes__body { display: flex; flex-direction: column; gap: 0.5rem; }

.esp-sedes__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.esp-sedes__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.18rem 0.3rem 0.18rem 0.55rem;
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    border: 1px solid #c7d2fe;
    border-radius: 0.95rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: #1a3c6e;
}
.esp-sedes__chip-x {
    width: 1.1rem; height: 1.1rem;
    border: none;
    border-radius: 50%;
    background: rgba(26, 60, 110, 0.1);
    color: #1a3c6e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.esp-sedes__chip-x:hover {
    background: #dc2626;
    color: #ffffff;
}
.esp-sedes__chip-x .material-symbols-outlined { font-size: 0.85rem; }

.esp-sedes__empty {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.76rem;
    color: #64748b;
    font-style: italic;
}
.esp-sedes__empty .material-symbols-outlined {
    font-size: 0.95rem;
    color: #94a3b8;
}

.esp-sedes__inline,
.esp-sedes__city-input {
    display: flex;
    align-items: stretch;
    gap: 0.3rem;
}
.esp-sedes__inline input,
.esp-sedes__city-input input {
    flex: 1;
    min-width: 0;
    padding: 0.35rem 0.55rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.35rem;
    font-size: 0.8rem;
}
.esp-sedes__inline input:focus,
.esp-sedes__city-input input:focus {
    outline: none;
    border-color: #2e5c9e;
    box-shadow: 0 0 0 2px rgba(46, 92, 158, 0.15);
}

.esp-sedes__city-btn {
    width: 2rem;
    border: 1px solid #2e5c9e;
    background: #2e5c9e;
    color: #ffffff;
    border-radius: 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
}
.esp-sedes__city-btn:hover:not([disabled]) { background: #1a3c6e; }
.esp-sedes__city-btn[disabled] {
    background: #cbd5e1;
    border-color: #cbd5e1;
    cursor: not-allowed;
}
.esp-sedes__city-btn .material-symbols-outlined { font-size: 1rem; }

.esp-sedes__add-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.6rem;
    flex-wrap: wrap;
}
.esp-sedes__add-note {
    font-size: 0.78rem;
    color: #64748b;
    font-style: italic;
}

.esp-sedes__hint {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.3rem;
    font-size: 0.76rem;
    color: #64748b;
}
.esp-sedes__hint .material-symbols-outlined {
    font-size: 0.9rem;
    color: #94a3b8;
}


/* =====================================================================
   ESPECIALIDADES — Configuración (preview "Lo que observa el médico")
   ---------------------------------------------------------------------
   Componente que usa estos estilos:
   - resources/js/components/especialidades/ConfigurationComponent.vue
   ===================================================================== */

/* Hint debajo del toggle del folio */
.esp-config__hint {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.55rem 0 0;
    padding: 0.4rem 0.7rem;
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    border: 1px solid #c7d2fe;
    border-radius: 0.4rem;
    color: #1a3c6e;
    font-size: 0.78rem;
    line-height: 1.4;
}
.esp-config__hint .material-symbols-outlined {
    font-size: 1rem;
    color: #2e5c9e;
}
.esp-config__hint b { color: #1a3c6e; font-weight: 700; }

/* Preview "Lo que observa el médico" */
.esp-config-preview {
    margin-top: 0.85rem;
    padding: 0.85rem 1rem 0.95rem;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border: 1px dashed #cbd5e1;
    border-radius: 0.6rem;
}
.esp-config-preview__title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.7rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: #2e5c9e;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.esp-config-preview__title .material-symbols-outlined {
    font-size: 0.95rem;
    color: #2e5c9e;
}

/* Mock principal con icono + nombre + indicaciones */
.esp-config-preview__mock {
    display: flex;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
}
.esp-config-preview__icon {
    font-size: 1.7rem !important;
    flex-shrink: 0;
    line-height: 1;
}
.esp-config-preview__icon.is-required { color: #dc2626; }
.esp-config-preview__icon.is-optional { color: #d97706; }

.esp-config-preview__body {
    flex: 1;
    min-width: 0;
}
.esp-config-preview__label {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a3c6e;
    line-height: 1.3;
}
.esp-config-preview__desc {
    margin: 0.2rem 0 0.45rem;
    font-size: 0.82rem;
    color: #475569;
    line-height: 1.45;
    white-space: pre-line;
}
.esp-config-preview__limit {
    margin: 0;
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.4;
}
.esp-config-preview__limit a,
.esp-config-preview__state a {
    color: #2e5c9e;
    font-weight: 600;
    text-decoration: none;
}
.esp-config-preview__limit a:hover,
.esp-config-preview__state a:hover {
    color: #1a3c6e;
    text-decoration: underline;
}

/* Estados que vería el médico (pendiente / constancia / validado) */
.esp-config-preview__states {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.6rem;
}
.esp-config-preview__state {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.45rem;
    font-size: 0.78rem;
    line-height: 1.4;
    border: 1px solid transparent;
}
.esp-config-preview__state .material-symbols-outlined {
    font-size: 1.05rem;
    flex-shrink: 0;
    margin-top: 0.05rem;
}
.esp-config-preview__state b { font-weight: 700; }
.esp-config-preview__state--warn {
    background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
    color: #78350f;
    border-color: #fde68a;
}
.esp-config-preview__state--warn .material-symbols-outlined { color: #d97706; }
.esp-config-preview__state--info {
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    color: #1a3c6e;
    border-color: #93c5fd;
}
.esp-config-preview__state--info .material-symbols-outlined { color: #2e5c9e; }
.esp-config-preview__state--ok {
    background: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 100%);
    color: #14532d;
    border-color: #86efac;
}
.esp-config-preview__state--ok .material-symbols-outlined { color: #16a34a; }

/* ================================================
   ESPECIALIDADES: Vista de detalle (breadcrumb + tabs)
   ================================================ */

/* Breadcrumb */
.sigme-esp-detail-header{
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0 0 0.2rem;
}
.sigme-esp-back-link{
    display: flex;
    align-items: center;
    gap: 0.2rem;
    color: var(--blue);
    font-size: 0.95rem;
    text-decoration: none;
    font-weight: 500;
}
.sigme-esp-back-link:hover{
    text-decoration: underline;
}
.sigme-esp-back-link span{
    font-size: 1.2rem;
}
.sigme-esp-breadcrumb-sep{
    font-size: 1.2rem;
    color: var(--shadow-gray);
}
.sigme-esp-detail-name{
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--opacity-black);
}
.sigme-esp-detail-desc{
    margin: 0 0 0.4rem 0;
    padding: 0.25rem 0.5rem;
    background-color: var(--very-light-gray);
    border-left: 2px solid var(--blue);
    border-radius: 0 0.25rem 0.25rem 0;
}
.sigme-esp-detail-desc small{
    color: var(--opacity-black);
    font-size: 0.85rem;
    text-align: justify;
    display: block;
}

/* Contenedor tabs verticales + contenido */
.sigme-esp-detail-body--vertical{
    display: flex;
    flex-flow: row nowrap;
    gap: 0;
    width: 100%;
    height: 100%;
}
.sigme-esp-vtabs{
    display: flex;
    flex-flow: column nowrap;
    min-width: 14rem;
    max-width: 14rem;
    padding: 0;
    gap: 0.2rem;
}
.sigme-esp-vtabs a{
    text-decoration: none;
}
.sigme-esp-vtab{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.8rem;
    background-color: var(--very-light-gray);
    border-radius: 0.4rem 0 0 0.4rem;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
    user-select: none;
}
.sigme-esp-vtab span.material-symbols-outlined{
    font-size: 1.25rem;
    color: var(--opacity-black);
    flex-shrink: 0;
}
.sigme-esp-vtab h2{
    margin: 0;
    font-size: 0.9rem;
    color: var(--opacity-black);
    font-weight: 500;
    line-height: 1.2;
}
.sigme-esp-vtab:hover{
    background-color: var(--hover-gray);
}
.sigme-esp-vtab-active{
    background-color: white;
    box-shadow: -0.1rem 0 0.2rem var(--shadow-gray);
    position: relative;
    z-index: 2;
    margin-right: -1px;
}
.sigme-esp-vtab-active span.material-symbols-outlined{
    color: var(--blue);
}
.sigme-esp-vtab-active h2{
    color: var(--blue);
    font-weight: 600;
}
.sigme-esp-vtabs-separator{
    height: 1px;
    background-color: var(--shadow-gray);
    margin: 0.4rem 0.8rem;
    opacity: 0.4;
}
.sigme-esp-detail-content{
    flex: 1;
    background-color: white;
    display: flex;
    flex-flow: column nowrap;
    padding: 1rem;
    border-radius: 0 0.4rem 0.4rem 0.4rem;
    box-shadow: 0 0 0.2rem var(--shadow-gray);
    max-height: calc(100vh - 12rem);
    overflow-y: auto;
    position: relative;
    z-index: 1;
}

/* Preview de configuración */
.sigme-esp-config-preview{
    display: flex;
    flex-flow: column nowrap;
    gap: 0.2rem;
    padding: 0.5rem 0.8rem;
    background-color: var(--very-light-gray);
    border-left: 3px solid var(--blue);
    border-radius: 0 0.25rem 0.25rem 0;
    margin: 0.3rem 0 0.8rem;
}
.sigme-esp-config-preview p{
    margin: 0;
}
.sigme-esp-preview-label{
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.9rem;
    color: var(--opacity-black) !important;
}
.sigme-esp-preview-label span{
    font-size: 1.2rem;
}
.sigme-esp-config-preview small{
    color: var(--shadow-gray);
    font-size: 0.85rem;
    padding-left: 1.5rem;
}

/* Estado vacío */
.sigme-esp-empty{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    gap: 0.5rem;
    color: var(--shadow-gray);
}
.sigme-esp-empty span{
    font-size: 2.5rem;
}
.sigme-esp-empty h5{
    margin: 0;
    font-weight: 500;
    font-size: 1rem;
}

/* ================================================
   CONVOCATORIAS: Listado con cards
   ================================================ */

/* Animación de entrada */
@keyframes sigmeConvFadeUp{
    from{ opacity: 0; transform: translateY(16px); }
    to{ opacity: 1; transform: translateY(0); }
}

/* Contenedor principal */
.sigme-conv-list{
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    gap: 0.7rem;
    font-family: 'Source Sans 3', sans-serif;
}

/* Card individual */
.sigme-conv-card{
    display: flex;
    flex-flow: column nowrap;
    background-color: white;
    border-radius: 0.5rem;
    border: 1px solid #b8c8db;
    padding: 0;
    gap: 0;
    overflow: hidden;
    box-shadow: 0 0.1rem 0.4rem rgba(0, 56, 117, 0.08);
    animation: sigmeConvFadeUp 0.5s ease both;
}

/* Franja superior gradiente */
.sigme-conv-stripe{
    height: 4px;
    background: linear-gradient(to right, #003875, #0055a5, #0077cc);
}

/* Encabezado */
.sigme-conv-header{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.7rem 1rem 0.6rem;
    background-color: #f4f7fb;
    border-bottom: 1px solid #dce6f0;
}
.sigme-conv-header-left{
    display: flex;
    flex-flow: column nowrap;
    gap: 0.25rem;
    min-width: 0;
}
.sigme-conv-header .table-btn{
    flex-shrink: 0;
}

/* Badge vigente / no vigente */
.sigme-conv-badge{
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.6rem;
    border-radius: 1rem;
    font-size: 0.73rem;
    font-weight: 600;
    white-space: nowrap;
    width: fit-content;
}
.sigme-conv-badge--active{
    background-color: #e6f4ea;
    border: 1px solid #34a853;
    color: #1e7e34;
}
.sigme-conv-badge--inactive{
    background-color: #fce8e6;
    border: 1px solid #ea4335;
    color: #c5221f;
}
.sigme-conv-badge-dot{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: sigmeConvPulse 1.5s ease-in-out infinite;
}
.sigme-conv-badge--active .sigme-conv-badge-dot{
    background-color: #34a853;
}
.sigme-conv-badge--inactive .sigme-conv-badge-dot{
    background-color: #ea4335;
}
@keyframes sigmeConvPulse{
    0%, 100%{ opacity: 1; }
    50%{ opacity: 0.35; }
}

/* Título y descripción */
.sigme-conv-title{
    margin: 0;
    font-family: 'Merriweather', serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #003875;
    overflow-wrap: break-word;
}
.sigme-conv-desc{
    margin: 0;
    font-size: 0.84rem;
    color: #4a6a8a;
    text-align: justify;
    line-height: 1.4;
}

/* Banner de período */
.sigme-conv-periodo{
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    background-color: #eef4fb;
    border-bottom: 1px solid #dce6f0;
}
.sigme-conv-periodo-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.35rem;
    background-color: #003875;
    flex-shrink: 0;
}
.sigme-conv-periodo-icon span{
    font-size: 1.3rem;
    color: white;
}
.sigme-conv-periodo-info{
    display: flex;
    flex-flow: column nowrap;
}
.sigme-conv-periodo-label{
    font-size: 0.7rem;
    font-weight: 600;
    color: #003875;
    text-transform: uppercase;
    letter-spacing: 0.04rem;
}
.sigme-conv-periodo-value{
    font-size: 0.95rem;
    font-weight: 600;
    color: #003875;
}

/* Metadatos (fecha examen, sede, vigencia) */
.sigme-conv-meta{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid #dce6f0;
}
.sigme-conv-meta-col{
    display: flex;
    flex-flow: column nowrap;
    gap: 0.15rem;
    padding: 0.5rem 0.8rem;
}
.sigme-conv-meta-col:not(:last-child){
    border-right: 1px solid #dce6f0;
}
.sigme-conv-meta-label{
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #5a7a9a;
    text-transform: uppercase;
    letter-spacing: 0.03rem;
}
.sigme-conv-meta-label span.material-symbols-outlined{
    font-size: 1rem;
    color: #003875;
}
.sigme-conv-meta-value{
    font-size: 0.88rem;
    font-weight: 600;
    color: #003875;
}

/* Footer: Especialidades, Procesos, Fases */
.sigme-conv-footer{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.sigme-conv-footer-col{
    display: flex;
    flex-flow: column nowrap;
    padding: 0.5rem 0.8rem 0.6rem;
    gap: 0.35rem;
    background-color: white;
}
.sigme-conv-footer-col:nth-child(2){
    background-color: #fafcfe;
}
.sigme-conv-footer-col:not(:last-child){
    border-right: 1px solid #dce6f0;
}
.sigme-conv-footer-label{
    font-size: 0.73rem;
    font-weight: 700;
    color: #003875;
    text-transform: uppercase;
    letter-spacing: 0.03rem;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid #003875;
}
.sigme-conv-footer-items{
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.sigme-conv-tag{
    padding: 0.1rem 0.45rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    font-weight: 500;
}
.sigme-conv-tag--esp{
    background-color: #eef4fb;
    border: 1px solid #b8d0ea;
    color: #1a4a7a;
}
.sigme-conv-tag--proc{
    background-color: #f0f7ee;
    border: 1px solid #a8d0a0;
    color: #1a5c2a;
}
.sigme-conv-tag--fase{
    background-color: #fdf6e8;
    border: 1px solid #e8c97a;
    color: #7a5010;
}
.sigme-conv-footer-empty{
    font-size: 0.8rem;
    color: #8a9ab0;
    font-style: italic;
}

/* Validación de procesos en formulario */
.sigme-conv-process-warning{
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    margin-top: 0.4rem;
    background-color: #fff3e0;
    border: 1px solid #e8c97a;
    border-left: 3px solid #e65100;
    border-radius: 0.3rem;
    font-size: 0.85rem;
    color: #7a5010;
    animation: sigmeConvFadeUp 0.3s ease both;
}
.sigme-conv-process-warning span.material-symbols-outlined{
    font-size: 1.2rem;
    color: #e65100;
    flex-shrink: 0;
}

/* ================================================
   SIGME: Modal genérico
   ================================================ */
/* ================================================
   MODAL GENÉRICO SIGME (navy)
   Compartido por: bitácora · convocatorias · documentos · especialidades
   ================================================ */
.sigme-modal-overlay{
    position: fixed;
    inset: 0;
    background: rgba(15, 28, 50, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
    animation: sigmeModalFade 0.25s ease both;
}
.sigme-modal{
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 1.5rem 3rem rgba(15, 28, 50, 0.35), 0 0.5rem 1rem rgba(15, 28, 50, 0.18);
    width: 100%;
    max-width: 780px;
    max-height: 88vh;
    display: flex;
    flex-flow: column nowrap;
    overflow: hidden;
    border: 1px solid rgba(46, 92, 158, 0.18);
    animation: sigmeModalIn 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28) both;
}
.sigme-modal-header{
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.95rem 1.1rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    border-bottom: 1px solid rgba(15, 28, 50, 0.18);
}
.sigme-modal-header::after{
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #d4af37 35%, #d4af37 65%, transparent 100%);
    opacity: 0.85;
}
.sigme-modal-header > div:first-child{
    display: flex;
    flex-flow: column nowrap;
    gap: 0.15rem;
}
.sigme-modal-header h3{
    margin: 0;
    font-family: 'Merriweather', serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.sigme-modal-header h3::before{
    content: "history_edu";
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 1.2rem;
    color: #d4af37;
}
.sigme-modal-header p{
    margin: 0;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 500;
}
.sigme-modal-close{
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    cursor: pointer;
    color: #ffffff;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s, color 0.2s, transform 0.2s, border-color 0.2s;
    flex-shrink: 0;
}
.sigme-modal-close:hover{
    background-color: #d93025;
    border-color: #d93025;
    color: #ffffff;
    transform: rotate(90deg);
}
.sigme-modal-close span{
    font-size: 1.15rem;
}
.sigme-modal-body{
    padding: 1rem 1.1rem;
    overflow-y: auto;
    flex: 1;
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 60%);
}
.sigme-modal-body::-webkit-scrollbar{
    width: 8px;
}
.sigme-modal-body::-webkit-scrollbar-thumb{
    background: rgba(46, 92, 158, 0.35);
    border-radius: 4px;
}
.sigme-modal-body::-webkit-scrollbar-thumb:hover{
    background: rgba(46, 92, 158, 0.6);
}

@keyframes sigmeModalFade{
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes sigmeModalIn{
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ================================================
   BITÁCORA: Timeline navy
   Compartida por: convocatorias · documentos · especialidades
   ================================================ */
.sigme-conv-bitacora-list{
    display: flex;
    flex-flow: column nowrap;
    gap: 0.65rem;
    position: relative;
    padding-left: 1.1rem;
}
.sigme-conv-bitacora-list::before{
    content: "";
    position: absolute;
    top: 0.6rem;
    bottom: 0.6rem;
    left: 0.35rem;
    width: 2px;
    background: linear-gradient(180deg, rgba(46, 92, 158, 0.45), rgba(46, 92, 158, 0.1));
    border-radius: 2px;
}
.sigme-conv-bitacora-item{
    position: relative;
    background-color: #ffffff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.55rem;
    padding: 0.7rem 0.85rem;
    box-shadow: 0 1px 2px rgba(15, 28, 50, 0.04);
    animation: sigmeBitItemIn 0.4s ease both;
    transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}
.sigme-conv-bitacora-item:hover{
    border-color: rgba(46, 92, 158, 0.42);
    box-shadow: 0 4px 12px rgba(46, 92, 158, 0.14);
    transform: translateX(2px);
}
.sigme-conv-bitacora-item::before{
    content: "";
    position: absolute;
    top: 1rem;
    left: -0.95rem;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: #2e5c9e;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 2px rgba(46, 92, 158, 0.35);
}
.sigme-conv-bitacora-item:nth-child(1){ animation-delay: 0.02s; }
.sigme-conv-bitacora-item:nth-child(2){ animation-delay: 0.06s; }
.sigme-conv-bitacora-item:nth-child(3){ animation-delay: 0.10s; }
.sigme-conv-bitacora-item:nth-child(4){ animation-delay: 0.14s; }
.sigme-conv-bitacora-item:nth-child(5){ animation-delay: 0.18s; }
.sigme-conv-bitacora-item:nth-child(n+6){ animation-delay: 0.22s; }

.sigme-conv-bitacora-meta{
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px dashed rgba(46, 92, 158, 0.22);
}
.sigme-conv-bitacora-fecha,
.sigme-conv-bitacora-usuario{
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: #5a7a9a;
    font-weight: 500;
}
.sigme-conv-bitacora-fecha span,
.sigme-conv-bitacora-usuario span{
    font-size: 1rem;
    color: #2e5c9e;
}
.sigme-conv-bitacora-accion{
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    padding: 0.18rem 0.55rem;
    border-radius: 1rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
}
.sigme-conv-bitacora-accion::before{
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
    font-size: 0.85rem;
}
.sigme-conv-bitacora-accion--create{
    background-color: #e7f6ec;
    color: #1e7e34;
    border-color: rgba(30, 126, 52, 0.22);
}
.sigme-conv-bitacora-accion--create::before{ content: "add_circle"; }
.sigme-conv-bitacora-accion--update{
    background-color: #e8f1fc;
    color: #1a3c6e;
    border-color: rgba(26, 60, 110, 0.22);
}
.sigme-conv-bitacora-accion--update::before{ content: "edit"; }
.sigme-conv-bitacora-accion--delete{
    background-color: #fdecea;
    color: #c5221f;
    border-color: rgba(197, 34, 31, 0.22);
}
.sigme-conv-bitacora-accion--delete::before{ content: "delete"; }
.sigme-conv-bitacora-accion--info{
    background-color: #fff4e3;
    color: #b75807;
    border-color: rgba(183, 88, 7, 0.22);
}
.sigme-conv-bitacora-accion--info::before{ content: "info"; }
.sigme-conv-bitacora-accion--config{
    background-color: #f1e7f7;
    color: #6a1b9a;
    border-color: rgba(106, 27, 154, 0.22);
}
.sigme-conv-bitacora-accion--config::before{ content: "tune"; }

.sigme-conv-bitacora-desc{
    margin: 0;
    font-size: 0.88rem;
    color: #2c3e50;
    line-height: 1.5;
}
.sigme-conv-bitacora-code{
    margin-top: 0.5rem;
    border-top: 1px dashed rgba(46, 92, 158, 0.18);
    padding-top: 0.4rem;
}
.sigme-conv-bitacora-code summary{
    font-size: 0.78rem;
    color: #2e5c9e;
    cursor: pointer;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 0.3rem;
    transition: background-color 0.2s;
    list-style: none;
}
.sigme-conv-bitacora-code summary::-webkit-details-marker{ display: none; }
.sigme-conv-bitacora-code summary::before{
    content: "chevron_right";
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 20;
    font-size: 1rem;
    transition: transform 0.2s;
}
.sigme-conv-bitacora-code[open] summary::before{
    transform: rotate(90deg);
}
.sigme-conv-bitacora-code summary:hover{
    background-color: rgba(46, 92, 158, 0.08);
}
.sigme-conv-bitacora-code pre{
    margin: 0.4rem 0 0;
    padding: 0.65rem 0.8rem;
    background: linear-gradient(180deg, #1a3c6e 0%, #16335e 100%);
    border: 1px solid rgba(46, 92, 158, 0.6);
    border-radius: 0.4rem;
    font-size: 0.76rem;
    color: #e8f1fc;
    font-family: 'Consolas', 'Courier New', monospace;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.45;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
}

@keyframes sigmeBitItemIn{
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Empty state dentro del modal de bitácora */
.sigme-modal-body .empty-table-container{
    background: #ffffff;
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.55rem;
    padding: 1.5rem 1rem;
    text-align: center;
    color: #5a7a9a;
}
.sigme-modal-body .empty-table-container span.material-symbols-outlined{
    font-size: 2.5rem;
    color: rgba(46, 92, 158, 0.5);
}
.sigme-modal-body .empty-table-container h5{
    margin: 0.5rem 0 0;
    font-size: 0.95rem;
    color: #1a3c6e;
    font-weight: 600;
}

/* Responsive: el modal toma todo el ancho */
@media (max-width: 600px){
    .sigme-modal{
        max-width: 100%;
        max-height: 95vh;
        border-radius: 0.5rem;
    }
    .sigme-modal-header{
        padding: 0.75rem 0.9rem;
    }
    .sigme-modal-header h3{
        font-size: 0.98rem;
    }
    .sigme-conv-bitacora-list{
        padding-left: 0.9rem;
    }
    .sigme-conv-bitacora-meta{
        gap: 0.5rem;
    }
    .sigme-conv-bitacora-accion{
        margin-left: 0;
    }
}

/* ================================================
   DOCUMENTOS: Listado con cards
   ================================================ */

/* Contenedor */
.sigme-doc-list{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
    font-family: 'Source Sans 3', sans-serif;
    min-height: calc(100vh - 13rem);
    max-height: calc(100vh - 13rem);
    overflow-y: auto;
    padding: 0.3rem;
    align-content: start;
}

/* Card */
.sigme-doc-card{
    display: flex;
    flex-flow: column nowrap;
    background-color: white;
    border-radius: 0.5rem;
    border: 1px solid #b8c8db;
    padding: 0;
    gap: 0;
    box-shadow: 0 0.1rem 0.4rem rgba(0, 56, 117, 0.08);
    animation: sigmeConvFadeUp 0.5s ease both;
}

/* Header */
.sigme-doc-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    background-color: #f4f7fb;
    border-bottom: 1px solid #dce6f0;
}
.sigme-doc-header .table-btn{
    flex-shrink: 0;
}
.sigme-doc-title{
    margin: 0;
    font-family: 'Merriweather', serif;
    font-size: 1rem;
    font-weight: 700;
    color: #003875;
    overflow-wrap: break-word;
}
.sigme-doc-desc{
    margin: 0;
    padding: 0.4rem 1rem;
    font-size: 0.84rem;
    color: #4a6a8a;
    text-align: justify;
    line-height: 1.4;
}

/* Indicadores */
.sigme-doc-indicators{
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
}
.sigme-doc-indicator{
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    border-radius: 1rem;
    font-size: 0.73rem;
    font-weight: 600;
    background-color: #e6f4ea;
    color: #1e7e34;
    border: 1px solid #34a853;
}
.sigme-doc-indicator span.material-symbols-outlined{
    font-size: 0.95rem;
}
.sigme-doc-indicator--warn{
    background-color: #fce8e6;
    color: #c5221f;
    border-color: #ea4335;
}
.sigme-doc-indicator--info{
    background-color: #e3f2fd;
    color: #003875;
    border-color: #4080e9;
}

/* Barra de archivo */
.sigme-doc-file-bar{
    padding: 0.4rem 1rem;
    background-color: #eef4fb;
    border-top: 1px solid #dce6f0;
    border-bottom: 1px solid #dce6f0;
}
.sigme-doc-file-btn{
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: white;
    background-color: #003875;
    border-radius: 0.3rem;
    text-decoration: none;
    transition: opacity 0.2s;
}
.sigme-doc-file-btn:hover{
    opacity: 0.85;
    color: white;
    text-decoration: none;
}
.sigme-doc-file-btn span{
    font-size: 1.1rem;
}

/* Footer 2 columnas */
.sigme-doc-footer{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid #dce6f0;
}
.sigme-doc-footer-col{
    display: flex;
    flex-flow: column nowrap;
    padding: 0.5rem 0.8rem 0.6rem;
    gap: 0.35rem;
    background-color: white;
}
.sigme-doc-footer-col:nth-child(2){
    background-color: #fafcfe;
}
.sigme-doc-footer-col:not(:last-child){
    border-right: 1px solid #dce6f0;
}

/* Tags proceso obligatorio/opcional */
.sigme-doc-tag--oblig{
    background-color: #fce8e6;
    border: 1px solid #ea4335;
    color: #c5221f;
}
.sigme-doc-tag--opt{
    background-color: #fff3e0;
    border: 1px solid #e8c97a;
    color: #e65100;
}
.sigme-doc-tag--oblig span.material-symbols-outlined,
.sigme-doc-tag--opt span.material-symbols-outlined{
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 900px){
    .sigme-doc-list{
        grid-template-columns: 1fr;
    }
    .sigme-doc-footer{
        grid-template-columns: 1fr;
    }
    .sigme-doc-footer-col:not(:last-child){
        border-right: none;
        border-bottom: 1px solid #dce6f0;
    }
    .sigme-modal{
        width: 95%;
        max-height: 90vh;
    }
    .sigme-conv-meta{
        grid-template-columns: 1fr;
    }
    .sigme-conv-meta-col:not(:last-child){
        border-right: none;
        border-bottom: 1px solid #dce6f0;
    }
    .sigme-conv-footer{
        grid-template-columns: 1fr;
    }
    .sigme-conv-footer-col:not(:last-child){
        border-right: none;
        border-bottom: 1px solid #dce6f0;
    }
}

/* ================================================
   GLOBAL: Sistema de cards reutilizable
   ================================================ */

/* Grids */
.sigme-grid-2{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
}
.sigme-grid-1{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
}

/* Card base */
.sigme-card{
    display: flex;
    flex-flow: column nowrap;
    background-color: white;
    border-radius: 0.5rem;
    border: 1px solid var(--shadow-gray);
    padding: 0;
    gap: 0;
    overflow: hidden;
    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.08);
    animation: sigmeConvFadeUp 0.5s ease both;
}

/* Card con borde izquierdo de estado */
.sigme-card--border-left{
    border-left: 4px solid var(--shadow-gray);
}
.sigme-card--border-green{
    border-left-color: var(--green);
}
.sigme-card--border-red{
    border-left-color: var(--red);
}
.sigme-card--border-blue{
    border-left-color: var(--blue);
}

/* Header de card */
.sigme-card-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.8rem;
    background-color: var(--very-light-gray);
    border-bottom: 1px solid var(--shadow-gray);
}
.sigme-card-title{
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--opacity-black);
    overflow-wrap: break-word;
    min-width: 0;
}
.sigme-card-header .table-btn{
    flex-shrink: 0;
}
.sigme-card-actions{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* Fila de info dentro de card */
.sigme-card-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.35rem 0.8rem;
    flex-wrap: wrap;
}

/* Texto secundario (email, subtitulo) */
.sigme-card-subtitle{
    font-size: 0.83rem;
    color: var(--blue);
    font-weight: 500;
    overflow-wrap: break-word;
    min-width: 0;
}

/* Badge de estado */
.sigme-badge{
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.45rem;
    border-radius: 1rem;
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.sigme-badge--green{
    background-color: #e6f4ea;
    border: 1px solid var(--green);
    color: var(--green);
}
.sigme-badge--red{
    background-color: #fce8e6;
    border: 1px solid var(--red);
    color: var(--red);
}
.sigme-badge--blue{
    background-color: #e3f2fd;
    border: 1px solid var(--blue);
    color: var(--blue);
}
.sigme-badge--orange{
    background-color: #fff3e0;
    border: 1px solid #e8c97a;
    color: #e65100;
}
.sigme-badge--purple{
    background-color: #f3e5f5;
    border: 1px solid #ce93d8;
    color: #7b1fa2;
}
.sigme-badge-dot{
    width: 5px;
    height: 5px;
    border-radius: 50%;
    animation: sigmeConvPulse 1.5s ease-in-out infinite;
}
.sigme-badge--green .sigme-badge-dot{ background-color: var(--green); }
.sigme-badge--red .sigme-badge-dot{ background-color: var(--red); }

/* Tags en fila */
.sigme-card-tags{
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.25rem 0.8rem 0.35rem;
}

/* Footer de card con columnas */
.sigme-card-footer{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--shadow-gray);
    margin-top: auto;
}
.sigme-card-footer--3col{
    grid-template-columns: repeat(3, 1fr);
}
.sigme-card-footer-col{
    display: flex;
    flex-flow: column nowrap;
    padding: 0.4rem 0.8rem 0.5rem;
    gap: 0.3rem;
}
.sigme-card-footer-col:nth-child(even){
    background-color: #fafcfe;
}
.sigme-card-footer-col:not(:last-child){
    border-right: 1px solid var(--shadow-gray);
}

/* Botón compacto en card */
.sigme-card-btn{
    flex-shrink: 0;
    font-size: 0.75rem !important;
    padding: 0.2rem 0.45rem !important;
    white-space: nowrap;
}
.sigme-card-btn .material-symbols-outlined{
    font-size: 1rem !important;
}

/* Responsive */
@media (max-width: 900px){
    .sigme-grid-2{
        grid-template-columns: 1fr;
    }
    .sigme-card-footer,
    .sigme-card-footer--3col{
        grid-template-columns: 1fr;
    }
    .sigme-card-footer-col:not(:last-child){
        border-right: none;
        border-bottom: 1px solid var(--shadow-gray);
    }
}

/* ================================================
   DIRECTORIO: Efecto "Presidente del Consejo" en la foto
   ================================================ */
.image-container--presidente{
    position: relative;
    overflow: visible !important;
    box-shadow:
        0 0 0 3px #fff,
        0 0 0 6px #d4a017,
        0 0 0.9rem rgba(212, 160, 23, 0.4) !important;
    animation: sigme-pres-pulse 2.6s infinite ease-in-out;
}
.image-container--presidente img{
    border-radius: 50% !important;
}
@keyframes sigme-pres-pulse{
    0%, 100%{
        box-shadow:
            0 0 0 3px #fff,
            0 0 0 6px #d4a017,
            0 0 0.7rem rgba(212, 160, 23, 0.35);
    }
    50%{
        box-shadow:
            0 0 0 3px #fff,
            0 0 0 6px #e4b125,
            0 0 1.3rem rgba(212, 160, 23, 0.6);
    }
}

.image-container-medal{
    position: absolute;
    bottom: -0.35rem;
    right: -0.35rem;
    z-index: 2;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #fce9a8 0%, #e4b125 50%, #a7810b 100%);
    border: 2.5px solid #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow:
        0 0.2rem 0.4rem rgba(0, 0, 0, 0.22),
        inset 0 -1px 1px rgba(0, 0, 0, 0.2);
    cursor: default;
}
.image-container-medal > span.material-symbols-outlined{
    font-size: 1.3rem !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

/* Ajustes compactos para el listado del directorio (foto más pequeña) */
.photo-input-section .image-container--presidente{
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 4px #d4a017,
        0 0 0.5rem rgba(212, 160, 23, 0.4) !important;
    animation-name: sigme-pres-pulse-sm;
}
@keyframes sigme-pres-pulse-sm{
    0%, 100%{
        box-shadow:
            0 0 0 2px #fff,
            0 0 0 4px #d4a017,
            0 0 0.35rem rgba(212, 160, 23, 0.35);
    }
    50%{
        box-shadow:
            0 0 0 2px #fff,
            0 0 0 4px #e4b125,
            0 0 0.75rem rgba(212, 160, 23, 0.55);
    }
}
.photo-input-section .image-container-medal{
    width: 1.3rem;
    height: 1.3rem;
    bottom: -0.2rem;
    right: -0.2rem;
    border-width: 2px;
}
.photo-input-section .image-container-medal > span.material-symbols-outlined{
    font-size: 0.85rem !important;
}

/* Ajustes para el directorio del dashboard (foto 4.5rem) */
.hcs1-ds-item-section .image-container--presidente{
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 5px #d4a017,
        0 0 0.7rem rgba(212, 160, 23, 0.4) !important;
    animation-name: sigme-pres-pulse-md;
}
@keyframes sigme-pres-pulse-md{
    0%, 100%{
        box-shadow:
            0 0 0 2px #fff,
            0 0 0 5px #d4a017,
            0 0 0.55rem rgba(212, 160, 23, 0.35);
    }
    50%{
        box-shadow:
            0 0 0 2px #fff,
            0 0 0 5px #e4b125,
            0 0 1rem rgba(212, 160, 23, 0.55);
    }
}
.hcs1-ds-item-section .image-container-medal{
    width: 1.65rem;
    height: 1.65rem;
    bottom: -0.25rem;
    right: -0.25rem;
    border-width: 2px;
}
.hcs1-ds-item-section .image-container-medal > span.material-symbols-outlined{
    font-size: 1rem !important;
}

/* ================================================
   MODAL: Nombrar como presidente
   ================================================ */
.sigme-nom-pres-modal .modal-dialog{
    max-width: 34rem;
    width: 95%;
    margin: 1.75rem auto;
}

.sigme-nom-pres-content{
    border: none;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.18);
    padding: 0 !important;
    width: auto !important;
}

/* Header */
.sigme-nom-pres-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, var(--blue) 0%, #3366cc 100%);
    color: #fff;
}
.sigme-nom-pres-title{
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.sigme-nom-pres-title h3{
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: #fff;
}
.sigme-nom-pres-title p{
    margin: 0;
    font-size: 0.8rem;
    opacity: 0.85;
}
.sigme-nom-pres-icon{
    font-size: 2.25rem !important;
    background-color: rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    padding: 0.4rem;
}
.sigme-nom-pres-close{
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.sigme-nom-pres-close:hover{
    background: rgba(255, 255, 255, 0.18);
}
.sigme-nom-pres-close span{
    font-size: 1.4rem;
}

/* Body */
.sigme-nom-pres-body{
    padding: 1.5rem;
    background: #fff;
}

/* Doctor summary */
.sigme-nom-pres-doctor{
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 1rem;
    background-color: var(--hover-blue);
    border-radius: 0.6rem;
    margin-bottom: 1.1rem;
}
.sigme-nom-pres-avatar{
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 0 0.2rem var(--shadow-gray);
    flex-shrink: 0;
}
.sigme-nom-pres-doctor-info h4{
    margin: 0 0 0.15rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--opacity-black);
}
.sigme-nom-pres-doctor-info p{
    margin: 0;
    font-size: 0.82rem;
    color: var(--shadow-gray);
    word-break: break-all;
}

/* Alerts */
.sigme-nom-pres-alert{
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    border-radius: 0.5rem;
    margin-bottom: 1.1rem;
    border-left: 3px solid;
}
.sigme-nom-pres-alert p{
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--opacity-black);
}
.sigme-nom-pres-alert span.material-symbols-outlined{
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.05rem;
}
.sigme-nom-pres-alert--warning{
    background-color: #fff4e5;
    border-left-color: var(--orange);
}
.sigme-nom-pres-alert--warning span{
    color: var(--orange);
}
.sigme-nom-pres-alert--info{
    background-color: var(--hover-blue);
    border-left-color: var(--blue);
}
.sigme-nom-pres-alert--info span{
    color: var(--blue);
}

/* Section title */
.sigme-nom-pres-section-title{
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: 0.04rem;
    margin: 0 0 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px dashed var(--shadow-gray);
}

/* Date fields */
.sigme-nom-pres-dates{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
    margin-bottom: 1.1rem;
}
.sigme-nom-pres-field label{
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--opacity-black);
    margin-bottom: 0.35rem;
}
.sigme-nom-pres-field input{
    width: 100%;
    padding: 0.55rem 0.75rem;
    font-size: 0.9rem;
    border: 1px solid var(--shadow-gray);
    border-radius: 0.4rem;
    background-color: #fff;
    color: var(--opacity-black);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}
.sigme-nom-pres-field input:focus{
    border-color: var(--blue);
    box-shadow: 0 0 0 0.15rem rgba(64, 128, 233, 0.2);
}

/* Footer */
.sigme-nom-pres-footer{
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    padding: 1rem 1.5rem;
    background-color: var(--hover-blue);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.sigme-nom-pres-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.55rem 1.1rem;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: 0.4rem;
    border: none;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.sigme-nom-pres-btn span.material-symbols-outlined{
    font-size: 1.15rem;
}
.sigme-nom-pres-btn--secondary{
    background-color: #fff;
    color: var(--opacity-black);
    box-shadow: 0 0 0.1rem var(--opacity-black);
}
.sigme-nom-pres-btn--secondary:hover{
    background-color: #f7f7f7;
}
.sigme-nom-pres-btn--primary{
    background-color: var(--green);
    color: #fff;
    box-shadow: 0 0.2rem 0.5rem rgba(38, 154, 28, 0.3);
}
.sigme-nom-pres-btn--primary:hover{
    transform: translateY(-1px);
    box-shadow: 0 0.35rem 0.7rem rgba(38, 154, 28, 0.35);
}

/* Responsive */
@media (max-width: 600px){
    .sigme-nom-pres-dates{
        grid-template-columns: 1fr;
    }
    .sigme-nom-pres-footer{
        flex-direction: column-reverse;
    }
    .sigme-nom-pres-btn{
        width: 100%;
    }
}

/* ================================================
   HISTORIAL DE SOLICITUDES (especialidades)
   ================================================ */
/* =====================================================================
   HISTORIAL DE SOLICITUDES — vista admin (paleta navy)
   Tarjetas con cinta lateral por estado, header con chip + proceso,
   grid de campos, anexos como chips y footer con acciones.
   ---------------------------------------------------------------------
   Componente que usa estos estilos:
   - resources/js/components/expediente/especialidades/HistorySpecialtiesComponent.vue
       (Directorio → Expediente → Especialidades → tab Historial)
   ===================================================================== */

/* Header de la sección */
.sigme-hist-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 0;
    margin-bottom: 0.9rem;
    border-bottom: 1px dashed #e2e8f0;
    flex-wrap: wrap;
}
.sigme-hist-header h3{
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a3c6e;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.sigme-hist-header h3::before{
    content: 'history';
    font-family: 'Material Symbols Outlined';
    width: 2rem;
    height: 2rem;
    border-radius: 0.45rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 400;
}
.sigme-hist-header small{
    display: inline-block;
    margin-top: 0.2rem;
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sigme-hist-header .btn-green{
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.95rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #ffffff !important;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
}
.sigme-hist-header .btn-green:hover{
    background: linear-gradient(135deg, #15803d 0%, #14532d 100%);
    transform: translateY(-1px);
    box-shadow: 0 0.25rem 0.6rem rgba(22, 101, 52, 0.3);
    text-decoration: none;
}

/* Grid de cards */
.sigme-hist-grid{
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* Card individual */
.sigme-hist-card{
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.7rem;
    box-shadow: 0 0.1rem 0.35rem rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.18s, transform 0.18s;
}
.sigme-hist-card::before{
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
    border-top-left-radius: 0.7rem;
    border-bottom-left-radius: 0.7rem;
}
.sigme-hist-card--vigente::before   { background: linear-gradient(180deg, #16a34a 0%, #15803d 100%); }
.sigme-hist-card--historico::before { background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%); }
.sigme-hist-card--cancelado::before { background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%); }
.sigme-hist-card:hover{
    transform: translateY(-1px);
    box-shadow: 0 0.35rem 0.85rem rgba(15, 23, 42, 0.1);
}

/* Header del card: chip + proceso + fecha */
.sigme-hist-card-head{
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.85rem;
    align-items: center;
    padding: 0.85rem 1rem 0.85rem 1.15rem;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border-bottom: 1px solid #e2e8f0;
    border-top-left-radius: 0.7rem;
    border-top-right-radius: 0.7rem;
}
.sigme-hist-head-meta{
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    line-height: 1.2;
    min-width: 0;
}
.sigme-hist-head-meta span{
    font-size: 0.92rem;
    font-weight: 700;
    color: #1a3c6e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sigme-hist-head-meta small{
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 600;
}
.sigme-hist-head-date{
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: #eef2f7;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}
.sigme-hist-head-date span.material-symbols-outlined{
    font-size: 0.95rem;
    color: #2e5c9e;
}

/* Chips de estado */
.sigme-hist-chip{
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    border: 1px solid transparent;
}
.sigme-hist-chip--ok{
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #14532d;
    border-color: #86efac;
}
.sigme-hist-chip--info{
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1a3c6e;
    border-color: #93c5fd;
}
.sigme-hist-chip--bad{
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border-color: #fca5a5;
}
/* Rol operativo del médico (revisor/tesorero) en el directorio: relleno azul de
   marca para destacar que, además de certificado, participa en los procesos. */
.sigme-hist-chip--rol{
    background: #1a3c6e;
    color: #fff;
    border-color: #1a3c6e;
    font-weight: 700;
}
.sigme-hist-chip--link{
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    border-color: #1a3c6e;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
}
a.sigme-hist-chip--link:hover{
    background: linear-gradient(135deg, #142e54 0%, #234b81 100%);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.5rem rgba(26, 60, 110, 0.3);
}
.sigme-hist-chip span.material-symbols-outlined{
    font-size: 0.9rem;
}

/* Body: grid de campos */
.sigme-hist-card-body{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem 0.85rem;
    padding: 0.95rem 1rem 0.95rem 1.15rem;
}
.sigme-hist-section{
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.55rem 0.7rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.45rem;
    min-width: 0;
}
.sigme-hist-section--full{ grid-column: 1 / -1; }
.sigme-hist-label{
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94a3b8;
}
.sigme-hist-value{
    font-size: 0.95rem;
    color: #1a3c6e;
    font-weight: 600;
    line-height: 1.35;
}
.sigme-hist-value--big{
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.sigme-hist-value-secondary{
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.45;
}
.sigme-hist-value-secondary b{
    color: #1a3c6e;
    font-weight: 700;
}
.sigme-hist-arrow{
    color: #94a3b8;
    margin: 0 0.25rem;
    font-weight: 400;
    font-size: 0.85rem;
}
/* Firmantes en 2 columnas dentro de la sección --full. Cada columna apila
   sublabel (Presidente / Responsable) + nombre. */
.sigme-hist-firmantes{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem 1.25rem;
    margin-top: 0.15rem;
}
.sigme-hist-firmante{
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.sigme-hist-firmante b{
    font-size: 0.9rem;
    color: #1a3c6e;
    font-weight: 700;
    line-height: 1.3;
    word-break: break-word;
}
.sigme-hist-sublabel{
    font-size: 0.7rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
@media (max-width: 560px){
    .sigme-hist-firmantes{ grid-template-columns: 1fr; }
}

/* Anexos: chips horizontales */
.sigme-hist-attachments{
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0 1rem 0.85rem 1.15rem;
}
.sigme-hist-attachment{
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid transparent;
}
.sigme-hist-attachment--ok{
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #14532d;
    border-color: #86efac;
}
.sigme-hist-attachment--ok:hover{
    background: linear-gradient(135deg, #bbf7d0 0%, #86efac 100%);
    color: #052e16;
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.5rem rgba(22, 101, 52, 0.2);
}
.sigme-hist-attachment--pending{
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #78350f;
    border-color: #fcd34d;
    cursor: default;
}
.sigme-hist-attachment span.material-symbols-outlined{
    font-size: 0.95rem;
}

/* Footer del card: acciones principales + iconos */
.sigme-hist-footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 1rem 0.7rem 1.15rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-top: 1px solid #e2e8f0;
    border-bottom-left-radius: 0.7rem;
    border-bottom-right-radius: 0.7rem;
    flex-wrap: wrap;
}
.sigme-hist-actions-main{
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}
.sigme-hist-actions-main .btn{
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 0.45rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
}
.sigme-hist-actions-main .btn-blue{
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff !important;
    border-color: #1a3c6e;
}
.sigme-hist-actions-main .btn-blue:hover{
    background: linear-gradient(135deg, #142e54 0%, #234b81 100%);
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.5rem rgba(26, 60, 110, 0.3);
    text-decoration: none;
}
.sigme-hist-actions-main .sigme-hist-detail-btn{
    background: linear-gradient(135deg, #6a1b9a 0%, #8e24aa 100%);
    color: #ffffff !important;
    border-color: #6a1b9a;
}
.sigme-hist-actions-main .sigme-hist-detail-btn:hover{
    background: linear-gradient(135deg, #4a148c 0%, #6a1b9a 100%);
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.5rem rgba(106, 27, 154, 0.3);
    text-decoration: none;
}
.sigme-hist-actions-main .btn-green{
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #ffffff !important;
    border-color: #15803d;
}
.sigme-hist-actions-main .btn-green:hover{
    background: linear-gradient(135deg, #15803d 0%, #14532d 100%);
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.5rem rgba(22, 101, 52, 0.3);
    text-decoration: none;
}
.sigme-hist-actions-main .btn span.material-symbols-outlined{ font-size: 1rem; }

/* Grupo de iconos a la derecha */
.sigme-hist-actions-icon{
    display: flex;
    gap: 0.4rem;
    align-items: center;
}
.sigme-hist-actions-group{
    display: flex;
    gap: 0.3rem;
}
.sigme-hist-actions-sep{
    width: 1px;
    align-self: stretch;
    background: #cbd5e1;
    margin: 0.15rem 0.2rem;
}

/* Botones icon-only del historial */
.sigme-hist-iconbtn{
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all 0.15s;
}
.sigme-hist-iconbtn:hover{
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.5rem rgba(15, 23, 42, 0.1);
}
.sigme-hist-iconbtn span.material-symbols-outlined{
    font-size: 1.1rem;
}

/* Variantes de color */
.sigme-hist-iconbtn--info{
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    color: #1a3c6e;
    border-color: #93c5fd;
}
.sigme-hist-iconbtn--info:hover{
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    border-color: #1a3c6e;
}
.sigme-hist-iconbtn--success{
    background: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 100%);
    color: #14532d;
    border-color: #86efac;
}
.sigme-hist-iconbtn--success:hover{
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #ffffff;
    border-color: #15803d;
}
.sigme-hist-iconbtn--warning{
    background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
    color: #78350f;
    border-color: #fcd34d;
}
.sigme-hist-iconbtn--warning:hover{
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    color: #ffffff;
    border-color: #b45309;
}
.sigme-hist-iconbtn--activate{
    background: linear-gradient(135deg, #cffafe 0%, #ecfeff 100%);
    color: #155e75;
    border-color: #67e8f9;
}
.sigme-hist-iconbtn--activate:hover{
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: #ffffff;
    border-color: #0891b2;
}
.sigme-hist-iconbtn--danger{
    background: linear-gradient(135deg, #fee2e2 0%, #fff5f5 100%);
    color: #991b1b;
    border-color: #fca5a5;
}
.sigme-hist-iconbtn--danger:hover{
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #ffffff;
    border-color: #b91c1c;
}

/* Tooltip de los icon-only del historial */
.sigme-hist-tooltip{
    position: absolute;
    bottom: calc(100% + 0.45rem);
    right: 50%;
    transform: translateX(50%) translateY(0.3rem);
    background: #0f172a;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.35rem 0.6rem;
    border-radius: 0.4rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 100;
    box-shadow: 0 0.25rem 0.6rem rgba(15, 23, 42, 0.35);
}
.sigme-hist-tooltip::after{
    content: '';
    position: absolute;
    top: 100%;
    right: 50%;
    transform: translateX(50%);
    border: 0.3rem solid transparent;
    border-top-color: #0f172a;
}
.sigme-hist-iconbtn:hover .sigme-hist-tooltip,
.sigme-hist-iconbtn:focus-visible .sigme-hist-tooltip{
    opacity: 1;
    transform: translateX(50%) translateY(0);
}

/* =====================================================
   Historial · panel de acciones (rediseño A+B)
   -----------------------------------------------------
   Reemplaza al pie de íconos con tooltip (.sigme-hist-footer, ahora con
   v-if="false" en la vista). Las acciones quedan siempre visibles, agrupadas
   por sección, y cada una muestra su título + una breve descripción. El grid
   se reacomoda solo en 1/2/3 columnas según el ancho disponible.
   ===================================================== */
.sigme-hist-acts{
    border-top: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 0.35rem 1rem 1rem;
    border-bottom-left-radius: 0.7rem;
    border-bottom-right-radius: 0.7rem;
}
.sigme-hist-actgrp{ padding-top: 0.7rem; }
.sigme-hist-actgrp__lbl{
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* Línea divisoria a la derecha de cada etiqueta de grupo */
.sigme-hist-actgrp__lbl::after{
    content: "";
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}
.sigme-hist-actgrp__grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
    gap: 0.45rem;
}
/* Grupo Certificado + Comprobante de pago: todas las acciones en una sola fila,
   compartiendo el ancho por igual (base baja para que quepan los 4 en un renglón;
   solo bajan de línea si el ancho realmente no alcanza). */
.sigme-hist-actgrp__grid--row{
    display: flex;
    flex-wrap: wrap;
}
.sigme-hist-actgrp__grid--row .sigme-hist-actcard{
    flex: 1 1 9rem;
}

/* Certificado + Comprobante de pago lado a lado (mitad y mitad): cada mitad
   con su propia etiqueta y sus botones en fila. En pantallas angostas se apilan. */
.sigme-hist-actgrp--split{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem 1.4rem;
    align-items: start;
}
.sigme-hist-actsub{ min-width: 0; }
@media (max-width: 48rem){
    .sigme-hist-actgrp--split{ grid-template-columns: 1fr; }
}

/* Fila principal: 3 acciones siempre visibles (Editar/Detalle/Reponer) + "Acciones" */
.sigme-hist-acts__primary{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding-top: 0.3rem;
}
.sigme-hist-acts__pbtn{
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    border-radius: 0.45rem;
    font-size: 0.8rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    color: #ffffff;
    transition: all 0.15s;
}
.sigme-hist-acts__pbtn:hover{ transform: translateY(-1px); box-shadow: 0 0.2rem 0.5rem rgba(15, 23, 42, 0.2); }
.sigme-hist-acts__pbtn span.material-symbols-outlined{ font-size: 1rem; }
.sigme-hist-acts__pbtn--edit{    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%); }
.sigme-hist-acts__pbtn--detail{  background: linear-gradient(135deg, #6a1b9a 0%, #8e24aa 100%); }
.sigme-hist-acts__pbtn--reponer{ background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); }

/* Botón "Acciones": abre/cierra el resto de acciones */
.sigme-hist-acts__toggle{
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.8rem;
    border-radius: 0.45rem;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    transition: all 0.15s;
}
.sigme-hist-acts__toggle:hover{ background: #f1f5f9; border-color: #94a3b8; }
.sigme-hist-acts__toggle.is-open{ background: #eef2f7; border-color: #94a3b8; color: #1a3c6e; }
.sigme-hist-acts__toggle span.material-symbols-outlined{ font-size: 1rem; }
.sigme-hist-acts__caret{ transition: transform 0.2s; }
.sigme-hist-acts__toggle.is-open .sigme-hist-acts__caret{ transform: rotate(180deg); }

/* Panel desplegable con el resto de acciones */
.sigme-hist-acts__more{
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed #e2e8f0;
}
/* Dentro del desplegable el espaciado lo da el gap; se evita el doble margen. */
.sigme-hist-acts__more .sigme-hist-actgrp{ padding-top: 0; }
.sigme-hist-actcard{
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.55rem;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    width: 100%;
    font-family: inherit;
}
.sigme-hist-actcard:hover{
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.5rem rgba(15, 23, 42, 0.12);
}
.sigme-hist-actcard__ic{
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sigme-hist-actcard__ic span.material-symbols-outlined{ font-size: 1.15rem; }
.sigme-hist-actcard__t{ min-width: 0; }
.sigme-hist-actcard__t b{ font-size: 0.82rem; display: block; line-height: 1.2; color: #0f172a; }
.sigme-hist-actcard__t small{ font-size: 0.71rem; color: #64748b; line-height: 1.2; display: block; margin-top: 0.1rem; }

/* Variantes de color por tipo de acción: ícono suave + realce del borde al hover */
.sigme-hist-actcard--info .sigme-hist-actcard__ic{ background: #eaf1fb; color: #1a3c6e; }
.sigme-hist-actcard--info:hover{ border-color: #93c5fd; }
.sigme-hist-actcard--success .sigme-hist-actcard__ic{ background: #e8f6ec; color: #166534; }
.sigme-hist-actcard--success:hover{ border-color: #86efac; }
.sigme-hist-actcard--warning .sigme-hist-actcard__ic{ background: #fef3c7; color: #92400e; }
.sigme-hist-actcard--warning:hover{ border-color: #fcd34d; }
.sigme-hist-actcard--activate .sigme-hist-actcard__ic{ background: #e0f7fb; color: #155e75; }
.sigme-hist-actcard--activate:hover{ border-color: #67e8f9; }
.sigme-hist-actcard--danger .sigme-hist-actcard__ic{ background: #fdecec; color: #b91c1c; }
.sigme-hist-actcard--danger:hover{ border-color: #fca5a5; }
.sigme-hist-actcard--purple .sigme-hist-actcard__ic{ background: #f4eafa; color: #6a1b9a; }
.sigme-hist-actcard--purple:hover{ border-color: #d8b4e8; }
.sigme-hist-actcard--orange .sigme-hist-actcard__ic{ background: #fff0e6; color: #c2410c; }
.sigme-hist-actcard--orange:hover{ border-color: #fdba74; }

/* Empty state */
.sigme-hist-empty{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 3rem 1rem;
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 0.7rem;
    text-align: center;
    color: #64748b;
}
.sigme-hist-empty span.material-symbols-outlined{
    font-size: 3rem;
    color: #cbd5e1;
}
.sigme-hist-empty h5{
    margin: 0.5rem 0 0;
    font-size: 1rem;
    color: #475569;
    font-weight: 700;
}
.sigme-hist-empty p{
    margin: 0 0 1rem;
    font-size: 0.85rem;
    color: #94a3b8;
}
.sigme-hist-empty .btn-green{
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.95rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #ffffff !important;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
}
.sigme-hist-empty .btn-green:hover{
    background: linear-gradient(135deg, #15803d 0%, #14532d 100%);
    transform: translateY(-1px);
    box-shadow: 0 0.25rem 0.6rem rgba(22, 101, 52, 0.3);
    text-decoration: none;
}

@media (max-width: 700px){
    .sigme-hist-card-body{ grid-template-columns: 1fr; }
    .sigme-hist-card-head{ grid-template-columns: auto 1fr; }
    .sigme-hist-head-date{ grid-column: 1 / -1; justify-self: flex-start; }
    .sigme-hist-footer{ flex-direction: column; align-items: stretch; }
    .sigme-hist-actions-main{ width: 100%; }
    .sigme-hist-actions-main .btn{ flex: 1; justify-content: center; }
    .sigme-hist-actions-icon{ justify-content: flex-end; flex-wrap: wrap; }
}

/* =====================================================
   SIGME · Cards de períodos de cobro (Propuesta KPI)
   ===================================================== */
.sigme-period-grid{
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0 0.25rem 0.5rem;
}
.sigme-period-card{
    display: flex;
    background: #fff;
    border-radius: 0.6rem;
    box-shadow: 0 0.1rem 0.4rem rgba(0,0,0,0.06);
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
}
.sigme-period-card:hover{
    box-shadow: 0 0.3rem 0.8rem rgba(0,0,0,0.1);
    transform: translateY(-1px);
}
.sigme-period-card.is-selected{
    box-shadow: 0 0 0 2px var(--green), 0 0.3rem 0.8rem rgba(0,0,0,0.12);
}

.sigme-period-side{
    flex: 0 0 2.4rem;
    background: var(--shadow-gray);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 700;
    letter-spacing: 0.18rem;
    font-size: 0.72rem;
    padding: 0.75rem 0;
}
.sigme-period-card--activo .sigme-period-side{ background: var(--green); }
.sigme-period-card--cerrado .sigme-period-side{ background: var(--very-light-black); }
.sigme-period-card--por_cerrar .sigme-period-side{ background: var(--orange); }
.sigme-period-card.is-selected.sigme-period-card--activo .sigme-period-side{ background: var(--tainted-green); }

.sigme-period-content{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.9rem 1rem;
    min-width: 0;
}
.sigme-period-head{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    border-bottom: 1px solid var(--very-light-gray);
    padding-bottom: 0.55rem;
}
.sigme-period-title{
    margin: 0;
    font-size: 1.05rem;
    color: var(--opacity-black);
    font-weight: 700;
    line-height: 1.2;
}
.sigme-period-range{
    font-size: 0.78rem;
    color: var(--very-light-black);
    display: block;
    margin-top: 0.2rem;
}
.sigme-period-corte{
    display: inline-block;
    margin-top: 0.3rem;
    font-size: 0.7rem;
    color: var(--dark-red);
    background: var(--shadow-red);
    padding: 0.15rem 0.5rem;
    border-radius: 0.4rem;
    font-weight: 600;
}

.sigme-period-head-aside{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.sigme-period-menu{ position: relative; }
.sigme-period-menu-btn{
    background: transparent;
    border: 1px solid var(--very-light-gray);
    border-radius: 0.35rem;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--light-black);
    transition: background 0.15s;
}
.sigme-period-menu-btn:hover{ background: var(--very-light-gray); }
.sigme-period-menu-btn span.material-symbols-outlined{ font-size: 1.2rem; }
.sigme-period-menu-list{
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    background: #fff;
    border: 1px solid var(--very-light-gray);
    border-radius: 0.4rem;
    box-shadow: 0 0.3rem 0.8rem rgba(0,0,0,0.12);
    min-width: 12rem;
    z-index: 20;
    overflow: hidden;
}
.sigme-period-menu-list button{
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 0.55rem 0.8rem;
    cursor: pointer;
    font-size: 0.83rem;
    color: var(--opacity-black);
    transition: background 0.15s;
}
.sigme-period-menu-list button:hover{ background: var(--light-blue-for-table); }
.sigme-period-menu-list button:disabled{ color: var(--light-gray); cursor: not-allowed; background: transparent !important; }
.sigme-period-menu-list button.danger{ color: var(--red); }
.sigme-period-menu-list button.danger:hover{ background: var(--shadow-red); }
.sigme-period-menu-list button span.material-symbols-outlined{ font-size: 1.05rem; }

.sigme-period-kpis{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    padding: 0.25rem 0 0.6rem;
    border-bottom: 1px solid var(--very-light-gray);
}
.sigme-period-kpi-value{
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--opacity-black);
    line-height: 1.1;
}
.sigme-period-kpi-label{
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    color: var(--very-light-black);
    margin-top: 0.2rem;
    font-weight: 700;
}

.sigme-period-chips{
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.sigme-period-chip-toggle{
    background: transparent;
    border: 1px dashed var(--very-light-gray);
    color: var(--blue);
    padding: 0.2rem 0.6rem;
    border-radius: 1rem;
    font-size: 0.7rem;
    cursor: pointer;
    font-weight: 600;
}
.sigme-period-chip-toggle:hover{ background: var(--hover-light-blue); }

.sigme-period-cta{
    display: flex;
    justify-content: flex-end;
    padding-top: 0.25rem;
}
.sigme-period-cta .btn{
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
}
.sigme-period-cta .btn span.material-symbols-outlined{ font-size: 1.05rem; }

@media (max-width: 700px){
    .sigme-period-kpis{ grid-template-columns: 1fr; }
    .sigme-period-side{ flex: 0 0 2rem; font-size: 0.65rem; }
}

/* =====================================================
   SIGME · Lista compacta expandible (rowlist)
   ===================================================== */
.sigme-rowlist-wrapper{
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}
/* Override para que el panel padre delegue scroll al body de la lista */
.cobros-component .cobros-medicos{
    height: 100%;
    overflow: hidden;
}
.cobros-component .cobros-medicos > .contents{
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.sigme-rowlist{
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 0.1rem 0.4rem rgba(0,0,0,0.06);
    margin-bottom: 0.5rem;
}
.sigme-rowlist--fill{
    flex: 1 1 auto;
    min-height: 0;
}
.sigme-rowlist--fill .sigme-rowlist-body{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.sigme-rowlist-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 1rem;
    background: var(--light-blue-for-table);
    border-bottom: 1px solid var(--very-light-gray);
}
.sigme-rowlist-head h3{
    margin: 0;
    font-size: 0.95rem;
    color: var(--opacity-black);
    font-weight: 700;
}
.sigme-rowlist-head small{
    color: var(--very-light-black);
    font-size: 0.78rem;
}

.sigme-rowlist-body{
    display: flex;
    flex-direction: column;
}

.sigme-row{
    display: grid;
    grid-template-columns: 2rem 0.3rem minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 0.9fr) auto 1.8rem;
    gap: 0.55rem;
    align-items: center;
    padding: 0.35rem 0.85rem;
    border-bottom: 1px solid var(--very-light-gray);
    transition: background 0.15s;
    cursor: pointer;
    min-height: 2.6rem;
}
.sigme-row:hover{ background: var(--light-blue-for-table); }
.sigme-row:last-of-type{ border-bottom: none; }
.sigme-row.is-open{ background: var(--hover-light-blue); }

.sigme-row-side{
    width: 0.25rem;
    align-self: stretch;
    background: var(--shadow-gray);
    border-radius: 0.15rem;
}
.sigme-row--valido .sigme-row-side,
.sigme-row--cobrado .sigme-row-side{ background: var(--green); }
.sigme-row--pendiente .sigme-row-side{ background: var(--orange); }
.sigme-row--invalido .sigme-row-side{ background: var(--red); }

.sigme-row-check{
    display: flex;
    align-items: center;
    justify-content: center;
}
.sigme-row-check input[type="checkbox"]{ transform: scale(1.15); }
.sigme-row-block{
    color: var(--red);
    font-size: 1.25rem;
}

.sigme-row-name{
    font-weight: 600;
    color: var(--opacity-black);
    font-size: 0.84rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}
.sigme-row-name small{
    display: block;
    color: var(--very-light-black);
    font-weight: 500;
    font-size: 0.7rem;
    margin-top: 0.05rem;
    line-height: 1.1;
}
.sigme-row-cell{
    font-size: 0.78rem;
    color: var(--light-black);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sigme-row-amount{
    font-weight: 700;
    color: var(--opacity-black);
    font-size: 0.85rem;
    text-align: right;
    white-space: nowrap;
}
.sigme-row-status{ display: inline-flex; }
.sigme-row-status .sigme-hist-chip{ padding: 0.18rem 0.55rem; font-size: 0.65rem; }

.sigme-row-toggle{
    background: transparent;
    border: none;
    color: var(--very-light-black);
    width: 1.7rem;
    height: 1.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.3rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.sigme-row-toggle:hover{ background: var(--very-light-gray); color: var(--blue); }
.sigme-row-toggle span.material-symbols-outlined{ font-size: 1.1rem; }

.sigme-row-detail{
    padding: 0.85rem 1rem 1rem 4rem;
    background: var(--light-blue-for-table);
    border-top: 1px dashed var(--very-light-gray);
    border-bottom: 1px solid var(--very-light-gray);
}
.sigme-row-detail-grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.65rem 1.25rem;
}
.sigme-row-detail-grid > div{
    font-size: 0.82rem;
    color: var(--light-black);
}
.sigme-row-detail-grid b{ color: var(--opacity-black); }
.sigme-row-detail-grid .sigme-row-detail-full{ grid-column: 1 / -1; }
.sigme-row-detail-label{
    text-transform: uppercase;
    font-size: 0.62rem;
    letter-spacing: 0.05rem;
    color: var(--very-light-black);
    font-weight: 700;
    display: block;
    margin-bottom: 0.15rem;
}

.sigme-rowlist-bottombar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 1rem;
    background: #fff;
    border-top: 1px solid var(--very-light-gray);
    flex-wrap: wrap;
    flex-shrink: 0;
}
.sigme-rowlist-bottombar.is-active--ok{ background: var(--light-shadow-green); }
.sigme-rowlist-bottombar.is-active--danger{ background: var(--shadow-red); }
.sigme-rowlist-bottombar .sigme-rowlist-counter{
    font-size: 0.85rem;
    color: var(--opacity-black);
}
.sigme-rowlist-bottombar .sigme-rowlist-counter b{ color: var(--blue); }
.sigme-rowlist-bottombar .btn{
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
}

.sigme-rowlist-selectall{
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--light-black);
    cursor: pointer;
    user-select: none;
}
.sigme-rowlist-selectall input{ transform: scale(1.1); }

@media (max-width: 900px){
    .sigme-row{ grid-template-columns: 2rem 0.3rem 1fr auto auto auto; }
    .sigme-row-cell--date{ display: none; }
    .sigme-row-detail{ padding-left: 1rem; }
    .sigme-row-detail-grid{ grid-template-columns: 1fr; }
}

/* =====================================================
   Override · Listado del directorio con scroll interno
   ===================================================== */
.directory-component .table-section-container{
    min-height: 0;
    overflow: hidden;
}
.sigme-directory-list{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.4rem;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.sigme-directory-list .sigme-period-grid{
    gap: 1.1rem;
    padding-bottom: 0.5rem;
}
.sigme-directory-list .sigme-period-card{
    position: relative;
    border: 1px solid #e2e8f0;
    border-radius: 0.7rem;
    box-shadow: 0 0.15rem 0.4rem rgba(15, 23, 42, 0.05);
    transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}
.sigme-directory-list .sigme-period-card::before{
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    border-top-left-radius: 0.7rem;
    border-bottom-left-radius: 0.7rem;
}
.sigme-directory-list .sigme-period-card:hover{
    border-color: #2e5c9e;
    box-shadow: 0 0.35rem 0.85rem rgba(26, 60, 110, 0.15);
    transform: translateY(-1px);
}

/* Contenido del card del médico — tipografía navy */
.sigme-directory-list .sigme-period-content {
    padding-left: 1.15rem;
}
.sigme-directory-list .sigme-period-title {
    color: #1a3c6e;
    font-weight: 700;
}
.sigme-directory-list .sigme-period-title a {
    color: #1a3c6e !important;
    text-decoration: none;
}
.sigme-directory-list .sigme-period-title a:hover {
    color: #2e5c9e !important;
    text-decoration: underline;
}

/* Link "Abrir expediente" en el nombre del médico */
.dir-doctor-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none !important;
    color: #1a3c6e !important;
    border-radius: 0.4rem;
    padding: 0.1rem 0.35rem;
    margin-left: -0.35rem;
    transition: all 0.18s ease;
    flex-wrap: wrap;
}
.dir-doctor-link__name {
    color: inherit;
    font-weight: 700;
}
.dir-doctor-link__hint {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    background: linear-gradient(135deg, #eef2ff 0%, #dbeafe 100%);
    color: #1a3c6e;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
    transition: all 0.18s ease;
}
.dir-doctor-link__hint .material-symbols-outlined {
    font-size: 0.85rem;
    color: #2e5c9e;
}
.dir-doctor-link:hover {
    background: rgba(26, 60, 110, 0.05);
}
.dir-doctor-link:hover .dir-doctor-link__name {
    color: #2e5c9e !important;
    text-decoration: underline;
}
.dir-doctor-link:hover .dir-doctor-link__hint {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    border-color: #1a3c6e;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.3);
}
.dir-doctor-link:hover .dir-doctor-link__hint .material-symbols-outlined {
    color: #fde68a;
}
.sigme-directory-list .sigme-period-range {
    color: #64748b;
}

/* Foto del médico en el listado */
.sigme-directory-list .image-container {
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 50% !important;
    overflow: visible !important;
    display: inline-block !important;
    position: relative;
    box-shadow: 0 0.2rem 0.5rem rgba(15, 23, 42, 0.12);
    border: 3px solid #ffffff;
    background: #f1f5f9;
}
.sigme-directory-list .image-container img {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block;
}
.sigme-directory-list .image-container--presidente {
    border-color: #f5c451;
    box-shadow: 0 0 0 2px rgba(245, 196, 81, 0.5), 0 0.25rem 0.6rem rgba(212, 160, 23, 0.25);
}
.sigme-directory-list .image-container-medal {
    position: absolute;
    right: -0.2rem;
    bottom: -0.2rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #f5c451 0%, #d4a017 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    box-shadow: 0 0.15rem 0.4rem rgba(212, 160, 23, 0.45);
}
.sigme-directory-list .image-container-medal .material-symbols-outlined {
    font-size: 1rem;
}

/* Header del card */
.sigme-directory-list .sigme-period-head {
    border-bottom: 1px solid #eef2f7;
}

/* =====================================================
   Directorio · responsive de chips (móvil / dispositivos)
   -----------------------------------------------------
   En pantallas angostas la fila es un grid rígido y la columna de estado (auto)
   crecía con el chip "En proceso · proceso — situación", cuyo texto es nowrap: se
   desbordaba o distorsionaba. Aquí, ≤900px:
     · la fila se reordena para que los chips de estado bajen a su propia línea,
       se alineen a la izquierda y su texto pueda envolver;
     · las celdas vacías (fecha/monto) se ocultan;
     · el encabezado apila el bloque de chips debajo del nombre.
   ===================================================== */
@media (max-width: 900px) {
    .sigme-directory-list .sigme-row {
        grid-template-columns: 1.6rem 0.25rem 1fr 1.6rem;
        grid-template-areas:
            "check side name toggle"
            "status status status status";
        row-gap: 0.4rem;
    }
    .sigme-directory-list .sigme-row-check  { grid-area: check; }
    .sigme-directory-list .sigme-row-side   { grid-area: side; }
    .sigme-directory-list .sigme-row-name   { grid-area: name; }
    .sigme-directory-list .sigme-row-toggle { grid-area: toggle; }
    .sigme-directory-list .sigme-row-status { grid-area: status; }

    /* En el directorio estas celdas van vacías: se ocultan para ganar ancho. */
    .sigme-directory-list .sigme-row-cell--date,
    .sigme-directory-list .sigme-row-amount { display: none; }

    /* Los chips ocupan toda la línea, a la izquierda, y su texto puede envolver
       (los nombres de proceso son largos). */
    .sigme-directory-list .sigme-row-status {
        justify-content: flex-start !important;
    }
    .sigme-directory-list .sigme-row-status .sigme-hist-chip {
        white-space: normal;
        text-align: left;
        max-width: 100%;
        border-radius: 0.6rem;
    }

    /* Encabezado: el nombre arriba y el bloque de chips debajo, a la izquierda,
       para que no se amontonen ni se corten a la derecha. */
    .sigme-directory-list .sigme-period-head {
        flex-direction: column;
        align-items: stretch;
    }
    .sigme-directory-list .sigme-period-head-aside {
        justify-content: flex-start !important;
    }
}

/* =====================================================
   Directorio · desktop (>900px): aire para nombres largos
   -----------------------------------------------------
   En escritorio la fila seguía siendo un grid rígido con dos columnas vacías
   (date/amount) y el chip "proceso — situación" (nowrap) estiraba la columna de
   estado, amontonando el nombre. En la cabecera, un nombre largo apretaba los
   chips de presencia (En línea / pantalla / sesión). Aquí:
     · se ocultan las celdas vacías del directorio (también en desktop) para dar
       ese ancho al nombre,
     · la cabecera envuelve: con nombre largo, los chips bajan a su propia línea.
   El chip "proceso — situación" se deja en una sola línea (como estaba).
   ===================================================== */

/* Celdas vacías del directorio: nunca ocupan grid (en cualquier ancho). */
.sigme-directory-list .sigme-row-cell--date,
.sigme-directory-list .sigme-row-amount { display: none; }

@media (min-width: 901px) {
    /* Sin las 2 columnas vacías: el nombre toma el espacio (1fr) y el estado se
       ajusta a su contenido (el chip proceso — situación queda en una sola línea). */
    .sigme-directory-list .sigme-row {
        grid-template-columns: 2rem 0.3rem minmax(0, 1fr) minmax(0, auto) 1.8rem;
    }

    /* Cabecera: si el nombre es largo, los chips de presencia bajan a su propia
       línea (alineados a la derecha) en vez de amontonarse contra el nombre. */
    .sigme-directory-list .sigme-period-head {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }
    .sigme-directory-list .sigme-period-head > div:first-child {
        flex: 1 1 22rem !important;   /* base legible para el nombre; empuja el aside a envolver */
    }
    .sigme-directory-list .sigme-period-head-aside {
        flex-wrap: wrap;
        justify-content: flex-end;
        margin-left: auto;
        max-width: 100%;
    }
    /* Un chip largo de presencia (sesión) envuelve en vez de desbordar el card. */
    .sigme-directory-list .sigme-period-head-aside .sigme-hist-chip {
        white-space: normal;
        max-width: 100%;
    }
}

/* =====================================================
   Directorio · fila de especialidad en ancho MEDIO (901–1200px)
   -----------------------------------------------------
   En escritorio la fila deja el nombre (1fr) y el estado (auto) en la misma
   línea. Pero el estado ahora trae 3 chips (validez + proceso + situación),
   que en anchos medios aprietan el nombre y su vigencia. En este rango la fila
   apila los chips de estado debajo del nombre (mismo patrón que ≤900px), para
   que el nombre + vigencia respiren y los chips envuelvan a la izquierda.
   La cabecera (period-head) conserva su comportamiento de escritorio.
   ===================================================== */
@media (min-width: 901px) and (max-width: 1200px) {
    .sigme-directory-list .sigme-row {
        grid-template-columns: 2rem 0.3rem 1fr 1.8rem;
        grid-template-areas:
            "check side name toggle"
            "status status status status";
        row-gap: 0.4rem;
    }
    .sigme-directory-list .sigme-row-check  { grid-area: check; }
    .sigme-directory-list .sigme-row-side   { grid-area: side; }
    .sigme-directory-list .sigme-row-name   { grid-area: name; }
    .sigme-directory-list .sigme-row-toggle { grid-area: toggle; }
    .sigme-directory-list .sigme-row-status { grid-area: status; }

    /* Chips a la izquierda, en su propia línea, con texto que puede envolver. */
    .sigme-directory-list .sigme-row-status {
        justify-content: flex-start !important;
    }
    .sigme-directory-list .sigme-row-status .sigme-hist-chip {
        white-space: normal;
        text-align: left;
        max-width: 100%;
    }
}

/* Etiquetas de detalle pequeñas */
.sigme-directory-list .sigme-row-detail-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 0.15rem;
}

/* Filas de especialidades dentro del card */
.sigme-directory-list .sigme-row {
    transition: background 0.15s;
}
.sigme-directory-list .sigme-row:hover {
    background: #f8fafc;
}
.sigme-directory-list .sigme-row.is-open {
    background: linear-gradient(135deg, rgba(26, 60, 110, 0.05) 0%, rgba(46, 92, 158, 0.02) 100%);
    border-left: 3px solid #2e5c9e;
}
.sigme-directory-list .sigme-row--valido .sigme-row-side    { background: #16a34a; }
.sigme-directory-list .sigme-row--pendiente .sigme-row-side { background: #f59e0b; }
.sigme-directory-list .sigme-row--invalido .sigme-row-side  { background: #94a3b8; }

.sigme-directory-list .sigme-row-name {
    color: #1a3c6e;
    font-weight: 600;
}
.sigme-directory-list .sigme-row-name small {
    color: #64748b;
    font-weight: 500;
}

.sigme-directory-list .sigme-row-toggle {
    color: #2e5c9e;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.35rem;
    transition: all 0.15s;
}
.sigme-directory-list .sigme-row-toggle:hover {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    border-color: #1a3c6e;
}

/* Bandas verticales "ACTIVA" / "HISTÓRICO" — override navy */
.sigme-directory-list .sigme-row-detail > div[style*="writing-mode"] {
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%) !important;
}
/* Para histórico mantenemos el color contextual del inline style */

/* Grid de detalle de la solicitud activa */
.sigme-directory-list .sigme-row-detail-grid > div b {
    color: #1a3c6e;
    font-weight: 700;
}

/* Fondo de detalle expandido del card del médico (resaltar tab activa) */
.sigme-directory-list .sigme-row-detail [style*="background:var(--hover-light-blue)"],
.sigme-directory-list .sigme-row-detail [style*="background: var(--hover-light-blue)"] {
    background: linear-gradient(135deg, rgba(26, 60, 110, 0.06) 0%, rgba(46, 92, 158, 0.02) 100%) !important;
    border: 1px solid rgba(46, 92, 158, 0.18);
}

/* Línea de resumen del expediente (Ver detalle) */
.sigme-directory-list .btn-text-blue {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    color: #1a3c6e !important;
    border: 1px solid #c7d2fe;
    border-radius: 0.4rem;
    font-weight: 600;
    transition: all 0.15s;
}
.sigme-directory-list .btn-text-blue:hover {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff !important;
    border-color: #1a3c6e;
    text-decoration: none;
    box-shadow: 0 0.2rem 0.45rem rgba(26, 60, 110, 0.3);
}

/* Sección "Tel particular", "Celular", etc. — chips de identidad */
.sigme-directory-list .sigme-period-content > div[style*="grid-template-columns:repeat(auto-fit"] > div {
    padding: 0.4rem 0.55rem;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    border-radius: 0.4rem;
    min-width: 0;
}

/* Empty state del listado */
.sigme-directory-list .empty-table-container {
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 0.75rem;
    padding: 3rem 1rem;
    text-align: center;
    color: #64748b;
}
.sigme-directory-list .empty-table-container > .material-symbols-outlined {
    font-size: 3rem;
    color: #cbd5e1;
}
.sigme-directory-list .empty-table-container h5 {
    color: #1a3c6e;
    font-weight: 700;
    margin: 0.5rem 0 0.2rem;
}
.sigme-directory-list .empty-table-container h6 {
    color: #94a3b8;
    font-weight: 500;
    font-size: 0.85rem;
}


/* =====================================================================
   Detalle expandido por especialidad — bloques ACTIVA / HISTÓRICO
   Diseño con jerarquía clara: tag + chip arriba, campos como mini-cards
   con etiqueta sobre valor (label/value), tinte por estado.
   ---------------------------------------------------------------------
   Componente que usa estos estilos:
   - resources/js/components/directorio/ListComponent.vue
       (Tarjeta del médico → fila de especialidad expandida)
   ===================================================================== */
.dir-esp-block {
    position: relative;
    border-radius: 0.9rem;
    padding: 0.9rem 1rem 1rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 0.15rem 0.5rem rgba(15, 23, 42, 0.05);
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 60%);
    border: 1px solid rgba(226, 232, 240, 0.85);
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.dir-esp-block:last-child { margin-bottom: 0; }
.dir-esp-block:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.4rem 1rem rgba(15, 23, 42, 0.1);
}

/* Header: tag + chip de situación */
.dir-esp-block__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    padding-bottom: 0.65rem;
    margin-bottom: 0.85rem;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.4);
    flex-wrap: wrap;
}
.dir-esp-block__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #1a3c6e;
    letter-spacing: 0.02em;
}
.dir-esp-block__tag .material-symbols-outlined {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem !important;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.25);
}

.dir-esp-block__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.8rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    box-shadow: 0 0.1rem 0.3rem rgba(15, 23, 42, 0.06);
    line-height: 1.2;
}
.dir-esp-block__chip--info {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1a3c6e;
    border-color: #93c5fd;
}
.dir-esp-block__chip--ok {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #14532d;
    border-color: #86efac;
}
.dir-esp-block__chip--warn {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #78350f;
    border-color: #fcd34d;
}
.dir-esp-block__chip--neutral {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}

.dir-esp-block__body { padding: 0; }

/* Grid de campos: simple, label + valor fluyendo sin mini-cards */
.dir-esp-block__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 0.65rem 1.25rem;
}

.dir-esp-block__field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.dir-esp-block__field--wide {
    grid-column: span 2;
}
.dir-esp-block__field--full {
    grid-column: 1 / -1;
}

/* ── Lista de revisores en el directorio ─────────────────────────────── */
/* Una sola línea por revisor: #num, nombre, email, chip y datos en flujo.
   Permite wrap solo si el viewport es muy estrecho. Sin acentos de color para
   integrarse con el aspecto neutro del .dir-esp-block que la contiene. */
.dir-rev-grid {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.3rem;
    width: 100%;
}
.dir-rev {
    width: 100%;
    border: 1px solid rgba(226, 232, 240, 0.85);
    border-radius: 0.5rem;
    padding: 0.55rem 0.8rem;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 60%);
    display: flex; align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.85rem;
    font-size: 0.76rem;
    line-height: 1.3;
}
.dir-rev__num {
    background: #f1f5f9; color: #475569;
    font-size: 0.65rem; font-weight: 700;
    padding: 0.12rem 0.45rem; border-radius: 0.3rem;
    min-width: 1.6rem; text-align: center; flex-shrink: 0;
}
.dir-rev__name {
    margin: 0;
    font-weight: 700; font-size: 0.85rem;
    color: #1a3c6e;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
}
.dir-rev__email {
    display: inline-flex; align-items: center; gap: 0.3rem;
    color: #64748b;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 18rem;
}
.dir-rev__email .material-symbols-outlined {
    color: #94a3b8; font-size: 0.9rem; flex-shrink: 0;
}
/* Indicador de verificación del correo institucional del revisor */
.dir-rev__email .dir-rev__verif.is-ok { color: #16a34a; }
.dir-rev__email .dir-rev__verif.is-pending { color: #d4a700; }
.dir-rev__chip {
    display: inline-flex; align-items: center; gap: 0.22rem;
    padding: 0.15rem 0.55rem; border-radius: 999px;
    font-size: 0.64rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    border: 1px solid #cbd5e1;
    background: #f1f5f9;
    color: #475569;
    flex-shrink: 0;
}
.dir-rev__chip .material-symbols-outlined { font-size: 0.85rem }
.dir-rev__chip--ok   { color: #166534 }
.dir-rev__chip--warn { color: #92400e }

/* Cada dato (Tipo, Asignado, Veredicto) como item inline en la misma fila */
.dir-rev__item {
    display: inline-flex; align-items: center; gap: 0.3rem;
    color: #475569;
    white-space: nowrap;
}
.dir-rev__item > .material-symbols-outlined {
    color: #94a3b8; font-size: 0.95rem; flex-shrink: 0;
}
.dir-rev__item b { color: #1e293b; font-weight: 600; }
.dir-rev__item--muted { color: #94a3b8; font-style: italic; }
.dir-rev__item--muted > .material-symbols-outlined { color: #94a3b8 }

.dir-esp-block__label {
    font-size: 0.62rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
    display: block;
}
.dir-esp-block__field b {
    font-size: 0.86rem;
    color: #1a3c6e;
    font-weight: 700;
    line-height: 1.35;
    word-break: break-word;
}
.dir-esp-block__field small {
    margin-top: 0.15rem;
    font-size: 0.7rem;
    color: #64748b;
    line-height: 1.3;
    display: block;
}

/* Fila inline (ej. fecha inicio · al · fecha fin) — todo en una sola línea */
.dir-esp-block__value-row {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.dir-esp-block__value-row b {
    font-size: 0.86rem;
    color: #1a3c6e;
    font-weight: 700;
    line-height: 1.35;
}
.dir-esp-block__value-row small {
    margin-top: 0;
    display: inline;
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 500;
}

/* Variantes por estado: tinte del fondo del bloque */
.dir-esp-block--activa {
    background:
        radial-gradient(circle at 100% 0%, rgba(46, 92, 158, 0.14) 0%, rgba(46, 92, 158, 0) 50%),
        linear-gradient(135deg, #eef4ff 0%, #ffffff 60%);
    border-color: rgba(46, 92, 158, 0.25);
}

.dir-esp-block--historico-ok {
    background:
        radial-gradient(circle at 100% 0%, rgba(22, 163, 74, 0.14) 0%, rgba(22, 163, 74, 0) 50%),
        linear-gradient(135deg, #f0fdf4 0%, #ffffff 60%);
    border-color: rgba(22, 163, 74, 0.25);
}
.dir-esp-block--historico-ok .dir-esp-block__tag .material-symbols-outlined {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    box-shadow: 0 0.15rem 0.4rem rgba(22, 101, 52, 0.25);
}
.dir-esp-block--historico-ok .dir-esp-block__tag { color: #14532d; }

.dir-esp-block--historico-warn {
    background:
        radial-gradient(circle at 100% 0%, rgba(217, 119, 6, 0.14) 0%, rgba(217, 119, 6, 0) 50%),
        linear-gradient(135deg, #fffbeb 0%, #ffffff 60%);
    border-color: rgba(217, 119, 6, 0.25);
}
.dir-esp-block--historico-warn .dir-esp-block__tag .material-symbols-outlined {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 0.15rem 0.4rem rgba(180, 83, 9, 0.25);
}
.dir-esp-block--historico-warn .dir-esp-block__tag { color: #78350f; }

.dir-esp-block--historico-neutral {
    background:
        radial-gradient(circle at 100% 0%, rgba(100, 116, 139, 0.12) 0%, rgba(100, 116, 139, 0) 50%),
        linear-gradient(135deg, #f8fafc 0%, #ffffff 60%);
    border-color: rgba(100, 116, 139, 0.2);
}
.dir-esp-block--historico-neutral .dir-esp-block__tag .material-symbols-outlined {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    box-shadow: 0 0.15rem 0.4rem rgba(71, 85, 105, 0.2);
}
.dir-esp-block--historico-neutral .dir-esp-block__tag { color: #475569; }

@media (max-width: 700px) {
    .dir-esp-block__field--wide { grid-column: span 1; }
    .dir-esp-block { padding: 0.8rem 0.85rem 0.9rem; }
    .dir-esp-block__head { padding-bottom: 0.55rem; margin-bottom: 0.7rem; }
}


/* =====================================================================
   Avance del expediente del médico — anillo de progreso + grid de secciones
   ---------------------------------------------------------------------
   Componente que usa estos estilos:
   - resources/js/components/directorio/ListComponent.vue
       (Card del médico → línea resumen y vista expandida del expediente)
   ===================================================================== */
.dir-exp-progress {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px dashed rgba(148, 163, 184, 0.4);
}

.dir-exp-progress__summary {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
}

/* Anillo de progreso (conic-gradient) */
.dir-exp-progress__ring {
    --pct: 0%;
    --ring-color: #94a3b8;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    background:
        conic-gradient(var(--ring-color) var(--pct), #e2e8f0 0%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 0.15rem 0.4rem rgba(15, 23, 42, 0.08);
}
.dir-exp-progress__ring::before {
    content: '';
    position: absolute;
    inset: 0.35rem;
    background: #ffffff;
    border-radius: 50%;
}
.dir-exp-progress__ring-value {
    position: relative;
    font-size: 0.85rem;
    font-weight: 800;
    color: #1a3c6e;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
}
.dir-exp-progress__ring-value small {
    font-size: 0.55rem;
    margin-left: 0.05rem;
    color: #64748b;
    font-weight: 700;
}

/* Info al lado del anillo */
.dir-exp-progress__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.dir-exp-progress__title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #1a3c6e;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.dir-exp-progress__title .material-symbols-outlined {
    font-size: 1.05rem;
    color: #2e5c9e;
}
.dir-exp-progress__meta {
    margin: 0;
    font-size: 0.82rem;
    color: #475569;
}
.dir-exp-progress__meta b {
    color: #1a3c6e;
    font-weight: 700;
}

/* Barra horizontal complementaria (visual lleno + degradado) */
.dir-exp-progress__bar {
    width: 100%;
    height: 0.4rem;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 0.2rem;
}
.dir-exp-progress__bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s ease;
}

/* Botón "Ver detalle" */
.dir-exp-progress__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.85rem;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    color: #1a3c6e;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.dir-exp-progress__toggle:hover {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    border-color: #1a3c6e;
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.45rem rgba(26, 60, 110, 0.3);
}
.dir-exp-progress__toggle .material-symbols-outlined { font-size: 1.05rem; }

/* Grid de secciones (vista expandida) */
.dir-exp-progress__sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 0.55rem;
    margin-top: 0.9rem;
}

.dir-exp-section {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.8rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #cbd5e1;
    border-radius: 0.55rem;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s, background 0.15s;
}
.dir-exp-section.is-clickable {
    cursor: pointer;
    user-select: none;
}
.dir-exp-section.is-clickable:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.3rem 0.75rem rgba(26, 60, 110, 0.15);
    border-color: rgba(46, 92, 158, 0.4);
}
.dir-exp-section:not(.is-clickable):hover {
    transform: translateY(-1px);
    box-shadow: 0 0.25rem 0.6rem rgba(15, 23, 42, 0.08);
}

/* Indicador de "ir a la sección" (chevron) — aparece solo si es clickable */
.dir-exp-section__go {
    font-size: 1.3rem !important;
    color: #cbd5e1;
    flex-shrink: 0;
    transition: color 0.15s, transform 0.15s;
}
.dir-exp-section.is-clickable:hover .dir-exp-section__go {
    color: #1a3c6e;
    transform: translateX(0.2rem);
}
.dir-exp-section.is-ok      { border-left-color: #16a34a; background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 60%); }
.dir-exp-section.is-pending { border-left-color: #dc2626; background: linear-gradient(135deg, #fef2f2 0%, #ffffff 60%); }

.dir-exp-section__icon {
    font-size: 1.5rem !important;
    flex-shrink: 0;
}
.dir-exp-section.is-ok      .dir-exp-section__icon { color: #16a34a; }
.dir-exp-section.is-pending .dir-exp-section__icon { color: #dc2626; }

.dir-exp-section__body {
    flex: 1;
    min-width: 0;
}
.dir-exp-section__name {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: #1a3c6e;
    line-height: 1.25;
}
.dir-exp-section__detail {
    margin: 0.15rem 0 0;
    font-size: 0.74rem;
    color: #64748b;
    line-height: 1.35;
}

.dir-exp-section__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid transparent;
    flex-shrink: 0;
}
.dir-exp-section__chip.is-ok {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #14532d;
    border-color: #86efac;
}
.dir-exp-section__chip.is-pending {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border-color: #fca5a5;
}

@media (max-width: 700px) {
    .dir-exp-progress__summary { flex-direction: column; align-items: stretch; }
    .dir-exp-progress__ring { align-self: center; }
    .dir-exp-progress__toggle { align-self: stretch; justify-content: center; }
}

/* =====================================================================
   Estilo "Principal" — card destacada con el color principal de la app
   (azul marino #1a3c6e → #2e5c9e)
   ---------------------------------------------------------------------
   Componentes que usan estos estilos:
   - resources/js/components/expediente/hospital/HospitalComponent.vue
       (Mi expediente → Hospital privado)
   - resources/js/components/expediente/institucion/InstitutionComponent.vue
       (Mi expediente → Institución pública)
   - resources/js/components/expediente/especialidades/MySpecialtiesComponent.vue
       (Mi expediente → Especialidades)
   ===================================================================== */
.ms-list-card.is-principal{
    border-left: 4px solid #1a3c6e !important;
    background: linear-gradient(135deg, #eaf1fb 0%, #ffffff 60%) !important;
    box-shadow: 0 0.2rem 0.6rem rgba(26, 60, 110, 0.12);
}
.ms-list-card.is-principal .ms-list-card__icon{
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%) !important;
    color: #ffffff !important;
}
.ms-list-card.is-principal .ms-list-card__title b{
    color: #1a3c6e;
}
/* Chip "Principal" (sustituye la variante dorada cuando el item está marcado) */
.ms-list-card.is-principal .ms-list-card__chip--gold{
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%) !important;
    color: #ffffff !important;
    border: 1px solid #1a3c6e;
}
.ms-list-card.is-principal .ms-list-card__chip--gold .material-symbols-outlined{
    color: #fde68a;
}


/* =====================================================================
   HUB DE ESPECIALIDADES — Hero + Stats + Filtros + Cards completas
   Conserva el contenido completo (universidad, sede, solicitud activa,
   historial) dentro de cada card, con el hero azul marino arriba.
   ---------------------------------------------------------------------
   Componente que usa estos estilos:
   - resources/js/components/expediente/especialidades/MySpecialtiesComponent.vue
       (Mi expediente → Mis especialidades, vista del médico)
   ===================================================================== */
.ms-hub {
    padding: 1rem 1.2rem 2rem;
    background: #f5f7fb;
    min-height: 100%;
}
.ms-hub *, .ms-hub *::before, .ms-hub *::after { box-sizing: border-box; }

/* ─── HERO con banda azul marino ─── */
.ms-hub__hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    border-radius: 0.85rem;
    padding: 1rem 1.4rem;
    box-shadow: 0 0.4rem 1rem rgba(26, 60, 110, 0.18);
    margin-bottom: 0.9rem;
    position: relative;
    overflow: hidden;
}
.ms-hub__hero::before {
    content: '';
    position: absolute;
    top: -50%; right: -10%;
    width: 22rem; height: 22rem;
    background: radial-gradient(circle, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}
.ms-hub__hero-main {
    display: flex; align-items: center; gap: 0.85rem;
    min-width: 0;
    z-index: 1;
}
.ms-hub__hero-icon {
    font-size: 2.4rem;
    color: rgba(255,255,255,0.85);
    flex-shrink: 0;
}
.ms-hub__title {
    font-size: 1.4rem; font-weight: 800;
    color: #ffffff;
    margin: 0 0 0.15rem 0;
    line-height: 1.1;
}
.ms-hub__sub {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.35;
}
.ms-hub__add-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: linear-gradient(135deg, #fde9a8 0%, #f5c451 100%);
    color: #6b4f00;
    border: 1px solid rgba(212, 160, 23, 0.45);
    border-radius: 0.55rem;
    padding: 0.55rem 1rem;
    font-weight: 700; font-size: 0.88rem;
    cursor: pointer;
    box-shadow: 0 0.2rem 0.5rem rgba(212, 160, 23, 0.3);
    transition: transform 0.15s, box-shadow 0.15s;
    z-index: 1;
}
.ms-hub__add-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.35rem 0.85rem rgba(212, 160, 23, 0.45);
}
.ms-hub__add-btn .material-symbols-outlined { font-size: 1.05rem; }

/* ─── Stats horizontales (pills) ─── */
.ms-hub__stats {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    margin-bottom: 0.85rem;
}
.ms-hub__stat {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 0.45rem 0.85rem 0.45rem 0.65rem;
    box-shadow: 0 0.1rem 0.35rem rgba(15, 23, 42, 0.06);
}
.ms-hub__stat .ms-hub__stat-ico {
    width: 1.8rem; height: 1.8rem;
    border-radius: 50%;
    background: #eef2f7; color: #1a3c6e;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem !important;
}
.ms-hub__stat b {
    font-size: 1.05rem; font-weight: 800;
    color: #0f172a; line-height: 1;
}
.ms-hub__stat small {
    font-size: 0.72rem; color: #64748b;
    text-transform: uppercase; letter-spacing: 0.04em;
    font-weight: 600;
}
.ms-hub__stat--ok    .ms-hub__stat-ico { background: #dcfce7; color: #166534; }
.ms-hub__stat--info  .ms-hub__stat-ico { background: #dbeafe; color: #1e40af; }
.ms-hub__stat--warn  .ms-hub__stat-ico { background: #fef3c7; color: #92400e; }

/* ─── Filtros segment ─── */
.ms-hub__filters {
    display: flex; gap: 0.4rem; flex-wrap: wrap;
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 0.4rem;
    box-shadow: 0 0.1rem 0.35rem rgba(15, 23, 42, 0.05);
    margin-bottom: 1rem;
    position: sticky;
    top: 0.25rem;
    z-index: 4;
}
.ms-hub__filter {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    color: #64748b;
    font-weight: 600; font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s;
}
.ms-hub__filter:hover {
    background: #f1f5f9;
    color: #1a3c6e;
}
.ms-hub__filter.is-active {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    box-shadow: 0 0.2rem 0.5rem rgba(26, 60, 110, 0.25);
}
.ms-hub__filter .material-symbols-outlined { font-size: 1.05rem; }
.ms-hub__filter-count {
    background: rgba(255, 255, 255, 0.25);
    color: inherit;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem; font-weight: 700;
}
.ms-hub__filter:not(.is-active) .ms-hub__filter-count {
    background: #eef2f7;
    color: #475569;
}

/* ─── Listado de cards con contenido completo (1 columna) ─── */
.ms-hub__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.ms-hub__card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1rem 1.1rem 1rem;
    display: flex; flex-direction: column;
    gap: 0.85rem;
    box-shadow: 0 0.15rem 0.4rem rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

.ms-hub__card-strip {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1a3c6e 0%, #2e5c9e 100%);
}
.ms-hub__card.ms-card--ok      .ms-hub__card-strip { background: linear-gradient(90deg, #15803d 0%, #16a34a 100%); }
.ms-hub__card.ms-card--info    .ms-hub__card-strip { background: linear-gradient(90deg, #1a3c6e 0%, #2e5c9e 100%); }
.ms-hub__card.ms-card--warn    .ms-hub__card-strip { background: linear-gradient(90deg, #b45309 0%, #f59e0b 100%); }
.ms-hub__card.ms-card--neutral .ms-hub__card-strip { background: linear-gradient(90deg, #94a3b8 0%, #cbd5e1 100%); }

/* Header de la card */
.ms-hub__card-head {
    display: flex; align-items: center;
    gap: 0.65rem;
    padding-top: 0.25rem;
    flex-wrap: wrap;
}
.ms-hub__card-icon {
    width: 2.6rem; height: 2.6rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    border-radius: 0.55rem;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0.2rem 0.5rem rgba(26, 60, 110, 0.2);
}
.ms-hub__card-icon .material-symbols-outlined { font-size: 1.5rem; }

.ms-hub__card-title {
    flex: 1;
    min-width: 12rem;
}
.ms-hub__card-title h3 {
    margin: 0 0 0.15rem 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a3c6e;
    line-height: 1.2;
    word-break: break-word;
}
.ms-hub__card-sub {
    margin: 0;
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.3;
}

/* Empty del hub */
.ms-hub .ms-empty {
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 0.75rem;
    padding: 2.5rem 1rem;
    text-align: center;
    color: #64748b;
}
.ms-hub .ms-empty > .material-symbols-outlined {
    font-size: 2.8rem;
    color: #cbd5e1;
}
.ms-hub .ms-empty h3 {
    margin: 0.5rem 0 0.2rem;
    font-size: 1rem;
    color: #475569;
    font-weight: 700;
}
.ms-hub .ms-empty p {
    margin: 0;
    font-size: 0.85rem;
    color: #94a3b8;
}

/* Responsive */
@media (max-width: 900px) {
    .ms-hub__hero { flex-direction: column; align-items: flex-start; }
    .ms-hub__add-btn { width: 100%; justify-content: center; }
    .ms-hub__card-head { gap: 0.5rem; }
}


/* =====================================================================
   ESPECIALIDADES DEL MÉDICO — Vista admin (History Specialties)
   Layout: chips horizontales arriba + workspace con header sticky,
   panel colapsable de datos académicos, tabs y contenido.
   Paleta principal: azul marino (#1a3c6e → #2e5c9e).
   ---------------------------------------------------------------------
   Componente que usa estos estilos:
   - resources/js/components/expediente/especialidades/HistorySpecialtiesComponent.vue
       (Directorio → Expediente del médico → tab Especialidades)
   ===================================================================== */
.hs-shell {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    background: #f5f7fb;
    min-height: 100%;
    box-sizing: border-box;
}
.hs-shell *, .hs-shell *::before, .hs-shell *::after { box-sizing: border-box; }

/* ─── Barra horizontal de chips: selector de especialidades ─── */
.hs-tabs {
    display: flex;
    gap: 0.45rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.7rem;
    padding: 0.4rem;
    overflow-x: auto;
    overflow-y: hidden;
    box-shadow: 0 0.1rem 0.35rem rgba(15, 23, 42, 0.05);
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    flex-shrink: 0;
}
.hs-tabs::-webkit-scrollbar { height: 0.35rem; }
.hs-tabs::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.hs-tabs::-webkit-scrollbar-track { background: transparent; }

.hs-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
    padding: 0.5rem 0.85rem 0.5rem 0.7rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.18s ease;
}
.hs-tab:hover {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #1a3c6e;
}
.hs-tab.is-active {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    border-color: #1a3c6e;
    color: #ffffff;
    box-shadow: 0 0.2rem 0.55rem rgba(26, 60, 110, 0.3);
}
.hs-tab__icon {
    font-size: 1.1rem !important;
    color: inherit;
}
.hs-tab.is-active .hs-tab__icon { color: rgba(255,255,255,0.85); }
.hs-tab__name { line-height: 1; }

.hs-tab__dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #cbd5e1;
    flex-shrink: 0;
    box-shadow: 0 0 0 0.15rem rgba(255,255,255,0.6);
}
.hs-tab.is-active .hs-tab__dot { box-shadow: 0 0 0 0.15rem rgba(255,255,255,0.45); }
.hs-tab__dot--ok      { background: #16a34a; }
.hs-tab__dot--info    { background: #2e5c9e; }
.hs-tab__dot--warn    { background: #f59e0b; }
.hs-tab__dot--neutral { background: #cbd5e1; }
.hs-tab.is-active .hs-tab__dot--info { background: #fde68a; }

.hs-tab--add {
    background: linear-gradient(135deg, #fde9a8 0%, #f5c451 100%);
    color: #6b4f00;
    border-color: #f5c451;
}
.hs-tab--add:hover {
    background: linear-gradient(135deg, #f5c451 0%, #d4a017 100%);
    color: #3b2a00;
    box-shadow: 0 0.2rem 0.55rem rgba(212, 160, 23, 0.35);
}
/* Tab "Agregar" deshabilitado cuando ya no quedan especialidades por registrar. */
.hs-tab--add.is-disabled,
.hs-tab--add.is-disabled:hover {
    background: #e2e8f0;
    color: #94a3b8;
    border-color: #cbd5e1;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.75;
}
.hs-tab--add.is-disabled .hs-tab__name { font-style: italic; }

/* Tab "eliminada" — solo visible para CS_SUDO. Estilo claramente distinto
   (fondo rojo claro, texto tachado y badge "Eliminada") para que se
   identifique sin necesidad de entrar a la especialidad. */
.hs-tab.is-deleted {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
    box-shadow: inset 0 0 0 1px #fca5a5;
}
.hs-tab.is-deleted:hover {
    background: #fee2e2;
    color: #7f1d1d;
}
.hs-tab.is-deleted .hs-tab__icon { color: #b91c1c; }
.hs-tab.is-deleted .hs-tab__name {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgba(185, 28, 28, 0.55);
}
.hs-tab.is-deleted.is-active {
    background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
    color: #ffffff;
    border-color: #991b1b;
}
.hs-tab.is-deleted.is-active .hs-tab__icon,
.hs-tab.is-deleted.is-active .hs-tab__name { color: #ffffff; }
.hs-tab.is-deleted.is-active .hs-tab__name { text-decoration-color: rgba(255, 255, 255, 0.7); }

/* Badge "Eliminada" en el tab */
.hs-tab__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    background: #b91c1c;
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.3;
    margin-left: 0.15rem;
}
.hs-tab.is-deleted.is-active .hs-tab__badge {
    background: #ffffff;
    color: #b91c1c;
}

/* ─── Workspace de la especialidad seleccionada ─── */
.hs-workspace-wrap { display: contents; }
.hs-workspace {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* HEADER del workspace */
.hs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    border-radius: 0.7rem;
    padding: 0.85rem 1rem;
    box-shadow: 0 0.25rem 0.7rem rgba(26, 60, 110, 0.18);
    position: relative;
    overflow: hidden;
    flex-wrap: wrap;
}
.hs-header::before {
    content: '';
    position: absolute;
    top: -50%; right: -10%;
    width: 20rem; height: 20rem;
    background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}
.hs-header__title {
    display: flex; align-items: center; gap: 0.7rem;
    min-width: 0; z-index: 1; flex: 1;
}
.hs-header__icon {
    width: 2.4rem; height: 2.4rem;
    border-radius: 0.5rem;
    background: rgba(255,255,255,0.18);
    color: #ffffff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem !important;
    flex-shrink: 0;
}
.hs-header__name { min-width: 0; }
.hs-header__name h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    word-break: break-word;
}
.hs-header__name p {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.85);
}
.hs-header__name p b { color: #fde68a; font-weight: 700; }

.hs-header__actions {
    display: flex; align-items: center; gap: 0.4rem;
    flex-wrap: wrap;
    z-index: 1;
}

/* Banner que aparece sobre el workspace cuando la especialidad está
   eliminada (situacion=0). Solo CS_SUDO la ve. */
.hs-deleted-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin: 0.9rem 1.1rem 0;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #fecaca;
    border-left: 4px solid #b91c1c;
    border-radius: 0.55rem;
    color: #7f1d1d;
}
.hs-deleted-banner__main {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    flex: 1 1 auto;
    min-width: 0;
}
.hs-deleted-banner__icon {
    font-size: 1.7rem !important;
    color: #b91c1c;
    flex-shrink: 0;
    margin-top: 0.05rem;
}
.hs-deleted-banner__text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.hs-deleted-banner__text b {
    font-size: 0.95rem;
    color: #7f1d1d;
    font-weight: 700;
    line-height: 1.3;
}
.hs-deleted-banner__text small {
    font-size: 0.82rem;
    color: #991b1b;
    line-height: 1.4;
}
.hs-deleted-banner__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 1rem;
    background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
    color: #ffffff;
    border: 1px solid #15803d;
    border-radius: 0.45rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
    white-space: nowrap;
    box-shadow: 0 0.15rem 0.4rem rgba(22, 101, 52, 0.22);
}
.hs-deleted-banner__btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 0.25rem 0.55rem rgba(22, 101, 52, 0.3);
}
.hs-deleted-banner__btn .material-symbols-outlined { font-size: 1.1rem; }

@media (max-width: 600px) {
    .hs-deleted-banner { flex-direction: column; align-items: stretch; }
    .hs-deleted-banner__btn { width: 100%; justify-content: center; }
}

.hs-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    border-radius: 0.45rem;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.12);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
    backdrop-filter: blur(4px);
}
.hs-btn .material-symbols-outlined { font-size: 1.05rem; }
.hs-btn:hover {
    background: rgba(255,255,255,0.25);
    transform: translateY(-1px);
}
.hs-btn--primary {
    background: #ffffff;
    color: #1a3c6e;
    border-color: #ffffff;
}
.hs-btn--primary:hover {
    background: #fde68a;
    color: #6b4f00;
    box-shadow: 0 0.25rem 0.6rem rgba(212,160,23,0.3);
}
.hs-btn--danger {
    background: rgba(220, 38, 38, 0.85);
    color: #ffffff;
    border-color: rgba(220, 38, 38, 0.95);
}
.hs-btn--danger:hover {
    background: #dc2626;
    color: #ffffff;
    box-shadow: 0 0.25rem 0.6rem rgba(220, 38, 38, 0.4);
}
/* Variante "asignar coordinador" — tonos teal/violeta para diferenciarse */
.hs-btn--coord {
    background: rgba(94, 53, 177, 0.85);
    color: #ffffff;
    border-color: rgba(94, 53, 177, 0.95);
}
.hs-btn--coord:hover {
    background: #5e35b1;
    color: #ffffff;
    box-shadow: 0 0.25rem 0.6rem rgba(94, 53, 177, 0.4);
}

/* ─── Panel de detalles (universidad + institución) ─── */
.hs-detail {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.7rem;
    padding: 0.9rem 1rem;
    box-shadow: 0 0.15rem 0.4rem rgba(15, 23, 42, 0.05);
}
.hs-detail *, .hs-detail *::before, .hs-detail *::after { box-sizing: border-box; }

.hs-detail__meta {
    display: flex; flex-wrap: wrap;
    gap: 0.5rem 1.2rem;
    padding-bottom: 0.7rem;
    margin-bottom: 0.85rem;
    border-bottom: 1px dashed #e2e8f0;
}
.hs-detail__meta-item {
    display: inline-flex; align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #1e293b;
}
.hs-detail__meta-item > span.material-symbols-outlined {
    width: 2rem; height: 2rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.hs-detail__meta-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.1rem;
}
.hs-detail__meta-item b { font-weight: 700; color: #1a3c6e; }

.hs-detail__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 0.85rem;
}

.hs-block {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    overflow: hidden;
}
.hs-block--uni  { border-left: 4px solid #1a3c6e; }
.hs-block--inst { border-left: 4px solid #16a34a; }

.hs-block__head {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.55rem 0.8rem;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}
.hs-block__head h4 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #1e293b;
}
.hs-block__head > span.material-symbols-outlined {
    font-size: 1.2rem;
    width: 1.85rem; height: 1.85rem;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.hs-block--uni  .hs-block__head > span.material-symbols-outlined {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
}
.hs-block--inst .hs-block__head > span.material-symbols-outlined {
    background: #dcfce7; color: #166534;
}

.hs-block__body {
    padding: 0.55rem 0.8rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.5rem 1rem;
}
.hs-block__row { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.hs-block__row--full { grid-column: 1 / -1; }
.hs-block__label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.hs-block__value {
    font-size: 0.86rem;
    color: #1e293b;
    font-weight: 500;
    line-height: 1.4;
    word-break: break-word;
}
.hs-block__value b { color: #1a3c6e; font-weight: 700; }

.hs-block__email {
    display: inline-flex; align-items: center; gap: 0.25rem;
    margin-left: 0.4rem;
    font-size: 0.78rem;
    color: #2e5c9e;
    text-decoration: none;
    transition: 0.15s;
}
.hs-block__email:hover { text-decoration: underline; color: #1a3c6e; }
.hs-block__email span.material-symbols-outlined { font-size: 0.95rem; }

/* Transición de despliegue del panel */
.hs-detail-enter-active, .hs-detail-leave-active {
    transition: opacity 0.22s ease, transform 0.22s ease, max-height 0.3s ease;
    overflow: hidden;
}
.hs-detail-enter, .hs-detail-leave-to {
    opacity: 0;
    transform: translateY(-4px);
    max-height: 0;
}
.hs-detail-enter-to, .hs-detail-leave {
    opacity: 1;
    max-height: 60rem;
}

/* ─── Ícono de ayuda reutilizable (abre la guía en la sección) ─── */
.ayuda-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    color: #2e5c9e;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ayuda-link:hover { background: #2e5c9e; color: #ffffff; border-color: #2e5c9e; }
.ayuda-link .material-symbols-outlined { font-size: 1.15rem; }
/* Variante con texto ("Ayuda"): píldora en lugar de círculo. */
.ayuda-link--label {
    width: auto;
    height: auto;
    padding: 0.3rem 0.7rem;
    border-radius: 0.45rem;
    font-size: 0.8rem;
    font-weight: 600;
}
.ayuda-link__text { white-space: nowrap; }

/* ─── Bloque del título universitario + diploma institucional ─── */
.hs-doc-block {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.7rem;
    padding: 0.75rem 0.85rem;
    box-shadow: 0 0.1rem 0.35rem rgba(15, 23, 42, 0.05);
}

/* ─── Tabs estilo pill: Solicitud activa / Historial ─── */
.hs-pills {
    display: flex;
    gap: 0.4rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.7rem;
    padding: 0.35rem;
    box-shadow: 0 0.1rem 0.35rem rgba(15, 23, 42, 0.05);
}
.hs-pill {
    display: inline-flex; align-items: center; gap: 0.4rem;
    flex: 1;
    justify-content: center;
    padding: 0.55rem 0.85rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.45rem;
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.15s;
}
.hs-pill:hover { background: #f1f5f9; color: #1a3c6e; }
.hs-pill.is-active {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    box-shadow: 0 0.2rem 0.5rem rgba(26, 60, 110, 0.28);
}
.hs-pill .material-symbols-outlined { font-size: 1.1rem; }
.hs-pill__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.3rem;
    padding: 0 0.4rem;
    height: 1.3rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.25);
    color: inherit;
    font-size: 0.72rem;
    font-weight: 700;
}
.hs-pill:not(.is-active) .hs-pill__count { background: #eef2f7; color: #475569; }

/* ─── Contenido de tabs ─── */
.hs-content {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.7rem;
    padding: 0.85rem 1rem;
    box-shadow: 0 0.15rem 0.4rem rgba(15, 23, 42, 0.05);
}

/* ─── Empty state cuando no hay especialidades ─── */
.hs-empty {
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 0.7rem;
    padding: 2.5rem 1rem;
    text-align: center;
    color: #64748b;
}
.hs-empty > .material-symbols-outlined {
    font-size: 2.8rem;
    color: #cbd5e1;
}
.hs-empty h3 {
    margin: 0.5rem 0 0.2rem;
    font-size: 1rem;
    color: #475569;
    font-weight: 700;
}
.hs-empty p { margin: 0 0 1rem; font-size: 0.85rem; color: #94a3b8; }
.hs-empty .hs-btn--primary {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    border-color: #1a3c6e;
}

/* ─── Banner sit 18 (solicitud creada por el médico) ─── */
.sigme-sol18 {
    display: flex; flex-direction: column; gap: 0.75rem;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fcd34d; border-left: 4px solid #d97706;
    border-radius: 0.55rem; padding: 0.85rem 1rem;
    margin-bottom: 0.8rem;
}
.sigme-sol18__main { display: flex; align-items: flex-start; gap: 0.65rem; }
.sigme-sol18__main > .material-symbols-outlined {
    font-size: 1.6rem; color: #d97706; flex-shrink: 0;
}
.sigme-sol18__title { margin: 0; font-size: 0.92rem; font-weight: 700; color: #78350f; }
.sigme-sol18__msg { margin: 0.2rem 0 0; font-size: 0.8rem; color: #78350f; line-height: 1.4; }
.sigme-sol18__msg b { color: #92400e; }
.sigme-sol18__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sigme-sol18__btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.55rem 0.95rem; border-radius: 0.5rem;
    font-size: 0.8rem; font-weight: 600; cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.sigme-sol18__btn .material-symbols-outlined { font-size: 1.05rem; }
.sigme-sol18__btn--ghost {
    background: #fff; color: #92400e; border-color: #fcd34d;
}
.sigme-sol18__btn--ghost:hover {
    background: #fffbeb; transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.5rem rgba(217, 119, 6, 0.18);
}
.sigme-sol18__btn--primary {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%); color: #fff;
}
.sigme-sol18__btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.3rem 0.7rem rgba(180, 83, 9, 0.35);
}

/* Responsive */
@media (max-width: 900px) {
    .hs-header { flex-direction: column; align-items: flex-start; }
    .hs-header__actions { width: 100%; }
    .hs-btn { flex: 1; justify-content: center; }
    .hs-detail__grid { grid-template-columns: 1fr; }
    .hs-pills { flex-direction: column; }
    .hs-pill { width: 100%; }
}


/* =====================================================================
   CARD DE SOLICITUD ACTIVA (vista admin)
   Header con convocatoria + toolbar de acciones, grid de campos
   y subsección de pago.
   ---------------------------------------------------------------------
   Componente que usa estos estilos:
   - resources/js/components/expediente/especialidades/HistorySpecialtiesComponent.vue
       (Directorio → Expediente → Especialidades → tab Solicitud activa)
   ===================================================================== */
.hs-active {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.7rem;
    box-shadow: 0 0.15rem 0.4rem rgba(15, 23, 42, 0.05);
    margin-bottom: 1rem;
}

/* Header con convocatoria + toolbar */
.hs-active__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background:
        radial-gradient(circle 18rem at 90% -50%, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0) 70%),
        linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    padding: 0.85rem 1rem;
    flex-wrap: wrap;
    position: relative;
    border-top-left-radius: 0.7rem;
    border-top-right-radius: 0.7rem;
}
.hs-active__title {
    display: flex; align-items: center; gap: 0.7rem;
    flex: 1; min-width: 0;
    z-index: 1;
}
.hs-active__icon {
    width: 2.4rem; height: 2.4rem;
    background: rgba(255,255,255,0.18);
    color: #ffffff;
    border-radius: 0.5rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem !important;
    flex-shrink: 0;
}
.hs-active__title-text { min-width: 0; }
.hs-active__overline {
    margin: 0;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.75);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}
.hs-active__title-text h3 {
    margin: 0.1rem 0 0;
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.25;
    word-break: break-word;
}

.hs-active__actions {
    display: flex; gap: 0.35rem;
    flex-wrap: wrap;
    z-index: 1;
}
.hs-active__btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.2rem; height: 2.2rem;
    border-radius: 0.45rem;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.15);
    color: #ffffff;
    cursor: pointer;
    transition: all 0.15s ease;
    backdrop-filter: blur(4px);
}
.hs-active__btn:hover {
    background: rgba(255,255,255,0.95);
    color: #1a3c6e;
    transform: translateY(-1px);
    box-shadow: 0 0.25rem 0.6rem rgba(15, 23, 42, 0.2);
}
.hs-active__btn .material-symbols-outlined { font-size: 1.15rem; }

.hs-active__btn--success:hover { color: #166534; }
.hs-active__btn--primary:hover { color: #1a3c6e; }
.hs-active__btn--danger:hover  { color: #b91c1c; }
.hs-active__btn--coord:hover   { color: #5e35b1; }

/* Tooltip que aparece debajo del botón al hover.
   Ancla al borde derecho del botón para evitar overflow horizontal en la
   toolbar (los botones están alineados a la derecha del header). */
.hs-active__btn-tip {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    background: #0f172a;
    color: #ffffff;
    padding: 0.35rem 0.6rem;
    border-radius: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-0.3rem);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 100;
    box-shadow: 0 0.25rem 0.6rem rgba(15, 23, 42, 0.35);
}
/* Flechita pequeña apuntando al botón */
.hs-active__btn-tip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 0.55rem;
    border: 0.3rem solid transparent;
    border-bottom-color: #0f172a;
}
.hs-active__btn:hover .hs-active__btn-tip,
.hs-active__btn:focus-visible .hs-active__btn-tip {
    opacity: 1;
    transform: translateY(0);
}

/* Grid de campos */
.hs-active__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.hs-active__field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.55rem 0.7rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.45rem;
    min-width: 0;
}
.hs-active__field--span2 { grid-column: span 2; }
.hs-active__field-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.hs-active__field-value {
    font-size: 0.86rem;
    font-weight: 600;
    color: #1a3c6e;
    word-break: break-word;
    line-height: 1.35;
}
.hs-active__field-value small { color: #64748b; font-weight: 500; font-size: 0.78rem; }
.hs-active__field-value b { color: #1a3c6e; font-weight: 700; }
.hs-active__field-value--ok { color: #166534; }

/* Subsección de pago */
.hs-active__subsection {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #e2e8f0;
}
.hs-active__subsection .hs-active__grid {
    padding: 0;
    background: transparent;
    border-bottom: none;
    margin-top: 0.55rem;
}
.hs-active__subtitle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: #1a3c6e;
}
.hs-active__subtitle .material-symbols-outlined {
    font-size: 1.1rem;
    color: #2e5c9e;
}

/* Resumen de puntos de recertificación por currículum (card activa, admin) */
.hs-cvpts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-top: 0.6rem;
}
.hs-cvpts__item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.6rem 0.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
}
.hs-cvpts__label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.hs-cvpts__value {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a3c6e;
    line-height: 1.1;
}
.hs-cvpts__item--ok {
    background: #ecfdf5;
    border-color: #a7f3d0;
}
.hs-cvpts__item--ok .hs-cvpts__value { color: #047857; }
.hs-cvpts__item--warn {
    background: #fffbeb;
    border-color: #fde68a;
}
.hs-cvpts__item--warn .hs-cvpts__value { color: #b45309; }
@media (max-width: 640px) {
    .hs-cvpts { grid-template-columns: 1fr; }
}

/* Acciones del comprobante de pago (card activa, admin): adjuntar/actualizar y eliminar */
.hs-pay-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.hs-pay-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.hs-pay-btn .material-symbols-outlined { font-size: 1.1rem; }
.hs-pay-btn--primary {
    background: #e8f0fe;
    border-color: #c7dbfb;
    color: #1a3c6e;
}
.hs-pay-btn--primary:hover { background: #d8e6fd; }
.hs-pay-btn--danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}
.hs-pay-btn--danger:hover { background: #fde2e2; }

/* Anexos (comprobante / certificado) */
.hs-active__field--attachment {
    grid-column: 1 / -1;
    background: transparent;
    border: none;
    padding: 0;
}
.hs-active__cert {
    padding: 0.85rem 1rem;
}
.hs-active__attachment {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border-radius: 0.45rem;
    text-decoration: none !important;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid transparent;
    transition: all 0.15s;
    cursor: pointer;
}
.hs-active__attachment .material-symbols-outlined { font-size: 1.05rem; }
.hs-active__attachment--ok {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #14532d;
    border-color: #86efac;
}
.hs-active__attachment--ok:hover {
    background: linear-gradient(135deg, #bbf7d0 0%, #86efac 100%);
    color: #052e16;
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.45rem rgba(22, 101, 52, 0.2);
}
.hs-active__attachment--pending {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #78350f;
    border-color: #fcd34d;
}
.hs-active__attachment--pending:hover {
    background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.45rem rgba(217, 119, 6, 0.25);
}

@media (max-width: 900px) {
    .hs-active__head { flex-direction: column; align-items: flex-start; }
    .hs-active__actions { width: 100%; }
    .hs-active__btn { flex: 1; min-width: 2.2rem; }
    .hs-active__field--span2 { grid-column: span 1; }
}


/* =====================================================================
   TÍTULO UNIVERSITARIO + DIPLOMA INSTITUCIONAL (subcomponente)
   Cards compactas con header (icono + nombre + chip de estado),
   acciones de clasificación y archivo. Paleta navy marino.
   ---------------------------------------------------------------------
   Componente que usa estos estilos:
   - resources/js/components/expediente/especialidades/TituloDiplomaComponent.vue
       (Renderizado dentro de HistorySpecialtiesComponent.vue —
        Directorio → Expediente → Especialidades, antes de los tabs)
   ===================================================================== */
.td-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
@media (max-width: 768px) {
    .td-wrapper { grid-template-columns: 1fr; }
}

/* Card compacta por documento */
.td-card {
    border: 1px solid #e2e8f0;
    border-radius: 0.55rem;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 0.1rem 0.3rem rgba(15, 23, 42, 0.04);
    transition: box-shadow 0.18s, transform 0.18s;
}
.td-card:hover {
    box-shadow: 0 0.25rem 0.55rem rgba(15, 23, 42, 0.08);
}

/* Variante compacta para "no aplica" */
.td-card--noaplica {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.85rem;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.3;
    border-left: 4px solid #cbd5e1;
}
.td-card--noaplica b { font-weight: 700; color: #1e293b; }
.td-card--noaplica small { font-size: 0.78rem; color: #94a3b8; }

.td-card-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.85rem;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
}
.td-card-icon {
    width: 2rem; height: 2rem;
    border-radius: 0.4rem;
    background: rgba(26, 60, 110, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem !important;
    line-height: 1;
    flex-shrink: 0;
}
.td-card-title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #1a3c6e;
    flex: 1;
    min-width: 0;
}
.td-card-body {
    padding: 0.7rem 0.85rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Indicaciones del catálogo */
.td-desc {
    margin: 0;
    padding: 0.5rem 0.7rem;
    font-size: 0.78rem;
    color: #475569;
    line-height: 1.45;
    background: #f8fafc;
    border-left: 3px solid #2e5c9e;
    border-radius: 0 0.3rem 0.3rem 0;
    white-space: pre-line;
}

/* Línea de estado: link de ver + mensaje */
.td-status-line {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}
.td-status-msg {
    font-size: 0.74rem;
    color: #64748b;
    line-height: 1.4;
    flex: 1;
    min-width: 0;
}
.td-status-msg b { color: #1a3c6e; font-weight: 700; }
.td-status-msg--pendiente {
    color: #b91c1c;
    font-weight: 600;
}

/* Link "Ver archivo" / "Adjuntar documento" */
.td-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.7rem;
    border-radius: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #1a3c6e;
    background: rgba(26, 60, 110, 0.08);
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: all 0.15s;
}
.td-link:hover {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 0.2rem 0.45rem rgba(26, 60, 110, 0.25);
}
.td-link .material-symbols-outlined { font-size: 1rem; }

/* Toolbar */
.td-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
}

/* Chip de estado */
.td-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.3;
}
.td-chip--ok {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #14532d;
    border: 1px solid #86efac;
}
.td-chip--alt {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #78350f;
    border: 1px solid #fcd34d;
}
.td-chip--pendiente {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border: 1px solid #fca5a5;
}

/* Grupo de clasificación */
.td-clasificar-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.55rem;
    background: rgba(46, 92, 158, 0.05);
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.45rem;
}
.td-clasificar-label {
    font-size: 0.66rem;
    font-weight: 700;
    color: #1a3c6e;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 0.15rem;
}

/* Grupo de acciones de archivo */
.td-file-group {
    display: inline-flex;
    gap: 0.3rem;
}

/* Botón base */
.td-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.65rem;
    border-radius: 0.4rem;
    border: 1px solid transparent;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.2;
    transition: all 0.15s ease;
}
.td-btn:hover { transform: translateY(-1px); }
.td-btn .material-symbols-outlined { font-size: 0.95rem; }

/* Botón de clasificar */
.td-btn--clasificar {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    border-color: #1a3c6e;
}
.td-btn--clasificar:hover {
    background: linear-gradient(135deg, #142e54 0%, #234b81 100%);
    box-shadow: 0 0.2rem 0.5rem rgba(26, 60, 110, 0.3);
}

/* Acciones de archivo: solo ícono */
.td-btn--update,
.td-btn--delete {
    padding: 0.35rem 0.5rem;
    background: #ffffff;
}
.td-btn--update {
    color: #2e5c9e;
    border-color: #2e5c9e;
}
.td-btn--update:hover {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    border-color: #1a3c6e;
}
.td-btn--delete {
    color: #b91c1c;
    border-color: #fca5a5;
}
.td-btn--delete:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #ffffff;
    border-color: #b91c1c;
}


/* =====================================================================
   REVISORES y FASES de la solicitud activa (vista admin)
   Cards con estado, progreso y acciones, paleta navy.
   ---------------------------------------------------------------------
   Componente que usa estos estilos:
   - resources/js/components/expediente/especialidades/HistorySpecialtiesComponent.vue
       (Directorio → Expediente → Especialidades → Solicitud activa)
   ===================================================================== */

/* ─── Sección genérica (Revisores / Fases) ─── */
.hs-section {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px dashed #e2e8f0;
}
.hs-section__head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.7rem;
}
.hs-section__icon {
    width: 2rem; height: 2rem;
    border-radius: 0.45rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem !important;
    flex-shrink: 0;
}
.hs-section__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a3c6e;
    flex: 1;
    min-width: 0;
}
.hs-section__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: rgba(46, 92, 158, 0.12);
    color: #1a3c6e;
    font-size: 0.72rem;
    font-weight: 700;
}

/* ─── Revisores ─── */
.hs-rev-grid {
    display: grid;
    /* Cap superior: 28rem por columna. Antes con `1fr` un solo revisor
       estiraba el card a todo el ancho dejándolo "amontonado" — pocas líneas
       en un área enorme. Con un cap visual el card mantiene proporción y se
       lee mejor; con varios revisores cada uno toma su columna. */
    grid-template-columns: repeat(auto-fit, minmax(18rem, 28rem));
    gap: 0.7rem;
}
.hs-rev {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.6rem;
    padding: 0.75rem 0.85rem 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    box-shadow: 0 0.1rem 0.3rem rgba(15, 23, 42, 0.05);
    transition: box-shadow 0.18s, transform 0.18s;
}
.hs-rev::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
    border-top-left-radius: 0.6rem;
    border-bottom-left-radius: 0.6rem;
}
.hs-rev--pending::before { background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%); }
.hs-rev--done::before    { background: linear-gradient(180deg, #16a34a 0%, #15803d 100%); }
.hs-rev:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.3rem 0.7rem rgba(15, 23, 42, 0.1);
}

.hs-rev__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.hs-rev__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.hs-rev__chip .material-symbols-outlined { font-size: 0.95rem; }
.hs-rev__chip--ok {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #14532d;
    border: 1px solid #86efac;
}
.hs-rev__chip--pending {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #78350f;
    border: 1px solid #fcd34d;
}
.hs-rev__tipo {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 0.35rem;
    background: rgba(46, 92, 158, 0.08);
    color: #1a3c6e;
    font-size: 0.7rem;
    font-weight: 600;
}
.hs-rev__tipo .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; }

.hs-rev__body { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.hs-rev__nombre {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #1a3c6e;
    line-height: 1.25;
    word-break: break-word;
}
/* Correo electrónico del revisor — link sutil con icono */
.hs-rev__email {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.76rem;
    color: #475569;
    line-height: 1.25;
    word-break: break-all;
}
.hs-rev__email .material-symbols-outlined {
    font-size: 0.95rem;
    color: #2e5c9e;
    flex-shrink: 0;
}
/* Indicador de verificación del correo institucional del revisor */
.hs-rev__email .hs-rev__verif.is-ok { color: #16a34a; }
.hs-rev__email .hs-rev__verif.is-pending { color: #d4a700; }
.hs-rev__email a {
    color: #1d4ed8;
    text-decoration: none;
    transition: color 0.15s ease;
    word-break: break-all;
}
.hs-rev__email a:hover {
    color: #1a3c6e;
    text-decoration: underline;
}

/* Lista de roles asignados al revisor — chips compactos */
.hs-rev__roles {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem 0.4rem;
    margin: 0.1rem 0;
}
.hs-rev__roles-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.hs-rev__roles-label .material-symbols-outlined {
    font-size: 0.95rem;
    color: #2e5c9e;
}
.hs-rev__role-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
}

.hs-rev__meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.hs-rev__meta li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: #475569;
    line-height: 1.3;
}
.hs-rev__meta li .material-symbols-outlined {
    font-size: 0.95rem;
    color: #94a3b8;
    flex-shrink: 0;
}
.hs-rev__meta-label {
    color: #94a3b8;
    font-weight: 600;
}
.hs-rev__meta b { color: #1a3c6e; font-weight: 700; }

.hs-rev__actions {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
    border-top: 1px solid #f1f5f9;
    padding-top: 0.55rem;
    flex-wrap: wrap;
}
.hs-rev__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex: 1;
    justify-content: center;
    padding: 0.4rem 0.6rem;
    border-radius: 0.4rem;
    border: 1px solid transparent;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.hs-rev__btn .material-symbols-outlined { font-size: 0.95rem; }
.hs-rev__btn--primary {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    border-color: #1a3c6e;
}
.hs-rev__btn--primary:hover {
    background: linear-gradient(135deg, #142e54 0%, #234b81 100%);
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.45rem rgba(26, 60, 110, 0.3);
}
.hs-rev__btn--danger {
    background: #ffffff;
    color: #b91c1c;
    border-color: #fca5a5;
}
.hs-rev__btn--danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #ffffff;
    border-color: #b91c1c;
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.45rem rgba(185, 28, 28, 0.3);
}
/* Variante icon-only: cuadrado compacto, sin texto */
.hs-rev__btn--icon {
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border-radius: 0.4rem;
}
.hs-rev__btn--icon .material-symbols-outlined { font-size: 1.1rem; }

/* ─── Fases ─── */
.hs-fase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 0.7rem;
}
.hs-fase {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.6rem;
    padding: 0.9rem 0.85rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    box-shadow: 0 0.1rem 0.3rem rgba(15, 23, 42, 0.05);
    transition: box-shadow 0.18s, transform 0.18s;
}
.hs-fase::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    border-top-left-radius: 0.6rem;
    border-top-right-radius: 0.6rem;
}
.hs-fase--ok::before  { background: linear-gradient(90deg, #16a34a 0%, #15803d 100%); }
.hs-fase--bad::before { background: linear-gradient(90deg, #dc2626 0%, #b91c1c 100%); }
.hs-fase:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.3rem 0.7rem rgba(15, 23, 42, 0.1);
}

.hs-fase__head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding-top: 0.15rem;
    flex-wrap: wrap;
}
.hs-fase__status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.hs-fase__status .material-symbols-outlined { font-size: 0.95rem; }
.hs-fase--ok .hs-fase__status {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #14532d;
    border: 1px solid #86efac;
}
.hs-fase--bad .hs-fase__status {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border: 1px solid #fca5a5;
}
.hs-fase__name {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #1a3c6e;
    line-height: 1.25;
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

/* Barra de progreso de la fase */
.hs-fase__progress {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}
.hs-fase__progress-bar {
    flex: 1;
    height: 0.55rem;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}
.hs-fase__progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #1a3c6e 0%, #2e5c9e 100%);
    border-radius: 999px;
    transition: width 0.3s ease;
}
.hs-fase--ok  .hs-fase__progress-fill { background: linear-gradient(90deg, #15803d 0%, #16a34a 100%); }
.hs-fase--bad .hs-fase__progress-fill { background: linear-gradient(90deg, #b91c1c 0%, #dc2626 100%); }
.hs-fase__progress-text {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    flex-shrink: 0;
}
.hs-fase__progress-text b {
    font-size: 0.95rem;
    color: #1a3c6e;
    font-weight: 800;
}
.hs-fase__progress-text small {
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 600;
}

.hs-fase__meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
}
.hs-fase__meta li {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.4rem 0.55rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.4rem;
}
.hs-fase__meta-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.hs-fase__meta b {
    font-size: 0.85rem;
    color: #1a3c6e;
    font-weight: 700;
}

.hs-fase__actions {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
    border-top: 1px solid #f1f5f9;
    padding-top: 0.55rem;
    flex-wrap: wrap;
}
.hs-fase__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex: 1;
    justify-content: center;
    padding: 0.4rem 0.6rem;
    border-radius: 0.4rem;
    border: 1px solid transparent;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.hs-fase__btn .material-symbols-outlined { font-size: 0.95rem; }
.hs-fase__btn--primary {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    border-color: #1a3c6e;
}
.hs-fase__btn--primary:hover {
    background: linear-gradient(135deg, #142e54 0%, #234b81 100%);
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.45rem rgba(26, 60, 110, 0.3);
}
.hs-fase__btn--danger {
    background: #ffffff;
    color: #b91c1c;
    border-color: #fca5a5;
}
.hs-fase__btn--danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #ffffff;
    border-color: #b91c1c;
    transform: translateY(-1px);
}
/* Variante icon-only: cuadrado compacto, sin texto */
.hs-fase__btn--icon {
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border-radius: 0.4rem;
}
.hs-fase__btn--icon .material-symbols-outlined { font-size: 1.1rem; }

/* Totales de fases (footer) */
.hs-fase-total {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.6rem;
    margin-top: 0.75rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    border-radius: 0.6rem;
    color: #ffffff;
    box-shadow: 0 0.25rem 0.6rem rgba(26, 60, 110, 0.2);
}
.hs-fase-total__item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.hs-fase-total__label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.85);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}
.hs-fase-total__label .material-symbols-outlined {
    font-size: 1rem;
    color: #fde68a;
}
.hs-fase-total__value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
}

@media (max-width: 700px) {
    .hs-rev-grid,
    .hs-fase-grid { grid-template-columns: 1fr; }
    .hs-fase__meta { grid-template-columns: 1fr; }
    .hs-fase__progress { flex-direction: column; align-items: stretch; }
    .hs-fase__progress-text { justify-content: flex-end; }
}


/* =====================================================================
   TRONCALES — Especialidades complementarias para la certificación
   Card por troncal con header (consejo + especialidad + chip de estado),
   grid de campos, certificado adjunto y acciones aceptar/rechazar.
   ---------------------------------------------------------------------
   Componente que usa estos estilos:
   - resources/js/components/expediente/especialidades/HistorySpecialtiesComponent.vue
       (Solicitud activa → Especialidades troncales)
   ===================================================================== */

/* Toggle: Omitir / Validar troncal (en el header de la sección) */
.hs-tron-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.18s;
}
.hs-tron-toggle .material-symbols-outlined { font-size: 1rem; }
.hs-tron-toggle--unlock {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #14532d;
    border-color: #86efac;
}
.hs-tron-toggle--unlock:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.5rem rgba(22, 101, 52, 0.3);
}
.hs-tron-toggle--lock {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border-color: #fca5a5;
}
.hs-tron-toggle--lock:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.5rem rgba(185, 28, 28, 0.3);
}

/* Grid de cards de troncales */
.hs-tron-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.hs-tron {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.6rem;
    padding: 0.85rem 1rem 0.85rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    box-shadow: 0 0.1rem 0.3rem rgba(15, 23, 42, 0.05);
    transition: box-shadow 0.18s, transform 0.18s;
}
.hs-tron::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
    border-top-left-radius: 0.6rem;
    border-bottom-left-radius: 0.6rem;
}
.hs-tron--ok::before      { background: linear-gradient(180deg, #16a34a 0%, #15803d 100%); }
.hs-tron--pending::before { background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%); }
.hs-tron:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.3rem 0.7rem rgba(15, 23, 42, 0.1);
}

.hs-tron__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
    flex-wrap: wrap;
}
.hs-tron__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    order: 2;
}
.hs-tron__chip .material-symbols-outlined { font-size: 0.95rem; }
.hs-tron__chip--ok {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #14532d;
    border: 1px solid #86efac;
}
.hs-tron__chip--pending {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #78350f;
    border: 1px solid #fcd34d;
}

.hs-tron__title {
    flex: 1;
    min-width: 0;
    order: 1;
}
.hs-tron__consejo {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: #2e5c9e;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.hs-tron__especialidad {
    margin: 0.1rem 0 0;
    font-size: 1rem;
    font-weight: 700;
    color: #1a3c6e;
    line-height: 1.25;
    word-break: break-word;
}

/* Grid de campos del troncal */
.hs-tron__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.55rem;
}
.hs-tron__field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.5rem 0.65rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.4rem;
    min-width: 0;
}
.hs-tron__field--span2 { grid-column: span 2; }
.hs-tron__field-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.hs-tron__field-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a3c6e;
    line-height: 1.35;
    word-break: break-word;
}
.hs-tron__field-value b { color: #1a3c6e; font-weight: 700; }
.hs-tron__field-value small { color: #64748b; font-weight: 500; font-size: 0.78rem; }

/* Anexo / pendiente */
.hs-tron__attachment {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.hs-tron__cert {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border-radius: 0.45rem;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none !important;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
}
.hs-tron__cert .material-symbols-outlined { font-size: 1.05rem; }
.hs-tron__cert--ok {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #14532d;
    border-color: #86efac;
}
.hs-tron__cert--ok:hover {
    background: linear-gradient(135deg, #bbf7d0 0%, #86efac 100%);
    color: #052e16;
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.45rem rgba(22, 101, 52, 0.2);
}
.hs-tron__cert--pending {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border-color: #fca5a5;
}

/* Nota informativa de validación */
.hs-tron__note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fef9c3 100%);
    border: 1px solid #fde68a;
    border-left: 4px solid #d97706;
    border-radius: 0.4rem;
    font-size: 0.78rem;
    color: #78350f;
    line-height: 1.4;
}
.hs-tron__note > .material-symbols-outlined {
    font-size: 1.15rem;
    color: #d97706;
    flex-shrink: 0;
}
.hs-tron__note p { margin: 0; }
.hs-tron__note b { color: #92400e; }
.hs-tron__note u { text-decoration: underline; color: #92400e; }

/* Variante WARN (más enfática que la base amber): troncal no vigente. */
.hs-tron__note.hs-tron__note--warn {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border: 1px solid #fca5a5;
    border-left: 4px solid #dc2626;
    color: #7f1d1d;
}
.hs-tron__note.hs-tron__note--warn > .material-symbols-outlined { color: #dc2626; }
.hs-tron__note.hs-tron__note--warn b { color: #991b1b; }

/* Acciones (aceptar / eliminar) */
.hs-tron__actions {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
    border-top: 1px solid #f1f5f9;
    padding-top: 0.6rem;
    flex-wrap: wrap;
}
.hs-tron__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.4rem 0.65rem;
    border-radius: 0.4rem;
    border: 1px solid transparent;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.hs-tron__btn .material-symbols-outlined { font-size: 1rem; }
.hs-tron__btn--icon {
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
}
.hs-tron__btn--icon .material-symbols-outlined { font-size: 1.1rem; }
.hs-tron__btn--primary {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #ffffff;
    border-color: #15803d;
}
.hs-tron__btn--primary:hover {
    background: linear-gradient(135deg, #15803d 0%, #14532d 100%);
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.5rem rgba(22, 101, 52, 0.35);
}
.hs-tron__btn--danger {
    background: #ffffff;
    color: #b91c1c;
    border-color: #fca5a5;
}
.hs-tron__btn--danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #ffffff;
    border-color: #b91c1c;
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.5rem rgba(185, 28, 28, 0.3);
}

/* Empty state troncales */
.hs-tron-empty {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 1rem 1.1rem;
    background: linear-gradient(135deg, #fee2e2 0%, #fff5f5 100%);
    border: 1px solid #fca5a5;
    border-left: 4px solid #dc2626;
    border-radius: 0.55rem;
    color: #991b1b;
}
.hs-tron-empty > .material-symbols-outlined {
    font-size: 1.6rem;
    color: #dc2626;
    flex-shrink: 0;
}
.hs-tron-empty p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.45;
}


/* =====================================================================
   HS-NOTICE — Banner unificado para avisos en la vista admin de especialidades
   Variantes: --danger (rojo), --warn (ámbar), --info (azul), --ok (verde).
   Sustituye al patrón anterior `.expedient-advice .ea-bad`.
   ---------------------------------------------------------------------
   Componente que usa estos estilos:
   - resources/js/components/expediente/especialidades/HistorySpecialtiesComponent.vue
       (Directorio → Expediente → Especialidades — banners de notificación)
   ===================================================================== */
.hs-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    border-radius: 0.6rem;
    border: 1px solid transparent;
    border-left-width: 4px;
    margin-bottom: 0.8rem;
    box-shadow: 0 0.1rem 0.3rem rgba(15, 23, 42, 0.05);
}
/* Separación superior cuando la nota va pegada a otra sección (p. ej. revisores). */
.hs-notice--spaced { margin-top: 1.5rem; }
.hs-notice__icon {
    font-size: 1.6rem !important;
    flex-shrink: 0;
    line-height: 1;
}
.hs-notice__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.hs-notice__title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.25;
}
.hs-notice__body p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.45;
}
.hs-notice__body b { font-weight: 700; }
.hs-notice__action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.45rem;
    padding: 0.45rem 0.85rem;
    border-radius: 0.45rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.15s;
    align-self: flex-start;
}
.hs-notice__action .material-symbols-outlined { font-size: 1rem; }

/* Variante DANGER (rojo) */
.hs-notice--danger {
    background: linear-gradient(135deg, #fee2e2 0%, #fff5f5 100%);
    border-color: #fca5a5;
    border-left-color: #dc2626;
    color: #991b1b;
}
.hs-notice--danger .hs-notice__icon { color: #dc2626; }
.hs-notice--danger .hs-notice__title { color: #7f1d1d; }
.hs-notice--danger .hs-notice__action {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #ffffff;
}
.hs-notice--danger .hs-notice__action:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.45rem rgba(185, 28, 28, 0.35);
}

/* Variante WARN (ámbar) */
.hs-notice--warn {
    background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
    border-color: #fcd34d;
    border-left-color: #d97706;
    color: #78350f;
}
.hs-notice--warn .hs-notice__icon { color: #d97706; }
.hs-notice--warn .hs-notice__title { color: #78350f; }
.hs-notice--warn .hs-notice__action {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    color: #ffffff;
}
.hs-notice--warn .hs-notice__action:hover {
    background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.45rem rgba(180, 83, 9, 0.35);
}

/* Variante INFO (azul navy) */
.hs-notice--info {
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    border-color: #93c5fd;
    border-left-color: #2e5c9e;
    color: #1e3a8a;
}
.hs-notice--info .hs-notice__icon { color: #2e5c9e; }
.hs-notice--info .hs-notice__title { color: #1a3c6e; }
.hs-notice--info .hs-notice__action {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
}
.hs-notice--info .hs-notice__action:hover {
    background: linear-gradient(135deg, #142e54 0%, #234b81 100%);
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.45rem rgba(26, 60, 110, 0.35);
}

/* Variante OK (verde) */
.hs-notice--ok {
    background: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 100%);
    border-color: #86efac;
    border-left-color: #16a34a;
    color: #14532d;
}
.hs-notice--ok .hs-notice__icon { color: #16a34a; }
.hs-notice--ok .hs-notice__title { color: #14532d; }
.hs-notice--ok .hs-notice__action {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #ffffff;
}
.hs-notice--ok .hs-notice__action:hover {
    background: linear-gradient(135deg, #15803d 0%, #14532d 100%);
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.45rem rgba(22, 101, 52, 0.35);
}

/* Variante warning (ámbar): se usa para avisar de expedientes con troncales activas
   cuando la especialidad ya está marcada como "no requiere" */
.hs-notice--warning {
    background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
    border-color: #fcd34d;
    border-left-color: #d97706;
    color: #78350f;
}
.hs-notice--warning .hs-notice__icon { color: #d97706; }
.hs-notice--warning .hs-notice__title { color: #78350f; }

/* Aviso de expedientes pendientes de troncales — banner + lista colapsable + botón */
.esp-tron-pending { margin-top: 0.75rem; }
.esp-tron-pending__list {
    margin: 0.5rem 0 0.75rem;
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(217, 119, 6, 0.25);
    border-radius: 0.4rem;
    padding: 0.4rem 0.55rem;
}
.esp-tron-pending__list summary {
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    color: #92400e;
    user-select: none;
    padding: 0.15rem 0;
}
.esp-tron-pending__list summary:hover { color: #78350f; }
.esp-tron-pending__list ul {
    margin: 0.4rem 0 0;
    padding: 0;
    list-style: none;
    max-height: 12rem;
    overflow-y: auto;
}
.esp-tron-pending__list li {
    display: flex; align-items: center; gap: 0.35rem;
    padding: 0.2rem 0.4rem;
    font-size: 0.78rem;
    color: #5a3d12;
    border-bottom: 1px dashed rgba(217, 119, 6, 0.18);
}
.esp-tron-pending__list li:last-child { border-bottom: none; }
.esp-tron-pending__list li .material-symbols-outlined {
    font-size: 0.95rem;
    color: #d97706;
}
.esp-tron-pending__btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    color: #fff !important;
    border: none;
    padding: 0.4rem 0.85rem;
    border-radius: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 0.15rem 0.35rem rgba(180, 83, 9, 0.25);
}
.esp-tron-pending__btn:hover {
    background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
    transform: translateY(-1px);
    box-shadow: 0 0.25rem 0.5rem rgba(180, 83, 9, 0.35);
}
.esp-tron-pending__btn .material-symbols-outlined { font-size: 1rem; }


/* =====================================================================
   HS-TIP — Tooltip estilizado para botones icon-only
   Se posiciona ARRIBA del botón (a diferencia de .hs-active__btn-tip que
   va abajo). Útil para botones que están en footers / al final de cards.
   ---------------------------------------------------------------------
   Componente que usa estos estilos:
   - resources/js/components/expediente/especialidades/HistorySpecialtiesComponent.vue
       (Botones icon-only de: eliminar revisor, eliminar fase, aceptar/eliminar troncal)
   ===================================================================== */
.hs-tip {
    position: absolute;
    bottom: calc(100% + 0.45rem);
    right: 50%;
    transform: translateX(50%) translateY(0.3rem);
    background: #0f172a;
    color: #ffffff;
    padding: 0.35rem 0.6rem;
    border-radius: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 100;
    box-shadow: 0 0.25rem 0.6rem rgba(15, 23, 42, 0.35);
}
/* Flechita apuntando hacia abajo, hacia el botón */
.hs-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 50%;
    transform: translateX(50%);
    border: 0.3rem solid transparent;
    border-top-color: #0f172a;
}
/* Mostrar al hover / focus del botón contenedor */
.hs-rev__btn:hover > .hs-tip,
.hs-rev__btn:focus-visible > .hs-tip,
.hs-fase__btn:hover > .hs-tip,
.hs-fase__btn:focus-visible > .hs-tip,
.hs-tron__btn:hover > .hs-tip,
.hs-tron__btn:focus-visible > .hs-tip,
.csj-resp__btn:hover > .hs-tip,
.csj-resp__btn:focus-visible > .hs-tip {
    opacity: 1;
    transform: translateX(50%) translateY(0);
}


/* =====================================================================
   FORMULARIOS DE SOLICITUD (activa + histórica)
   Estilos de soporte: panel de indicaciones del proceso, autocomplete
   de Presidente/Responsable, candado para certificado vinculado a
   CONACEM y botón de validar certificado.
   ---------------------------------------------------------------------
   Componentes que usan estos estilos:
   - resources/js/components/expediente/especialidades/FormCreateRequestComponent.vue
   - resources/js/components/expediente/especialidades/FormHistoryRequestComponent.vue
   ===================================================================== */

/* Panel de indicaciones cuando se selecciona un proceso */
.hs-form-indications {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-top: 0.7rem;
    padding: 0.65rem 0.85rem;
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    border: 1px solid #93c5fd;
    border-left: 4px solid #2e5c9e;
    border-radius: 0.5rem;
    color: #1a3c6e;
}
.hs-form-indications > .material-symbols-outlined {
    font-size: 1.25rem;
    color: #d97706;
    flex-shrink: 0;
}
.hs-form-indications p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: #1e3a8a;
}

/* Wrapper para campos con autocompletado de Presidente / Responsable */
.hs-form-autocomplete {
    position: relative;
}
.hs-form-autocomplete .searcher-special {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    z-index: 50;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    box-shadow: 0 0.4rem 1rem rgba(15, 23, 42, 0.15);
    max-height: 14rem;
    overflow-y: auto;
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.hs-form-autocomplete .searcher-special input[type="button"] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.45rem 0.65rem;
    background: transparent;
    border: none;
    border-radius: 0.35rem;
    color: #1e293b;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.12s;
}
.hs-form-autocomplete .searcher-special input[type="button"]:hover {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
}

/* Card "bloqueada" porque el certificado está vinculado a CONACEM
   (los campos siguen siendo editables pero se indica visualmente). */
.hs-form-locked .ms-subcard__head {
    background: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 100%);
    border-bottom: 1px solid #86efac;
}
.hs-form-locked .ms-subcard__head .ms-subcard__icon {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #ffffff;
}
.hs-form-locked input[type="text"],
.hs-form-locked input[type="date"],
.hs-form-locked input[type="number"] {
    background: #f0fdf4;
    border-color: #86efac;
}
.hs-form-locked__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: auto;
}
.hs-form-locked__chip .material-symbols-outlined { font-size: 0.95rem; }

/* Botón de validar certificado en CONACEM */
.hs-form-validate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.55rem 0.85rem;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #ffffff;
    border: none;
    border-radius: 0.45rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.hs-form-validate-btn:hover {
    background: linear-gradient(135deg, #15803d 0%, #14532d 100%);
    transform: translateY(-1px);
    box-shadow: 0 0.25rem 0.55rem rgba(22, 101, 52, 0.3);
}
.hs-form-validate-btn .material-symbols-outlined { font-size: 1rem; }


/* =====================================================================
   GESTIÓN DEL CONSEJO — Datos del Consejo (Information)
   Estilos para los accesos URL, constancia fiscal y subida.
   ---------------------------------------------------------------------
   Componente que usa estos estilos:
   - resources/js/components/consejo/InformationComponent.vue
   ===================================================================== */

/* Accesos: URL pública + botón de copiar */
.csj-access {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.csj-access__item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.csj-access__label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: #1a3c6e;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.csj-access__label .material-symbols-outlined {
    font-size: 1rem;
    color: #2e5c9e;
}
.csj-access__url {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #eef4ff 0%, #f8fafc 100%);
    border: 1px solid #c7d2fe;
    border-radius: 0.5rem;
    padding: 0.4rem 0.4rem 0.4rem 0.85rem;
    flex-wrap: wrap;
}
.csj-access__url-text {
    flex: 1;
    min-width: 0;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.82rem;
    color: #1a3c6e;
    word-break: break-all;
    user-select: all;
    line-height: 1.4;
}
.csj-access__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.85rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    border: 1px solid #1a3c6e;
    border-radius: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.csj-access__btn:hover {
    background: linear-gradient(135deg, #142e54 0%, #234b81 100%);
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.5rem rgba(26, 60, 110, 0.3);
}
.csj-access__btn .material-symbols-outlined { font-size: 1rem; }

/* Constancia fiscal — viewer + acciones */
.csj-constancia {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.csj-constancia__viewer {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #f8fafc;
}
.csj-constancia__viewer embed {
    display: block;
}
.csj-constancia__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    border: 1px solid #1a3c6e;
    border-radius: 0.45rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    align-self: flex-start;
    transition: all 0.15s ease;
}
.csj-constancia__btn:hover {
    background: linear-gradient(135deg, #142e54 0%, #234b81 100%);
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.5rem rgba(26, 60, 110, 0.3);
}
.csj-constancia__btn .material-symbols-outlined { font-size: 1.05rem; }

/* Upload de constancia */
.csj-upload {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.65rem;
    margin-top: 0.5rem;
}
.csj-upload__input {
    display: none;
}
.csj-upload__label {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    background: #f8fafc;
    border: 2px dashed #c7d2fe;
    border-radius: 0.55rem;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s ease;
    word-break: break-word;
}
.csj-upload__label:hover {
    background: linear-gradient(135deg, #eef4ff 0%, #f8fafc 100%);
    border-color: #1a3c6e;
    color: #1a3c6e;
}
.csj-upload__label .material-symbols-outlined {
    font-size: 1.6rem;
    color: #2e5c9e;
    flex-shrink: 0;
}
.csj-upload__label--with-file {
    background: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 100%);
    border-color: #16a34a;
    color: #14532d;
    border-style: solid;
}
.csj-upload__label--with-file .material-symbols-outlined {
    color: #16a34a;
}
.csj-upload__name {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}
.csj-upload__submit {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #ffffff;
    border: 1px solid #15803d;
    border-radius: 0.45rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.csj-upload__submit:hover {
    background: linear-gradient(135deg, #15803d 0%, #14532d 100%);
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.5rem rgba(22, 101, 52, 0.3);
}
.csj-upload__submit .material-symbols-outlined { font-size: 1.05rem; }

@media (max-width: 700px) {
    .csj-access__url { flex-direction: column; align-items: stretch; }
    .csj-access__btn { width: 100%; justify-content: center; }
    .csj-upload__submit { width: 100%; justify-content: center; }
}


/* =====================================================================
   GESTIÓN DEL CONSEJO — Shell con tabs horizontales (pill bar)
   ---------------------------------------------------------------------
   Componente que usa estos estilos:
   - resources/js/components/consejo/FatherComponent.vue
   ===================================================================== */
.csj-shell {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.75rem;
    height: 100%;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Header con título principal */
.csj-shell__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    border-radius: 0.75rem;
    padding: 0.95rem 1.2rem;
    box-shadow: 0 0.3rem 0.85rem rgba(26, 60, 110, 0.2);
    flex-shrink: 0;
}
.csj-shell__title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}
.csj-shell__title > .material-symbols-outlined {
    width: 2.6rem; height: 2.6rem;
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem !important;
    flex-shrink: 0;
}
.csj-shell__title h1 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
}
.csj-shell__title p {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.35;
}

/* Nota de estado del Consejo en la lista blanca de acceso (header oscuro del panel) */
.csj-wl {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: default;
}
/* Tooltip navy del chip (reemplaza al title nativo). Aparece debajo, centrado,
   con texto que envuelve para no salirse del ancho del sidebar. */
.csj-wl__tip {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%) translateY(-0.25rem);
    width: max-content;
    max-width: 14rem;
    white-space: normal;
    text-align: center;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.35;
    padding: 0.45rem 0.6rem;
    border-radius: 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 0.3rem 0.8rem rgba(15, 28, 50, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 300;
}
.csj-wl__tip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 0.3rem solid transparent;
    border-bottom-color: #1a3c6e;
}
.csj-wl:hover .csj-wl__tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.csj-wl .material-symbols-outlined { font-size: 0.95rem; }
.csj-wl--ok      { background: rgba(22, 163, 74, 0.20);  color: #bbf7d0; border-color: rgba(134, 239, 172, 0.45); }
.csj-wl--bad     { background: rgba(220, 38, 38, 0.22);  color: #fecaca; border-color: rgba(248, 113, 113, 0.5); }
.csj-wl--neutral { background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.92); border-color: rgba(255, 255, 255, 0.28); }

/* Variante en el sidebar (junto a SIGME): a la izquierda, con aire para no
   quedar pegada a las opciones del menú y con espacio a la derecha para su tooltip. */
.csj-wl-side { text-align: center; margin-top: 0.5rem; margin-bottom: 0.9rem; padding: 0 0.5rem; }
.csj-wl-side .csj-wl { margin-top: 0; }

/* Botón "Regresar" en el header (vista detalle) */
.csj-shell__back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.csj-shell__back:hover {
    background: rgba(255, 255, 255, 0.95);
    color: #1a3c6e;
    transform: translateY(-1px);
}
.csj-shell__back .material-symbols-outlined { font-size: 1rem; }

/* Pill bar de tabs (sticky bajo el header) */
.csj-tabs {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.7rem;
    padding: 0.4rem;
    box-shadow: 0 0.1rem 0.35rem rgba(15, 23, 42, 0.05);
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    flex-shrink: 0;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.csj-tabs::-webkit-scrollbar { height: 0.35rem; }
.csj-tabs::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.csj-tabs::-webkit-scrollbar-track { background: transparent; }

.csj-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.95rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.55rem;
    color: #64748b;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
    scroll-snap-align: start;
}
.csj-tab:hover {
    background: #eef2ff;
    color: #1a3c6e;
}
.csj-tab.is-active {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    box-shadow: 0 0.2rem 0.5rem rgba(26, 60, 110, 0.3);
}
.csj-tab .material-symbols-outlined {
    font-size: 1.1rem;
}
.csj-tab__label { line-height: 1.2; }

/* Divider vertical entre "Información" y "Configuración" */
.csj-tabs__divider {
    width: 1px;
    height: 1.5rem;
    background: #cbd5e1;
    margin: 0 0.25rem;
    flex-shrink: 0;
}

/* Contenedor del contenido */
.csj-shell__content {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    box-shadow: 0 0.15rem 0.4rem rgba(15, 23, 42, 0.05);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}

/* Forzar que .ms-form-view y .ms-form crezcan con el contenido dentro del
   shell del consejo (de otra forma .ms-form quedaba a 100% del shell y el
   fondo no cubría el card del fondo al hacer scroll). */
.csj-shell__content .ms-form-view {
    height: auto !important;
    min-height: 100%;
}
.csj-shell__content .ms-form {
    height: auto !important;
    min-height: 100%;
    /* CLAVE para que .ms-form__aside sticky funcione: el scroll lo maneja
       .csj-shell__content, no .ms-form. Si .ms-form mantiene overflow-y:auto,
       se convierte en el "scroll context" del sticky, pero como aquí su altura
       es auto no scrollea — y el aside se queda flotando en la parte alta
       del form sin "stickearse". Forzando overflow:visible delegamos el scroll
       al ancestro correcto (.csj-shell__content). */
    overflow-y: visible !important;
    overflow-x: visible !important;
}

/* Cuando el contenido vive dentro de csj-msg-shell (varias secciones
   apiladas: mensajes + notificaciones, configuración con varios bloques)
   es el shell el que toma min-height 100%; los .ms-form-view internos
   crecen sólo lo que su contenido necesita para no duplicar la altura. */
.csj-shell__content .csj-msg-shell {
    min-height: 100%;
    height: auto;
}
.csj-shell__content .csj-msg-shell .ms-form-view {
    min-height: 0;
}
.csj-shell__content .csj-msg-shell .ms-form {
    min-height: 0;
}
.csj-shell__content::-webkit-scrollbar { width: 0.6rem; }
.csj-shell__content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    border-radius: 999px;
}
.csj-shell__content::-webkit-scrollbar-track { background: #f1f5f9; }

@media (max-width: 900px) {
    .csj-shell__title h1 { font-size: 1rem; }
    .csj-shell__title p { font-size: 0.72rem; }
    .csj-tab { padding: 0.5rem 0.75rem; font-size: 0.78rem; }
    .csj-tab .material-symbols-outlined { font-size: 1rem; }
}
@media (max-width: 560px) {
    .csj-tab__label { display: none; }
    .csj-tab.is-active .csj-tab__label { display: inline; }
    .csj-tab { padding: 0.5rem 0.65rem; }
}


/* =====================================================================
   GESTIÓN DEL CONSEJO — Responsables del consejo
   ---------------------------------------------------------------------
   Componente que usa estos estilos:
   - resources/js/components/consejo/ResponsibleComponent.vue
   ===================================================================== */

/* Grid de cards de responsables */
.csj-resp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 0.85rem;
    margin-top: 0.5rem;
}

.csj-resp {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.7rem;
    box-shadow: 0 0.15rem 0.4rem rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.18s, transform 0.18s;
    z-index: 1;
}
/* Al pasar el cursor o hacer focus en cualquier hijo (botón con tooltip),
   subimos el z-index del card para que el tooltip no quede debajo de la
   card siguiente en el grid. */
.csj-resp:hover,
.csj-resp:focus-within {
    z-index: 50;
}
.csj-resp::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
    border-top-left-radius: 0.7rem;
    border-bottom-left-radius: 0.7rem;
}
.csj-resp.is-vigente::before    { background: linear-gradient(180deg, #16a34a 0%, #15803d 100%); }
.csj-resp.is-suspendido::before { background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%); }
.csj-resp:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.35rem 0.85rem rgba(15, 23, 42, 0.1);
}

/* Header del card */
.csj-resp__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem 0.85rem 1.15rem;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border-bottom: 1px solid #eef2f7;
    flex-wrap: wrap;
}
.csj-resp__avatar {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0.2rem 0.5rem rgba(26, 60, 110, 0.25);
}
.csj-resp__avatar .material-symbols-outlined { font-size: 1.4rem; }

.csj-resp__title {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.csj-resp__title h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a3c6e;
    line-height: 1.25;
    word-break: break-word;
}

.csj-resp__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    align-self: flex-start;
    border: 1px solid transparent;
}
.csj-resp__chip .material-symbols-outlined { font-size: 0.9rem; }
.csj-resp__chip--ok {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #14532d;
    border-color: #86efac;
}
.csj-resp__chip--bad {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border-color: #fca5a5;
}

.csj-resp__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}
.csj-resp__btn {
    position: relative;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.4rem;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}
.csj-resp__btn .material-symbols-outlined { font-size: 1.1rem; }
.csj-resp__btn--primary {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    color: #1a3c6e;
    border-color: #c7d2fe;
}
.csj-resp__btn--primary:hover {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.5rem rgba(26, 60, 110, 0.3);
}
.csj-resp__btn--danger {
    background: #ffffff;
    color: #b91c1c;
    border-color: #fca5a5;
}
.csj-resp__btn--danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #ffffff;
    border-color: #b91c1c;
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.5rem rgba(185, 28, 28, 0.3);
}
/* Tooltip al hover usando .hs-tip ya definido */
.csj-resp__btn:hover > .hs-tip,
.csj-resp__btn:focus-visible > .hs-tip {
    opacity: 1;
    transform: translateX(50%) translateY(0);
}

/* Body del card: secciones de Especialidades y Procesos */
.csj-resp__body {
    padding: 0.85rem 1rem 0.95rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.csj-resp__section {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.csj-resp__section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    color: #1a3c6e;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.csj-resp__section-label .material-symbols-outlined {
    font-size: 1rem;
    color: #2e5c9e;
}

.csj-resp__chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.csj-resp__pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    color: #1a3c6e;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.3;
}
.csj-resp__pill--alt {
    background: linear-gradient(135deg, #f3e8ff 0%, #faf5ff 100%);
    color: #6b21a8;
    border-color: #d8b4fe;
}

.csj-resp__empty {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: #94a3b8;
    font-style: italic;
}
.csj-resp__empty .material-symbols-outlined {
    font-size: 0.95rem;
}

/* Wrapper de subcomponentes "Especialidades" + "Procesos" en el form (legacy) */
.csj-resp-assign {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 0.85rem;
    margin-top: 0.85rem;
}

/* Contador de seleccionados en el header del card (X de Y seleccionadas) */
.csj-resp__counter {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.22rem 0.65rem;
    background: linear-gradient(135deg, #eef2ff 0%, #dbeafe 100%);
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    color: #1a3c6e;
    font-size: 0.72rem;
    font-weight: 600;
    margin-left: auto;
}
.csj-resp__counter b {
    color: #1a3c6e;
    font-weight: 800;
}

/* Selector de chips (especialidades o procesos) con checkbox embebido */
.csj-resp-pick {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 0.4rem;
}
.csj-resp-pick__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.csj-resp-pick__item:hover {
    border-color: #2e5c9e;
    background: #f8fafc;
    transform: translateY(-1px);
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.1);
}
.csj-resp-pick__item.is-selected {
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    border-color: #1a3c6e;
    box-shadow: 0 0 0 1px rgba(26, 60, 110, 0.18);
}

/* Variante alt para procesos (acento morado en lugar de azul) */
.csj-resp-pick--alt .csj-resp-pick__item.is-selected {
    background: linear-gradient(135deg, #f3e8ff 0%, #faf5ff 100%);
    border-color: #6b21a8;
    box-shadow: 0 0 0 1px rgba(107, 33, 168, 0.2);
}
.csj-resp-pick--alt .csj-resp-pick__item.is-selected .csj-resp-pick__check {
    color: #6b21a8;
}
.csj-resp-pick--alt .csj-resp-pick__item.is-selected .csj-resp-pick__name {
    color: #6b21a8;
}

/* Ocultar el checkbox nativo (manteniéndolo accesible) */
.csj-resp-pick__cb {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.csj-resp-pick__check {
    font-size: 1.35rem !important;
    color: #cbd5e1;
    flex-shrink: 0;
    transition: color 0.15s;
}
.csj-resp-pick__item.is-selected .csj-resp-pick__check { color: #1a3c6e; }
.csj-resp-pick__name {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    line-height: 1.3;
    word-break: break-word;
}
.csj-resp-pick__item.is-selected .csj-resp-pick__name {
    color: #1a3c6e;
}

@media (max-width: 700px) {
    .csj-resp__head { flex-wrap: wrap; }
    .csj-resp__actions { order: -1; margin-left: auto; }
}


/* =====================================================================
   GESTIÓN DEL CONSEJO — Datos de contacto (teléfonos y correos)
   ---------------------------------------------------------------------
   Componente que usa estos estilos:
   - resources/js/components/consejo/ContactoComponent.vue
   ===================================================================== */

.csj-contact {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem 1.1rem;
}

.csj-contact__block {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    box-shadow: 0 0.15rem 0.4rem rgba(15, 23, 42, 0.05);
    padding: 1rem 1.1rem;
}

/* Header de cada sección (teléfonos / correos) */
.csj-contact__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px dashed #e2e8f0;
    flex-wrap: wrap;
}
.csj-contact__head-title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}
.csj-contact__head-title > .material-symbols-outlined {
    width: 2.4rem; height: 2.4rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem !important;
    flex-shrink: 0;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.25);
}
.csj-contact__head-title h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a3c6e;
    line-height: 1.2;
}
.csj-contact__head-title p {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.35;
}

.csj-contact__add {
    display: inline-flex !important;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}
.csj-contact__add .material-symbols-outlined { font-size: 1rem; }

/* Grid de cards */
.csj-contact__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 0.65rem;
}

.csj-contact__card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem 0.75rem 1.1rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.6rem;
    transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}
.csj-contact__card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
    border-top-left-radius: 0.6rem;
    border-bottom-left-radius: 0.6rem;
}
.csj-contact__card.is-oficina::before { background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%); }
.csj-contact__card.is-admin::before   { background: linear-gradient(180deg, #16a34a 0%, #15803d 100%); }
.csj-contact__card:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.3rem 0.75rem rgba(15, 23, 42, 0.1);
    border-color: rgba(46, 92, 158, 0.3);
}

.csj-contact__avatar {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #eef4ff 0%, #dbeafe 100%);
    color: #1a3c6e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.csj-contact__avatar .material-symbols-outlined { font-size: 1.25rem; }

.csj-contact__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.csj-contact__name {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: #1a3c6e;
    line-height: 1.25;
    word-break: break-word;
}
.csj-contact__value {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: #2e5c9e;
    text-decoration: none;
    word-break: break-all;
    transition: color 0.15s;
}
.csj-contact__value:hover { color: #1a3c6e; text-decoration: underline; }
.csj-contact__value .material-symbols-outlined {
    font-size: 0.95rem;
    color: #94a3b8;
    flex-shrink: 0;
}
.csj-contact__value small { color: #64748b; font-weight: 500; }
.csj-contact__value b { color: #1a3c6e; }

.csj-contact__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
    align-self: flex-start;
    margin-top: 0.1rem;
}
.csj-contact__chip .material-symbols-outlined { font-size: 0.85rem; }
.csj-contact__chip--ok {
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    color: #1a3c6e;
    border-color: #93c5fd;
}
.csj-contact__chip--info {
    background: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 100%);
    color: #14532d;
    border-color: #86efac;
}

.csj-contact__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

@media (max-width: 700px) {
    .csj-contact__card { flex-wrap: wrap; }
    .csj-contact__actions { width: 100%; justify-content: flex-end; }
}


/* =====================================================================
   GESTIÓN DEL CONSEJO — Facturación (PAC)
   ---------------------------------------------------------------------
   Componente que usa estos estilos:
   - resources/js/components/consejo/PacComponent.vue
   ===================================================================== */

/* Chip "Endpoint activo" en el header del card de producción/development */
.csj-pac__env-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-left: auto;
    border: 1px solid transparent;
}
.csj-pac__env-chip .material-symbols-outlined { font-size: 0.9rem; }
.csj-pac__env-chip--prod {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #14532d;
    border-color: #86efac;
}
.csj-pac__env-chip--dev {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #78350f;
    border-color: #fcd34d;
}

/* Hint debajo del campo "Nueva contraseña" */
.csj-pac__hint {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.3rem;
    padding: 0.3rem 0.6rem;
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    border: 1px solid #c7d2fe;
    border-radius: 0.4rem;
    color: #1a3c6e;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.3;
}
.csj-pac__hint .material-symbols-outlined {
    font-size: 0.95rem;
    color: #2e5c9e;
}

/* Hint de párrafo continuo para la tolerancia (Configuración del Consejo) — a diferencia
   del .csj-pac__hint (inline-flex compacto), este fluye como texto normal con el icono
   alineado al inicio del primer renglón para textos largos. */
.csj-tol-hint {
    margin-top: 0.35rem;
    padding: 0.55rem 0.7rem;
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    border: 1px solid #c7d2fe;
    border-radius: 0.4rem;
    color: #1a3c6e;
    font-size: 0.78rem;
    line-height: 1.45;
    text-align: justify;
}
.csj-tol-hint .material-symbols-outlined {
    color: #2e5c9e;
    font-size: 1rem;
    vertical-align: -3px;
    margin-right: 0.25rem;
}

/* ─── Preview de la tolerancia para recertificación CV (Configuración del Consejo) ─── */
.csj-tol-preview {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.7rem 0.85rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    line-height: 1.4;
    margin-top: 0.35rem;
}
.csj-tol-preview b {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.15rem;
}
.csj-tol-preview span:not(.material-symbols-outlined) {
    font-size: 0.78rem;
}
.csj-tol-preview .material-symbols-outlined {
    font-size: 1.3rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.csj-tol-preview--on {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}
.csj-tol-preview--on .material-symbols-outlined { color: #16a34a; }
.csj-tol-preview--off {
    background: #fef3c7;
    border-color: #fde68a;
    color: #78350f;
}
.csj-tol-preview--off .material-symbols-outlined { color: #b45309; }


/* =====================================================================
   GESTIÓN DEL CONSEJO — Mensajes y notificaciones
   ---------------------------------------------------------------------
   Componente que usa estos estilos:
   - resources/js/components/consejo/MensajesComponent.vue
   ===================================================================== */

/* Contador de caracteres disponibles debajo del textarea */
.csj-msg__counter {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.35rem;
    padding: 0.25rem 0.6rem;
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    border: 1px solid #c7d2fe;
    border-radius: 0.4rem;
    color: #1a3c6e;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.3;
    width: fit-content;
}
.csj-msg__counter .material-symbols-outlined {
    font-size: 0.9rem;
    color: #2e5c9e;
}
.csj-msg__counter b { color: #1a3c6e; font-weight: 700; }
.csj-msg__counter.is-low {
    background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
    border-color: #fcd34d;
    color: #78350f;
}
.csj-msg__counter.is-low .material-symbols-outlined { color: #d97706; }
.csj-msg__counter.is-low b { color: #78350f; }

/* Wrapper de las dos secciones (mensajes + notificaciones) — apila con gap */
.csj-msg-shell {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Variante del layout: cuando no hay aside, ocupa una sola columna */
.ms-form__layout--single {
    grid-template-columns: minmax(0, 1fr) !important;
}

/* Listado de notificaciones (legacy, ya no se usa el wrapper pero mantengo
   estilos por si algún componente lo referencia) */
.csj-noti {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px dashed #cbd5e1;
}

.csj-noti__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    gap: 0.85rem;
    margin-top: 0.5rem;
}

.csj-noti__card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.7rem;
    box-shadow: 0 0.15rem 0.4rem rgba(15, 23, 42, 0.05);
    overflow: hidden;
    transition: box-shadow 0.18s, transform 0.18s;
}
.csj-noti__card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
    border-top-left-radius: 0.7rem;
    border-bottom-left-radius: 0.7rem;
}
.csj-noti__card.is-on::before  { background: linear-gradient(180deg, #16a34a 0%, #15803d 100%); }
.csj-noti__card.is-off::before { background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%); }
.csj-noti__card:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.3rem 0.8rem rgba(15, 23, 42, 0.1);
}

.csj-noti__head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 0.95rem 0.75rem 1.1rem;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border-bottom: 1px solid #eef2f7;
    flex-wrap: wrap;
}
.csj-noti__icon {
    width: 2.2rem; height: 2.2rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem !important;
    flex-shrink: 0;
}
.csj-noti__card.is-off .csj-noti__icon {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
}
.csj-noti__title {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.csj-noti__title h3 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #1a3c6e;
    line-height: 1.25;
    word-break: break-word;
}

.csj-noti__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    align-self: flex-start;
    border: 1px solid transparent;
}
.csj-noti__chip .material-symbols-outlined { font-size: 0.85rem; }
.csj-noti__chip--ok {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #14532d;
    border-color: #86efac;
}
.csj-noti__chip--bad {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}

.csj-noti__body {
    padding: 0.75rem 0.95rem 0.85rem 1.1rem;
}
.csj-noti__body p {
    margin: 0;
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.5;
    white-space: pre-line;
}


/* =====================================================================
   GESTIÓN DEL CONSEJO — Configuración (avisos de privacidad)
   ---------------------------------------------------------------------
   Componente que usa estos estilos:
   - resources/js/components/consejo/ConfiguracionComponent.vue
   ===================================================================== */

/* Intro / subtítulo dentro del card "Avisos de privacidad" */
.csj-aviso-intro {
    margin: -0.3rem 0 0.6rem;
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.45;
}

/* Grid de dos columnas para los avisos de privacidad */
.csj-aviso-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 0.85rem;
}

/* Sub-bloque por aviso (Registro / Currículum) dentro del card padre */
.csj-aviso {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.7rem 0.85rem 0.85rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.55rem;
}
.csj-aviso__head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px dashed #cbd5e1;
}
.csj-aviso__head > .material-symbols-outlined {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 0.4rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem !important;
    flex-shrink: 0;
}
.csj-aviso__head p {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: #1a3c6e;
    line-height: 1.25;
}

/* Estado "documento ya cargado" — pill con nombre del archivo + botón rojo */
.csj-aviso-active {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.85rem;
    background: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 100%);
    border: 1px solid #86efac;
    border-radius: 0.55rem;
}
.csj-aviso-active__file {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 1;
    min-width: 0;
    color: #14532d;
    font-size: 0.86rem;
    font-weight: 600;
    word-break: break-word;
}
.csj-aviso-active__file .material-symbols-outlined {
    font-size: 1.3rem;
    color: #16a34a;
    flex-shrink: 0;
}
.csj-aviso-active__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    background: #ffffff;
    color: #b91c1c;
    border: 1px solid #fca5a5;
    border-radius: 0.45rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.csj-aviso-active__btn:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #ffffff;
    border-color: #b91c1c;
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.5rem rgba(185, 28, 28, 0.3);
}
.csj-aviso-active__btn .material-symbols-outlined { font-size: 1rem; }

@media (max-width: 700px) {
    .csj-aviso-active { flex-direction: column; align-items: stretch; }
    .csj-aviso-active__btn { justify-content: center; }
}


/* =====================================================================
   ASIGNAR REVISOR — selector de revisor con radio cards
   ---------------------------------------------------------------------
   Componente que usa estos estilos:
   - resources/js/components/expediente/especialidades/AssignReviewersComponent.vue
   ===================================================================== */
.hs-rev-pick {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 0.55rem;
    margin-top: 0.4rem;
    max-height: 26rem;
    overflow-y: auto;
    padding: 0.15rem;
}
.hs-rev-pick__item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.85rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.55rem;
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 0;
}
.hs-rev-pick__item:hover {
    border-color: #2e5c9e;
    box-shadow: 0 0.2rem 0.5rem rgba(26, 60, 110, 0.12);
    transform: translateY(-1px);
}
.hs-rev-pick__item.is-selected {
    background: linear-gradient(135deg, #eef2ff 0%, #f0f7ff 100%);
    border-color: #1a3c6e;
    box-shadow: 0 0 0 2px rgba(26, 60, 110, 0.18);
}
/* Esconder el radio nativo (pero accesible) */
.hs-rev-pick__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.hs-rev-pick__check {
    font-size: 1.5rem !important;
    color: #cbd5e1;
    flex-shrink: 0;
    transition: color 0.15s;
}
.hs-rev-pick__item.is-selected .hs-rev-pick__check {
    color: #1a3c6e;
}
.hs-rev-pick__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.hs-rev-pick__name {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a3c6e;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hs-rev-pick__email {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hs-rev-pick__email .material-symbols-outlined {
    font-size: 0.9rem;
    color: #94a3b8;
    flex-shrink: 0;
}
/* Correo institucional del revisor: en su propia línea, con indicador de verificación */
.hs-rev-pick__email--inst {
    display: flex;
}
.hs-rev-pick__email .hs-rev-pick__verif {
    font-size: 0.95rem;
}
.hs-rev-pick__email .hs-rev-pick__verif.is-ok {
    color: #16a34a;
}
.hs-rev-pick__email .hs-rev-pick__verif.is-pending {
    color: #d4a700;
}
.hs-rev-pick__count {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: #eef2f7;
    color: #1a3c6e;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}
.hs-rev-pick__count .material-symbols-outlined {
    font-size: 0.95rem;
    color: #2e5c9e;
}
.hs-rev-pick__item.is-selected .hs-rev-pick__count {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
}
.hs-rev-pick__item.is-selected .hs-rev-pick__count .material-symbols-outlined {
    color: #fde68a;
}


/* =====================================================================
   FASES — variantes Aprobado/No aprobado del toggle y hint de puntos
   ---------------------------------------------------------------------
   Componente que usa estos estilos:
   - resources/js/components/expediente/especialidades/FasesComponent.vue
   ===================================================================== */
/* Variantes ok/bad del toggle (se aplican como modificadores) */
.ms-form__toggle-btn.ms-form__toggle-btn--ok.is-active {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    color: #ffffff !important;
    border-color: #15803d !important;
}
.ms-form__toggle-btn.ms-form__toggle-btn--bad.is-active {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    color: #ffffff !important;
    border-color: #b91c1c !important;
}

/* Hint debajo del input de puntos: máximo permitido */
.hs-fase-form__hint {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.35rem;
    padding: 0.25rem 0.55rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
    border: 1px solid #fde68a;
    border-radius: 0.35rem;
    color: #78350f;
    font-size: 0.72rem;
    font-weight: 600;
}
.hs-fase-form__hint .material-symbols-outlined {
    font-size: 0.9rem;
    color: #d97706;
}
.hs-fase-form__hint b { color: #78350f; font-weight: 800; }


/* =====================================================================
   AJUSTE RESPONSIVE DE LISTADOS .ms-list-card
   Las cards de listado (hospital privado / institución pública / mis
   especialidades) no respetaban el ancho disponible en ciertos
   breakpoints. Aquí forzamos auto-fit con minmax basado en el ancho
   del contenedor y aseguramos que el contenido se ajuste / haga wrap.
   ---------------------------------------------------------------------
   Componentes que usan estos estilos:
   - resources/js/components/expediente/hospital/HospitalComponent.vue
   - resources/js/components/expediente/institucion/InstitutionComponent.vue
   - resources/js/components/expediente/especialidades/MySpecialtiesComponent.vue
   ===================================================================== */
.ms-list-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)) !important;
}
.ms-list-card {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
.ms-list-card__head {
    min-width: 0;
}
.ms-list-card__title {
    min-width: 0;
    flex: 1 1 0;
}
.ms-list-card__title b {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
    line-height: 1.25;
}
.ms-list-card__title small {
    word-break: break-word;
    line-height: 1.3;
}
.ms-list-card__body p,
.ms-list-card__body span {
    word-break: break-word;
    overflow-wrap: anywhere;
}
.ms-list-card__actions {
    flex-wrap: wrap;
    min-width: 0;
}
.ms-list-card__actions > * {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 560px) {
    .ms-list-grid {
        grid-template-columns: 1fr !important;
    }
    .ms-list-card { padding: 0.7rem 0.85rem; }
    .ms-list-card__actions { gap: 0.3rem; }
}


/* =====================================================================
   DIRECTORIO MÉDICO — shell, panel de filtros y paginación
   ---------------------------------------------------------------------
   Componentes que usan estos estilos:
   - resources/js/components/directorio/FatherComponent.vue
   - resources/js/components/directorio/FilterComponent.vue
   - resources/js/components/directorio/PaginateComponent.vue
   - resources/js/components/directorio/ListComponent.vue (banners hs-notice)
   ===================================================================== */

/* ─── Shell: 20% filtros (izq) + 80% listado (der) ─── */
.dir-list-shell {
    display: grid;
    grid-template-columns: 20% minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.75rem;
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}
.dir-list-aside {
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.dir-list-aside::-webkit-scrollbar { width: 0.45rem; }
.dir-list-aside::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }

.dir-list-main {
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.dir-list-main::-webkit-scrollbar { width: 0.6rem; }
.dir-list-main::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    border-radius: 999px;
}
.dir-list-main::-webkit-scrollbar-track { background: #f1f5f9; }

/* Barra para plegar/desplegar filtros: oculta en escritorio (los filtros van
   siempre visibles en la columna aside); solo aparece al hacerse responsive. */
.dir-filters__toggle { display: none; }

@media (max-width: 992px) {
    .dir-list-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
    /* El aside deja de reservar un alto fijo: ahora manda el panel colapsable. */
    .dir-list-aside { max-height: none; overflow: visible; }

    /* Barra "Mostrar / Ocultar filtros" (encabezado del panel colapsable). */
    .dir-filters__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        width: 100%;
        padding: 0.7rem 1rem;
        background: #f8fafc;
        border: none;
        border-bottom: 1px solid #e2e8f0;
        color: #1a3c6e;
        font-family: inherit;
        font-size: 0.85rem;
        font-weight: 700;
        cursor: pointer;
    }
    .dir-filters__toggle:hover { background: #eef2f7; }
    .dir-filters__toggle-left {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
    }
    .dir-filters__toggle .material-symbols-outlined { font-size: 1.15rem; }
    .dir-filters__toggle-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.2rem;
        height: 1.2rem;
        padding: 0 0.35rem;
        border-radius: 999px;
        background: #2e5c9e;
        color: #ffffff;
        font-size: 0.68rem;
        font-weight: 700;
    }

    /* Contenido colapsable con animación de altura: el truco grid 1fr↔0fr sí
       permite transicionar hasta la altura real del contenido, sin fijar un
       max-height (que provoca salto/retardo al terminar). El hijo interno lleva
       overflow:hidden + min-height:0 para que se recorte durante el pliegue. */
    .dir-filters__collapsible {
        display: grid;
        grid-template-rows: 1fr;
        transition: grid-template-rows 0.25s ease;
    }
    .dir-filters.is-collapsed .dir-filters__collapsible {
        grid-template-rows: 0fr;
    }
    .dir-filters__collapsible-inner {
        min-height: 0;
        overflow: hidden;
    }
}

/* Respeta la preferencia del sistema de reducir animaciones. */
@media (prefers-reduced-motion: reduce) {
    .dir-filters__collapsible { transition: none; }
}

/* ─── Panel de filtros (vertical apilado) ─── */
.dir-filters {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    box-shadow: 0 0.15rem 0.4rem rgba(15, 23, 42, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.dir-filters__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    flex-wrap: wrap;
}
.dir-filters__header-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}
.dir-filters__header-title > .material-symbols-outlined {
    width: 2.2rem; height: 2.2rem;
    border-radius: 0.45rem;
    background: rgba(255, 255, 255, 0.18);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.3rem !important;
    flex-shrink: 0;
}
.dir-filters__header-title h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}
.dir-filters__header-title p {
    margin: 0;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.dir-filters__export {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.75rem;
    background: linear-gradient(135deg, #fde9a8 0%, #f5c451 100%);
    color: #6b4f00;
    border: 1px solid #f5c451;
    border-radius: 0.45rem;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}
.dir-filters__export:hover {
    background: linear-gradient(135deg, #f5c451 0%, #d4a017 100%);
    color: #3b2a00;
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.5rem rgba(212, 160, 23, 0.4);
}
.dir-filters__export .material-symbols-outlined { font-size: 1rem; }

/* ───────────────────────────────────────────────────────────────
   Modal de exportación del directorio (elegir secciones del Excel)
   ─────────────────────────────────────────────────────────────── */
.dir-export {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 28, 50, 0.55);
}
.dir-export__dialog {
    width: 100%;
    max-width: 33rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 0.7rem;
    box-shadow: 0 1rem 2.5rem rgba(15, 28, 50, 0.35);
    overflow: hidden;
}
.dir-export__head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.9rem 1.1rem;
    background: linear-gradient(135deg, #1f4e79 0%, #2e75b6 100%);
    color: #fff;
    flex-shrink: 0;
}
.dir-export__head > .material-symbols-outlined { font-size: 1.6rem; }
.dir-export__head h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.dir-export__head p { margin: 0; font-size: 0.76rem; opacity: 0.9; }
.dir-export__close {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.4rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dir-export__close:hover { background: rgba(255, 255, 255, 0.3); }

.dir-export__body { padding: 1rem 1.1rem; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.dir-export__hint {
    margin: 0 0 0.8rem;
    font-size: 0.8rem;
    color: #475569;
    line-height: 1.5;
}
.dir-export__toolbar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}
.dir-export__toolbar button {
    flex: 1;
    padding: 0.4rem 0.5rem;
    background: #eef2f7;
    border: 1px solid #d8e0ea;
    border-radius: 0.4rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: #1a3c6e;
    cursor: pointer;
    transition: background 0.15s;
}
.dir-export__toolbar button:hover { background: #dbe6f5; }

.dir-export__item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.7rem;
    margin-bottom: 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.dir-export__item:hover { border-color: #2e75b6; background: #f7fafd; }
.dir-export__item.is-fixed { cursor: default; background: #f1f5f9; }
.dir-export__item input[type="checkbox"] { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
.dir-export__swatch {
    width: 0.85rem;
    height: 1.5rem;
    border-radius: 0.25rem;
    flex-shrink: 0;
}
.dir-export__item-text { display: flex; flex-direction: column; line-height: 1.3; }
.dir-export__item-text b { font-size: 0.84rem; color: #1e293b; }
.dir-export__item-text small { font-size: 0.72rem; color: #64748b; }
.dir-export__badge {
    margin-left: auto;
    font-size: 0.66rem;
    font-weight: 700;
    color: #1a3c6e;
    background: #dbe6f5;
    padding: 0.15rem 0.5rem;
    border-radius: 0.85rem;
    flex-shrink: 0;
}

.dir-export__foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0.85rem 1.1rem;
    border-top: 1px solid #eef2f7;
    background: #fafbfc;
    flex-shrink: 0;
}
.dir-export__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    border-radius: 0.45rem;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s;
}
.dir-export__btn .material-symbols-outlined { font-size: 1.05rem; }
.dir-export__btn--ghost { background: #fff; border-color: #d8e0ea; color: #475569; }
.dir-export__btn--ghost:hover { background: #eef2f7; }
.dir-export__btn--primary { background: linear-gradient(135deg, #1f4e79 0%, #2e75b6 100%); color: #fff; }
.dir-export__btn--primary:hover { box-shadow: 0 0.2rem 0.5rem rgba(31, 78, 121, 0.4); transform: translateY(-1px); }

/* Secciones del filtro */
.dir-filters__section {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #eef2f7;
}
.dir-filters__section:last-of-type { border-bottom: none; }
.dir-filters__section-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #1a3c6e;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.dir-filters__section-title .material-symbols-outlined {
    font-size: 1rem;
    color: #2e5c9e;
}

/* Campos */
.dir-filters__field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.65rem;
}
.dir-filters__field:last-child { margin-bottom: 0; }
.dir-filters__field label {
    font-size: 0.74rem;
    font-weight: 600;
    color: #475569;
}
.dir-filters__field input,
.dir-filters__field select {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.4rem;
    background: #ffffff;
    color: #1e293b;
    font-size: 0.85rem;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.dir-filters__field input:focus,
.dir-filters__field select:focus {
    outline: none;
    border-color: #2e5c9e;
    box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.15);
}

/* Acciones del filtro */
.dir-filters__actions {
    padding: 0.85rem 1rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}
.dir-filters__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    padding: 0.55rem 0.85rem;
    border-radius: 0.45rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s;
}
.dir-filters__btn .material-symbols-outlined { font-size: 1rem; }
.dir-filters__btn--clear {
    background: #ffffff;
    color: #475569;
    border-color: #cbd5e1;
}
.dir-filters__btn--clear:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #ffffff;
    border-color: #b91c1c;
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.5rem rgba(185, 28, 28, 0.3);
}

/* ─── Paginación ─── */
.dir-paginate {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.65rem;
    box-shadow: 0 0.1rem 0.3rem rgba(15, 23, 42, 0.05);
    flex-shrink: 0;
}
.dir-paginate__total {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #475569;
    font-weight: 500;
}
.dir-paginate__total .material-symbols-outlined {
    width: 2rem; height: 2rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
}
.dir-paginate__total b { color: #1a3c6e; font-weight: 700; }

.dir-paginate__nav {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.55rem;
}
.dir-paginate__btn {
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 0.55rem;
    border-radius: 0.4rem;
    background: transparent;
    border: 1px solid transparent;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dir-paginate__btn:hover:not(:disabled):not(.is-active) {
    background: #eef2ff;
    color: #1a3c6e;
}
.dir-paginate__btn.is-active {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    box-shadow: 0 0.2rem 0.45rem rgba(26, 60, 110, 0.3);
}
.dir-paginate__btn--nav {
    color: #2e5c9e;
}
.dir-paginate__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.dir-paginate__btn .material-symbols-outlined { font-size: 1.1rem; }

@media (max-width: 560px) {
    .dir-paginate { justify-content: center; }
    .dir-paginate__total { width: 100%; justify-content: center; }
}


/* ========================================================================
   SIDEBAR — Estilo navy (overrides sobre luaz-styles.css)
   Sin cambios de markup ni de lógica; solo apariencia.
   Paleta: #1a3c6e (navy oscuro) → #2e5c9e (navy medio) + acento dorado en
   el indicador del item activo.
   ======================================================================== */

/* Wrapper general del app. El sidebar mide 86% de alto y deja ver el 14%
   inferior del .container por detrás del user-button: si queda con el azul
   viejo (#4080e9) se nota una franja brillante abajo. Pintamos el container
   con el navy final del gradiente para que el área bajo el user-button se
   integre visualmente con el sidebar. */
.container {
    background-color: #2e5c9e !important;
}

/* Fondo del sidebar: gradiente navy con sombra lateral */
.sidebar {
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0.15rem 0 0.6rem rgba(15, 28, 50, 0.22);
}

/* Scrollbar interno (cuando el menú es largo) */
.sidebar::-webkit-scrollbar { width: 0.35rem; }
.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 999px;
}
.sidebar::-webkit-scrollbar-track { background: transparent; }

/* Logo: blanco con tipografía serif (alineado al resto del sistema) */
.logo h1 {
    color: #fff !important;
    font-family: 'Merriweather', serif !important;
    font-weight: 700 !important;
    text-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.25);
    letter-spacing: 0.05em;
}
.logo h4 {
    color: rgba(255, 255, 255, 0.65) !important;
    font-weight: 400 !important;
}
.toggle-title { color: #fff !important; }

/* Sidebar: un poco más ancho por defecto para acomodar nombres largos */
.sidebar {
    min-width: 290px !important;
}

/* .list-items con scroll interno independiente. Reservamos espacio al final
   para que el último item no quede tapado por el .user-button (que está
   fixed al bottom del viewport, encima del sidebar). */
.sidebar .list-items {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: clamp(80px, 11vh, 110px) !important;
    /* Scrollbar discreto navy */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
.sidebar .list-items::-webkit-scrollbar {
    width: 0.35rem;
}
.sidebar .list-items::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 999px;
}
.sidebar .list-items::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}
.sidebar .list-items::-webkit-scrollbar-track {
    background: transparent;
}

/* Items del menú principal */
.list-items ul li {
    margin: 0.15rem 0 !important;
    /* FIX clave: por defecto luaz pone display:flex SIN dirección (row), lo
       que coloca el <a> del módulo y su <ul.inner-list-one> uno al lado del
       otro y rompe tanto el ancho del texto como el acordeón. Forzamos
       column para que el submenú quede DEBAJO del módulo padre. */
    flex-direction: column !important;
    align-items: stretch !important;
}
.list-items ul li a {
    color: rgba(255, 255, 255, 0.85) !important;
    border-radius: 0.45rem !important;
    padding: 0.55rem 0.75rem !important;
    margin: 0.1rem 0;
    border: 1px solid transparent;
    transition: all 0.2s ease !important;
    gap: 0.6rem !important;
    min-height: 2.4rem;
    align-items: center !important;
}
.list-items ul li a p {
    margin: 0 !important;
    margin-left: 0 !important;
    font-weight: 500 !important;
    font-size: 0.88rem !important;
    line-height: 1.28 !important;
    letter-spacing: 0.01em;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: break-word;
    flex: 1;
    /* Cap a 2 líneas con ellipsis si el nombre es muy largo */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.list-items ul li a span {
    font-size: 1.25rem !important;
    flex-shrink: 0;
}
/* Flecha derecha del módulo con submenú */
.list-items ul li a .disappear-toggle {
    margin-left: auto !important;
    font-size: 1.05rem !important;
    opacity: 0.6;
}
.list-items ul li a:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    transform: translateX(0.25rem) !important;
    border-color: rgba(255, 255, 255, 0.18);
}

/* Flecha (`disappear-toggle`) del lado derecho — más sutil */
.list-items ul li a .disappear-toggle {
    margin-left: auto;
    opacity: 0.6;
    font-size: 1.1rem !important;
    transition: transform 0.2s, opacity 0.2s;
}
.list-items ul li:hover > a .disappear-toggle {
    opacity: 1;
    transform: translateX(0.15rem);
}

/* Item activo: pill blanca con acento dorado a la izquierda */
.selected-navpage {
    background: linear-gradient(135deg, #ffffff 0%, #f7fafd 100%) !important;
    border-radius: 0.45rem !important;
    box-shadow: 0 0.15rem 0.45rem rgba(15, 28, 50, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    position: relative !important;
}
.selected-navpage::before {
    content: '';
    position: absolute;
    left: -0.7rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.25rem;
    height: 65%;
    background: linear-gradient(180deg, #fbbf24, #f59e0b);
    border-radius: 999px;
    box-shadow: 0 0 0.4rem rgba(251, 191, 36, 0.55);
}
.selected-navpage p,
.selected-navpage span {
    color: #1a3c6e !important;
    font-weight: 700 !important;
}
.selected-navpage:hover {
    background: linear-gradient(135deg, #f7fafd 0%, #e7eef5 100%) !important;
    transform: none !important;
}
.selected-navpage:hover > li,
.selected-navpage:hover {
    background: linear-gradient(135deg, #f7fafd 0%, #e7eef5 100%) !important;
}

/* Submenús estilo ACORDEÓN INLINE (Propuesta B — siempre acordeón, sin popouts
   flotantes). Aplica a todos los tamaños cuando el sidebar está expandido.
   En collapsed-desktop (#toggle-checkbox:checked) se revierte a popout
   flotante porque sin texto el acordeón no tendría sentido. */
.sidebar .inner-list-one {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    transform: none !important;
    opacity: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    width: calc(100% - 1rem) !important;
    margin: 0 0 0 1rem !important;
    padding: 0 0.3rem !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 0 !important;
    border-left: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 0 0.45rem 0.45rem 0 !important;
    box-shadow: none !important;
    min-width: 0 !important;
    transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.2s ease, padding 0.2s ease !important;
}

/* El submenú se abre cuando:
   1. el usuario hace click en el módulo (focus-within mantiene el foco), o
   2. el módulo contiene la página activa (el <a> tiene .selected-navpage tras
      navegar a un sub-item — así el menú no se cierra al recargar la página). */
.sidebar .ul li:focus-within > .inner-list-one,
.sidebar .ul li:has(> a.selected-navpage) > .inner-list-one {
    opacity: 1 !important;
    max-height: 60rem !important;
    margin: 0.35rem 0 0.5rem 1rem !important;
    padding: 0.35rem !important;
}

/* Items del submenú dentro del acordeón (sobre fondo navy del sidebar) */
.sidebar .inner-list-one li {
    margin: 0.1rem 0 !important;
}
.sidebar .inner-list-one li a {
    border-radius: 0.4rem !important;
    padding: 0.5rem 0.7rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
    transition: all 0.18s ease !important;
    background: transparent !important;
    gap: 0.55rem !important;
    min-height: 2.1rem;
    align-items: center !important;
    border: 1px solid transparent;
}
.sidebar .inner-list-one li a p,
.sidebar .inner-list-one li a span {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500 !important;
}
.sidebar .inner-list-one li a span {
    font-size: 1.1rem !important;
    flex-shrink: 0;
}
.sidebar .inner-list-one li a p {
    margin: 0 !important;
    margin-left: 0 !important;
    font-size: 0.84rem !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: break-word;
    flex: 1;
}
.sidebar .inner-list-one li a:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateX(0.2rem) !important;
}
.sidebar .inner-list-one li a:hover p,
.sidebar .inner-list-one li a:hover span {
    color: #fff !important;
}

/* Item activo dentro del acordeón: pill blanca con texto navy */
.sidebar .inner-list-one li.selected-navpage {
    background: linear-gradient(135deg, #fff, #f7fafd) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 0.15rem 0.4rem rgba(15, 28, 50, 0.15) !important;
}
.sidebar .inner-list-one li.selected-navpage::before {
    display: none !important;
}
.sidebar .inner-list-one li.selected-navpage a {
    background: transparent !important;
}
.sidebar .inner-list-one li.selected-navpage a p,
.sidebar .inner-list-one li.selected-navpage a span {
    color: #1a3c6e !important;
    font-weight: 700 !important;
}

/* Flecha del módulo padre: rota 90° cuando el acordeón está abierto (click) */
.sidebar .list-items ul li > a .disappear-toggle {
    transition: transform 0.25s ease !important;
}
.sidebar .list-items ul li:focus-within > a .disappear-toggle,
.sidebar .list-items ul li:has(> a.selected-navpage) > a .disappear-toggle {
    transform: rotate(90deg) !important;
    opacity: 1 !important;
}

/* EXCEPCIÓN: en desktop colapsado (4% width), el acordeón no tiene sentido
   porque no se ve el texto. Revertimos al popout flotante original con
   estilo navy ya definido. */
@media (min-width: 993px) {
    #toggle-checkbox:checked ~ main .sidebar .inner-list-one {
        position: absolute !important;
        display: none !important;
        opacity: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        width: auto !important;
        min-width: 15rem !important;
        margin: 0 !important;
        padding: 0.4rem !important;
        background: #fff !important;
        border: 1px solid rgba(46, 92, 158, 0.18) !important;
        border-radius: 0.55rem !important;
        box-shadow: 0 0.5rem 1.5rem rgba(15, 28, 50, 0.28) !important;
        transform: translateX(3.5rem) !important;
    }
    #toggle-checkbox:checked ~ main .sidebar .ul li:focus-within > .inner-list-one {
        display: flex !important;
        opacity: 1 !important;
        margin: 0 !important;
        padding: 0.4rem !important;
    }
    /* Items del popout flotante: texto navy sobre bg blanco */
    #toggle-checkbox:checked ~ main .sidebar .inner-list-one li a,
    #toggle-checkbox:checked ~ main .sidebar .inner-list-one li a p,
    #toggle-checkbox:checked ~ main .sidebar .inner-list-one li a span {
        color: #1a3c6e !important;
    }
    #toggle-checkbox:checked ~ main .sidebar .inner-list-one li a {
        color: #5a7a9a !important;
    }
    #toggle-checkbox:checked ~ main .sidebar .inner-list-one li a:hover {
        background: rgba(46, 92, 158, 0.08) !important;
        border-color: transparent !important;
    }
    #toggle-checkbox:checked ~ main .sidebar .inner-list-one li a:hover p,
    #toggle-checkbox:checked ~ main .sidebar .inner-list-one li a:hover span {
        color: #2e5c9e !important;
    }
    /* En popout no rota la flecha (no hay flecha visible) */
    #toggle-checkbox:checked ~ main .sidebar .list-items ul li:hover > a .disappear-toggle {
        transform: none !important;
    }
}

/* Tooltips (modo sidebar colapsado) */
.tooltip-text {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%) !important;
    box-shadow: 0.2rem 0.2rem 0.6rem rgba(15, 28, 50, 0.3) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    padding: 0.55rem 0.85rem !important;
    border-radius: 0 0.45rem 0.45rem 0 !important;
    min-width: auto !important;
}
.tt-special {
    border-radius: 0.45rem !important;
    padding: 0.4rem 0.7rem !important;
}

/* Botón colapsar (chevron flotante) */
.collapse-sidebar span {
    background: linear-gradient(135deg, #ffffff 0%, #f7fafd 100%) !important;
    color: #2e5c9e !important;
    border: 2px solid #fff;
    box-shadow: 0 0.2rem 0.55rem rgba(15, 28, 50, 0.28);
    font-size: 2.1rem !important;
}
.collapse-sidebar span:hover {
    color: #1a3c6e !important;
    box-shadow: 0 0.3rem 0.85rem rgba(15, 28, 50, 0.35);
}

/* ============================================================================
   SIDEBAR COMPACTO EN TABLETS / LAPTOPS ANGOSTAS (601-1100px)
   ----------------------------------------------------------------------------
   Rango donde el usuario tiene pantalla suficiente para tener el sidebar
   siempre visible (no necesita drawer), pero el de desktop (290px) come
   demasiado espacio. Lo dejamos en 215px con tipografía y paddings reducidos.
   La chevron permite colapsarlo a off-screen + hamburguesa flotante para
   reabrir (estado persistente por localStorage). Cubre iPad Mini portrait
   (768), iPad standard portrait (810), iPad landscape (1024), etc.
   ============================================================================ */
@media (min-width: 601px) and (max-width: 1100px) {
    /* Sidebar compacto (overrides ambos estados del toggle viejo) */
    #toggle-checkbox:not(:checked) ~ main .sidebar,
    #toggle-checkbox:checked ~ main .sidebar,
    main .sidebar {
        width: 215px !important;
        min-width: 215px !important;
        max-width: 215px !important;
        padding: 16px 6px 8px 6px !important;
    }
    /* Al activar el toggle, NO colapsar a 73px (se ignora el comportamiento viejo) */
    #toggle-checkbox:checked ~ main .sidebar .list-items .ul li a p { display: block !important; }
    #toggle-checkbox:checked ~ main .sidebar .toggle-revert-title { display: block !important; }
    #toggle-checkbox:checked ~ main .sidebar .toggle-title { display: none !important; }
    #toggle-checkbox:checked ~ main .sidebar .disappear-toggle { display: inline-block !important; }
    #toggle-checkbox:checked ~ main .sidebar .inner-list-one { transform: none !important; }

    /* Logo compacto */
    main .sidebar .logo h1 { font-size: 1.4rem !important; }
    main .sidebar .logo h4 { font-size: 0.7rem !important; }

    /* Items del menú principal: densos */
    main .sidebar .list-items ul li a {
        padding: 0.4rem 0.55rem !important;
        gap: 0.45rem !important;
        min-height: 2.1rem !important;
    }
    main .sidebar .list-items ul li a p {
        font-size: 0.78rem !important;
        line-height: 1.2 !important;
        -webkit-line-clamp: 2 !important;
    }
    main .sidebar .list-items ul li a span { font-size: 1.1rem !important; }
    main .sidebar .list-items ul li a .disappear-toggle { font-size: 0.95rem !important; }
    main .sidebar .list-items ul li a:hover { transform: none !important; }

    /* Submenús (acordeón inline) más compactos */
    main .sidebar .inner-list-one {
        margin: 0.2rem 0 0.3rem 0.6rem !important;
        padding: 0.25rem 0.25rem !important;
        width: calc(100% - 0.6rem) !important;
    }
    main .sidebar .inner-list-one li a {
        padding: 0.35rem 0.5rem !important;
        gap: 0.4rem !important;
        min-height: 1.9rem !important;
    }
    main .sidebar .inner-list-one li a p { font-size: 0.75rem !important; line-height: 1.2 !important; }
    main .sidebar .inner-list-one li a span { font-size: 1rem !important; }
    main .sidebar .inner-list-one li a:hover { transform: none !important; }

    /* User-button alineado al ancho del sidebar */
    #toggle-checkbox:not(:checked) ~ header .user-button,
    #toggle-checkbox:checked ~ header .user-button,
    header .user-button {
        width: 215px !important;
        min-width: 215px !important;
        max-width: 215px !important;
    }

    /* ── ESTADO COLAPSADO POR CHEVRON/NAVEGACIÓN ──
       JS agrega la clase .sigme-narrow-collapsed al click en chevron o link de
       menú. Sacamos al sidebar del flow con position:fixed para que el
       contenido tome el espacio (sin esto el fondo navy de .container quedaría
       como una franja). Persiste vía localStorage. */
    main .sidebar.sigme-narrow-collapsed,
    #toggle-checkbox:not(:checked) ~ main .sidebar.sigme-narrow-collapsed,
    #toggle-checkbox:checked ~ main .sidebar.sigme-narrow-collapsed {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        z-index: 200;
        box-shadow: 0.4rem 0 1.5rem rgba(15, 28, 50, 0.4);
    }
    header .user-button.sigme-narrow-collapsed,
    #toggle-checkbox:not(:checked) ~ header .user-button.sigme-narrow-collapsed,
    #toggle-checkbox:checked ~ header .user-button.sigme-narrow-collapsed {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        z-index: 201;
    }
}

/* ── Botón hamburguesa flotante para reabrir el sidebar compacto colapsado ──
   Estilos GLOBALES sin !important en display: el JS controla visibilidad vía
   style.display. Solo aparece en 769-1100 cuando el usuario cerró el sidebar
   compacto. En ≤768 (drawer nativo) el JS lo mantiene oculto. */
.sigme-reopen-menu {
    display: none; /* JS lo cambia a 'flex' cuando corresponde */
    position: fixed;
    top: 0.7rem;
    left: 0.7rem;
    z-index: 9999;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.9);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0.3rem 0.85rem rgba(15, 28, 50, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sigme-reopen-menu .material-symbols-outlined { font-size: 1.5rem; }
.sigme-reopen-menu:hover {
    transform: scale(1.08);
    box-shadow: 0 0.45rem 1.1rem rgba(15, 28, 50, 0.45);
}

/* User button (footer del sidebar) */
.user-button {
    background: linear-gradient(180deg, transparent 0%, rgba(15, 28, 50, 0.2) 100%);
}
.ub-section {
    color: #fff !important;
    border-radius: 0.5rem !important;
    transition: all 0.2s ease !important;
}
.ub-section img {
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0.15rem 0.4rem rgba(15, 28, 50, 0.3);
}
.ub-section:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}
.ub-section:hover img {
    border-color: rgba(255, 255, 255, 0.55);
}

/* Menú dropdown del usuario */
.user-button-menu ul {
    background: #fff !important;
    border: 1px solid rgba(46, 92, 158, 0.18) !important;
    box-shadow: 0 -0.4rem 1.2rem rgba(15, 28, 50, 0.18) !important;
    border-radius: 0.55rem 0.55rem 0 0 !important;
}
.user-button-menu ul li a {
    color: #1a3c6e !important;
    border-radius: 0.4rem !important;
    transition: all 0.18s ease !important;
}
.user-button-menu ul li a p,
.user-button-menu ul li a span {
    color: #1a3c6e !important;
}
.user-button-menu ul li a:hover {
    background: rgba(46, 92, 158, 0.08) !important;
    transform: translateX(0.15rem);
}
.user-button-logout:hover {
    background: rgba(220, 38, 38, 0.1) !important;
}
.user-button-logout p,
.user-button-logout span {
    color: #b91c1c !important;
}
.user-button-logout:hover p,
.user-button-logout:hover span {
    color: #991b1b !important;
}

/* Modo colapsado: ajustes adicionales */
#toggle-checkbox:checked ~ main .sidebar .list-items ul li a {
    justify-content: center !important;
    padding: 0.65rem !important;
}
#toggle-checkbox:checked ~ main .sidebar .list-items ul li a:hover {
    transform: scale(1.08) !important;
}
#toggle-checkbox:checked ~ main .sidebar .selected-navpage::before {
    display: none;
}

/* ========================================================================
   USER BUTTON — dropdown abierto (Mi cuenta / Cambiar de rol / Cerrar sesión)
   Reforzamos la paleta navy cuando #user-checkbox está marcado.
   ======================================================================== */

/* Profile clickeable cuando está abierto */
#user-checkbox:checked ~ .ub-section {
    background: #fff !important;
    color: #1a3c6e !important;
    border-radius: 0 0 0.5rem 0.5rem !important;
    box-shadow: 0 -0.2rem 0.5rem rgba(15, 28, 50, 0.15);
}
#user-checkbox:checked ~ .ub-section p,
#user-checkbox:checked ~ .ub-section span {
    color: #1a3c6e !important;
    font-weight: 600 !important;
}
#user-checkbox:checked ~ .ub-section img {
    border-color: rgba(46, 92, 158, 0.4);
}

/* Dropdown visible (slide-up) */
#user-checkbox:checked ~ .user-button-menu .ul {
    background: #fff !important;
    border: 1px solid rgba(46, 92, 158, 0.18) !important;
    box-shadow: 0 -0.5rem 1.5rem rgba(15, 28, 50, 0.22) !important;
    border-radius: 0.55rem 0.55rem 0 0 !important;
    padding: 0.35rem !important;
}

/* Items del dropdown — Mi cuenta, Cambiar de consejo, Cambiar de rol, Cerrar sesión */
.user-button-menu .ul > li {
    list-style: none;
    margin: 0.15rem 0 !important;
}
.user-button-menu .ul > li > a {
    padding: 0.6rem 0.75rem !important;
    border-radius: 0.4rem !important;
    color: #1a3c6e !important;
    font-weight: 500 !important;
    transition: all 0.18s ease !important;
}
.user-button-menu .ul > li > a > p {
    color: #1a3c6e !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
}
.user-button-menu .ul > li > a > span {
    color: #2e5c9e !important;
    font-size: 1.3rem !important;
}
.user-button-menu .ul > li > a:hover {
    background: rgba(46, 92, 158, 0.08) !important;
    transform: translateX(0.2rem);
}
.user-button-menu .ul > li > a:hover > p,
.user-button-menu .ul > li > a:hover > span {
    color: #2e5c9e !important;
}

/* "Cerrar sesión" — rojo discreto al hover */
.user-button-menu .ul .user-button-logout {
    border-top: 1px dashed rgba(46, 92, 158, 0.18);
    margin-top: 0.3rem !important;
    padding-top: 0.3rem !important;
}
.user-button-menu .ul .user-button-logout p,
.user-button-menu .ul .user-button-logout span {
    color: #b91c1c !important;
}
.user-button-menu .ul .user-button-logout:hover {
    background: rgba(220, 38, 38, 0.1) !important;
    transform: translateX(0.2rem);
}
.user-button-menu .ul .user-button-logout:hover p,
.user-button-menu .ul .user-button-logout:hover span {
    color: #991b1b !important;
}

/* "Cambiar de rol" — submenú flotante (.il2). Usa inner-list-one + ajuste de posición. */
.user-button-menu .ul .inner-list-one.il2 {
    background: #fff !important;
    border: 1px solid rgba(46, 92, 158, 0.18) !important;
    box-shadow: 0.4rem 0.4rem 1.2rem rgba(15, 28, 50, 0.22) !important;
    border-radius: 0.55rem !important;
    padding: 0.4rem !important;
    min-width: 16rem;
}
.user-button-menu .ul .inner-list-one.il2 li {
    list-style: none;
    margin: 0.1rem 0 !important;
}
.user-button-menu .ul .inner-list-one.il2 li a {
    padding: 0.5rem 0.7rem !important;
    border-radius: 0.4rem !important;
    color: #5a7a9a !important;
    transition: all 0.18s ease !important;
}
.user-button-menu .ul .inner-list-one.il2 li a p,
.user-button-menu .ul .inner-list-one.il2 li a span {
    color: #1a3c6e !important;
}
.user-button-menu .ul .inner-list-one.il2 li a span {
    color: #2e5c9e !important;
    font-size: 1.2rem !important;
}
.user-button-menu .ul .inner-list-one.il2 li a p {
    font-size: 0.85rem !important;
    font-weight: 500 !important;
}
.user-button-menu .ul .inner-list-one.il2 li a:hover {
    background: linear-gradient(135deg, rgba(46, 92, 158, 0.08), rgba(46, 92, 158, 0.18)) !important;
    transform: translateX(0.2rem) !important;
}
.user-button-menu .ul .inner-list-one.il2 li a:hover p,
.user-button-menu .ul .inner-list-one.il2 li a:hover span {
    color: #2e5c9e !important;
}

/* ========================================================================
   SIDEBAR RESPONSIVE — DRAWER (≤600px)
   ----------------------------------------------------------------------------
   Solo para phones: el sidebar está OCULTO por defecto y la chevron se
   convierte en hamburguesa flotante top-left. Click hamburguesa abre el
   drawer como overlay sobre el contenido (con backdrop blur).

   Para 601-1100px (tablets portrait/landscape, laptops angostas) NO usamos
   drawer: el sidebar queda persistente pero compacto (~215px) — ver bloque
   más abajo. iPad Mini portrait (768) y iPad standard (810) caen aquí.
   ======================================================================== */

@media (max-width: 600px) {

    /* ── ESTADO POR DEFECTO (sin marcar) = sidebar OCULTO fuera de pantalla ──
       Usamos `left: -100%` en lugar de `transform` porque transform crearía
       un contexto de contención y nuestro FAB hamburguesa (.collapse-sidebar,
       hijo de .sidebar con position:fixed) quedaría atrapado dentro del
       sidebar oculto. Con left la hamburguesa sí escapa al viewport.

       Ancho del drawer: clamp(280px, 32vw, 360px) — escala con el viewport
       para que no se vea ahogado en laptops angostas (993-1100) ni demasiado
       ancho en tablets (601-768). Antes era fijo 280px. */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: calc(-1 * clamp(280px, 32vw, 360px) - 1rem) !important;
        width: clamp(280px, 32vw, 360px) !important;
        min-width: 0 !important;
        max-width: 85vw !important;
        height: 100vh !important;
        padding: 60px 10px 10px 10px !important;
        transition: left 0.32s ease !important;
        z-index: 200 !important;
        box-shadow: 0.4rem 0 1.5rem rgba(15, 28, 50, 0.4);
        justify-content: flex-start !important;
    }
    .sidebar .list-items {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto;
    }

    /* User-button también oculto cuando el sidebar está cerrado */
    .user-button {
        position: fixed !important;
        left: calc(-1 * clamp(280px, 32vw, 360px) - 1rem) !important;
        bottom: 0 !important;
        width: clamp(280px, 32vw, 360px) !important;
        min-width: 0 !important;
        max-width: 85vw !important;
        transition: left 0.32s ease !important;
        z-index: 201 !important;
    }

    /* Tooltips innecesarios (el menú está oculto) */
    .sidebar .list-items .ul .tooltip-text {
        display: none !important;
    }

    /* ── HAMBURGUESA: tres líneas ≡ usando el icono material `menu` ──
       Reemplazamos visualmente el chevron `keyboard_arrow_left` por
       el icono `menu` vía pseudo-elemento (el font-family de material
       symbols se hereda al ::before). */
    .collapse-sidebar {
        position: fixed !important;
        top: 0.8rem !important;
        left: 0.8rem !important;
        z-index: 250 !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        height: auto !important;
    }
    .collapse-sidebar span {
        background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%) !important;
        color: transparent !important; /* oculta el chevron original */
        border: 2px solid rgba(255, 255, 255, 0.9) !important;
        width: 2.8rem !important;
        height: 2.8rem !important;
        font-size: 0 !important;
        padding: 0 !important;
        box-shadow: 0 0.3rem 0.85rem rgba(15, 28, 50, 0.35) !important;
        transform: rotate(0deg) !important;
        transition: transform 0.3s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease !important;
        position: relative;
    }
    .collapse-sidebar span::before {
        content: 'menu';
        font-family: 'Material Symbols Outlined';
        font-size: 1.7rem;
        font-weight: normal;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        line-height: 1;
    }
    .collapse-sidebar span:hover {
        transform: scale(1.08) !important;
        box-shadow: 0 0.45rem 1.1rem rgba(15, 28, 50, 0.45) !important;
    }

    /* ── ESTADO MARCADO (hamburguesa tocada) = sidebar drawer visible ── */
    #toggle-checkbox:checked ~ main .sidebar {
        left: 0 !important;
    }
    #toggle-checkbox:checked ~ main .sidebar .list-items ul li a {
        justify-content: flex-start !important;
        padding: 0.7rem 0.85rem !important;
    }
    #toggle-checkbox:checked ~ main .sidebar .list-items ul li a p {
        display: block !important;
    }
    #toggle-checkbox:checked ~ main .sidebar .list-items ul li a .disappear-toggle {
        display: inline-block !important;
    }
    #toggle-checkbox:checked ~ main .sidebar .selected-navpage::before {
        display: block !important;
    }
    #toggle-checkbox:checked ~ main .sidebar .toggle-revert-title {
        display: block !important;
    }
    #toggle-checkbox:checked ~ main .sidebar .toggle-title {
        display: none !important;
    }
    #toggle-checkbox:checked ~ main .sidebar .logo {
        padding-right: 15% !important;
        text-align: end;
    }
    /* ── SUBMENÚS EN MODO OVERLAY: acordeón inline ── */
    /* En el overlay (sidebar 270px sobre mobile) el popout flotante se sale
       de la pantalla. Los convertimos en submenús apilados verticalmente
       bajo el item padre con indentación a la izquierda. */
    #toggle-checkbox:checked ~ main .sidebar .inner-list-one {
        display: flex !important;
        flex-direction: column !important;
        position: static !important;
        transform: none !important;
        width: calc(100% - 1rem) !important;
        margin: 0 0 0 1rem !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        box-shadow: none !important;
        border-radius: 0.45rem !important;
        opacity: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 0.3rem !important;
        transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.2s ease, padding 0.2s ease !important;
    }

    /* Se abre al click (focus-within al hacer click en el <a> del módulo) */
    #toggle-checkbox:checked ~ main .sidebar .ul li:focus-within > .inner-list-one {
        opacity: 1 !important;
        max-height: 50rem !important;
        margin: 0.3rem 0 0.5rem 1rem !important;
        padding: 0.4rem !important;
    }

    /* Items del submenú inline: texto blanco translúcido sobre fondo navy */
    #toggle-checkbox:checked ~ main .sidebar .inner-list-one li {
        margin: 0.1rem 0 !important;
    }
    #toggle-checkbox:checked ~ main .sidebar .inner-list-one li a {
        background: transparent !important;
        padding: 0.55rem 0.7rem !important;
        border-radius: 0.4rem !important;
    }
    #toggle-checkbox:checked ~ main .sidebar .inner-list-one li a p,
    #toggle-checkbox:checked ~ main .sidebar .inner-list-one li a span {
        color: rgba(255, 255, 255, 0.85) !important;
    }
    #toggle-checkbox:checked ~ main .sidebar .inner-list-one li a:hover {
        background: rgba(255, 255, 255, 0.14) !important;
        transform: translateX(0.2rem) !important;
    }
    #toggle-checkbox:checked ~ main .sidebar .inner-list-one li a:hover p,
    #toggle-checkbox:checked ~ main .sidebar .inner-list-one li a:hover span {
        color: #fff !important;
    }

    /* Item activo dentro del submenú inline */
    #toggle-checkbox:checked ~ main .sidebar .inner-list-one li.selected-navpage {
        background: linear-gradient(135deg, #fff, #f7fafd) !important;
        border: 1px solid rgba(255, 255, 255, 0.45) !important;
        box-shadow: 0 0.15rem 0.4rem rgba(15, 28, 50, 0.18) !important;
    }
    #toggle-checkbox:checked ~ main .sidebar .inner-list-one li.selected-navpage::before {
        display: none !important;
    }
    #toggle-checkbox:checked ~ main .sidebar .inner-list-one li.selected-navpage a {
        background: transparent !important;
    }
    #toggle-checkbox:checked ~ main .sidebar .inner-list-one li.selected-navpage a p,
    #toggle-checkbox:checked ~ main .sidebar .inner-list-one li.selected-navpage a span {
        color: #1a3c6e !important;
        font-weight: 700 !important;
    }

    /* Flecha del item padre rota 90° al abrir el submenú (indica "expandido") */
    #toggle-checkbox:checked ~ main .sidebar .ul li > a .disappear-toggle {
        transition: transform 0.25s ease !important;
    }
    #toggle-checkbox:checked ~ main .sidebar .ul li:focus-within > a .disappear-toggle {
        transform: rotate(90deg) !important;
    }

    /* Tooltips ocultos cuando el sidebar está expandido */
    #toggle-checkbox:checked ~ main .sidebar .list-items .ul .tooltip-text {
        display: none !important;
    }

    /* Backdrop: tapón oscuro que cierra al tocar fuera (mismo label collapse) */
    #toggle-checkbox:checked ~ main::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(15, 28, 50, 0.55);
        backdrop-filter: blur(2px);
        z-index: 150;
        animation: sb-fade-in 0.25s ease;
    }
    @keyframes sb-fade-in {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* User-button cuando el drawer está abierto: se desliza junto al sidebar */
    #toggle-checkbox:checked ~ header .user-button {
        left: 0 !important;
    }
    #toggle-checkbox:checked ~ header .user-button .ub-section {
        padding: 1rem 0.1rem 1rem 1rem !important;
        justify-content: space-between !important;
    }
    #toggle-checkbox:checked ~ header .user-button .ub-section .image-container {
        margin-right: 0.5rem !important;
    }
    #toggle-checkbox:checked ~ header .user-button .ub-section .disappear-toggle {
        display: flex !important;
    }
    #toggle-checkbox:checked ~ header .user-button .ub-section p.disappear-toggle {
        display: block !important;
    }

    /* FAB cuando el drawer está abierto: hamburguesa se transforma en ✕ */
    #toggle-checkbox:checked ~ main .collapse-sidebar {
        top: 0.8rem !important;
        left: 0.8rem !important;
    }
    #toggle-checkbox:checked ~ main .collapse-sidebar span {
        transform: rotate(0deg) !important;
        background: #fff !important;
        border-color: rgba(46, 92, 158, 0.5) !important;
        box-shadow: 0 0.3rem 0.85rem rgba(15, 28, 50, 0.45) !important;
    }
    #toggle-checkbox:checked ~ main .collapse-sidebar span::before {
        content: 'close';
        color: #1a3c6e !important;
    }
    #toggle-checkbox:checked ~ main .collapse-sidebar span:hover {
        transform: scale(1.08) !important;
    }
    #toggle-checkbox:checked ~ main .collapse-sidebar span:hover::before {
        color: #2e5c9e !important;
    }
}

/* ── Móvil chico: sidebar overlay ocupa más ancho ── */
@media (max-width: 600px) {
    #toggle-checkbox:checked ~ main .sidebar {
        width: 85% !important;
        min-width: 240px !important;
        max-width: 320px !important;
    }
    #toggle-checkbox:checked ~ header .user-button {
        width: 85% !important;
        max-width: 320px !important;
    }
}

/* ========================================================================
   AUTH.BLADE — refuerzo de la sección .ub-section y .image-container
   El avatar está envuelto en .image-container (overflow:hidden) así que el
   borde y la sombra deben ir en el wrapper, no en el <img>.
   ======================================================================== */

/* Wrapper de la foto del usuario en el sidebar */
.ub-section .image-container {
    border: 2px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 0.15rem 0.45rem rgba(15, 28, 50, 0.3);
    transition: all 0.2s ease;
    margin-right: 0.6rem;
    flex-shrink: 0;
}
.ub-section:hover .image-container {
    border-color: rgba(255, 255, 255, 0.65) !important;
    transform: scale(1.04);
}
#user-checkbox:checked ~ .ub-section .image-container {
    border-color: rgba(46, 92, 158, 0.45) !important;
    box-shadow: 0 0.15rem 0.5rem rgba(46, 92, 158, 0.25);
}

/* Quitamos el border que habíamos puesto al <img> directo (queda clipped) */
.ub-section .image-container img {
    border: 0 !important;
    box-shadow: none !important;
}

/* Nombre del usuario y chevron a la derecha (modo expandido) */
.ub-section p.disappear-toggle {
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ub-section span.material-symbols-outlined.disappear-toggle {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 1.55rem !important;
    transition: transform 0.2s, color 0.2s;
}
.ub-section:hover p.disappear-toggle {
    color: #fff !important;
}
.ub-section:hover span.material-symbols-outlined.disappear-toggle {
    color: #fff !important;
    transform: rotate(90deg);
}

/* Cuando el dropdown está abierto, la flecha gira y el nombre se ve en navy */
#user-checkbox:checked ~ .ub-section p.disappear-toggle {
    color: #1a3c6e !important;
}
#user-checkbox:checked ~ .ub-section span.material-symbols-outlined.disappear-toggle {
    color: #2e5c9e !important;
    transform: rotate(90deg);
}

/* ========================================================================
   CONTENT HEADER — nombre del consejo
   Barra superior elegante con strip lateral navy, ícono institucional en
   badge gradient, título en Merriweather navy.
   ======================================================================== */
.content-header {
    background: linear-gradient(135deg, #ffffff 0%, #f7fafd 100%) !important;
    border-bottom: 1px solid rgba(46, 92, 158, 0.18) !important;
    padding: 0.85rem 1.4rem !important;
    height: auto !important;
    min-height: 4rem;
    box-shadow: 0 0.15rem 0.5rem rgba(15, 28, 50, 0.05);
    position: relative !important;
}

/* Strip lateral navy a la izquierda — como las cards del sistema */
.content-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0.3rem;
    height: 65%;
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    border-radius: 0 999px 999px 0;
    box-shadow: 0 0 0.4rem rgba(26, 60, 110, 0.3);
}

/* Nombre del consejo */
.content-header .main-title {
    margin: 0 !important;
    text-align: left !important;
    font-family: 'Merriweather', serif !important;
    font-size: 1.18rem !important;
    font-weight: 700 !important;
    color: #1a3c6e !important;
    letter-spacing: 0.005em;
    line-height: 1.3;
    display: inline-flex !important;
    align-items: center;
    gap: 0.65rem;
    padding-left: 0.5rem;
}

/* Ícono institucional con badge navy circular */
.content-header .main-title::before {
    content: 'account_balance';
    font-family: 'Material Symbols Outlined';
    font-size: 1.35rem;
    color: #fff;
    width: 2.4rem;
    height: 2.4rem;
    min-width: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0.2rem 0.5rem rgba(26, 60, 110, 0.32);
    border: 2px solid #fff;
    /* Reset hereditario de font-weight/spacing */
    font-weight: normal;
    letter-spacing: normal;
    font-style: normal;
    line-height: 1;
}

/* En pantallas chicas: deja espacio para el FAB hamburguesa (top-left) */
@media (max-width: 992px) {
    .content-header {
        padding-left: 4.5rem !important;
    }
    .content-header::before {
        left: 3.8rem;
    }
    .content-header .main-title {
        font-size: 1rem !important;
    }
    .content-header .main-title::before {
        width: 2.1rem;
        height: 2.1rem;
        min-width: 2.1rem;
        font-size: 1.2rem;
    }
}

@media (max-width: 560px) {
    .content-header .main-title {
        font-size: 0.92rem !important;
        gap: 0.45rem;
    }
}

/* ========================================================================
   LOGIN — Propuesta 2: card compacta centrada con hero navy arriba
   Layout vertical, no split. El navy se concentra en el hero superior
   (logo + título) y en el botón. El resto es respiración blanca.
   ======================================================================== */

/* Fondo: gris-azulado muy claro con el logo CONACEM como watermark central
   y dos halos navy radiales sutiles. El logo aporta identidad institucional
   sin saturar visualmente. */
.login-container {
    /* Layout: ocupa toda la pantalla y centra el card. Antes vivían en luaz. */
    width: 100% !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 1rem;
    padding: 2rem 1.5rem !important;
    overflow-y: auto !important;
    position: relative !important;
    background:
        radial-gradient(circle at 20% 10%, rgba(46, 92, 158, 0.07) 0%, transparent 40%),
        radial-gradient(circle at 80% 90%, rgba(46, 92, 158, 0.06) 0%, transparent 40%),
        linear-gradient(180deg, #eef2f8 0%, #f7fafd 100%) !important;
}

/* Watermark eliminado a petición del usuario — los halos navy radiales
   del background del .login-container dan suficiente identidad visual. */
.login-container::before {
    display: none !important;
}

/* Mantenemos el segundo halo decorativo apagado para no competir con el watermark */
.login-container::after {
    display: none !important;
}

/* Card principal — Layout horizontal: logo a la izquierda + form a la derecha */
.login-container .login-card {
    background: #fff !important;
    width: min(880px, 100%) !important;
    max-width: 880px;
    min-height: auto !important;
    border-radius: 1.2rem !important;
    box-shadow:
        0 1.5rem 3rem rgba(15, 28, 50, 0.18),
        0 0.3rem 0.7rem rgba(15, 28, 50, 0.06) !important;
    padding: 0 !important;
    overflow: hidden;
    position: relative;
    z-index: 1;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    border: 1px solid rgba(46, 92, 158, 0.12);
}

/* IZQUIERDA: logo del consejo sobre fondo blanco limpio */
.login-container .login-card .img-container {
    width: 42% !important;
    flex-shrink: 0;
    background: #fff;
    padding: 2.5rem 2rem !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: visible;
    border-right: 1px solid rgba(46, 92, 158, 0.12);
}
.login-container .login-card .img-container::before,
.login-container .login-card .img-container::after {
    display: none !important;
}

/* Logo dentro del panel izquierdo — plano, sin caja ni sombra.
   Puede sobresalir del panel para tener mayor presencia visual. */
.login-container .login-card .img-container img {
    width: 22rem !important;
    height: auto !important;
    max-width: none;
    max-height: none;
    background: transparent;
    padding: 0;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    object-fit: contain;
    position: relative;
    z-index: 2;
}

/* DERECHA: formulario de acceso */
.login-container .login-card .credentials-section {
    width: 58% !important;
    flex: 1;
    height: auto !important;
    padding: 2.25rem 2.25rem 1.85rem !important;
    background: #fff;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: stretch !important;
}
.login-container .login-card .credentials-section .credentials-input {
    width: 100% !important;
    display: flex;
    flex-direction: column;
}

/* Encabezado: bienvenida con el nombre del consejo (sin caja, texto grande
   y plano sobre el fondo blanco del card). Estilo limpio que deja al nombre
   del consejo destacar por su tipografía. */
/* Encabezado tipográfico moderno con Plus Jakarta Sans:
   geométrica, friendly, jerarquía limpia por peso/tamaño. */
.login-container .login-card .credentials-section .credentials-input p {
    text-align: center !important;
    color: #1a3c6e !important;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
    letter-spacing: -0.005em;
    margin: 0 0 0.3rem 0;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem !important;
    position: relative;
}
/* Línea decorativa fina */
.login-container .login-card .credentials-section .credentials-input p::before {
    content: '';
    position: absolute;
    bottom: 0; left: 50%; transform: translateX(-50%);
    width: 2.5rem; height: 3px;
    background: linear-gradient(90deg, #1a3c6e, #2e5c9e);
    border-radius: 999px;
}
/* "SIGME" como pretítulo pill */
.login-container .login-card .credentials-section .credentials-input p b.text-blue {
    display: inline-block !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: #2e5c9e !important;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    background: rgba(46, 92, 158, 0.1);
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    margin-bottom: 0.85rem;
}
/* Subtítulo "Acceso al sistema" — ahora en el HTML como <p class="login-subtitle"> */
.login-container .login-card .credentials-section .credentials-input .login-subtitle {
    text-align: center;
    margin: 0 0 1.1rem 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    color: #5a7a9a !important;
    letter-spacing: 0;
    text-transform: none;
    font-style: normal;
    line-height: 1.3;
}
.login-container .login-card .credentials-section .credentials-input .login-subtitle::before {
    display: none !important;
}

/* Campos */
.login-container .login-card .credentials-section .credentials-input .element {
    margin: 0 0 0.85rem 0 !important;
    position: relative;
}
.login-container .login-card .credentials-section .credentials-input .element label {
    display: block;
    margin: 0 0 0.35rem 0;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 0.78rem !important;
    font-weight: 600;
    color: #1a3c6e;
    text-transform: none;
    letter-spacing: 0;
}
.login-container .login-card .credentials-section .credentials-input .input-container {
    width: 100%;
    position: relative;
}

/* Icono prefijo dentro del input — se selecciona por id/name del input
   (porque type="password" cambia a "text" al usar el toggle de visibilidad) */
.login-container .login-card .credentials-section .credentials-input .element:has(input[type="email"]) .input-container::before,
.login-container .login-card .credentials-section .credentials-input .element:has(input#password) .input-container::before {
    font-family: 'Material Symbols Outlined';
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: #2e5c9e;
    pointer-events: none;
    z-index: 1;
    transition: color 0.15s ease;
}
.login-container .login-card .credentials-section .credentials-input .element:has(input[type="email"]) .input-container::before {
    content: 'mail';
}
.login-container .login-card .credentials-section .credentials-input .element:has(input#password) .input-container::before {
    content: 'lock';
}
/* Cuando el toggle de "ver contraseña" está activo: candado abierto */
.login-container .login-card .credentials-section .credentials-input .element:has(.toggle-password[aria-pressed="true"]) .input-container::before {
    content: 'lock_open';
}

.login-container .login-card .credentials-section .credentials-input .input-field {
    width: 100%;
    padding: 0.8rem 0.95rem 0.8rem 2.55rem !important;
    background: #f7fafd !important;
    border: 1px solid rgba(46, 92, 158, 0.22) !important;
    border-radius: 0.7rem !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 0.94rem;
    font-weight: 500;
    color: #1a3c6e;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.login-container .login-card .credentials-section .credentials-input .input-field::placeholder {
    color: #94a3b8;
}
.login-container .login-card .credentials-section .credentials-input .input-field:focus {
    border-color: #2e5c9e !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.15);
}
.login-container .login-card .credentials-section .credentials-input .input-container .underline {
    display: none !important;
}

/* Botón mostrar/ocultar contraseña */
.login-container .login-card .credentials-section .credentials-input .element:has(.toggle-password) .input-field {
    padding-right: 2.6rem !important;
}
.login-container .login-card .credentials-section .credentials-input .toggle-password {
    position: absolute;
    right: 0.45rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    padding: 0.3rem;
    cursor: pointer;
    color: #5a7a9a;
    border-radius: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.login-container .login-card .credentials-section .credentials-input .toggle-password:hover {
    color: #2e5c9e;
    background: rgba(46, 92, 158, 0.08);
}
.login-container .login-card .credentials-section .credentials-input .toggle-password:focus-visible {
    outline: 2px solid #2e5c9e;
    outline-offset: 1px;
}
.login-container .login-card .credentials-section .credentials-input .toggle-password .material-symbols-outlined {
    font-size: 1.15rem;
}
.login-container .login-card .credentials-section .credentials-input .toggle-password[aria-pressed="true"] {
    color: #2e5c9e;
}

/* Error en input */
.login-container .login-card .credentials-section .login-error .input-field {
    border-color: #dc2626 !important;
    background: #fef2f2 !important;
}
.login-container .login-card .credentials-section h4 {
    color: #b91c1c !important;
    font-size: 0.76rem !important;
    font-weight: 600;
    margin: 0.25rem 0 0 0 !important;
    display: inline-flex;
    align-items: center;
}

/* Botón Ingresar — el único acento navy fuerte abajo */
.login-container .login-card .credentials-section .credentials-input .btn {
    width: 100% !important;
    margin: 1.1rem 0 0 0 !important;
    padding: 0.9rem 1.25rem !important;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 0.7rem !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition: filter 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 0.35rem 0.85rem rgba(26, 60, 110, 0.35);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}
.login-container .login-card .credentials-section .credentials-input .btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 0.5rem 1.2rem rgba(26, 60, 110, 0.5);
}


/* Olvidé mi contraseña */
.login-container .a-password-forget {
    display: block;
    text-align: center;
    margin: 1.1rem 0 0 0 !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 0.85rem !important;
    font-weight: 500;
    color: #2e5c9e !important;
    text-decoration: none;
    transition: color 0.18s ease;
}
.login-container .a-password-forget:hover {
    color: #1a3c6e !important;
    text-decoration: underline;
}

/* Alertas */
.login-container .alert {
    position: relative;
    z-index: 1;
    max-width: 440px;
    width: 100%;
    margin: 0 !important;
    padding: 0.85rem 1.1rem !important;
    border-radius: 0.6rem !important;
    display: flex !important;
    align-items: flex-start;
    gap: 0.7rem;
    box-shadow: 0 0.3rem 0.85rem rgba(15, 28, 50, 0.12) !important;
    border: 1px solid transparent;
}
.login-container .alert.alert-success {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0) !important;
    color: #166534 !important;
    border-color: rgba(22, 101, 52, 0.3);
}
.login-container .alert.alert-danger {
    background: linear-gradient(135deg, #fee2e2, #fecaca) !important;
    color: #991b1b !important;
    border-color: rgba(185, 28, 28, 0.3);
}
.login-container .alert .alert-icon {
    width: 2rem; height: 2rem;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.login-container .alert.alert-success .alert-icon {
    background: rgba(22, 101, 52, 0.2); color: #166534;
}
.login-container .alert.alert-danger .alert-icon {
    background: rgba(185, 28, 28, 0.2); color: #991b1b;
}
.login-container .alert .alert-message h3 {
    margin: 0 0 0.2rem 0;
    font-family: 'Merriweather', serif;
    font-size: 0.92rem;
    font-weight: 700;
}
.login-container .alert .alert-message p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* ─── RESPONSIVE ─── */
/* Tablet / móvil: colapsa el split horizontal a vertical */
@media (max-width: 768px) {
    .login-container .login-card {
        flex-direction: column !important;
        max-width: 440px !important;
        width: min(440px, 100%) !important;
    }
    .login-container .login-card .img-container {
        width: 100% !important;
        padding: 2rem 1.5rem !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(46, 92, 158, 0.12);
    }
    .login-container .login-card .credentials-section {
        width: 100% !important;
    }
    .login-container .login-card .img-container img {
        max-width: 7rem;
        max-height: 7rem;
    }
}
@media (max-width: 420px) {
    .login-container { padding: 1rem !important; }
    .login-container .login-card .img-container {
        padding: 1.75rem 1.25rem 1.4rem !important;
    }
    .login-container .login-card .img-container img {
        max-width: 6.5rem;
        max-height: 6.5rem;
    }
    .login-container .login-card .credentials-section {
        padding: 1.4rem 1.25rem 1.25rem !important;
    }
}

/* =============================================================================
   PANEL ADMIN · Estadísticas del padrón
   Componente:  resources/js/components/inicio/administrador/EstadisticasPadronComponent.vue
   Apartado:    Dashboard del administrador, sección "Estadísticas" + "Histórico de registros"
   Prefijo:     .ep-*
   ============================================================================= */
.ep-wrap { display: flex; flex-direction: column; gap: 1rem; }
.ep-section { display: flex; flex-direction: column; gap: 0.85rem; }

/* Loading */
.ep-loading { padding: 1.5rem; text-align: center; color: #5a7a9a; }
.ep-spinner {
    width: 2rem; height: 2rem;
    border: 3px solid rgba(46, 92, 158, 0.2);
    border-top-color: #2e5c9e;
    border-radius: 50%;
    margin: 0 auto 0.5rem;
    animation: ep-spin 0.85s linear infinite;
}
@keyframes ep-spin { to { transform: rotate(360deg); } }

/* KPI strip */
.ep-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.55rem;
}
.ep-kpi {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.7rem 0.85rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    border-radius: 0.55rem;
    box-shadow: 0 0.25rem 0.6rem rgba(26, 60, 110, 0.22);
}
.ep-kpi .material-symbols-outlined {
    background: rgba(255,255,255,0.18);
    width: 2.2rem; height: 2.2rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 0.4rem; font-size: 1.4rem; flex-shrink: 0;
}
.ep-kpi__label { margin: 0; font-size: 0.7rem; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.4px; }
.ep-kpi__value { margin: 0.05rem 0 0; font-family: 'Merriweather', serif; font-size: 1.3rem; font-weight: 700; line-height: 1; }
.ep-kpi__hint { margin: 0.18rem 0 0; font-size: 0.7rem; opacity: 0.85; }
.ep-kpi--men   { background: linear-gradient(135deg, #1e40af, #3b82f6); }
.ep-kpi--women { background: linear-gradient(135deg, #9d174d, #ec4899); }
.ep-kpi--proc  { background: linear-gradient(135deg, #065f46, #10b981); }
.ep-kpi--univ  { background: linear-gradient(135deg, #5b21b6, #8b5cf6); }
.ep-kpi--state { background: linear-gradient(135deg, #92400e, #f59e0b); }
.ep-kpi--pais  { background: linear-gradient(135deg, #0e7490, #06b6d4); }

/* Grid 2x2 */
.ep-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
@media (max-width: 1100px) { .ep-grid { grid-template-columns: 1fr; } }

.ep-card {
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.55rem;
    padding: 0.85rem 1rem 0.95rem;
    display: flex; flex-direction: column;
    min-height: 16rem;
}
.ep-card__head {
    display: flex; align-items: center; gap: 0.4rem;
    margin-bottom: 0.6rem;
    border-bottom: 1px solid rgba(46, 92, 158, 0.1);
    padding-bottom: 0.45rem;
}
.ep-card__head .material-symbols-outlined {
    background: rgba(46, 92, 158, 0.1); color: #2e5c9e;
    width: 2rem; height: 2rem;
    border-radius: 0.4rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
}
.ep-card__head h3 {
    margin: 0; flex: 1;
    font-family: 'Merriweather', serif;
    font-size: 0.94rem; font-weight: 700; color: #1a3c6e;
}
.ep-card__hint { font-size: 0.72rem; color: #94a3b8; font-weight: 600; }
.ep-card__hint--toggle { background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; font-family: inherit; }
.ep-card__hint--toggle:hover { color: #2e5c9e; }
.ep-export { display: inline-flex; align-items: center; gap: 0.35rem; background: #1d6f42; color: #fff; border: none; border-radius: 0.45rem; padding: 0.45rem 0.85rem; font-size: 0.82rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.ep-export .material-symbols-outlined { font-size: 1.05rem; }
.ep-export:hover { background: #155534; }
.ep-export:disabled { opacity: 0.6; cursor: default; }

.ep-list { display: flex; flex-direction: column; gap: 0.4rem; max-height: 22rem; overflow-y: auto; padding-right: 0.2rem; }
.ep-list::-webkit-scrollbar { width: 0.35rem; }
.ep-list::-webkit-scrollbar-thumb { background: #2e5c9e; border-radius: 999px; }

.ep-row {
    display: grid;
    grid-template-columns: 1.25rem 1.4fr 1.6fr;
    gap: 0.5rem; align-items: center;
    font-size: 0.82rem;
}
.ep-row--no-rank { grid-template-columns: 1.4fr 1.8fr; }
.ep-row__rank { font-size: 0.7rem; font-weight: 700; color: #94a3b8; text-align: center; align-self: start; margin-top: 0.15rem; }
.ep-row__name { color: #1a3c6e; font-weight: 600; line-height: 1.3; word-break: break-word; }
.ep-row__bar { display: flex; align-items: center; gap: 0.45rem; }
.ep-row__track { flex: 1; height: 0.5rem; background: rgba(46, 92, 158, 0.1); border-radius: 999px; overflow: hidden; }
.ep-row__fill { height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.ep-row__fill--proc  { background: linear-gradient(90deg, #065f46, #10b981); }
.ep-row__fill--univ  { background: linear-gradient(90deg, #5b21b6, #8b5cf6); }
.ep-row__fill--sede  { background: linear-gradient(90deg, #1e40af, #3b82f6); }
.ep-row__fill--state { background: linear-gradient(90deg, #92400e, #f59e0b); }
.ep-row__val { font-size: 0.78rem; font-weight: 700; color: #1a3c6e; min-width: 4.5rem; text-align: right; }
.ep-empty { text-align: center; color: #94a3b8; font-size: 0.82rem; padding: 0.8rem 0; margin: 0; }

/* Histórico — insights cards */
.ep-insights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.6rem;
}
.ep-insight {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-left: 4px solid #2e5c9e;
    border-radius: 0.55rem;
}
.ep-insight .material-symbols-outlined {
    color: #2e5c9e; font-size: 1.55rem;
    background: rgba(46, 92, 158, 0.1);
    width: 2.4rem; height: 2.4rem;
    border-radius: 0.4rem;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ep-insight__label { margin: 0; font-size: 0.72rem; color: #5a7a9a; text-transform: uppercase; letter-spacing: 0.3px; }
.ep-insight__value {
    margin: 0.15rem 0 0;
    font-family: 'Merriweather', serif;
    font-size: 1.35rem; font-weight: 700; color: #1a3c6e; line-height: 1;
    display: flex; align-items: baseline; gap: 0.35rem;
}
.ep-insight__value small {
    font-family: system-ui, sans-serif;
    font-size: 0.78rem; font-weight: 700;
    padding: 0.1rem 0.4rem; border-radius: 0.3rem;
}
.ep-insight__value small.pos { background: rgba(16, 185, 129, 0.18); color: #065f46; }
.ep-insight__value small.neg { background: rgba(239, 68, 68, 0.18); color: #991b1b; }
.ep-insight--actual { border-left-color: #10b981; }
.ep-insight--actual .material-symbols-outlined { color: #10b981; background: rgba(16, 185, 129, 0.12); }
.ep-insight--pico { border-left-color: #f59e0b; }
.ep-insight--pico .material-symbols-outlined { color: #f59e0b; background: rgba(245, 158, 11, 0.12); }
.ep-insight--prom { border-left-color: #6366f1; }
.ep-insight--prom .material-symbols-outlined { color: #6366f1; background: rgba(99, 102, 241, 0.12); }

/* Bar chart anual */
.ep-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
    padding: 1rem 0.5rem 0;
    background: linear-gradient(180deg, #f7fafd 0%, #fff 100%);
    border: 1px solid rgba(46, 92, 158, 0.12);
    border-radius: 0.55rem;
    min-height: 16rem;
    overflow-x: auto;
    scrollbar-width: thin; scrollbar-color: #2e5c9e #f1f5f9;
}
.ep-chart::-webkit-scrollbar { height: 0.4rem; }
.ep-chart::-webkit-scrollbar-thumb { background: #2e5c9e; border-radius: 999px; }
.ep-bar {
    flex: 1 0 3rem;
    display: flex; flex-direction: column; align-items: center;
    height: 13rem;
    position: relative;
}
.ep-bar__count { font-size: 0.7rem; font-weight: 700; color: #1a3c6e; margin-bottom: 0.2rem; }
.ep-bar__fill {
    width: 60%; min-height: 4px;
    background: linear-gradient(180deg, #2e5c9e, #1a3c6e);
    border-radius: 0.3rem 0.3rem 0 0;
    transition: height 0.4s ease;
    margin-top: auto;
}
.ep-bar__year { font-size: 0.7rem; font-weight: 600; color: #5a7a9a; margin-top: 0.3rem; }
.ep-bar--pico .ep-bar__fill { background: linear-gradient(180deg, #fbbf24, #f59e0b); }
.ep-bar--pico .ep-bar__count { color: #92400e; }
.ep-bar--actual .ep-bar__fill { background: linear-gradient(180deg, #34d399, #10b981); }
.ep-bar--actual .ep-bar__count { color: #065f46; }
.ep-bar--actual.ep-bar--pico .ep-bar__fill { background: linear-gradient(180deg, #fbbf24 0%, #10b981 100%); }


/* =============================================================================
   SISTEVAC · EstadisticasComponent.vue (Información general)
   Componente:  resources/js/components/sistevac/EstadisticasComponent.vue
   Apartado:    Tab "Información general" del módulo SISTEVAC > Sustentantes
   Prefijo:     .se-*
   ============================================================================= */
.se-dash { display: flex; flex-direction: column; gap: 0.85rem; }

.se-hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.55rem;
}
.se-kpi {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.7rem 0.85rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    border-radius: 0.55rem;
    box-shadow: 0 0.25rem 0.6rem rgba(26, 60, 110, 0.22);
}
.se-kpi .material-symbols-outlined {
    background: rgba(255,255,255,0.18);
    width: 2.2rem; height: 2.2rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 0.4rem;
    font-size: 1.4rem; flex-shrink: 0;
}
.se-kpi__label { margin: 0; font-size: 0.7rem; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.4px; }
.se-kpi__value { margin: 0.05rem 0 0; font-family: 'Merriweather', serif; font-size: 1.35rem; font-weight: 700; line-height: 1; }
.se-kpi__hint { margin: 0.18rem 0 0; font-size: 0.7rem; opacity: 0.85; }
.se-kpi--men   { background: linear-gradient(135deg, #1e40af, #3b82f6); }
.se-kpi--women { background: linear-gradient(135deg, #9d174d, #ec4899); }
.se-kpi--proc  { background: linear-gradient(135deg, #065f46, #10b981); }
.se-kpi--univ  { background: linear-gradient(135deg, #5b21b6, #8b5cf6); }
.se-kpi--state { background: linear-gradient(135deg, #92400e, #f59e0b); }

.se-loading, .se-empty {
    margin: 1rem auto;
    max-width: 28rem; text-align: center;
    padding: 1.2rem; border-radius: 0.55rem;
    background: #fff; color: #5a7a9a;
    border: 1px dashed rgba(46, 92, 158, 0.3);
}
.se-empty .material-symbols-outlined { font-size: 2.2rem; color: #2e5c9e; }
.se-empty h3 { margin: 0.4rem 0 0.2rem; font-family: 'Merriweather', serif; color: #1a3c6e; font-size: 1rem; }
.se-empty p { margin: 0; font-size: 0.83rem; }
.se-spinner {
    width: 2.2rem; height: 2.2rem;
    border: 3px solid rgba(46, 92, 158, 0.2);
    border-top-color: #2e5c9e;
    border-radius: 50%;
    margin: 0 auto 0.5rem;
    animation: se-spin 0.85s linear infinite;
}
@keyframes se-spin { to { transform: rotate(360deg); } }

.se-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
@media (max-width: 1100px) { .se-grid { grid-template-columns: 1fr; } }

.se-card {
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.55rem;
    padding: 0.85rem 1rem 0.95rem;
    display: flex; flex-direction: column;
    min-height: 18rem;
}
.se-card__head {
    display: flex; align-items: center; gap: 0.4rem;
    margin-bottom: 0.65rem;
    border-bottom: 1px solid rgba(46, 92, 158, 0.1);
    padding-bottom: 0.45rem;
}
.se-card__head .material-symbols-outlined {
    background: rgba(46, 92, 158, 0.1); color: #2e5c9e;
    width: 2rem; height: 2rem;
    border-radius: 0.4rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
}
.se-card__head h3 {
    margin: 0; flex: 1;
    font-family: 'Merriweather', serif;
    font-size: 0.96rem; font-weight: 700;
    color: #1a3c6e;
}
.se-card__hint { font-size: 0.72rem; color: #94a3b8; font-weight: 600; }

.se-list { display: flex; flex-direction: column; gap: 0.4rem; max-height: 22rem; overflow-y: auto; padding-right: 0.2rem; }
.se-list::-webkit-scrollbar { width: 0.35rem; }
.se-list::-webkit-scrollbar-thumb { background: #2e5c9e; border-radius: 999px; }

.se-row {
    display: grid;
    grid-template-columns: 1.25rem 1.4fr 1.6fr;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.82rem;
}
.se-row--compact { grid-template-columns: 1.25rem 1fr 1.4fr; }
.se-row__rank { font-size: 0.7rem; font-weight: 700; color: #94a3b8; text-align: center; align-self: start; margin-top: 0.15rem; }
.se-row__name { color: #1a3c6e; font-weight: 600; line-height: 1.3; word-break: break-word; }
.se-row__bar { display: flex; align-items: center; gap: 0.45rem; }
.se-row__track { flex: 1; height: 0.5rem; background: rgba(46, 92, 158, 0.1); border-radius: 999px; overflow: hidden; }
.se-row__fill { height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.se-row__fill--proc  { background: linear-gradient(90deg, #065f46, #10b981); }
.se-row__fill--univ  { background: linear-gradient(90deg, #5b21b6, #8b5cf6); }
.se-row__fill--sede  { background: linear-gradient(90deg, #1e40af, #3b82f6); }
.se-row__fill--state { background: linear-gradient(90deg, #92400e, #f59e0b); }
.se-row__val { font-size: 0.78rem; font-weight: 700; color: #1a3c6e; min-width: 4.5rem; text-align: right; }
.se-empty-row { text-align: center; color: #94a3b8; font-size: 0.82rem; padding: 0.8rem 0; margin: 0; }


/* =============================================================================
   SISTEVAC · ProgresoComponent.vue (Progreso del examen)
   Componente:  resources/js/components/sistevac/ProgresoComponent.vue
   Apartado:    Módulo SISTEVAC > Progreso del examen (selector + tabs Estadísticas/Sustentantes)
   Prefijo:     .sp-*
   ============================================================================= */

/* Header con selector */
.sp-select {
    display: flex; align-items: center; gap: 0.5rem;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.22);
    border-radius: 0.55rem;
    padding: 0.35rem 0.55rem;
    min-width: 22rem;
}
.sp-select label {
    display: inline-flex; align-items: center; gap: 0.35rem;
    margin: 0; font-size: 0.85rem; font-weight: 600; color: #1a3c6e;
    white-space: nowrap;
}
.sp-select label .material-symbols-outlined { color: #2e5c9e; font-size: 1.15rem; }
.sp-select select {
    flex: 1; min-width: 0;
    border: none; outline: none;
    background: transparent;
    font-size: 0.85rem; color: #1a3c6e;
    cursor: pointer;
}

/* Contenedor del selector + acciones de exportación */
.sp-header-actions {
    display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center;
}

/* Botones de exportar (Excel/PDF) — agrupados a la derecha del selector */
.sp-export {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.22);
    border-radius: 0.55rem;
    padding: 0.3rem 0.55rem;
}
.sp-export__label {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.8rem; font-weight: 600; color: #1a3c6e;
    margin-right: 0.15rem;
}
.sp-export__label .material-symbols-outlined { color: #2e5c9e; font-size: 1.1rem; }
.sp-export__btn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.35rem 0.65rem;
    border-radius: 0.4rem;
    font-size: 0.78rem; font-weight: 600;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.sp-export__btn .material-symbols-outlined { font-size: 1rem; }
.sp-export__btn--xls {
    background: #dcfce7; color: #166534; border: 1px solid #86efac;
}
.sp-export__btn--xls:hover { background: #166534; color: #fff; transform: translateY(-1px); }
.sp-export__btn--pdf {
    background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5;
}
.sp-export__btn--pdf:hover { background: #991b1b; color: #fff; transform: translateY(-1px); }

/* Layout y scroll del shell */
.csj-shell__content.sp-content {
    display: flex; flex-direction: column; gap: 1rem;
    overflow-y: auto;
    padding: 1rem 1.25rem 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.sp-content::-webkit-scrollbar { width: 0.6rem; }
.sp-content::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #1a3c6e, #2e5c9e); border-radius: 999px; }
.sp-content::-webkit-scrollbar-track { background: #f1f5f9; }

/* Estados vacíos / cargando */
.sp-empty, .sp-loading {
    margin: 2rem auto;
    max-width: 32rem; text-align: center;
    padding: 1.5rem;
    background: #fff;
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.65rem;
    color: #5a7a9a;
}
.sp-empty .material-symbols-outlined { font-size: 2.4rem; color: #2e5c9e; }
.sp-empty h3 { margin: 0.6rem 0 0.3rem; font-family: 'Merriweather', serif; color: #1a3c6e; font-size: 1rem; }
.sp-empty p { margin: 0; font-size: 0.85rem; line-height: 1.45; }
.sp-empty code { background: rgba(46, 92, 158, 0.1); padding: 0.05rem 0.3rem; border-radius: 0.25rem; font-size: 0.78rem; color: #1a3c6e; }
.sp-empty--warn { border-color: #fcd34d; background: #fffbeb; color: #78350f; }
.sp-empty--warn .material-symbols-outlined { color: #f59e0b; }
.sp-empty--warn h3 { color: #78350f; }
.sp-spinner {
    width: 2.4rem; height: 2.4rem;
    border: 3px solid rgba(46, 92, 158, 0.2);
    border-top-color: #2e5c9e;
    border-radius: 50%;
    margin: 0 auto 0.6rem;
    animation: sp-spin 0.85s linear infinite;
}
@keyframes sp-spin { to { transform: rotate(360deg); } }
.sp-spinner--sm { width: 1.2rem; height: 1.2rem; border-width: 2px; margin: 0 0.4rem 0 0; display: inline-block; vertical-align: middle; }

/* Banner de error */
.sp-error {
    display: flex; align-items: center; gap: 0.5rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-left: 4px solid #ef4444;
    color: #991b1b;
    padding: 0.6rem 0.85rem;
    border-radius: 0.45rem;
    font-size: 0.85rem;
}
.sp-error > .material-symbols-outlined { color: #ef4444; font-size: 1.2rem; }
.sp-error span { flex: 1; }
.sp-error__close { background: transparent; border: none; cursor: pointer; color: #991b1b; padding: 0; display: inline-flex; align-items: center; }
.sp-error__close .material-symbols-outlined { font-size: 1.1rem; }
.sp-empty-row { text-align: center; color: #94a3b8; font-size: 0.82rem; padding: 1rem 0; margin: 0; }

/* KPIs */
.sp-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.65rem;
}
.sp-kpi {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.7rem 0.85rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    border-radius: 0.55rem;
    color: #fff;
    box-shadow: 0 0.25rem 0.6rem rgba(26, 60, 110, 0.22);
}
.sp-kpi .material-symbols-outlined {
    font-size: 1.6rem;
    background: rgba(255,255,255,0.18);
    width: 2.4rem; height: 2.4rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 0.45rem;
    flex-shrink: 0;
}
.sp-kpi__label { margin: 0; font-size: 0.72rem; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.4px; }
.sp-kpi__value { margin: 0.1rem 0 0; font-family: 'Merriweather', serif; font-size: 1.35rem; font-weight: 700; line-height: 1; }
.sp-kpi__hint { margin: 0.2rem 0 0; font-size: 0.7rem; opacity: 0.85; }

/* Distribución temas/áreas */
.sp-distrib { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
@media (max-width: 1024px) { .sp-distrib { grid-template-columns: 1fr; } }
.sp-distrib__col {
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.55rem;
    padding: 0.85rem 1rem;
}
.sp-section-title {
    display: inline-flex; align-items: center; gap: 0.4rem;
    margin: 0 0 0.6rem;
    font-family: 'Merriweather', serif;
    color: #1a3c6e; font-size: 0.95rem; font-weight: 700;
}
.sp-section-title .material-symbols-outlined { color: #2e5c9e; font-size: 1.2rem; }

.sp-bars { display: flex; flex-direction: column; gap: 0.55rem; max-height: 18rem; overflow-y: auto; padding-right: 0.3rem; }
.sp-bar__head { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; margin-bottom: 0.15rem; }
.sp-bar__name { color: #1a3c6e; font-weight: 600; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-bar__count { color: #5a7a9a; font-size: 0.75rem; }
.sp-bar__track { height: 0.5rem; background: rgba(46, 92, 158, 0.1); border-radius: 999px; overflow: hidden; }
.sp-bar__fill { height: 100%; background: linear-gradient(90deg, #1a3c6e, #2e5c9e); border-radius: 999px; transition: width 0.4s ease; }
.sp-bar__fill--area { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.sp-bar--clickable { cursor: pointer; padding: 0.3rem 0.45rem; margin: -0.3rem -0.45rem; border-radius: 0.4rem; transition: background 0.15s ease; }
.sp-bar--clickable:hover { background: rgba(46, 92, 158, 0.06); }
.sp-bar--active { background: rgba(46, 92, 158, 0.12); }
.sp-bar--active .sp-bar__name { color: #1a3c6e; font-weight: 700; }

.sp-active-filter {
    display: inline-flex; align-items: center; gap: 0.3rem;
    margin-left: 0.5rem;
    font-size: 0.75rem; font-weight: 500;
    color: #1a3c6e;
    background: rgba(46, 92, 158, 0.12);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-family: 'Inter', system-ui, sans-serif;
    text-transform: none; letter-spacing: 0;
}
.sp-active-filter strong { font-weight: 700; }
.sp-active-filter__clear { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; padding: 0; margin: 0; cursor: pointer; color: #1a3c6e; }
.sp-active-filter__clear .material-symbols-outlined { font-size: 0.95rem; }

/* Tabs internos del módulo Progreso */
.sp-tabs {
    display: flex; gap: 0.4rem;
    border-bottom: 2px solid rgba(46, 92, 158, 0.18);
    margin-bottom: 0.6rem;
}
.sp-tabs__btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: transparent; border: none;
    padding: 0.55rem 1rem; margin-bottom: -2px;
    font-size: 0.85rem; font-weight: 600;
    color: #5a7a9a; cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.18s ease;
    font-family: inherit;
}
.sp-tabs__btn:hover { color: #1a3c6e; background: rgba(46, 92, 158, 0.05); border-radius: 0.35rem 0.35rem 0 0; }
.sp-tabs__btn .material-symbols-outlined { font-size: 1.15rem; }
.sp-tabs__btn--active { color: #1a3c6e; border-bottom-color: #2e5c9e; background: transparent; }
.sp-tabs__badge { background: rgba(46, 92, 158, 0.15); color: #1a3c6e; font-size: 0.72rem; padding: 0.05rem 0.45rem; border-radius: 999px; font-weight: 700; }
.sp-tabs__btn--active .sp-tabs__badge { background: #2e5c9e; color: #fff; }

.sp-pane { display: flex; flex-direction: column; gap: 1rem; }

/* Split master/detail (Sustentantes) */
.sp-split { flex-direction: row !important; gap: 0.85rem; min-height: 65vh; flex: 1; }
@media (max-width: 1024px) { .sp-split { flex-direction: column !important; } }
.sp-split__list {
    flex: 0 0 22rem;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.55rem;
    display: flex; flex-direction: column;
    overflow: hidden;
}
@media (max-width: 1024px) { .sp-split__list { flex: 1; max-height: 22rem; } }

.sp-split__search { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.7rem; border-bottom: 1px solid rgba(46, 92, 158, 0.12); }
.sp-split__search .material-symbols-outlined { color: #5a7a9a; font-size: 1.1rem; }
.sp-split__search input { flex: 1; border: none; outline: none; background: transparent; font-size: 0.85rem; color: #1a3c6e; }
.sp-split__loading { padding: 1rem; text-align: center; color: #5a7a9a; font-size: 0.85rem; }

.sp-doctors {
    list-style: none; padding: 0; margin: 0;
    overflow-y: auto; flex: 1;
    scrollbar-width: thin; scrollbar-color: #2e5c9e #f1f5f9;
}
.sp-doctors::-webkit-scrollbar { width: 0.4rem; }
.sp-doctors::-webkit-scrollbar-thumb { background: #2e5c9e; border-radius: 999px; }

.sp-doctor {
    display: flex; gap: 0.55rem; align-items: flex-start;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid rgba(46, 92, 158, 0.08);
    cursor: pointer;
    transition: background 0.15s ease;
}
.sp-doctor:hover { background: #f7fafd; }
.sp-doctor--active { background: rgba(46, 92, 158, 0.1); border-left: 3px solid #2e5c9e; padding-left: calc(0.75rem - 3px); }

.sp-doctor__avatar {
    width: 2.6rem; height: 2.6rem;
    border-radius: 50%; overflow: hidden;
    background: linear-gradient(135deg, #1a3c6e, #2e5c9e);
    color: #fff; font-weight: 700; font-size: 0.85rem;
    display: inline-flex; align-items: center; justify-content: center;
    position: relative; flex-shrink: 0;
}
.sp-doctor__avatar img { width: 100%; height: 100%; object-fit: cover; }
.sp-doctor__dot {
    position: absolute; right: -2px; bottom: -2px;
    width: 0.7rem; height: 0.7rem;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #9ca3af;
}
.sp-doctor__dot--finalizado { background: #10b981; }
.sp-doctor__dot--en_curso   { background: #3b82f6; animation: sp-pulse 1.5s infinite; }
.sp-doctor__dot--abandonado { background: #ef4444; }
.sp-doctor__dot--no_inicio  { background: #9ca3af; }
@keyframes sp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.sp-doctor__info { flex: 1; min-width: 0; }
.sp-doctor__name {
    margin: 0; font-size: 0.85rem; font-weight: 600; color: #1a3c6e;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sp-doctor__meta { display: flex; gap: 0.35rem; margin-top: 0.2rem; align-items: center; flex-wrap: wrap; }
.sp-doctor__pct { font-size: 0.72rem; color: #5a7a9a; font-weight: 600; }
.sp-doctor__bar { margin-top: 0.3rem; height: 0.3rem; background: rgba(46, 92, 158, 0.1); border-radius: 999px; overflow: hidden; }
.sp-doctor__fill { height: 100%; background: linear-gradient(90deg, #10b981, #34d399); border-radius: 999px; }
.sp-doctor__time { margin: 0.2rem 0 0; font-size: 0.7rem; color: #94a3b8; }

.sp-status { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.3px; }
.sp-status--finalizado { background: rgba(16, 185, 129, 0.18); color: #065f46; }
.sp-status--en_curso   { background: rgba(59, 130, 246, 0.18); color: #1e3a8a; }
.sp-status--abandonado { background: rgba(239, 68, 68, 0.18); color: #991b1b; }
.sp-status--no_inicio  { background: rgba(148, 163, 184, 0.22); color: #475569; }
.sp-status--lg { font-size: 0.78rem; padding: 0.25rem 0.7rem; }

/* Detalle del sustentante */
.sp-split__detail {
    flex: 1; min-width: 0;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.55rem;
    overflow-y: auto;
    padding: 1rem 1.1rem;
    display: flex; flex-direction: column; gap: 1rem;
    scrollbar-width: thin; scrollbar-color: #2e5c9e #f1f5f9;
}
.sp-split__detail::-webkit-scrollbar { width: 0.5rem; }
.sp-split__detail::-webkit-scrollbar-thumb { background: #2e5c9e; border-radius: 999px; }

.sp-detail__empty { margin: auto; text-align: center; color: #94a3b8; padding: 2rem 1rem; max-width: 24rem; }
.sp-detail__empty .material-symbols-outlined { font-size: 2.5rem; color: #cbd5e1; }
.sp-detail__empty p { margin: 0.4rem 0 0; font-size: 0.88rem; line-height: 1.5; }

.sp-detail__head { display: flex; gap: 0.9rem; align-items: center; padding-bottom: 0.85rem; border-bottom: 2px solid rgba(46, 92, 158, 0.1); }
.sp-detail__avatar {
    width: 4.5rem; height: 4.5rem;
    border-radius: 50%; overflow: hidden;
    background: linear-gradient(135deg, #1a3c6e, #2e5c9e);
    color: #fff; font-weight: 700; font-size: 1.4rem;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0.25rem 0.6rem rgba(26, 60, 110, 0.22);
}
.sp-detail__avatar img { width: 100%; height: 100%; object-fit: cover; }
.sp-detail__title { flex: 1; min-width: 0; }
.sp-detail__title h2 { margin: 0; font-family: 'Merriweather', serif; color: #1a3c6e; font-size: 1.1rem; }
.sp-detail__sub { margin: 0.15rem 0 0.4rem; font-size: 0.82rem; color: #5a7a9a; }
.sp-detail__chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.sp-detail__chip {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.72rem; color: #1a3c6e;
    background: rgba(46, 92, 158, 0.08);
    padding: 0.12rem 0.5rem; border-radius: 999px; font-weight: 600;
}
.sp-detail__chip .material-symbols-outlined { font-size: 0.9rem; color: #2e5c9e; }
.sp-detail__block { display: flex; flex-direction: column; gap: 0.55rem; }

/* Cronología del examen */
.sp-cron { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.5rem; }
.sp-cron__item {
    background: #f7fafd;
    border-left: 3px solid #2e5c9e;
    padding: 0.45rem 0.65rem;
    border-radius: 0.35rem;
    display: flex; flex-direction: column;
}
.sp-cron__label { font-size: 0.7rem; color: #5a7a9a; text-transform: uppercase; letter-spacing: 0.3px; }
.sp-cron__value { font-size: 0.9rem; color: #1a3c6e; font-weight: 700; margin-top: 0.1rem; }
.sp-cron__value--warn { color: #b45309; }
/* Variante "positiva": sobra tiempo / examen finalizado a tiempo */
.sp-cron__value--ok { color: #166534; }

/* Resultado global aciertos/errores */
.sp-result { display: flex; flex-direction: column; gap: 0.55rem; }
.sp-result__numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.45rem; }
.sp-result__box {
    padding: 0.7rem 0.85rem;
    border-radius: 0.5rem;
    background: #f7fafd;
    border-left: 4px solid #2e5c9e;
    display: flex; flex-direction: column; gap: 0.1rem;
}
.sp-result__box--good { border-left-color: #10b981; background: rgba(16, 185, 129, 0.07); }
.sp-result__box--bad  { border-left-color: #ef4444; background: rgba(239, 68, 68, 0.07); }
.sp-result__box--info { border-left-color: #2e5c9e; background: rgba(46, 92, 158, 0.07); }
.sp-result__big { font-family: 'Merriweather', serif; font-size: 1.6rem; font-weight: 700; color: #1a3c6e; line-height: 1; }
.sp-result__box--good .sp-result__big { color: #065f46; }
.sp-result__box--bad  .sp-result__big { color: #991b1b; }
.sp-result__lbl { font-size: 0.75rem; color: #5a7a9a; text-transform: uppercase; letter-spacing: 0.3px; }
.sp-result__pct { font-size: 0.85rem; font-weight: 700; color: #1a3c6e; margin-top: 0.15rem; }
.sp-result__bar { height: 0.7rem; background: rgba(148, 163, 184, 0.18); border-radius: 999px; overflow: hidden; display: flex; }
.sp-result__seg--good { background: linear-gradient(90deg, #10b981, #34d399); }
.sp-result__seg--bad  { background: linear-gradient(90deg, #ef4444, #f87171); }

/* Tabla de desempeño por tema */
.sp-tema-table { display: flex; flex-direction: column; gap: 0.25rem; }
.sp-tema-row {
    display: grid;
    grid-template-columns: 1.2fr 0.6fr 0.6fr 1.4fr;
    gap: 0.55rem;
    align-items: center;
    padding: 0.4rem 0.55rem;
    border-radius: 0.35rem;
    font-size: 0.82rem;
    background: #fff;
}
.sp-tema-row:nth-child(even) { background: #f7fafd; }
.sp-tema-row--head {
    background: #1a3c6e !important;
    color: #fff;
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.4px;
    font-weight: 700;
}
.sp-tema-row__name { color: #1a3c6e; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-tema-row__bar { display: flex; align-items: center; gap: 0.4rem; }
.sp-tema-row__track { flex: 1; height: 0.4rem; background: rgba(46, 92, 158, 0.1); border-radius: 999px; overflow: hidden; }
.sp-tema-row__fill { height: 100%; border-radius: 999px; background: #2e5c9e; }
.sp-tema-row__fill--good { background: linear-gradient(90deg, #10b981, #34d399); }
.sp-tema-row__fill--ok   { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.sp-tema-row__fill--mid  { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.sp-tema-row__fill--bad  { background: linear-gradient(90deg, #ef4444, #f87171); }
.sp-tema-row__pct { font-size: 0.78rem; font-weight: 700; color: #1a3c6e; min-width: 2.6rem; text-align: right; }

/* Tabla de preguntas */
.sp-questions { background: #fff; border: 1px solid rgba(46, 92, 158, 0.18); border-radius: 0.55rem; padding: 0.85rem 1rem 1rem; }
.sp-questions__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.55rem; }
.sp-legend { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.sp-chip { font-size: 0.7rem; padding: 0.15rem 0.5rem; border-radius: 999px; font-weight: 600; }
.sp-chip--good { background: rgba(16, 185, 129, 0.15); color: #065f46; }
.sp-chip--ok   { background: rgba(59, 130, 246, 0.15); color: #1e3a8a; }
.sp-chip--mid  { background: rgba(245, 158, 11, 0.18); color: #78350f; }
.sp-chip--bad  { background: rgba(239, 68, 68, 0.15); color: #991b1b; }

.sp-table-wrap { overflow-x: auto; }
.sp-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.sp-table thead th {
    text-align: left;
    background: #f7fafd;
    color: #1a3c6e;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase; letter-spacing: 0.3px;
    padding: 0.5rem 0.55rem;
    border-bottom: 2px solid rgba(46, 92, 158, 0.18);
    white-space: nowrap;
}
.sp-table tbody td { padding: 0.5rem 0.55rem; border-bottom: 1px solid rgba(46, 92, 158, 0.08); color: #1a3c6e; vertical-align: middle; }
.sp-table tbody tr:hover { background: #f7fafd; }
.sp-table__pregunta { max-width: 28rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-table__meta { display: flex; flex-direction: column; gap: 0.15rem; }
.sp-mini-tag {
    display: inline-block;
    font-size: 0.7rem; font-weight: 600;
    padding: 0.05rem 0.4rem;
    background: rgba(46, 92, 158, 0.1);
    color: #1a3c6e;
    border-radius: 0.25rem;
    max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sp-mini-tag--area { background: rgba(124, 58, 237, 0.1); color: #4c1d95; }
.sp-num { text-align: center; }
.sp-pct { display: flex; align-items: center; gap: 0.4rem; justify-content: center; }
.sp-pct__bar { width: 4.5rem; height: 0.4rem; background: rgba(46, 92, 158, 0.1); border-radius: 999px; overflow: hidden; }
.sp-pct__fill { height: 100%; background: linear-gradient(90deg, #10b981, #34d399); border-radius: 999px; }
.sp-metric { display: inline-block; min-width: 2.6rem; padding: 0.1rem 0.4rem; border-radius: 0.3rem; font-weight: 700; background: rgba(46, 92, 158, 0.08); color: #1a3c6e; }
.sp-metric--good { background: rgba(16, 185, 129, 0.18); color: #065f46; }
.sp-metric--ok   { background: rgba(59, 130, 246, 0.18); color: #1e3a8a; }
.sp-metric--mid  { background: rgba(245, 158, 11, 0.18); color: #78350f; }
.sp-metric--bad  { background: rgba(239, 68, 68, 0.18); color: #991b1b; }
.sp-metric--na   { background: rgba(148, 163, 184, 0.18); color: #475569; }


/* =============================================================================
   SISTEVAC · FatherComponent.vue (Tabs y shell)
   Componente:  resources/js/components/sistevac/FatherComponent.vue
   Apartado:    Módulo SISTEVAC > Sustentantes (tabs Información general / Sustentantes,
                KPIs, filtros ms-filter, paginador, prompt de convocatoria)
   Prefijo:     .sv-*  (también define .ms-filter local del módulo)
   ============================================================================= */
.csj-shell__content.sv-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

/* Tabs internos */
.sv-tabs {
    display: flex; gap: 0.4rem;
    border-bottom: 2px solid rgba(46, 92, 158, 0.18);
    padding: 0 1rem;
    background: #fff;
    flex-shrink: 0;
}
.sv-tabs__btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: transparent; border: none;
    padding: 0.7rem 1.1rem; margin-bottom: -2px;
    font-size: 0.86rem; font-weight: 600;
    color: #5a7a9a; cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.18s ease;
    font-family: inherit;
}
.sv-tabs__btn:hover { color: #1a3c6e; background: rgba(46, 92, 158, 0.05); border-radius: 0.35rem 0.35rem 0 0; }
.sv-tabs__btn .material-symbols-outlined { font-size: 1.18rem; }
.sv-tabs__btn--active { color: #1a3c6e; border-bottom-color: #2e5c9e; }
.sv-tabs__badge {
    background: rgba(46, 92, 158, 0.15); color: #1a3c6e;
    font-size: 0.72rem; padding: 0.05rem 0.5rem;
    border-radius: 999px; font-weight: 700;
}
.sv-tabs__btn--active .sv-tabs__badge { background: #2e5c9e; color: #fff; }

.sv-pane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.sv-pane--info { overflow-y: auto; padding: 0.85rem 1rem; }
.sv-pane--info::-webkit-scrollbar { width: 0.6rem; }
.sv-pane--info::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #1a3c6e, #2e5c9e); border-radius: 999px; }
.sv-pane--info::-webkit-scrollbar-track { background: #f1f5f9; }

/* Prompt cuando no hay convocatoria seleccionada */
.sv-prompt {
    margin: 2rem auto;
    max-width: 32rem; text-align: center;
    padding: 1.5rem;
    background: #fff;
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.65rem;
    color: #5a7a9a;
}
.sv-prompt > .material-symbols-outlined { font-size: 2.4rem; color: #2e5c9e; }
.sv-prompt h3 { margin: 0.6rem 0 0.3rem; font-family: 'Merriweather', serif; font-size: 1rem; color: #1a3c6e; }
.sv-prompt p { margin: 0; font-size: 0.85rem; line-height: 1.45; }

/* Área scrolleable del listado */
.sv-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.85rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.sv-scroll::-webkit-scrollbar { width: 0.6rem; }
.sv-scroll::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%); border-radius: 999px; }
.sv-scroll::-webkit-scrollbar-track { background: #f1f5f9; }

/* KPI strip del tab Sustentantes */
.sv-kpis {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.55rem;
    margin-bottom: 0.85rem;
}
@media (max-width: 1100px) { .sv-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .sv-kpis { grid-template-columns: repeat(2, 1fr); } }
.sv-kpi {
    position: relative;
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.6rem 0.8rem;
    border-radius: 0.55rem;
    color: #fff;
    box-shadow: 0 0.15rem 0.4rem rgba(15, 28, 50, 0.15);
}
.sv-kpi > .material-symbols-outlined { font-size: 1.6rem; opacity: 0.95; }
.sv-kpi b { display: block; font-size: 1.35rem; font-weight: 800; font-family: 'Merriweather', serif; line-height: 1; font-variant-numeric: tabular-nums; }
.sv-kpi small { display: block; margin-top: 0.15rem; font-size: 0.66rem; font-weight: 700; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.04em; }
.sv-kpi--total { background: linear-gradient(135deg, #1a3c6e, #2e5c9e); }
.sv-kpi--ok    { background: linear-gradient(135deg, #166534, #16a34a); }
.sv-kpi--warn  { background: linear-gradient(135deg, #b45309, #f59e0b); }
.sv-kpi--today { background: linear-gradient(135deg, #6a1b9a, #8e24aa); }
.sv-kpi--pct   { background: linear-gradient(135deg, #0e7490, #06b6d4); }

/* Filtros del header SISTEVAC (.ms-filter es patrón global; los demás módulos
   conservan su versión scoped y ganan por especificidad de Vue [data-v-xxx]). */
.ms-filter {
    display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
}
.ms-filter__input {
    display: flex; align-items: center; gap: 0.4rem;
    background: #f7fafd;
    border: 1px solid rgba(46, 92, 158, 0.25);
    border-radius: 0.45rem;
    padding: 0.4rem 0.75rem;
    min-width: 12rem; flex: 1; max-width: 16rem;
}
.ms-filter__input:focus-within {
    border-color: #2e5c9e; background: #fff;
    box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.15);
}
.ms-filter__input .material-symbols-outlined { font-size: 1.1rem; color: #2e5c9e; }
.ms-filter__input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 0.85rem; color: #1a3c6e; font-family: inherit; }
.ms-filter__select {
    background: #f7fafd;
    border: 1px solid rgba(46, 92, 158, 0.25);
    border-radius: 0.45rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.82rem; color: #1a3c6e; font-family: inherit;
    cursor: pointer; outline: none;
    min-width: 10rem;
}
.ms-filter__select:focus { border-color: #2e5c9e; background: #fff; box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.15); }
.ms-filter__btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.5rem 0.9rem; border-radius: 0.45rem;
    font-size: 0.82rem; font-weight: 600;
    border: 1px solid transparent; cursor: pointer;
}
.ms-filter__btn .material-symbols-outlined { font-size: 1rem; }
.ms-filter__btn--ghost { background: #fff; color: #5a7a9a; border-color: rgba(46, 92, 158, 0.25); }
.ms-filter__btn--ghost:hover { background: rgba(46, 92, 158, 0.08); color: #1a3c6e; border-color: rgba(46, 92, 158, 0.4); }

/* Footer paginador */
.sv-footer {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.5rem;
    padding: 0.65rem 1rem;
    border-top: 1px solid rgba(46, 92, 158, 0.18);
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
}
.sv-footer__count { font-size: 0.82rem; color: #5a7a9a; }
.sv-footer__count b { color: #1a3c6e; font-weight: 700; }
.sv-footer__nav { display: inline-flex; align-items: center; gap: 0.2rem; flex-wrap: wrap; }
.sv-footer__nav button {
    min-width: 2rem; height: 2rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid rgba(46, 92, 158, 0.22);
    border-radius: 0.4rem;
    color: #1a3c6e; font-size: 0.82rem; font-weight: 600;
    padding: 0 0.55rem; cursor: pointer; user-select: none;
    transition: all 0.18s;
}
.sv-footer__nav button:hover:not(:disabled):not(.is-active) { background: rgba(46, 92, 158, 0.08); border-color: rgba(46, 92, 158, 0.45); }
.sv-footer__nav button:disabled { opacity: 0.4; cursor: not-allowed; }
.sv-footer__nav button.is-active { background: linear-gradient(135deg, #1a3c6e, #2e5c9e); color: #fff; border-color: transparent; }
.sv-footer__limit {
    background: #f7fafd;
    border: 1px solid rgba(46, 92, 158, 0.25);
    border-radius: 0.4rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.82rem; color: #1a3c6e; font-family: inherit;
    cursor: pointer; outline: none;
}


/* =============================================================================
   SISTEVAC · ListComponent.vue (Cards de sustentantes)
   Componente:  resources/js/components/sistevac/ListComponent.vue
   Apartado:    Módulo SISTEVAC > Sustentantes, listado de cards
   Prefijo:     .sv-card*, .sv-tag, .sv-btn, .sv-meta-chip, .sv-empty
   ============================================================================= */
.sv-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 1280px) { .sv-list { grid-template-columns: repeat(2, 1fr); } }

.sv-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.7rem;
    padding: 0.85rem 1rem 0.85rem 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 28, 50, 0.04);
    display: flex; flex-flow: column;
    gap: 0.6rem;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.sv-card:hover {
    box-shadow: 0 0.4rem 1rem rgba(46, 92, 158, 0.14);
    border-color: rgba(46, 92, 158, 0.42);
    transform: translateY(-1px);
}
.sv-card::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0;
    width: 0.35rem;
    border-top-left-radius: 0.7rem; border-bottom-left-radius: 0.7rem;
}
.sv-card.is-confirmado::before { background: linear-gradient(180deg, #16a34a, #15803d); }
.sv-card.is-pendiente::before  { background: linear-gradient(180deg, #f59e0b, #d97706); }

.sv-card__head { display: flex; align-items: flex-start; gap: 0.7rem; flex-wrap: wrap; }
.sv-card__avatar {
    width: 2.8rem; height: 2.8rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a3c6e, #2e5c9e);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.25);
}
.sv-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.sv-card__avatar .material-symbols-outlined { font-size: 1.4rem; }

.sv-card__identity { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.sv-card__name {
    margin: 0;
    font-size: 1rem; font-weight: 700;
    color: #1a3c6e;
    line-height: 1.3;
    font-family: 'Merriweather', serif;
    word-break: break-word;
}
.sv-card__specialty {
    margin: 0;
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.8rem; color: #5a7a9a;
    width: max-content; max-width: 100%;
}
.sv-card__specialty .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; flex-shrink: 0; }

.sv-card__meta { display: flex; flex-wrap: wrap; gap: 0.35rem; padding-bottom: 0.55rem; border-bottom: 1px dashed rgba(46, 92, 158, 0.18); }
.sv-meta-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    background: #f7fafd;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.4rem;
    font-size: 0.72rem; color: #5a7a9a;
    text-decoration: none;
    transition: all 0.15s ease;
}
.sv-meta-chip .material-symbols-outlined { font-size: 0.9rem; color: #2e5c9e; flex-shrink: 0; }
.sv-meta-chip small { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #5a7a9a; }
.sv-meta-chip b { color: #1a3c6e; font-weight: 700; font-variant-numeric: tabular-nums; }
.sv-meta-chip--link { color: #2e5c9e; word-break: break-all; }
.sv-meta-chip--link:hover { background: rgba(46, 92, 158, 0.1); border-color: rgba(46, 92, 158, 0.35); color: #1a3c6e; }

.sv-card__chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    border-radius: 0.4rem;
    font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    border: 1px solid transparent;
    flex-shrink: 0;
}
.sv-card__chip .material-symbols-outlined { font-size: 1rem; }
.sv-card__chip.is-ok   { background: #dcfce7; color: #166534; border-color: rgba(22, 101, 52, 0.25); }
.sv-card__chip.is-warn { background: #fef3c7; color: #92400e; border-color: rgba(146, 64, 14, 0.25); }

.sv-card__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.sv-tag {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem; font-weight: 600;
    border-radius: 0.35rem;
    border: 1px solid transparent;
}
.sv-tag .material-symbols-outlined { font-size: 0.9rem; }
.sv-tag--conv  { background: linear-gradient(135deg, #f3e8ff, #e9d5ff); color: #6a1b9a; border-color: rgba(106, 27, 154, 0.22); }
.sv-tag--date  { background: linear-gradient(135deg, rgba(46, 92, 158, 0.08), rgba(46, 92, 158, 0.18)); color: #1a3c6e; border-color: rgba(46, 92, 158, 0.25); }
.sv-tag--sede  { background: linear-gradient(135deg, #ecfdf5, #d1fae5); color: #166534; border-color: rgba(22, 101, 52, 0.22); }
.sv-tag--turno { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; border-color: rgba(146, 64, 14, 0.22); }

.sv-card__body { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding-top: 0.55rem; border-top: 1px dashed rgba(46, 92, 158, 0.22); }
@media (max-width: 600px) { .sv-card__body { grid-template-columns: 1fr; } }
.sv-card__assign {
    background: #f7fafd;
    border: 1px solid rgba(46, 92, 158, 0.14);
    border-radius: 0.45rem;
    padding: 0.5rem 0.65rem;
}
.sv-card__assign-label {
    margin: 0 0 0.3rem 0;
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.65rem; font-weight: 800;
    color: #5a7a9a;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.sv-card__assign-label .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; }
.sv-card__assign-name { margin: 0; display: flex; flex-direction: column; }
.sv-card__assign-name b { color: #1a3c6e; font-weight: 700; font-size: 0.82rem; }
.sv-card__assign-name small { color: #5a7a9a; font-size: 0.7rem; margin-top: 0.1rem; word-break: break-all; }
.sv-card__assign-empty { margin: 0; display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; color: #b45309; font-style: italic; }
.sv-card__assign-empty .material-symbols-outlined { font-size: 0.95rem; color: #d97706; }

.sv-card__actions {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 0.6rem;
    padding: 0.65rem 0.85rem;
    margin: 0.4rem -1rem -0.85rem -1.25rem;
    background: linear-gradient(180deg, rgba(46, 92, 158, 0.04), rgba(46, 92, 158, 0.08));
    border-top: 1px solid rgba(46, 92, 158, 0.18);
    margin-top: auto;
}
.sv-card__confirmed-by { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.74rem; color: #166534; font-weight: 600; flex: 1; min-width: 0; }
.sv-card__confirmed-by .material-symbols-outlined { font-size: 0.95rem; }
.sv-card__btns { display: flex; gap: 0.45rem; flex-wrap: wrap; align-items: center; flex-shrink: 0; }

.sv-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.5rem 0.95rem;
    border-radius: 0.45rem;
    font-size: 0.82rem; font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.18s;
    font-family: inherit;
    white-space: nowrap;
}
.sv-btn .material-symbols-outlined { font-size: 1.05rem; }
.sv-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sv-btn--ghost { background: #fff; color: #1a3c6e; border-color: rgba(46, 92, 158, 0.3); box-shadow: 0 0.1rem 0.3rem rgba(15, 28, 50, 0.05); }
.sv-btn--ghost:hover:not(:disabled) { background: rgba(46, 92, 158, 0.08); border-color: rgba(46, 92, 158, 0.45); transform: translateY(-1px); }
.sv-btn--ok { background: linear-gradient(135deg, #16a34a, #15803d); color: #fff; box-shadow: 0 0.2rem 0.5rem rgba(22, 163, 74, 0.35); }
.sv-btn--ok:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 0.3rem 0.7rem rgba(22, 163, 74, 0.5); }
.sv-btn--warn { background: #fff; color: #92400e; border-color: rgba(146, 64, 14, 0.3); box-shadow: 0 0.1rem 0.3rem rgba(15, 28, 50, 0.05); }
.sv-btn--warn:hover { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; border-color: transparent; transform: translateY(-1px); box-shadow: 0 0.25rem 0.55rem rgba(245, 158, 11, 0.4); }

.sv-empty {
    grid-column: 1 / -1;
    background: #fff;
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.65rem;
    padding: 2.5rem 1rem; text-align: center; color: #5a7a9a;
}
.sv-empty .material-symbols-outlined { font-size: 3rem; color: rgba(46, 92, 158, 0.5); }
.sv-empty h5 { margin: 0.5rem 0 0.2rem; font-weight: 700; color: #1a3c6e; font-size: 1rem; }
.sv-empty p { margin: 0; font-size: 0.85rem; }


/* =============================================================================
   SISTEVAC · AsignarModal.vue (Modal de proctor/sinodal)
   Componente:  resources/js/components/sistevac/AsignarModal.vue
   Apartado:    Modal que abre al hacer click en "Asignar" / "Reasignar" en una card de sustentante
   Prefijo:     .sv-modal*
   ============================================================================= */
.sv-modal {
    position: fixed; inset: 0;
    background: rgba(15, 28, 50, 0.55);
    backdrop-filter: blur(3px);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.sv-modal__shell {
    background: #fff;
    border-radius: 0.7rem;
    width: 100%; max-width: 36rem;
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 0 1rem 3rem rgba(15, 28, 50, 0.3);
}

.sv-modal__head {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, #1a3c6e, #2e5c9e);
    color: #fff;
}
.sv-modal__head-icon {
    width: 2.3rem; height: 2.3rem;
    background: rgba(255,255,255,0.18);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sv-modal__head-icon .material-symbols-outlined { font-size: 1.25rem; color: #fff; }
.sv-modal__head > div { flex: 1; min-width: 0; }
.sv-modal__head h3 { margin: 0; font-family: 'Merriweather', serif; font-size: 0.98rem; font-weight: 700; }
.sv-modal__head p { margin: 0.1rem 0 0; font-size: 0.78rem; opacity: 0.85; }
.sv-modal__close {
    width: 2.1rem; height: 2.1rem;
    background: rgba(255,255,255,0.15);
    color: #fff; border: 0; border-radius: 50%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.sv-modal__close:hover { background: rgba(255,255,255,0.28); }

.sv-modal__body { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.85rem; }
.sv-modal__section { display: flex; flex-direction: column; gap: 0.35rem; }
.sv-modal__label {
    margin: 0;
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.72rem; font-weight: 800;
    color: #5a7a9a;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.sv-modal__label .material-symbols-outlined { font-size: 1rem; color: #2e5c9e; }
.sv-modal__hint { text-transform: none; letter-spacing: 0; font-weight: 500; opacity: 0.7; }

.sv-modal__select {
    background: #f7fafd;
    border: 1px solid rgba(46, 92, 158, 0.25);
    border-radius: 0.45rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.88rem; color: #1a3c6e;
    font-family: inherit;
    cursor: pointer; outline: none;
}
.sv-modal__select:focus { border-color: #2e5c9e; background: #fff; box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.15); }
.sv-modal__select:disabled { cursor: not-allowed; opacity: 0.6; background: #f1f5f9; }

.sv-modal__rule {
    margin: 0;
    display: inline-flex; align-items: flex-start; gap: 0.35rem;
    padding: 0.5rem 0.7rem;
    background: rgba(46, 92, 158, 0.06);
    border: 1px dashed rgba(46, 92, 158, 0.25);
    border-radius: 0.4rem;
    font-size: 0.76rem; color: #5a7a9a; line-height: 1.4;
}
.sv-modal__rule .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; flex-shrink: 0; margin-top: 0.1rem; }
.sv-modal__rule b { color: #1a3c6e; font-family: monospace; }

.sv-modal__footer {
    display: flex; justify-content: flex-end; gap: 0.45rem;
    padding: 0.7rem 1rem;
    background: #f7fafd;
    border-top: 1px solid rgba(46, 92, 158, 0.18);
}
.sv-modal__btn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.55rem 1rem;
    border-radius: 0.45rem;
    font-size: 0.85rem; font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.18s;
    font-family: inherit;
}
.sv-modal__btn .material-symbols-outlined { font-size: 1.05rem; }
.sv-modal__btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sv-modal__btn--ghost { background: #fff; color: #5a7a9a; border-color: rgba(46, 92, 158, 0.25); }
.sv-modal__btn--ghost:hover { background: rgba(46, 92, 158, 0.06); color: #1a3c6e; }
.sv-modal__btn--primary { background: linear-gradient(135deg, #1a3c6e, #2e5c9e); color: #fff; box-shadow: 0 0.2rem 0.5rem rgba(26, 60, 110, 0.3); }
.sv-modal__btn--primary:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }


/* =============================================================================
   PANEL ADMIN · FatherComponent.vue (Shell del dashboard)
   Componente:  resources/js/components/inicio/administrador/FatherComponent.vue
   Apartado:    Contenedor raíz del Panel de control: secciones, comprobantes 2-col,
                subcards (con variante CV), directorio + avisos split.
   Prefijo:     .adm-section, .adm-content, .adm-comprobantes, .adm-subcard, .adm-directory
   ============================================================================= */
.csj-shell__content.adm-content {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 0.85rem 1rem 1.5rem;
    gap: 1rem;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.adm-content::-webkit-scrollbar { width: 0.6rem; }
.adm-content::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%); border-radius: 999px; }
.adm-content::-webkit-scrollbar-track { background: #f1f5f9; }

.adm-section {
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.7rem;
    padding: 0.85rem 1rem;
    box-shadow: 0 1px 2px rgba(15, 28, 50, 0.04);
}
.adm-section__head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed rgba(46, 92, 158, 0.22);
}
.adm-section__title { display: inline-flex; align-items: center; gap: 0.5rem; }
.adm-section__title .material-symbols-outlined { font-size: 1.4rem; color: #2e5c9e; }
.adm-section__title h2 {
    margin: 0;
    font-size: 1rem; font-weight: 700;
    color: #1a3c6e;
    font-family: 'Merriweather', serif;
}
.adm-section__hint {
    margin: 0;
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.75rem; color: #5a7a9a;
    background: rgba(46, 92, 158, 0.06);
    border: 1px dashed rgba(46, 92, 158, 0.25);
    border-radius: 0.4rem;
    padding: 0.35rem 0.6rem;
}
.adm-section__hint .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; }

.adm-section--convocatorias { background: linear-gradient(135deg, #f7fafd 0%, #ffffff 100%); }

/* Split principal del panel — izquierda 40% (utilidades) | derecha 60% (directorio).
   2fr/3fr = 40% / 60%. La altura la define la columna IZQUIERDA: con align-items: stretch
   la celda derecha se estira a esa altura, y su contenido va en un inner ABSOLUTO para que
   el directorio (que de natural sería más alto) no empuje la fila — sólo scrollea adentro.
   Resultado: alto del directorio = alto de (Comprobantes + Avisos + Configuraciones). */
.adm-split {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 1rem;
    align-items: stretch;
}
@media (max-width: 1100px) {
    /* Apilado: ya no hay columna izquierda de referencia, el inner absoluto vuelve a flujo normal */
    .adm-split { grid-template-columns: 1fr; }
    /* Directorio primero al apilar (antes que comprobantes/avisos/configuraciones) */
    .adm-split__aside { order: 1; }
    .adm-split__main { order: -1; position: static; overflow: visible; padding: 0.85rem 1rem; }
    .adm-split__main-inner { position: static; inset: auto; padding: 0; }
    .adm-split__main-inner .adm-dir { flex: 0 1 auto; }
    .adm-split__main-inner .adm-dir__list { max-height: clamp(30rem, 100vh, 56rem); flex: 0 1 auto; }
}
/* Columna izquierda: comprobantes + avisos + configuraciones apilados */
.adm-split__aside {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0; /* evita que el contenido ancho desborde la celda del grid */
}
/* Columna derecha: se estira a la altura de la izquierda; el inner absoluto la rellena.
   min-height = piso de seguridad: aunque el track del grid se calcule muy bajo en cierto
   rango responsive, el directorio nunca colapsa a 0 y se sigue viendo. Cuando la columna
   izquierda es más alta (caso normal), gana ésta y el directorio la iguala. */
.adm-split__main {
    min-width: 0;
    min-height: 26rem;
    position: relative;
    overflow: hidden;
    padding: 0; /* el padding pasa al inner para no descuadrar el inset:0 */
}
.adm-split__main-inner {
    position: absolute;
    inset: 0;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* El directorio llena el alto disponible y delega el scroll a su lista interna */
.adm-split__main-inner .adm-dir { flex: 1 1 auto; min-height: 0; }
.adm-split__main-inner .adm-dir__list {
    max-height: none; /* anula el clamp(30rem,100vh,56rem) propio */
    flex: 1 1 auto;
    min-height: 0;
}

/* Comprobantes — grid 2 cols */
.adm-comprobantes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
@media (max-width: 1100px) { .adm-comprobantes { grid-template-columns: 1fr; } }
/* En la columna del 40% (estrecha) los comprobantes examen/cv se apilan en 1 columna */
.adm-comprobantes--stack { grid-template-columns: 1fr; }
.adm-comprobantes__col {
    background: #f7fafd;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.55rem;
    overflow: hidden;
    display: flex; flex-direction: column;
}
.adm-subcard__head {
    display: flex; align-items: center; gap: 0.45rem;
    padding: 0.55rem 0.75rem;
    background: linear-gradient(135deg, rgba(46, 92, 158, 0.08), rgba(46, 92, 158, 0.18));
    border-bottom: 1px solid rgba(46, 92, 158, 0.22);
}
.adm-subcard__head h3 { margin: 0; font-size: 0.85rem; font-weight: 700; color: #1a3c6e; }
.adm-subcard__head .material-symbols-outlined { font-size: 1.1rem; color: #2e5c9e; }
.adm-subcard__head--cv {
    background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
    border-bottom-color: rgba(106, 27, 154, 0.22);
}
.adm-subcard__head--cv h3 { color: #6a1b9a; }
.adm-subcard__head--cv .material-symbols-outlined { color: #6a1b9a; }

/* Directorio + Avisos — split 2/3 + 1/3 */
.adm-section--directory {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    /* No estirar las columnas a la misma altura: cada una toma su altura natural (con su
       propio scroll interno) y se alinean arriba. Evita que el directorio se agrande para
       igualar a la columna de avisos + configuraciones. */
    align-items: start;
}
@media (max-width: 1100px) { .adm-section--directory { grid-template-columns: 1fr; } }
.adm-directory,
.adm-avisos-side {
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.7rem;
    padding: 0.85rem 1rem;
    box-shadow: 0 1px 2px rgba(15, 28, 50, 0.04);
}


/* =============================================================================
   PANEL ADMIN · AvisosComponent.vue
   Componente:  resources/js/components/inicio/administrador/AvisosComponent.vue
   Apartado:    Aside derecho "Avisos del consejo" del Panel de control
   Prefijo:     .adm-avisos*, .adm-aviso*
   ============================================================================= */
.adm-avisos {
    display: flex; flex-direction: column;
    gap: 0.6rem;
    max-height: clamp(28rem, 60vh, 50rem);
    overflow-y: auto;
    padding-right: 0.3rem;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.adm-avisos::-webkit-scrollbar { width: 0.45rem; }
.adm-avisos::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%); border-radius: 999px; }
.adm-avisos::-webkit-scrollbar-track { background: #f1f5f9; }

.adm-avisos__empty { text-align: center; padding: 2.5rem 1rem; color: #5a7a9a; }
.adm-avisos__empty .material-symbols-outlined { font-size: 2.8rem; color: rgba(46, 92, 158, 0.4); }
.adm-avisos__empty h5 { margin: 0.4rem 0 0.2rem; font-weight: 700; color: #1a3c6e; font-size: 0.95rem; }
.adm-avisos__empty p { margin: 0; font-size: 0.82rem; }

.adm-avisos__list { display: flex; flex-direction: column; gap: 0.55rem; }

.adm-aviso {
    display: flex; gap: 0.65rem;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fcd34d;
    border-left: 4px solid #f59e0b;
    border-radius: 0.5rem;
    padding: 0.7rem 0.85rem;
    transition: box-shadow 0.18s, transform 0.18s;
}
.adm-aviso:hover { box-shadow: 0 0.3rem 0.85rem rgba(245, 158, 11, 0.18); transform: translateY(-1px); }
.adm-aviso__icon {
    width: 2.3rem; height: 2.3rem;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0.15rem 0.4rem rgba(245, 158, 11, 0.3);
}
.adm-aviso__icon .material-symbols-outlined { font-size: 1.2rem; color: #fff; }
.adm-aviso__body { flex: 1; min-width: 0; }
.adm-aviso__title {
    margin: 0;
    font-size: 0.88rem; font-weight: 700;
    color: #78350f;
    font-family: 'Merriweather', serif;
    line-height: 1.3;
}
.adm-aviso__desc { margin: 0.3rem 0 0; font-size: 0.8rem; color: #713f12; line-height: 1.45; white-space: pre-line; }
.adm-aviso__date {
    margin: 0.45rem 0 0;
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.72rem;
    color: #92400e;
    font-weight: 600;
}
.adm-aviso__date .material-symbols-outlined { font-size: 0.9rem; }
.adm-aviso__date b { font-weight: 800; }

/* ─── Configuraciones del Consejo (tarjeta SOLO LECTURA en el dashboard admin) ─── */
/* Separa el header de Configuraciones del bloque de avisos que tiene arriba. */
.adm-section__head--spaced { margin-top: 1.1rem; }

.adm-config { display: flex; flex-direction: column; }
.adm-config__empty {
    text-align: center; padding: 1.5rem 1rem; color: #5a7a9a;
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
}
.adm-config__empty .material-symbols-outlined { font-size: 2.2rem; color: rgba(46, 92, 158, 0.4); }
.adm-config__empty p { margin: 0; font-size: 0.82rem; }

.adm-config__groups { display: flex; flex-direction: column; gap: 0.85rem; }

.adm-config__group {
    background: #f8fafc;
    border: 1px solid rgba(46, 92, 158, 0.14);
    border-radius: 0.55rem;
    padding: 0.6rem 0.75rem;
}
.adm-config__group-title {
    display: flex; align-items: center; gap: 0.4rem;
    margin: 0 0 0.5rem;
    font-size: 0.78rem; font-weight: 700;
    color: #1a3c6e;
    text-transform: uppercase; letter-spacing: 0.02em;
}
.adm-config__group-title .material-symbols-outlined { font-size: 1.05rem; color: #2e5c9e; }

.adm-config__row {
    display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
    padding: 0.3rem 0;
    border-top: 1px solid #eef2f7;
}
.adm-config__row:first-of-type { border-top: none; }
.adm-config__label { font-size: 0.8rem; color: #334155; line-height: 1.3; }

.adm-config__chip {
    flex-shrink: 0;
    display: inline-flex; align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem; font-weight: 700;
    white-space: nowrap;
    border: 1px solid transparent;
}
.adm-config__chip--ok      { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.adm-config__chip--bad     { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.adm-config__chip--info    { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.adm-config__chip--neutral { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
.adm-config__chip--muted   { background: #f8fafc; color: #94a3b8; border-color: #e2e8f0; }

.adm-config__link {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.75rem; font-weight: 700;
    color: #1d4ed8; text-decoration: none;
}
.adm-config__link:hover { text-decoration: underline; }
.adm-config__link .material-symbols-outlined { font-size: 0.95rem; }


/* =============================================================================
   PANEL ADMIN · MedicosConsejoComponent.vue + MedicosPorEspecialidadComponent.vue
   Componentes: resources/js/components/inicio/administrador/MedicosConsejoComponent.vue
                resources/js/components/inicio/administrador/MedicosPorEspecialidadComponent.vue
   Apartado:    Strips de KPI del Panel de control (4 KPIs del consejo + KPIs por especialidad)
   Prefijo:     .adm-kpi-strip (con modificadores --consejo / --spec), .adm-kpi
   ============================================================================= */
.adm-kpi-strip { display: grid; gap: 0.7rem; }

/* MedicosConsejo: 4 KPIs fijos (Total, Confirmados, Pendientes, Hoy) */
.adm-kpi-strip--consejo { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .adm-kpi-strip--consejo { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .adm-kpi-strip--consejo { grid-template-columns: 1fr; } }
.adm-kpi-strip--consejo .adm-kpi { padding: 1rem 1.1rem; box-shadow: 0 0.3rem 0.85rem rgba(15, 28, 50, 0.12); }
.adm-kpi-strip--consejo .adm-kpi::after { width: 7rem; height: 7rem; }

/* MedicosPorEspecialidad: auto-fit con cycle de colores cada 6 */
.adm-kpi-strip--spec { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.adm-kpi-strip--spec .adm-kpi {
    padding: 0.9rem 1rem;
    box-shadow: 0 0.25rem 0.75rem rgba(15, 28, 50, 0.1);
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
}
.adm-kpi-strip--spec .adm-kpi::after { width: 6rem; height: 6rem; }
.adm-kpi-strip--spec .adm-kpi--spec:nth-child(6n+1) { background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%); }
.adm-kpi-strip--spec .adm-kpi--spec:nth-child(6n+2) { background: linear-gradient(135deg, #6a1b9a 0%, #8e24aa 100%); }
.adm-kpi-strip--spec .adm-kpi--spec:nth-child(6n+3) { background: linear-gradient(135deg, #166534 0%, #16a34a 100%); }
.adm-kpi-strip--spec .adm-kpi--spec:nth-child(6n+4) { background: linear-gradient(135deg, #c2410c 0%, #f97316 100%); }
.adm-kpi-strip--spec .adm-kpi--spec:nth-child(6n+5) { background: linear-gradient(135deg, #0e7490 0%, #06b6d4 100%); }
.adm-kpi-strip--spec .adm-kpi--spec:nth-child(6n)   { background: linear-gradient(135deg, #b45309 0%, #ca8a04 100%); }

.adm-kpi {
    position: relative;
    display: flex; align-items: center; gap: 0.75rem;
    border-radius: 0.7rem;
    color: #fff;
    overflow: hidden;
}
.adm-kpi::after {
    content: '';
    position: absolute;
    top: 50%; right: -2rem;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    pointer-events: none;
}
/* Variantes de KPI MedicosConsejo */
.adm-kpi--primary { background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%); }
.adm-kpi--info    { background: linear-gradient(135deg, #2e5c9e 0%, #5b8acc 100%); }
.adm-kpi--warn    { background: linear-gradient(135deg, #c2410c 0%, #f97316 100%); }
.adm-kpi--total   { background: linear-gradient(135deg, #166534 0%, #16a34a 100%); }

.adm-kpi__icon {
    width: 3rem; height: 3rem;
    background: rgba(255,255,255,0.18);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    backdrop-filter: blur(4px);
    z-index: 1;
}
.adm-kpi-strip--spec .adm-kpi__icon { width: 2.8rem; height: 2.8rem; }
.adm-kpi__icon .material-symbols-outlined { font-size: 1.5rem; color: #fff; }
.adm-kpi-strip--spec .adm-kpi__icon .material-symbols-outlined { font-size: 1.4rem; }

.adm-kpi__body { z-index: 1; min-width: 0; flex: 1; }
.adm-kpi__label {
    margin: 0;
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    opacity: 0.9;
    line-height: 1.2;
    word-break: break-word;
}
.adm-kpi__value {
    margin: 0.1rem 0 0.15rem 0;
    font-size: 1.85rem; font-weight: 800;
    font-family: 'Merriweather', serif;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.adm-kpi-strip--spec .adm-kpi__value { font-size: 1.6rem; }
.adm-kpi__sub { margin: 0; font-size: 0.72rem; opacity: 0.85; }


/* =============================================================================
   PANEL ADMIN · ConvocatoriasVigentesComponent.vue
   Componente:  resources/js/components/inicio/administrador/ConvocatoriasVigentesComponent.vue
   Apartado:    Sección "Convocatorias vigentes" del Panel de control + modal de médicos
   Prefijo:     .adm-cv*, .adm-cv-modal*, .adm-cv-medico*
   ============================================================================= */
.adm-cv__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 0.85rem;
}
.adm-cv__empty { text-align: center; padding: 2.5rem 1rem; color: #5a7a9a; }
.adm-cv__empty .material-symbols-outlined { font-size: 3rem; color: rgba(46, 92, 158, 0.4); }
.adm-cv__empty h5 { margin: 0.5rem 0 0.2rem; font-weight: 700; color: #1a3c6e; font-size: 1rem; }
.adm-cv__empty p { margin: 0; font-size: 0.85rem; }

.adm-cv__card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.7rem;
    padding: 0.85rem 1rem 0.85rem 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 28, 50, 0.04);
    transition: box-shadow 0.18s, border-color 0.18s, transform 0.18s;
    display: flex; flex-direction: column;
    gap: 0.7rem;
}
.adm-cv__card:hover { box-shadow: 0 0.35rem 0.95rem rgba(46, 92, 158, 0.14); border-color: rgba(46, 92, 158, 0.42); transform: translateY(-1px); }
.adm-cv__card::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0;
    width: 0.35rem;
    border-top-left-radius: 0.7rem; border-bottom-left-radius: 0.7rem;
}
.adm-cv__card.is-ok::before       { background: linear-gradient(180deg, #16a34a, #15803d); }
.adm-cv__card.is-warning::before  { background: linear-gradient(180deg, #f59e0b, #d97706); }
.adm-cv__card.is-critical::before { background: linear-gradient(180deg, #dc2626, #991b1b); }

.adm-cv__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.adm-cv__title-wrap { flex: 1; min-width: 0; }
.adm-cv__title { margin: 0; font-size: 0.98rem; font-weight: 700; color: #1a3c6e; line-height: 1.25; font-family: 'Merriweather', serif; word-break: break-word; }
.adm-cv__procesos { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.4rem; }
.adm-cv__proc {
    display: inline-flex; align-items: center; gap: 0.2rem;
    padding: 0.15rem 0.5rem;
    background: linear-gradient(135deg, rgba(46, 92, 158, 0.08), rgba(46, 92, 158, 0.18));
    border: 1px solid rgba(46, 92, 158, 0.25);
    border-radius: 999px;
    font-size: 0.68rem; font-weight: 600; color: #1a3c6e;
}
.adm-cv__proc .material-symbols-outlined { font-size: 0.85rem; color: #2e5c9e; }

.adm-cv__countdown {
    display: flex; flex-direction: column; align-items: flex-end;
    line-height: 1.1;
    padding: 0.45rem 0.65rem;
    border-radius: 0.5rem;
    background: rgba(46, 92, 158, 0.06);
    border: 1px solid rgba(46, 92, 158, 0.2);
    flex-shrink: 0;
}
.adm-cv__card.is-warning .adm-cv__countdown { background: #fef3c7; border-color: rgba(146, 64, 14, 0.25); }
.adm-cv__card.is-critical .adm-cv__countdown { background: #fee2e2; border-color: rgba(185, 28, 28, 0.25); }
.adm-cv__countdown b { font-size: 1.5rem; font-weight: 800; color: #1a3c6e; font-family: 'Merriweather', serif; line-height: 1; font-variant-numeric: tabular-nums; }
.adm-cv__card.is-warning .adm-cv__countdown b { color: #92400e; }
.adm-cv__card.is-critical .adm-cv__countdown b { color: #991b1b; }
.adm-cv__countdown small { margin-top: 0.1rem; font-size: 0.65rem; color: #5a7a9a; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.adm-cv__urgency { margin-top: 0.2rem; font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #5a7a9a; }
.adm-cv__card.is-warning .adm-cv__urgency { color: #92400e; }
.adm-cv__card.is-critical .adm-cv__urgency { color: #991b1b; }

.adm-cv__range {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.35rem 0.6rem;
    background: #f7fafd;
    border: 1px solid rgba(46, 92, 158, 0.14);
    border-radius: 0.4rem;
    font-size: 0.74rem; color: #1a3c6e; font-weight: 600;
    flex-wrap: wrap;
}
.adm-cv__range .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; }
.adm-cv__range-sep { color: #94a3b8; font-weight: 400; }

.adm-cv__main { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-top: 0.55rem; border-top: 1px dashed rgba(46, 92, 158, 0.22); }
.adm-cv__main-block {
    flex: 1; min-width: 7rem;
    display: flex; align-items: center; gap: 0.45rem;
    padding: 0.45rem 0.6rem;
    background: linear-gradient(135deg, rgba(46, 92, 158, 0.06), rgba(46, 92, 158, 0.12));
    border: 1px solid rgba(46, 92, 158, 0.2);
    border-radius: 0.4rem;
}
.adm-cv__main-block .material-symbols-outlined { font-size: 1.3rem; color: #2e5c9e; }
.adm-cv__main-block b { display: block; font-size: 1.1rem; font-weight: 800; color: #1a3c6e; line-height: 1; font-variant-numeric: tabular-nums; font-family: 'Merriweather', serif; }
.adm-cv__main-block small { display: block; margin-top: 0.1rem; font-size: 0.68rem; color: #5a7a9a; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }

.adm-cv__progress { display: flex; flex-direction: column; gap: 0.35rem; padding-top: 0.55rem; border-top: 1px dashed rgba(46, 92, 158, 0.22); }
.adm-cv__progress-head { display: flex; align-items: center; gap: 0.3rem; }
.adm-cv__progress-head .material-symbols-outlined { font-size: 1rem; color: #2e5c9e; }
.adm-cv__progress-label { flex: 1; font-size: 0.74rem; font-weight: 700; color: #5a7a9a; text-transform: uppercase; letter-spacing: 0.04em; }
.adm-cv__progress-pct { font-size: 0.82rem; font-weight: 800; color: #1a3c6e; font-variant-numeric: tabular-nums; }
.adm-cv__progress-bar { height: 0.45rem; background: rgba(46, 92, 158, 0.1); border-radius: 999px; overflow: hidden; }
.adm-cv__progress-fill { height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.adm-cv__progress-fill.is-pay { background: linear-gradient(90deg, #2e5c9e, #5b8acc); }
.adm-cv__progress-fill.is-rev { background: linear-gradient(90deg, #16a34a, #15803d); }

.adm-cv__monto {
    margin: 0;
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.4rem 0.6rem;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 1px solid rgba(22, 101, 52, 0.22);
    border-radius: 0.4rem;
    font-size: 0.78rem;
    color: #166534;
    flex-wrap: wrap;
}
.adm-cv__monto .material-symbols-outlined { font-size: 1.1rem; color: #166534; }
.adm-cv__monto b { font-weight: 800; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.adm-cv__monto small { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; opacity: 0.75; margin-left: 0.2rem; }
.adm-cv__monto-sep { color: #5a7a9a; opacity: 0.5; }
.adm-cv__monto-warn { color: #92400e; }
.adm-cv__monto-warn b { color: #92400e; }

.adm-cv__progress-detail { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.adm-cv__chip {
    display: inline-flex; align-items: center; gap: 0.2rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem; font-weight: 600;
    border: 1px solid transparent;
}
.adm-cv__chip b { font-weight: 800; font-variant-numeric: tabular-nums; }
.adm-cv__chip.is-ok      { background: #dcfce7; color: #166534; border-color: rgba(22, 101, 52, 0.22); }
.adm-cv__chip.is-warn    { background: #fef3c7; color: #92400e; border-color: rgba(146, 64, 14, 0.22); }
.adm-cv__chip.is-pending { background: #fee2e2; color: #991b1b; border-color: rgba(185, 28, 28, 0.22); }
.adm-cv__chip.is-info    { background: rgba(46, 92, 158, 0.08); color: #1a3c6e; border-color: rgba(46, 92, 158, 0.22); }

.adm-cv__btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.5rem 0.85rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    border: 0;
    border-radius: 0.45rem;
    font-size: 0.82rem; font-weight: 700;
    cursor: pointer;
    transition: all 0.18s;
    font-family: inherit;
    margin-top: auto;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.25);
}
.adm-cv__btn:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 0.3rem 0.7rem rgba(26, 60, 110, 0.4); }
.adm-cv__btn .material-symbols-outlined { font-size: 1.1rem; }
.adm-cv__btn-chev { margin-left: auto; }

/* Modal de médicos por convocatoria */
.adm-cv-modal {
    position: fixed; inset: 0;
    background: rgba(15, 28, 50, 0.55);
    backdrop-filter: blur(3px);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.adm-cv-modal__shell {
    background: #fff;
    border-radius: 0.7rem;
    width: 100%; max-width: 56rem;
    max-height: 92vh;
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 0 1rem 3rem rgba(15, 28, 50, 0.3);
}
.adm-cv-modal__head {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
}
.adm-cv-modal__head > .material-symbols-outlined {
    width: 2.3rem; height: 2.3rem;
    background: rgba(255,255,255,0.18);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.adm-cv-modal__head > div { flex: 1; min-width: 0; }
.adm-cv-modal__head h3 { margin: 0; font-size: 0.98rem; font-weight: 700; font-family: 'Merriweather', serif; }
.adm-cv-modal__head p { margin: 0.1rem 0 0; font-size: 0.78rem; opacity: 0.85; }
.adm-cv-modal__close {
    width: 2.2rem; height: 2.2rem;
    background: rgba(255,255,255,0.15);
    color: #fff; border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.adm-cv-modal__close:hover { background: rgba(255,255,255,0.28); }
.adm-cv-modal__close .material-symbols-outlined { font-size: 1.2rem; }

.adm-cv-modal__filter {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.7rem 1rem;
    background: #f7fafd;
    border-bottom: 1px solid rgba(46, 92, 158, 0.18);
}
.adm-cv-modal__search {
    flex: 1;
    display: flex; align-items: center; gap: 0.4rem;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.25);
    border-radius: 0.45rem;
    padding: 0.4rem 0.7rem;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.adm-cv-modal__search:focus-within { border-color: #2e5c9e; box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.15); }
.adm-cv-modal__search .material-symbols-outlined { font-size: 1.1rem; color: #2e5c9e; }
.adm-cv-modal__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 0.85rem; color: #1a3c6e; font-family: inherit; }
.adm-cv-modal__count { font-size: 0.78rem; color: #5a7a9a; flex-shrink: 0; }
.adm-cv-modal__count b { color: #1a3c6e; font-weight: 800; }

.adm-cv-modal__body {
    flex: 1; min-height: 0;
    overflow-y: auto;
    padding: 0.85rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.adm-cv-modal__body::-webkit-scrollbar { width: 0.5rem; }
.adm-cv-modal__body::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #1a3c6e, #2e5c9e); border-radius: 999px; }
.adm-cv-modal__body::-webkit-scrollbar-track { background: #f1f5f9; }
.adm-cv-modal__empty { text-align: center; padding: 2rem; color: #5a7a9a; }
.adm-cv-modal__empty .material-symbols-outlined { font-size: 2.5rem; color: rgba(46, 92, 158, 0.4); }
.adm-cv-modal__empty p { margin: 0.5rem 0 0; font-size: 0.9rem; }

.adm-cv-modal__list { display: flex; flex-direction: column; gap: 0.5rem; }
.adm-cv-medico {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.6rem 0.75rem;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-left: 3px solid #2e5c9e;
    border-radius: 0.45rem;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.adm-cv-medico:hover { box-shadow: 0 0.25rem 0.65rem rgba(46, 92, 158, 0.12); border-color: rgba(46, 92, 158, 0.4); }
.adm-cv-medico__avatar {
    width: 2.5rem; height: 2.5rem;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(46, 92, 158, 0.18);
    flex-shrink: 0;
    background: linear-gradient(135deg, #1a3c6e, #2e5c9e);
}
.adm-cv-medico__avatar img { width: 100%; height: 100%; object-fit: cover; }
.adm-cv-medico__info { flex: 1; min-width: 0; }
.adm-cv-medico__name { margin: 0; font-size: 0.85rem; font-weight: 700; color: #1a3c6e; line-height: 1.25; font-family: 'Merriweather', serif; word-break: break-word; }
.adm-cv-medico__sub { margin: 0.1rem 0 0; display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.7rem; color: #5a7a9a; line-height: 1.25; width: 100%; flex-wrap: wrap; }
.adm-cv-medico__sub .material-symbols-outlined { font-size: 0.8rem; color: #94a3b8; }
.adm-cv-medico__pago { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; flex-shrink: 0; }
.adm-cv-medico__chip {
    display: inline-flex; align-items: center; gap: 0.2rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.66rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.03em;
    border: 1px solid transparent;
    white-space: nowrap;
}
.adm-cv-medico__chip .material-symbols-outlined { font-size: 0.85rem; }
.adm-cv-medico__chip.is-ok      { background: #dcfce7; color: #166534; border-color: rgba(22, 101, 52, 0.22); }
.adm-cv-medico__chip.is-warn    { background: #fef3c7; color: #92400e; border-color: rgba(146, 64, 14, 0.22); }
.adm-cv-medico__chip.is-pending { background: #fee2e2; color: #991b1b; border-color: rgba(185, 28, 28, 0.22); }
.adm-cv-medico__monto { margin: 0; font-size: 0.78rem; color: #1a3c6e; font-variant-numeric: tabular-nums; }
.adm-cv-medico__monto b { font-weight: 800; }


/* =============================================================================
   PANEL ADMIN · DirectorioComponent.vue
   Componente:  resources/js/components/inicio/administrador/DirectorioComponent.vue
   Apartado:    Sección "Directorio médico" (2/3 de la fila) del Panel de control.
                Cards expandibles con foto, especialidades activas/históricas y paginador.
   Prefijo:     .adm-dir*
   ============================================================================= */
.adm-dir { display: flex; flex-direction: column; gap: 0.7rem; }

.adm-dir__filter { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.adm-dir__select {
    background: #f7fafd;
    border: 1px solid rgba(46, 92, 158, 0.25);
    border-radius: 0.45rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.82rem; color: #1a3c6e;
    font-family: inherit; cursor: pointer; outline: none;
    min-width: 8rem;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.adm-dir__select:focus { border-color: #2e5c9e; background: #fff; box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.15); }
.adm-dir__input {
    flex: 1; min-width: 12rem;
    display: flex; align-items: center; gap: 0.4rem;
    background: #f7fafd;
    border: 1px solid rgba(46, 92, 158, 0.25);
    border-radius: 0.45rem;
    padding: 0.4rem 0.75rem;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.adm-dir__input:focus-within { border-color: #2e5c9e; background: #fff; box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.15); }
.adm-dir__input .material-symbols-outlined { font-size: 1.1rem; color: #2e5c9e; }
.adm-dir__input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 0.85rem; color: #1a3c6e; font-family: inherit; }
.adm-dir__input input::placeholder { color: #94a3b8; }
.adm-dir__btn-ghost {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.2rem; height: 2.2rem;
    background: #fff;
    color: #5a7a9a;
    border: 1px solid rgba(46, 92, 158, 0.25);
    border-radius: 0.45rem;
    cursor: pointer;
    transition: all 0.18s;
}
.adm-dir__btn-ghost:hover { background: rgba(46, 92, 158, 0.08); color: #1a3c6e; border-color: rgba(46, 92, 158, 0.4); }
.adm-dir__btn-ghost .material-symbols-outlined { font-size: 1.1rem; }

.adm-dir__list {
    display: flex; flex-direction: column;
    gap: 0.6rem;
    max-height: clamp(30rem, 100vh, 56rem);
    overflow-y: auto;
    padding-right: 0.3rem;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.adm-dir__list::-webkit-scrollbar { width: 0.45rem; }
.adm-dir__list::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%); border-radius: 999px; }
.adm-dir__list::-webkit-scrollbar-track { background: #f1f5f9; }

.adm-dir__card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.6rem;
    padding: 0.75rem 0.85rem 0.75rem 1.15rem;
    box-shadow: 0 1px 2px rgba(15, 28, 50, 0.04);
    display: flex; flex-direction: column;
    gap: 0.6rem;
    transition: box-shadow 0.18s, border-color 0.18s, transform 0.18s;
}
.adm-dir__card::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0;
    width: 0.3rem;
    border-top-left-radius: 0.6rem; border-bottom-left-radius: 0.6rem;
    background: linear-gradient(180deg, #1a3c6e, #2e5c9e);
}
.adm-dir__card:hover { box-shadow: 0 0.3rem 0.85rem rgba(46, 92, 158, 0.14); border-color: rgba(46, 92, 158, 0.42); transform: translateY(-1px); }

.adm-dir__alert {
    display: flex; align-items: flex-start; gap: 0.4rem;
    padding: 0.5rem 0.7rem;
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    border: 1px solid #fca5a5;
    border-left: 3px solid #dc2626;
    border-radius: 0.4rem;
}
.adm-dir__alert .material-symbols-outlined { font-size: 1.1rem; color: #991b1b; flex-shrink: 0; margin-top: 0.1rem; }
.adm-dir__alert p { margin: 0; font-size: 0.74rem; color: #991b1b; line-height: 1.35; }

.adm-dir__head { display: flex; align-items: center; gap: 0.7rem; }
.adm-dir__avatar {
    position: relative;
    width: 3.2rem; height: 3.2rem;
    border-radius: 50%;
    border: 2px solid rgba(46, 92, 158, 0.18);
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.18);
    display: inline-flex;
}
.adm-dir__avatar.is-presidente { border: 2px solid #fbbf24; box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.25); }
.adm-dir__avatar img { width: 100%; height: 100%; object-fit: cover; }
.adm-dir__medal {
    position: absolute;
    bottom: -0.1rem; right: -0.1rem;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #fff;
    border-radius: 50%;
    width: 1.3rem; height: 1.3rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
}
.adm-dir__medal .material-symbols-outlined { font-size: 0.8rem; }

.adm-dir__identity { flex: 1; min-width: 0; }
.adm-dir__name-link { text-decoration: none; }
.adm-dir__name { margin: 0; font-size: 0.92rem; font-weight: 700; color: #1a3c6e; line-height: 1.25; font-family: 'Merriweather', serif; word-break: break-word; cursor: pointer; transition: color 0.15s; }
.adm-dir__name-link:hover .adm-dir__name { color: #2e5c9e; }

.adm-dir__id-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; }
.adm-dir__id-chip {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    background: rgba(46, 92, 158, 0.08);
    border: 1px solid rgba(46, 92, 158, 0.22);
    border-radius: 999px;
    font-size: 0.7rem; color: #5a7a9a;
}
.adm-dir__id-chip .material-symbols-outlined { font-size: 0.85rem; color: #2e5c9e; }
.adm-dir__id-chip b { color: #1a3c6e; font-weight: 800; }

.adm-dir__open {
    width: 2rem; height: 2rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.18s;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.25);
}
.adm-dir__open:hover { transform: rotate(-12deg) scale(1.05); box-shadow: 0 0.3rem 0.7rem rgba(26, 60, 110, 0.4); }
.adm-dir__open .material-symbols-outlined { font-size: 1.05rem; }

.adm-dir__specs { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed rgba(46, 92, 158, 0.22); }
.adm-dir__spec {
    background: #f7fafd;
    border: 1px solid rgba(46, 92, 158, 0.14);
    border-radius: 0.45rem;
    padding: 0.55rem 0.7rem;
    display: flex; flex-direction: column; gap: 0.4rem;
}
.adm-dir__spec-name { margin: 0; display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.83rem; font-weight: 700; color: #1a3c6e; }
.adm-dir__spec-name .material-symbols-outlined { font-size: 1rem; color: #2e5c9e; }

.adm-dir__block { background: #fff; border: 1px solid rgba(46, 92, 158, 0.14); border-radius: 0.4rem; overflow: hidden; }
.adm-dir__block--active   { border-left: 3px solid #16a34a; }
.adm-dir__block--historic { border-left: 3px solid #2e5c9e; }
.adm-dir__block-head {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.35rem 0.6rem;
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: #166534;
    font-size: 0.68rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.05em;
    width: 100%;
}
.adm-dir__block-head .material-symbols-outlined { font-size: 0.9rem; }
.adm-dir__block-head--historic { background: linear-gradient(135deg, rgba(46, 92, 158, 0.1), rgba(46, 92, 158, 0.2)); color: #1a3c6e; }

.adm-dir__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 0.7rem; padding: 0.55rem 0.7rem; }
/* Variante 3 columnas para el bloque "proceso activo" (Proceso · Situación · Convocatoria).
   En viewports < 600px colapsa a una sola columna automáticamente. */
.adm-dir__meta--3col { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 600px) {
    .adm-dir__meta--3col { grid-template-columns: 1fr; }
}
@media (max-width: 720px) { .adm-dir__meta { grid-template-columns: 1fr; } }
.adm-dir__meta-row { margin: 0; display: flex; align-items: flex-start; gap: 0.35rem; line-height: 1.25; }
.adm-dir__meta-row > .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; flex-shrink: 0; margin-top: 0.1rem; }
.adm-dir__meta-row span:not(.material-symbols-outlined) { display: flex; flex-direction: column; min-width: 0; }
.adm-dir__meta-row small { font-size: 0.6rem; font-weight: 700; color: #5a7a9a; text-transform: uppercase; letter-spacing: 0.04em; }
.adm-dir__meta-row b { font-size: 0.78rem; font-weight: 700; color: #1a3c6e; word-break: break-word; }
.adm-dir__meta-row em { font-style: normal; margin-top: 0.1rem; font-size: 0.7rem; color: #5a7a9a; }
.adm-dir__date-sep { margin: 0 0.2rem; color: #5a7a9a; font-weight: 500; }

.adm-dir__no-process {
    margin: 0;
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.4rem 0.6rem;
    background: rgba(46, 92, 158, 0.05);
    border: 1px dashed rgba(46, 92, 158, 0.25);
    border-radius: 0.4rem;
    font-size: 0.74rem; color: #5a7a9a; font-style: italic;
}
.adm-dir__no-process .material-symbols-outlined { font-size: 0.95rem; color: #94a3b8; }

.adm-dir__empty {
    text-align: center; padding: 2.5rem 1rem; color: #5a7a9a;
    background: #fff;
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.55rem;
}
.adm-dir__empty .material-symbols-outlined { font-size: 2.8rem; color: rgba(46, 92, 158, 0.45); }
.adm-dir__empty h5 { margin: 0.4rem 0 0.2rem; font-weight: 700; color: #1a3c6e; font-size: 0.95rem; }
.adm-dir__empty p  { margin: 0; font-size: 0.82rem; }

.adm-dir__paginate {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.55rem;
    border-top: 1px dashed rgba(46, 92, 158, 0.22);
    flex-wrap: wrap;
}
.adm-dir__count { font-size: 0.78rem; color: #5a7a9a; }
.adm-dir__count b { color: #1a3c6e; font-weight: 700; }

.adm-dir__nav { display: inline-flex; align-items: center; gap: 0.2rem; }
.adm-dir__nav-btn, .adm-dir__nav-page {
    min-width: 1.9rem; height: 1.9rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.22);
    border-radius: 0.35rem;
    color: #1a3c6e; font-size: 0.78rem; font-weight: 600;
    padding: 0 0.45rem;
    cursor: pointer; user-select: none;
    transition: all 0.18s;
    font-family: inherit;
}
.adm-dir__nav-btn .material-symbols-outlined { font-size: 1.05rem; }
.adm-dir__nav-btn:hover:not(:disabled),
.adm-dir__nav-page:hover:not(.is-active) { background: rgba(46, 92, 158, 0.08); border-color: rgba(46, 92, 158, 0.4); }
.adm-dir__nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.adm-dir__nav-page.is-active { background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%); color: #fff; border-color: transparent; box-shadow: 0 0.15rem 0.35rem rgba(26, 60, 110, 0.3); }
.adm-dir__limit {
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.22);
    border-radius: 0.35rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.78rem; color: #1a3c6e; font-family: inherit;
    cursor: pointer; outline: none;
}
.adm-dir__limit:focus { border-color: #2e5c9e; box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.15); }


/* =============================================================================
   PANEL ADMIN · ComprobantesPagoComponent.vue + ComprobantesCvComponent.vue
   Componentes: inicio/administrador/ComprobantesPagoComponent.vue (variante navy)
                inicio/administrador/ComprobantesCvComponent.vue   (variante .adm-cpr--cv púrpura)
   Apartado:    Sección "Comprobantes de pago pendientes" del Panel de control
   Prefijo:     .adm-cpr* (base navy) + .adm-cpr--cv .adm-cpr* (override púrpura para CV)
   ============================================================================= */

/* BASE navy (ComprobantesPago) */
.adm-cpr {
    display: flex; flex-direction: column;
    height: clamp(21rem, 36vh, 29rem);
    overflow: hidden;
}
.adm-cpr__header {
    flex-shrink: 0;
    padding: 0.55rem 0.6rem;
    background: linear-gradient(180deg, #ffffff, #f7fafd);
    border-bottom: 1px solid rgba(46, 92, 158, 0.18);
}
.adm-cpr__content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.55rem 0.6rem;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.adm-cpr__content::-webkit-scrollbar { width: 0.4rem; }
.adm-cpr__content::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%); border-radius: 999px; }
.adm-cpr__content::-webkit-scrollbar-track { background: #f1f5f9; }
.adm-cpr__footer {
    flex-shrink: 0;
    padding: 0.5rem 0.6rem;
    background: linear-gradient(180deg, #f7fafd, #ffffff);
    border-top: 1px solid rgba(46, 92, 158, 0.18);
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.adm-cpr__filter { display: flex; align-items: center; gap: 0.3rem; }
.adm-cpr__select {
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.25);
    border-radius: 0.4rem;
    padding: 0.35rem 0.55rem;
    font-size: 0.78rem; color: #1a3c6e;
    font-family: inherit; cursor: pointer; outline: none;
    min-width: 6rem;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.adm-cpr__select:focus { border-color: #2e5c9e; box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.15); }
.adm-cpr__input {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 0.3rem;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.25);
    border-radius: 0.4rem;
    padding: 0.35rem 0.55rem;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.adm-cpr__input:focus-within { border-color: #2e5c9e; box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.15); }
.adm-cpr__input .material-symbols-outlined { font-size: 1rem; color: #2e5c9e; }
.adm-cpr__input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 0.8rem; color: #1a3c6e; font-family: inherit; }
.adm-cpr__input input::placeholder { color: #94a3b8; }
.adm-cpr__btn-ghost {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem;
    background: #fff;
    color: #5a7a9a;
    border: 1px solid rgba(46, 92, 158, 0.25);
    border-radius: 0.4rem;
    cursor: pointer;
    transition: all 0.18s;
}
.adm-cpr__btn-ghost:hover { background: rgba(46, 92, 158, 0.08); color: #1a3c6e; border-color: rgba(46, 92, 158, 0.4); }
.adm-cpr__btn-ghost .material-symbols-outlined { font-size: 1.05rem; }

.adm-cpr__list { display: flex; flex-direction: column; gap: 0.45rem; }
.adm-cpr__item {
    display: flex; align-items: flex-start; gap: 0.6rem;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-left: 3px solid #2e5c9e;
    border-radius: 0.45rem;
    padding: 0.5rem 0.65rem;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.adm-cpr__item:hover { box-shadow: 0 0.2rem 0.55rem rgba(46, 92, 158, 0.12); border-color: rgba(46, 92, 158, 0.4); }

.adm-cpr__info { flex: 1; min-width: 0; }
.adm-cpr__name { margin: 0 0 0.2rem 0; font-size: 0.82rem; font-weight: 700; color: #1a3c6e; line-height: 1.25; font-family: 'Merriweather', serif; word-break: break-word; }
.adm-cpr__sub { margin: 0.1rem 0 0 0; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; color: #5a7a9a; line-height: 1.25; width: 100%; flex-wrap: wrap; }
.adm-cpr__sub .material-symbols-outlined { font-size: 0.85rem; color: #94a3b8; flex-shrink: 0; }
.adm-cpr__sub.is-warn { color: #b45309; font-weight: 600; }
.adm-cpr__sub.is-warn .material-symbols-outlined { color: #f59e0b; }

/* Rejilla compacta de metadatos del certificado por validar (ValidarCertificadosComponent):
   distribuye vigencia/elaboración/número/libro-foja en 2 columnas para no alargar las cards;
   presidente/responsable ocupan la fila completa (--wide) por ser nombres largos. */
.vcert-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.12rem 0.7rem;
    margin-top: 0.3rem;
}
.vcert-meta__item {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.72rem; color: #5a7a9a; line-height: 1.3;
    min-width: 0;
}
.vcert-meta__item .material-symbols-outlined { font-size: 0.85rem; color: #94a3b8; flex-shrink: 0; }
.vcert-meta__item--wide { grid-column: 1 / -1; }

.adm-cpr__actions { display: flex; flex-direction: column; gap: 0.3rem; flex-shrink: 0; }
.adm-cpr__action {
    width: 2rem; height: 2rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent;
    border-radius: 0.4rem;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.adm-cpr__action .material-symbols-outlined { font-size: 1.1rem; }
.adm-cpr__action--view { background: linear-gradient(135deg, #2e5c9e 0%, #5b8acc 100%); color: #fff; box-shadow: 0 0.15rem 0.35rem rgba(46, 92, 158, 0.3); }
.adm-cpr__action--view:hover { filter: brightness(1.08); transform: translateY(-1px); }
.adm-cpr__action--accept { background: #fff; color: #166534; border-color: rgba(22, 101, 52, 0.3); }
.adm-cpr__action--accept:hover { background: linear-gradient(135deg, #16a34a, #15803d); color: #fff; border-color: transparent; transform: translateY(-1px); }
.adm-cpr__action--reject { background: #fff; color: #b91c1c; border-color: rgba(185, 28, 28, 0.3); }
.adm-cpr__action--reject:hover { background: linear-gradient(135deg, #dc2626, #b91c1c); color: #fff; border-color: transparent; transform: translateY(-1px); }

.adm-cpr__empty { text-align: center; padding: 1.5rem 0.5rem; color: #5a7a9a; }
.adm-cpr__empty .material-symbols-outlined { font-size: 2.2rem; color: rgba(46, 92, 158, 0.4); }
.adm-cpr__empty h5 { margin: 0.3rem 0 0; font-size: 0.85rem; color: #5a7a9a; }

.adm-cpr__count { font-size: 0.74rem; color: #5a7a9a; }
.adm-cpr__count b { color: #1a3c6e; font-weight: 700; }
.adm-cpr__nav { display: inline-flex; align-items: center; gap: 0.15rem; }
.adm-cpr__nav-btn, .adm-cpr__nav-page {
    min-width: 1.7rem; height: 1.7rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.22);
    border-radius: 0.35rem;
    color: #1a3c6e; font-size: 0.72rem; font-weight: 600;
    padding: 0 0.4rem;
    cursor: pointer; user-select: none;
    transition: all 0.18s;
    font-family: inherit;
}
.adm-cpr__nav-btn .material-symbols-outlined { font-size: 0.95rem; }
.adm-cpr__nav-btn:hover:not(:disabled),
.adm-cpr__nav-page:hover:not(.is-active) { background: rgba(46, 92, 158, 0.08); border-color: rgba(46, 92, 158, 0.4); }
.adm-cpr__nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.adm-cpr__nav-page.is-active { background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%); color: #fff; border-color: transparent; }
.adm-cpr__limit {
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.22);
    border-radius: 0.35rem;
    padding: 0.2rem 0.4rem;
    font-size: 0.72rem; color: #1a3c6e; font-family: inherit;
    cursor: pointer; outline: none;
}
.adm-cpr__limit:focus { border-color: #2e5c9e; box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.15); }

/* Variante .adm-cpr--cv (púrpura) — solo overrides */
.adm-cpr--cv .adm-cpr__header { background: linear-gradient(180deg, #ffffff, #faf5ff); border-bottom-color: rgba(106, 27, 154, 0.18); }
.adm-cpr--cv .adm-cpr__content { scrollbar-color: #6a1b9a #f3e8ff; }
.adm-cpr--cv .adm-cpr__content::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #6a1b9a 0%, #8e24aa 100%); }
.adm-cpr--cv .adm-cpr__content::-webkit-scrollbar-track { background: #f3e8ff; }
.adm-cpr--cv .adm-cpr__footer { background: linear-gradient(180deg, #faf5ff, #ffffff); border-top-color: rgba(106, 27, 154, 0.18); }
.adm-cpr--cv .adm-cpr__select { border-color: rgba(106, 27, 154, 0.25); color: #6a1b9a; }
.adm-cpr--cv .adm-cpr__select:focus { border-color: #6a1b9a; box-shadow: 0 0 0 3px rgba(106, 27, 154, 0.15); }
.adm-cpr--cv .adm-cpr__input { border-color: rgba(106, 27, 154, 0.25); }
.adm-cpr--cv .adm-cpr__input:focus-within { border-color: #6a1b9a; box-shadow: 0 0 0 3px rgba(106, 27, 154, 0.15); }
.adm-cpr--cv .adm-cpr__input .material-symbols-outlined { color: #6a1b9a; }
.adm-cpr--cv .adm-cpr__input input { color: #6a1b9a; }
.adm-cpr--cv .adm-cpr__btn-ghost { border-color: rgba(106, 27, 154, 0.25); }
.adm-cpr--cv .adm-cpr__btn-ghost:hover { background: rgba(106, 27, 154, 0.08); color: #6a1b9a; border-color: rgba(106, 27, 154, 0.4); }
.adm-cpr--cv .adm-cpr__item { border-color: rgba(106, 27, 154, 0.18); border-left-color: #6a1b9a; }
.adm-cpr--cv .adm-cpr__item:hover { box-shadow: 0 0.2rem 0.55rem rgba(106, 27, 154, 0.15); border-color: rgba(106, 27, 154, 0.4); }
.adm-cpr--cv .adm-cpr__name { color: #6a1b9a; }
.adm-cpr--cv .adm-cpr__action--view { background: linear-gradient(135deg, #6a1b9a 0%, #8e24aa 100%); box-shadow: 0 0.15rem 0.35rem rgba(106, 27, 154, 0.3); }
.adm-cpr--cv .adm-cpr__empty .material-symbols-outlined { color: rgba(106, 27, 154, 0.4); }
.adm-cpr--cv .adm-cpr__count b { color: #6a1b9a; }
.adm-cpr--cv .adm-cpr__nav-btn, .adm-cpr--cv .adm-cpr__nav-page {
    border-color: rgba(106, 27, 154, 0.22);
    color: #6a1b9a;
}
.adm-cpr--cv .adm-cpr__nav-btn:hover:not(:disabled),
.adm-cpr--cv .adm-cpr__nav-page:hover:not(.is-active) { background: rgba(106, 27, 154, 0.08); border-color: rgba(106, 27, 154, 0.4); }
.adm-cpr--cv .adm-cpr__nav-page.is-active { background: linear-gradient(135deg, #6a1b9a 0%, #8e24aa 100%); border-color: transparent; }
.adm-cpr--cv .adm-cpr__limit { border-color: rgba(106, 27, 154, 0.22); color: #6a1b9a; }
.adm-cpr--cv .adm-cpr__limit:focus { border-color: #6a1b9a; box-shadow: 0 0 0 3px rgba(106, 27, 154, 0.15); }


/* =============================================================================
   PATRÓN GLOBAL · Paginador ms-paginate
   Componente:  resources/js/components/revision_solicitudes/PaginateComponent.vue
                (definición canónica; reutilizable por otros módulos como recibe ms-)
   Apartado:    Footer paginador estándar usado bajo csj-shell
   Prefijo:     .ms-paginate*
   ============================================================================= */
.ms-paginate {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.5rem;
}
.ms-paginate__count {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.82rem; color: #5a7a9a;
}
.ms-paginate__count .material-symbols-outlined { font-size: 1.1rem; color: #2e5c9e; }
.ms-paginate__count b { color: #1a3c6e; font-weight: 700; }

.ms-paginate__nav { display: inline-flex; align-items: center; gap: 0.2rem; flex-wrap: wrap; }
.ms-paginate__btn,
.ms-paginate__page {
    min-width: 2rem; height: 2rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.22);
    border-radius: 0.4rem;
    color: #1a3c6e; font-size: 0.82rem; font-weight: 600;
    padding: 0 0.55rem;
    cursor: pointer; user-select: none;
    transition: all 0.18s ease;
    font-family: inherit;
}
.ms-paginate__btn .material-symbols-outlined { font-size: 1.15rem; }
.ms-paginate__btn:hover:not(:disabled),
.ms-paginate__page:hover:not(.is-active) {
    background: rgba(46, 92, 158, 0.08);
    border-color: rgba(46, 92, 158, 0.45);
}
.ms-paginate__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ms-paginate__page.is-active {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff; border-color: transparent;
    box-shadow: 0 0.2rem 0.45rem rgba(26, 60, 110, 0.3);
}
.ms-paginate__limit {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.78rem; color: #5a7a9a; font-weight: 600;
}
.ms-paginate__limit label { margin: 0; }
.ms-paginate__limit select {
    background: #f7fafd;
    border: 1px solid rgba(46, 92, 158, 0.25);
    border-radius: 0.4rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.82rem; color: #1a3c6e; font-family: inherit;
    cursor: pointer; outline: none;
}
.ms-paginate__limit select:focus {
    border-color: #2e5c9e; background: #fff;
    box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.15);
}
@media (max-width: 720px) {
    .ms-paginate { justify-content: center; }
    .ms-paginate__count, .ms-paginate__limit { flex-basis: 100%; justify-content: center; }
}
/* Responsive de ms-filter heredado de revision_solicitudes */
@media (max-width: 900px) {
    .ms-filter { width: 100%; }
    .ms-filter__input, .ms-filter__select { max-width: none; }
}


/* =============================================================================
   REVISIÓN DE SOLICITUDES · FatherComponent.vue + ListComponent.vue
   Componentes: resources/js/components/revision_solicitudes/FatherComponent.vue
                resources/js/components/revision_solicitudes/ListComponent.vue
   Apartado:    Módulo "Revisión de solicitudes" (rol revisor): shell + listado de cards
                con indicador de antigüedad y tags de proceso/convocatoria.
   Prefijo:     .rsd-*, .rsd-tag*
   ============================================================================= */

/* Shell del módulo */
.csj-shell__content.rsd-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}
.rsd-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.85rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.rsd-scroll::-webkit-scrollbar { width: 0.6rem; }
.rsd-scroll::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%); border-radius: 999px; }
.rsd-scroll::-webkit-scrollbar-track { background: #f1f5f9; }
.rsd-footer {
    flex-shrink: 0;
    padding: 0.65rem 1rem;
    border-top: 1px solid rgba(46, 92, 158, 0.18);
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
}
.rsd-footer .ms-paginate {
    margin-top: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

/* Listado de cards */
.rsd-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 1100px) { .rsd-list { grid-template-columns: repeat(2, 1fr); } }

.rsd-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.7rem;
    padding: 0.85rem 1rem 0.85rem 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 28, 50, 0.04);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    display: flex; flex-flow: column;
    gap: 0.65rem;
}
.rsd-card:hover {
    box-shadow: 0 0.4rem 1rem rgba(46, 92, 158, 0.14);
    border-color: rgba(46, 92, 158, 0.42);
    transform: translateY(-1px);
}
.rsd-card::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0;
    width: 0.35rem;
    border-top-left-radius: 0.7rem; border-bottom-left-radius: 0.7rem;
    background: linear-gradient(180deg, #1a3c6e, #2e5c9e);
}

.rsd-card__head { display: flex; align-items: flex-start; gap: 0.7rem; flex-wrap: wrap; }
.rsd-card__avatar {
    width: 2.8rem; height: 2.8rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.25);
}
.rsd-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.rsd-card__avatar .material-symbols-outlined { font-size: 1.5rem; }

.rsd-card__identity { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.rsd-card__name {
    margin: 0;
    font-size: 0.95rem; font-weight: 700;
    color: #1a3c6e;
    line-height: 1.3;
    font-family: 'Merriweather', serif;
    word-break: break-word;
}
.rsd-card__specialty {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.78rem;
    color: #5a7a9a;
    width: max-content;
    max-width: 100%;
}
.rsd-card__specialty .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; flex-shrink: 0; }

.rsd-card__meta {
    display: flex; flex-direction: row; gap: 0.35rem;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.rsd-card__date {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    background: linear-gradient(135deg, rgba(46, 92, 158, 0.08), rgba(46, 92, 158, 0.16));
    border: 1px solid rgba(46, 92, 158, 0.22);
    border-radius: 0.4rem;
}
.rsd-card__date .material-symbols-outlined { font-size: 1rem; color: #2e5c9e; flex-shrink: 0; }
.rsd-card__date > span { display: flex; flex-direction: column; gap: 0.05rem; line-height: 1.2; }
.rsd-card__date small { font-size: 0.6rem; color: #5a7a9a; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.rsd-card__date > span > :last-child { font-size: 0.78rem; color: #1a3c6e; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Indicador de antigüedad */
.rsd-card__age {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border-radius: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid transparent;
}
.rsd-card__age .material-symbols-outlined { font-size: 1rem; }
.rsd-card__age-body { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
.rsd-card__age-top { display: inline-flex; align-items: baseline; gap: 0.25rem; white-space: nowrap; }
.rsd-card__age b { font-size: 0.95rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.rsd-card__age small { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; opacity: 0.85; }
.rsd-card__age.is-ok   { background: #e7f6ec; color: #166534; border-color: rgba(22, 101, 52, 0.22); }
.rsd-card__age.is-warn { background: #fef3c7; color: #92400e; border-color: rgba(146, 64, 14, 0.22); }
.rsd-card__age.is-bad  { background: #fdecea; color: #c5221f; border-color: rgba(197, 34, 31, 0.22); }

.rsd-card__tags {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(46, 92, 158, 0.22);
}
.rsd-tag {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem; font-weight: 600;
    border-radius: 0.35rem;
    border: 1px solid transparent;
}
.rsd-tag .material-symbols-outlined { font-size: 0.9rem; }
.rsd-tag--proc { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; border-color: rgba(146, 64, 14, 0.22); }
.rsd-tag--conv { background: linear-gradient(135deg, #f3e8ff, #e9d5ff); color: #6a1b9a; border-color: rgba(106, 27, 154, 0.22); }

.rsd-card__actions {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(46, 92, 158, 0.22);
    margin-top: auto;
}
.rsd-card__btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid transparent;
    border-radius: 0.45rem;
    font-size: 0.82rem; font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    flex: 1; justify-content: center;
    min-width: 12rem;
}
.rsd-card__btn .material-symbols-outlined { font-size: 1.1rem; }
.rsd-card__btn--exp {
    background: linear-gradient(135deg, #2e5c9e 0%, #5b8acc 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0.15rem 0.4rem rgba(46, 92, 158, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.rsd-card__btn--exp:hover {
    background: linear-gradient(135deg, #1a3c6e 0%, #4a7bbf 100%);
    transform: translateY(-1px);
    box-shadow: 0 0.3rem 0.7rem rgba(46, 92, 158, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    color: #fff;
}

.rsd-empty {
    grid-column: 1 / -1;
    background: #fff;
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.65rem;
    padding: 2.5rem 1rem; text-align: center; color: #5a7a9a;
}
.rsd-empty .material-symbols-outlined { font-size: 3rem; color: rgba(46, 92, 158, 0.5); }
.rsd-empty h5 { margin: 0.5rem 0 0.2rem; font-weight: 700; color: #1a3c6e; font-size: 1rem; }
.rsd-empty p { margin: 0; font-size: 0.85rem; }


/* =============================================================================
   REVISIÓN DE DOCUMENTOS · DocumentComponent.vue
   Componente:  resources/js/components/revision_solicitudes/DocumentComponent.vue
   Apartado:    Vista de revisión por documento (sidebar lista + viewer PDF) que
                abre desde "Revisión de solicitudes". Layout 2-col, acepta/rechaza,
                docs especializados (título/diploma) con segmented control violeta.
   Prefijo:     .rd-*
   ============================================================================= */
.rd-shell {
    width: 100%;
    height: 93vh;
    background: #f7fafd;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}
.rd-shell *, .rd-shell *::before, .rd-shell *::after { box-sizing: border-box; }

/* Header con avatar + barra de progreso */
.rd-header {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 0.85rem 1.4rem;
    background: #fff;
    border-bottom: 1px solid rgba(46, 92, 158, 0.18);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.rd-header__icon {
    width: 2.5rem; height: 2.5rem;
    border-radius: 50%;
    background: #2e5c9e;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.rd-header__info { flex: 1; min-width: 12rem; }
.rd-header__doctor { margin: 0; font-size: 1.05rem; font-weight: 700; color: #1a3c6e; }
.rd-header__sub { margin: 0.1rem 0 0 0; font-size: 0.78rem; color: #5a7a9a; }
.rd-header__progress { min-width: 16rem; flex: 0 1 22rem; }
.rd-header__progress-text { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.3rem; }
.rd-header__progress-label { font-size: 0.7rem; font-weight: 700; color: #5a7a9a; text-transform: uppercase; letter-spacing: 0.04em; }
.rd-header__progress-count { font-size: 0.85rem; color: #5a7a9a; }
.rd-header__progress-count b { color: #2e5c9e; font-weight: 800; font-size: 1.05rem; }
.rd-progressbar { height: 0.5rem; background: rgba(46, 92, 158, 0.18); border-radius: 999px; overflow: hidden; }
.rd-progressbar__fill { height: 100%; background: linear-gradient(90deg, #2e5c9e, #38bdf8); border-radius: 999px; transition: width 0.3s ease; }

/* Body en grid 2-col: sidebar lista + viewer */
.rd-body {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(20rem, 35%) 1fr;
    gap: 0.85rem;
    padding: 0.85rem 1.4rem;
    overflow: hidden;
    min-height: 0;
}
.rd-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.55rem;
    padding: 0.8rem;
    overflow: hidden;
    min-height: 0;
}

/* Pie de la columna del listado: sugerencia + botones Regresar / Guardar.
   Reemplaza a la antigua barra .rd-actions de ancho completo; ahora las acciones
   quedan al mismo nivel y ancho que el listado de documentos. */
.rd-sidebar__actions {
    flex-shrink: 0;
    display: flex; flex-direction: column; gap: 0.5rem;
    border-top: 1px solid rgba(46, 92, 158, 0.18);
    padding-top: 0.6rem;
}
.rd-sidebar__actions .rd-actions__hint { flex: 0 0 auto; min-width: 0; }
.rd-sidebar__btns { display: flex; gap: 0.5rem; }
.rd-sidebar__btns .rd-btn { flex: 1; }

/* Strip de stats (aceptados / rechazados / pendientes / históricos) */
.rd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.4rem; }
.rd-stat {
    display: flex; align-items: center; gap: 0.4rem;
    background: #f7fafd;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-left: 3px solid rgba(46, 92, 158, 0.25);
    border-radius: 0.4rem;
    padding: 0.4rem 0.55rem;
}
.rd-stat > span.material-symbols-outlined {
    width: 1.7rem; height: 1.7rem;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}
.rd-stat__value { margin: 0; font-size: 1.05rem; font-weight: 800; color: #1a3c6e; line-height: 1; }
.rd-stat__label { margin: 0.15rem 0 0 0; font-size: 0.65rem; color: #5a7a9a; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; }
.rd-stat--accepted { border-left-color: var(--green, #269a1c); }
.rd-stat--accepted span.material-symbols-outlined { background: #dcfce7; color: #166534; }
.rd-stat--rejected { border-left-color: #dc2626; }
.rd-stat--rejected span.material-symbols-outlined { background: #fee2e2; color: #991b1b; }
.rd-stat--pending  { border-left-color: #f59e0b; }
.rd-stat--pending  span.material-symbols-outlined { background: #fef3c7; color: #92400e; }
.rd-stat--historic { border-left-color: #9333ea; }
.rd-stat--historic span.material-symbols-outlined { background: #f3e8ff; color: #6a1b9a; }

/* Filtros tipo chip */
.rd-filters {
    display: flex; flex-wrap: wrap; gap: 0.3rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(46, 92, 158, 0.18);
}
.rd-filter {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.78rem; font-weight: 600;
    color: #5a7a9a;
    transition: 0.15s;
    font-family: inherit;
}
.rd-filter span.material-symbols-outlined { font-size: 1rem; color: #94a3b8; }
.rd-filter:hover { background: #f7fafd; color: #2e5c9e; border-color: rgba(46, 92, 158, 0.4); }
.rd-filter:hover span.material-symbols-outlined { color: #2e5c9e; }
.rd-filter--active { background: #2e5c9e; color: #fff; border-color: #2e5c9e; }
.rd-filter--active span.material-symbols-outlined { color: #fff; }
.rd-filter__count {
    background: rgba(255,255,255,0.25);
    color: inherit;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-size: 0.7rem; font-weight: 700;
    margin-left: 0.15rem;
}
.rd-filter:not(.rd-filter--active) .rd-filter__count { background: #f1f5f9; color: #5a7a9a; }

/* Lista de documentos scrolleable */
.rd-list {
    display: flex; flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
    padding-right: 0.2rem;
    margin: 0 -0.2rem 0 0;
    flex: 1;
    min-height: 0;
}

.rd-doc {
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-left: 4px solid rgba(46, 92, 158, 0.25);
    border-radius: 0.45rem;
    transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}
.rd-doc:hover { box-shadow: 0 0.25rem 0.55rem rgba(0,0,0,0.06); }
.rd-doc--selected {
    border-color: #2e5c9e;
    border-left-color: #2e5c9e;
    background: rgba(46, 92, 158, 0.08);
    box-shadow: 0 0 0 2px rgba(46, 92, 158, 0.18);
}
.rd-doc--accepted { border-left-color: var(--green, #269a1c); }
.rd-doc--rejected { border-left-color: #dc2626; }
.rd-doc--pending  { border-left-color: #f59e0b; }
.rd-doc--historic { border-left-color: #9333ea; background: #faf5ff; }

.rd-doc__head {
    display: flex; align-items: center; gap: 0.55rem;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 0.55rem 0.7rem;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background 0.15s;
}
.rd-doc__head:hover { background: rgba(46, 92, 158, 0.06); }
.rd-doc--selected .rd-doc__head { background: transparent; }
.rd-doc__icon { font-size: 1.25rem; color: #2e5c9e; flex-shrink: 0; }
.rd-doc--accepted .rd-doc__icon { color: #16a34a; }
.rd-doc--rejected .rd-doc__icon { color: #dc2626; }
.rd-doc--pending  .rd-doc__icon { color: #d97706; }
.rd-doc--historic .rd-doc__icon { color: #7e22ce; }
.rd-doc__title-wrap { flex: 1; min-width: 0; }
.rd-doc__title {
    margin: 0 0 0.2rem 0;
    font-size: 0.85rem; font-weight: 600;
    color: #1a3c6e;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rd-doc__view { font-size: 1.1rem; color: #94a3b8; flex-shrink: 0; transition: color 0.15s; }
.rd-doc__head:hover .rd-doc__view { color: #2e5c9e; }
.rd-doc--selected .rd-doc__view { color: #2e5c9e; }

/* Chips genéricos (vista en listado y header del visor) */
.rd-chip {
    display: inline-flex; align-items: center;
    font-size: 0.65rem; font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.04em;
    border: 1px solid transparent;
    white-space: nowrap;
}
.rd-chip--accepted { background: #dcfce7; color: #166534; border-color: #86efac; }
.rd-chip--rejected { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.rd-chip--pending  { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.rd-chip--warning  { background: #ffedd5; color: #9a3412; border-color: #fdba74; }
.rd-chip--historic { background: #f3e8ff; color: #6a1b9a; border-color: #d8b4fe; }

/* Acciones por documento */
.rd-doc__actions { display: flex; gap: 0.4rem; padding: 0 0.7rem 0.6rem 0.7rem; }
.rd-action {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 0.6rem;
    border-radius: 0.4rem;
    font-weight: 700; font-size: 0.82rem;
    border: 1px solid;
    cursor: pointer;
    transition: 0.15s;
    font-family: inherit;
    white-space: nowrap;
    min-width: 0;
}
.rd-action:hover { transform: translateY(-1px); }
.rd-action > span.material-symbols-outlined {
    font-size: 1.2rem; font-weight: 700;
    flex-shrink: 0;
    font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}
.rd-action > span:not(.material-symbols-outlined) { overflow: hidden; text-overflow: ellipsis; }
.rd-action--accept { background: var(--green, #269a1c); color: #fff; border-color: var(--green, #269a1c); box-shadow: 0 0.1rem 0.3rem rgba(38,154,28,0.25); }
.rd-action--accept:hover { filter: brightness(1.06); color: #fff; }
.rd-action--reject { background: #dc2626; color: #fff; border-color: #dc2626; box-shadow: 0 0.1rem 0.3rem rgba(220,38,38,0.25); }
.rd-action--reject:hover { filter: brightness(1.06); color: #fff; }
.rd-action--toggle { flex: 1; background: #fff; color: #5a7a9a; border-color: rgba(46, 92, 158, 0.25); }
.rd-action--toggle:hover { background: #f7fafd; color: #1a3c6e; border-color: #94a3b8; }
.rd-action--toggle > span.material-symbols-outlined { color: #5a7a9a; }
.rd-action--toggle:hover > span.material-symbols-outlined { color: #2e5c9e; }

/* Razón del rechazo */
.rd-doc__reason {
    padding: 0.55rem 0.7rem 0.7rem 0.7rem;
    background: #fff7f7;
    border-top: 1px dashed #fecaca;
    border-bottom-left-radius: 0.45rem;
    border-bottom-right-radius: 0.45rem;
}
.rd-doc__reason label {
    display: inline-flex; align-items: center; gap: 0.3rem;
    margin: 0.4rem 0 0.3rem 0;
    font-size: 0.72rem; font-weight: 700;
    color: #991b1b;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.rd-doc__reason label span.material-symbols-outlined { font-size: 1.05rem; color: #b91c1c; }
.rd-textarea {
    width: 100%;
    border: 1px solid #fecaca;
    border-radius: 0.4rem;
    padding: 0.55rem 0.7rem;
    font-size: 0.85rem;
    color: #1a3c6e;
    resize: vertical;
    min-height: 6rem;
    display: block;
    font-family: inherit;
    background: #fff;
    transition: 0.15s;
    outline: 0;
    line-height: 1.4;
}
.rd-textarea:focus { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.12); }
.rd-doc__reason-hint {
    margin: 0.3rem 0 0 0;
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.74rem;
}
.rd-doc__reason-hint span { font-size: 1rem; }
.rd-doc__reason-hint--ok   { color: #166534; }
.rd-doc__reason-hint--ok   span { color: #16a34a; }
.rd-doc__reason-hint--warn { color: #991b1b; }
.rd-doc__reason-hint--warn span { color: #d97706; }

/* Documentos especializados (título / diploma) — segmented control violeta */
.rd-special {
    display: flex; flex-direction: column; gap: 0.45rem;
    padding: 0.55rem;
    background: linear-gradient(135deg, #f7fafd 0%, #faf5ff 100%);
    border: 1px solid #e9d5ff;
    border-radius: 0.45rem;
}
.rd-special__label {
    display: inline-flex; align-items: center; gap: 0.35rem;
    margin: 0;
    font-size: 0.72rem; font-weight: 700;
    color: #581c87;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.rd-special__label span { font-size: 1.05rem; color: #8e24aa; }
.rd-doc--special { border-left-color: #8e24aa; }
.rd-doc--special .rd-doc__icon { color: #6a1b9a; }
.rd-doc--special.rd-doc--rejected { border-left-color: #dc2626; }
.rd-doc--special.rd-doc--rejected .rd-doc__icon { color: #dc2626; }
.rd-special__desc {
    margin: 0 0.7rem 0 2.45rem;
    font-size: 0.78rem; color: #5a7a9a; line-height: 1.4;
    padding-bottom: 0.4rem;
}
.rd-special__hint {
    margin: 0 0.7rem 0.6rem 0.7rem;
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.78rem;
    color: #92400e;
    background: #fef3c7;
    border-left: 3px solid #f59e0b;
    border-radius: 0.35rem;
    padding: 0.4rem 0.55rem;
}
.rd-special__hint span { font-size: 1rem; color: #d97706; flex-shrink: 0; }
.rd-special__types { padding: 0 0.7rem 0.7rem 0.7rem; }
.rd-special__types-label { margin: 0 0 0.4rem 0; font-size: 0.74rem; font-weight: 600; color: #5a7a9a; }

.rd-types { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.rd-type {
    flex: 1 1 8rem;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.35rem;
    padding: 0.45rem 0.55rem;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.4rem;
    cursor: pointer;
    font-size: 0.78rem; font-weight: 600;
    color: #5a7a9a;
    text-align: center;
    transition: 0.15s;
    font-family: inherit;
    white-space: nowrap;
    min-width: 0;
}
.rd-type > span:not(.material-symbols-outlined) { overflow: hidden; text-overflow: ellipsis; }
.rd-type span.material-symbols-outlined { font-size: 1.1rem; color: #94a3b8; }
.rd-type:hover { background: #faf5ff; border-color: #d8b4fe; color: #1a3c6e; }
.rd-type:hover span.material-symbols-outlined { color: #8e24aa; }
.rd-type--active { background: #8e24aa; border-color: #8e24aa; color: #fff; box-shadow: 0 0.15rem 0.4rem rgba(106, 27, 154, 0.25); }
.rd-type--active span.material-symbols-outlined { color: #fff; }
.rd-type--active:hover { background: #6a1b9a; border-color: #6a1b9a; color: #fff; }

.rd-empty {
    text-align: center;
    padding: 1.5rem 1rem;
    background: #f7fafd;
    border: 2px dashed rgba(46, 92, 158, 0.25);
    border-radius: 0.4rem;
    color: #5a7a9a;
}
.rd-empty span.material-symbols-outlined { font-size: 2rem; color: #94a3b8; }
.rd-empty p { margin: 0.3rem 0 0 0; font-size: 0.85rem; }

/* Viewer del PDF */
.rd-viewer {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.55rem;
    overflow: hidden;
    min-height: 0;
}
.rd-viewer__head {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.7rem 0.95rem;
    background: #f7fafd;
    border-bottom: 1px solid rgba(46, 92, 158, 0.18);
    flex-shrink: 0;
}
.rd-viewer__head > span.material-symbols-outlined {
    font-size: 1.5rem; color: #2e5c9e;
    background: #f7fafd;
    width: 2.2rem; height: 2.2rem;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.rd-viewer__title-wrap { flex: 1; min-width: 0; }
.rd-viewer__title {
    margin: 0;
    font-size: 0.95rem; font-weight: 700;
    color: #1a3c6e;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rd-viewer__sub { margin: 0.1rem 0 0 0; font-size: 0.74rem; color: #5a7a9a; }
.rd-viewer__frame { flex: 1; background: #1e293b; min-height: 0; }
.rd-viewer__frame embed { width: 100%; height: 100%; border: 0; display: block; }
.rd-viewer__empty {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    padding: 2rem 1.5rem;
    background: #f7fafd;
    color: #5a7a9a;
}
.rd-viewer__empty span.material-symbols-outlined { font-size: 3.5rem; color: #94a3b8; margin-bottom: 0.5rem; }
.rd-viewer__empty h5 { margin: 0; font-size: 1rem; font-weight: 700; color: #5a7a9a; }
.rd-viewer__empty p { margin: 0.4rem 0 0 0; font-size: 0.85rem; max-width: 22rem; }

/* Botones generales del módulo de revisión */
.rd-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
    padding: 0.5rem 0.95rem;
    border-radius: 0.4rem;
    font-weight: 700; font-size: 0.85rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: 0.15s;
    font-family: inherit;
    text-decoration: none;
}
.rd-btn span { font-size: 1.1rem; }
.rd-btn:hover:not(:disabled) { transform: translateY(-1px); }
.rd-btn--sm { padding: 0.35rem 0.7rem; font-size: 0.78rem; }
.rd-btn--sm span { font-size: 1rem; }
.rd-btn--accept { background: var(--green, #269a1c); color: #fff; border-color: var(--green, #269a1c); box-shadow: 0 0.1rem 0.3rem rgba(38,154,28,0.22); }
.rd-btn--accept:hover { filter: brightness(1.06); color: #fff; }
.rd-btn--reject { background: #dc2626; color: #fff; border-color: #dc2626; box-shadow: 0 0.1rem 0.3rem rgba(220,38,38,0.22); }
.rd-btn--reject:hover { filter: brightness(1.06); color: #fff; }
.rd-btn--ghost { background: #fff; color: #5a7a9a; border-color: rgba(46, 92, 158, 0.25); }
.rd-btn--ghost:hover { background: #f7fafd; color: #1a3c6e; border-color: #94a3b8; }
.rd-btn--primary { background: var(--green, #269a1c); color: #fff; border-color: var(--green, #269a1c); box-shadow: 0 0.15rem 0.4rem rgba(38,154,28,0.25); }
.rd-btn--primary:hover { filter: brightness(1.06); color: #fff; }

/* DEPRECADO: barra de acciones de ancho completo. Las acciones Regresar / Guardar
   se movieron al pie de la columna del listado (.rd-sidebar__actions). Se conservan
   estas reglas por referencia; ya no hay ningún .rd-actions en el template. */
.rd-actions {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.7rem;
    background: #fff;
    border-top: 3px solid #2e5c9e;
    border-bottom: 1px solid rgba(46, 92, 158, 0.18);
    padding: 0.7rem 1.4rem;
    flex-shrink: 0;
}
.rd-actions__hint {
    display: inline-flex; align-items: center; gap: 0.35rem;
    margin: 0;
    font-size: 0.82rem;
    color: #5a7a9a;
    flex: 1;
    min-width: 14rem;
}
.rd-actions__hint span { color: #f59e0b; font-size: 1.1rem; }
.rd-actions__hint b { color: #b91c1c; font-weight: 700; }
.rd-actions__hint--ok { color: #166534; }
.rd-actions__hint--ok span { color: var(--green, #269a1c); }
.rd-actions__btns { display: flex; gap: 0.5rem; flex-wrap: wrap; }

@media (max-width: 1100px) {
    .rd-body { grid-template-columns: 1fr; overflow-y: auto; }
    .rd-shell { height: auto; min-height: 93vh; overflow-y: auto; }
    .rd-viewer__frame { min-height: 28rem; }
}
@media (max-width: 640px) {
    .rd-header { flex-direction: column; align-items: stretch; }
    .rd-actions { flex-direction: column; align-items: stretch; }
    .rd-actions__btns { justify-content: stretch; }
}


/* =============================================================================
   REVISIÓN DE SOLICITUDES (CV) · FatherComponent.vue + ListComponent.vue
   Componentes: resources/js/components/revision_solicitudes_cv/FatherComponent.vue
                resources/js/components/revision_solicitudes_cv/ListComponent.vue
   Apartado:    Módulo "Historial de solicitudes" para rol REVISOR_CURRICULUM: shell +
                cards con botones Revisar / Certificado / Expediente.
   Prefijo:     .rcv-*
   ============================================================================= */

/* Shell */
.csj-shell__content.rcv-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}
.rcv-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.85rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.rcv-scroll::-webkit-scrollbar { width: 0.6rem; }
.rcv-scroll::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%); border-radius: 999px; }
.rcv-scroll::-webkit-scrollbar-track { background: #f1f5f9; }

.rcv-footer {
    flex-shrink: 0;
    padding: 0.65rem 1rem;
    border-top: 1px solid rgba(46, 92, 158, 0.18);
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
}
.rcv-footer .ms-paginate { margin-top: 0; border: none; box-shadow: none; background: transparent; padding: 0; }

/* Listado en grid */
.rcv-list { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 1100px) { .rcv-list { grid-template-columns: repeat(2, 1fr); } }

.rcv-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.7rem;
    padding: 0.85rem 1rem 0.85rem 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 28, 50, 0.04);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    display: flex; flex-flow: column; gap: 0.65rem;
}
.rcv-card:hover { box-shadow: 0 0.4rem 1rem rgba(46, 92, 158, 0.14); border-color: rgba(46, 92, 158, 0.42); transform: translateY(-1px); }
.rcv-card::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0;
    width: 0.35rem;
    border-top-left-radius: 0.7rem; border-bottom-left-radius: 0.7rem;
    background: linear-gradient(180deg, #1a3c6e, #2e5c9e);
}

.rcv-card__head { display: flex; align-items: flex-start; gap: 0.7rem; flex-wrap: wrap; }
.rcv-card__avatar {
    width: 2.8rem; height: 2.8rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.25);
}
.rcv-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.rcv-card__avatar .material-symbols-outlined { font-size: 1.5rem; }

.rcv-card__identity { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.rcv-card__name { margin: 0; font-size: 0.95rem; font-weight: 700; color: #1a3c6e; line-height: 1.3; font-family: 'Merriweather', serif; word-break: break-word; }
.rcv-card__specialty { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.78rem; color: #5a7a9a; width: max-content; max-width: 100%; }
.rcv-card__specialty .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; flex-shrink: 0; }

.rcv-card__meta { display: flex; flex-direction: row; gap: 0.35rem; align-items: center; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.rcv-card__date {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    background: linear-gradient(135deg, rgba(46, 92, 158, 0.08), rgba(46, 92, 158, 0.16));
    border: 1px solid rgba(46, 92, 158, 0.22);
    border-radius: 0.4rem;
}
.rcv-card__date .material-symbols-outlined { font-size: 1rem; color: #2e5c9e; flex-shrink: 0; }
.rcv-card__date > span { display: flex; flex-direction: column; gap: 0.05rem; line-height: 1.2; }
.rcv-card__date small { font-size: 0.6rem; color: #5a7a9a; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.rcv-card__date > span > :last-child { font-size: 0.78rem; color: #1a3c6e; font-weight: 700; font-variant-numeric: tabular-nums; }

.rcv-card__age {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border-radius: 0.4rem;
    font-size: 0.78rem; font-weight: 600;
    border: 1px solid transparent;
}
.rcv-card__age .material-symbols-outlined { font-size: 1rem; }
.rcv-card__age-body { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
.rcv-card__age-top { display: inline-flex; align-items: baseline; gap: 0.25rem; white-space: nowrap; }
.rcv-card__age b { font-size: 0.95rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.rcv-card__age small { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; opacity: 0.85; }
.rcv-card__age.is-ok   { background: #e7f6ec; color: #166534; border-color: rgba(22, 101, 52, 0.22); }
.rcv-card__age.is-warn { background: #fef3c7; color: #92400e; border-color: rgba(146, 64, 14, 0.22); }
.rcv-card__age.is-bad  { background: #fdecea; color: #c5221f; border-color: rgba(197, 34, 31, 0.22); }

.rcv-card__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; padding-top: 0.5rem; border-top: 1px dashed rgba(46, 92, 158, 0.22); }
.rcv-tag {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem; font-weight: 600;
    border-radius: 0.35rem;
    border: 1px solid transparent;
}
.rcv-tag .material-symbols-outlined { font-size: 0.9rem; }
.rcv-tag--proc { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; border-color: rgba(146, 64, 14, 0.22); }
.rcv-tag--conv { background: linear-gradient(135deg, #f3e8ff, #e9d5ff); color: #6a1b9a; border-color: rgba(106, 27, 154, 0.22); }

.rcv-card__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-top: 0.5rem; border-top: 1px dashed rgba(46, 92, 158, 0.22); margin-top: auto; }
.rcv-card__btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 0.45rem;
    font-size: 0.78rem; font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    flex: 1; justify-content: center;
    min-width: 9rem;
}
.rcv-card__btn .material-symbols-outlined { font-size: 1rem; }
.rcv-card__btn--review {
    background: linear-gradient(135deg, #2e5c9e 0%, #5b8acc 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0.15rem 0.4rem rgba(46, 92, 158, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.rcv-card__btn--review:hover {
    background: linear-gradient(135deg, #1a3c6e 0%, #4a7bbf 100%);
    transform: translateY(-1px);
    box-shadow: 0 0.3rem 0.7rem rgba(46, 92, 158, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    color: #fff;
}
.rcv-card__btn--cert { background: #fff; color: #6a1b9a; border-color: rgba(106, 27, 154, 0.3); }
.rcv-card__btn--cert:hover { background: linear-gradient(135deg, #6a1b9a, #8e24aa); color: #fff; border-color: transparent; transform: translateY(-1px); box-shadow: 0 0.2rem 0.5rem rgba(106, 27, 154, 0.3); }
.rcv-card__btn--exp { background: #fff; color: #166534; border-color: rgba(22, 101, 52, 0.3); }
.rcv-card__btn--exp:hover { background: linear-gradient(135deg, #16a34a, #15803d); color: #fff; border-color: transparent; transform: translateY(-1px); box-shadow: 0 0.2rem 0.5rem rgba(22, 163, 74, 0.3); }

.rcv-empty {
    grid-column: 1 / -1;
    background: #fff;
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.65rem;
    padding: 2.5rem 1rem; text-align: center; color: #5a7a9a;
}
.rcv-empty .material-symbols-outlined { font-size: 3rem; color: rgba(46, 92, 158, 0.5); }
.rcv-empty h5 { margin: 0.5rem 0 0.2rem; font-weight: 700; color: #1a3c6e; font-size: 1rem; }
.rcv-empty p { margin: 0; font-size: 0.85rem; }


/* =============================================================================
   DIRECTORIO MÉDICO · FormComponent.vue
   Componente:  resources/js/components/directorio/FormComponent.vue
   Apartado:    Vista de expediente del médico (cuando admin abre un registro desde
                el directorio): sidebar con perfil + acciones + tabs verticales +
                content scrolleable. Incluye modal "Nombrar presidente".
   Prefijo:     .dir-exp-*  +  .sigme-nom-pres-* (modal de nombrar presidente)
   ============================================================================= */

/* Shell sidebar + content */
.dir-exp-shell {
    display: grid;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
    gap: 1rem;
    height: 100%;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    background: #f5f7fb;
    padding: 0.75rem;
    box-sizing: border-box;
}
.dir-exp-sidebar {
    display: flex; flex-direction: column;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    height: 100%;
    min-width: 0;
}

/* Perfil */
.dir-exp-profile {
    display: flex; flex-direction: column;
    align-items: center; text-align: center;
    padding: 1.25rem 1rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
}
.dir-exp-photo {
    position: relative;
    width: 88px; height: 88px;
    border-radius: 50%;
    overflow: visible;
    margin-bottom: 0.75rem;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}
.dir-exp-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.9);
    background: #f1f5f9;
}
.dir-exp-photo--presidente img { border-color: #f5c451; box-shadow: 0 0 0 2px rgba(245, 196, 81, 0.5); }
.dir-exp-photo__medal {
    position: absolute;
    right: -4px; bottom: -4px;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f5c451 0%, #d4a017 100%);
    color: #ffffff;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(212, 160, 23, 0.45);
}
.dir-exp-photo__medal .material-symbols-outlined { font-size: 1rem; }
.dir-exp-profile__name { font-size: 0.95rem; font-weight: 600; color: #ffffff; margin: 0 0 0.25rem 0; line-height: 1.25; }
.dir-exp-profile__email { font-size: 0.78rem; color: rgba(255, 255, 255, 0.85); margin: 0; word-break: break-all; }

/* Acciones rápidas */
.dir-exp-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 0.4rem;
    padding: 0.75rem;
    border-bottom: 1px solid #eef1f6;
}
.dir-exp-action-btn {
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
    gap: 0.25rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.5rem 0.3rem;
    color: #475569;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 62px;
    min-width: 0;
    overflow: hidden;
}
.dir-exp-action-btn:hover {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    border-color: #1a3c6e;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(26, 60, 110, 0.25);
}
.dir-exp-action-btn .material-symbols-outlined { font-size: 1.25rem; }
.dir-exp-action-btn__label { font-size: 0.62rem; font-weight: 500; line-height: 1.1; text-align: center; word-break: break-word; hyphens: auto; width: 100%; }
.dir-exp-action-btn--gold { background: linear-gradient(135deg, #fff7e0 0%, #fde9a8 100%); border-color: #f5c451; color: #8a6500; }
.dir-exp-action-btn--gold:hover { background: linear-gradient(135deg, #fde9a8 0%, #f5c451 100%); border-color: #d4a017; color: #6b4f00; box-shadow: 0 2px 6px rgba(212, 160, 23, 0.3); }

/* Tabs verticales */
.dir-exp-tabs {
    flex: 1 1 auto;
    padding: 0.5rem 0;
    min-width: 0; min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.dir-exp-tabs::-webkit-scrollbar { width: 4px; }
.dir-exp-tabs::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.dir-exp-tabs::-webkit-scrollbar-track { background: transparent; }

.dir-exp-tab {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.55rem 1rem;
    color: #475569;
    text-decoration: none;
    font-size: 0.82rem;
    border-left: 3px solid transparent;
    transition: all 0.15s ease;
    cursor: pointer;
    min-width: 0;
}
.dir-exp-tab:hover { background: #f8fafc; color: #1a3c6e; }
.dir-exp-tab.is-active {
    background: linear-gradient(90deg, rgba(26, 60, 110, 0.1) 0%, rgba(46, 92, 158, 0) 100%);
    color: #1a3c6e;
    border-left-color: #2e5c9e;
    font-weight: 600;
}
.dir-exp-tab__icon { font-size: 1.15rem; flex-shrink: 0; }
.dir-exp-tab__label { flex: 1; line-height: 1.2; min-width: 0; word-break: break-word; }

/* Botón de regreso */
.dir-exp-back {
    padding: 0.75rem;
    border-top: 1px solid #eef1f6;
    background: #fafbfc;
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
}
.dir-exp-back-btn {
    display: flex; align-items: center; justify-content: center;
    gap: 0.4rem;
    width: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.78rem; font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.dir-exp-back-btn:hover { background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%); border-color: #1a3c6e; color: #ffffff; }
.dir-exp-back-btn .material-symbols-outlined { font-size: 1rem; }

/* Content area */
.dir-exp-content {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    height: 100%;
    min-width: 0; min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.dir-exp-content::-webkit-scrollbar { width: 10px; }
.dir-exp-content::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%); border-radius: 10px; border: 2px solid #ffffff; }
.dir-exp-content::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #142e54 0%, #234b81 100%); }
.dir-exp-content::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
.dir-exp-content .contents { min-width: 0; }
.dir-exp-content__inner { padding: 1.25rem; min-width: 0; }

/* Anular scrolls internos de subcomponentes (el scroll lo maneja .dir-exp-content). */
.dir-exp-content .scroll-this,
.dir-exp-content .scroll-this-normal,
.dir-exp-content .ms-form-view,
.dir-exp-content .ms-form,
.dir-exp-content .box-editor,
.dir-exp-content .flex-form,
.dir-exp-content .formed-group,
.dir-exp-content .ef-shell,
.dir-exp-content .ef-shell--admin,
.dir-exp-content .vd-shell,
.dir-exp-content .vd-shell--admin {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}
.dir-exp-content .vd-shell--admin,
.dir-exp-content .ef-shell--admin { padding-bottom: 0 !important; }
.dir-exp-content .vd-actionbar,
.dir-exp-content .vd-banner { position: static !important; }

/* Banner alerta (correo no verificado) */
.dir-exp-banner-danger {
    display: flex; align-items: flex-start; gap: 0.65rem;
    background: linear-gradient(90deg, #fef2f2 0%, #fff5f5 100%);
    border: 1px solid #fecaca;
    border-left: 4px solid #dc2626;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    color: #991b1b;
}
.dir-exp-banner-danger .material-symbols-outlined { font-size: 1.4rem; color: #dc2626; flex-shrink: 0; }
.dir-exp-banner-danger p { margin: 0; font-size: 0.85rem; line-height: 1.4; }

/* Responsive */
@media (max-width: 1200px) {
    .dir-exp-shell { grid-template-columns: minmax(220px, 250px) minmax(0, 1fr); }
    .dir-exp-profile { padding: 1rem 0.75rem 0.75rem; }
    .dir-exp-photo { width: 72px; height: 72px; }
    .dir-exp-profile__name { font-size: 0.88rem; }
    .dir-exp-tab { padding: 0.5rem 0.75rem; font-size: 0.78rem; }
}
@media (max-width: 992px) {
    .dir-exp-shell { grid-template-columns: minmax(200px, 220px) minmax(0, 1fr); padding: 0.5rem; gap: 0.65rem; }
    .dir-exp-actions { grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); padding: 0.5rem; }
    .dir-exp-action-btn { min-height: 56px; padding: 0.4rem 0.25rem; }
    .dir-exp-action-btn .material-symbols-outlined { font-size: 1.15rem; }
    .dir-exp-action-btn__label { font-size: 0.58rem; }
    .dir-exp-tab__icon { font-size: 1.05rem; }
}
@media (max-width: 768px) {
    .dir-exp-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; overflow-y: auto; }
    .dir-exp-sidebar { height: auto; max-height: none; overflow: visible; }
    .dir-exp-back { position: static; }
    .dir-exp-tabs { display: flex; flex-direction: row; overflow-x: auto; flex-wrap: nowrap; padding: 0.5rem; gap: 0.4rem; }
    .dir-exp-tab { flex: 0 0 auto; border-left: none; border-bottom: 3px solid transparent; border-radius: 8px; padding: 0.5rem 0.75rem; background: #f8fafc; white-space: nowrap; }
    .dir-exp-tab.is-active { background: linear-gradient(135deg, rgba(26, 60, 110, 0.14) 0%, rgba(46, 92, 158, 0.05) 100%); border-bottom-color: #2e5c9e; color: #1a3c6e; }
    .dir-exp-content { min-height: 60vh; }
}
@media (max-width: 480px) {
    .dir-exp-shell { padding: 0.4rem; }
    .dir-exp-profile { flex-direction: row; text-align: left; gap: 0.65rem; padding: 0.75rem; }
    .dir-exp-photo { width: 56px; height: 56px; margin-bottom: 0; flex-shrink: 0; }
    .dir-exp-photo__medal { width: 22px; height: 22px; }
    .dir-exp-photo__medal .material-symbols-outlined { font-size: 0.85rem; }
    .dir-exp-actions { grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: 0.3rem; }
}

/* Modal "Nombrar presidente" (lanzado desde el FormComponent del directorio) */
.sigme-nom-pres-modal .modal-dialog { max-width: 480px; }
.sigme-nom-pres-content {
    border-radius: 14px;
    border: none;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
}
.sigme-nom-pres-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #fff7e0 0%, #fde9a8 100%);
    border-bottom: 1px solid #f5c451;
}
.sigme-nom-pres-title { display: flex; align-items: center; gap: 0.65rem; }
.sigme-nom-pres-icon { font-size: 2rem; color: #d4a017; }
.sigme-nom-pres-title h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: #6b4f00; line-height: 1.2; }
.sigme-nom-pres-title p { margin: 0; font-size: 0.78rem; color: #8a6500; }
.sigme-nom-pres-close {
    background: rgba(255, 255, 255, 0.6);
    border: none;
    border-radius: 50%;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: #6b4f00;
    transition: background 0.15s ease;
}
.sigme-nom-pres-close:hover { background: rgba(255, 255, 255, 0.95); }

.sigme-nom-pres-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.85rem; }
.sigme-nom-pres-doctor {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.65rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}
.sigme-nom-pres-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid #f5c451; }
.sigme-nom-pres-doctor-info h4 { margin: 0; font-size: 0.9rem; color: #0f172a; font-weight: 600; }
.sigme-nom-pres-doctor-info p { margin: 0; font-size: 0.78rem; color: #64748b; }

.sigme-nom-pres-alert {
    display: flex; align-items: flex-start; gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    font-size: 0.8rem; line-height: 1.35;
}
.sigme-nom-pres-alert .material-symbols-outlined { font-size: 1.2rem; flex-shrink: 0; }
.sigme-nom-pres-alert p { margin: 0; }
.sigme-nom-pres-alert--warning { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; }
.sigme-nom-pres-alert--warning .material-symbols-outlined { color: #ea580c; }
.sigme-nom-pres-alert--info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.sigme-nom-pres-alert--info .material-symbols-outlined { color: #2563eb; }

.sigme-nom-pres-section-title { margin: 0; font-size: 0.85rem; font-weight: 600; color: #334155; }
.sigme-nom-pres-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
.sigme-nom-pres-field { display: flex; flex-direction: column; gap: 0.25rem; }
.sigme-nom-pres-field label { font-size: 0.75rem; color: #475569; font-weight: 500; }
.sigme-nom-pres-field input {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0.4rem 0.55rem;
    font-size: 0.85rem; color: #0f172a;
    outline: none;
    transition: border 0.15s ease;
}
.sigme-nom-pres-field input:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15); }

/* Opciones (radio) del modal "Integrar a la mesa directiva": correo institucional vs personal. */
.sigme-mesa-option {
    display: flex; align-items: flex-start; gap: 0.6rem;
    border: 1px solid #cbd5e1; border-radius: 8px; padding: 0.6rem 0.7rem;
    margin: 0.35rem 0; cursor: pointer; transition: border 0.15s ease, background 0.15s ease;
}
.sigme-mesa-option:hover { border-color: #94a3b8; }
.sigme-mesa-option.is-active { border-color: #1a3c6e; background: #eef2f8; }
.sigme-mesa-option input[type="radio"] { margin-top: 0.2rem; flex-shrink: 0; }
.sigme-mesa-option__title { display: block; font-size: 0.85rem; font-weight: 600; color: #1e293b; }
.sigme-mesa-option__hint { display: block; font-size: 0.74rem; color: #64748b; margin-top: 0.1rem; line-height: 1.3; }

.sigme-nom-pres-footer {
    display: flex; justify-content: flex-end; gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    background: #f8fafc;
    border-top: 1px solid #eef1f6;
}
.sigme-nom-pres-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    font-size: 0.82rem; font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}
.sigme-nom-pres-btn .material-symbols-outlined { font-size: 1rem; }
.sigme-nom-pres-btn--secondary { background: #ffffff; border-color: #cbd5e1; color: #475569; }
.sigme-nom-pres-btn--secondary:hover { background: #f1f5f9; color: #0f172a; }
.sigme-nom-pres-btn--primary { background: linear-gradient(135deg, #f5c451 0%, #d4a017 100%); color: #ffffff; border-color: #d4a017; }
.sigme-nom-pres-btn--primary:hover { background: linear-gradient(135deg, #d4a017 0%, #a17a00 100%); box-shadow: 0 4px 12px rgba(212, 160, 23, 0.35); }


/* Modal "Cambiar de especialidad" (CS_SUDO/CS_SOPORTE) — lanzado desde
   HistorySpecialtiesComponent. Permite reasignar una solicitud (activa o histórica)
   a otra especialidad del mismo médico sin perder el avance del proceso. */
.sigme-cam-esp-modal .modal-dialog { max-width: 520px; }
.sigme-cam-esp-content {
    border-radius: 14px;
    border: none;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
}
.sigme-cam-esp-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-bottom: 1px solid #93c5fd;
}
.sigme-cam-esp-title { display: flex; align-items: center; gap: 0.65rem; }
.sigme-cam-esp-icon { font-size: 2rem; color: #1a3c6e; }
.sigme-cam-esp-title h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: #1a3c6e; line-height: 1.2; }
.sigme-cam-esp-title p { margin: 0; font-size: 0.78rem; color: #1e3a8a; }
.sigme-cam-esp-close {
    background: rgba(255, 255, 255, 0.6);
    border: none;
    border-radius: 50%;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: #1a3c6e;
    transition: background 0.15s ease;
}
.sigme-cam-esp-close:hover { background: rgba(255, 255, 255, 0.95); }

.sigme-cam-esp-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.9rem; }
.sigme-cam-esp-current {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #cbd5e1;
    border-radius: 0.45rem;
    padding: 0.55rem 0.75rem;
}
.sigme-cam-esp-current__label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    font-weight: 700;
    margin-bottom: 0.2rem;
}
.sigme-cam-esp-current__value {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: #1e293b;
}
.sigme-cam-esp-current__value .material-symbols-outlined {
    color: #475569;
    font-size: 1rem;
}

.sigme-cam-esp-section-title {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: #1a3c6e;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sigme-cam-esp-field { display: flex; flex-direction: column; gap: 0.3rem; }
.sigme-cam-esp-field label { font-size: 0.78rem; font-weight: 600; color: #334155; }
.sigme-cam-esp-field select {
    padding: 0.45rem 0.6rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.4rem;
    font-size: 0.88rem;
    background: white;
    color: #1e293b;
}
.sigme-cam-esp-field select:focus {
    outline: none;
    border-color: #2e5c9e;
    box-shadow: 0 0 0 2px rgba(46, 92, 158, 0.15);
}

.sigme-cam-esp-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    border-radius: 0.45rem;
    padding: 0.65rem 0.8rem;
    font-size: 0.8rem;
    line-height: 1.45;
}
.sigme-cam-esp-alert .material-symbols-outlined { font-size: 1.15rem; flex-shrink: 0; margin-top: 0.05rem; }
.sigme-cam-esp-alert ul { margin: 0.25rem 0 0 1rem; padding: 0; }
.sigme-cam-esp-alert li { margin: 0; }
.sigme-cam-esp-alert--info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e3a8a;
}
.sigme-cam-esp-alert--info .material-symbols-outlined { color: #2e5c9e; }
.sigme-cam-esp-alert--warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #78350f;
}
.sigme-cam-esp-alert--warning .material-symbols-outlined { color: #b45309; }

.sigme-cam-esp-footer {
    display: flex; justify-content: flex-end; gap: 0.55rem;
    padding: 0.85rem 1.25rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}
.sigme-cam-esp-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.5rem 0.95rem;
    border-radius: 0.45rem;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.sigme-cam-esp-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.sigme-cam-esp-btn .material-symbols-outlined { font-size: 1rem; }
.sigme-cam-esp-btn--secondary { background: #ffffff; border-color: #cbd5e1; color: #475569; }
.sigme-cam-esp-btn--secondary:hover { background: #f1f5f9; color: #0f172a; }
.sigme-cam-esp-btn--primary { background: linear-gradient(135deg, #2e5c9e 0%, #1a3c6e 100%); color: #ffffff; border-color: #1a3c6e; }
.sigme-cam-esp-btn--primary:hover:not([disabled]) { background: linear-gradient(135deg, #1a3c6e 0%, #0f2447 100%); box-shadow: 0 4px 12px rgba(26, 60, 110, 0.35); }


/* =============================================================================
   CERTIFICADOS · FatherComponent.vue (Shell del módulo)
   Componente:  resources/js/components/certificados/FatherComponent.vue
   Apartado:    Módulo "Certificados" — shell con sidebar (filtros + KPI count) +
                main scrolleable (manifiesto + tabla de candidatos).
   Prefijo:     .cert-shell, .cert-sidebar, .cert-main, .cert-content
   ============================================================================= */
.csj-shell__content.cert-content {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.cert-shell {
    display: grid;
    grid-template-columns: 280px 1fr;
    /* minmax(0, 1fr) constriñe la altura de la fila al contenedor; sin esto cert-main quedaba content-sized y cert-table-wrap nunca creaba viewport real para el sticky */
    grid-template-rows: minmax(0, 1fr);
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
@media (max-width: 1100px) { .cert-shell { grid-template-columns: 1fr; } }

.cert-sidebar {
    display: flex; flex-direction: column;
    gap: 0.7rem;
    min-width: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.cert-sidebar::-webkit-scrollbar { width: 0.5rem; }
.cert-sidebar::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%); border-radius: 999px; }

.cert-main {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* el único contenedor con scroll es .cert-table-wrap; así el sticky del thead se ancla a un único viewport */


/* =============================================================================
   CERTIFICADOS · FilterComponent.vue (Sidebar de filtros)
   Componente:  resources/js/components/certificados/FilterComponent.vue
   Apartado:    Sidebar izquierdo del módulo "Certificados": secciones de filtros
                (especialidad, proceso, año), botones de acción (generar / vista
                previa / limpiar) y extras.
   Prefijo:     .cert-filter*, .cert-field, .cert-input, .cert-btn*
   ============================================================================= */
.cert-filter { display: flex; flex-direction: column; gap: 0.65rem; }
.cert-filter__section {
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.65rem;
    box-shadow: 0 1px 2px rgba(15, 28, 50, 0.04);
    overflow: hidden;
}
.cert-filter__head {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.55rem 0.75rem;
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
    border-bottom: 1px solid rgba(46, 92, 158, 0.18);
}
.cert-filter__head .material-symbols-outlined { font-size: 1.05rem; color: #2e5c9e; }
.cert-filter__head h4 {
    margin: 0;
    font-size: 0.78rem; font-weight: 700;
    color: #1a3c6e;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.cert-filter__body { display: flex; flex-direction: column; gap: 0.55rem; padding: 0.65rem 0.75rem; }
.cert-filter__extra { display: flex; flex-direction: column; gap: 0.35rem; }

.cert-field { display: flex; flex-direction: column; gap: 0.2rem; }
.cert-field label {
    margin: 0;
    font-size: 0.7rem; font-weight: 700;
    color: #5a7a9a;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.cert-field select {
    width: 100%;
    background: #f7fafd;
    border: 1px solid rgba(46, 92, 158, 0.25);
    border-radius: 0.4rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.82rem; color: #1a3c6e;
    font-family: inherit;
    cursor: pointer; outline: none;
    transition: border-color 0.18s, box-shadow 0.18s, background-color 0.18s;
}
.cert-field select:focus { border-color: #2e5c9e; background: #fff; box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.15); }

.cert-input {
    display: flex; align-items: center; gap: 0.35rem;
    background: #f7fafd;
    border: 1px solid rgba(46, 92, 158, 0.25);
    border-radius: 0.4rem;
    padding: 0.35rem 0.6rem;
    transition: border-color 0.18s, box-shadow 0.18s, background-color 0.18s;
}
.cert-input:focus-within { border-color: #2e5c9e; background: #fff; box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.15); }
.cert-input .material-symbols-outlined { font-size: 1rem; color: #2e5c9e; flex-shrink: 0; }
.cert-input input {
    flex: 1; min-width: 0;
    border: none; outline: none; background: transparent;
    font-size: 0.82rem; color: #1a3c6e;
    font-family: inherit;
}
.cert-input input::placeholder { color: #94a3b8; }

.cert-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border: 1px solid transparent;
    border-radius: 0.45rem;
    font-size: 0.82rem; font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    width: 100%;
}
.cert-btn .material-symbols-outlined { font-size: 1rem; }
.cert-btn--ghost { background: #fff; color: #5a7a9a; border-color: rgba(46, 92, 158, 0.25); }
.cert-btn--ghost:hover { background: rgba(46, 92, 158, 0.08); color: #1a3c6e; border-color: rgba(46, 92, 158, 0.4); }
.cert-btn--toggle { background: rgba(46, 92, 158, 0.08); color: #1a3c6e; border-color: rgba(46, 92, 158, 0.2); }
.cert-btn--toggle:hover { background: rgba(46, 92, 158, 0.14); }
.cert-btn--secondary { background: #fff; color: #1a3c6e; border-color: rgba(46, 92, 158, 0.3); }
.cert-btn--secondary:hover { background: rgba(46, 92, 158, 0.08); transform: translateY(-1px); box-shadow: 0 0.15rem 0.4rem rgba(46, 92, 158, 0.2); }
.cert-btn--primary {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0.2rem 0.55rem rgba(22, 163, 74, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.cert-btn--primary:hover {
    background: linear-gradient(135deg, #15803d 0%, #14532d 100%);
    transform: translateY(-1px);
    box-shadow: 0 0.35rem 0.85rem rgba(22, 163, 74, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}


/* =============================================================================
   CERTIFICADOS · ListComponent.vue (Tabla de candidatos)
   Componente:  resources/js/components/certificados/ListComponent.vue
   Apartado:    Tabla principal del módulo "Certificados" — manifiesto rojo arriba,
                tabla sticky con checkbox + estado, chips ok/bad, tooltip flotante.
   Prefijo:     .cert-list, .cert-empty, .cert-manifest*, .cert-table*, .cert-row*,
                .cert-chip*, .cert-check, .cert-tooltip, .optional-td
   ============================================================================= */
.cert-list { display: flex; flex-direction: column; gap: 0.65rem; flex: 1 1 auto; min-height: 0; }

.cert-empty {
    background: #fff;
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.65rem;
    padding: 2.5rem 1rem;
    text-align: center; color: #5a7a9a;
}
.cert-empty .material-symbols-outlined { font-size: 3rem; color: rgba(46, 92, 158, 0.5); }
.cert-empty h5 { margin: 0.5rem 0 0.2rem; font-weight: 700; color: #1a3c6e; font-size: 1rem; }
.cert-empty p { margin: 0; font-size: 0.85rem; }

/* Banner "Antes de generar..." (rojo) */
.cert-manifest {
    display: flex; align-items: flex-start; gap: 0.7rem;
    padding: 0.75rem 0.95rem;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.05), rgba(220, 38, 38, 0.01));
    border: 1px solid rgba(217, 48, 37, 0.28);
    border-radius: 0.6rem;
}
.cert-manifest__icon {
    width: 2.4rem; height: 2.4rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #d93025 0%, #b91c1c 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0.15rem 0.4rem rgba(217, 48, 37, 0.3);
}
.cert-manifest__icon .material-symbols-outlined { font-size: 1.3rem; }
.cert-manifest__body { flex: 1; min-width: 0; }
.cert-manifest__body p { margin: 0; font-size: 0.85rem; color: #2c3e50; line-height: 1.5; }
.cert-manifest__body b { color: #1a3c6e; font-weight: 700; }
.cert-manifest__count {
    margin-top: 0.5rem !important;
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.82rem !important;
    font-weight: 600;
    color: #1a3c6e !important;
}
.cert-manifest__badge {
    display: inline-flex; align-items: center;
    background: linear-gradient(135deg, #1a3c6e, #2e5c9e);
    color: #fff;
    padding: 0.1rem 0.65rem;
    border-radius: 999px;
    font-weight: 800; font-size: 0.85rem;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.3);
}

/* Tabla con sticky thead + sticky first col */
.cert-table-wrap {
    flex: 1; min-height: 0;
    overflow: auto;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.6rem;
    box-shadow: 0 1px 2px rgba(15, 28, 50, 0.04);
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
    position: relative;
}
.cert-table-wrap::-webkit-scrollbar { width: 0.6rem; height: 0.6rem; }
.cert-table-wrap::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%); border-radius: 999px; }
.cert-table-wrap::-webkit-scrollbar-track { background: #f1f5f9; }

.cert-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.78rem;
    color: #2c3e50;
}
.cert-table thead th {
    position: sticky; top: 0; z-index: 3;
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    text-align: left;
    padding: 0.55rem 0.7rem;
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    white-space: nowrap;
    border-bottom: 2px solid #1a3c6e;
}
/* tbody se "aísla" en su propio stacking context con z-index bajo para garantizar que
   queda por DEBAJO del thead sticky. Esto compensa el display:contents !important que
   luaz-styles.css aplica al body/html, que rompe la cadena normal de stacking */
.cert-table tbody {
    position: relative;
    z-index: 0;
    isolation: isolate;
}
.cert-table thead th.optional-th {
    background: linear-gradient(180deg, #2e5c9e 0%, #4a7bbf 100%);
    font-style: italic;
    opacity: 0.95;
}
/* Header clickeable para ordenar. Cursor pointer + hover sutil y flecha. */
.cert-table thead th.cert-table__sortable {
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.cert-table thead th.cert-table__sortable:hover {
    background: linear-gradient(180deg, #2e5c9e 0%, #3b6cb0 100%);
}
.cert-table thead th.cert-table__sortable.optional-th:hover {
    background: linear-gradient(180deg, #4a7bbf 0%, #5a8acf 100%);
}
.cert-table thead th.cert-table__sortable.is-sorted-asc,
.cert-table thead th.cert-table__sortable.is-sorted-desc {
    background: linear-gradient(180deg, #fde68a 0%, #f5c451 100%);
    color: #3b2a00;
    border-bottom-color: #d4a017;
}
.cert-table thead th.cert-table__sortable.is-sorted-asc .cert-table__arrow,
.cert-table thead th.cert-table__sortable.is-sorted-desc .cert-table__arrow {
    color: #3b2a00;
}
.cert-table__arrow {
    font-size: 0.9rem !important;
    vertical-align: middle;
    margin-left: 0.15rem;
    opacity: 0.65;
    transition: opacity 0.15s ease;
}
.cert-table thead th.cert-table__sortable:hover .cert-table__arrow {
    opacity: 1;
}
.cert-table thead th.cert-table__sortable.is-sorted-asc .cert-table__arrow,
.cert-table thead th.cert-table__sortable.is-sorted-desc .cert-table__arrow {
    opacity: 1;
}
.cert-table tbody td {
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid rgba(46, 92, 158, 0.12);
    vertical-align: top;
    white-space: nowrap;
}
.cert-table tbody td small { color: #5a7a9a; }

.cert-table__sticky {
    position: sticky; left: 0; z-index: 2;
    background: #ffffff;
    border-right: 1px solid rgba(46, 92, 158, 0.25);
    /* sombra a la derecha para que se vea cómo el contenido pasa por detrás al hacer scroll horizontal */
    box-shadow: 6px 0 10px -4px rgba(15, 35, 70, 0.18);
    min-width: 13rem;
}
.cert-table thead .cert-table__sticky {
    /* esquina superior izquierda: sticky en ambos ejes para que "Seleccionar todos" siempre quede visible */
    position: sticky;
    top: 0;
    left: 0;
    z-index: 6;
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    box-shadow: 6px 0 10px -4px rgba(15, 35, 70, 0.28), 0 4px 8px -4px rgba(15, 35, 70, 0.25);
}

.cert-row { cursor: pointer; transition: background-color 0.18s; }
.cert-row:hover td { background: rgba(46, 92, 158, 0.05); }
/* opaco para que el contenido no se vea encimado al hacer scroll horizontal */
.cert-row:hover .cert-table__sticky { background: #eef4fc; }
/* fila liberada: fondo verde sólido en la columna sticky (es el "efecto" que pidió el usuario) */
.cert-row.is-ok .cert-table__sticky { background: #ecfdf5; border-right-color: rgba(22, 101, 52, 0.35); }
.cert-row.is-ok:hover .cert-table__sticky { background: #d1fae5; }
.cert-row.is-bad td { background: rgba(197, 34, 31, 0.04); }
/* fila con errores: fondo rosado sólido (mismo tratamiento opaco que la fila liberada) */
.cert-row.is-bad .cert-table__sticky { background: #fef2f2; border-right-color: rgba(197, 34, 31, 0.35); }
.cert-row.is-bad:hover .cert-table__sticky { background: #fee2e2; }

.cert-row__state { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.cert-row__warn { margin: 0.25rem 0 0; font-size: 0.72rem; color: #c5221f; font-weight: 600; }

.cert-chip {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    border: 1px solid transparent;
    white-space: nowrap;
}
.cert-chip .material-symbols-outlined { font-size: 0.9rem; }
.cert-chip--ok  { background: #e7f6ec; color: #166534; border-color: rgba(22, 101, 52, 0.22); }
.cert-chip--bad { background: #fdecea; color: #c5221f; border-color: rgba(197, 34, 31, 0.22); }

.cert-check {
    display: inline-flex; align-items: center; gap: 0.4rem;
    cursor: pointer; user-select: none;
    color: #fff;
    margin: 0;
    font-size: 0.7rem; font-weight: 700;
}
.cert-check input[type="checkbox"] {
    width: 1rem; height: 1rem;
    accent-color: #d4af37;
    cursor: pointer;
}
.optional-td { color: #5a7a9a; font-style: italic; }

.cert-tooltip {
    position: fixed;
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: #1a3c6e;
    color: #fff;
    padding: 0.35rem 0.6rem;
    border-radius: 0.35rem;
    font-size: 0.75rem; font-weight: 600;
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 0.3rem 0.6rem rgba(15, 28, 50, 0.3);
}
.cert-tooltip .material-symbols-outlined { font-size: 0.9rem; }


/* =============================================================================
   CERTIFICADOS · PaginateComponent.vue (KPI count card)
   Componente:  resources/js/components/certificados/PaginateComponent.vue
   Apartado:    Card de "count" superior del sidebar de Certificados — gradient
                navy con icono + label + valor grande.
   Prefijo:     .cert-count*
   ============================================================================= */
.cert-count {
    display: flex; align-items: center; gap: 0.6rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    border-radius: 0.65rem;
    padding: 0.6rem 0.85rem;
    box-shadow: 0 0.2rem 0.5rem rgba(26, 60, 110, 0.25);
}
.cert-count__icon {
    width: 2.2rem; height: 2.2rem;
    border-radius: 0.4rem;
    background: rgba(255, 255, 255, 0.18);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.2rem !important;
    flex-shrink: 0;
}
.cert-count__body { display: flex; flex-direction: column; line-height: 1.1; }
.cert-count__label {
    font-size: 0.68rem; font-weight: 700;
    color: rgba(255, 255, 255, 0.78);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.cert-count__value {
    font-size: 1.45rem; font-weight: 800;
    color: #fff;
    font-family: 'Merriweather', serif;
}


/* =============================================================================
   CERTIFICADOS · FormComponent.vue (Editor del certificado)
   Componente:  resources/js/components/certificados/FormComponent.vue
   Apartado:    Vista de edición del certificado (datos universidad/residencia +
                presidente/responsable). Sidebar con avatar + acciones, main con
                cards de formulario, autocomplete y radio "Nacional / Extranjero".
   Prefijo:     .cf-*
   ============================================================================= */
.csj-shell__content.cf-content { padding: 0; overflow-y: auto; }
.cf-shell {
    display: flex; flex-direction: row; flex-wrap: nowrap;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.95rem 1rem;
    width: 100%;
    box-sizing: border-box;
}
@media (max-width: 980px) { .cf-shell { flex-direction: column; } }

/* Aside */
.cf-aside { width: 280px; flex: 0 0 280px; position: sticky; top: 0; }
@media (max-width: 980px) { .cf-aside { width: 100%; flex: 0 0 auto; position: static; } }
.cf-aside__card {
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(15, 28, 50, 0.06);
    overflow: hidden;
}
.cf-aside__card::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, #1a3c6e 0%, #2e5c9e 100%);
}
.cf-aside__hero {
    display: flex; flex-direction: column; align-items: center;
    gap: 0.4rem;
    padding: 1rem 0.85rem 0.85rem;
    text-align: center;
}
.cf-aside__avatar {
    width: 3.8rem; height: 3.8rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 0.2rem 0.6rem rgba(15, 28, 50, 0.15);
}
.cf-aside__avatar .material-symbols-outlined { font-size: 1.95rem; }
.cf-aside__name {
    margin: 0;
    font-size: 0.92rem; font-weight: 700;
    color: #1a3c6e;
    line-height: 1.3;
    font-family: 'Merriweather', serif;
    word-break: break-word;
}
.cf-aside__email {
    display: inline-flex; align-items: center; gap: 0.25rem;
    max-width: 100%;
    font-size: 0.74rem;
    color: #5a7a9a;
    word-break: break-all;
}
.cf-aside__email .material-symbols-outlined { font-size: 0.9rem; color: #2e5c9e; flex-shrink: 0; }

.cf-aside__link {
    display: inline-flex; align-items: center; gap: 0.3rem;
    margin-top: 0.5rem;
    padding: 0.4rem 0.7rem;
    background: linear-gradient(135deg, rgba(46, 92, 158, 0.08), rgba(46, 92, 158, 0.16));
    border: 1px solid rgba(46, 92, 158, 0.3);
    border-radius: 0.4rem;
    font-size: 0.78rem; font-weight: 600;
    color: #1a3c6e;
    text-decoration: none;
    transition: all 0.18s ease;
}
.cf-aside__link:hover {
    background: linear-gradient(135deg, #1a3c6e, #2e5c9e);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0.2rem 0.5rem rgba(26, 60, 110, 0.3);
    text-decoration: none;
    transform: translateY(-1px);
}
.cf-aside__link .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; flex-shrink: 0; transition: color 0.18s; }
.cf-aside__link:hover .material-symbols-outlined { color: #fff; }

.cf-aside__section {
    padding: 0.75rem 0.85rem;
    border-top: 1px dashed rgba(46, 92, 158, 0.22);
    display: flex; flex-direction: column; gap: 0.4rem;
}
.cf-aside__label {
    font-size: 0.7rem; font-weight: 700;
    color: #5a7a9a;
    text-transform: uppercase; letter-spacing: 0.05em;
    display: inline-flex; align-items: center; gap: 0.3rem;
}
.cf-aside__label--err { color: #c5221f; }
.cf-aside__label--err .material-symbols-outlined { font-size: 0.95rem; color: #c5221f; }
.cf-aside__actions { display: flex; flex-direction: column; gap: 0.4rem; }

.cf-aside__errors ul {
    margin: 0;
    padding-left: 1.1rem;
    display: flex; flex-direction: column; gap: 0.25rem;
    background: #fdecea;
    border: 1px solid rgba(197, 34, 31, 0.25);
    border-radius: 0.45rem;
    padding: 0.55rem 0.7rem 0.55rem 1.5rem;
}
.cf-aside__errors li { font-size: 0.78rem; color: #991b1b; line-height: 1.4; }

.cf-aside__help {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.72rem; color: #5a7a9a;
    background: rgba(46, 92, 158, 0.05);
    padding-top: 0.65rem;
}
.cf-aside__help .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; }
.cf-aside__help b { color: #1a3c6e; }

/* Radio nacionalidad */
.cf-radio-group { display: flex; gap: 0.4rem; }
.cf-radio {
    position: relative;
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid rgba(46, 92, 158, 0.22);
    border-radius: 0.4rem;
    background: #fff;
    color: #5a7a9a;
    font-size: 0.78rem; font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    margin: 0;
}
.cf-radio input[type="radio"] {
    position: absolute; top: 0; left: 0;
    opacity: 0;
    width: 1px; height: 1px;
    pointer-events: none;
}
.cf-radio .material-symbols-outlined { font-size: 1rem; color: #2e5c9e; }
.cf-radio:hover { border-color: rgba(46, 92, 158, 0.4); background: rgba(46, 92, 158, 0.04); }
.cf-radio.is-active {
    background: linear-gradient(135deg, #1a3c6e, #2e5c9e);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0.15rem 0.35rem rgba(26, 60, 110, 0.3);
}
.cf-radio.is-active .material-symbols-outlined { color: #fff; }

/* Botones */
.cf-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.55rem 0.85rem;
    border: 1px solid transparent;
    border-radius: 0.45rem;
    font-size: 0.85rem; font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    line-height: 1.2;
}
.cf-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 0.3rem 0.7rem rgba(15, 28, 50, 0.18); }
.cf-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.cf-btn .material-symbols-outlined { font-size: 1.05rem; }
.cf-btn--save {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #fff;
    box-shadow: 0 0.15rem 0.4rem rgba(22, 163, 74, 0.3);
}
.cf-btn--ghost { background: #fff; color: #5a7a9a; border-color: rgba(46, 92, 158, 0.25); }
.cf-btn--ghost:hover { background: rgba(46, 92, 158, 0.08); color: #1a3c6e; border-color: rgba(46, 92, 158, 0.4); }

/* Main */
.cf-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.cf-notice {
    display: flex; align-items: flex-start; gap: 0.4rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.45rem;
    font-size: 0.82rem; line-height: 1.45;
    border: 1px solid transparent;
}
.cf-notice .material-symbols-outlined { font-size: 1rem; flex-shrink: 0; margin-top: 0.1rem; }
.cf-notice b { font-weight: 700; }
.cf-notice--info { background: rgba(46, 92, 158, 0.07); color: #1a3c6e; border-color: rgba(46, 92, 158, 0.2); }
.cf-notice--info .material-symbols-outlined { color: #2e5c9e; }

/* Enlace para ver un archivo adjunto (título / diploma) en el form de certificados */
.cf-file-link {
    display: inline-flex; align-items: center; gap: 0.35rem;
    align-self: flex-start;
    padding: 0.45rem 0.85rem;
    background: #eaf0f8; color: #1a3c6e !important;
    border: 1px solid #bcd0ea; border-radius: 0.45rem;
    font-size: 0.82rem; font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none !important;
    transition: background 0.15s, border-color 0.15s;
}
.cf-file-link:hover { background: #dbe6f5; border-color: #2e5c9e; }
.cf-file-link .material-symbols-outlined { font-size: 1.05rem; }

/* Cards de formulario */
.cf-card {
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.7rem;
    box-shadow: 0 1px 2px rgba(15, 28, 50, 0.04);
    overflow: hidden;
}
.cf-card__head {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.7rem 0.95rem;
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
    border-bottom: 1px solid rgba(46, 92, 158, 0.18);
}
.cf-card__head-icon {
    width: 2.2rem; height: 2.2rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.25);
}
.cf-card__head-icon .material-symbols-outlined { font-size: 1.2rem; }
.cf-card__head-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.cf-card__head-text h4 { margin: 0; font-size: 0.92rem; font-weight: 700; color: #1a3c6e; font-family: 'Merriweather', serif; }
.cf-card__head-text p { margin: 0; font-size: 0.74rem; color: #5a7a9a; }
.cf-card__body { padding: 0.85rem 1rem; }

/* Grid de campos */
.cf-grid { display: flex; flex-direction: column; gap: 0.85rem; }
.cf-grid__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}
.cf-grid__row--1 { grid-template-columns: 1fr; }
.cf-grid__row--2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cf-grid__row--3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cf-grid__row--4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.cf-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; position: relative; }
.cf-field label {
    margin: 0;
    font-size: 0.7rem; font-weight: 700;
    color: #5a7a9a;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.cf-field label.cf-req::before { content: '* '; color: #d93025; font-weight: 700; }
.cf-field input,
.cf-field select,
.cf-field textarea {
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: 1px solid rgba(46, 92, 158, 0.25);
    border-radius: 0.4rem;
    font-size: 0.88rem;
    background: #fff;
    color: #2c3e50;
    font-family: inherit;
    transition: border-color 0.18s, box-shadow 0.18s, background-color 0.18s;
    box-sizing: border-box;
}
.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus {
    outline: none;
    border-color: #2e5c9e;
    box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.15);
}
.cf-field input:disabled,
.cf-field select:disabled,
.cf-field input[readonly] {
    background: #f1f5f9;
    color: #5a7a9a;
    cursor: not-allowed;
}

/* Duración (años + meses inline) */
.cf-duration {
    display: flex; align-items: center; gap: 0.3rem;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.25);
    border-radius: 0.4rem;
    padding: 0.1rem 0.4rem;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.cf-duration:focus-within { border-color: #2e5c9e; box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.15); }
.cf-duration input {
    width: 3rem;
    border: none;
    padding: 0.4rem 0.3rem;
    font-size: 0.85rem;
    color: #1a3c6e;
    background: transparent;
}
.cf-duration input:focus { outline: none; box-shadow: none; }
.cf-duration span { font-size: 0.74rem; color: #5a7a9a; font-weight: 600; }

/* Autocomplete (presidente/responsable) */
.cf-field--autocomplete { position: relative; }
.cf-autocomplete {
    position: absolute;
    top: 100%; left: 0; right: 0;
    z-index: 5;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.25);
    border-radius: 0.4rem;
    box-shadow: 0 0.3rem 0.8rem rgba(15, 28, 50, 0.12);
    max-height: 12rem;
    overflow-y: auto;
    margin-top: 0.2rem;
    padding: 0.25rem;
    display: flex; flex-direction: column; gap: 0.15rem;
}
.cf-autocomplete button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.4rem 0.55rem;
    border: none;
    background: transparent;
    border-radius: 0.3rem;
    font-size: 0.82rem;
    color: #2c3e50;
    cursor: pointer;
    transition: background-color 0.15s;
}
.cf-autocomplete button:hover { background: rgba(46, 92, 158, 0.08); color: #1a3c6e; }


/* =============================================================================
   COBROS · FatherComponent.vue (Shell del módulo de períodos)
   Componente:  resources/js/components/cobros/FatherComponent.vue
   Apartado:    Módulo "Cobros" — vista split de períodos a la izquierda
                (cards con KPIs + chips de especialidad + menú kebab) y panel
                derecho con tabs para asignados/sin asignar. Incluye el form
                inline para crear/editar período.
   Prefijo:     .cb-*, modificadores extra de .ms-filter
   ============================================================================= */

/* Shell */
.csj-shell__content.cb-content {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.cb-shell {
    display: grid;
    grid-template-columns: 4fr 6fr;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
@media (max-width: 1200px) {
    /* En responsive el scroll vive en el contenido del shell (cb-content),
       NO en cb-shell. Así toda la columna scrollea como una sola página y
       el paginador siempre es alcanzable. */
    .csj-shell__content.cb-content {
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        scrollbar-color: #2e5c9e #f1f5f9;
    }
    .csj-shell__content.cb-content::-webkit-scrollbar { width: 0.6rem; }
    .csj-shell__content.cb-content::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
        border-radius: 999px;
    }
    .csj-shell__content.cb-content::-webkit-scrollbar-track { background: #f1f5f9; }

    .cb-shell { grid-template-columns: 1fr; overflow: visible; height: auto; flex: 0 0 auto; }
    .cb-periodos,
    .cb-medicos { display: block; min-height: 0; max-height: none; overflow: visible; }
    .cb-periodos__wrap,
    .cb-tab-content { max-height: none; overflow: visible; flex: none; }
}

/* Extensiones al patrón global ms-filter (sólo para cobros) */
.ms-filter__input--small { min-width: 8.5rem; max-width: 10.5rem; }
.ms-filter__prefix {
    font-size: 0.62rem;
    color: #5a7a9a;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.ms-filter__btn--primary {
    background: linear-gradient(135deg, #2e5c9e 0%, #5b8acc 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0.2rem 0.55rem rgba(46, 92, 158, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.ms-filter__btn--primary:hover {
    background: linear-gradient(135deg, #1a3c6e 0%, #4a7bbf 100%);
    transform: translateY(-1px);
    box-shadow: 0 0.35rem 0.85rem rgba(46, 92, 158, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* Columna de períodos */
.cb-periodos {
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.7rem;
    box-shadow: 0 1px 3px rgba(15, 28, 50, 0.05);
    display: flex; flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.cb-periodos__wrap {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.7rem 0.85rem;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.cb-periodos__wrap::-webkit-scrollbar { width: 0.5rem; }
.cb-periodos__wrap::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%); border-radius: 999px; }

.cb-period-grid { display: flex; flex-direction: column; gap: 0.65rem; }

/* Card de período */
.cb-period {
    position: relative;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.6rem;
    overflow: hidden;
    display: flex;
    transition: box-shadow 0.18s, border-color 0.18s, transform 0.18s;
}
.cb-period:hover { box-shadow: 0 0.3rem 0.8rem rgba(46, 92, 158, 0.14); border-color: rgba(46, 92, 158, 0.42); transform: translateY(-1px); }
.cb-period.is-selected { border-color: rgba(46, 92, 158, 0.55); box-shadow: 0 0.3rem 0.9rem rgba(46, 92, 158, 0.2); }

/* Tira lateral vertical con etiqueta de estado */
.cb-period__side {
    width: 2.1rem;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #1a3c6e, #2e5c9e);
    color: #fff;
    font-size: 0.65rem; font-weight: 800;
    letter-spacing: 0.15em;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-transform: uppercase;
    flex-shrink: 0;
}
.cb-period--activo .cb-period__side { background: linear-gradient(180deg, #16a34a, #15803d); }
.cb-period--por_cerrar .cb-period__side { background: linear-gradient(180deg, #f59e0b, #d97706); }
.cb-period--cerrado .cb-period__side { background: linear-gradient(180deg, #94a3b8, #64748b); }

.cb-period__body { flex: 1; min-width: 0; padding: 0.75rem 0.9rem; display: flex; flex-direction: column; gap: 0.55rem; }
.cb-period__head { display: flex; align-items: flex-start; gap: 0.6rem; flex-wrap: wrap; }
.cb-period__title-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.cb-period__title {
    margin: 0;
    font-size: 0.95rem; font-weight: 700;
    color: #1a3c6e;
    font-family: 'Merriweather', serif;
    word-break: break-word;
}
.cb-period__range,
.cb-period__corte {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.74rem;
    color: #5a7a9a;
    width: max-content;
    max-width: 100%;
}
.cb-period__range .material-symbols-outlined,
.cb-period__corte .material-symbols-outlined { font-size: 0.85rem; color: #2e5c9e; }

.cb-period__aside { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.cb-period__chip {
    display: inline-flex; align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    border: 1px solid transparent;
}
.cb-period__chip.is-ok   { background: #e7f6ec; color: #166534; border-color: rgba(22, 101, 52, 0.22); }
.cb-period__chip.is-warn { background: #fef3c7; color: #92400e; border-color: rgba(146, 64, 14, 0.22); }
.cb-period__chip.is-bad  { background: #f1f5f9; color: #475569; border-color: #e2e8ef; }

/* Menú kebab (3 puntos) por card de período */
.cb-period__menu { position: relative; }
.cb-period__menu-btn {
    width: 1.85rem; height: 1.85rem;
    border-radius: 0.35rem;
    border: 1px solid rgba(46, 92, 158, 0.22);
    background: #fff;
    color: #5a7a9a;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.18s ease;
}
.cb-period__menu-btn:hover { background: rgba(46, 92, 158, 0.08); color: #1a3c6e; border-color: rgba(46, 92, 158, 0.4); }
.cb-period__menu-btn .material-symbols-outlined { font-size: 1.05rem; }
.cb-period__menu-list {
    position: absolute;
    top: 100%; right: 0;
    margin-top: 0.25rem;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.22);
    border-radius: 0.45rem;
    box-shadow: 0 0.5rem 1.2rem rgba(15, 28, 50, 0.18);
    z-index: 30;
    min-width: 11rem;
    padding: 0.25rem;
    display: flex; flex-direction: column; gap: 0.1rem;
}
.cb-period__menu-list button {
    display: inline-flex; align-items: center; gap: 0.4rem;
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: none;
    background: transparent;
    border-radius: 0.35rem;
    font-size: 0.78rem;
    color: #2c3e50;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s;
}
.cb-period__menu-list button .material-symbols-outlined { font-size: 1rem; color: #2e5c9e; }
.cb-period__menu-list button:hover:not(:disabled) { background: rgba(46, 92, 158, 0.08); color: #1a3c6e; }
.cb-period__menu-list button:disabled { opacity: 0.45; cursor: not-allowed; }
.cb-period__menu-list button.is-danger { color: #c5221f; }
.cb-period__menu-list button.is-danger .material-symbols-outlined { color: #c5221f; }
.cb-period__menu-list button.is-danger:hover:not(:disabled) { background: #fdecea; color: #991b1b; }

/* KPIs internos del período */
.cb-period__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.cb-period__kpi {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.4rem;
}
.cb-period__kpi-icon {
    width: 1.85rem; height: 1.85rem;
    border-radius: 0.35rem;
    background: linear-gradient(135deg, #1a3c6e, #2e5c9e);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem !important;
    flex-shrink: 0;
}
.cb-period__kpi-value { display: block; font-size: 1rem; font-weight: 800; color: #1a3c6e; line-height: 1.1; font-family: 'Merriweather', serif; }
.cb-period__kpi-label { display: block; font-size: 0.62rem; color: #5a7a9a; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }

/* Chips de especialidad (con contador) + toggle "ver más" */
.cb-period__chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.cb-period__chip-esp {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.18rem 0.5rem;
    background: linear-gradient(135deg, #e8f1fc, #d0e1f7);
    color: #1a3c6e;
    border: 1px solid rgba(46, 92, 158, 0.22);
    border-radius: 0.35rem;
    font-size: 0.72rem; font-weight: 600;
}
.cb-period__chip-esp b {
    color: #1a3c6e; font-weight: 800;
    background: rgba(255, 255, 255, 0.55);
    padding: 0.02rem 0.4rem;
    border-radius: 999px;
    font-size: 0.72rem;
}
.cb-period__chip-toggle {
    display: inline-flex; align-items: center;
    padding: 0.18rem 0.5rem;
    background: transparent;
    color: #2e5c9e;
    border: 1px dashed rgba(46, 92, 158, 0.4);
    border-radius: 0.35rem;
    font-size: 0.72rem; font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.cb-period__chip-toggle:hover { background: rgba(46, 92, 158, 0.08); color: #1a3c6e; border-color: rgba(46, 92, 158, 0.55); }

.cb-period__cta { display: flex; justify-content: flex-end; }

/* Botones del módulo Cobros */
.cb-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid transparent;
    border-radius: 0.45rem;
    font-size: 0.82rem; font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    line-height: 1.2;
    color: #fff;
}
.cb-btn .material-symbols-outlined { font-size: 1rem; }
.cb-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 0.3rem 0.7rem rgba(15, 28, 50, 0.18); }
.cb-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.cb-btn--primary {
    background: linear-gradient(135deg, #2e5c9e 0%, #5b8acc 100%);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0.15rem 0.4rem rgba(46, 92, 158, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.cb-btn--primary:hover { background: linear-gradient(135deg, #1a3c6e 0%, #4a7bbf 100%); }
.cb-btn--save { background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); box-shadow: 0 0.15rem 0.4rem rgba(22, 163, 74, 0.3); }
.cb-btn--ghost { background: #fff; color: #5a7a9a; border-color: rgba(46, 92, 158, 0.25); }
.cb-btn--ghost:hover { background: rgba(46, 92, 158, 0.08); color: #1a3c6e; border-color: rgba(46, 92, 158, 0.4); }

/* Empty state */
.cb-empty {
    background: #fff;
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.65rem;
    padding: 2.5rem 1rem; text-align: center; color: #5a7a9a;
}
.cb-empty .material-symbols-outlined { font-size: 3rem; color: rgba(46, 92, 158, 0.5); }
.cb-empty h5 { margin: 0.5rem 0 0.2rem; font-weight: 700; color: #1a3c6e; font-size: 1rem; }
.cb-empty p { margin: 0 0 0.85rem; font-size: 0.85rem; }

/* Formulario inline de período (crear/editar) */
.cb-form { display: flex; flex-direction: column; min-height: 0; }
.cb-form__head {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.75rem 0.95rem;
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
    border-bottom: 1px solid rgba(46, 92, 158, 0.18);
}
.cb-form__head-icon {
    width: 2.2rem; height: 2.2rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #1a3c6e, #2e5c9e);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.25);
}
.cb-form__head-icon .material-symbols-outlined { font-size: 1.2rem; }
.cb-form__head h4 { margin: 0; font-size: 0.92rem; font-weight: 700; color: #1a3c6e; font-family: 'Merriweather', serif; }
.cb-form__head p { margin: 0.1rem 0 0; font-size: 0.74rem; color: #5a7a9a; }
.cb-form__body { padding: 0.95rem 1rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; overflow-y: auto; }
.cb-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
@media (max-width: 540px) { .cb-form__grid { grid-template-columns: 1fr; } }
.cb-form__field { display: flex; flex-direction: column; gap: 0.25rem; }
.cb-form__field label {
    margin: 0;
    font-size: 0.7rem; font-weight: 700;
    color: #5a7a9a;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.cb-form__field label.cb-form__req::before { content: '* '; color: #d93025; font-weight: 700; }
.cb-form__field input {
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: 1px solid rgba(46, 92, 158, 0.25);
    border-radius: 0.4rem;
    font-size: 0.88rem;
    background: #fff;
    color: #2c3e50;
    font-family: inherit;
    transition: border-color 0.18s, box-shadow 0.18s;
    box-sizing: border-box;
}
.cb-form__field input:focus { outline: none; border-color: #2e5c9e; box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.15); }
.cb-form__hint {
    margin: 0;
    display: flex; align-items: flex-start; gap: 0.4rem;
    font-size: 0.78rem; color: #5a7a9a;
    background: rgba(46, 92, 158, 0.05);
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.4rem;
    padding: 0.5rem 0.7rem;
}
.cb-form__hint .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; flex-shrink: 0; margin-top: 0.05rem; }
.cb-form__hint b { color: #1a3c6e; font-weight: 700; }
.cb-form__actions {
    display: flex; gap: 0.5rem;
    padding: 0.75rem 0.95rem;
    border-top: 1px solid rgba(46, 92, 158, 0.18);
    background: #f7fafd;
}
.cb-form__actions .cb-btn { flex: 1; }

/* Columna derecha de médicos con tabs (asignados / sin asignar) */
.cb-medicos {
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.7rem;
    box-shadow: 0 1px 3px rgba(15, 28, 50, 0.05);
    display: flex; flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.cb-tabs {
    display: flex; align-items: stretch;
    padding: 0.5rem 0.7rem 0;
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
    border-bottom: 1px solid rgba(46, 92, 158, 0.18);
    gap: 0.3rem;
}
.cb-tab {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-bottom: none;
    border-radius: 0.5rem 0.5rem 0 0;
    background: rgba(46, 92, 158, 0.04);
    color: #5a7a9a;
    font-size: 0.82rem; font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    position: relative;
    bottom: -1px;
}
.cb-tab .material-symbols-outlined { font-size: 1rem; }
.cb-tab:hover { background: rgba(46, 92, 158, 0.1); color: #1a3c6e; }
.cb-tab.is-active {
    background: #fff;
    color: #1a3c6e;
    border-color: rgba(46, 92, 158, 0.3);
    font-weight: 700;
    box-shadow: 0 -2px 0 0 #2e5c9e inset;
}
.cb-tab-content { flex: 1; min-height: 0; overflow: hidden; padding: 0.7rem 0.85rem; }


/* =============================================================================
   COBROS · AsignadosComponent.vue + SinAsignarComponent.vue
   Componentes: resources/js/components/cobros/AsignadosComponent.vue
                resources/js/components/cobros/SinAsignarComponent.vue
   Apartado:    Listados de médicos del tab activo en módulo "Cobros".
                Base: Asignados (botón rojo, chip ámbar para pendientes).
                Variante: .sigme-rowlist--sin-asignar (chip info azul + .btn-green).
   Prefijo:     .sigme-rowlist*, .sigme-row*, .sigme-hist-chip*, .sigme-hist-empty,
                .hcs1-paginate-section
   Nota:        Los templates traen modificador en el wrapper (--asignados / --sin-asignar)
                para que las pocas diferencias entre tabs no se pisen al ser globales.
   ============================================================================= */

/* Wrapper + card de listado */
.sigme-rowlist-wrapper { display: block !important; gap: 0.6rem; min-width: 0; height: auto !important; }
.sigme-rowlist,
.sigme-rowlist--fill {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.6rem;
    box-shadow: 0 1px 2px rgba(15, 28, 50, 0.04);
    overflow: hidden;
    min-height: auto !important;
    height: auto !important;
}

/* Cabecera del listado */
.sigme-rowlist-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.7rem;
    padding: 0.65rem 0.9rem;
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
    border-bottom: 1px solid rgba(46, 92, 158, 0.18);
    flex-wrap: wrap;
}
.sigme-rowlist-head h3 { margin: 0; font-size: 0.92rem; font-weight: 700; color: #1a3c6e; font-family: 'Merriweather', serif; }
.sigme-rowlist-head small { display: block; font-size: 0.74rem; color: #5a7a9a; margin-top: 0.1rem; }
.sigme-rowlist-selectall {
    display: inline-flex; align-items: center; gap: 0.4rem;
    margin: 0;
    cursor: pointer; user-select: none;
    font-size: 0.78rem; color: #1a3c6e; font-weight: 600;
}
.sigme-rowlist-selectall input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: #2e5c9e; }

/* Body con scroll interno */
.sigme-rowlist-body {
    display: flex !important;
    flex-direction: column !important;
    padding: 0.5rem 0.65rem;
    gap: 0.35rem;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 28rem !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.sigme-rowlist-body::-webkit-scrollbar { width: 0.5rem; }
.sigme-rowlist-body::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%); border-radius: 999px; }
.sigme-rowlist-body::-webkit-scrollbar-track { background: #f1f5f9; }
@media (max-width: 1200px) { .sigme-rowlist-body { max-height: 24rem !important; } }

/* Row */
.sigme-row {
    position: relative;
    display: grid;
    grid-template-columns: 1.7rem 0.3rem 1fr auto 5rem auto 1.6rem;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.7rem 0.5rem 0.45rem;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.18s ease;
}
.sigme-row:hover { border-color: rgba(46, 92, 158, 0.42); box-shadow: 0 0.2rem 0.55rem rgba(46, 92, 158, 0.1); }
.sigme-row.is-open { border-color: rgba(46, 92, 158, 0.5); box-shadow: 0 0.25rem 0.7rem rgba(46, 92, 158, 0.15); }

/* Modificadores semánticos de row (variantes por tab) */
.sigme-row--cobrado { background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%); }
.sigme-row--invalido { background: linear-gradient(180deg, #fef2f2 0%, #ffffff 100%); border-color: rgba(197, 34, 31, 0.25); }

/* Side (barra de color izquierda) */
.sigme-row-side { align-self: stretch; border-radius: 999px; }
.sigme-rowlist--sin-asignar .sigme-row-side { background: linear-gradient(180deg, #16a34a, #15803d); }
.sigme-row--cobrado .sigme-row-side    { background: linear-gradient(180deg, #16a34a, #15803d); }
.sigme-row--pendiente .sigme-row-side  { background: linear-gradient(180deg, #f59e0b, #d97706); }
.sigme-row--invalido .sigme-row-side   { background: linear-gradient(180deg, #ef4444, #b91c1c); }

.sigme-row-check { display: flex; align-items: center; justify-content: center; }
.sigme-row-check input[type="checkbox"] { width: 1.05rem; height: 1.05rem; accent-color: #2e5c9e; cursor: pointer; }
.sigme-row-block { color: #c5221f; font-size: 1.1rem !important; }

.sigme-row-name {
    min-width: 0;
    font-size: 0.85rem; font-weight: 700;
    color: #1a3c6e;
    line-height: 1.3;
    word-break: break-word;
    font-family: 'Merriweather', serif;
}
.sigme-row-name small {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: #5a7a9a;
    font-size: 0.72rem;
    margin-top: 0.1rem;
}
.sigme-row-cell { font-size: 0.78rem; color: #5a7a9a; }
.sigme-row-cell--date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sigme-row-amount {
    font-size: 0.88rem; font-weight: 800;
    color: #1a3c6e;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Chips de estado (Asignados → ámbar para --info; SinAsignar → azul para --info) */
.sigme-row-status .sigme-hist-chip {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    border: 1px solid transparent;
    white-space: nowrap;
}
.sigme-row-status .sigme-hist-chip .material-symbols-outlined { font-size: 0.85rem; }
.sigme-row-status .sigme-hist-chip--ok   { background: #e7f6ec; color: #166534; border-color: rgba(22, 101, 52, 0.22); }
.sigme-row-status .sigme-hist-chip--info { background: #fef3c7; color: #92400e; border-color: rgba(146, 64, 14, 0.22); }
.sigme-row-status .sigme-hist-chip--bad  { background: #fdecea; color: #c5221f; border-color: rgba(197, 34, 31, 0.22); }
/* Override en SinAsignar: el chip "info" es azul (estado pendiente de asignación) */
.sigme-rowlist--sin-asignar .sigme-row-status .sigme-hist-chip--info {
    background: #e8f1fc; color: #1a3c6e; border-color: rgba(46, 92, 158, 0.22);
}

.sigme-row-toggle {
    width: 1.6rem; height: 1.6rem;
    border-radius: 0.35rem;
    border: 1px solid rgba(46, 92, 158, 0.2);
    background: #fff;
    color: #5a7a9a;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.18s;
}
.sigme-row-toggle:hover { background: rgba(46, 92, 158, 0.08); color: #1a3c6e; border-color: rgba(46, 92, 158, 0.4); }
.sigme-row-toggle .material-symbols-outlined { font-size: 1.05rem; }

/* Detalle expandido */
.sigme-row-detail {
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.5rem;
    padding: 0.65rem 0.85rem;
    margin-top: -0.05rem;
}
.sigme-row-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.5rem 0.8rem; }
.sigme-row-detail-grid > div { min-width: 0; font-size: 0.78rem; color: #2c3e50; }
.sigme-row-detail-grid > div b { color: #1a3c6e; font-weight: 700; }
.sigme-row-detail-full { grid-column: 1 / -1; }
.sigme-row-detail-label {
    display: block;
    font-size: 0.65rem; color: #5a7a9a; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 0.15rem;
}

/* Toolbar inferior con botón de acción (rojo = quitar, verde = asignar) */
.sigme-rowlist-bottombar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.6rem;
    padding: 0.55rem 0.9rem;
    background: #f7fafd;
    border-top: 1px solid rgba(46, 92, 158, 0.18);
    flex-wrap: wrap;
}
.sigme-rowlist-counter { font-size: 0.78rem; color: #5a7a9a; }
.sigme-rowlist-counter b { color: #1a3c6e; font-weight: 800; }

.sigme-rowlist-bottombar .btn-red,
.sigme-rowlist-bottombar .btn-green {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.5rem 0.95rem;
    border: 1px solid transparent;
    border-radius: 0.45rem;
    color: #fff;
    font-size: 0.85rem; font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
}
.sigme-rowlist-bottombar .btn-red {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    box-shadow: 0 0.15rem 0.4rem rgba(231, 76, 60, 0.3);
}
.sigme-rowlist-bottombar .btn-red:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 0.3rem 0.7rem rgba(231, 76, 60, 0.45); }
.sigme-rowlist-bottombar .btn-green {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    box-shadow: 0 0.15rem 0.4rem rgba(22, 163, 74, 0.3);
}
.sigme-rowlist-bottombar .btn-green:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 0.3rem 0.7rem rgba(22, 163, 74, 0.45); }
.sigme-rowlist-bottombar .btn-red:disabled,
.sigme-rowlist-bottombar .btn-green:disabled { opacity: 0.5; cursor: not-allowed; }
.sigme-rowlist-bottombar .btn-red .material-symbols-outlined,
.sigme-rowlist-bottombar .btn-green .material-symbols-outlined { font-size: 1.05rem; }

/* Empty state */
.sigme-hist-empty {
    background: #fff;
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.55rem;
    padding: 2rem 1rem; text-align: center; color: #5a7a9a;
}
.sigme-hist-empty .material-symbols-outlined { font-size: 2.5rem; color: rgba(46, 92, 158, 0.5); }
.sigme-hist-empty h5 { margin: 0.5rem 0 0.2rem; font-weight: 700; color: #1a3c6e; font-size: 0.95rem; }
.sigme-hist-empty p { margin: 0; font-size: 0.82rem; }

/* Paginador "hcs1" del tab de cobros */
.hcs1-paginate-section {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.5rem;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.55rem;
    padding: 0.45rem 0.85rem;
}
.hcs1-paginate-section h2 { margin: 0; font-size: 0.78rem; color: #5a7a9a; font-weight: 600; }
.hcs1-paginate-section .paginate { display: inline-flex; align-items: center; gap: 0.2rem; flex-wrap: wrap; }
.hcs1-paginate-section .paginate .contents a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.85rem; height: 1.85rem;
    padding: 0 0.5rem;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.22);
    border-radius: 0.35rem;
    color: #1a3c6e;
    font-size: 0.8rem; font-weight: 600;
    text-decoration: none;
    transition: all 0.15s;
}
.hcs1-paginate-section .paginate .contents.active a {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.3);
}
.hcs1-paginate-section .paginate .contents a:hover:not(.disabled-paginate) {
    background: rgba(46, 92, 158, 0.08);
    border-color: rgba(46, 92, 158, 0.45);
}
.hcs1-paginate-section .paginate .contents.disabled-paginate a { opacity: 0.4; cursor: not-allowed; }
.hcs1-paginate-section .show-quantity {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.78rem; color: #5a7a9a;
}
.hcs1-paginate-section .show-quantity p { margin: 0; font-weight: 600; }
.hcs1-paginate-section .show-quantity select {
    background: #f7fafd;
    border: 1px solid rgba(46, 92, 158, 0.25);
    border-radius: 0.35rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.78rem; color: #1a3c6e;
    cursor: pointer;
}

@media (max-width: 720px) {
    .sigme-row {
        grid-template-columns: 1.5rem 0.25rem 1fr;
        grid-template-areas: "check side name";
    }
    .sigme-row-check { grid-area: check; }
    .sigme-row-side { grid-area: side; }
    .sigme-row-name { grid-area: name; }
    .sigme-row-cell, .sigme-row-amount, .sigme-row-status, .sigme-row-toggle { display: none; }
}


/* =============================================================================
   CURRICULUM · ResumenComponent.vue (Resumen de capítulos/actividades)
   Componente:  resources/js/components/curriculum/ResumenComponent.vue
   Apartado:    Vista de resumen del curriculum del médico — listado de capítulos
                con sus actividades, pills de score/min/max y tags "Obligatorio".
   Prefijo:     .rsm-* (renombrado desde .rs-* para evitar colisión con el módulo
                de revisión revision_solicitudes_cv/SolicitudComponent.vue).
   ============================================================================= */
.rsm-shell { width: 100%; box-sizing: border-box; }
.rsm-shell *, .rsm-shell *::before, .rsm-shell *::after { box-sizing: border-box; }
.rsm-list { display: flex; flex-direction: column; gap: 1rem; }

/* Capítulo */
.rsm-cap {
    background: #fff;
    border: 1px solid #e2e8ef;
    border-radius: 0.6rem;
    overflow: hidden;
    box-shadow: 0 0.1rem 0.3rem rgba(0,0,0,0.03);
}
.rsm-cap__head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.8rem 1rem;
    background: #f7faff;
    border-bottom: 1px solid #e2e8ef;
    border-left: 4px solid var(--blue);
}
.rsm-cap__head--required { border-left-color: #dc2626; background: #fef9f9; }
.rsm-cap__title-wrap { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; flex: 1; min-width: 0; }
.rsm-cap__title { margin: 0; font-size: 0.98rem; font-weight: 700; color: var(--blue); }
.rsm-cap__head--required .rsm-cap__title { color: #b91c1c; }
.rsm-cap__meta { display: flex; flex-wrap: wrap; gap: 0.3rem; }

/* Actividades */
.rsm-actividades { padding: 0.8rem; display: flex; flex-direction: column; gap: 0.8rem; }
.rsm-act {
    background: #fbfcfe;
    border: 1px solid #e2e8ef;
    border-radius: 0.5rem;
    padding: 0.7rem 0.85rem;
}
.rsm-act__head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-bottom: 0.6rem;
    margin-bottom: 0.6rem;
    border-bottom: 1px dashed #e2e8ef;
}
.rsm-act__title-wrap { display: flex; align-items: center; gap: 0.4rem; flex: 1; min-width: 0; }
.rsm-act__indice {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.6rem; height: 1.6rem;
    padding: 0 0.4rem;
    background: var(--blue);
    color: #fff;
    border-radius: 0.3rem;
    font-size: 0.78rem; font-weight: 700;
    flex-shrink: 0;
}
.rsm-act__title { margin: 0; font-size: 0.88rem; font-weight: 600; color: #1e293b; }
.rsm-act__meta { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.rsm-act__registros { /* contenedor para list-activity */ }

/* Pills/Tags */
.rsm-tag {
    display: inline-flex; align-items: center;
    font-size: 0.66rem; font-weight: 700;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.rsm-tag--required { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }

.rsm-pill {
    display: inline-flex; align-items: center; gap: 0.2rem;
    font-size: 0.72rem; font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
}
.rsm-pill span.material-symbols-outlined { font-size: 0.9rem; }
.rsm-pill--score { background: #dcfce7; color: #166534; }
.rsm-pill--score b { font-weight: 800; font-size: 0.85rem; }
.rsm-pill--min { background: #fef3c7; color: #92400e; }
.rsm-pill--max { background: #fee2e2; color: #991b1b; }

.rsm-empty {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 2.5rem 1rem;
    background: #fff;
    border: 2px dashed #cbd5e1;
    border-radius: 0.5rem;
    color: #94a3b8;
    text-align: center;
}
.rsm-empty span.material-symbols-outlined { font-size: 3rem; margin-bottom: 0.5rem; }
.rsm-empty h5 { margin: 0; font-size: 1rem; font-weight: 700; color: #475569; }
.rsm-empty h6 { margin: 0.2rem 0 0 0; font-size: 0.85rem; color: #94a3b8; }


/* =============================================================================
   REVISIÓN DE SOLICITUDES (CV) · SolicitudComponent.vue (Vista de revisión)
   Componente:  resources/js/components/revision_solicitudes_cv/SolicitudComponent.vue
   Apartado:    Vista completa de revisión de una solicitud — header con avatar
                del médico + barra de progreso + acciones (aceptar/devolver/rechazar);
                body split (izquierda: tabs Capítulos/Observaciones con acordeón de
                registros; derecha: detalle con breadcrumb, status, descripción,
                tabla quirúrgica, acreditación verde, comprobante PDF, comentarios).
   Prefijo:     .rs-*  (limpio tras renombrar curriculum/ResumenComponent a .rsm-*)
   ============================================================================= */
.rs-shell {
    display: flex; flex-direction: column;
    width: 100%;
    height: 93vh;
    background: #f7fafd;
    box-sizing: border-box;
}
.rs-shell *, .rs-shell *::before, .rs-shell *::after { box-sizing: border-box; }

/* Header */
.rs-header {
    display: grid;
    grid-template-columns: auto 1fr minmax(15rem, 22rem) auto;
    align-items: stretch;
    gap: 1rem;
    padding: 0.8rem 1.2rem;
    background: #fff;
    border-bottom: 1px solid rgba(46, 92, 158, 0.18);
    flex-shrink: 0;
    position: relative;
}
.rs-progress { display: flex; flex-direction: column; justify-content: center; align-self: stretch; }
.rs-doctor {
    align-self: stretch;
    display: flex; align-items: center;
    background: #f7fafd;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.5rem;
    padding: 0.45rem 0.85rem;
    gap: 0.7rem;
    min-width: 0;
}
.rs-sol-actions { align-self: stretch; align-items: stretch; }
.rs-sol-item   { align-items: center; }
.rs-back-btn   { align-self: center; }
@media (max-width: 1500px) {
    .rs-header { grid-template-columns: auto 1fr; row-gap: 0.55rem; align-items: center; padding: 0.7rem 1rem; }
    .rs-progress, .rs-sol-actions { grid-column: 1 / -1; }
    .rs-doctor { width: 100%; }
}
@media (max-width: 992px) {
    .rs-header { position: sticky; top: 0; z-index: 30; padding: 0.65rem 0.85rem; box-shadow: 0 0.2rem 0.5rem rgba(26, 60, 110, 0.08); }
}
@media (max-width: 600px) {
    .rs-back-btn { padding: 0.45rem; gap: 0; font-size: 0; line-height: 0; }
    .rs-back-btn span.material-symbols-outlined { font-size: 1.25rem; }
    .rs-doctor { padding: 0.4rem 0.6rem; gap: 0.55rem; }
    .rs-doctor__avatar { width: 2.3rem; height: 2.3rem; }
    .rs-doctor__name { white-space: normal; overflow: hidden; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; font-size: 0.9rem; }
    .rs-doctor__sub { white-space: normal; overflow: hidden; text-overflow: clip; line-height: 1.25; font-size: 0.74rem; }
}

.rs-back-btn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.45rem 0.85rem;
    background: #f7fafd;
    color: #5a7a9a;
    border: 1px solid rgba(46, 92, 158, 0.25);
    border-radius: 0.4rem;
    font-weight: 600; font-size: 0.85rem;
    cursor: pointer;
    transition: 0.15s;
    font-family: inherit;
}
.rs-back-btn:hover { background: rgba(46, 92, 158, 0.08); color: #2e5c9e; border-color: #2e5c9e; }
.rs-back-btn span { font-size: 1.15rem; }

.rs-doctor__avatar {
    width: 2.6rem; height: 2.6rem;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(46, 92, 158, 0.18);
    flex-shrink: 0;
}
.rs-doctor__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rs-doctor__info { min-width: 0; }
.rs-doctor__name { margin: 0; font-size: 0.95rem; font-weight: 700; color: #1a3c6e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-doctor__sub { margin: 0.1rem 0 0 0; font-size: 0.78rem; color: #5a7a9a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Progress (barra de % de puntos vs mínimo requerido) */
.rs-progress {
    background: #f7fafd;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.5rem;
    padding: 0.5rem 0.85rem;
    --rs-pcolor: #94a3b8;
}
.rs-progress--start { --rs-pcolor: #ef4444; }
.rs-progress--low   { --rs-pcolor: #f97316; }
.rs-progress--mid   { --rs-pcolor: #eab308; }
.rs-progress--ok    { --rs-pcolor: var(--green, #269a1c); }
.rs-progress__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.3rem; }
.rs-progress__label { font-size: 0.7rem; font-weight: 700; color: #5a7a9a; text-transform: uppercase; letter-spacing: 0.04em; }
.rs-progress__values { font-size: 0.82rem; color: #1a3c6e; }
.rs-progress__values b { font-size: 0.95rem; color: var(--rs-pcolor); }
.rs-progress__values small { color: #5a7a9a; }
.rs-progress__pct { margin-left: 0.5rem; font-weight: 700; color: var(--rs-pcolor); font-size: 0.85rem; }
.rs-progress__bar { height: 0.45rem; background: rgba(46, 92, 158, 0.18); border-radius: 999px; overflow: hidden; }
.rs-progress__fill { height: 100%; background: var(--rs-pcolor); border-radius: 999px; transition: width 0.4s ease; }
.rs-progress__sub { display: inline-flex; align-items: center; gap: 0.25rem; margin: 0.35rem 0 0 0; font-size: 0.72rem; color: #5a7a9a; }
.rs-progress__sub span.material-symbols-outlined { font-size: 0.9rem; color: #94a3b8; }
.rs-progress__sub b { color: #5a7a9a; font-weight: 700; }

/* Acciones de solicitud (aceptar/devolver/rechazar) */
.rs-sol-actions { display: flex; align-items: stretch; gap: 0.35rem; flex-shrink: 0; flex-wrap: wrap; }
.rs-sol-item {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.65rem;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.45rem;
    cursor: pointer;
    transition: 0.15s;
    font-family: inherit;
    text-align: left;
}
.rs-sol-item:hover { background: #f7fafd; transform: translateY(-1px); box-shadow: 0 0.2rem 0.6rem rgba(0,0,0,0.06); }
.rs-sol-item > span.material-symbols-outlined {
    font-size: 1.1rem;
    flex-shrink: 0;
    padding: 0.15rem;
    border-radius: 50%;
    align-self: center;
}
.rs-sol-item--accept > span.material-symbols-outlined { background: #dcfce7; color: #166534; }
.rs-sol-item--return > span.material-symbols-outlined { background: #fef3c7; color: #92400e; }
.rs-sol-item--reject > span.material-symbols-outlined { background: #fee2e2; color: #991b1b; }
.rs-sol-item__title { margin: 0; font-size: 0.78rem; font-weight: 700; color: #1a3c6e; white-space: nowrap; line-height: 1.15; }
.rs-sol-item__text { margin: 0.1rem 0 0 0; font-size: 0.7rem; color: #5a7a9a; white-space: nowrap; display: none; }
.rs-sol-item__text--warn { display: block; color: #b45309; white-space: normal; }
.rs-sol-item--accept:hover { border-color: #86efac; }
.rs-sol-item--return:hover { border-color: #fcd34d; }
.rs-sol-item--reject:hover { border-color: #fca5a5; }
.rs-sol-item--disabled,
.rs-sol-item--disabled:hover {
    opacity: 0.55; cursor: not-allowed;
    border-color: rgba(46, 92, 158, 0.18);
    transform: none; box-shadow: none;
    background: #f7fafd;
}
.rs-sol-item--disabled > span.material-symbols-outlined { background: rgba(46, 92, 158, 0.18); color: #5a7a9a; }
@media (max-width: 992px) { .rs-sol-item__text { display: block; } }

/* Body split izquierda/derecha */
.rs-body { flex: 1 1 auto; display: flex; min-height: 0; overflow: hidden; }
.rs-list {
    flex: 0 0 35%;
    width: 35%; min-width: 35%; max-width: 35%;
    background: #fff;
    border-right: 1px solid rgba(46, 92, 158, 0.18);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.rs-tabs {
    display: flex;
    border-bottom: 1px solid rgba(46, 92, 158, 0.18);
    background: #fff;
    flex-shrink: 0;
}
.rs-tab {
    flex: 1 1 50%;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.3rem;
    padding: 0.7rem 0.4rem;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    color: #5a7a9a;
    font-weight: 600; font-size: 0.8rem;
    cursor: pointer;
    transition: 0.15s;
    font-family: inherit;
    position: relative;
}
.rs-tab:hover { color: #2e5c9e; background: #f7fafd; }
.rs-tab span.material-symbols-outlined { font-size: 1rem; }
.rs-tab--active { color: #2e5c9e; border-bottom-color: #2e5c9e; background: rgba(46, 92, 158, 0.06); }
.rs-tab__badge {
    background: #dc2626;
    color: #fff;
    font-size: 0.65rem; font-weight: 800;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    margin-left: 0.2rem;
}

.rs-list__scroll { flex: 1 1 auto; overflow-y: auto; padding: 0.7rem; min-height: 0; }

/* Capítulo acordeón (dentro de la lista de revisión, NO el del resumen .rsm-cap) */
.rs-cap {
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.4rem;
    background: #fff;
    margin-bottom: 0.5rem;
    overflow: hidden;
}
.rs-cap__head {
    display: flex; align-items: center; gap: 0.4rem;
    width: 100%;
    padding: 0.6rem 0.8rem;
    background: #fff;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: 0.15s;
}
.rs-cap__head:hover { background: #f7fafd; }
.rs-cap__caret { font-size: 1.2rem; color: #94a3b8; transition: transform 0.2s ease; }
.rs-cap__caret--open { transform: rotate(90deg); color: #2e5c9e; }
.rs-cap__title-wrap { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.rs-cap__title { margin: 0; flex: 1; font-size: 0.88rem; font-weight: 600; color: #1a3c6e; min-width: 0; }
.rs-cap__body {
    display: flex; flex-direction: column; gap: 0.4rem;
    padding: 0.4rem 0.6rem 0.6rem 1.4rem;
    border-top: 1px solid #f1f5f9;
    background: rgba(46, 92, 158, 0.04);
    max-height: 100rem;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease, border-top-color 0.2s;
}
.rs-cap__body--closed { max-height: 0; padding-top: 0; padding-bottom: 0; border-top-color: transparent; }

.rs-act { display: flex; flex-direction: column; gap: 0.25rem; }
.rs-act__name { margin: 0.3rem 0 0.2rem 0; font-size: 0.78rem; font-weight: 700; color: #2e5c9e; }

/* Registro clickable */
.rs-reg {
    display: flex; align-items: flex-start; gap: 0.4rem;
    width: 100%;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.35rem;
    padding: 0.45rem 0.6rem;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: 0.15s;
}
.rs-reg:hover { border-color: #2e5c9e; background: #f7fafd; }
.rs-reg--accepted { border-left: 3px solid var(--green, #269a1c); }
.rs-reg--rejected { border-left: 3px solid #dc2626; }
.rs-reg--pending  { border-left: 3px solid #f59e0b; }
.rs-reg--active { background: rgba(46, 92, 158, 0.12); border-color: #2e5c9e; box-shadow: 0 0 0 2px rgba(46, 92, 158, 0.15); }
.rs-reg__icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 0.05rem; }
.rs-reg--accepted .rs-reg__icon { color: var(--green, #269a1c); }
.rs-reg--rejected .rs-reg__icon { color: #dc2626; }
.rs-reg--pending  .rs-reg__icon { color: #d97706; }
.rs-reg__body { flex: 1; min-width: 0; }
.rs-reg__desc { margin: 0; font-size: 0.78rem; color: #334155; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rs-reg__chev { color: #cbd5e1; font-size: 1rem; align-self: center; }
.rs-reg:hover .rs-reg__chev { color: #2e5c9e; }

/* Mini chips (score, etc.) */
.rs-mini-chip {
    display: inline-flex; align-items: center;
    font-size: 0.66rem; font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #5a7a9a;
    margin-top: 0.2rem;
}
.rs-mini-chip--score { background: #dcfce7; color: #166534; }
.rs-mini-chip--score b { font-weight: 800; }
/* Tipos de actividad quirúrgica (A/B/C/D) en el listado del revisor de CV. */
.rs-mini-chip--surg { background: #eef2ff; color: #3730a3; }
.rs-reg__surg { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.15rem; }

/* Observaciones */
.rs-obs-item {
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
    border-radius: 0.4rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.5rem;
}
.rs-obs-item__text { margin: 0; font-size: 0.83rem; color: #713f12; line-height: 1.4; }
.rs-obs-item__date { display: inline-flex; align-items: center; gap: 0.2rem; margin-top: 0.3rem; font-size: 0.7rem; font-weight: 600; color: #92400e; opacity: 0.8; }
.rs-obs-item__date span { font-size: 0.85rem; }

/* Empty state (sidebar y detalle) */
.rs-empty {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 1.8rem 1rem;
    color: #94a3b8;
    text-align: center;
}
.rs-empty span.material-symbols-outlined { font-size: 2.5rem; margin-bottom: 0.4rem; }
.rs-empty h5 { font-size: 0.95rem; color: #5a7a9a; margin: 0; font-weight: 700; }
.rs-empty h6 { font-size: 0.8rem; color: #94a3b8; margin: 0.2rem 0 0 0; }
.rs-empty--small { padding: 1rem 0.6rem; }
.rs-empty--small span.material-symbols-outlined { font-size: 2rem; }

/* Detalle derecho */
.rs-detail { flex: 1 1 auto; min-width: 0; overflow-y: auto; background: #f7fafd; }
.rs-detail__empty {
    height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    color: #94a3b8;
    padding: 2rem;
}
.rs-detail__empty span.material-symbols-outlined { font-size: 3.5rem; margin-bottom: 0.7rem; color: #cbd5e1; }
.rs-detail__empty h3 { margin: 0; font-size: 1.05rem; color: #5a7a9a; }
.rs-detail__empty p { margin: 0.4rem 0 0 0; font-size: 0.9rem; color: #94a3b8; }
.rs-detail__inner { padding: 1rem 1.2rem 1.5rem 1.2rem; display: flex; flex-direction: column; gap: 0.85rem; }
.rs-detail__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }

/* Breadcrumb del registro seleccionado */
.rs-breadcrumb { display: flex; align-items: center; gap: 0.3rem; flex: 1; min-width: 0; flex-wrap: wrap; }
.rs-breadcrumb__cap { font-size: 0.85rem; color: #5a7a9a; font-weight: 500; }
.rs-breadcrumb__sep { font-size: 1rem; color: #cbd5e1; }
.rs-breadcrumb__act { font-size: 1rem; color: #2e5c9e; font-weight: 700; }

/* Status chip grande del detalle */
.rs-status {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.rs-status span { font-size: 1rem; }
.rs-status--accepted { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.rs-status--rejected { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.rs-status--pending  { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }

/* Meta pills (año, score) */
.rs-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.rs-pill {
    display: inline-flex; align-items: center; gap: 0.2rem;
    font-size: 0.75rem; font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
}
.rs-pill span.material-symbols-outlined { font-size: 0.95rem; }
.rs-pill--year { background: #f1f5f9; color: #5a7a9a; }
.rs-pill--score { background: #ecfdf5; color: #065f46; }
.rs-pill--score b { font-weight: 800; font-size: 0.85rem; }

/* Descripción */
.rs-desc {
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-left: 3px solid #2e5c9e;
    border-radius: 0.4rem;
    padding: 0.7rem 0.85rem;
}
.rs-desc__label { margin: 0 0 0.3rem 0; font-size: 0.7rem; font-weight: 700; color: #2e5c9e; text-transform: uppercase; letter-spacing: 0.05em; }
.rs-desc__text { margin: 0; font-size: 0.88rem; color: #334155; line-height: 1.5; white-space: pre-line; word-break: break-word; }

/* Tabla quirúrgica */
.rs-quir {
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-left: 3px solid #2e5c9e;
    border-radius: 0.4rem;
    padding: 0.7rem 0.85rem;
}
.rs-quir__title { margin: 0.3rem 0 0.6rem 0; font-size: 0.92rem; font-weight: 700; color: #1a3c6e; }
.rs-quir__table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.rs-quir__table th, .rs-quir__table td { padding: 0.4rem 0.5rem; text-align: center; border-bottom: 1px solid #f1f5f9; }
.rs-quir__table th { background: #f7fafd; font-weight: 700; color: #5a7a9a; font-size: 0.78rem; }
.rs-quir__table tbody td b { color: #166534; }
.rs-quir__badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.7rem; height: 1.7rem;
    border-radius: 0.3rem;
    color: #fff;
    font-weight: 800;
}
.rs-quir__badge--a { background: #6366f1; }
.rs-quir__badge--b { background: #0ea5e9; }
.rs-quir__badge--c { background: #f59e0b; }
.rs-quir__badge--d { background: #ef4444; }

/* Acreditación (verde) — input de puntos + aceptar/rechazar */
.rs-acred {
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 0.1rem 0.3rem rgba(0,0,0,0.04);
}
.rs-acred__head {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.65rem 0.9rem;
    background: linear-gradient(135deg, #f0fbef 0%, #dcfce7 100%);
    border-bottom: 1px solid #86efac;
}
.rs-acred__head h3 { margin: 0; flex: 1; font-size: 0.95rem; font-weight: 700; color: #166534; }
.rs-acred__head span { color: #166534; font-size: 1.25rem; }
.rs-acred__body { display: flex; align-items: flex-end; gap: 0.7rem; padding: 0.85rem 0.9rem; flex-wrap: wrap; }
.rs-acred__field { display: flex; flex-direction: column; gap: 0.3rem; flex: 0 0 auto; }
.rs-acred__field label { font-size: 0.75rem; font-weight: 700; color: #5a7a9a; text-transform: uppercase; letter-spacing: 0.04em; }
.rs-acred__input {
    width: 7rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(46, 92, 158, 0.25);
    border-radius: 0.4rem;
    font-size: 1.05rem; font-weight: 700;
    color: #1a3c6e;
    text-align: center;
    font-family: inherit;
}
.rs-acred__input:focus { outline: 0; border-color: #2e5c9e; box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.15); }
.rs-acred__btns { display: flex; gap: 0.5rem; flex: 1 1 auto; justify-content: flex-end; }
.rs-acred__btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.6rem 1.1rem;
    border-radius: 0.4rem;
    font-weight: 700; font-size: 0.88rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: 0.15s;
    font-family: inherit;
}
.rs-acred__btn span { font-size: 1.15rem; }
.rs-acred__btn:hover { transform: translateY(-1px); }
.rs-acred__btn--accept { background: var(--green, #269a1c); color: #fff; border-color: var(--green, #269a1c); box-shadow: 0 0.15rem 0.4rem rgba(38,154,28,0.25); }
.rs-acred__btn--accept:hover { filter: brightness(1.06); }
.rs-acred__btn--reject { background: #fff; color: #b91c1c; border-color: #fca5a5; }
.rs-acred__btn--reject:hover { background: #fee2e2; border-color: #dc2626; color: #991b1b; }
.rs-acred__btn--pending { background: #fff; color: #1a3c6e; border-color: #bcd0ea; }
.rs-acred__btn--pending:hover { background: #eaf0f8; border-color: #2e5c9e; color: #1a3c6e; }
.rs-acred__hint {
    display: block;
    margin: 0;
    padding: 0.5rem 0.9rem;
    background: #ecfdf5;
    color: #166534;
    font-size: 0.8rem;
    line-height: 1.5;
    border-top: 1px solid #d1fae5;
}
.rs-acred__hint span { font-size: 1rem; vertical-align: -0.15em; margin-right: 0.25rem; }
.rs-acred__hint--reject { background: #fee2e2; color: #991b1b; border-top-color: #fca5a5; }
.rs-acred__hint--pending { background: #eaf0f8; color: #1a3c6e; border-top-color: #bcd0ea; }

/* Aviso de comentario sin enviar al cambiar de actividad (modal propio del revisor CV) */
.rs-cwarn {
    position: fixed; inset: 0; z-index: 1080;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.rs-cwarn__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.5); }
.rs-cwarn__dialog {
    position: relative; z-index: 1;
    width: 100%; max-width: 34rem;
    background: #fff; border-radius: 0.85rem; overflow: hidden;
    box-shadow: 0 1rem 3rem rgba(15, 23, 42, 0.25);
    animation: rsCwarnIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes rsCwarnIn { 0% { opacity: 0; transform: translateY(1.5rem) scale(0.97); } 100% { opacity: 1; transform: none; } }
.rs-cwarn__close {
    position: absolute; top: 0.85rem; right: 0.85rem;
    width: 2rem; height: 2rem; border: none; cursor: pointer;
    background: rgba(255, 255, 255, 0.2); color: #fff; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; z-index: 2;
}
.rs-cwarn__close:hover { background: rgba(255, 255, 255, 0.35); }
.rs-cwarn__close .material-symbols-outlined { font-size: 1.15rem; }
.rs-cwarn__head {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%); color: #fff;
    padding: 1.1rem 1.4rem; display: flex; align-items: center; gap: 0.75rem;
}
.rs-cwarn__head .material-symbols-outlined { font-size: 1.6rem; }
.rs-cwarn__head h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: #fff; }
.rs-cwarn__body { padding: 1.35rem 1.4rem; }
.rs-cwarn__body p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: #334155; }
.rs-cwarn__foot {
    padding: 0.85rem 1.2rem; background: #f8fafc; border-top: 1px solid #e2e8ef;
    display: flex; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap;
}
.rs-cwarn__btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.55rem 1.05rem; border-radius: 0.45rem; cursor: pointer;
    font-size: 0.85rem; font-weight: 600; border: 1px solid transparent;
    transition: all 0.15s ease;
}
.rs-cwarn__btn .material-symbols-outlined { font-size: 1rem; }
.rs-cwarn__btn--ghost { background: #fff; color: #64748b; border-color: #cbd5e1; }
.rs-cwarn__btn--ghost:hover { background: #f1f5f9; color: #1a3c6e; }
.rs-cwarn__btn--send { background: #2e5c9e; color: #fff; }
.rs-cwarn__btn--send:hover { background: #1a3c6e; transform: translateY(-1px); }
@media (max-width: 560px) {
    .rs-cwarn__foot { flex-direction: column-reverse; align-items: stretch; }
    .rs-cwarn__btn { justify-content: center; }
}

/* Bottom grid: 60% PDF / 40% Acreditación + Comentarios */
.rs-bottom {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-template-areas:
        "compr acred"
        "compr coment";
    grid-template-rows: auto 1fr;
    gap: 0.85rem;
    align-items: start;
}
.rs-bottom__compr  { grid-area: compr; align-self: stretch; display: flex; flex-direction: column; }
.rs-bottom__acred  { grid-area: acred; }
.rs-bottom__coment { grid-area: coment; }
.rs-bottom__compr .rs-card__body--pdf { flex: 1 1 auto; }
@media (max-width: 1100px) {
    .rs-bottom {
        grid-template-columns: 1fr;
        grid-template-areas: "acred" "compr" "coment";
        grid-template-rows: auto auto auto;
    }
    .rs-bottom__compr { align-self: auto; }
}

/* Card genérica del detalle */
.rs-card {
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex; flex-direction: column;
}
.rs-card__head {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.6rem 0.85rem;
    background: #f7fafd;
    border-bottom: 1px solid rgba(46, 92, 158, 0.18);
}
.rs-card__head h3 { margin: 0; flex: 1; font-size: 0.88rem; font-weight: 700; color: #2e5c9e; }
.rs-card__head > span.material-symbols-outlined { color: #2e5c9e; font-size: 1.15rem; }
.rs-card__link {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.3rem 0.7rem;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 0.35rem;
    color: #5a7a9a;
    font-size: 0.75rem; font-weight: 600;
    text-decoration: none;
    transition: 0.15s;
}
.rs-card__link:hover { background: #f7fafd; border-color: #2e5c9e; color: #2e5c9e; }
.rs-card__link span { font-size: 0.95rem; }
.rs-card__badge {
    background: rgba(46, 92, 158, 0.12);
    color: #1a3c6e;
    font-size: 0.68rem; font-weight: 700;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
}
.rs-card__body { padding: 0.7rem; }
.rs-card__body--pdf {
    padding: 0;
    min-height: clamp(28rem, 52vh, 42rem);
    display: flex; flex-direction: column;
}
.rs-card__body--pdf embed {
    display: block;
    width: 100%;
    flex: 1 1 auto;
    min-height: clamp(28rem, 52vh, 42rem);
    background: #1e293b;
}
.rs-card__toggle {
    width: 1.7rem; height: 1.7rem;
    border: 0;
    background: transparent;
    border-radius: 50%;
    color: #5a7a9a;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: 0.15s;
    font-family: inherit;
}
.rs-card__toggle:hover { background: #f1f5f9; color: #2e5c9e; }
.rs-card__toggle span { font-size: 1.15rem; }
.rs-bottom__coment--min .rs-card__body { display: none !important; }

/* Comentarios */
.rs-comment-form { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.5rem; }
.rs-comment-form__input {
    width: 100%;
    border: 1px solid rgba(46, 92, 158, 0.25);
    border-radius: 0.4rem;
    padding: 0.45rem 0.65rem;
    font-family: inherit;
    font-size: 0.85rem;
    color: #1a3c6e;
    resize: vertical;
    min-height: 2.8rem;
}
.rs-comment-form__input:focus { outline: 0; border-color: #2e5c9e; box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.15); }
.rs-comment-form__btn {
    align-self: flex-end;
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.45rem 0.95rem;
    background: #2e5c9e;
    color: #fff;
    border: 0;
    border-radius: 0.4rem;
    font-weight: 600; font-size: 0.85rem;
    cursor: pointer;
    transition: 0.15s;
    font-family: inherit;
}
.rs-comment-form__btn:hover { filter: brightness(1.06); }
.rs-comment-form__btn span { font-size: 1.1rem; }

.rs-comment-list {
    height: clamp(8rem, 20vh, 14rem);
    overflow-y: auto;
    display: flex; flex-direction: column;
    gap: 0.35rem;
    padding-right: 0.3rem;
}
.rs-comment-list::-webkit-scrollbar { width: 6px; }
.rs-comment-list::-webkit-scrollbar-track { background: #f7fafd; border-radius: 3px; }
.rs-comment-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    border-radius: 3px;
}
.rs-comment-list::-webkit-scrollbar-thumb:hover { filter: brightness(1.1); }
.rs-comment-item {
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
    border-radius: 0.35rem;
    padding: 0.5rem 0.7rem;
}
.rs-comment-item__text { margin: 0; font-size: 0.83rem; color: #713f12; line-height: 1.4; }
.rs-comment-item__date { display: inline-flex; align-items: center; gap: 0.2rem; margin-top: 0.3rem; font-size: 0.7rem; font-weight: 600; color: #92400e; opacity: 0.85; }
.rs-comment-item__date span { font-size: 0.85rem; }

@media (max-width: 992px) {
    .rs-shell { height: auto; min-height: 93vh; overflow-y: auto; }
    .rs-body { flex-direction: column; overflow: visible; }
    .rs-list, .rs-detail { flex: 0 0 auto; width: 100%; max-width: 100%; min-width: 0; border-right: 0; }
    .rs-list { border-bottom: 1px solid rgba(46, 92, 158, 0.18); max-height: 50vh; }
    .rs-detail { overflow: visible; }
}



/* =============================================================================
   ACUSES · FatherComponent.vue
   Componente:  resources/js/components/acuses/FatherComponent.vue
   Apartado:    Shell del módulo de acuses
   Prefijo:     .acu-shell, .acu-content, .acu-main, .acu-aside, .acu-footer
   ============================================================================= */
.csj-shell__content.acu-content {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.acu-shell {
    display: grid;
    grid-template-columns: 4fr 6fr;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
@media (max-width: 1100px) {
    .acu-shell { grid-template-columns: 1fr; }
}

.acu-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    gap: 0.65rem;
}

.acu-list-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 0;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
    padding-right: 0.2rem;
}
.acu-list-wrap::-webkit-scrollbar { width: 0.6rem; }
.acu-list-wrap::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    border-radius: 999px;
}
.acu-list-wrap::-webkit-scrollbar-track { background: #f1f5f9; }

.acu-footer {
    flex-shrink: 0;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid rgba(46, 92, 158, 0.18);
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
    border-radius: 0.55rem;
    border: 1px solid rgba(46, 92, 158, 0.18);
}
.acu-footer .ms-paginate {
    margin: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

.acu-aside {
    min-width: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.acu-aside::-webkit-scrollbar { width: 0.6rem; }
.acu-aside::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    border-radius: 999px;
}


/* =============================================================================
   ACUSES · ListComponent.vue
   Componente:  resources/js/components/acuses/ListComponent.vue
   Apartado:    Listado de acuses
   Prefijo:     .acu-list*, .acu-row*, .acu-card*
   ============================================================================= */
.acu-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

/* ─── CARD ─── */
.acu-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.65rem;
    padding: 0.75rem 0.95rem 0.75rem 1.2rem;
    box-shadow: 0 1px 2px rgba(15, 28, 50, 0.04);
    transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    display: flex;
    flex-flow: column;
    gap: 0.55rem;
    min-width: 0;
}
.acu-card:hover {
    box-shadow: 0 0.4rem 1rem rgba(46, 92, 158, 0.14);
    border-color: rgba(46, 92, 158, 0.42);
    transform: translateY(-1px);
}
.acu-card::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0;
    width: 0.35rem;
    border-top-left-radius: 0.65rem; border-bottom-left-radius: 0.65rem;
}
.acu-card.is-ok::before        { background: linear-gradient(180deg, #22c55e, #16a34a); }
.acu-card.is-pending::before   { background: linear-gradient(180deg, #f59e0b, #d97706); }
.acu-card.is-cancelled::before { background: linear-gradient(180deg, #ef4444, #b91c1c); }

/* Header */
.acu-card__head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 0.7rem;
    flex-wrap: wrap;
}
.acu-card__folio {
    display: flex; align-items: center; gap: 0.55rem;
    flex: 1; min-width: 0;
}
.acu-card__icon {
    width: 2.2rem; height: 2.2rem;
    border-radius: 0.45rem;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: #fff;
}
.acu-card__icon .material-symbols-outlined { font-size: 1.2rem; }
.acu-card.is-ok .acu-card__icon {
    background: linear-gradient(135deg, #16a34a, #15803d);
    box-shadow: 0 0.15rem 0.4rem rgba(22, 163, 74, 0.25);
}
.acu-card.is-pending .acu-card__icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 0.15rem 0.4rem rgba(245, 158, 11, 0.25);
}
.acu-card.is-cancelled .acu-card__icon {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    box-shadow: 0 0.15rem 0.4rem rgba(239, 68, 68, 0.25);
}

.acu-card__folio-info {
    display: flex; flex-direction: column; gap: 0.05rem;
    min-width: 0;
}
.acu-card__folio-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.acu-card.is-ok .acu-card__folio-label { color: #166534; }
.acu-card.is-pending .acu-card__folio-label { color: #92400e; }
.acu-card.is-cancelled .acu-card__folio-label { color: #991b1b; }
.acu-card__folio-value {
    font-size: 0.95rem; font-weight: 700;
    color: #1a3c6e;
    line-height: 1.2;
    font-family: 'Merriweather', serif;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Acciones */
.acu-card__actions {
    display: flex; gap: 0.3rem; flex-shrink: 0;
}
.acu-card__btn {
    position: relative;
    width: 2.1rem; height: 2.1rem; border-radius: 0.45rem;
    border: 1px solid rgba(46, 92, 158, 0.22);
    background: #fff;
    color: #5a7a9a;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.18s ease;
    text-decoration: none;
}
.acu-card__btn .material-symbols-outlined { font-size: 1.1rem; }
.acu-card__btn:hover { transform: translateY(-1px); }
.acu-card__btn--pdf:hover {
    background: #d93025;
    color: #fff;
    border-color: #d93025;
    box-shadow: 0 0.2rem 0.45rem rgba(217, 48, 37, 0.25);
}
.acu-card__btn--view:hover {
    background: linear-gradient(135deg, #1a3c6e, #2e5c9e);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0.2rem 0.45rem rgba(26, 60, 110, 0.25);
}
.acu-card__tip {
    position: absolute;
    bottom: calc(100% + 0.35rem);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #1a3c6e;
    color: #fff;
    padding: 0.25rem 0.5rem;
    border-radius: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s, transform 0.18s;
    z-index: 5;
}
.acu-card__tip::after {
    content: '';
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #1a3c6e;
}
.acu-card__btn:hover .acu-card__tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* En la PRIMERA tarjeta el tooltip (que aparece ARRIBA) se cortaba contra el
   borde superior del panel. Solo en la primera se muestra ABAJO del botón, con
   la flechita apuntando hacia arriba. */
.acu-card:first-child .acu-card__tip {
    bottom: auto;
    top: calc(100% + 0.35rem);
    transform: translateX(-50%) translateY(-4px);
}
.acu-card:first-child .acu-card__tip::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #1a3c6e;
}
.acu-card:first-child .acu-card__btn:hover .acu-card__tip {
    transform: translateX(-50%) translateY(0);
}

/* Fecha de envío */
.acu-card__sent {
    margin: 0;
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.78rem;
    color: #5a7a9a;
}
.acu-card__sent .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; }
.acu-card__sent b { color: #1a3c6e; }

/* Data: Tipos / Procesos */
.acu-card__data {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem 0.85rem;
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(46, 92, 158, 0.22);
}
@media (min-width: 540px) {
    .acu-card__data { grid-template-columns: 1fr 1fr; }
}
.acu-card__col {
    display: flex; flex-direction: column; gap: 0.3rem;
    min-width: 0;
    overflow: hidden;
}
.acu-card__col-label {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.7rem; font-weight: 700;
    color: #5a7a9a;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.acu-card__col-label .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; }

.acu-card__tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.acu-tag {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.2rem 0.5rem 0.2rem 0.55rem;
    font-size: 0.74rem; font-weight: 600;
    border-radius: 0.35rem;
    border: 1px solid transparent;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.acu-tag b {
    background: rgba(255, 255, 255, 0.55);
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
}
.acu-tag--tipo {
    background: linear-gradient(135deg, #e8f1fc, #d0e1f7);
    color: #1a3c6e; border-color: rgba(46, 92, 158, 0.22);
}
.acu-tag--proc {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e; border-color: rgba(146, 64, 14, 0.22);
}

/* Empty */
.acu-empty {
    background: #fff;
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.65rem;
    padding: 2.5rem 1rem; text-align: center; color: #5a7a9a;
}
.acu-empty .material-symbols-outlined { font-size: 3rem; color: rgba(46, 92, 158, 0.5); }
.acu-empty h5 { margin: 0.5rem 0 0.2rem; font-weight: 700; color: #1a3c6e; font-size: 1rem; }
.acu-empty p { margin: 0; font-size: 0.85rem; }


/* =============================================================================
   ACUSES · FormComponent.vue
   Componente:  resources/js/components/acuses/FormComponent.vue
   Apartado:    Detalle/form de acuse
   Prefijo:     .acu-detail*, .acu-form*
   ============================================================================= */
.acu-detail {
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(15, 28, 50, 0.06);
    overflow: hidden;
    display: flex; flex-direction: column;
    height: 100%;
}

.acu-detail__head {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    border-bottom: 1px solid rgba(15, 28, 50, 0.18);
    position: relative;
}
.acu-detail__head::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #d4af37 40%, #d4af37 60%, transparent 100%);
    opacity: 0.85;
}
.acu-detail__head-icon {
    width: 2.2rem; height: 2.2rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.18);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.acu-detail__head-icon .material-symbols-outlined { font-size: 1.2rem; }
.acu-detail__head h4 {
    margin: 0;
    font-size: 0.92rem; font-weight: 700;
    color: #fff;
    font-family: 'Merriweather', serif;
}
.acu-detail__head p {
    margin: 0.1rem 0 0;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.78);
}

/* Empty state */
.acu-detail__empty {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.3rem;
    text-align: center;
    padding: 2rem 1rem;
    color: #5a7a9a;
}
.acu-detail__empty .material-symbols-outlined {
    font-size: 2.5rem;
    color: rgba(46, 92, 158, 0.4);
}
.acu-detail__empty h5 {
    margin: 0.4rem 0 0;
    font-weight: 700;
    color: #1a3c6e;
    font-size: 0.95rem;
}
.acu-detail__empty p {
    margin: 0;
    font-size: 0.78rem;
    max-width: 18rem;
    line-height: 1.4;
}

/* Lista */
.acu-detail__list {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 0.85rem;
    display: flex; flex-direction: column; gap: 0.55rem;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.acu-detail__list::-webkit-scrollbar { width: 0.5rem; }
.acu-detail__list::-webkit-scrollbar-thumb {
    background: rgba(46, 92, 158, 0.4);
    border-radius: 999px;
}

/* Card de médico (Dashboard) */
.acu-doc {
    position: relative;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.6rem;
    padding: 0.7rem 0.8rem 0.7rem 1rem;
    display: flex; flex-direction: column; gap: 0.55rem;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.acu-doc:hover {
    border-color: rgba(46, 92, 158, 0.42);
    box-shadow: 0 0.25rem 0.6rem rgba(46, 92, 158, 0.1);
}
.acu-doc::before {
    content: '';
    position: absolute; top: 0; left: 0; bottom: 0;
    width: 0.3rem;
    border-top-left-radius: 0.6rem; border-bottom-left-radius: 0.6rem;
    background: linear-gradient(180deg, #1a3c6e, #2e5c9e);
}
.acu-doc.is-warn::before {
    background: linear-gradient(180deg, #ef4444, #b91c1c);
}

/* Header: avatar + nombre + chip tipo */
.acu-doc__head {
    display: flex; align-items: center; gap: 0.55rem;
    flex-wrap: wrap;
}
.acu-doc__icon {
    width: 1.9rem; height: 1.9rem;
    border-radius: 0.4rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0.1rem 0.3rem rgba(26, 60, 110, 0.25);
}
.acu-doc__icon .material-symbols-outlined { font-size: 1.05rem; }
.acu-doc__name {
    flex: 1; min-width: 0;
    margin: 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: #1a3c6e;
    line-height: 1.3;
    word-break: break-word;
    font-family: 'Merriweather', serif;
}
.acu-doc.is-warn .acu-doc__name { color: #991b1b; }
.acu-doc__chip-tipo {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
    color: #6a1b9a;
    border: 1px solid rgba(106, 27, 154, 0.22);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.acu-doc__chip-tipo .material-symbols-outlined { font-size: 0.85rem; flex-shrink: 0; }

/* Bloque sub-tarjeta común */
.acu-doc__block {
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.45rem;
    padding: 0.5rem 0.65rem;
    display: flex; flex-direction: column; gap: 0.4rem;
}
.acu-doc__block-label {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.66rem;
    color: #5a7a9a;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}
.acu-doc__block-label .material-symbols-outlined {
    font-size: 0.85rem;
    color: #2e5c9e;
}

/* Certificado: número grande + libro/foja inline */
.acu-doc__cert {
    display: flex; align-items: center; gap: 0.55rem;
    flex-wrap: wrap;
}
.acu-doc__cert-num {
    display: inline-flex; align-items: center;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    padding: 0.3rem 0.65rem;
    border-radius: 0.4rem;
    font-size: 0.95rem;
    font-weight: 800;
    font-family: 'Consolas', monospace;
    letter-spacing: 0.04em;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.3);
    word-break: break-word;
}
.acu-doc__cert-num--muted {
    background: #f1f5f9;
    color: #94a3b8;
    box-shadow: none;
}
.acu-doc__cert-extra {
    display: flex; flex-wrap: wrap; gap: 0.3rem;
    flex: 1; min-width: 0;
}
.acu-doc__pill {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.2);
    border-radius: 0.35rem;
    font-size: 0.72rem;
    color: #5a7a9a;
    font-weight: 500;
}
.acu-doc__pill .material-symbols-outlined { font-size: 0.85rem; color: #2e5c9e; }
.acu-doc__pill b { color: #1a3c6e; font-weight: 700; margin-left: 0.15rem; }

/* Vigencia: 3 fechas en grid */
.acu-doc__dates {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
}
.acu-doc__date {
    display: flex; flex-direction: column; gap: 0.1rem;
    min-width: 0;
    padding: 0.3rem 0.4rem;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.15);
    border-radius: 0.35rem;
}
.acu-doc__date-lbl {
    display: inline-flex; align-items: center; gap: 0.2rem;
    font-size: 0.6rem;
    color: #5a7a9a;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.acu-doc__date-lbl .material-symbols-outlined { font-size: 0.8rem; color: #2e5c9e; }
.acu-doc__date b {
    color: #1a3c6e;
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Especialidad + proceso (dentro del bloque Certificado) */
.acu-doc__acad {
    display: flex; flex-direction: column; gap: 0.25rem;
    padding-top: 0.35rem;
    border-top: 1px dashed rgba(46, 92, 158, 0.2);
}
.acu-doc__row {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.8rem;
    color: #2c3e50;
    line-height: 1.35;
}
.acu-doc__row .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; flex-shrink: 0; }
.acu-doc__row b { color: #1a3c6e; font-weight: 700; }

/* Firmas: 2 columnas */
.acu-doc__signs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.acu-doc__sign {
    display: flex; flex-direction: column; gap: 0.15rem;
    min-width: 0;
    padding: 0.35rem 0.5rem;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.15);
    border-radius: 0.35rem;
}
.acu-doc__sign-lbl {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.62rem;
    color: #5a7a9a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}
.acu-doc__sign-lbl .material-symbols-outlined { font-size: 0.85rem; color: #2e5c9e; }
.acu-doc__sign-val {
    color: #1a3c6e;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
    word-break: break-word;
}

/* En anchos muy reducidos las firmas se apilan */
@media (max-width: 420px) {
    .acu-doc__signs { grid-template-columns: 1fr; }
    .acu-doc__dates { grid-template-columns: 1fr 1fr; }
}

/* Observaciones */
.acu-doc__notice {
    display: flex; align-items: flex-start; gap: 0.35rem;
    padding: 0.45rem 0.55rem;
    background: #fdecea;
    border: 1px solid rgba(197, 34, 31, 0.25);
    border-radius: 0.4rem;
    font-size: 0.76rem;
    line-height: 1.4;
    color: #991b1b;
}
.acu-doc__notice .material-symbols-outlined {
    font-size: 0.95rem;
    color: #c5221f;
    flex-shrink: 0; margin-top: 0.05rem;
}
.acu-doc__notice b { font-weight: 700; }


/* =============================================================================
   ASOCIACIONES · FatherComponent.vue
   Componente:  resources/js/components/asociaciones/FatherComponent.vue
   Apartado:    Shell del módulo de asociaciones
   Prefijo:     .aso-shell, .aso-content
   ============================================================================= */
.csj-shell__content.aso-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.aso-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.85rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.aso-scroll::-webkit-scrollbar { width: 0.6rem; }
.aso-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    border-radius: 999px;
}
.aso-scroll::-webkit-scrollbar-track { background: #f1f5f9; }

.aso-footer {
    flex-shrink: 0;
    padding: 0.65rem 1rem;
    border-top: 1px solid rgba(46, 92, 158, 0.18);
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
}
.aso-footer .ms-paginate {
    margin-top: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}


/* =============================================================================
   ASOCIACIONES · ListComponent.vue
   Componente:  resources/js/components/asociaciones/ListComponent.vue
   Apartado:    Listado de asociaciones
   Prefijo:     .aso-list*, .aso-row*
   ============================================================================= */
.aso-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 900px) {
    .aso-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1400px) {
    .aso-list { grid-template-columns: repeat(3, 1fr); }
}

/* ─── CARD ─────────────────────────────────────── */
.aso-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.7rem;
    padding: 0.85rem 1rem 0.85rem 1.2rem;
    box-shadow: 0 1px 2px rgba(15, 28, 50, 0.04);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-flow: column;
    gap: 0.6rem;
}
.aso-card:hover {
    box-shadow: 0 0.4rem 1rem rgba(46, 92, 158, 0.14);
    border-color: rgba(46, 92, 158, 0.42);
    transform: translateY(-1px);
}
.aso-card::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0;
    width: 0.35rem;
    border-top-left-radius: 0.7rem; border-bottom-left-radius: 0.7rem;
    background: linear-gradient(180deg, #1a3c6e, #2e5c9e);
}
.aso-card.norte::before  { background: linear-gradient(180deg, #2563eb, #1d4ed8); }
.aso-card.centro::before { background: linear-gradient(180deg, #f59e0b, #d97706); }
.aso-card.sur::before    { background: linear-gradient(180deg, #16a34a, #15803d); }

/* Header */
.aso-card__head {
    display: flex; align-items: flex-start; gap: 0.7rem;
}
.aso-card__icon {
    width: 2.4rem; height: 2.4rem; border-radius: 0.55rem;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.25);
}
.aso-card__icon .material-symbols-outlined { font-size: 1.3rem; }
.aso-card.norte .aso-card__icon  { background: linear-gradient(135deg, #2563eb, #1d4ed8); box-shadow: 0 0.15rem 0.4rem rgba(37, 99, 235, 0.25); }
.aso-card.centro .aso-card__icon { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 0.15rem 0.4rem rgba(245, 158, 11, 0.25); }
.aso-card.sur .aso-card__icon    { background: linear-gradient(135deg, #16a34a, #15803d); box-shadow: 0 0.15rem 0.4rem rgba(22, 163, 74, 0.25); }

.aso-card__title {
    flex: 1; min-width: 0;
    margin: 0; font-size: 0.95rem; font-weight: 700; color: #1a3c6e;
    line-height: 1.3; font-family: 'Merriweather', serif;
    word-break: break-word;
}
.aso-card__actions { display: flex; gap: 0.3rem; flex-shrink: 0; }
.aso-card__btn {
    position: relative;
    width: 2.1rem; height: 2.1rem; border-radius: 0.45rem;
    border: 1px solid rgba(46, 92, 158, 0.22); background: #fff; color: #5a7a9a;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: all 0.18s ease;
}
.aso-card__btn .material-symbols-outlined { font-size: 1.1rem; }
.aso-card__btn:hover { transform: translateY(-1px); }
.aso-card__btn--edit:hover { background: linear-gradient(135deg, #1a3c6e, #2e5c9e); color: #fff; border-color: transparent; box-shadow: 0 0.2rem 0.45rem rgba(26, 60, 110, 0.25); }
.aso-card__btn--del:hover  { background: #d93025; color: #fff; border-color: #d93025; box-shadow: 0 0.2rem 0.45rem rgba(217, 48, 37, 0.25); }

.aso-card__tip {
    position: absolute;
    bottom: calc(100% + 0.35rem);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #1a3c6e; color: #fff;
    padding: 0.25rem 0.5rem;
    border-radius: 0.3rem;
    font-size: 0.7rem; font-weight: 600; white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity 0.18s, transform 0.18s;
    z-index: 5;
}
.aso-card__tip::after {
    content: '';
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #1a3c6e;
}
.aso-card__btn:hover .aso-card__tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Indicadores */
.aso-card__indicators {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
}
.aso-indicator {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem; font-weight: 600;
    border-radius: 999px;
    border: 1px solid transparent;
    text-decoration: none;
}
.aso-indicator .material-symbols-outlined { font-size: 0.9rem; }
.aso-indicator--info {
    background: #e8f1fc; color: #1a3c6e; border-color: rgba(46, 92, 158, 0.22);
}
.aso-indicator--muted {
    background: #f1f5f9; color: #64748b; border-color: #e2e8ef;
}
.aso-indicator--norte {
    background: #dbeafe; color: #1d4ed8; border-color: rgba(29, 78, 216, 0.22);
}
.aso-indicator--centro {
    background: #fef3c7; color: #92400e; border-color: rgba(146, 64, 14, 0.22);
}
.aso-indicator--sur {
    background: #dcfce7; color: #166534; border-color: rgba(22, 101, 52, 0.22);
}
.aso-indicator--unknown {
    background: #f1f5f9; color: #64748b; border-color: #e2e8ef;
}
.aso-indicator--link {
    background: #e8f1fc;
    color: #1a3c6e;
    border-color: rgba(46, 92, 158, 0.32);
    cursor: pointer;
    transition: all 0.18s ease;
}
.aso-indicator--link:hover {
    background: linear-gradient(135deg, #1a3c6e, #2e5c9e);
    color: #fff; border-color: transparent;
    box-shadow: 0 0.15rem 0.35rem rgba(26, 60, 110, 0.3);
    text-decoration: none;
    transform: translateY(-1px);
}

/* Empty state */
.aso-empty {
    grid-column: 1 / -1;
    background: #fff;
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.65rem;
    padding: 2.5rem 1rem; text-align: center; color: #5a7a9a;
}
.aso-empty .material-symbols-outlined { font-size: 3rem; color: rgba(46, 92, 158, 0.5); }
.aso-empty h5 { margin: 0.5rem 0 0.2rem; font-weight: 700; color: #1a3c6e; font-size: 1rem; }
.aso-empty p { margin: 0; font-size: 0.85rem; }
.aso-empty p b { color: #1a3c6e; }


/* =============================================================================
   ASOCIACIONES · FormComponent.vue
   Componente:  resources/js/components/asociaciones/FormComponent.vue
   Apartado:    Form de asociación
   Prefijo:     .aso-form*
   ============================================================================= */
.aso-form__hint {
    margin: 0 0 0.55rem 0;
    display: flex; align-items: flex-start; gap: 0.4rem;
    font-size: 0.78rem; line-height: 1.45;
    color: #1a3c6e;
    background: rgba(46, 92, 158, 0.07);
    border: 1px solid rgba(46, 92, 158, 0.2);
    border-radius: 0.45rem;
    padding: 0.55rem 0.7rem;
}
.aso-form__hint .material-symbols-outlined { font-size: 1rem; color: #2e5c9e; flex-shrink: 0; margin-top: 0.05rem; }

.aso-form__regions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.5rem;
}

.aso-form__region {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0.85rem;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.22);
    border-radius: 0.5rem;
    font-size: 0.88rem;
    color: #2c3e50;
    cursor: pointer;
    transition: all 0.18s ease;
    margin: 0;
    user-select: none;
}
.aso-form__region input[type="radio"] {
    position: absolute;
    top: 0; left: 0;
    opacity: 0;
    width: 1px; height: 1px;
    pointer-events: none;
    margin: 0;
}

.aso-form__region-icon {
    width: 2rem; height: 2rem;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(46, 92, 158, 0.08);
    color: #2e5c9e;
    font-size: 1.1rem !important;
    flex-shrink: 0;
    transition: all 0.18s ease;
}
.aso-form__region-name {
    flex: 1;
    color: #1a3c6e;
    font-weight: 600;
}

.aso-form__region:hover {
    border-color: rgba(46, 92, 158, 0.45);
    background: rgba(46, 92, 158, 0.04);
}

.aso-form__region.is-selected {
    background: linear-gradient(135deg, rgba(46, 92, 158, 0.08), rgba(46, 92, 158, 0.14));
    border-color: rgba(46, 92, 158, 0.55);
    box-shadow: 0 0.15rem 0.35rem rgba(26, 60, 110, 0.18);
}

/* Colores por región seleccionada */
.aso-form__region--norte.is-selected {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(37, 99, 235, 0.16));
    border-color: rgba(37, 99, 235, 0.55);
    box-shadow: 0 0.15rem 0.35rem rgba(37, 99, 235, 0.2);
}
.aso-form__region--norte.is-selected .aso-form__region-icon {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
}
.aso-form__region--norte.is-selected .aso-form__region-name { color: #1d4ed8; }

.aso-form__region--centro.is-selected {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.18));
    border-color: rgba(245, 158, 11, 0.55);
    box-shadow: 0 0.15rem 0.35rem rgba(245, 158, 11, 0.2);
}
.aso-form__region--centro.is-selected .aso-form__region-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
}
.aso-form__region--centro.is-selected .aso-form__region-name { color: #92400e; }

.aso-form__region--sur.is-selected {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.08), rgba(22, 163, 74, 0.16));
    border-color: rgba(22, 163, 74, 0.55);
    box-shadow: 0 0.15rem 0.35rem rgba(22, 163, 74, 0.2);
}
.aso-form__region--sur.is-selected .aso-form__region-icon {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #fff;
}
.aso-form__region--sur.is-selected .aso-form__region-name { color: #166534; }


/* =============================================================================
   AVISOS · FatherComponent.vue
   Componente:  resources/js/components/avisos/FatherComponent.vue
   Apartado:    Shell del módulo de avisos
   Prefijo:     .csj-shell__content, .avi-*
   ============================================================================= */
/* Layout específico: listado scrolleable + paginador fijo abajo */
.csj-shell__content.avisos-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.avisos-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.85rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.avisos-scroll::-webkit-scrollbar { width: 0.6rem; }
.avisos-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    border-radius: 999px;
}
.avisos-scroll::-webkit-scrollbar-track { background: #f1f5f9; }

.avisos-footer {
    flex-shrink: 0;
    padding: 0.65rem 1rem;
    border-top: 1px solid rgba(46, 92, 158, 0.18);
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
}
.avisos-footer .ms-paginate {
    margin-top: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}


/* =============================================================================
   AVISOS · ListComponent.vue
   Componente:  resources/js/components/avisos/ListComponent.vue
   Apartado:    Cards de avisos con border-left por severidad
   Prefijo:     .ms-list, .ms-card*
   ============================================================================= */
.ms-list {
    display: flex; flex-direction: column; gap: 0.75rem;
}

/* ─── CARD ───────────────────────────────────────── */
.ms-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.65rem;
    padding: 0.9rem 1rem 0.9rem 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 28, 50, 0.04);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.ms-card:hover {
    box-shadow: 0 0.4rem 1rem rgba(46, 92, 158, 0.14);
    border-color: rgba(46, 92, 158, 0.42);
    transform: translateY(-1px);
}
.ms-card::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0;
    width: 0.35rem;
    border-top-left-radius: 0.65rem; border-bottom-left-radius: 0.65rem;
    background: linear-gradient(180deg, #1a3c6e, #2e5c9e);
}
.ms-card--ok::before      { background: linear-gradient(180deg, #22c55e, #16a34a); }
.ms-card--warn::before    { background: linear-gradient(180deg, #f59e0b, #d97706); }
.ms-card--bad::before     { background: linear-gradient(180deg, #ef4444, #b91c1c); }
.ms-card--neutral::before { background: linear-gradient(180deg, #cbd5e1, #94a3b8); }

.ms-card__head {
    display: flex; align-items: flex-start; gap: 0.7rem;
    margin-bottom: 0.55rem;
}
.ms-card__icon {
    width: 2.4rem; height: 2.4rem; border-radius: 0.55rem;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    background: linear-gradient(135deg, #e8f1fc, #d0e1f7);
    color: #1a3c6e;
    box-shadow: inset 0 0 0 1px rgba(46, 92, 158, 0.15);
}
.ms-card__icon .material-symbols-outlined { font-size: 1.3rem; }
.ms-card__icon.is-ok      { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #166534; box-shadow: inset 0 0 0 1px rgba(22, 101, 52, 0.18); }
.ms-card__icon.is-warn    { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; box-shadow: inset 0 0 0 1px rgba(146, 64, 14, 0.18); }
.ms-card__icon.is-bad     { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #991b1b; box-shadow: inset 0 0 0 1px rgba(153, 27, 27, 0.18); }
.ms-card__icon.is-neutral { background: linear-gradient(135deg, #f1f5f9, #e2e8ef); color: #475569; box-shadow: inset 0 0 0 1px rgba(71, 85, 105, 0.18); }

.ms-card__title-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.ms-card__title {
    margin: 0; font-size: 0.98rem; font-weight: 700; color: #1a3c6e; line-height: 1.3;
    font-family: 'Merriweather', serif;
}
.ms-card__actions {
    display: flex; gap: 0.3rem; flex-shrink: 0;
}
.ms-card__btn {
    position: relative;
    width: 2.1rem; height: 2.1rem; border-radius: 0.45rem;
    border: 1px solid rgba(46, 92, 158, 0.22); background: #fff; color: #5a7a9a;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: all 0.18s ease;
}
.ms-card__btn .material-symbols-outlined { font-size: 1.1rem; }
.ms-card__btn:hover { transform: translateY(-1px); }
.ms-card__btn--edit:hover { background: linear-gradient(135deg, #1a3c6e, #2e5c9e); color: #fff; border-color: transparent; box-shadow: 0 0.2rem 0.45rem rgba(26, 60, 110, 0.25); }
.ms-card__btn--del:hover  { background: #d93025; color: #fff; border-color: #d93025; box-shadow: 0 0.2rem 0.45rem rgba(217, 48, 37, 0.25); }

.ms-card__tip {
    position: absolute;
    bottom: calc(100% + 0.35rem);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #1a3c6e;
    color: #fff;
    padding: 0.25rem 0.5rem;
    border-radius: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s, transform 0.18s;
    z-index: 5;
}
.ms-card__tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #1a3c6e;
}
.ms-card__btn:hover .ms-card__tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.ms-card__desc {
    margin: 0; font-size: 0.85rem; color: #2c3e50; line-height: 1.55;
    white-space: pre-line;
}

/* ─── CHIPS ──────────────────────────────────────── */
.ms-chip {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.6rem; border-radius: 999px;
    font-size: 0.7rem; font-weight: 700; white-space: nowrap;
    text-transform: uppercase; letter-spacing: 0.03em;
    border: 1px solid transparent; width: max-content;
}
.ms-chip .material-symbols-outlined { font-size: 0.85rem; }
.ms-chip--ok      { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.ms-chip--warn    { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.ms-chip--bad     { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.ms-chip--neutral { background: #f1f5f9; color: #475569; border-color: #e2e8ef; }

/* ─── EMPTY ──────────────────────────────────────── */
.ms-empty {
    background: #fff;
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.65rem;
    padding: 2.5rem 1rem; text-align: center; color: #5a7a9a;
}
.ms-empty .material-symbols-outlined { font-size: 3rem; color: rgba(46, 92, 158, 0.5); }
.ms-empty h5 { margin: 0.5rem 0 0.2rem; font-weight: 700; color: #1a3c6e; font-size: 1rem; }
.ms-empty p { margin: 0; font-size: 0.85rem; }
.ms-empty p b { color: #1a3c6e; }


/* =============================================================================
   BITÁCORA · FatherComponent.vue
   Componente:  resources/js/components/bitacora/FatherComponent.vue
   Apartado:    Shell del módulo de bitácora
   Prefijo:     .bit-shell, .bit-content
   ============================================================================= */
.csj-shell__content.bit-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.bit-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.85rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.bit-scroll::-webkit-scrollbar { width: 0.6rem; }
.bit-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    border-radius: 999px;
}
.bit-scroll::-webkit-scrollbar-track { background: #f1f5f9; }

.bit-footer {
    flex-shrink: 0;
    padding: 0.65rem 1rem;
    border-top: 1px solid rgba(46, 92, 158, 0.18);
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
}
.bit-footer .ms-paginate {
    margin-top: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}


/* =============================================================================
   BITÁCORA · ListComponent.vue
   Componente:  resources/js/components/bitacora/ListComponent.vue
   Apartado:    Listado de bitácora
   Prefijo:     .bit-list*, .bit-row*
   ============================================================================= */
.bit-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    position: relative;
    padding-left: 1.2rem;
}
.bit-list::before {
    content: "";
    position: absolute;
    top: 0.6rem;
    bottom: 0.6rem;
    left: 0.4rem;
    width: 2px;
    background: linear-gradient(180deg, rgba(46, 92, 158, 0.5), rgba(46, 92, 158, 0.1));
    border-radius: 2px;
}

/* ─── ITEM ─────────────────────────────────────── */
.bit-item {
    position: relative;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.6rem;
    padding: 0.75rem 0.95rem;
    box-shadow: 0 1px 2px rgba(15, 28, 50, 0.04);
    transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.bit-item:hover {
    box-shadow: 0 0.4rem 1rem rgba(46, 92, 158, 0.14);
    border-color: rgba(46, 92, 158, 0.42);
    transform: translateX(2px);
}
.bit-item::before {
    content: "";
    position: absolute;
    top: 1rem;
    left: -1rem;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: #2e5c9e;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px rgba(46, 92, 158, 0.35);
}

/* ─── META ─────────────────────────────────────── */
.bit-item__meta {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    padding-bottom: 0.45rem;
    border-bottom: 1px dashed rgba(46, 92, 158, 0.22);
}
.bit-item__usuario,
.bit-item__fecha {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.78rem; color: #5a7a9a; font-weight: 500;
}
.bit-item__usuario .material-symbols-outlined,
.bit-item__fecha .material-symbols-outlined {
    font-size: 1rem; color: #2e5c9e;
}
.bit-item__usuario {
    color: #1a3c6e;
    font-weight: 700;
}
.bit-item__app {
    display: inline-flex; align-items: center; gap: 0.25rem;
    margin-left: auto;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    border: 1px solid transparent;
}
.bit-item__app .material-symbols-outlined { font-size: 0.9rem; }
.bit-item__app--sigme {
    background: #e8f1fc; color: #1a3c6e; border-color: rgba(46, 92, 158, 0.22);
}
.bit-item__app--atum {
    background: #e7f6ec; color: #166534; border-color: rgba(22, 101, 52, 0.22);
}
.bit-item__app--admin {
    background: #fff4e3; color: #92400e; border-color: rgba(146, 64, 14, 0.22);
}
.bit-item__app--default {
    background: #f1f5f9; color: #475569; border-color: #e2e8ef;
}

/* ─── DESCRIPCIÓN ──────────────────────────────── */
.bit-item__desc {
    margin: 0;
    font-size: 0.88rem;
    color: #2c3e50;
    line-height: 1.5;
    white-space: pre-line;
}

/* ─── DATOS REGISTRADOS ────────────────────────── */
.bit-item__data {
    background: rgba(46, 92, 158, 0.04);
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.45rem;
    padding: 0.55rem 0.7rem;
    display: flex; flex-direction: column; gap: 0.35rem;
}
.bit-item__data-label {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.7rem; font-weight: 700;
    color: #5a7a9a; text-transform: uppercase; letter-spacing: 0.05em;
}
.bit-item__data-label .material-symbols-outlined {
    font-size: 0.95rem; color: #2e5c9e;
}

.bit-item__data-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex; flex-direction: column; gap: 0.25rem;
}
.bit-item__data-row {
    display: flex; flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: #2c3e50;
    line-height: 1.4;
}
.bit-item__data-field {
    color: #1a3c6e;
    font-weight: 700;
    text-transform: capitalize;
}
.bit-item__data-field::after { content: ":"; }
.bit-item__data-value {
    color: #2c3e50;
    word-break: break-word;
}

/* Diff: anterior → nuevo */
.bit-item__diff {
    display: inline-flex; align-items: center; flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.78rem;
}
.bit-item__diff-old,
.bit-item__diff-new {
    display: inline-flex; align-items: center; gap: 0.2rem;
    padding: 0.12rem 0.45rem;
    border-radius: 0.3rem;
    font-weight: 600;
    border: 1px solid transparent;
}
.bit-item__diff-old .material-symbols-outlined,
.bit-item__diff-new .material-symbols-outlined { font-size: 0.85rem; }
.bit-item__diff-old {
    background: #fdecea; color: #c5221f; border-color: rgba(197, 34, 31, 0.22);
    text-decoration: line-through;
    text-decoration-color: rgba(197, 34, 31, 0.55);
}
.bit-item__diff-new {
    background: #e7f6ec; color: #166534; border-color: rgba(22, 101, 52, 0.22);
}
.bit-item__diff-arrow {
    color: #2e5c9e;
    font-size: 1rem !important;
}

/* ─── EMPTY ────────────────────────────────────── */
.bit-empty {
    background: #fff;
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.65rem;
    padding: 2.5rem 1rem; text-align: center; color: #5a7a9a;
}
.bit-empty .material-symbols-outlined { font-size: 3rem; color: rgba(46, 92, 158, 0.5); }
.bit-empty h5 { margin: 0.5rem 0 0.2rem; font-weight: 700; color: #1a3c6e; font-size: 1rem; }
.bit-empty p { margin: 0; font-size: 0.85rem; }


/* =============================================================================
   COMPROBANTES PAGO · FatherComponent.vue
   Componente:  resources/js/components/comprobantes_pago/FatherComponent.vue
   Apartado:    Shell del módulo
   Prefijo:     .cpg-shell, .cpg-content
   ============================================================================= */
.csj-shell__content.cpg-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.cpg-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.85rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.cpg-scroll::-webkit-scrollbar { width: 0.6rem; }
.cpg-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    border-radius: 999px;
}
.cpg-scroll::-webkit-scrollbar-track { background: #f1f5f9; }

.cpg-footer {
    flex-shrink: 0;
    padding: 0.65rem 1rem;
    border-top: 1px solid rgba(46, 92, 158, 0.18);
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
}
.cpg-footer .ms-paginate {
    margin-top: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}


/* =============================================================================
   COMPROBANTES PAGO · ListComponent.vue
   Componente:  resources/js/components/comprobantes_pago/ListComponent.vue
   Apartado:    Listado de comprobantes
   Prefijo:     .cpg-list*, .cpg-row*
   ============================================================================= */
.cpg-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 1280px) {
    .cpg-list { grid-template-columns: repeat(2, 1fr); }
}

/* ─── CARD ─── */
.cpg-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.7rem;
    padding: 0.85rem 1rem 0.85rem 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 28, 50, 0.04);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-flow: column;
    gap: 0.65rem;
}
.cpg-card:hover {
    box-shadow: 0 0.4rem 1rem rgba(46, 92, 158, 0.14);
    border-color: rgba(46, 92, 158, 0.42);
    transform: translateY(-1px);
}
.cpg-card::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0;
    width: 0.35rem;
    border-top-left-radius: 0.7rem; border-bottom-left-radius: 0.7rem;
    background: linear-gradient(180deg, #1a3c6e, #2e5c9e);
}

.cpg-card__head {
    display: flex; align-items: flex-start; gap: 0.7rem;
    flex-wrap: wrap;
}
.cpg-card__avatar {
    width: 2.8rem; height: 2.8rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.25);
}
.cpg-card__avatar .material-symbols-outlined { font-size: 1.5rem; }

.cpg-card__identity { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.cpg-card__name {
    margin: 0;
    font-size: 0.95rem; font-weight: 700;
    color: #1a3c6e;
    line-height: 1.3;
    font-family: 'Merriweather', serif;
    word-break: break-word;
}
.cpg-card__email {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.78rem; color: #5a7a9a;
    text-decoration: none;
    width: max-content; max-width: 100%;
    transition: color 0.15s;
}
.cpg-card__email:hover { color: #2e5c9e; }
.cpg-card__email .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; flex-shrink: 0; }

.cpg-card__date {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    background: linear-gradient(135deg, rgba(46, 92, 158, 0.08), rgba(46, 92, 158, 0.16));
    border: 1px solid rgba(46, 92, 158, 0.22);
    border-radius: 0.4rem;
    flex-shrink: 0;
}
.cpg-card__date .material-symbols-outlined { font-size: 1rem; color: #2e5c9e; }
.cpg-card__date > span {
    display: flex; flex-direction: column; gap: 0.05rem; line-height: 1.2;
}
.cpg-card__date small {
    font-size: 0.6rem;
    color: #5a7a9a; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.cpg-card__date > span > :last-child {
    font-size: 0.78rem;
    color: #1a3c6e; font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Tags */
.cpg-card__tags {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
}
.cpg-tag {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem; font-weight: 600;
    border-radius: 0.35rem;
    border: 1px solid transparent;
}
.cpg-tag .material-symbols-outlined { font-size: 0.9rem; }
.cpg-tag--spec { background: linear-gradient(135deg, rgba(46, 92, 158, 0.08), rgba(46, 92, 158, 0.18));
                 color: #1a3c6e; border-color: rgba(46, 92, 158, 0.25); }
.cpg-tag--proc { background: linear-gradient(135deg, #fef3c7, #fde68a);
                 color: #92400e; border-color: rgba(146, 64, 14, 0.22); }
.cpg-tag--conv { background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
                 color: #6a1b9a; border-color: rgba(106, 27, 154, 0.22); }

.cpg-card__body {
    padding-top: 0.55rem;
    border-top: 1px dashed rgba(46, 92, 158, 0.22);
}

.cpg-block {
    background: #f7fafd;
    border: 1px solid rgba(46, 92, 158, 0.14);
    border-radius: 0.45rem;
    padding: 0.55rem 0.7rem;
}
.cpg-block__label {
    margin: 0 0 0.3rem 0;
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.65rem; font-weight: 800;
    color: #5a7a9a;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.cpg-block__label .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; }
.cpg-block__value {
    margin: 0;
    font-size: 0.82rem; font-weight: 700;
    color: #1a3c6e;
    line-height: 1.3;
    word-break: break-word;
}
.cpg-block__sub {
    margin: 0.25rem 0 0 0;
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.72rem; color: #5a7a9a;
    line-height: 1.3;
    flex-wrap: wrap;
}
.cpg-block__sub .material-symbols-outlined { font-size: 0.85rem; color: #94a3b8; flex-shrink: 0; }
.cpg-block__sub b { color: #1a3c6e; font-weight: 700; }
.cpg-block__empty {
    margin: 0;
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.78rem; color: #94a3b8; font-style: italic;
}
.cpg-block__empty .material-symbols-outlined { font-size: 1rem; }

.cpg-link {
    display: inline-flex; align-items: center; gap: 0.3rem;
    margin-top: 0.4rem;
    padding: 0.3rem 0.6rem;
    background: #fff;
    border: 1px solid rgba(106, 27, 154, 0.3);
    border-radius: 0.35rem;
    color: #6a1b9a;
    font-size: 0.74rem; font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: inherit;
}
.cpg-link:hover {
    background: linear-gradient(135deg, #6a1b9a, #8e24aa);
    color: #fff; border-color: transparent;
}
.cpg-link .material-symbols-outlined { font-size: 0.95rem; }

/* Acciones */
.cpg-card__actions {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    padding-top: 0.55rem;
    border-top: 1px dashed rgba(46, 92, 158, 0.22);
    margin-top: auto;
}
.cpg-card__btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 0.45rem;
    font-size: 0.78rem; font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    flex: 1; justify-content: center;
    min-width: 8rem;
    font-family: inherit;
}
.cpg-card__btn .material-symbols-outlined { font-size: 1rem; }

.cpg-card__btn--view {
    background: linear-gradient(135deg, #2e5c9e 0%, #5b8acc 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0.15rem 0.4rem rgba(46, 92, 158, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.cpg-card__btn--view:hover {
    background: linear-gradient(135deg, #1a3c6e 0%, #4a7bbf 100%);
    transform: translateY(-1px);
    box-shadow: 0 0.3rem 0.7rem rgba(46, 92, 158, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
    color: #fff;
}

.cpg-card__btn--accept {
    background: #fff;
    color: #166534;
    border-color: rgba(22, 101, 52, 0.3);
}
.cpg-card__btn--accept:hover {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #fff;
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.5rem rgba(22, 163, 74, 0.3);
}

.cpg-card__btn--reject {
    background: #fff;
    color: #b91c1c;
    border-color: rgba(185, 28, 28, 0.3);
}
.cpg-card__btn--reject:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: #fff;
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.5rem rgba(185, 28, 28, 0.3);
}

/* Empty state */
.cpg-empty {
    grid-column: 1 / -1;
    background: #fff;
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.65rem;
    padding: 2.5rem 1rem; text-align: center; color: #5a7a9a;
}
.cpg-empty .material-symbols-outlined { font-size: 3rem; color: rgba(46, 92, 158, 0.5); }
.cpg-empty h5 { margin: 0.5rem 0 0.2rem; font-weight: 700; color: #1a3c6e; font-size: 1rem; }
.cpg-empty p { margin: 0; font-size: 0.85rem; }


/* =============================================================================
   CONVOCATORIAS · FatherComponent.vue
   Componente:  resources/js/components/convocatorias/FatherComponent.vue
   Apartado:    Shell del módulo
   Prefijo:     .conv-shell, .conv-content
   ============================================================================= */
/* Patrón filtro + listado + paginador: listado scrollea adentro, paginador fijo abajo */
.csj-shell__content.conv-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.conv-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.85rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.conv-scroll::-webkit-scrollbar { width: 0.6rem; }
.conv-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    border-radius: 999px;
}
.conv-scroll::-webkit-scrollbar-track { background: #f1f5f9; }

.conv-footer {
    flex-shrink: 0;
    padding: 0.65rem 1rem;
    border-top: 1px solid rgba(46, 92, 158, 0.18);
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
}
.conv-footer .ms-paginate {
    margin-top: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}


/* =============================================================================
   CONVOCATORIAS · ListComponent.vue
   Componente:  resources/js/components/convocatorias/ListComponent.vue
   Apartado:    Listado de convocatorias
   Prefijo:     .conv-list*, .conv-card*
   ============================================================================= */
.conv-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ─── CARD ─────────────────────────────────────── */
.conv-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.7rem;
    padding: 0.95rem 1rem 0.95rem 1.3rem;
    box-shadow: 0 1px 2px rgba(15, 28, 50, 0.04);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-flow: column;
    gap: 0.7rem;
}
.conv-card:hover {
    box-shadow: 0 0.4rem 1rem rgba(46, 92, 158, 0.14);
    border-color: rgba(46, 92, 158, 0.42);
    transform: translateY(-1px);
}
.conv-card::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0;
    width: 0.35rem;
    border-top-left-radius: 0.7rem; border-bottom-left-radius: 0.7rem;
    background: linear-gradient(180deg, #1a3c6e, #2e5c9e);
}
.conv-card--off::before {
    background: linear-gradient(180deg, #94a3b8, #64748b);
}

/* Header */
.conv-card__head {
    display: flex; align-items: flex-start; gap: 0.7rem;
}
.conv-card__icon {
    width: 2.5rem; height: 2.5rem; border-radius: 0.55rem;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.25);
}
.conv-card__icon .material-symbols-outlined { font-size: 1.35rem; }
.conv-card--off .conv-card__icon {
    background: linear-gradient(135deg, #94a3b8, #64748b);
    box-shadow: 0 0.15rem 0.4rem rgba(100, 116, 139, 0.25);
}

.conv-card__title-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.conv-card__title-row {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.conv-card__title {
    margin: 0; font-size: 1rem; font-weight: 700; color: #1a3c6e;
    line-height: 1.3; font-family: 'Merriweather', serif;
    word-break: break-word;
}
.conv-card__badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    border: 1px solid transparent;
    white-space: nowrap;
}
.conv-card__badge-dot {
    width: 0.45rem; height: 0.45rem; border-radius: 50%;
    box-shadow: 0 0 0 0.18rem rgba(255, 255, 255, 0.6);
}
.conv-card__badge--ok {
    background: #dcfce7; color: #166534; border-color: #bbf7d0;
}
.conv-card__badge--ok .conv-card__badge-dot {
    background: #16a34a;
    box-shadow: 0 0 0 0.18rem rgba(22, 163, 74, 0.25);
    animation: convPulse 2s ease-in-out infinite;
}
.conv-card__badge--off {
    background: #f1f5f9; color: #475569; border-color: #e2e8ef;
}
.conv-card__badge--off .conv-card__badge-dot { background: #94a3b8; }

@keyframes convPulse {
    0%, 100% { box-shadow: 0 0 0 0.18rem rgba(22, 163, 74, 0.25); }
    50%      { box-shadow: 0 0 0 0.35rem rgba(22, 163, 74, 0.05); }
}

.conv-card__desc {
    margin: 0; font-size: 0.85rem; color: #2c3e50; line-height: 1.5;
    white-space: pre-line;
}

.conv-card__actions { display: flex; gap: 0.3rem; flex-shrink: 0; }
.conv-card__btn {
    position: relative;
    width: 2.1rem; height: 2.1rem; border-radius: 0.45rem;
    border: 1px solid rgba(46, 92, 158, 0.22); background: #fff; color: #5a7a9a;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: all 0.18s ease;
}
.conv-card__btn .material-symbols-outlined { font-size: 1.1rem; }
.conv-card__btn:hover { transform: translateY(-1px); }
.conv-card__btn--edit:hover { background: linear-gradient(135deg, #1a3c6e, #2e5c9e); color: #fff; border-color: transparent; box-shadow: 0 0.2rem 0.45rem rgba(26, 60, 110, 0.25); }
.conv-card__btn--del:hover  { background: #d93025; color: #fff; border-color: #d93025; box-shadow: 0 0.2rem 0.45rem rgba(217, 48, 37, 0.25); }
.conv-card__btn--log:hover  { background: #d4af37; color: #fff; border-color: #d4af37; box-shadow: 0 0.2rem 0.45rem rgba(212, 175, 55, 0.3); }

.conv-card__tip {
    position: absolute;
    bottom: calc(100% + 0.35rem);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #1a3c6e; color: #fff;
    padding: 0.25rem 0.5rem;
    border-radius: 0.3rem;
    font-size: 0.7rem; font-weight: 600; white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity 0.18s, transform 0.18s;
    z-index: 5;
}
.conv-card__tip::after {
    content: '';
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #1a3c6e;
}
.conv-card__btn:hover .conv-card__tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Banner período */
.conv-card__periodo {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.55rem 0.75rem;
    background: linear-gradient(135deg, rgba(46, 92, 158, 0.08), rgba(46, 92, 158, 0.04));
    border: 1px solid rgba(46, 92, 158, 0.2);
    border-radius: 0.5rem;
}
.conv-card__periodo-icon {
    color: #2e5c9e;
    background: #fff;
    width: 2rem; height: 2rem;
    border-radius: 0.4rem;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 0.1rem 0.3rem rgba(46, 92, 158, 0.18);
    font-size: 1.2rem !important;
    flex-shrink: 0;
}
.conv-card__periodo > div { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.conv-card__periodo-label {
    font-size: 0.68rem; font-weight: 700; color: #5a7a9a;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.conv-card__periodo-value {
    font-size: 0.9rem; color: #1a3c6e; font-weight: 600;
}

/* Metadatos */
.conv-card__meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem 0.8rem;
}
@media (min-width: 720px) { .conv-card__meta { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .conv-card__meta { grid-template-columns: repeat(4, 1fr); } }
.conv-card__meta-col {
    display: flex; flex-direction: column; gap: 0.2rem; min-width: 0;
    padding: 0.4rem 0.55rem;
    border-left: 2px solid rgba(46, 92, 158, 0.2);
    background: rgba(46, 92, 158, 0.02);
    border-radius: 0 0.35rem 0.35rem 0;
}
.conv-card__meta-label {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.7rem; font-weight: 700; color: #5a7a9a;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.conv-card__meta-label .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; }
.conv-card__meta-value {
    font-size: 0.82rem; color: #1a3c6e; font-weight: 600;
    word-break: break-word;
}

/* Footer: especialidades / procesos / fases */
.conv-card__footer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem 0.8rem;
    padding-top: 0.6rem;
    border-top: 1px dashed rgba(46, 92, 158, 0.22);
}
@media (min-width: 900px) {
    .conv-card__footer { grid-template-columns: repeat(3, 1fr); }
}
.conv-card__col { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.conv-card__col-label {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.7rem; font-weight: 700;
    color: #5a7a9a; text-transform: uppercase; letter-spacing: 0.05em;
}
.conv-card__col-label .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; }
.conv-card__tags {
    display: flex; flex-wrap: wrap; gap: 0.3rem;
}
.conv-card__empty {
    font-size: 0.78rem; color: #94a3b8; font-style: italic;
}

.conv-tag {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem; font-weight: 600;
    border-radius: 0.35rem;
    border: 1px solid transparent;
}
.conv-tag .material-symbols-outlined { font-size: 0.9rem; }
.conv-tag small { font-weight: 500; opacity: 0.85; }
.conv-tag--esp {
    background: linear-gradient(135deg, #e8f1fc, #d0e1f7);
    color: #1a3c6e;
    border-color: rgba(46, 92, 158, 0.22);
}
.conv-tag--proc {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border-color: rgba(146, 64, 14, 0.22);
}
.conv-tag--fase {
    background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
    color: #6a1b9a;
    border-color: rgba(106, 27, 154, 0.22);
}

/* Empty state */
.conv-empty {
    background: #fff;
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.65rem;
    padding: 2.5rem 1rem; text-align: center; color: #5a7a9a;
}
.conv-empty .material-symbols-outlined { font-size: 3rem; color: rgba(46, 92, 158, 0.5); }
.conv-empty h5 { margin: 0.5rem 0 0.2rem; font-weight: 700; color: #1a3c6e; font-size: 1rem; }
.conv-empty p { margin: 0; font-size: 0.85rem; }
.conv-empty p b { color: #1a3c6e; }


/* =============================================================================
   CONVOCATORIAS · FormComponent.vue
   Componente:  resources/js/components/convocatorias/FormComponent.vue
   Apartado:    Form de convocatoria
   Prefijo:     .conv-form*
   ============================================================================= */
.conv-form__counter {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.18rem 0.55rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 600;
    background: linear-gradient(135deg, rgba(46, 92, 158, 0.1), rgba(46, 92, 158, 0.2));
    color: #1a3c6e; border: 1px solid rgba(46, 92, 158, 0.25);
}
.conv-form__counter b { color: #1a3c6e; font-weight: 700; }

.conv-form__hint {
    margin: 0 0 0.5rem 0;
    display: flex; align-items: flex-start; gap: 0.4rem;
    font-size: 0.78rem; line-height: 1.45;
    color: #1a3c6e;
    background: rgba(46, 92, 158, 0.07);
    border: 1px solid rgba(46, 92, 158, 0.2);
    border-radius: 0.45rem;
    padding: 0.55rem 0.7rem;
}
.conv-form__hint .material-symbols-outlined { font-size: 1rem; color: #2e5c9e; flex-shrink: 0; margin-top: 0.05rem; }

.conv-form__pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.45rem;
}

.conv-form__pick {
    position: relative;
    display: flex; align-items: flex-start; gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.2);
    border-radius: 0.45rem;
    font-size: 0.83rem;
    color: #2c3e50;
    cursor: pointer;
    transition: all 0.18s ease;
    margin: 0;
    user-select: none;
    min-width: 0;
    overflow: hidden;
}
.conv-form__pick input[type="checkbox"] {
    position: absolute;
    top: 0; left: 0;
    opacity: 0;
    width: 1px; height: 1px;
    pointer-events: none;
    margin: 0;
}
.conv-form__check {
    width: 1.15rem; height: 1.15rem;
    border-radius: 0.3rem;
    border: 1.5px solid rgba(46, 92, 158, 0.4);
    background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-top: 0.1rem;
    transition: all 0.18s ease;
}
.conv-form__check .material-symbols-outlined {
    font-size: 0.9rem;
    color: #fff;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.conv-form__pick-name {
    flex: 1;
    min-width: 0;
    line-height: 1.35;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.conv-form__pick:hover {
    border-color: rgba(46, 92, 158, 0.5);
    background: rgba(46, 92, 158, 0.04);
}
.conv-form__pick.is-selected {
    background: linear-gradient(135deg, rgba(46, 92, 158, 0.08), rgba(46, 92, 158, 0.14));
    border-color: rgba(46, 92, 158, 0.5);
    color: #1a3c6e;
    font-weight: 600;
}
.conv-form__pick.is-selected .conv-form__check {
    background: linear-gradient(135deg, #1a3c6e, #2e5c9e);
    border-color: transparent;
    box-shadow: 0 0.15rem 0.3rem rgba(26, 60, 110, 0.3);
}
.conv-form__pick.is-selected .conv-form__check .material-symbols-outlined { opacity: 1; }

.conv-form__empty {
    display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
    background: #fff;
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.55rem;
    padding: 1.5rem 1rem;
    color: #5a7a9a;
    font-size: 0.85rem;
}
.conv-form__empty .material-symbols-outlined { font-size: 2rem; color: rgba(46, 92, 158, 0.5); }

/* ─── FASES ────────────────────────────────────── */
.conv-form__fases {
    display: flex; flex-direction: column; gap: 0.5rem;
}
.conv-form__fase {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.6rem 0.75rem;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.2);
    border-radius: 0.5rem;
    flex-wrap: wrap;
    transition: background-color 0.18s, border-color 0.18s;
}
.conv-form__fase.is-selected {
    background: linear-gradient(135deg, rgba(106, 27, 154, 0.05), rgba(106, 27, 154, 0.1));
    border-color: rgba(106, 27, 154, 0.35);
}
.conv-form__fase-pick {
    position: relative;
    display: flex; align-items: center; gap: 0.5rem;
    flex: 1; min-width: 14rem;
    margin: 0;
    cursor: pointer;
    user-select: none;
}
.conv-form__fase-pick input[type="checkbox"] {
    position: absolute;
    top: 0; left: 0;
    opacity: 0;
    width: 1px; height: 1px;
    pointer-events: none;
    margin: 0;
}
.conv-form__fase.is-selected .conv-form__check {
    background: linear-gradient(135deg, #6a1b9a, #8e24aa);
    border-color: transparent;
    box-shadow: 0 0.15rem 0.3rem rgba(106, 27, 154, 0.3);
}
.conv-form__fase.is-selected .conv-form__check .material-symbols-outlined { opacity: 1; }
.conv-form__fase-name {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.88rem;
    color: #1a3c6e; font-weight: 500;
}
.conv-form__fase-name .material-symbols-outlined { font-size: 1rem; color: #6a1b9a; }
.conv-form__fase.is-selected .conv-form__fase-name { font-weight: 700; color: #6a1b9a; }

.conv-form__fase-fields {
    display: flex; gap: 0.5rem; flex-shrink: 0;
}
.conv-form__fase-field {
    display: flex; flex-direction: column; gap: 0.15rem;
}
.conv-form__fase-field label {
    margin: 0;
    font-size: 0.7rem; font-weight: 700;
    color: #5a7a9a; text-transform: uppercase; letter-spacing: 0.04em;
}
.conv-form__fase-input {
    display: inline-flex; align-items: center;
    background: #f7fafd;
    border: 1px solid rgba(46, 92, 158, 0.25);
    border-radius: 0.4rem;
    padding: 0 0.55rem;
    width: 6.5rem;
    transition: border-color 0.18s, box-shadow 0.18s, background-color 0.18s;
}
.conv-form__fase-input:focus-within {
    border-color: #2e5c9e; background: #fff;
    box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.15);
}
.conv-form__fase-input input {
    flex: 1; min-width: 0;
    border: none; outline: none; background: transparent;
    font-size: 0.85rem; color: #1a3c6e;
    padding: 0.35rem 0;
    font-family: inherit;
}
.conv-form__fase-suffix {
    font-size: 0.78rem; font-weight: 700; color: #5a7a9a;
    flex-shrink: 0; padding-left: 0.25rem;
}

@media (max-width: 720px) {
    .conv-form__fase { flex-direction: column; align-items: stretch; }
    .conv-form__fase-fields { justify-content: stretch; }
    .conv-form__fase-field { flex: 1; }
    .conv-form__fase-input { width: 100%; }
}


/* =============================================================================
   HISTORIAL PAGO · FatherComponent.vue
   Componente:  resources/js/components/historial_pago/FatherComponent.vue
   Apartado:    Shell del módulo
   Prefijo:     .hpg-shell, .hpg-content
   ============================================================================= */
.csj-shell__content.hpg-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.hpg-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.85rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.hpg-scroll::-webkit-scrollbar { width: 0.6rem; }
.hpg-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    border-radius: 999px;
}
.hpg-scroll::-webkit-scrollbar-track { background: #f1f5f9; }

.hpg-footer {
    flex-shrink: 0;
    padding: 0.65rem 1rem;
    border-top: 1px solid rgba(46, 92, 158, 0.18);
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
}
.hpg-footer .ms-paginate {
    margin-top: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}


/* =============================================================================
   HISTORIAL PAGO · ListComponent.vue
   Componente:  resources/js/components/historial_pago/ListComponent.vue
   Apartado:    Listado de pagos históricos
   Prefijo:     .hpg-list*, .hpg-row*
   ============================================================================= */
.hpg-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 1280px) {
    .hpg-list { grid-template-columns: repeat(2, 1fr); }
}

/* ─── CARD ─── */
.hpg-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.7rem;
    padding: 0.85rem 1rem 0.85rem 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 28, 50, 0.04);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-flow: column;
    gap: 0.65rem;
}
.hpg-card:hover {
    box-shadow: 0 0.4rem 1rem rgba(46, 92, 158, 0.14);
    border-color: rgba(46, 92, 158, 0.42);
    transform: translateY(-1px);
}
.hpg-card::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0;
    width: 0.35rem;
    border-top-left-radius: 0.7rem; border-bottom-left-radius: 0.7rem;
    background: linear-gradient(180deg, #1a3c6e, #2e5c9e);
}

.hpg-card__head {
    display: flex; align-items: flex-start; gap: 0.7rem;
    flex-wrap: wrap;
}
.hpg-card__avatar {
    width: 2.8rem; height: 2.8rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.25);
}
.hpg-card__avatar .material-symbols-outlined { font-size: 1.5rem; }

.hpg-card__identity { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.hpg-card__name {
    margin: 0;
    font-size: 0.95rem; font-weight: 700;
    color: #1a3c6e;
    line-height: 1.3;
    font-family: 'Merriweather', serif;
    word-break: break-word;
}
.hpg-card__email {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.78rem; color: #5a7a9a;
    text-decoration: none;
    width: max-content; max-width: 100%;
    transition: color 0.15s;
}
.hpg-card__email:hover { color: #2e5c9e; }
.hpg-card__email .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; flex-shrink: 0; }

.hpg-card__state {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.72rem; font-weight: 700;
    border-radius: 0.4rem;
    background: #dcfce7; color: #166534;
    border: 1px solid rgba(22, 101, 52, 0.25);
    text-transform: uppercase; letter-spacing: 0.04em;
    flex-shrink: 0;
}
.hpg-card__state .material-symbols-outlined { font-size: 1rem; }

/* Tags */
.hpg-card__tags {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
}
.hpg-tag {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem; font-weight: 600;
    border-radius: 0.35rem;
    border: 1px solid transparent;
}
.hpg-tag .material-symbols-outlined { font-size: 0.9rem; }
.hpg-tag--spec { background: linear-gradient(135deg, rgba(46, 92, 158, 0.08), rgba(46, 92, 158, 0.18));
                 color: #1a3c6e; border-color: rgba(46, 92, 158, 0.25); }
.hpg-tag--proc { background: linear-gradient(135deg, #fef3c7, #fde68a);
                 color: #92400e; border-color: rgba(146, 64, 14, 0.22); }
.hpg-tag--conv { background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
                 color: #6a1b9a; border-color: rgba(106, 27, 154, 0.22); }

/* Body grid */
.hpg-card__body {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    padding-top: 0.55rem;
    border-top: 1px dashed rgba(46, 92, 158, 0.22);
}
@media (max-width: 760px) {
    .hpg-card__body { grid-template-columns: 1fr; }
}

.hpg-block {
    background: #f7fafd;
    border: 1px solid rgba(46, 92, 158, 0.14);
    border-radius: 0.45rem;
    padding: 0.55rem 0.7rem;
}
.hpg-block__label {
    margin: 0 0 0.3rem 0;
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.65rem; font-weight: 800;
    color: #5a7a9a;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.hpg-block__label .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; }
.hpg-block__value {
    margin: 0;
    font-size: 0.82rem; font-weight: 700;
    color: #1a3c6e;
    line-height: 1.3;
    word-break: break-word;
}
.hpg-block__sub {
    margin: 0.25rem 0 0 0;
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.72rem; color: #5a7a9a;
    line-height: 1.3;
    flex-wrap: wrap;
}
.hpg-block__sub .material-symbols-outlined { font-size: 0.85rem; color: #94a3b8; flex-shrink: 0; }
.hpg-block__sub b { color: #1a3c6e; font-weight: 700; }
.hpg-block__empty {
    margin: 0;
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.78rem; color: #94a3b8; font-style: italic;
}
.hpg-block__empty .material-symbols-outlined { font-size: 1rem; }

.hpg-link {
    display: inline-flex; align-items: center; gap: 0.3rem;
    margin-top: 0.45rem;
    padding: 0.35rem 0.65rem;
    background: #fff;
    border: 1px solid rgba(106, 27, 154, 0.3);
    border-radius: 0.35rem;
    color: #6a1b9a;
    font-size: 0.74rem; font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: inherit;
}
.hpg-link:hover {
    background: linear-gradient(135deg, #6a1b9a, #8e24aa);
    color: #fff; border-color: transparent;
}
.hpg-link .material-symbols-outlined { font-size: 0.95rem; }

.hpg-link--primary {
    border-color: rgba(46, 92, 158, 0.3);
    color: #2e5c9e;
}
.hpg-link--primary:hover {
    background: linear-gradient(135deg, #2e5c9e 0%, #5b8acc 100%);
    color: #fff;
    border-color: transparent;
}

/* Empty state */
.hpg-empty {
    grid-column: 1 / -1;
    background: #fff;
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.65rem;
    padding: 2.5rem 1rem; text-align: center; color: #5a7a9a;
}
.hpg-empty .material-symbols-outlined { font-size: 3rem; color: rgba(46, 92, 158, 0.5); }
.hpg-empty h5 { margin: 0.5rem 0 0.2rem; font-weight: 700; color: #1a3c6e; font-size: 1rem; }
.hpg-empty p { margin: 0; font-size: 0.85rem; }


/* =============================================================================
   SEDES · FatherComponent.vue
   Componente:  resources/js/components/sedes/FatherComponent.vue
   Apartado:    Shell del módulo de sedes
   Prefijo:     .sed-shell, .sed-content
   ============================================================================= */
.csj-shell__content.sed-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.sed-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.85rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.sed-scroll::-webkit-scrollbar { width: 0.6rem; }
.sed-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    border-radius: 999px;
}
.sed-scroll::-webkit-scrollbar-track { background: #f1f5f9; }

.sed-footer {
    flex-shrink: 0;
    padding: 0.65rem 1rem;
    border-top: 1px solid rgba(46, 92, 158, 0.18);
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
}
.sed-footer .ms-paginate {
    margin-top: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}


/* =============================================================================
   SEDES · ListComponent.vue
   Componente:  resources/js/components/sedes/ListComponent.vue
   Apartado:    Listado de sedes
   Prefijo:     .sed-list*, .sed-row*
   ============================================================================= */
.sed-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
}
@media (min-width: 900px) {
    .sed-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1400px) {
    .sed-list { grid-template-columns: repeat(3, 1fr); }
}

/* ─── CARD ─────────────────────────────────────── */
.sed-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.7rem;
    padding: 0.85rem 1rem 0.85rem 1.2rem;
    box-shadow: 0 1px 2px rgba(15, 28, 50, 0.04);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-flow: column;
    gap: 0.6rem;
}
.sed-card:hover {
    box-shadow: 0 0.4rem 1rem rgba(46, 92, 158, 0.14);
    border-color: rgba(46, 92, 158, 0.42);
    transform: translateY(-1px);
}
.sed-card::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0;
    width: 0.35rem;
    border-top-left-radius: 0.7rem; border-bottom-left-radius: 0.7rem;
    background: linear-gradient(180deg, #94a3b8, #64748b);
}
.sed-card.is-asociada::before {
    background: linear-gradient(180deg, #1a3c6e, #2e5c9e);
}

/* Header */
.sed-card__head {
    display: flex; align-items: flex-start; gap: 0.7rem;
}
.sed-card__icon {
    width: 2.4rem; height: 2.4rem; border-radius: 0.55rem;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    background: linear-gradient(135deg, #e8f1fc, #d0e1f7);
    color: #1a3c6e;
    box-shadow: inset 0 0 0 1px rgba(46, 92, 158, 0.15);
}
.sed-card.is-asociada .sed-card__icon {
    background: linear-gradient(135deg, #1a3c6e, #2e5c9e);
    color: #fff;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.25);
}
.sed-card__icon .material-symbols-outlined { font-size: 1.3rem; }

.sed-card__title-wrap {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 0.25rem;
}
.sed-card__title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #1a3c6e;
    line-height: 1.3;
    font-family: 'Merriweather', serif;
    word-break: break-word;
}
.sed-card__meta {
    display: flex; align-items: center; gap: 0.6rem;
    flex-wrap: wrap;
}
.sed-card__estado,
.sed-card__pais {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.75rem;
    color: #5a7a9a;
    font-weight: 500;
}
.sed-card__estado .material-symbols-outlined,
.sed-card__pais .material-symbols-outlined {
    font-size: 0.95rem; color: #2e5c9e;
}

.sed-card__badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    flex-shrink: 0;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    background: #e7f6ec;
    color: #166534;
    border: 1px solid rgba(22, 101, 52, 0.22);
}
.sed-card__badge .material-symbols-outlined { font-size: 0.9rem; }

/* Body */
.sed-card__body {
    display: flex; flex-direction: column; gap: 0.35rem;
    padding: 0.5rem 0;
    border-top: 1px dashed rgba(46, 92, 158, 0.22);
}
.sed-card__dep,
.sed-card__address,
.sed-card__clue {
    margin: 0;
    display: flex; align-items: flex-start; gap: 0.4rem;
    font-size: 0.82rem;
    color: #2c3e50;
    line-height: 1.4;
}
.sed-card__dep .material-symbols-outlined,
.sed-card__address .material-symbols-outlined,
.sed-card__clue .material-symbols-outlined {
    font-size: 1rem;
    color: #2e5c9e;
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.sed-card__dep b,
.sed-card__clue b { color: #1a3c6e; margin-right: 0.2rem; }

/* Footer */
.sed-card__footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.4rem;
    border-top: 1px dashed rgba(46, 92, 158, 0.22);
    margin-top: auto;
}
.sed-card__action {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid transparent;
    border-radius: 0.45rem;
    font-size: 0.78rem; font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
}
.sed-card__action .material-symbols-outlined { font-size: 1rem; }
.sed-card__action--add {
    background: linear-gradient(135deg, #2e5c9e 0%, #5b8acc 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0.15rem 0.4rem rgba(46, 92, 158, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.sed-card__action--add:hover {
    background: linear-gradient(135deg, #1a3c6e 0%, #4a7bbf 100%);
    transform: translateY(-1px);
    box-shadow: 0 0.3rem 0.7rem rgba(46, 92, 158, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
    color: #fff;
}
.sed-card__action--remove {
    background: #fff;
    color: #c5221f;
    border-color: rgba(197, 34, 31, 0.35);
}
.sed-card__action--remove:hover {
    background: #d93025;
    color: #fff;
    border-color: #d93025;
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.5rem rgba(217, 48, 37, 0.3);
}

/* Empty state */
.sed-empty {
    grid-column: 1 / -1;
    background: #fff;
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.65rem;
    padding: 2.5rem 1rem; text-align: center; color: #5a7a9a;
}
.sed-empty .material-symbols-outlined { font-size: 3rem; color: rgba(46, 92, 158, 0.5); }
.sed-empty h5 { margin: 0.5rem 0 0.2rem; font-weight: 700; color: #1a3c6e; font-size: 1rem; }
.sed-empty p { margin: 0; font-size: 0.85rem; }


/* =============================================================================
   UNIVERSIDADES · FatherComponent.vue
   Componente:  resources/js/components/universidades/FatherComponent.vue
   Apartado:    Shell del módulo
   Prefijo:     .uni-shell, .uni-content
   ============================================================================= */
.csj-shell__content.uni-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.uni-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.85rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.uni-scroll::-webkit-scrollbar { width: 0.6rem; }
.uni-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    border-radius: 999px;
}
.uni-scroll::-webkit-scrollbar-track { background: #f1f5f9; }

.uni-footer {
    flex-shrink: 0;
    padding: 0.65rem 1rem;
    border-top: 1px solid rgba(46, 92, 158, 0.18);
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
}
.uni-footer .ms-paginate {
    margin-top: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}


/* =============================================================================
   UNIVERSIDADES · ListComponent.vue
   Componente:  resources/js/components/universidades/ListComponent.vue
   Apartado:    Listado de universidades
   Prefijo:     .uni-list*, .uni-row*
   ============================================================================= */
.uni-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
}
@media (min-width: 900px) {
    .uni-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1400px) {
    .uni-list { grid-template-columns: repeat(3, 1fr); }
}

/* ─── CARD ─────────────────────────────────────── */
.uni-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.7rem;
    padding: 0.85rem 1rem 0.85rem 1.2rem;
    box-shadow: 0 1px 2px rgba(15, 28, 50, 0.04);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-flow: column;
    gap: 0.6rem;
}
.uni-card:hover {
    box-shadow: 0 0.4rem 1rem rgba(46, 92, 158, 0.14);
    border-color: rgba(46, 92, 158, 0.42);
    transform: translateY(-1px);
}
.uni-card::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0;
    width: 0.35rem;
    border-top-left-radius: 0.7rem; border-bottom-left-radius: 0.7rem;
    background: linear-gradient(180deg, #94a3b8, #64748b);
}
.uni-card.is-asociada::before {
    background: linear-gradient(180deg, #1a3c6e, #2e5c9e);
}

/* Header */
.uni-card__head {
    display: flex; align-items: flex-start; gap: 0.7rem;
}
.uni-card__icon {
    width: 2.4rem; height: 2.4rem; border-radius: 0.55rem;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    background: linear-gradient(135deg, #e8f1fc, #d0e1f7);
    color: #1a3c6e;
    box-shadow: inset 0 0 0 1px rgba(46, 92, 158, 0.15);
}
.uni-card.is-asociada .uni-card__icon {
    background: linear-gradient(135deg, #1a3c6e, #2e5c9e);
    color: #fff;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.25);
}
.uni-card__icon .material-symbols-outlined { font-size: 1.3rem; }

.uni-card__title-wrap {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 0.25rem;
}
.uni-card__title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #1a3c6e;
    line-height: 1.3;
    font-family: 'Merriweather', serif;
    word-break: break-word;
}
.uni-card__country {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.75rem;
    color: #5a7a9a;
    font-weight: 500;
    width: max-content;
}
.uni-card__country .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; }

.uni-card__badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    flex-shrink: 0;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    background: #e7f6ec;
    color: #166534;
    border: 1px solid rgba(22, 101, 52, 0.22);
}
.uni-card__badge .material-symbols-outlined { font-size: 0.9rem; }

/* Body */
.uni-card__body {
    display: flex; flex-direction: column; gap: 0.35rem;
    padding: 0.5rem 0;
    border-top: 1px dashed rgba(46, 92, 158, 0.22);
}
.uni-card__address,
.uni-card__cct {
    margin: 0;
    display: flex; align-items: flex-start; gap: 0.4rem;
    font-size: 0.82rem;
    color: #2c3e50;
    line-height: 1.4;
}
.uni-card__address .material-symbols-outlined,
.uni-card__cct .material-symbols-outlined {
    font-size: 1rem;
    color: #2e5c9e;
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.uni-card__cct b { color: #1a3c6e; }

/* Footer */
.uni-card__footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.4rem;
    border-top: 1px dashed rgba(46, 92, 158, 0.22);
    margin-top: auto;
}
.uni-card__action {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid transparent;
    border-radius: 0.45rem;
    font-size: 0.78rem; font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
}
.uni-card__action .material-symbols-outlined { font-size: 1rem; }
.uni-card__action--add {
    background: linear-gradient(135deg, #2e5c9e 0%, #5b8acc 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0.15rem 0.4rem rgba(46, 92, 158, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.uni-card__action--add:hover {
    background: linear-gradient(135deg, #1a3c6e 0%, #4a7bbf 100%);
    transform: translateY(-1px);
    box-shadow: 0 0.3rem 0.7rem rgba(46, 92, 158, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
    color: #fff;
}
.uni-card__action--remove {
    background: #fff;
    color: #c5221f;
    border-color: rgba(197, 34, 31, 0.35);
}
.uni-card__action--remove:hover {
    background: #d93025;
    color: #fff;
    border-color: #d93025;
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.5rem rgba(217, 48, 37, 0.3);
}

/* Empty state */
.uni-empty {
    grid-column: 1 / -1;
    background: #fff;
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.65rem;
    padding: 2.5rem 1rem; text-align: center; color: #5a7a9a;
}
.uni-empty .material-symbols-outlined { font-size: 3rem; color: rgba(46, 92, 158, 0.5); }
.uni-empty h5 { margin: 0.5rem 0 0.2rem; font-weight: 700; color: #1a3c6e; font-size: 1rem; }
.uni-empty p { margin: 0; font-size: 0.85rem; }


/* =============================================================================
   USUARIOS · FatherComponent.vue
   Componente:  resources/js/components/usuarios/FatherComponent.vue
   Apartado:    Shell del módulo
   Prefijo:     .usr-shell, .usr-content
   ============================================================================= */
.csj-shell__content.usr-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.usr-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.85rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.usr-scroll::-webkit-scrollbar { width: 0.6rem; }
.usr-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    border-radius: 999px;
}
.usr-scroll::-webkit-scrollbar-track { background: #f1f5f9; }

.usr-footer {
    flex-shrink: 0;
    padding: 0.65rem 1rem;
    border-top: 1px solid rgba(46, 92, 158, 0.18);
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
}
.usr-footer .ms-paginate {
    margin-top: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}


/* =============================================================================
   USUARIOS · ListComponent.vue
   Componente:  resources/js/components/usuarios/ListComponent.vue
   Apartado:    Listado de usuarios
   Prefijo:     .usr-list*, .usr-row*
   ============================================================================= */
.usr-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}
@media (min-width: 900px) {
    .usr-list { grid-template-columns: repeat(2, 1fr); }
}

/* ─── CARD ─────────────────────────────────────── */
.usr-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(15, 28, 50, 0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    align-self: start;
}
.usr-card:hover {
    box-shadow: 0 0.4rem 1rem rgba(46, 92, 158, 0.14);
    border-color: rgba(46, 92, 158, 0.42);
    transform: translateY(-2px);
}

/* Acento navy superior */
.usr-card__accent {
    height: 3px;
    background: linear-gradient(90deg, #1a3c6e 0%, #2e5c9e 100%);
}

/* ─── HEAD: avatar + identidad ─────────────────── */
.usr-card__head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.95rem 1rem 0.9rem 1rem;
}

.usr-card__avatar {
    position: relative;
    width: 4.6rem; height: 4.6rem;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #f5f7fa;
    box-shadow: 0 0.25rem 0.6rem rgba(15, 28, 50, 0.18);
}
.usr-card__avatar::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 3px solid transparent;
    background: var(--ring-color, #cbd5e1) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.usr-card__avatar.is-verified { --ring-color: linear-gradient(135deg, #22c55e, #16a34a); }
.usr-card__avatar.is-unverified { --ring-color: linear-gradient(135deg, #cbd5e1, #94a3b8); }
.usr-card__avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.usr-card__identity {
    flex: 1;
    min-width: 0;
    display: flex; flex-direction: column; gap: 0.25rem;
    padding-top: 0.1rem;
}

.usr-card__name-row {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem;
    flex-wrap: wrap;
}
.usr-card__name {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #1a3c6e;
    line-height: 1.25;
    word-break: break-word;
    font-family: 'Merriweather', serif;
    flex: 1;
    min-width: 0;
}
.usr-card__created {
    display: inline-flex; align-items: center; gap: 0.2rem;
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}
.usr-card__created .material-symbols-outlined { font-size: 0.9rem; color: #94a3b8; }

.usr-card__email {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: #2e5c9e;
    font-weight: 500;
    text-decoration: none;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    transition: color 0.18s ease;
    width: max-content;
}
.usr-card__email:hover {
    color: #1a3c6e;
    text-decoration: underline;
}
.usr-card__email .material-symbols-outlined {
    font-size: 0.95rem;
    color: #2e5c9e;
    flex-shrink: 0;
}
.usr-card__email-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.usr-card__status {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.18rem 0.55rem;
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    border-radius: 999px;
    border: 1px solid transparent;
    width: max-content;
    margin-top: 0.15rem;
}
.usr-card__status .material-symbols-outlined { font-size: 0.9rem; }
.usr-card__status.is-verified {
    background: #e7f6ec;
    color: #166534;
    border-color: rgba(22, 101, 52, 0.22);
}
.usr-card__status.is-unverified {
    background: #fef3c7;
    color: #92400e;
    border-color: rgba(146, 64, 14, 0.22);
}
.usr-card__status.is-online {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: #166534;
    border-color: rgba(22, 101, 52, 0.3);
}
.usr-card__status.is-online .material-symbols-outlined {
    font-size: 0.65rem;
    font-variation-settings: 'FILL' 1;
}
.usr-card__status.is-offline {
    background: #f1f5f9;
    color: #5a7a9a;
    border-color: rgba(46, 92, 158, 0.18);
}
.usr-card__status.is-session {
    background: rgba(46, 92, 158, 0.08);
    color: #1a3c6e;
    border-color: rgba(46, 92, 158, 0.22);
    text-transform: none;
    letter-spacing: 0.01em;
    font-weight: 600;
}

.usr-card__chips {
    display: flex; flex-wrap: wrap; gap: 0.3rem;
    margin-top: 0.15rem;
}

/* Punto online flotante sobre el avatar */
.usr-card__online-dot {
    position: absolute;
    bottom: 0.15rem; right: 0.15rem;
    width: 0.85rem; height: 0.85rem;
    background: #16a34a;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.4), 0 0 0.5rem rgba(22, 163, 74, 0.5);
    z-index: 1;
    animation: usr-pulse 2.5s infinite;
}
@keyframes usr-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}


/* ─── SECCIONES ────────────────────────────────── */
.usr-card__section {
    padding: 0.7rem 1rem;
    border-top: 1px dashed rgba(46, 92, 158, 0.22);
    display: flex; flex-direction: column; gap: 0.4rem;
}
.usr-card__section-label {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.7rem; font-weight: 700;
    color: #5a7a9a; text-transform: uppercase; letter-spacing: 0.05em;
}
.usr-card__section-label .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; }

.usr-card__assignments {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
}
@media (min-width: 540px) {
    .usr-card__assignments { grid-template-columns: 1fr 1fr; }
}
.usr-card__col {
    display: flex; flex-direction: column; gap: 0.35rem;
    min-width: 0;
}

.usr-card__tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.usr-card__empty {
    font-size: 0.78rem; color: #94a3b8; font-style: italic;
}

.usr-tag {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem; font-weight: 600;
    border-radius: 0.35rem;
    border: 1px solid transparent;
}
.usr-tag .material-symbols-outlined { font-size: 0.9rem; }
.usr-tag--rol {
    background: linear-gradient(135deg, #fff4e3, #ffe1bd);
    color: #92400e;
    border-color: rgba(146, 64, 14, 0.22);
}
.usr-tag--esp {
    background: linear-gradient(135deg, #e8f1fc, #d0e1f7);
    color: #1a3c6e;
    border-color: rgba(46, 92, 158, 0.22);
}
.usr-tag--proc {
    background: linear-gradient(135deg, #e7f6ec, #d4f0dc);
    color: #166534;
    border-color: rgba(22, 101, 52, 0.22);
}

/* ─── FOOTER acción ────────────────────────────── */
.usr-card__footer {
    display: flex;
    justify-content: flex-end;
    padding: 0.65rem 1rem 0.85rem 1rem;
    border-top: 1px dashed rgba(46, 92, 158, 0.22);
    margin-top: auto;
}
.usr-card__action {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.45rem 0.95rem;
    border: none;
    border-radius: 0.45rem;
    background: linear-gradient(135deg, #1a3c6e, #2e5c9e);
    color: #fff;
    font-size: 0.82rem; font-weight: 600;
    cursor: pointer;
    box-shadow: 0 0.2rem 0.45rem rgba(26, 60, 110, 0.25);
    transition: all 0.18s ease;
}
.usr-card__action:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.3rem 0.7rem rgba(26, 60, 110, 0.35);
    color: #fff;
}
.usr-card__action .material-symbols-outlined { font-size: 1rem; }

/* Empty state */
.usr-empty {
    grid-column: 1 / -1;
    background: #fff;
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.65rem;
    padding: 2.5rem 1rem; text-align: center; color: #5a7a9a;
}
.usr-empty .material-symbols-outlined { font-size: 3rem; color: rgba(46, 92, 158, 0.5); }
.usr-empty h5 { margin: 0.5rem 0 0.2rem; font-weight: 700; color: #1a3c6e; font-size: 1rem; }
.usr-empty p { margin: 0; font-size: 0.85rem; }


/* =============================================================================
   PUNTAJE · FatherComponent.vue
   Componente:  resources/js/components/puntaje/FatherComponent.vue
   Apartado:    Shell del módulo puntaje
   Prefijo:     .pt-shell, .pt-content
   ============================================================================= */
.csj-shell__content.pt-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.pt-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.85rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.pt-scroll::-webkit-scrollbar { width: 0.6rem; }
.pt-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    border-radius: 999px;
}
.pt-scroll::-webkit-scrollbar-track { background: #f1f5f9; }

.pt-footer {
    flex-shrink: 0;
    padding: 0.65rem 1rem;
    border-top: 1px solid rgba(46, 92, 158, 0.18);
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
}
.pt-footer .ms-paginate {
    margin-top: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}


/* =============================================================================
   PUNTAJE · ListComponent.vue
   Componente:  resources/js/components/puntaje/ListComponent.vue
   Apartado:    Listado de capítulos/actividades del puntaje
   Prefijo:     .pt-list*, .pt-row*
   ============================================================================= */
.pt-list {
    display: flex; flex-direction: column;
    gap: 0.75rem;
}

/* ─── CARD ─── */
.pt-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.7rem;
    padding: 0.85rem 1rem 0.85rem 1.3rem;
    box-shadow: 0 1px 2px rgba(15, 28, 50, 0.04);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    display: flex; flex-direction: column; gap: 0.7rem;
}
.pt-card:hover {
    box-shadow: 0 0.4rem 1rem rgba(46, 92, 158, 0.14);
    border-color: rgba(46, 92, 158, 0.42);
    transform: translateY(-1px);
}
.pt-card::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0;
    width: 0.4rem;
    border-top-left-radius: 0.7rem; border-bottom-left-radius: 0.7rem;
    background: linear-gradient(180deg, #1a3c6e, #2e5c9e);
}
.pt-card.is-inactive::before {
    background: linear-gradient(180deg, #94a3b8, #64748b);
}

/* Header */
.pt-card__head {
    display: flex; align-items: flex-start; gap: 0.75rem;
}
.pt-card__num {
    width: 2.5rem; height: 2.5rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    font-family: 'Merriweather', serif;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.25);
}
.pt-card.is-inactive .pt-card__num {
    background: linear-gradient(135deg, #94a3b8, #64748b);
    box-shadow: 0 0.15rem 0.4rem rgba(100, 116, 139, 0.25);
}

.pt-card__title-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.pt-card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #1a3c6e;
    line-height: 1.3;
    font-family: 'Merriweather', serif;
    word-break: break-word;
}
.pt-card__desc {
    margin: 0;
    font-size: 0.82rem;
    color: #5a7a9a;
    line-height: 1.4;
    white-space: pre-line;
}

.pt-card__actions { display: flex; gap: 0.3rem; flex-shrink: 0; }
.pt-card__btn {
    position: relative;
    width: 2.1rem; height: 2.1rem; border-radius: 0.45rem;
    border: 1px solid rgba(46, 92, 158, 0.22); background: #fff; color: #5a7a9a;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: all 0.18s ease;
}
.pt-card__btn .material-symbols-outlined { font-size: 1.1rem; }
.pt-card__btn:hover { transform: translateY(-1px); }
.pt-card__btn--edit:hover { background: linear-gradient(135deg, #1a3c6e, #2e5c9e); color: #fff; border-color: transparent; box-shadow: 0 0.2rem 0.45rem rgba(26, 60, 110, 0.25); }
.pt-card__btn--del:hover  { background: #d93025; color: #fff; border-color: #d93025; box-shadow: 0 0.2rem 0.45rem rgba(217, 48, 37, 0.25); }
.pt-card__tip {
    position: absolute;
    bottom: calc(100% + 0.35rem);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #1a3c6e; color: #fff;
    padding: 0.25rem 0.5rem;
    border-radius: 0.3rem;
    font-size: 0.7rem; font-weight: 600; white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity 0.18s, transform 0.18s;
    z-index: 5;
}
.pt-card__tip::after {
    content: '';
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #1a3c6e;
}
.pt-card__btn:hover .pt-card__tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Stats: mínimo / máximo + chips */
.pt-card__stats {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 0.5rem 0.75rem;
    align-items: center;
}
@media (max-width: 720px) {
    .pt-card__stats { grid-template-columns: 1fr 1fr; }
    .pt-card__chips { grid-column: 1 / -1; }
}
.pt-stat {
    display: flex; align-items: center; gap: 0.45rem;
    padding: 0.4rem 0.7rem;
    border-radius: 0.45rem;
    border: 1px solid transparent;
}
.pt-stat__icon {
    width: 1.7rem; height: 1.7rem;
    border-radius: 0.35rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem !important;
    flex-shrink: 0;
}
.pt-stat__label {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
}
.pt-stat__value {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.1;
    font-family: 'Merriweather', serif;
    font-variant-numeric: tabular-nums;
}
.pt-stat--min {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-color: rgba(146, 64, 14, 0.22);
}
.pt-stat--min .pt-stat__icon { background: rgba(146, 64, 14, 0.2); color: #92400e; }
.pt-stat--min .pt-stat__label { color: #92400e; }
.pt-stat--min .pt-stat__value { color: #92400e; }
.pt-stat--max {
    background: linear-gradient(135deg, #e7f6ec, #d4f0dc);
    border-color: rgba(22, 101, 52, 0.22);
}
.pt-stat--max .pt-stat__icon { background: rgba(22, 101, 52, 0.2); color: #166534; }
.pt-stat--max .pt-stat__label { color: #166534; }
.pt-stat--max .pt-stat__value { color: #166534; }

.pt-card__chips {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
    justify-content: flex-end;
}
.pt-chip {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
    white-space: nowrap;
}
.pt-chip .material-symbols-outlined { font-size: 0.9rem; }
.pt-chip--required { background: #fdecea; color: #c5221f; border-color: rgba(197, 34, 31, 0.22); }
.pt-chip--optional { background: #e8f1fc; color: #1a3c6e; border-color: rgba(46, 92, 158, 0.22); }
.pt-chip--ok { background: #e7f6ec; color: #166534; border-color: rgba(22, 101, 52, 0.22); }
.pt-chip--off { background: #f1f5f9; color: #475569; border-color: #e2e8ef; }

/* Actividades */
.pt-card__activities {
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.5rem;
    padding: 0.55rem 0.75rem;
    display: flex; flex-direction: column; gap: 0.45rem;
}
.pt-card__act-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.pt-card__act-label {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: #1a3c6e;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pt-card__act-label .material-symbols-outlined {
    font-size: 0.95rem; color: #2e5c9e;
}
.pt-card__act-label b {
    background: rgba(46, 92, 158, 0.12);
    color: #1a3c6e;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
}
.pt-card__add {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.3rem 0.7rem;
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #fff;
    border: 1px solid transparent;
    border-radius: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
    box-shadow: 0 0.15rem 0.4rem rgba(22, 163, 74, 0.3);
}
.pt-card__add:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.3rem 0.7rem rgba(22, 163, 74, 0.4);
}
.pt-card__add .material-symbols-outlined { font-size: 1rem; }

.pt-card__act-list {
    display: flex; flex-wrap: wrap; gap: 0.3rem;
}
.pt-act {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.22);
    border-radius: 0.35rem;
    font-size: 0.78rem;
    color: #2c3e50;
}
.pt-act b {
    background: linear-gradient(135deg, #1a3c6e, #2e5c9e);
    color: #fff;
    padding: 0.05rem 0.4rem;
    border-radius: 0.25rem;
    font-weight: 800;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
}
.pt-card__act-empty {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.4rem 0.55rem;
    background: rgba(46, 92, 158, 0.04);
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.4rem;
    font-size: 0.78rem;
    color: #5a7a9a;
    font-style: italic;
    width: max-content;
}
.pt-card__act-empty .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; }

/* Empty state global */
.pt-empty {
    background: #fff;
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.65rem;
    padding: 2.5rem 1rem; text-align: center; color: #5a7a9a;
}
.pt-empty .material-symbols-outlined { font-size: 3rem; color: rgba(46, 92, 158, 0.5); }
.pt-empty h5 { margin: 0.5rem 0 0.2rem; font-weight: 700; color: #1a3c6e; font-size: 1rem; }
.pt-empty p { margin: 0; font-size: 0.85rem; }
.pt-empty p b { color: #1a3c6e; }


/* =============================================================================
   PUNTAJE · ListActividadesComponent.vue
   Componente:  resources/js/components/puntaje/ListActividadesComponent.vue
   Apartado:    Sub-listado de actividades por capítulo
   Prefijo:     .pt-acts*
   ============================================================================= */
.pt-acts-card { margin-top: 0.5rem; }

.pt-acts__add {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.4rem 0.85rem;
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #fff;
    border: 1px solid transparent;
    border-radius: 0.45rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
    box-shadow: 0 0.15rem 0.4rem rgba(22, 163, 74, 0.3);
}
.pt-acts__add:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.3rem 0.7rem rgba(22, 163, 74, 0.4);
}
.pt-acts__add .material-symbols-outlined { font-size: 1rem; }

/* Lista */
.pt-acts__list {
    display: flex; flex-direction: column; gap: 0.35rem;
    margin-top: 0.5rem;
}
.pt-act-row {
    display: grid;
    grid-template-columns: 2.4rem 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.45rem;
    transition: all 0.18s ease;
}
.pt-act-row:hover {
    border-color: rgba(46, 92, 158, 0.42);
    box-shadow: 0 0.2rem 0.5rem rgba(46, 92, 158, 0.08);
}
.pt-act-row__num {
    background: linear-gradient(135deg, #1a3c6e, #2e5c9e);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    text-align: center;
    padding: 0.25rem 0.4rem;
    border-radius: 0.35rem;
    font-variant-numeric: tabular-nums;
}
.pt-act-row__name {
    color: #1a3c6e;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
}
.pt-act-row__actions { display: flex; gap: 0.3rem; flex-shrink: 0; }
.pt-act-row__btn {
    position: relative;
    width: 1.9rem; height: 1.9rem; border-radius: 0.4rem;
    border: 1px solid rgba(46, 92, 158, 0.22);
    background: #fff;
    color: #5a7a9a;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.18s ease;
}
.pt-act-row__btn .material-symbols-outlined { font-size: 1rem; }
.pt-act-row__btn:hover { transform: translateY(-1px); }
.pt-act-row__btn--edit:hover {
    background: linear-gradient(135deg, #1a3c6e, #2e5c9e);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0.2rem 0.45rem rgba(26, 60, 110, 0.25);
}
.pt-act-row__btn--del:hover {
    background: #d93025;
    color: #fff;
    border-color: #d93025;
    box-shadow: 0 0.2rem 0.45rem rgba(217, 48, 37, 0.25);
}
.pt-act-row__tip {
    position: absolute;
    bottom: calc(100% + 0.35rem);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #1a3c6e;
    color: #fff;
    padding: 0.2rem 0.45rem;
    border-radius: 0.3rem;
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s, transform 0.18s;
    z-index: 5;
}
.pt-act-row__tip::after {
    content: '';
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #1a3c6e;
}
.pt-act-row__btn:hover .pt-act-row__tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Empty */
.pt-acts__empty {
    display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
    padding: 1.5rem 1rem;
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.5rem;
    text-align: center;
    color: #5a7a9a;
    margin-top: 0.5rem;
}
.pt-acts__empty .material-symbols-outlined {
    font-size: 2rem;
    color: rgba(46, 92, 158, 0.5);
}
.pt-acts__empty h5 {
    margin: 0.3rem 0 0;
    font-weight: 700;
    color: #1a3c6e;
    font-size: 0.9rem;
}
.pt-acts__empty p {
    margin: 0;
    font-size: 0.78rem;
}


/* =============================================================================
   PUNTAJE · FormComponent.vue
   Componente:  resources/js/components/puntaje/FormComponent.vue
   Apartado:    Form capítulo
   Prefijo:     .pt-form*
   ============================================================================= */
.pt-form__hint {
    margin: 0 0 0.55rem 0;
    display: flex; align-items: flex-start; gap: 0.4rem;
    font-size: 0.78rem; line-height: 1.45;
    color: #1a3c6e;
    background: rgba(46, 92, 158, 0.07);
    border: 1px solid rgba(46, 92, 158, 0.2);
    border-radius: 0.45rem;
    padding: 0.55rem 0.7rem;
}
.pt-form__hint .material-symbols-outlined {
    font-size: 1rem; color: #2e5c9e; flex-shrink: 0; margin-top: 0.05rem;
}
.pt-form__hint b { color: #1a3c6e; font-weight: 700; }

.pt-form__group {
    display: flex; flex-direction: column; gap: 0.4rem;
}
.pt-form__label {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    color: #5a7a9a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


/* =============================================================================
   PUNTAJE · FormActividadComponent.vue
   Componente:  resources/js/components/puntaje/FormActividadComponent.vue
   Apartado:    Form actividad
   Prefijo:     .pt-form*
   ============================================================================= */
.pt-form__hint {
    margin: 0 0 0.55rem 0;
    display: flex; align-items: flex-start; gap: 0.4rem;
    font-size: 0.78rem; line-height: 1.45;
    color: #1a3c6e;
    background: rgba(46, 92, 158, 0.07);
    border: 1px solid rgba(46, 92, 158, 0.2);
    border-radius: 0.45rem;
    padding: 0.55rem 0.7rem;
}
.pt-form__hint .material-symbols-outlined {
    font-size: 1rem; color: #2e5c9e; flex-shrink: 0; margin-top: 0.05rem;
}
.pt-form__hint b { color: #1a3c6e; font-weight: 700; }

.pt-form__group {
    display: flex; flex-direction: column; gap: 0.4rem;
}
.pt-form__label {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    color: #5a7a9a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


/* =============================================================================
   SOLICITUDES ASIGNADAS · FatherComponent.vue
   Componente:  resources/js/components/solicitudes_asignadas/FatherComponent.vue
   Apartado:    Shell del módulo (rol coordinador)
   Prefijo:     .sa-shell, .sa-content
   ============================================================================= */
.csj-shell__content.sa-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.sa-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.85rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.sa-scroll::-webkit-scrollbar { width: 0.6rem; }
.sa-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    border-radius: 999px;
}
.sa-scroll::-webkit-scrollbar-track { background: #f1f5f9; }


/* =============================================================================
   SOLICITUDES ASIGNADAS · ListComponent.vue
   Componente:  resources/js/components/solicitudes_asignadas/ListComponent.vue
   Apartado:    Listado de solicitudes asignadas
   Prefijo:     .sa-list*, .sa-card*
   ============================================================================= */
.sa-list {
    display: flex; flex-direction: column; gap: 0.65rem;
}

.sa-list__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.25rem 0;
}
.sa-list__title {
    margin: 0;
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.92rem; font-weight: 700;
    color: #1a3c6e;
    font-family: 'Merriweather', serif;
}
.sa-list__title .material-symbols-outlined { font-size: 1.15rem; color: #2e5c9e; }
.sa-list__count {
    background: linear-gradient(135deg, #1a3c6e, #2e5c9e);
    color: #fff;
    padding: 0.05rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}
.sa-list__hint {
    margin: 0;
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.78rem;
    color: #5a7a9a;
    font-weight: 500;
}
.sa-list__hint .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; }

/* ─── ITEMS ────────────────────────────────────── */
.sa-list__items {
    display: flex; flex-direction: column;
    gap: 0.55rem;
}

.sa-item {
    position: relative;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.65rem;
    padding: 0.75rem 0.95rem 0.75rem 1.2rem;
    box-shadow: 0 1px 2px rgba(15, 28, 50, 0.04);
    transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.sa-item:hover {
    box-shadow: 0 0.4rem 1rem rgba(46, 92, 158, 0.14);
    border-color: rgba(46, 92, 158, 0.42);
    transform: translateY(-1px);
}
.sa-item::before {
    content: '';
    position: absolute; top: 0; left: 0; bottom: 0;
    width: 0.4rem;
    border-top-left-radius: 0.65rem;
    border-bottom-left-radius: 0.65rem;
}
.sa-item--ok::before   { background: linear-gradient(180deg, #22c55e, #16a34a); }
.sa-item--warn::before { background: linear-gradient(180deg, #f59e0b, #d97706); }
.sa-item--bad::before  { background: linear-gradient(180deg, #ef4444, #b91c1c); }

.sa-item__main {
    display: flex; flex-direction: column; gap: 0.5rem;
}

/* Head: médico + prioridad */
.sa-item__head {
    display: flex; align-items: flex-start; gap: 0.7rem;
    flex-wrap: wrap;
}
.sa-item__doc {
    display: flex; align-items: flex-start; gap: 0.55rem;
    flex: 1; min-width: 0;
}
.sa-item__doc-icon {
    width: 2.2rem; height: 2.2rem; border-radius: 0.45rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.2rem !important;
    flex-shrink: 0;
}
.sa-item__doc-info {
    display: flex; flex-direction: column; gap: 0.15rem;
    min-width: 0;
}
.sa-item__doc-name {
    margin: 0;
    font-size: 0.95rem; font-weight: 700;
    color: #1a3c6e;
    line-height: 1.3;
    word-break: break-word;
}
.sa-item__doc-revisor {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.78rem; color: #5a7a9a;
    flex-wrap: wrap;
}
.sa-item__doc-revisor .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; }
.sa-item__doc-revisor b { color: #1a3c6e; }
.sa-item__warn {
    display: inline;
    color: #c5221f;
    font-weight: 600;
    margin-left: 0.3rem;
}

/* Prioridad */
.sa-item__priority {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border-radius: 0.45rem;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid transparent;
    flex-shrink: 0;
}
.sa-item__priority .material-symbols-outlined { font-size: 1rem; }
.sa-item__priority b {
    font-size: 1.05rem;
    font-weight: 800;
}
.sa-item__priority small {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    opacity: 0.85;
    line-height: 1;
}
.sa-item__priority--ok {
    background: #e7f6ec; color: #166534; border-color: rgba(22, 101, 52, 0.22);
}
.sa-item__priority--warn {
    background: #fef3c7; color: #92400e; border-color: rgba(146, 64, 14, 0.22);
}
.sa-item__priority--bad {
    background: #fdecea; color: #c5221f; border-color: rgba(197, 34, 31, 0.22);
}

/* Tags */
.sa-item__tags {
    display: flex; flex-wrap: wrap; gap: 0.3rem;
}
.sa-tag {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem; font-weight: 600;
    border-radius: 0.35rem;
    border: 1px solid transparent;
}
.sa-tag .material-symbols-outlined { font-size: 0.9rem; }
.sa-tag--esp {
    background: linear-gradient(135deg, #e8f1fc, #d0e1f7);
    color: #1a3c6e; border-color: rgba(46, 92, 158, 0.22);
}
.sa-tag--proc {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e; border-color: rgba(146, 64, 14, 0.22);
}
.sa-tag--conv {
    background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
    color: #6a1b9a; border-color: rgba(106, 27, 154, 0.22);
}
.sa-tag--situ {
    background: linear-gradient(135deg, #e7f6ec, #d4f0dc);
    color: #166534; border-color: rgba(22, 101, 52, 0.22);
}

/* Footer */
.sa-item__footer {
    display: flex; align-items: center; gap: 0.85rem;
    flex-wrap: wrap;
    padding-top: 0.45rem;
    border-top: 1px dashed rgba(46, 92, 158, 0.22);
}
.sa-item__meta {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.78rem; color: #5a7a9a;
}
.sa-item__meta .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; }
.sa-item__meta b { color: #1a3c6e; }

.sa-item__status {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    border: 1px solid transparent;
}
.sa-item__status .material-symbols-outlined { font-size: 0.9rem; }
.sa-item__status.is-pending {
    background: #fef3c7; color: #92400e; border-color: rgba(146, 64, 14, 0.22);
}
.sa-item__status.is-done {
    background: #e7f6ec; color: #166534; border-color: rgba(22, 101, 52, 0.22);
}

.sa-item__points {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.18rem 0.55rem;
    border-radius: 0.4rem;
    background: linear-gradient(135deg, rgba(46, 92, 158, 0.08), rgba(46, 92, 158, 0.16));
    border: 1px solid rgba(46, 92, 158, 0.25);
    color: #1a3c6e;
    font-size: 0.78rem;
    font-weight: 600;
}
.sa-item__points .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; }
.sa-item__points b { font-weight: 700; }

/* Empty */
.sa-empty {
    background: #fff;
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.65rem;
    padding: 2.5rem 1rem; text-align: center; color: #5a7a9a;
}
.sa-empty .material-symbols-outlined { font-size: 3rem; color: rgba(46, 92, 158, 0.5); }
.sa-empty h5 { margin: 0.5rem 0 0.2rem; font-weight: 700; color: #1a3c6e; font-size: 1rem; }
.sa-empty p { margin: 0; font-size: 0.85rem; }


/* =============================================================================
   SOLICITUDES ASIGNADAS · StatsComponent.vue
   Componente:  resources/js/components/solicitudes_asignadas/StatsComponent.vue
   Apartado:    Sección de estadísticas/KPIs
   Prefijo:     .sa-stats*
   ============================================================================= */
.sa-stats {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* ─── HERO (Total general + prioridad) ─── */
.sa-stats__hero {
    display: flex; align-items: center; gap: 0.95rem;
    flex-wrap: wrap;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    border-radius: 0.75rem;
    padding: 1rem 1.15rem;
    box-shadow: 0 0.3rem 0.8rem rgba(26, 60, 110, 0.25);
    position: relative;
    overflow: hidden;
}
.sa-stats__hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 15% 50%, rgba(255,255,255,0.12) 0%, transparent 55%);
    pointer-events: none;
}

.sa-stats__hero-icon {
    width: 3.2rem; height: 3.2rem;
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    z-index: 1;
}
.sa-stats__hero-icon .material-symbols-outlined {
    font-size: 1.65rem; color: #fff;
}

.sa-stats__hero-body {
    display: flex; flex-direction: column;
    z-index: 1;
}
.sa-stats__hero-label {
    font-size: 0.72rem; font-weight: 700;
    color: rgba(255, 255, 255, 0.78);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.sa-stats__hero-value {
    font-size: 2.1rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    margin: 0.1rem 0;
    font-family: 'Merriweather', serif;
}
.sa-stats__hero-hint {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.78);
}

.sa-stats__priority {
    margin-left: auto;
    display: flex; gap: 0.45rem; flex-wrap: wrap;
    z-index: 1;
}
.sa-stats__priority-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 0.45rem;
    font-size: 0.78rem; font-weight: 700;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.22);
    cursor: pointer;
    transition: all 0.18s ease;
    user-select: none;
}
.sa-stats__priority-chip .material-symbols-outlined { font-size: 0.95rem; }
.sa-stats__priority-chip b {
    margin-left: 0.15rem;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.78rem;
}
.sa-stats__priority-chip:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}
.sa-stats__priority-chip.is-active {
    background: #fff;
    color: #1a3c6e;
    border-color: #fff;
    box-shadow: 0 0.2rem 0.45rem rgba(0,0,0,0.15);
}
.sa-stats__priority-chip.is-active b { background: rgba(26, 60, 110, 0.15); color: #1a3c6e; }
.sa-priority--ok.is-active { color: #166534; }
.sa-priority--warn.is-active { color: #92400e; }
.sa-priority--bad.is-active { color: #c5221f; }

/* ─── GRID 4 columnas ─── */
.sa-stats__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
}
@media (min-width: 720px) { .sa-stats__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .sa-stats__grid { grid-template-columns: repeat(4, 1fr); } }

.sa-stats__col {
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.65rem;
    box-shadow: 0 1px 2px rgba(15, 28, 50, 0.04);
    display: flex; flex-direction: column;
    overflow: hidden;
    max-height: 16rem;
}
.sa-stats__col-head {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.55rem 0.8rem;
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
    border-bottom: 1px solid rgba(46, 92, 158, 0.18);
    font-size: 0.78rem; font-weight: 700;
    color: #1a3c6e; text-transform: uppercase; letter-spacing: 0.05em;
}
.sa-stats__col-head .material-symbols-outlined {
    font-size: 1.05rem; color: #2e5c9e;
}
.sa-stats__col-count {
    margin-left: auto;
    background: rgba(46, 92, 158, 0.1);
    color: #1a3c6e;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
}

.sa-stats__col-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.45rem 0.5rem;
    display: flex; flex-direction: column; gap: 0.25rem;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.sa-stats__col-body::-webkit-scrollbar { width: 0.4rem; }
.sa-stats__col-body::-webkit-scrollbar-thumb {
    background: rgba(46, 92, 158, 0.35);
    border-radius: 999px;
}

.sa-stats__row {
    position: relative;
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.4rem;
    font-size: 0.82rem;
    color: #2c3e50;
    text-align: left;
    cursor: pointer;
    transition: all 0.18s ease;
    width: 100%;
}
.sa-stats__row:hover {
    background: rgba(46, 92, 158, 0.06);
    border-color: rgba(46, 92, 158, 0.42);
}
.sa-stats__row.is-active {
    background: linear-gradient(135deg, rgba(46, 92, 158, 0.1), rgba(46, 92, 158, 0.18));
    border-color: rgba(46, 92, 158, 0.55);
    color: #1a3c6e;
    font-weight: 600;
    box-shadow: 0 0.15rem 0.35rem rgba(26, 60, 110, 0.15);
}
.sa-stats__row-name {
    flex: 1;
    min-width: 0;
    line-height: 1.3;
    word-break: break-word;
}
.sa-stats__row-total {
    flex-shrink: 0;
    background: rgba(46, 92, 158, 0.12);
    color: #1a3c6e;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    min-width: 1.8rem;
    text-align: center;
}
.sa-stats__row.is-active .sa-stats__row-total {
    background: linear-gradient(135deg, #1a3c6e, #2e5c9e);
    color: #fff;
}
.sa-stats__warn {
    display: block;
    color: #c5221f;
    font-size: 0.7rem;
    margin-top: 0.1rem;
}
.sa-stats__empty {
    margin: 0.5rem auto;
    font-size: 0.78rem;
    color: #94a3b8;
    font-style: italic;
    text-align: center;
}

/* Chip "Duplicados" en el hero (rojo suave sobre el banner navy) */
.sa-priority--dup {
    background: rgba(220, 38, 38, 0.25) !important;
    border-color: rgba(255, 200, 200, 0.45) !important;
    color: #fff;
}
.sa-priority--dup:hover {
    background: rgba(220, 38, 38, 0.45) !important;
}
.sa-priority--dup.is-active {
    background: #d93025 !important;
    color: #fff !important;
    border-color: #d93025 !important;
    box-shadow: 0 0.2rem 0.5rem rgba(217, 48, 37, 0.4);
}
.sa-priority--dup.is-active b {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* ─── SECCIÓN DE DUPLICADOS ─── */
.sa-dup {
    background: #fff;
    border: 1px solid rgba(217, 48, 37, 0.28);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(15, 28, 50, 0.05);
    overflow: hidden;
    scroll-margin-top: 1rem;
}

.sa-dup__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, rgba(217, 48, 37, 0.08) 0%, rgba(217, 48, 37, 0.02) 100%);
    border-bottom: 1px solid rgba(217, 48, 37, 0.22);
}
.sa-dup__head-info {
    display: flex; align-items: center; gap: 0.7rem;
    min-width: 0;
}
.sa-dup__head-icon {
    width: 2.4rem; height: 2.4rem;
    border-radius: 0.55rem;
    background: linear-gradient(135deg, #d93025 0%, #b91c1c 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.3rem !important;
    flex-shrink: 0;
    box-shadow: 0 0.15rem 0.4rem rgba(217, 48, 37, 0.3);
}
.sa-dup__head-info h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #991b1b;
    font-family: 'Merriweather', serif;
}
.sa-dup__head-info p {
    margin: 0.1rem 0 0;
    font-size: 0.78rem;
    color: #5a7a9a;
}
.sa-dup__head-badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: #d93025;
    color: #fff;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    flex-shrink: 0;
}
.sa-dup__head-badge b { font-size: 0.95rem; font-weight: 800; }

.sa-dup__list {
    display: flex; flex-direction: column;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
}

.sa-dup__item {
    border: 1px solid rgba(217, 48, 37, 0.22);
    border-radius: 0.6rem;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.sa-dup__item:hover {
    border-color: rgba(217, 48, 37, 0.45);
    box-shadow: 0 0.3rem 0.8rem rgba(217, 48, 37, 0.1);
}

.sa-dup__item-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
    background: linear-gradient(180deg, #fff5f5 0%, #ffffff 100%);
    border-bottom: 1px dashed rgba(217, 48, 37, 0.22);
    flex-wrap: wrap;
}
.sa-dup__doc {
    display: flex; align-items: flex-start; gap: 0.55rem;
    flex: 1; min-width: 0;
}
.sa-dup__doc-icon {
    width: 2.1rem; height: 2.1rem;
    border-radius: 0.45rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem !important;
    flex-shrink: 0;
}
.sa-dup__doc h4 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #1a3c6e;
    line-height: 1.3;
    word-break: break-word;
}
.sa-dup__doc-meta-row {
    display: flex; flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    margin-top: 0.2rem;
}
.sa-dup__doc-meta {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.78rem;
    color: #5a7a9a;
}
.sa-dup__doc-meta .material-symbols-outlined {
    font-size: 0.95rem;
    color: #2e5c9e;
}

.sa-dup__chips {
    display: flex; flex-wrap: wrap; gap: 0.3rem;
    flex-shrink: 0;
}
.sa-dup__chip {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem; font-weight: 600;
    border-radius: 0.35rem;
    border: 1px solid transparent;
}
.sa-dup__chip .material-symbols-outlined { font-size: 0.9rem; }
.sa-dup__chip b { font-weight: 700; }
.sa-dup__chip--total {
    background: linear-gradient(135deg, #1a3c6e, #2e5c9e);
    color: #fff;
    border-color: transparent;
}
.sa-dup__chip--act {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border-color: rgba(146, 64, 14, 0.22);
}
.sa-dup__chip--his {
    background: linear-gradient(135deg, #f1f5f9, #e2e8ef);
    color: #475569;
    border-color: #e2e8ef;
}
.sa-dup__chip--same {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border-color: rgba(146, 64, 14, 0.22);
}
.sa-dup__chip--diff {
    background: linear-gradient(135deg, #e8f1fc, #d0e1f7);
    color: #1a3c6e;
    border-color: rgba(46, 92, 158, 0.22);
}

.sa-dup__sols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem;
}
@media (min-width: 720px) {
    .sa-dup__sols { grid-template-columns: repeat(2, 1fr); }
}

.sa-dup__sol {
    position: relative;
    padding: 0.55rem 0.7rem 0.55rem 0.95rem;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.45rem;
    display: flex; flex-direction: column; gap: 0.35rem;
}
.sa-dup__sol::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 0.25rem;
    border-top-left-radius: 0.45rem;
    border-bottom-left-radius: 0.45rem;
}
.sa-dup__sol.is-activa::before {
    background: linear-gradient(180deg, #f59e0b, #d97706);
}
.sa-dup__sol.is-historica::before {
    background: linear-gradient(180deg, #94a3b8, #64748b);
}

.sa-dup__sol-state {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    border: 1px solid transparent;
    width: max-content;
}
.sa-dup__sol-state .material-symbols-outlined { font-size: 0.85rem; }
.sa-dup__sol-state.is-activa {
    background: #fef3c7;
    color: #92400e;
    border-color: rgba(146, 64, 14, 0.22);
}
.sa-dup__sol-state.is-historica {
    background: #f1f5f9;
    color: #475569;
    border-color: #e2e8ef;
}

.sa-dup__sol-info {
    display: flex; flex-direction: column; gap: 0.2rem;
}
.sa-dup__sol-row {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.78rem;
    color: #2c3e50;
    line-height: 1.4;
}
.sa-dup__sol-row .material-symbols-outlined {
    font-size: 0.95rem;
    color: #2e5c9e;
    flex-shrink: 0;
}
.sa-dup__sol-row b { color: #1a3c6e; }
.sa-dup__sol-row--muted {
    color: #94a3b8;
    font-style: italic;
}
.sa-dup__sol-status {
    color: #5a7a9a;
    font-weight: 500;
}


/* =============================================================================
   SOLICITUDES PROCESO · FatherComponent.vue
   Componente:  resources/js/components/solicitudes_proceso/FatherComponent.vue
   Apartado:    Shell del módulo
   Prefijo:     .rsp-shell, .rsp-content
   ============================================================================= */
.csj-shell__content.rsp-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.rsp-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.85rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.rsp-scroll::-webkit-scrollbar { width: 0.6rem; }
.rsp-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    border-radius: 999px;
}
.rsp-scroll::-webkit-scrollbar-track { background: #f1f5f9; }

.rsp-footer {
    flex-shrink: 0;
    padding: 0.65rem 1rem;
    border-top: 1px solid rgba(46, 92, 158, 0.18);
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
}
.rsp-footer .ms-paginate {
    margin-top: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}


/* =============================================================================
   SOLICITUDES PROCESO · ListComponent.vue
   Componente:  resources/js/components/solicitudes_proceso/ListComponent.vue
   Apartado:    Listado de solicitudes por proceso
   Prefijo:     .rsp-list*, .rsp-card*
   ============================================================================= */
.rsp-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 1280px) {
    .rsp-list { grid-template-columns: repeat(2, 1fr); }
}

/* ─── CARD ─── */
.rsp-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.7rem;
    padding: 0.85rem 1rem 0.85rem 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 28, 50, 0.04);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-flow: column;
    gap: 0.65rem;
}
.rsp-card:hover {
    box-shadow: 0 0.4rem 1rem rgba(46, 92, 158, 0.14);
    border-color: rgba(46, 92, 158, 0.42);
    transform: translateY(-1px);
}
.rsp-card::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0;
    width: 0.35rem;
    border-top-left-radius: 0.7rem; border-bottom-left-radius: 0.7rem;
    background: linear-gradient(180deg, #1a3c6e, #2e5c9e);
}

/* Header */
.rsp-card__head {
    display: flex; align-items: flex-start; gap: 0.7rem;
    flex-wrap: wrap;
}
.rsp-card__avatar {
    width: 2.8rem; height: 2.8rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.25);
}
.rsp-card__avatar .material-symbols-outlined { font-size: 1.5rem; }

.rsp-card__identity { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.rsp-card__name {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a3c6e;
    line-height: 1.3;
    font-family: 'Merriweather', serif;
    word-break: break-word;
}
.rsp-card__specialty {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.78rem;
    color: #5a7a9a;
    width: max-content;
    max-width: 100%;
}
.rsp-card__specialty .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; flex-shrink: 0; }

.rsp-card__state {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.72rem; font-weight: 700;
    border-radius: 0.4rem;
    border: 1px solid transparent;
    text-transform: uppercase; letter-spacing: 0.04em;
    flex-shrink: 0;
}
.rsp-card__state .material-symbols-outlined { font-size: 1rem; }
.rsp-card__state.is-active {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: #166534; border-color: rgba(22, 101, 52, 0.25);
}
.rsp-card__state.is-historic {
    background: linear-gradient(135deg, rgba(46, 92, 158, 0.08), rgba(46, 92, 158, 0.18));
    color: #1a3c6e; border-color: rgba(46, 92, 158, 0.25);
}

/* Tags */
.rsp-card__tags {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
}
.rsp-tag {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem; font-weight: 600;
    border-radius: 0.35rem;
    border: 1px solid transparent;
}
.rsp-tag .material-symbols-outlined { font-size: 0.9rem; }
.rsp-tag--conv {
    background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
    color: #6a1b9a; border-color: rgba(106, 27, 154, 0.22);
}
.rsp-tag--sit {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e; border-color: rgba(146, 64, 14, 0.22);
}

/* Body grid */
.rsp-card__body {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    padding-top: 0.55rem;
    border-top: 1px dashed rgba(46, 92, 158, 0.22);
}
@media (max-width: 760px) {
    .rsp-card__body { grid-template-columns: 1fr; }
}

.rsp-block {
    background: #f7fafd;
    border: 1px solid rgba(46, 92, 158, 0.14);
    border-radius: 0.45rem;
    padding: 0.5rem 0.65rem;
}
.rsp-block__label {
    margin: 0 0 0.3rem 0;
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.65rem; font-weight: 800;
    color: #5a7a9a;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.rsp-block__label .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; }
.rsp-block__value {
    margin: 0;
    font-size: 0.82rem; font-weight: 700;
    color: #1a3c6e;
    line-height: 1.3;
    word-break: break-word;
}
.rsp-block__value small {
    font-size: 0.7rem; font-weight: 500; color: #5a7a9a;
    margin: 0 0.25rem;
}
.rsp-block__sub {
    margin: 0.25rem 0 0 0;
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.72rem; color: #5a7a9a;
    line-height: 1.3;
    flex-wrap: wrap;
}
.rsp-block__sub .material-symbols-outlined { font-size: 0.85rem; color: #94a3b8; }
.rsp-block__sub b { color: #1a3c6e; font-weight: 700; }
.rsp-block__empty {
    margin: 0;
    font-size: 0.75rem; color: #94a3b8; font-style: italic;
}

/* Puntaje */
.rsp-points { display: flex; flex-direction: column; gap: 0.3rem; }
.rsp-points__main {
    display: inline-flex; align-items: baseline; gap: 0.3rem;
}
.rsp-points__main b {
    font-size: 1.15rem; font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.rsp-points__main b.is-ok { color: #166534; }
.rsp-points__main b.is-low { color: #c2410c; }
.rsp-points__main small { font-size: 0.72rem; color: #5a7a9a; }
.rsp-points__bar {
    height: 0.4rem; background: rgba(46, 92, 158, 0.12);
    border-radius: 999px; overflow: hidden;
}
.rsp-points__fill {
    height: 100%; border-radius: 999px;
    transition: width 0.4s ease;
}
.rsp-points__fill.is-ok  { background: linear-gradient(90deg, #16a34a, #15803d); }
.rsp-points__fill.is-low { background: linear-gradient(90deg, #f97316, #ea580c); }

/* Evaluación chip */
.rsp-eval {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.rsp-eval .material-symbols-outlined { font-size: 0.85rem; }
.rsp-eval.is-ok {
    background: #dcfce7; color: #166534;
}
.rsp-eval.is-pending {
    background: #fef3c7; color: #92400e;
}

/* Acciones */
.rsp-card__actions {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    padding-top: 0.55rem;
    border-top: 1px dashed rgba(46, 92, 158, 0.22);
    margin-top: auto;
}
.rsp-card__btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 0.45rem;
    font-size: 0.78rem; font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    flex: 1; justify-content: center;
    min-width: 9rem;
}
.rsp-card__btn .material-symbols-outlined { font-size: 1rem; }
.rsp-card__btn--review {
    background: linear-gradient(135deg, #2e5c9e 0%, #5b8acc 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0.15rem 0.4rem rgba(46, 92, 158, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.rsp-card__btn--review:hover {
    background: linear-gradient(135deg, #1a3c6e 0%, #4a7bbf 100%);
    transform: translateY(-1px);
    box-shadow: 0 0.3rem 0.7rem rgba(46, 92, 158, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
    color: #fff;
}
.rsp-card__btn--pdf {
    background: #fff;
    color: #b91c1c;
    border-color: rgba(185, 28, 28, 0.3);
}
.rsp-card__btn--pdf:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: #fff;
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.5rem rgba(185, 28, 28, 0.3);
}

/* Empty state */
.rsp-empty {
    grid-column: 1 / -1;
    background: #fff;
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.65rem;
    padding: 2.5rem 1rem; text-align: center; color: #5a7a9a;
}
.rsp-empty .material-symbols-outlined { font-size: 3rem; color: rgba(46, 92, 158, 0.5); }
.rsp-empty h5 { margin: 0.5rem 0 0.2rem; font-weight: 700; color: #1a3c6e; font-size: 1rem; }
.rsp-empty p { margin: 0; font-size: 0.85rem; }


/* =============================================================================
   SOLICITUDES PROCESO · SolicitudComponent.vue
   Componente:  resources/js/components/solicitudes_proceso/SolicitudComponent.vue
   Apartado:    Vista de solicitud individual
   Prefijo:     .sp-shell, .sp-*
   ============================================================================= */
.sp-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 93vh;
  background: #f7fafd;
  box-sizing: border-box;
}
.sp-shell *, .sp-shell *::before, .sp-shell *::after { box-sizing: border-box; }

/* HEADER */
.sp-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1rem;
  background: white;
  border-bottom: 1px solid rgba(46, 92, 158, 0.18);
  flex-shrink: 0;
  position: relative;
}

@media (max-width: 1100px) {
  .sp-header {
    grid-template-columns: auto 1fr;
    row-gap: 0.55rem;
    align-items: center;
  }
  .sp-legend { grid-column: 1 / -1; }
  .sp-doctor { width: 100%; }
}

@media (max-width: 992px) {
  .sp-header {
    position: sticky;
    top: 0;
    z-index: 30;
    box-shadow: 0 0.2rem 0.5rem rgba(26, 60, 110, 0.08);
  }
}

@media (max-width: 600px) {
  .sp-back-btn {
    padding: 0.45rem;
    gap: 0;
    font-size: 0;
    line-height: 0;
  }
  .sp-back-btn span.material-symbols-outlined { font-size: 1.25rem; }
  .sp-doctor { padding: 0.4rem 0.6rem; gap: 0.55rem; }
  .sp-doctor__avatar { width: 2.3rem; height: 2.3rem; }
  .sp-doctor__name {
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.2;
    font-size: 0.9rem;
  }
}

.sp-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 0.85rem;
  background: #f7fafd;
  color: #5a7a9a;
  border: 1px solid rgba(46, 92, 158, 0.25);
  border-radius: 0.4rem;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: 0.15s;
  font-family: inherit;
}
.sp-back-btn:hover { background: rgba(46, 92, 158, 0.08); color: #1a3c6e; border-color: rgba(46, 92, 158, 0.4); }
.sp-back-btn span { font-size: 1.15rem; }

.sp-doctor {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  background: #f7fafd;
  border: 1px solid rgba(46, 92, 158, 0.18);
  border-radius: 0.5rem;
  padding: 0.45rem 0.85rem;
}
.sp-doctor__avatar {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(46, 92, 158, 0.18);
  flex-shrink: 0;
}
.sp-doctor__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-doctor__info { min-width: 0; }
.sp-doctor__name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a3c6e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Merriweather', serif;
}
.sp-doctor__sub {
  margin: 0.1rem 0 0 0;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  color: #5a7a9a;
}
.sp-doctor__sub .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; }
.sp-doctor__sub b { color: #1a3c6e; font-weight: 700; }

/* LEYENDA */
.sp-legend {
  display: inline-flex; align-items: center; gap: 0.4rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.sp-legend__item {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.72rem; font-weight: 600;
  border-radius: 0.4rem;
  border: 1px solid transparent;
}
.sp-legend__item .material-symbols-outlined { font-size: 0.95rem; }
.sp-legend__item.is-pending  { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.sp-legend__item.is-accepted { background: #dcfce7; color: #166534; border-color: #86efac; }
.sp-legend__item.is-rejected { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }

/* BODY SPLIT */
.sp-body {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

/* IZQUIERDA */
.sp-list {
  flex: 0 0 35%;
  width: 35%;
  min-width: 35%;
  max-width: 35%;
  background: white;
  border-right: 1px solid rgba(46, 92, 158, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sp-tabs {
  display: flex;
  border-bottom: 1px solid rgba(46, 92, 158, 0.18);
  background: white;
  flex-shrink: 0;
}
.sp-tab {
  flex: 1 1 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.7rem 0.4rem;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  color: #5a7a9a;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  transition: 0.15s;
  font-family: inherit;
  position: relative;
}
.sp-tab:hover { color: #2e5c9e; background: #f7fafd; }
.sp-tab span.material-symbols-outlined { font-size: 1rem; }
.sp-tab--active { color: #2e5c9e; border-bottom-color: #2e5c9e; background: rgba(46, 92, 158, 0.06); }
.sp-tab__badge {
  background: #dc2626;
  color: white;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  margin-left: 0.2rem;
}

.sp-list__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.7rem;
  min-height: 0;
}

/* CAPÍTULO */
.sp-cap {
  border: 1px solid rgba(46, 92, 158, 0.18);
  border-radius: 0.4rem;
  background: white;
  margin-bottom: 0.5rem;
  overflow: hidden;
}
.sp-cap__head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.6rem 0.8rem;
  background: white;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: 0.15s;
}
.sp-cap__head:hover { background: #f7fafd; }
.sp-cap__caret {
  font-size: 1.2rem; color: #94a3b8; transition: transform 0.2s ease;
}
.sp-cap__caret--open { transform: rotate(90deg); color: #2e5c9e; }
.sp-cap__title {
  margin: 0; flex: 1; font-size: 0.88rem; font-weight: 600; color: #1a3c6e;
  min-width: 0;
}

.sp-cap__body {
  display: flex; flex-direction: column; gap: 0.4rem;
  padding: 0.4rem 0.6rem 0.6rem 1.4rem;
  border-top: 1px solid #f1f5f9;
  background: rgba(46, 92, 158, 0.04);
  max-height: 100rem;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease, border-top-color 0.2s;
}
.sp-cap__body--closed {
  max-height: 0; padding-top: 0; padding-bottom: 0; border-top-color: transparent;
}

.sp-act { display: flex; flex-direction: column; gap: 0.25rem; }
.sp-act__name {
  margin: 0.3rem 0 0.2rem 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #2e5c9e;
}

/* REGISTRO */
.sp-reg {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  width: 100%;
  background: white;
  border: 1px solid rgba(46, 92, 158, 0.18);
  border-radius: 0.35rem;
  padding: 0.45rem 0.6rem;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: 0.15s;
}
.sp-reg:hover { border-color: #2e5c9e; background: #f7fafd; }
.sp-reg--accepted { border-left: 3px solid #16a34a; }
.sp-reg--rejected { border-left: 3px solid #dc2626; }
.sp-reg--pending  { border-left: 3px solid #f59e0b; }
.sp-reg--active {
  background: rgba(46, 92, 158, 0.1);
  border-color: #2e5c9e;
  box-shadow: 0 0 0 2px rgba(46, 92, 158, 0.15);
}
.sp-reg__icon {
  font-size: 1.1rem; flex-shrink: 0; margin-top: 0.05rem;
}
.sp-reg--accepted .sp-reg__icon { color: #16a34a; }
.sp-reg--rejected .sp-reg__icon { color: #dc2626; }
.sp-reg--pending  .sp-reg__icon { color: #d97706; }
.sp-reg__body { flex: 1; min-width: 0; }
.sp-reg__desc {
  margin: 0;
  font-size: 0.78rem;
  color: #1a3c6e;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sp-reg__chev { color: #cbd5e1; font-size: 1rem; align-self: center; }
.sp-reg:hover .sp-reg__chev { color: #2e5c9e; }

.sp-mini-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  margin-top: 0.2rem;
}

/* OBSERVACIONES */
.sp-obs-item {
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  border-radius: 0.4rem;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.5rem;
}
.sp-obs-item__text {
  margin: 0;
  font-size: 0.83rem;
  color: #713f12;
  line-height: 1.4;
}
.sp-obs-item__date {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-top: 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #92400e;
  opacity: 0.8;
}
.sp-obs-item__date span { font-size: 0.85rem; }

/* EMPTY STATE */
.sp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.8rem 1rem;
  color: #94a3b8;
  text-align: center;
}
.sp-empty span.material-symbols-outlined { font-size: 2.5rem; margin-bottom: 0.4rem; }
.sp-empty h5 { font-size: 0.95rem; color: #5a7a9a; margin: 0; font-weight: 700; }
.sp-empty h6 { font-size: 0.8rem; color: #94a3b8; margin: 0.2rem 0 0 0; }
.sp-empty--small { padding: 1rem 0.6rem; }
.sp-empty--small span.material-symbols-outlined { font-size: 2rem; }

/* DERECHA */
.sp-detail {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  background: #f7fafd;
}
.sp-detail__empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #94a3b8;
  padding: 2rem;
}
.sp-detail__empty span.material-symbols-outlined { font-size: 3.5rem; margin-bottom: 0.7rem; color: #cbd5e1; }
.sp-detail__empty h3 { margin: 0; font-size: 1.05rem; color: #5a7a9a; }
.sp-detail__empty p { margin: 0.4rem 0 0 0; font-size: 0.9rem; color: #94a3b8; }

.sp-detail__inner {
  padding: 1rem 1.2rem 1.5rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.sp-detail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.sp-breadcrumb {
  display: flex; align-items: center; gap: 0.3rem; flex: 1; min-width: 0; flex-wrap: wrap;
}
.sp-breadcrumb__cap {
  font-size: 0.85rem; color: #5a7a9a; font-weight: 500;
}
.sp-breadcrumb__sep { font-size: 1rem; color: #cbd5e1; }
.sp-breadcrumb__act {
  font-size: 1rem; color: #2e5c9e; font-weight: 700;
}

.sp-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sp-status span { font-size: 1rem; }
.sp-status--accepted { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.sp-status--rejected { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.sp-status--pending  { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }

.sp-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sp-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}
.sp-pill span.material-symbols-outlined { font-size: 0.95rem; }
.sp-pill--year { background: rgba(46, 92, 158, 0.08); color: #1a3c6e; }
.sp-pill--score { background: #ecfdf5; color: #065f46; }
.sp-pill--score b { font-weight: 800; font-size: 0.85rem; }

.sp-desc {
  background: white;
  border: 1px solid rgba(46, 92, 158, 0.18);
  border-left: 3px solid #2e5c9e;
  border-radius: 0.4rem;
  padding: 0.7rem 0.85rem;
}
.sp-desc__label {
  margin: 0 0 0.3rem 0;
  font-size: 0.7rem;
  font-weight: 700;
  color: #2e5c9e;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sp-desc__text {
  margin: 0;
  font-size: 0.88rem;
  color: #1a3c6e;
  line-height: 1.5;
  white-space: pre-line;
  word-break: break-word;
}

/* BOTTOM: comprobante + comentarios */
.sp-bottom {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 0.85rem;
  align-items: stretch;
}
@media (max-width: 1100px) {
  .sp-bottom { grid-template-columns: 1fr; }
}

/* CARD genérica */
.sp-card {
  background: white;
  border: 1px solid rgba(46, 92, 158, 0.18);
  border-radius: 0.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sp-card__head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.85rem;
  background: #f7fafd;
  border-bottom: 1px solid rgba(46, 92, 158, 0.18);
}
.sp-card__head h3 {
  margin: 0;
  flex: 1;
  font-size: 0.88rem;
  font-weight: 700;
  color: #2e5c9e;
}
.sp-card__head > span.material-symbols-outlined { color: #2e5c9e; font-size: 1.15rem; }
.sp-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.7rem;
  background: white;
  border: 1px solid rgba(46, 92, 158, 0.25);
  border-radius: 0.35rem;
  color: #5a7a9a;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: 0.15s;
}
.sp-card__link:hover { background: #f7fafd; border-color: #2e5c9e; color: #2e5c9e; }
.sp-card__link span { font-size: 0.95rem; }
.sp-card__badge {
  background: rgba(46, 92, 158, 0.12);
  color: #1a3c6e;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
}
.sp-card__body { padding: 0.7rem; }
.sp-card__body--pdf {
  padding: 0;
  min-height: clamp(28rem, 52vh, 42rem);
  display: flex;
  flex-direction: column;
}
.sp-card__body--pdf embed {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: clamp(28rem, 52vh, 42rem);
  background: #1e293b;
}

.sp-comment-list {
  max-height: clamp(12rem, 30vh, 22rem);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-right: 0.3rem;
}
.sp-comment-list::-webkit-scrollbar { width: 6px; }
.sp-comment-list::-webkit-scrollbar-track { background: #f7fafd; border-radius: 3px; }
.sp-comment-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
  border-radius: 3px;
}
.sp-comment-list::-webkit-scrollbar-thumb:hover { filter: brightness(1.1); }

.sp-comment-item {
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  border-radius: 0.35rem;
  padding: 0.5rem 0.7rem;
}
.sp-comment-item__text {
  margin: 0;
  font-size: 0.83rem;
  color: #713f12;
  line-height: 1.4;
}
.sp-comment-item__date {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-top: 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #92400e;
  opacity: 0.85;
}
.sp-comment-item__date span { font-size: 0.85rem; }

/* Responsive */
@media (max-width: 992px) {
  .sp-shell { height: auto; min-height: 93vh; overflow-y: auto; }
  .sp-body { flex-direction: column; overflow: visible; }
  .sp-list, .sp-detail { flex: 0 0 auto; width: 100%; max-width: 100%; min-width: 0; border-right: 0; }
  .sp-list { border-bottom: 1px solid rgba(46, 92, 158, 0.18); max-height: 50vh; }
  .sp-detail { overflow: visible; }
}


/* =============================================================================
   TEMPORALES · FatherComponent.vue
   Componente:  resources/js/components/temporales/FatherComponent.vue
   Apartado:    Shell del módulo de registros temporales
   Prefijo:     .rt-shell, .rt-content
   ============================================================================= */
.csj-shell__content.rt-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}
.rt-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.85rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.rt-scroll::-webkit-scrollbar { width: 0.6rem; }
.rt-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    border-radius: 999px;
}
.rt-scroll::-webkit-scrollbar-track { background: #f1f5f9; }

.rt-footer {
    flex-shrink: 0;
    padding: 0.65rem 1rem;
    border-top: 1px solid rgba(46, 92, 158, 0.18);
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
}
.rt-footer .ms-paginate {
    margin-top: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}


/* =============================================================================
   TEMPORALES · ListComponent.vue
   Componente:  resources/js/components/temporales/ListComponent.vue
   Apartado:    Listado de pre-registros temporales
   Prefijo:     .rt-list*, .rt-card*
   ============================================================================= */
.rt-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
}
@media (min-width: 1100px) {
    .rt-list { grid-template-columns: repeat(2, 1fr); }
}

.rt-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.7rem;
    padding: 0.85rem 1rem 0.85rem 1.2rem;
    box-shadow: 0 1px 2px rgba(15, 28, 50, 0.04);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-flow: column;
    gap: 0.65rem;
}
.rt-card:hover {
    box-shadow: 0 0.4rem 1rem rgba(46, 92, 158, 0.14);
    border-color: rgba(46, 92, 158, 0.42);
    transform: translateY(-1px);
}
.rt-card::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0;
    width: 0.35rem;
    border-top-left-radius: 0.7rem; border-bottom-left-radius: 0.7rem;
    background: linear-gradient(180deg, #f59e0b, #d97706);
}
.rt-card.is-verified::before {
    background: linear-gradient(180deg, #1a3c6e, #2e5c9e);
}

.rt-card__head {
    display: flex; align-items: flex-start; gap: 0.7rem;
    flex-wrap: wrap;
}
.rt-card__avatar {
    width: 2.6rem; height: 2.6rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.25);
}
.rt-card__avatar .material-symbols-outlined { font-size: 1.4rem; }

.rt-card__identity {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 0.3rem;
}
.rt-card__name {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a3c6e;
    line-height: 1.3;
    font-family: 'Merriweather', serif;
    word-break: break-word;
}
.rt-card__name small {
    font-family: 'Inter', sans-serif;
    color: #5a7a9a;
    font-weight: 600;
    font-size: 0.85rem;
    margin-right: 0.2rem;
}
.rt-card__contact {
    display: flex; flex-direction: column; gap: 0.2rem;
}
.rt-card__contact-row {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.78rem; color: #5a7a9a;
    text-decoration: none;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    width: max-content;
    transition: color 0.18s ease;
}
a.rt-card__contact-row:hover {
    color: #1a3c6e;
    text-decoration: underline;
}
.rt-card__contact-row .material-symbols-outlined {
    font-size: 0.95rem;
    color: #2e5c9e;
    flex-shrink: 0;
}
.rt-card__contact-row b { color: #1a3c6e; }
.rt-card__contact-text {
    flex: 1; min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rt-card__verify {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    border: 1px solid transparent;
    flex-shrink: 0;
}
.rt-card__verify .material-symbols-outlined { font-size: 0.9rem; }
.rt-card__verify.is-ok {
    background: #e7f6ec; color: #166534; border-color: rgba(22, 101, 52, 0.22);
}
.rt-card__verify.is-bad {
    background: #fef3c7; color: #92400e; border-color: rgba(146, 64, 14, 0.22);
}

.rt-card__tags {
    display: flex; flex-wrap: wrap; gap: 0.3rem;
    padding-top: 0.55rem;
    border-top: 1px dashed rgba(46, 92, 158, 0.22);
}
.rt-tag {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem; font-weight: 600;
    border-radius: 0.35rem;
    border: 1px solid transparent;
}
.rt-tag .material-symbols-outlined { font-size: 0.9rem; }
.rt-tag b { font-weight: 700; }
.rt-tag--proc {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e; border-color: rgba(146, 64, 14, 0.22);
}
.rt-tag--date {
    background: linear-gradient(135deg, #e8f1fc, #d0e1f7);
    color: #1a3c6e; border-color: rgba(46, 92, 158, 0.22);
}

.rt-card__actions {
    display: flex; gap: 0.4rem;
    padding-top: 0.55rem;
    border-top: 1px dashed rgba(46, 92, 158, 0.22);
    margin-top: auto;
    flex-wrap: wrap;
}
.rt-card__btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid transparent;
    border-radius: 0.45rem;
    font-size: 0.8rem; font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    flex: 1; justify-content: center;
}
.rt-card__btn .material-symbols-outlined { font-size: 1rem; }
.rt-card__btn--review {
    background: linear-gradient(135deg, #2e5c9e 0%, #5b8acc 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0.15rem 0.4rem rgba(46, 92, 158, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.rt-card__btn--review:hover {
    background: linear-gradient(135deg, #1a3c6e 0%, #4a7bbf 100%);
    transform: translateY(-1px);
    box-shadow: 0 0.3rem 0.7rem rgba(46, 92, 158, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
    color: #fff;
}
.rt-card__btn--delete {
    background: #fff;
    color: #c5221f;
    border-color: rgba(197, 34, 31, 0.35);
    flex: 0 0 auto;
}
.rt-card__btn--delete:hover {
    background: #d93025;
    color: #fff;
    border-color: #d93025;
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.5rem rgba(217, 48, 37, 0.3);
}

.rt-empty {
    grid-column: 1 / -1;
    background: #fff;
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.65rem;
    padding: 2.5rem 1rem; text-align: center; color: #5a7a9a;
}
.rt-empty .material-symbols-outlined { font-size: 3rem; color: rgba(46, 92, 158, 0.5); }
.rt-empty h5 { margin: 0.5rem 0 0.2rem; font-weight: 700; color: #1a3c6e; font-size: 1rem; }
.rt-empty p { margin: 0; font-size: 0.85rem; }


/* =============================================================================
   TEMPORALES · FormComponent.vue
   Componente:  resources/js/components/temporales/FormComponent.vue
   Apartado:    Form de pre-registro
   Prefijo:     .csj-shell__content, .rt-form*
   ============================================================================= */
/* ─── LAYOUT ─── */
.csj-shell__content.rt-form-content { padding: 0; overflow-y: auto; }
.rt-form {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.95rem 1rem;
    width: 100%;
    box-sizing: border-box;
}
@media (max-width: 900px) {
    .rt-form { flex-direction: column; }
}

/* ─── ASIDE ─── */
.rt-aside {
    width: 280px;
    flex: 0 0 280px;
    position: sticky;
    top: 0;
}
@media (max-width: 900px) {
    .rt-aside { width: 100%; flex: 0 0 auto; position: static; }
}
.rt-aside__card {
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(15, 28, 50, 0.06);
    overflow: hidden;
}
.rt-aside__card::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, #1a3c6e 0%, #2e5c9e 100%);
}
.rt-aside__hero {
    display: flex; flex-direction: column; align-items: center;
    gap: 0.4rem;
    padding: 1rem 0.85rem 0.85rem;
    text-align: center;
}
.rt-aside__avatar {
    width: 4.2rem; height: 4.2rem;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 0.2rem 0.6rem rgba(15, 28, 50, 0.15);
    color: #fff;
}
.rt-aside__avatar .material-symbols-outlined { font-size: 2.2rem; }
.rt-aside__avatar.is-verified {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
}
.rt-aside__avatar.is-unverified {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
}
.rt-aside__name {
    margin: 0.2rem 0 0;
    font-size: 0.92rem; font-weight: 700;
    color: #1a3c6e;
    line-height: 1.3;
    font-family: 'Merriweather', serif;
    word-break: break-word;
}
.rt-aside__email {
    display: inline-flex; align-items: center; gap: 0.25rem;
    max-width: 100%;
    font-size: 0.75rem;
    color: #5a7a9a;
    word-break: break-all;
    overflow: hidden;
}
.rt-aside__email .material-symbols-outlined {
    font-size: 0.9rem; color: #2e5c9e; flex-shrink: 0;
}
.rt-aside__chip {
    display: inline-flex; align-items: center; gap: 0.25rem;
    margin-top: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    border: 1px solid transparent;
}
.rt-aside__chip .material-symbols-outlined { font-size: 0.9rem; }
.rt-aside__chip.is-ok { background: #e7f6ec; color: #166534; border-color: rgba(22, 101, 52, 0.22); }
.rt-aside__chip.is-bad { background: #fef3c7; color: #92400e; border-color: rgba(146, 64, 14, 0.22); }

.rt-aside__section {
    padding: 0.75rem 0.85rem;
    border-top: 1px dashed rgba(46, 92, 158, 0.22);
    display: flex; flex-direction: column; gap: 0.4rem;
}
.rt-aside__label {
    font-size: 0.7rem; font-weight: 700;
    color: #5a7a9a;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.rt-aside__status {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.4rem 0.55rem;
    border-radius: 0.4rem;
    font-size: 0.82rem; font-weight: 600;
    border: 1px solid transparent;
}
.rt-aside__status .material-symbols-outlined { font-size: 1rem; }
.rt-aside__status.is-ok { background: #e7f6ec; color: #166534; border-color: rgba(22, 101, 52, 0.22); }
.rt-aside__status.is-warn { background: #fef3c7; color: #92400e; border-color: rgba(146, 64, 14, 0.22); }
.rt-aside__actions { display: flex; flex-direction: column; gap: 0.4rem; }

.rt-aside__notice {
    display: flex; align-items: flex-start; gap: 0.35rem;
    padding: 0.45rem 0.55rem;
    border-radius: 0.4rem;
    font-size: 0.74rem;
    line-height: 1.4;
    border: 1px solid transparent;
}
.rt-aside__notice .material-symbols-outlined {
    font-size: 0.95rem;
    flex-shrink: 0; margin-top: 0.05rem;
}
.rt-aside__notice--warn {
    background: #fff8e1; color: #92400e; border-color: rgba(146, 64, 14, 0.22);
}
.rt-aside__help {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.72rem; color: #5a7a9a;
    background: rgba(46, 92, 158, 0.05);
    padding-top: 0.65rem;
}
.rt-aside__help .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; }
.rt-aside__help b { color: #1a3c6e; }

/* ─── BOTONES ─── */
.rt-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.55rem 0.8rem;
    font-size: 0.85rem; font-weight: 600;
    border: 1px solid transparent;
    border-radius: 0.45rem;
    cursor: pointer;
    transition: all 0.18s ease;
    color: #fff;
    line-height: 1.2;
}
.rt-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 0.3rem 0.7rem rgba(15, 28, 50, 0.18);
}
.rt-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    filter: grayscale(0.25);
}
.rt-btn .material-symbols-outlined { font-size: 1.05rem; }
.rt-btn--auto { width: auto; padding: 0.5rem 0.95rem; font-size: 0.82rem; }
.rt-btn--success {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    box-shadow: 0 0.15rem 0.4rem rgba(22, 163, 74, 0.3);
}
.rt-btn--primary {
    background: linear-gradient(135deg, #2e5c9e 0%, #5b8acc 100%);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0.15rem 0.4rem rgba(46, 92, 158, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.rt-btn--primary:hover {
    background: linear-gradient(135deg, #1a3c6e 0%, #4a7bbf 100%);
}
.rt-btn--danger {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    box-shadow: 0 0.15rem 0.4rem rgba(231, 76, 60, 0.3);
}
.rt-btn--save {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    box-shadow: 0 0.15rem 0.4rem rgba(22, 163, 74, 0.3);
}

/* ─── MAIN ─── */
.rt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.9rem; }

/* Form unificado: preserva el flex column del main entre las cards */
.rt-form-edit {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.rt-banner {
    display: flex; align-items: flex-start; gap: 0.55rem;
    padding: 0.7rem 0.85rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
}
.rt-banner .material-symbols-outlined {
    font-size: 1.2rem; flex-shrink: 0; margin-top: 0.1rem;
}
.rt-banner p { margin: 0; font-size: 0.82rem; line-height: 1.45; }
.rt-banner b { font-weight: 700; }
.rt-banner--bad {
    background: #fef2f2; color: #991b1b; border-color: rgba(153, 27, 27, 0.22);
}
.rt-banner--bad .material-symbols-outlined { color: #c5221f; }

.rt-notice {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.55rem 0.75rem;
    background: rgba(46, 92, 158, 0.07);
    border: 1px solid rgba(46, 92, 158, 0.2);
    border-radius: 0.45rem;
    font-size: 0.82rem;
    color: #1a3c6e;
}
.rt-notice .material-symbols-outlined {
    font-size: 1rem; color: #2e5c9e; flex-shrink: 0;
}
.rt-notice b { color: #1a3c6e; font-weight: 700; }

/* ─── CARD ─── */
.rt-card {
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.7rem;
    box-shadow: 0 1px 2px rgba(15, 28, 50, 0.04);
    overflow: hidden;
}
.rt-card__head {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.7rem 0.95rem;
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
    border-bottom: 1px solid rgba(46, 92, 158, 0.18);
}
.rt-card__head-icon {
    width: 2.2rem; height: 2.2rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.25);
}
.rt-card__head-icon .material-symbols-outlined { font-size: 1.2rem; }
.rt-card__head-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.rt-card__head-text h4 {
    margin: 0;
    font-size: 0.92rem; font-weight: 700;
    color: #1a3c6e;
    font-family: 'Merriweather', serif;
}
.rt-card__head-text p {
    margin: 0;
    font-size: 0.74rem;
    color: #5a7a9a;
}
.rt-card__body { padding: 0.85rem 1rem; }
.rt-card__foot {
    display: flex; justify-content: flex-end;
    padding-top: 0.65rem;
    border-top: 1px dashed rgba(46, 92, 158, 0.22);
    margin-top: 0.65rem;
}

/* ─── FORM GRID ─── */
.rt-grid { display: flex; flex-direction: column; gap: 0.85rem; }
.rt-grid__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}
.rt-grid__row--1 { grid-template-columns: 1fr; }
.rt-grid__row--2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.rt-grid__row--4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.rt-field {
    display: flex; flex-direction: column; gap: 0.25rem;
    min-width: 0;
}
.rt-field label {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    color: #5a7a9a;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.rt-field label.rt-req::before {
    content: '* ';
    color: #d93025;
    font-weight: 700;
}
.rt-field input,
.rt-field select,
.rt-field textarea {
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: 1px solid rgba(46, 92, 158, 0.25);
    border-radius: 0.4rem;
    font-size: 0.88rem;
    background: #fff;
    color: #2c3e50;
    font-family: inherit;
    transition: border-color 0.18s, box-shadow 0.18s, background-color 0.18s;
    box-sizing: border-box;
}
.rt-field input:focus,
.rt-field select:focus,
.rt-field textarea:focus {
    outline: none;
    border-color: #2e5c9e;
    box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.15);
}
.rt-field input:disabled,
.rt-field select:disabled,
.rt-field input[readonly] {
    background: #f1f5f9;
    color: #5a7a9a;
    cursor: not-allowed;
}


/* =============================================================================
   VALIDACIÓN · FatherComponent.vue
   Componente:  resources/js/components/validacion/FatherComponent.vue
   Apartado:    Shell del módulo de validación
   Prefijo:     .val-shell, .val-content
   ============================================================================= */
.csj-shell__content.val-content {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.val-shell {
    display: grid;
    grid-template-columns: 4fr 6fr;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
@media (max-width: 1100px) {
    .val-shell { grid-template-columns: 1fr; }
}

.val-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    gap: 0.65rem;
}

.val-list-wrap {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
    padding-right: 0.2rem;
}
.val-list-wrap::-webkit-scrollbar { width: 0.6rem; }
.val-list-wrap::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    border-radius: 999px;
}
.val-list-wrap::-webkit-scrollbar-track { background: #f1f5f9; }

.val-footer {
    flex-shrink: 0;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid rgba(46, 92, 158, 0.18);
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
    border-radius: 0.55rem;
    border: 1px solid rgba(46, 92, 158, 0.18);
}
.val-footer .ms-paginate {
    margin: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

.val-aside {
    min-width: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.val-aside::-webkit-scrollbar { width: 0.6rem; }
.val-aside::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    border-radius: 999px;
}


/* =============================================================================
   VALIDACIÓN · ListComponent.vue
   Componente:  resources/js/components/validacion/ListComponent.vue
   Apartado:    Listado de candidatos a validar
   Prefijo:     .val-list*, .val-row*
   ============================================================================= */
.val-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

/* ─── CARD ─── */
.val-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.65rem;
    padding: 0.75rem 0.95rem 0.75rem 1.2rem;
    box-shadow: 0 1px 2px rgba(15, 28, 50, 0.04);
    transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    display: flex;
    flex-flow: column;
    gap: 0.55rem;
    min-width: 0;
    cursor: pointer;
}
.val-card:hover {
    box-shadow: 0 0.4rem 1rem rgba(46, 92, 158, 0.14);
    border-color: rgba(46, 92, 158, 0.42);
    transform: translateY(-1px);
}
.val-card::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0;
    width: 0.35rem;
    border-top-left-radius: 0.65rem; border-bottom-left-radius: 0.65rem;
    background: linear-gradient(180deg, #f59e0b, #d97706);
}
.val-card.is-done::before {
    background: linear-gradient(180deg, #22c55e, #16a34a);
}
.val-card.is-active {
    border-color: rgba(46, 92, 158, 0.55);
    box-shadow: 0 0.3rem 0.9rem rgba(46, 92, 158, 0.18);
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
}
.val-card.is-active::before {
    background: linear-gradient(180deg, #1a3c6e, #2e5c9e);
}

/* Header */
.val-card__head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.7rem;
    flex-wrap: wrap;
}
.val-card__folio {
    display: flex; align-items: center; gap: 0.55rem;
    flex: 1; min-width: 0;
}
.val-card__icon {
    width: 2.2rem; height: 2.2rem;
    border-radius: 0.45rem;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0.15rem 0.4rem rgba(245, 158, 11, 0.25);
}
.val-card.is-done .val-card__icon {
    background: linear-gradient(135deg, #16a34a, #15803d);
    box-shadow: 0 0.15rem 0.4rem rgba(22, 163, 74, 0.25);
}
.val-card.is-active .val-card__icon {
    background: linear-gradient(135deg, #1a3c6e, #2e5c9e);
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.3);
}
.val-card__icon .material-symbols-outlined { font-size: 1.2rem; }

.val-card__folio-info {
    display: flex; flex-direction: column; gap: 0.05rem;
    min-width: 0;
}
.val-card__folio-label {
    font-size: 0.65rem;
    color: #5a7a9a;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.val-card__folio-value {
    font-size: 0.95rem; font-weight: 700;
    color: #1a3c6e;
    line-height: 1.2;
    font-family: 'Merriweather', serif;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.val-card__btn {
    position: relative;
    width: 2.1rem; height: 2.1rem; border-radius: 0.45rem;
    border: 1px solid rgba(46, 92, 158, 0.22);
    background: #fff;
    color: #5a7a9a;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.18s ease;
    flex-shrink: 0;
}
.val-card__btn .material-symbols-outlined { font-size: 1.1rem; }
.val-card:hover .val-card__btn {
    background: linear-gradient(135deg, #1a3c6e, #2e5c9e);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0.2rem 0.45rem rgba(26, 60, 110, 0.25);
}
.val-card.is-active .val-card__btn {
    background: linear-gradient(135deg, #1a3c6e, #2e5c9e);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0.2rem 0.45rem rgba(26, 60, 110, 0.3);
}
.val-card__tip {
    position: absolute;
    bottom: calc(100% + 0.35rem);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #1a3c6e;
    color: #fff;
    padding: 0.25rem 0.5rem;
    border-radius: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s, transform 0.18s;
    z-index: 5;
}
.val-card__tip::after {
    content: '';
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #1a3c6e;
}
.val-card__btn:hover .val-card__tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Stats: publicados vs sin publicar */
.val-card__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.val-stat {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border-radius: 0.45rem;
    border: 1px solid transparent;
}
.val-stat__icon {
    width: 1.85rem; height: 1.85rem;
    border-radius: 0.35rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem !important;
    flex-shrink: 0;
}
.val-stat__label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    line-height: 1;
}
.val-stat__value {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.1;
    font-family: 'Merriweather', serif;
}
.val-stat--pending {
    background: #fff7ed;
    border-color: rgba(245, 158, 11, 0.25);
}
.val-stat--pending .val-stat__icon { background: rgba(245, 158, 11, 0.18); color: #92400e; }
.val-stat--pending .val-stat__label { color: #92400e; }
.val-stat--pending .val-stat__value { color: #92400e; }
.val-stat--published {
    background: #e7f6ec;
    border-color: rgba(22, 101, 52, 0.25);
}
.val-stat--published .val-stat__icon { background: rgba(22, 101, 52, 0.18); color: #166534; }
.val-stat--published .val-stat__label { color: #166534; }
.val-stat--published .val-stat__value { color: #166534; }

/* Progreso */
.val-card__progress {
    display: flex; flex-direction: column; gap: 0.2rem;
}
.val-card__progress-bar {
    height: 0.4rem;
    background: rgba(46, 92, 158, 0.1);
    border-radius: 999px;
    overflow: hidden;
}
.val-card__progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #16a34a 0%, #22c55e 100%);
    border-radius: 999px;
    transition: width 0.3s ease;
}
.val-card__progress-text {
    font-size: 0.7rem;
    color: #5a7a9a;
    font-weight: 600;
    text-align: right;
}

/* Tipos / Procesos */
.val-card__data {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem 0.85rem;
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(46, 92, 158, 0.22);
}
@media (min-width: 540px) {
    .val-card__data { grid-template-columns: 1fr 1fr; }
}
.val-card__col {
    display: flex; flex-direction: column; gap: 0.3rem;
    min-width: 0;
    overflow: hidden;
}
.val-card__col-label {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.7rem; font-weight: 700;
    color: #5a7a9a;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.val-card__col-label .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; }

.val-card__tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.val-tag {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.2rem 0.5rem 0.2rem 0.55rem;
    font-size: 0.74rem; font-weight: 600;
    border-radius: 0.35rem;
    border: 1px solid transparent;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.val-tag b {
    background: rgba(255, 255, 255, 0.55);
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
}
.val-tag--tipo {
    background: linear-gradient(135deg, #e8f1fc, #d0e1f7);
    color: #1a3c6e; border-color: rgba(46, 92, 158, 0.22);
}
.val-tag--proc {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e; border-color: rgba(146, 64, 14, 0.22);
}

/* Empty */
.val-empty {
    background: #fff;
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.65rem;
    padding: 2.5rem 1rem; text-align: center; color: #5a7a9a;
}
.val-empty .material-symbols-outlined { font-size: 3rem; color: rgba(46, 92, 158, 0.5); }
.val-empty h5 { margin: 0.5rem 0 0.2rem; font-weight: 700; color: #1a3c6e; font-size: 1rem; }
.val-empty p { margin: 0; font-size: 0.85rem; }


/* =============================================================================
   VALIDACIÓN · FormComponent.vue
   Componente:  resources/js/components/validacion/FormComponent.vue
   Apartado:    Detalle/form de validación
   Prefijo:     .val-detail*, .val-form*
   ============================================================================= */
.val-detail {
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(15, 28, 50, 0.06);
    overflow: hidden;
    display: flex; flex-direction: column;
    height: 100%;
}

/* Header */
.val-detail__head {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    border-bottom: 1px solid rgba(15, 28, 50, 0.18);
    position: relative;
}
.val-detail__head::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #d4af37 40%, #d4af37 60%, transparent 100%);
    opacity: 0.85;
}
.val-detail__head-icon {
    width: 2.2rem; height: 2.2rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.18);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.val-detail__head-icon--warn {
    background: linear-gradient(135deg, #d4af37, #b8860b);
    color: #fff;
}
.val-detail__head-icon .material-symbols-outlined { font-size: 1.2rem; }
.val-detail__head h4 {
    margin: 0;
    font-size: 0.92rem; font-weight: 700;
    color: #fff;
    font-family: 'Merriweather', serif;
}
.val-detail__head p {
    margin: 0.1rem 0 0;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.82);
}

/* Empty state */
.val-detail__empty {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.3rem;
    text-align: center;
    padding: 2rem 1rem;
    color: #5a7a9a;
}
.val-detail__empty .material-symbols-outlined {
    font-size: 2.5rem;
    color: rgba(46, 92, 158, 0.4);
}
.val-detail__empty h5 {
    margin: 0.4rem 0 0;
    font-weight: 700;
    color: #1a3c6e;
    font-size: 0.95rem;
}
.val-detail__empty p {
    margin: 0;
    font-size: 0.78rem;
    max-width: 18rem;
    line-height: 1.4;
}

/* Toolbar de selección */
.val-detail__toolbar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem;
    padding: 0.6rem 0.85rem;
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
    border-bottom: 1px solid rgba(46, 92, 158, 0.18);
}
.val-check {
    display: inline-flex; align-items: center; gap: 0.4rem;
    margin: 0; cursor: pointer; user-select: none;
    font-size: 0.78rem; color: #1a3c6e;
    font-weight: 600;
}
.val-check input[type="checkbox"] {
    width: 1rem; height: 1rem;
    accent-color: #2e5c9e;
    cursor: pointer;
}
.val-detail__counter {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.18rem 0.6rem;
    background: rgba(46, 92, 158, 0.1);
    border: 1px solid rgba(46, 92, 158, 0.2);
    border-radius: 999px;
    font-size: 0.74rem;
    color: #5a7a9a;
}
.val-detail__counter b {
    color: #1a3c6e;
    font-weight: 800;
    font-size: 0.82rem;
}

/* Botones */
.val-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid transparent;
    border-radius: 0.45rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    color: #fff;
    line-height: 1.2;
}
.val-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 0.3rem 0.7rem rgba(15, 28, 50, 0.18);
}
.val-btn:disabled {
    opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none;
    filter: grayscale(0.25);
}
.val-btn .material-symbols-outlined { font-size: 1rem; }
.val-btn--publish {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    box-shadow: 0 0.15rem 0.4rem rgba(22, 163, 74, 0.3);
}
.val-btn--ghost {
    background: #fff;
    color: #5a7a9a;
    border-color: rgba(46, 92, 158, 0.25);
}
.val-btn--ghost:hover {
    background: rgba(46, 92, 158, 0.08);
    color: #1a3c6e;
    border-color: rgba(46, 92, 158, 0.4);
}
.val-btn--confirm {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    box-shadow: 0 0.2rem 0.55rem rgba(22, 163, 74, 0.4);
}

/* Lista de certificados */
.val-detail__list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.75rem 0.85rem;
    display: flex; flex-direction: column; gap: 0.55rem;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.val-detail__list::-webkit-scrollbar { width: 0.5rem; }
.val-detail__list::-webkit-scrollbar-thumb {
    background: rgba(46, 92, 158, 0.4);
    border-radius: 999px;
}

.val-cert {
    position: relative;
    display: flex; flex-direction: column; gap: 0.55rem;
    padding: 0.7rem 0.8rem 0.7rem 1rem;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.6rem;
    cursor: pointer;
    transition: all 0.18s ease;
    margin: 0;
    min-width: 0;
}
.val-cert::before {
    content: '';
    position: absolute; top: 0; left: 0; bottom: 0;
    width: 0.3rem;
    border-top-left-radius: 0.6rem; border-bottom-left-radius: 0.6rem;
    background: linear-gradient(180deg, #f59e0b, #d97706);
}
.val-cert.is-published::before {
    background: linear-gradient(180deg, #22c55e, #16a34a);
}
.val-cert.is-blocked::before {
    background: linear-gradient(180deg, #94a3b8, #64748b);
}
.val-cert:hover:not(.is-blocked):not(.is-published) {
    border-color: rgba(46, 92, 158, 0.42);
    box-shadow: 0 0.25rem 0.6rem rgba(46, 92, 158, 0.1);
}
.val-cert.is-selected {
    background: linear-gradient(180deg, rgba(46, 92, 158, 0.06) 0%, #ffffff 100%);
    border-color: rgba(46, 92, 158, 0.55);
    box-shadow: 0 0.2rem 0.5rem rgba(46, 92, 158, 0.15);
}

/* Header: check + nombre + chip estado */
.val-cert__head {
    display: flex; align-items: center; gap: 0.5rem;
    flex-wrap: wrap;
}
.val-cert__check {
    width: 1.2rem; height: 1.2rem;
    accent-color: #2e5c9e;
    cursor: pointer;
    flex-shrink: 0;
}
.val-cert__icon {
    width: 1.5rem; height: 1.5rem;
    border-radius: 0.35rem;
    background: rgba(46, 92, 158, 0.1);
    color: #5a7a9a;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.val-cert.is-published .val-cert__icon {
    background: rgba(22, 163, 74, 0.18);
    color: #166534;
}
.val-cert.is-blocked .val-cert__icon {
    background: rgba(148, 163, 184, 0.25);
    color: #475569;
}
.val-cert__icon .material-symbols-outlined { font-size: 0.95rem; }

.val-cert__name {
    flex: 1; min-width: 0;
    margin: 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: #1a3c6e;
    line-height: 1.3;
    word-break: break-word;
    font-family: 'Merriweather', serif;
}
.val-cert__chip {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
}
.val-cert__chip .material-symbols-outlined { font-size: 0.85rem; }
.val-cert__chip.is-published {
    background: #e7f6ec; color: #166534; border-color: rgba(22, 101, 52, 0.22);
}
.val-cert__chip.is-pending {
    background: #fef3c7; color: #92400e; border-color: rgba(146, 64, 14, 0.22);
}

/* Bloques sub-tarjeta */
.val-cert__block {
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.45rem;
    padding: 0.5rem 0.65rem;
    display: flex; flex-direction: column; gap: 0.4rem;
}
.val-cert__block--success {
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
    border-color: rgba(22, 163, 74, 0.25);
}
.val-cert__block-label {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.66rem;
    color: #5a7a9a;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}
.val-cert__block-label .material-symbols-outlined {
    font-size: 0.85rem;
    color: #2e5c9e;
}
.val-cert__block-label--success { color: #166534; }
.val-cert__block-label--success .material-symbols-outlined { color: #16a34a; }

/* Certificado: número grande + libro/foja */
.val-cert__cert {
    display: flex; align-items: center; gap: 0.55rem;
    flex-wrap: wrap;
}
.val-cert__cert-num {
    display: inline-flex; align-items: center;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    padding: 0.3rem 0.65rem;
    border-radius: 0.4rem;
    font-size: 0.95rem;
    font-weight: 800;
    font-family: 'Consolas', monospace;
    letter-spacing: 0.04em;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.3);
    word-break: break-word;
}
.val-cert__cert-num--muted {
    background: #f1f5f9;
    color: #94a3b8;
    box-shadow: none;
}
.val-cert__cert-extra {
    display: flex; flex-wrap: wrap; gap: 0.3rem;
    flex: 1; min-width: 0;
}
.val-cert__pill {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.2);
    border-radius: 0.35rem;
    font-size: 0.72rem;
    color: #5a7a9a;
    font-weight: 500;
}
.val-cert__pill .material-symbols-outlined { font-size: 0.85rem; color: #2e5c9e; }
.val-cert__pill b { color: #1a3c6e; font-weight: 700; margin-left: 0.15rem; }

/* Vigencia: 3 fechas en grid */
.val-cert__dates {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
}
.val-cert__date {
    display: flex; flex-direction: column; gap: 0.1rem;
    min-width: 0;
    padding: 0.3rem 0.4rem;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.15);
    border-radius: 0.35rem;
}
.val-cert__date-lbl {
    display: inline-flex; align-items: center; gap: 0.2rem;
    font-size: 0.6rem;
    color: #5a7a9a;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.val-cert__date-lbl .material-symbols-outlined { font-size: 0.8rem; color: #2e5c9e; }
.val-cert__date b {
    color: #1a3c6e;
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Firmas: 2 columnas */
.val-cert__signs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.val-cert__sign {
    display: flex; flex-direction: column; gap: 0.15rem;
    min-width: 0;
    padding: 0.35rem 0.5rem;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.15);
    border-radius: 0.35rem;
}
.val-cert__sign-lbl {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.62rem;
    color: #5a7a9a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}
.val-cert__sign-lbl .material-symbols-outlined { font-size: 0.85rem; color: #2e5c9e; }
.val-cert__sign-val {
    color: #1a3c6e;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
    word-break: break-word;
}

/* Publicación: filas verdes */
.val-cert__publish {
    display: flex; flex-direction: column; gap: 0.2rem;
}
.val-cert__pub-row {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.78rem;
    color: #166534;
}
.val-cert__pub-row .material-symbols-outlined {
    font-size: 0.9rem;
    color: #16a34a;
    flex-shrink: 0;
}
.val-cert__pub-row b { color: #166534; font-weight: 700; }

/* En anchos reducidos las firmas se apilan */
@media (max-width: 540px) {
    .val-cert__signs { grid-template-columns: 1fr; }
    .val-cert__dates { grid-template-columns: 1fr 1fr; }
}

.val-cert__notice {
    display: flex; align-items: flex-start; gap: 0.35rem;
    padding: 0.4rem 0.55rem;
    background: #fdecea;
    border: 1px solid rgba(197, 34, 31, 0.25);
    border-radius: 0.4rem;
    font-size: 0.72rem;
    line-height: 1.4;
    color: #991b1b;
}
.val-cert__notice .material-symbols-outlined {
    font-size: 0.95rem;
    color: #c5221f;
    flex-shrink: 0; margin-top: 0.05rem;
}

/* ═══════ MODO 2: CONFIRMACIÓN ═══════ */
.val-confirm {
    flex: 1;
    padding: 1rem;
    display: flex; flex-direction: column; gap: 0.85rem;
    overflow-y: auto;
}
.val-confirm__notice {
    display: flex; align-items: flex-start; gap: 0.45rem;
    padding: 0.65rem 0.8rem;
    background: #fdecea;
    border: 1px solid rgba(197, 34, 31, 0.25);
    border-radius: 0.5rem;
    color: #991b1b;
}
.val-confirm__notice .material-symbols-outlined {
    font-size: 1.2rem;
    color: #c5221f;
    flex-shrink: 0; margin-top: 0.1rem;
}
.val-confirm__notice p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
}
.val-confirm__notice b { font-weight: 700; }

.val-confirm__fields {
    display: flex; flex-direction: column; gap: 0.65rem;
}
.val-confirm__field {
    display: flex; flex-direction: column; gap: 0.25rem;
}
.val-confirm__field label {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    color: #5a7a9a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.val-confirm__req::before {
    content: '* ';
    color: #d93025;
    font-weight: 700;
}
.val-confirm__field input {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(46, 92, 158, 0.25);
    border-radius: 0.4rem;
    font-size: 0.88rem;
    background: #fff;
    color: #1a3c6e;
    font-family: inherit;
    transition: border-color 0.18s, box-shadow 0.18s;
    box-sizing: border-box;
}
.val-confirm__field input:focus {
    outline: none;
    border-color: #2e5c9e;
    box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.15);
}

.val-confirm__actions {
    display: flex; gap: 0.5rem;
    margin-top: auto;
}
.val-confirm__actions .val-btn { flex: 1; }


/* =============================================================================
   VALIDAR MÉDICOS · FatherComponent.vue
   Componente:  resources/js/components/validarmedicos/FatherComponent.vue
   Apartado:    Shell del módulo nuevo registro
   Prefijo:     .csj-shell__content, .nr-*, .vmh-*
   ============================================================================= */
/* ═══════════════════════════════════════════════════════
   FORMULARIO: layout aside + main
   ═══════════════════════════════════════════════════════ */
.csj-shell__content.vm-content {
    padding: 0;
    overflow-y: auto;
}
.vm-form {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.95rem 1rem;
    width: 100%;
    box-sizing: border-box;
}
@media (max-width: 900px) {
    .vm-form { flex-direction: column; }
}

/* ─── ASIDE ─── */
.vm-aside {
    width: 280px;
    flex: 0 0 280px;
    position: sticky;
    top: 0;
}
@media (max-width: 900px) {
    .vm-aside { width: 100%; flex: 0 0 auto; position: static; }
}

.vm-aside__card {
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(15, 28, 50, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.vm-aside__card::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, #1a3c6e 0%, #2e5c9e 100%);
}

.vm-aside__hero {
    display: flex; flex-direction: column; align-items: center;
    gap: 0.4rem;
    padding: 1rem 0.85rem 0.85rem;
    text-align: center;
}
.vm-aside__avatar {
    width: 4.2rem; height: 4.2rem;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 0.2rem 0.6rem rgba(15, 28, 50, 0.15);
    color: #fff;
}
.vm-aside__avatar .material-symbols-outlined { font-size: 2.2rem; }
.vm-aside__avatar.is-verified {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
}
.vm-aside__avatar.is-unverified {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
}
.vm-aside__name {
    margin: 0.2rem 0 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #1a3c6e;
    line-height: 1.3;
    font-family: 'Merriweather', serif;
    word-break: break-word;
}
.vm-aside__name small {
    display: block;
    font-family: 'Inter', sans-serif;
    color: #5a7a9a;
    font-weight: 600;
    font-size: 0.78rem;
    margin-bottom: 0.1rem;
}
.vm-aside__email {
    display: inline-flex; align-items: center; gap: 0.25rem;
    max-width: 100%;
    font-size: 0.75rem;
    color: #5a7a9a;
    word-break: break-all;
    overflow: hidden;
}
.vm-aside__email .material-symbols-outlined {
    font-size: 0.9rem;
    color: #2e5c9e;
    flex-shrink: 0;
}
.vm-aside__chip {
    display: inline-flex; align-items: center; gap: 0.25rem;
    margin-top: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    border: 1px solid transparent;
}
.vm-aside__chip .material-symbols-outlined { font-size: 0.9rem; }
.vm-aside__chip.is-ok {
    background: #e7f6ec; color: #166534; border-color: rgba(22, 101, 52, 0.22);
}
.vm-aside__chip.is-bad {
    background: #fef3c7; color: #92400e; border-color: rgba(146, 64, 14, 0.22);
}

.vm-aside__section {
    padding: 0.75rem 0.85rem;
    border-top: 1px dashed rgba(46, 92, 158, 0.22);
    display: flex; flex-direction: column; gap: 0.4rem;
}
.vm-aside__label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #5a7a9a;
    text-transform: uppercase; letter-spacing: 0.05em;
}

.vm-aside__status {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.4rem 0.55rem;
    border-radius: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid transparent;
}
.vm-aside__status .material-symbols-outlined { font-size: 1rem; }
.vm-aside__status.is-ok {
    background: #e7f6ec; color: #166534; border-color: rgba(22, 101, 52, 0.22);
}
.vm-aside__status.is-warn {
    background: #fef3c7; color: #92400e; border-color: rgba(146, 64, 14, 0.22);
}

.vm-aside__notice {
    display: flex; align-items: flex-start; gap: 0.35rem;
    padding: 0.45rem 0.55rem;
    border-radius: 0.4rem;
    font-size: 0.74rem;
    line-height: 1.4;
    border: 1px solid transparent;
}
.vm-aside__notice .material-symbols-outlined {
    font-size: 0.95rem;
    flex-shrink: 0; margin-top: 0.05rem;
}
.vm-aside__notice b { font-weight: 700; }
.vm-aside__notice--warn {
    background: #fff8e1; color: #92400e; border-color: rgba(146, 64, 14, 0.22);
}

.vm-aside__actions {
    display: flex; flex-direction: column; gap: 0.4rem;
}

.vm-aside__help {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.72rem;
    color: #5a7a9a;
    background: rgba(46, 92, 158, 0.05);
    border-top-color: rgba(46, 92, 158, 0.22);
    padding-top: 0.65rem;
}
.vm-aside__help .material-symbols-outlined {
    font-size: 0.95rem; color: #2e5c9e;
}
.vm-aside__help b { color: #1a3c6e; }

/* ═══════════════════════════════════════════════════════
   BOTONES navy + variantes
   ═══════════════════════════════════════════════════════ */
.vm-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.55rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: 0.45rem;
    cursor: pointer;
    transition: all 0.18s ease;
    color: #fff;
    text-decoration: none;
    line-height: 1.2;
}
.vm-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.3rem 0.7rem rgba(15, 28, 50, 0.18);
}
.vm-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    filter: grayscale(0.2);
}
.vm-btn .material-symbols-outlined { font-size: 1.05rem; }
.vm-btn--auto { width: auto; padding: 0.45rem 0.85rem; font-size: 0.8rem; }

.vm-btn--success {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    box-shadow: 0 0.15rem 0.4rem rgba(22, 163, 74, 0.3);
}
.vm-btn--primary {
    background: linear-gradient(135deg, #2e5c9e 0%, #5b8acc 100%);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0.15rem 0.4rem rgba(46, 92, 158, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.vm-btn--primary:hover {
    background: linear-gradient(135deg, #1a3c6e 0%, #4a7bbf 100%);
}
.vm-btn--warning {
    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
    box-shadow: 0 0.15rem 0.4rem rgba(230, 126, 34, 0.3);
}
.vm-btn--danger {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    box-shadow: 0 0.15rem 0.4rem rgba(231, 76, 60, 0.3);
}
.vm-btn--save {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
    align-self: stretch;
    box-shadow: 0 0.25rem 0.7rem rgba(22, 163, 74, 0.3);
}
.vm-btn--save .material-symbols-outlined { font-size: 1.2rem; }

/* ═══════════════════════════════════════════════════════
   MAIN del formulario
   ═══════════════════════════════════════════════════════ */
.vm-main {
    flex: 1;
    min-width: 0;
}
.vm-main__form {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

/* Banners (cuenta sin verificar / sin comprobante) */
.vm-banner {
    display: flex; align-items: flex-start; gap: 0.55rem;
    padding: 0.7rem 0.85rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    margin: 0;
}
.vm-banner .material-symbols-outlined {
    font-size: 1.2rem;
    flex-shrink: 0; margin-top: 0.1rem;
}
.vm-banner p { margin: 0; font-size: 0.82rem; line-height: 1.45; }
.vm-banner b { font-weight: 700; }
.vm-banner--bad {
    background: #fef2f2;
    color: #991b1b;
    border-color: rgba(153, 27, 27, 0.22);
}
.vm-banner--bad .material-symbols-outlined { color: #c5221f; }

/* Cards de sección */
.vm-card {
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.7rem;
    box-shadow: 0 1px 2px rgba(15, 28, 50, 0.04);
    overflow: hidden;
}
.vm-card__head {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.7rem 0.95rem;
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
    border-bottom: 1px solid rgba(46, 92, 158, 0.18);
}
.vm-card__head-icon {
    width: 2.2rem; height: 2.2rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.25);
}
.vm-card__head-icon .material-symbols-outlined { font-size: 1.2rem; }
.vm-card__head-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.vm-card__head-text h4 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #1a3c6e;
    font-family: 'Merriweather', serif;
}
.vm-card__head-text p {
    margin: 0;
    font-size: 0.74rem;
    color: #5a7a9a;
}
.vm-card__body { padding: 0.85rem 1rem; }

/* Comprobante de pago: banner con fecha + iframe */
.vm-pay {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 0.7rem;
    padding: 0.75rem 0.95rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    margin-bottom: 0.85rem;
}
.vm-pay.is-paid {
    background: linear-gradient(135deg, #e7f6ec 0%, #d4f0dc 100%);
    border-color: rgba(22, 101, 52, 0.28);
}
.vm-pay.is-pending {
    background: linear-gradient(135deg, #fff8e1 0%, #fef3c7 100%);
    border-color: rgba(146, 64, 14, 0.28);
}
.vm-pay__info { display: flex; align-items: center; gap: 0.7rem; }
.vm-pay__icon {
    font-size: 1.85rem !important;
}
.vm-pay.is-paid .vm-pay__icon { color: #1e8449; }
.vm-pay.is-pending .vm-pay__icon { color: #a16207; }
.vm-pay__label {
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.vm-pay.is-paid .vm-pay__label { color: #166534; }
.vm-pay.is-pending .vm-pay__label { color: #a16207; }
.vm-pay__value {
    font-size: 1rem; font-weight: 700;
    color: #1a3c6e;
    line-height: 1.2;
}
.vm-pay__value--muted { color: #a16207; font-size: 0.92rem; font-weight: 600; }
.vm-pay__viewer iframe {
    border: 1px solid rgba(46, 92, 158, 0.22);
    border-radius: 0.45rem;
    display: block;
}

/* Pista que reemplaza al botón "Adjuntar" cuando hay cambios sin guardar: el
   archivo solo puede subirse una vez que la información capturada está guardada
   (si no, el refresco posterior a la carga borraría lo capturado). */
.vm-upload-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #a16207;
    background: #fef9c3;
    border: 1px dashed #facc15;
    border-radius: 0.45rem;
    white-space: nowrap;
}
.vm-upload-hint .material-symbols-outlined { font-size: 1rem; }

/* Autocompletado propio de firmantes (presidente / responsable) en el registro:
   reemplaza al <datalist> nativo para poder filtrar por longitud mínima y cerrarse
   al seleccionar con un solo clic. El dropdown se ancla bajo el input. */
.vm-ac .input-container { position: relative; }
.vm-ac__wrap { position: relative; }
.vm-ac__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    margin: 2px 0 0;
    padding: 0.25rem 0;
    list-style: none;
    max-height: 220px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.4rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
.vm-ac__item {
    padding: 0.4rem 0.7rem;
    font-size: 0.85rem;
    color: #334155;
    cursor: pointer;
}
.vm-ac__item:hover { background: #f1f5f9; }

/* Bloque "Certificado previo" dentro de la card Especialidad y proceso
   (solo aparece en recertificación). Mismo lenguaje visual que .vm-pay. */
.vm-cert {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px dashed #e2e8f0;
}
.vm-cert__head {
    display: flex; align-items: center; gap: 0.6rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: 0.5rem;
    padding: 0.7rem 0.85rem;
    margin-bottom: 0.65rem;
    flex-wrap: wrap;
}
.vm-cert__head > .material-symbols-outlined {
    color: #b45309; font-size: 1.4rem; flex-shrink: 0;
}
.vm-cert__title {
    margin: 0; font-size: 0.92rem; font-weight: 700; color: #78350f; line-height: 1.2;
}
.vm-cert__sub {
    margin: 0.15rem 0 0; font-size: 0.78rem; color: #92400e;
}
.vm-cert__head > div { flex: 1; min-width: 12rem; }
.vm-cert__viewer iframe {
    border: 1px solid rgba(46, 92, 158, 0.22);
    border-radius: 0.45rem;
    display: block;
}

/* Layout filtro + listado + paginador: listado scrollea adentro, paginador fijo abajo */
.csj-shell__content.nr-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}
.nr-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.85rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.nr-scroll::-webkit-scrollbar { width: 0.6rem; }
.nr-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    border-radius: 999px;
}
.nr-scroll::-webkit-scrollbar-track { background: #f1f5f9; }

.nr-footer {
    flex-shrink: 0;
    padding: 0.65rem 1rem;
    border-top: 1px solid rgba(46, 92, 158, 0.18);
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
}
.nr-footer .ms-paginate {
    margin-top: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

/* ── Chip de vigencia del certificado previo (en SpecialtyComponent) ── */
.vm-vig {
    margin: 0.85rem 0 0.3rem;
}
.vm-vig__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    line-height: 1.25;
    border: 1px solid transparent;
}
.vm-vig__chip small {
    display: block;
    font-size: 0.72rem;
    opacity: 0.85;
    font-weight: 500;
}
.vm-vig__chip--ok {
    background: #dcfce7;
    color: #166534;
    border-color: #86efac;
}
.vm-vig__chip--bad {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fca5a5;
}

/* ── Bloque de opciones cuando el certificado previo no está vigente ── */
.vm-options {
    margin: 1rem 0 1.2rem;
    padding: 0.95rem 1rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: 0.55rem;
}
.vm-options__head {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-bottom: 0.7rem;
}
.vm-options__head .material-symbols-outlined {
    color: #b45309;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.vm-options__title {
    margin: 0;
    font-weight: 700;
    color: #78350f;
    font-size: 0.92rem;
}
.vm-options__sub {
    margin: 0.15rem 0 0;
    color: #92400e;
    font-size: 0.78rem;
}
.vm-option {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.65rem 0.85rem;
    margin-bottom: 0.55rem;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.vm-option:hover { border-color: #cbd5e1; }
.vm-option.is-selected {
    border-color: #2e5c9e;
    box-shadow: 0 0 0 2px rgba(46, 92, 158, 0.12);
}
.vm-option input[type="radio"] { display: none; }
.vm-option__radio .material-symbols-outlined {
    color: #2e5c9e;
    font-size: 1.3rem;
}
.vm-option__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.vm-option__title {
    font-weight: 700;
    color: #1a3c6e;
    font-size: 0.87rem;
}
.vm-option__desc {
    font-size: 0.78rem;
    color: #475569;
    line-height: 1.4;
}
.vm-option__sys {
    margin-top: 0.5rem;
    padding: 0.55rem 0.7rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 0.4rem;
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 0.78rem;
    color: #1e3a8a;
}
.vm-option__sys .material-symbols-outlined {
    color: #2e5c9e;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.vm-option__sys b {
    display: block;
    margin-bottom: 0.25rem;
    color: #1a3c6e;
}
.vm-option__sys ul {
    margin: 0;
    padding-left: 1rem;
    line-height: 1.5;
}
.vm-option__field {
    margin-top: 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.vm-option__field label {
    font-size: 0.74rem;
    font-weight: 600;
    color: #334155;
}
.vm-option__field label small {
    color: #94a3b8;
    font-weight: 400;
}
.vm-option__field select {
    padding: 0.4rem 0.55rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.35rem;
    font-size: 0.82rem;
    background: white;
}


/* =============================================================================
   VALIDAR MÉDICOS · ListComponent.vue
   Componente:  resources/js/components/validarmedicos/ListComponent.vue
   Apartado:    Listado de médicos por validar
   Prefijo:     .nr-list*, .nr-card*
   ============================================================================= */
.nr-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
}
@media (min-width: 1100px) {
    .nr-list { grid-template-columns: repeat(2, 1fr); }
}

/* ─── CARD ─────────────────────────────────────── */
.nr-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.7rem;
    padding: 0.85rem 1rem 0.85rem 1.2rem;
    box-shadow: 0 1px 2px rgba(15, 28, 50, 0.04);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-flow: column;
    gap: 0.65rem;
}
.nr-card:hover {
    box-shadow: 0 0.4rem 1rem rgba(46, 92, 158, 0.14);
    border-color: rgba(46, 92, 158, 0.42);
    transform: translateY(-1px);
}
.nr-card::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0;
    width: 0.35rem;
    border-top-left-radius: 0.7rem; border-bottom-left-radius: 0.7rem;
    background: linear-gradient(180deg, #f59e0b, #d97706); /* sin verificar = ámbar */
}
.nr-card.is-verified::before {
    background: linear-gradient(180deg, #1a3c6e, #2e5c9e);
}

/* Header */
.nr-card__head {
    display: flex; align-items: flex-start; gap: 0.7rem;
    flex-wrap: wrap;
}
.nr-card__avatar {
    width: 2.6rem; height: 2.6rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.25);
}
.nr-card__avatar .material-symbols-outlined { font-size: 1.4rem; }

.nr-card__identity {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 0.3rem;
}
.nr-card__name {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a3c6e;
    line-height: 1.3;
    font-family: 'Merriweather', serif;
    word-break: break-word;
}
.nr-card__name small {
    font-family: 'Inter', sans-serif;
    color: #5a7a9a;
    font-weight: 600;
    font-size: 0.85rem;
    margin-right: 0.2rem;
}
.nr-card__contact {
    display: flex; flex-direction: column; gap: 0.2rem;
}
.nr-card__contact-row {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.78rem; color: #5a7a9a;
    text-decoration: none;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    width: max-content;
    transition: color 0.18s ease;
}
.nr-card__contact-row.is-link:hover,
a.nr-card__contact-row:hover {
    color: #1a3c6e;
    text-decoration: underline;
}
.nr-card__contact-row .material-symbols-outlined {
    font-size: 0.95rem;
    color: #2e5c9e;
    flex-shrink: 0;
}
.nr-card__contact-row b { color: #1a3c6e; }
.nr-card__contact-text {
    flex: 1; min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nr-card__verify {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    border: 1px solid transparent;
    flex-shrink: 0;
}
.nr-card__verify .material-symbols-outlined { font-size: 0.9rem; }
.nr-card__verify.is-ok {
    background: #e7f6ec; color: #166534; border-color: rgba(22, 101, 52, 0.22);
}
.nr-card__verify.is-bad {
    background: #fef3c7; color: #92400e; border-color: rgba(146, 64, 14, 0.22);
}

/* Tags */
.nr-card__tags {
    display: flex; flex-wrap: wrap; gap: 0.3rem;
    padding-top: 0.55rem;
    border-top: 1px dashed rgba(46, 92, 158, 0.22);
}
.nr-tag {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem; font-weight: 600;
    border-radius: 0.35rem;
    border: 1px solid transparent;
}
.nr-tag .material-symbols-outlined { font-size: 0.9rem; }
.nr-tag b { color: inherit; font-weight: 700; }
.nr-tag--proc {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e; border-color: rgba(146, 64, 14, 0.22);
}
.nr-tag--conv {
    background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
    color: #6a1b9a; border-color: rgba(106, 27, 154, 0.22);
}
.nr-tag--date {
    background: linear-gradient(135deg, #e8f1fc, #d0e1f7);
    color: #1a3c6e; border-color: rgba(46, 92, 158, 0.22);
}

/* Acciones */
.nr-card__actions {
    display: flex; gap: 0.4rem;
    padding-top: 0.55rem;
    border-top: 1px dashed rgba(46, 92, 158, 0.22);
    margin-top: auto;
    flex-wrap: wrap;
}
.nr-card__btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid transparent;
    border-radius: 0.45rem;
    font-size: 0.8rem; font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    flex: 1; justify-content: center;
}
.nr-card__btn .material-symbols-outlined { font-size: 1rem; }
.nr-card__btn--review {
    background: linear-gradient(135deg, #2e5c9e 0%, #5b8acc 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0.15rem 0.4rem rgba(46, 92, 158, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.nr-card__btn--review:hover {
    background: linear-gradient(135deg, #1a3c6e 0%, #4a7bbf 100%);
    transform: translateY(-1px);
    box-shadow: 0 0.3rem 0.7rem rgba(46, 92, 158, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
    color: #fff;
}
.nr-card__btn--delete {
    background: #fff;
    color: #c5221f;
    border-color: rgba(197, 34, 31, 0.35);
    flex: 0 0 auto;
}
.nr-card__btn--delete:hover {
    background: #d93025;
    color: #fff;
    border-color: #d93025;
    transform: translateY(-1px);
    box-shadow: 0 0.2rem 0.5rem rgba(217, 48, 37, 0.3);
}

/* Empty state */
.nr-empty {
    grid-column: 1 / -1;
    background: #fff;
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.65rem;
    padding: 2.5rem 1rem; text-align: center; color: #5a7a9a;
}
.nr-empty .material-symbols-outlined { font-size: 3rem; color: rgba(46, 92, 158, 0.5); }
.nr-empty h5 { margin: 0.5rem 0 0.2rem; font-weight: 700; color: #1a3c6e; font-size: 1rem; }
.nr-empty p { margin: 0; font-size: 0.85rem; }


/* =============================================================================
   VALIDAR MÉDICOS · PersonalInformationComponent.vue
   Componente:  resources/js/components/validarmedicos/PersonalInformationComponent.vue
   Apartado:    Form datos personales
   Prefijo:     .colored-input-container, .vmd-*
   ============================================================================= */
/* Anulamos el contenedor visual heredado de .colored-input-container global
   (padding, sombra, borde, margen) para que el sub-card del padre sea el único
   contenedor visible. Solo conservamos la estructura flex column. */
.colored-input-container {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    width: 100%;
}
.colored-input-container .four-inputs-container,
.colored-input-container .four-diff-inputs-container,
.colored-input-container .two-inputs-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    width: 100%;
}
/* Subtítulo dentro del bloque Especialidad (Universidad / Residencia) — separa
   visualmente los dos sub-bloques sin abrir otra card. */
.colored-input-container .vm-section-title {
    grid-column: 1 / -1;
    margin: 0.75rem 0 0.25rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #1a3c6e;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.25rem;
}
/* Sub-encabezado interno (Universidad / Residencia) dentro de "Información académica".
   Aplica tanto en el form de Nuevo Registro (.colored-input-container) como en el
   de Registros temporales (.rt-card__body). */
.vm-subgroup {
    grid-column: 1 / -1;
    margin: 0.5rem 0 0.25rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    letter-spacing: 0.02em;
}
/* Grid de campos solo-lectura (universidad / residencia): chip etiqueta + valor
   plano, sin caja de input. */
.vm-read-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem 0.75rem;
    width: 100%;
    margin-bottom: 0.5rem;
}
.vm-read {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.4rem 0.55rem;
    background: #f8fafc;
    border-left: 3px solid #c7d2fe;
    border-radius: 0.3rem;
}
.vm-read__label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.vm-read__value {
    font-size: 0.88rem;
    color: #0f172a;
    font-weight: 500;
    word-break: break-word;
}
.colored-input-container .element {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100% !important;
    min-width: 0;
}
/* Anula los anchos % por hijo que luaz fija para los contenedores -diff-
   (ej. .four-diff-inputs-container .element:first-child = 8%). El layout
   ahora es grid auto-fit, así que cada .element debe ocupar 100% de su columna.
   La especificidad (3 clases) gana al pseudo-class de luaz (2 clases + 1 pseudo). */
.colored-input-container .four-diff-inputs-container .element,
.colored-input-container .three-diff-inputs-container .element,
.colored-input-container .three-diffinv-inputs-container .element,
.colored-input-container .three-differ-inputs-container .element,
.colored-input-container .two-diff-inputs-container .element,
.colored-input-container .two-diffinv-inputs-container .element,
.colored-input-container .two-differ-inputs-container .element,
.colored-input-container .two-differinv-inputs-container .element {
    width: 100% !important;
}
.colored-input-container .element > label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    color: var(--very-light-black);
    font-weight: 700;
    margin: 0;
}
.colored-input-container .element .input-container {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.colored-input-container .element .input-field {
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--shadow-gray);
    border-radius: 0.4rem;
    font-size: 0.88rem;
    background: #fff;
    color: var(--opacity-black);
    transition: border-color 0.15s, box-shadow 0.15s;
    box-shadow: none;
    margin: 0;
}
.colored-input-container .element .input-field:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 0.18rem rgba(52, 152, 219, 0.15);
}
.colored-input-container .element .input-field:disabled,
.colored-input-container .element .input-field[readonly] {
    background: var(--light-blue-for-table);
    color: var(--light-black);
    cursor: not-allowed;
}
.colored-input-container .element .underline {
    display: none;
}


/* =============================================================================
   VALIDAR MÉDICOS · SpecialtyComponent.vue
   Componente:  resources/js/components/validarmedicos/SpecialtyComponent.vue
   Apartado:    Form especialidad
   Prefijo:     .colored-input-container, .vmd-*
   ============================================================================= */
/* Anulamos el contenedor visual heredado de .colored-input-container global
   (padding, sombra, borde, margen) para que el sub-card del padre sea el único
   contenedor visible. Solo conservamos la estructura flex column. */
.colored-input-container {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    width: 100%;
}
.colored-input-container .four-inputs-container,
.colored-input-container .two-inputs-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    width: 100%;
}
.colored-input-container .element {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100% !important;
    min-width: 0;
}
.colored-input-container .element > label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    color: var(--very-light-black);
    font-weight: 700;
    margin: 0;
}
.colored-input-container .element .input-container {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.colored-input-container .element .input-field {
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--shadow-gray);
    border-radius: 0.4rem;
    font-size: 0.88rem;
    background: #fff;
    color: var(--opacity-black);
    transition: border-color 0.15s, box-shadow 0.15s;
    box-shadow: none;
    margin: 0;
}
.colored-input-container .element .input-field:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 0.18rem rgba(52, 152, 219, 0.15);
}
.colored-input-container .element .input-field:disabled,
.colored-input-container .element .input-field[readonly] {
    background: var(--light-blue-for-table);
    color: var(--light-black);
    cursor: not-allowed;
}
.colored-input-container .element .underline {
    display: none;
}


/* =============================================================================
   DOCUMENTOS · FatherComponent.vue
   Componente:  resources/js/components/documentos/FatherComponent.vue
   Apartado:    Shell del módulo documentos
   Prefijo:     .doc-shell, .doc-content
   ============================================================================= */
/* Patrón filtro + listado + paginador: listado scrollea adentro, paginador fijo abajo */
.csj-shell__content.doc-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.doc-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.85rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.doc-scroll::-webkit-scrollbar { width: 0.6rem; }
.doc-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    border-radius: 999px;
}
.doc-scroll::-webkit-scrollbar-track { background: #f1f5f9; }

.doc-footer {
    flex-shrink: 0;
    padding: 0.65rem 1rem;
    border-top: 1px solid rgba(46, 92, 158, 0.18);
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
}
.doc-footer .ms-paginate {
    margin-top: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}


/* =============================================================================
   DOCUMENTOS · ListComponent.vue
   Componente:  resources/js/components/documentos/ListComponent.vue
   Apartado:    Listado de documentos
   Prefijo:     .doc-list*, .doc-row*
   ============================================================================= */
.doc-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 1100px) {
    .doc-list { grid-template-columns: repeat(2, 1fr); }
}

/* ─── CARD ─────────────────────────────────────── */
.doc-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.7rem;
    padding: 0.9rem 1rem 0.9rem 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 28, 50, 0.04);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-flow: column;
    gap: 0.55rem;
}
.doc-card:hover {
    box-shadow: 0 0.4rem 1rem rgba(46, 92, 158, 0.14);
    border-color: rgba(46, 92, 158, 0.42);
    transform: translateY(-1px);
}
.doc-card::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0;
    width: 0.35rem;
    border-top-left-radius: 0.7rem; border-bottom-left-radius: 0.7rem;
    background: linear-gradient(180deg, #1a3c6e, #2e5c9e);
}

/* Header */
.doc-card__head {
    display: flex; align-items: flex-start; gap: 0.7rem;
}
.doc-card__icon {
    width: 2.4rem; height: 2.4rem; border-radius: 0.55rem;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.25);
}
.doc-card__icon .material-symbols-outlined { font-size: 1.3rem; }
.doc-card__title {
    flex: 1; min-width: 0;
    margin: 0; font-size: 0.98rem; font-weight: 700; color: #1a3c6e;
    line-height: 1.3; font-family: 'Merriweather', serif;
    word-break: break-word;
}
.doc-card__actions { display: flex; gap: 0.3rem; flex-shrink: 0; }
.doc-card__btn {
    position: relative;
    width: 2.1rem; height: 2.1rem; border-radius: 0.45rem;
    border: 1px solid rgba(46, 92, 158, 0.22); background: #fff; color: #5a7a9a;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: all 0.18s ease;
}
.doc-card__btn .material-symbols-outlined { font-size: 1.1rem; }
.doc-card__btn:hover { transform: translateY(-1px); }
.doc-card__btn--edit:hover { background: linear-gradient(135deg, #1a3c6e, #2e5c9e); color: #fff; border-color: transparent; box-shadow: 0 0.2rem 0.45rem rgba(26, 60, 110, 0.25); }
.doc-card__btn--del:hover  { background: #d93025; color: #fff; border-color: #d93025; box-shadow: 0 0.2rem 0.45rem rgba(217, 48, 37, 0.25); }
.doc-card__btn--log:hover  { background: #d4af37; color: #fff; border-color: #d4af37; box-shadow: 0 0.2rem 0.45rem rgba(212, 175, 55, 0.3); }

.doc-card__tip {
    position: absolute;
    bottom: calc(100% + 0.35rem);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #1a3c6e; color: #fff;
    padding: 0.25rem 0.5rem;
    border-radius: 0.3rem;
    font-size: 0.7rem; font-weight: 600; white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity 0.18s, transform 0.18s;
    z-index: 5;
}
.doc-card__tip::after {
    content: '';
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #1a3c6e;
}
.doc-card__btn:hover .doc-card__tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Descripción */
.doc-card__desc {
    margin: 0; font-size: 0.85rem; color: #2c3e50; line-height: 1.55;
    white-space: pre-line;
}

/* Indicadores */
.doc-card__indicators {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.doc-indicator {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.18rem 0.55rem;
    font-size: 0.72rem; font-weight: 600;
    border-radius: 999px;
    border: 1px solid transparent;
}
.doc-indicator .material-symbols-outlined { font-size: 0.95rem; }
.doc-indicator--ok    { background: #e7f6ec; color: #166534; border-color: rgba(22, 101, 52, 0.22); }
.doc-indicator--warn  { background: #fef3c7; color: #92400e; border-color: rgba(146, 64, 14, 0.22); }
.doc-indicator--info  { background: #e8f1fc; color: #1a3c6e; border-color: rgba(46, 92, 158, 0.22); }
.doc-indicator--link  {
    background: #e8f1fc;
    color: #1a3c6e;
    border-color: rgba(46, 92, 158, 0.32);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.18s ease;
}
.doc-indicator--link:hover {
    background: linear-gradient(135deg, #1a3c6e, #2e5c9e);
    color: #fff; border-color: transparent;
    box-shadow: 0 0.15rem 0.35rem rgba(26, 60, 110, 0.3);
    text-decoration: none;
    transform: translateY(-1px);
}

/* Footer: procesos / especialidades */
.doc-card__footer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem 0.8rem;
    padding-top: 0.55rem;
    border-top: 1px dashed rgba(46, 92, 158, 0.22);
}
@media (min-width: 760px) {
    .doc-card__footer { grid-template-columns: 1fr 1fr; }
}
.doc-card__col { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.doc-card__col-label {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.7rem; font-weight: 700;
    color: #5a7a9a; text-transform: uppercase; letter-spacing: 0.05em;
}
.doc-card__col-label .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; }
.doc-card__tags {
    display: flex; flex-wrap: wrap; gap: 0.3rem;
}
.doc-card__empty {
    font-size: 0.78rem;
    color: #94a3b8;
    font-style: italic;
}
.doc-tag {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.18rem 0.55rem;
    font-size: 0.72rem; font-weight: 600;
    border-radius: 0.35rem;
    border: 1px solid transparent;
    white-space: nowrap;
}
.doc-tag .material-symbols-outlined { font-size: 0.9rem; }
.doc-tag--oblig {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #991b1b;
    border-color: rgba(153, 27, 27, 0.22);
}
.doc-tag--opt {
    background: linear-gradient(135deg, #e7f6ec, #d4f0dc);
    color: #166534;
    border-color: rgba(22, 101, 52, 0.22);
}
.doc-tag--esp {
    background: linear-gradient(135deg, #e8f1fc, #d0e1f7);
    color: #1a3c6e;
    border-color: rgba(46, 92, 158, 0.22);
}

/* Empty state */
.doc-empty {
    grid-column: 1 / -1;
    background: #fff;
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.65rem;
    padding: 2.5rem 1rem; text-align: center; color: #5a7a9a;
}
.doc-empty .material-symbols-outlined { font-size: 3rem; color: rgba(46, 92, 158, 0.5); }
.doc-empty h5 { margin: 0.5rem 0 0.2rem; font-weight: 700; color: #1a3c6e; font-size: 1rem; }
.doc-empty p { margin: 0; font-size: 0.85rem; }
.doc-empty p b { color: #1a3c6e; }


/* =============================================================================
   DOCUMENTOS · ProcessComponent.vue
   Componente:  resources/js/components/documentos/ProcessComponent.vue
   Apartado:    Filtro por procesos
   Prefijo:     .doc-proc*
   ============================================================================= */
.doc-proc { display: flex; flex-direction: column; gap: 0.55rem; }

.doc-pick__counter {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.18rem 0.55rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 600;
    background: linear-gradient(135deg, rgba(46, 92, 158, 0.1), rgba(46, 92, 158, 0.2));
    color: #1a3c6e; border: 1px solid rgba(46, 92, 158, 0.25);
}
.doc-pick__counter b { color: #1a3c6e; font-weight: 700; }

.doc-pick__hint {
    margin: 0;
    display: flex; align-items: flex-start; gap: 0.4rem;
    font-size: 0.78rem; line-height: 1.45;
    color: #1a3c6e;
    background: rgba(46, 92, 158, 0.07);
    border: 1px solid rgba(46, 92, 158, 0.2);
    border-radius: 0.45rem;
    padding: 0.5rem 0.7rem;
}
.doc-pick__hint .material-symbols-outlined { font-size: 1rem; color: #2e5c9e; flex-shrink: 0; margin-top: 0.05rem; }

.doc-proc__list { display: flex; flex-direction: column; gap: 0.4rem; }

.doc-proc__row {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.2);
    border-radius: 0.5rem;
    flex-wrap: wrap;
    transition: background-color 0.18s, border-color 0.18s;
}
.doc-proc__row.is-selected {
    background: linear-gradient(135deg, rgba(46, 92, 158, 0.05), rgba(46, 92, 158, 0.1));
    border-color: rgba(46, 92, 158, 0.4);
}

.doc-proc__pick {
    position: relative;
    display: flex; align-items: center; gap: 0.5rem;
    flex: 1; min-width: 14rem;
    margin: 0;
    cursor: pointer;
    user-select: none;
}
.doc-proc__pick input[type="checkbox"] {
    position: absolute;
    top: 0; left: 0;
    opacity: 0;
    width: 1px; height: 1px;
    pointer-events: none;
    margin: 0;
}
.doc-pick__check {
    width: 1.15rem; height: 1.15rem;
    border-radius: 0.3rem;
    border: 1.5px solid rgba(46, 92, 158, 0.4);
    background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all 0.18s ease;
}
.doc-pick__check .material-symbols-outlined {
    font-size: 0.9rem;
    color: #fff;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.doc-proc__row.is-selected .doc-pick__check {
    background: linear-gradient(135deg, #1a3c6e, #2e5c9e);
    border-color: transparent;
    box-shadow: 0 0.15rem 0.3rem rgba(26, 60, 110, 0.3);
}
.doc-proc__row.is-selected .doc-pick__check .material-symbols-outlined { opacity: 1; }

.doc-proc__name {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    color: #1a3c6e;
    font-weight: 500;
    line-height: 1.35;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.doc-proc__row.is-selected .doc-proc__name { font-weight: 700; }

.doc-proc__radios {
    display: flex; gap: 0.4rem; flex-shrink: 0;
}
.doc-proc__radio {
    position: relative;
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.3rem 0.6rem;
    border-radius: 0.4rem;
    font-size: 0.75rem; font-weight: 600;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.22);
    color: #5a7a9a;
    cursor: pointer;
    transition: all 0.18s ease;
    margin: 0;
    user-select: none;
}
.doc-proc__radio input[type="radio"] {
    position: absolute;
    top: 0; left: 0;
    opacity: 0;
    width: 1px; height: 1px;
    pointer-events: none;
    margin: 0;
}
.doc-proc__radio .material-symbols-outlined { font-size: 0.9rem; }
.doc-proc__radio:hover { border-color: rgba(46, 92, 158, 0.4); color: #1a3c6e; }
.doc-proc__radio--oblig.is-active {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #991b1b;
    border-color: rgba(153, 27, 27, 0.3);
    box-shadow: inset 0 0 0 1px rgba(153, 27, 27, 0.18);
}
.doc-proc__radio--opt.is-active {
    background: linear-gradient(135deg, #e7f6ec, #d4f0dc);
    color: #166534;
    border-color: rgba(22, 101, 52, 0.3);
    box-shadow: inset 0 0 0 1px rgba(22, 101, 52, 0.18);
}

.doc-pick__empty {
    display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
    background: #fff;
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.55rem;
    padding: 1.5rem 1rem;
    color: #5a7a9a;
    font-size: 0.85rem;
}
.doc-pick__empty .material-symbols-outlined { font-size: 2rem; color: rgba(46, 92, 158, 0.5); }

@media (max-width: 720px) {
    .doc-proc__row { flex-direction: column; align-items: stretch; }
    .doc-proc__radios { justify-content: stretch; }
    .doc-proc__radio { flex: 1; justify-content: center; }
}


/* =============================================================================
   DOCUMENTOS · SpecialtyComponent.vue
   Componente:  resources/js/components/documentos/SpecialtyComponent.vue
   Apartado:    Picker de especialidad
   Prefijo:     .doc-pick*
   ============================================================================= */
.doc-pick { display: flex; flex-direction: column; gap: 0.55rem; }

.doc-pick__counter {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.18rem 0.55rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 600;
    background: linear-gradient(135deg, rgba(46, 92, 158, 0.1), rgba(46, 92, 158, 0.2));
    color: #1a3c6e; border: 1px solid rgba(46, 92, 158, 0.25);
}
.doc-pick__counter b { color: #1a3c6e; font-weight: 700; }

.doc-pick__hint {
    margin: 0;
    display: flex; align-items: flex-start; gap: 0.4rem;
    font-size: 0.78rem; line-height: 1.45;
    color: #1a3c6e;
    background: rgba(46, 92, 158, 0.07);
    border: 1px solid rgba(46, 92, 158, 0.2);
    border-radius: 0.45rem;
    padding: 0.5rem 0.7rem;
}
.doc-pick__hint .material-symbols-outlined { font-size: 1rem; color: #2e5c9e; flex-shrink: 0; margin-top: 0.05rem; }

.doc-pick__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.4rem;
}

.doc-pick__item {
    position: relative;
    display: flex; align-items: flex-start; gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.2);
    border-radius: 0.45rem;
    font-size: 0.82rem;
    color: #2c3e50;
    cursor: pointer;
    transition: all 0.18s ease;
    margin: 0;
    user-select: none;
    min-width: 0;
    overflow: hidden;
}
.doc-pick__item input[type="checkbox"] {
    position: absolute;
    top: 0; left: 0;
    opacity: 0;
    width: 1px; height: 1px;
    pointer-events: none;
    margin: 0;
}
.doc-pick__check {
    width: 1.1rem; height: 1.1rem;
    border-radius: 0.3rem;
    border: 1.5px solid rgba(46, 92, 158, 0.4);
    background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all 0.18s ease;
}
.doc-pick__check .material-symbols-outlined {
    font-size: 0.85rem;
    color: #fff;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.doc-pick__name {
    flex: 1;
    min-width: 0;
    line-height: 1.35;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
}
.doc-pick__check { margin-top: 0.1rem; }

.doc-pick__item:hover {
    border-color: rgba(46, 92, 158, 0.5);
    background: rgba(46, 92, 158, 0.04);
}
.doc-pick__item.is-selected {
    background: linear-gradient(135deg, rgba(46, 92, 158, 0.08), rgba(46, 92, 158, 0.14));
    border-color: rgba(46, 92, 158, 0.5);
    color: #1a3c6e;
    font-weight: 600;
}
.doc-pick__item.is-selected .doc-pick__check {
    background: linear-gradient(135deg, #1a3c6e, #2e5c9e);
    border-color: transparent;
    box-shadow: 0 0.15rem 0.3rem rgba(26, 60, 110, 0.3);
}
.doc-pick__item.is-selected .doc-pick__check .material-symbols-outlined { opacity: 1; }

.doc-pick__empty {
    display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
    background: #fff;
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.55rem;
    padding: 1.5rem 1rem;
    color: #5a7a9a;
    font-size: 0.85rem;
}
.doc-pick__empty .material-symbols-outlined { font-size: 2rem; color: rgba(46, 92, 158, 0.5); }


/* =============================================================================
   DOCUMENTOS · UploadComponent.vue
   Componente:  resources/js/components/documentos/UploadComponent.vue
   Apartado:    Upload de documentos
   Prefijo:     .doc-upload* (sin prefijo claro, scoped)
   ============================================================================= */
    .s-element-document {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
    }

    .upload-legend{
        display: flex;
        gap: 0.5rem;
        background: rgba(46, 92, 158, 0.07);
        border: 1px solid rgba(46, 92, 158, 0.2);
        border-left: 3px solid #2e5c9e;
        border-radius: 0.45rem;
        padding: 0.55rem 0.75rem;
        margin: 0;
        text-align: left;
        width: 100%;
    }

    .upload-legend > span{
        color: #2e5c9e;
        font-size: 1.1rem !important;
        margin: 0 !important;
        flex-shrink: 0;
    }

    .upload-legend ul{
        margin: 0;
        padding-left: 1rem;
        list-style: disc;
        color: #2c3e50;
    }

    .upload-legend li{
        font-size: 0.78rem;
        line-height: 1.45;
        margin: 0;
    }

    .dropzone{
        width: 100%;
        min-height: 8rem;
        border: 2px dashed rgba(46, 92, 158, 0.4);
        border-radius: 0.6rem;
        background: linear-gradient(180deg, #f7fafd, #ffffff);
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.25s ease;
        padding: 1rem;
        margin: 0;
    }

    .dropzone:hover{
        border-color: #2e5c9e;
        background: linear-gradient(180deg, rgba(46, 92, 158, 0.06), rgba(46, 92, 158, 0.02));
    }

    .dropzone--dragging{
        border-color: #1a3c6e;
        background: linear-gradient(180deg, rgba(46, 92, 158, 0.1), rgba(46, 92, 158, 0.04));
        transform: scale(1.005);
    }

    .dropzone--filled{
        border-style: solid;
        border-color: #16a34a;
        background: linear-gradient(180deg, #f0fbef, #ffffff);
    }

    .dropzone--filled:hover{
        background: linear-gradient(180deg, #e6f7e4, #f5fbf5);
    }

    .dropzone__icon{
        width: 2.8rem;
        height: 2.8rem;
        border-radius: 50%;
        background: linear-gradient(135deg, #1a3c6e, #2e5c9e);
        box-shadow: 0 0.2rem 0.6rem rgba(26, 60, 110, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.6rem;
    }

    .dropzone__icon span{
        color: #fff;
        font-size: 1.5rem;
    }

    .dropzone__title{
        font-size: 0.92rem;
        font-weight: 700;
        color: #1a3c6e;
        margin: 0;
    }

    .dropzone__hint{
        font-size: 0.75rem;
        color: #5a7a9a;
        margin: 0.15rem 0 0 0;
    }

    .file-chip{
        display: flex;
        align-items: center;
        gap: 0.7rem;
        width: 100%;
        padding: 0.4rem;
    }

    .file-chip--saved{
        background: linear-gradient(135deg, #f0fbef, #ffffff);
        border: 1px solid #16a34a;
        border-radius: 0.5rem;
        padding: 0.65rem 0.85rem;
    }

    .file-chip__icon{
        font-size: 1.85rem;
        color: #16a34a;
        flex-shrink: 0;
    }

    .file-chip__info{
        flex: 1;
        text-align: left;
        min-width: 0;
    }

    .file-chip__name{
        font-size: 0.92rem;
        font-weight: 700;
        color: #1a3c6e;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .file-chip__hint{
        font-size: 0.74rem;
        color: #5a7a9a;
        margin: 0.1rem 0 0 0;
    }

    .file-chip__check{
        color: #16a34a;
        font-size: 1.3rem;
        flex-shrink: 0;
    }

    .btn-upload{
        margin-top: 0.5rem;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        align-self: flex-start;
        padding: 0.5rem 0.95rem;
        border-radius: 0.45rem;
        border: none;
        background: linear-gradient(135deg, #16a34a, #15803d);
        color: #fff;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 0.2rem 0.45rem rgba(22, 163, 74, 0.3);
        transition: all 0.18s ease;
    }
    .btn-upload:hover {
        transform: translateY(-1px);
        box-shadow: 0 0.3rem 0.6rem rgba(22, 163, 74, 0.4);
        color: #fff;
    }
    .btn-upload .material-symbols-outlined { font-size: 1.05rem; }

    .btn-icon{
        padding: 0.4rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.4rem;
        background: #d93025;
        border: none;
        color: #fff;
        cursor: pointer;
        transition: all 0.18s ease;
    }
    .btn-icon:hover {
        background: #b91c1c;
        transform: translateY(-1px);
        box-shadow: 0 0.2rem 0.45rem rgba(217, 48, 37, 0.3);
    }
    .btn-icon span{ font-size: 1.15rem; }


/* =============================================================================
   CURRICULUM · CargaCurriculumComponent.vue
   Componente:  resources/js/components/curriculum/CargaCurriculumComponent.vue
   Apartado:    Vista principal de carga del CV (índice de capítulos + acordeón actividades)
   Prefijo:     .cv-shell, .cv-*
   ============================================================================= */
/* ───────────────────────────  SHELL  ─────────────────────────── */
/* width:100% + box-sizing aseguran que el componente siempre ocupe el ancho del
   padre, sin importar si la lista de capítulos está vacía o llena. */
.cv-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 93vh;
  min-width: 0;
  background: #f7f9fc;
  box-sizing: border-box;
}
.cv-shell *, .cv-shell *::before, .cv-shell *::after { box-sizing: border-box; }

/* ───────────────────────────  HEADER  ─────────────────────────── */
.cv-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #ffffff;
  border-bottom: 1px solid #e2e8ef;
  padding: 0.9rem 1.5rem 0 1.5rem;
  box-shadow: 0 0.1rem 0.3rem rgba(0,0,0,0.04);
}

.cv-header__top {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.7rem;
}

.cv-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #f1f3f8;
  color: #475569;
  border: 1px solid #d8dde6;
  padding: 0.4rem 0.85rem;
  border-radius: 0.4rem;
  font-weight: 600;
  font-size: 0.85rem;
  transition: 0.2s;
}
.cv-back-btn:hover {
  background: #e6e9f0;
  color: #1e293b;
}
.cv-back-btn span {
  font-size: 1.15rem;
}

.cv-header__title {
  flex: 1;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--blue);
}

/* ─── FILA: progress + leyenda ─── */
.cv-header__row {
  display: flex;
  align-items: stretch;
  gap: 0.8rem;
  margin-bottom: 0.7rem;
  flex-wrap: wrap;
}

/* ─── PROGRESS BAR ─── */
.cv-progress {
  flex: 1 1 22rem;
  min-width: 18rem;
  background: #f8fafc;
  border: 1px solid #e2e8ef;
  border-radius: 0.5rem;
  padding: 0.6rem 0.9rem;
  --cv-progress-color: #94a3b8;
}
.cv-progress--start { --cv-progress-color: #ef4444; }
.cv-progress--low   { --cv-progress-color: #f97316; }
.cv-progress--mid   { --cv-progress-color: #eab308; }
.cv-progress--ok    { --cv-progress-color: var(--green, #269a1c); }

.cv-progress__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}
.cv-progress__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cv-progress__values { font-size: 0.92rem; color: #1e293b; }
.cv-progress__values b { font-size: 1.05rem; color: var(--cv-progress-color); }
.cv-progress__values small { color: #64748b; }
.cv-progress__pct {
  margin-left: 0.6rem;
  font-weight: 700;
  color: var(--cv-progress-color);
  font-size: 0.9rem;
}
.cv-progress__bar {
  width: 100%;
  height: 0.5rem;
  background: #e2e8ef;
  border-radius: 999px;
  overflow: hidden;
}
.cv-progress__fill {
  height: 100%;
  background: var(--cv-progress-color);
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* ─── LEYENDA DE ESTADOS ─── */
/* Aparece a la derecha de la barra de avance, alineada a la misma altura. En pantallas
   estrechas hace wrap y queda debajo. */
.cv-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  background: #f8fafc;
  border: 1px solid #e2e8ef;
  border-radius: 0.5rem;
  padding: 0.6rem 0.9rem;
}
.cv-legend__title {
  font-size: 0.7rem;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 0.2rem;
}
.cv-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.cv-legend__item span.material-symbols-outlined { font-size: 1rem; }

.cv-legend__item--warn      { background: #fff7ed; color: #9a3412; border: 1px solid #fdba74; }
.cv-legend__item--commented { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.cv-legend__item--accepted  { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.cv-legend__item--rejected  { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* ─── OBSERVACIONES (botón + panel flotante) ─── */
.cv-obs {
  position: relative;
  flex-shrink: 0;
}
.cv-obs__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: white;
  border: 1px solid #cbd5e1;
  color: #475569;
  padding: 0.55rem 0.85rem;
  border-radius: 0.45rem;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  transition: 0.15s;
  font-family: inherit;
  height: 100%;
  position: relative;
}
.cv-obs__btn:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: #f7faff;
}
.cv-obs__btn--active {
  border-color: var(--blue);
  color: var(--blue);
  background: #eaeeff;
  box-shadow: 0 0 0 3px rgba(64,128,233,0.15);
}
.cv-obs__btn--has {
  border-color: #f59e0b;
  background: #fffbeb;
  color: #92400e;
}
.cv-obs__btn--has:hover {
  background: #fef3c7;
  border-color: #d97706;
  color: #78350f;
}
.cv-obs__btn span.material-symbols-outlined { font-size: 1.1rem; }
.cv-obs__btn-label { font-size: 0.82rem; }

.cv-obs__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 0.35rem;
  background: #dc2626;
  color: white;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  margin-left: 0.1rem;
}

/* Panel flotante */
.cv-obs__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 50;
  width: min(28rem, 92vw);
  background: white;
  border: 1px solid #e2e8ef;
  border-radius: 0.6rem;
  box-shadow: 0 1rem 2rem rgba(0,0,0,0.15);
  overflow: hidden;
  /* Pequeño triangulito apuntando al botón (opcional, decoración) */
}
.cv-obs__panel-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 0.9rem;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-bottom: 1px solid #fde68a;
}
.cv-obs__panel-head > span.material-symbols-outlined {
  font-size: 1.3rem;
  color: #d97706;
}
.cv-obs__panel-head h3 {
  margin: 0;
  flex: 1;
  font-size: 0.92rem;
  font-weight: 700;
  color: #78350f;
}
.cv-obs__close {
  width: 1.8rem;
  height: 1.8rem;
  border: 0;
  background: transparent;
  border-radius: 50%;
  color: #92400e;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: 0.15s;
}
.cv-obs__close:hover { background: rgba(146, 64, 14, 0.15); }
.cv-obs__close span { font-size: 1.1rem; }

/* Lista scrolleable interna — limita el alto para que panels grandes no salgan de pantalla */
.cv-obs__panel-body {
  max-height: 22rem;
  overflow-y: auto;
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cv-obs__item {
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  border-radius: 0.4rem;
  padding: 0.6rem 0.8rem;
}
.cv-obs__text {
  margin: 0;
  font-size: 0.85rem;
  color: #713f12;
  line-height: 1.45;
  white-space: pre-line;
}
.cv-obs__date {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #92400e;
  opacity: 0.85;
}
.cv-obs__date span { font-size: 0.9rem; }

.cv-obs__empty {
  padding: 1.5rem 1rem;
  text-align: center;
  color: #94a3b8;
}
.cv-obs__empty span.material-symbols-outlined {
  font-size: 2.2rem;
  display: block;
  margin: 0 auto 0.4rem auto;
}
.cv-obs__empty p { margin: 0; font-size: 0.85rem; }

/* Animación del panel */
.cv-obs-fade-enter-active, .cv-obs-fade-leave-active { transition: opacity 0.15s, transform 0.15s; }
.cv-obs-fade-enter, .cv-obs-fade-leave-to { opacity: 0; transform: translateY(-0.3rem); }

/* Responsive: en mobile el panel ocupa todo el ancho disponible */
@media (max-width: 640px) {
  .cv-obs__panel {
    right: -0.5rem;
    width: calc(100vw - 1rem);
  }
  .cv-obs__btn-label { display: none; }
}

/* En pantallas chicas: ocultar el texto, dejar solo los íconos circulares para ahorrar espacio. */
@media (max-width: 768px) {
  .cv-legend__label { display: none; }
  .cv-legend__item {
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    justify-content: center;
  }
}

/* ─── TABS (dentro de la columna izquierda) ─── */
.cv-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #e2e8ef;
  background: #ffffff;
  flex-shrink: 0;
}
.cv-tab {
  flex: 1 1 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 0.7rem 0.4rem;
  color: #64748b;
  font-weight: 600;
  font-size: 0.78rem;
  cursor: pointer;
  transition: 0.2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cv-tab:hover { color: var(--blue); background: #f8fafc; }
.cv-tab span.material-symbols-outlined { font-size: 1rem; }
.cv-tab--active {
  color: var(--blue);
  border-bottom-color: var(--blue);
  background: #f7faff;
}

/* ───────────────────────────  BODY  ─────────────────────────── */
.cv-body {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  gap: 0;
  min-height: 0;
  width: 100%;
}

/* ─── LISTA IZQUIERDA (30%) ─── */
/* Ancho fijo en 30% pase lo que pase: con o sin capítulos, en cualquier tab.
   flex-basis + min-width + max-width garantizan que no se colapse cuando el
   contenido es corto (estado vacío) ni se expanda cuando es largo. */
.cv-list {
  flex: 0 0 30%;
  width: 30%;
  min-width: 30%;
  max-width: 30%;
  background: #ffffff;
  border-right: 1px solid #e2e8ef;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Wrapper scrolleable solo del listado de capítulos. Los tabs se quedan fijos
   arriba (sticky) sin scroll. */
.cv-list__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.cv-list__inner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 0 auto;
}

/* Capítulo (acordeón) */
.cv-cap {
  border: 1px solid #e2e8ef;
  border-radius: 0.5rem;
  background: white;
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.cv-cap:hover { box-shadow: 0 0.2rem 0.6rem rgba(0,0,0,0.05); }

.cv-cap__head {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  background: white;
  border: 0;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  text-align: left;
}
.cv-cap__head:hover { background: #f8fafc; }

.cv-cap__caret {
  font-size: 1.3rem;
  color: #94a3b8;
  margin-top: 0.05rem;
  transition: transform 0.2s ease;
}
.cv-cap__caret--open { transform: rotate(90deg); color: var(--blue); }

.cv-cap__title-wrap { flex: 1; min-width: 0; }
.cv-cap__title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.3;
}
.cv-cap__indice {
  display: inline-block;
  font-weight: 700;
  color: var(--blue);
  margin-right: 0.3rem;
}

.cv-cap__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.4rem;
}

/* Chips */
.cv-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.cv-chip--required {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
}
.cv-chip--score {
  background: #dcfce7;
  color: #166534;
}
.cv-chip--score b { font-weight: 700; }
.cv-chip--count {
  background: #e0e7ff;
  color: #3730a3;
}
/* Min/Max del capítulo: tonos amarillo/rojo suaves para diferenciarlos del puntaje
   actual (verde) y del contador de registros (azul). */
.cv-chip--min {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
.cv-chip--max {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
.cv-chip--min span.material-symbols-outlined,
.cv-chip--max span.material-symbols-outlined { font-size: 0.85rem; }
/* Chip neutro: cuando no aplica mín/máx — gris claro con texto en cursiva */
.cv-chip--neutral {
  background: #f1f5f9;
  color: #94a3b8;
  border: 1px solid #e2e8f0;
  font-style: italic;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
.cv-chip--neutral span.material-symbols-outlined { font-size: 0.85rem; color: #94a3b8; }

/* Cuerpo del capítulo (lista de actividades) */
.cv-cap__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.4rem 0.6rem 0.7rem 1.5rem;
  border-top: 1px solid #f1f5f9;
  background: #fbfcfe;
  max-height: 100rem;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease, border-top-color 0.2s;
}
.cv-cap__body--closed {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top-color: transparent;
}

/* Actividad (botón clickable) */
.cv-act {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  background: white;
  border: 1px solid #e2e8ef;
  border-radius: 0.4rem;
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  text-align: left;
  transition: 0.15s;
}
.cv-act:hover {
  border-color: var(--blue);
  background: #f8fafc;
}
.cv-act--warn {
  border-left: 3px solid #f97316;
  background: #fff7ed;
}
.cv-act--filled {
  border-left: 3px solid var(--green, #269a1c);
}
.cv-act--active {
  background: #eaeeff;
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(64,128,233,0.15);
}

.cv-act__icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 0.05rem;
}
.cv-act--warn .cv-act__icon { color: #d97706; }
.cv-act--filled .cv-act__icon { color: var(--green, #269a1c); }
.cv-act__icon--empty { color: #cbd5e1; }

.cv-act__body { flex: 1; min-width: 0; }
.cv-act__name {
  margin: 0;
  font-size: 0.85rem;
  color: #334155;
  line-height: 1.3;
}
.cv-act__indice {
  font-weight: 700;
  color: var(--blue);
  margin-right: 0.2rem;
}

.cv-act__chips {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}
.cv-mini-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.66rem;
  font-weight: 600;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
}
.cv-mini-chip span.material-symbols-outlined { font-size: 0.8rem; }
.cv-mini-chip--score {
  background: #dcfce7;
  color: #166534;
}
.cv-mini-chip--min {
  background: #fef3c7;
  color: #92400e;
}
.cv-mini-chip--max {
  background: #fee2e2;
  color: #991b1b;
}
.cv-mini-chip--factor {
  background: #eef2ff;
  color: #3730a3;
}
/* Mini-chip neutro: cuando no aplica mín/máx en la actividad */
.cv-mini-chip--neutral {
  background: #f1f5f9;
  color: #94a3b8;
  font-style: italic;
}
.cv-mini-chip--neutral span.material-symbols-outlined { color: #94a3b8; }

.cv-act__chev {
  color: #cbd5e1;
  font-size: 1.1rem;
  align-self: center;
}
.cv-act:hover .cv-act__chev { color: var(--blue); }

/* Empty state — debe ocupar todo el alto disponible para que la columna izquierda
   no se colapse cuando se cambia al tab "Capítulos ingresados" sin datos. */
.cv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 0 auto;
  min-height: 100%;
  width: 100%;
  color: #94a3b8;
  text-align: center;
  padding: 2rem;
}
.cv-empty span.material-symbols-outlined {
  font-size: 3rem;
  margin-bottom: 0.6rem;
}
.cv-empty h5 { font-size: 1rem; color: #475569; margin: 0; }
.cv-empty h6 { font-size: 0.85rem; color: #94a3b8; margin: 0.2rem 0 0 0; }

/* ─── DETALLE DERECHA ─── */
/* Toma el resto del ancho. min-width: 0 evita que el contenido interno (textos
   largos, tablas) fuerce a la columna a expandirse y rompa el layout. */
.cv-detail {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 1.2rem 1.5rem;
}

.cv-summary__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #e2e8ef;
  padding-bottom: 0.5rem;
}
.cv-summary__head h2 {
  font-size: 1.15rem;
  margin: 0;
  font-weight: 700;
  color: var(--blue);
}
.cv-summary__head span { color: var(--blue); font-size: 1.6rem; }

/* Callout amarillo (comentarios pendientes) */
.cv-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  border-radius: 0.5rem;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
}
.cv-callout--warn {
  background: #fef9c3;
  border-left: 4px solid #eab308;
  color: #713f12;
}
/* Variante informativa (estáticos): azul neutro, no transmite "error/bloqueo" */
.cv-callout--info {
  background: #eaf0f8;
  border-left: 4px solid #2e5c9e;
  color: #1a3c6e;
}
/* Variante de requisito obligatorio (dinámicos que bloquean el envío): rojo */
.cv-callout--danger {
  background: #fee2e2;
  border-left: 4px solid #dc2626;
  color: #7f1d1d;
}
.cv-callout > span.material-symbols-outlined {
  font-size: 1.4rem;
  color: #ca8a04;
  flex-shrink: 0;
}
.cv-callout--info > span.material-symbols-outlined { color: #2e5c9e; }
.cv-callout--danger > span.material-symbols-outlined { color: #dc2626; }
.cv-callout__title { margin: 0 0 0.3rem 0; font-weight: 700; font-size: 0.92rem; }
.cv-callout__list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  line-height: 1.4;
}
.cv-callout__list li { margin-bottom: 0.15rem; }

/* Candado info laboral (flujo CV): banner rojo con acción. Reusa .cv-callout--danger
   y agrega el texto explicativo + botones para registrar exactamente lo que falta
   (institución pública / hospital privado). El color rojo lo da .btn-danger. */
.cv-laboral__text { margin: 0 0 0.55rem 0; font-size: 0.85rem; line-height: 1.45; }
.cv-laboral__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cv-laboral__btn { display: inline-flex; align-items: center; gap: 0.35rem; }
.cv-laboral__btn .material-symbols-outlined { font-size: 1.05rem; }

/* CTA enviar al consejo. Sticky-top dentro de .cv-detail (scroll container)
   para que el botón "Enviar nuevamente a revisión" siga visible al hacer
   scroll por el resumen y observaciones — el médico no tiene que regresar
   arriba para enviarlo. Sombra se intensifica sutilmente cuando está pegado. */
.cv-cta-send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  background: linear-gradient(90deg, #f0fbef 0%, #e6f7e4 100%);
  border-left: 4px solid var(--green, #269a1c);
  border-radius: 0.5rem;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
  box-shadow: 0 0.15rem 0.5rem rgba(38,154,28,0.12);
  position: sticky;
  top: 0;
  z-index: 5;
}
.cv-cta-send__info {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  flex: 1 1 280px;
}
.cv-cta-send__info > span {
  font-size: 1.7rem;
  color: var(--green, #269a1c);
  flex-shrink: 0;
}
.cv-cta-send__title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: #1c5b14;
}
.cv-cta-send__text {
  margin: 0.2rem 0 0 0;
  font-size: 0.83rem;
  color: #2d4a26;
  line-height: 1.35;
}
.cv-cta-send__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.2rem;
  font-weight: 700;
  font-size: 0.9rem;
}
.cv-cta-send__btn span { font-size: 1.15rem; }

/* Aviso debajo del CTA: aclara que aún puede agregar más actividades, pero al confirmar
   queda bloqueado hasta que el Consejo revise. flex-basis: 100% lo fuerza a ocupar una
   nueva fila del flex container .cv-cta-send. */
.cv-cta-send__note {
  flex-basis: 100%;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.6rem;
  padding-top: 0.7rem;
  border-top: 1px dashed #a7d8a3;
}
.cv-cta-send__note > span {
  color: #ca8a04;
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 0.05rem;
}
.cv-cta-send__note p {
  margin: 0;
  font-size: 0.82rem;
  color: #2d4a26;
  line-height: 1.45;
}
.cv-cta-send__note b { color: #1c5b14; font-weight: 700; }

.cv-summary__sections {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Acciones inferiores cuando se ve detalle de actividad */
.cv-detail__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-top: 0.8rem;
  margin-top: auto;
  border-top: 1px solid #e2e8ef;
}
.cv-detail__actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 1.1rem;
  font-weight: 600;
}

/* CTA destacada "Ver resumen de la solicitud": centrada y prominente para que
   no pase desapercibida (varios médicos no la notaban). Va ARRIBA del detalle. */
.cv-detail__cta-top {
  display: flex;
  justify-content: center;
  padding-bottom: 0.85rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid #e2e8ef;
}
.cv-summary-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1.9rem;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #1f4e79 0%, #2e75b6 100%);
  border: none;
  border-radius: 0.7rem;
  cursor: pointer;
  box-shadow: 0 0.35rem 0.9rem rgba(31, 78, 121, 0.35);
  animation: cvSummaryPulse 2.2s ease-in-out infinite;
  transition: transform 0.15s, box-shadow 0.15s;
}
.cv-summary-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.55rem 1.2rem rgba(31, 78, 121, 0.5);
  animation: none;
}
.cv-summary-cta .material-symbols-outlined { font-size: 1.3rem; }
.cv-summary-cta__arrow { transition: transform 0.15s; }
.cv-summary-cta:hover .cv-summary-cta__arrow { transform: translateX(4px); }

/* Pulso suave: un halo que late para atraer la mirada sin ser molesto. */
@keyframes cvSummaryPulse {
  0%, 100% { box-shadow: 0 0.35rem 0.9rem rgba(31, 78, 121, 0.30); }
  50%      { box-shadow: 0 0.35rem 1.4rem rgba(46, 117, 182, 0.65); }
}

/* Respeta a quien prefiere menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  .cv-summary-cta { animation: none; }
}

/* ─── RESPONSIVE ─── */
@media (max-width: 992px) {
  .cv-body { flex-direction: column; }
  .cv-list {
    flex: 0 0 auto;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    max-height: 50vh;
    border-right: 0;
    border-bottom: 1px solid #e2e8ef;
  }
  .cv-detail { padding: 1rem; }
}


/* =============================================================================
   CURRICULUM · CargaPagoComponent.vue
   Componente:  resources/js/components/curriculum/CargaPagoComponent.vue
   Apartado:    Carga del comprobante de pago para la solicitud de recertificación
   Prefijo:     .cp-shell, .cp-*
   ============================================================================= */
/* ─── SHELL ─── */
.cp-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 93vh;
  background: #f7f9fc;
  box-sizing: border-box;
}
.cp-shell *, .cp-shell *::before, .cp-shell *::after { box-sizing: border-box; }

/* ─── HEADER ─── */
.cp-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.5rem;
  background: white;
  border-bottom: 1px solid #e2e8ef;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.cp-header__icon {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--blue);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.cp-header__title-wrap { flex: 1; min-width: 0; }
.cp-header__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--blue);
}
.cp-header__subtitle {
  margin: 0.15rem 0 0 0;
  font-size: 0.82rem;
  color: #64748b;
}
.cp-header__status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.cp-header__status span { font-size: 1.1rem; }
.cp-header__status--paid {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}
.cp-header__status--pending {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}

/* ─── BODY SPLIT ─── */
.cp-body {
  flex: 1 1 auto;
  display: flex;
  gap: 0;
  min-height: 0;
  overflow: hidden;
}

/* ── ACUSE PDF (izquierda 60%) ── */
.cp-acuse {
  flex: 1 1 60%;
  width: 60%;
  display: flex;
  flex-direction: column;
  background: white;
  border-right: 1px solid #e2e8ef;
  overflow: hidden;
  min-width: 0;
}
.cp-acuse__head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid #e2e8ef;
  background: #f8fafc;
  flex-shrink: 0;
}
.cp-acuse__head h3 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--blue);
}
.cp-acuse__head span { color: var(--blue); font-size: 1.2rem; }
.cp-acuse__viewer {
  flex: 1 1 auto;
  background: #1e293b;
  min-height: 0;
}
.cp-acuse__viewer embed { display: block; }

/* ── PANEL DERECHO ── */
.cp-pago {
  flex: 1 1 40%;
  width: 40%;
  min-width: 0;
  padding: 1rem 1.2rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* BANNER pago realizado */
.cp-paid {
  display: flex;
  gap: 0.7rem;
  background: linear-gradient(135deg, #f0fbef 0%, #dcfce7 100%);
  border: 1px solid #86efac;
  border-radius: 0.5rem;
  padding: 1rem 1.1rem;
}
.cp-paid__icon {
  font-size: 2rem;
  color: var(--green, #269a1c);
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.cp-paid__content { flex: 1; min-width: 0; }
.cp-paid__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #166534;
}
.cp-paid__date {
  margin: 0.4rem 0 0 0;
  font-size: 0.85rem;
  color: #166534;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.cp-paid__date span { font-size: 1.05rem; }

/* Mensaje configurado por el consejo (sms_pago_realizado_cv): se muestra dentro del
   banner verde como una sub-card blanca para que destaque del texto del título y la fecha. */
.cp-paid__message {
  margin-top: 0.7rem;
  padding: 0.65rem 0.8rem;
  background: rgba(255, 255, 255, 0.7);
  border-left: 3px solid var(--green, #269a1c);
  border-radius: 0.35rem;
}
.cp-paid__message p {
  margin: 0;
  font-size: 0.83rem;
  color: #14532d;
  line-height: 1.45;
  white-space: pre-line;
}

/* CARD genérica */
.cp-card {
  background: white;
  border: 1px solid #e2e8ef;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 0.1rem 0.3rem rgba(0,0,0,0.03);
  flex-shrink: 0;
}
.cp-card__head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 0.9rem;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8ef;
}
.cp-card__head h3 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--blue);
  flex: 1;
}
.cp-card__head > span.material-symbols-outlined { color: var(--blue); font-size: 1.15rem; }
.cp-card__badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: #e0e7ff;
  color: #3730a3;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cp-card__body { padding: 0.85rem 0.9rem; }

/* CONVOCATORIA radio card */
.cp-conv {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid #e2e8ef;
  border-radius: 0.45rem;
  cursor: pointer;
  transition: 0.15s;
  background: white;
  margin-bottom: 0.5rem;
  position: relative;
}
.cp-conv:last-child { margin-bottom: 0; }
.cp-conv:hover { border-color: var(--blue); background: #f8fafc; }
.cp-conv--selected {
  border-color: var(--blue);
  background: #eaeeff;
  box-shadow: 0 0 0 2px rgba(64,128,233,0.15);
}

/* Variante "bloqueada": cuando la solicitud ya tiene convocatoria asignada y el
   médico no puede cambiarla. El cursor cambia a default y se desactiva el hover. */
.cp-conv--locked { cursor: default; }
.cp-conv--locked:hover {
  border-color: var(--blue);
  background: #eaeeff;
}
.cp-conv--locked .cp-conv__radio { cursor: not-allowed; }

/* Nota explicativa cuando la convocatoria viene bloqueada. */
.cp-conv-note {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0 0 0.6rem;
  padding: 0.55rem 0.7rem;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-left: 4px solid #f59e0b;
  border-radius: 0.4rem;
  font-size: 0.78rem;
  color: #78350f;
  line-height: 1.4;
}
.cp-conv-note .material-symbols-outlined {
  color: #b45309;
  font-size: 1.05rem;
  flex-shrink: 0;
  margin-top: 0.05rem;
}
.cp-conv__radio {
  margin-top: 0.2rem;
  accent-color: var(--blue);
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
}
.cp-conv__content { flex: 1; min-width: 0; }
.cp-conv__name {
  margin: 0;
  font-size: 0.93rem;
  font-weight: 700;
  color: #1e293b;
}
.cp-conv__desc {
  margin: 0.2rem 0 0 0;
  font-size: 0.8rem;
  color: #475569;
  white-space: pre-line;
  line-height: 1.4;
}
.cp-conv__dates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.4rem;
  font-size: 0.74rem;
  color: #64748b;
}
.cp-conv__dates b { color: #475569; font-weight: 700; }
.cp-conv__check {
  color: var(--blue);
  font-size: 1.3rem;
  flex-shrink: 0;
  margin-top: 0.05rem;
}

/* CALLOUTS */
.cp-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-radius: 0.5rem;
}
.cp-callout--bad {
  background: #fee2e2;
  border-left: 4px solid #dc2626;
}
.cp-callout--bad > span.material-symbols-outlined {
  color: #b91c1c;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.cp-callout__title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #991b1b;
}
.cp-callout__text {
  margin: 0.2rem 0 0 0;
  font-size: 0.83rem;
  color: #7f1d1d;
  line-height: 1.4;
}

/* INDICACIONES */
.cp-indications {
  margin: 0 0 0.9rem 0;
  font-size: 0.85rem;
  color: #334155;
  line-height: 1.5;
  white-space: pre-line;
  background: #f8fafc;
  padding: 0.7rem 0.85rem;
  border-radius: 0.4rem;
  border-left: 3px solid var(--blue);
}

/* MONTO destacado */
.cp-amount {
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  border: 1px solid #c7d2fe;
  border-radius: 0.5rem;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.cp-amount__label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #4338ca;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cp-amount__value {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  color: #312e81;
}
.cp-amount__value span.material-symbols-outlined {
  font-size: 1.4rem;
  color: #4f46e5;
  align-self: center;
  margin-right: 0.2rem;
}
.cp-amount__currency {
  font-size: 1rem;
  font-weight: 600;
}
.cp-amount__value b {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.cp-amount__mxn {
  font-size: 0.78rem;
  color: #6366f1;
  margin-left: 0.3rem;
}
.cp-amount--link {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.5rem;
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.cp-amount--link > span { color: var(--blue); font-size: 1.3rem; }
.cp-amount--link p { margin: 0; font-size: 0.85rem; color: #334155; line-height: 1.4; }
.cp-amount--link a { color: var(--blue); font-weight: 600; word-break: break-all; }

/* ACTIONS — sticky al fondo del panel para que "Adjuntar comprobante" siempre se vea
   incluso cuando el contenido del panel derecho excede el alto. El gradiente difumina
   el contenido que pasa por detrás al scrollear. */
.cp-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
  padding: 0.85rem 0 0.4rem 0;
  background: linear-gradient(180deg, rgba(247,249,252,0) 0%, rgba(247,249,252,0.95) 25%, #f7f9fc 50%);
}
.cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.7rem 1.3rem;
  border-radius: 0.4rem;
  font-weight: 700;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: 0.15s;
  font-family: inherit;
  width: 100%;
}
.cp-btn span { font-size: 1.25rem; }
.cp-btn:hover:not(:disabled) { transform: translateY(-1px); }
.cp-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.cp-btn--primary {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
  box-shadow: 0 0.2rem 0.6rem rgba(64,128,233,0.3);
}
.cp-btn--primary:hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow: 0 0.3rem 0.8rem rgba(64,128,233,0.4);
}

.cp-btn--ghost {
  background: white;
  color: #475569;
  border-color: #cbd5e1;
}
.cp-btn--ghost:hover { background: #f1f3f8; color: #1e293b; border-color: #94a3b8; }

.cp-actions__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: #64748b;
  margin: 0;
  text-align: center;
  justify-content: center;
}
.cp-actions__hint span { font-size: 1rem; color: #94a3b8; }

/* RESPONSIVE: en pantallas chicas el shell completo es el contenedor scrolleable, las
   columnas apilan verticalmente y todo el contenido se ve haciendo un único scroll.
   Quitamos los overflow internos de cp-acuse y cp-pago para que sus alturas naturales
   contribuyan al alto total del shell. */
@media (max-width: 992px) {
  .cp-shell {
    height: 93vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .cp-body {
    flex-direction: column;
    overflow: visible;
    min-height: 0;
    flex: 0 0 auto;
  }
  .cp-acuse, .cp-pago {
    flex: 0 0 auto;
    width: 100%;
    border-right: 0;
    overflow: visible;
  }
  .cp-acuse {
    border-bottom: 1px solid #e2e8ef;
    height: 60vh;
  }
  .cp-acuse__viewer { flex: 1 1 auto; }
  .cp-pago {
    height: auto;
    padding: 1rem 1.2rem 1.5rem 1.2rem;
  }
  /* En mobile el shell ya scrollea, así que el sticky del botón pierde sentido y queda
     en flujo normal al final del formulario. */
  .cp-actions {
    position: static;
    background: none;
    margin-top: 0.5rem;
  }
}


/* =============================================================================
   CURRICULUM · FormActivityComponent.vue
   Componente:  resources/js/components/curriculum/FormActivityComponent.vue
   Apartado:    Form para registrar una actividad de capítulo (modal/edit)
   Prefijo:     .fa-shell, .fa-*
   ============================================================================= */
/* ───────────  SHELL  ─────────── */
/* Flujo simple: la shell scrollea verticalmente y todo (header, body, action bar)
   fluye naturalmente. El action bar queda DEBAJO del último campo del formulario,
   visible al hacer scroll hasta el final. */
.fa-shell {
  flex: 1 1 auto;
  align-self: stretch;
  background: #f7f9fc;
  min-width: 0;
  min-height: 0;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}
.fa-shell *, .fa-shell *::before, .fa-shell *::after { box-sizing: border-box; }

.fa-form {
  display: block;
  width: 100%;
}

/* ───────────  HEADER  ─────────── */
.fa-header {
  background: #ffffff;
  border-bottom: 1px solid #e2e8ef;
  padding: 0.9rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.fa-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.fa-back {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: #f1f3f8;
  border: 1px solid #d8dde6;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.2s;
  flex-shrink: 0;
}
.fa-back:hover {
  background: #e6e9f0;
  color: var(--blue);
  border-color: var(--blue);
}
.fa-back span { font-size: 1.2rem; }

.fa-breadcrumb__path {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.fa-breadcrumb__cap {
  font-size: 0.92rem;
  color: #64748b;
  font-weight: 500;
}
.fa-breadcrumb__sep {
  font-size: 1.1rem;
  color: #cbd5e1;
}
.fa-breadcrumb__act {
  font-size: 1.05rem;
  color: var(--blue);
  font-weight: 700;
}
.fa-breadcrumb__act b { font-weight: 800; }

.fa-meta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
/* Cada fila representa un nivel (Capítulo / Actividad). El label a la izquierda
   identifica el nivel; los chips siguen al lado con sus mín/máx/factor/acumulado. */
.fa-meta__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.fa-meta__label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.18rem 0.55rem;
  background: #f1f5f9;
  border-radius: 0.3rem;
  border: 1px solid #cbd5e1;
  min-width: 5.5rem;
  justify-content: center;
}
.fa-meta__label span.material-symbols-outlined {
  font-size: 0.95rem;
  color: var(--blue);
}

.fa-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
}
.fa-chip span.material-symbols-outlined { font-size: 0.95rem; }
.fa-chip--factor  { background: #eef2ff; color: #3730a3; border-color: #c7d2fe; }
.fa-chip--min     { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.fa-chip--max     { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.fa-chip--current { background: #dcfce7; color: #166534; border-color: #86efac; }
/* Chip neutro: indica explícitamente que no hay límites configurados (mín/máx) */
.fa-chip--neutral { background: #f1f5f9; color: #64748b; border-color: #cbd5e1; font-style: italic; }

/* Variantes de color para distinguir Capítulo vs Actividad de un vistazo */
.fa-meta__label--cap {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #3730a3;
}
.fa-meta__label--cap span.material-symbols-outlined { color: #4f46e5; }
.fa-meta__label--act {
  background: #ecfdf5;
  border-color: #86efac;
  color: #166534;
}
.fa-meta__label--act span.material-symbols-outlined { color: #16a34a; }

/* ───────────  BODY  ─────────── */
/* Flujo normal — sin scroll interno, sin flex tricks. Quien scrollea es la shell. */
.fa-body {
  padding: 1.2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* INFO COLAPSABLE */
.fa-info {
  background: white;
  border: 1px solid #e2e8ef;
  border-radius: 0.5rem;
  overflow: hidden;
}
.fa-info__toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  border: 0;
  background: white;
  padding: 0.7rem 1rem;
  cursor: pointer;
  text-align: left;
  color: #475569;
  font-weight: 600;
  font-size: 0.88rem;
  transition: 0.2s;
}
.fa-info__toggle:hover { background: #f8fafc; color: var(--blue); }
.fa-info__toggle > span:first-child { color: var(--blue); }
.fa-info__toggle-label { flex: 1; }
.fa-info__caret { transition: transform 0.2s; color: #94a3b8; }
.fa-info__caret--open { transform: rotate(180deg); color: var(--blue); }

.fa-info__body {
  padding: 0 1rem 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  border-top: 1px solid #f1f5f9;
}
.fa-info__block { padding-top: 0.7rem; }
.fa-info__label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.2rem 0;
}
.fa-info__text {
  font-size: 0.85rem;
  color: #334155;
  line-height: 1.5;
  white-space: pre-line;
  text-align: justify;
  margin: 0;
}

/* FORM CARD */
.fa-card {
  background: white;
  border: 1px solid #e2e8ef;
  border-radius: 0.5rem;
  padding: 1.1rem 1.2rem;
  box-shadow: 0 0.1rem 0.3rem rgba(0,0,0,0.03);
}
.fa-card__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid #e2e8ef;
}
.fa-card__head h3 {
  font-size: 1rem;
  margin: 0;
  font-weight: 700;
  color: var(--blue);
}
.fa-card__head > span { color: var(--blue); font-size: 1.4rem; }

.fa-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
  margin-bottom: 0.9rem;
}
@media (max-width: 768px) {
  .fa-grid { grid-template-columns: 1fr; }
}

.fa-field { display: flex; flex-direction: column; gap: 0.3rem; }
.fa-field--full { grid-column: 1 / -1; }
.fa-field--score { /* asegura que el bloque de puntaje destaque */ }

.fa-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.fa-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.fa-required { color: var(--red, #dc2626); font-weight: 700; }
.fa-tag-auto {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fa-input {
  border: 1px solid #d8dde6;
  border-radius: 0.4rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.92rem;
  background: white;
  color: #1e293b;
  transition: 0.15s;
  width: 100%;
}
.fa-input:hover { border-color: #94a3b8; }
.fa-input:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(64,128,233,0.15);
}
.fa-input:disabled {
  background: #f8fafc;
  color: #94a3b8;
  cursor: not-allowed;
}
select.fa-input { cursor: pointer; }

.fa-hint {
  font-size: 0.75rem;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.fa-hint--error { color: var(--red, #dc2626); }
.fa-hint span { font-size: 1rem; }

/* Variante info (azul) para hints aclaratorios — se renderiza como párrafo de varias
   líneas, no como inline-flex compacto, para que textos largos fluyan bien. */
.fa-hint--info {
  display: block;
  background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
  border: 1px solid #c7d2fe;
  border-radius: 0.4rem;
  padding: 0.45rem 0.6rem;
  margin-top: 0.4rem;
  font-size: 0.74rem;
  color: #1a3c6e;
  line-height: 1.4;
  font-weight: 500;
}
.fa-hint--info .material-symbols-outlined {
  font-size: 0.95rem;
  color: #2e5c9e;
  vertical-align: -3px;
  margin-right: 0.2rem;
}

/* =============================================================================
   SOLICITUD DETALLE — vista completa de una solicitud (CS_SUDO/CS_SOPORTE)
   Componente: SolicitudDetalleComponent.vue
   Prefijo: .sd-
   ============================================================================= */
.sd-shell {
    display: flex; flex-direction: column;
    gap: 0.85rem;
    padding: 0.8rem 0.9rem;
    /* Sin scroll propio — `.dir-exp-content` (padre) ya maneja el scroll vertical
       y duplicarlo aquí creaba dos scrollbars anidados. */
}
.sd-header {
    display: flex; align-items: center; gap: 0.85rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    padding: 0.85rem 1rem;
    border-radius: 0.6rem;
    box-shadow: 0 0.25rem 0.7rem rgba(15, 28, 50, 0.18);
}
.sd-header__back {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 0.4rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.18s ease;
}
.sd-header__back:hover { background: rgba(255,255,255,0.28); transform: translateX(-2px); }
.sd-header__back .material-symbols-outlined { font-size: 1rem; }
.sd-header__title { flex: 1; min-width: 0; }
.sd-header__title h1 {
    margin: 0; font-size: 1.15rem; font-weight: 700;
    display: inline-flex; align-items: center; gap: 0.55rem;
    flex-wrap: wrap;
}
.sd-header__id { color: rgba(255,255,255,0.78); font-weight: 600; }
.sd-header__sub {
    margin: 0.25rem 0 0 !important;
    display: flex; flex-wrap: wrap; gap: 0.65rem;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.86);
}
.sd-header__sub > span {
    display: inline-flex; align-items: center; gap: 0.25rem;
}
.sd-header__sub .material-symbols-outlined { font-size: 0.95rem; }

.sd-card {
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.55rem;
    box-shadow: 0 0.1rem 0.4rem rgba(15, 28, 50, 0.06);
    /* sin overflow:hidden — algunos textos largos (CURP, nombres) se cortaban verticalmente. */
    flex-shrink: 0;
}
.sd-card__head {
    display: flex; align-items: center; gap: 0.45rem;
    padding: 0.65rem 0.85rem;
    background: linear-gradient(180deg, #f1f5f9 0%, #e3edf8 100%);
    border-bottom: 1px solid rgba(46, 92, 158, 0.15);
}
/* Variante con filtro a la derecha (bitácora) */
.sd-card__head--with-filter {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.sd-card__head-left {
    display: flex; align-items: center; gap: 0.45rem;
    min-width: 0;
}
.sd-bit-filter {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.25);
    border-radius: 0.45rem;
    padding: 0.3rem 0.55rem;
    min-width: 14rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.sd-bit-filter:focus-within {
    border-color: #2e5c9e;
    box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.15);
}
.sd-bit-filter__icon { color: #94a3b8; font-size: 1.05rem !important; }
.sd-bit-filter__input {
    flex: 1; min-width: 0;
    border: none; outline: none; background: transparent;
    font-size: 0.82rem;
    color: #1a3c6e;
    font-family: inherit;
}
.sd-bit-filter__input::placeholder { color: #94a3b8; font-style: italic; }
.sd-bit-filter__clear {
    background: rgba(46, 92, 158, 0.1);
    color: #5a7a9a;
    border: none;
    padding: 0.15rem;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease;
}
.sd-bit-filter__clear:hover { background: rgba(220, 38, 38, 0.15); color: #c5221f; }
.sd-bit-filter__clear .material-symbols-outlined { font-size: 0.95rem !important; }
@media (max-width: 700px) {
    .sd-bit-filter { width: 100%; min-width: 0; }
}
.sd-card__head h2 {
    margin: 0; font-size: 0.92rem; font-weight: 700; color: #1a3c6e;
}
.sd-card__head h2 small { color: #5a7a9a; font-weight: 500; font-size: 0.78rem; margin-left: 0.25rem; }
.sd-card__icon { color: #2e5c9e; font-size: 1.2rem !important; }
.sd-card__body { padding: 0.85rem 0.95rem; }

.sd-grid { display: grid; gap: 0.8rem 1rem; }
.sd-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .sd-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sd-grid--4 { grid-template-columns: 1fr; } }

.sd-field label {
    display: block; font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: #5a7a9a;
    margin-bottom: 0.18rem;
}
.sd-field p { margin: 0 !important; font-size: 0.88rem; color: #1a3c6e; font-weight: 600; word-break: break-word; }

.sd-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 1.2rem 1rem;
    color: #5a7a9a;
    text-align: center;
}
.sd-empty .material-symbols-outlined { font-size: 2rem; color: rgba(46, 92, 158, 0.45); margin-bottom: 0.35rem; }
.sd-empty p { margin: 0; font-size: 0.85rem; }

/* Revisores: se eliminó toda la familia .sd-rev* (grid, head, name, type, email,
   date, roles, chip, meta, row, num, --done, --pending, .sd-rol-chip).
   Ahora la sección de revisores en SolicitudDetalleComponent.vue usa el patrón
   compartido .dir-rev* del directorio (todo en una sola línea, neutro). */

/* Tabla de fases */
.sd-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.sd-table thead th {
    background: #f1f5f9; color: #1a3c6e; text-align: left;
    padding: 0.5rem 0.6rem; font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    border-bottom: 1px solid rgba(46, 92, 158, 0.18);
}
.sd-table tbody td {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid rgba(46, 92, 158, 0.1);
    color: #1a3c6e;
}
.sd-table tbody tr:hover { background: rgba(46, 92, 158, 0.04); }

/* Chips de estado */
.sd-chip {
    display: inline-flex; align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.sd-chip--ok   { background: #dcfce7; color: #166534; }
.sd-chip--bad  { background: #fee2e2; color: #c5221f; }
.sd-chip--warn { background: #fef3c7; color: #92400e; }
.sd-chip--info { background: #dbeafe; color: #1e40af; }

/* Timeline de bitácora — cards con íconos contextuales y dot coloreado por tipo */
.sd-timeline {
    position: relative;
    padding-left: 0;
    display: flex; flex-direction: column;
    gap: 0.75rem;
}
.sd-timeline::before {
    content: '';
    position: absolute;
    left: 5.2rem; top: 0.2rem; bottom: 0.2rem;
    width: 2px;
    background: linear-gradient(180deg, rgba(46,92,158,0.35) 0%, rgba(46,92,158,0.1) 100%);
    border-radius: 999px;
    pointer-events: none;
}
.sd-evt {
    position: relative;
    display: grid;
    grid-template-columns: 5.2rem 1fr;
    gap: 0.85rem;
    align-items: start;
}
/* Rail izquierdo con dot + fecha alineada */
.sd-evt__rail {
    position: relative;
    display: flex; flex-direction: column;
    align-items: flex-end;
    padding-right: 0.85rem;
}
.sd-evt__dot {
    position: absolute;
    right: -0.45rem; top: 0.55rem;
    width: 0.85rem; height: 0.85rem;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #2e5c9e;
    box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.12);
    z-index: 1;
}
.sd-evt__dot--ok    { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18); }
.sd-evt__dot--bad   { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18); }
.sd-evt__dot--warn  { border-color: #d97706; box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.18); }
.sd-evt__dot--edit  { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18); }
.sd-evt__dot--info  { border-color: #2e5c9e; box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.18); }

.sd-evt__time {
    font-size: 0.7rem;
    font-weight: 700;
    color: #5a7a9a;
    line-height: 1.2;
    text-align: right;
    padding-top: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Card del evento */
.sd-evt__card {
    background: #ffffff;
    border: 1px solid rgba(46, 92, 158, 0.15);
    border-left: 3px solid #2e5c9e;
    border-radius: 0.5rem;
    padding: 0.6rem 0.85rem;
    box-shadow: 0 0.1rem 0.35rem rgba(15, 28, 50, 0.05);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.sd-evt__card:hover {
    box-shadow: 0 0.2rem 0.55rem rgba(15, 28, 50, 0.1);
    transform: translateY(-1px);
}
/* Borde izquierdo coloreado según categoría */
.sd-evt--ok   .sd-evt__card { border-left-color: #16a34a; }
.sd-evt--bad  .sd-evt__card { border-left-color: #dc2626; }
.sd-evt--warn .sd-evt__card { border-left-color: #d97706; }
.sd-evt--edit .sd-evt__card { border-left-color: #7c3aed; }
.sd-evt--info .sd-evt__card { border-left-color: #2e5c9e; }

.sd-evt__head {
    display: flex; align-items: flex-start; gap: 0.5rem;
    margin: 0 !important;
}
.sd-evt__icon {
    flex-shrink: 0;
    font-size: 1.15rem !important;
    margin-top: 0.05rem;
}
.sd-evt__icon--ok   { color: #16a34a; }
.sd-evt__icon--bad  { color: #dc2626; }
.sd-evt__icon--warn { color: #d97706; }
.sd-evt__icon--edit { color: #7c3aed; }
.sd-evt__icon--info { color: #2e5c9e; }

.sd-evt__title {
    margin: 0 !important;
    font-size: 0.86rem;
    font-weight: 600;
    color: #1a3c6e;
    line-height: 1.3;
    word-break: break-word;
}

.sd-evt__meta {
    margin: 0.45rem 0 0 !important;
    display: flex; flex-wrap: wrap; gap: 0.6rem;
    font-size: 0.72rem; color: #5a7a9a;
}
.sd-evt__user, .sd-evt__src, .sd-evt__code {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-weight: 600;
}
.sd-evt__user .material-symbols-outlined,
.sd-evt__src  .material-symbols-outlined,
.sd-evt__code .material-symbols-outlined {
    font-size: 0.9rem;
    color: #94a3b8;
}
.sd-evt__src code,
.sd-evt__code code {
    font-family: 'Source Code Pro', 'Consolas', 'Courier New', monospace;
    font-size: 0.7rem;
    font-weight: 600;
    color: #475569;
    background: rgba(46, 92, 158, 0.08);
    border: 1px solid rgba(46, 92, 158, 0.15);
    padding: 0.08rem 0.4rem;
    border-radius: 0.3rem;
    letter-spacing: 0.01em;
    word-break: break-all;
}
.sd-evt__src code { color: #1e3a5f; }
.sd-evt__code code {
    background: rgba(125, 58, 237, 0.08);
    border-color: rgba(125, 58, 237, 0.2);
    color: #6d28d9;
}
.sd-evt__src { cursor: help; }

/* Responsive: en pantallas angostas el rail va arriba en lugar de a la izquierda */
@media (max-width: 700px) {
    .sd-evt {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }
    .sd-evt__rail {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding-right: 0;
        padding-left: 1.3rem;
    }
    .sd-evt__dot {
        position: absolute;
        left: 0.3rem; right: auto; top: 0.5rem;
    }
    .sd-evt__time {
        padding-top: 0;
        text-align: left;
    }
    .sd-timeline::before { left: 0.7rem; }
}

/* PUNTAJE: visualizador de fórmula */
.fa-score {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #f0fbef 0%, #e6f7e4 100%);
  border: 1px solid #86efac;
  border-radius: 0.4rem;
  padding: 0.55rem 0.75rem;
  height: 2.4rem;
}
.fa-score__formula {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.88rem;
  color: #166534;
  font-weight: 600;
}
.fa-score__op {
  color: #16a34a;
  font-weight: 700;
}
.fa-score__value {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  color: #166534;
}
.fa-score__value b { font-size: 1.15rem; font-weight: 800; }
.fa-score__value small { font-size: 0.78rem; opacity: 0.8; }

/* TEXTAREA + CONTADOR */
.fa-textarea {
  width: 100%;
  border: 1px solid #d8dde6;
  border-radius: 0.4rem;
  padding: 0.6rem 0.75rem;
  font-family: inherit;
  font-size: 0.9rem;
  color: #1e293b;
  background: white;
  resize: vertical;
  min-height: 8rem;
  line-height: 1.45;
  transition: 0.15s;
}
.fa-textarea:hover { border-color: #94a3b8; }
.fa-textarea:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(64,128,233,0.15);
}

.fa-counter {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
}
.fa-counter--warn { background: #fef3c7; color: #92400e; }
.fa-counter--danger { background: #fee2e2; color: #991b1b; }

.fa-tag-optional {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: 0.3rem;
}
.fa-hint-side {
  font-size: 0.72rem;
  color: #64748b;
}

/* Banner de requisitos del archivo — visible y prominente sobre el dropzone */
.fa-file-rules {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-left: 4px solid var(--blue);
  border-radius: 0.45rem;
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.55rem;
}
.fa-file-rules__title {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #1e40af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.45rem;
}
.fa-file-rules__title span { font-size: 1.05rem; }
.fa-file-rules__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.fa-file-rule {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  background: white;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  font-size: 0.78rem;
  color: #1e3a8a;
  font-weight: 500;
}
.fa-file-rule span.material-symbols-outlined {
  font-size: 1rem;
  color: var(--blue);
}
.fa-file-rule b { font-weight: 700; color: #1e40af; }

/* DROPZONE de comprobante */
.fa-dropzone {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 5.5rem;
  border: 2px dashed #cbd5e1;
  border-radius: 0.5rem;
  background: #fafbff;
  padding: 0.8rem 1rem;
  cursor: pointer;
  transition: 0.2s;
  margin: 0;
}
.fa-dropzone:hover {
  border-color: var(--blue);
  background: #f0f4ff;
}
.fa-dropzone--dragging {
  border-color: var(--blue);
  background: #eaeeff;
  transform: scale(1.005);
}
.fa-dropzone--filled {
  border-style: solid;
  border-color: var(--green, #269a1c);
  background: #f0fbef;
}
.fa-dropzone--filled:hover {
  background: #e6f7e4;
}

.fa-dropzone__icon {
  font-size: 1.8rem;
  color: var(--blue);
  flex-shrink: 0;
}
.fa-dropzone__title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: #334155;
}
.fa-dropzone__hint {
  margin: 0.15rem 0 0 0;
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.35;
}

.fa-dropzone__file-icon {
  font-size: 1.8rem;
  color: var(--green, #269a1c);
  flex-shrink: 0;
}
.fa-dropzone__file-info {
  flex: 1;
  min-width: 0;
}
.fa-dropzone__file-name {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: #166534;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fa-dropzone__file-hint {
  margin: 0.15rem 0 0 0;
  font-size: 0.74rem;
  color: #166534;
  opacity: 0.7;
}
.fa-dropzone__remove {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: white;
  border: 1px solid #fca5a5;
  color: #b91c1c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.15s;
  flex-shrink: 0;
}
.fa-dropzone__remove:hover {
  background: #fee2e2;
  color: #991b1b;
}
.fa-dropzone__remove span { font-size: 1.1rem; }

/* CALLOUT DE ERRORES */
.fa-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-radius: 0.5rem;
  margin-top: 0.8rem;
}
.fa-callout--warn {
  background: #fef9c3;
  border-left: 4px solid #eab308;
}
.fa-callout > span.material-symbols-outlined {
  color: #ca8a04;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.fa-callout__title {
  margin: 0 0 0.3rem 0;
  font-weight: 700;
  font-size: 0.9rem;
  color: #713f12;
}
.fa-callout__list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.83rem;
  color: #713f12;
  line-height: 1.45;
}
.fa-callout__list li { margin-bottom: 0.2rem; }

/* ───────────  ACTION BAR  ─────────── */
/* Card al final del formulario en flujo normal. NO usa <footer> ni clase .btn para
   evitar que estilos globales de Bootstrap se monten encima. */
.fa-actions {
  background: #ffffff;
  border: 1px solid #e2e8ef;
  border-top: 3px solid var(--blue);
  border-radius: 0.5rem;
  padding: 1.2rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  box-shadow: 0 0.2rem 0.6rem rgba(0,0,0,0.06);
}
.fa-actions__hint {
  margin: 0;
  font-size: 0.85rem;
  color: #475569;
  font-weight: 500;
}
.fa-actions__hint b { color: var(--red, #dc2626); }
.fa-actions__btns {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}

/* Botones balanceados: visibles pero no excesivamente grandes */
.fa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1.2rem;
  border-radius: 0.4rem;
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: 0.15s;
  min-width: 9rem;
  font-family: inherit;
}
.fa-btn span { font-size: 1.15rem; }
.fa-btn:hover { transform: translateY(-1px); }
.fa-btn:active { transform: translateY(0); }

.fa-btn--ghost {
  background: white;
  color: #475569;
  border-color: #cbd5e1;
}
.fa-btn--ghost:hover {
  background: #f1f3f8;
  color: #1e293b;
  border-color: #94a3b8;
}

.fa-btn--primary {
  background: var(--green, #269a1c);
  color: white;
  border-color: var(--green, #269a1c);
  box-shadow: 0 0.15rem 0.4rem rgba(38,154,28,0.25);
}
.fa-btn--primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 0.25rem 0.6rem rgba(38,154,28,0.35);
}

.fa-btn--accept {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
  box-shadow: 0 0.15rem 0.4rem rgba(64,128,233,0.25);
}
.fa-btn--accept:hover {
  filter: brightness(1.06);
  box-shadow: 0 0.25rem 0.6rem rgba(64,128,233,0.35);
}

@media (max-width: 768px) {
  .fa-actions { padding: 0.85rem 1rem; }
  .fa-actions__btns { width: 100%; }
  .fa-btn { flex: 1 1 auto; min-width: 0; }
}


/* =============================================================================
   CURRICULUM · FormQuirurgicoComponent.vue
   Componente:  resources/js/components/curriculum/FormQuirurgicoComponent.vue
   Apartado:    Form especial actividades quirúrgicas (tabla por categorías A-D)
   Prefijo:     .fq-shell, .fq-*
   ============================================================================= */
/* ───────────  SHELL  ─────────── */
.fq-shell {
  flex: 1 1 auto;
  align-self: stretch;
  background: #f7f9fc;
  min-width: 0;
  min-height: 0;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}
.fq-shell *, .fq-shell *::before, .fq-shell *::after { box-sizing: border-box; }

.fq-form {
  display: block;
  width: 100%;
}

/* ───────────  HEADER  ─────────── */
.fq-header {
  background: #ffffff;
  border-bottom: 1px solid #e2e8ef;
  padding: 0.9rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.fq-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.fq-back {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: #f1f3f8;
  border: 1px solid #d8dde6;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.2s;
  flex-shrink: 0;
}
.fq-back:hover {
  background: #e6e9f0;
  color: var(--blue);
  border-color: var(--blue);
}
.fq-back span { font-size: 1.2rem; }

.fq-breadcrumb__path {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.fq-breadcrumb__cap {
  font-size: 0.92rem;
  color: #64748b;
  font-weight: 500;
}
.fq-breadcrumb__sep {
  font-size: 1.1rem;
  color: #cbd5e1;
}
.fq-breadcrumb__act {
  font-size: 1.05rem;
  color: var(--blue);
  font-weight: 700;
}

.fq-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.fq-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
}
.fq-chip span.material-symbols-outlined { font-size: 0.95rem; }
.fq-chip--info    { background: #eef2ff; color: #3730a3; border-color: #c7d2fe; }
.fq-chip--max     { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.fq-chip--current { background: #dcfce7; color: #166534; border-color: #86efac; }

/* ───────────  BODY  ─────────── */
.fq-body {
  padding: 1.2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* INFO COLAPSABLE */
.fq-info {
  background: white;
  border: 1px solid #e2e8ef;
  border-radius: 0.5rem;
  overflow: hidden;
}
.fq-info__toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  border: 0;
  background: white;
  padding: 0.7rem 1rem;
  cursor: pointer;
  text-align: left;
  color: #475569;
  font-weight: 600;
  font-size: 0.88rem;
  transition: 0.2s;
}
.fq-info__toggle:hover { background: #f8fafc; color: var(--blue); }
.fq-info__toggle > span:first-child { color: var(--blue); }
.fq-info__toggle-label { flex: 1; }
.fq-info__caret { transition: transform 0.2s; color: #94a3b8; }
.fq-info__caret--open { transform: rotate(180deg); color: var(--blue); }
.fq-info__body {
  padding: 0 1rem 0.9rem 1rem;
  border-top: 1px solid #f1f5f9;
}
.fq-info__text {
  margin: 0.7rem 0 0 0;
  font-size: 0.85rem;
  color: #334155;
  line-height: 1.5;
  white-space: pre-line;
  text-align: justify;
}

/* CALLOUTS */
.fq-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-radius: 0.5rem;
}
.fq-callout--info {
  background: #eef2ff;
  border-left: 4px solid #6366f1;
  color: #312e81;
}
.fq-callout--info > span.material-symbols-outlined {
  color: #4f46e5;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.fq-callout--info p { margin: 0; font-size: 0.85rem; line-height: 1.45; }
.fq-callout--info a { color: #4338ca; text-decoration: underline; font-weight: 600; }

.fq-callout--warn {
  background: #fef9c3;
  border-left: 4px solid #eab308;
  margin-top: 0.6rem;
}
.fq-callout--warn > span.material-symbols-outlined {
  color: #ca8a04;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.fq-callout__title {
  margin: 0 0 0.3rem 0;
  font-weight: 700;
  font-size: 0.9rem;
  color: #713f12;
}
.fq-callout__list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.83rem;
  color: #713f12;
  line-height: 1.45;
}
.fq-callout__list li { margin-bottom: 0.2rem; }

/* FORM CARD */
.fq-card {
  background: white;
  border: 1px solid #e2e8ef;
  border-radius: 0.5rem;
  padding: 1.1rem 1.2rem;
  box-shadow: 0 0.1rem 0.3rem rgba(0,0,0,0.03);
}
.fq-card__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid #e2e8ef;
}
.fq-card__head h3 {
  font-size: 1rem;
  margin: 0;
  font-weight: 700;
  color: var(--blue);
}
.fq-card__head > span { color: var(--blue); font-size: 1.4rem; }

.fq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  margin-bottom: 1rem;
}
@media (max-width: 600px) { .fq-grid { grid-template-columns: 1fr; } }

.fq-field { display: flex; flex-direction: column; gap: 0.3rem; }
.fq-field--full { grid-column: 1 / -1; margin-top: 0.9rem; }

.fq-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.fq-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.fq-required { color: var(--red, #dc2626); font-weight: 700; }
.fq-tag-auto {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fq-tag-optional {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: 0.3rem;
}
.fq-hint-side { font-size: 0.72rem; color: #64748b; }

/* Banner de requisitos del archivo — visible y prominente sobre el dropzone */
.fq-file-rules {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-left: 4px solid var(--blue);
  border-radius: 0.45rem;
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.55rem;
}
.fq-file-rules__title {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #1e40af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.45rem;
}
.fq-file-rules__title span { font-size: 1.05rem; }
.fq-file-rules__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.fq-file-rule {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  background: white;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  font-size: 0.78rem;
  color: #1e3a8a;
  font-weight: 500;
}
.fq-file-rule span.material-symbols-outlined {
  font-size: 1rem;
  color: var(--blue);
}
.fq-file-rule b { font-weight: 700; color: #1e40af; }

.fq-input {
  border: 1px solid #d8dde6;
  border-radius: 0.4rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.92rem;
  background: white;
  color: #1e293b;
  transition: 0.15s;
  width: 100%;
  font-family: inherit;
}
.fq-input:hover { border-color: #94a3b8; }
.fq-input:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(64,128,233,0.15);
}
.fq-input:disabled {
  background: #f8fafc;
  color: #94a3b8;
  cursor: not-allowed;
}
select.fq-input { cursor: pointer; }
.fq-input--small {
  padding: 0.4rem 0.6rem;
  font-size: 0.88rem;
  text-align: center;
  max-width: 6.5rem;
}

/* TOTAL DE PUNTOS (Año + Puntos) */
.fq-score {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #f0fbef 0%, #e6f7e4 100%);
  border: 1px solid #86efac;
  border-radius: 0.4rem;
  padding: 0.55rem 0.85rem;
  height: 2.4rem;
}
.fq-score__icon { color: #16a34a; font-size: 1.3rem; }
.fq-score__value {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  color: #166534;
}
.fq-score__value b { font-size: 1.25rem; font-weight: 800; }
.fq-score__value small { font-size: 0.78rem; opacity: 0.8; }

/* TIPOS A/B/C/D */
.fq-types {
  margin-top: 0.4rem;
  padding-top: 0.6rem;
  border-top: 1px solid #f1f5f9;
}
.fq-types__title {
  margin: 0 0 0.7rem 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fq-type {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.7rem;
  align-items: center;
  background: #fbfcfe;
  border: 1px solid #e2e8ef;
  border-radius: 0.45rem;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.4rem;
}
@media (max-width: 600px) {
  .fq-type {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

.fq-type__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.fq-type__badge {
  width: 2rem;
  height: 2rem;
  border-radius: 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
}
.fq-type__badge--tipo_a { background: #6366f1; }
.fq-type__badge--tipo_b { background: #0ea5e9; }
.fq-type__badge--tipo_c { background: #f59e0b; }
.fq-type__badge--tipo_d { background: #ef4444; }

.fq-type__info { min-width: 0; }
.fq-type__name {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: #1e293b;
}
.fq-type__factor {
  margin: 0.1rem 0 0 0;
  font-size: 0.74rem;
  color: #64748b;
}

.fq-type__cantidad,
.fq-type__resultado {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}
.fq-type__label {
  font-size: 0.68rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fq-type__pts {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  background: #ecfdf5;
  border: 1px solid #86efac;
  border-radius: 0.35rem;
  padding: 0.35rem 0.7rem;
  color: #166534;
  min-width: 4.5rem;
  justify-content: center;
}
.fq-type__pts b { font-size: 1rem; font-weight: 800; }
.fq-type__pts small { font-size: 0.72rem; opacity: 0.8; }

.fq-types__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--blue);
  color: white;
  padding: 0.7rem 1rem;
  border-radius: 0.45rem;
  margin-top: 0.5rem;
  font-weight: 700;
}
.fq-types__total span:first-child {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.95;
}
.fq-types__total-value b { font-size: 1.25rem; font-weight: 800; }

/* DROPZONE COMPROBANTE */
.fq-dropzone {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 5.5rem;
  border: 2px dashed #cbd5e1;
  border-radius: 0.5rem;
  background: #fafbff;
  padding: 0.8rem 1rem;
  cursor: pointer;
  transition: 0.2s;
  margin: 0;
}
.fq-dropzone:hover { border-color: var(--blue); background: #f0f4ff; }
.fq-dropzone--dragging { border-color: var(--blue); background: #eaeeff; transform: scale(1.005); }
.fq-dropzone--filled {
  border-style: solid;
  border-color: var(--green, #269a1c);
  background: #f0fbef;
}
.fq-dropzone__icon { font-size: 1.8rem; color: var(--blue); flex-shrink: 0; }
.fq-dropzone__title { margin: 0; font-size: 0.92rem; font-weight: 600; color: #334155; }
.fq-dropzone__hint { margin: 0.15rem 0 0 0; font-size: 0.78rem; color: #64748b; line-height: 1.35; }
.fq-dropzone__file-icon { font-size: 1.8rem; color: var(--green, #269a1c); flex-shrink: 0; }
.fq-dropzone__file-info { flex: 1; min-width: 0; }
.fq-dropzone__file-name {
  margin: 0; font-size: 0.92rem; font-weight: 600; color: #166534;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fq-dropzone__file-hint { margin: 0.15rem 0 0 0; font-size: 0.74rem; color: #166534; opacity: 0.7; }
.fq-dropzone__remove {
  width: 2rem; height: 2rem; border-radius: 50%;
  background: white; border: 1px solid #fca5a5; color: #b91c1c;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: 0.15s; flex-shrink: 0;
}
.fq-dropzone__remove:hover { background: #fee2e2; color: #991b1b; }
.fq-dropzone__remove span { font-size: 1.1rem; }

/* ───────────  ACTION BAR  ─────────── */
.fq-actions {
  background: #ffffff;
  border: 1px solid #e2e8ef;
  border-top: 3px solid var(--blue);
  border-radius: 0.5rem;
  padding: 1.2rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  box-shadow: 0 0.2rem 0.6rem rgba(0,0,0,0.06);
}
.fq-actions__hint {
  margin: 0;
  font-size: 0.85rem;
  color: #475569;
  font-weight: 500;
}
.fq-actions__hint b { color: var(--red, #dc2626); }
.fq-actions__btns {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.fq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1.2rem;
  border-radius: 0.4rem;
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: 0.15s;
  min-width: 9rem;
  font-family: inherit;
}
.fq-btn span { font-size: 1.15rem; }
.fq-btn:hover { transform: translateY(-1px); }
.fq-btn:active { transform: translateY(0); }

.fq-btn--ghost {
  background: white;
  color: #475569;
  border-color: #cbd5e1;
}
.fq-btn--ghost:hover {
  background: #f1f3f8;
  color: #1e293b;
  border-color: #94a3b8;
}

.fq-btn--primary {
  background: var(--green, #269a1c);
  color: white;
  border-color: var(--green, #269a1c);
  box-shadow: 0 0.15rem 0.4rem rgba(38,154,28,0.25);
}
.fq-btn--primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 0.25rem 0.6rem rgba(38,154,28,0.35);
}

.fq-btn--accept {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
  box-shadow: 0 0.15rem 0.4rem rgba(64,128,233,0.25);
}
.fq-btn--accept:hover {
  filter: brightness(1.06);
  box-shadow: 0 0.25rem 0.6rem rgba(64,128,233,0.35);
}

@media (max-width: 768px) {
  .fq-actions__btns { width: 100%; }
  .fq-btn { flex: 1 1 auto; min-width: 0; }
}


/* =============================================================================
   CURRICULUM · ListActivityComponent.vue
   Componente:  resources/js/components/curriculum/ListActivityComponent.vue
   Apartado:    Listado de registros dentro de una actividad
   Prefijo:     .lac-shell, .lac-*
   ============================================================================= */
.lac-shell {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: 100%;
  box-sizing: border-box;
}
.lac-shell *, .lac-shell *::before, .lac-shell *::after { box-sizing: border-box; }

/* ── HEADER ─────────────────────────── */
.lac-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.7rem;
  background: white;
  border: 1px solid #e2e8ef;
  border-left: 4px solid var(--blue);
  border-radius: 0.5rem;
  padding: 0.8rem 1rem;
}
.lac-header__info {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: 1;
  min-width: 0;
}
.lac-header__icon {
  font-size: 1.8rem;
  color: var(--blue);
  flex-shrink: 0;
}
.lac-header__label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.lac-header__value {
  margin: 0.1rem 0 0 0;
  font-size: 0.95rem;
  color: #1e293b;
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  flex-wrap: wrap;
}
.lac-header__value b {
  font-size: 1.4rem;
  color: var(--blue);
  font-weight: 800;
}
.lac-header__value small { color: #64748b; }
.lac-header__chip {
  display: inline-flex;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: #e0e7ff;
  color: #3730a3;
  margin-left: 0.4rem;
}

.lac-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--green, #269a1c);
  color: white;
  border: 1px solid var(--green, #269a1c);
  border-radius: 0.4rem;
  padding: 0.55rem 1.1rem;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: 0.15s;
  box-shadow: 0 0.15rem 0.4rem rgba(38,154,28,0.25);
}
.lac-add-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.lac-add-btn span { font-size: 1.15rem; }

/* ── LISTA ─────────────────────────── */
.lac-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* ── CARD DE REGISTRO ─────────────── */
.lac-card {
  display: flex;
  background: white;
  border: 1px solid #e2e8ef;
  border-radius: 0.5rem;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.15s;
}
.lac-card:hover {
  box-shadow: 0 0.25rem 0.7rem rgba(0,0,0,0.06);
}

.lac-card__bar {
  width: 4px;
  flex-shrink: 0;
  background: #cbd5e1;
}
.lac-card--accepted .lac-card__bar  { background: var(--green, #269a1c); }
.lac-card--rejected .lac-card__bar  { background: #dc2626; }
.lac-card--commented .lac-card__bar { background: #f59e0b; }
.lac-card--no-file .lac-card__bar   { background: #fb923c; }
.lac-card--pending .lac-card__bar   { background: #3b82f6; }

.lac-card__body {
  flex: 1;
  min-width: 0;
  padding: 0.7rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.lac-card__top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.lac-status {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.lac-status span { font-size: 0.95rem; }
.lac-status--accepted  { background: #dcfce7; color: #166534; }
.lac-status--rejected  { background: #fee2e2; color: #991b1b; }
.lac-status--commented { background: #fef3c7; color: #92400e; }
.lac-status--no-file   { background: #ffedd5; color: #9a3412; }
.lac-status--pending   { background: #dbeafe; color: #1e40af; }

.lac-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
}
.lac-pill span { font-size: 0.9rem; }
.lac-pill--score {
  background: #ecfdf5;
  color: #065f46;
}
.lac-pill--score b { font-weight: 800; }
.lac-pill--year { background: #f1f5f9; color: #475569; }
.lac-pill--no-file {
  background: #fff7ed;
  color: #9a3412;
  border: 1px dashed #fdba74;
}
.lac-pill--comments {
  background: #fef9c3;
  color: #854d0e;
  border: 1px solid #fde68a;
}
/* Tipos de actividad quirúrgica (A/B/C/D) — solo se muestran cuando tienen cantidad. */
.lac-pill--surg {
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
}
.lac-surg {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.45rem;
}

.lac-card__desc {
  margin: 0;
  font-size: 0.85rem;
  color: #334155;
  line-height: 1.45;
  word-break: break-word;
}

/* COMENTARIOS DEL REVISOR — siempre visibles cuando existen */
.lac-comments {
  margin-top: 0.3rem;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 0.4rem;
  padding: 0.5rem 0.7rem;
}
.lac-comments__header {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0 0.4rem 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #92400e;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lac-comments__header span { font-size: 1rem; }

.lac-comments__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.lac-comments__list li {
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  border-radius: 0.3rem;
  padding: 0.45rem 0.6rem;
}
.lac-comments__text {
  margin: 0;
  font-size: 0.82rem;
  color: #713f12;
  line-height: 1.4;
}
.lac-comments__date {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  color: #92400e;
  margin-top: 0.2rem;
  opacity: 0.75;
}


/* ── ACCIONES (lateral derecho) ──── */
/* Stack vertical para que todos los botones (con texto) tengan el mismo ancho y se
   lean cómodamente. Más ancho que la versión solo-ícono porque ahora caben palabras. */
.lac-card__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  padding: 0.6rem 0.7rem;
  border-left: 1px solid #f1f5f9;
  flex-shrink: 0;
  min-width: 8rem;
}

.lac-act-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.6rem;
  border-radius: 0.35rem;
  border: 1px solid #e2e8ef;
  background: white;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s;
  font-family: inherit;
  white-space: nowrap;
  justify-content: flex-start;
}
.lac-act-btn span.material-symbols-outlined { font-size: 1.05rem; flex-shrink: 0; }
.lac-act-btn__label {
  flex: 1;
  text-align: left;
}
.lac-act-btn:hover { transform: translateY(-1px); }

.lac-act-btn--view:hover {
  background: #dcfce7;
  border-color: var(--green, #269a1c);
  color: #166534;
}
.lac-act-btn--upload:hover {
  background: #dbeafe;
  border-color: var(--blue);
  color: #1e40af;
}
.lac-act-btn--edit:hover {
  background: #e0e7ff;
  border-color: #6366f1;
  color: #3730a3;
}
.lac-act-btn--delete:hover {
  background: #fee2e2;
  border-color: #dc2626;
  color: #991b1b;
}

/* ── EMPTY STATE ─────────────────── */
.lac-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
  background: white;
  border: 2px dashed #cbd5e1;
  border-radius: 0.5rem;
  color: #94a3b8;
  text-align: center;
}
.lac-empty span.material-symbols-outlined {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}
.lac-empty h5 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #475569;
}
.lac-empty h6 {
  margin: 0.2rem 0 0 0;
  font-size: 0.85rem;
  color: #94a3b8;
}

/* ── RESPONSIVE ───────────────────── */
@media (max-width: 640px) {
  .lac-card { flex-direction: column; }
  .lac-card__bar { width: 100%; height: 4px; }
  .lac-card__actions {
    flex-direction: row;
    flex-wrap: wrap;
    border-left: 0;
    border-top: 1px solid #f1f5f9;
    min-width: 0;
    justify-content: flex-start;
  }
  .lac-act-btn { flex: 1 1 auto; min-width: 6.5rem; }
  .lac-header { flex-direction: column; align-items: stretch; }
  .lac-add-btn { justify-content: center; }
}


/* =============================================================================
   CURRICULUM · TroncalesComponent.vue
   Componente:  resources/js/components/curriculum/TroncalesComponent.vue
   Apartado:    Selector de troncal/diplomado y certificado relacionado
   Prefijo:     .tr-shell, .tr-*
   ============================================================================= */
.tr-shell {
  width: 100%;
  /* 93vh garantiza altura definida sin depender del padre, así overflow-y:auto activa
     scroll cuando el form tiene varias secciones (incluido el dropzone de archivo) y la
     barra de acciones siempre queda accesible. */
  height: 93vh;
  background: #f7f9fc;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}
.tr-shell *, .tr-shell *::before, .tr-shell *::after { box-sizing: border-box; }

/* ─── HEADER ─── */
.tr-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.5rem;
  background: white;
  border-bottom: 1px solid #e2e8ef;
  flex-wrap: wrap;
}
.tr-header__icon {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--blue);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.tr-header__title-wrap { flex: 1; min-width: 0; }
.tr-header__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--blue);
}
.tr-header__subtitle {
  margin: 0.15rem 0 0 0;
  font-size: 0.82rem;
  color: #64748b;
  line-height: 1.4;
}
.tr-header__progress {
  background: #f8fafc;
  border: 1px solid #e2e8ef;
  border-radius: 0.5rem;
  padding: 0.5rem 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}
.tr-header__progress-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tr-header__progress-value { font-size: 0.95rem; color: #1e293b; }
.tr-header__progress-value b { color: var(--blue); font-weight: 800; font-size: 1.2rem; }

/* ─── BODY ─── */
/* Flujo normal: la shell scrollea. El body solo organiza secciones en columna con gap. */
.tr-body {
  padding: 1rem 1.5rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* ─── STAT STRIP ─── */
.tr-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.6rem;
}
.tr-stats__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: white;
  border: 1px solid #e2e8ef;
  border-left: 4px solid #cbd5e1;
  border-radius: 0.5rem;
  padding: 0.65rem 0.85rem;
  box-shadow: 0 0.1rem 0.25rem rgba(0,0,0,0.03);
}
.tr-stats__item > span.material-symbols-outlined {
  font-size: 1.5rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tr-stats__value { margin: 0; font-size: 1.25rem; font-weight: 800; color: #1e293b; line-height: 1; }
.tr-stats__label { margin: 0.2rem 0 0 0; font-size: 0.72rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }

.tr-stats__item--ok { border-left-color: var(--green, #269a1c); }
.tr-stats__item--ok span.material-symbols-outlined { background: #dcfce7; color: #166534; }
.tr-stats__item--pending { border-left-color: #f59e0b; }
.tr-stats__item--pending span.material-symbols-outlined { background: #fef3c7; color: #92400e; }
.tr-stats__item--warning { border-left-color: #dc2626; }
.tr-stats__item--warning span.material-symbols-outlined { background: #fee2e2; color: #991b1b; }
.tr-stats__item--empty { border-left-color: #94a3b8; }
.tr-stats__item--empty span.material-symbols-outlined { background: #f1f5f9; color: #64748b; }

/* ─── ROWS de troncales (vista compacta) ─── */
.tr-rows {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.tr-row {
  background: white;
  border: 1px solid #e7eaf0;
  border-left: 3px solid #cbd5e1;
  border-radius: 0.55rem;
  padding: 0.85rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  box-shadow: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tr-row:hover { box-shadow: 0 0.15rem 0.4rem rgba(15,23,42,0.05); }
.tr-row--accepted { border-left-color: var(--green, #269a1c); }
.tr-row--pending  { border-left-color: #f59e0b; }
.tr-row--warning  { border-left-color: #f97316; }
.tr-row--expired  { border-left-color: #dc2626; }
.tr-row--empty    {
  border-left-color: #94a3b8;
  border-style: solid;
  background: #fafbfc;
}

/* HEAD de la fila */
.tr-row__head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.tr-row__icon {
  font-size: 1.4rem;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tr-row--accepted .tr-row__icon { background: #dcfce7; color: #166534; }
.tr-row--pending  .tr-row__icon { background: #fef3c7; color: #92400e; }
.tr-row--warning  .tr-row__icon { background: #ffedd5; color: #9a3412; }
.tr-row--expired  .tr-row__icon { background: #fee2e2; color: #991b1b; }
.tr-row--empty    .tr-row__icon { background: #f1f5f9; color: #64748b; }

.tr-row__title-wrap { flex: 1; min-width: 0; }
.tr-row__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-row__sub {
  margin: 0.05rem 0 0 0;
  font-size: 0.75rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tr-row__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  flex-shrink: 0;
}
.tr-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.tr-chip--accepted  { background: #dcfce7; color: #166534; border-color: #86efac; }
.tr-chip--pending   { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.tr-chip--empty     { background: #f1f5f9; color: #64748b; border-color: #cbd5e1; }
.tr-chip--vigente   { background: #ecfdf5; color: #065f46; border-color: #6ee7b7; }
.tr-chip--por-vencer{ background: #fff7ed; color: #9a3412; border-color: #fdba74; }
.tr-chip--vencido   { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }

.tr-row__actions { display: flex; gap: 0.3rem; flex-shrink: 0; align-items: center; }

/* Responsive: desktop (≥ 768px) muestra Editar y Eliminar inline.
   Mobile (< 768px) los colapsa al menú "⋯" para ahorrar espacio. */
.tr-row__actions-inline { display: inline-flex; }
.tr-row__actions-menu { display: none; }
@media (max-width: 767px) {
  .tr-row__actions-inline { display: none; }
  .tr-row__actions-menu { display: inline-flex; }
}

.tr-icon-btn {
  width: 2rem;
  height: 2rem;
  border-radius: 0.4rem;
  border: 1px solid #e2e8ef;
  background: white;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.15s;
  font-family: inherit;
  padding: 0;
}
.tr-icon-btn span { font-size: 1.1rem; }
.tr-icon-btn:hover { background: #f1f5f9; color: #1e293b; border-color: #94a3b8; }
.tr-icon-btn--toggle:hover { color: var(--blue); border-color: var(--blue); }
/* Variante "peligro" para el botón Eliminar inline */
.tr-icon-btn--danger { color: #b91c1c; border-color: #fecaca; }
.tr-icon-btn--danger:hover { background: #fee2e2; color: #991b1b; border-color: #f87171; }

/* Menú "⋯" */
.tr-menu { position: relative; }
.tr-menu__list {
  position: absolute;
  top: calc(100% + 0.3rem);
  right: 0;
  min-width: 9rem;
  background: white;
  border: 1px solid #e2e8ef;
  border-radius: 0.4rem;
  box-shadow: 0 0.5rem 1.2rem rgba(0,0,0,0.1);
  z-index: 10;
  overflow: hidden;
}
.tr-menu__list button {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  border: 0;
  background: white;
  padding: 0.55rem 0.8rem;
  font-size: 0.85rem;
  color: #1e293b;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  border-bottom: 1px solid #f1f5f9;
  transition: 0.15s;
}
.tr-menu__list button:last-child { border-bottom: 0; }
.tr-menu__list button span { font-size: 1.05rem; color: #64748b; }
.tr-menu__list button:hover { background: #eff6ff; color: var(--blue); }
.tr-menu__list button:hover span { color: var(--blue); }

/* KEY LINE (N° + fecha) */
.tr-row__key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.83rem;
  color: #475569;
  padding-left: 2.65rem; /* alineado con el texto del título */
}
.tr-row__key-item { display: inline-flex; align-items: center; gap: 0.3rem; }
.tr-row__key-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tr-row__key b { color: #1e293b; font-weight: 700; }
.tr-row__sep { color: #cbd5e1; font-weight: 700; }

/* VIGENCIA BAR */
.tr-row__vigencia {
  padding-left: 2.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.tr-vbar {
  height: 0.5rem;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
/* Fondo del contenedor por estado: aporta el color base SIEMPRE, incluso si
   vigenciaPct retorna 0 por datos incompletos. El fill agrega el matiz de
   "transcurrido" arriba. Así el bar nunca queda solo en gris. */
.tr-vbar--vigente   { background: #d1fae5; }
.tr-vbar--por-vencer{ background: #ffedd5; }
.tr-vbar--vencido   { background: #fee2e2; }

.tr-vbar__fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease;
}
.tr-vbar--vigente .tr-vbar__fill {
  background: linear-gradient(90deg, #34d399, #10b981);
}
.tr-vbar--por-vencer .tr-vbar__fill {
  background: linear-gradient(90deg, #fbbf24, #f97316);
}
.tr-vbar--vencido .tr-vbar__fill {
  background: linear-gradient(90deg, #f87171, #dc2626);
  width: 100% !important;
}
.tr-vbar__caption {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: #64748b;
}
.tr-vbar__caption b { color: #334155; font-weight: 600; }
.tr-vbar__arrow { margin: 0 0.25rem; color: #cbd5e1; }
.tr-vbar__remaining {
  font-weight: 700;
  font-size: 0.76rem;
  padding: 0.15rem 0.5rem;
  border-radius: 0.35rem;
}
.tr-vbar__remaining--vigente   { color: #166534; background: #dcfce7; }
.tr-vbar__remaining--por-vencer{ color: #9a3412; background: #ffedd5; }
.tr-vbar__remaining--vencido   { color: #991b1b; background: #fee2e2; }

/* DETAIL: ahora siempre visible (sin colapso). Aireado y sin fondo gris para
   integrarse de manera natural con el resto del row. */
.tr-row__detail {
  margin-top: 0.1rem;
  padding: 0.5rem 0 0 2.65rem;
  border-top: 1px solid #f1f5f9;
}
.tr-detail__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.4rem 1.25rem;
}
.tr-detail__cell { display: flex; flex-direction: column; gap: 0.1rem; }
.tr-detail__label {
  font-size: 0.66rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tr-detail__value { font-size: 0.85rem; color: #1e293b; font-weight: 500; }

/* Fade transition para el detail */
.tr-fade-enter-active, .tr-fade-leave-active { transition: opacity 0.18s, transform 0.18s; }
.tr-fade-enter, .tr-fade-leave-to { opacity: 0; transform: translateY(-4px); }

/* FILE FOOTER de cada fila — separador sólido más sutil que el dashed anterior. */
.tr-row__file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.55rem 0 0;
  border-top: 1px solid #f1f5f9;
  margin-top: 0.15rem;
}
.tr-row__file-info {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: #64748b;
}
.tr-row__file-info span.material-symbols-outlined { font-size: 1.1rem; }
.tr-row__file-info--ok   { color: #166534; }
.tr-row__file-info--ok   span.material-symbols-outlined { color: #16a34a; }
.tr-row__file-info--warn { color: #9a3412; }
.tr-row__file-info--warn span.material-symbols-outlined { color: #d97706; }

.tr-row__file-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* EMPTY STATE inline para una troncal sin certificado */
.tr-row__empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.4rem 0 0.15rem 2.65rem;
  flex-wrap: wrap;
}
.tr-row__empty p {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: #64748b;
}
.tr-row__empty p span.material-symbols-outlined { font-size: 1.2rem; color: #94a3b8; }

/* ─── EMPTY (estado "sin troncales requeridas" para toda la lista) ─── */
.tr-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem 1rem;
  background: #f8fafc;
  border: 2px dashed #cbd5e1;
  border-radius: 0.5rem;
  color: #64748b;
}
.tr-empty span.material-symbols-outlined { font-size: 2.5rem; color: #94a3b8; margin-bottom: 0.4rem; }
.tr-empty h5 { margin: 0; font-size: 1rem; font-weight: 700; color: #475569; }
.tr-empty p { margin: 0.3rem 0 0.8rem 0; font-size: 0.85rem; color: #64748b; }
.tr-empty--centered {
  margin: 1.5rem auto;
  width: 100%;
  max-width: 28rem;
}

/* ─── BOTONES ─── */
.tr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.55rem 1.05rem;
  border-radius: 0.4rem;
  font-weight: 700;
  font-size: 0.88rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: 0.15s;
  font-family: inherit;
  text-decoration: none;
}
.tr-btn span { font-size: 1.15rem; }
.tr-btn:hover { transform: translateY(-1px); }

.tr-btn--ghost {
  background: white;
  color: #475569;
  border-color: #cbd5e1;
}
.tr-btn--ghost:hover { background: #f1f3f8; color: #1e293b; border-color: #94a3b8; }

.tr-btn--primary {
  background: var(--green, #269a1c);
  color: white;
  border-color: var(--green, #269a1c);
  box-shadow: 0 0.15rem 0.4rem rgba(38,154,28,0.25);
}
.tr-btn--primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 0.25rem 0.6rem rgba(38,154,28,0.35);
  color: white;
}

.tr-btn--upload {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}
.tr-btn--upload:hover {
  filter: brightness(1.06);
  color: white;
}

/* Versión compacta para los botones dentro de las filas (Ver / Adjuntar / Reemplazar). */
.tr-btn--sm {
  padding: 0.35rem 0.7rem;
  font-size: 0.78rem;
}
.tr-btn--sm span { font-size: 1rem; }

/* ─── ACTION BAR ─── */
.tr-actions {
  background: white;
  border: 1px solid #e2e8ef;
  border-top: 3px solid var(--blue);
  border-radius: 0.5rem;
  padding: 0.95rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  box-shadow: 0 0.15rem 0.5rem rgba(0,0,0,0.04);
  margin-top: 0.5rem;
}
.tr-actions__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.82rem;
  color: #475569;
  font-weight: 500;
  flex: 1;
  min-width: 14rem;
}
.tr-actions__hint span { font-size: 1.1rem; color: #f59e0b; }
.tr-actions__hint--ok { color: #166534; }
.tr-actions__hint--ok span { color: var(--green, #269a1c); }
.tr-actions__hint b { color: var(--red, #dc2626); }
.tr-actions__btns {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    /* Fuerza alineación a la derecha. Sin esto, cuando el hint del .tr-actions
       ocupa todo el ancho y los botones bajan a una segunda fila, el space-between
       del padre deja de aplicar y los botones quedaban a la izquierda. */
    margin-left: auto;
    justify-content: flex-end;
}

/* ─── FORM ─── */
.tr-form { gap: 0.85rem; }

.tr-form__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: white;
  border: 1px solid #e2e8ef;
  border-radius: 0.5rem;
  padding: 0.7rem 0.95rem;
}
.tr-back-circle {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: #f1f3f8;
  border: 1px solid #d8dde6;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: 0.15s;
  font-family: inherit;
}
.tr-back-circle:hover { background: #e6e9f0; color: var(--blue); border-color: var(--blue); }
.tr-back-circle span { font-size: 1.2rem; }
.tr-form__breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  flex: 1;
  min-width: 0;
}
.tr-form__cap {
  font-size: 0.85rem;
  color: #64748b;
  font-weight: 500;
}
.tr-form__sep { font-size: 1.05rem; color: #cbd5e1; }
.tr-form__act {
  font-size: 1rem;
  color: var(--blue);
  font-weight: 700;
}

/* SECTIONS del form */
.tr-section {
  background: white;
  border: 1px solid #e2e8ef;
  border-radius: 0.5rem;
  padding: 0.95rem 1.1rem;
  box-shadow: 0 0.1rem 0.3rem rgba(0,0,0,0.03);
}
.tr-section__head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.55rem;
  border-bottom: 2px solid #e2e8ef;
}
.tr-section__head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--blue);
}
.tr-section__head > span { color: var(--blue); font-size: 1.35rem; }

/* Aviso informativo dentro de una section (ej. autocomplete de Presidente/Responsable) */
.tr-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  background: #eff6ff;
  border-left: 3px solid var(--blue);
  border-radius: 0.4rem;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.85rem;
}
.tr-hint > span.material-symbols-outlined {
  color: #1d4ed8;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.tr-hint p {
  margin: 0;
  font-size: 0.83rem;
  color: #1e3a8a;
  line-height: 1.45;
}
.tr-hint b { color: #1e40af; font-weight: 700; }

/* Aviso CRÍTICO (más prominente que .tr-hint). Lo usamos para advertir al médico
   que el certificado a registrar debe ser el último vigente — color rojo para que
   no pase desapercibido. */
.tr-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  background: #fef2f2;
  border-left: 3px solid #dc2626;
  border-radius: 0.4rem;
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.85rem;
}
.tr-warning > span.material-symbols-outlined {
  color: #b91c1c;
  font-size: 1.3rem;
  flex-shrink: 0;
  background: #fee2e2;
  border-radius: 50%;
  padding: 0.15rem;
}
.tr-warning__title {
  margin: 0 0 0.2rem 0;
  font-weight: 700;
  font-size: 0.78rem;
  color: #991b1b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tr-warning__text {
  margin: 0;
  font-size: 0.83rem;
  color: #7f1d1d;
  line-height: 1.45;
}
.tr-warning__text b { color: #991b1b; font-weight: 700; }

.tr-grid {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 0.7rem;
}
.tr-grid:last-child { margin-bottom: 0; }
.tr-grid--2 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.tr-grid--3 { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }

.tr-field { display: flex; flex-direction: column; gap: 0.3rem; }
.tr-field label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
  margin: 0;
}
.tr-required { color: var(--red, #dc2626); font-weight: 700; }

.tr-input {
  border: 1px solid #d8dde6;
  border-radius: 0.4rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.92rem;
  background: white;
  color: #1e293b;
  transition: 0.15s;
  width: 100%;
  font-family: inherit;
}
.tr-input:hover { border-color: #94a3b8; }
.tr-input:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(64,128,233,0.15);
}

/* Banner inline de resultado de búsqueda del certificado (3 estados) */
.tr-search-status {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  border-radius: 0.4rem;
  padding: 0.6rem 0.8rem;
  margin: 0.7rem 0 0.85rem 0;
}
.tr-search-status p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
}
.tr-search-status > span.material-symbols-outlined {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 0.05rem;
}
/* Buscando */
.tr-search-status--searching {
  background: #eff6ff;
  border-left: 3px solid var(--blue);
  color: #1e3a8a;
}
.tr-search-status--searching span { color: var(--blue); }
.tr-search-status__icon-spin { animation: tr-spin 1s linear infinite; }
@keyframes tr-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* Encontrado */
.tr-search-status--found {
  background: #f0fbef;
  border-left: 3px solid var(--green, #269a1c);
  color: #14532d;
}
.tr-search-status--found > span.material-symbols-outlined { color: var(--green, #269a1c); }
.tr-search-status--found b { color: #166534; font-weight: 700; }
/* No encontrado */
.tr-search-status--not-found {
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  color: #713f12;
}
.tr-search-status--not-found > span.material-symbols-outlined { color: #d97706; }
.tr-search-status--not-found b { color: #92400e; font-weight: 700; }

/* Tag "opcional" en el header de la sección de archivo */
.tr-tag-optional {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: 0.4rem;
}

/* DROPZONE del archivo del certificado */
.tr-dropzone {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 5.5rem;
  border: 2px dashed #cbd5e1;
  border-radius: 0.5rem;
  background: #fafbff;
  padding: 0.8rem 1rem;
  cursor: pointer;
  transition: 0.2s;
  margin: 0;
}
.tr-dropzone:hover { border-color: var(--blue); background: #f0f4ff; }
.tr-dropzone--dragging { border-color: var(--blue); background: #eaeeff; transform: scale(1.005); }
.tr-dropzone--filled {
  border-style: solid;
  border-color: var(--green, #269a1c);
  background: #f0fbef;
}
.tr-dropzone__icon { font-size: 1.8rem; color: var(--blue); flex-shrink: 0; }
.tr-dropzone__title { margin: 0; font-size: 0.92rem; font-weight: 600; color: #334155; }
.tr-dropzone__hint  { margin: 0.15rem 0 0 0; font-size: 0.78rem; color: #64748b; line-height: 1.35; }
.tr-dropzone__file-icon { font-size: 1.8rem; color: var(--green, #269a1c); flex-shrink: 0; }
.tr-dropzone__file-info { flex: 1; min-width: 0; }
.tr-dropzone__file-name {
  margin: 0; font-size: 0.92rem; font-weight: 600; color: #166534;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tr-dropzone__file-hint { margin: 0.15rem 0 0 0; font-size: 0.74rem; color: #166534; opacity: 0.7; }
.tr-dropzone__remove {
  width: 2rem; height: 2rem; border-radius: 50%;
  background: white; border: 1px solid #fca5a5; color: #b91c1c;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: 0.15s; flex-shrink: 0;
  font-family: inherit;
}
.tr-dropzone__remove:hover { background: #fee2e2; color: #991b1b; }
.tr-dropzone__remove span { font-size: 1.1rem; }

/* AUTOCOMPLETE para presidente/responsable */
.tr-input-wrap { position: relative; }
.tr-suggestions {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #e2e8ef;
  border-radius: 0.4rem;
  box-shadow: 0 0.4rem 1rem rgba(0,0,0,0.08);
  z-index: 5;
  max-height: 12rem;
  overflow-y: auto;
}
.tr-suggestions button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: white;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  color: #1e293b;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  font-family: inherit;
  transition: 0.15s;
}
.tr-suggestions button:last-child { border-bottom: 0; }
.tr-suggestions button:hover { background: #eff6ff; color: var(--blue); }

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
  .tr-header { flex-direction: column; align-items: stretch; }
  .tr-header__progress { align-items: center; }
  .tr-row__head { flex-wrap: wrap; }
  .tr-row__chips { order: 3; flex-basis: 100%; }
  .tr-row__key, .tr-row__vigencia, .tr-row__empty { padding-left: 0; }
  .tr-row__file { flex-direction: column; align-items: stretch; }
  .tr-row__file-actions { justify-content: stretch; }
  .tr-btn { justify-content: center; }
}


/* =============================================================================
   CURRICULUM · AvisoPrivacidadComponent.vue
   Componente:  resources/js/components/curriculum/AvisoPrivacidadComponent.vue
   Apartado:    Pantalla de aviso de privacidad antes de iniciar carga
   Prefijo:     .ap-shell, .ap-*
   ============================================================================= */
/* ─── SHELL ─── */
.ap-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 93vh;
  background: #f7f9fc;
  box-sizing: border-box;
}
.ap-shell *, .ap-shell *::before, .ap-shell *::after { box-sizing: border-box; }

/* ─── HEADER ─── */
.ap-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.5rem;
  background: white;
  border-bottom: 1px solid #e2e8ef;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.ap-header__icon {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--blue);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.ap-header__title-wrap { flex: 1; min-width: 0; }
.ap-header__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--blue);
}
.ap-header__subtitle {
  margin: 0.15rem 0 0 0;
  font-size: 0.82rem;
  color: #64748b;
}
.ap-header__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  flex-shrink: 0;
}
.ap-header__chip span { font-size: 1.05rem; }

/* ─── BODY SPLIT ─── */
.ap-body {
  flex: 1 1 auto;
  display: flex;
  gap: 0;
  min-height: 0;
  overflow: hidden;
}

/* ─── PDF (izquierda 65%) ─── */
.ap-pdf {
  flex: 1 1 65%;
  width: 65%;
  display: flex;
  flex-direction: column;
  background: white;
  border-right: 1px solid #e2e8ef;
  min-width: 0;
  overflow: hidden;
}
.ap-pdf__head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid #e2e8ef;
  background: #f8fafc;
  flex-shrink: 0;
}
.ap-pdf__head h3 {
  margin: 0;
  flex: 1;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--blue);
}
.ap-pdf__head > span.material-symbols-outlined { color: var(--blue); font-size: 1.2rem; }
.ap-pdf__open {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.7rem;
  background: white;
  border: 1px solid #cbd5e1;
  border-radius: 0.35rem;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: 0.15s;
}
.ap-pdf__open:hover {
  background: #eff6ff;
  border-color: var(--blue);
  color: var(--blue);
}
.ap-pdf__open span.material-symbols-outlined { font-size: 1rem; }

.ap-pdf__viewer {
  flex: 1 1 auto;
  background: #1e293b;
  min-height: 0;
}
.ap-pdf__viewer embed { display: block; }

/* ─── ACEPTACIÓN (derecha 35%) ─── */
.ap-accept {
  flex: 1 1 35%;
  width: 35%;
  min-width: 0;
  padding: 1rem 1.2rem;
  overflow-y: auto;
}
.ap-accept__form {
  background: white;
  border: 1px solid #e2e8ef;
  border-radius: 0.55rem;
  padding: 1.1rem 1.2rem;
  box-shadow: 0 0.1rem 0.3rem rgba(0,0,0,0.04);
}
.ap-accept__head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-bottom: 0.7rem;
  margin-bottom: 0.9rem;
  border-bottom: 2px solid #e2e8ef;
}
.ap-accept__head span { color: var(--blue); font-size: 1.4rem; }
.ap-accept__head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--blue);
}

.ap-accept__intro {
  margin: 0 0 1rem 0;
  font-size: 0.85rem;
  color: #475569;
  line-height: 1.5;
  background: #f8fafc;
  padding: 0.7rem 0.85rem;
  border-radius: 0.4rem;
  border-left: 3px solid var(--blue);
}

/* CHECKBOX custom */
.ap-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 0.45rem;
  cursor: pointer;
  transition: 0.15s;
  margin: 0;
}
.ap-checkbox:hover {
  border-color: var(--blue);
  background: #eff6ff;
}
.ap-checkbox--error {
  border-color: #dc2626;
  background: #fee2e2;
}
.ap-checkbox__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ap-checkbox__box {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 0.3rem;
  border: 2px solid #cbd5e1;
  background: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: 0.15s;
  margin-top: 0.05rem;
}
.ap-checkbox__box span { font-size: 1.05rem; color: white; font-weight: 800; }
.ap-checkbox__input:checked ~ .ap-checkbox__box {
  background: var(--green, #269a1c);
  border-color: var(--green, #269a1c);
}
.ap-checkbox__label {
  flex: 1;
  font-size: 0.9rem;
  color: #1e293b;
  line-height: 1.4;
  user-select: none;
}
.ap-checkbox__label b { color: var(--blue); font-weight: 700; }

/* ERROR */
.ap-error {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.7rem;
  padding: 0.55rem 0.8rem;
  background: #fee2e2;
  border-left: 3px solid #dc2626;
  border-radius: 0.35rem;
  color: #991b1b;
  font-size: 0.83rem;
  font-weight: 600;
}
.ap-error span { font-size: 1.1rem; }

/* ACTIONS */
.ap-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}
.ap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.7rem 1.2rem;
  border-radius: 0.4rem;
  font-weight: 700;
  font-size: 0.9rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: 0.15s;
  font-family: inherit;
  width: 100%;
}
.ap-btn span { font-size: 1.2rem; }
.ap-btn:hover { transform: translateY(-1px); }

.ap-btn--ghost {
  background: white;
  color: #475569;
  border-color: #cbd5e1;
}
.ap-btn--ghost:hover { background: #f1f3f8; color: #1e293b; border-color: #94a3b8; }

.ap-btn--primary {
  background: var(--green, #269a1c);
  color: white;
  border-color: var(--green, #269a1c);
  box-shadow: 0 0.2rem 0.5rem rgba(38,154,28,0.25);
}
.ap-btn--primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 0.3rem 0.7rem rgba(38,154,28,0.35);
}

/* ─── RESPONSIVE: en pantallas chicas todo apila y la página entera scrollea ─── */
@media (max-width: 992px) {
  .ap-shell { height: 93vh; overflow-y: auto; overflow-x: hidden; }
  .ap-body {
    flex-direction: column;
    overflow: visible;
    min-height: 0;
    flex: 0 0 auto;
  }
  .ap-pdf, .ap-accept {
    flex: 0 0 auto;
    width: 100%;
    border-right: 0;
    overflow: visible;
  }
  .ap-pdf {
    height: 60vh;
    border-bottom: 1px solid #e2e8ef;
  }
  .ap-accept { padding: 1rem 1.2rem 1.5rem 1.2rem; }
}


/* =============================================================================
   CURRICULUM · ObservacionesComponent.vue
   Componente:  resources/js/components/curriculum/ObservacionesComponent.vue
   Apartado:    Card de observaciones del revisor
   Prefijo:     .obs-card*
   ============================================================================= */
.obs-card {
  background: white;
  border: 1px solid #fde68a;
  border-radius: 0.55rem;
  overflow: hidden;
  box-shadow: 0 0.1rem 0.3rem rgba(0,0,0,0.04);
}

.obs-card__head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 0.9rem;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-bottom: 1px solid #fde68a;
}
.obs-card__icon {
  font-size: 1.25rem;
  color: #d97706;
  flex-shrink: 0;
}
.obs-card__title {
  margin: 0;
  flex: 1;
  font-size: 0.92rem;
  font-weight: 700;
  color: #78350f;
}
.obs-card__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.45rem;
  background: #d97706;
  color: white;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
}

/* Lista en formato timeline: cada observación con un círculo a la izquierda + caja a la derecha */
.obs-list {
  margin: 0;
  padding: 0.7rem 0.9rem;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  position: relative;
}
.obs-list::before {
  /* Línea vertical de la timeline; va desde el primer bullet hasta el último */
  content: '';
  position: absolute;
  left: calc(0.9rem + 0.85rem);
  top: 1.2rem;
  bottom: 1.2rem;
  width: 2px;
  background: #fde68a;
  border-radius: 2px;
}

.obs-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  position: relative;
  z-index: 1;
}

.obs-item__bullet {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: white;
  border: 2px solid #f59e0b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0.1rem 0.3rem rgba(245, 158, 11, 0.25);
}
.obs-item__bullet span {
  font-size: 0.95rem;
  color: #d97706;
}

.obs-item__body {
  flex: 1;
  min-width: 0;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 0.4rem;
  padding: 0.55rem 0.75rem;
}
.obs-item__text {
  margin: 0;
  font-size: 0.85rem;
  color: #713f12;
  line-height: 1.45;
  white-space: pre-line;
  word-break: break-word;
}
.obs-item__date {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #92400e;
  opacity: 0.85;
}
.obs-item__date span { font-size: 0.9rem; }


/* =============================================================================
   EXPEDIENTE · ElectronicFileComponent.vue
   Componente:  resources/js/components/expediente/documentacion/ElectronicFileComponent.vue
   Apartado:    Vista del expediente electrónico (sidebar con secciones + viewer de documentos)
   Prefijo:     .ef-shell, .ef-*
   ============================================================================= */
.ef-shell {
  width: 100%;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 1rem 1.25rem;
  gap: 0.85rem;
}
.ef-shell *, .ef-shell *::before, .ef-shell *::after { box-sizing: border-box; }

/* Header al estilo ms-form__header (compartido con el resto del expediente). */
.ef-form__header {
  padding-bottom: 0.6rem;
  border-bottom: 1px solid #e2e8ef;
  margin: 0;
}

/* Admin (vista=2): scroll interno cuando no hay wrapper externo. */
.ef-shell--admin {
  max-height: 93vh;
  overflow-y: auto;
}
.ef-shell--admin .ef-sidebar { position: static; }

/* ─── STATS STRIP ─── */
.ef-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.6rem;
}
.ef-stat {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: white;
  border: 1px solid #e2e8ef;
  border-left: 4px solid #cbd5e1;
  border-radius: 0.5rem;
  padding: 0.65rem 0.85rem;
  box-shadow: 0 0.1rem 0.25rem rgba(0,0,0,0.03);
}
.ef-stat > span.material-symbols-outlined {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.ef-stat__value { margin: 0; font-size: 1.25rem; font-weight: 800; color: #1e293b; line-height: 1; }
.ef-stat__label { margin: 0.2rem 0 0 0; font-size: 0.72rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }

.ef-stat--specs    { border-left-color: var(--blue); }
.ef-stat--specs    > span.material-symbols-outlined { background: #eff6ff; color: var(--blue); }
.ef-stat--required { border-left-color: #dc2626; }
.ef-stat--required > span.material-symbols-outlined { background: #fee2e2; color: #991b1b; }
.ef-stat--pending  { border-left-color: #f59e0b; }
.ef-stat--pending  > span.material-symbols-outlined { background: #fef3c7; color: #92400e; }

/* ─── PILLS / Tabs ─── */
.ef-pills {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.ef-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: white;
  border: 1px solid #e2e8ef;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  color: #475569;
  cursor: pointer;
  transition: 0.15s;
  font-family: inherit;
}
.ef-pill span.material-symbols-outlined { font-size: 1.05rem; color: #94a3b8; }
.ef-pill:hover { background: #eff6ff; color: var(--blue); border-color: #93c5fd; }
.ef-pill:hover span.material-symbols-outlined { color: var(--blue); }
.ef-pill--active {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
  box-shadow: 0 0.15rem 0.4rem rgba(64,128,233,0.25);
}
.ef-pill--active span.material-symbols-outlined { color: white; }
.ef-pill__count {
  background: rgba(255,255,255,0.25);
  color: inherit;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}
.ef-pill:not(.ef-pill--active) .ef-pill__count { background: #f1f5f9; color: #64748b; }

/* ─── BODY: sidebar + main ─── */
.ef-body {
  display: grid;
  grid-template-columns: minmax(18rem, 32%) 1fr;
  gap: 1rem;
}

/* ─── SIDEBAR ─── */
.ef-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: white;
  border: 1px solid #e2e8ef;
  border-radius: 0.55rem;
  padding: 0.85rem;
  height: fit-content;
  position: sticky;
  top: 0.5rem;
}
.ef-sidebar__title {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.2rem 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ef-sidebar__title span { font-size: 1.05rem; color: var(--blue); }

.ef-sidebar__list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ef-spec {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: white;
  border: 1px solid #e2e8ef;
  border-left: 4px solid #cbd5e1;
  border-radius: 0.4rem;
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  transition: 0.15s;
  text-align: left;
  font-family: inherit;
}
.ef-spec:hover { box-shadow: 0 0.2rem 0.5rem rgba(0,0,0,0.05); }
.ef-spec--active {
  background: #f0f7ff;
  border-color: var(--blue);
  border-left-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(64,128,233,0.18);
}
.ef-spec--complete  { border-left-color: var(--green, #269a1c); }
.ef-spec--notified  { border-left-color: #6366f1; }
.ef-spec--locked    { border-left-color: #6b7280; }
.ef-spec--pending   { border-left-color: #f59e0b; }
.ef-spec--no-active { border-left-color: #dc2626; background: #fef2f2; }

.ef-spec__icon {
  font-size: 1.4rem;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #f1f5f9;
  color: #64748b;
}
.ef-spec--complete  .ef-spec__icon { background: #dcfce7; color: #166534; }
.ef-spec--notified  .ef-spec__icon { background: #ede9fe; color: #5b21b6; }
.ef-spec--locked    .ef-spec__icon { background: #f3f4f6; color: #374151; }
.ef-spec--pending   .ef-spec__icon { background: #fef3c7; color: #92400e; }
.ef-spec--no-active .ef-spec__icon { background: #fee2e2; color: #991b1b; }
.ef-spec--active    .ef-spec__icon { background: #dbeafe; color: var(--blue); }

.ef-spec__info { flex: 1; min-width: 0; }
.ef-spec__name {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ef-spec__meta {
  margin: 0.1rem 0 0 0;
  font-size: 0.74rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ef-spec__bar {
  height: 0.3rem;
  background: #e2e8ef;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 0.3rem;
}
.ef-spec__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), #38bdf8);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.ef-spec--complete .ef-spec__bar-fill { background: linear-gradient(90deg, #34d399, #10b981); }
.ef-spec__chevron {
  font-size: 1.15rem;
  color: #cbd5e1;
  flex-shrink: 0;
  transition: 0.15s;
}
.ef-spec--active .ef-spec__chevron { color: var(--blue); transform: translateX(2px); }

/* Acciones admin abajo del sidebar */
.ef-sidebar__admin {
  border-top: 1px dashed #e2e8ef;
  padding-top: 0.7rem;
  margin-top: 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ef-sidebar__admin-title {
  margin: 0 0 0.3rem 0;
  font-size: 0.7rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ─── MAIN ─── */
.ef-main {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  background: white;
  border: 1px solid #e2e8ef;
  border-radius: 0.55rem;
  padding: 1rem 1.1rem;
  min-width: 0;
}

.ef-main__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: 0.7rem;
  border-bottom: 2px solid #e2e8ef;
  flex-wrap: wrap;
}
.ef-main__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #eff6ff;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.ef-main__title-wrap { flex: 1; min-width: 12rem; }
.ef-main__title { margin: 0; font-size: 1.1rem; font-weight: 700; color: #1e293b; }
.ef-main__sub { margin: 0.15rem 0 0 0; font-size: 0.82rem; color: #64748b; }
.ef-main__sub b { color: #1e293b; font-weight: 700; }
.ef-main__sep { color: #cbd5e1; margin: 0 0.3rem; }

.ef-main__progress { min-width: 10rem; flex: 0 1 14rem; }
.ef-main__progress-text {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: #475569;
  margin-bottom: 0.3rem;
}
.ef-main__progress-text b { color: var(--blue); font-size: 0.92rem; }
.ef-progressbar {
  height: 0.4rem;
  background: #e2e8ef;
  border-radius: 999px;
  overflow: hidden;
}
.ef-progressbar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), #38bdf8);
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* ─── BANNERS contextuales ─── */
.ef-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  border-radius: 0.45rem;
  padding: 0.7rem 0.85rem;
  font-size: 0.85rem;
  line-height: 1.4;
  border-left: 4px solid;
}
.ef-banner > span.material-symbols-outlined { font-size: 1.25rem; flex-shrink: 0; margin-top: 0.05rem; }
.ef-banner p { margin: 0; }
.ef-banner__list { list-style: none; margin: 0.4rem 0; padding: 0 0 0 0.4rem; }
.ef-banner__list li { padding: 0.15rem 0; }
.ef-banner__list u { font-weight: 600; }
.ef-banner__list small { color: #64748b; margin-left: 0.3rem; }

.ef-banner--bad   { background: #fef2f2; color: #991b1b; border-left-color: #dc2626; }
.ef-banner--bad   > span.material-symbols-outlined { color: #dc2626; }
.ef-banner--info  { background: #eff6ff; color: #1e3a8a; border-left-color: var(--blue); }
.ef-banner--info  > span.material-symbols-outlined { color: var(--blue); }
.ef-banner--ok    { background: #f0fbef; color: #14532d; border-left-color: var(--green, #269a1c); }
.ef-banner--ok    > span.material-symbols-outlined { color: var(--green, #269a1c); }

/* CTA "Listo para enviar" — más prominente que un banner */
.ef-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  background: linear-gradient(90deg, #f0fbef 0%, #eaf6e8 100%);
  border-left: 4px solid var(--green, #269a1c);
  border-radius: 0.5rem;
  padding: 0.85rem 1rem;
  box-shadow: 0 0.1rem 0.4rem rgba(38,154,28,0.08);
}
.ef-cta__icon {
  font-size: 1.7rem;
  color: var(--green, #269a1c);
  flex-shrink: 0;
}
.ef-cta__info { flex: 1 1 18rem; min-width: 0; }
.ef-cta__title { margin: 0; font-size: 0.95rem; font-weight: 700; color: #1c5b14; }
.ef-cta__text { margin: 0.2rem 0 0 0; font-size: 0.82rem; color: #2d4a26; line-height: 1.4; }

/* Variante --troncal (sit 15): el medico debe ir a otra pantalla a registrar troncales.
   Paleta ambar para distinguir del CTA verde de "Listo para enviar". */
.ef-cta--troncal {
  background: linear-gradient(90deg, #fffbeb 0%, #fef3c7 100%);
  border-left-color: #d97706;
  box-shadow: 0 0.1rem 0.4rem rgba(217, 119, 6, 0.12);
}
.ef-cta--troncal .ef-cta__icon  { color: #b45309; }
.ef-cta--troncal .ef-cta__title { color: #78350f; }
.ef-cta--troncal .ef-cta__text  { color: #5a3d12; }
.ef-cta--troncal .ef-btn--primary {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  color: #fff;
  border-color: transparent;
  text-decoration: none;
}
.ef-cta--troncal .ef-btn--primary:hover {
  background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
  transform: translateY(-1px);
  box-shadow: 0 0.2rem 0.55rem rgba(180, 83, 9, 0.3);
}

/* ─── FILTROS de documentos ─── */
.ef-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e2e8ef;
}
.ef-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  background: white;
  border: 1px solid #e2e8ef;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
  transition: 0.15s;
  font-family: inherit;
}
.ef-filter span.material-symbols-outlined { font-size: 1rem; color: #94a3b8; }
.ef-filter:hover { background: #eff6ff; color: var(--blue); border-color: #93c5fd; }
.ef-filter:hover span.material-symbols-outlined { color: var(--blue); }
.ef-filter--active {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}
.ef-filter--active span.material-symbols-outlined { color: white; }
.ef-filter__count {
  background: rgba(255,255,255,0.25);
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
}
.ef-filter:not(.ef-filter--active) .ef-filter__count { background: #f1f5f9; color: #64748b; }

/* ─── DOCS LIST ─── */
.ef-docs {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.ef-doc {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  background: white;
  border: 1px solid #e2e8ef;
  border-left: 4px solid #cbd5e1;
  border-radius: 0.45rem;
  padding: 0.7rem 0.85rem;
  transition: box-shadow 0.15s, transform 0.15s;
}
.ef-doc:hover { box-shadow: 0 0.2rem 0.5rem rgba(0,0,0,0.05); }
.ef-doc--required { border-left-color: #dc2626; }
.ef-doc--optional { border-left-color: var(--blue); }

.ef-doc__icon-wrap {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ef-doc--required .ef-doc__icon-wrap { background: #fee2e2; color: #991b1b; }
.ef-doc--optional .ef-doc__icon-wrap { background: #eff6ff; color: var(--blue); }
.ef-doc__icon-wrap span { font-size: 1.3rem; }

.ef-doc__body { flex: 1; min-width: 0; }
.ef-doc__title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.3;
}
.ef-doc__title--required { color: #991b1b; }
.ef-doc__desc {
  margin: 0.2rem 0 0 0;
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.35;
}

.ef-doc__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.4rem;
}
.ef-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.ef-chip span.material-symbols-outlined { font-size: 0.85rem; }
.ef-chip--required     { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.ef-chip--optional     { background: #eff6ff; color: #1e40af; border-color: #93c5fd; }
.ef-chip--catalogo     { background: #e0f2fe; color: #075985; border-color: #7dd3fc; }
.ef-chip--especialidad { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.ef-chip--pago         { background: #dcfce7; color: #166534; border-color: #86efac; }
.ef-chip--certificado  { background: #ccfbf1; color: #115e59; border-color: #5eead4; }
.ef-chip--shared       { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; cursor: help; }

.ef-doc__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.45rem;
}
.ef-doc__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  color: var(--blue);
  text-decoration: none;
  transition: 0.15s;
}
.ef-doc__link:hover { text-decoration: underline; }
.ef-doc__link span.material-symbols-outlined { font-size: 1rem; }

.ef-doc__action { flex-shrink: 0; }

/* Banner inline para documentos compartidos cuando NO estamos en la canónica.
   Indica al médico que el doc es obligatorio en otra especialidad y le da un atajo
   directo para navegar allá sin perder contexto. */
.ef-doc__canonica {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.55rem;
  padding: 0.5rem 0.7rem;
  background: #f5f3ff;
  border-left: 3px solid #8b5cf6;
  border-radius: 0.4rem;
  font-size: 0.78rem;
  color: #5b21b6;
  line-height: 1.35;
}
.ef-doc__canonica > span.material-symbols-outlined {
  font-size: 1.05rem;
  color: #7c3aed;
  flex-shrink: 0;
}
.ef-doc__canonica p { margin: 0; flex: 1; min-width: 12rem; }
.ef-doc__canonica b { color: #4c1d95; font-weight: 700; }

.ef-btn--ghost {
  background: white;
  color: #475569;
  border-color: #cbd5e1;
}
.ef-btn--ghost:hover { background: #f1f3f8; color: #1e293b; border-color: #94a3b8; }
.ef-btn--sm { padding: 0.35rem 0.7rem; font-size: 0.78rem; }
.ef-btn--sm span { font-size: 1rem; }

/* ─── BOTONES ─── */
.ef-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.5rem 0.95rem;
  border-radius: 0.4rem;
  font-weight: 700;
  font-size: 0.85rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: 0.15s;
  font-family: inherit;
}
.ef-btn span { font-size: 1.1rem; }
.ef-btn:hover { transform: translateY(-1px); }

.ef-btn--upload {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}
.ef-btn--upload:hover { filter: brightness(1.06); color: white; }

.ef-btn--primary {
  background: var(--green, #269a1c);
  color: white;
  border-color: var(--green, #269a1c);
  box-shadow: 0 0.15rem 0.4rem rgba(38,154,28,0.25);
  flex-shrink: 0;
}
.ef-btn--primary:hover { filter: brightness(1.06); color: white; }

.ef-btn--lock {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
}
.ef-btn--lock:hover { background: #fecaca; color: #7f1d1d; }

.ef-btn--unlock {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}
.ef-btn--unlock:hover { background: #bbf7d0; color: #14532d; }

/* ─── EMPTY ─── */
.ef-empty {
  text-align: center;
  padding: 1.7rem 1rem;
  background: #f8fafc;
  border: 2px dashed #cbd5e1;
  border-radius: 0.5rem;
  color: #64748b;
}
.ef-empty span.material-symbols-outlined { font-size: 2.4rem; color: #94a3b8; }
.ef-empty h5 { margin: 0.5rem 0 0.25rem 0; font-size: 1rem; font-weight: 700; color: #475569; }
.ef-empty p { margin: 0; font-size: 0.85rem; }
.ef-empty--full { grid-column: 1 / -1; }

/* ─── ATTACHED tab (Adjuntos) ─── */
.ef-attached {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 1000px) {
  .ef-body { grid-template-columns: 1fr; }
  .ef-sidebar { position: relative; top: 0; }
}
@media (max-width: 600px) {
  .ef-shell { padding: 0.75rem 0.85rem; }
  .ef-doc { flex-direction: column; }
  .ef-doc__action { width: 100%; }
  .ef-btn--upload { width: 100%; justify-content: center; }
  .ef-cta { flex-direction: column; align-items: stretch; }
  .ef-btn--primary { width: 100%; }
}


/* =============================================================================
   EXPEDIENTE · VisualizacionEspecialidadComponent.vue
   Componente:  resources/js/components/expediente/documentacion/VisualizacionEspecialidadComponent.vue
   Apartado:    Visualización del expediente por especialidad (médico)
   Prefijo:     .vd-shell, .vd-*
   ============================================================================= */
.vd-shell {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  box-sizing: border-box;
}
.vd-shell *, .vd-shell *::before, .vd-shell *::after { box-sizing: border-box; }

/* ─── BODY: sidebar + main (mismo patrón que ElectronicFileComponent) ─── */
.vd-body {
  display: grid;
  grid-template-columns: minmax(18rem, 32%) 1fr;
  gap: 1rem;
  align-items: start;
}

/* ─── Sidebar de especialidades ─── */
.vd-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: white;
  border: 1px solid #e2e8ef;
  border-radius: 0.55rem;
  padding: 0.85rem;
  position: sticky;
  top: 0.5rem;
}
.vd-sidebar__title {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.2rem 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.vd-sidebar__title span { font-size: 1.05rem; color: var(--blue); }

.vd-sidebar__list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.vd-spec {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: white;
  border: 1px solid #e2e8ef;
  border-left: 4px solid #cbd5e1;
  border-radius: 0.4rem;
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  transition: 0.15s;
  text-align: left;
  font-family: inherit;
}
.vd-spec:hover { box-shadow: 0 0.2rem 0.5rem rgba(0,0,0,0.05); }
.vd-spec--active {
  background: #f0f7ff;
  border-color: var(--blue);
  border-left-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(64,128,233,0.18);
}

.vd-spec__icon {
  font-size: 1.4rem;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #f1f5f9;
  color: #64748b;
}
.vd-spec--active .vd-spec__icon { background: #dbeafe; color: var(--blue); }

.vd-spec__info { flex: 1; min-width: 0; }
.vd-spec__name {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vd-spec__meta {
  margin: 0.1rem 0 0 0;
  font-size: 0.74rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vd-spec__count {
  margin: 0.15rem 0 0 0;
  font-size: 0.7rem;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vd-spec__chevron {
  font-size: 1.15rem;
  color: #cbd5e1;
  flex-shrink: 0;
  transition: 0.15s;
}
.vd-spec--active .vd-spec__chevron { color: var(--blue); transform: translateX(2px); }

/* ─── Main: documentos de la especialidad seleccionada ─── */
.vd-main {
  background: white;
  border: 1px solid #e2e8ef;
  border-radius: 0.55rem;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  box-shadow: 0 0.1rem 0.25rem rgba(0,0,0,0.03);
  min-width: 0;
}
/* Solo en vista admin limitamos altura para que la lista interna scrolle. La vista
   del médico mantiene el flujo natural sin scroll interno. */
/* Admin: el CSS global tiene `body, html { overflow: hidden }` y solo los layouts
   SE_MEDICO incluyen el wrapper `.scroll-this max-h-93`. En las vistas admin no hay
   wrapper, así que la página no scrollea — hacemos que el propio shell sea
   scrollable. Action bar y banners quedan sticky al top del scroll. */
.vd-shell--admin {
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  /* Espacio extra al fondo para que el último doc no quede pegado al borde / tapado
     por elementos sticky o el chrome del navegador. */
  padding-bottom: 10rem;
}
.vd-shell--admin .vd-actionbar,
.vd-shell--admin .vd-banner {
  position: sticky;
  top: 0.25rem;
  z-index: 5;
}

/* ─── RESPONSIVE: en pantallas estrechas el sidebar pasa arriba ─── */
@media (max-width: 1000px) {
  .vd-body { grid-template-columns: 1fr; }
  .vd-sidebar { position: relative; top: 0; }
}

/* ─── Sección por especialidad ─── */
.vd-section {
  background: white;
  border: 1px solid #e2e8ef;
  border-radius: 0.55rem;
  padding: 0.85rem 1rem;
  box-shadow: 0 0.1rem 0.25rem rgba(0,0,0,0.03);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.vd-section__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.55rem;
  border-bottom: 2px solid #e2e8ef;
  flex-wrap: wrap;
}
.vd-section__icon {
  font-size: 1.4rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: #eff6ff;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vd-section__title-wrap { flex: 1; min-width: 12rem; }
.vd-section__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
}
.vd-section__sub {
  margin: 0.15rem 0 0 0;
  font-size: 0.78rem;
  color: #64748b;
}
.vd-section__sub b { color: #1e293b; font-weight: 700; }
.vd-section__sep { color: #cbd5e1; margin: 0 0.3rem; }
.vd-count {
  font-size: 0.72rem;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #f1f5f9;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* ─── Lista de documentos ─── */
.vd-docs {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.vd-doc {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: flex-start;
  gap: 0.5rem;
  background: white;
  border: 1px solid #e2e8ef;
  border-left: 3px solid #cbd5e1;
  border-radius: 0.4rem;
  padding: 0.5rem 0.65rem;
  min-width: 0;
  transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}
.vd-doc:hover {
  box-shadow: 0 0.2rem 0.5rem rgba(0,0,0,0.05);
  transform: translateY(-1px);
}
.vd-doc--validated { border-left-color: var(--green, #269a1c); }
.vd-doc--pending   { border-left-color: #f59e0b; }
.vd-doc--historic  { border-left-color: #8b5cf6; background: #fafaff; }

.vd-doc__status {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vd-doc__status span { font-size: 1.05rem; }
.vd-doc--validated .vd-doc__status { background: #dcfce7; color: #166534; }
.vd-doc--pending   .vd-doc__status { background: #fef3c7; color: #92400e; }
.vd-doc--historic  .vd-doc__status { background: #ede9fe; color: #5b21b6; }

.vd-doc__body { min-width: 0; }
.vd-doc__title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  overflow-wrap: anywhere;
}
.vd-doc__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--blue);
  text-decoration: none;
  transition: 0.15s;
}
.vd-doc__link:hover { text-decoration: underline; color: #1e40af; }
.vd-doc__link span.material-symbols-outlined { font-size: 1.05rem; }

.vd-doc__desc {
  margin: 0.2rem 0 0 0;
  font-size: 0.78rem;
  color: #64748b;
  white-space: pre-line;
  line-height: 1.4;
}

.vd-doc__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.4rem;
}
.vd-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.vd-chip span.material-symbols-outlined { font-size: 0.85rem; }
.vd-chip--validated    { background: #dcfce7; color: #166534; border-color: #86efac; }
.vd-chip--pending      { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.vd-chip--historic     { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }
.vd-chip--catalogo     { background: #e0f2fe; color: #075985; border-color: #7dd3fc; }
.vd-chip--especialidad { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.vd-chip--pago         { background: #dcfce7; color: #166534; border-color: #86efac; }
.vd-chip--certificado  { background: #ccfbf1; color: #115e59; border-color: #5eead4; }

.vd-doc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  margin-top: 0.4rem;
  font-size: 0.74rem;
  color: #64748b;
}
.vd-doc__meta span.material-symbols-outlined {
  font-size: 0.95rem;
  vertical-align: middle;
  margin-right: 0.2rem;
  color: #94a3b8;
}
.vd-doc__meta b { color: #475569; font-weight: 600; }

/* ─── Acciones ─── */
.vd-doc__actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  align-self: flex-start;
  flex-shrink: 0;
}

.vd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0.35rem;
  font-weight: 700;
  font-size: 0.75rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: 0.15s;
  font-family: inherit;
  white-space: nowrap;
}
.vd-btn span { font-size: 0.95rem; }
.vd-btn:hover { transform: translateY(-1px); }

.vd-btn--accept {
  background: var(--green, #269a1c);
  color: white;
  border-color: var(--green, #269a1c);
  box-shadow: 0 0.1rem 0.3rem rgba(38,154,28,0.2);
}
.vd-btn--accept:hover { filter: brightness(1.06); color: white; }

.vd-btn--reject {
  background: #dc2626;
  color: white;
  border-color: #dc2626;
  box-shadow: 0 0.1rem 0.3rem rgba(220,38,38,0.2);
}
.vd-btn--reject:hover { filter: brightness(1.06); color: white; }

.vd-btn--update {
  background: #fef3c7;
  color: #92400e;
  border-color: #fcd34d;
}
.vd-btn--update:hover { background: #fde68a; }

.vd-btn--ghost {
  background: white;
  color: #475569;
  border-color: #cbd5e1;
}
.vd-btn--ghost:hover { background: #f1f3f8; color: #1e293b; border-color: #94a3b8; }

/* Toggle "Cambiar a..." (cuando ya hay decisión local) */
.vd-btn--toggle {
  background: white;
  color: #475569;
  border-color: #cbd5e1;
}
.vd-btn--toggle:hover { background: #f1f3f8; color: #1e293b; border-color: #94a3b8; }
.vd-btn--toggle > span.material-symbols-outlined { color: #64748b; }
.vd-btn--toggle:hover > span.material-symbols-outlined { color: var(--blue); }

/* Botón principal del action bar (Guardar información) */
.vd-btn--primary {
  background: var(--green, #269a1c);
  color: white;
  border-color: var(--green, #269a1c);
  box-shadow: 0 0.15rem 0.4rem rgba(38,154,28,0.25);
}
.vd-btn--primary:hover:not(:disabled) { filter: brightness(1.06); color: white; }
.vd-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ─── Banners de acción (Promover / Regresar solicitud) ─── */
.vd-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #e2e8ef;
  border-radius: 0.4rem;
  padding: 0.5rem 0.7rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.vd-banner > span.material-symbols-outlined { font-size: 1.2rem; flex-shrink: 0; }
.vd-banner p { margin: 0; flex: 1; min-width: 12rem; font-size: 0.82rem; color: #334155; }
.vd-banner--ok    { background: #dcfce7; border-color: #86efac; }
.vd-banner--ok   > span.material-symbols-outlined { color: #166534; }
.vd-banner--warn  { background: #fef3c7; border-color: #fcd34d; }
.vd-banner--warn > span.material-symbols-outlined { color: #92400e; }

/* ─── Selector de clasificación (titulo / diploma) ─── */
.vd-tipo-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: stretch;
}

/* Clasificador para pseudo-docs (titulo/diploma): bloque abajo del body con label
   pequeño + segmented control de opciones. */
.vd-pseudo-classifier {
  margin-top: 0.4rem;
  padding: 0.45rem 0.6rem;
  background: #f8fafc;
  border: 1px solid #e2e8ef;
  border-left: 3px solid #6366f1;
  border-radius: 0.35rem;
}
.vd-pseudo-classifier__label {
  margin: 0 0 0.3rem 0;
  font-size: 0.7rem;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vd-tipo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.35rem 0.55rem;
  background: white;
  border: 1px solid #e2e8ef;
  border-radius: 0.35rem;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 600;
  color: #475569;
  font-family: inherit;
  white-space: nowrap;
  transition: 0.15s;
}
.vd-tipo span.material-symbols-outlined { font-size: 0.95rem; color: #94a3b8; }
.vd-tipo:hover {
  background: #eef2ff; border-color: #a5b4fc; color: #3730a3;
}
.vd-tipo:hover span.material-symbols-outlined { color: #6366f1; }
.vd-tipo--active {
  background: #6366f1;
  border-color: #6366f1;
  color: white;
}
.vd-tipo--active span.material-symbols-outlined { color: white; }
.vd-tipo--active:hover { background: #4f46e5; border-color: #4f46e5; color: white; }

/* ─── Form rechazo inline ─── */
.vd-reject {
  grid-column: 1 / -1;
  margin-top: 0.4rem;
  background: #fff7f7;
  border: 1px dashed #fca5a5;
  border-radius: 0.4rem;
  padding: 0.7rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.vd-reject label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #991b1b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}
.vd-reject label span { font-size: 1rem; color: #b91c1c; }
.vd-textarea {
  width: 100%;
  min-height: 5rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid #fecaca;
  border-radius: 0.4rem;
  font-size: 0.85rem;
  color: #1e293b;
  resize: vertical;
  background: white;
  outline: 0;
  font-family: inherit;
  line-height: 1.4;
}
.vd-textarea:focus { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.12); }
.vd-reject__btns {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ─── Razón de rechazo (admin batch) ─── */
.vd-doc__reason {
  grid-column: 1 / -1;
  margin-top: 0.4rem;
  padding: 0.55rem 0.7rem 0.7rem 0.7rem;
  background: #fff7f7;
  border: 1px dashed #fca5a5;
  border-radius: 0.4rem;
}
.vd-doc__reason label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0.2rem 0 0.3rem 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: #991b1b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vd-doc__reason label span.material-symbols-outlined { font-size: 1.05rem; color: #b91c1c; }
.vd-doc__reason-hint {
  margin: 0.3rem 0 0 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.74rem;
}
.vd-doc__reason-hint span.material-symbols-outlined { font-size: 1rem; }
.vd-doc__reason-hint--ok   { color: #166534; }
.vd-doc__reason-hint--ok   span.material-symbols-outlined { color: #16a34a; }
.vd-doc__reason-hint--warn { color: #991b1b; }
.vd-doc__reason-hint--warn span.material-symbols-outlined { color: #d97706; }

/* ─── Action bar batch (arriba del listado, siempre visible para el admin) ─── */
.vd-actionbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  background: #f8fafc;
  border: 1px solid #e2e8ef;
  border-top: 2px solid var(--blue);
  border-radius: 0.4rem;
  padding: 0.45rem 0.7rem;
}
.vd-actionbar__hint--idle { color: #94a3b8; font-style: italic; }
.vd-actionbar__hint--idle > span.material-symbols-outlined { color: #94a3b8; }
.vd-actionbar__hint {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.78rem;
  color: #475569;
  flex: 1;
  min-width: 12rem;
}
.vd-actionbar__hint > span.material-symbols-outlined { color: var(--blue); font-size: 1rem; }
.vd-actionbar__hint b { color: #1e293b; font-weight: 800; font-size: 0.85rem; }
.vd-actionbar__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  border: 1px solid transparent;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vd-actionbar__chip span.material-symbols-outlined { font-size: 0.8rem; }
.vd-actionbar__chip--accepted { background: #dcfce7; color: #166534; border-color: #86efac; }
.vd-actionbar__chip--rejected { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.vd-actionbar__btns {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.vd-actionbar .vd-btn {
  padding: 0.35rem 0.7rem;
  font-size: 0.78rem;
}
.vd-actionbar .vd-btn span.material-symbols-outlined { font-size: 0.95rem; }

/* ─── Empty state ─── */
.vd-empty {
  text-align: center;
  padding: 1.8rem 1rem;
  background: #f8fafc;
  border: 2px dashed #cbd5e1;
  border-radius: 0.5rem;
  color: #64748b;
}
.vd-empty span.material-symbols-outlined { font-size: 2.4rem; color: #94a3b8; }
.vd-empty h5 { margin: 0.4rem 0 0.2rem 0; font-size: 1rem; font-weight: 700; color: #475569; }
.vd-empty p { margin: 0; font-size: 0.85rem; }
.vd-empty--inline { padding: 0.85rem; }
.vd-empty--inline span { font-size: 1.6rem; }

/* ─── Responsive ─── */
@media (max-width: 700px) {
  .vd-doc { grid-template-columns: 2.4rem 1fr; }
  .vd-doc__actions { grid-column: 1 / -1; justify-content: stretch; }
  .vd-btn { flex: 1; justify-content: center; }
}


/* =============================================================================
   EXPEDIENTE · VisualizacionGeneralComponent.vue
   Componente:  resources/js/components/expediente/documentacion/VisualizacionGeneralComponent.vue
   Apartado:    Visualización general (admin) — comparte clases con VisualizacionEspecialidad
   Prefijo:     .vd-shell, .vd-* (comparte con VisualizacionEspecialidad)
   ============================================================================= */
.vd-shell {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  box-sizing: border-box;
}
.vd-shell *, .vd-shell *::before, .vd-shell *::after { box-sizing: border-box; }

/* ─── BODY: sidebar + main (mismo patrón que ElectronicFileComponent) ─── */
.vd-body {
  display: grid;
  grid-template-columns: minmax(18rem, 32%) 1fr;
  gap: 1rem;
  align-items: start;
}

/* ─── Sidebar de especialidades ─── */
.vd-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: white;
  border: 1px solid #e2e8ef;
  border-radius: 0.55rem;
  padding: 0.85rem;
  position: sticky;
  top: 0.5rem;
}
.vd-sidebar__title {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.2rem 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.vd-sidebar__title span { font-size: 1.05rem; color: var(--blue); }

.vd-sidebar__list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.vd-spec {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: white;
  border: 1px solid #e2e8ef;
  border-left: 4px solid #cbd5e1;
  border-radius: 0.4rem;
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  transition: 0.15s;
  text-align: left;
  font-family: inherit;
}
.vd-spec:hover { box-shadow: 0 0.2rem 0.5rem rgba(0,0,0,0.05); }
.vd-spec--active {
  background: #f0f7ff;
  border-color: var(--blue);
  border-left-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(64,128,233,0.18);
}

.vd-spec__icon {
  font-size: 1.4rem;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #f1f5f9;
  color: #64748b;
}
.vd-spec--active .vd-spec__icon { background: #dbeafe; color: var(--blue); }

.vd-spec__info { flex: 1; min-width: 0; }
.vd-spec__name {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vd-spec__meta {
  margin: 0.1rem 0 0 0;
  font-size: 0.74rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vd-spec__count {
  margin: 0.15rem 0 0 0;
  font-size: 0.7rem;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vd-spec__chevron {
  font-size: 1.15rem;
  color: #cbd5e1;
  flex-shrink: 0;
  transition: 0.15s;
}
.vd-spec--active .vd-spec__chevron { color: var(--blue); transform: translateX(2px); }

/* ─── Main: documentos de la especialidad seleccionada ─── */
.vd-main {
  background: white;
  border: 1px solid #e2e8ef;
  border-radius: 0.55rem;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  box-shadow: 0 0.1rem 0.25rem rgba(0,0,0,0.03);
  min-width: 0;
}
/* Solo en vista de admin (no médico) limitamos altura para que la lista interna
   scrolle y la action bar superior quede siempre visible. La vista del médico
   conserva el flujo original sin scroll interno. */
/* Admin: el CSS global del proyecto tiene `body, html { overflow: hidden }` y solo
   los layouts de SE_MEDICO envuelven el contenido con `.scroll-this max-h-93`. Para
   las vistas admin (directorio / validación) NO hay wrapper, así que la página no
   scrollea. Solución: que el propio shell sea el contenedor scrollable.
   Action bar y banners quedan sticky al top de ese scroll. */
.vd-shell--admin {
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  /* Espacio al fondo para que el último doc no quede pegado al borde. */
  padding-bottom: 10rem;
}
.vd-shell--admin .vd-actionbar,
.vd-shell--admin .vd-banner {
  position: sticky;
  top: 0.25rem;
  z-index: 5;
}

/* ─── RESPONSIVE: en pantallas estrechas el sidebar pasa arriba ─── */
@media (max-width: 1000px) {
  .vd-body { grid-template-columns: 1fr; }
  .vd-sidebar { position: relative; top: 0; }
}

/* ─── Sección por especialidad ─── */
.vd-section {
  background: white;
  border: 1px solid #e2e8ef;
  border-radius: 0.55rem;
  padding: 0.85rem 1rem;
  box-shadow: 0 0.1rem 0.25rem rgba(0,0,0,0.03);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.vd-section__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.55rem;
  border-bottom: 2px solid #e2e8ef;
  flex-wrap: wrap;
}
.vd-section__icon {
  font-size: 1.4rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: #eff6ff;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vd-section__title-wrap { flex: 1; min-width: 12rem; }
.vd-section__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
}
.vd-section__sub {
  margin: 0.15rem 0 0 0;
  font-size: 0.78rem;
  color: #64748b;
}
.vd-section__sub b { color: #1e293b; font-weight: 700; }
.vd-section__sep { color: #cbd5e1; margin: 0 0.3rem; }
.vd-count {
  font-size: 0.72rem;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #f1f5f9;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* ─── Lista de documentos ─── */
.vd-docs {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.vd-doc {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: flex-start;
  gap: 0.5rem;
  background: white;
  border: 1px solid #e2e8ef;
  border-left: 3px solid #cbd5e1;
  border-radius: 0.4rem;
  padding: 0.5rem 0.65rem;
  min-width: 0;
  transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}
.vd-doc:hover {
  box-shadow: 0 0.2rem 0.5rem rgba(0,0,0,0.05);
  transform: translateY(-1px);
}
.vd-doc--validated { border-left-color: var(--green, #269a1c); }
.vd-doc--pending   { border-left-color: #f59e0b; }
.vd-doc--historic  { border-left-color: #8b5cf6; background: #fafaff; }

.vd-doc__status {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vd-doc__status span { font-size: 1.05rem; }
.vd-doc--validated .vd-doc__status { background: #dcfce7; color: #166534; }
.vd-doc--pending   .vd-doc__status { background: #fef3c7; color: #92400e; }
.vd-doc--historic  .vd-doc__status { background: #ede9fe; color: #5b21b6; }

.vd-doc__body { min-width: 0; }
.vd-doc__title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  overflow-wrap: anywhere;
}
.vd-doc__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--blue);
  text-decoration: none;
  transition: 0.15s;
}
.vd-doc__link:hover { text-decoration: underline; color: #1e40af; }
.vd-doc__link span.material-symbols-outlined { font-size: 1.05rem; }

.vd-doc__desc {
  margin: 0.2rem 0 0 0;
  font-size: 0.78rem;
  color: #64748b;
  white-space: pre-line;
  line-height: 1.4;
}

.vd-doc__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.4rem;
}
.vd-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.vd-chip span.material-symbols-outlined { font-size: 0.85rem; }
.vd-chip--validated    { background: #dcfce7; color: #166534; border-color: #86efac; }
.vd-chip--pending      { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.vd-chip--historic     { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }
.vd-chip--catalogo     { background: #e0f2fe; color: #075985; border-color: #7dd3fc; }
.vd-chip--especialidad { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.vd-chip--pago         { background: #dcfce7; color: #166534; border-color: #86efac; }
.vd-chip--certificado  { background: #ccfbf1; color: #115e59; border-color: #5eead4; }
.vd-chip--shared       { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; cursor: help; }

/* ─── Meta: fechas ─── */
.vd-doc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  margin-top: 0.4rem;
  font-size: 0.74rem;
  color: #64748b;
}
.vd-doc__meta span.material-symbols-outlined {
  font-size: 0.95rem;
  vertical-align: middle;
  margin-right: 0.2rem;
  color: #94a3b8;
}
.vd-doc__meta b { color: #475569; font-weight: 600; }

/* ─── Acciones ─── */
.vd-doc__actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  align-self: flex-start;
  flex-shrink: 0;
}

.vd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0.35rem;
  font-weight: 700;
  font-size: 0.75rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: 0.15s;
  font-family: inherit;
  white-space: nowrap;
}
.vd-btn span { font-size: 0.95rem; }
.vd-btn:hover { transform: translateY(-1px); }

.vd-btn--accept {
  background: var(--green, #269a1c);
  color: white;
  border-color: var(--green, #269a1c);
  box-shadow: 0 0.1rem 0.3rem rgba(38,154,28,0.2);
}
.vd-btn--accept:hover { filter: brightness(1.06); color: white; }

.vd-btn--reject {
  background: #dc2626;
  color: white;
  border-color: #dc2626;
  box-shadow: 0 0.1rem 0.3rem rgba(220,38,38,0.2);
}
.vd-btn--reject:hover { filter: brightness(1.06); color: white; }

.vd-btn--upload {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}
.vd-btn--upload:hover { filter: brightness(1.06); color: white; }

.vd-btn--update {
  background: #fef3c7;
  color: #92400e;
  border-color: #fcd34d;
}
.vd-btn--update:hover { background: #fde68a; }

.vd-btn--ghost {
  background: white;
  color: #475569;
  border-color: #cbd5e1;
}
.vd-btn--ghost:hover { background: #f1f3f8; color: #1e293b; border-color: #94a3b8; }

/* Toggle "Cambiar a..." (cuando ya hay decisión local) */
.vd-btn--toggle {
  background: white;
  color: #475569;
  border-color: #cbd5e1;
}
.vd-btn--toggle:hover { background: #f1f3f8; color: #1e293b; border-color: #94a3b8; }
.vd-btn--toggle > span.material-symbols-outlined { color: #64748b; }
.vd-btn--toggle:hover > span.material-symbols-outlined { color: var(--blue); }

/* Botón principal del action bar (Guardar información) */
.vd-btn--primary {
  background: var(--green, #269a1c);
  color: white;
  border-color: var(--green, #269a1c);
  box-shadow: 0 0.15rem 0.4rem rgba(38,154,28,0.25);
}
.vd-btn--primary:hover:not(:disabled) { filter: brightness(1.06); color: white; }
.vd-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ─── Selector de clasificación (titulo / diploma) ─── */
.vd-tipo-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: stretch;
}

/* Bloque del clasificador para pseudo-docs (vive abajo del body, no al costado). */
.vd-pseudo-classifier {
  margin-top: 0.4rem;
  padding: 0.45rem 0.6rem;
  background: #f8fafc;
  border: 1px solid #e2e8ef;
  border-left: 3px solid #6366f1;
  border-radius: 0.35rem;
}
.vd-pseudo-classifier__label {
  margin: 0 0 0.3rem 0;
  font-size: 0.7rem;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vd-tipo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.35rem 0.55rem;
  background: white;
  border: 1px solid #e2e8ef;
  border-radius: 0.35rem;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 600;
  color: #475569;
  font-family: inherit;
  white-space: nowrap;
  transition: 0.15s;
}
.vd-tipo span.material-symbols-outlined { font-size: 0.95rem; color: #94a3b8; }
.vd-tipo:hover { background: #eef2ff; border-color: #a5b4fc; color: #3730a3; }
.vd-tipo:hover span.material-symbols-outlined { color: #6366f1; }
.vd-tipo--active { background: #6366f1; border-color: #6366f1; color: white; }
.vd-tipo--active span.material-symbols-outlined { color: white; }
.vd-tipo--active:hover { background: #4f46e5; border-color: #4f46e5; color: white; }

/* ─── Form rechazo inline ─── */
.vd-reject {
  grid-column: 1 / -1;
  margin-top: 0.4rem;
  background: #fff7f7;
  border: 1px dashed #fca5a5;
  border-radius: 0.4rem;
  padding: 0.7rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.vd-reject label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #991b1b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}
.vd-reject label span { font-size: 1rem; color: #b91c1c; }
.vd-textarea {
  width: 100%;
  min-height: 5rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid #fecaca;
  border-radius: 0.4rem;
  font-size: 0.85rem;
  color: #1e293b;
  resize: vertical;
  background: white;
  outline: 0;
  font-family: inherit;
  line-height: 1.4;
}
.vd-textarea:focus { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.12); }
.vd-reject__btns {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ─── Razón de rechazo (admin batch, no histórico) ─── */
.vd-doc__reason {
  grid-column: 1 / -1;
  margin-top: 0.4rem;
  padding: 0.55rem 0.7rem 0.7rem 0.7rem;
  background: #fff7f7;
  border: 1px dashed #fca5a5;
  border-radius: 0.4rem;
}
.vd-doc__reason label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0.2rem 0 0.3rem 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: #991b1b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vd-doc__reason label span.material-symbols-outlined { font-size: 1.05rem; color: #b91c1c; }
.vd-doc__reason-hint {
  margin: 0.3rem 0 0 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.74rem;
}
.vd-doc__reason-hint span.material-symbols-outlined { font-size: 1rem; }
.vd-doc__reason-hint--ok   { color: #166534; }
.vd-doc__reason-hint--ok   span.material-symbols-outlined { color: #16a34a; }
.vd-doc__reason-hint--warn { color: #991b1b; }
.vd-doc__reason-hint--warn span.material-symbols-outlined { color: #d97706; }

/* ─── Banners de acción (Promover / Regresar) ─── */
.vd-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #e2e8ef;
  border-radius: 0.4rem;
  padding: 0.5rem 0.7rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.vd-banner > span.material-symbols-outlined { font-size: 1.2rem; flex-shrink: 0; }
.vd-banner p { margin: 0; flex: 1; min-width: 12rem; font-size: 0.82rem; color: #334155; }
.vd-banner--ok    { background: #dcfce7; border-color: #86efac; }
.vd-banner--ok   > span.material-symbols-outlined { color: #166534; }
.vd-banner--warn  { background: #fef3c7; border-color: #fcd34d; }
.vd-banner--warn > span.material-symbols-outlined { color: #92400e; }

/* ─── Action bar batch (arriba del listado, siempre visible para el admin) ─── */
.vd-actionbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  background: #f8fafc;
  border: 1px solid #e2e8ef;
  border-top: 2px solid var(--blue);
  border-radius: 0.4rem;
  padding: 0.45rem 0.7rem;
}
.vd-actionbar__hint--idle { color: #94a3b8; font-style: italic; }
.vd-actionbar__hint--idle > span.material-symbols-outlined { color: #94a3b8; }
.vd-actionbar__hint {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.78rem;
  color: #475569;
  flex: 1;
  min-width: 12rem;
}
.vd-actionbar__hint > span.material-symbols-outlined { color: var(--blue); font-size: 1rem; }
.vd-actionbar__hint b { color: #1e293b; font-weight: 800; font-size: 0.85rem; }
.vd-actionbar__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  border: 1px solid transparent;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vd-actionbar__chip span.material-symbols-outlined { font-size: 0.8rem; }
.vd-actionbar__chip--accepted { background: #dcfce7; color: #166534; border-color: #86efac; }
.vd-actionbar__chip--rejected { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.vd-actionbar__btns {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
/* Compacta también los botones internos para que no se vean enormes */
.vd-actionbar .vd-btn {
  padding: 0.35rem 0.7rem;
  font-size: 0.78rem;
}
.vd-actionbar .vd-btn span.material-symbols-outlined { font-size: 0.95rem; }

/* ─── Empty state ─── */
.vd-empty {
  text-align: center;
  padding: 1.8rem 1rem;
  background: #f8fafc;
  border: 2px dashed #cbd5e1;
  border-radius: 0.5rem;
  color: #64748b;
}
.vd-empty span.material-symbols-outlined { font-size: 2.4rem; color: #94a3b8; }
.vd-empty h5 { margin: 0.4rem 0 0.2rem 0; font-size: 1rem; font-weight: 700; color: #475569; }
.vd-empty p { margin: 0; font-size: 0.85rem; }
.vd-empty--inline { padding: 0.85rem; }
.vd-empty--inline span { font-size: 1.6rem; }

/* ─── Responsive ─── */
@media (max-width: 700px) {
  .vd-doc { grid-template-columns: 2.4rem 1fr; }
  .vd-doc__actions { grid-column: 1 / -1; justify-content: stretch; }
  .vd-btn { flex: 1; justify-content: center; }
}


/* =============================================================================
   EXPEDIENTE BITÁCORA · BitacoraComponent.vue
   Componente:  resources/js/components/expediente/bitacora/BitacoraComponent.vue
   Apartado:    Timeline de movimientos del expediente
   Prefijo:     .ms-bita-timeline*
   ============================================================================= */
.ms-bita-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding-left: 0.5rem;
}
.ms-bita-timeline::before {
    content: '';
    position: absolute;
    left: 1.15rem; top: 0.5rem; bottom: 0.5rem;
    width: 2px;
    background: linear-gradient(to bottom, #cbd5e1 0%, #cbd5e1 100%);
}

.ms-bita-item {
    display: flex; gap: 0.85rem; align-items: flex-start;
    position: relative;
}
.ms-bita-item__dot {
    width: 2.3rem; height: 2.3rem;
    background: #fff; border: 2px solid #2563eb;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; z-index: 1;
    box-shadow: 0 0 0 4px #fff;
}
.ms-bita-item__dot .material-symbols-outlined { font-size: 1.15rem; color: #2563eb; }

.ms-bita-item__card {
    flex: 1; min-width: 0;
    background: #fff;
    border: 1px solid #e2e8ef;
    border-radius: 0.55rem;
    padding: 0.85rem 1rem;
    transition: box-shadow 0.15s ease;
}
.ms-bita-item__card:hover { box-shadow: 0 0.2rem 0.5rem rgba(15, 23, 42, 0.06); }

.ms-bita-item__head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.45rem;
}
.ms-bita-item__meta { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.ms-bita-item__funcion {
    font-size: 0.92rem; color: #1a3c6e; font-weight: 700; line-height: 1.3;
}
.ms-bita-item__user {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.72rem; color: #64748b;
}
.ms-bita-item__user .material-symbols-outlined { font-size: 0.9rem; }

.ms-bita-item__date {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.72rem; color: #94a3b8; white-space: nowrap;
}
.ms-bita-item__date .material-symbols-outlined { font-size: 0.9rem; }

.ms-bita-item__desc {
    margin: 0 0 0.55rem;
    font-size: 0.82rem; color: #475569; line-height: 1.45;
}

.ms-bita-item__tags {
    display: flex; gap: 0.35rem; flex-wrap: wrap;
    margin-bottom: 0.45rem;
}
.ms-bita-tag {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.18rem 0.55rem; border-radius: 0.35rem;
    background: #f1f5f9; color: #475569;
    font-size: 0.68rem; font-weight: 600;
}
.ms-bita-tag .material-symbols-outlined { font-size: 0.85rem; color: #94a3b8; }

.ms-bita-item__more {
    display: inline-flex; align-items: center; gap: 0.25rem;
    background: transparent; border: none; padding: 0;
    color: #2563eb; font-size: 0.78rem; font-weight: 600;
    cursor: pointer;
}
.ms-bita-item__more:hover { color: #1e3a8a; }
.ms-bita-item__more .material-symbols-outlined { font-size: 1.05rem; }

.ms-bita-item__detail {
    margin-top: 0.55rem;
    padding: 0.7rem 0.85rem;
    background: #f8fafc; border-radius: 0.4rem;
    border-left: 3px solid #2563eb;
}
.ms-bita-item__detail-title {
    margin: 0 0 0.4rem;
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04rem;
    color: #94a3b8; font-weight: 700;
}
.ms-bita-changes {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 0.45rem;
}
.ms-bita-changes li {
    display: flex; flex-direction: column; gap: 0.2rem;
    padding: 0.5rem 0.65rem;
    background: #fff; border-radius: 0.4rem;
    border: 1px solid #e2e8ef;
    min-width: 0;
}
@media (max-width: 560px) {
    .ms-bita-changes { grid-template-columns: 1fr; }
}
.ms-bita-changes__field {
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03rem;
    color: #94a3b8; font-weight: 700;
}
.ms-bita-changes__value {
    font-size: 0.82rem; color: #1a3c6e;
    overflow-wrap: anywhere;
}
.ms-bita-changes__diff {
    display: inline-flex; align-items: center; gap: 0.4rem;
    flex-wrap: wrap;
}
.ms-bita-changes__before {
    display: inline-block; padding: 0.15rem 0.45rem;
    background: #fee2e2; color: #b91c1c;
    border-radius: 0.3rem; font-size: 0.78rem;
    text-decoration: line-through;
}
.ms-bita-changes__after {
    display: inline-block; padding: 0.15rem 0.45rem;
    background: #dcfce7; color: #166534;
    border-radius: 0.3rem; font-size: 0.78rem;
    font-weight: 600;
}
.ms-bita-changes__diff .material-symbols-outlined {
    font-size: 1rem; color: #94a3b8;
}

.fade-enter-active, .fade-leave-active { transition: opacity 0.25s ease; }
.fade-enter, .fade-leave-to { opacity: 0; }


/* =============================================================================
   EXPEDIENTE · UpdateEmailComponent.vue
   Componente:  resources/js/components/expediente/datos_personales/UpdateEmailComponent.vue
   Apartado:    Modal de actualización de email
   Prefijo:     .upd-mail-count*
   ============================================================================= */
/* Contador en el header del card */
.upd-mail-count {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    background: rgba(46, 92, 158, 0.1);
    color: #1a3c6e;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.03rem;
}

/* Lista de consejos */
.upd-mail-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.65rem;
}

.upd-mail-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem 0.75rem 1rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.6rem;
    transition: all 0.18s ease;
    overflow: hidden;
}

.upd-mail-item::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
}

.upd-mail-item:hover {
    border-color: #2e5c9e;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(26, 60, 110, 0.12);
}

.upd-mail-item__badge {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(26, 60, 110, 0.25);
}

.upd-mail-item__badge .material-symbols-outlined {
    font-size: 1.2rem;
}

.upd-mail-item__body {
    flex: 1;
    min-width: 0;
}

.upd-mail-item__name {
    margin: 0 0 0.2rem 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: #1a3c6e;
    line-height: 1.25;
    word-break: break-word;
}

.upd-mail-item__meta {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.74rem;
    color: #64748b;
    line-height: 1.2;
}

.upd-mail-item__meta b {
    color: #475569;
    font-weight: 600;
    margin-left: 0.15rem;
}

.upd-mail-item__meta .material-symbols-outlined {
    font-size: 0.95rem;
    color: #94a3b8;
}

.upd-mail-item__chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.03rem;
}

.upd-mail-item__chip::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #16a34a;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2);
}

/* Estado vacío */
.upd-mail-empty {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border: 1px dashed #cbd5e1;
    border-radius: 0.6rem;
    color: #64748b;
}

.upd-mail-empty > .material-symbols-outlined {
    font-size: 2rem;
    color: #94a3b8;
    flex-shrink: 0;
}

.upd-mail-empty__title {
    margin: 0 0 0.15rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569;
}

.upd-mail-empty__hint {
    margin: 0;
    font-size: 0.78rem;
    color: #94a3b8;
}

@media (max-width: 560px) {
    .upd-mail-list {
        grid-template-columns: 1fr;
    }

    .upd-mail-item {
        padding: 0.65rem 0.75rem 0.65rem 0.85rem;
    }

    .upd-mail-item__badge {
        width: 34px;
        height: 34px;
    }

    .upd-mail-item__chip {
        font-size: 0.65rem;
        padding: 0.18rem 0.45rem;
    }
}


/* =============================================================================
   EXPEDIENTE · FiscalAddressComponent.vue
   Componente:  resources/js/components/expediente/direccion_fiscal/FiscalAddressComponent.vue
   Apartado:    Form de dirección fiscal
   Prefijo:     .ms-form__note*
   ============================================================================= */
/* Mini estilos exclusivos para esta vista que no encajan en las clases globales. */
.ms-form__note {
    display: flex; align-items: center; gap: 0.4rem;
    margin: 0 0 0.75rem;
    padding: 0.55rem 0.7rem;
    background: #eff6ff; border-left: 3px solid #2563eb;
    color: #1e3a8a; border-radius: 0.4rem;
    font-size: 0.78rem; line-height: 1.4;
}
.ms-form__note .material-symbols-outlined { color: #2563eb; font-size: 1.05rem; flex-shrink: 0; }

.ms-form__empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 1.5rem 1rem; text-align: center;
    background: #f8fafc; border-radius: 0.45rem;
    color: #64748b;
}
.ms-form__empty .material-symbols-outlined {
    font-size: 2.4rem; color: #94a3b8; margin-bottom: 0.5rem;
}
.ms-form__empty h5 {
    margin: 0 0 0.25rem;
    font-size: 0.95rem; font-weight: 700; color: #1a3c6e;
}
.ms-form__empty p { margin: 0; font-size: 0.8rem; }

.ms-form__constancia-pending {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.85rem 1rem;
    background: #fef9e3;
    border-left: 4px solid #f59e0b;
    border-radius: 0.45rem;
}
.ms-form__constancia-pending .material-symbols-outlined {
    font-size: 1.8rem; color: #b45309; flex-shrink: 0;
}
.ms-form__constancia-pending b {
    display: block;
    font-size: 0.88rem; color: #78350f;
}
.ms-form__constancia-pending small {
    display: block;
    font-size: 0.75rem; color: #92400e;
    margin-top: 0.15rem;
}


/* =============================================================================
   EXPEDIENTE · ConvocatoriaComponent.vue
   Componente:  resources/js/components/expediente/especialidades/agregar_especialidad/ConvocatoriaComponent.vue
   Apartado:    Stepper de selección de convocatoria al agregar especialidad
   Prefijo:     .ms-stepper*
   ============================================================================= */
/* ============================================================
   Wizard agregar especialidad — paso 0 (Convocatoria)
   Estilos compartidos por todos los pasos del wizard.
   ============================================================ */
.ms-stepper {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 1.1rem;
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid #e2e8ef;
    border-radius: 0.55rem;
    overflow-x: auto;
}
.ms-stepper__item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #94a3b8;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}
.ms-stepper__dot {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: #f1f5f9;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.78rem;
    border: 2px solid #e2e8ef;
}
.ms-stepper__item.is-active {
    color: #1d4ed8;
}
.ms-stepper__item.is-active .ms-stepper__dot {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}
.ms-stepper__item.is-done .ms-stepper__dot {
    background: #16a34a;
    color: #fff;
    border-color: #16a34a;
}
.ms-stepper__line {
    flex: 1;
    height: 2px;
    background: #e2e8ef;
    min-width: 1.5rem;
}

/* --- Radio cards (selección visual estilo card) --- */
.ms-radio-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.55rem;
}
.ms-radio-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    border: 1.5px solid #e2e8ef;
    border-radius: 0.5rem;
    background: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
    margin: 0;
}
.ms-radio-card:hover {
    border-color: #93c5fd;
    background: #f8fafc;
}
.ms-radio-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.ms-radio-card__check {
    font-size: 1.35rem !important;
    color: #cbd5e1;
    flex-shrink: 0;
    transition: color 0.15s ease;
}
.ms-radio-card__text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.85rem;
    color: #1a3c6e;
    line-height: 1.3;
    min-width: 0;
}
.ms-radio-card__text b {
    font-weight: 700;
    color: #1a3c6e;
}
.ms-radio-card__text small {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 500;
}
.ms-radio-card.is-selected {
    border-color: #2563eb;
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.ms-radio-card.is-selected .ms-radio-card__check { color: #2563eb; }
.ms-radio-card--block { grid-column: 1 / -1; }
.ms-radio-card.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: #f8fafc;
}
.ms-radio-cards--block { grid-template-columns: 1fr; }

/* --- Tarjeta de convocatoria seleccionable --- */
.ms-convoc-card { align-items: flex-start; padding: 0.85rem 0.95rem; }
.ms-convoc-card .ms-radio-card__check { margin-top: 0.15rem; }
.ms-convoc-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.2rem;
}
.ms-convoc-head b {
    font-size: 0.95rem;
    color: #1a3c6e;
    font-weight: 700;
}
.ms-convoc-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 1rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03rem;
}
.ms-convoc-chip--ok { background: #dcfce7; color: #15803d; }
.ms-convoc-chip--bad { background: #fee2e2; color: #b91c1c; }

.ms-convoc-desc {
    display: block;
    font-size: 0.78rem;
    color: #475569;
    line-height: 1.4;
    margin-bottom: 0.45rem;
}
.ms-convoc-meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1rem;
}
.ms-convoc-meta li {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: #64748b;
}
.ms-convoc-meta li .material-symbols-outlined {
    font-size: 0.95rem;
    color: #94a3b8;
}
.ms-convoc-meta li b { color: #1a3c6e; font-weight: 700; }

/* --- Subida de archivo PDF (paso 4 — certificado) --- */
.ms-form__fileupload {
    position: relative;
    border: 2px dashed #cbd5e1;
    border-radius: 0.5rem;
    background: #f8fafc;
    transition: all 0.15s ease;
}
.ms-form__fileupload:hover { border-color: #93c5fd; background: #eff6ff; }
.ms-form__fileupload.is-loaded {
    border-style: solid;
    border-color: #16a34a;
    background: #f0fdf4;
}
.ms-form__fileupload-input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
}
.ms-form__fileupload-label {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1rem;
    cursor: pointer;
    margin: 0;
}
.ms-form__fileupload-label .material-symbols-outlined {
    font-size: 2rem;
    color: #64748b;
    flex-shrink: 0;
}
.ms-form__fileupload.is-loaded .ms-form__fileupload-label .material-symbols-outlined { color: #16a34a; }
.ms-form__fileupload-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.ms-form__fileupload-text b {
    font-size: 0.88rem;
    color: #1a3c6e;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ms-form__fileupload-text small {
    font-size: 0.75rem;
    color: #64748b;
}
.ms-form__fileupload-clear {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: #dc2626;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.1rem 0.3rem rgba(0,0,0,0.1);
    transition: background 0.15s ease;
    z-index: 2;
}
.ms-form__fileupload-clear:hover { background: #fee2e2; }
.ms-form__fileupload-clear .material-symbols-outlined { font-size: 1rem; }

/* --- Detalle de la convocatoria activa --- */
.ms-convocatoria-detail { border-left: 4px solid #16a34a; }
.ms-convocatoria-name {
    margin: 0 0 0.3rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #15803d;
}
.ms-convocatoria-desc {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.5;
}
.ms-convocatoria-meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.6rem;
}
.ms-convocatoria-meta li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.7rem;
    background: #f8fafc;
    border-radius: 0.4rem;
}
.ms-convocatoria-meta .material-symbols-outlined {
    color: #16a34a;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.ms-convocatoria-meta small {
    display: block;
    font-size: 0.68rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04rem;
    font-weight: 600;
    margin-bottom: 0.1rem;
}
.ms-convocatoria-meta b {
    font-size: 0.8rem;
    color: #1a3c6e;
}

/* --- Resumen en el aside --- */
.ms-form__aside-summary {
    background: #f8fafc;
    border-radius: 0.45rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.ms-form__aside-row {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.ms-form__aside-row small {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04rem;
    color: #94a3b8;
    font-weight: 600;
}
.ms-form__aside-row b {
    font-size: 0.82rem;
    color: #1a3c6e;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* --- Botón submit deshabilitado --- */
.ms-form__aside-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- Banner info (reusado por todos los pasos) --- */
.ms-banner.ms-banner--info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-left: 4px solid #2563eb;
    border-radius: 0.45rem;
    color: #1e3a8a;
    font-size: 0.85rem;
    margin-bottom: 0.85rem;
}
.ms-banner.ms-banner--info .material-symbols-outlined { color: #2563eb; }

@media (max-width: 640px) {
    .ms-stepper { gap: 0.25rem; padding: 0.6rem 0.75rem; }
    .ms-stepper__label { display: none; }
    .ms-stepper__line { min-width: 0.75rem; }
}


/* =============================================================================
   EXPEDIENTE · FormCreateSpecialtyComponent.vue
   Componente:  resources/js/components/expediente/especialidades/FormCreateSpecialtyComponent.vue
   Apartado:    Form de creación de especialidad
   Prefijo:     .ms-form__help*
   ============================================================================= */
/* Espacio adicional entre el último bloque (profesor adjunto) y la ayuda colapsable
   "¿La institución no está en el catálogo?" para que no se vea pegada al bloque anterior. */
.ms-form__help--spaced { margin-top: 1.25rem; }

/* Grid de 6 columnas (para distribuir Título 1 / Nombre 3 / Email 2 en cuerpo docente) */
.ms-form__grid.ms-form__grid--6 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem 0.85rem;
}
@media (max-width: 720px) {
    .ms-form__grid.ms-form__grid--6 { grid-template-columns: 1fr; }
    .ms-form__grid.ms-form__grid--6 > .ms-form__field { grid-column: span 1 !important; }
}

/* Etiqueta de fila secundaria (Profesor titular / adjunto dentro del cuerpo docente) */
.ms-form__rowlabel {
    margin: 0.7rem 0 0.35rem;
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.75rem; font-weight: 600; color: #1a3c6e;
    letter-spacing: 0.02em;
}
.ms-form__rowlabel .material-symbols-outlined {
    font-size: 1rem; color: #64748b;
}

/* Hint "(opcional)" al lado del sublabel de profesores cuando no es proceso 1 */
.ms-form__sublabel-hint {
    margin-left: 0.4rem;
    font-size: 0.7rem;
    font-weight: 500;
    color: #64748b;
    text-transform: none;
    letter-spacing: 0;
    font-style: italic;
}

/* Estado de error en el grupo de toggles (acción posterior obligatoria) */
.ms-form__toggle.is-invalid {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
    border-radius: 0.45rem;
}
.ms-form__error {
    margin: 0.35rem 0 0;
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.75rem; color: #b91c1c; font-weight: 600;
}
.ms-form__error .material-symbols-outlined { font-size: 0.95rem; }

/* Botón inline tipo enlace en el label (usado para "Refrescar convocatorias") */
.ms-form__inline-link {
    background: none; border: none; cursor: pointer;
    color: #2563eb; font-size: 0.72rem; font-weight: 600;
    margin-left: 0.5rem; padding: 0.1rem 0.35rem;
    border-radius: 0.3rem;
    display: inline-flex; align-items: center; gap: 0.2rem;
    text-transform: none; letter-spacing: 0;
}
.ms-form__inline-link:hover { background: #eff6ff; color: #1d4ed8; }

/* ─── Dropzone para el certificado vigente ───────── */
.ms-dropzone {
    display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;
    width: 100%;
    min-height: 8rem;
    border: 2px dashed #c5d3e8;
    border-radius: 0.6rem;
    background-color: #fafbff;
    padding: 1rem;
    margin: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}
.ms-dropzone:hover {
    border-color: #2563eb;
    background-color: #eef4ff;
}
.ms-dropzone--dragging {
    border-color: #2563eb;
    background-color: #eef4ff;
    transform: scale(1.01);
}
.ms-dropzone--filled {
    border-style: solid;
    border-color: #16a34a;
    background-color: #f0fdf4;
    flex-flow: row nowrap;
    justify-content: flex-start;
    gap: 0.7rem;
    padding: 0.7rem 0.9rem;
    min-height: auto;
}
.ms-dropzone--filled:hover {
    border-color: #16a34a;
    background-color: #dcfce7;
}

.ms-dropzone__icon {
    width: 2.8rem; height: 2.8rem;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 0.2rem 0.6rem rgba(37, 99, 235, 0.15);
    display: flex; align-items: center; justify-content: center;
    color: #2563eb;
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
}
.ms-dropzone__title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a3c6e;
}
.ms-dropzone__hint {
    margin: 0.2rem 0 0;
    font-size: 0.75rem;
    color: #64748b;
}

/* Estado con archivo */
.ms-dropzone__file-icon {
    font-size: 2rem;
    color: #16a34a;
    flex-shrink: 0;
}
.ms-dropzone__file-info { flex: 1; text-align: left; min-width: 0; }
.ms-dropzone__file-name {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: #1a3c6e;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ms-dropzone__file-hint {
    margin: 0.1rem 0 0;
    font-size: 0.72rem;
    color: #64748b;
}
.ms-dropzone__check {
    color: #16a34a;
    font-size: 1.5rem;
    flex-shrink: 0;
}


/* =============================================================================
   EXPEDIENTE NOTIFICACIONES · HistoryComponent.vue
   Componente:  resources/js/components/expediente/notificaciones/HistoryComponent.vue
   Apartado:    Historial de notificaciones del médico
   Prefijo:     .ms-inbox*
   ============================================================================= */
.ms-inbox {
    background: #f8fafc;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    width: 100%;
    align-self: stretch;
    height: 93vh;
    box-sizing: border-box;
}
.ms-inbox *, .ms-inbox *::before, .ms-inbox *::after { box-sizing: border-box; }

/* ─── Header ─────────────────────────────────────────── */
.ms-inbox__header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #e2e8ef;
}
.ms-inbox__title {
    margin: 0;
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 1.15rem; font-weight: 700; color: #1a3c6e;
}
.ms-inbox__title .material-symbols-outlined { font-size: 1.35rem; color: #2563eb; }
.ms-inbox__subtitle { margin: 0.15rem 0 0; font-size: 0.78rem; color: #64748b; }

.ms-inbox__search {
    position: relative;
    display: flex; align-items: center;
    flex: 1; max-width: 26rem; min-width: 16rem;
    background: #fff;
    border: 1px solid #e2e8ef;
    border-radius: 0.5rem;
    padding: 0.35rem 0.65rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ms-inbox__search:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.ms-inbox__search .material-symbols-outlined { color: #94a3b8; font-size: 1.1rem; }
.ms-inbox__search input {
    flex: 1; border: none; outline: none; background: transparent;
    font-size: 0.85rem; color: #1a3c6e; padding: 0.3rem 0.5rem;
}
.ms-inbox__search-clear {
    border: none; background: transparent; cursor: pointer;
    color: #94a3b8; padding: 0.1rem;
    display: inline-flex; align-items: center;
}
.ms-inbox__search-clear:hover { color: #1a3c6e; }

/* ─── Filtros ─────────────────────────────────────── */
.ms-inbox__filters {
    display: flex; gap: 0.4rem; flex-wrap: wrap;
}
.ms-inbox__filter {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid #e2e8ef;
    background: #fff;
    border-radius: 0.45rem;
    color: #64748b; font-size: 0.78rem; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: all 0.15s ease;
}
.ms-inbox__filter:hover { color: #1a3c6e; border-color: #cbd5e1; }
.ms-inbox__filter.is-active {
    background: #eff6ff; border-color: #93c5fd; color: #1d4ed8;
}
.ms-inbox__filter .material-symbols-outlined { font-size: 1rem; }
.ms-inbox__filter-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.3rem; padding: 0.05rem 0.4rem;
    background: #e2e8ef; color: #475569;
    border-radius: 1rem; font-size: 0.65rem; font-weight: 700;
}
.ms-inbox__filter.is-active .ms-inbox__filter-count { background: #2563eb; color: #fff; }
.ms-inbox__filter-count--warn { background: #fef3c7; color: #92400e; }
.ms-inbox__filter.is-active .ms-inbox__filter-count--warn { background: #f59e0b; color: #fff; }

/* ─── Body 2 paneles ─────────────────────────────── */
.ms-inbox__body {
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: 0.85rem;
    flex: 1; min-height: 0;
}

/* ─── Lista ──────────────────────────────────────── */
.ms-inbox__list {
    background: #fff;
    border: 1px solid #e2e8ef;
    border-radius: 0.55rem;
    overflow-y: auto;
    min-height: 0;
}
.ms-inbox__list-inner { padding: 0.35rem; display: flex; flex-direction: column; gap: 0.2rem; }

.ms-inbox__item {
    position: relative;
    display: flex; gap: 0.55rem;
    padding: 0.65rem 0.7rem;
    border-radius: 0.45rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}
.ms-inbox__item:hover { background: #f8fafc; border-color: #e2e8ef; }
.ms-inbox__item.is-unseen { background: linear-gradient(135deg, #fffbeb 0%, #fff 60%); }
.ms-inbox__item.is-active {
    background: #eff6ff;
    border-color: #93c5fd;
}
.ms-inbox__item-icon {
    width: 2.2rem; height: 2.2rem;
    background: #eff6ff; color: #2563eb;
    border-radius: 0.4rem;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ms-inbox__item.is-unseen .ms-inbox__item-icon { background: #fef3c7; color: #b45309; }
.ms-inbox__item-icon .material-symbols-outlined { font-size: 1.2rem; }

.ms-inbox__item-body { flex: 1; min-width: 0; }
.ms-inbox__item-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 0.4rem; margin-bottom: 0.15rem;
}
.ms-inbox__item-title {
    font-size: 0.85rem; color: #1a3c6e; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1; min-width: 0;
}
.ms-inbox__item.is-unseen .ms-inbox__item-title { font-weight: 800; }
.ms-inbox__item-date {
    font-size: 0.68rem; color: #94a3b8; white-space: nowrap;
}
.ms-inbox__item-snippet {
    margin: 0;
    font-size: 0.74rem; color: #64748b; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.ms-inbox__item-dot {
    position: absolute; top: 0.7rem; right: 0.7rem;
    width: 0.5rem; height: 0.5rem; border-radius: 50%;
    background: #f59e0b;
}

.ms-inbox__empty { background: #fff; border: none; }

/* ─── Detalle ────────────────────────────────────── */
.ms-inbox__detail {
    background: #fff;
    border: 1px solid #e2e8ef;
    border-radius: 0.55rem;
    overflow-y: auto;
    min-height: 0;
    padding: 1rem 1.25rem;
}

.ms-inbox__back {
    display: none;
    align-items: center; gap: 0.3rem;
    margin-bottom: 0.7rem;
    background: transparent; border: none; padding: 0;
    color: #2563eb; font-size: 0.82rem; font-weight: 600;
    cursor: pointer;
}
.ms-inbox__back .material-symbols-outlined { font-size: 1.1rem; }

.ms-inbox__detail-head {
    padding-bottom: 0.85rem;
    border-bottom: 1px solid #eef2f7;
    margin-bottom: 0.85rem;
}
.ms-inbox__detail-title {
    margin: 0 0 0.5rem;
    font-size: 1.15rem; font-weight: 700; color: #1a3c6e; line-height: 1.3;
}
.ms-inbox__detail-meta {
    display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;
}
.ms-inbox__chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.25rem 0.65rem;
    border-radius: 1rem;
    font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.03rem;
}
.ms-inbox__chip .material-symbols-outlined { font-size: 0.85rem; }
.ms-inbox__chip--ok { background: #dcfce7; color: #166534; }
.ms-inbox__chip--warn { background: #fef3c7; color: #92400e; }
.ms-inbox__detail-date {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.72rem; color: #94a3b8;
}
.ms-inbox__detail-date .material-symbols-outlined { font-size: 0.9rem; }

.ms-inbox__detail-body p {
    margin: 0 0 0.8rem;
    font-size: 0.92rem; color: #334155; line-height: 1.6;
}
.ms-inbox__detail-body p:last-child { margin-bottom: 0; }

.ms-inbox__detail-empty {
    height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; color: #94a3b8; padding: 2rem;
}
.ms-inbox__detail-empty .material-symbols-outlined {
    font-size: 3rem; color: #cbd5e1; margin-bottom: 0.6rem;
}
.ms-inbox__detail-empty h5 {
    margin: 0 0 0.3rem;
    font-size: 1rem; font-weight: 700; color: #475569;
}
.ms-inbox__detail-empty p { margin: 0; font-size: 0.85rem; }

/* ─── Responsive ─────────────────────────────────── */
@media (max-width: 900px) {
    .ms-inbox__body {
        grid-template-columns: 1fr;
    }
    .ms-inbox__back { display: inline-flex; }
    .ms-inbox.is-detail-open .ms-inbox__list { display: none; }
}


/* =============================================================================
   DIRECTORIO · ListComponent.vue (transiciones)
   Componente:  resources/js/components/directorio/ListComponent.vue
   Apartado:    Transiciones del listado del directorio
   Prefijo:     .fade-enter-active, .fade-leave-active
   ============================================================================= */
.fade-enter-active, .fade-leave-active { transition: opacity 0.5s; }
.fade-enter, .fade-leave-to { opacity: 0; }

/* ─── Chips de sesión ─────────────────────────────── */
.sigme-hist-chip--online {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: #166534;
    border-color: rgba(22, 101, 52, 0.3);
}
.sigme-hist-chip--online .material-symbols-outlined {
    font-size: 0.7rem;
    font-variation-settings: 'FILL' 1;
}
.sigme-hist-chip--offline {
    background: #f1f5f9;
    color: #5a7a9a;
    border-color: rgba(46, 92, 158, 0.18);
}
.sigme-hist-chip--session {
    background: rgba(46, 92, 158, 0.08);
    color: #1a3c6e;
    border-color: rgba(46, 92, 158, 0.22);
}
/* Pantalla actual del médico (soporte): violeta para distinguirla del estado/sesión */
.sigme-hist-chip--screen {
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    color: #5b21b6;
    border-color: rgba(91, 33, 182, 0.28);
}
.sigme-hist-chip--screen .material-symbols-outlined {
    font-size: 0.85rem;
}
/* Badge de presencia en vivo dentro del expediente del médico (perfil) */
.presencia-badge {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
    align-items: center;
    margin-top: 0.55rem;
}
.presencia-badge__hint {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.8);
    width: 100%;
    text-align: center;
}
/* El badge vive sobre el header navy del expediente (.dir-exp-profile): el chip
   de sesión trae texto navy sobre fondo casi transparente y se perdía. Aquí se
   le da fondo claro semitransparente + texto blanco para que contraste. */
.presencia-badge .sigme-hist-chip--session {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.35);
}
/* Directorio (tarjeta blanca): el chip de sesión venía con fondo casi
   transparente (alpha 0.08) y se veía lavado. Fondo azul claro sólido + borde
   definido para que contraste igual de claro que en el expediente. */
.sigme-directory-list .sigme-hist-chip--session {
    background: #e8eef7;
    color: #1a3c6e;
    border-color: rgba(46, 92, 158, 0.35);
}
.sigme-directory-list .sigme-hist-chip--offline {
    background: #eef2f7;
    color: #475a70;
    border-color: rgba(46, 92, 158, 0.25);
}
/* Banda de avisos de vencimiento en el expediente (HistorySpecialtiesComponent) */
.hs-avisos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.75rem;
    margin: 0.6rem 0;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
}
.hs-avisos__label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1a3c6e;
    margin-right: 0.25rem;
}
.hs-avisos__label .material-symbols-outlined { font-size: 1.05rem; }


/* =============================================================================
   GESTIÓN ESF · AsignacionComponent.vue
   Componente:  resources/js/components/gestion_esf/asignar_medicos/AsignacionComponent.vue
   Apartado:    Card de asignación de revisor (ESF)
   Prefijo:     (sin prefijo único — scoped a la card)
   ============================================================================= */
	.popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.9);
	display: flex;
	justify-content: center;
	align-items: center;
	}

	.popup-content {
	background: rgb(226, 226, 226);
	padding: 20px;
	border-radius: 8px;
	position: relative;
	}

	.close-button {
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	font-size: 20px;
	color: #ff0000;
	}

	.input-container select {
	width: 100%;
	padding: 8px;
	font-size: 16px;
	}


/* =============================================================================
   GESTIÓN ESF · SelectComponent.vue
   Componente:  resources/js/components/gestion_esf/asignar_medicos/SelectComponent.vue
   Apartado:    Selector de médicos para asignar
   Prefijo:     (sin prefijo único — scoped a la card)
   ============================================================================= */
	.popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.9);
	display: flex;
	justify-content: center;
	align-items: center;
	}

	.popup-content {
	background: rgb(226, 226, 226);
	padding: 20px;
	border-radius: 8px;
	position: relative;
	}

	.close-button {
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	font-size: 20px;
	color: #ff0000;
	}

	.input-container select {
	width: 100%;
	padding: 8px;
	font-size: 16px;
	}


/* =============================================================================
   REVISOR ESF · DetalleComponent.vue
   Componente:  resources/js/components/revisor_esf/DetalleComponent.vue
   Apartado:    Header sticky del detalle de revisor ESF
   Prefijo:     .sticky-header
   ============================================================================= */
.sticky-header {
    background-color: #f8f9fa; /* Color de fondo */
    padding: 10px; /* Espaciado interno */
    border-bottom: 1px solid #dee2e6; /* Borde inferior */
    position: -webkit-sticky; /* Soporte para Safari */
    position: sticky;
    top: 0; /* Fijar a la parte superior */
    z-index: 1000; /* Asegurar que esté por encima de otros elementos */
}
.table-container {
    overflow-y: auto; /* Permitir desplazamiento vertical */
    max-height: 720px;
}

th.sticky-header {
    background-color: #f8f9fa; /* Color de fondo */
    top: 0; /* Fijar a la parte superior */
    z-index: 100; /* Asegurar que esté por encima de otros elementos */
    position: sticky;
}


/* =============================================================================
   GLOBAL · AlertComponent.vue
   Componente:  resources/js/components/global/AlertComponent.vue
   Apartado:    Alert genérico (top de la página)
   Prefijo:     .alert*
   ============================================================================= */
  @keyframes zoomFadeIn {
    0% {
        opacity: 0;
        transform: translateY(5rem);
    }
    100% {
        opacity: 1;
        transform: translateY(0rem);
    }
}

.alert {
    animation-name: zoomFadeIn;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
    transition: all 0.3s ease-out;
}

@keyframes slideFadeOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(50px);
    }
}

.fade-leave-active {
    animation-name: slideFadeOut;
    animation-duration: 0.3s;
    animation-fill-mode: both;
}



/* =============================================================================
   GLOBAL · LoaderComponent.vue
   Componente:  resources/js/components/global/LoaderComponent.vue
   Apartado:    Loader spinner global
   Prefijo:     .text-center, .loader*
   ============================================================================= */
@keyframes zoomFadeIn {
    0% {
        opacity: 0;
        transform: translateY(5rem);
    }
    100% {
        opacity: 1;
        transform: translateY(0rem);
    }
}
.text-center{
  display: flex !important;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
}
.text-center label{
  font-size: 1.2rem !important;
}
.lds-roller{
  margin: 0 0 3rem 0;
}
.modal.fade .modal-dialog {
    animation-name: zoomFadeIn;
    animation-duration: 0.4s;
    animation-timing-function: ease-out;
}


/* =============================================================================
   INICIO AVISOS · ListComponent.vue
   Componente:  resources/js/components/inicio/avisos/ListComponent.vue
   Apartado:    Cards de avisos del dashboard
   Prefijo:     .dd-card*
   ============================================================================= */
.dd-card {
    background: #fff; border: 1px solid #e2e8ef; border-radius: 0.7rem;
    padding: 0.9rem 1rem;
}
.dd-card__title {
    display: flex; align-items: center; gap: 0.4rem;
    margin: 0 0 0.6rem; font-size: 0.85rem; font-weight: 700; color: #1a3c6e;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.dd-card__title .material-symbols-outlined { font-size: 1.15rem; }
.dd-card__count {
    margin-left: auto; background: #1a3c6e; color: #fff;
    padding: 0.1rem 0.5rem; border-radius: 999px;
    font-size: 0.7rem; font-weight: 700;
}

.dd-avisos { display: flex; flex-direction: column; max-height: 22rem; overflow-y: auto; }
.dd-aviso {
    display: flex; gap: 0.55rem; align-items: flex-start;
    padding: 0.55rem 0.3rem; border-bottom: 1px solid #eef0f4;
}
.dd-aviso:last-child { border-bottom: none; }
.dd-aviso__icon { color: #f59e0b; font-size: 1.35rem; flex-shrink: 0; }
.dd-aviso__body { flex: 1; min-width: 0; }
.dd-aviso__title { margin: 0; font-size: 0.82rem; font-weight: 700; color: #1a3c6e; }
.dd-aviso__msg   { margin: 0.2rem 0 0; font-size: 0.76rem; color: #475569; line-height: 1.4; }
.dd-aviso__date  { margin: 0.25rem 0 0; font-size: 0.68rem; color: #94a3b8; font-style: italic; }

.dd-avisos__empty {
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
    padding: 1rem 0.6rem; color: #94a3b8; text-align: center;
}
.dd-avisos__empty .material-symbols-outlined { font-size: 2rem; }
.dd-avisos__empty p { margin: 0; font-size: 0.8rem; }


/* =============================================================================
   INICIO DOCTOR · FatherComponent.vue
   Componente:  resources/js/components/inicio/doctor/FatherComponent.vue
   Apartado:    Shell del dashboard del médico
   Prefijo:     .dd-shell*
   ============================================================================= */
/* ─── SHELL ─────────────────────────────────────────────────────────── */
.dd-shell {
    width: 100%;
    max-height: 93vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem 1.2rem 2rem;
    box-sizing: border-box;
    background: #f7f9fc;
}
.dd-shell *, .dd-shell *::before, .dd-shell *::after { box-sizing: border-box; }

/* ─── HERO ──────────────────────────────────────────────────────────── */
.dd-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: center;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    border-radius: 0.8rem;
    padding: 1rem 1.4rem;
    margin-bottom: 0.9rem;
    box-shadow: 0 0.4rem 1rem rgba(26,60,110,0.18);
}
.dd-hero__greet { display: flex; align-items: center; gap: 0.9rem; }
.dd-hero__icon {
    font-size: 2.2rem; background: rgba(255,255,255,0.16);
    border-radius: 50%; padding: 0.5rem;
}
.dd-hero__title { margin: 0; font-size: 1.3rem; font-weight: 700; }
.dd-hero__sub { margin: 0.25rem 0 0 0; }
.dd-hero__chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.2rem 0.6rem; border-radius: 999px;
    font-size: 0.75rem; font-weight: 600;
}
.dd-hero__chip .material-symbols-outlined { font-size: 1rem; }
.dd-hero__chip--ok   { background: #dcfce7; color: #166534; }
.dd-hero__chip--warn { background: #fef3c7; color: #92400e; }

.dd-hero__cta {
    display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem;
    min-width: 14rem;
}
.dd-hero__cta-label { margin: 0; font-size: 0.7rem; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.04em; }
.dd-hero__cta-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: #fff; color: #1a3c6e; font-weight: 600;
    padding: 0.55rem 0.9rem; border-radius: 0.5rem;
    text-decoration: none; font-size: 0.85rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dd-hero__cta-btn:hover { transform: translateY(-1px); box-shadow: 0 0.3rem 0.8rem rgba(0,0,0,0.18); color: #1a3c6e; text-decoration: none; }
.dd-hero__cta--ok {
    flex-direction: row; align-items: center;
    background: rgba(255,255,255,0.14); padding: 0.55rem 0.9rem; border-radius: 0.5rem;
}
.dd-hero__cta--ok .material-symbols-outlined { font-size: 1.4rem; color: #86efac; }
.dd-hero__cta--ok p { margin: 0; font-size: 0.85rem; font-weight: 600; }

/* ─── KPIs ──────────────────────────────────────────────────────────── */
.dd-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.7rem;
    margin-bottom: 1rem;
}
.dd-kpi {
    display: flex; align-items: center; gap: 0.8rem;
    background: #fff; border: 1px solid #e2e8ef; border-radius: 0.7rem;
    padding: 0.8rem 1rem;
}
.dd-kpi__icon {
    width: 2.6rem; height: 2.6rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dd-kpi__icon .material-symbols-outlined { font-size: 1.5rem; }
.dd-kpi__icon--ok   { background: #dcfce7; color: #166534; }
.dd-kpi__icon--info { background: #dbeafe; color: #1d4ed8; }
.dd-kpi__icon--warn { background: #fef3c7; color: #92400e; }
.dd-kpi__label { margin: 0; font-size: 0.72rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; }
.dd-kpi__value { margin: 0.15rem 0 0; font-size: 1.05rem; font-weight: 700; color: #1a3c6e; }
.dd-kpi__hint  { margin: 0.15rem 0 0; font-size: 0.7rem; color: #64748b; }

.dd-kpi__ring {
    width: 3.4rem; height: 3.4rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    position: relative;
}
.dd-kpi__ring::after {
    content: ''; position: absolute; inset: 0.32rem; background: #fff; border-radius: 50%;
}
.dd-kpi__ring-pct {
    position: relative; z-index: 1; font-weight: 700; font-size: 0.78rem; color: #1a3c6e;
}

/* ─── BODY 2 COLUMNAS ───────────────────────────────────────────────── */
.dd-body {
    display: grid; grid-template-columns: 1.55fr 1fr; gap: 1rem;
    align-items: start;
}
.dd-body__left, .dd-body__right { display: flex; flex-direction: column; gap: 0.9rem; }

.dd-section-title {
    display: flex; align-items: center; gap: 0.4rem;
    margin: 0 0 0.4rem; font-size: 0.95rem; font-weight: 700; color: #1a3c6e;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.dd-section-title .material-symbols-outlined { font-size: 1.2rem; }

/* ─── CARDS ─────────────────────────────────────────────────────────── */
.dd-card {
    background: #fff; border: 1px solid #e2e8ef; border-radius: 0.7rem;
    padding: 0.9rem 1rem;
}
.dd-card--ok {
    background: #eafaf1; border-color: #a9dfbf; color: #1e7e34;
    display: flex; align-items: center; gap: 0.6rem;
}
.dd-card--ok .material-symbols-outlined { font-size: 1.6rem; color: #27ae60; }
.dd-card--ok p { margin: 0; font-size: 0.85rem; font-weight: 500; }

/* Pendientes del expediente: tarjeta RESALTADA (acciones por atender) para que
   destaque del resto de la columna derecha. */
.dd-card--pend {
    border-color: #fcd34d;
    border-left: 4px solid #f59e0b;
    background: linear-gradient(180deg, #fffdf5 0%, #ffffff 55%);
    box-shadow: 0 0.3rem 0.8rem rgba(245, 158, 11, 0.14);
}
.dd-card--pend .dd-card__title { color: #92400e; }
.dd-card--pend .dd-card__title .material-symbols-outlined { color: #d97706; }
.dd-card--pend .dd-card__count { background: #f59e0b; }

/* Aviso de correos por verificar (dashboard del médico) */
.dd-verify {
    display: flex; align-items: flex-start; gap: 0.75rem;
    background: #fffbeb; border: 1px solid #fde68a; border-left: 4px solid #f59e0b;
    border-radius: 0.7rem; padding: 0.9rem 1rem;
    margin-bottom: 1rem;
}
.dd-verify__icon { font-size: 1.7rem; color: #d97706; flex-shrink: 0; }
.dd-verify__body { flex: 1; min-width: 0; }
.dd-verify__title { margin: 0 0 0.15rem; font-size: 0.95rem; font-weight: 700; color: #92400e; }
.dd-verify__text { margin: 0 0 0.6rem; font-size: 0.82rem; color: #78350f; }
.dd-verify__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.dd-verify__item {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
    background: #fff; border: 1px solid #fde68a; border-radius: 0.5rem; padding: 0.4rem 0.6rem;
}
.dd-verify__chip {
    font-size: 0.72rem; font-weight: 700; color: #92400e;
    background: #fef3c7; border-radius: 0.3rem; padding: 0.1rem 0.45rem; flex-shrink: 0;
}
.dd-verify__mail { font-size: 0.83rem; color: #1a3c6e; font-weight: 600; flex: 1; min-width: 0; word-break: break-all; }
.dd-verify__motivo { flex-basis: 100%; font-size: 0.76rem; color: #78716c; line-height: 1.4; }
.dd-verify__rol {
    display: inline-block; font-weight: 700; color: #fff; background: #1a3c6e;
    padding: 0.02rem 0.4rem; border-radius: 0.3rem; font-size: 0.76rem;
    letter-spacing: 0.01em; vertical-align: baseline;
}
.dd-verify__btn {
    display: inline-flex; align-items: center; gap: 0.3rem; margin-left: auto;
    background: #f59e0b; color: #fff; border: none; border-radius: 0.4rem;
    padding: 0.35rem 0.7rem; font-size: 0.78rem; font-weight: 600; cursor: pointer;
    transition: background 0.15s ease;
}
.dd-verify__btn:hover { background: #d97706; }
.dd-verify__btn .material-symbols-outlined { font-size: 1rem; }
.dd-verify__note {
    display: flex; align-items: flex-start; gap: 0.35rem;
    margin: 0.6rem 0 0; font-size: 0.78rem; color: #78350f; line-height: 1.4;
}
.dd-verify__note .material-symbols-outlined { font-size: 1rem; color: #d97706; flex-shrink: 0; margin-top: 0.05rem; }
.dd-card__title {
    display: flex; align-items: center; gap: 0.4rem;
    margin: 0 0 0.6rem; font-size: 0.85rem; font-weight: 700; color: #1a3c6e;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.dd-card__title .material-symbols-outlined { font-size: 1.15rem; }

/* Pendientes del expediente */
.dd-pendientes { display: flex; flex-direction: column; }
.dd-pend-item {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.55rem 0.4rem; border-bottom: 1px solid #eef0f4;
    color: inherit; text-decoration: none; transition: background 0.15s ease;
}
.dd-pend-item:last-child { border-bottom: none; }
.dd-pend-item:hover { background: #f8fafc; color: inherit; text-decoration: none; }
.dd-pend-item__icon { color: #8a96a8; font-size: 1.3rem; flex-shrink: 0; }
.dd-pend-item__body { flex: 1; min-width: 0; }
.dd-pend-item__cat { margin: 0; font-size: 0.75rem; font-weight: 700; color: #1a3c6e; }
.dd-pend-item__msg { margin: 0.1rem 0 0; font-size: 0.72rem; color: #555; line-height: 1.35; }
.dd-pend-item__arrow { color: #1a3c6e; font-size: 1.1rem; flex-shrink: 0; opacity: 0.7; }

/* Próximas fechas */
.dd-fechas { list-style: none; margin: 0; padding: 0; }
.dd-fechas__item {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.45rem 0; border-bottom: 1px dashed #eef0f4;
}
.dd-fechas__item:last-child { border-bottom: none; }
.dd-fechas__item .material-symbols-outlined { font-size: 1.4rem; flex-shrink: 0; }
.dd-fechas__label { margin: 0; font-size: 0.78rem; font-weight: 600; color: #1a3c6e; }
.dd-fechas__date  { margin: 0.1rem 0 0; font-size: 0.7rem; color: #64748b; }

/* ─── RESPONSIVE ────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .dd-kpis { grid-template-columns: repeat(2, 1fr); }
    .dd-body { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .dd-hero { grid-template-columns: 1fr; }
    .dd-hero__cta { align-items: flex-start; }
    .dd-kpis { grid-template-columns: 1fr; }
}


/* =============================================================================
   INICIO DOCTOR · PerfilComponent.vue
   Componente:  resources/js/components/inicio/doctor/PerfilComponent.vue
   Apartado:    Card de perfil del médico en su dashboard
   Prefijo:     .dp-card-body*, .dp-*
   ============================================================================= */
.dp-card-body p { margin: 0 0 0.4rem; font-size: 0.85rem; color: #1a3c6e; }
.dp-card-body p:last-child { margin-bottom: 0; }

.dp-domicilio { margin-top: 0.8rem; }
.dp-domicilio__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid #eef2f7;
}
.dp-domicilio__title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a3c6e;
}
.dp-domicilio__title .material-symbols-outlined { font-size: 1.2rem; color: #2563eb; }

.dp-editbtn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.4rem 0.8rem;
    border-radius: 0.4rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.dp-editbtn:hover { background: #dbeafe; border-color: #93c5fd; }
.dp-editbtn .material-symbols-outlined { font-size: 1rem; }

.dp-empty {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.6rem 0.75rem;
    background: #f8fafc; border-radius: 0.4rem;
    color: #64748b; font-size: 0.8rem;
}
.dp-empty .material-symbols-outlined { color: #94a3b8; font-size: 1.1rem; }

.dp-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.7rem; border-radius: 1rem;
    font-size: 0.78rem; font-weight: 700;
    margin: 0 0 0.6rem;
}
.dp-chip .material-symbols-outlined { font-size: 1rem; }
.dp-chip--ok { background: #dcfce7; color: #166534; }
.dp-chip--info { background: #dbeafe; color: #1d4ed8; }

.dp-info-list {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.55rem;
}
.dp-info-list li {
    display: flex; flex-direction: column; gap: 0.1rem;
    padding: 0.55rem 0.7rem;
    background: #f8fafc; border-radius: 0.4rem;
    min-width: 0;
}
.dp-info-list small {
    font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04rem;
    color: #94a3b8; font-weight: 600;
}
.dp-info-list b {
    font-size: 0.82rem; color: #1a3c6e;
    overflow-wrap: anywhere; line-height: 1.3;
}

.dp-hint { font-size: 0.78rem; color: #64748b; margin: 0; }

/* Form de edición */
.dp-form-label {
    margin: 0 0 0.4rem;
    font-size: 0.78rem; font-weight: 700; color: #475569;
}
.dp-toggle {
    display: inline-flex;
    background: #f1f5f9;
    border-radius: 0.5rem;
    padding: 0.2rem;
    gap: 0.2rem;
    margin-bottom: 0.85rem;
    flex-wrap: wrap;
}
.dp-toggle__btn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.45rem 0.85rem;
    border: none; background: transparent;
    color: #64748b; font-size: 0.78rem; font-weight: 600;
    border-radius: 0.4rem; cursor: pointer;
    transition: all 0.15s ease;
}
.dp-toggle__btn .material-symbols-outlined { font-size: 1rem; }
.dp-toggle__btn:hover { color: #1a3c6e; }
.dp-toggle__btn.is-active {
    background: #fff; color: #1d4ed8;
    box-shadow: 0 0.1rem 0.3rem rgba(15,23,42,0.08);
}

.dp-banner {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.45rem;
    font-size: 0.78rem;
    margin-bottom: 0.7rem;
}
.dp-banner--info {
    background: #eff6ff; border-left: 3px solid #2563eb; color: #1e3a8a;
}
.dp-banner .material-symbols-outlined { font-size: 1.05rem; color: #2563eb; flex-shrink: 0; }

.dp-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem 0.9rem;
    margin-bottom: 0.85rem;
}
.dp-field { display: flex; flex-direction: column; min-width: 0; }
.dp-field--full { grid-column: 1 / -1; }
.dp-field label {
    font-size: 0.72rem; font-weight: 600; color: #475569;
    margin-bottom: 0.3rem;
}
.dp-req::before { content: '* '; color: #dc2626; font-weight: 700; }
.dp-field input,
.dp-field select,
.dp-field textarea {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid #cbd5e1; border-radius: 0.4rem;
    background: #fff;
    font-size: 0.85rem; color: #1a3c6e;
    font-family: inherit;
    resize: vertical;
}
.dp-field input:focus,
.dp-field select:focus,
.dp-field textarea:focus {
    outline: none; border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

.dp-form-actions {
    display: flex; justify-content: flex-end; gap: 0.4rem;
    flex-wrap: wrap;
}
.dp-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.5rem 1rem; border-radius: 0.45rem;
    font-size: 0.82rem; font-weight: 600; cursor: pointer;
    border: 1px solid transparent; transition: all 0.15s ease;
}
.dp-btn .material-symbols-outlined { font-size: 1rem; }
.dp-btn--ghost {
    background: #fff; color: #64748b; border-color: #cbd5e1;
}
.dp-btn--ghost:hover { background: #f1f5f9; }
.dp-btn--primary { background: #16a34a; color: #fff; }
.dp-btn--primary:hover { background: #15803d; }
.dp-btn--primary:disabled {
    opacity: 0.55; cursor: not-allowed; pointer-events: none;
}

@media (max-width: 640px) {
    .dp-fields { grid-template-columns: 1fr; }
    .dp-form-actions { justify-content: stretch; }
    .dp-btn { flex: 1; justify-content: center; }
}


/* =============================================================================
   INICIO DOCTOR · EspecialidadesComponent.vue
   Componente:  resources/js/components/inicio/doctor/EspecialidadesComponent.vue
   Apartado:    Lista de especialidades del médico en su dashboard
   Prefijo:     .esp-list*, .esp-*
   ============================================================================= */
.esp-list { display: flex; flex-direction: column; gap: 0.85rem; }

.esp-empty {
    background: #fff; border: 1px dashed #cbd5e1; border-radius: 0.7rem;
    padding: 2rem 1rem; text-align: center; color: #64748b;
}
.esp-empty .material-symbols-outlined { font-size: 2.6rem; color: #94a3b8; }
.esp-empty p { margin: 0.4rem 0 0; font-size: 0.85rem; }

/* ─── CARD ─────────────────────────────────────── */
.esp-card {
    position: relative;
    background: #fff;
    border: 1px solid #e2e8ef;
    border-radius: 0.7rem;
    padding: 0.95rem 1.1rem 0.95rem 1.25rem;
    box-shadow: 0 0.1rem 0.3rem rgba(15, 23, 42, 0.04);
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.esp-card:hover {
    box-shadow: 0 0.4rem 1rem rgba(15, 23, 42, 0.06);
    border-color: #cbd5e1;
}
/* Tira de acento a la izquierda — color según situación.
   Mantiene el código de color del chip pero a nivel de tarjeta para
   barrer rápido la lista y ver qué necesita atención. */
.esp-card::before {
    content: '';
    position: absolute; top: 0; left: 0; bottom: 0;
    width: 0.32rem;
    background: #cbd5e1;
    border-top-left-radius: 0.7rem; border-bottom-left-radius: 0.7rem;
}
.esp-card--ok::before   { background: linear-gradient(180deg, #22c55e, #16a34a); }
.esp-card--info::before { background: linear-gradient(180deg, #3b82f6, #1d4ed8); }
.esp-card--warn::before { background: linear-gradient(180deg, #f59e0b, #d97706); }
.esp-card--neutral::before { background: linear-gradient(180deg, #cbd5e1, #94a3b8); }

.esp-card__header {
    display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
    margin-bottom: 0.7rem;
}
.esp-card__title-wrap { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.esp-card__icon {
    width: 1.9rem; height: 1.9rem; border-radius: 0.5rem;
    background: #eff6ff; color: #1d4ed8;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.esp-card__icon .material-symbols-outlined { font-size: 1.15rem; }
.esp-card__title { margin: 0; font-size: 0.98rem; font-weight: 700; color: #1a3c6e; line-height: 1.2; }
.esp-card__chip {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.22rem 0.6rem; border-radius: 999px;
    font-size: 0.7rem; font-weight: 600; white-space: nowrap;
    border: 1px solid transparent;
}
.esp-card__chip .material-symbols-outlined { font-size: 0.95rem; }
.esp-card__chip--ok   { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.esp-card__chip--info { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.esp-card__chip--warn { background: #fef3c7; color: #92400e; border-color: #fde68a; }

.esp-card__body { display: flex; flex-direction: column; gap: 0.7rem; }

/* ─── STEPPER ──────────────────────────────────── */
.esp-stepper {
    display: flex; align-items: flex-start;
    padding: 0.6rem 0.4rem; margin: 0; overflow-x: auto;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid #eef2f7; border-radius: 0.55rem;
}
.esp-step {
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
    min-width: 4.3rem; padding: 0 0.15rem;
}
.esp-step__dot {
    width: 1.85rem; height: 1.85rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.74rem; font-weight: 700;
    border: 2px solid #e2e8ef; background: #fff; color: #94a3b8;
    transition: all 0.2s ease;
}
.esp-step__dot .material-symbols-outlined { font-size: 1rem; }
.esp-step__label { font-size: 0.66rem; color: #64748b; text-align: center; line-height: 1.15; }
.esp-step--done .esp-step__dot { background: #16a34a; border-color: #16a34a; color: #fff; }
.esp-step--done .esp-step__label { color: #166534; font-weight: 600; }
.esp-step--current .esp-step__dot {
    background: #2563eb; border-color: #2563eb; color: #fff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
    transform: scale(1.08);
}
.esp-step--current .esp-step__label { color: #1d4ed8; font-weight: 700; }
.esp-step__line {
    flex: 1; height: 2px; background: #e2e8ef; align-self: flex-start;
    margin-top: 0.93rem; min-width: 1rem;
    transition: background 0.2s ease;
}
.esp-step__line--done { background: #16a34a; }

/* Step de troncales: lo dejamos con un acento ámbar cuando NO está done/current
   para indicar visualmente que es una etapa condicional adicional. */
.esp-step--troncal.esp-step--pending .esp-step__dot {
    border-color: #fcd34d; color: #b45309; background: #fffbeb;
}
.esp-step--troncal.esp-step--pending .esp-step__label { color: #92400e; }

/* Nota debajo del stepper cuando el flujo CV omite Documentos+Revisión */
.esp-step-note {
    display: flex; align-items: center; gap: 0.35rem;
    margin: 0; font-size: 0.72rem; color: #166534;
    background: #f0fdf4; border: 1px dashed #bbf7d0; border-radius: 0.4rem;
    padding: 0.35rem 0.55rem;
}
.esp-step-note .material-symbols-outlined { font-size: 1rem; color: #16a34a; }

/* ─── META (chips planos) ──────────────────────── */
.esp-meta {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 0.35rem;
}
.esp-meta li {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: #f1f5f9; color: #475569;
    padding: 0.22rem 0.55rem; border-radius: 0.4rem;
    font-size: 0.72rem; font-weight: 500;
}
.esp-meta li span { color: #94a3b8; font-weight: 600; }
.esp-meta li b   { color: #1a3c6e; font-weight: 700; }

/* ─── SIGUIENTE ACCIÓN (banner unificado) ──────────
   Una sola jerarquía visual por card: icono + título + descripción
   + chip de acción al lado. Variante --wait (sin chip) para estados
   de espera (revisión, examen, elaboración). */
.esp-next {
    display: flex; align-items: center; gap: 0.7rem;
    background: linear-gradient(135deg, #eff6ff 0%, #f0f7ff 100%);
    border: 1px solid #bfdbfe; border-radius: 0.55rem;
    padding: 0.65rem 0.85rem;
    border-left: 3px solid #2563eb;
}
.esp-next__icon { color: #1d4ed8; font-size: 1.55rem; flex-shrink: 0; }
.esp-next__body { flex: 1; min-width: 0; }
.esp-next__title { margin: 0; font-size: 0.82rem; font-weight: 700; color: #1d4ed8; }
.esp-next__msg   { margin: 0.15rem 0 0; font-size: 0.74rem; color: #1e3a8a; line-height: 1.4; }

/* Chip de acción: pill azul con gradiente, similar a "Ver certificado".
   El énfasis del card vuelve al stepper + el chip, sin botones primarios sueltos. */
.esp-next__chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.4rem 0.75rem; border-radius: 999px;
    font-size: 0.74rem; font-weight: 700;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff; border: none;
    cursor: pointer; flex-shrink: 0; white-space: nowrap;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.esp-next__chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.3rem 0.7rem rgba(26, 60, 110, 0.35);
    color: #fff;
}
.esp-next__chip .material-symbols-outlined { font-size: 1rem; }

/* Variante de espera (sin chip): paleta gris/azul suave para que se lea como
   informativo y no compita visualmente con cards que sí requieren acción. */
.esp-next--wait {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-color: #e2e8ef; border-left-color: #94a3b8;
}
.esp-next--wait .esp-next__icon  { color: #475569; }
.esp-next--wait .esp-next__title { color: #1a3c6e; }
.esp-next--wait .esp-next__msg   { color: #475569; }

@media (max-width: 540px) {
    .esp-next { flex-wrap: wrap; }
    .esp-next__chip { margin-top: 0.3rem; }
}

/* ─── INFO BLOCKS ──────────────────────────────── */
.esp-info {
    display: flex; gap: 0.6rem; align-items: flex-start;
    background: #f8fafc; border: 1px solid #e2e8ef; border-radius: 0.55rem;
    padding: 0.65rem 0.8rem;
    border-left: 3px solid #94a3b8;
}
.esp-info--warn {
    background: #fff7ed; border-color: #fed7aa;
    border-left-color: #f59e0b;
}
.esp-info .material-symbols-outlined { font-size: 1.4rem; color: #475569; flex-shrink: 0; }
.esp-info--warn .material-symbols-outlined { color: #c2410c; }
.esp-info p, .esp-info__title { margin: 0; font-size: 0.78rem; color: #334155; line-height: 1.4; }
.esp-info__title { font-weight: 700; color: #1a3c6e; }
.esp-info__list { margin: 0.3rem 0 0; padding-left: 1rem; font-size: 0.76rem; color: #475569; }
.esp-info__list li { margin: 0.15rem 0; }
.esp-info__hint { margin-top: 0.4rem !important; font-size: 0.72rem !important; color: #64748b !important; }
.esp-info a { color: #1d4ed8; text-decoration: underline; }

/* Variante alert: catálogo de troncales no configurado. Necesita acción urgente
   del médico (notificar al Consejo). Más enérgica que --warn. */
.esp-info--alert {
    background: linear-gradient(135deg, #fee2e2 0%, #fef2f2 100%);
    border-left: 4px solid #c5221f;
    color: #7f1d1d;
    align-items: flex-start;
}
.esp-info--alert .material-symbols-outlined { color: #c5221f; font-size: 1.5rem !important; }
.esp-info--alert .esp-info__title { color: #7f1d1d; font-size: 0.85rem; }
.esp-info--alert .esp-info__text {
    margin: 0.25rem 0 0.4rem !important;
    color: #7f1d1d !important;
    font-size: 0.78rem;
}
.esp-info--alert .esp-info__action {
    background: rgba(255, 255, 255, 0.6);
    border: 1px dashed rgba(197, 34, 31, 0.4);
    border-radius: 0.35rem;
    padding: 0.35rem 0.5rem;
    color: #7f1d1d !important;
    margin: 0 !important;
    font-size: 0.76rem;
}

/* ─── ACTION ───────────────────────────────────── */
.esp-action { display: flex; flex-direction: column; gap: 0.5rem; }
.esp-action__msg { margin: 0; font-size: 0.78rem; color: #475569; line-height: 1.4; }
.esp-action__btn {
    display: inline-flex; align-items: center; gap: 0.45rem;
    align-self: flex-start;
    padding: 0.5rem 1rem; font-size: 0.78rem; font-weight: 600;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff; border: none; border-radius: 0.5rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.esp-action__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.3rem 0.6rem rgba(26, 60, 110, 0.25);
    color: #fff;
}
.esp-action__btn .material-symbols-outlined { font-size: 1.1rem; }

/* Nota cuando no es posible solicitar recertificación por CV (sin tolerancia o agotada) */
.esp-tol-note {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: 0.45rem;
    padding: 0.6rem 0.75rem;
    color: #78350f;
    font-size: 0.78rem;
    line-height: 1.4;
}
.esp-tol-note .material-symbols-outlined {
    color: #b45309;
    font-size: 1.15rem;
    flex-shrink: 0;
    margin-top: 0.05rem;
}
.esp-tol-note b {
    display: block;
    color: #78350f;
    margin-bottom: 0.15rem;
}

/* ─── ESPECIALIDAD SIN DATOS ACADÉMICOS ─────────────────────────
   Aparece cuando la especialidad fue creada vacía (SUDO/SOPORTE reasignó
   una solicitud a otra especialidad). El médico debe ir a "Mis especialidades"
   y capturar la información antes de continuar el proceso de certificación.
*/
.esp-empty-data {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-left: 4px solid #2563eb;
    border-radius: 0.5rem;
    padding: 0.7rem 0.85rem;
    margin: 0.6rem 0 0.75rem 0;
}
.esp-empty-data__icon {
    color: #1d4ed8;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.esp-empty-data__body { flex: 1; min-width: 0; }
.esp-empty-data__title {
    margin: 0 0 0.15rem 0;
    font-weight: 600;
    color: #1e3a8a;
    font-size: 0.82rem;
}
.esp-empty-data__msg {
    margin: 0;
    font-size: 0.76rem;
    color: #1e40af;
    line-height: 1.4;
}
.esp-empty-data__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 0.4rem;
    padding: 0.45rem 0.8rem;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease;
    white-space: nowrap;
}
.esp-empty-data__btn:hover { background: #1d4ed8; }
.esp-empty-data__btn .material-symbols-outlined { font-size: 1rem; }

/* ─── ÚLTIMA CERTIFICACIÓN ─────────────────────────
   Bloque tipo "credencial" — debe leerse como el asset principal del médico.
*/
.esp-cert {
    background: linear-gradient(135deg, #fffdf5 0%, #fffaeb 100%);
    border: 1px solid #fde68a;
    border-radius: 0.6rem;
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.7rem;
}
.esp-cert__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.55rem;
}
.esp-cert__label {
    font-size: 0.68rem; font-weight: 700; color: #92400e;
    text-transform: uppercase; letter-spacing: 0.06em;
}
.esp-cert__chip {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.55rem; border-radius: 999px;
    font-size: 0.68rem; font-weight: 700; white-space: nowrap;
    border: 1px solid transparent;
}
.esp-cert__chip .material-symbols-outlined { font-size: 0.9rem; }
.esp-cert__chip--ok      { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.esp-cert__chip--warn    { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.esp-cert__chip--danger  { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.esp-cert__chip--neutral { background: #f1f5f9; color: #475569; border-color: #e2e8ef; }

.esp-cert__body {
    display: flex; align-items: flex-start; gap: 0.75rem;
}
.esp-cert__badge {
    width: 2.6rem; height: 2.6rem; border-radius: 0.55rem;
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    color: #fff;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    box-shadow: 0 0.2rem 0.5rem rgba(217, 119, 6, 0.25);
}
.esp-cert__badge .material-symbols-outlined { font-size: 1.6rem; }

.esp-cert__info { flex: 1; min-width: 0; }
.esp-cert__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem 0.9rem;
    margin-bottom: 0.5rem;
}
.esp-cert__field { display: flex; flex-direction: column; min-width: 0; }
.esp-cert__field--wide { grid-column: span 2; }
.esp-cert__field-label {
    font-size: 0.62rem; font-weight: 600; color: #92400e;
    text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.05rem;
}
.esp-cert__field-value {
    font-size: 0.82rem; font-weight: 700; color: #1a3c6e;
    overflow: hidden; text-overflow: ellipsis;
}
.esp-cert__sep { color: #94a3b8; margin: 0 0.2rem; font-weight: 500; }

.esp-cert__signers {
    padding-top: 0.45rem; margin-top: 0.1rem;
    border-top: 1px dashed #fde68a;
    display: flex; flex-direction: column; gap: 0.15rem;
}
.esp-cert__signers p { margin: 0; font-size: 0.72rem; color: #475569; }
.esp-cert__signers span { color: #94a3b8; font-weight: 600; margin-right: 0.2rem; }
.esp-cert__signers b { color: #1a3c6e; }

/* Chip "Ver certificado" — destaca como acción aprovechando el contraste con el
   fondo crema de la credencial. Hover sube el chip con un lift sutil. */
.esp-cert__view {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.35rem 0.65rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 700;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff; border: none;
    cursor: pointer; flex-shrink: 0;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}
.esp-cert__view:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.3rem 0.7rem rgba(26, 60, 110, 0.35);
    color: #fff;
}
.esp-cert__view .material-symbols-outlined { font-size: 1rem; }

.esp-cert__note {
    display: flex; align-items: flex-start; gap: 0.45rem;
    background: rgba(255, 255, 255, 0.7);
    border-left: 3px solid #f59e0b;
    border-radius: 0.4rem; padding: 0.5rem 0.65rem;
    margin-top: 0.6rem;
}
.esp-cert__note .material-symbols-outlined { font-size: 1.1rem; color: #d97706; flex-shrink: 0; }
.esp-cert__note p { margin: 0; font-size: 0.74rem; color: #78350f; line-height: 1.35; }

.esp-cert__actions {
    margin-top: 0.6rem; padding-top: 0.6rem;
    border-top: 1px dashed #fde68a;
    display: flex; flex-direction: column; gap: 0.45rem;
}
.esp-cert__msg { margin: 0; font-size: 0.75rem; color: #78350f; line-height: 1.4; }

/* Aviso de "último intento no acreditado" — ahora incluye listado inline
   de convocatorias para que el médico elija. */
.esp-cert__retry {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #fcd5b4; border-left: 3px solid #ea580c;
    border-radius: 0.5rem; padding: 0.7rem 0.85rem;
    margin-top: 0.6rem;
    display: flex; flex-direction: column; gap: 0.65rem;
}
.esp-cert__retry-head {
    display: flex; align-items: flex-start; gap: 0.55rem;
}
.esp-cert__retry-head > .material-symbols-outlined {
    font-size: 1.4rem; color: #ea580c; flex-shrink: 0;
}
.esp-cert__retry-title {
    margin: 0; font-size: 0.82rem; font-weight: 700; color: #9a3412;
}
.esp-cert__retry-msg {
    margin: 0.15rem 0 0; font-size: 0.74rem; color: #78350f; line-height: 1.4;
}

/* ─── DIVIDER que introduce el "Proceso en curso" ─── */
.esp-section-divider {
    position: relative; text-align: center;
    margin: 0.6rem 0;
}
.esp-section-divider::before {
    content: ''; position: absolute; top: 50%; left: 0; right: 0;
    height: 1px; background: #e2e8ef; z-index: 0;
}
.esp-section-divider span {
    position: relative; z-index: 1; display: inline-block;
    background: #fff; padding: 0 0.7rem;
    font-size: 0.66rem; font-weight: 700; color: #64748b;
    text-transform: uppercase; letter-spacing: 0.08em;
}

@media (max-width: 720px) {
    .esp-cert__grid { grid-template-columns: 1fr 1fr; }
    .esp-cert__field--wide { grid-column: span 2; }
}
@media (max-width: 480px) {
    .esp-cert__grid { grid-template-columns: 1fr; }
    .esp-cert__field--wide { grid-column: span 1; }
}

/* ─── Listado inline de convocatorias (dentro de esp-cert__retry) ─── */
.rcx-loader {
    display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    padding: 0.7rem; color: #78350f; font-size: 0.78rem;
}
.rcx-loader .material-symbols-outlined { font-size: 1.2rem; animation: rcx-spin 1s linear infinite; }
@keyframes rcx-spin { to { transform: rotate(360deg); } }

.rcx-empty {
    display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
    padding: 0.8rem 0.6rem; color: #92400e; text-align: center;
    background: rgba(255, 247, 237, 0.6); border-radius: 0.45rem;
}
.rcx-empty .material-symbols-outlined { font-size: 1.8rem; color: #d97706; }
.rcx-empty p { margin: 0; font-size: 0.78rem; }
.rcx-empty__hint { font-size: 0.72rem !important; color: #78350f; margin-top: 0.2rem !important; opacity: 0.8; }

.rcx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.rcx-opt {
    background: #fff;
    border: 1px solid #fed7aa; border-radius: 0.5rem;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.rcx-opt:hover:not(.rcx-opt--disabled) {
    border-color: #ea580c; background: #fff7ed;
}
.rcx-opt--selected {
    border-color: #ea580c !important; background: #fff7ed !important;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.18);
}
.rcx-opt--disabled { opacity: 0.55; cursor: not-allowed; }
.rcx-opt__inner {
    display: flex; gap: 0.55rem; padding: 0.6rem 0.75rem;
    cursor: pointer; margin: 0;
}
.rcx-opt--disabled .rcx-opt__inner { cursor: not-allowed; }
.rcx-opt__inner input[type="radio"] { margin-top: 0.2rem; flex-shrink: 0; accent-color: #ea580c; }
.rcx-opt__body { flex: 1; min-width: 0; }
.rcx-opt__head {
    display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;
    margin-bottom: 0.2rem;
}
.rcx-opt__name { font-size: 0.82rem; font-weight: 700; color: #1a3c6e; }
.rcx-opt__chip {
    font-size: 0.62rem; font-weight: 700; padding: 0.12rem 0.4rem; border-radius: 999px;
    white-space: nowrap;
}
.rcx-opt__chip--ok   { background: #dcfce7; color: #166534; }
.rcx-opt__chip--full { background: #fee2e2; color: #991b1b; }
.rcx-opt__desc { margin: 0.15rem 0 0.3rem; font-size: 0.72rem; color: #475569; }
.rcx-opt__meta {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 0.25rem 0.7rem;
    font-size: 0.7rem; color: #64748b;
}
.rcx-opt__meta li { display: inline-flex; align-items: center; gap: 0.2rem; }
.rcx-opt__meta .material-symbols-outlined { font-size: 0.9rem; color: #94a3b8; }
.rcx-opt__meta b { color: #1a3c6e; font-weight: 600; }

.rcx-actions {
    display: flex; justify-content: flex-end;
    padding-top: 0.2rem;
}
.rcx-actions .esp-action__btn:disabled { opacity: 0.5; cursor: not-allowed; }


/* =============================================================================
   REVISIÓN HISTORIAL · CvComponent.vue
   Componente:  resources/js/components/revision_historial/CvComponent.vue
   Apartado:    Historial de revisiones por currículum
   Prefijo:     .csj-shell__content, .rh-*
   ============================================================================= */
.csj-shell__content.rhc-content {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 0.85rem 1rem;
    gap: 0.85rem;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.rhc-content::-webkit-scrollbar { width: 0.6rem; }
.rhc-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    border-radius: 999px;
}
.rhc-content::-webkit-scrollbar-track { background: #f1f5f9; }

/* ─── FILTER (heredamos ms-filter del estándar) ─── */
.ms-filter {
    display: flex; align-items: center; gap: 0.4rem;
    flex-wrap: wrap;
}
.ms-filter__input {
    display: flex; align-items: center; gap: 0.4rem;
    background: #f7fafd;
    border: 1px solid rgba(46, 92, 158, 0.25); border-radius: 0.45rem;
    padding: 0.4rem 0.75rem;
    min-width: 12rem; flex: 1; max-width: 16rem;
    transition: border-color 0.18s, box-shadow 0.18s, background-color 0.18s;
}
.ms-filter__input:focus-within {
    border-color: #2e5c9e; background: #fff;
    box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.15);
}
.ms-filter__input .material-symbols-outlined { font-size: 1.1rem; color: #2e5c9e; }
.ms-filter__input input {
    flex: 1; min-width: 0; border: none; outline: none; background: transparent;
    font-size: 0.85rem; color: #1a3c6e; font-family: inherit;
}
.ms-filter__input input::placeholder { color: #94a3b8; }

.ms-filter__select {
    background: #f7fafd;
    border: 1px solid rgba(46, 92, 158, 0.25);
    border-radius: 0.45rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.82rem; color: #1a3c6e;
    font-family: inherit; cursor: pointer; outline: none;
    min-width: 10rem; max-width: 14rem;
    transition: border-color 0.18s, box-shadow 0.18s, background-color 0.18s;
}
.ms-filter__select:focus {
    border-color: #2e5c9e; background: #fff;
    box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.15);
}

.ms-filter__btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.5rem 0.9rem; border-radius: 0.45rem;
    font-size: 0.82rem; font-weight: 600;
    border: 1px solid transparent; cursor: pointer;
    transition: all 0.18s ease;
}
.ms-filter__btn .material-symbols-outlined { font-size: 1rem; }
.ms-filter__btn--ghost { background: #fff; color: #5a7a9a; border-color: rgba(46, 92, 158, 0.25); }
.ms-filter__btn--ghost:hover { background: rgba(46, 92, 158, 0.08); color: #1a3c6e; border-color: rgba(46, 92, 158, 0.4); }

@media (max-width: 900px) {
    .ms-filter { width: 100%; }
    .ms-filter__input, .ms-filter__select { max-width: none; }
}

/* ─── STATS ─── */
.rhc-stats {
    display: grid;
    grid-template-columns: minmax(14rem, 18rem) 1fr;
    gap: 0.85rem;
    align-items: stretch;
}
@media (max-width: 992px) {
    .rhc-stats { grid-template-columns: 1fr; }
}

.rhc-stats__total {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    border-radius: 0.7rem;
    padding: 1rem 1.2rem;
    display: flex; align-items: center; gap: 0.85rem;
    box-shadow: 0 0.4rem 1rem rgba(26, 60, 110, 0.25);
}
.rhc-stats__total .material-symbols-outlined { font-size: 2.4rem; opacity: 0.95; }
.rhc-stats__total small {
    display: block;
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    opacity: 0.8;
}
.rhc-stats__total b {
    display: block;
    font-size: 2rem; font-weight: 800;
    font-family: 'Merriweather', serif;
    line-height: 1;
    margin-top: 0.2rem;
}

.rhc-stats__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
}
@media (max-width: 1100px) {
    .rhc-stats__cols { grid-template-columns: 1fr; }
}

.rhc-stats__col {
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.6rem;
    display: flex; flex-direction: column;
    overflow: hidden;
    max-height: 13rem;
}
.rhc-stats__head {
    display: flex; align-items: center; gap: 0.35rem;
    padding: 0.55rem 0.75rem;
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
    border-bottom: 1px solid rgba(46, 92, 158, 0.18);
}
.rhc-stats__head h3 {
    margin: 0; flex: 1;
    font-size: 0.82rem; font-weight: 700;
    color: #1a3c6e;
}
.rhc-stats__head .material-symbols-outlined { font-size: 1.1rem; color: #2e5c9e; }

.rhc-stats__list {
    flex: 1; min-height: 0;
    overflow-y: auto;
    padding: 0.4rem 0.5rem;
    display: flex; flex-direction: column; gap: 0.25rem;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.rhc-stats__list::-webkit-scrollbar { width: 0.4rem; }
.rhc-stats__list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    border-radius: 999px;
}
.rhc-stats__list::-webkit-scrollbar-track { background: #f1f5f9; }

.rhc-stats__row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.4rem;
    padding: 0.3rem 0.55rem;
    background: #f7fafd;
    border: 1px solid rgba(46, 92, 158, 0.12);
    border-radius: 0.35rem;
}
.rhc-stats__row-name {
    font-size: 0.78rem; color: #1a3c6e; font-weight: 600;
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rhc-stats__row-val {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    font-size: 0.72rem; font-weight: 800;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.rhc-stats__empty {
    margin: 0.5rem; font-size: 0.78rem; color: #94a3b8; font-style: italic; text-align: center;
}

/* ─── LIST ─── */
.rhc-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 1280px) {
    .rhc-list { grid-template-columns: repeat(2, 1fr); }
}

.rhc-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.7rem;
    padding: 0.85rem 1rem 0.85rem 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 28, 50, 0.04);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-flow: column;
    gap: 0.6rem;
}
.rhc-card:hover {
    box-shadow: 0 0.4rem 1rem rgba(46, 92, 158, 0.14);
    border-color: rgba(46, 92, 158, 0.42);
    transform: translateY(-1px);
}
.rhc-card::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0;
    width: 0.35rem;
    border-top-left-radius: 0.7rem; border-bottom-left-radius: 0.7rem;
    background: linear-gradient(180deg, #1a3c6e, #2e5c9e);
}

.rhc-card__head {
    display: flex; align-items: flex-start; gap: 0.7rem;
    flex-wrap: wrap;
}
.rhc-card__avatar {
    width: 2.8rem; height: 2.8rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.25);
}
.rhc-card__avatar .material-symbols-outlined { font-size: 1.5rem; }

.rhc-card__identity { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.rhc-card__name {
    margin: 0;
    font-size: 0.95rem; font-weight: 700;
    color: #1a3c6e;
    line-height: 1.3;
    font-family: 'Merriweather', serif;
    word-break: break-word;
}
.rhc-card__specialty {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.78rem; color: #5a7a9a;
    width: max-content; max-width: 100%;
}
.rhc-card__specialty .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; flex-shrink: 0; }

.rhc-card__state {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.72rem; font-weight: 700;
    border-radius: 0.4rem;
    border: 1px solid transparent;
    text-transform: uppercase; letter-spacing: 0.04em;
    flex-shrink: 0;
}
.rhc-card__state .material-symbols-outlined { font-size: 1rem; }
.rhc-card__state.is-done    { background: #dcfce7; color: #166534; border-color: rgba(22, 101, 52, 0.25); }
.rhc-card__state.is-pending { background: #fef3c7; color: #92400e; border-color: rgba(146, 64, 14, 0.25); }

.rhc-card__tags {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
}
.rhc-tag {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem; font-weight: 600;
    border-radius: 0.35rem;
    border: 1px solid transparent;
}
.rhc-tag .material-symbols-outlined { font-size: 0.9rem; }
.rhc-tag--proc { background: linear-gradient(135deg, rgba(46, 92, 158, 0.08), rgba(46, 92, 158, 0.18));
                 color: #1a3c6e; border-color: rgba(46, 92, 158, 0.25); }
.rhc-tag--conv { background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
                 color: #6a1b9a; border-color: rgba(106, 27, 154, 0.22); }
.rhc-tag--sit  { background: linear-gradient(135deg, #fef3c7, #fde68a);
                 color: #92400e; border-color: rgba(146, 64, 14, 0.22); }

.rhc-card__body {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    padding-top: 0.55rem;
    border-top: 1px dashed rgba(46, 92, 158, 0.22);
}
@media (max-width: 1200px) {
    .rhc-card__body { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .rhc-card__body { grid-template-columns: 1fr; }
}

.rhc-block {
    background: #f7fafd;
    border: 1px solid rgba(46, 92, 158, 0.14);
    border-radius: 0.45rem;
    padding: 0.5rem 0.6rem;
}
.rhc-block__label {
    margin: 0 0 0.3rem 0;
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.65rem; font-weight: 800;
    color: #5a7a9a;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.rhc-block__label .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; }
.rhc-block__value {
    margin: 0;
    font-size: 0.82rem; font-weight: 700;
    color: #1a3c6e;
    line-height: 1.3;
    word-break: break-word;
}
.rhc-block__value small {
    font-size: 0.7rem; font-weight: 500; color: #5a7a9a;
    margin: 0 0.25rem;
}
.rhc-block__sub {
    margin: 0.25rem 0 0 0;
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.72rem; color: #5a7a9a;
    line-height: 1.3;
    flex-wrap: wrap;
    width: 100%;
}
.rhc-block__sub .material-symbols-outlined { font-size: 0.85rem; color: #94a3b8; flex-shrink: 0; }
.rhc-block__sub b { color: #1a3c6e; font-weight: 700; }
.rhc-block__empty {
    margin: 0;
    font-size: 0.75rem; color: #94a3b8; font-style: italic;
}

/* Puntaje */
.rhc-points { display: flex; flex-direction: column; gap: 0.3rem; }
.rhc-points__main {
    display: inline-flex; align-items: baseline; gap: 0.3rem;
}
.rhc-points__main b {
    font-size: 1.15rem; font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.rhc-points__main b.is-ok  { color: #166534; }
.rhc-points__main b.is-low { color: #c2410c; }
.rhc-points__main small { font-size: 0.72rem; color: #5a7a9a; }
.rhc-points__bar {
    height: 0.4rem; background: rgba(46, 92, 158, 0.12);
    border-radius: 999px; overflow: hidden;
}
.rhc-points__fill {
    height: 100%; border-radius: 999px;
    transition: width 0.4s ease;
}
.rhc-points__fill.is-ok  { background: linear-gradient(90deg, #16a34a, #15803d); }
.rhc-points__fill.is-low { background: linear-gradient(90deg, #f97316, #ea580c); }

/* Empty */
.rhc-empty {
    background: #fff;
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.65rem;
    padding: 2.5rem 1rem; text-align: center; color: #5a7a9a;
}
.rhc-empty .material-symbols-outlined { font-size: 3rem; color: rgba(46, 92, 158, 0.5); }
.rhc-empty h5 { margin: 0.5rem 0 0.2rem; font-weight: 700; color: #1a3c6e; font-size: 1rem; }
.rhc-empty p { margin: 0; font-size: 0.85rem; }


/* =============================================================================
   REVISIÓN HISTORIAL · ExamComponent.vue
   Componente:  resources/js/components/revision_historial/ExamComponent.vue
   Apartado:    Historial de revisiones por examen
   Prefijo:     .csj-shell__content, .rh-*
   ============================================================================= */
.csj-shell__content.rhe-content {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 0.85rem 1rem;
    gap: 0.85rem;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.rhe-content::-webkit-scrollbar { width: 0.6rem; }
.rhe-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    border-radius: 999px;
}
.rhe-content::-webkit-scrollbar-track { background: #f1f5f9; }

/* ─── FILTER ─── */
.ms-filter {
    display: flex; align-items: center; gap: 0.4rem;
    flex-wrap: wrap;
}
.ms-filter__input {
    display: flex; align-items: center; gap: 0.4rem;
    background: #f7fafd;
    border: 1px solid rgba(46, 92, 158, 0.25); border-radius: 0.45rem;
    padding: 0.4rem 0.75rem;
    min-width: 12rem; flex: 1; max-width: 16rem;
    transition: border-color 0.18s, box-shadow 0.18s, background-color 0.18s;
}
.ms-filter__input:focus-within {
    border-color: #2e5c9e; background: #fff;
    box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.15);
}
.ms-filter__input .material-symbols-outlined { font-size: 1.1rem; color: #2e5c9e; }
.ms-filter__input input {
    flex: 1; min-width: 0; border: none; outline: none; background: transparent;
    font-size: 0.85rem; color: #1a3c6e; font-family: inherit;
}
.ms-filter__input input::placeholder { color: #94a3b8; }

.ms-filter__select {
    background: #f7fafd;
    border: 1px solid rgba(46, 92, 158, 0.25);
    border-radius: 0.45rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.82rem; color: #1a3c6e;
    font-family: inherit; cursor: pointer; outline: none;
    min-width: 10rem; max-width: 14rem;
    transition: border-color 0.18s, box-shadow 0.18s, background-color 0.18s;
}
.ms-filter__select:focus {
    border-color: #2e5c9e; background: #fff;
    box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.15);
}

.ms-filter__btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.5rem 0.9rem; border-radius: 0.45rem;
    font-size: 0.82rem; font-weight: 600;
    border: 1px solid transparent; cursor: pointer;
    transition: all 0.18s ease;
}
.ms-filter__btn .material-symbols-outlined { font-size: 1rem; }
.ms-filter__btn--ghost { background: #fff; color: #5a7a9a; border-color: rgba(46, 92, 158, 0.25); }
.ms-filter__btn--ghost:hover { background: rgba(46, 92, 158, 0.08); color: #1a3c6e; border-color: rgba(46, 92, 158, 0.4); }

@media (max-width: 900px) {
    .ms-filter { width: 100%; }
    .ms-filter__input, .ms-filter__select { max-width: none; }
}

/* ─── STATS ─── */
.rhe-stats {
    display: grid;
    grid-template-columns: minmax(14rem, 18rem) 1fr;
    gap: 0.85rem;
    align-items: stretch;
}
@media (max-width: 992px) {
    .rhe-stats { grid-template-columns: 1fr; }
}

.rhe-stats__total {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    border-radius: 0.7rem;
    padding: 1rem 1.2rem;
    display: flex; align-items: center; gap: 0.85rem;
    box-shadow: 0 0.4rem 1rem rgba(26, 60, 110, 0.25);
}
.rhe-stats__total .material-symbols-outlined { font-size: 2.4rem; opacity: 0.95; }
.rhe-stats__total small {
    display: block;
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    opacity: 0.8;
}
.rhe-stats__total b {
    display: block;
    font-size: 2rem; font-weight: 800;
    font-family: 'Merriweather', serif;
    line-height: 1;
    margin-top: 0.2rem;
}

.rhe-stats__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
}
@media (max-width: 1100px) {
    .rhe-stats__cols { grid-template-columns: 1fr; }
}

.rhe-stats__col {
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.6rem;
    display: flex; flex-direction: column;
    overflow: hidden;
    max-height: 13rem;
}
.rhe-stats__head {
    display: flex; align-items: center; gap: 0.35rem;
    padding: 0.55rem 0.75rem;
    background: linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
    border-bottom: 1px solid rgba(46, 92, 158, 0.18);
}
.rhe-stats__head h3 {
    margin: 0; flex: 1;
    font-size: 0.82rem; font-weight: 700;
    color: #1a3c6e;
}
.rhe-stats__head .material-symbols-outlined { font-size: 1.1rem; color: #2e5c9e; }

.rhe-stats__list {
    flex: 1; min-height: 0;
    overflow-y: auto;
    padding: 0.4rem 0.5rem;
    display: flex; flex-direction: column; gap: 0.25rem;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.rhe-stats__list::-webkit-scrollbar { width: 0.4rem; }
.rhe-stats__list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    border-radius: 999px;
}
.rhe-stats__list::-webkit-scrollbar-track { background: #f1f5f9; }

.rhe-stats__row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.4rem;
    padding: 0.3rem 0.55rem;
    background: #f7fafd;
    border: 1px solid rgba(46, 92, 158, 0.12);
    border-radius: 0.35rem;
}
.rhe-stats__row-name {
    font-size: 0.78rem; color: #1a3c6e; font-weight: 600;
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rhe-stats__row-val {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    font-size: 0.72rem; font-weight: 800;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.rhe-stats__empty {
    margin: 0.5rem; font-size: 0.78rem; color: #94a3b8; font-style: italic; text-align: center;
}

/* ─── LIST ─── */
.rhe-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 1280px) {
    .rhe-list { grid-template-columns: repeat(2, 1fr); }
}

.rhe-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.7rem;
    padding: 0.85rem 1rem 0.85rem 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 28, 50, 0.04);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-flow: column;
    gap: 0.6rem;
}
.rhe-card:hover {
    box-shadow: 0 0.4rem 1rem rgba(46, 92, 158, 0.14);
    border-color: rgba(46, 92, 158, 0.42);
    transform: translateY(-1px);
}
.rhe-card::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0;
    width: 0.35rem;
    border-top-left-radius: 0.7rem; border-bottom-left-radius: 0.7rem;
    background: linear-gradient(180deg, #1a3c6e, #2e5c9e);
}

.rhe-card__head {
    display: flex; align-items: flex-start; gap: 0.7rem;
    flex-wrap: wrap;
}
.rhe-card__avatar {
    width: 2.8rem; height: 2.8rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.25);
}
.rhe-card__avatar .material-symbols-outlined { font-size: 1.5rem; }

.rhe-card__identity { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.rhe-card__name {
    margin: 0;
    font-size: 0.95rem; font-weight: 700;
    color: #1a3c6e;
    line-height: 1.3;
    font-family: 'Merriweather', serif;
    word-break: break-word;
}
.rhe-card__specialty {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.78rem; color: #5a7a9a;
    width: max-content; max-width: 100%;
}
.rhe-card__specialty .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; flex-shrink: 0; }

.rhe-card__state {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.72rem; font-weight: 700;
    border-radius: 0.4rem;
    border: 1px solid transparent;
    text-transform: uppercase; letter-spacing: 0.04em;
    flex-shrink: 0;
}
.rhe-card__state .material-symbols-outlined { font-size: 1rem; }
.rhe-card__state.is-done    { background: #dcfce7; color: #166534; border-color: rgba(22, 101, 52, 0.25); }
.rhe-card__state.is-pending { background: #fef3c7; color: #92400e; border-color: rgba(146, 64, 14, 0.25); }

.rhe-card__tags {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
}
.rhe-tag {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem; font-weight: 600;
    border-radius: 0.35rem;
    border: 1px solid transparent;
}
.rhe-tag .material-symbols-outlined { font-size: 0.9rem; }
.rhe-tag--proc { background: linear-gradient(135deg, rgba(46, 92, 158, 0.08), rgba(46, 92, 158, 0.18));
                 color: #1a3c6e; border-color: rgba(46, 92, 158, 0.25); }
.rhe-tag--conv { background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
                 color: #6a1b9a; border-color: rgba(106, 27, 154, 0.22); }
.rhe-tag--sit  { background: linear-gradient(135deg, #fef3c7, #fde68a);
                 color: #92400e; border-color: rgba(146, 64, 14, 0.22); }

.rhe-card__body {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    padding-top: 0.55rem;
    border-top: 1px dashed rgba(46, 92, 158, 0.22);
}
@media (max-width: 760px) {
    .rhe-card__body { grid-template-columns: 1fr; }
}

.rhe-block {
    background: #f7fafd;
    border: 1px solid rgba(46, 92, 158, 0.14);
    border-radius: 0.45rem;
    padding: 0.5rem 0.6rem;
}
.rhe-block__label {
    margin: 0 0 0.3rem 0;
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.65rem; font-weight: 800;
    color: #5a7a9a;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.rhe-block__label .material-symbols-outlined { font-size: 0.95rem; color: #2e5c9e; }
.rhe-block__value {
    margin: 0;
    font-size: 0.82rem; font-weight: 700;
    color: #1a3c6e;
    line-height: 1.3;
    word-break: break-word;
}
.rhe-block__value small {
    font-size: 0.7rem; font-weight: 500; color: #5a7a9a;
    margin: 0 0.25rem;
}
.rhe-block__sub {
    margin: 0.25rem 0 0 0;
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.72rem; color: #5a7a9a;
    line-height: 1.3;
    flex-wrap: wrap;
    width: 100%;
}
.rhe-block__sub .material-symbols-outlined { font-size: 0.85rem; color: #94a3b8; flex-shrink: 0; }
.rhe-block__sub b { color: #1a3c6e; font-weight: 700; }
.rhe-block__empty {
    margin: 0;
    font-size: 0.75rem; color: #94a3b8; font-style: italic;
}

/* Empty */
.rhe-empty {
    background: #fff;
    border: 1px dashed rgba(46, 92, 158, 0.3);
    border-radius: 0.65rem;
    padding: 2.5rem 1rem; text-align: center; color: #5a7a9a;
}
.rhe-empty .material-symbols-outlined { font-size: 3rem; color: rgba(46, 92, 158, 0.5); }
.rhe-empty h5 { margin: 0.5rem 0 0.2rem; font-weight: 700; color: #1a3c6e; font-size: 1rem; }
.rhe-empty p { margin: 0; font-size: 0.85rem; }


/* =============================================================================
   NOTIFICATIONS · NotificationComponent.vue (campana)
   Componente:  resources/js/components/notifications/NotificationComponent.vue
   Apartado:    Icono de campana en el header con badge
   Prefijo:     .ms-bell*
   ============================================================================= */
.ms-bell {
    position: relative;
}

/* ─── Trigger (campanita) ──────────────────────────── */
.ms-bell__trigger {
    position: relative;
    width: 2.4rem; height: 2.4rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f1f5f9;
    border: 1px solid #e2e8ef;
    border-radius: 50%;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
    margin: 0;
}
.ms-bell__trigger:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}
.ms-bell__trigger.has-new {
    background: #fef3c7;
    border-color: #fcd34d;
    color: #b45309;
    animation: bellShake 1.5s ease-in-out infinite;
}
.ms-bell__trigger .material-symbols-outlined { font-size: 1.3rem; }

@keyframes bellShake {
    0%, 100% { transform: rotate(0); }
    10%, 30% { transform: rotate(-8deg); }
    20%, 40% { transform: rotate(8deg); }
    50% { transform: rotate(0); }
}

.ms-bell__badge {
    position: absolute;
    top: -0.25rem; right: -0.25rem;
    background: #dc2626; color: #fff;
    font-size: 0.6rem; font-weight: 700;
    min-width: 1.1rem; height: 1.1rem;
    padding: 0 0.3rem;
    border-radius: 1rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
    box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.15);
}

/* ─── Checkbox oculto que controla la apertura ────── */
#notification-checkbox {
    position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}

/* ─── Panel desplegable ────────────────────────────── */
.ms-bell__panel {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    width: 22rem;
    max-width: calc(100vw - 2rem);
    background: #fff;
    border: 1px solid #e2e8ef;
    border-radius: 0.65rem;
    box-shadow: 0 0.4rem 1.5rem rgba(15, 23, 42, 0.15);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-0.5rem) scale(0.97);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 1000;
}
#notification-checkbox:checked ~ .ms-bell__panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* ─── Header ──────────────────────────────────────── */
.ms-bell__head {
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
}
.ms-bell__head-title {
    display: flex; align-items: center; gap: 0.6rem;
}
.ms-bell__head-title .material-symbols-outlined {
    font-size: 1.4rem;
    background: rgba(255,255,255,0.18);
    border-radius: 0.4rem;
    padding: 0.3rem;
    flex-shrink: 0;
}
.ms-bell__head-title b {
    display: block;
    font-size: 0.95rem; font-weight: 700;
}
.ms-bell__head-title small {
    display: block;
    font-size: 0.72rem; opacity: 0.85;
}

/* ─── Body — lista de notificaciones ───────────────── */
.ms-bell__body {
    max-height: 22rem;
    overflow-y: auto;
    padding: 0.4rem;
    display: flex; flex-direction: column; gap: 0.25rem;
}
.ms-bell__body::-webkit-scrollbar { width: 6px; }
.ms-bell__body::-webkit-scrollbar-track { background: transparent; }
.ms-bell__body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

.ms-bell__item {
    position: relative;
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.6rem 0.7rem;
    background: linear-gradient(135deg, #fffbeb 0%, #fff 60%);
    border: 1px solid #fef3c7;
    border-radius: 0.45rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
    width: 100%;
}
.ms-bell__item:hover {
    background: #fef3c7;
    border-color: #fcd34d;
    transform: translateX(2px);
}
.ms-bell__item-icon {
    width: 2rem; height: 2rem;
    background: #fef3c7; color: #b45309;
    border-radius: 0.4rem;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 1.15rem !important;
}
.ms-bell__item:hover .ms-bell__item-icon {
    background: #fff; color: #92400e;
}
.ms-bell__item-body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 0.1rem;
}
.ms-bell__item-title {
    font-size: 0.82rem; color: #1a3c6e; font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    line-height: 1.3;
}
.ms-bell__item-hint {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.68rem; color: #92400e;
}
.ms-bell__item-hint .material-symbols-outlined { font-size: 0.85rem; }
.ms-bell__item-dot {
    width: 0.5rem; height: 0.5rem; border-radius: 50%;
    background: #f59e0b; flex-shrink: 0;
}

/* ─── Empty ─────────────────────────────────────── */
.ms-bell__empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: #94a3b8;
    display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
}
.ms-bell__empty .material-symbols-outlined {
    font-size: 2.5rem;
    color: #cbd5e1;
    margin-bottom: 0.35rem;
}
.ms-bell__empty b {
    font-size: 0.88rem; color: #475569; font-weight: 700;
}
.ms-bell__empty small {
    font-size: 0.74rem;
}

/* ─── Footer ─────────────────────────────────────── */
.ms-bell__foot {
    border-top: 1px solid #e2e8ef;
    background: #f8fafc;
}
.ms-bell__foot-link {
    display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    padding: 0.7rem 1rem;
    color: #1d4ed8; font-size: 0.82rem; font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease;
}
.ms-bell__foot-link:hover {
    background: #eff6ff;
    color: #1e3a8a;
    text-decoration: none;
}
.ms-bell__foot-link .material-symbols-outlined { font-size: 1.05rem; }

@media (max-width: 560px) {
    .ms-bell__panel {
        width: 18rem;
    }
}


/* =============================================================================
   MI CUENTA · FatherComponent.vue
   Componente:  resources/js/components/mi_cuenta/FatherComponent.vue
   Apartado:    Vista de configuración de cuenta del usuario (avatar + datos + cambio de password)
   Prefijo:     .mca-*  (renombrado desde .mc-* para evitar colisión con multiconsejos)
   ============================================================================= */
.mca-shell {
  width: 100%;
  background: #f7f9fc;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  box-sizing: border-box;
}
.mca-shell *, .mca-shell *::before, .mca-shell *::after { box-sizing: border-box; }

/* ─── HEADER ─── */
.mca-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.5rem;
  background: white;
  border-bottom: 1px solid #e2e8ef;
  flex-wrap: wrap;
}
.mca-header__icon {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--blue);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.mca-header__title-wrap { flex: 1; min-width: 0; }
.mca-header__title { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--blue); }
.mca-header__subtitle {
  margin: 0.15rem 0 0 0;
  font-size: 0.82rem;
  color: #64748b;
  line-height: 1.4;
}

/* ─── BODY ─── */
.mca-body {
  display: grid;
  grid-template-columns: minmax(18rem, 35%) 1fr;
  gap: 1rem;
  padding: 1rem 1.5rem 1.5rem;
}

/* ─── CARDS comunes ─── */
.mca-card {
  background: white;
  border: 1px solid #e2e8ef;
  border-radius: 0.55rem;
  padding: 1rem 1.1rem;
  box-shadow: 0 0.1rem 0.3rem rgba(0,0,0,0.03);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.mca-section__head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-bottom: 0.55rem;
  border-bottom: 2px solid #e2e8ef;
  margin-bottom: 0.1rem;
}
.mca-section__head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--blue);
}
.mca-section__head > span.material-symbols-outlined { color: var(--blue); font-size: 1.35rem; }

/* ─── PROFILE CARD ─── */
.mca-card--profile { align-items: center; text-align: center; }
.mca-card--profile .mca-section__head { width: 100%; text-align: left; }

.mca-avatar {
  position: relative;
  width: clamp(8rem, 16vw, 11rem);
  height: clamp(8rem, 16vw, 11rem);
  margin: 0.4rem 0 0.2rem 0;
}
.mca-avatar__img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid white;
  box-shadow: 0 0.3rem 0.8rem rgba(0,0,0,0.1);
  background: #f1f5f9;
}
.mca-avatar__btn {
  position: absolute;
  bottom: 0.2rem;
  right: 0.2rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--blue);
  color: white;
  border: 3px solid white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0.2rem 0.5rem rgba(0,0,0,0.18);
  transition: 0.15s;
  font-family: inherit;
}
.mca-avatar__btn:hover { filter: brightness(1.08); transform: scale(1.05); }
.mca-avatar__btn span { font-size: 1.15rem; }

.mca-hint {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: #475569;
  background: #eff6ff;
  border-left: 3px solid var(--blue);
  border-radius: 0.35rem;
  padding: 0.5rem 0.7rem;
  text-align: left;
  line-height: 1.4;
  width: 100%;
}
.mca-hint span { color: var(--blue); font-size: 1.05rem; flex-shrink: 0; }

.mca-observ {
  width: 100%;
  background: #fef2f2;
  border-left: 3px solid #dc2626;
  border-radius: 0.4rem;
  padding: 0.6rem 0.8rem;
  text-align: left;
}
.mca-observ__head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #991b1b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
}
.mca-observ__head span { color: #b91c1c; font-size: 1.1rem; }
.mca-observ__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mca-observ__list li {
  font-size: 0.82rem;
  color: #7f1d1d;
  line-height: 1.4;
  padding: 0.15rem 0 0.15rem 0.7rem;
  position: relative;
}
.mca-observ__list li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: #dc2626;
  font-weight: 700;
}

/* ─── ACCESS CARD ─── */
.mca-grid {
  display: grid;
  gap: 0.85rem;
}
.mca-grid--2 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

.mca-field { display: flex; flex-direction: column; gap: 0.3rem; }
.mca-field label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
  margin: 0;
}
.mca-required { color: var(--red, #dc2626); font-weight: 700; }

/* Input wrappers con icono leading + acción trailing */
.mca-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: white;
  border: 1px solid #d8dde6;
  border-radius: 0.4rem;
  transition: 0.15s;
}
.mca-input-wrap:hover { border-color: #94a3b8; }
.mca-input-wrap:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(64,128,233,0.15);
}
.mca-input-wrap--locked { background: #f8fafc; }
.mca-input-wrap--locked:focus-within { box-shadow: none; border-color: #d8dde6; }
.mca-input-wrap--ok    { border-color: #22c55e; }
.mca-input-wrap--ok:focus-within { box-shadow: 0 0 0 3px rgba(34,197,94,0.18); border-color: #16a34a; }
.mca-input-wrap--err   { border-color: #ef4444; }
.mca-input-wrap--err:focus-within { box-shadow: 0 0 0 3px rgba(239,68,68,0.18); border-color: #dc2626; }

.mca-input-wrap__icon {
  font-size: 1.1rem;
  color: #94a3b8;
  padding: 0 0.55rem;
  flex-shrink: 0;
}
.mca-input-wrap:focus-within .mca-input-wrap__icon { color: var(--blue); }
.mca-input-wrap--ok  .mca-input-wrap__icon { color: #16a34a; }
.mca-input-wrap--err .mca-input-wrap__icon { color: #dc2626; }

.mca-input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0.55rem 0.4rem 0.55rem 0;
  font-size: 0.92rem;
  color: #1e293b;
  font-family: inherit;
  outline: 0;
  width: 100%;
}
.mca-input[readonly] { color: #475569; cursor: not-allowed; }

.mca-input-wrap__lock,
.mca-input-wrap__toggle {
  font-size: 1.05rem;
  color: #94a3b8;
  padding: 0 0.5rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-family: inherit;
}
.mca-input-wrap__lock { cursor: default; }
.mca-input-wrap__toggle:hover { color: var(--blue); }
.mca-input-wrap__toggle span { font-size: 1.15rem; }

.mca-help {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.35;
}
.mca-help span { font-size: 1rem; }
.mca-help.mca-input-wrap--ok  { color: #166534; }
.mca-help.mca-input-wrap--ok  span { color: #16a34a; }
.mca-help.mca-input-wrap--err { color: #991b1b; }
.mca-help.mca-input-wrap--err span { color: #dc2626; }

/* ─── STRENGTH METER ─── */
.mca-strength {
  background: #f8fafc;
  border: 1px solid #e2e8ef;
  border-radius: 0.4rem;
  padding: 0.55rem 0.75rem;
}
.mca-strength__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.78rem;
  color: #475569;
  margin-bottom: 0.4rem;
}
.mca-strength__value {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mca-strength__value--empty  { color: #94a3b8; }
.mca-strength__value--weak   { color: #b91c1c; }
.mca-strength__value--medium { color: #b45309; }
.mca-strength__value--strong { color: #166534; }
.mca-strength__bar {
  height: 0.45rem;
  background: #e2e8ef;
  border-radius: 999px;
  overflow: hidden;
}
.mca-strength__fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease, background 0.3s ease;
}
.mca-strength__fill--empty  { background: transparent; }
.mca-strength__fill--weak   { background: linear-gradient(90deg, #f87171, #dc2626); }
.mca-strength__fill--medium { background: linear-gradient(90deg, #fbbf24, #f97316); }
.mca-strength__fill--strong { background: linear-gradient(90deg, #34d399, #10b981); }

/* ─── REQUISITOS / RULES ─── */
.mca-rules {
  background: #f8fafc;
  border: 1px solid #e2e8ef;
  border-radius: 0.4rem;
  padding: 0.7rem 0.85rem;
}
.mca-rules__title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.55rem 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mca-rules__title span { color: var(--blue); font-size: 1.1rem; }
.mca-rules__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.3rem 0.7rem;
}
.mca-rules__list li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: #64748b;
  transition: color 0.2s;
}
.mca-rules__list li span {
  font-size: 1.1rem;
  color: #cbd5e1;
  transition: color 0.2s, transform 0.2s;
}
.mca-rules__item--ok { color: #166534; font-weight: 600; }
.mca-rules__item--ok span { color: #16a34a; transform: scale(1.05); }

/* ─── BOTONES ─── */
.mca-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.6rem 1.1rem;
  border-radius: 0.4rem;
  font-weight: 700;
  font-size: 0.9rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: 0.15s;
  font-family: inherit;
  text-decoration: none;
}
.mca-btn span { font-size: 1.15rem; }
.mca-btn:hover:not(:disabled) { transform: translateY(-1px); }
.mca-btn:disabled { cursor: not-allowed; opacity: 0.55; }

.mca-btn--upload {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
  width: 100%;
  max-width: 16rem;
}
.mca-btn--upload:hover { filter: brightness(1.06); color: white; }

.mca-btn--primary {
  background: var(--green, #269a1c);
  color: white;
  border-color: var(--green, #269a1c);
  box-shadow: 0 0.15rem 0.4rem rgba(38,154,28,0.25);
}
.mca-btn--primary:hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow: 0 0.25rem 0.6rem rgba(38,154,28,0.35);
  color: white;
}

/* ─── ACTION BAR ─── */
.mca-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.7rem;
  background: #f8fafc;
  border: 1px solid #e2e8ef;
  border-top: 3px solid var(--blue);
  border-radius: 0.4rem;
  padding: 0.7rem 0.85rem;
  margin-top: 0.2rem;
}
.mca-actions__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.78rem;
  color: #475569;
  flex: 1;
  min-width: 14rem;
}
.mca-actions__hint span { color: var(--blue); font-size: 1.05rem; }

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  .mca-body { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .mca-header { flex-direction: column; align-items: stretch; text-align: center; }
  .mca-actions { flex-direction: column; align-items: stretch; }
  .mca-btn--primary { width: 100%; }
}


/* =============================================================================
   MULTICONSEJOS · FatherComponent.vue
   Componente:  resources/js/components/multiconsejos/FatherComponent.vue
   Apartado:    Pantalla post-login: selección de consejo cuando el usuario tiene acceso a varios
   Prefijo:     .mc-*
   ============================================================================= */
/* SHELL: el padre .container tiene overflow:hidden, así que hacemos al
   shell el contenedor de scroll con altura 100vh. */
.mc-shell {
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: #f7fafd;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(46, 92, 158, 0.4) #f1f5f9;
}
.mc-shell *, .mc-shell *::before, .mc-shell *::after { box-sizing: border-box; }
.mc-shell::-webkit-scrollbar { width: 0.5rem; }
.mc-shell::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1a3c6e, #2e5c9e);
    border-radius: 999px;
}
.mc-shell::-webkit-scrollbar-track { background: #f1f5f9; }

/* ─── TOPBAR navy ─── */
.mc-topbar {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    padding: 0.95rem 1.5rem;
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
    box-shadow: 0 0.2rem 0.6rem rgba(15, 28, 50, 0.18);
    flex-wrap: wrap;
    gap: 0.7rem;
}
.mc-topbar__brand {
    display: inline-flex; align-items: center; gap: 0.7rem;
}
.mc-topbar__brand > .material-symbols-outlined {
    width: 2.5rem; height: 2.5rem;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.mc-topbar__brand h1 {
    margin: 0;
    font-family: 'Merriweather', serif;
    font-size: 1.25rem; font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
}
.mc-topbar__brand p {
    margin: 0.15rem 0 0;
    font-size: 0.72rem;
    opacity: 0.8;
}
.mc-topbar__meta {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.35rem 0.7rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
}
.mc-topbar__meta .material-symbols-outlined { font-size: 0.95rem; }

/* ─── CONTENT ─── */
.mc-content {
    flex: 1;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}

/* ─── INTRO ─── */
.mc-intro { text-align: center; margin-bottom: 1.75rem; }
.mc-intro__title {
    margin: 0;
    font-family: 'Merriweather', serif;
    font-size: clamp(1.3rem, 2.3vw, 1.85rem);
    font-weight: 700;
    color: #1a3c6e;
}
.mc-intro__sub {
    margin: 0.55rem auto 0;
    font-size: 0.92rem;
    color: #5a7a9a;
    max-width: 560px;
    line-height: 1.5;
}
.mc-intro__sub b { color: #1a3c6e; font-weight: 700; }

/* ─── FILTRO ─── */
.mc-filter {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.mc-filter__input {
    flex: 1;
    min-width: 14rem;
    display: flex; align-items: center; gap: 0.45rem;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.25);
    border-radius: 0.55rem;
    padding: 0.55rem 0.85rem;
    box-shadow: 0 0.15rem 0.45rem rgba(15, 28, 50, 0.05);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.mc-filter__input:focus-within {
    border-color: #2e5c9e;
    box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.15);
}
.mc-filter__input > .material-symbols-outlined {
    font-size: 1.2rem; color: #2e5c9e;
}
.mc-filter__input input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 0.9rem;
    color: #1a3c6e;
}
.mc-filter__input input::placeholder { color: #94a3b8; }

.mc-filter__clear {
    width: 1.6rem; height: 1.6rem;
    background: rgba(46, 92, 158, 0.08);
    border: 0;
    border-radius: 50%;
    color: #5a7a9a;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.18s ease;
    flex-shrink: 0;
}
.mc-filter__clear:hover {
    background: rgba(46, 92, 158, 0.2);
    color: #1a3c6e;
}
.mc-filter__clear .material-symbols-outlined { font-size: 1rem; }

.mc-filter__count {
    font-size: 0.82rem;
    color: #5a7a9a;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.5rem;
    padding: 0.5rem 0.85rem;
    white-space: nowrap;
}
.mc-filter__count b { color: #1a3c6e; font-weight: 700; }

/* ─── EMPTY STATE ─── */
.mc-empty {
    background: #fff;
    border: 1px dashed rgba(46, 92, 158, 0.35);
    border-radius: 0.85rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: #5a7a9a;
}
.mc-empty .material-symbols-outlined {
    font-size: 3rem;
    color: rgba(46, 92, 158, 0.45);
}
.mc-empty h4 {
    margin: 0.65rem 0 0.3rem;
    font-family: 'Merriweather', serif;
    font-size: 1.05rem; font-weight: 700;
    color: #1a3c6e;
}
.mc-empty p {
    margin: 0;
    font-size: 0.85rem;
    color: #5a7a9a;
}
.mc-empty p b { color: #1a3c6e; font-weight: 700; }
.mc-empty__btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    margin-top: 1rem;
    padding: 0.5rem 0.95rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    border: 0;
    border-radius: 0.45rem;
    font-family: inherit;
    font-size: 0.82rem; font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
    box-shadow: 0 0.2rem 0.5rem rgba(26, 60, 110, 0.3);
}
.mc-empty__btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}
.mc-empty__btn .material-symbols-outlined { font-size: 1rem; }

/* ─── LIST: grid 2 columnas ─── */
.mc-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.mc-row {
    position: relative;
    background: #fff;
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.85rem;
    padding: 1rem 1.1rem 1rem 1.35rem;
    /* Estructura interna: logo + info arriba (horizontal), botón abajo full-width */
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "logo info"
        "btn  btn";
    gap: 0.9rem 1rem;
    align-items: center;
    box-shadow: 0 0.15rem 0.55rem rgba(15, 28, 50, 0.06);
    transition: box-shadow 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.mc-row:hover {
    box-shadow: 0 0.5rem 1.3rem rgba(46, 92, 158, 0.18);
    border-color: rgba(46, 92, 158, 0.42);
    transform: translateY(-1px);
}
.mc-row.is-disabled:hover {
    transform: none;
    box-shadow: 0 0.15rem 0.55rem rgba(15, 28, 50, 0.06);
    border-color: rgba(245, 158, 11, 0.35);
}

/* Strip lateral navy */
.mc-row::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0.4rem;
    background: linear-gradient(180deg, #1a3c6e, #2e5c9e);
    border-radius: 0.85rem 0 0 0.85rem;
}
.mc-row.is-disabled::before {
    background: linear-gradient(180deg, #f59e0b, #d97706);
}

/* LOGO cuadrado prominente a la izquierda */
.mc-row__logo {
    grid-area: logo;
    width: 6.5rem;
    height: 6.5rem;
    background: linear-gradient(135deg, #f7fafd 0%, #e7eef5 100%);
    border: 1px solid rgba(46, 92, 158, 0.18);
    border-radius: 0.7rem;
    display: flex; align-items: center; justify-content: center;
    padding: 0.7rem;
    flex-shrink: 0;
    box-shadow: inset 0 0.15rem 0.3rem rgba(15, 28, 50, 0.05);
}
.mc-row__logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0.2rem 0.4rem rgba(15, 28, 50, 0.12));
}

/* INFO central */
.mc-row__info {
    grid-area: info;
    min-width: 0;
    display: flex; flex-direction: column;
    gap: 0.4rem;
}
.mc-row__name {
    margin: 0;
    font-family: 'Merriweather', serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a3c6e;
    line-height: 1.3;
    word-break: break-word;
}
.mc-row__tag {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.15rem 0.55rem;
    background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
    color: #6a1b9a;
    border: 1px solid rgba(106, 27, 154, 0.25);
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    vertical-align: middle;
}
.mc-row__sub {
    margin: 0;
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.85rem;
    color: #5a7a9a;
}
.mc-row__sub .material-symbols-outlined {
    font-size: 1rem; color: #2e5c9e;
}
.mc-row__sub b { color: #1a3c6e; font-weight: 700; }

.mc-row__chips {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
}
.mc-row__chip {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    border: 1px solid transparent;
}
.mc-row__chip .material-symbols-outlined { font-size: 0.85rem; }
.mc-row__chip.is-ok {
    background: #dcfce7; color: #166534; border-color: rgba(22, 101, 52, 0.25);
}
.mc-row__chip.is-warn {
    background: #fef3c7; color: #92400e; border-color: rgba(146, 64, 14, 0.25);
}

.mc-row__notice {
    display: inline-flex; align-items: flex-start; gap: 0.35rem;
    margin-top: 0.15rem;
    padding: 0.4rem 0.65rem;
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border-left: 3px solid #f59e0b;
    border-radius: 0.4rem;
    font-size: 0.78rem;
    color: #713f12;
    line-height: 1.4;
}
.mc-row__notice .material-symbols-outlined {
    font-size: 1rem; color: #92400e; flex-shrink: 0; margin-top: 0.05rem;
}

/* ACCIÓN abajo full-width */
.mc-row__action {
    grid-area: btn;
    width: 100%;
}
.mc-row__btn {
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border-radius: 0.45rem;
    font-size: 0.82rem; font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: inherit;
    white-space: nowrap;
}
.mc-row__btn .material-symbols-outlined { font-size: 1rem; }
.mc-row__btn-chev { margin-left: 0.15rem; transition: transform 0.2s; }

.mc-row__btn.is-active {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    box-shadow: 0 0.3rem 0.85rem rgba(26, 60, 110, 0.35);
}
.mc-row__btn.is-active:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 0.5rem 1.2rem rgba(26, 60, 110, 0.5);
}
.mc-row__btn.is-active:hover .mc-row__btn-chev {
    transform: translateX(0.3rem);
}

.mc-row__btn.is-disabled {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
    border-color: rgba(46, 92, 158, 0.12);
}

/* Footer del contenido */
.mc-content__footer {
    margin: 2rem auto 0;
    text-align: center;
    display: inline-flex; align-items: center; gap: 0.35rem;
    width: 100%;
    justify-content: center;
    font-size: 0.82rem;
    color: #5a7a9a;
}
.mc-content__footer .material-symbols-outlined {
    font-size: 1rem; color: #2e5c9e;
}

/* ─── RESPONSIVE ─── */
/* En tablet: el grid de 2 cols pasa a 1 col, pero la card mantiene su
   layout interno (logo izq + info der + botón abajo). */
@media (max-width: 880px) {
    .mc-list {
        grid-template-columns: 1fr;
    }
}

/* En móvil: la card se vuelve totalmente vertical. */
@media (max-width: 560px) {
    .mc-content { padding: 1.25rem 0.9rem 2rem; }

    .mc-row {
        grid-template-columns: 1fr;
        grid-template-areas:
            "logo"
            "info"
            "btn";
        text-align: center;
        gap: 0.85rem;
        padding: 1rem 1.1rem 1rem 1.25rem;
    }
    .mc-row__logo {
        width: 100%;
        max-width: 11rem;
        height: 7rem;
        margin: 0 auto;
    }
    .mc-row__info {
        align-items: center;
    }
    .mc-row__sub,
    .mc-row__chips,
    .mc-row__notice {
        justify-content: center;
    }
}

@media (max-width: 420px) {
    .mc-topbar { padding: 0.75rem 1rem; }
    .mc-topbar__brand h1 { font-size: 1.1rem; }
    .mc-topbar__brand p { font-size: 0.7rem; }
    .mc-topbar__meta { display: none; }
}


/* =============================================================================
   NOTIFICATIONS · ListComponent.vue (Inbox)
   Componente:  resources/js/components/notifications/ListComponent.vue
   Apartado:    Inbox de notificaciones del usuario con master/detail
   Prefijo:     .nb-inbox*  (renombrado desde .ms-inbox para no chocar con expediente/notificaciones/HistoryComponent)
   ============================================================================= */
.nb-inbox {
    background: #f8fafc;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    width: 100%;
    align-self: stretch;
    height: 88vh;
    box-sizing: border-box;
}
.nb-inbox *, .nb-inbox *::before, .nb-inbox *::after { box-sizing: border-box; }

/* ─── Header ─────────────────────────────────────────── */
.nb-inbox__header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #e2e8ef;
}
.nb-inbox__title {
    margin: 0;
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 1.15rem; font-weight: 700; color: #1a3c6e;
}
.nb-inbox__title .material-symbols-outlined { font-size: 1.35rem; color: #2563eb; }
.nb-inbox__subtitle { margin: 0.15rem 0 0; font-size: 0.78rem; color: #64748b; }

.nb-inbox__search {
    position: relative;
    display: flex; align-items: center;
    flex: 1; max-width: 26rem; min-width: 16rem;
    background: #fff;
    border: 1px solid #e2e8ef;
    border-radius: 0.5rem;
    padding: 0.35rem 0.65rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.nb-inbox__search:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.nb-inbox__search .material-symbols-outlined { color: #94a3b8; font-size: 1.1rem; }
.nb-inbox__search input {
    flex: 1; border: none; outline: none; background: transparent;
    font-size: 0.85rem; color: #1a3c6e; padding: 0.3rem 0.5rem;
}
.nb-inbox__search-clear {
    border: none; background: transparent; cursor: pointer;
    color: #94a3b8; padding: 0.1rem;
    display: inline-flex; align-items: center;
}
.nb-inbox__search-clear:hover { color: #1a3c6e; }

/* ─── Filtros ───────────────────────────────────────── */
.nb-inbox__filters {
    display: flex; gap: 0.4rem; flex-wrap: wrap;
}
.nb-inbox__filter {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid #e2e8ef;
    background: #fff;
    border-radius: 0.45rem;
    color: #64748b; font-size: 0.78rem; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: all 0.15s ease;
}
.nb-inbox__filter:hover { color: #1a3c6e; border-color: #cbd5e1; }
.nb-inbox__filter.is-active {
    background: #eff6ff; border-color: #93c5fd; color: #1d4ed8;
}
.nb-inbox__filter .material-symbols-outlined { font-size: 1rem; }
.nb-inbox__filter-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.3rem; padding: 0.05rem 0.4rem;
    background: #e2e8ef; color: #475569;
    border-radius: 1rem; font-size: 0.65rem; font-weight: 700;
}
.nb-inbox__filter.is-active .nb-inbox__filter-count { background: #2563eb; color: #fff; }
.nb-inbox__filter-count--warn { background: #fef3c7; color: #92400e; }
.nb-inbox__filter.is-active .nb-inbox__filter-count--warn { background: #f59e0b; color: #fff; }

/* ─── Body 2 paneles ───────────────────────────────── */
.nb-inbox__body {
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: 0.85rem;
    flex: 1; min-height: 0;
}

/* ─── Lista ────────────────────────────────────────── */
.nb-inbox__list {
    background: #fff;
    border: 1px solid #e2e8ef;
    border-radius: 0.55rem;
    overflow-y: auto;
    min-height: 0;
}
.nb-inbox__list-inner { padding: 0.35rem; display: flex; flex-direction: column; gap: 0.2rem; }

.nb-inbox__item {
    position: relative;
    display: flex; gap: 0.55rem;
    padding: 0.65rem 0.7rem;
    border-radius: 0.45rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}
.nb-inbox__item:hover { background: #f8fafc; border-color: #e2e8ef; }
.nb-inbox__item.is-unseen { background: linear-gradient(135deg, #fffbeb 0%, #fff 60%); }
.nb-inbox__item.is-active {
    background: #eff6ff;
    border-color: #93c5fd;
}
.nb-inbox__item-icon {
    width: 2.2rem; height: 2.2rem;
    background: #eff6ff; color: #2563eb;
    border-radius: 0.4rem;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.nb-inbox__item.is-unseen .nb-inbox__item-icon { background: #fef3c7; color: #b45309; }
.nb-inbox__item-icon .material-symbols-outlined { font-size: 1.2rem; }

.nb-inbox__item-body { flex: 1; min-width: 0; }
.nb-inbox__item-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 0.4rem; margin-bottom: 0.15rem;
}
.nb-inbox__item-title {
    font-size: 0.85rem; color: #1a3c6e; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1; min-width: 0;
}
.nb-inbox__item.is-unseen .nb-inbox__item-title { font-weight: 800; }
.nb-inbox__item-date {
    font-size: 0.68rem; color: #94a3b8; white-space: nowrap;
}
.nb-inbox__item-snippet {
    margin: 0;
    font-size: 0.74rem; color: #64748b; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.nb-inbox__item-dot {
    position: absolute; top: 0.7rem; right: 0.7rem;
    width: 0.5rem; height: 0.5rem; border-radius: 50%;
    background: #f59e0b;
}

.nb-inbox__empty {
    padding: 2rem 1rem; text-align: center;
    color: #94a3b8;
}
.nb-inbox__empty .material-symbols-outlined {
    font-size: 2.5rem; color: #cbd5e1; margin-bottom: 0.4rem;
}
.nb-inbox__empty h5 {
    margin: 0 0 0.2rem;
    font-size: 1rem; font-weight: 700; color: #475569;
}
.nb-inbox__empty p { margin: 0; font-size: 0.82rem; }

/* ─── Detalle ──────────────────────────────────────── */
.nb-inbox__detail {
    background: #fff;
    border: 1px solid #e2e8ef;
    border-radius: 0.55rem;
    overflow-y: auto;
    min-height: 0;
    padding: 1rem 1.25rem;
}

.nb-inbox__back {
    display: none;
    align-items: center; gap: 0.3rem;
    margin-bottom: 0.7rem;
    background: transparent; border: none; padding: 0;
    color: #2563eb; font-size: 0.82rem; font-weight: 600;
    cursor: pointer;
}
.nb-inbox__back .material-symbols-outlined { font-size: 1.1rem; }

.nb-inbox__detail-head {
    padding-bottom: 0.85rem;
    border-bottom: 1px solid #eef2f7;
    margin-bottom: 0.85rem;
}
.nb-inbox__detail-title {
    margin: 0 0 0.5rem;
    font-size: 1.15rem; font-weight: 700; color: #1a3c6e; line-height: 1.3;
}
.nb-inbox__detail-meta {
    display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;
}
.nb-inbox__chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.25rem 0.65rem;
    border-radius: 1rem;
    font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.03rem;
}
.nb-inbox__chip .material-symbols-outlined { font-size: 0.85rem; }
.nb-inbox__chip--ok { background: #dcfce7; color: #166534; }
.nb-inbox__chip--warn { background: #fef3c7; color: #92400e; }
.nb-inbox__detail-date {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.72rem; color: #94a3b8;
}
.nb-inbox__detail-date .material-symbols-outlined { font-size: 0.9rem; }

.nb-inbox__detail-body p {
    margin: 0 0 0.8rem;
    font-size: 0.92rem; color: #334155; line-height: 1.6;
}
.nb-inbox__detail-body p:last-child { margin-bottom: 0; }

.nb-inbox__detail-empty {
    height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; color: #94a3b8; padding: 2rem;
}
.nb-inbox__detail-empty .material-symbols-outlined {
    font-size: 3rem; color: #cbd5e1; margin-bottom: 0.6rem;
}
.nb-inbox__detail-empty h5 {
    margin: 0 0 0.3rem;
    font-size: 1rem; font-weight: 700; color: #475569;
}
.nb-inbox__detail-empty p { margin: 0; font-size: 0.85rem; }

/* ─── Responsive ──────────────────────────────────── */
@media (max-width: 900px) {
    .nb-inbox__body {
        grid-template-columns: 1fr;
    }
    .nb-inbox__back { display: inline-flex; }
    .nb-inbox.is-detail-open .nb-inbox__list { display: none; }
}


/* =============================================================================
   EXPEDIENTE · MySpecialtiesComponent.vue
   Componente:  resources/js/components/expediente/especialidades/MySpecialtiesComponent.vue
   Apartado:    Mis especialidades del médico — vista principal con cards de cada especialidad
   Prefijo:     .myesp-*  (renombrado desde .ms-* para no chocar con namespace genérico de modales y otros)
   ============================================================================= */
/* ─────────────────────────────────────────────────────────────────────
   MIS ESPECIALIDADES — vista médico
   Sistema de cards con secciones colapsables, chips de estado y grid
   de documentos. Comparte tokens cromáticos con el dashboard.
   ───────────────────────────────────────────────────────────────────── */

.myesp-view {
    padding: 1rem 1.2rem 2rem;
    background: #f7f9fc;
    min-height: 100%;
}
.myesp-view *, .myesp-view *::before, .myesp-view *::after { box-sizing: border-box; }

/* ─── HERO de la página (paleta neutra/clara) ─── */
.myesp-hero {
    background: #fff;
    border: 1px solid #e2e8ef;
    border-radius: 0.75rem;
    padding: 1rem 1.2rem; margin-bottom: 1.1rem;
    box-shadow: 0 0.1rem 0.4rem rgba(15, 23, 42, 0.04);
}
.myesp-hero__main {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.myesp-hero__greet { display: flex; align-items: center; gap: 0.75rem; }
.myesp-hero__greet-icon {
    font-size: 1.6rem !important;
    background: #eff6ff; color: #1d4ed8;
    border-radius: 0.55rem;
    padding: 0.5rem; flex-shrink: 0;
}
.myesp-hero__title { margin: 0; font-size: 1.25rem; font-weight: 700; color: #1a3c6e; }
.myesp-hero__sub { margin: 0.15rem 0 0; font-size: 0.78rem; color: #64748b; }

.myesp-hero__stats {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem;
    margin-top: 0.9rem; padding-top: 0.9rem;
    border-top: 1px dashed #e2e8ef;
}
.myesp-stat {
    background: #f8fafc;
    border: 1px solid #e2e8ef;
    border-radius: 0.5rem;
    padding: 0.55rem 0.8rem;
    display: flex; flex-direction: column; gap: 0.1rem;
}
.myesp-stat__value { font-size: 1.35rem; font-weight: 700; line-height: 1; color: #1a3c6e; }
.myesp-stat__label {
    font-size: 0.66rem; color: #64748b;
    text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.myesp-stat--ok    { background: #f0fdf4; border-color: #bbf7d0; }
.myesp-stat--ok    .myesp-stat__value { color: #166534; }
.myesp-stat--info  { background: #eff6ff; border-color: #bfdbfe; }
.myesp-stat--info  .myesp-stat__value { color: #1d4ed8; }
.myesp-stat--warn  { background: #fffbeb; border-color: #fde68a; }
.myesp-stat--warn  .myesp-stat__value { color: #92400e; }

.myesp-add-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.55rem 1.1rem; border-radius: 0.5rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    font-weight: 600; font-size: 0.82rem; border: none; cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}
.myesp-add-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.3rem 0.7rem rgba(26, 60, 110, 0.25);
    color: #fff;
}
.myesp-add-btn .material-symbols-outlined { font-size: 1.05rem; }

/* ============================================================================
   HUB de "Mis especialidades" — wrapper, hero, stats, filtros, grid y cards.
   Las clases .myesp-hub__* dan estructura a la vista del médico. Se mantiene
   coherencia con la paleta navy del resto del expediente.
   Componente: resources/js/components/expediente/especialidades/MySpecialtiesComponent.vue
   ============================================================================ */

/* Wrapper del hub. El layout admin/medico tiene body{overflow:hidden} y un
   chain de alturas (#app=100vh → .content flex-grow:1 → .scroll-this h:100%)
   que en este caso impide que el scroll del wrapper externo realmente
   muestre la barra. Solución más directa: el hub se vuelve el scroll
   container usando `height` calculado contra viewport para no depender de
   ningún parent — así funciona en cualquier shell (admin sin .scroll-this,
   medico con .scroll-this max-h-93). El offset deja espacio para el
   .content-header y un margen pequeño. */
.myesp-hub {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1.2rem 2rem;
    background: #f1f5f9;
    box-sizing: border-box;
    height: calc(100vh - 4.5rem);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.myesp-hub::-webkit-scrollbar { width: 0.55rem; }
.myesp-hub::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    border-radius: 999px;
}
.myesp-hub::-webkit-scrollbar-track { background: #e2e8f0; }
.myesp-hub *, .myesp-hub *::before, .myesp-hub *::after { box-sizing: border-box; }

/* ─── HERO ─── */
.myesp-hub__hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    padding: 1.1rem 1.35rem;
    border-radius: 0.75rem;
    box-shadow: 0 0.25rem 0.7rem rgba(15, 23, 42, 0.12);
}
.myesp-hub__hero-main {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    flex: 1 1 auto;
}
.myesp-hub__hero-icon {
    font-size: 2.1rem !important;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    padding: 0.55rem;
    border-radius: 0.6rem;
    flex-shrink: 0;
}
.myesp-hub__title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    font-family: 'Merriweather', serif;
}
.myesp-hub__sub {
    margin: 0.15rem 0 0;
    font-size: 0.83rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.35;
}

/* ─── STATS (KPIs horizontales) ─── */
.myesp-hub__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 0.65rem;
}
.myesp-hub__stat {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0.9rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.6rem;
    box-shadow: 0 0.1rem 0.3rem rgba(15, 23, 42, 0.04);
    min-width: 0;
}
.myesp-hub__stat-ico {
    font-size: 1.4rem !important;
    color: #2e5c9e;
    background: #eff6ff;
    padding: 0.35rem;
    border-radius: 0.45rem;
    flex-shrink: 0;
}
.myesp-hub__stat b {
    font-size: 1.2rem;
    color: #1a3c6e;
    font-weight: 800;
    line-height: 1;
}
.myesp-hub__stat small {
    display: block;
    font-size: 0.7rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-top: 0.1rem;
}
.myesp-hub__stat--ok    { background: #f0fdf4; border-color: #bbf7d0; }
.myesp-hub__stat--ok    .myesp-hub__stat-ico { color: #16a34a; background: #dcfce7; }
.myesp-hub__stat--ok    b { color: #166534; }
.myesp-hub__stat--info  { background: #eff6ff; border-color: #bfdbfe; }
.myesp-hub__stat--info  .myesp-hub__stat-ico { color: #1d4ed8; background: #dbeafe; }
.myesp-hub__stat--info  b { color: #1d4ed8; }
.myesp-hub__stat--warn  { background: #fffbeb; border-color: #fde68a; }
.myesp-hub__stat--warn  .myesp-hub__stat-ico { color: #b45309; background: #fef3c7; }
.myesp-hub__stat--warn  b { color: #92400e; }

/* ─── FILTROS (chips de segment) ─── */
.myesp-hub__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.6rem;
    box-shadow: 0 0.1rem 0.3rem rgba(15, 23, 42, 0.04);
}
.myesp-hub__filter {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}
.myesp-hub__filter .material-symbols-outlined { font-size: 1rem; color: inherit; }
.myesp-hub__filter:hover {
    background: #f1f5f9;
    color: #1a3c6e;
}
.myesp-hub__filter.is-active {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    border-color: #1a3c6e;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.22);
}
.myesp-hub__filter.is-active .material-symbols-outlined { color: #ffffff; }
.myesp-hub__filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.2rem;
    padding: 0 0.4rem;
    background: rgba(46, 92, 158, 0.12);
    color: #1a3c6e;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: 0.15rem;
}
.myesp-hub__filter.is-active .myesp-hub__filter-count {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

/* ─── TABS de especialidades (solo aparece con 2+ tras el filtro) ─── */
.myesp-hub__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.35rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.6rem;
    box-shadow: 0 0.1rem 0.3rem rgba(15, 23, 42, 0.04);
}
.myesp-hub__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.8rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.45rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    max-width: 100%;
    min-width: 0;
}
.myesp-hub__tab-icon {
    font-size: 1.1rem !important;
    color: #94a3b8;
    flex-shrink: 0;
}
.myesp-hub__tab-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 18rem;
}
.myesp-hub__tab-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: #cbd5e1;
    flex-shrink: 0;
    box-shadow: 0 0 0 0.12rem rgba(255, 255, 255, 0.6);
}
.myesp-hub__tab-dot.myesp-chip--ok      { background: #16a34a; }
.myesp-hub__tab-dot.myesp-chip--warn    { background: #f59e0b; }
.myesp-hub__tab-dot.myesp-chip--info    { background: #2563eb; }
.myesp-hub__tab-dot.myesp-chip--danger  { background: #dc2626; }
.myesp-hub__tab-dot.myesp-chip--neutral { background: #94a3b8; }

.myesp-hub__tab:hover {
    background: #f1f5f9;
    color: #1a3c6e;
}
.myesp-hub__tab:hover .myesp-hub__tab-icon { color: #1a3c6e; }
.myesp-hub__tab.is-active {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    border-color: #1a3c6e;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.22);
}
.myesp-hub__tab.is-active .myesp-hub__tab-icon { color: rgba(255, 255, 255, 0.9); }
.myesp-hub__tab.is-active .myesp-hub__tab-dot {
    box-shadow: 0 0 0 0.14rem rgba(255, 255, 255, 0.45);
}

/* ─── GRID de cards de especialidades ─── */
.myesp-hub__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
    gap: 1rem;
    width: 100%;
}
/* Cuando hay tabs (o una sola especialidad) el card ocupa 1 sola columna full */
.myesp-hub__grid--single {
    grid-template-columns: minmax(0, 1fr);
}

/* ─── CARD individual ─── */
.myesp-hub__card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    box-shadow: 0 0.1rem 0.4rem rgba(15, 23, 42, 0.05);
    /* Sin overflow: hidden para permitir que el card crezca con todas las
       secciones internas (datos académicos + universidad + sede + historial
       + activa). El strip lateral usa border-radius del card y se ve bien
       sin clipping. */
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem 1.1rem 1.1rem 1.35rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.myesp-hub__card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 0.3rem 0.7rem rgba(15, 23, 42, 0.08);
}

/* Tira lateral izquierda con color según estado */
.myesp-hub__card-strip {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0.35rem;
    background: linear-gradient(180deg, #2e5c9e 0%, #1a3c6e 100%);
}
/* Modificadores de color de la tira lateral según cardAccentClass() —
   las clases vienen como .myesp-card--{ok,warn,danger,info,neutral} */
.myesp-card--ok      .myesp-hub__card-strip { background: linear-gradient(180deg, #16a34a 0%, #15803d 100%); }
.myesp-card--warn    .myesp-hub__card-strip { background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%); }
.myesp-card--danger  .myesp-hub__card-strip { background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%); }
.myesp-card--info    .myesp-hub__card-strip { background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%); }
.myesp-card--neutral .myesp-hub__card-strip { background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%); }

/* Cabecera de la card */
.myesp-hub__card-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px dashed #eef2f7;
    flex-wrap: wrap;
}
.myesp-hub__card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #1a3c6e;
    border-radius: 0.55rem;
    flex-shrink: 0;
}
.myesp-hub__card-icon .material-symbols-outlined { font-size: 1.35rem; color: #2e5c9e; }
.myesp-hub__card-title {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1 1 auto;
    min-width: 0;
}
.myesp-hub__card-title h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #1a3c6e;
    line-height: 1.25;
    word-break: break-word;
    font-family: 'Merriweather', serif;
}
.myesp-hub__card-sub {
    margin: 0;
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.3;
}

/* Responsive */
@media (max-width: 900px) {
    .myesp-hub__hero { padding: 0.95rem 1.05rem; }
    .myesp-hub__title { font-size: 1.15rem; }
    .myesp-hub__hero-icon { font-size: 1.7rem !important; padding: 0.45rem; }
}
@media (max-width: 600px) {
    .myesp-hub { padding: 0.7rem 0.8rem 1.5rem; }
    .myesp-hub__hero {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }
    .myesp-hub__add-btn { width: 100%; justify-content: center; }
    .myesp-hub__stats { grid-template-columns: 1fr 1fr; }
    .myesp-hub__card { padding: 0.85rem 0.95rem 0.95rem 1.15rem; }
}


/* ─── Botón "Agregar especialidad" del hub (MySpecialtiesComponent) ─── */
.myesp-hub__add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.15rem;
    border-radius: 0.55rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    white-space: nowrap;
    box-shadow: 0 0.15rem 0.45rem rgba(26, 60, 110, 0.22);
    text-decoration: none;
}
.myesp-hub__add-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.3rem 0.75rem rgba(26, 60, 110, 0.32);
    filter: brightness(1.08);
    color: #fff;
}
.myesp-hub__add-btn:active { transform: translateY(0); }
.myesp-hub__add-btn .material-symbols-outlined { font-size: 1.1rem; }

/* Estado deshabilitado: cuando el médico ya tiene todas las especialidades
   del catálogo registradas. Mantiene la forma del botón pero pierde color
   y aclara que no hay acción posible. */
.myesp-hub__add-btn.is-disabled,
.myesp-hub__add-btn.is-disabled:hover,
.myesp-hub__add-btn:disabled,
.myesp-hub__add-btn:disabled:hover {
    background: #e2e8f0;
    color: #94a3b8;
    border-color: #cbd5e1;
    cursor: not-allowed;
    box-shadow: none;
    filter: none;
    transform: none;
    opacity: 0.85;
}
.myesp-hub__add-btn.is-disabled .material-symbols-outlined,
.myesp-hub__add-btn:disabled .material-symbols-outlined { color: #94a3b8; }

/* ─── Identificación (cédula / folio) ─── */
.myesp-ids {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem;
    margin-bottom: 0.8rem;
}
.myesp-id {
    display: flex; align-items: center; gap: 0.65rem;
    background: #eff6ff; border: 1px solid #bfdbfe;
    border-radius: 0.5rem; padding: 0.55rem 0.75rem;
}
.myesp-id .material-symbols-outlined { font-size: 1.4rem; color: #1d4ed8; }
.myesp-id__label {
    display: block; font-size: 0.65rem; color: #1d4ed8;
    text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}
.myesp-id__value { display: block; font-size: 0.9rem; font-weight: 700; color: #1a3c6e; }

/* ─── Sub-cards: Universidad / Sede ─── */
.myesp-subcards {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem;
}
.myesp-subcard {
    background: #f8fafc; border: 1px solid #e2e8ef;
    border-radius: 0.55rem; padding: 0.8rem 0.95rem;
}
.myesp-subcard__head {
    display: flex; align-items: center; gap: 0.5rem;
    padding-bottom: 0.5rem; margin-bottom: 0.55rem;
    border-bottom: 1px dashed #e2e8ef;
}
.myesp-subcard__icon {
    font-size: 1.3rem !important; color: #1d4ed8;
    background: #dbeafe; border-radius: 0.4rem;
    padding: 0.3rem; flex-shrink: 0;
}
.myesp-subcard__title {
    margin: 0; font-size: 0.7rem; font-weight: 700; color: #64748b;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.myesp-subcard__name { margin: 0; font-size: 0.95rem; font-weight: 700; color: #1a3c6e; }
.myesp-subcard__meta { margin: 0.1rem 0 0.5rem; font-size: 0.72rem; color: #64748b; }
.myesp-subcard__body { display: flex; flex-direction: column; gap: 0.45rem; }
.myesp-meta {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 0.25rem;
}
.myesp-meta li {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 0.76rem; color: #475569;
}
.myesp-meta li .material-symbols-outlined { font-size: 1rem; color: #94a3b8; }
.myesp-meta li b { color: #1a3c6e; }

/* ─── EMPTY state ─── */
.myesp-empty {
    background: #fff; border: 1px dashed #cbd5e1; border-radius: 0.7rem;
    padding: 2.5rem 1rem; text-align: center; color: #64748b;
}
.myesp-empty .material-symbols-outlined { font-size: 3rem; color: #94a3b8; }
.myesp-empty h3 { margin: 0.5rem 0 0.3rem; font-size: 1rem; color: #475569; }
.myesp-empty p { margin: 0; font-size: 0.85rem; }

/* ─── CARD ─── */
.myesp-card {
    position: relative;
    background: #fff;
    border: 1px solid #e2e8ef;
    border-radius: 0.7rem;
    padding: 1rem 1.2rem 1rem 1.4rem;
    margin-bottom: 1rem;
    box-shadow: 0 0.1rem 0.3rem rgba(15, 23, 42, 0.04);
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.myesp-card:hover { box-shadow: 0 0.3rem 0.8rem rgba(15, 23, 42, 0.06); }
.myesp-card::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0;
    width: 0.32rem; background: #cbd5e1;
    border-top-left-radius: 0.7rem; border-bottom-left-radius: 0.7rem;
}
.myesp-card--ok::before      { background: linear-gradient(180deg, #22c55e, #16a34a); }
.myesp-card--info::before    { background: linear-gradient(180deg, #3b82f6, #1d4ed8); }
.myesp-card--warn::before    { background: linear-gradient(180deg, #f59e0b, #d97706); }
.myesp-card--neutral::before { background: linear-gradient(180deg, #cbd5e1, #94a3b8); }

/* HEADER de la card */
.myesp-card__head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 0.8rem; padding-bottom: 0.75rem; margin-bottom: 0.7rem;
    border-bottom: 1px solid #eef2f7;
}
.myesp-card__head-main { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.myesp-card__icon {
    width: 2.4rem; height: 2.4rem; border-radius: 0.55rem;
    background: #eff6ff; color: #1d4ed8;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.myesp-card__icon .material-symbols-outlined { font-size: 1.45rem; }
.myesp-card__head-text { min-width: 0; }
.myesp-card__title { margin: 0; font-size: 1.05rem; font-weight: 700; color: #1a3c6e; }
.myesp-card__subtitle { margin: 0.15rem 0 0; font-size: 0.75rem; color: #64748b; }
.myesp-card__head-actions { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }

.myesp-iconbtn {
    width: 2rem; height: 2rem; border-radius: 0.4rem;
    background: transparent; border: 1px solid #e2e8ef;
    color: #64748b; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s ease;
}
.myesp-iconbtn:hover { background: #f1f5f9; color: #1a3c6e; }
.myesp-iconbtn .material-symbols-outlined { font-size: 1.1rem; }

.myesp-editbtn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 0.45rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.myesp-editbtn:hover {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1e3a8a;
}
.myesp-editbtn .material-symbols-outlined { font-size: 1.05rem; }

.myesp-deletebtn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 0.45rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.myesp-deletebtn:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
}
.myesp-deletebtn .material-symbols-outlined { font-size: 1.05rem; }

.myesp-goldbtn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 0.45rem;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #92400e;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.myesp-goldbtn:hover {
    background: #fde68a;
    border-color: #f59e0b;
    color: #78350f;
}
.myesp-goldbtn .material-symbols-outlined { font-size: 1.05rem; color: #d97706; }

/* Header con botón a la derecha (vistas de listado) */
.myesp-form__header--withbtn {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 1rem; flex-wrap: wrap;
}

/* Grid de tarjetas (listado de hospitales / instituciones / etc.) — 2 columnas fijas */
.myesp-list-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}
@media (max-width: 900px) {
    .myesp-list-grid { grid-template-columns: 1fr; }
}
.myesp-list-card {
    background: #fff;
    border: 1px solid #e2e8ef;
    border-left: 4px solid #cbd5e1;
    border-radius: 0.55rem;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.myesp-list-card:hover { box-shadow: 0 0.15rem 0.5rem rgba(15, 23, 42, 0.07); transform: translateY(-1px); }
/* .myesp-list-card.is-principal → estilo global en sigme-styles.css (color azul de la app) */

.myesp-list-card__head {
    display: flex; align-items: center; gap: 0.55rem;
    flex-wrap: wrap;
}
.myesp-list-card__icon {
    width: 2.2rem; height: 2.2rem;
    background: #eff6ff; color: #2563eb;
    border-radius: 0.45rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.3rem !important;
    flex-shrink: 0;
}
/* .myesp-list-card.is-principal .myesp-list-card__icon → estilo global en sigme-styles.css */
.myesp-list-card__title {
    display: flex; flex-direction: column; min-width: 0; flex: 1;
}
.myesp-list-card__title b {
    font-size: 0.92rem; font-weight: 700; color: #1a3c6e;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.myesp-list-card__title small {
    font-size: 0.72rem; color: #64748b;
}
.myesp-list-card__chip {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 1rem;
    font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.03rem;
}
.myesp-list-card__chip .material-symbols-outlined { font-size: 0.9rem; }
.myesp-list-card__chip--gold {
    background: #fef3c7; color: #92400e;
}

.myesp-list-card__body p {
    margin: 0;
    font-size: 0.8rem;
    color: #475569;
    line-height: 1.45;
}
.myesp-list-card__warn {
    display: flex; align-items: flex-start; gap: 0.4rem;
    margin-top: 0.55rem;
    padding: 0.55rem 0.7rem;
    background: #fee2e2; border-left: 3px solid #dc2626;
    border-radius: 0.4rem;
    color: #991b1b; font-size: 0.75rem;
    line-height: 1.4;
}
.myesp-list-card__warn .material-symbols-outlined { font-size: 1.05rem; color: #dc2626; flex-shrink: 0; }

.myesp-list-card__actions {
    display: flex; gap: 0.4rem; flex-wrap: wrap;
    padding-top: 0.55rem;
    border-top: 1px dashed #eef2f7;
}

/* Empty state genérico para listados */
.myesp-list-empty {
    background: #fff; border: 1px dashed #cbd5e1;
    border-radius: 0.6rem;
    padding: 2rem 1rem; text-align: center;
    color: #64748b;
}
.myesp-list-empty .material-symbols-outlined {
    font-size: 2.5rem; color: #94a3b8;
    margin-bottom: 0.4rem;
}
.myesp-list-empty h5 {
    margin: 0 0 0.25rem;
    font-size: 1rem; font-weight: 700; color: #1a3c6e;
}
.myesp-list-empty p { margin: 0; font-size: 0.82rem; }

@media (max-width: 560px) {
    .myesp-editbtn span:last-child,
    .myesp-deletebtn span:last-child,
    .myesp-goldbtn span:last-child { display: none; }
    .myesp-editbtn,
    .myesp-deletebtn,
    .myesp-goldbtn { padding: 0.45rem 0.55rem; }
}

/* CHIPS */
.myesp-chip {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.22rem 0.6rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 600;
    border: 1px solid transparent; white-space: nowrap;
}
.myesp-chip .material-symbols-outlined { font-size: 0.95rem; }
.myesp-chip--sm { font-size: 0.68rem; padding: 0.18rem 0.5rem; }
.myesp-chip--sm .material-symbols-outlined { font-size: 0.85rem; }
.myesp-chip--ok      { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.myesp-chip--warn    { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.myesp-chip--info    { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.myesp-chip--neutral { background: #f1f5f9; color: #475569; border-color: #e2e8ef; }
.myesp-chip--danger  { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
/* Situación actual de la solicitud activa: chip RELLENO para que sea la
   información más visible del encabezado (destaca del estado y del proceso). */
.myesp-chip--situacion {
    background: #2563eb;
    color: #ffffff;
    border-color: transparent;
    font-weight: 700;
    box-shadow: 0 0.15rem 0.4rem rgba(37, 99, 235, 0.28);
}
.myesp-chip--situacion .material-symbols-outlined { color: #ffffff; }

/* Tarjeta de Mis Especialidades en dos columnas: izquierda = solicitudes
   (activa + historial), derecha = datos académicos. El DOM deja datos
   académicos primero; el `order` lo reubica a la derecha. En tarjetas
   angostas se apila en una sola columna (solicitudes primero). */
.myesp-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}
.myesp-cols__sol {
    order: 1;
    flex: 1 1 22rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.myesp-cols__acad {
    order: 2;
    flex: 1 1 17rem;
    min-width: 0;
}
/* En la columna derecha (más angosta) la universidad y la sede de residencia se
   apilan al 100% del ancho, en vez de ir lado a lado. */
.myesp-cols__acad .myesp-subcards {
    grid-template-columns: 1fr;
}

/* SECCIONES */
.myesp-section { padding-top: 0.85rem; margin-top: 0.5rem; border-top: 1px dashed #eef2f7; }
.myesp-section:first-of-type { padding-top: 0.6rem; margin-top: 0; border-top: none; }
.myesp-section__title {
    display: flex; align-items: center; gap: 0.4rem;
    margin: 0 0 0.6rem; font-size: 0.72rem; font-weight: 700;
    color: #64748b; text-transform: uppercase; letter-spacing: 0.05em;
}
.myesp-section__title .material-symbols-outlined { font-size: 1.05rem; color: #94a3b8; }
.myesp-section__caret { transition: transform 0.15s ease; }
.myesp-section__tag {
    margin-left: auto; font-size: 0.7rem; color: #475569; text-transform: none;
    letter-spacing: 0; font-weight: 500;
}
.myesp-section__head {
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; user-select: none; gap: 0.5rem;
}
.myesp-section__head:hover .myesp-section__title { color: #1a3c6e; }
.myesp-section--collapsible .myesp-section__title { margin-bottom: 0; }
.myesp-section__body { margin-top: 0.7rem; }

/* Variante: Solicitud activa — fondo azul claro, acento izquierdo azul.
   Comunica: "tienes un proceso en curso, esto requiere atención". */
.myesp-section--activa {
    background: linear-gradient(180deg, #eff6ff 0%, #f8fbff 100%);
    border: 1px solid #bfdbfe; border-left: 4px solid #2563eb;
    border-radius: 0.55rem;
    padding: 0.85rem 1rem;
    margin-top: 0.85rem;
}
.myesp-section--activa .myesp-section__title { color: #1d4ed8; }
.myesp-section--activa .myesp-section__title .myesp-section__icon { color: #2563eb; }
.myesp-section--activa .myesp-section__tag { color: #1e3a8a; }

/* Variante: Historial — fondo crema claro, acento ámbar.
   Comunica: "registros del pasado, certificaciones logradas". */
.myesp-section--historial {
    background: linear-gradient(180deg, #fffbeb 0%, #fefcf5 100%);
    border: 1px solid #fde68a; border-left: 4px solid #d97706;
    border-radius: 0.55rem;
    padding: 0.85rem 1rem;
    margin-top: 0.85rem;
}
.myesp-section--historial .myesp-section__title { color: #92400e; }
.myesp-section--historial .myesp-section__title .myesp-section__icon { color: #d97706; }
.myesp-section--historial .myesp-section__tag { color: #78350f; }

.myesp-subsection__title {
    display: flex; align-items: center; gap: 0.35rem;
    margin: 0.8rem 0 0.5rem; font-size: 0.78rem; font-weight: 700; color: #1a3c6e;
}
.myesp-subsection__title .material-symbols-outlined { font-size: 1rem; color: #1a3c6e; }

/* FIELDS (grid de etiqueta + valor) */
.myesp-fields {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1.2rem;
}
.myesp-fields--compact { gap: 0.4rem 1.2rem; }

/* Línea horizontal de datos: chips compactos label + valor.
   En pantallas chicas hace wrap automático en varias líneas. */
.myesp-inline {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.4rem 0.6rem;
    padding: 0.55rem 0.7rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #bfdbfe;
    border-radius: 0.45rem;
    margin-bottom: 0.7rem;
}
.myesp-inline__item {
    display: inline-flex; align-items: baseline; gap: 0.25rem;
    font-size: 0.78rem; color: #1a3c6e;
    padding: 0.1rem 0;
}
.myesp-inline__item:not(:last-child)::after {
    content: '·'; color: #94a3b8; margin-left: 0.5rem;
}
.myesp-inline__label {
    font-size: 0.66rem; color: #64748b;
    text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}
.myesp-inline__item b { color: #1a3c6e; font-weight: 700; }
.myesp-field { display: flex; flex-direction: column; min-width: 0; }
.myesp-field__label {
    font-size: 0.65rem; color: #94a3b8; text-transform: uppercase;
    letter-spacing: 0.04em; font-weight: 600; margin-bottom: 0.1rem;
}
.myesp-field__value {
    font-size: 0.85rem; color: #1a3c6e; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis;
}
.myesp-field__value small { color: #64748b; font-weight: 500; }

/* BANNERS */
.myesp-banner {
    display: flex; align-items: flex-start; gap: 0.5rem;
    padding: 0.55rem 0.75rem; border-radius: 0.45rem;
    border-left: 3px solid #94a3b8;
    background: #f8fafc;
    font-size: 0.78rem; color: #1a3c6e; line-height: 1.4;
    margin: 0.5rem 0;
}
.myesp-banner .material-symbols-outlined { font-size: 1.15rem; flex-shrink: 0; color: #94a3b8; }
.myesp-banner--warn    { background: #fef3c7; border-left-color: #d97706; color: #78350f; }
.myesp-banner--warn .material-symbols-outlined { color: #d97706; }
.myesp-banner--info    { background: #eff6ff; border-left-color: #2563eb; color: #1e3a8a; }
.myesp-banner--info .material-symbols-outlined { color: #2563eb; }
.myesp-banner--ok      { background: #dcfce7; border-left-color: #16a34a; color: #166534; }
.myesp-banner--ok .material-symbols-outlined { color: #16a34a; }
.myesp-banner--neutral { background: #f1f5f9; border-left-color: #94a3b8; color: #475569; }

/* Variante de alerta crítica: el médico necesita contactar al Consejo. Más enérgica
   que --warn — fondo rojo claro, borde rojo, ícono rojo. Soporta sub-elementos
   estructurados (title + body + action). */
.myesp-banner--alert {
    background: linear-gradient(135deg, #fee2e2 0%, #fef2f2 100%);
    border-left: 4px solid #c5221f;
    color: #7f1d1d;
    padding: 0.75rem 0.9rem;
    align-items: flex-start;
}
.myesp-banner--alert .material-symbols-outlined { color: #c5221f; font-size: 1.4rem !important; }
.myesp-banner__body { flex: 1; min-width: 0; }
.myesp-banner__title {
    margin: 0 0 0.25rem !important;
    font-size: 0.86rem;
    font-weight: 700;
    color: #7f1d1d;
}
.myesp-banner--alert .myesp-banner__body p {
    margin: 0 0 0.35rem !important;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #7f1d1d;
}
.myesp-banner--alert .myesp-banner__body p:last-child { margin-bottom: 0 !important; }
.myesp-banner__action {
    background: rgba(255, 255, 255, 0.55);
    border: 1px dashed rgba(197, 34, 31, 0.4);
    border-radius: 0.35rem;
    padding: 0.4rem 0.55rem;
}

/* DOCS (cards de documento — usados anidados dentro de sub-cards) */
.myesp-doc {
    background: #fff; border: 1px solid #e2e8ef; border-radius: 0.55rem;
    padding: 0.7rem 0.8rem;
    display: flex; flex-direction: column; gap: 0.45rem;
}
/* Variante anidada: vive dentro de .myesp-subcard, separada por una línea punteada */
.myesp-doc--nested {
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    background: rgba(255, 255, 255, 0.7);
    border-color: #e2e8ef;
    border-top: 1px dashed #cbd5e1;
    border-radius: 0.4rem;
}
.myesp-doc--ok      { background: #f0fdf4; border-color: #bbf7d0; }
.myesp-doc--warn    { background: #fffbeb; border-color: #fde68a; }
.myesp-doc--info    { background: #eff6ff; border-color: #bfdbfe; }
.myesp-doc--neutral { background: #f8fafc; border-color: #e2e8ef; }
.myesp-doc__head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.myesp-doc__label { margin: 0; font-size: 0.82rem; font-weight: 700; color: #1a3c6e; }
.myesp-doc__note { margin: 0; font-size: 0.74rem; color: #475569; line-height: 1.4; }
.myesp-doc__actions {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    padding-top: 0.4rem; border-top: 1px dashed #e2e8ef;
}

/* LINKBTN (acciones secundarias compactas) */
.myesp-linkbtn {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.3rem 0.55rem; border-radius: 0.4rem;
    background: transparent; border: 1px solid #e2e8ef;
    color: #1a3c6e; font-size: 0.72rem; font-weight: 600;
    cursor: pointer; transition: all 0.15s ease;
}
.myesp-linkbtn:hover { background: #f1f5f9; border-color: #cbd5e1; }
.myesp-linkbtn .material-symbols-outlined { font-size: 0.95rem; }
.myesp-linkbtn--danger { color: #b91c1c; border-color: #fecaca; }
.myesp-linkbtn--danger:hover { background: #fef2f2; }

/* TRONCALES */
.myesp-troncal {
    background: #fff; border: 1px solid #e2e8ef; border-radius: 0.5rem;
    padding: 0.7rem 0.85rem; margin-bottom: 0.5rem;
}
.myesp-troncal__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem; margin-bottom: 0.4rem;
}
.myesp-troncal__name { margin: 0; font-size: 0.85rem; color: #1a3c6e; }
.myesp-troncal__body { display: flex; flex-direction: column; gap: 0.4rem; }
.myesp-troncal__meta {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem;
    font-size: 0.72rem; color: #475569;
}
.myesp-troncal__meta li b { color: #1a3c6e; }
.myesp-troncal__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-top: 0.4rem; border-top: 1px dashed #e2e8ef; }

/* HISTORIAL — Timeline vertical */
.myesp-timeline {
    position: relative;
    padding-left: 1.4rem;
}
.myesp-timeline::before {
    content: ''; position: absolute;
    top: 0.5rem; bottom: 0.5rem; left: 0.65rem;
    width: 2px; background: #e2e8ef;
}
.myesp-timeline__item {
    position: relative; padding-bottom: 0.7rem;
}
.myesp-timeline__item:last-child { padding-bottom: 0; }
.myesp-timeline__dot {
    position: absolute; top: 0; left: -1.4rem;
    width: 1.7rem; height: 1.7rem; border-radius: 50%;
    background: #fff; border: 2px solid #cbd5e1;
    display: flex; align-items: center; justify-content: center;
    z-index: 1;
}
.myesp-timeline__dot .material-symbols-outlined { font-size: 0.95rem; color: #94a3b8; }
.myesp-timeline__item--ok .myesp-timeline__dot     { border-color: #16a34a; background: #dcfce7; }
.myesp-timeline__item--ok .myesp-timeline__dot .material-symbols-outlined { color: #16a34a; }
.myesp-timeline__item--warn .myesp-timeline__dot   { border-color: #d97706; background: #fef3c7; }
.myesp-timeline__item--warn .myesp-timeline__dot .material-symbols-outlined { color: #d97706; }
.myesp-timeline__item--danger .myesp-timeline__dot { border-color: #dc2626; background: #fee2e2; }
.myesp-timeline__item--danger .myesp-timeline__dot .material-symbols-outlined { color: #dc2626; }

.myesp-timeline__card {
    background: #fff; border: 1px solid #e2e8ef; border-radius: 0.55rem;
    padding: 0.7rem 0.85rem;
    box-shadow: 0 0.1rem 0.3rem rgba(15, 23, 42, 0.03);
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.myesp-timeline__card:hover { box-shadow: 0 0.3rem 0.7rem rgba(15, 23, 42, 0.06); }
.myesp-timeline__item--ok .myesp-timeline__card     { border-left: 3px solid #16a34a; }
.myesp-timeline__item--warn .myesp-timeline__card   { border-left: 3px solid #d97706; }
.myesp-timeline__item--danger .myesp-timeline__card { border-left: 3px solid #dc2626; }

.myesp-timeline__head {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.myesp-timeline__proceso { margin: 0; font-size: 0.88rem; font-weight: 700; color: #1a3c6e; }
.myesp-timeline__situacion { margin: 0.1rem 0 0; font-size: 0.72rem; color: #64748b; }

.myesp-timeline__vig {
    display: flex; align-items: center; gap: 0.35rem;
    background: #f8fafc; border-radius: 0.4rem; padding: 0.35rem 0.55rem;
    font-size: 0.76rem; color: #1a3c6e; margin-bottom: 0.4rem;
}
.myesp-timeline__vig .material-symbols-outlined { font-size: 1rem; color: #64748b; }
.myesp-timeline__vig b { color: #1a3c6e; }

.myesp-timeline__meta {
    list-style: none; margin: 0 0 0.4rem; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem 0.85rem;
    font-size: 0.72rem; color: #475569;
    background: #f8fafc; border-radius: 0.4rem; padding: 0.55rem 0.7rem;
}
.myesp-timeline__meta li {
    display: flex; flex-direction: column; gap: 0.1rem; min-width: 0;
}
.myesp-timeline__meta li span {
    color: #94a3b8; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.03rem; font-weight: 600;
}
.myesp-timeline__meta li b {
    color: #1a3c6e; font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.myesp-timeline__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-top: 0.4rem; }

/* RESPONSIVE */
@media (max-width: 1100px) {
    .myesp-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
    .myesp-timeline__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .myesp-fields { grid-template-columns: 1fr; }
    .myesp-subcards { grid-template-columns: 1fr; }
    .myesp-ids { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .myesp-timeline__meta { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .myesp-hero__main { flex-direction: column; align-items: stretch; }
    .myesp-add-btn { width: 100%; justify-content: center; }
    .myesp-card__head { flex-direction: column; align-items: flex-start; }
    .myesp-card__head-actions { width: 100%; justify-content: flex-end; }
}

/* ============================================================
   FORM — Nueva/Editar especialidad (estilo myesp-subcard)
   ============================================================ */
.myesp-form-view {
    display: block;
    height: 100%;
}
.myesp-form {
    background: #f8fafc;
    padding: 1rem 1.25rem 3rem;
    height: 100%;
}
.myesp-form__header {
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid #e2e8ef;
}
.myesp-form__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a3c6e;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.myesp-form__title .material-symbols-outlined { font-size: 1.3rem; color: #2563eb; }
.myesp-form__subtitle {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: #64748b;
}

.myesp-form__card {
    padding: 1rem 1.1rem;
    margin-bottom: 0.9rem;
    background: #fff;
    border: 1px solid #e2e8ef;
    border-radius: 0.55rem;
}
.myesp-form__cardhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px dashed #eef2f7;
}
.myesp-form__cardhead-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.myesp-form__toggle {
    display: inline-flex;
    border-radius: 0.5rem;
    background: #f1f5f9;
    padding: 0.2rem;
    gap: 0.2rem;
}
.myesp-form__toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.85rem;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 0.4rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.myesp-form__toggle-btn:hover { color: #1a3c6e; }
.myesp-form__toggle-btn .material-symbols-outlined { font-size: 1rem; }
.myesp-form__toggle-btn.is-active {
    background: #fff;
    color: #1d4ed8;
    box-shadow: 0 0.1rem 0.3rem rgba(15, 23, 42, 0.08);
}

/* --- Banner de ayuda (CTA para alta de catálogo) — llamativo pero suave --- */
.myesp-form__help {
    border: 1px solid #fcd34d;
    border-left: 4px solid #f59e0b;
    border-radius: 0.55rem;
    margin-bottom: 0.95rem;
    background: linear-gradient(135deg, #fffbeb 0%, #fefce8 100%);
    overflow: hidden;
    box-shadow: 0 0.1rem 0.3rem rgba(217, 119, 6, 0.06);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.myesp-form__help:hover {
    box-shadow: 0 0.2rem 0.5rem rgba(217, 119, 6, 0.1);
    transform: translateY(-1px);
}
.myesp-form__help summary {
    list-style: none;
    cursor: pointer;
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    user-select: none;
}
.myesp-form__help summary::-webkit-details-marker { display: none; }
.myesp-form__help-icon {
    font-size: 1.5rem !important;
    color: #b45309;
    background: #fff;
    border-radius: 50%;
    padding: 0.3rem;
    flex-shrink: 0;
    box-shadow: 0 0.1rem 0.2rem rgba(217, 119, 6, 0.1);
}
.myesp-form__help-summary {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 0.15rem;
}
.myesp-form__help-summary b {
    font-size: 0.92rem;
    font-weight: 700;
    color: #78350f;
    line-height: 1.2;
}
.myesp-form__help-summary small {
    font-size: 0.78rem;
    color: #92400e;
    line-height: 1.3;
    font-weight: 500;
}
.myesp-form__help-caret {
    font-size: 1.4rem !important;
    color: #d97706;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.myesp-form__help[open] .myesp-form__help-caret { transform: rotate(180deg); }
.myesp-form__help[open] summary { border-bottom: 1px solid #fde68a; }
.myesp-form__help-body {
    padding: 0.85rem 1rem 1rem;
    background: #fffdf5;
    font-size: 0.82rem;
    color: #57534e;
    line-height: 1.5;
}
.myesp-form__help-body p { margin: 0 0 0.55rem; }
.myesp-form__help-body ul {
    margin: 0 0 0.7rem 1.3rem;
    padding: 0;
    line-height: 1.65;
}
.myesp-form__help-body a { color: #b45309; font-weight: 700; text-decoration: underline; }
.myesp-form__help-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
    padding: 0.55rem 1rem;
    background: #d97706;
    color: #fff !important;
    border-radius: 0.4rem;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: background 0.15s ease;
}
.myesp-form__help-cta:hover { background: #b45309; color: #fff !important; }
.myesp-form__help-cta .material-symbols-outlined { font-size: 1.05rem; }

/* --- Bloque profesores (siempre visible, no colapsable) --- */
.myesp-form__profesores {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px dashed #e2e8ef;
}
.myesp-form__profesores-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #1a3c6e;
}
.myesp-form__profesores-title .material-symbols-outlined {
    font-size: 1.1rem;
    color: #64748b;
}
.myesp-form__profesores-title small {
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 500;
}

/* --- Details discretos (otros bloques opcionales) — diseño sutil --- */
.myesp-form__details {
    border: 1px solid #e2e8ef;
    border-radius: 0.45rem;
    margin-bottom: 0.85rem;
    background: #f8fafc;
    overflow: hidden;
}
.myesp-form__details summary {
    list-style: none;
    cursor: pointer;
    padding: 0.55rem 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #1a3c6e;
    user-select: none;
}
.myesp-form__details summary::-webkit-details-marker { display: none; }
.myesp-form__details summary .material-symbols-outlined { font-size: 1rem; color: #64748b; }
.myesp-form__details summary small { color: #94a3b8; font-weight: 500; }
.myesp-form__details[open] summary {
    border-bottom: 1px solid #e2e8ef;
    background: #fff;
}
.myesp-form__details-body {
    padding: 0.75rem 0.85rem;
    background: #fff;
    font-size: 0.78rem;
    color: #475569;
}

.myesp-form__subhead {
    margin: 0.5rem 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04rem;
    color: #94a3b8;
}
.myesp-form__subhead:first-child { margin-top: 0; }

.myesp-form__grid {
    display: grid;
    gap: 0.7rem 0.9rem;
    margin-bottom: 0.7rem;
}
.myesp-form__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.myesp-form__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.myesp-form__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.myesp-form__grid:last-child { margin-bottom: 0; }

.myesp-form__field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.myesp-form__field label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.3rem;
    line-height: 1.2;
}
.myesp-form__req::before {
    content: '* ';
    color: #dc2626;
    font-weight: 700;
}
.myesp-form__field input,
.myesp-form__field select,
.myesp-form__field textarea {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.4rem;
    background: #fff;
    font-size: 0.85rem;
    color: #1a3c6e;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.myesp-form__field textarea {
    resize: vertical;
    min-height: 4.5rem;
    line-height: 1.4;
}
.myesp-form__field input:focus,
.myesp-form__field select:focus,
.myesp-form__field textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.myesp-form__field input:hover:not(:focus),
.myesp-form__field select:hover:not(:focus),
.myesp-form__field textarea:hover:not(:focus) { border-color: #94a3b8; }

/* --- Layout 70/30 con panel de acciones sticky --- */
.myesp-form__layout {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: 1rem;
    align-items: start;
}
.myesp-form__main { min-width: 0; }
.myesp-form__aside {
    position: sticky;
    top: 0.75rem;
    align-self: start;
}
.myesp-form__aside-card {
    background: #fff;
    border: 1px solid #e2e8ef;
    border-radius: 0.55rem;
    box-shadow: 0 0.15rem 0.5rem rgba(15, 23, 42, 0.06);
    padding: 1rem 1.1rem;
}
.myesp-form__aside-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.4rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: #1a3c6e;
}
.myesp-form__aside-title .material-symbols-outlined {
    font-size: 1.1rem;
    color: #16a34a;
}
.myesp-form__aside-note {
    margin: 0 0 0.65rem;
    font-size: 0.78rem;
    color: #475569;
    line-height: 1.4;
}
.myesp-form__aside-hint {
    margin: 0 0 0.85rem;
    font-size: 0.72rem;
    color: #64748b;
    padding: 0.55rem 0.7rem;
    background: #f8fafc;
    border-radius: 0.35rem;
    line-height: 1.4;
}
.myesp-form__aside-actions {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.myesp-form__aside-btn {
    width: 100%;
    justify-content: center;
}
.myesp-form__footer-note {
    margin: 0;
    font-size: 0.75rem;
    color: #64748b;
}
.myesp-form__req-star { color: #dc2626; font-weight: 700; }
.myesp-form__footer-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

@media (max-width: 1100px) {
    .myesp-form__layout { grid-template-columns: 1fr; }
    .myesp-form__aside {
        position: static;
        order: -1;
    }
    .myesp-form__aside-actions { flex-direction: row; flex-wrap: wrap; }
    .myesp-form__aside-btn { width: auto; flex: 1; min-width: 10rem; }
}
@media (max-width: 900px) {
    .myesp-form__grid--3,
    .myesp-form__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .myesp-form { padding: 0.75rem 0.85rem 1rem; }
    .myesp-form__grid--2,
    .myesp-form__grid--3,
    .myesp-form__grid--4 { grid-template-columns: 1fr; }
    .myesp-form__cardhead { flex-direction: column; align-items: stretch; }
    .myesp-form__toggle { align-self: flex-start; }
    .myesp-form__aside-actions { flex-direction: column; }
    .myesp-form__aside-btn { width: 100%; }
}


/* =============================================================================
   SISTEMA DE FORMS .ms-form / .ms-subcard / .ms-list-card (BASE)
   -----------------------------------------------------------------------------
   Base reconstruida para el sistema de formularios y listados del expediente.
   Define las clases compartidas por las secciones del expediente:
   - resources/js/components/expediente/datos_personales/PersonalInformationComponent.vue
   - resources/js/components/expediente/datos_personales/UpdateEmailComponent.vue
   - resources/js/components/expediente/direccion_personal/AddressResidesComponent.vue
   - resources/js/components/expediente/direccion_fiscal/FiscalAddressComponent.vue
   - resources/js/components/expediente/hospital/HospitalComponent.vue
   - resources/js/components/expediente/institucion/InstitutionComponent.vue
   (y reutilizadas por consejo/*, asociaciones/*, especialidades/*, etc.).
   Paleta navy (#1a3c6e / #2e5c9e) sobre slate, igual que csj-shell / hs-form.
   ============================================================================= */

/* ─── Contenedor de vista ─────────────────────────────────────────────── */
/* Importante: usamos `height: calc(100vh - 4.5rem)` en lugar de `height: 100%`
   porque la cadena de alturas en este shell (#app 100vh → .content flex-grow:1
   → .ms-form-view) no resuelve consistentemente — varias vistas (datos_personales,
   etc.) no llevan el wrapper `.scroll-this max-h-93`, y `100%` deja a la vista
   sin altura efectiva, impidiendo que el `.ms-form` interno (que tiene su
   propio overflow-y:auto) llegue a scrollear hasta el final. El offset 4.5rem
   compensa el `.content-header` que vive arriba. */
.ms-form-view {
    width: 100%;
    height: calc(100vh - 4.5rem);
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #f1f5f9;
    padding: 0.85rem 1rem;
    box-sizing: border-box;
}

/* Form (o div) que contiene header + layout. scroll-this le da scroll interno
   en vistas admin; en SE_MEDICO el wrapper externo .scroll-this hace el scroll. */
.ms-form {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    box-shadow: 0 0.15rem 0.4rem rgba(15, 23, 42, 0.05);
    padding: 1rem 1.1rem 1.1rem;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #2e5c9e #f1f5f9;
}
.ms-form::-webkit-scrollbar { width: 0.55rem; }
.ms-form::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1a3c6e 0%, #2e5c9e 100%);
    border-radius: 999px;
}
.ms-form::-webkit-scrollbar-track { background: #f1f5f9; }

/* ─── Cabecera de la vista (título + subtítulo) ──────────────────────── */
.ms-form__header {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px dashed #e2e8f0;
}
.ms-form__header--withbtn {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
}
.ms-form__header--withbtn > div { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.ms-form__header--withbtn .btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
}

/* Card de contexto en cabecera del form de troncales: muestra qué consejo y
   qué especialidad troncal se está registrando, destacado en color dorado. */
.ms-form__context {
    margin-top: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
    border: 1px solid rgba(217, 119, 6, 0.3);
    border-left: 4px solid #d97706;
    border-radius: 0.5rem;
    padding: 0.6rem 0.85rem;
    align-self: flex-start;
    max-width: 100%;
}
.ms-form__context .material-symbols-outlined {
    color: #b45309;
    font-size: 1.5rem !important;
    flex-shrink: 0;
}
.ms-form__context-consejo {
    margin: 0 !important;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #92400e;
}
.ms-form__context-especialidad {
    margin: 0.1rem 0 0 !important;
    font-size: 0.95rem;
    font-weight: 700;
    color: #78350f;
    line-height: 1.25;
}

/* Chip "Opcional" en headers de subcards (ej. adjuntar PDF del certificado) */
.ms-form__opt-chip {
    margin-left: auto;
    background: rgba(46, 92, 158, 0.08);
    color: #2e5c9e;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(46, 92, 158, 0.2);
}

.ms-form__title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a3c6e;
    line-height: 1.25;
}
.ms-form__title .material-symbols-outlined {
    font-size: 1.4rem;
    color: #2e5c9e;
}
.ms-form__subtitle {
    margin: 0;
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.35;
}

/* ─── Layout main + aside ────────────────────────────────────────────── */
.ms-form__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 17rem;
    gap: 1rem;
    align-items: start;
    width: 100%;
    min-width: 0;
}
.ms-form__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* ─── Aside sticky con resumen y botón guardar ───────────────────────── */
.ms-form__aside {
    position: sticky;
    top: 0;
    align-self: start;
    min-width: 0;
}
.ms-form__aside-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.6rem;
    box-shadow: 0 0.15rem 0.4rem rgba(15, 23, 42, 0.05);
    padding: 0.9rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.ms-form__aside-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #1a3c6e;
    line-height: 1.2;
}
.ms-form__aside-title .material-symbols-outlined {
    font-size: 1.15rem;
    color: #2e5c9e;
}
.ms-form__aside-note {
    margin: 0;
    font-size: 0.78rem;
    color: #475569;
    line-height: 1.4;
}
.ms-form__aside-hint {
    margin: 0;
    font-size: 0.72rem;
    color: #64748b;
    line-height: 1.4;
}
.ms-form__req-star { color: #dc2626; font-weight: 700; }
.ms-form__aside-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.25rem;
}
.ms-form__aside-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    padding: 0.55rem 0.85rem;
}
.ms-form__aside-btn .material-symbols-outlined { font-size: 1.1rem; }

/* ─── Tarjetas internas (subcard) ────────────────────────────────────── */
.ms-subcard {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.55rem;
    padding: 0.85rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    box-shadow: 0 0.1rem 0.25rem rgba(15, 23, 42, 0.04);
}
.ms-subcard__head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed #eef2f7;
}
.ms-subcard__icon {
    font-size: 1.2rem !important;
    color: #2e5c9e;
    flex-shrink: 0;
}
.ms-subcard__title {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: #1a3c6e;
    line-height: 1.25;
}

/* Cabecera de card con toggle/acción a la derecha */
.ms-form__cardhead {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.ms-form__cardhead-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

/* ─── Grid de campos ─────────────────────────────────────────────────── */
.ms-form__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem 0.85rem;
    width: 100%;
}
.ms-form__grid--1 { grid-template-columns: minmax(0, 1fr); }
.ms-form__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ms-form__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ms-form__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ─── Campo (label + control) ────────────────────────────────────────── */
.ms-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}
.ms-form__field > label {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 600;
    color: #475569;
    letter-spacing: 0.01em;
    line-height: 1.2;
}
.ms-form__req::after {
    content: ' *';
    color: #dc2626;
    font-weight: 700;
}
.ms-form__field > input,
.ms-form__field > select,
.ms-form__field > textarea {
    width: 100%;
    min-width: 0;
    padding: 0.5rem 0.65rem;
    font-size: 0.85rem;
    color: #1f2937;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0.4rem;
    line-height: 1.3;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    box-sizing: border-box;
    font-family: inherit;
}
.ms-form__field > textarea { resize: vertical; min-height: 4.5rem; }
.ms-form__field > input::placeholder,
.ms-form__field > textarea::placeholder { color: #94a3b8; }
.ms-form__field > input:hover,
.ms-form__field > select:hover,
.ms-form__field > textarea:hover { border-color: #93c5fd; }
.ms-form__field > input:focus,
.ms-form__field > select:focus,
.ms-form__field > textarea:focus {
    outline: none;
    border-color: #2e5c9e;
    box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.18);
    background: #f8fafc;
}
.ms-form__field > input[readonly],
.ms-form__field > input:disabled,
.ms-form__field > select:disabled,
.ms-form__field > textarea:disabled {
    background: #f1f5f9;
    color: #64748b;
    cursor: not-allowed;
}

/* ─── Toggle binario (Mexicana/Extranjera, Principal/Secundario, etc.) ─ */
.ms-form__toggle {
    display: inline-flex;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 0.45rem;
    padding: 0.2rem;
    gap: 0.2rem;
}
.ms-form__toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}
.ms-form__toggle-btn .material-symbols-outlined {
    font-size: 1rem;
    color: inherit;
}
.ms-form__toggle-btn:hover { background: #e2e8f0; color: #1a3c6e; }
.ms-form__toggle-btn.is-active {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    border-color: #1a3c6e;
    box-shadow: 0 0.15rem 0.35rem rgba(26, 60, 110, 0.25);
}
.ms-form__toggle-btn.is-active .material-symbols-outlined { color: #ffffff; }

/* ─── Bloque <details> de ayuda colapsable ───────────────────────────── */
.ms-form__help {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #2e5c9e;
    border-radius: 0.45rem;
    padding: 0;
    margin: 0 0 0.4rem;
}
.ms-form__help > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.75rem;
    user-select: none;
}
.ms-form__help > summary::-webkit-details-marker { display: none; }
.ms-form__help-icon { font-size: 1.15rem !important; color: #2e5c9e; flex-shrink: 0; }
.ms-form__help-summary {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1 1 auto;
    min-width: 0;
}
.ms-form__help-summary b { font-size: 0.82rem; color: #1a3c6e; line-height: 1.25; }
.ms-form__help-summary small { font-size: 0.72rem; color: #64748b; line-height: 1.3; }
.ms-form__help-caret {
    font-size: 1.2rem !important;
    color: #64748b;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.ms-form__help[open] .ms-form__help-caret { transform: rotate(180deg); }
.ms-form__help-body {
    padding: 0.2rem 0.85rem 0.8rem;
    border-top: 1px dashed #e2e8f0;
    color: #475569;
    font-size: 0.8rem;
    line-height: 1.45;
}
.ms-form__help-body p { margin: 0.5rem 0; }
.ms-form__help-body ul { margin: 0.4rem 0 0.6rem 1.1rem; padding: 0; }
.ms-form__help-body li { margin: 0.15rem 0; }
.ms-form__help-body a { color: #2563eb; text-decoration: underline; }
.ms-form__help-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff !important;
    border-radius: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: filter 0.15s;
}
.ms-form__help-cta:hover { filter: brightness(1.1); }
.ms-form__help-cta .material-symbols-outlined { font-size: 1rem; }


/* =============================================================================
   LISTADO .ms-list-grid / .ms-list-card (BASE)
   -----------------------------------------------------------------------------
   Cards usadas en vistas listado de Hospital privado / Institución pública
   (y compartidas con MySpecialtiesComponent). Las reglas responsivas viven en
   el bloque "AJUSTE RESPONSIVE DE LISTADOS .ms-list-card" más arriba; esto es
   el diseño base que faltaba.
   ============================================================================= */
.ms-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 0.75rem;
    width: 100%;
    padding: 0.25rem 0;
}
.ms-list-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.55rem;
    padding: 0.85rem 1rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    box-shadow: 0 0.1rem 0.25rem rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.ms-list-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 0.25rem 0.6rem rgba(15, 23, 42, 0.08);
}
.ms-list-card.is-principal {
    border-color: #e2e8f0;
    box-shadow: 0 0.2rem 0.55rem rgba(46, 92, 158, 0.14);
    background: linear-gradient(180deg, #eaf2ff 0%, #f8fbff 45%, #ffffff 100%);
}
.ms-list-card__head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed #eef2f7;
}
.ms-list-card__icon {
    font-size: 1.4rem !important;
    color: #2e5c9e;
    flex-shrink: 0;
}
.ms-list-card.is-principal .ms-list-card__icon { color: #2e5c9e; }
.ms-list-card__title {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1 1 auto;
    min-width: 0;
}
.ms-list-card__title b {
    font-size: 0.88rem;
    color: #1a3c6e;
    font-weight: 700;
    line-height: 1.25;
}
.ms-list-card__title small {
    font-size: 0.72rem;
    color: #64748b;
}
.ms-list-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    background: #e2e8f0;
    color: #1a3c6e;
    border: 1px solid #cbd5e1;
    flex-shrink: 0;
}
.ms-list-card__chip .material-symbols-outlined { font-size: 0.9rem; }
.ms-list-card__chip--gold {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #78350f;
    border-color: #fbbf24;
}
.ms-list-card__body {
    font-size: 0.82rem;
    color: #475569;
    line-height: 1.4;
}
.ms-list-card__body p { margin: 0.15rem 0; }
.ms-list-card__warn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.35rem;
    padding: 0.3rem 0.55rem;
    background: #fef9e3;
    border: 1px solid #fde68a;
    border-radius: 0.35rem;
    font-size: 0.74rem;
    color: #92400e;
    font-weight: 600;
}
.ms-list-card__warn .material-symbols-outlined { font-size: 1rem; color: #b45309; }
.ms-list-card__actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-top: 0.45rem;
    border-top: 1px dashed #eef2f7;
    flex-wrap: wrap;
}
.ms-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    text-align: center;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 0.55rem;
    color: #64748b;
}
.ms-list-empty .material-symbols-outlined {
    font-size: 2.8rem;
    color: #94a3b8;
    margin-bottom: 0.55rem;
}
.ms-list-empty h5 {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a3c6e;
}
.ms-list-empty p { margin: 0; font-size: 0.82rem; }

/* ─── Botones compactos de acción (editar / eliminar / marcar principal) ── */
.ms-editbtn,
.ms-deletebtn,
.ms-goldbtn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.65rem;
    border-radius: 0.35rem;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s, box-shadow 0.15s, transform 0.15s;
    line-height: 1.1;
    border: 1px solid transparent;
}
.ms-editbtn .material-symbols-outlined,
.ms-deletebtn .material-symbols-outlined,
.ms-goldbtn .material-symbols-outlined { font-size: 1rem; }
.ms-editbtn {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}
.ms-editbtn:hover { background: #dbeafe; box-shadow: 0 0.1rem 0.3rem rgba(29, 78, 216, 0.15); }
.ms-deletebtn {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
}
.ms-deletebtn:hover { background: #fecaca; box-shadow: 0 0.1rem 0.3rem rgba(153, 27, 27, 0.15); }
.ms-goldbtn {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #78350f;
    border-color: #fbbf24;
}
.ms-goldbtn:hover { filter: brightness(1.05); box-shadow: 0 0.1rem 0.3rem rgba(202, 138, 4, 0.25); }

/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .ms-form__layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .ms-form__aside { position: static; }
}
@media (max-width: 900px) {
    .ms-form__grid--3,
    .ms-form__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .ms-form-view { padding: 0.6rem 0.7rem; }
    .ms-form { padding: 0.85rem 0.9rem 1rem; }
    .ms-form__grid--2,
    .ms-form__grid--3,
    .ms-form__grid--4 { grid-template-columns: minmax(0, 1fr); }
    .ms-form__cardhead { flex-direction: column; align-items: flex-start; }
    .ms-form__toggle { flex-wrap: wrap; }
    .ms-form__header--withbtn { flex-direction: column; align-items: stretch; }
    .ms-form__header--withbtn .btn { width: 100%; justify-content: center; }
}


/* =============================================================================
   EXPEDIENTE · FormCreateSpecialtyComponent.vue
   Componente:  resources/js/components/expediente/especialidades/FormCreateSpecialtyComponent.vue
   Apartado:    Aviso inline + modal de confirmación cuando la acción posterior
                implica eliminar documentos del expediente del médico.
   Prefijo:     .fcsp-*
   ============================================================================= */

/* Nota inline ámbar debajo del toggle "Adjuntar documentación" */
.fcsp-docs-warn {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-top: 0.6rem;
    padding: 0.7rem 0.85rem;
    background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
    border: 1px solid #fcd34d;
    border-left: 4px solid #d97706;
    border-radius: 0.45rem;
    color: #78350f;
    font-size: 0.82rem;
    line-height: 1.4;
}
.fcsp-docs-warn .material-symbols-outlined {
    font-size: 1.3rem; color: #b45309; flex-shrink: 0; margin-top: 0.05rem;
}
.fcsp-docs-warn b { display: block; color: #7c2d12; margin-bottom: 0.15rem; }

/* Nota informativa azul (acción no destructiva): aparece cuando el admin
   selecciona "Pasar directo al examen" o "Continuar con la carga de su CV",
   recordando que la decisión sobre el expediente actualizado es del Consejo. */
.fcsp-info-note {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-top: 0.6rem;
    padding: 0.7rem 0.85rem;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
    border-left: 4px solid #2563eb;
    border-radius: 0.45rem;
    color: #1e3a8a;
    font-size: 0.82rem;
    line-height: 1.4;
}
.fcsp-info-note .material-symbols-outlined {
    font-size: 1.3rem; color: #2563eb; flex-shrink: 0; margin-top: 0.05rem;
}
.fcsp-info-note b { display: block; color: #1e3a8a; margin-bottom: 0.15rem; }

/* ─── Modal inline de confirmación ─── */
.fcsp-modal .modal-dialog {
    animation: zoomFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes zoomFadeIn {
    0%   { opacity: 0; transform: translateY(2rem) scale(0.97); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.fcsp-modal__dialog {
    width: 100% !important;
    max-width: 34rem !important;
    margin: 0 auto;
}
.fcsp-modal__content {
    background: #fff;
    border: none;
    border-radius: 0.85rem !important;
    overflow: hidden;
    padding: 0 !important;
    box-shadow: 0 1rem 3rem rgba(15, 23, 42, 0.25);
    position: relative;
}
.fcsp-modal__close {
    position: absolute;
    top: 0.85rem; right: 0.85rem;
    width: 2rem; height: 2rem;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s ease;
    z-index: 2;
}
.fcsp-modal__close:hover { background: rgba(255, 255, 255, 0.35); }
.fcsp-modal__close .material-symbols-outlined { font-size: 1.15rem; }

.fcsp-modal__head {
    background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%);
    color: #fff;
    padding: 1.25rem 1.5rem;
    display: flex; align-items: center; gap: 0.85rem;
}
.fcsp-modal__icon {
    width: 3rem; height: 3rem;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.fcsp-modal__icon .material-symbols-outlined { color: #fff; font-size: 1.6rem; margin: 0; }
.fcsp-modal__head-text { flex: 1; min-width: 0; }
.fcsp-modal__head-text small {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06rem;
    opacity: 0.85;
    margin-bottom: 0.15rem;
    font-weight: 600;
}
.fcsp-modal__head-text h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
}

.fcsp-modal__body {
    padding: 1.25rem 1.5rem;
    background: #fff;
    max-height: calc(100vh - 14rem);
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 0.65rem;
}
.fcsp-modal__body p {
    margin: 0;
    font-size: 0.92rem;
    color: #334155;
    line-height: 1.5;
}
.fcsp-modal__body p u { text-decoration-color: #dc2626; }

.fcsp-modal__warn {
    display: flex; align-items: flex-start; gap: 0.45rem;
    padding: 0.6rem 0.75rem;
    background: #fef2f2;
    border-left: 3px solid #dc2626;
    border-radius: 0.45rem;
    color: #991b1b;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
}
.fcsp-modal__warn .material-symbols-outlined { font-size: 1rem; color: #dc2626; flex-shrink: 0; margin-top: 0.1rem; }

.fcsp-modal__target {
    padding: 0.5rem 0.7rem;
    background: #f1f5f9;
    border: 1px dashed #94a3b8;
    border-radius: 0.4rem;
    text-align: center;
}
.fcsp-modal__target code {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.92rem;
    font-weight: 700;
    color: #991b1b;
    user-select: all;
}
.fcsp-modal__input {
    width: 100%;
    padding: 0.55rem 0.75rem;
    font-size: 0.92rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 0.4rem;
    background: #fff;
    color: #1f2937;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    box-sizing: border-box;
    font-family: 'Consolas', 'Monaco', monospace;
}
.fcsp-modal__input:focus {
    outline: none;
    border-color: #2e5c9e;
    box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.18);
}
.fcsp-modal__input.is-ok {
    border-color: #16a34a;
    background: #f0fdf4;
}
.fcsp-modal__input.is-bad {
    border-color: #dc2626;
    background: #fef2f2;
}
.fcsp-modal__hint {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.74rem; color: #64748b;
    line-height: 1.3;
}
.fcsp-modal__hint .material-symbols-outlined { font-size: 0.95rem; color: #94a3b8; }
.fcsp-modal__hint--ok { color: #166534; }
.fcsp-modal__hint--ok .material-symbols-outlined { color: #16a34a; }

.fcsp-modal__foot {
    padding: 0.85rem 1.25rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8ef;
    display: flex; justify-content: flex-end; gap: 0.4rem;
    flex-wrap: wrap;
}
.fcsp-modal__btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.55rem 1.1rem;
    border: none;
    border-radius: 0.45rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.15s ease;
}
.fcsp-modal__btn .material-symbols-outlined { font-size: 1rem; }
.fcsp-modal__btn--ghost {
    background: #fff; color: #64748b; border: 1px solid #cbd5e1;
}
.fcsp-modal__btn--ghost:hover { background: #f1f5f9; color: #1a3c6e; }
.fcsp-modal__btn--danger {
    background: #dc2626; color: #fff;
}
.fcsp-modal__btn--danger:hover {
    background: #b91c1c; color: #fff;
    transform: translateY(-1px);
}
.fcsp-modal__btn--danger.is-disabled {
    background: #f3a8a8;
    cursor: not-allowed;
    opacity: 0.85;
}
.fcsp-modal__btn--danger.is-disabled:hover {
    background: #f3a8a8;
    transform: none;
}

/* El modal por defecto en Bootstrap es display:none → al abrirse necesita
   ser flex + centrado vertical (mismo patrón que los otros ms-modal). */
.fcsp-modal.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

@media (max-width: 560px) {
    .fcsp-modal__dialog { max-width: calc(100vw - 2rem) !important; }
    .fcsp-modal__head { padding: 1rem 1.1rem; gap: 0.7rem; }
    .fcsp-modal__icon { width: 2.5rem; height: 2.5rem; }
    .fcsp-modal__head-text h3 { font-size: 1rem; }
    .fcsp-modal__body { padding: 1rem 1.1rem; }
    .fcsp-modal__foot { flex-direction: column-reverse; align-items: stretch; }
    .fcsp-modal__btn { justify-content: center; }
}


/* =============================================================================
   PANEL DE COORDINADOR
   Componente: resources/js/components/coordinador_solicitudes/FatherComponent.vue
   Apartado:   Vista del coordinador con resumen de revisores, tabs de tipo de
               solicitud y filtros + listado.
   Prefijo:    .coor-*
   ============================================================================= */

/* Shell: el padre .content-body tiene `align-items: flex-start` (column flex)
   por lo que los hijos NO se estiran al ancho — añadimos `width:100%` para
   que el panel ocupe todo el ancho desde el inicio (sin esperar a que arribe
   contenido). El scroll vertical lo manejan internamente .coor-aside y
   .coor-main, así cada columna scrollea independientemente. */
.coor-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1.2rem 1.5rem;
    background: #f1f5f9;
    box-sizing: border-box;
    width: 100%;
    height: calc(100vh - 4.5rem);
    min-height: 0;
    overflow: hidden;
}
.coor-shell *, .coor-shell *::before, .coor-shell *::after { box-sizing: border-box; }

/* ─── HERO navy ─── */
.coor-shell__hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    padding: 1.1rem 1.35rem;
    border-radius: 0.75rem;
    box-shadow: 0 0.25rem 0.7rem rgba(15, 23, 42, 0.12);
}
.coor-shell__hero-main { display: flex; align-items: center; gap: 0.85rem; min-width: 0; flex: 1 1 auto; }
.coor-shell__hero-icon {
    font-size: 2.1rem !important;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    padding: 0.55rem;
    border-radius: 0.6rem;
    flex-shrink: 0;
}
.coor-shell__title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    font-family: 'Merriweather', serif;
}
.coor-shell__sub { margin: 0.15rem 0 0; font-size: 0.83rem; color: rgba(255, 255, 255, 0.85); line-height: 1.35; }
.coor-shell__hero-meta { display: flex; gap: 0.6rem; }
.coor-shell__hero-stat {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 0.45rem 0.9rem;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 0.55rem;
    color: #ffffff;
}
.coor-shell__hero-stat b { font-size: 1.4rem; font-weight: 800; line-height: 1; }
.coor-shell__hero-stat small { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.85; margin-top: 0.2rem; }

/* ─── DASHBOARD 2 COLUMNAS: aside (revisores) + main (tabs + tabla) ─── */
.coor-dash {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: 0.85rem;
    align-items: stretch;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0; /* clave: permite que los hijos respeten su overflow */
}

/* ─── ASIDE: lista de revisores que funciona como filtro ─── */
.coor-aside {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.65rem;
    box-shadow: 0 0.1rem 0.35rem rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}
.coor-aside__head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 0.85rem;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border-bottom: 1px solid #e2e8ef;
    font-size: 0.78rem;
    font-weight: 700;
    color: #1a3c6e;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.coor-aside__head .material-symbols-outlined { font-size: 1.1rem; color: #2e5c9e; }
.coor-aside__head small {
    margin-left: auto;
    font-size: 0.65rem;
    color: #64748b;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-style: italic;
}
.coor-aside__list {
    list-style: none;
    margin: 0;
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #ffffff;
}
.coor-aside__list::-webkit-scrollbar { width: 0.4rem; }
.coor-aside__list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }

/* Item del aside (revisor o "Todos") */
.coor-aside__item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.6rem 0.7rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.45rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    text-align: left;
    color: inherit;
    font-family: inherit;
}
.coor-aside__item:hover {
    background: #f1f5f9;
    border-color: #e2e8f0;
}
.coor-aside__item.is-active {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #2e5c9e;
    box-shadow: 0 0.1rem 0.35rem rgba(46, 92, 158, 0.12);
}
.coor-aside__avatar {
    width: 2rem; height: 2rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.coor-aside__avatar .material-symbols-outlined { font-size: 1.1rem; color: #ffffff; }
.coor-aside__icon {
    font-size: 1.6rem !important;
    color: #2e5c9e;
    background: #eff6ff;
    width: 2rem; height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.coor-aside__id {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1 1 auto;
    min-width: 0;
}
.coor-aside__id b {
    font-size: 0.85rem;
    color: #1a3c6e;
    font-weight: 700;
    line-height: 1.2;
    word-break: break-word;
}
.coor-aside__id small {
    font-size: 0.7rem;
    color: #64748b;
    line-height: 1.3;
    word-break: break-word;
}
.coor-aside__id .coor-aside__esp {
    color: #166534;
    margin-top: 0.05rem;
}
.coor-aside__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.7rem;
    height: 1.5rem;
    padding: 0 0.45rem;
    background: #1a3c6e;
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}
.coor-aside__item.is-active .coor-aside__count {
    background: #2e5c9e;
    box-shadow: 0 0 0 0.15rem rgba(255, 255, 255, 0.6);
}
.coor-aside__item--all { background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); }
.coor-aside__empty {
    padding: 1rem 0.85rem;
    text-align: center;
    color: #94a3b8;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: center;
}
.coor-aside__empty .material-symbols-outlined { font-size: 1.8rem; color: #cbd5e1; }
.coor-aside__empty small { font-size: 0.78rem; color: #94a3b8; font-style: italic; }

/* ─── MAIN: tabs + filtros + chip activo + tabla ─── */
.coor-main {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

/* Chip de "filtrando por X" cuando hay revisor activo */
.coor-active-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #93c5fd;
    border-left: 3px solid #2563eb;
    border-radius: 0.45rem;
    font-size: 0.82rem;
    color: #1e3a8a;
    align-self: flex-start;
    max-width: 100%;
}
.coor-active-filter .material-symbols-outlined { font-size: 1rem; color: #2563eb; flex-shrink: 0; }
.coor-active-filter b { color: #1e3a8a; font-weight: 700; }
.coor-active-filter button {
    margin-left: 0.4rem;
    padding: 0.15rem;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}
.coor-active-filter button:hover { background: rgba(37, 99, 235, 0.15); }
.coor-active-filter button .material-symbols-outlined { font-size: 1rem; }

/* ─── TABS (Solicitudes por examen / por currículum) ─── */
.coor-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.35rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.6rem;
    box-shadow: 0 0.1rem 0.3rem rgba(15, 23, 42, 0.04);
}
.coor-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.95rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.45rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}
.coor-tab .material-symbols-outlined { font-size: 1.15rem; color: inherit; }
.coor-tab:hover { background: #f1f5f9; color: #1a3c6e; }
.coor-tab.is-active {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    border-color: #1a3c6e;
    box-shadow: 0 0.15rem 0.45rem rgba(26, 60, 110, 0.22);
}

/* ─── Filtros (búsqueda + limpiar) — viven dentro de .coor-main ─── */
.coor-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.55rem;
    padding: 0.55rem 0.7rem;
    box-shadow: 0 0.1rem 0.25rem rgba(15, 23, 42, 0.04);
}
.coor-filters__field {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.65rem;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 0.45rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    min-width: 12rem;
}
.coor-filters__field--grow { flex: 1 1 18rem; }
.coor-filters__field:focus-within {
    border-color: #2e5c9e;
    box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.18);
    background: #ffffff;
}
.coor-filters__field .material-symbols-outlined { font-size: 1.15rem; color: #64748b; flex-shrink: 0; }
.coor-filters__field input,
.coor-filters__field select {
    flex: 1 1 auto;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.85rem;
    color: #1f2937;
    padding: 0.2rem 0;
    min-width: 0;
    font-family: inherit;
}
.coor-filters__clear {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 0.85rem;
    background: #ffffff;
    color: #64748b;
    border: 1px solid #cbd5e1;
    border-radius: 0.45rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.coor-filters__clear:hover { background: #f1f5f9; color: #1a3c6e; }
.coor-filters__clear .material-symbols-outlined { font-size: 1.05rem; }

/* Botón "Buscar" — aplica la búsqueda por médico y filtra también el aside */
.coor-filters__search {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.95rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    border: 1px solid #1a3c6e;
    border-radius: 0.45rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
    white-space: nowrap;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.22);
}
.coor-filters__search:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 0.25rem 0.55rem rgba(26, 60, 110, 0.3);
}
.coor-filters__search .material-symbols-outlined { font-size: 1.1rem; color: #ffffff; }

/* Toggle "Solo pendientes" — actúa como checkbox visual. Cuando is-active
   se llena con la paleta ámbar para evocar "atención pendiente". */
.coor-filters__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.85rem;
    background: #ffffff;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 0.45rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}
.coor-filters__toggle:hover {
    background: #fef9e3;
    color: #92400e;
    border-color: #fde68a;
}
.coor-filters__toggle.is-active {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #78350f;
    border-color: #f59e0b;
    box-shadow: 0 0.1rem 0.4rem rgba(245, 158, 11, 0.25);
}
.coor-filters__toggle .material-symbols-outlined { font-size: 1.1rem; color: inherit; }
.coor-filters__toggle.is-active .material-symbols-outlined { color: #b45309; }

/* Cuerpo de la tabla: contenedor del componente hijo (examen/cv) que
   provee scroll interno cuando la lista de solicitudes es larga. */
.coor-table__body {
    min-width: 0;
    flex: 1 1 auto;
    min-height: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.55rem;
    padding: 0.55rem 0.65rem 0.65rem;
    box-shadow: 0 0.1rem 0.25rem rgba(15, 23, 42, 0.04);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}
.coor-table__body::-webkit-scrollbar { width: 0.5rem; }
.coor-table__body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }

/* ─── Listado de solicitudes (cards limpias, navy palette) ─── */
.coor-sol {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    flex: 1 1 auto;
    min-height: 0;
}
.coor-sol__list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1 1 auto;
    min-height: 0;
}

/* Card individual de solicitud */
.coor-sol__card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.55rem;
    box-shadow: 0 0.1rem 0.3rem rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    overflow: hidden;
}
.coor-sol__card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 0.25rem 0.6rem rgba(15, 23, 42, 0.08);
}

/* Cabecera: avatar + doctor + chips de estado */
.coor-sol__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border-bottom: 1px solid #eef2f7;
    flex-wrap: wrap;
}
.coor-sol__doctor { display: flex; align-items: center; gap: 0.6rem; min-width: 0; flex: 1 1 auto; }
.coor-sol__avatar {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0.1rem 0.3rem rgba(26, 60, 110, 0.22);
}
.coor-sol__avatar .material-symbols-outlined { font-size: 1.2rem; color: #ffffff; }
.coor-sol__avatar--cv { background: linear-gradient(135deg, #166534 0%, #16a34a 100%); }
.coor-sol__id { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.coor-sol__id h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a3c6e;
    line-height: 1.2;
    word-break: break-word;
    font-family: 'Merriweather', serif;
}
.coor-sol__id small {
    font-size: 0.74rem;
    color: #64748b;
    line-height: 1.3;
}

/* Chips de estado en la cabecera */
.coor-sol__chips { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }
.coor-sol__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.6rem;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    max-width: 100%;
}
.coor-sol__chip .material-symbols-outlined { font-size: 0.95rem; color: inherit; }
.coor-sol__chip--ok    { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.coor-sol__chip--warn  { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.coor-sol__chip--info  { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.coor-sol__chip--bad   { background: #fee2e2; color: #991b1b; border-color: #fecaca; }

/* Cuerpo: grid de meta items + banner si aplica */
.coor-sol__body {
    padding: 0.8rem 0.95rem 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.coor-sol__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 0.55rem 0.85rem;
}
.coor-sol__meta-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
}
.coor-sol__meta-item .material-symbols-outlined {
    font-size: 1.2rem;
    color: #2e5c9e;
    flex-shrink: 0;
    margin-top: 0.05rem;
}
.coor-sol__meta-item > div { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.coor-sol__meta-item small {
    font-size: 0.68rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.coor-sol__meta-item b {
    font-size: 0.82rem;
    color: #1a3c6e;
    font-weight: 700;
    line-height: 1.3;
    word-break: break-word;
}

/* Banner verde (revisión completa) */
.coor-sol__banner {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.7rem;
    border-radius: 0.4rem;
    font-size: 0.8rem;
    line-height: 1.35;
}
.coor-sol__banner .material-symbols-outlined { font-size: 1.1rem; flex-shrink: 0; }
.coor-sol__banner--ok {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
    border-left: 3px solid #16a34a;
    font-weight: 600;
}
.coor-sol__banner--ok .material-symbols-outlined { color: #16a34a; }

/* Footer con botón de acción */
.coor-sol__foot {
    padding: 0.55rem 0.95rem 0.75rem;
    display: flex;
    justify-content: flex-end;
}
.coor-sol__action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.95rem;
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    border: 1px solid #1a3c6e;
    border-radius: 0.45rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.22);
}
.coor-sol__action:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 0.25rem 0.55rem rgba(26, 60, 110, 0.3);
    color: #ffffff;
}
.coor-sol__action .material-symbols-outlined { font-size: 1.1rem; }
.coor-sol__action--cv {
    background: linear-gradient(135deg, #166534 0%, #16a34a 100%);
    border-color: #166534;
    box-shadow: 0 0.15rem 0.4rem rgba(22, 101, 52, 0.22);
}
.coor-sol__action--cv:hover { box-shadow: 0 0.25rem 0.55rem rgba(22, 101, 52, 0.3); }

/* Empty state */
.coor-sol__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    text-align: center;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 0.55rem;
    color: #64748b;
    flex: 1 1 auto;
    min-height: 12rem;
}
.coor-sol__empty .material-symbols-outlined { font-size: 2.6rem; color: #94a3b8; margin-bottom: 0.5rem; }
.coor-sol__empty h4 { margin: 0 0 0.2rem; font-size: 0.95rem; font-weight: 700; color: #1a3c6e; font-family: 'Merriweather', serif; }
.coor-sol__empty p { margin: 0; font-size: 0.8rem; }

/* ─── Paginador rediseñado ─── */
.coor-sol__pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.55rem;
    padding: 0.55rem 0.7rem;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid #e2e8ef;
    border-radius: 0.5rem;
    flex-shrink: 0;
}
.coor-sol__pager-count {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 600;
}
.coor-sol__pager-count .material-symbols-outlined { font-size: 1rem; color: #2e5c9e; }
.coor-sol__pager-count b { color: #1a3c6e; font-weight: 700; }

.coor-sol__pager-pages { display: inline-flex; align-items: center; gap: 0.2rem; flex-wrap: wrap; }
.coor-sol__page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0 0.5rem;
    border: 1px solid #e2e8ef;
    background: #ffffff;
    color: #475569;
    border-radius: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.coor-sol__page-btn:hover:not(:disabled) {
    background: #eff6ff;
    color: #1a3c6e;
    border-color: #bfdbfe;
}
.coor-sol__page-btn.is-active {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    border-color: #1a3c6e;
}
.coor-sol__page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.coor-sol__page-btn .material-symbols-outlined { font-size: 1.1rem; }

.coor-sol__pager-limit { display: inline-flex; align-items: center; gap: 0.4rem; }
.coor-sol__pager-limit label { font-size: 0.76rem; color: #64748b; font-weight: 600; }
.coor-sol__pager-limit select {
    padding: 0.3rem 0.55rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.35rem;
    background: #ffffff;
    color: #1a3c6e;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    font-family: inherit;
}
.coor-sol__pager-limit select:focus { border-color: #2e5c9e; box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.18); }

@media (max-width: 600px) {
    .coor-sol__head { flex-direction: column; align-items: flex-start; }
    .coor-sol__chips { width: 100%; }
    .coor-sol__action { width: 100%; justify-content: center; }
    .coor-sol__pager { flex-direction: column; align-items: stretch; }
    .coor-sol__pager-pages { justify-content: center; }
}

/* ─── Responsive ─── */
@media (max-width: 1100px) {
    .coor-dash { grid-template-columns: 14rem minmax(0, 1fr); }
}
@media (max-width: 900px) {
    .coor-dash { grid-template-columns: minmax(0, 1fr); }
    .coor-aside__list { max-height: 16rem; }
    .coor-shell__hero { padding: 0.95rem 1.05rem; }
    .coor-shell__title { font-size: 1.15rem; }
    .coor-shell__hero-icon { font-size: 1.7rem !important; padding: 0.45rem; }
}
@media (max-width: 600px) {
    .coor-shell { padding: 0.7rem 0.8rem 1.5rem; }
    .coor-shell__hero { flex-direction: column; align-items: stretch; }
    .coor-shell__hero-meta { justify-content: flex-start; }
    .coor-filters__field { min-width: 0; width: 100%; }
    .coor-filters__field--grow { flex: 1 1 100%; }
    .coor-filters__clear { width: 100%; justify-content: center; }
}


/* =============================================================================
   "Cambiar de rol" en el menú de usuario (resources/views/layouts/navbars/navs/auth.blade.php)
   Antes era un submenu lateral (.inner-list-one.il2) que se abría con :hover y
   se posicionaba a 15.5rem a la derecha — al mover el mouse de la opción al
   listado, el hover se perdía y desaparecían las opciones. Lo cambiamos a un
   acordeón inline controlado por checkbox: clic en "Cambiar de rol" expande
   la lista debajo del trigger sin separarla del sidebar.
   ============================================================================= */
.ub-roles { position: relative; }
.ub-roles__check {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
}
.ub-roles__trigger {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem;
    width: 100%;
    padding: 0.7rem 1rem;
    color: var(--blue);
    cursor: pointer;
    user-select: none;
    border-radius: 0.4rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.ub-roles__trigger:hover { background-color: var(--hover-gray); }
.ub-roles__trigger .material-symbols-outlined { font-size: 2rem; }
.ub-roles__trigger p {
    margin: 0;
    flex: 1 1 auto;
    font-size: 1rem;
    margin-left: 0.4rem;
    font-weight: 100;
}
.ub-roles__caret {
    font-size: 1.4rem !important;
    color: var(--very-light-black);
    transition: transform 0.25s ease, color 0.15s ease;
}
.ub-roles__check:checked ~ .ub-roles__trigger {
    background-color: var(--hover-gray);
}
.ub-roles__check:checked ~ .ub-roles__trigger .ub-roles__caret {
    transform: rotate(180deg);
    color: var(--blue);
}

/* Lista inline que se expande debajo del trigger */
.ub-roles__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.2s ease, margin 0.2s ease;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border-radius: 0 0 0.4rem 0.4rem;
}
.ub-roles__check:checked ~ .ub-roles__list {
    /* Suficiente para 6-8 roles. Si fueran más, se haría scroll interno. */
    max-height: 28rem;
    overflow-y: auto;
    padding: 0.25rem 0;
    margin: 0.15rem 0 0.35rem;
    border-top: 1px dashed #e2e8ef;
}
.ub-roles__list li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ub-roles__list li a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem;
    padding: 0.55rem 1rem 0.55rem 2.2rem;
    color: var(--very-light-black);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
    border-radius: 0.35rem;
}
.ub-roles__list li a:hover {
    background-color: var(--hover-gray);
    color: var(--blue);
    padding-left: 2.4rem;
}
.ub-roles__list li a .material-symbols-outlined {
    font-size: 1.3rem;
    color: var(--very-light-black);
}
.ub-roles__list li a:hover .material-symbols-outlined {
    color: var(--blue);
}
.ub-roles__list li a p {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 400;
    color: inherit;
}


/* =============================================================================
   ASIGNAR COORDINADOR — Modal del admin para seleccionar coordinador y
   asignarlo a la solicitud activa de una especialidad del médico.
   Componente: resources/js/components/expediente/especialidades/AssignCoordinatorModal.vue
   Prefijo: .ac-modal__*
   ============================================================================= */
.ac-modal .modal-dialog { animation: zoomFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.ac-modal__dialog { width: 100% !important; max-width: 34rem !important; margin: 0 auto; }
.ac-modal__content {
    background: #ffffff;
    border: none;
    border-radius: 0.85rem !important;
    overflow: hidden;
    padding: 0 !important;
    box-shadow: 0 1rem 3rem rgba(15, 23, 42, 0.25);
    position: relative;
}
.ac-modal__close {
    position: absolute;
    top: 0.85rem; right: 0.85rem;
    width: 2rem; height: 2rem;
    border: none;
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s ease;
    z-index: 2;
}
.ac-modal__close:hover { background: rgba(255, 255, 255, 0.4); }
.ac-modal__close .material-symbols-outlined { font-size: 1.15rem; }

/* Header navy */
.ac-modal__head {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    padding: 1.15rem 1.4rem;
    display: flex; align-items: center; gap: 0.85rem;
}
.ac-modal__icon {
    width: 3rem; height: 3rem;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ac-modal__icon .material-symbols-outlined { color: #ffffff; font-size: 1.6rem; }
.ac-modal__head-text { flex: 1; min-width: 0; }
.ac-modal__head-text small {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.85;
    margin-bottom: 0.15rem;
    font-weight: 600;
}
.ac-modal__head-text h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
    word-break: break-word;
}

/* Body */
.ac-modal__body {
    padding: 1rem 1.25rem;
    background: #ffffff;
    display: flex; flex-direction: column; gap: 0.7rem;
}

/* Buscador */
.ac-modal__search {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 0.45rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ac-modal__search:focus-within {
    border-color: #2e5c9e;
    box-shadow: 0 0 0 3px rgba(46, 92, 158, 0.18);
    background: #ffffff;
}
.ac-modal__search .material-symbols-outlined { font-size: 1.15rem; color: #64748b; }
.ac-modal__search input {
    flex: 1 1 auto;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9rem;
    color: #1f2937;
    font-family: inherit;
    min-width: 0;
}

/* Lista de coordinadores */
.ac-modal__list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 22rem;
    overflow-y: auto;
    padding: 0.15rem;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #ffffff;
}
.ac-modal__list::-webkit-scrollbar { width: 0.45rem; }
.ac-modal__list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }

.ac-modal__item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.8rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    margin: 0;
}
.ac-modal__item:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}
.ac-modal__item.is-selected {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #2e5c9e;
    box-shadow: 0 0.1rem 0.4rem rgba(46, 92, 158, 0.18);
}
.ac-modal__item input[type="radio"] { display: none; }

.ac-modal__avatar {
    width: 2.4rem; height: 2.4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #5e35b1 0%, #7e57c2 100%);
    color: #ffffff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0.1rem 0.3rem rgba(94, 53, 177, 0.22);
}
.ac-modal__avatar .material-symbols-outlined { font-size: 1.3rem; color: #ffffff; }
.ac-modal__item.is-selected .ac-modal__avatar {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    box-shadow: 0 0.15rem 0.45rem rgba(26, 60, 110, 0.3);
}
.ac-modal__id {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1 1 auto;
    min-width: 0;
}
.ac-modal__id b {
    font-size: 0.92rem;
    color: #1a3c6e;
    font-weight: 700;
    line-height: 1.25;
    word-break: break-word;
}
.ac-modal__id small {
    font-size: 0.74rem;
    color: #64748b;
    line-height: 1.3;
}
.ac-modal__check {
    font-size: 1.45rem !important;
    color: #cbd5e1;
    flex-shrink: 0;
    transition: color 0.15s ease;
}
.ac-modal__item.is-selected .ac-modal__check { color: #16a34a; }

/* Empty state */
.ac-modal__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2.2rem 1rem;
    color: #64748b;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 0.55rem;
}
.ac-modal__empty .material-symbols-outlined {
    font-size: 2.4rem; color: #94a3b8; margin-bottom: 0.4rem;
}
.ac-modal__empty h4 {
    margin: 0 0 0.2rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a3c6e;
    font-family: 'Merriweather', serif;
}
.ac-modal__empty p { margin: 0; font-size: 0.78rem; }

/* Footer */
.ac-modal__foot {
    padding: 0.85rem 1.25rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8ef;
    display: flex; justify-content: flex-end; gap: 0.45rem;
    flex-wrap: wrap;
}
.ac-modal__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 1.05rem;
    border: 1px solid transparent;
    border-radius: 0.45rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}
.ac-modal__btn .material-symbols-outlined { font-size: 1.05rem; }
.ac-modal__btn--ghost {
    background: #ffffff;
    color: #64748b;
    border-color: #cbd5e1;
}
.ac-modal__btn--ghost:hover { background: #f1f5f9; color: #1a3c6e; }
.ac-modal__btn--primary {
    background: linear-gradient(135deg, #1a3c6e 0%, #2e5c9e 100%);
    color: #ffffff;
    border-color: #1a3c6e;
    box-shadow: 0 0.15rem 0.4rem rgba(26, 60, 110, 0.22);
}
.ac-modal__btn--primary:hover:not(:disabled) {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 0.25rem 0.55rem rgba(26, 60, 110, 0.3);
}
.ac-modal__btn--primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    filter: grayscale(0.3);
}

@media (max-width: 560px) {
    .ac-modal__dialog { max-width: calc(100vw - 2rem) !important; }
    .ac-modal__head { padding: 0.95rem 1.1rem; gap: 0.7rem; }
    .ac-modal__icon { width: 2.5rem; height: 2.5rem; }
    .ac-modal__head-text h3 { font-size: 0.95rem; }
    .ac-modal__body { padding: 0.9rem 1rem; }
    .ac-modal__foot { flex-direction: column-reverse; align-items: stretch; }
    .ac-modal__btn { justify-content: center; }
}


/* Modal "Solicitar factura": las clases .hs-fact-modal* se eliminaron porque
   el modal se movió al componente global resources/js/components/global_new/FacturaComponent.vue
   con sus propios estilos scoped (.ms-modal*). */