/* -------------------------------------------------------------------------- */
/*                                Falcon Button                               */
/* -------------------------------------------------------------------------- */
/* prettier-ignore */
:root {
  /* Colores de estado: la gama de hipotecat, una familia por fase del embudo con
     degradado dentro, para que la insignia diga de un vistazo por dónde va la
     operación. El mismo mapa, con las mismas claves y el mismo orden, está en
     `dashboards/graphs-js.blade.php` (`statusColors`, los donuts de los paneles) y
     en `App\Services\WeeklySummaryService::STATUS_COLORS` (el correo semanal): los
     tres se sincronizan A MANO, así que cambiar uno obliga a cambiar los tres.
     Antes eran amarillos, rojos y grises sin relación con la fase, y había dos
     PAREJAS con el mismo hex (presentado con espera propuesta, en firma con
     tasación), o sea dos insignias indistinguibles. */
  /* Entrada — morado */
  --operation-status-draft: #CECBF6;
  --operation-status-study: #8B82E3;
  /* Cualificación y banco — los siete azules */
  --operation-status-required-doc: #CFE3F9;
  --operation-status-record: #A8CBF1;
  --operation-status-presented: #7DB0E9;
  --operation-status-waiting-for-proposal: #5194DF;
  --operation-status-waiting-for-decision: #2E78CB;
  --operation-status-appraisal: #1F5FA8;
  --operation-status-wait-fein: #164680;
  /* Cierre — verde */
  --operation-status-notary: #86D9A4;
  --operation-status-in-signature: #27A35C;
  --operation-status-closed: #12633A;
  /* Sin resolver — naranja: la operación no está descartada, es que no avanza */
  --operation-status-no-answer: #FDD09B;
  --operation-status-on-pause: #F5A24B;
  /* Cerrada sin éxito — rojo */
  --operation-status-canceled: #B32C2C;
  --operation-status-paid: #259C07;
  --operation-status-partial-paid: #09C83C;

  /* Colores del TIPO de operación. Antes eran ALIAS de tres colores de estado; al
     cambiar la gama de estados habrían cambiado solos, y entonces la cápsula del
     listado y el donut «activas por tipo» del panel —que lleva estos mismos hexes
     a mano en `COLOR_FAMILIA`— dirían colores distintos para el mismo tipo. Se
     quedan con su valor de siempre, escrito ya sin intermediario: el tipo no es una
     fase del embudo y no tiene por qué seguir su paleta. */
  --operation-type-mortgage: #36A1ED;
  /* El verde del préstamo es el mismo de la cápsula «Enviado» de firmas, que
     usa el `bg-success` del tema. */
  --operation-type-loan: var(--falcon-success);
  --operation-type-self-promotion: #FF9F40;
  --operation-type-mortgage-improvement: #9966FF;
  --operation-type-private-capital: #808080;

  /* La letra de cada insignia, elegida por CONTRASTE contra su propio fondo
     (mínimo 4,5:1, el de WCAG para texto): negra sobre los tonos claros de cada
     familia y blanca sobre los oscuros. Antes iba por TEMA —todas blancas en
     `:root`, once negras en claro—, que funcionaba porque los fondos eran claros;
     con la gama nueva hay fondos oscuros (#164680, #12633A, #B32C2C) donde la letra
     negra no se leería, así que los tres bloques llevan los mismos valores. */
  --pill-font-color-draft: #000;
  --pill-font-color-study: #000;
  --pill-font-color-no-answer: #000;
  --pill-font-color-on-pause: #000;
  --pill-font-color-required-doc: #000;
  --pill-font-color-record: #000;
  --pill-font-color-waiting-for-proposal: #000;
  --pill-font-color-waiting-for-decision: #000;
  --pill-font-color-appraisal: #fff;
  --pill-font-color-wait-fein: #fff;
  --pill-font-color-notary: #000;
  --pill-font-color-presented: #000;
  --pill-font-color-in-signature: #000;
  --pill-font-color-closed: #fff;
  --pill-font-color-canceled: #fff;
  /* Verdes claros de factura: en blanco se quedaban en 3,6:1 y 2,25:1. */
  --pill-font-color-paid: #000;
  --pill-font-color-partial-paid: #000;
}

/* ================= LIGHT THEME ================= */
[data-bs-theme=light] {
  --pill-font-color-draft: #000;
  --pill-font-color-study: #000;
  --pill-font-color-no-answer: #000;
  --pill-font-color-on-pause: #000;
  --pill-font-color-required-doc: #000;
  --pill-font-color-record: #000;
  --pill-font-color-waiting-for-proposal: #000;
  --pill-font-color-waiting-for-decision: #000;
  --pill-font-color-appraisal: #fff;
  --pill-font-color-wait-fein: #fff;
  --pill-font-color-notary: #000;
  --pill-font-color-presented: #000;
  --pill-font-color-in-signature: #000;
  --pill-font-color-closed: #fff;
  --pill-font-color-canceled: #fff;
  /* Verdes claros de factura: en blanco se quedaban en 3,6:1 y 2,25:1. */
  --pill-font-color-paid: #000;
  --pill-font-color-partial-paid: #000;
}

/* ================= DARK THEME ================= */
[data-bs-theme=dark] {
  --pill-font-color-draft: #000;
  --pill-font-color-study: #000;
  --pill-font-color-no-answer: #000;
  --pill-font-color-on-pause: #000;
  --pill-font-color-required-doc: #000;
  --pill-font-color-record: #000;
  --pill-font-color-waiting-for-proposal: #000;
  --pill-font-color-waiting-for-decision: #000;
  --pill-font-color-appraisal: #fff;
  --pill-font-color-wait-fein: #fff;
  --pill-font-color-notary: #000;
  --pill-font-color-presented: #000;
  --pill-font-color-in-signature: #000;
  --pill-font-color-closed: #fff;
  --pill-font-color-canceled: #fff;
  /* Verdes claros de factura: en blanco se quedaban en 3,6:1 y 2,25:1. */
  --pill-font-color-paid: #000;
  --pill-font-color-partial-paid: #000;
}

/* Los tonos claros de cada familia (#CECBF6, #CFE3F9, #A8CBF1, #FDD09B…) se
   funden con el blanco de la fila del listado: la letra se lee, pero la cápsula
   deja de verse como cápsula. Un contorno interior de 1 px la recorta sin cambiar
   su tamaño ni tapar el color, y sobre los tonos oscuros ni se nota. Va aparte de
   las clases de abajo para no repetirlo quince veces. */
.bg-pill-draft,
.bg-pill-study,
.bg-pill-required-doc,
.bg-pill-record,
.bg-pill-presented,
.bg-pill-waiting-for-proposal,
.bg-pill-waiting-for-decision,
.bg-pill-appraisal,
.bg-pill-wait-fein,
.bg-pill-notary,
.bg-pill-in-signature,
.bg-pill-closed,
.bg-pill-no-answer,
.bg-pill-on-pause,
.bg-pill-canceled {
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.18);
}

/* ================= BADGE CLASSES ================= */
.bg-pill-draft {
  background-color: var(--operation-status-draft);
  color: var(--pill-font-color-draft);
}

.bg-pill-study {
  background-color: var(--operation-status-study);
  color: var(--pill-font-color-study);
}

.bg-pill-no-answer {
  background-color: var(--operation-status-no-answer);
  color: var(--pill-font-color-no-answer);
}

.bg-pill-on-pause {
  background-color: var(--operation-status-on-pause);
  color: var(--pill-font-color-on-pause);
}

.bg-pill-required-doc {
  background-color: var(--operation-status-required-doc);
  color: var(--pill-font-color-required-doc);
}

.bg-pill-record {
  background-color: var(--operation-status-record);
  color: var(--pill-font-color-record);
}

.bg-pill-waiting-for-proposal {
  background-color: var(--operation-status-waiting-for-proposal);
  color: var(--pill-font-color-waiting-for-proposal);
}

.bg-pill-waiting-for-decision {
  background-color: var(--operation-status-waiting-for-decision);
  color: var(--pill-font-color-waiting-for-decision);
}

.bg-pill-appraisal {
  background-color: var(--operation-status-appraisal);
  color: var(--pill-font-color-appraisal);
}

.bg-pill-wait-fein {
  background-color: var(--operation-status-wait-fein);
  color: var(--pill-font-color-wait-fein);
}

.bg-pill-notary {
  background-color: var(--operation-status-notary);
  color: var(--pill-font-color-notary);
}

.bg-pill-presented {
  background-color: var(--operation-status-presented);
  color: var(--pill-font-color-presented);
}

.bg-pill-in-signature {
  background-color: var(--operation-status-in-signature);
  color: var(--pill-font-color-in-signature);
}

.bg-pill-closed {
  background-color: var(--operation-status-closed);
  color: var(--pill-font-color-closed);
}

.bg-pill-canceled {
  background-color: var(--operation-status-canceled);
  color: var(--pill-font-color-canceled);
}

.bg-pill-paid {
  background-color: var(--operation-status-paid);
  color: var(--pill-font-color-paid);
}

.bg-pill-partial-paid {
  background-color: var(--operation-status-partial-paid);
  color: var(--pill-font-color-partial-paid);
}

/* Cápsulas del TIPO de operación */
.bg-pill-type-mortgage {
  background-color: var(--operation-type-mortgage);
  color: #fff;
}

.bg-pill-type-loan {
  background-color: var(--operation-type-loan);
  color: #fff;
}

.bg-pill-type-self-promotion {
  background-color: var(--operation-type-self-promotion);
  color: #fff;
}

