/* DentCo — Estilos responsive para móvil */

@supports (padding: max(0px)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* Evita zoom automático en iOS al enfocar inputs */
@media (max-width: 1023px) {
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

@media (max-width: 767px) {
    /* Tablas: scroll horizontal con celdas compactas */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive table {
        min-width: 520px;
    }

    table th,
    table td {
        padding: 0.75rem 1rem !important;
    }

    /* Títulos más compactos */
    h1.text-3xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    h2.text-2xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    h3.text-xl {
        font-size: 1.125rem;
    }

    /* Barra de filtros del dashboard */
    .dl-filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 0.875rem 1rem !important;
        gap: 0.625rem !important;
    }

    .dl-filter-bar select,
    .dl-filter-bar button {
        width: 100%;
    }

    .dl-filter-bar #panelPeriodoLabel {
        margin-left: 0 !important;
        width: 100%;
        text-align: center;
        order: 99;
    }

    /* Métricas del panel */
    .dl-stat-num {
        font-size: 1.25rem !important;
        min-width: 2.5rem !important;
    }

    .dl-metric-big {
        font-size: 1.35rem !important;
    }

    .dl-widget-body {
        padding: 1rem !important;
    }

    .dl-widget-header {
        padding: 0.75rem 1rem !important;
        font-size: 0.7rem !important;
    }

    /* Headers de sección con badge */
    .section-header-mobile {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }

    /* Ocultar separadores en headers apretados */
    .hide-mobile {
        display: none !important;
    }

    /* Tarjetas con padding grande (override Tailwind) */
    .mobile-compact-card {
        padding: 1.25rem !important;
        border-radius: 1.5rem !important;
    }

    /* Modales a pantalla casi completa */
    .mobile-modal-panel {
        padding: 1.25rem !important;
        border-radius: 1.5rem !important;
        max-height: 92vh;
        overflow-y: auto;
        margin: 0.5rem;
    }

    /* Anuncios admin: altura flexible */
    .anuncios-list-panel {
        height: auto !important;
        min-height: 320px;
        max-height: 70vh;
    }
}

/* Áreas táctiles mínimas */
@media (pointer: coarse) {
    button,
    a.flex.items-center.gap-4,
    nav a {
        min-height: 44px;
    }
}