/* =========================================================================
   soc-responsive.css — Diseño progresivo (móvil → laptop → escritorio)

   POR QUÉ EXISTE ESTE ARCHIVO
   ---------------------------
   El sitio usa la rejilla de Bootstrap (col-md-6, col-xl-4, …). Esas clases
   reaccionan al ancho de la VENTANA, no al del contenedor donde vive el campo.
   En la ficha de Cliente los campos van dentro de tarjetas que ya son una
   fracción del ancho: en un monitor de laptop, con el sidebar abierto, una
   tarjeta "col-xl-4" mide ~300px, pero sus campos siguen partidos en dos por
   "col-md-6" (activo desde 768px de ventana) y terminan encimándose.

   La corrección son CONTAINER QUERIES: cada tarjeta se declara contenedor y sus
   campos se reparten según el ancho REAL de esa tarjeta. Así el layout es
   correcto en cualquier combinación de monitor + sidebar abierto/cerrado, sin
   tener que adivinar breakpoints de ventana.

   Se carga DESPUÉS de bootstrap.min.css en index.html — por eso puede
   sobreescribir las clases col-* sin necesitar !important en cada regla.

   ORDEN DEL ARCHIVO
   1. Reglas globales (anti-desbordamiento, tablas, contenedores de página)
   2. Ficha de Cliente (encabezado, tabs, tarjetas de campos)
   3. Paneles y rejillas propias (Seguimiento, KPIs, tableros, bandejas)
   4. Componentes de terceros (Syncfusion: Kanban, Schedule, Stepper, Grid)
   5. Modales
   ========================================================================= */


/* =========================================================================
   1. GLOBAL
   ========================================================================= */

/* Nada debe provocar scroll horizontal de página completa. Si un elemento se
   desborda (una tabla ancha, un grid de terceros), que scrollee ÉL, no el body. */
:root {
    /* Bootstrap declara estas variables después de soc.css; se reafirman aquí
       para que inputs, botones y el cuerpo usen CircularXX. */
    --bs-body-font-family: "CircularXX", sans-serif;
    --bs-font-sans-serif: "CircularXX", sans-serif;
    --body-font: "CircularXX", sans-serif;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
    font-family: "CircularXX", sans-serif;
}

/* Las palabras largas sin espacios (correos, URLs, claves) son la causa más común
   de que un contenedor angosto se desborde en móvil. */
.soc-ficha-page,
.navigation-items-page,
.register-user-page,
.soc-scheduled-messages-page,
.soc-alerts-page,
.uso-plataforma-page,
.soc-tablero-page {
    overflow-wrap: break-word;
}

/* Los paddings laterales fijos (20px, y 24px en Alertas) son demasiado en
   pantallas chicas: se comen el ancho útil justo donde menos sobra. */
@media (max-width: 575.98px) {
    .navigation-items-page,
    .register-user-page {
        padding-left: 12px;
        padding-right: 12px;
    }

    .soc-alerts-page {
        padding: 14px 12px;
    }

    .uso-plataforma-page {
        padding: 0 6px;
    }
}

/* Encabezado de página (componente PageHeader): en móvil el ícono, el texto y
   el botón de regreso no caben en una fila. */
@media (max-width: 575.98px) {
    .soc-page-header {
        flex-wrap: wrap;
        padding: 0.85rem 1rem;
        gap: 0.75rem;
    }

    .soc-page-header-back {
        margin-left: 0;
    }
}

/* ---- Tablas ----------------------------------------------------------------
   La mayoría de las tablas del sitio no están envueltas en .table-responsive.
   En vez de editar 25 archivos .razor, se le da scroll horizontal al contenedor
   que ya las envuelve (.card / .soc-datos-section). La tabla conserva su ancho
   mínimo legible y se desplaza dentro de su tarjeta en lugar de desbordar
   la página. */
.navigation-items-page .card,
.register-user-page .card,
.soc-datos-section {
    max-width: 100%;
}

/* .table-responsive ya trae scroll de Bootstrap; se refuerza el desplazamiento
   táctil y se cubren las tablas que NO están envueltas en él, dándole el scroll
   al contenedor que las rodea. */
.table-responsive,
.soc-table-scroll,
.modal-body > table,
.soc-datos-section > table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Sin un ancho mínimo, las celdas se comprimen hasta volverse ilegibles antes de
   activar el scroll. Con él, la tabla prefiere desplazarse a deformarse.

   Solo por debajo de 768px: en pantallas grandes la tabla debe seguir ocupando
   el ancho disponible como hasta ahora, sin un mínimo que la fuerce. Se excluyen
   las tablas de 2–3 columnas del histórico (.table-sm de los modales), que caben
   completas y se ven mejor sin scroll. */
@media (max-width: 767.98px) {
    .navigation-items-page table:not(.table-sm),
    .register-user-page table:not(.table-sm),
    .soc-alerts-page table:not(.table-sm),
    .soc-scheduled-messages-page table:not(.table-sm),
    .soc-datos-section table:not(.table-sm) {
        min-width: 560px;
    }
}

