/* ==========================================================
   CRM - AJUSTES DE PANTALLA CHICA (CELULAR)

   Archivo aparte a propósito: index.css y legibilidad.css son
   territorio del diseño, acá sólo van correcciones de desborde
   para que nada se salga de la pantalla en un teléfono.
   ========================================================== */

@media (max-width: 768px) {

    /* La grilla de gráficos pedía columnas de 400px dentro de un
       contenedor de ~343px: se salía de la pantalla. Una columna. */
    .charts-grid {
        grid-template-columns: 1fr !important;
    }

    /* Los canvas de Chart.js se dibujaban a 717px de ancho. */
    .chart-card,
    .chart-body,
    .chart-card canvas,
    canvas {
        max-width: 100% !important;
    }

    /* Ojo: no poner `height: auto` en los canvas. El motor de graficos
       escribe canvas.height en pixeles fisicos (x devicePixelRatio) y en el
       siguiente dibujo relee esa altura ya multiplicada: el grafico se
       duplica de tamano en cada render hasta comerse la pantalla. */
    .chart-body:has(> canvas) {
        height: 240px !important;
        min-height: 240px !important;
        max-height: 240px !important;
    }

    /* Ninguna tarjeta puede ser más ancha que su contenedor. */
    .chart-card,
    .glass-panel,
    .stat-card,
    .metric-card {
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Las pestañas se pueden arrastrar de costado: que se note
       que hay más y que no queden cortadas al ras. */
    /* Barra superior: ocupaba 75px de alto en una pantalla de 844px.
       Se compacta para dejarle lugar al contenido real. */
    .top-navbar {
        padding: 8px 12px !important;
        gap: 8px !important;
    }

    .top-navbar .user-meta {
        min-width: 0 !important;
    }

    .top-navbar .user-info {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        min-width: 0 !important;
    }

    /* Nombres largos se recortan en vez de estirar la barra. */
    .top-navbar .user-name {
        font-size: 0.76rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 42vw !important;
    }

    .top-navbar .badge {
        font-size: 0.6rem !important;
        padding: 2px 7px !important;
        letter-spacing: 0 !important;
        flex: 0 0 auto !important;
    }

    .top-navbar .btn-icon {
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        font-size: 0.95rem !important;
        flex: 0 0 auto !important;
    }

    /* Esto era un carrusel horizontal. Se saco el scroll: mientras
       la barra fuera desplazable, el navegador la corria solo para
       "traer al foco" la pestaña recien tocada, y la fila se iba de
       lugar sin que nadie la arrastrara. Las pestañas entran todas
       en el grid que arma ajustes.css. */
    .main-tabs {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px 12px !important;
    }

    .main-tabs .tab-btn {
        flex: 0 0 auto !important;
        /* 44px de alto: la medida cómoda para tocar con el dedo. */
        min-height: 44px !important;
        padding: 11px 18px !important;
        margin: 0 !important;
        font-size: 0.9rem !important;
        line-height: 1.2 !important;
        border-radius: 12px !important;
        gap: 8px !important;
        white-space: nowrap !important;
    }

    /* El contador del pool no debe apretar el texto del botón. */
    .main-tabs .tab-badge {
        margin-left: 6px !important;
        flex: 0 0 auto !important;
    }

    /* Los montos largos no deben empujar el ancho de la fila. */
    input,
    select,
    textarea {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Tablas: scroll propio en vez de estirar la página. */
    .table-wrapper,
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    /* El logo de marca puede venir en cualquier proporcion: en el celular
       se acota fuerte para no comerse la pantalla de carga ni la barra. */
    .splash-logo-img {
        height: 84px !important;
        max-width: 60vw !important;
    }

    .watermark-logo-img {
        height: 180px !important;
        max-width: 55vw !important;
        opacity: 0.03 !important;
    }

    .sync-logo-pulse {
        width: 96px !important;
    }

    /* El logo se aplastaba a 3px de ancho: es un item flex y la barra le
       robaba el espacio. No debe encogerse. */
    .top-navbar .logo-wrapper,
    .top-navbar .brand-container .logo-wrapper {
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }

    .top-navbar .logo-wrapper img {
        height: 24px !important;
        width: auto !important;
        flex: 0 0 auto !important;
    }
}

/* Muescas y barras de los celulares modernos (viewport-fit=cover). */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
}