.bg-pill-type-mortgage-improvement {
  background-color: var(--operation-type-mortgage-improvement);
  color: #fff;
}

.bg-pill-type-private-capital {
  background-color: var(--operation-type-private-capital);
  color: #fff;
}

.disabled {
    background-color: var(--falcon-gray-200);
    opacity: 1;
    cursor: pointer;
}

.calendar-activity-body-height {
    height: 27.8rem !important;
}

.canvas-operation-user {
    width: 800px !important;
    height: 300px !important;
    padding: 10px 0px;
}

.canvas-total-operation {
    width: auto !important;
    height: 450px !important;
}

.reminder-operation-user {
    height: 356px !important;
}

.no-link-style {
    color: inherit !important;
    text-decoration: none !important;
    cursor: default;
}

.no-link-style>svg {
    cursor: default;
}

.inline-block {
    display: inline-block;
}

.dz-success-mark,
.dz-error-mark {
    display: none;
}

.center-data-on-graph-1 {
    -webkit-transform: translate(190%, -50%) !important;
    -ms-transform: translate(190%, -50%) !important;
    transform: translate(190%, -50%) !important;
}

.center-data-on-graph-3 {
    -webkit-transform: translate(150%, -50%) !important;
    -ms-transform: translate(150%, -50%) !important;
    transform: translate(150%, -50%) !important;
}

.center-data-on-graph-4 {
    -webkit-transform: translate(240%, -50%) !important;
    -ms-transform: translate(240%, -50%) !important;
    transform: translate(240%, -50%) !important;
}

/* Estilos para el contenedor de Dropzone */
#add-document-file-dropzone {
    border: 2px dashed #ccc;
    /* Borde punteado */
    border-radius: 10px;
    /* Bordes redondeados */
    padding: 5px;
    /* Espaciado interno */
    text-align: center;
    /* Centrar contenido */
    background-color: #f9f9f9;
    /* Fondo claro */
}

/* Estilos para el ícono */
#add-document-file-dropzone .dz-message i {
    color: #6c757d;
    /* Color del ícono */
}

/* Estilos para el texto */
#add-document-file-dropzone .dz-message span {
    font-size: 16px;
    /* Tamaño del texto */
    color: #6c757d;
    /* Color del texto */
}

/* Estilos cuando se arrastra un archivo sobre Dropzone */
#add-document-file-dropzone.dz-drag-hover {
    border-color: #0d6efd;
    /* Cambiar color del borde al arrastrar */
    background-color: #e9f5ff;
    /* Cambiar color de fondo al arrastrar */
}

/* Botón "Editar" en icono de los paneles de la ficha de operación. Neutro en
   reposo; al apuntarlo solo se oscurecen trazo y borde, sin meter color en la
   cabecera de la tarjeta. Las variables --edit-* permiten reajustar tamaño y
   paleta sin tocar las reglas. */
.op-edit-btn {
    --edit-size: 31px;
    --edit-radius: 6px;
    --edit-border: #dee2e9;
    --edit-border-hover: #c9ceda;
    --edit-icon: #78828f;
    --edit-icon-hover: #0f172a;
    width: var(--edit-size);
    height: var(--edit-size);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--edit-border);
    border-radius: var(--edit-radius);
    background: #fff;
    color: var(--edit-icon);
    cursor: pointer;
    transition: color .15s, border-color .15s;
}

.op-edit-btn svg {
    width: 15px;
    height: 15px;
    display: block;
}

.op-edit-btn:hover {
    color: var(--edit-icon-hover);
    border-color: var(--edit-border-hover);
}

.op-edit-btn:focus-visible {
    outline: 2px solid var(--edit-icon-hover);
    outline-offset: 2px;
}

.op-edit-btn:active {
    background: #f7f8fa;
}

