/* Paneles: .panel, .panel-header-soft, .panel-footer y estado vacío. */

/* Panel de tarjeta reutilizable (filtros, tabla de resultados...) */
.panel {
    background: #fff;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* Dentro de una rejilla .g la separación la da el gap: fuera el mb-4 que
   traen los partials compartidos (_DocumentacionFormulario, _PanelHistorial...) */
.g > .panel {
    margin-bottom: 0 !important;
}

.panel-body {
    padding: 1.25rem;
}

.panel form {
    margin-bottom: 0;
}

/* Los formularios de filtro (<form class="panel panel-body">) necesitan
   su propio contexto de apilamiento: sin esto, el panel desplegable del
   rango de fechas (position:absolute, z-index:5000) queda por detrás de
   la tabla de resultados de más abajo, aunque tenga un z-index mayor,
   porque su comparación de z-index ocurre dentro del stacking context
   más cercano y no directamente contra la página entera. */
form.panel.panel-body {
    position: relative;
    z-index: 1;
}

.panel-table {
    overflow: hidden;
}

/* Cabecera de panel con tinte suave del color semántico (en vez de bg sólido) */
.panel-header-soft {
    padding: .75rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    font-weight: 600;
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: space-between;
}

.panel-header-soft-success {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
}

.panel-header-soft-danger {
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
}

/* Botones/badges a la derecha de la cabecera (<seccion-acciones> de <panel-seccion>) */
.panel-header-acciones {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

/* Cabecera plegable (<panel-seccion plegable="...">): el chevron gira al abrir
   (Bootstrap pone aria-expanded en la cabecera al desplegar/plegar) */
.panel-header-soft[data-bs-toggle="collapse"] {
    cursor: pointer;
    user-select: none;
}

.panel-header-chevron {
    transition: transform .2s ease;
}

.panel-header-soft[aria-expanded="true"] .panel-header-chevron {
    transform: rotate(180deg);
}

.panel-table .table-responsive {
    margin-bottom: 0;
}

.panel-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

/* Estado vacío reutilizable para listados sin resultados */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 3rem 1rem;
    color: var(--bs-secondary-color);
    text-align: center;
}

.empty-state i {
    font-size: 2.5rem;
    opacity: .35;
}

.empty-state p {
    margin: 0;
}

/* ---- Documentos con líneas (presupuesto, albarán, proforma...) ---- */

/* Totales pegados a la tabla de conceptos, abajo a la derecha como en una
   factura. Los importes los rellena recalcularTotales() por id. */
.documento-totales {
    display: grid;
    gap: .75rem;
    width: min(100%, 340px);
    margin-left: auto;
    padding-top: 1rem;
}

/* Formularios de alta (documentos y fichas): no pasan de 1050px, centrados,
   para que secciones, tablas y totales no se estiren en pantallas anchas */
.modal-body.card-container.g {
    max-width: 1050px;
    margin-inline: auto;
}

/* El resto de altas (cliente, proveedor, caja...): nunca más estrechas de
   500px, también dentro del panel lateral, que mide este ancho mínimo.
   Valor fijo (no min(500px, 100%)): un porcentaje no cuenta al medir el
   ancho natural del contenido. En móvil, sin mínimo. */
.modal-body.card-container.g:not(:has(.documento-totales)) {
    min-width: 500px;
}

@media (max-width: 576px) {
    .modal-body.card-container.g:not(:has(.documento-totales)) {
        min-width: 0;
    }
}

.documento-totales-importes {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .35rem 1.5rem;
    margin: 0;
}

.documento-totales-importes dt {
    font-weight: 400;
    color: var(--bs-secondary-color);
}

.documento-totales-importes dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* La última pareja es el total */
.documento-totales-importes dt:last-of-type,
.documento-totales-importes dd:last-of-type {
    padding-top: .35rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--bs-body-color);
}

/* Cabecera de Conceptos (con los botones de añadir línea) fija justo debajo
   del <page-header> mientras se hace scroll por la tabla.
   --alto-page-header lo calcula wwwroot/js/site.js. */
.panel:has(> .panel-body > #tblConceptos) > .panel-header-soft {
    position: sticky;
    top: var(--alto-page-header, 0px);
    z-index: 4;
    background: #fff;
}

/* Guardar en una tarjeta flotante: se queda pegada abajo (con aire) mientras
   se hace scroll por el formulario */
.barra-guardar {
    position: sticky;
    bottom: 1rem;
    z-index: 5;
    justify-self: center;
    width: min(100%, 420px);
    padding: .75rem;
    background: #fff;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
}

.barra-guardar > .btn {
    width: 100%;
}

/* Con cambios sin guardar (wwwroot/js/cambios-sin-guardar.js): borde de marca */
.barra-guardar {
    display: grid;
    gap: .5rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.barra-guardar.con-cambios {
    border-color: var(--brand-500);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .14), 0 0 0 .2rem var(--bs-focus-ring-color);
}


/* ---- Resumen por trimestres (Views/Shared/_ResumenTrimestral.cshtml) ----
   Una sola tarjeta: arriba los trimestres como celdas separadas por una raya
   (el activo resaltado con el color de marca) y el total del año al final;
   abajo el desglose fiscal del trimestre activo. */
.resumen-trimestral {
    overflow: hidden;
}

.resumen-trimestral-trimestres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.resumen-trimestre {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .85rem 1.25rem;
    border: 0;
    border-right: 1px solid var(--linea, var(--bs-border-color));
    border-bottom: 3px solid transparent;
    background: transparent;
    text-align: left;
    color: inherit;
    transition: background-color .15s;
}

button.resumen-trimestre:hover {
    background: var(--fondo-app, #f8f9fa);
}

.resumen-trimestre.activo {
    background: var(--brand-050);
    border-bottom-color: var(--brand-600);
}

.resumen-trimestre-etiqueta {
    font-size: .75rem;
    font-weight: 500;
    color: var(--texto-3, var(--bs-secondary-color));
    text-transform: uppercase;
    letter-spacing: .04em;
}

.resumen-trimestre-importe {
    font-size: 1.15rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.resumen-trimestre.activo .resumen-trimestre-importe {
    color: var(--brand-700);
}

.resumen-trimestre-total {
    border-right: 0;
    background: var(--fondo-app, #f8f9fa);
}

.resumen-trimestral-desglose {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem 2rem;
    margin: 0;
    padding: .7rem 1.25rem;
    border-top: 1px solid var(--linea, var(--bs-border-color));
    font-size: .875rem;
}

.resumen-trimestral-desglose dt {
    font-weight: 600;
    margin-right: auto;
}

.resumen-trimestral-desglose dd {
    margin: 0;
    color: var(--texto-2, var(--bs-secondary-color));
}

.resumen-trimestral-desglose dd strong {
    margin-left: .35rem;
    color: var(--texto, var(--bs-body-color));
    font-variant-numeric: tabular-nums;
}