/* Estilos compartidos del panel. Lo propio de cada página va en su <style>.
   Si un selector nuevo debe verse en modo oscuro, revisar tema-oscuro.css. */

.nav-header { color: #495057 !important; font-weight: 800 !important; letter-spacing: 0.5px; }
body, .app-wrapper { background-color: #eef2f5 !important; color: #343a40 !important; }
.app-header { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important; border-bottom: none !important; z-index: 1040; }
.app-sidebar { box-shadow: 4px 0 15px rgba(0, 0, 0, 0.04) !important; border-right: none !important; z-index: 1050; }
.text-dark-grey { color: #343a40 !important; }
/* Los grises de Bootstrap son muy claros sobre fondo blanco: los oscurecemos para que se lean bien */
.text-secondary { color: #4a5560 !important; }
.text-muted { color: #5c666f !important; }
/* AdminLTE pinta las tarjetas oscuras por defecto: las forzamos a blanco */
.card, .card-body { color: #343a40; }

.table { --bs-table-color: #343a40; margin-bottom: 0 !important; }
.table td { border-color: #dee2e6 !important; vertical-align: middle; }
.table th { background-color: var(--innoarte-rojo) !important; color: #ffffff !important; border-color: var(--innoarte-rojo) !important; font-weight: 700; }

.form-control, .form-select { border: 1px solid #ced4da !important; border-color: #e6eaef !important; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.form-control:focus, .form-select:focus { background-color: #ffffff !important; border-color: var(--innoarte-rojo) !important; box-shadow: 0 0 0 0.25rem rgba(104, 10, 0, 0.15) !important; }
.form-check-input { background-color: #ffffff !important; border-color: #ced4da !important; }
.form-check-input:checked { background-color: var(--innoarte-rojo) !important; border-color: var(--innoarte-rojo) !important; }
.form-check-label { color: #343a40 !important; font-weight: 600 !important; }

.card-header-custom { background: var(--innoarte-rojo); color: white; border-radius: 8px 8px 0 0; }

/* Sin bordes: tarjetas y tablas con sombra. */
.card, .table-responsive { border: none !important; }
.card { border-radius: 14px !important; box-shadow: 0 4px 16px rgba(16,24,40,.07) !important; }
/* overflow-x auto, no hidden: con hidden la tabla no se puede deslizar en el celular y se ve cortada.
   Cualquier overflow distinto de visible ya recorta las esquinas redondeadas. */
.table-responsive { border-radius: 14px !important; box-shadow: 0 4px 16px rgba(16,24,40,.07) !important; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.table > :not(caption) > * > * { border-bottom-color: #f0f3f7 !important; }
.table td, .table th { border-left: none !important; border-right: none !important; border-top: none !important; }
.table thead th { border-bottom: none !important; }
.modal-content { border: none !important; box-shadow: 0 18px 48px rgba(16,24,40,.18) !important; }
.input-group .form-control, .input-group .input-group-text { border-color: #e6eaef !important; }
/* AdminLTE pinta estas etiquetas casi negras. Van claras con letra roja. */
.input-group-text { background-color: #f8eeec !important; color: var(--innoarte-rojo) !important; font-weight: 600; }
.alert { border: none !important; }
.border { border-color: #eef1f5 !important; }

/* Sombra en lugar del borde de AdminLTE en el pie y la cabecera. */
.app-footer {
    border-top: none !important;
    box-shadow: 0 -4px 14px rgba(16,24,40,.06) !important;
    background-color: #ffffff !important;
    z-index: 1040;
}
.app-header { border-bottom: none !important; }
.app-sidebar { border-right: none !important; }
hr { border-color: #eef1f5 !important; opacity: 1 !important; }
.border-top, .border-bottom, .border-start, .border-end { border-color: #eef1f5 !important; }
.card-header, .card-footer { border-color: #f0f3f7 !important; }
.modal-header, .modal-footer { border-color: #f0f3f7 !important; }
.nav-tabs { border-bottom-color: #e6eaef !important; }

/* El logo trae mucho margen: se recorta con object-fit. */
.sidebar-brand { padding-top: 14px !important; padding-bottom: 10px !important; }
.sidebar-brand img {
    width: 210px;
    height: 58px;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0 auto;
}

/* Título estándar de página: <h2 class="page-title">. */
.page-title { color: #343a40 !important; font-weight: 700; }
.page-title i { color: var(--innoarte-rojo); }


/* Espacio a la derecha para que los botones flotantes no tapen la versión. */
.app-footer .version-sistema {
    margin-right: 90px;
    color: #6c757d;
}
@media (max-width: 575.98px) {
    /* En móvil el pie ya la esconde (d-none d-sm-inline), pero por si acaso */
    .app-footer .version-sistema { margin-right: 0; }
}

/* La barra lateral se oculta hasta que permisos.js la filtra (mostrarLaBarra en notificaciones.js).
   visibility y no display, para no mover la página. config.js la muestra igual si algo falla. */
/* #navigation.sidebar-menu: adminlte.js pone id="navigation" también en la barra superior. */
#navigation.sidebar-menu:not(.menu-listo) { visibility: hidden; }

/* El botón de ponche se muestra solo cuando el servidor confirma que el usuario ficha. */
#ponchePunto:not(.ponche-listo) { display: none; }

/* Sin sesión no se muestra nada. config.js añade html.sesion-lista si hay usuario guardado.
   Si una página sale en blanco, config.js no llegó a ejecutarse. */
html:not(.sesion-lista) body { visibility: hidden; }

/* En móvil 100vh no descuenta la barra del navegador y el final del menú quedaba inaccesible: usar dvh. */
@supports (height: 100dvh) {
    body.sidebar-expand-lg .app-sidebar,
    body.sidebar-expand-lg.layout-fixed .app-sidebar {
        max-height: 100dvh;
    }
    body.sidebar-expand-lg .app-sidebar .sidebar-wrapper,
    body.sidebar-expand-lg.layout-fixed .app-sidebar .sidebar-wrapper {
        height: calc(100dvh - (3.5rem + 1px));
    }
}

/* Margen al final del menú. */
#navigation.sidebar-menu { padding-bottom: 1.5rem; }

/* Rojo de la marca (#680A00, el del logo) en lugar del azul de Bootstrap.
   .btn-primary trae el azul en sus propias variables y hay que redefinirlas.
   Los colores con significado (success, danger, info) no se cambian. El login tiene su propio <style>. */
:root {
    --innoarte-rojo: #680A00;          /* el del logo, contado del PNG */
    --innoarte-rojo-encima: #8B1A1A;   /* el de la factura, para el hover */
    --innoarte-rojo-hundido: #4E0800;  /* al pulsar */

    --bs-primary: var(--innoarte-rojo);
    --bs-primary-rgb: 104, 10, 0;
    --bs-primary-text-emphasis: #4E0800;
    --bs-primary-bg-subtle: #F7E6E3;
    --bs-primary-border-subtle: #E2B9B2;

    --bs-link-color: var(--innoarte-rojo);
    --bs-link-color-rgb: 104, 10, 0;
    --bs-link-hover-color: var(--innoarte-rojo-encima);
    --bs-link-hover-color-rgb: 139, 26, 26;
}

.btn-primary {
    --bs-btn-bg: var(--innoarte-rojo);
    --bs-btn-border-color: var(--innoarte-rojo);
    --bs-btn-hover-bg: var(--innoarte-rojo-encima);
    --bs-btn-hover-border-color: var(--innoarte-rojo-encima);
    --bs-btn-active-bg: var(--innoarte-rojo-hundido);
    --bs-btn-active-border-color: var(--innoarte-rojo-hundido);
    --bs-btn-disabled-bg: var(--innoarte-rojo);
    --bs-btn-disabled-border-color: var(--innoarte-rojo);
    --bs-btn-focus-shadow-rgb: 139, 26, 26;
}

.btn-outline-primary {
    --bs-btn-color: var(--innoarte-rojo);
    --bs-btn-border-color: var(--innoarte-rojo);
    --bs-btn-hover-bg: var(--innoarte-rojo);
    --bs-btn-hover-border-color: var(--innoarte-rojo);
    --bs-btn-active-bg: var(--innoarte-rojo);
    --bs-btn-active-border-color: var(--innoarte-rojo);
    --bs-btn-disabled-color: var(--innoarte-rojo);
    --bs-btn-disabled-border-color: var(--innoarte-rojo);
    --bs-btn-focus-shadow-rgb: 139, 26, 26;
}

/* Los campos ya apuntan al rojo más arriba; aquí solo el foco de la casilla. */
.form-check-input:focus {
    border-color: #C99A93;
    box-shadow: 0 0 0 0.25rem rgba(104, 10, 0, 0.25);
}

/* AdminLTE copia el azul dentro de las variables de estos componentes: redefinirlas. */
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--innoarte-rojo);
}
.list-group {
    --bs-list-group-active-bg: var(--innoarte-rojo);
    --bs-list-group-active-border-color: var(--innoarte-rojo);
}
.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--innoarte-rojo);
}
.pagination {
    --bs-pagination-color: var(--innoarte-rojo);
    --bs-pagination-hover-color: var(--innoarte-rojo-encima);
    --bs-pagination-focus-color: var(--innoarte-rojo-encima);
    --bs-pagination-active-bg: var(--innoarte-rojo);
    --bs-pagination-active-border-color: var(--innoarte-rojo);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(104, 10, 0, 0.25);
}
.progress, .progress-stacked {
    --bs-progress-bar-bg: var(--innoarte-rojo);
}
.accordion {
    --bs-accordion-active-color: var(--innoarte-rojo);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(104, 10, 0, 0.25);
}

/* Foco del botón de cerrar y del tabulador sin destello azul. */
.btn-close { --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(104, 10, 0, 0.25); }
.nav-link:focus-visible { box-shadow: 0 0 0 0.25rem rgba(104, 10, 0, 0.25); }

/* La bolita del deslizador (los pocos <input type="range"> que hay). */
.form-range::-webkit-slider-thumb { background-color: var(--innoarte-rojo); }
.form-range::-moz-range-thumb     { background-color: var(--innoarte-rojo); }

/* Celular: los encabezados con botones bajan de línea en vez de montarse,
   y se reduce el margen lateral para dar ancho a las tablas. */
@media (max-width: 575.98px) {
    .card-header-custom.d-flex { flex-wrap: wrap; gap: .5rem; }
    .card-header-custom.d-flex > div { display: flex; flex-wrap: wrap; gap: .5rem; }
    .card-header-custom.d-flex > div > .btn { margin: 0 !important; }
    .app-main > .container-fluid.px-4 { padding-left: .75rem !important; padding-right: .75rem !important; }
    .app-main .card-body.p-4 { padding: 1rem !important; }
}