/* ==========================================================================
   Tema visual: superficies limpias, esquinas amplias, líneas finas, sombras
   muy suaves, cabecera compacta y acciones de fila con un tinte del color de
   cada acción.

   Se carga el último de los estilos de la app (_EstilosApp.cshtml, antes de
   animations.css): aquí solo se decide el ASPECTO, sobre los componentes que
   ya existen (.panel, .table-app, .btn-icon, <page-header>...). No cambia
   ningún marcado; quitando este fichero se vuelve al aspecto anterior.
   ========================================================================== */

:root {
    --fondo-app: #f5f5f7;
    --texto: #1d1d1f;
    --texto-2: #6e6e73;
    --texto-3: #86868b;
    --linea: rgba(0, 0, 0, .08);
    --linea-fuerte: #d2d2d7;
    --gris-relleno: #e9e9ee;
    --gris-relleno-hover: #dedee4;

    --radius-md: .625rem;   /* 10px */
    --radius-lg: .875rem;   /* 14px */
    --radius-xl: 1.125rem;  /* 18px */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .05);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, .14);

    --bs-body-color: var(--texto);
    --bs-secondary-color: var(--texto-2);
    --bs-border-radius: var(--radius-md);
    --bs-border-radius-lg: var(--radius-lg);
}

body {
    background: var(--fondo-app);
    color: var(--texto);
}

.main-content {
    background: var(--fondo-app);
}


/* ---- Tarjetas / secciones ---- */
.panel {
    border: 1px solid var(--linea);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.panel-header-soft {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--linea);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    font-size: .95rem;
}

.panel-header-soft > span > .bi {
    color: var(--texto-2);
}

.panel-footer {
    border-top: 1px solid var(--linea);
}

/* ---- Cabecera de página: compacta, blanca, con una línea fina ---- */
.dashboard-greeting {
    background: #fff;
    box-shadow: none;
    border-bottom: 1px solid var(--linea);
    padding: 1.25rem 1.5rem;
}

.dashboard-greeting-title {
    font-size: 1.3rem;
    font-weight: 700;
}

.dashboard-greeting-sub {
    font-size: .85rem;
}

.dashboard-greeting-sub,
.dashboard-greeting-eyebrow {
    color: var(--texto-2);
}

/* ---- Botones: esquina de 8px, planos, sin rebote al pasar el ratón ---- */
.btn {
    --bs-btn-border-radius: .5rem;
    --bs-btn-font-weight: 500;
}

.btn:hover {
    transform: none;
    box-shadow: none;
}

.btn.shadow-sm,
.btn.shadow {
    box-shadow: none !important;
}

.btn-secondary {
    --bs-btn-color: var(--texto);
    --bs-btn-bg: var(--gris-relleno);
    --bs-btn-border-color: var(--gris-relleno);
    --bs-btn-hover-color: var(--texto);
    --bs-btn-hover-bg: var(--gris-relleno-hover);
    --bs-btn-hover-border-color: var(--gris-relleno-hover);
    --bs-btn-active-color: var(--texto);
    --bs-btn-active-bg: var(--gris-relleno-hover);
    --bs-btn-active-border-color: var(--gris-relleno-hover);
    --bs-btn-disabled-color: var(--texto-3);
    --bs-btn-disabled-bg: var(--gris-relleno);
    --bs-btn-disabled-border-color: var(--gris-relleno);
    opacity: 1;
}

.btn-outline-primary {
    --bs-btn-border-color: var(--linea-fuerte);
    --bs-btn-hover-color: var(--brand-700);
    --bs-btn-hover-bg: var(--brand-050);
    --bs-btn-hover-border-color: var(--brand-100);
    --bs-btn-active-color: var(--brand-700);
    --bs-btn-active-bg: var(--brand-100);
    --bs-btn-active-border-color: var(--brand-100);
    background-color: #fff;
}

.btn-light {
    --bs-btn-bg: var(--gris-relleno);
    --bs-btn-border-color: var(--gris-relleno);
    --bs-btn-hover-bg: var(--gris-relleno-hover);
    --bs-btn-hover-border-color: var(--gris-relleno-hover);
}

/* Acciones de fila (<boton-fila>, .btn-icon): fondo con un tinte suave del
   color de la acción e icono en ese color. */
.btn.btn-icon {
    --tinte: var(--texto-2);
    --bs-btn-color: var(--tinte);
    --bs-btn-bg: color-mix(in srgb, var(--tinte) 10%, white);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--tinte);
    --bs-btn-hover-bg: color-mix(in srgb, var(--tinte) 18%, white);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--tinte);
    --bs-btn-active-bg: color-mix(in srgb, var(--tinte) 26%, white);
    --bs-btn-active-border-color: transparent;
    --bs-btn-border-radius: .5rem;
    width: 32px;
    height: 32px;
    opacity: 1;
}