/* Las tablas de pocas columnas no necesitan ese mínimo y se ven mejor completas. */
.soc-table-compact table,
table.soc-table-compact {
    min-width: 0;
}

/* En móvil se reduce el tamaño de fuente y el padding: caben más columnas antes
   de necesitar scroll. */
@media (max-width: 575.98px) {
    .navigation-items-page table,
    .register-user-page table,
    .soc-datos-section table {
        font-size: 0.82rem;
    }

    .navigation-items-page .table-soc tbody td,
    .navigation-items-page .table-soc thead th {
        padding: 0.5rem 0.45rem;
    }
}

/* Las imágenes nunca deben forzar el ancho de su contenedor. */
img {
    max-width: 100%;
    height: auto;
}


/* =========================================================================
   2. FICHA DE CLIENTE
   ========================================================================= */

/* =========================================================================
   2-bis. ENCABEZADO DE LA APLICACIÓN (barra superior)
   ========================================================================= */

/* ---- Logo: icono cuadrado en móvil ----
   En escritorio el encabezado muestra el logotipo completo (una imagen alargada,
   138px de ancho en el tramo <=992px de soc.css). En un teléfono ese ancho se
   come el espacio del título y de los tres botones de la derecha (actualizar,
   notificaciones, cerrar sesión), que quedan apretados o cortados.

   Por debajo de 768px se cambia por el isotipo cuadrado (images/icon-192.png,
   el mismo del PWA): ocupa 38x38 en vez de 138px de ancho y libera ~100px para
   los botones.

   Detalle de implementación: el logo NO es un <img>, es un <div> cuya silueta se
   recorta con mask-image, porque así puede teñirse con el color configurado en
   /admin/apariencia (ver el bloque del logo al final de soc.css). La url de esa
   máscara la inyecta Header.razor.cs en línea, en la propiedad personalizada
   --soc-header-logo-mask, para que corresponda al logo que toca mostrar (el
   local o el del tenant). Aquí se redefine esa misma propiedad en el elemento:
   al declararla en una regla de hoja de estilos con !important, gana sobre el
   valor en línea, y mask-image la vuelve a leer sin tocar C# ni JS.

   El icono sirve como máscara porque su fondo es transparente y su silueta es
   verde sólido (#006D4E) — verificado leyendo los píxeles del PNG: la esquina es
   (0,0,0,0) y el centro (0,109,78,255). El recuadro blanco que se ve al abrirlo
   en el Finder es el fondo del visor, no del archivo. */
/* Tramo intermedio (tablet): soc.css quiere 138px aquí, pero la regla
   ".header-logo-img.is-tinted { width: 170px }" del bloque del logo teñido vive
   al FINAL del archivo, después de esa media query, así que la anulaba por orden
   de cascada y el logo seguía midiendo 170px. Se restablece el valor previsto. */
@media (min-width: 768px) and (max-width: 992px) {
    .header-logo-img.is-tinted {
        width: 138px;
    }
}

@media (max-width: 767.98px) {
    .header-logo-img.is-tinted {
        --soc-header-logo-mask: url("../images/icon-192.png") !important;
        width: 38px;
        height: 38px;
        -webkit-mask-position: center;
        mask-position: center;
    }

    /* El título compite con el logo y los botones por el ancho; se recorta con
       puntos suspensivos en vez de desplazar los botones fuera de la pantalla. */
    .header-title {
        font-size: 18px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #header {
        padding: 0 10px;
        gap: 8px;
    }

    .header-center {
        min-width: 0;
    }

    .header-actions {
        flex: 0 0 auto;
        gap: 8px;
    }
}

/* En pantallas muy angostas el título se reduce un poco más, pero SIEMPRE se
   muestra: identifica al sistema y no debe desaparecer en ninguna resolución. */
@media (max-width: 400px) {
    .header-title {
        font-size: 15px;
    }
}


/* ---- Encabezado de la ficha ----
   En pantallas chicas el título y los 5 botones no caben en una fila. Se apilan,
   y los botones pasan a ocupar el ancho disponible repartiéndose parejo. */
@media (max-width: 767.98px) {
    .soc-ficha-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .soc-ficha-header-actions {
        width: 100%;
        gap: 0.4rem 0.9rem;
    }

    .soc-ficha-header-title {
        font-size: 1rem;
        line-height: 1.3;
    }
}

/* ---- Tabs de la ficha ----
   Con ~9 tabs, envolverlas en varias filas empuja el contenido hacia abajo y
   descoloca la página. En pantallas chicas se convierten en una tira con scroll
   horizontal: una sola fila, siempre. */
