/*
  SIGIPSa V2 — base responsive (apps Blazor, no legacy)

  Breakpoints (usar estos valores en media queries):
    -- sm: 640px   teléfonos
    -- md: 900px   tablets chicas
    -- lg: 1100px  tablets / desktop angosto

  Convención para pantallas nuevas:
    1. No fijar height en encabezados institucionales (usar min-height + padding).
    2. Imágenes de logos: max-width: 100%; height: auto o clamp.
    3. Layouts de 2 columnas: apilar en max-width: 1100px.
    4. Overlays/popups: max-height ~90dvh + overflow auto.
    5. Preferir ControlPanelChrome / clases .cp-* o utilidades .sig-* de este archivo.
*/

:root {
    --sig-space-page-x: clamp(12px, 3vw, 24px);
    --sig-space-page-y: clamp(12px, 2.5vw, 20px);
    --sig-touch-min: 44px;
    --sig-overlay-max-h: min(90dvh, 720px);
    --sig-brand-h: clamp(56px, 12vw, 118px);
    --sig-gov-h: clamp(36px, 8vw, 66px);
}

/* Contenedor de página genérico (fuera de ControlPanelChrome) */
.sig-page {
    min-width: 0;
    overflow-x: clip;
}

.sig-page-pad {
    padding-inline: var(--sig-space-page-x);
}

.sig-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.sig-row-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    min-width: 0;
}

/* Overlays compartidos (index + futuros modales) */
.sig-overlay,
.sigipsa-overlay {
    padding: var(--sig-space-page-y) var(--sig-space-page-x);
    box-sizing: border-box;
}

.sig-dialog,
.sigipsa-efector-popup {
    max-height: var(--sig-overlay-max-h);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
    .sig-hide-sm {
        display: none !important;
    }

    .sig-full-sm {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 900px) {
    .sig-hide-md {
        display: none !important;
    }
}