/* CSS/mobile-compact.css — Celulares: una sola capa de contenedor y contenido de borde a borde.
 *
 * Se carga al final (después de mobile-lists.css). Solo actúa en pantallas de hasta 768 px.
 * Problema que resuelve: los contenedores anidados sumaban márgenes (vista → tarjeta → caja interior;
 * modal → hoja blanca → caja de la tabla) y el contenido quedaba en ~80 % del ancho.
 * Criterio: el "papel" (fondo + borde + sombra + padding) lo pone UNA sola capa; las demás son transparentes.
 * Estética plana y minimalista (estilo Firebase / Hostinger): secciones separadas por líneas finas, tarjetas
 * solo donde agrupan un dato (métricas, filas de lista).
 */
@media (max-width: 768px) {

    :root { --m-gutter: 12px; }

    /* ------------------------------------------------------------------
       1. VISTAS: margen lateral único y más angosto
       ------------------------------------------------------------------ */
    .page-view {
        padding-left: var(--m-gutter) !important;
        padding-right: var(--m-gutter) !important;
    }

    /* Tarjetas de métricas en 2 columnas: si la cantidad es impar, la última ocupa todo el ancho
       (evita el hueco vacío al lado de "Balance Neto") */
    .fin-stats-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }

    /* Inicio: la cuadrícula de accesos traía su propio padding lateral además del de la vista */
    #main-dashboard .functions-grid { padding-left: 0 !important; padding-right: 0 !important; }

    /* Directorio de clientes: la barra de búsqueda era una tarjeta que envolvía otros campos con borde */
    #crm-view .crm-toolbar {
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    /* ------------------------------------------------------------------
       2. REGISTRO DEL DÍA (form-view): la tarjeta del formulario y la del resumen dejan de ser "cajas"
          dentro de la vista; quedan como secciones planas separadas por una línea.
       ------------------------------------------------------------------ */
    #form-view .form-page-container { gap: 0; }

    #form-view .form-wrapper,
    #form-view .daily-summary-container {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    #form-view .daily-summary-container {
        margin-top: 24px;
        padding-top: 20px !important;
        border-top: 1px solid var(--card-border) !important;
    }

    /* Valor base / descuento / recibido: la caja punteada exterior sobra (el resumen ya es una tarjeta) */
    #form-view .financial-fields-group {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin-top: 4px;
        gap: 14px;
    }
    #form-view .financial-inputs { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    #form-view .financial-summary-box { padding: 12px 14px; }
    #form-view .summary-detail.total input { width: 50%; min-width: 0; }

    /* Buscador y chips del día: sin bordes de más, a todo el ancho */
    #form-view .daily-toolbar { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
    #form-view .daily-transactions-table-container { max-height: none !important; overflow: visible !important; border-bottom: 0 !important; }

    /* ------------------------------------------------------------------
       3. MODALES TIPO HOJA (detalle, cliente, agenda, reportes…)
          Antes: fondo del modal → wrapper con 20 px → hoja con fondo/sombra/padding → (caja de tabla).
          Ahora: el modal es el único fondo; wrapper y hoja son transparentes y solo dejan el margen lateral.
       ------------------------------------------------------------------ */
    .modal .report-modal-container,
    .modal .details-modal-container:not(.balm) {
        background-color: var(--view-bg-color) !important;
    }

    .modal .report-scroll-wrapper {
        padding: 0 !important;
        overscroll-behavior: contain;
    }

    .modal .report-print-area,
    .modal .balance-print-area {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        /* arriba: franja para la X de cerrar · abajo: espacio para el botón flotante de descarga */
        padding: 52px var(--m-gutter) 92px !important;
        min-width: 0;
        box-sizing: border-box !important;
        overflow: visible !important;   /* el que hace scroll es .report-scroll-wrapper, no la hoja */
    }

    /* Gestor de negocios: su wrapper hace de hoja (no tiene .balance-print-area), así que lleva el margen él mismo */
    #business-manager-modal .report-scroll-wrapper {
        padding: 52px var(--m-gutter) 24px !important;
        gap: 16px !important;
    }
    #business-manager-modal .business-modal-content { min-height: 0 !important; }

    /* ------------------------------------------------------------------
       3b. DIÁLOGOS FLOTANTES (presupuesto, abono, recibo, plantillas…): tienen margen de 20 px por fuera
           y 25 px de padding por dentro (≈ 45 px por lado). Se reducen para que los campos ocupen casi todo el ancho.
       ------------------------------------------------------------------ */
    .modal-content.details-modal-container[style*="margin: 20px"] { margin: 10px !important; }
    .modal-content.details-modal-container[style*="margin: 20px"] > .modal-body { padding: 18px 16px !important; }

    /* Botón de cerrar (X): esquina superior, en su propia franja, sin tapar el título */
    .modal .report-close-btn {
        top: 8px !important;
        right: 8px !important;
        width: 36px;
        height: 36px;
        display: grid !important;
        place-items: center;
        font-size: 1.5rem !important;
        line-height: 1;
        border-radius: 10px;
    }

    /* Botón flotante de descarga: más pequeño y pegado a la esquina */
    .modal .floating-download-btn {
        width: 52px;
        height: 52px;
        right: 14px;
        bottom: 16px;
    }

    /* Cabecera del modal de detalle (título + subtítulo) */
    .modal .m-sheet-head { padding-bottom: 12px !important; margin-bottom: 14px !important; border-bottom-width: 1px !important; }
    .modal .m-sheet-title { font-size: 1.25rem !important; gap: 10px !important; line-height: 1.25; overflow-wrap: anywhere; }
    .modal .m-sheet-title > div { padding: 6px !important; border-radius: 8px !important; flex-shrink: 0; }
    .modal .m-sheet-title > div i,
    .modal .m-sheet-title > div svg { width: 20px !important; height: 20px !important; }
    .modal .m-sheet-sub { font-size: 0.9rem !important; }

    /* Lista de transacciones dentro del modal: sin la caja gris exterior, sin altura mínima ni scroll propio */
    .modal .table-wrapper-modal.m-stack-wrap {
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        padding-bottom: 0 !important;
    }
    .modal .table-wrapper-modal.m-stack-wrap table { min-width: 0 !important; }
    .modal .table-wrapper-modal.m-stack-wrap table.m-stack tr:last-child { margin-bottom: 0 !important; }
    .modal table.m-stack tr { padding: 2px 12px !important; }
    /* El hueco a la derecha del título solo hace falta cuando la fila tiene casilla de selección */
    table.m-stack tr:not(:has(td.m-check)) td.m-title { padding-right: 0 !important; }

    /* Total del modal: ocupa todo el ancho, sin caja mínima de 250 px */
    .modal .m-sheet-total {
        justify-content: stretch !important;
        padding-top: 14px !important;
        margin-top: 14px !important;
    }
    .modal .m-sheet-total > div {
        width: 100%;
        min-width: 0 !important;
        box-sizing: border-box;
        padding: 12px 14px !important;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        text-align: left !important;
    }
    .modal .m-sheet-total > div > span:first-child { margin: 0 !important; font-size: 0.72rem !important; }
    .modal .m-sheet-total > div > span:last-child { font-size: 1.4rem !important; text-align: right; overflow-wrap: anywhere; }

    /* ------------------------------------------------------------------
       4. PERFIL DE CLIENTE
       ------------------------------------------------------------------ */
    #crm-profile-modal .crm-profile { max-width: none; }
    #crm-profile-modal .crm-hero { padding: 18px 14px 14px; border-radius: 16px; }
    #crm-profile-modal .crm-kpi-grid { gap: 10px; }

    /* Cada sección (Desempeño, Hoja de Vida, Historial…) era una tarjeta que guardaba otras tarjetas:
       ahora es solo título + contenido; las tarjetas que quedan son las de cada dato. */
    #crm-profile-modal .crm-panel {
        padding: 0;
        margin-bottom: 26px;
        overflow: visible;
        background: transparent !important;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    #crm-profile-modal .crm-panel-title { margin-bottom: 12px; }
}