@media (max-width: 991.98px) {
    .soc-ficha-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .soc-ficha-tab {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

/* ---- Tarjetas de campos: el arreglo principal ----------------------------
   Cada tarjeta se declara contenedor de consulta. A partir de aquí, los campos
   de su interior se reparten según el ancho REAL de la tarjeta.

   "inline-size" limita la consulta al eje horizontal, que es el único que
   interesa; consultar también el vertical obligaría a la tarjeta a tener altura
   propia y rompería el "height: 100%" que ya usan varias secciones. */
.soc-resumen-card,
.soc-datos-section {
    container-type: inline-size;
    container-name: soccard;
}

/* Dentro de una tarjeta, TODO campo ocupa el ancho completo por defecto.
   Este es el punto clave: neutraliza col-md-6 / col-lg-6 / col-xl-6, que
   miraban la ventana, y deja que las reglas @container de abajo decidan.

   El selector va acotado a > .row > [class*="col-"] para tocar solo los campos
   directos de la tarjeta y no rejillas anidadas de otros componentes. */
.soc-resumen-card > .row > [class*="col-"],
.soc-datos-section > .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Dos columnas solo cuando la tarjeta mide de verdad 420px o más.
   420px = 2 campos de ~190px + la separación: por debajo de eso una etiqueta
   como "Fecha estimada de cierre" ya no cabe en una línea y empieza a encimarse
   con el control de abajo, que es exactamente lo que se ve en la captura. */
@container soccard (min-width: 420px) {
    .soc-resumen-card > .row > [class*="col-md-6"],
    .soc-resumen-card > .row > [class*="col-lg-6"],
    .soc-resumen-card > .row > [class*="col-xl-6"],
    .soc-datos-section > .row > [class*="col-md-6"],
    .soc-datos-section > .row > [class*="col-lg-6"],
    .soc-datos-section > .row > [class*="col-xl-6"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* col-12 y col-md-12 son explícitamente de ancho completo: se respetan siempre,
   incluso en tarjetas anchas (correo electrónico, razón social, etc.). */
.soc-resumen-card > .row > .col-12,
.soc-resumen-card > .row > [class*="col-md-12"],
.soc-datos-section > .row > .col-12,
.soc-datos-section > .row > [class*="col-md-12"] {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Las etiquetas largas deben poder cortarse en lugar de empujar el control fuera
   de la tarjeta.

   No se les fija min-height: con el ancho de columna que dejan las reglas de
   arriba (~295px a 1280px, ~359px a 768px, medido en Chromium) las etiquetas de
   la ficha caben en un solo renglón, así que reservar dos solo agregaría espacio
   muerto. Para los casos en que una etiqueta sí se parta, align-items: start en
   la fila evita que un campo de etiqueta corta se desalinee respecto al de al
   lado, que era el origen visual del encimamiento. */
.soc-resumen-card .form-label,
.soc-datos-section .form-label {
    display: block;
    overflow-wrap: break-word;
    margin-bottom: 0.3rem;
    line-height: 1.25;
}

/* Cada campo ocupa el alto que necesita y se alinea por arriba; sin esto, en una
   fila de dos, el más alto estira al otro y los controles quedan a distinta
   altura dentro de su columna. */
.soc-resumen-card > .row,
.soc-datos-section > .row {
    align-items: start;
}

/* Los controles nunca deben exceder su columna. Los <select> y los campos
   numéricos de Syncfusion tienen anchos intrínsecos que ignoran al padre si no
   se les fuerza. */
.soc-resumen-card .form-control,
.soc-resumen-card .form-select,
.soc-resumen-card .e-input-group,
.soc-resumen-card .e-control-wrapper,
.soc-datos-section .form-control,
.soc-datos-section .form-select,
.soc-datos-section .e-input-group,
.soc-datos-section .e-control-wrapper {
    max-width: 100%;
    min-width: 0;
}

/* Un elemento flex no se encoge por debajo de su contenido salvo que se le
   permita explícitamente: sin min-width:0 la columna se ensancha y desborda. */
.soc-resumen-card > .row > [class*="col-"],
.soc-datos-section > .row > [class*="col-"] {
    min-width: 0;
}

/* En tarjetas angostas se recorta el padding: cada píxel cuenta. */
@container soccard (max-width: 360px) {
    .soc-resumen-card,
    .soc-datos-section {
        padding: 0.9rem;
    }
}

/* ---- Distribución de las tarjetas entre sí ----
   Las tres tarjetas (Básicos / Complementarios / Oficina) estaban en
   "col-xl-4 col-md-6": a 768px de ventana entraban dos por fila, dejando ~300px
   cada una con el sidebar abierto. Se sube el umbral para que solo se pongan
   lado a lado cuando hay ancho real para ello. */
@media (max-width: 1199.98px) {
    .soc-ficha-page .row > .col-xl-4.col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 1200px) and (max-width: 1599.98px) {
    .soc-ficha-page .row > .col-xl-4.col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Las dos columnas del tab Resumen (col-lg-6) se apilan antes: contienen
   listas con fecha + texto que necesitan ancho. */
@media (max-width: 1199.98px) {
    .soc-ficha-page .row > .col-lg-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


/* =========================================================================
   3. PANELES Y REJILLAS PROPIAS
   ========================================================================= */

/* ---- Paneles de tercios y dos tercios de la ficha ----
   Cubre el tab Seguimiento (Agenda / Actividades / Notas, tres col-md-4) y el
   tab Llamadas (panel de marcado col-md-4 + historial col-md-8).

   Entre 992px y 1199px los tres paneles de Seguimiento pasan a dos por fila:
   tres listas de texto a 768px dejan ~200px cada una, que es justo donde las
   fechas y los títulos de actividad empiezan a partirse. Por debajo de 992px
   se apilan por completo. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .soc-ficha-page .row > .col-md-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 991.98px) {
    .soc-ficha-page .row > .col-md-4,
    .soc-ficha-page .row > .col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ---- Filtros en línea (col-md-3 / col-md-4) ----
   A 768px, cuatro filtros de col-md-3 dejan ~150px cada uno: los selects y los
   date pickers quedan cortados. Se pasa a dos por fila, y a una en móvil. */
@media (max-width: 991.98px) {
    .soc-ficha-page .row > .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* En móvil un filtro por fila: un <select> o un date picker a media pantalla
   queda inutilizable. (col-md-4 ya se apila por la regla de paneles de arriba.) */
@media (max-width: 575.98px) {
    .soc-ficha-page .row > .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ---- Mismo criterio para el resto de páginas ----
   Las demás pantallas (Mensajes Programados, Papelera, catálogos) también usan
   col-md-3 / col-md-4 / col-md-8 para filtros y formularios. Se les aplica el
   mismo escalonado: mitad en tablet, completo en móvil. */
@media (max-width: 991.98px) {
    .soc-scheduled-messages-page .row > .col-md-3,
    .navigation-items-page .row > .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .soc-scheduled-messages-page .row > .col-md-4,
    .soc-scheduled-messages-page .row > .col-md-8,
    .navigation-items-page .row > .col-md-4,
    .navigation-items-page .row > .col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 575.98px) {
    .soc-scheduled-messages-page .row > .col-md-3,
    .navigation-items-page .row > .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ---- Rejillas de KPIs y etapas (Home) ----
   Ya tenían media queries hasta 700px; se completa el tramo de móvil y se
   asegura que las tarjetas no desborden por contenido (montos largos). */
@media (max-width: 575.98px) {
    .soc-kpi-row,
    .soc-stage-row,
    .soc-chart-row,
    .soc-alerts-grid {
        grid-template-columns: 1fr;
    }
}

.soc-kpi-card,
.soc-stage-card {
    min-width: 0;
    overflow-wrap: break-word;
}

/* ---- Bandejas maestro-detalle (WhatsApp / Llamadas) ----
   El layout de dos columnas (lista + conversación) no funciona en pantallas
   chicas: se apila, con la lista arriba y altura acotada para que el detalle
   siga siendo alcanzable sin scrollear media página. */
@media (max-width: 991.98px) {
    .soc-whatsapp-conversations-layout {
        display: flex;
        flex-direction: column;
    }

    .soc-whatsapp-conversations-list {
        width: 100%;
        max-height: 320px;
        overflow-y: auto;
    }

    .soc-whatsapp-conversations-detail {
        width: 100%;
    }
}

/* ---- Rejillas de ancho rígido ----
   Estas definían columnas en píxeles fijos (ej. "160px 100px 1fr"), que suman
   más que el ancho disponible en móvil y desbordan. Se les da scroll propio
   conservando su estructura. */
@media (max-width: 767.98px) {
    /* Las filas conservan su estructura de columnas y se desplazan dentro del
       contenedor, en lugar de comprimirse hasta volverse ilegibles. */
    .bdp-users-header,
    .bdp-user-row {
        min-width: 460px;
    }

    .ddt-header,
    .ddt-row {
        min-width: 420px;
    }

    .wh-header,
    .wh-row {
        min-width: 620px;
    }

    /* Contenedores reales de esas rejillas (verificados en UsoPlatforma.razor). */
    .day-detail-table,
    .wh-table,
    .modal-broker-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* El heatmap de calendario tenía max-width: 700px fijo; en móvil debe encogerse. */
.calendar-heatmap {
    max-width: 100%;
}


/* =========================================================================
   4. COMPONENTES SYNCFUSION
   ========================================================================= */

/* ---- Kanban (tableros de Clientes / Prospectos) ----
   NO se tocan aquí el ancho de columna ni la estructura del Kanban: soc.css ya
   lo resuelve bien (columnas de 280px fijas + scroll horizontal propio en
   .soc-tablero-kanban-wrapper), que es justamente el comportamiento correcto en
   pantallas chicas — el tablero se desplaza en vez de comprimir las tarjetas.
   Además, el arrastre es sensible a cambios en este componente (ver CLAUDE.md,
   caso cerrado 2026-09-10), así que se deja intacto.

   Lo único que falta es el alto: el tablero fija height a 100vh menos el
   encabezado, un cálculo pensado para escritorio. En móvil, con el header y los
   filtros apilados ocupando más alto, esa resta deja el Kanban demasiado corto;
   se libera el alto para que crezca con su contenido.

   GOTCHA que dejó el tablero SIN TARJETAS en móvil (2026-09-20): liberar ese
   alto con `height: auto` rompe toda la cadena de alturas del Kanban. soc.css
   define `.e-kanban { height: 100% }` y `.e-content-cells { height: 100% }`, y
   un porcentaje solo se resuelve contra un ancestro con altura CONCRETA: con la
   página en `auto`, ese 100% colapsa a 0 y el <td> de contenido queda sin alto,
   así que las tarjetas existen en el DOM pero no se ven. El encabezado de cada
   etapa sí se pintaba (contador y totales correctos, con los datos ya cargados),
   lo que hacía parecer un problema de datos o de permisos por rol y no de CSS.
   `min-height` en el wrapper no alcanza: no es altura concreta para el 100% del
   hijo. Por eso el alto se devuelve explícitamente en la cadena de abajo. */
@media (max-width: 767.98px) {
    .soc-tablero-page {
        height: auto;
        min-height: calc(100vh - 72px - 18px);
    }

    .soc-tablero-page .soc-tablero-kanban-wrapper {
        min-height: 60vh;
    }

    /* El Kanban crece con su contenido en lugar de heredar un 100% que ya no
       tiene contra qué resolverse. */
    .soc-tablero-kanban-wrapper .e-kanban {
        height: auto;
        min-height: 60vh;
    }

    /* La columna recupera una altura concreta. Es lo que devuelve las tarjetas a
       la vista, y además conserva el scroll vertical por columna: el tema define
       `.e-card-wrapper` como `height: inherit; overflow: auto`, que vuelve a
       resolverse en cuanto el <td> mide algo (ver la nota de `.e-content-cells`
       en soc.css). */
    .soc-tablero-kanban-wrapper .e-kanban .e-content-cells {
        height: 60vh;
    }

    /* SEGUNDO GOTCHA del mismo caso (2026-09-20): con el alto ya devuelto, las
       tarjetas aparecían pero DESFASADAS de su encabezado — se veía el título de
       una etapa con las tarjetas de la anterior debajo, y las últimas columnas
       parecían vacías. soc.css fuerza `display: inline-block` en
       `.e-content-cells` (para que el <td> respete `height`), y un inline-block
       SÍ se envuelve cuando no cabe, mientras que la fila de encabezados sigue
       siendo un <table> real que nunca se envuelve. En escritorio no se notaba
       porque el ancho alcanzaba; en móvil las columnas de contenido saltaban de
       renglón y dejaban de corresponder con sus títulos. `nowrap` las mantiene en
       una sola línea, que es lo que el scroll horizontal del wrapper espera. */
    .soc-tablero-kanban-wrapper .e-kanban .e-content-row {
        white-space: nowrap;
    }

    /* El `nowrap` de la fila lo heredaría el texto de cada tarjeta y rompería su
       maquetación interna; se restablece dentro de la columna. */
    .soc-tablero-kanban-wrapper .e-kanban .e-content-cells {
        white-space: normal;
    }
}

/* ---- El tablero aprovecha todo el alto y ancho disponibles ----
   Dos recortes se acumulaban y dejaban el Kanban chico dentro de la pantalla:

   - Alto: .soc-tablero-page ya calcula height: 100vh - 72px (encabezado) - 18px,
     pero .navigation-items-page le suma un padding-bottom de 40px y
     .main-content otro padding-bottom de 18px. Ese espacio quedaba como hueco
     muerto bajo el tablero (58px medidos en Chromium) y, como el alto ya estaba
     descontado, además empujaba el contenido fuera de la ventana.
   - Ancho: el mismo .navigation-items-page aplica 20px de padding a cada lado,
     40px que se pierden justo donde el Kanban necesita ancho para mostrar una
     columna más sin desplazarse.

   Se neutralizan solo en esta página (la clase .soc-tablero-page), sin tocar el
   resto de pantallas que sí quieren ese margen de lectura. */
@media (min-width: 768px) {
    .navigation-items-page.soc-tablero-page {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 0;
    }

    /* El alto disponible es el de la ventana menos el encabezado fijo. Se
       reemplaza el cálculo anterior, que restaba de más por el padding que ya
       se quitó arriba. */
    .soc-tablero-page {
        height: calc(100vh - 72px);
    }

    /* .main-content reserva 18px al pie para el resto de páginas; aquí sobran
       porque el tablero ya ocupa el alto exacto. */
    .main-content:has(.soc-tablero-page) {
        padding-bottom: 0;
    }

    /* El Kanban llena su contenedor: si las columnas no alcanzan a cubrir el
       ancho, se reparten en lugar de dejar un vacío a la derecha; si lo superan,
       "max-content" mantiene el scroll horizontal de siempre. */
    .soc-tablero-kanban-wrapper .e-kanban .e-kanban-content,
    .soc-tablero-kanban-wrapper .e-kanban .e-kanban-header {
        width: 100%;
    }

    /* El área de tarjetas ocupa el alto que queda bajo la fila de encabezados.
       El scroll vertical sigue ocurriendo dentro de cada columna, mediante el
       .e-card-wrapper que el tema define como "height: inherit; overflow: auto"
       (ver la nota sobre .e-content-cells en soc.css); esto solo se asegura de
       que el reparto header/contenido respete el alto nuevo. */
    .soc-tablero-kanban-wrapper .e-kanban {
        display: flex;
        flex-direction: column;
    }

    .soc-tablero-kanban-wrapper .e-kanban .e-kanban-header {
        flex: 0 0 auto;
    }

    .soc-tablero-kanban-wrapper .e-kanban .e-kanban-content {
        flex: 1 1 auto;
        min-height: 0;
    }
}

/* ---- Tablero en pantallas pequeñas: más etapas y más clientes a la vista ----
   Punto de partida medido en Chromium con la tarjeta y la columna reales: en una
   laptop común (1366x768) se veían 4 de 5 columnas y la tarjeta ocupaba 429px de
   alto, así que solo entraba UNA tarjeta por columna. El tablero dejaba de
   cumplir su función: ver el avance del pipeline de un vistazo.

   El alto se iba en dos bloques que apilaban etiqueta sobre valor, ocupando
   72px cada uno (el doble que una fila normal): los montos (ESTIMADO/ACTUAL) y
   el ejecutivo asignado. Ambos usan "display: block" en su etiqueta. Poniendo
   etiqueta y valor en la misma línea, más un ajuste de espaciados, la tarjeta
   baja a ~349px sin ocultar ni un dato.

   Se aplica desde 1600px hacia abajo; por encima la tarjeta conserva su diseño
   original.

   El ANCHO DE COLUMNA se deja en los 280px de siempre, en todos los tamaños: se
   probó reducirlo a 240px para que cupieran más etapas a la vez, pero apretaba
   el contenido de la tarjeta sin mejorar la lectura (el aviso "Sin ejecutivo
   asignado" se partía en dos renglones y los nombres largos se truncaban antes).
   Vale más una columna cómoda y desplazarse que ver una etapa más incompleta. */
@media (max-width: 1600px) {
    /* CAUSA PRINCIPAL del alto de la tarjeta: hereda "line-height: 36px" de la
       .e-card del tema de Syncfusion. Con textos de ~10px, cada fila ocupaba
       36px de alto en lugar de los ~13px que necesita — casi el triple. Fijar
       aquí el interlineado es lo que más reduce la tarjeta, y no cambia ningún
       tamaño de letra ni oculta información. */
    .soc-kanban-card,
    .soc-kanban-card * {
        line-height: 1.3;
    }

    .soc-kanban-card {
        padding: 0.5rem 0.6rem;
    }

    /* Montos: "ESTIMADO $50,000" en una línea en lugar de dos. */
    .soc-kanban-card-amounts {
        gap: 0.55rem;
        margin-bottom: 0.26rem;
    }

    .soc-kanban-card-amount {
        display: flex;
        align-items: baseline;
        gap: 0.28rem;
    }

    .soc-kanban-card-amount-label {
        display: inline;
    }

    /* Ejecutivo asignado: mismo criterio que los montos. */
    .soc-kanban-card-assignees {
        margin-top: 0.26rem;
    }

    .soc-kanban-card-assignees .label {
        display: inline;
        margin-right: 0.28rem;
    }

    /* Espaciados: se recortan los márgenes, no el tamaño del texto, para no
       perder legibilidad (las fuentes ya son de 0.6–0.68rem). */
    .soc-kanban-card-header {
        margin-bottom: 0.3rem;
    }

    .soc-kanban-card-key {
        margin-bottom: 0.2rem;
    }

    .soc-kanban-card-row {
        margin-bottom: 0.16rem;
    }

    .soc-kanban-card-footer {
        margin-top: 0.26rem;
        padding-top: 0.3rem;
    }

    /* El nombre del cliente y el correo son los textos que más se alargan; se
       recortan con puntos suspensivos en vez de empujar el ancho de la tarjeta. */
    .soc-kanban-card-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    .soc-kanban-card-row {
        overflow: hidden;
    }

    .soc-kanban-card-row span,
    .soc-kanban-card-assignees div {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    /* El aviso "Sin ejecutivo asignado" ocupaba 44px de alto para un texto de
       solo 11px. No era que se partiera en dos renglones: hereda un
       "line-height: 36px" del .e-card del tema de Syncfusion, y ese interlineado
       inflaba la caja hasta competir visualmente con los datos del cliente.
       Fijando el interlineado, el recuadro se ajusta a su contenido. */
    .soc-kanban-card-no-executive {
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        padding: 0.22rem 0.45rem;
        margin-bottom: 0.3rem;
        min-width: 0;
    }

    .soc-kanban-card-no-executive i {
        flex: 0 0 auto;
        line-height: 1;
    }
}

/* En móvil el Kanban se mantiene tal cual (incluido el arrastre y los 280px de
   columna): la tarjeta compacta ya deja ver dos clientes por etapa, y estrechar
   la columna solo apretaba el contenido sin mostrar más información útil. */

/* Encabezado y filtros del tablero: en móvil los controles ocupan el ancho
   completo en lugar de quedar apretados en una fila. */
@media (max-width: 575.98px) {
    .soc-tablero-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .soc-tablero-filters .form-select,
    .soc-tablero-filters .soc-tablero-date .form-control {
        width: 100%;
    }

    .soc-tablero-filters-search {
        flex-wrap: nowrap;
    }

    .soc-tablero-filters-search > .form-control {
        width: 1%;
    }

    .soc-tablero-filters-top {
        flex-direction: column;
        align-items: stretch;
    }

    .soc-tablero-page .soc-tablero-filters .soc-tablero-date-field {
        width: 100%;
        min-width: 0;
    }

    .soc-tablero-page .soc-tablero-filters .soc-tablero-broker {
        flex: 0 0 auto;
        width: 100%;
    }

    .soc-tablero-filters-dates {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .soc-tablero-header,
    .soc-tablero-header-actions {
        width: 100%;
    }
}

/* ---- Schedule (Agenda) ----
   La vista de semana con 7 columnas no cabe en un teléfono. Se le permite
   desplazarse horizontalmente en vez de comprimir los días. */
@media (max-width: 767.98px) {
    .soc-agenda-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .soc-agenda-wrapper .e-schedule {
        min-width: 680px;
    }
}

/* La barra de herramientas del Schedule (Día/Semana/Mes/Agenda + navegación)
   se apila en móvil en lugar de recortar botones. */
@media (max-width: 575.98px) {
    .soc-agenda-wrapper .e-schedule .e-schedule-toolbar .e-toolbar-items {
        flex-wrap: wrap;
    }
}

/* ---- Stepper de Estatus ----
   En escritorio conserva su scroll horizontal: con muchos estatus dados de alta,
   desplazarse es preferible a comprimir los pasos hasta volverlos ilegibles. */
@media (min-width: 768px) {
    .soc-estatus-stepper-card {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* En móvil el criterio se invierte: deben verse TODAS las etapas de un vistazo,
   porque el stepper es el mapa del avance del cliente y con scroll el usuario no
   sabe cuántas faltan (se veían 3 de 5).

   Lo que impedía que cupieran no era el tamaño del círculo, sino el
   "white-space: nowrap" que el tema aplica a .e-step-label-container: una
   etiqueta como "Contrato lite" no se parte y estira todo el paso. Al permitir
   el salto de línea, cada paso ocupa el ancho de su palabra más larga en vez de
   la frase completa.

   Se combina con .e-small, el modo compacto que ya trae el propio tema de
   Syncfusion (círculos de 28px en vez de 36px, etiquetas de 12px), en lugar de
   redefinir esas medidas a mano. */
@media (max-width: 767.98px) {
    .soc-estatus-stepper-card {
        overflow-x: hidden;
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }

    /* Sin ancho mínimo y repartiendo el espacio por igual, los pasos se ajustan
       a lo que haya disponible. */
    .soc-estatus-stepper-card .e-stepper .e-step-container {
        min-width: 0;
        max-width: none;
        flex: 1 1 0;
    }

    /* La corrección principal: la etiqueta puede ocupar dos o tres renglones. */
    .soc-estatus-stepper-card .e-stepper .e-step-container .e-step-label-container,
    .soc-estatus-stepper-card .e-stepper .e-step-container .e-step-text-container {
        white-space: normal;
        max-width: 100%;
        font-size: 0.62rem;
        line-height: 1.15;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* Círculos más chicos: liberan ancho para las etiquetas y la barra. */
    .soc-estatus-stepper-card .e-stepper .e-step-container .e-step,
    .soc-estatus-stepper-card .e-stepper .e-step-container .e-indicator {
        min-width: 24px;
        min-height: 24px;
        width: 24px;
        height: 24px;
    }

    .soc-estatus-stepper-card .e-stepper .e-step-container .e-indicator {
        font-size: 12px;
    }
}

/* Solo en pantallas realmente angostas se aprieta más. El umbral es 360px y no
   400px porque los teléfonos más comunes miden 390–393px de ancho (iPhone 14/15,
   Pixel): a 400px esta regla les habría reducido el círculo de más sin
   necesidad, ya que a ese ancho las cinco etapas caben con 24px. */
@media (max-width: 359.98px) {
    .soc-estatus-stepper-card .e-stepper .e-step-container .e-step-label-container,
    .soc-estatus-stepper-card .e-stepper .e-step-container .e-step-text-container {
        font-size: 0.56rem;
    }

    .soc-estatus-stepper-card .e-stepper .e-step-container .e-step,
    .soc-estatus-stepper-card .e-stepper .e-step-container .e-indicator {
        min-width: 20px;
        min-height: 20px;
        width: 20px;
        height: 20px;
    }
}

/* ---- Grids de datos (SfGrid) ----
   Es el componente más extendido del sitio: 23 páginas lo usan para el listado
   principal (todos los catálogos, usuarios, roles, anuncios…) y no tenía ningún
   ajuste responsivo propio.

   Con muchas columnas, en una pantalla chica el grid se sale del contenedor. La
   solución es darle scroll horizontal propio: el grid mantiene sus columnas
   legibles y se desplaza dentro de su caja, sin arrastrar toda la página. */
.e-grid {
    max-width: 100%;
}

@media (max-width: 991.98px) {
    .e-grid .e-gridcontent,
    .e-grid .e-gridheader {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* La cabecera y el cuerpo deben desplazarse juntos; Syncfusion ya los
       sincroniza, pero necesitan el mismo ancho mínimo para no desfasarse. */
    .e-grid .e-table {
        min-width: 620px;
    }
}

/* En móvil se compacta el texto y el relleno de celda para que quepan más
   columnas antes de requerir desplazamiento. */
@media (max-width: 575.98px) {
    .e-grid {
        font-size: 0.82rem;
    }

    .e-grid .e-rowcell,
    .e-grid .e-headercell {
        padding: 0.4rem 0.5rem;
    }

    /* La barra de paginación se reparte en varias líneas en vez de recortarse. */
    .e-grid .e-pager .e-pagercontainer {
        flex-wrap: wrap;
    }
}

/* ---- Controles de entrada de Syncfusion ----
   Traen anchos intrínsecos que ignoran al contenedor si no se les fuerza. */
.e-numerictextbox,
.e-datepicker,
.e-datetimepicker,
.e-dropdownlist,
.e-input-group {
    max-width: 100%;
}


/* =========================================================================
   5. MODALES
   ========================================================================= */

/* ---- Corrección de ancho: los modales se veían recortados en TODA resolución ----
   soc.css define ".show { left: 0 }" (líneas 1045 y 1140) como parte del toggle
   del sidebar, pero el selector es genérico y los 27 modales del repo se abren
   con class="modal fade show". Sobre un elemento position: fixed, ese left: 0
   compite con el right de Bootstrap y colapsaba el contenedor .modal a 243px en
   un viewport de 1280px: por eso un modal-lg (800px) se veía angosto y sus
   campos apretados, sin importar el tamaño de la pantalla.

   Se corrige acotando el efecto al modal, sin tocar las reglas del sidebar
   (.l-navbar.show sigue intacto). */
.modal.show {
    left: 0;
    right: 0;
    width: 100%;
}

/* En móvil un modal con márgenes laterales grandes desperdicia el poco ancho
   que hay. Se pegan a los bordes y se acota la altura para que el cuerpo
   scrollee dentro del modal y los botones no queden fuera de la pantalla. */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .modal-body {
        max-height: 70vh;
        overflow-y: auto;
    }

    .modal-footer {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .modal-footer > .btn {
        flex: 1 1 auto;
    }
}

/* Los modales con ancho fijo en píxeles deben poder encogerse. */
.modal-dia-detalle,
.modal-broker-detalle {
    max-width: calc(100vw - 1.5rem);
}

/* Dentro de un modal, los campos también deben repartirse por el ancho real del
   modal y no por el de la ventana. */
.modal-body {
    container-type: inline-size;
    container-name: socmodal;
}

.modal-body > .row > [class*="col-"] {
    min-width: 0;
}

/* Escalonado por el ancho REAL del modal, no por el de la ventana:

   - Bajo 380px: todo a una columna (no caben dos campos legibles).
   - 380–600px: dos columnas; los tercios (col-md-4) pasan a mitades, porque un
     tercio de 500px deja ~160px y ahí ya se parten las etiquetas.
   - Sobre 600px: se respeta el reparto original del markup.

   El modal "Nuevo cliente" usa col-md-4, así que este es el tramo que gobierna
   su comportamiento en laptops. */
@container socmodal (max-width: 379.98px) {
    .modal-body > .row > [class*="col-md-"],
    .modal-body > .row > [class*="col-lg-"],
    .modal-body > .row > [class*="col-sm-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@container socmodal (min-width: 380px) and (max-width: 599.98px) {
    .modal-body > .row > [class*="col-md-4"],
    .modal-body > .row > [class*="col-md-3"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}