/*
 * ESTILOS COMPARTIDOS DEL PANEL (unificación #50)
 * ------------------------------------------------
 * Antes esto vivía copiado y pegado (con pequeñas variaciones entre sí) dentro
 * del <style> de cada página del panel. Se centraliza aquí para que todas se
 * vean iguales y para que un cambio de look no haya que repetirlo en 15 archivos.
 *
 * Los estilos propios de cada página (chat, kanban, recibo imprimible, plantillas
 * de impresión...) se quedan en el <style> de esa página; aquí solo va lo que de
 * verdad era igual (o casi igual) en todas.
 *
 * tema-oscuro.css pisa estos mismos selectores cuando <html data-bs-theme="dark">
 * está activo — si agregas un selector nuevo aquí que también deba verse bien en
 * modo oscuro, revisa si hace falta su contraparte allá.
 */

.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: #0d6efd !important; color: #ffffff !important; border-color: #0d6efd !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: #0d6efd !important; box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15) !important; }
.form-check-input { background-color: #ffffff !important; border-color: #ced4da !important; }
.form-check-input:checked { background-color: #0d6efd !important; border-color: #0d6efd !important; }
.form-check-label { color: #343a40 !important; font-weight: 600 !important; }

.card-header-custom { background: #0d6efd; color: white; border-radius: 8px 8px 0 0; }

/* ===== TODO FLOTA: bordes duros fuera, sombras suaves dentro =====
   Las líneas de borde se veían como separaciones feas; las cambiamos por
   elevación para que las tarjetas y tablas se sientan flotando. */
.card, .table-responsive { border: none !important; }
.card { border-radius: 14px !important; box-shadow: 0 4px 16px rgba(16,24,40,.07) !important; }
.table-responsive { border-radius: 14px !important; box-shadow: 0 4px 16px rgba(16,24,40,.07) !important; overflow: hidden; }
.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 azul. */
.input-group-text { background-color: #eef2f8 !important; color: #0d6efd !important; font-weight: 600; }
.alert { border: none !important; }
.border { border-color: #eef1f5 !important; }

/* ===== SIN LÍNEAS DURAS EN NINGÚN LADO =====
   El footer y el header de AdminLTE traen un borde que se ve como una raya
   negra cruzando la pantalla. Lo cambiamos por sombra. */
.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; }

/* ===== LOGO =====
   El archivo del logo trae mucho margen blanco alrededor, así que si se limita
   por altura el texto queda diminuto. Lo recortamos con object-fit para que se
   vea grande y centrado dentro del menú. */
.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;
}

/* ===== TARJETA DE PÁGINA (encabezado estándar) =====
   Título suelto arriba del contenido: <h2 class="page-title">, con icono opcional
   dentro. Usarlo en vez de reinventar tamaño/color por página. */
.page-title { color: #343a40 !important; font-weight: 700; }
.page-title i { color: #0d6efd; }


/* ===== LA VERSIÓN EN EL PIE =====
   Iba pegada a la esquina de abajo a la derecha, justo donde viven los botones
   flotantes (el chat, 54px, y el de ponche): quedaba tapada y no se leía.
   Se le deja sitio a la derecha para que se libre de los dos.
   El número NO se escribe aquí ni en el HTML: sale de window.VERSION_SISTEMA
   (js/config.js), para cambiarlo en un solo lugar y no en las 20 pantallas. */
.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; }
}