[data-bs-theme="dark"] .op-edit-btn {
    --edit-border: var(--falcon-border-color, #2b303a);
    --edit-border-hover: #4a5568;
    --edit-icon-hover: var(--falcon-body-color, #e6e8ec);
    background: transparent;
}

[data-bs-theme="dark"] .op-edit-btn:active {
    background: rgba(255, 255, 255, .05);
}

/* Los tres puntos que acompañan al botón de editar. Falcon les da un hover casi
   imperceptible (#748194 -> #5e6e82), así que la pareja no se leía como una
   sola barra de acciones. */
.op-more-btn {
    border-radius: 6px;
    color: #78828f;
    transition: color .15s, background-color .15s;
}

.op-more-btn:hover,
.op-more-btn:focus-visible {
    color: #0f172a;
    background: #f2f4f7;
}

[data-bs-theme="dark"] .op-more-btn:hover,
[data-bs-theme="dark"] .op-more-btn:focus-visible {
    color: var(--falcon-body-color, #e6e8ec);
    background: rgba(255, 255, 255, .06);
}

.custom-margin {
    margin-left: 96%;
}

.operation-public-profile-link {
    color: #6c757d !important;
    cursor: pointer !important;
}

.logo {
    object-fit: cover;
    max-width: 180px;
}

.dataTables-custom-controls {
    display: inline-block;
    top: 57px;
    position: relative;
}

@media (min-width: 412px) {
    .icon-circle {
        width: 6rem;
        height: 6rem;
        margin: 0 auto;
        margin-bottom: 1rem;
    }

    .custom-padding {
        padding: 1rem !important;
    }

    .graphs {
        margin-top: -1.8rem !important;
    }
}

@media (min-width: 650px) {
    .icon-circle {
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border-width: 2px;
        border-style: solid;
        margin: 0 auto;
        margin-bottom: 1rem;
    }

    .custom-padding {
        padding: 0px !important;
    }

    .graphs {
        margin-top: -3rem !important;
    }
}

.btn-status-bar {
    border-radius: 0 0 0 0;
    width: 180px;
    position: relative;
    font-size: 0.85rem;
    font-weight: 200;
    padding: 2px 2px 2px 2px;
    margin: 0 0 0 0;
}

.btn-confirm {
    border-radius: 20px 20px 20px 20px;
    width: 180px;
    font-size: 0.85rem;
    font-weight: 200;
    padding: 2px 20px 2px 20px;
    margin: 0 0px 0 0px;
}

.status-btn-container > :first-child .status-btn,
.status-btn-container > :first-child.status-btn {
  border-radius: 20px 0 0 20px;
}

.status-btn-container > :last-child .status-btn,
.status-btn-container > :last-child.status-btn {
  border-radius: 0 20px 20px 0;
}

.status-btn-drowdown-4 {
    border-radius: 0 0 0 0;
    width: 180px;
    position: relative;
    font-size: 0.85rem;
    font-weight: 200;
    padding: 2px 20px 2px 20px;
}

.dropdown-menu-4 {
    width: 180px;
    display: inline-block;
    margin: 0 0 0 0;
}

.status-btn-drowdown-6 {
    border-radius: 0 20px 20px 0;
    width: 180px;
    position: relative;
    font-size: 0.85rem;
    font-weight: 200;
    padding: 2px 20px 2px 20px;
}

.indent-1 {
    padding-left: 20px !important;
}

.indent-2 {
    padding-left: 40px !important;
}

.section-title {
    font-weight: 500;
}

.number-cell {
    text-align: right;
    font-weight: 400;
}

.colored-cell {
    background: green !important;
    color: white !important;
}

.header-title {
    font-size: 0.9rem !important;
    padding: 4px !important;
    vertical-align: top;
}

/* cadastral */

.section-title {
    background-color: #0d6efd;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    padding: .6rem 1rem;
    border-radius: .25rem .25rem 0 0;
}

.data-label {
    font-weight: 600;
    color: #555;
}

.data-value {
    color: #000;
}


.icon-link {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.05);
    color: #0f172a;
    text-decoration: none;
    transition: background .18s ease, transform .12s ease;
    font-size: 1rem;
}

.icon-link:hover,
.icon-link:focus {
    background: rgba(59, 130, 246, 0.12);
    color: #1e3a8a;
    transform: translateY(-2px);
    outline: none;
}

.icon-link i {
    font-size: 1.05rem;
}

@media (max-width: 576px) {
    .data-label {
        font-size: 0.9rem;
    }

    .icon-link {
        width: 30px;
        height: 30px;
    }
}

.spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.select2-selection__choice .select2-selection--multiple .select2-selection__choice__remove {
    margin-right: 0.70rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    margin-right: 0.70rem;
    color: #d9534f;
}

.select2-selection__choice__display {
    padding-left: 7px !important;
}

.select2-selection__choice__remove {
    border: none !important;
}

.dropdown-menu-custom {
    width: 210px !important;
}

.bg-teal {
    background: #2c7be5;
}

.panel-default {
    color: #6b6c7e;
}

.rpc-concursal-web div.bottom-purple {
    border-bottom: 2px solid #744ced;
    margin: 1rem 0;
}

.card-custom-height {
    height: 21rem !important;
}

.card-custom-calendar-height {
    height: 19.3rem !important;
}

.table-responsive-operation {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: -30px !important;
}

.card-header a.no-link-style {
    position: relative;
    z-index: 1;
}

html {
    scroll-behavior: smooth;
}

.back-to-top {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 40px;
    height: 40px;
    background: linear-gradient(to right, #335dff 50%, #123ce4 50%) no-repeat scroll right bottom / 210% 100% #edcb9a !important;
    color: white;
    border: none;
    border-radius: 50%;
    display: none;
    opacity: 0;
    transition: all 0.3s;
    z-index: 999;
    overflow: hidden; /* necesario para el efecto */
    position: fixed;
}

.back-to-top::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%; /* empieza fuera de la izquierda */
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.10); /* color más oscuro */
    transition: left 0.3s ease;   /* animación suave */
    border-radius: 50%;
}

.back-to-top:hover::before {
    left: 0; /* se desplaza cubriendo el botón */
}

.back-to-top.show {
    display: block;
    opacity: 1;
}

.dataTables_wrapper,
.dataTables_wrapper .dataTable {
    font-family: 'Poppins' !important;
}

.iti {
  width: 100%;
}

.iti input {
  width: 100%;
  box-sizing: border-box;
}

.main-image{
  background-image: url('../img/background.png');
  background-size: cover;       /* Ajusta la imagen para cubrir todo el contenedor */
  background-position: center;  /* Centra la imagen */
  background-repeat: no-repeat; /* Evita que se repita */
}

canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

/* Boton impuesto - mayor especificidad */
.btn.btn-outline-secondary-tax {
    --falcon-btn-color: #2c7be5;
    --falcon-btn-border-color: #2c7be5;
    --falcon-btn-hover-color: #fff;
    --falcon-btn-hover-bg: #2c7be5;
    --falcon-btn-hover-border-color: #2c7be5;
    --falcon-btn-focus-shadow-rgb: 44, 123, 229;
    --falcon-btn-active-color: #fff;
    --falcon-btn-active-bg: #2c7be5;
    --falcon-btn-active-border-color: #2c7be5;
    --falcon-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --falcon-btn-disabled-color: #2c7be5;
    --falcon-btn-disabled-bg: transparent;
    --falcon-btn-disabled-border-color: #2c7be5;
    --falcon-gradient: none;
    color: #2c7be5;
    border-color: #2c7be5;
    background-color: transparent;
}
.btn.btn-outline-secondary-tax:hover,
.btn.btn-outline-secondary-tax:focus,
.btn.btn-outline-secondary-tax:active {
    color: #fff;
    background-color: #2c7be5;
    border-color: #2c7be5;
}

/* ===== PDF "Informe de Propuestas": color de acento =====
   Este valor lo lee ProposalController al generar el PDF (dompdf no soporta
   variables CSS, así que el controlador extrae el color de este archivo).
   Para cambiar el azul del PDF, modificar solo el valor de esta variable. */
:root {
    --pdf-proposals-accent: #1e40af;
}

/* Menu "Ecosistema Inmolender" (icono 9 puntos): anclado a su icono, sin desbordar la ventana */
.nav-item-ecosystem {
    position: relative;
}

.navbar .nav-item-ecosystem .dropdown-menu {
    left: auto !important;
    right: -0.5rem !important;
}

.navbar .nav-item-ecosystem .dropdown-menu.dropdown-caret:after {
    left: auto !important;
    right: 0.75rem !important;
}

/* Columna Fuente del listado de documentos (Manual / Cliente / Clave PIN) */
.bg-pill-source-manual {
  background-color: #7c3aed;
  color: #ffffff;
}
.bg-pill-source-client {
  background-color: #00d27a;
  color: #ffffff;
}
.bg-pill-source-clave-pin {
  background-color: #36a1ed;
  color: #ffffff;
}

/* Columna Estado del listado de citas. Cada una toma el color EXACTO de una
   cápsula que ya existe en otro apartado, por su variable y no por su hex, para
   que no se separen si un día se retoca la paleta:
     confirmada  verde   #00D27A  el de «Préstamo» (tipo de operación)
     realizada   azul    #36A1ED  el de «Vivienda habitual» (tipo de operación)
     no acudió   naranja #FF9F40  el de «Autopromotor» (tipo de operación)
     cancelada   rojo    #E63757  el de «ANULADO» (firmas)
   Letra blanca a pelo, igual que las `.bg-pill-type-*` de las que salen: el
   bloque `[data-bs-theme=light]` que pondría letra negra NUNCA se aplica,
   porque `config.js` solo escribe ese atributo en oscuro y en automático.
   Los nombres van aparte porque una cita no es ni una operación ni una firma. */
.bg-pill-appointment-confirmed {
  background-color: var(--falcon-success);
  color: #fff;
}
/* Las dos cuelgan ahora de la variable del TIPO de operación, que es de donde el
   comentario de arriba decía que salían (#36A1ED «Vivienda habitual» y #FF9F40
   «Autopromotor») y que conserva su hex al cambiar la gama del embudo. Colgaban de
   `--operation-status-appraisal` y `--operation-status-study`, que con la gama
   nueva son azul marino y morado: la cita habría cambiado de color sin motivo. */
.bg-pill-appointment-done {
  background-color: var(--operation-type-mortgage);
  color: #fff;
}
.bg-pill-appointment-no-show {
  background-color: var(--operation-type-self-promotion);
  color: #fff;
}
.bg-pill-appointment-canceled {
  background-color: var(--falcon-danger);
  color: #fff;
}

/* Iconos del navbar (WhatsApp, campana, tema, apps, avatar): MISMA separación
   entre todos.

   Antes convivían DOS convenciones y por eso los huecos no eran iguales —
   medidos con getBoundingClientRect sobre la barra real: 7,6 · 7,6 · 22,8 ·
   10,2 px. Los tres primeros separaban por la DERECHA (`.nav-link.pe-1`) y los
   dos últimos por la IZQUIERDA (`.nav-link.ps-2`), así que unos sumaban 5,12 px
   y otros 10,24. Las reglas anteriores encogían las dos a la vez, con lo que
   acercaban los iconos pero mantenían la diferencia.

   Ahora TODO el espacio lo pone el `<li>`, por la izquierda, y se anula el de
   los hijos. Un solo sitio decide la separación. Las utilidades de Bootstrap
   llevan `!important`, de ahí estos. */
.navbar-nav-icons > .nav-item {
    padding-left: 10px !important;
    padding-right: 0 !important;
}
.navbar-nav-icons > .nav-item:first-child {
    padding-left: 0 !important;
}
.navbar-nav-icons > .nav-item > .nav-link,
.navbar-nav-icons > .nav-item > div > .nav-link {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   Menú del avatar: cabecera, opciones con icono y el selector de tema dentro.

   El tema era un icono suelto de la barra con su propio desplegable; ahora vive
   aquí. `theme.js` escucha por delegación en `document.body` y es quien pone y
   quita la clase `active` sobre los `[data-theme-control="theme"]`, así que la
   marca del activo la da él: aquí solo se le da forma.
   ────────────────────────────────────────────────────────────────────────── */
.menu-usuario {
    min-width: 15rem;
}
.menu-usuario-cabecera {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
}
.menu-usuario-quien {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.menu-usuario-nombre {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--falcon-body-color);
    line-height: 1.2;
}
.menu-usuario-rol {
    font-size: 0.72rem;
    color: var(--falcon-gray-600);
}

/* Las opciones: icono a la izquierda, siempre a la misma altura. El ancho fijo
   del icono es lo que alinea los rótulos aunque los glifos midan distinto. */
.menu-usuario-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
}
.menu-usuario-item > .fas {
    width: 1rem;
    text-align: center;
    color: var(--falcon-gray-600);
}
.menu-usuario-fuera {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--falcon-gray-500);
}

/* Cerrar sesión es la única opción destructiva del menú: se separa y se marca. */
.menu-usuario-salir,
.menu-usuario-salir > .fas {
    color: var(--falcon-danger);
}
.menu-usuario-salir:hover,
.menu-usuario-salir:focus {
    color: var(--falcon-danger);
}

.menu-usuario-tema {
    padding: 0.7rem 1rem 0.8rem;
}
.menu-usuario-rotulo {
    display: block;
    font-size: 0.72rem;
    color: var(--falcon-gray-600);
    margin-bottom: 0.45rem;
}
.tema-segmentado {
    display: flex;
    border: 1px solid var(--falcon-border-color);
    border-radius: 0.375rem;
    overflow: hidden;
}
.tema-opcion {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.35rem 0.2rem;
    font-size: 0.72rem;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--falcon-border-color);
    color: var(--falcon-gray-700);
    transition: background-color 0.15s ease;
}
.tema-opcion:first-child {
    border-left: 0;
}
.tema-opcion:hover {
    background: var(--falcon-gray-100);
}
/* `active` la pone theme.js sobre el botón del tema vigente. */
.tema-opcion.active {
    background: var(--falcon-primary);
    color: #fff;
}
.tema-opcion.active:hover {
    background: var(--falcon-primary);
}

/* Botones estilo kanban en las secciones Rendimientos/Préstamos del interviniente
   (misma familia que .kbm-btn: radio 6px, 7x14, 0.8rem/500, transición suave). */
