/* ============================================================
   SUBSECCIONES
   El patron que Tito senalo como correcto es el de Historial: el
   contenido se intercambia DENTRO de la seccion y el menu nunca se
   oculta. Eso es lo que hace este archivo.

   No se mueve NADA del DOM existente: se ocultan los hijos directos de
   la seccion y se muestra el contenedor .subvista. Asi los selectores
   .section > .container de layout-overrides.css siguen valiendo.

   Un modal a pantalla completa NO sirve: tapa el menu y borra el
   contexto. Aqui el formulario ocupa el area de contenido, no la
   pantalla entera.
   ============================================================ */

/* La subseccion esta oculta mientras no se usa */
.section > .subvista {
    display: none;
}

/* Con la subseccion abierta, se oculta la vista principal de la seccion */
.section.subseccion-abierta > *:not(.subvista) {
    display: none !important;
}

.section.subseccion-abierta > .subvista {
    display: block;
}

/* Panel oculto dentro de la pila de subsecciones (al abrir una anidada) */
.subvista .sub-panel-oculto {
    display: none !important;
}

/* ---- El dialogo deja de ser un overlay ----
   Al entrar en la subseccion se anula su position:fixed, su velo y su
   desenfoque: pasa a fluir dentro del area de contenido. */
.subvista .modal {
    position: static !important;
    inset: auto !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    display: block !important;
    z-index: auto !important;
    overflow: visible !important;
    animation: none !important;
}

/* La caja deja de estar limitada y centrada: ocupa el ancho disponible */
.subvista .modal > .modal-content {
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: none !important;
    background: #ffffff;
    border: 1px solid var(--gray-200);
    overflow: visible !important;
}

/* El cuerpo con su scroll propio no se recorta: el scroll es el de la pagina */
.subvista .modal > .modal-content > .modal-body {
    max-height: none !important;
    overflow-y: visible !important;
    padding: 0 !important;
}

/* Un solo encabezado: el de la subseccion. Se oculta el del dialogo para
   no repetir el titulo, y la X (para salir esta el boton Volver). */
.subvista .modal > .modal-content > .modal-header,
.subvista .modal .modal-close {
    display: none !important;
}

/* Acciones del dialogo: a la derecha y del ancho de su texto */
.subvista .modal > .modal-content > .modal-footer {
    justify-content: flex-end !important;
    padding: 1rem 0 0 0;
    border-top: 1px solid var(--gray-100);
    margin-top: 1.25rem;
}

.subvista .modal .btn-block {
    width: fit-content !important;
    margin-left: auto !important;
}

/* ---- Los formularios que eran secciones propias ----
   Ahora llegan como panel dentro de la subseccion: mismo tratamiento. */
.subvista .panel-formulario > .modal-content {
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    max-height: none !important;
    background: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: none;
    padding: 1.25rem 1.5rem 1.5rem;
    overflow: visible;
}

.subvista .panel-formulario .modal-header,
.subvista .panel-formulario .modal-close {
    display: none !important;
}

.subvista .panel-formulario .modal-body {
    padding: 0;
    max-width: 980px;
}

.subvista .panel-formulario .form-row {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}

.subvista .panel-formulario .form-row-corto {
    grid-template-columns: minmax(220px, 480px) !important;
}

.subvista .panel-formulario .modal-footer {
    justify-content: flex-end !important;
    padding: 1rem 0 0 0;
    border-top: 1px solid var(--gray-100);
    margin-top: 1.25rem;
}

.subvista .panel-formulario .btn-block {
    width: fit-content !important;
    margin-left: auto !important;
}

/* ---- Visor de PDF ----
   El cuerpo NO lleva el tope de 980px de los formularios: eso dejaba el iframe
   de 980px pegado a la izquierda, con un hueco blanco a la derecha. Ahora el
   cuerpo usa todo el ancho y el visor se centra. */
.subvista #modalVisorPDF .modal-body {
    max-width: none !important;
    width: 100% !important;
    padding: 1rem !important;
    height: 78vh !important;
    overflow: auto !important;
    background: var(--gray-100);
    border-radius: var(--radius-md);
}

/* La hoja se centra: los margenes quedan iguales a los dos lados */
.subvista #pdfViewer {
    display: block;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    border: none;
    background: #ffffff;
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-sm);
}

/* La cabecera del visor: titulo a la izquierda, Imprimir a la derecha,
   y el tope de ancho del panel para que no se estire de lado a lado. */
.subvista #modalVisorPDF > .modal-content {
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 1rem 1.25rem 1.25rem;
}

/* El parque es solo un deposito: nunca se ve */
#subsecciones-parque {
    display: none !important;
}

/* ---- Piezas compartidas por las tarjetas de seccion ----
   Estaban repetidas como estilo en linea en varias tarjetas. */

/* Cuerpo de tarjeta con el espaciado del sistema */
.cuerpo-tarjeta {
    padding: var(--spacing-lg);
}

/* Resumen corto junto al titulo de una tarjeta (cuenta, total, etc.) */
.card-header .lista-resumen {
    margin: 0;
    font-size: 0.9rem;
    color: var(--gray-600);
}