/* =============================================================
   Viare Certificates - Adaptabilidad PWA
   Safe areas (iOS), tablet horizontal, responsive
   Cargado DESPUES de phh-app.css: sobreescribe sin tocar el base
   ============================================================= */

/* ---------- 1. Barra de estado / safe areas (iPhone con notch) ---------- */
html { background: hsl(177 56% 28%); }  /* el area sobre el header queda en el teal de la marca */

.app-header {
    padding-top: calc(16px + env(safe-area-inset-top, 0px)) !important;
    padding-left: calc(24px + env(safe-area-inset-left, 0px)) !important;
    padding-right: calc(24px + env(safe-area-inset-right, 0px)) !important;
}

/* barras inferiores fijas: respetar el indicador de inicio */
.bottom-nav, .tab-bar, .app-footer, .bottom-sheet, .sale-form-modal,
.cart-footer, .detail-actions, .fixed-bottom {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px)) !important;
}

/* contenido lateral en modo horizontal con notch */
.screen { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }

/* login: bajar el contenido para no chocar con la barra de estado */
.login-content { padding-top: calc(env(safe-area-inset-top, 0px)) !important; }
.login-footer { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; }

/* ---------- 2. Modo standalone (app instalada) ---------- */
@media (display-mode: standalone) {
    body { min-height: 100dvh; }
}

/* ---------- 3. Tablet / iPad — layout horizontal ---------- */
@media (min-width: 768px) {
    body { font-size: 17px; }

    .screen { max-width: 1120px; margin: 0 auto; width: 100%; }

    /* grid de locaciones: aprovechar el ancho, tarjetas mas grandes y centradas */
    .locations-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
        max-width: 1040px;
        margin: 0 auto;
        gap: 28px !important;
    }

    /* formularios y tarjetas de detalle mas anchos y centrados */
    .cert-card, .lead-card, .sale-form, .cart-body, .detail-body,
    .confirmation-card { max-width: 720px; margin-left: auto; margin-right: auto; }

    /* listas de leads en dos columnas en tablet */
    .leads-list, .certs-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        align-items: start;
    }
}

/* tablet grande / horizontal amplio */
@media (min-width: 1024px) {
    .locations-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important; max-width: 1120px; }
    .leads-list, .certs-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 4. Aviso "gira dispositivo": respetar safe areas ---------- */
#pwa-rotate { padding: calc(32px + env(safe-area-inset-top, 0px)) 32px 32px !important; }

/* ---------- 5. Evitar zoom raro en inputs iOS y toques mas comodos ---------- */
input, select, textarea { font-size: 16px !important; }
.location-card, .lead-card, .cert-card, button, .btn { min-height: 44px; }