.btn.btn-icon.btn-secondary,
.btn.btn-icon.btn-outline-secondary { --tinte: #3a3a3c; }
.btn.btn-icon.btn-danger             { --tinte: #d70015; }
.btn.btn-icon.btn-primary,
.btn.btn-icon.btn-info               { --tinte: var(--brand-600); }
.btn.btn-icon.btn-warning            { --tinte: #b25e00; }
.btn.btn-icon.btn-success            { --tinte: #1e7f34; }

/* ---- Campos ---- */
.form-control,
.form-select {
    border-color: var(--linea-fuerte);
    border-radius: var(--radius-md);
}

.form-control.shadow-sm:not(:focus),
.form-select.shadow-sm:not(:focus) {
    box-shadow: none !important;
}

.form-label {
    font-weight: 500;
    color: var(--texto);
    font-size: .875rem;
}

/* ---- Tablas: sin rayado ni rejilla, líneas finas ---- */
.table-app {
    --bs-table-hover-bg: rgba(0, 0, 0, .025);
    --bs-table-border-color: var(--linea);
}

.table-app thead th {
    background-color: transparent;
    color: var(--texto-3);
    font-size: .7rem;
    letter-spacing: .06em;
    border-right: 0;
    border-bottom: 1px solid var(--linea);
    padding-top: .9rem;
    padding-bottom: .9rem;
}

.table-app > tbody > tr > td {
    border-color: var(--linea);
    padding-top: .8rem;
    padding-bottom: .8rem;
}

.table-app > tbody > tr:last-child > td {
    border-bottom: 0;
}

/* ---- Pestañas de las fichas ---- */
#mainPage #myTabs .nav-link {
    color: var(--texto-2);
}

#mainPage #myTabs .nav-link.active {
    font-weight: 600;
}

/* ---- Menú lateral: elemento activo con tinte suave ---- */
.sidebar-nav {
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: 1.25rem;
    box-shadow: var(--shadow-lg);
}

.nav-principal .nav-link {
    color: var(--texto);
    font-weight: 500;
}

.nav-principal .nav-link .bi {
    color: var(--texto-2);
}

.nav-principal .nav-link:hover {
    background-color: rgba(0, 0, 0, .045);
}

.nav-principal .nav-link.active,
.nav-principal .nav-link.active:hover {
    background-color: var(--brand-050) !important;
    color: var(--brand-700) !important;
    font-weight: 600;
}

.nav-principal .nav-link.active .bi {
    color: var(--brand-600);
}

#sidebar-backdrop {
    background: rgba(0, 0, 0, .18);
}

/* ---- Modales, panel lateral y diálogos ---- */
.modal-content {
    border: 0;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.modal-header {
    border-bottom: 1px solid var(--linea);
}

.modal-footer {
    border-top: 1px solid var(--linea);
}

.modal-backdrop {
    --bs-backdrop-opacity: .28;
}

.panel-lateral {
    border-left: 0;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.swal2-popup {
    border-radius: var(--radius-xl) !important;
}

/* ---- Barra flotante de guardar ---- */
.barra-guardar {
    border: 1px solid var(--linea);
    border-radius: var(--radius-xl);
    background: #fff;
    box-shadow: var(--shadow-lg);
}

/* ---- Tarjetas de indicadores: cifra en negro, el color queda en el icono
   (salvo las de alerta, que siguen en rojo) ---- */
.kpi-card .kpi-card-value,
.stat-card .stat-card-value {
    color: var(--texto);
    font-size: 1.6rem;
}

.kpi-card-danger .kpi-card-value,
.stat-card-danger .stat-card-value {
    color: #c1121f;
}

.kpi-card-label,
.stat-card-label {
    color: var(--texto-2);
}

/* ---- Detalles ---- */
.table-app td strong,
.table-app td b {
    font-weight: 600;
}

/* Campos de solo lectura: gris muy suave y sin borde, en vez del gris plano.
   Fuera los controles de filtro (rango de fechas, combos): son readonly porque
   se rellenan desde su desplegable, pero se usan como campos normales. */
.form-control[readonly]:not(.filtro-date-range-input):not(.js-combo-input),
.form-control[readonly]:not(.filtro-date-range-input):not(.js-combo-input):focus {
    background-color: var(--fondo-app);
    border-color: transparent;
    color: var(--texto-2);
    box-shadow: none !important;
}

/* Logo del menú integrado en el panel de cristal, sin recuadro propio */
.sidebar-logo.shadow-logo {
    background: transparent;
    box-shadow: none;
}

/* Celdas editables en línea (Configuración): en reposo sin borde, como texto;
   la regla general de .form-control de arriba no debe pisarlas */
.form-control.editable-input:not(:hover):not(:focus) {
    border-color: transparent;
}

/* ---- Calendario (FullCalendar): líneas finas y días sin subrayado ---- */
.fc {
    --fc-border-color: var(--linea);
    --fc-today-bg-color: var(--brand-050);
    --fc-page-bg-color: #fff;
}

.fc a,
.fc .fc-col-header-cell-cushion,
.fc .fc-daygrid-day-number {
    color: var(--texto);
    text-decoration: none;
}

.fc .fc-col-header-cell-cushion {
    font-weight: 600;
    font-size: .8rem;
    text-transform: capitalize;
}

.fc .fc-scrollgrid {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* ---- Filtros: una barra compacta en una línea (campos + botones al final) ----
   El formulario tiene la fila de campos (.filtro-toolbar) y, aparte, la de
   Buscar/Limpiar (<filtro-acciones>, .filtro-actions-row): se ponen en la misma
   línea y los botones bajan solos si no caben. Con varias filas de campos
   (Caja > Movimientos) cada fila sigue ocupando su línea. */
form.panel.panel-body:has(> .filtro-actions-row) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    padding: .75rem 1rem;
}

form.panel.panel-body > .filtro-toolbar:not(.filtro-actions-row) {
    flex: 1 1 560px;
    min-width: 0;
}

form.panel.panel-body:has(> .filtro-toolbar:not(.filtro-actions-row) ~ .filtro-toolbar:not(.filtro-actions-row)) > .filtro-toolbar:not(.filtro-actions-row) {
    flex-basis: 100%;
}

form.panel.panel-body > .filtro-actions-row {
    margin: 0 0 0 auto;
    flex: 0 0 auto;
}

/* "Limpiar filtros" como acción secundaria discreta (texto), no otro botón */
.filtro-actions .btn-secondary {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-color: var(--brand-600);
    --bs-btn-hover-bg: var(--brand-050);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-hover-color: var(--brand-700);
    width: auto;
}

/* ---- Tablas: más densas y con jerarquía ----
   Cabecera sobre gris claro; el dato principal de la fila (primera columna y
   lo que va en negrita) en negro y el resto en gris oscuro. */
.table-app thead th {
    background-color: #fafafa;
    color: var(--texto-2);
}

.table-app > tbody > tr > td {
    padding-top: .6rem;
    padding-bottom: .6rem;
    font-size: .9rem;
    color: #3a3a3c;
}

.table-app > tbody > tr > td:first-child,
.table-app td strong,
.table-app td b {
    color: var(--texto);
}

form.panel.panel-body > .filtro-toolbar .filtro-search {
    flex-basis: 300px;
}

/* ---- Totales de documentos (proformas, facturas, presupuestos...) ----
   El importe no se parte: la columna "auto" del grid encogía hasta el
   min-content y el "€" bajaba de línea con importes largos. La raya del total
   va seguida (sin hueco entre etiqueta e importe) y una línea separa los
   totales de la última línea de conceptos. */
.documento-totales {
    border-top: 1px solid var(--linea-fuerte);
    margin-top: .25rem;
    width: min(100%, 380px);
}

.documento-totales-importes {
    column-gap: 0;
}

.documento-totales-importes dd {
    white-space: nowrap;
    padding-left: 1.5rem;
}

/* ---- Fila de totales al pie de los listados (<tfoot>) ----
   El importe y el "€" van separados por un espacio normal: con la columna
   estrecha el navegador partía ahí y el "€" bajaba de línea. La raya de
   separación no salía porque table-group-divider está en el <tr> (Bootstrap
   solo la pinta en thead/tbody/tfoot) y la última fila del tbody va sin borde. */
.table > tfoot > tr > td,
.table > tfoot > tr > th {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    border-top: 2px solid var(--linea-fuerte);
    border-bottom: 0;
    padding-top: .75rem;
    padding-bottom: .75rem;
    color: var(--texto);
}

/* ---- Columna Acciones: todo centrado en vertical ----
   El clip de adjuntos (.paperclip-box) mide 45px y los botones 32px; el flex
   de la celda estiraba sus hijos (align-items:stretch) y los botones quedaban
   arriba en las filas con adjuntos. Se centran y el clip baja a 32px. */
.table-app td[data-exclude] .d-flex {
    align-items: center;
}

.table-app td[data-exclude] .d-flex > form {
    display: flex;
}

.table-app td[data-exclude] .paperclip-box {
    width: 32px;
    height: 32px;
}