/* SERINTSA Gestión Documental - adaptación responsiva móvil/tablet */
:root {
    --gd-space-1: 6px;
    --gd-space-2: 10px;
    --gd-space-3: 14px;
    --gd-space-4: 20px;
    --gd-radius: 10px;
    --gd-border: #d8e0e8;
    --gd-blue: #0f4c81;
    --gd-blue-dark: #082f54;
    --gd-surface: #ffffff;
    --gd-muted: #5f6b76;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

*, *::before, *::after {
    box-sizing: border-box;
}

img, svg, video, canvas {
    max-width: 100%;
}

iframe, object, embed {
    max-width: 100%;
}

input, select, textarea, button {
    min-width: 0;
    max-width: 100%;
}

body {
    overflow-wrap: anywhere;
}

/* LOGIN */
.page-login {
    min-height: 100svh !important;
    height: auto !important;
    padding: 18px !important;
}

.page-login .login-container {
    width: min(100%, 380px) !important;
    max-width: 100% !important;
    padding: clamp(22px, 6vw, 32px) !important;
}

.page-login .form-group input,
.page-login .btn-entrar {
    min-height: 46px;
    font-size: 16px !important;
}

/* PANEL PRINCIPAL */
.page-dashboard .col-left {
    width: 100% !important;
    min-width: 0;
}

.page-dashboard .quick-link-card,
.page-dashboard .profile-card {
    min-width: 0;
}

.page-dashboard .contenido-anuncio {
    max-height: calc(100svh - 28px);
    overflow: auto;
}

/* PÁGINAS DE BÚSQUEDA */
.page-search .container {
    width: 100%;
    min-width: 0;
}

.page-search .header-area {
    gap: 12px;
}

.page-search .header-area h1,
.page-search .header-area h2,
.page-search .header-area h3 {
    overflow-wrap: anywhere;
}

.page-search .form-row,
.page-search .grid-filtros {
    min-width: 0;
}

.page-search .form-col,
.page-search .form-group {
    min-width: 0;
}

.page-search input,
.page-search select,
.page-search textarea,
.page-search button,
.page-search a[class*="btn-"] {
    max-width: 100%;
}

/* ADMINISTRACIÓN */
.page-admin .admin-toolbar,
.page-admin .panel-controles-secundarios {
    min-width: 0;
}

.page-admin .columna-formulario,
.page-admin .columna-tabla {
    min-width: 0;
}

.page-admin .tabla-contenedor {
    max-width: 100%;
}

/* DIRECTORIO */
.page-leaders .container {
    width: calc(100% - 32px);
}

.page-leaders .grid-directorio,
.page-leaders .tarjeta-lider,
.page-leaders .detalles-lider {
    min-width: 0;
}

/* BOLETINES */
.page-bulletin .sidebar-panel,
.page-bulletin .main-display {
    min-width: 0;
}

.page-bulletin .circulo-collage {
    max-width: calc(100% - 32px);
    max-height: calc(100% - 32px);
}

/* ESCÁNER */
.page-scan .container,
.page-scan .image-gallery,
.page-scan .gallery-card {
    min-width: 0;
}

/* VISOR */
.page-viewer .visor-pdf-nativo,
.page-viewer .contenedor-seguro-global {
    width: 100% !important;
}

/* TABLET Y PANTALLAS MEDIANAS */
@media (max-width: 1100px) {
    .page-admin {
        padding: 24px !important;
        background-attachment: scroll !important;
    }

    .page-admin .container {
        max-width: 100% !important;
        padding: 22px !important;
    }

    .page-admin .panel-dos-columnas {
        flex-direction: column !important;
        gap: 24px !important;
    }

    .page-admin .columna-formulario,
    .page-admin .columna-tabla {
        width: 100% !important;
        flex: 0 0 auto !important;
    }

    .page-admin .panel-controles-secundarios {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px !important;
    }

    .page-leaders .grid-directorio {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 24px !important;
    }
}

@media (max-width: 900px) {
    html {
        height: auto !important;
        min-height: 100%;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    /* Dashboard: deja de ser un lienzo fijo y pasa a bloques fluidos */
    .page-dashboard {
        height: auto !important;
        min-height: 100svh;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .page-dashboard .dashboard-container {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        min-height: 100svh;
        gap: 14px !important;
        padding: 12px !important;
        overflow: visible !important;
    }

    .page-dashboard .col-left {
        order: 1;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px !important;
        height: auto !important;
    }

    .page-dashboard .profile-card {
        height: 100%;
    }

    .page-dashboard .quick-link-card {
        height: 100%;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .page-dashboard .quick-link-card img {
        width: 100% !important;
        height: 100% !important;
        min-height: 96px;
        object-fit: cover;
    }

    .page-dashboard .col-center {
        order: 2;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        display: block !important;
    }

    .page-dashboard .wrapper-mapa {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    .page-dashboard .mapa-fondo-img {
        display: none !important;
    }

    .page-dashboard .capa-botones {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px !important;
        pointer-events: auto !important;
    }

    .page-dashboard .btn-visible {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 78px;
        display: flex !important;
        padding: 0 !important;
        overflow: hidden;
        transform: none !important;
    }

    .page-dashboard .btn-visible img {
        display: block;
        width: 100% !important;
        height: auto !important;
        min-height: 76px;
        object-fit: contain !important;
    }

    .page-dashboard .btn-visible:nth-child(5) {
        grid-column: 1 / -1;
    }

    .page-dashboard .col-right {
        order: 3;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px !important;
    }

    .page-dashboard .bar-satisfecho {
        grid-column: 1 / -1;
    }

    .page-dashboard .reporte-item {
        min-width: 0;
        height: 100%;
    }

    .page-dashboard .reporte-item img {
        max-height: 140px !important;
    }

    /* Buscadores */
    .page-search {
        padding: 18px !important;
        overflow-x: hidden;
    }

    .page-search .container {
        max-width: 100% !important;
        padding: 22px !important;
    }

    .page-search .header-area {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
    }

    .page-search .header-area h1,
    .page-search .header-area h2 {
        flex: 1 1 280px;
        font-size: clamp(22px, 5vw, 32px) !important;
        line-height: 1.15;
    }

    .page-search .btn-volver {
        flex: 0 0 auto;
        min-height: 42px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    .page-search .form-row,
    .page-search .grid-filtros {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .page-search .form-col {
        width: 100% !important;
        flex: initial !important;
    }

    .page-search input[type="text"],
    .page-search input[type="search"],
    .page-search select,
    .page-search textarea {
        width: 100% !important;
        font-size: 16px !important;
        min-height: 46px;
    }

    /* Boletines */
    .page-bulletin {
        display: flex !important;
        flex-direction: column !important;
        width: 100%;
        height: auto !important;
        min-height: 100svh;
        overflow: auto !important;
    }

    .page-bulletin .sidebar-panel {
        width: 100% !important;
        min-height: auto !important;
        padding: 24px !important;
        gap: 24px;
        justify-content: flex-start !important;
    }

    .page-bulletin .header-zona {
        margin-top: 0 !important;
    }

    .page-bulletin .header-zona h1 {
        font-size: clamp(36px, 9vw, 52px) !important;
    }

    .page-bulletin .header-zona h1 span {
        font-size: clamp(28px, 7vw, 42px) !important;
    }

    .page-bulletin .select-custom {
        min-height: 48px;
        font-size: 16px !important;
    }

    .page-bulletin .marcas-container {
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: center !important;
        margin-top: 8px !important;
        gap: 18px !important;
    }

    .page-bulletin .main-display {
        width: 100% !important;
        min-height: 68svh;
        height: 68svh;
    }

    .page-bulletin .circulo-collage {
        width: min(72vw, 480px) !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
    }

    .page-bulletin .pdf-embed-container,
    .page-bulletin .pdf-embed-container iframe {
        min-height: 68svh;
    }

    /* Directorio */
    .page-leaders .container {
        margin: 24px auto !important;
        padding: 26px !important;
    }

    .page-leaders .grid-directorio {
        grid-template-columns: 1fr !important;
    }

    .page-leaders .header-titulo {
        max-width: calc(100% - 150px) !important;
        margin-bottom: 30px !important;
    }

    .page-leaders .header-titulo h1 {
        font-size: clamp(28px, 7vw, 38px) !important;
    }

    /* Escáner */
    .page-scan .container {
        max-width: 100% !important;
        padding: 24px 16px !important;
    }

    .page-scan .header-title {
        font-size: clamp(28px, 7vw, 40px) !important;
    }

    .page-scan .image-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .page-scan .gallery-card {
        height: auto !important;
        min-height: 260px;
    }
}

/* TELÉFONOS */
@media (max-width: 680px) {
    a, button, input, select, textarea {
        touch-action: manipulation;
    }

    button,
    input[type="submit"],
    input[type="button"],
    select {
        min-height: 44px;
    }

    /* Dashboard */
    .page-dashboard .col-left {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-dashboard .profile-card {
        grid-column: 1 / -1;
    }

    .page-dashboard .quick-link-card img {
        min-height: 88px;
    }

    .page-dashboard .capa-botones {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .page-dashboard .btn-visible:nth-child(5) {
        grid-column: 1 / -1;
    }

    .page-dashboard .col-right {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .page-dashboard .contenido-anuncio {
        width: calc(100% - 24px) !important;
        padding: 12px !important;
    }

    /* Buscadores */
    .page-search {
        padding: 10px !important;
    }

    .page-search .container {
        padding: 16px !important;
        border-radius: 8px !important;
    }

    .page-search .header-area {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .page-search .header-area h1,
    .page-search .header-area h2 {
        flex-basis: auto;
        margin-bottom: 2px !important;
    }

    .page-search .btn-volver {
        width: 100%;
    }

    .page-search .form-row,
    .page-search .grid-filtros {
        grid-template-columns: 1fr !important;
    }

    /* Admin */
    .page-admin {
        padding: 10px !important;
    }

    .page-admin .container {
        padding: 16px !important;
        border-radius: 8px !important;
    }

    .page-admin .admin-toolbar {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px;
    }

    .page-admin .admin-toolbar h2 {
        font-size: 22px !important;
    }

    .page-admin .admin-toolbar a {
        width: 100%;
        text-align: center;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .page-admin .columna-formulario {
        padding: 16px !important;
    }

    .page-admin .panel-controles-secundarios {
        grid-template-columns: 1fr !important;
    }

    .page-admin select,
    .page-admin input[type="text"],
    .page-admin input[type="password"],
    .page-admin input[type="file"],
    .page-admin textarea,
    .page-admin button {
        width: 100% !important;
        font-size: 16px !important;
    }

    .page-admin .galeria-cuadricula {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Directorio */
    .page-leaders .container {
        width: calc(100% - 20px) !important;
        margin: 10px auto !important;
        padding: 18px !important;
    }

    .page-leaders .btn-volver {
        position: static !important;
        display: flex !important;
        width: 100%;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
    }

    .page-leaders .header-titulo {
        max-width: 100% !important;
        margin-bottom: 22px !important;
    }

    .page-leaders .tarjeta-lider {
        flex-direction: column !important;
        align-items: center !important;
        gap: 14px !important;
        text-align: center;
    }

    .page-leaders .foto-circulo {
        width: 124px !important;
        height: 124px !important;
    }

    .page-leaders .detalles-lider ul {
        display: inline-block;
        text-align: left;
    }

    .page-leaders .footer-lema {
        font-size: 16px !important;
        margin-top: 28px !important;
    }

    .page-leaders .diagonal-top-left,
    .page-leaders .diagonal-bottom-right {
        opacity: 0.28 !important;
    }

    /* Boletines */
    .page-bulletin .sidebar-panel {
        padding: 18px !important;
    }

    .page-bulletin .marcas-container img {
        max-width: min(42vw, 180px) !important;
    }

    .page-bulletin .main-display,
    .page-bulletin .pdf-embed-container,
    .page-bulletin .pdf-embed-container iframe {
        height: 62svh !important;
        min-height: 62svh !important;
    }

    .page-bulletin .circulo-collage {
        width: min(82vw, 390px) !important;
        border-width: 7px !important;
    }

    .page-bulletin .btn-cerrar-pdf {
        top: 10px !important;
        right: 10px !important;
        padding: 9px 12px !important;
        font-size: 12px;
    }

    /* Escáner */
    .page-scan {
        padding: 12px !important;
        align-items: stretch !important;
    }

    .page-scan .btn-back {
        width: 100%;
        justify-content: center;
    }

    .page-scan .container {
        margin-top: 12px !important;
        padding: 20px 12px !important;
    }

    .page-scan .instruction-tag {
        max-width: 100% !important;
        padding: 10px 14px !important;
        font-size: 15px !important;
    }

    .page-scan .image-gallery {
        grid-template-columns: 1fr !important;
    }

    .page-scan .gallery-card {
        min-height: 240px;
    }

    /* Modal de galería */
    .page-admin .modal-galeria img,
    .page-scan .modal-content {
        max-width: calc(100% - 24px) !important;
        max-height: calc(100svh - 80px) !important;
    }
}

@media (max-width: 430px) {
    .page-dashboard .capa-botones,
    .page-dashboard .col-right {
        grid-template-columns: 1fr !important;
    }

    .page-dashboard .btn-visible:nth-child(5) {
        grid-column: auto;
    }

    .page-admin .galeria-cuadricula {
        grid-template-columns: 1fr !important;
    }
}

/* Tablas convertidas en tarjetas en móvil. Las etiquetas las añade responsive.js. */
@media (max-width: 760px) {
    .tabla-contenedor,
    .tabla-container,
    .tabla-resultados-contenedor {
        max-height: none !important;
        overflow: visible !important;
        border: 0 !important;
        background: transparent !important;
    }

    table.responsive-table {
        display: block;
        width: 100% !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        background: transparent !important;
    }

    table.responsive-table thead {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    table.responsive-table tbody {
        display: grid;
        gap: 12px;
        width: 100%;
    }

    table.responsive-table tbody tr {
        display: block;
        width: 100%;
        padding: 6px 12px;
        border: 1px solid var(--gd-border) !important;
        border-radius: var(--gd-radius);
        background: var(--gd-surface);
        box-shadow: 0 2px 8px rgba(15, 76, 129, 0.06);
    }

    table.responsive-table tbody tr[style*="display: none"],
    table.responsive-table tbody tr.oculto {
        display: none !important;
    }

    table.responsive-table tbody td {
        display: grid !important;
        grid-template-columns: minmax(105px, 38%) minmax(0, 1fr);
        gap: 12px;
        align-items: start;
        width: 100% !important;
        min-height: 42px;
        padding: 10px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #edf1f5 !important;
        text-align: left !important;
        word-break: break-word;
    }

    table.responsive-table tbody td:last-child {
        border-bottom: 0 !important;
    }

    table.responsive-table tbody td::before {
        content: attr(data-label);
        color: var(--gd-blue-dark);
        font-size: 12px;
        font-weight: 700;
        line-height: 1.35;
        text-transform: uppercase;
    }

    table.responsive-table tbody td.cell-full,
    table.responsive-table tbody td[data-label=""] {
        display: block !important;
        min-height: 0;
        text-align: center !important;
    }

    table.responsive-table tbody td.cell-full::before,
    table.responsive-table tbody td[data-label=""]::before {
        display: none;
    }

    table.responsive-table tbody td form,
    table.responsive-table tbody td button,
    table.responsive-table tbody td a[class*="btn-"],
    table.responsive-table tbody td .btn-ver,
    table.responsive-table tbody td .btn-abrir {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 42px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
    }
}