/* ============================================================
   SECCIONES DE FORMULARIO
   Los 13 formularios que antes eran modales se presentan ahora con
   el MISMO idioma visual que el resto del sistema:

       section-title  +  .card  +  .card-header (titulo izq / acciones der)
                      +  .form-row (rejilla de campos)  +  acciones a la derecha

   No define comportamiento: eso es el router de app.js
   (openModal / closeModal / volver).
   ============================================================ */

/* Encabezado de vista: titulo de seccion a la izquierda, accion a la derecha.
   Es el mismo orden que usa .card-header en todas las demas secciones. */
.vista-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.vista-cabecera .section-title {
    margin: 0;
}

/* El formulario se presenta como una tarjeta del sistema, no como una caja
   de modal: se anulan las restricciones que traia (.modal-content venia con
   fondo propio, sombra, esquinas de 16px y max-width 600px). */
.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;
}

/* El encabezado del formulario se ve igual que un .card-header */
.panel-formulario .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 0.75rem 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--gray-100);
}

.panel-formulario .modal-header h3 {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ink, #111827);
}

/* La X sobra: para salir esta el boton Volver del encabezado. Dejarla
   ademas de duplicada confundia porque parecia seguir siendo un modal. */
.panel-formulario .modal-close {
    display: none !important;
}

/* Los campos dejan de estirarse de borde a borde: se reparten en columnas.
   Misma rejilla que usa el sistema (.form-row de reference-override.css). */
.panel-formulario .modal-body {
    padding: 0;
    max-width: 980px;
}

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

/* Campo solo: se le pone tope para que no ocupe los 980px completos */
.panel-formulario .form-row-corto {
    grid-template-columns: minmax(220px, 480px) !important;
}

/* Acciones: a la derecha y del ancho de su texto. Antes .btn-block las
   convertia en barras de color de lado a lado. */
.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;
}

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