/* =============================================================================
   VisorDatosSIG 2026 — Componentes comunes del workspace autenticado.

   Contiene exclusivamente piezas reutilizables por más de una página: el diálogo
   modal (js/comun/modal.js). Reutiliza los tokens de visor.css, por lo que el modo
   oscuro (theme.css) no requiere reglas adicionales.
   ============================================================================= */

/* Mientras hay un diálogo abierto el documento no se desplaza de fondo. */
body.modal-abierto {
    overflow: hidden;
}

/* Por encima del sidebar (z-index 1100) y de los controles de Leaflet. */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: var(--space-4);
}

.modal__fondo {
    position: absolute;
    inset: 0;
    background-color: rgba(9, 25, 43, 0.55);
}

.modal__dialogo {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(520px, 100%);
    max-height: calc(100vh - var(--space-6));
    overflow: hidden;
    background-color: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.modal__encabezado {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-4) var(--space-5) var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.modal__titulo {
    margin: 0;
    font-size: 1.08rem;
}

.modal__subtitulo {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.86rem;
    color: var(--color-muted);
    overflow-wrap: anywhere;
}

.modal__cerrar {
    grid-row: 1;
    grid-column: 2;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background-color: transparent;
    color: var(--color-muted);
    font: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.modal__cerrar:hover {
    background-color: var(--color-surface-alt);
    color: var(--color-text);
}

.modal__cerrar:focus-visible,
.modal__control:focus-visible,
.modal__dialogo button:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 1px;
}

.modal__cuerpo {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    overflow-y: auto;
}

.modal__campo {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.modal__etiqueta {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--color-text);
}

.modal__control {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 0.92rem;
}

.modal__ayuda,
.modal__mensaje {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--color-muted);
}

.modal__error {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-error-border);
    border-left: 4px solid var(--color-error);
    border-radius: var(--radius-sm);
    background-color: var(--color-error-bg);
    color: var(--color-error);
    font-size: 0.86rem;
    line-height: 1.45;
}

/* Pares etiqueta/valor del panel de detalle (solo lectura). */
.modal__lista {
    margin: 0;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--space-2) var(--space-4);
    align-items: baseline;
}

.modal__fila {
    display: contents;
}

.modal__clave {
    margin: 0;
    font-weight: 600;
    color: var(--color-muted);
    white-space: nowrap;
}

.modal__valor {
    margin: 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.modal__pie {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5) var(--space-4);
    border-top: 1px solid var(--color-border);
    background-color: var(--color-surface-alt);
}

/* Acción destructiva: mismo botón, con el color de error del sistema. */
.modal__peligro,
.modal__peligro:hover {
    background-color: var(--color-error);
    border-color: var(--color-error);
    color: #fff;
}

@media (max-width: 520px) {
    .modal__cuerpo,
    .modal__encabezado,
    .modal__pie {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .modal__lista {
        grid-template-columns: minmax(0, 1fr);
    }

    .modal__clave {
        white-space: normal;
    }
}