/* ==========================================================
   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 nombre del arranque ya se achica solo con clamp() sobre el ancho
       de la pantalla, asi que aca no hace falta acotarlo. Lo unico que se
       aprieta es el aire entre las tres piezas. */
    .splash-content {
        gap: 1rem !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;
    }

}

/* ==========================================================
   SOLO TELEFONO — 640px

   El bloque de arriba corta en 768px, que es el ancho de un
   iPad vertical: para el archivo original eso estaba bien,
   son correcciones de desborde que a una tablet tampoco le
   hacen mal.

   Lo de aca abajo es distinto. Esconder las etiquetas de las
   pestañas y desarmar las dos columnas del Hunter son
   decisiones de TELEFONO. En una tablet sobra ancho para las
   dos cosas, y aplicarlas ahi seria empeorar una pantalla que
   se ve bien. Por eso van en su propio corte.

   640 y no 768: 768 es exactamente el iPad vertical, y 744 el
   iPad mini. Con 640 quedan las dos afuera y adentro entran
   todos los telefonos en vertical, que llegan hasta ~430px.
   ========================================================== */

@media (max-width: 640px) {

    /* ======================================================
       LA BARRA DE ABAJO: SOLO EL ICONO

       Eran seis pestañas y entraban con su etiqueta debajo.
       Ahora son nueve —se sumaron Hunter, Mensajes y
       Matcher— y a 375px de pantalla tocan a 39px cada una:
       cinco de las nueve etiquetas se cortaban con puntos
       suspensivos ("Client…", "Proyect…"), que es peor que
       no ponerlas, porque ocupan igual y encima no se leen.

       Se esconde la etiqueta, no se cambia el rotulo: el
       texto sigue en el DOM y sigue siendo el nombre
       accesible del boton, asi que un lector de pantalla lo
       sigue diciendo. Lo unico que cambia es que no se
       dibuja.

       SOLO EN CELULAR. En tablet y en PC las etiquetas se
       quedan como estan: ahi sobra ancho y el texto es lo
       que hace que la barra se entienda sin adivinar.

       OJO CON EL SELECTOR. Estas cuatro reglas llevan
       #crm-workspace adelante y no es adorno: ajustes.css
       define las suyas como `html body .main-tabs ...` con
       !important, y se carga DESPUES que este archivo. A
       igual peso e igual especificidad gana la que va mas
       abajo, o sea la de alla. El id rompe el empate sin
       tener que tocar ajustes.css ni depender de en que
       orden esten los <link> en el head, que es lo que uno
       menos quiere que sea la razon de que algo funcione. */
    #crm-workspace .main-tabs .tab-btn > span.tab-rotulo {
        display: none !important;
    }

    /* Sin etiqueta el boton es un icono y nada mas: se
       centra de verdad y se le devuelve el alto que la
       etiqueta ocupaba. */
    #crm-workspace .main-tabs .tab-btn {
        justify-content: center !important;
        gap: 0 !important;
        min-height: 46px !important;
        padding: 11px 2px !important;
    }

    /* El icono, mas grande: es lo unico que queda para
       reconocer la pestaña de un vistazo. */
    #crm-workspace .main-tabs .tab-btn i {
        font-size: 20px !important;
    }

    /* El puntito de la activa se corre al lugar que dejo
       libre la etiqueta. */
    #crm-workspace .main-tabs .tab-btn.active::after {
        bottom: 3px !important;
    }

    /* ======================================================
       EL HUNTER EN CELULAR

       Las reglas de "herramienta como pantalla" estan
       escritas para un monitor: dos columnas, la lista de
       rubros llenandose de costado y un alto atado al
       viewport. Van con selector de id (#prospectar-modal
       .es-pagina ...), asi que le ganan por especificidad a
       la regla de una columna que ya existia para pantallas
       chicas — y en un telefono la grilla quedaba en
       `0px 340px`: la columna de rubros colapsada a CERO y
       la de la derecha saliendose 60px de la pantalla.

       Aca se deshace todo eso. En 375px no hay dos columnas
       que valgan, y una lista que crece de costado no tiene
       sentido cuando el gesto natural es el pulgar hacia
       arriba.
       ====================================================== */
    #prospectar-modal.es-pagina .prosp-cuerpo {
        display: block !important;
        height: auto !important;
    }

    #prospectar-modal.es-pagina .prosp-col {
        overflow: visible !important;
        margin-bottom: 18px !important;
    }

    /* La lista vuelve a ser vertical y de una columna, con
       alto acotado para que no se coma la pantalla. Las
       flechas se esconden solas: pintarMover() las muestra
       solo si hay algo que correr de costado, y en vertical
       no lo hay. */
    #prospectar-modal.es-pagina .prosp-chips {
        display: grid !important;
        grid-template-columns: 1fr !important;
        height: 300px !important;
        max-height: 45vh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scrollbar-width: thin !important;
    }

    #prospectar-modal.es-pagina .prosp-chip {
        width: 100% !important;
        padding: 9px !important;
    }

    /* Los cuatro numeros del tablero: dos y dos. En fila de
       cuatro quedaban en 60px cada uno. */
    #prospectar-modal.es-pagina .prosp-stats {
        grid-template-columns: 1fr 1fr !important;
    }

    /* La fila de rubros del Hunter (.prosp-cats) se corta al ras
       del borde derecho sin ningun aviso de que sigue de largo —se
       ve como un error, no como que hay mas para deslizar. Mismo
       degradado que ya usa .barra-etapas para el mismo problema. */
    .prosp-cats {
        mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
        -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
    }

    /* ======================================================
       MENSAJES Y MATCHER EN CELULAR
       ====================================================== */

    /* La galeria de textos: una tarjeta por renglon. El
       minmax(280px) entraba justo y dejaba al texto sin aire
       en las pantallas de 360. */
    .campana-galeria {
        grid-template-columns: 1fr !important;
    }

    /* El ranking abajo del mazo, con alto propio: sin esto
       son cincuenta renglones colgando de la pantalla. */
    .matcher-rank {
        max-height: 60vh !important;
    }

    /* ======================================================
       ACTIVIDAD DEL EQUIPO

       El ancho lo arregla ranking.css, que era el bug de
       fondo y no era de celular. Lo que si es de celular es
       el ALTO: los slides son absolutos con `inset: 0`, o
       sea que miden lo que mida el contenedor, y ese
       contenedor tiene 104px pensados para una pantalla
       ancha donde cada linea entra en un renglon.

       En 375px no entran: "Gestionando 1 lead este mes"
       ocupa dos renglones y la linea de abajo otros dos.
       Medido, el contenido pide 105px contra 104 de caja —
       el texto se salia por abajo de la pastilla. Con un
       nombre largo se sale mas.

       Y el avatar se achica un poco: cada pixel que suelta
       es ancho para el texto, que es lo que evita que las
       lineas se partan en primer lugar. */
    #vendor-ranking .team-pulse {
        min-height: 132px !important;
    }

    #vendor-ranking .team-pulse-avatar {
        width: 38px !important;
        height: 38px !important;
        font-size: 0.85rem !important;
    }

    #vendor-ranking .team-pulse-slide {
        gap: 0.7rem !important;
        padding: 12px 13px !important;
    }

    /* Una palabra mas larga que la caja no puede empujar el
       ancho ni salirse: se parte. Es el ultimo seguro contra
       un nombre o un rubro sin espacios. */
    #vendor-ranking .team-pulse-accion,
    #vendor-ranking .team-pulse-meta {
        overflow-wrap: anywhere !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));
    }
}