/* ============================================================================
   artesano-responsive.css — Adaptación móvil del módulo Artesano Café
   Escopado a .art-shell: no afecta al resto de adiraControls.
   Registrar en Client/wwwroot/index.html, después de los css existentes:
     <link href="css/artesano-responsive.css" rel="stylesheet" />
   ============================================================================ */

/* ---------- Base (todos los tamaños) ---------- */

/* Los grids de Radzen y las tablas nunca deben romper el layout: scroll propio */
.art-shell .rz-data-grid {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.art-shell .rz-dropdown,
.art-shell .rz-textbox,
.art-shell .rz-numeric,
.art-shell .rz-datepicker {
    max-width: 100%;
}

/* Paneles desplegables de los dropdown: que no se salgan de la pantalla */
.rz-dropdown-panel,
.rz-autocomplete-panel {
    max-width: 95vw !important;
}

/* Pestañas: si no caben, se envuelven en dos filas en vez de cortarse */
.art-shell .rz-tabview-nav {
    flex-wrap: wrap;
}

/* ---------- Tabletas y teléfonos (≤ 768 px: Sunmi V2S, celulares) ---------- */
@media (max-width: 768px) {

    .art-shell {
        font-size: 14px;
    }

    .art-shell h3 { font-size: 1.25rem; }
    .art-shell h5 { font-size: 1.05rem; }

    /* Tablas HTML (comanda, detalle de compra, programación, líneas del
       editor): pasan a scroll horizontal sin deformar la página */
    .art-shell table.table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .art-shell table.table td,
    .art-shell table.table th {
        white-space: nowrap;
    }

    /* Objetivos táctiles cómodos para dedos (recomendación 40px+) */
    .art-shell .rz-button {
        min-height: 40px;
    }

    .art-shell .rz-button.rz-button-xs,
    .art-shell .rz-button.rz-button-sm {
        min-height: 36px;
    }

    /* Grupos de botones alineados a la derecha: en pantalla chica se
       envuelven con separación en lugar de desbordar */
    .art-shell .text-end .rz-button {
        margin-bottom: .35rem;
    }

    /* Formularios: las columnas de Bootstrap ya apilan (col-md-*); esto
       asegura que cada control use el ancho completo al apilarse */
    .art-shell .row > [class*="col-"] .rz-dropdown,
    .art-shell .row > [class*="col-"] .rz-textbox,
    .art-shell .row > [class*="col-"] .rz-numeric,
    .art-shell .row > [class*="col-"] .rz-datepicker {
        width: 100% !important;
    }

    /* Alertas y paneles con menos padding para ganar pantalla */
    .art-shell .alert { padding: .4rem .6rem; }
    .art-shell .border.rounded.p-3 { padding: .75rem !important; }
}

/* ---------- Teléfonos pequeños (≤ 576 px) ---------- */
@media (max-width: 576px) {

    /* Tarjetas de mesa del POS: dos por fila, más altas para el dedo */
    .art-shell .d-flex.flex-wrap.gap-2 > div[style*="cursor:pointer"] {
        width: calc(50% - .5rem) !important;
        min-height: 84px;
    }

    /* Botones del menú del POS: más grandes y de línea completa si el
       nombre es largo */
    .art-shell .d-flex.flex-wrap.gap-1 .rz-button {
        min-height: 44px;
        white-space: normal;
        text-align: left;
    }

    /* La cuadrícula semanal de inventario y los grids anchos: la primera
       columna (Frozen) queda fija y el resto se desliza con el dedo */
    .art-shell .rz-data-grid .rz-frozen-cell {
        background: #fff;
    }

    /* Encabezado del módulo más compacto */
    .art-shell .art-header,
    .art-shell .d-flex.justify-content-between.align-items-center {
        flex-wrap: wrap;
        gap: .4rem;
    }
}