.itv-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 1.2;
}
.itv-btn:focus { outline: none; }
.itv-btn-primary { background: #2c7be5; color: #fff; }
.itv-btn-primary:hover { background: #1e63c4; color: #fff; }
.itv-btn-ghost { background: transparent; color: var(--falcon-gray-600, #748194); border-color: var(--falcon-border-color, #e3e6ed); }
.itv-btn-ghost:hover { background: var(--falcon-gray-200, #edf2f9); color: var(--falcon-gray-1100, #344050); }
.itv-btn-outline { background: transparent; color: #2c7be5; border-color: var(--falcon-border-color, #e3e6ed); }
.itv-btn-outline:hover { background: #2c7be5; color: #fff; border-color: #2c7be5; }
.itv-btn-success { background: #00d27a; color: #fff; }
.itv-btn-success:hover { background: #00b368; color: #fff; }

/* Barra de Guardar/Cancelar de los paneles de la ficha de operación. El
   .modal-footer que los envuelve no trae relleno aquí, así que quedaban pegados
   al borde de la tarjeta; y se piden un punto más grandes que los del panel de
   comentarios (misma familia, +7 %). */
.op-edit-actions {
    padding-right: 12px;
}

.op-edit-actions .itv-btn {
    padding: 7.5px 15px;
    font-size: 0.856rem;
}

/* Banda "Rendimiento neto mensual" bajo la lista de rendimientos */
.itv-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: var(--falcon-gray-100, #f9fafd);
    border: 1px solid var(--falcon-border-color, #e3e6ed);
    border-radius: 6px;
    padding: 9px 14px;
}
.itv-total-label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--falcon-gray-600, #748194); }
.itv-total-hint { font-size: 11.5px; color: var(--falcon-gray-500, #9da9bb); }
.itv-total-value { font-size: 15px; font-weight: 500; color: #2c7be5; }

/* Modal "Registrar Pago": columna del histórico con métricas (opción B) y
   pagos como nubes tipo bocadillo. */
.pmt-side { background: var(--falcon-gray-100, #f9fafd); border-radius: 8px; padding: 14px 16px; height: 100%; }
.pmt-sec-title { font-size: 11px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--falcon-gray-600, #748194); margin-bottom: 10px; }
.pmt-metrics { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 6px; }
.pmt-metric { border-radius: 8px; padding: 8px 10px; text-align: center; }
.pmt-metric-label { font-size: 10px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.pmt-metric-value { font-size: 14px; font-weight: 500; white-space: nowrap; }
.pmt-metric-paid { background: #e7faf3; }
.pmt-metric-paid .pmt-metric-label, .pmt-metric-paid .pmt-metric-value { color: #0a7a4b; }
.pmt-metric-pending { background: #fdf3e0; }
.pmt-metric-pending .pmt-metric-label, .pmt-metric-pending .pmt-metric-value { color: #a3720c; }
.pmt-metric-total { background: #eef1f6; }
.pmt-metric-total .pmt-metric-label { color: #5e6e82; }
.pmt-metric-total .pmt-metric-value { color: #344050; }
.pmt-progress { height: 6px; background: #edf2f9; border-radius: 3px; overflow: hidden; margin-bottom: 12px; }
.pmt-progress-fill { height: 100%; background: #00d27a; transition: width .3s ease; }
.pmt-clouds { max-height: 300px; overflow-y: auto; }
.pmt-cloud { background: #fff; border: 1px solid #e3e6ed; border-radius: 14px 14px 14px 4px; padding: 10px 14px; margin-bottom: 10px; }
.pmt-cloud-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pmt-cloud-amount { font-size: 15px; font-weight: 500; color: #344050; }
.pmt-cloud-date { font-size: 11.5px; color: #9da9bb; white-space: nowrap; }
.pmt-cloud-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.pmt-cloud-method { font-size: 10.5px; font-weight: 500; background: #e6f0fc; color: #1e63c4; border-radius: 10px; padding: 2px 8px; white-space: nowrap; }
.pmt-cloud-desc { font-size: 12px; color: #748194; }
.pmt-empty { text-align: center; font-size: 12px; color: #9da9bb; padding: 18px 0; }
.pmt-count { text-align: center; font-size: 11.5px; color: #9da9bb; padding-top: 2px; }

/* Quién registró el pago, a la derecha del meta de la nube */
.pmt-cloud-user { font-size: 11px; color: #9da9bb; margin-left: auto; white-space: nowrap; }
.pmt-cloud-user .fas { font-size: 10px; }

/* Editar / eliminar el pago desde su propia nube */
.pmt-cloud-actions { display: inline-flex; gap: 8px; margin-left: 8px; }
.pmt-cloud-action { background: none; border: 0; padding: 0; line-height: 1; font-size: 11.5px; color: #9da9bb; cursor: pointer; }
.pmt-cloud-action:hover { color: #2c7be5; }
.pmt-cloud-action-danger:hover { color: #e63757; }
.pmt-cloud-editing { border-color: #2c7be5; box-shadow: 0 0 0 1px #2c7be5; }

/* ═══════════════════════════════════════════════════════════════════════════
   Rejilla de la pestaña Documentación

   La tabla y la rejilla son dos formas de pintar lo mismo, así que comparten
   el envoltorio que crea DataTables: el buscador, el «mostrar N» y la
   paginación quedan por encima y por debajo de las dos.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Conmutador lista / iconos */
.doc-view-toggle .btn {
    padding: 5px 10px;
    line-height: 1;
    color: var(--falcon-gray-600, #748194);
    background: #fff;
    border: 1px solid var(--falcon-border-color, #e3e6ed);
}

.doc-view-toggle .btn + .btn {
    border-left: 0;
}

.doc-view-toggle .btn:hover {
    background: var(--falcon-gray-200, #edf2f9);
    color: var(--falcon-gray-1100, #344050);
}

.doc-view-toggle .btn.active {
    background: #2c7be5;
    border-color: #2c7be5;
    color: #fff;
}

.doc-view-toggle .btn svg {
    display: block;
}

/* Barra que aparece al marcar documentos */
.doc-selbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: #eaf2fd;
    border: 1px solid #cadffa;
    border-radius: 4px;
    padding: 8px 14px;
    margin-bottom: 12px;
    font-size: 0.82rem;
}

.doc-selcount {
    font-weight: 500;
    color: #17549f;
}

.doc-selactions {
    display: flex;
    gap: 6px;
    margin-left: auto;
    flex-wrap: wrap;
}

.doc-chip {
    font-family: inherit;
    font-size: 0.78rem;
    background: #fff;
    border: 1px solid #cadffa;
    color: #17549f;
    border-radius: 4px;
    padding: 4px 11px;
    cursor: pointer;
    line-height: 1.5;
}

.doc-chip:hover {
    border-color: #2c7be5;
}

.doc-chip-danger {
    color: #e63757;
    border-color: #f6ccd5;
}

.doc-chip-danger:hover {
    border-color: #e63757;
}

/* Rejilla.

   Se pinta DENTRO del cuerpo de la tabla, en el sitio que ocupaban las filas,
   para que el «mostrar N» y el buscador queden encima y la paginación debajo
   igual que en la lista. A cambio hay que quitarle a esa celda todo lo que la
   tabla le pone encima: el rayado, el hover, los bordes y el relleno. El
   rayado de Bootstrap 5 se aplica con box-shadow sobre las celdas, no con
   background, asi que hay que anular las dos cosas. */
.doc-table-grid > tbody > tr.doc-grid-row,
.doc-table-grid > tbody > tr.doc-grid-row:hover,
.doc-table-grid > tbody > tr.doc-grid-row > td {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.doc-grid-cell {
    padding: 4px 0 0 !important;
    vertical-align: top;
}

.doc-selectall {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--falcon-gray-1100, #344050);
    margin-bottom: 12px;
    cursor: pointer;
}

.doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    gap: 14px;
}

.doc-tile {
    position: relative;
    border: 1px solid var(--falcon-border-color, #e3e6ed);
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.doc-tile:hover {
    border-color: #c9d2e0;
    box-shadow: 0 4px 14px -6px rgba(11, 23, 39, 0.22);
}

.doc-tile.is-selected {
    border-color: #2c7be5;
    background: #eaf2fd;
    box-shadow: 0 0 0 1px #2c7be5;
}

.doc-tile:focus-visible {
    outline: 2px solid #2c7be5;
    outline-offset: 2px;
}

.doc-thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--falcon-gray-200, #edf2f9);
    border-bottom: 1px solid var(--falcon-border-color, #e3e6ed);
    overflow: hidden;
}

.doc-thumb-media {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* La miniatura enseña la parte ALTA del documento, que es donde está el
   membrete que permite reconocerlo de un vistazo. */
.doc-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    opacity: 0;
    transition: opacity 0.2s;
}

.doc-img.is-ready {
    opacity: 1;
}

/* Ficha para lo que no tiene miniatura */
.doc-chipext {
    width: 56px;
    height: 68px;
    border-radius: 4px;
    background: #fff;
    border: 1px solid #dfe4ec;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 9px;
    position: relative;
    box-shadow: 0 1px 4px rgba(11, 23, 39, 0.07);
}

.doc-chipext::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-width: 0 14px 14px 0;
    border-style: solid;
    border-color: #eef1f6 #f6f8fb;
}

.doc-chipext span {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    border-radius: 2px;
    padding: 1px 6px;
}

/* Casilla de la tarjeta: discreta hasta que hace falta */
.doc-tick {
    position: absolute;
    top: 7px;
    left: 7px;
    z-index: 3;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--falcon-border-color, #e3e6ed);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.12s;
}

.doc-tile:hover .doc-tick,
.doc-tile.is-selected .doc-tick,
.doc-grid.has-selection .doc-tick {
    opacity: 1;
}

.doc-tick input {
    margin: 0;
    cursor: pointer;
}

/* Acciones sobre la miniatura */
.doc-tools {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 14px;
    padding: 6px 0;
    background: linear-gradient(to top, rgba(11, 23, 39, 0.78), rgba(11, 23, 39, 0));
    opacity: 0;
    transition: opacity 0.12s;
}

.doc-tile:hover .doc-tools,
.doc-tile:focus-within .doc-tools {
    opacity: 1;
}

.doc-act {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: #fff;
    font-size: 0.78rem;
    line-height: 1;
}

.doc-act:hover {
    color: #9fc7ff;
}

.doc-act-danger:hover {
    color: #ff8ba3;
}

.doc-act:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 2px;
}

.doc-meta {
    padding: 9px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.doc-name {
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--falcon-gray-1100, #344050);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.05em;
}

.doc-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: space-between;
}

.doc-cat {
    font-size: 0.68rem;
    color: var(--falcon-gray-600, #748194);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .doc-img,
    .doc-tick,
    .doc-tools,
    .doc-tile {
        transition: none;
    }
}

/* Herramientas de PDF: la lista ordenable del modal de unir/convertir.
   El orden de esta lista ES el orden de las páginas del PDF que sale, así que
   el número va delante y bien visible, no como decoración. */
.doc-chip:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    border-color: #cfd8e5;
    color: var(--falcon-gray-600, #748194);
    background: transparent;
}

.doc-order-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 46vh;
    overflow-y: auto;
}

.doc-order-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 6px 10px;
    border: 1px solid var(--falcon-border-color, #e3e6ed);
    border-radius: 5px;
    background: #fff;
    cursor: grab;
}

.doc-order-row.is-dragging {
    opacity: 0.35;
}

.doc-order-row.is-over {
    border-color: #2c7be5;
    background: #eaf2fd;
}

.doc-order-grip {
    color: #b6c1d2;
    flex: none;
}

.doc-order-num {
    flex: none;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #2c7be5;
    color: #fff;
    font-size: 0.68rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

.doc-order-mini {
    flex: none;
    width: 30px;
    height: 38px;
    object-fit: cover;
    object-position: top center;
    border: 1px solid #dfe4ec;
    border-radius: 2px;
    background: #fff;
}

.doc-order-mini-vacia {
    display: block;
    background: var(--falcon-gray-200, #edf2f9);
}

.doc-order-name {
    font-size: 0.78rem;
    color: var(--falcon-gray-1100, #344050);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.doc-order-move {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: none;
}

.doc-order-move button {
    background: none;
    border: 0;
    padding: 0 4px;
    cursor: pointer;
    color: var(--falcon-gray-600, #748194);
    line-height: 0.8;
    font-size: 0.7rem;
}

.doc-order-move button:hover:not(:disabled) {
    color: var(--falcon-gray-1100, #344050);
}

.doc-order-move button:disabled {
    opacity: 0.3;
    cursor: default;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Buscador de la bandeja de correo

   Pastilla con la lupa dentro. Los colores salen de las variables de Falcon
   —no de hexadecimales— para que el modo oscuro lo siga solo.
   ═══════════════════════════════════════════════════════════════════════════ */
.email-search {
    position: relative;
    flex: 1 1 auto;
    max-width: 34rem;
}

.email-search-icon {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 0.9rem;
    color: var(--falcon-gray-600);
}

.email-search-field {
    height: auto;
    min-width: 20rem;
    padding: 0.6rem 1rem 0.6rem 2.6rem;
    border: 1px solid transparent;
    border-radius: 2rem;
    background-color: var(--falcon-gray-200);
    font-size: 0.9rem;
}

.email-search-field::placeholder {
    color: var(--falcon-gray-600);
}

/* Al escribir se levanta: fondo del formulario y borde, para que se vea dónde
   está el foco sin que la pastilla cambie de forma. */
.email-search-field:focus {
    background-color: var(--falcon-input-bg, #fff);
    border-color: var(--falcon-border-color);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}

[data-bs-theme="dark"] .email-search-field {
    background-color: var(--falcon-gray-300);
}

[data-bs-theme="dark"] .email-search-field:focus {
    background-color: var(--falcon-gray-200);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Bandeja de correo a pantalla completa

   Las dos columnas miden lo que mide la ventana y la única que se desplaza es
   la lista de correos: el lateral de carpetas se queda quieto y el paginador
   del pie no se va de la pantalla.

   El alto sale de la MISMA cuenta que la aplicación de chat de Falcon
   (`.card-chat`): la ventana, menos la barra de arriba —que es `sticky`, no
   `fixed`, y por eso hay que descontarla— menos el hueco que `.content` deja
   para el pie, que va en `position:absolute`. Los dos números están medidos, no
   elegidos: `--falcon-top-nav-height` es la variable del propio tema y
   `3.9875rem` es literalmente el `padding-bottom` que `.content` se pone a
   partir de 576 px.

   🔴 Solo a partir de `lg`, y no es pereza. Por debajo la columna de carpetas
   ni siquiera se pinta (`d-none d-lg-block`), así que no hay nada que fijar; y
   sobre todo, en un móvil `100vh` MIENTE: la barra del navegador entra y sale
   con el desplazamiento y el valor no se recalcula, así que la lista quedaría
   cortada o con la última fila fuera de alcance. Ahí se queda el
   desplazamiento normal de la página, que es lo que había y funciona.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    .email-column {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--falcon-top-nav-height) - 3.9875rem);
    }

    /* Los avisos que van encima de la tarjeta —la papelera, el buzón sin
       configurar, el resultado de la última acción— se llevan su alto y la
       tarjeta se queda con lo que sobre. Si en vez de esto la tarjeta llevara
       el alto puesto, cada aviso empujaría el pie fuera de la ventana. */
    .email-column > .card {
        flex: 1 1 auto;
        min-height: 0;
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
    }

    /* Ni la cabecera ni el pie encogen: el buscador y el paginador tienen que
       quedarse a la vista, que es media gracia de que la lista scrollee sola. */
    .email-column > .card > .card-header,
    .email-column > .card > .card-footer {
        flex: 0 0 auto;
    }

    /* 🔴 El `min-height: 0` no es adorno. Un hijo de contenedor flexible tiene
       por defecto `min-height: auto`, o sea que se niega a encoger por debajo
       de su contenido: sin esto la lista crece con los correos, empuja el pie
       fuera de la ventana y NO aparece ninguna barra, que es exactamente el
       fallo que se venía a arreglar. */
    .email-list {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    /* 🔴 `!important`, y no es por vagancia.

       La columna de carpetas lleva `d-none d-lg-block` para desaparecer en
       móvil, y las utilidades de display de Bootstrap están escritas con
       `!important`: `display: block !important` le ganaba al `display: flex` de
       `.email-column`, así que la columna cogía el alto pero la tarjeta de
       dentro no tenía contra qué estirarse y se quedaba de su alto natural. Con
       diez carpetas eso son 90 px de menos, y se ve: la tarjeta de la izquierda
       acaba antes que la de la derecha.

       A la columna de la derecha no le pasa porque no lleva ninguna utilidad de
       display encima.

       La alternativa sería quitarle el `d-none d-lg-block` y esconderla desde
       aquí, pero eso es reimplementar dos utilidades del tema para no escribir
       una palabra. */
    .email-sidebar {
        display: flex !important;
    }

    /* El cuerpo de la tarjeta es lo que se desplaza, y SOLO él: el listado de
       la derecha tiene el suyo. Hoy no hace falta —diez carpetas caben en
       cualquier pantalla—, pero las etiquetas del despacho se añaden desde la
       propia bandeja y esa lista sí crece.

       ⚠️ El `min-height: 0` otra vez: sin él, un hijo flexible se niega a
       encoger por debajo de su contenido, la tarjeta crece con las carpetas y
       no aparece ninguna barra. Es el mismo detalle que la lista de correos. */
    .email-sidebar > .card > .card-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   El botón «Redactar» de la bandeja

   Pastilla elevada. Es la única acción de la pantalla que CREA algo, y con la
   forma de un botón corriente se perdía entre las diez carpetas de debajo;
   ninguna otra cosa de esta pantalla es una cápsula, así que el ojo la
   encuentra sin leerla.

   El azul sale de `--falcon-primary-rgb` y no de un hexadecimal escrito a
   mano: el día que la marca cambie de color, la sombra lo sigue sola.
   ═══════════════════════════════════════════════════════════════════════════ */
.email-compose {
    margin-bottom: 1.25rem;
    padding: 0.7rem 1rem;
    border-radius: 2rem;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(var(--falcon-primary-rgb), 0.28), 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.email-compose:hover,
.email-compose:focus-visible {
    box-shadow: 0 5px 14px rgba(var(--falcon-primary-rgb), 0.38), 0 2px 4px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

/* Al pulsar vuelve al sitio: sin esto el botón se queda levantado mientras se
   carga el compositor y parece que no ha pasado nada. */
.email-compose:active {
    transform: translateY(0);
}

/* A quien pida menos movimiento se le deja la pastilla, que es lo que se
   quería, y se le quita el salto. */
@media (prefers-reduced-motion: reduce) {
    .email-compose {
        transition: none;
    }

    .email-compose:hover,
    .email-compose:focus-visible {
        transform: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Selección múltiple en la bandeja de correo

   La barra aparece al marcar el primer correo. Sigue el lenguaje de la barra de
   la pantalla de documentación (`.doc-selbar`), que es la que ya existe para
   esto, pero con los colores sacados de las variables de Falcon en vez de
   hexadecimales escritos a mano: aquella tiene tres azules fijos y en modo
   oscuro se queda con el fondo claro.
   ═══════════════════════════════════════════════════════════════════════════ */
.email-selbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 0.5rem 0.9rem;
    border-top: 1px solid var(--falcon-border-color);
    background-color: rgba(var(--falcon-primary-rgb), 0.07);
    font-size: 0.82rem;
}

.email-selcount {
    font-weight: 600;
    color: var(--falcon-primary);
}

.email-selactions {
    display: flex;
    gap: 6px;
    margin-left: auto;
    flex-wrap: wrap;
}

.email-chip {
    font-family: inherit;
    font-size: 0.78rem;
    line-height: 1.5;
    padding: 4px 11px;
    border: 1px solid var(--falcon-border-color);
    border-radius: 4px;
    background-color: var(--falcon-card-bg, #fff);
    color: var(--falcon-primary);
    cursor: pointer;
    transition: border-color 0.15s ease-in-out;
}

.email-chip:hover:not(:disabled) {
    border-color: var(--falcon-primary);
}

/* Se apagan mientras la acción está en vuelo. Sin esto, un segundo clic manda
   el mismo lote otra vez —y el de eliminar ya habría vaciado la selección—. */
.email-chip:disabled {
    opacity: 0.55;
    cursor: default;
}

.email-chip-danger {
    color: var(--falcon-danger);
}

.email-chip-danger:hover:not(:disabled) {
    border-color: var(--falcon-danger);
}

/* La fila marcada se tiñe. Con veinticinco filas seguidas, una casilla marcada
   a media pantalla no se ve; el fondo sí.

   ⚠️ Lleva `!important` porque la fila trae ya su propio fondo desde la
   plantilla —`bg-white` o `bg-body-tertiary` según esté leída— y esas son
   utilidades de Bootstrap, que también lo llevan. Es el único sitio de este
   fichero donde hace falta y por eso queda anotado. */
.email-row-selected,
.email-row-selected .d-flex {
    background-color: rgba(var(--falcon-primary-rgb), 0.09) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Etiquetas de correo

   El color lo elige quien crea la etiqueta y llega por la variable
   `--email-label-color` en el `style` del elemento, así que el fondo se
   saca de ese mismo color con `color-mix` en vez de guardar dos colores por
   etiqueta.

   El respaldo del `background-color` es para los navegadores sin `color-mix`
   (Safari por debajo de 16.2): ahí la insignia sale con el fondo gris de
   siempre y el rótulo en su color, que se lee perfectamente. Va PRIMERO, que es
   como se escribe un respaldo en CSS: la de abajo lo pisa donde se entienda.
   ═══════════════════════════════════════════════════════════════════════════ */
.email-label {
    color: var(--email-label-color, var(--falcon-primary));
    background-color: var(--falcon-gray-200);
    background-color: color-mix(in srgb, var(--email-label-color, #2c7be5) 15%, transparent);
}

/* El punto que precede al nombre en el lateral y en el menú «Etiquetar». Es
   un `span` vacío, así que necesita `display` propio para tener tamaño. */
.email-label-dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background-color: var(--email-label-color, var(--falcon-primary));
    vertical-align: baseline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Los encabezados «Sin leer» / «Todo lo demás»

   🔴 Se quedan pegados arriba, y es consecuencia directa del lateral fijo.
   Mientras scrolleaba la página entera, estos dos rótulos se iban con ella y no
   pasaba nada. Ahora que quien se desplaza es la lista, sin esto se pierden a
   la primera pantalla y quedan veinticinco filas seguidas sin saber en qué
   grupo se está.

   El fondo es obligatorio, no decorativo: el `<h5>` no tenía ninguno —solo un
   borde inferior— y pegado se le verían las filas por debajo.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    /* Solo dentro de la columna de la bandeja, que tiene scroll propio. En el
       hilo de una operación la lista va con la página y un rótulo pegado a
       `top: 0` quedaría bajo la barra superior. */
    .email-column .email-group {
        position: sticky;
        top: 0;
        z-index: 2;
        background-color: var(--falcon-card-bg, #fff);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Los contadores de las carpetas de correo

   Una sola pastilla para todos, la de la maqueta que se aprobó: azul de marca
   al 12 %, texto en el azul entero, redondeada del todo. La papelera es la
   única excepción y va en rojo, porque su número no cuenta trabajo pendiente
   sino lo que está a punto de perderse.

   Los dos colores salen de las variables de Falcon, así que el modo oscuro los
   sigue solo y el día que la marca cambie de azul, esto también.
   ═══════════════════════════════════════════════════════════════════════════ */
.email-counter {
    font-size: 0.62rem;
    font-weight: 600;
    padding: 0.16rem 0.42rem;
    background-color: rgba(var(--falcon-primary-rgb), 0.12);
    color: var(--falcon-primary);
}

.email-counter-badge {
    background-color: rgba(var(--falcon-danger-rgb), 0.12);
    color: var(--falcon-danger);
}

/* ═══════════════════════════════════════════════════════════════════════════
   La cabecera del compositor de correo

   Un solo eje para los cinco campos: «Operación», «Para», «Cc», «Cco» y
   «Asunto». Antes solo «Operación» tenía columna —y con el ancho escrito en un
   `style` a mano—, mientras que los rótulos de los otros cuatro medían lo que
   medía su palabra, así que cada campo arrancaba en un sitio distinto.

   5.5rem no es una medida nueva: es la que ya usaba la fila de «Operación».
   ═══════════════════════════════════════════════════════════════════════════ */
.dest-rotulo {
    width: 5.5rem;
    flex: 0 0 auto;
}

/* El campo se queda con todo lo que sobra.

   ⚠️ Esto es cinturón y tirantes, no el arreglo. El widget de cápsulas
   (bootstrap5-tags) mete su contenedor —que lleva `.form-control`— justo ANTES
   del `<select>` original y en el MISMO padre, y a ese select le deja puesto en
   línea `flex-basis: 100%`. O sea que en la fila conviven el contenedor visible
   y un hermano invisible que dice reclamar todo el ancho.

   Hoy no da problema porque ese mismo estilo en línea le pone `width: 1px`, y
   el mínimo automático de un elemento flexible con ancho declarado es ese
   ancho: el select se encoge a 1px y el contenedor se queda con el resto. Pero
   eso depende de una sutileza del modelo flexible y de un estilo en línea de
   una librería de terceros, así que se deja escrito lo que se quiere que pase
   en vez de confiar en que siga cuadrando. */
.dest-fila > .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   La fila del listado de correo

   La casilla y la estrella se alinean con el AVATAR, que es la referencia de la
   primera línea. Antes cada una se colocaba con su propio margen —`mt-2` la
   casilla, `mt-1` la estrella— y las tres piezas caían en sitios distintos:
   medido en el navegador, avatar en 18 px, casilla en 22.7 y estrella en 23.5.

   En vez de repartir márgenes a ojo, cada una va dentro de una caja del alto
   EXACTO del avatar y centrada en ella. Así el número no se elige: sale de
   `.avatar-s`, que es lo que mide el avatar de al lado. El día que ese tamaño
   cambie, esto lo sigue.

   ⚠️ `align-self: flex-start` es imprescindible. Las columnas de un `.row` se
   estiran a lo alto de la fila entera, así que sin esto la caja mediría lo que
   mida el correo más largo y el centrado la mandaría al medio de la fila.
   ═══════════════════════════════════════════════════════════════════════════ */
.email-icon {
    align-self: flex-start;
    display: flex;
    align-items: center;
    height: 1.25rem;
}

/* Bootstrap le pone a la casilla un `margin-top: 0.25em` suyo, para cuadrarla
   con la linea de texto de una etiqueta. Aqui no hay etiqueta al lado y ese
   margen la baja 1.7 px por debajo de sus companeras — medido—, asi que se
   quita: quien la coloca es la caja de arriba. */
.email-icon .form-check-input {
    margin-top: 0;
}

/* El nombre y su insignia, en el mismo renglón.

   El nombre encoge y se recorta; la insignia no encoge nunca. `min-width: 0` en
   los dos sitios porque un elemento flexible se niega por defecto a encoger por
   debajo de su contenido, y sin eso `text-truncate` no recorta nada: el nombre
   desborda y vuelve a empujar la insignia fuera. */
/* ⚠️ `:not(.badge)` y no `> a`: en la fila de borradores, un correo que está
   SALIENDO pinta el destinatario en un `<span>` y no en un enlace —a propósito,
   porque ahí no se puede abrir—, y con un selector que solo mire enlaces esa
   fila se quedaba sin recortar y volvía a empujar la insignia. */
.email-name,
.email-name > :not(.badge) {
    min-width: 0;
}

.email-name > .badge {
    flex: 0 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Los botones de acción de una fila de correo

   Quedaban a 32 px del borde de la fila y de esos 32 solo 16 eran a propósito
   —el `me-3` del grupo—. Los otros 16 eran el CANALÓN de Bootstrap: el grupo
   está en posición absoluta, pero sigue siendo hijo del `.row`, así que
   `.row > *` le pone su relleno igual. Y un canalón en un elemento que ya se
   coloca solo no separa de nada: solo mete los botones hacia dentro de su
   propia caja.

   `width: max-content` sustituye al ancho que la vista escribía a mano. Hacía
   falta porque `.btn-group > .btn` es `flex: 1 1 auto`: sin un ancho que los
   contenga, los botones crecen hasta llenar lo que tengan delante —medido:
   1343 px—. Con `max-content` el grupo mide lo que miden sus botones y nadie
   tiene que contarlos.

   ⚠️ El selector lleva el `.row` delante a propósito. `.row > *` tiene la misma
   especificidad que una clase suelta, así que sin él esto dependería de que
   `user.min.css` se sirva después de `theme.min.css` — que hoy es así, pero es
   un detalle del layout y no algo que esta regla deba dar por hecho.
   ═══════════════════════════════════════════════════════════════════════════ */
.row > .email-actions {
    padding-left: 0;
    padding-right: 0;
    width: max-content;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Etiquetas de correo al estilo Gmail: la × de la pastilla, el árbol del
   lateral, el menú «Etiquetar», la paleta y el arrastre

   Todo lo de aquí abajo cuelga de las clases `email-label-*` que ponen
   `_row`, `_label-node`, `_label-menu` y el JavaScript de `_actions-js` y
   `_labels-js`. Ni un color ni una fuente escritos a mano: los colores salen
   de las variables de Falcon o de `--email-label-color`, que trae cada
   etiqueta en su `style`, y la tipografía se hereda del tema.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La pastilla necesita ser el contexto de la × que lleva dentro. `inline-flex`
   para que el rótulo y la × compartan renglón y se alineen entre sí. */
.email-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}

/* La × que quita la etiqueta: invisible hasta pasar por encima (o enfocarla
   con el teclado), sin fondo ni borde, un poco más pequeña que el rótulo.

   Ocupa su sitio SIEMPRE —`opacity` y no `display`—: si apareciera de golpe la
   pastilla se ensancharía bajo el ratón y las de al lado saltarían. */
.email-label-remove {
    opacity: 0;
    margin-left: 0.3rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: 0.9em;
    line-height: 1;
    cursor: pointer;
    transition: opacity 0.15s ease-in-out;
}

.email-label:hover .email-label-remove,
.email-label-remove:focus-visible {
    opacity: 1;
}

.email-label-remove:disabled {
    cursor: default;
    opacity: 0.5;
}

/* --- El árbol del lateral -------------------------------------------------- */

/* Cada nivel se sangra un poco: es lo que dice de quién cuelga cada una. */
.email-label-children {
    margin-left: 1rem;
}

.email-label-node.is-collapsed > .email-label-children {
    display: none;
}

.email-label-row {
    gap: 0.15rem;
    /* Sitio para el ⋮ sin que desplace nada al aparecer. */
    padding-right: 0.25rem;
}

/* El chevron. Un botón sin pinta de botón, del ancho justo para que los
   nombres de un mismo nivel arranquen en la misma columna: por eso el hueco
   vacío de las que no tienen hijas mide lo mismo. Gira con el nodo plegado.

   ⚠️ Se gira el BOTÓN y no el icono: FontAwesome va por SVG+JS y el `span`
   del icono ya no existe cuando se aplica la clase. */
.email-label-toggle {
    flex: 0 0 auto;
    width: 1rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--falcon-600);
    line-height: 1;
    transition: transform 0.15s ease-in-out;
}

.email-label-toggle:not(.email-label-toggle-empty) {
    cursor: pointer;
}

.email-label-node.is-collapsed > .email-label-row .email-label-toggle {
    transform: rotate(-90deg);
}

/* El nombre es el enlace, hereda el color de la fila y se recorta si no cabe.
   `min-width: 0` en el enlace y en el texto: un elemento flexible se niega a
   encoger por debajo de su contenido, y sin esto `text-truncate` no recorta
   nada y el contador se sale por la derecha. */
.email-label-link {
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.email-label-link:hover {
    color: inherit;
}

.email-label-name {
    min-width: 0;
}

/* El ⋮: invisible hasta pasar por encima de la fila, y visible mientras su
   menú está abierto (`is-open` lo pone `_labels-js`) aunque el ratón se haya
   ido al menú. Con `opacity` y no `display` para que no cambie el ancho de la
   fila al aparecer. */
.email-label-more {
    flex: 0 0 auto;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

.email-label-row:hover .email-label-more,
.email-label-row:focus-within .email-label-more,
.email-label-row.is-open .email-label-more {
    opacity: 1;
}

.email-label-more-btn {
    line-height: 1;
}

/* Las ocultas no se listan, salvo que se pida verlas (`is-showing-hidden` en
   el árbol) o que sea la carpeta abierta o una de sus antecesoras
   (`is-revealed`, lo pone el JavaScript al cargar). Un poco más apagadas
   cuando se enseñan, para que se distinga que están ocultas. */
.email-label-tree:not(.is-showing-hidden) .email-label-node.email-label-hidden:not(.is-revealed) {
    display: none;
}

.email-label-node.email-label-hidden > .email-label-row {
    opacity: 0.65;
}

/* El destino de un arrastre: la fila se tiñe del azul de marca y se le pone
   un borde discontinuo, que es el lenguaje de «suelta aquí» del resto del
   producto (la zona de subida de documentos). */
.email-label-drop-target {
    background-color: rgba(var(--falcon-primary-rgb), 0.12);
    outline: 1px dashed var(--falcon-primary);
    outline-offset: -1px;
}

/* El campo de renombrar en el sitio ocupa lo que ocupaba el nombre. */
.email-label-rename {
    flex: 1 1 auto;
    min-width: 0;
    height: 1.6rem;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
}

/* --- El menú «Etiquetar» --------------------------------------------------- */

/* Ancho fijo para que no baile al filtrar, y nunca más que la ventana. */
.email-label-menu {
    width: 20rem;
    max-width: calc(100vw - 2rem);
}

/* La lista con tope y su propia barra: con cuarenta etiquetas, el «Aplicar»
   tiene que seguir a la vista. */
.email-label-menu-list {
    max-height: 22rem;
    overflow-y: auto;
}

/* Cada fila es un `<label>` con la casilla dentro: pulsar en el nombre marca.
   `white-space: normal` porque `.dropdown-item` viene con `nowrap` y un
   nombre largo se saldría del menú en vez de recortarse. */
.email-label-menu-item {
    cursor: pointer;
    white-space: normal;
    font-weight: 400;
    margin-bottom: 0;
}

.email-label-menu-item .form-check-input {
    cursor: pointer;
}

/* --- La paleta ------------------------------------------------------------- */

/* Rejilla de 5 × 4 círculos, uno por color de `EmailLabel::PALETTE`. Va
   dentro de un SweetAlert, así que se centra sola. */
.email-palette {
    display: grid;
    grid-template-columns: repeat(5, 2rem);
    gap: 0.6rem;
    justify-content: center;
    padding: 0.5rem 0;
}

.email-palette-swatch {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--email-label-color);
    cursor: pointer;
    transition: transform 0.1s ease-in-out;
}

.email-palette-swatch:hover,
.email-palette-swatch:focus-visible {
    transform: scale(1.12);
}

/* El elegido lleva un anillo del mismo color, separado por un hueco del color
   del fondo: se ve igual sobre claro y sobre oscuro. */
.email-palette-swatch.is-selected {
    box-shadow: 0 0 0 2px var(--falcon-card-bg, #fff), 0 0 0 4px var(--email-label-color);
}

/* --- El arrastre ----------------------------------------------------------- */

/* La imagen que acompaña al ratón mientras se arrastra: un rótulo «N correos».
   Tiene que estar en el DOM —fuera de la ventana vale— cuando se llama a
   `setDragImage`; el JavaScript lo quita en el siguiente tic. */
.email-drag-ghost {
    position: fixed;
    top: -100px;
    left: -100px;
    padding: 0.3rem 0.7rem;
    border-radius: 0.25rem;
    background-color: var(--falcon-primary);
    color: #fff;
    font-family: var(--falcon-font-sans-serif);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}

/* Mientras se arrastra, las filas no reaccionan al ratón: sin esto, al pasar
   la sombra por encima de otras filas van saliendo sus botones de acción. */
.email-dragging .email-row .hover-actions {
    display: none !important;
}

/* --- La página de gestión (`labels.blade.php`) ----------------------------- */

/* La celda del nombre en la tabla de etiquetas se sangra por nivel, con la
   profundidad que trae cada fila en `--email-label-depth`: es lo que dice de
   quién cuelga cada una sin pintar el árbol dos veces. */
.email-label-cell {
    min-width: 0;
    padding-left: calc(var(--email-label-depth, 0) * 1.25rem);
}

.email-label-manage-name {
    min-width: 0;
}

/* La paleta dentro del formulario de alta: la misma rejilla que la del
   SweetAlert pero pegada a la izquierda, en dos filas de diez y con los
   círculos más pequeños, que aquí comparte renglón con dos campos. */
.email-palette-inline {
    grid-template-columns: repeat(10, 1.5rem);
    gap: 0.4rem;
    justify-content: start;
    padding: 0.25rem 0 0;
}

.email-palette-inline .email-palette-swatch {
    width: 1.5rem;
    height: 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   La bandeja, más compacta (02/09/2026)

   1. El lateral un 20 % más estrecho que el original, y luego un 6 % más
      ancho (02/09/2026): 25 % → 20 % → 21,2 % en `lg`, y 16,67 % → 13,33 % →
      14,13 % en `xxl`. Las columnas son `col-lg-3`/`col-lg-9` y en `xxl`
      `col-xxl-2`/`col-xxl-10`; Bootstrap 5.3 las escribe como
      `flex: 0 0 auto; width: 25%`, así que se pisa el `width` —con más
      especificidad que la utilidad— y la columna de al lado (`email-main`,
      en la bandeja, el correo abierto y el compositor) se lleva EXACTAMENTE
      el resto. Sin ese complemento el `col-xxl-10` (83,3 %) dejaba un hueco
      de 62 px a la derecha del correo abierto. No hay un `col-lg-2.4`.

      ⚠️ Medir en la pantalla del usuario (1890 px, tramo `xxl` de Falcon =
      1540 px), no en un visor emulado a 1440: ahí `col-xxl-2` no se activaba y
      salía el 25 % como base, y «20 % para todo» le AUMENTÓ el lateral de
      ~310 a ~372 px.

   2. La letra del lateral un poco menor. Los enlaces de carpeta y de etiqueta
      no llevaban tamaño propio (heredaban el del cuerpo): se les da uno.
      Ningún `font-family`: la fuente es la del tema (`--falcon-font-sans-serif`).

   3. El número de adjuntos, al final de la fila y antes de la fecha.
   ═══════════════════════════════════════════════════════════════════════════ */
.email-sidebar-compact { /* marca del bloque, para que el parche sea idempotente */ }

@media (min-width: 992px) {
    .email-column.email-sidebar {
        flex: 0 0 auto;
        width: 21.2%;
        max-width: 21.2%;
    }

    .email-main {
        flex: 0 0 auto;
        width: 78.8%;
        max-width: 78.8%;
    }
}

/* 🔴 1540 px y NO 1400: Falcon mueve el punto de corte `xxl` a 1540 px
   (`--falcon-breakpoint-xxl`), así que `col-xxl-2` solo actúa a partir de ahí.
   Con el 1400 de Bootstrap, entre 1400 y 1539 px este tramo recortaba un
   lateral que aún estaba al 25 %: casi la mitad en vez de un quinto. */
@media (min-width: 1540px) {
    .email-column.email-sidebar {
        width: 14.1333%;
        max-width: 14.1333%;
    }

    .email-main {
        width: 85.8667%;
        max-width: 85.8667%;
    }
}

.email-sidebar .nav-link,
.email-sidebar .email-label-row {
    font-size: 0.875rem;
}

.email-sidebar .nav-link .fas,
.email-sidebar .nav-link .far {
    font-size: 0.875em;
}

.email-attachment-count {
    white-space: nowrap;
    /* Del tamaño de la fila (antes 0,85em): el número y el clip se leían
       pequeños al lado de la fecha. El clip lleva `shrink-1` en vez de
       `shrink-2`, así que crece algo más que el número. */
    font-size: 1em;
}

.email-attachment-count .fas {
    margin-right: 0.2rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   El lateral se queda a la vista al leer y al redactar (02/09/2026)

   En la bandeja nada se desplaza a nivel de página (la lista tiene su propio
   scroll) y esto no hace nada. En la lectura y el compositor la página SÍ se
   desplaza —un correo largo, el formulario—, y sin esto las carpetas se irían
   con ella: `sticky` bajo la barra superior, con el alto que ya le da
   `.email-column`, es lo que hace que se comporte como en Gmail.
   ═══════════════════════════════════════════════════════════════════════════ */
.email-sidebar-sticky { /* marca del bloque, para que el parche sea idempotente */ }

@media (min-width: 992px) {
    .email-column.email-sidebar {
        position: sticky;
        top: calc(var(--falcon-top-nav-height) + 1rem);
        align-self: flex-start;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOS CONTADORES DE LA BARRA SUPERIOR

   Los dos iconos con número de la barra —la campana de notificaciones y el
   buzón que inyecta `resources/js/email-navbar.js`— llevaban su insignia con
   `fs-11`. Esa clase fija la letra en 11 px, pero NO la caja: el relleno del
   `.badge` de Falcon está en `em`

       --falcon-badge-padding-y: 0.355555em
       --falcon-badge-padding-x: 0.711111em

   así que se calcula sobre esa misma letra y le suma ~8 px de alto y ~16 px de
   ancho. Medido en el navegador: 22x19 px encima de un icono `fs-7` de 23 px,
   o sea el 90 % de la campana y el 79 % del sobre — la insignia tapaba el
   icono y en la barra solo se veía el número.

   Fijando también la caja queda en 14x14 px (el 42 % y el 37 %). Con dos
   cifras crece a 15x14 y con «99+» a 23x14, así que sigue entrando.

   Vive aquí y no en un `@push('styles')` del partial porque `@stack('styles')`
   se pinta en el `<head>` (línea 32 de `layouts/app.blade.php`) ANTES de que
   se incluya el sidebar (línea 41): un `@push` desde ahí llega tarde y se
   pierde. Este fichero sí se carga siempre y va con `?v=filemtime`.
   ═══════════════════════════════════════════════════════════════════════════ */
/* El contador de WhatsApp va en naranja para distinguirlo de un vistazo del azul
   del correo y de las notificaciones. `--falcon-warning` (#f5803e) es el naranja
   del tema; la letra en blanco se queda en 2,61:1, así que va oscura, que sobre ese
   fondo da 5,94:1 (por encima del 4,5:1 que pide WCAG para texto). El tamaño y la forma los sigue poniendo `.badge-contador`. */
.badge.bg-whatsapp-unread {
  background-color: var(--falcon-warning, #f5803e);
  color: #1f2430;
}

.badge-contador {
    font-size: .5625rem;
    line-height: 1;
    min-width: .875rem;
    height: .875rem;
    padding: 0 .2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Las dos acciones de etiquetas (crear, gestionar) como iconos junto al
   rótulo «Etiquetas» (02/09/2026). Un punto menores que el rótulo (11 px),
   en el gris 500 del tema —un paso más claro que el `text-600` de los
   enlaces, que se veía demasiado oscuro para dos iconos auxiliares— y en el
   color de enlace al pasar; a 1rem una de otra para no pulsarse la una por
   la otra. El color va aquí y NO con `text-600` en el marcado: las
   utilidades de color del tema llevan `!important` y taparían el hover. */
.email-label-actions .btn {
    font-size: 0.6875rem;
    line-height: 1;
    margin-left: 1rem;
    color: var(--falcon-gray-500);
    text-decoration: none;
    box-shadow: none;
}

.email-label-actions .btn:hover,
.email-label-actions .btn:focus-visible {
    color: var(--falcon-link-hover-color);
}

/* La columna de la fecha de cada fila (clip + fecha, o «Eliminado …» /
   «Vuelve …») reserva 10rem a partir de `md`, así el asunto —que ahora
   crece hasta ella— acaba en la misma vertical en todas las filas, tenga
   la fila clip o no (02/09/2026).

   🔴 10rem y no menos: los botones que salen al pasar el ratón
   (`.hover-actions`, absolutos, `end-0 me-3`) miden hasta 157 px y empiezan
   a 1671 px en una pantalla de 1890; con 9rem el asunto acababa en 1680 y
   los botones le tapaban 9 px. Con 10rem acaba en 1664, 7 px antes de que
   empiecen. En borradores la columna es más ancha de por sí (fecha y
   adjuntos en dos líneas) y el mínimo no actúa. */
@media (min-width: 768px) {
    .email-row-meta {
        min-width: 10rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   El cajón de pestañas de la ficha de operación, «variante B» (02/09/2026)

   El `tab-content` que envuelve las pestañas de la ficha (`#myTabContent`,
   `.ficha-cajon`) pasa de borde recto a 14 px de radio en las cuatro
   esquinas, con un borde un punto más claro que el del tema y una sombra
   apenas perceptible. La tira (`#myTab`, `.ficha-pestanas`) deja de llevar
   la línea continua debajo: las pestañas se posan sobre el borde superior
   del cajón con las esquinas superiores a 10 px, y la activa se funde con
   él (mismo fondo, sin línea debajo). Elegida por el usuario entre tres
   propuestas vistas sobre la ficha real.

   Va por CLASES propias y no por los ids: `myTab`/`myTabContent` se
   repiten en los tableros, la CIRBE y las incidencias del sistema, y allí
   no cambia nada. Solo las dos fichas (común y préstamo) llevan las clases.

   🔴 Los colores salen de variables para que el modo oscuro del tema
   (`[data-bs-theme=dark]`) no se quede con un borde claro: allí el borde
   vuelve al del tema y la sombra se hace más honda. El fondo de la pestaña
   activa es `--falcon-card-bg`, el mismo que tiene el cajón debajo.

   El `!important` del borde hace falta: el cajón lleva las utilidades
   `border` y `border-top-0` de Bootstrap, que van con `!important`, y hay
   que devolverle el borde superior (antes lo ponía la línea de la tira).
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    --ficha-cajon-borde: #e0e8f3;
    --ficha-cajon-sombra: 0 1px 3px rgba(0, 0, 0, .04);
}

[data-bs-theme=dark] {
    --ficha-cajon-borde: var(--falcon-border-color);
    --ficha-cajon-sombra: 0 1px 3px rgba(0, 0, 0, .35);
}

.ficha-cajon {
    border: 1px solid var(--ficha-cajon-borde) !important;
    border-radius: .875rem;
    box-shadow: var(--ficha-cajon-sombra);
}

.ficha-pestanas.nav-tabs {
    border-bottom: 0;
    padding-left: .75rem;
    margin-bottom: -1px;
    gap: 2px;
    position: relative;
    z-index: 1;
}

.ficha-pestanas.nav-tabs .nav-link {
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: .625rem .625rem 0 0;
    padding: .55rem 1rem;
}

.ficha-pestanas.nav-tabs .nav-link.active {
    background: var(--falcon-card-bg, #fff);
    border-color: var(--ficha-cajon-borde);
    border-bottom: 1px solid var(--falcon-card-bg, #fff);
    margin-bottom: -1px;
}

/* 🔴 En modo oscuro la pestaña activa se quedaba BLANCA sobre el cajón oscuro:
   el tema fija con más peso el fondo de la pestaña activa y la regla de arriba
   no llegaba (medido en la ficha real: fondo blanco y borde claro con
   `data-bs-theme=dark`). Regla propia del modo oscuro, con `!important`, con el
   mismo fondo que usa la tarjeta en oscuro (`--falcon-emphasis-bg`). */
[data-bs-theme=dark] .ficha-pestanas.nav-tabs .nav-link.active {
    background: var(--falcon-emphasis-bg) !important;
    border-color: var(--falcon-border-color) !important;
    border-bottom-color: var(--falcon-emphasis-bg) !important;
}