/* -------------------------------------------------------------------------- */
/*                                Falcon Button                               */
/* -------------------------------------------------------------------------- */
/* prettier-ignore */
:root {
  /* Colores de estado */
  --operation-status-draft: #FFCC55;
  --operation-status-study: #FF9F40;
  --operation-status-no-answer: #FFD700;
  --operation-status-on-pause: #808080;
  --operation-status-required-doc: #FF5530;
  --operation-status-record: #FE6385;
  --operation-status-waiting-for-proposal: #9966FF;
  --operation-status-waiting-for-decision: #F7B32B;
  --operation-status-appraisal: #36A1ED;
  --operation-status-wait-fein: #4CC0C0;
  --operation-status-notary: #C9CBCF;
  --operation-status-presented: #9966FF;
  --operation-status-in-signature: #36A1ED;
  --operation-status-closed: #4D5360;
  --operation-status-canceled: #FF0000;
  --operation-status-paid: #259C07;
  --operation-status-partial-paid: #09C83C;

  /* Colores del TIPO de operación. Reutilizan las tonalidades de arriba para
     que las dos cápsulas del listado hablen el mismo idioma: el color lo da el
     comportamiento, así que «vivienda habitual» y «segunda residencia» —que se
     comportan igual— comparten color. */
  --operation-type-mortgage: var(--operation-status-appraisal);
  /* 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: var(--operation-status-study);
  --operation-type-mortgage-improvement: var(--operation-status-waiting-for-proposal);
  --operation-type-private-capital: var(--operation-status-on-pause);

  /* Colores de fuente por defecto */
  --pill-font-color-draft: #fff;
  --pill-font-color-study: #fff;
  --pill-font-color-no-answer: #fff;
  --pill-font-color-on-pause: #fff;
  --pill-font-color-required-doc: #fff;
  --pill-font-color-record: #fff;
  --pill-font-color-waiting-for-proposal: #fff;
  --pill-font-color-waiting-for-decision: #fff;
  --pill-font-color-appraisal: #fff;
  --pill-font-color-wait-fein: #fff;
  --pill-font-color-notary: #fff;
  --pill-font-color-presented: #fff;
  --pill-font-color-in-signature: #fff;
  --pill-font-color-closed: #fff;
  --pill-font-color-canceled: #fff;
  --pill-font-color-paid: #fff;
  --pill-font-color-partial-paid: #fff;
}

/* ================= 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: #000;
  --pill-font-color-wait-fein: #000;
  --pill-font-color-notary: #000;
  --pill-font-color-presented: #fff;
  --pill-font-color-in-signature: #fff;
  --pill-font-color-closed: #fff;
  --pill-font-color-canceled: #fff;
  --pill-font-color-paid: #fff;
  --pill-font-color-partial-paid: #fff;
}

/* ================= DARK THEME ================= */
[data-bs-theme=dark] {
  --pill-font-color-draft: #fff;
  --pill-font-color-study: #fff;
  --pill-font-color-no-answer: #fff;
  --pill-font-color-on-pause: #fff;
  --pill-font-color-required-doc: #fff;
  --pill-font-color-record: #fff;
  --pill-font-color-waiting-for-proposal: #fff;
  --pill-font-color-waiting-for-decision: #fff;
  --pill-font-color-appraisal: #fff;
  --pill-font-color-wait-fein: #fff;
  --pill-font-color-notary: #fff;
  --pill-font-color-presented: #fff;
  --pill-font-color-in-signature: #fff;
  --pill-font-color-closed: #fff;
  --pill-font-color-canceled: #fff;
  --pill-font-color-paid: #fff;
  --pill-font-color-partial-paid: #fff;
}

/* ================= 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.jpg');
  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;
}
.bg-pill-appointment-done {
  background-color: var(--operation-status-appraisal);
  color: #fff;
}
.bg-pill-appointment-no-show {
  background-color: var(--operation-status-study);
  color: #fff;
}
.bg-pill-appointment-canceled {
  background-color: var(--falcon-danger);
  color: #fff;
}

/* Iconos del navbar (lupa, campana, tema, apps, avatar) más juntos: -25% y
   luego otro -15% (8px -> 6px -> ~5px). Las utilidades de espaciado de
   Bootstrap llevan !important, de ahí estos. */
.navbar-nav-icons > .nav-item.ps-2 {
    padding-left: 0.32rem !important; /* 8px -> ~5px */
}
.navbar-nav-icons .nav-link.pe-1 {
    padding-right: 0.16rem !important; /* 4px -> ~2.5px */
}
.navbar-nav-icons > .nav-item > .nav-link.ps-2,
.navbar-nav-icons > .nav-item > div > .nav-link.ps-2 {
    padding-left: 0.32rem !important; /* 8px -> ~5px */
}

/* 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.
   ═══════════════════════════════════════════════════════════════════════════ */
.correo-buscar {
    position: relative;
    flex: 1 1 auto;
    max-width: 34rem;
}

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

.correo-buscar-campo {
    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;
}

.correo-buscar-campo::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. */
.correo-buscar-campo: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"] .correo-buscar-campo {
    background-color: var(--falcon-gray-300);
}

[data-bs-theme="dark"] .correo-buscar-campo: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) {
    .correo-columna {
        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. */
    .correo-columna > .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. */
    .correo-columna > .card > .card-header,
    .correo-columna > .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. */
    .correo-lista {
        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
       `.correo-columna`, 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. */
    .correo-lateral {
        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. */
    .correo-lateral > .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.
   ═══════════════════════════════════════════════════════════════════════════ */
.correo-redactar {
    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;
}

.correo-redactar:hover,
.correo-redactar: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. */
.correo-redactar: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) {
    .correo-redactar {
        transition: none;
    }

    .correo-redactar:hover,
    .correo-redactar: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.
   ═══════════════════════════════════════════════════════════════════════════ */
.correo-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;
}

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

.correo-selacciones {
    display: flex;
    gap: 6px;
    margin-left: auto;
    flex-wrap: wrap;
}

.correo-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;
}

.correo-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—. */
.correo-chip:disabled {
    opacity: 0.55;
    cursor: default;
}

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

.correo-chip-peligro: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. */
.correo-fila-marcada,
.correo-fila-marcada .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
   `--correo-etiqueta-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.
   ═══════════════════════════════════════════════════════════════════════════ */
.correo-etiqueta {
    color: var(--correo-etiqueta-color, var(--falcon-primary));
    background-color: var(--falcon-gray-200);
    background-color: color-mix(in srgb, var(--correo-etiqueta-color, #2c7be5) 15%, transparent);
}

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

/* La lista de etiquetas del modal, con tope: un despacho con cuarenta dejaría
   el botón de guardar fuera de la pantalla. */
.correo-etiquetas-lista {
    max-height: 13rem;
    overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   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) {
    .correo-grupo {
        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.
   ═══════════════════════════════════════════════════════════════════════════ */
.correo-contador {
    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);
}

.correo-contador-aviso {
    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.
   ═══════════════════════════════════════════════════════════════════════════ */
.correo-icono {
    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. */
.correo-icono .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. */
.correo-nombre,
.correo-nombre > :not(.badge) {
    min-width: 0;
}

.correo-nombre > .badge {
    flex: 0 0 auto;
}