/* =====================================================================
TEMA MODERNO — EOL Express (capa de renovación visual)
Estilo: Moderno suave · Acento: Azul #2563EB · Modo claro + toggle
Se carga DESPUÉS de adminlte.css y custom.css. No reemplaza nada:
solo sobreescribe estilos. Para desactivarlo, quitar su en
vistas/plantilla.php.
===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root {
--eol-primary: #2563EB;
--eol-primary-600: #1D4ED8;
--eol-primary-700: #1E40AF;
--eol-primary-50: #EFF6FF;
--eol-primary-100: #DBEAFE;
--eol-bg: #F1F5F9; /* fondo del área de contenido */
--eol-surface: #FFFFFF; /* tarjetas */
--eol-text: #1E293B;
--eol-muted: #64748B;
--eol-border: #E5E9F0;
--eol-sidebar: #0F172A; /* slate-900 */
--eol-sidebar-2: #1E293B;
--eol-radius: 14px;
--eol-radius-sm: 10px;
--eol-shadow: 0 1px 2px rgba(15,23,42,.05), 0 10px 26px -14px rgba(15,23,42,.22);
--eol-shadow-sm: 0 1px 2px rgba(15,23,42,.06);
--eol-shadow-lg: 0 8px 30px -10px rgba(37,99,235,.35);
--eol-trans: all .18s cubic-bezier(.4,0,.2,1);
}
/* ------------------------------ BASE ------------------------------ */
body, .wrapper {
font-family: 'Inter', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
letter-spacing: .1px;
}
.content-wrapper { background: var(--eol-bg); }
.content-header h1 { font-weight: 700; color: var(--eol-text); letter-spacing: -.3px; }
a { color: var(--eol-primary); }
a:hover { color: var(--eol-primary-700); }
/* ----------------------------- BOTONES ---------------------------- */
.btn {
border-radius: var(--eol-radius-sm);
font-weight: 600;
padding: .48rem 1.05rem;
border: 1px solid transparent;
transition: var(--eol-trans);
box-shadow: var(--eol-shadow-sm);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-sm { border-radius: 8px; padding: .3rem .7rem; }
.btn-lg { border-radius: 12px; }
.btn-primary {
background: var(--eol-primary);
border-color: var(--eol-primary);
box-shadow: 0 4px 14px -4px rgba(37,99,235,.5);
}
.btn-primary:hover, .btn-primary:focus {
background: var(--eol-primary-600);
border-color: var(--eol-primary-600);
box-shadow: var(--eol-shadow-lg);
}
.btn-outline-primary { color: var(--eol-primary); border-color: var(--eol-primary); }
.btn-outline-primary:hover { background: var(--eol-primary); border-color: var(--eol-primary); }
.btn-default, .btn-secondary {
background: #fff; border-color: var(--eol-border); color: var(--eol-text);
}
.btn-default:hover, .btn-secondary:hover { background: #f8fafc; border-color: #cbd5e1; }
.btn-tool { box-shadow: none; }
/* ----------------------------- TARJETAS --------------------------- */
.card {
border: none;
border-radius: var(--eol-radius);
box-shadow: var(--eol-shadow);
background: var(--eol-surface);
}
.card-header {
background: transparent;
border-bottom: 1px solid var(--eol-border);
border-radius: var(--eol-radius) var(--eol-radius) 0 0 !important;
padding: 1rem 1.25rem;
}
.card-title { font-weight: 700; letter-spacing: -.2px; }
.card-outline { border-top: none; }
/* --- Tarjetas de color: header BLANCO + título en color + línea de acento ---
(en vez del header de color fuerte original de AdminLTE) */
.card.card-primary:not(.card-outline),
.card.card-info:not(.card-outline),
.card.card-success:not(.card-outline),
.card.card-warning:not(.card-outline),
.card.card-danger:not(.card-outline),
.card.card-secondary:not(.card-outline),
.card.card-gray:not(.card-outline),
.card.card-green:not(.card-outline),
.card.card-aqua:not(.card-outline),
.card.card-teal:not(.card-outline),
.card.card-yellow:not(.card-outline) {
border-top: 3px solid var(--eol-accent, var(--eol-primary));
}
.card.card-primary:not(.card-outline) { --eol-accent: #2563EB; }
.card.card-info:not(.card-outline) { --eol-accent: #0EA5E9; }
.card.card-aqua:not(.card-outline) { --eol-accent: #0EA5E9; }
.card.card-success:not(.card-outline) { --eol-accent: #16A34A; }
.card.card-green:not(.card-outline) { --eol-accent: #16A34A; }
.card.card-teal:not(.card-outline) { --eol-accent: #0D9488; }
.card.card-warning:not(.card-outline) { --eol-accent: #D97706; }
.card.card-yellow:not(.card-outline) { --eol-accent: #D97706; }
.card.card-danger:not(.card-outline) { --eol-accent: #DC2626; }
.card.card-secondary:not(.card-outline) { --eol-accent: #64748B; }
.card.card-gray:not(.card-outline) { --eol-accent: #64748B; }
.card.card-primary:not(.card-outline) > .card-header,
.card.card-info:not(.card-outline) > .card-header,
.card.card-success:not(.card-outline) > .card-header,
.card.card-warning:not(.card-outline) > .card-header,
.card.card-danger:not(.card-outline) > .card-header,
.card.card-secondary:not(.card-outline) > .card-header,
.card.card-gray:not(.card-outline) > .card-header,
.card.card-green:not(.card-outline) > .card-header,
.card.card-aqua:not(.card-outline) > .card-header,
.card.card-teal:not(.card-outline) > .card-header,
.card.card-yellow:not(.card-outline) > .card-header {
background: var(--eol-surface) !important;
color: var(--eol-text) !important;
border-bottom: 1px solid var(--eol-border) !important;
}
.card.card-primary:not(.card-outline) > .card-header .card-title,
.card.card-info:not(.card-outline) > .card-header .card-title,
.card.card-success:not(.card-outline) > .card-header .card-title,
.card.card-warning:not(.card-outline) > .card-header .card-title,
.card.card-danger:not(.card-outline) > .card-header .card-title,
.card.card-secondary:not(.card-outline) > .card-header .card-title,
.card.card-gray:not(.card-outline) > .card-header .card-title,
.card.card-green:not(.card-outline) > .card-header .card-title,
.card.card-aqua:not(.card-outline) > .card-header .card-title,
.card.card-teal:not(.card-outline) > .card-header .card-title,
.card.card-yellow:not(.card-outline) > .card-header .card-title {
color: var(--eol-accent) !important;
font-weight: 700;
}
/* Botones de la tarjeta (colapsar/cerrar) legibles sobre header blanco */
.card.card-primary:not(.card-outline) > .card-header .btn-tool,
.card.card-info:not(.card-outline) > .card-header .btn-tool,
.card.card-success:not(.card-outline) > .card-header .btn-tool,
.card.card-warning:not(.card-outline) > .card-header .btn-tool,
.card.card-danger:not(.card-outline) > .card-header .btn-tool,
.card.card-secondary:not(.card-outline) > .card-header .btn-tool {
color: var(--eol-muted);
}
.card-primary.card-outline { box-shadow: var(--eol-shadow); }
.card-footer { background: transparent; border-top: 1px solid var(--eol-border); border-radius: 0 0 var(--eol-radius) var(--eol-radius); }
/* ---------------------- WIDGETS DASHBOARD ------------------------- */
.small-box {
border-radius: var(--eol-radius);
box-shadow: var(--eol-shadow);
overflow: hidden;
transition: var(--eol-trans);
}
.small-box:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -16px rgba(15,23,42,.35); }
.small-box .icon > i { opacity: .25; }
.info-box {
border-radius: var(--eol-radius);
box-shadow: var(--eol-shadow);
background: var(--eol-surface);
}
.info-box .info-box-icon { border-radius: var(--eol-radius); }
/* ---------------------- TARJETAS DE SALDO POR BANCO ---------------------- */
.banco-card {
display: flex; align-items: center; gap: 10px;
background: var(--eol-surface); border: 1px solid var(--eol-border);
border-radius: 12px; padding: 12px 14px; height: 100%;
box-shadow: var(--eol-shadow); transition: var(--eol-trans);
}
.banco-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -16px rgba(15,23,42,.4); }
.banco-card-ico {
width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 16px;
}
.banco-card-body { min-width: 0; flex: 1 1 auto; }
.banco-card-nombre {
font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
color: var(--eol-muted); font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.banco-card-saldo { font-size: 1.2rem; font-weight: 800; color: var(--eol-text); line-height: 1.2; }
.banco-card-saldo.neg { color: #dc2626; }
/* Foto de usuario (navbar + sidebar): recortar en vez de estirar.
Sin esto, una foto NO cuadrada se deforma ("se chotea"). */
.user-image,
.user-panel .image > img,
.navbar-nav > .user-menu .user-image {
object-fit: cover !important;
object-position: center !important;
}
/* ---------------------- FORMULARIOS / INPUTS ---------------------- */
.form-control, .custom-select {
border-radius: var(--eol-radius-sm);
border: 1px solid var(--eol-border);
color: var(--eol-text);
transition: var(--eol-trans);
}
.form-control:focus, .custom-select:focus {
border-color: var(--eol-primary);
box-shadow: 0 0 0 3px var(--eol-primary-100);
}
.input-group-text {
border-radius: var(--eol-radius-sm);
border: 1px solid var(--eol-border);
background: #f8fafc;
color: var(--eol-muted);
}
label { font-weight: 600; color: #334155; }
/* Select2 a juego */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
border-radius: var(--eol-radius-sm) !important;
border: 1px solid var(--eol-border) !important;
min-height: calc(2.25rem + 2px);
}
.select2-container--default.select2-container--focus .select2-selection {
border-color: var(--eol-primary) !important;
box-shadow: 0 0 0 3px var(--eol-primary-100);
}
.select2-dropdown { border-radius: var(--eol-radius-sm); border-color: var(--eol-border); overflow: hidden; }
.select2-results__option--highlighted { background: var(--eol-primary) !important; }
/* ------------------------------ SIDEBAR --------------------------- */
.main-sidebar, .main-sidebar.sidebar-dark-primary {
background: linear-gradient(180deg, #111C33 0%, #0F172A 100%);
box-shadow: 4px 0 24px -16px rgba(0,0,0,.6);
}
/* Marca / logo */
.brand-link {
border-bottom: 1px solid rgba(255,255,255,.07);
font-weight: 800; letter-spacing: -.3px;
padding-top: .9rem; padding-bottom: .9rem;
transition: var(--eol-trans);
}
.brand-link:hover { background: rgba(255,255,255,.03); }
.brand-link .brand-image { box-shadow: 0 0 0 2px rgba(37,99,235,.5); opacity: 1; }
.brand-link .brand-text { color: #fff; }
/* Buscador del sistema: los estilos van INLINE en menu.php (ver el comentario ahí:
el CSS puede quedar cacheado y el campo no se veía). Acá solo queda la regla del
menú colapsado, que no se puede hacer inline porque depende de una clase del body. */
.sidebar-collapse .main-sidebar:not(:hover) #eolBuscadorSistema { display: none !important; }
/* Panel de usuario */
.main-sidebar .user-panel { border-bottom: 1px solid rgba(255,255,255,.07); align-items: center; }
.main-sidebar .user-panel .image img {
width: 38px; height: 38px; object-fit: cover;
box-shadow: 0 0 0 2px rgba(37,99,235,.45);
}
.main-sidebar .user-panel .info a { color: #e2e8f0; font-weight: 600; }
.main-sidebar .user-panel .info a:hover { color: #fff; }
/* Buscador */
.form-control-sidebar {
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
color: #e2e8f0; border-radius: 8px 0 0 8px;
}
.form-control-sidebar::placeholder { color: #64748b; }
.form-control-sidebar:focus { background: rgba(255,255,255,.1); border-color: var(--eol-primary); color: #fff; box-shadow: none; }
.btn-sidebar { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: #94a3b8; border-radius: 0 8px 8px 0; }
.btn-sidebar:hover { color: #fff; }
/* Alinear el botón/ícono de búsqueda con el alto del campo (el ícono se veía
un poco más grande que el rectángulo de Search). */
.input-group[data-widget="sidebar-search"] .form-control-sidebar,
.input-group[data-widget="sidebar-search"] .btn-sidebar { height: 38px; }
.input-group[data-widget="sidebar-search"] .btn-sidebar {
display: flex; align-items: center; justify-content: center; padding: 0 .6rem;
}
.input-group[data-widget="sidebar-search"] .btn-sidebar > i { font-size: .9rem; line-height: 1; }
/* Encabezado de sección ("Menú Principal") */
.nav-sidebar .nav-header {
color: #64748b; text-transform: uppercase; font-size: .68rem;
font-weight: 800; letter-spacing: 1px; padding: .9rem 1.2rem .35rem;
}
/* Ítems */
.nav-sidebar .nav-item { margin: 1px 10px; }
.nav-sidebar .nav-link {
border-radius: 10px; color: #cbd5e1; padding: .58rem .85rem;
transition: var(--eol-trans); position: relative;
}
.nav-sidebar .nav-link .nav-icon { color: #94a3b8; transition: var(--eol-trans); }
.nav-sidebar .nav-link p { font-weight: 500; }
.nav-sidebar .nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-sidebar .nav-link:hover .nav-icon { color: #fff; }
/* Activo */
.nav-sidebar > .nav-item > .nav-link.active,
.nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
background: var(--eol-primary); color: #fff; font-weight: 600;
box-shadow: 0 6px 16px -6px rgba(37,99,235,.7);
}
.nav-sidebar > .nav-item > .nav-link.active .nav-icon,
.nav-sidebar .nav-treeview .nav-link.active .nav-icon { color: #fff; }
.nav-sidebar .menu-open > .nav-link { background: rgba(255,255,255,.05); }
/* Submenús (treeview) */
.nav-sidebar .nav-treeview { background: rgba(0,0,0,.22); border-radius: 10px; margin: 2px 6px 4px; padding: 3px; }
.nav-sidebar .nav-treeview .nav-link { padding: .42rem .7rem .42rem 1.5rem; font-size: .9rem; border-radius: 8px; }
.nav-sidebar .nav-treeview .nav-icon { font-size: .9rem; }
.nav-sidebar .nav-link > p > .right { color: #b6c2d4; font-size: 1.1rem; right: 1.5rem; }
/* IMPORTANTE (menú): en plantilla.php se DESACTIVA OverlayScrollbars antes de AdminLTE, así
el sidebar usa la barra NATIVA (estilada fina, 7px, más abajo). OverlayScrollbars, para
esconder la barra nativa de Windows, ensanchaba el contenido ~15px y empujaba los chevrons
"<" de los submenús FUERA del área visible; además AdminLTE lo re-iniciaba y quedaban dos
barras. Con la barra nativa el contenido no se ensancha y los chevrons quedan visibles. */
/* Colapsado */
.sidebar-mini.sidebar-collapse .nav-sidebar .nav-item { margin: 1px 6px; }
/* Colapsado: ocultar los ítems de los submenús abiertos (los "puntitos"
sueltos). Al pasar el mouse el sidebar se expande y se muestran normal. */
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-treeview {
display: none !important;
}
/* Scrollbar del sidebar */
.sidebar::-webkit-scrollbar { width: 7px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 999px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }
/* Sin scroll horizontal en el menú: el texto largo envuelve, no desborda.
Evita la barra de desplazamiento inferior por unos pocos píxeles de
márgenes/padding anidados (item + treeview + padding del link). */
.sidebar { overflow-x: hidden !important; }
.sidebar .os-scrollbar-horizontal { display: none !important; }
.nav-sidebar .nav-link p { white-space: normal; overflow-wrap: break-word; }
.nav-sidebar .nav-treeview .nav-link { min-width: 0; }
/* Detalle inline (fila hija) en Reporte CC Ventas: factura / devolución */
.detalle-inline-cc { padding: 10px 14px; background: #f8fafc; border-left: 3px solid var(--eol-primary); border-radius: 6px; }
.detalle-inline-titulo { font-weight: 700; color: var(--eol-primary); margin-bottom: 6px; font-size: .85rem; }
.detalle-inline-cc > table { background: #fff; border-radius: 6px; overflow: hidden; }
.detalle-inline-cc > table thead th { border-top: 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--eol-muted); }
.detalle-inline-vacio, .detalle-inline-cargando, .detalle-inline-error { padding: 10px 14px; }
.detalle-inline-error { color: #dc2626; font-weight: 600; }
.detalle-inline-cargando { color: var(--eol-muted); }
#reportCorriente tbody tr.detalle-abierto > td { background: #eef2ff; }
.dark-mode .detalle-inline-cc { background: #0f1c33; }
.dark-mode .detalle-inline-cc > table { background: transparent; }
.dark-mode #reportCorriente tbody tr.detalle-abierto > td { background: rgba(37, 99, 235, .12); }
/* Número de documento: indicar que es "hovereable" (muestra popup) */
#reportCorriente tbody td.celda-numero { cursor: help; text-decoration: underline dotted var(--eol-primary); text-underline-offset: 3px; }
/* Popup con todos los datos del documento (hover sobre el número) */
.popup-doc-cc {
position: absolute; z-index: 1080; display: none;
min-width: 300px; max-width: 460px; max-height: 60vh; overflow: auto;
background: #fff; border: 1px solid var(--eol-border);
border-radius: 10px; box-shadow: 0 18px 44px -14px rgba(15, 23, 42, .45);
padding: 12px 14px;
}
.popup-doc-head { font-weight: 800; color: var(--eol-primary); font-size: .95rem; margin-bottom: 8px; border-bottom: 1px solid var(--eol-border); padding-bottom: 6px; }
.popup-doc-datos { width: 100%; margin-bottom: 6px; }
.popup-doc-datos td { padding: 2px 4px; font-size: .82rem; }
.popup-doc-datos td:first-child { color: var(--eol-muted); text-transform: uppercase; letter-spacing: .03em; font-size: .72rem; width: 34%; white-space: nowrap; }
.popup-doc-datos td:last-child { text-align: right; font-weight: 600; }
.popup-doc-items { margin-top: 4px; }
.popup-doc-items .detalle-inline-cc { border-left: 0; padding: 0; background: transparent; }
.dark-mode .popup-doc-cc { background: #0f1c33; border-color: rgba(255,255,255,.1); color: #e2e8f0; }
/* =====================================================================
Spinner de carga unificado (mismo look que el de SweetAlert): un aro
girando. Reemplaza a los del sistema.
Se escala con font-size (em) y toma el color primario.
===================================================================== */
.eol-spinner {
display: inline-block; box-sizing: border-box;
width: 1.25em; height: 1.25em;
border: .16em solid var(--eol-primary);
border-right-color: transparent;
border-radius: 50%;
vertical-align: -0.2em;
animation: eol-spin .7s linear infinite;
}
.eol-spinner-lg { width: 2.5em; height: 2.5em; border-width: .22em; }
@keyframes eol-spin { to { transform: rotate(360deg); } }
/* Indicador "Procesando..." de DataTables: tarjeta con spinner (más visible) */
div.dataTables_processing {
background: #fff !important;
border: 1px solid var(--eol-border) !important;
border-radius: 12px !important;
box-shadow: 0 16px 40px -12px rgba(15, 23, 42, .45) !important;
color: var(--eol-text) !important;
font-weight: 700 !important;
padding: 16px 22px 16px 52px !important;
width: auto !important; min-width: 180px;
height: auto !important;
}
div.dataTables_processing > div { display: none !important; } /* oculta los dots viejos de DataTables */
div.dataTables_processing::before {
content: ''; position: absolute; left: 20px; top: 50%; margin-top: -11px;
width: 22px; height: 22px; box-sizing: border-box;
border: 3px solid var(--eol-primary); border-right-color: transparent;
border-radius: 50%; animation: eol-spin .7s linear infinite;
}
.dark-mode div.dataTables_processing { background: #0f1c33 !important; border-color: rgba(255,255,255,.1) !important; color: #e2e8f0 !important; }
/* ------------------------------ NAVBAR ---------------------------- */
.main-header.navbar {
border: none;
border-bottom: 1px solid var(--eol-border);
box-shadow: 0 1px 12px -6px rgba(15,23,42,.25);
background: rgba(255,255,255,.85);
backdrop-filter: saturate(180%) blur(8px);
}
.main-header .nav-link { font-weight: 600; color: #334155; border-radius: 8px; }
.main-header .nav-link:hover { background: var(--eol-primary-50); color: var(--eol-primary); }
/* ------------------------------ TABLAS ---------------------------- */
.table { color: var(--eol-text); }
.table thead th {
border-top: none;
border-bottom: 2px solid var(--eol-border);
text-transform: uppercase;
font-size: .74rem;
letter-spacing: .4px;
color: var(--eol-muted);
font-weight: 700;
}
.table td, .table th { border-top: 1px solid #eef2f7; vertical-align: middle; }
.table-hover tbody tr { transition: background .12s ease; }
.table-hover tbody tr:hover { background: var(--eol-primary-50); }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--eol-border); }
.table tbody td { vertical-align: middle; }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(148, 163, 184, .07); }
/* Botones de acción dentro de tablas: separados, redondeados y prolijos */
.table .btn-group { display: inline-flex; gap: 2px; flex-wrap: nowrap; vertical-align: middle; }
.table .btn-group > .btn {
border-radius: 8px !important;
box-shadow: none;
transition: var(--eol-trans);
}
.table .btn-group > .btn:has(> i:only-child) {
width: 34px; height: 34px; padding: 0 !important;
display: inline-flex; align-items: center; justify-content: center;
font-size: .85rem;
}
.table .btn-group > .btn:hover { transform: translateY(-1px); box-shadow: var(--eol-shadow-sm); }
/* DataTables controles */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
border-radius: var(--eol-radius-sm); border: 1px solid var(--eol-border); padding: .25rem .6rem;
}
.page-item.active .page-link { background: var(--eol-primary); border-color: var(--eol-primary); }
.page-link { color: var(--eol-primary); border-radius: 8px !important; margin: 0 2px; border-color: var(--eol-border); }
/* ----------------------- BADGES / ALERTAS ------------------------- */
.badge { border-radius: 999px; padding: .38em .7em; font-weight: 600; }
.alert { border-radius: var(--eol-radius-sm); border: none; box-shadow: var(--eol-shadow-sm); }
.breadcrumb { background: transparent; padding-left: 0; }
/* ----------------------- MODALES / SWAL --------------------------- */
.modal-content { border: none; border-radius: var(--eol-radius); box-shadow: 0 24px 60px -20px rgba(15,23,42,.4); overflow: hidden; }
.modal-header { border-bottom: 1px solid var(--eol-border); }
.modal-footer { border-top: 1px solid var(--eol-border); }
.swal2-popup { border-radius: var(--eol-radius) !important; }
.swal2-styled { border-radius: var(--eol-radius-sm) !important; }
.swal2-styled.swal2-confirm { background: var(--eol-primary) !important; }
.toast { border-radius: var(--eol-radius-sm) !important; }
/* ------------------------------ LOGIN ----------------------------- */
.login-page, .register-page {
background: radial-gradient(1200px 600px at 50% -10%, #1e3a8a 0%, #0f172a 55%, #0b1120 100%);
min-height: 100vh;
}
.login-box, .register-box { width: 400px; }
.login-box .card {
border-radius: 18px;
box-shadow: 0 30px 70px -25px rgba(0,0,0,.7);
overflow: hidden;
}
.login-box .card-header { background: #fff; border-bottom: none; padding-top: 1.8rem; }
.login-box .card-header h1 { font-weight: 800; letter-spacing: -.5px; color: var(--eol-text); }
.login-box .card-header h1 b { color: var(--eol-primary); }
.login-box-msg { font-weight: 600; color: var(--eol-muted); }
.login-box .card-body { padding: 1.2rem 1.8rem 2rem; }
.login-box .btn-primary { padding: .6rem; font-size: 1rem; }
/* ----------------------- SCROLLBARS finos ------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }
/* =====================================================================
MODO OSCURO — refinado a slate moderno
===================================================================== */
.dark-mode {
--eol-bg: #0B1120;
--eol-surface: #0F172A;
--eol-text: #E2E8F0;
--eol-muted: #94A3B8;
--eol-border: #1E293B;
}
.dark-mode .content-wrapper { background: var(--eol-bg); }
.dark-mode .card { background: var(--eol-surface); box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 30px -16px rgba(0,0,0,.7); }
.dark-mode .card-header,
.dark-mode .card-footer { border-color: var(--eol-border); }
.dark-mode .info-box { background: var(--eol-surface); }
.dark-mode .form-control, .dark-mode .custom-select,
.dark-mode .input-group-text { background: #111c33; border-color: var(--eol-border); color: var(--eol-text); }
.dark-mode .form-control:focus { border-color: var(--eol-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.25); }
/* Dark mode — forzar OSCURO en los elementos que quedaban BLANCOS y encandilaban:
los "chips" de ícono (input-group-text: persona/llave/nota/%/calendario) y los
inputs readonly/deshabilitados (ej. TOTAL, ARTÍCULOS). Van con !important porque los
pisaba el fondo claro de base y las reglas de readonly de Bootstrap/AdminLTE.
(El chip transparente del botón "quitar producto" queda intacto: su regla es posterior.) */
.dark-mode .input-group-text {
background: #111c33 !important; border-color: var(--eol-border) !important; color: #cbd5e1 !important;
}
.dark-mode .form-control[readonly],
.dark-mode .form-control.bg-light,
.dark-mode .form-control:disabled {
background: #111c33 !important; color: var(--eol-text) !important; border-color: var(--eol-border) !important;
}
.dark-mode label { color: #cbd5e1; }
.dark-mode .table { color: var(--eol-text); }
.dark-mode .table td, .dark-mode .table th { border-color: var(--eol-border); }
.dark-mode .table-hover tbody tr:hover { background: rgba(37,99,235,.12); }
.dark-mode .main-header.navbar { background: rgba(15,23,42,.85); border-color: var(--eol-border); }
.dark-mode .main-header .nav-link { color: #cbd5e1; }
.dark-mode .main-header .nav-link:hover { background: rgba(37,99,235,.18); color: #fff; }
.dark-mode .btn-default, .dark-mode .btn-secondary { background: #111c33; border-color: var(--eol-border); color: var(--eol-text); }
.dark-mode .modal-content { background: var(--eol-surface); color: var(--eol-text); }
.dark-mode .page-link { background: var(--eol-surface); border-color: var(--eol-border); }
/* =====================================================================
AJUSTES DE FEEDBACK
===================================================================== */
/* (1) Selector "Mostrar N registros" de DataTables: que no se deforme */
.dataTables_length select,
.dataTables_wrapper select.custom-select,
.dataTables_wrapper select.form-control {
width: auto !important;
min-width: 4.6rem;
display: inline-block !important;
height: calc(1.9rem + 2px);
padding: .25rem 1.8rem .25rem .65rem;
line-height: 1.4;
background-position: right .55rem center;
vertical-align: middle;
}
.dataTables_length label { display: inline-flex; align-items: center; gap: .4rem; }
/* (2) Números de los widgets del dashboard: más chicos para no pisar el ícono */
.small-box .inner h3,
.small-box[class*="bg-pastel-"] .inner h3,
#dashboard-small-boxes-card .small-box .inner h3 {
font-size: 1.55rem !important;
font-weight: 800;
word-break: break-word;
padding-right: 54px; /* deja libre la zona del ícono */
line-height: 1.15;
}
.small-box .inner p { padding-right: 54px; }
.small-box .icon > i,
.small-box[class*="bg-pastel-"] .icon > i { font-size: 52px !important; top: 14px; }
/* (3) Lista "Nuevos Productos": sacar la negrita */
.products-list .product-info b,
.product-list-in-box b { font-weight: 500; }
/* (4) Botones "Agregar ..." de cada módulo: con color y sombra */
.btn-default[data-target^="#modalAgregar"],
.btn-sm.btn-default[data-target^="#modalAgregar"] {
-webkit-appearance: none; appearance: none;
background: var(--eol-primary);
border-color: var(--eol-primary);
color: #fff;
box-shadow: 0 4px 14px -4px rgba(37,99,235,.55);
}
.btn-default[data-target^="#modalAgregar"]:hover,
.btn-sm.btn-default[data-target^="#modalAgregar"]:hover,
.btn-default[data-target^="#modalAgregar"]:focus {
background: var(--eol-primary-600);
border-color: var(--eol-primary-600);
color: #fff;
box-shadow: var(--eol-shadow-lg);
transform: translateY(-1px);
}
.btn-default[data-target^="#modalAgregar"] i { margin-right: .25rem; }
/* Botones "Agregar ..." que son links (Agregar Reserva, Transito, Compra, etc.) */
a[href^="crear-"] > .btn-default,
a[href^="crear-"] > .btn-sm.btn-default {
-webkit-appearance: none; appearance: none;
background: var(--eol-primary);
border: 1px solid var(--eol-primary);
color: #fff;
border-radius: var(--eol-radius-sm);
padding: .48rem 1.05rem;
font-weight: 600;
box-shadow: 0 4px 14px -4px rgba(37,99,235,.55);
transition: var(--eol-trans);
}
a[href^="crear-"] > .btn-default:hover,
a[href^="crear-"] > .btn-default:focus {
background: var(--eol-primary-600);
border-color: var(--eol-primary-600);
color: #fff;
box-shadow: var(--eol-shadow-lg);
transform: translateY(-1px);
}
/* "Agregar Reserva/Transito" que navegan (no abren modal): azul, mismo tamaño
que los btn-sm vecinos como "Recepcionar todos". */
.btn-agregar-nav {
background: var(--eol-primary);
border: 1px solid var(--eol-primary);
color: #fff;
font-weight: 600;
box-shadow: 0 4px 14px -4px rgba(37, 99, 235, .55);
transition: var(--eol-trans);
}
.btn-agregar-nav:hover,
.btn-agregar-nav:focus {
background: var(--eol-primary-600);
border-color: var(--eol-primary-600);
color: #fff;
box-shadow: var(--eol-shadow-lg);
transform: translateY(-1px);
}
/* (5) Reservas a Entregar en TARJETAS (estilo foto 5) */
.reservas-cards { display: flex; flex-direction: column; gap: 14px; }
.reservas-empty { padding: 26px; text-align: center; color: var(--eol-muted); font-weight: 600; }
.rsv-card {
border: 1px solid var(--eol-border);
border-left: 4px solid var(--eol-warning, #F59E0B);
border-radius: var(--eol-radius);
background: #FEFCE8; /* amarillo muy suave = pendiente */
box-shadow: var(--eol-shadow-sm);
padding: 14px 16px;
transition: var(--eol-trans);
}
.rsv-card:hover { box-shadow: var(--eol-shadow); transform: translateY(-1px); }
.rsv-card.is-prep { background: #F0FDF4; border-left-color: #16A34A; }
/* Botón PDF: el rojo de Acrobat pero en pastel, como el resto de la paleta
(fondo suave + texto oscuro del mismo tono, igual criterio que .btn-xs de las
tablas). El rojo pleno de Adobe quedaba chillón al lado de los demás. */
.btn-pdf, .btn-pdf:focus {
background-color: #FEE4E2; border-color: #FBC5C0; color: #B1130A; font-weight: 600;
}
.btn-pdf:hover { background-color: #FBC5C0; border-color: #F7A69E; color: #8C0F08; }
.btn-pdf:focus { box-shadow: 0 0 0 .2rem rgba(250, 15, 0, .18); }
body.dark-mode .btn-pdf, body.dark-mode .btn-pdf:focus {
background-color: #3b1a17; border-color: #6b2b25; color: #FCA5A5;
}
/* TRÁNSITOS: celeste, para distinguirlos de un vistazo de las reservas (amarillo).
El verde de "preparado" sigue ganando, así se ve igual en los dos tipos. */
.rsv-card.es-transito { background: #EFF6FF; border-left-color: #2563EB; }
.rsv-card.es-transito.is-prep { background: #F0FDF4; border-left-color: #16A34A; }
.rsv-tag-transito {
display: inline-block; background: #2563EB; color: #fff;
font-size: .62rem; font-weight: 800; letter-spacing: .06em;
padding: 2px 7px; border-radius: 999px; vertical-align: middle; margin-bottom: 3px;
}
/* División entre las reservas y los tránsitos cuando se ven "Todos" */
.rsv-separador {
display: flex; align-items: center; gap: 10px;
margin: 6px 2px 2px; color: #2563EB;
font-size: .72rem; font-weight: 800; letter-spacing: .08em;
}
.rsv-separador::before, .rsv-separador::after {
content: ""; flex: 1; height: 2px; background: #BFDBFE; border-radius: 2px;
}
.dark-mode .rsv-card.es-transito { background: #16233a; border-left-color: #3B82F6; }
.dark-mode .rsv-separador::before, .dark-mode .rsv-separador::after { background: #1e3a5f; }
.rsv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.rsv-cliente { font-size: 1.05rem; font-weight: 700; color: var(--eol-text); }
.rsv-cli-nota { font-size: .82rem; font-weight: 600; color: #B45309; }
.dark-mode .rsv-cli-nota { color: #FCD34D; }
/* =====================================================================
EDITAR / CREAR RESERVA — divisor arrastrable, botones y X
===================================================================== */
@media (min-width: 768px) {
/* Divisor: arrastrable, barra punteada, sin flechas */
.reserva-productos-layout .resize-divider { cursor: col-resize; }
.reserva-productos-layout .resize-divider .divider-indicator { display: none !important; }
.reserva-productos-layout .resize-divider::before {
width: 4px !important;
border-radius: 2px !important;
background: #cbd5e1 !important;
background-image: none !important;
}
.reserva-productos-layout .resize-divider:hover::before,
.reserva-productos-layout .resize-divider.is-dragging::before {
background: var(--eol-primary) !important;
background-image: none !important;
}
/* Manija central para agarrar */
.reserva-productos-layout .resize-divider::after {
content: "⋮";
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 14px; height: 46px; border-radius: 7px;
background: #fff; border: 1px solid #cbd5e1; color: #94a3b8;
display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 700; line-height: 1; z-index: 5;
box-shadow: var(--eol-shadow-sm);
}
.reserva-productos-layout .resize-divider:hover::after,
.reserva-productos-layout .resize-divider.is-dragging::after {
border-color: var(--eol-primary); color: var(--eol-primary);
}
/* Botones IMEI/SERIAL e Item Libre: que no se agranden de más */
#editarImeiPP, #btnAgregarItemLibre { max-width: 175px; font-size: .8rem; white-space: nowrap; }
/* Campos de precio: que no se agranden de más */
.nuevoPrecioUProducto { max-width: 120px; }
.nuevoPrecioTProducto { max-width: 150px; }
/* Tabla de Productos (panel derecho): fuente más chica para que entre bien */
.reserva-productos-layout .productos-pane .table,
.reserva-productos-layout .productos-pane .dataTables_wrapper { font-size: .8rem; }
.reserva-productos-layout .productos-pane .table th,
.reserva-productos-layout .productos-pane .table td { padding: .4rem .5rem; }
.reserva-productos-layout .productos-pane .btn { font-size: .76rem; padding: .25rem .55rem; }
}
/* Botón X de quitar producto — más prolijo */
/* Encabezado de modal: indicar que se puede arrastrar */
.modal-header { cursor: move; }
.modal-header .close { cursor: pointer; }
/* Lista de IMEI/SERIAL con números de línea */
.imei-editor {
display: flex; align-items: stretch;
border: 1px solid var(--eol-border); border-radius: var(--eol-radius-sm); overflow: hidden;
}
.imei-editor .imei-gutter {
flex: 0 0 auto; min-width: 38px; text-align: right;
padding: .375rem .5rem; background: #f1f5f9; color: #94a3b8;
font-family: 'Consolas', 'SF Mono', 'Menlo', 'Roboto Mono', 'Courier New', monospace;
font-size: 1rem; line-height: 1.5; user-select: none; overflow: hidden;
border-right: 1px solid var(--eol-border); white-space: nowrap;
}
.imei-editor .imei-gutter > div { line-height: 1.5; }
/* Monoespaciada: los IMEI/seriales quedan del mismo ancho y alineados (como el otro sistema). */
.imei-editor textarea {
flex: 1; border: none !important; border-radius: 0 !important;
font-family: 'Consolas', 'SF Mono', 'Menlo', 'Roboto Mono', 'Courier New', monospace;
font-size: 1rem; line-height: 1.5; box-shadow: none !important;
}
.dark-mode .imei-editor { border-color: var(--eol-border); }
.dark-mode .imei-editor .imei-gutter { background: #111c33; color: #64748b; border-color: var(--eol-border); }
.quitarProducto {
font-size: .8rem !important;
width: 26px; height: 26px; min-width: 26px; padding: 0 !important;
border-radius: 8px !important;
display: inline-flex !important; align-items: center; justify-content: center;
background: #FEE2E2 !important; color: #DC2626 !important; border: 1px solid #FECACA !important;
box-shadow: none !important; transition: all .15s ease;
}
.quitarProducto:hover { background: #DC2626 !important; color: #fff !important; border-color: #DC2626 !important; transform: none; }
.input-group-text:has(.quitarProducto) { background: transparent !important; border: none !important; padding: 0 6px 0 0 !important; }
.rsv-meta { font-size: .8rem; color: var(--eol-muted); margin-top: 2px; }
.rsv-head-right { text-align: right; white-space: nowrap; }
.rsv-total { font-size: 1.15rem; font-weight: 800; color: var(--eol-primary); }
.rsv-badge {
display: inline-block; margin-top: 4px;
font-size: .72rem; font-weight: 700; padding: .2em .7em; border-radius: 999px;
}
.rsv-badge-pend { background: #FEF3C7; color: #B45309; }
.rsv-badge-ok { background: #DCFCE7; color: #15803D; }
.rsv-items {
margin: 12px 0; padding: 10px 0; border-top: 1px dashed var(--eol-border);
border-bottom: 1px dashed var(--eol-border);
}
.rsv-item { padding: 3px 0; font-size: .9rem; color: var(--eol-text); line-height: 1.5; }
.rsv-item strong { color: var(--eol-text); font-weight: 700; }
/* Producto buscado: línea resaltada para distinguirla del resto de los artículos.
Fondo azul suave (contrasta tanto en tarjeta pendiente crema como en preparada verde);
el término coincidente va marcado en ámbar. */
.rsv-item-match {
background: #E7F0FF;
border-left: 4px solid #2563EB;
border-radius: 6px;
padding: 5px 10px;
margin: 3px 0;
font-weight: 600;
box-shadow: 0 1px 3px rgba(37, 99, 235, .12);
}
.rsv-mark {
background: #FFDF7E;
color: #5B4300;
padding: 0 3px;
border-radius: 3px;
font-weight: 700;
}
.dark-mode .rsv-item-match { background: rgba(37, 99, 235, .18); border-left-color: #3B82F6; box-shadow: none; }
.dark-mode .rsv-mark { background: rgba(250, 204, 21, .40); color: #FDE68A; }
/* Toggle de detalle (colapsable) */
.rsv-toggle {
display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
margin: 6px 0 2px; font-size: .82rem; font-weight: 700; color: var(--eol-primary);
user-select: none; padding: 3px 0;
}
.rsv-toggle:hover { color: var(--eol-primary-700); }
.rsv-chev { transition: transform .15s ease; font-size: .75rem; }
.rsv-card.is-open .rsv-chev { transform: rotate(90deg); }
.rsv-toggle-ocultar { display: none; }
.rsv-card.is-open .rsv-toggle-ver { display: none; }
.rsv-card.is-open .rsv-toggle-ocultar { display: inline; }
.rsv-items { display: none; }
.rsv-card.is-open .rsv-items { display: block; }
/* Nota — resaltada */
.rsv-nota {
margin: 10px 0 2px; padding: 10px 14px; font-size: .92rem; font-weight: 600;
background: #FEF3C7; border: 1px solid #FCD34D; border-left: 5px solid #F59E0B;
border-radius: 8px; color: #92400E; box-shadow: 0 1px 2px rgba(245,158,11,.18);
}
.rsv-nota .fa-sticky-note { margin-right: 6px; color: #F59E0B; }
.rsv-nota-vend { font-weight: 800; }
.rsv-nota-sep { opacity: .6; }
.rsv-nota-txt { font-size: .82em; font-weight: 500; }
.rsv-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* El botón dice "Preparado" en los dos estados (relojito gris = a la espera, tilde
verde = ya preparado), así que al togglearlo NO cambia de ancho ni corre a los de
al lado. Por eso ya no necesita el ancho fijo de 172px que tenía antes, cuando el
texto pasaba de "Marcar preparado" a "Preparado". */
/* gap: el botón es inline-flex y en flex se DESCARTAN los espacios en blanco entre
elementos, así que el ícono quedaba pegado al texto aunque el HTML tenga un espacio. */
.rsv-actions .btnPrepReserva { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
/* Sin preparar, el botón es btn-outline-secondary: sobre el fondo crema de la tarjeta
quedaba sin fondo NI borde visible, o sea no parecía un botón al lado de los otros
(que son sólidos). Se le da caja blanca con borde gris, igual que el botón "Ver". */
.rsv-actions .btnPrepReserva.btn-outline-secondary {
background: #fff;
border: 1px solid #cbd5e1;
color: #475569;
}
.rsv-actions .btnPrepReserva.btn-outline-secondary:hover {
background: #f1f5f9;
border-color: #94a3b8;
color: #1e293b;
}
body.dark-mode .rsv-actions .btnPrepReserva.btn-outline-secondary {
background: #1f2a3c; border-color: #475569; color: #cbd5e1;
}
/* Buscadores */
.rsv-search { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.rsv-search-field {
flex: 1 1 200px; display: flex; align-items: center; gap: 8px;
background: #fff; border: 2px solid var(--eol-primary); border-radius: 10px;
padding: .35rem .7rem; transition: var(--eol-trans);
box-shadow: 0 0 0 3px var(--eol-primary-100);
}
.rsv-search-field:focus-within { border-color: var(--eol-primary-700); box-shadow: 0 0 0 4px var(--eol-primary-100); }
.rsv-search-field i { color: var(--eol-muted); font-size: .9rem; }
.rsv-search-field input { border: none; outline: none; background: transparent; flex: 1; min-width: 0; color: var(--eol-text); font-size: .9rem; }
.rsv-search-field select { border: none; outline: none; background: transparent; flex: 1; min-width: 0; color: var(--eol-text); font-size: .9rem; cursor: pointer; }
.dark-mode .rsv-search-field select { color: var(--eol-text); }
.rsv-search-clear {
display: none; border: none; background: transparent; color: var(--eol-muted);
cursor: pointer; font-size: 1.25rem; line-height: 1; padding: 0 2px; flex: 0 0 auto;
}
.rsv-search-field.has-text .rsv-search-clear { display: inline-block; }
.rsv-search-clear:hover { color: var(--eol-primary); }
.dark-mode .rsv-search-field { background: #111c33; }
.dark-mode .rsv-search-field input { color: var(--eol-text); }
/* Toolbar: Mostrar N + orden */
.rsv-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 6px; }
.rsv-mostrar { font-size: .85rem; color: var(--eol-muted); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.rsv-pagesize {
border: 1px solid var(--eol-border); border-radius: 8px; padding: .2rem 1.6rem .2rem .55rem;
font-weight: 600; color: var(--eol-text); background-color: #fff;
}
.rsv-pagesize:focus { border-color: var(--eol-primary); box-shadow: 0 0 0 3px var(--eol-primary-100); outline: none; }
.dark-mode .rsv-pagesize { background-color: #111c33; color: var(--eol-text); }
/* Paginación */
.rsv-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.rsv-pag-info { font-size: .82rem; color: var(--eol-muted); }
.rsv-pag-btns { display: flex; flex-wrap: wrap; gap: 4px; }
.rsv-page-btn {
border: 1px solid var(--eol-border); background: #fff; color: #334155;
border-radius: 8px; padding: .25rem .7rem; font-size: .82rem; font-weight: 600;
cursor: pointer; transition: var(--eol-trans); min-width: 34px;
}
.rsv-page-btn:hover:not(:disabled) { border-color: var(--eol-primary); color: var(--eol-primary); }
.rsv-page-btn.is-active { background: var(--eol-primary); border-color: var(--eol-primary); color: #fff; }
.rsv-page-btn:disabled { opacity: .45; cursor: default; }
.dark-mode .rsv-page-btn { background: #111c33; color: #cbd5e1; }
/* Lista de tarjetas y barra de orden */
.rsv-list { display: flex; flex-direction: column; gap: 14px; }
.rsv-sortbar {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
padding: 4px 2px 6px; border-bottom: 1px solid var(--eol-border); margin-bottom: 2px;
}
.rsv-sortbar-label { font-weight: 700; color: var(--eol-muted); font-size: .85rem; }
.rsv-sort-btn {
border: 1px solid var(--eol-border); background: #fff; color: #334155;
border-radius: 999px; padding: .25rem .8rem; font-size: .82rem; font-weight: 600;
cursor: pointer; transition: var(--eol-trans); display: inline-flex; align-items: center; gap: 4px;
}
.rsv-sort-btn:hover { border-color: var(--eol-primary); color: var(--eol-primary); }
.rsv-sort-btn.is-active { background: var(--eol-primary); border-color: var(--eol-primary); color: #fff; }
.rsv-sort-num {
background: rgba(255,255,255,.35); color: #fff; border-radius: 999px;
font-size: .68rem; padding: 0 5px; margin-left: 2px;
}
.rsv-sortbar-hint { font-size: .74rem; color: var(--eol-muted); margin-left: auto; }
.dark-mode .rsv-sort-btn { background: #111c33; color: #cbd5e1; }
.dark-mode .rsv-item-cant { background: #1e293b; color: #cbd5e1; }
.dark-mode .rsv-nota { background: #2a2410; border-color: #5a4a1a; border-left-color: #F59E0B; color: #fcd34d; }
/* (7) Carga diferida de widgets del dashboard */
.lazy-widget { min-height: 120px; }
.lazy-spin {
display: flex; align-items: center; justify-content: center; gap: 8px;
min-height: 200px; color: var(--eol-muted); font-weight: 600;
background: var(--eol-surface); border-radius: var(--eol-radius);
box-shadow: var(--eol-shadow-sm); border: 1px dashed var(--eol-border);
}
.lazy-spin .fa-spinner { font-size: 1.4rem; color: var(--eol-primary); }
.lazy-error {
min-height: 120px; display: flex; align-items: center; justify-content: center;
color: var(--eol-muted); background: var(--eol-surface);
border-radius: var(--eol-radius); border: 1px dashed var(--eol-border);
}
/* tarjetas en modo oscuro */
.dark-mode .rsv-card { background: #1c1f14; border-color: var(--eol-border); }
.dark-mode .rsv-card.is-prep { background: #102016; }
.dark-mode .rsv-item-desc, .dark-mode .rsv-cliente { color: var(--eol-text); }
/* (6) Encabezados de tarjeta: que el título largo NO se superponga con los
botones (− ×). Header en flexbox: título a la izq, herramientas a la der. */
.card > .card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: nowrap;
}
.card > .card-header > .card-title {
flex: 1 1 auto;
min-width: 0;
float: none;
line-height: 1.3;
}
.card > .card-header > .card-tools {
flex: 0 0 auto;
float: none !important;
margin: 0 0 0 auto;
white-space: nowrap;
}
/* Login y encabezados centrados: mantener centrado */
.login-box .card-header,
.register-box .card-header,
.card > .card-header.text-center {
display: block;
text-align: center;
}
/* En celular: apilar el título arriba y las herramientas (rango de fechas,
colapsar, etc.) abajo. Evita que el botón de fecha aplaste el título y lo
deje en vertical (una letra por renglón). */
@media (max-width: 575.98px) {
.card > .card-header { flex-wrap: wrap; }
.card > .card-header > .card-title { flex: 1 1 100%; min-width: 100%; }
.card > .card-header > .card-tools { margin: 8px 0 0 0; }
.card > .card-header > .card-tools .btn.daterange,
.card > .card-header > .card-tools #daterange-btn { white-space: normal; }
/* Números de las tarjetas (small-box): achicar en celular para que los
montos grandes no se corten (el font 2rem fijo se desbordaba). */
.small-box .inner h3 { font-size: 1.4rem !important; }
}
/* =====================================================================
TABLAS MODERNAS — capa global (DataTables / .table)
Sin bordes de celda, encabezado tipo "label", hover suave, controles
redondeados y numeración del orden acumulativo (multi-sort).
===================================================================== */
table.dataTable,
.table {
border-collapse: separate !important;
border-spacing: 0;
color: var(--eol-text);
font-size: .9rem;
}
/* Borderless: matar todos los bordes de celda (incluye table-bordered) */
.table, .table td, .table th,
.table-bordered, .table-bordered td, .table-bordered th,
table.dataTable, table.dataTable td, table.dataTable th {
border: 0 !important;
}
/* Encabezado tipo "label" */
.table thead th,
table.dataTable thead th {
background: transparent !important;
border-bottom: 2px solid var(--eol-border) !important;
color: var(--eol-muted);
font-weight: 700;
font-size: .72rem;
letter-spacing: .6px;
text-transform: uppercase;
padding: .7rem 1rem;
white-space: nowrap;
vertical-align: middle;
}
/* Celdas: más aire, separador ultrasutil (no "divisiones" marcadas) */
.table tbody td,
table.dataTable tbody td {
padding: .72rem 1rem;
vertical-align: middle;
border-bottom: 1px solid #f2f5fa !important;
}
.table tbody tr:last-child td,
table.dataTable tbody tr:last-child td { border-bottom: 0 !important; }
/* Sin zebra: usamos hover */
.table-striped tbody tr,
.table-striped tbody tr:nth-of-type(odd) { background: transparent; }
.table tbody tr,
table.dataTable tbody tr { transition: background .12s ease; }
.table tbody tr:hover,
table.dataTable tbody tr:hover { background: var(--eol-primary-50); }
/* Miniaturas */
.table .imgTabla,
.table .img-thumbnail { border-radius: 8px; border: 1px solid var(--eol-border); }
/* Número de orden del multi-sort (shift+click) */
.orden-num {
display: inline-flex; align-items: center; justify-content: center;
min-width: 16px; height: 16px; margin-left: 7px; padding: 0 4px;
font-size: .62rem; font-weight: 800; line-height: 1;
color: #fff; background: var(--eol-primary);
border-radius: 999px; vertical-align: middle;
box-shadow: 0 2px 6px -2px rgba(37,99,235,.6);
}
/* Estado como "pill" suave (Activo / Inactivo) */
.table .btn-xs {
border-radius: 999px !important;
font-weight: 700;
font-size: .72rem;
padding: .2rem .75rem !important;
box-shadow: none !important;
border: 0 !important;
}
.table .btn-xs.btn-success { background: #dcfce7 !important; color: #166534 !important; }
.table .btn-xs.btn-danger { background: #fee2e2 !important; color: #991b1b !important; }
/* ---- Badges por tipo de documento (columna Documento / Comprobante) ----
OJO: la GEOMETRÍA (ancho fijo, padding, radio, tipografía) NO va acá: es la misma
que la de .eol-cuenta-badge y está definida UNA sola vez en vistas/plantilla.php.
Antes estaba duplicada y las dos familias de pastillas quedaron de distinto ancho.
Acá van SOLO los colores de cada tipo. */
.doc-factura { background: #dbeafe; color: #1e40af; }
.doc-recibo { background: #dcfce7; color: #166534; }
.doc-credito { background: #cffafe; color: #155e75; }
.doc-debito { background: #fef3c7; color: #b45309; }
.doc-devolucion { background: #fee2e2; color: #991b1b; }
.doc-compra { background: #ede9fe; color: #5b21b6; }
.doc-pago { background: #d1fae5; color: #047857; }
.doc-reintegro { background: #ffe4e6; color: #9f1239; }
.doc-otro { background: #f1f5f9; color: #475569; }
.doc-reserva { background: #ffedd5; color: #9a3412; }
.doc-transito { background: #e0f2fe; color: #075985; }
.dark-mode .doc-factura { background: #1e3a8a; color: #bfdbfe; }
.dark-mode .doc-recibo { background: #14532d; color: #bbf7d0; }
.dark-mode .doc-credito { background: #164e63; color: #a5f3fc; }
.dark-mode .doc-debito { background: #78350f; color: #fde68a; }
.dark-mode .doc-devolucion { background: #7f1d1d; color: #fecaca; }
.dark-mode .doc-compra { background: #4c1d95; color: #ddd6fe; }
.dark-mode .doc-pago { background: #064e3b; color: #a7f3d0; }
.dark-mode .doc-reintegro { background: #881337; color: #fecdd3; }
.dark-mode .doc-otro { background: #1e293b; color: #94a3b8; }
.dark-mode .doc-reserva { background: #7c2d12; color: #fed7aa; }
.dark-mode .doc-transito { background: #0c4a6e; color: #bae6fd; }
/* ---- Botón de rango de fechas alineado con los btn-tool del header de la card ---- */
.card-tools:has(#daterange-btn) { display: inline-flex; align-items: center; gap: .4rem; }
#daterange-btn.daterange {
padding: .45rem 1rem;
font-size: .9rem;
font-weight: 600;
line-height: 1.2;
border-radius: 8px;
white-space: nowrap;
box-shadow: none;
}
/* Quitar el botón "−" (colapsar) en las pantallas que tienen el calendario */
.card-tools:has(#daterange-btn) [data-card-widget="collapse"] { display: none; }
/* ---- Filtro Reserva/Todos (Administrar Reservas), destacado ---- */
.filtro-reservas-box label { font-weight: 700; color: #2563EB; }
.filtro-reservas-select {
border: 2px solid #2563EB !important;
background: #eff6ff;
color: #1e40af;
font-weight: 700;
border-radius: 999px;
padding: .2rem 1.6rem .2rem .85rem;
box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
cursor: pointer;
}
.filtro-reservas-select:focus { box-shadow: 0 0 0 3px rgba(37, 99, 235, .28); }
.dark-mode .filtro-reservas-box label { color: #93c5fd; }
.dark-mode .filtro-reservas-select { background: #1e293b; color: #bfdbfe; border-color: #3b82f6 !important; }
/* Botones de acción de la grilla: íconos cuadrados, espaciados */
.table .btn-group { box-shadow: none; }
.table .btn-group > .btn {
border-radius: 9px !important;
margin: 0 2px;
box-shadow: none;
}
/* Sólo los botones de SÓLO ÍCONO se hacen cuadrados; los de texto (ej. "Agregar") conservan su ancho */
.table .btn-group > .btn:has(> i:only-child) {
width: 34px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
padding: 0;
}
/* Botones de texto en la grilla (Agregar, etc.): prolijos y legibles */
.table .btn-group > .btn:not(:has(> i:only-child)) {
padding: .28rem .8rem;
font-size: .8rem;
font-weight: 600;
white-space: nowrap;
}
.table .btn-group > .btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
/* Controles DataTables: length + buscar */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
border: 1px solid var(--eol-border);
border-radius: 999px;
padding: .34rem .95rem;
background: #fff;
color: var(--eol-text);
outline: none;
transition: var(--eol-trans);
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
border-color: var(--eol-primary);
box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.dataTables_wrapper .dataTables_info { color: var(--eol-muted); font-size: .82rem; }
/* Paginación tipo "pill" */
.dataTables_wrapper .dataTables_paginate .paginate_button {
border-radius: 9px !important;
border: 1px solid transparent !important;
margin: 0 2px;
padding: .3rem .72rem !important;
color: var(--eol-text) !important;
background: transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: var(--eol-primary-50) !important;
border-color: transparent !important;
color: var(--eol-primary-700) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: var(--eol-primary) !important;
color: #fff !important;
box-shadow: 0 4px 12px -4px rgba(37,99,235,.6);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
opacity: .45; background: transparent !important; color: var(--eol-muted) !important;
}
/* Dark mode para tablas */
.dark-mode .table thead th { color: #94a3b8; border-bottom-color: rgba(148,163,184,.28) !important; }
.dark-mode .table tbody td,
.dark-mode table.dataTable tbody td { border-bottom-color: rgba(148,163,184,.12) !important; }
.dark-mode .table tbody tr:hover,
.dark-mode table.dataTable tbody tr:hover { background: rgba(37,99,235,.14); }
.dark-mode .dataTables_wrapper .dataTables_length select,
.dark-mode .dataTables_wrapper .dataTables_filter input { background: #0f1c33; border-color: var(--eol-border); color: var(--eol-text); }
.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button { color: #cbd5e1 !important; }
/* =====================================================
REPORTE DE VENTAS — Productos más vendidos (ranking)
===================================================== */
.top-prod-list { display: flex; flex-direction: column; }
.top-prod {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 4px;
border-bottom: 1px solid #f1f5fa;
}
.top-prod:last-child { border-bottom: 0; }
.top-prod-rank {
flex: 0 0 28px;
width: 28px;
height: 28px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: .8rem;
color: #fff;
background: #cbd5e1;
box-shadow: 0 1px 2px rgba(15,23,42,.12);
}
.top-prod-rank-1 { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.top-prod-rank-2 { background: linear-gradient(135deg, #94a3b8, #cbd5e1); color: #334155; }
.top-prod-rank-3 { background: linear-gradient(135deg, #b45309, #d97706); }
.top-prod-img {
width: 46px;
height: 46px;
object-fit: cover;
border-radius: 11px;
border: 1px solid var(--eol-border);
background: #fff;
flex: 0 0 46px;
}
.top-prod-info { flex: 1 1 auto; min-width: 0; }
.top-prod-name {
font-weight: 600;
font-size: .86rem;
color: var(--eol-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 6px;
}
.top-prod-bar {
height: 7px;
background: #eef2f7;
border-radius: 999px;
overflow: hidden;
}
.top-prod-bar > span {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, var(--eol-primary), #60a5fa);
transition: width .5s ease;
}
.top-prod-stats { flex: 0 0 auto; text-align: right; min-width: 66px; }
.top-prod-units { font-weight: 700; font-size: .82rem; color: var(--eol-text); }
.top-prod-pct { font-size: .72rem; color: var(--eol-muted); margin-top: 1px; }
.dark-mode .top-prod { border-bottom-color: rgba(148,163,184,.14); }
.dark-mode .top-prod-bar { background: #1e293b; }
.dark-mode .top-prod-img { background: #0f1c33; }
/* =====================================================
ESTADÍSTICAS — leyenda de Ventas por categoría
===================================================== */
.rubro-legend { display: flex; flex-direction: column; }
.rubro-item {
display: flex;
align-items: center;
gap: 9px;
padding: 7px 2px;
border-bottom: 1px solid #f1f5fa;
font-size: .85rem;
}
.rubro-item:last-child { border-bottom: 0; }
.rubro-dot { flex: 0 0 11px; width: 11px; height: 11px; border-radius: 4px; }
.rubro-name {
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--eol-text);
font-weight: 600;
}
.rubro-val { flex: 0 0 auto; color: var(--eol-text); font-variant-numeric: tabular-nums; }
.rubro-pct {
flex: 0 0 46px;
text-align: right;
color: var(--eol-muted);
font-size: .76rem;
font-weight: 600;
}
.dark-mode .rubro-item { border-bottom-color: rgba(148,163,184,.14); }
/* =====================================================
ESTADÍSTICAS — Cuentas corrientes (financiero)
===================================================== */
.fin-kpis { display: flex; flex-direction: column; gap: 12px; }
.fin-kpi {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border-radius: var(--eol-radius);
background: #f8fafc;
border: 1px solid var(--eol-border);
}
.fin-kpi-ico {
flex: 0 0 44px;
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
color: #fff;
}
.fin-kpi-cobrar .fin-kpi-ico { background: linear-gradient(135deg, #059669, #10b981); }
.fin-kpi-pagar .fin-kpi-ico { background: linear-gradient(135deg, #dc2626, #ef4444); }
.fin-pos .fin-kpi-ico { background: linear-gradient(135deg, #2563EB, #3b82f6); }
.fin-neg .fin-kpi-ico { background: linear-gradient(135deg, #b45309, #f59e0b); }
.fin-kpi-body { flex: 1 1 auto; min-width: 0; }
.fin-kpi-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--eol-muted); font-weight: 600; }
.fin-kpi-val { font-size: 1.45rem; font-weight: 800; color: var(--eol-text); line-height: 1.15; }
.fin-kpi-cobrar .fin-kpi-val { color: #059669; }
.fin-kpi-pagar .fin-kpi-val { color: #dc2626; }
.fin-neg .fin-kpi-val { color: #b45309; }
.fin-kpi-sub { font-size: .76rem; color: var(--eol-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* avatar (inicial) y variante deuda del ranking */
.top-prod-avatar {
width: 46px;
height: 46px;
flex: 0 0 46px;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 1.05rem;
color: #fff;
background: linear-gradient(135deg, #64748b, #94a3b8);
}
.top-prod--debt .top-prod-avatar { background: linear-gradient(135deg, #d97706, #f59e0b); }
.top-prod--debt .top-prod-bar > span { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.top-prod--debt .top-prod-units { color: #b45309; }
.dark-mode .fin-kpi { background: #0f1c33; }
/* =====================================================
TARJETAS DE TOTALES (small-box) — estética moderna
===================================================== */
.small-box {
border-radius: var(--eol-radius);
box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
border: 0;
overflow: hidden;
position: relative;
}
.small-box > .inner { padding: 20px 22px; }
.small-box .inner h3 {
font-size: 2rem !important;
font-weight: 800 !important;
letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
margin: 0 0 2px !important;
line-height: 1.12 !important;
text-align: left !important;
text-shadow: none !important;
}
.small-box .inner p {
font-size: .82rem;
text-transform: uppercase;
letter-spacing: .07em;
font-weight: 600;
opacity: .92;
margin: 0;
}
.small-box .icon { top: 50%; transform: translateY(-50%); right: 16px; opacity: .16; }
.small-box .icon > i { font-size: 58px; }
.small-box:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15, 23, 42, .12); transition: var(--eol-trans); }
/* Variantes de color con degradé suave (scopeadas a small-box) */
.small-box.bg-orange { background: linear-gradient(135deg, #f59e0b, #fb923c) !important; }
.small-box.bg-info { background: linear-gradient(135deg, #0ea5e9, #38bdf8) !important; }
.small-box.bg-green { background: linear-gradient(135deg, #059669, #10b981) !important; }
.small-box.bg-red { background: linear-gradient(135deg, #dc2626, #f87171) !important; }
.small-box.bg-orange, .small-box.bg-info, .small-box.bg-green, .small-box.bg-red { color: #fff !important; }
.small-box.bg-orange .inner h3, .small-box.bg-info .inner h3,
.small-box.bg-green .inner h3, .small-box.bg-red .inner h3,
.small-box.bg-orange .inner p, .small-box.bg-info .inner p,
.small-box.bg-green .inner p, .small-box.bg-red .inner p { color: #fff !important; }
/* =====================================================
PAGINACIÓN COMPACTA (markup Bootstrap de DataTables)
Los números quedaban muy separados: se agrupan con gap chico y parejo.
===================================================== */
.dataTables_wrapper .dataTables_paginate ul.pagination {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 2px;
margin: 0;
}
.dataTables_wrapper .dataTables_paginate .page-item,
.dataTables_wrapper .dataTables_paginate .paginate_button {
margin: 0 !important;
padding: 0 !important;
}
.dataTables_wrapper .dataTables_paginate .page-item .page-link {
margin: 0 !important;
border: 1px solid transparent !important;
border-radius: 8px !important;
padding: .26rem .56rem !important;
min-width: 30px;
text-align: center;
line-height: 1.4;
color: var(--eol-text);
background: transparent;
transition: var(--eol-trans);
}
.dataTables_wrapper .dataTables_paginate .page-item .page-link:hover {
background: var(--eol-primary-50);
color: var(--eol-primary-700);
}
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
background: var(--eol-primary) !important;
border-color: var(--eol-primary) !important;
color: #fff !important;
box-shadow: 0 4px 12px -4px rgba(37, 99, 235, .6);
}
.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
opacity: .45;
background: transparent;
}
.dark-mode .dataTables_wrapper .dataTables_paginate .page-item .page-link { color: #cbd5e1; }
/* =====================================================
PATRIMONIO NETO — barras más gruesas y prolijas + iconos
===================================================== */
.pat-neto .progress {
height: 22px;
border-radius: 999px;
background: #eef2f7;
overflow: hidden;
box-shadow: none;
margin-bottom: 0;
}
.pat-neto .progress-bar {
font-weight: 700;
font-size: .76rem;
line-height: 22px;
}
.pat-neto .table td { vertical-align: middle; }
.pat-neto .col-12.mb-2 .progress { height: 26px; }
.pn-ico { width: 18px; margin-right: 9px; text-align: center; }
.text-teal { color: #0d9488 !important; }
.dark-mode .pat-neto .progress { background: #1e293b; }
/* Control de Patrimonio en modo oscuro: varios inputs quedaban con fondo blanco.
Los readonly usan la clase bg-light de Bootstrap (que trae !important y le ganaba
al estilo dark de .form-control), y algunos editables tampoco tomaban el dark.
Se fuerza el fondo oscuro en todos los inputs del panel; los readonly/bg-light van
un tono más apagado para que se distingan de los editables. */
.dark-mode .pat-neto .form-control,
.dark-mode .pat-neto .custom-select {
background: #111c33 !important;
color: var(--eol-text) !important;
border-color: var(--eol-border) !important;
}
.dark-mode .pat-neto .form-control[readonly],
.dark-mode .pat-neto .form-control.bg-light {
background: #0d1526 !important;
color: #94a3b8 !important;
}
/* =====================================================
ICONOS EMOJI en Rubros / Marcas
===================================================== */
.lista-emoji { font-size: 1.15rem; line-height: 1; margin-right: 2px; }
.emoji-input { font-size: 1.25rem !important; text-align: center; max-width: 90px; }
/* =====================================================
DATOS PORTAL PÚBLICO — editor visual + vista previa
===================================================== */
.cotiz-preview-wrap { border: 1px dashed var(--eol-border); border-radius: var(--eol-radius-sm); padding: 10px 12px; background: #fafbfc; }
.cotiz-preview-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--eol-muted); font-weight: 700; margin-bottom: 6px; }
.cotiz-preview {
background: #0f172a;
color: #e2e8f0;
border-radius: 10px;
padding: 14px 16px;
min-height: 34px;
font-family: Arial, sans-serif;
overflow-wrap: break-word;
}
.cotiz-preview:empty::before { content: 'Escribí arriba para ver la vista previa…'; color: #64748b; font-style: italic; font-family: 'Inter', sans-serif; }
.cotiz-preview a { color: #60a5fa; }
.emoji-picker { max-width: 190px; }
.note-editor.note-frame { border-radius: var(--eol-radius-sm); border-color: var(--eol-border); }
.dark-mode .cotiz-preview-wrap { background: #0f1c33; border-color: rgba(148,163,184,.2); }
/* =====================================================================
ROBUSTEZ DE TABLAS ANTE ZOOM / TEXTO GRANDE
Evita que las tablas se deformen/apreten: en vez de comprimir
columnas, la tabla se desborda y aparece scroll horizontal dentro
de la tarjeta.
===================================================================== */
/* El wrapper de DataTables permite scroll horizontal si la tabla no entra */
.dataTables_wrapper { overflow-x: auto; }
/* La tabla puede crecer con el contenido en vez de apretarse */
.card-body > .dataTables_wrapper > table.dataTable,
.card-body table.dataTable {
min-width: 100%;
width: auto;
}
/* =====================================================================
SELECT2 — buscadores de clientes / proveedores (look del tema)
===================================================================== */
.select2-container--default .select2-selection--single {
height: calc(2.25rem + 2px);
border: 1px solid var(--eol-border);
border-radius: var(--eol-radius-sm);
display: flex;
align-items: center;
transition: var(--eol-trans);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: normal;
color: var(--eol-text);
padding-left: .75rem;
padding-right: 2rem;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--eol-muted); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; right: 8px; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
border-color: var(--eol-primary);
box-shadow: 0 0 0 3px var(--eol-primary-100);
}
.select2-dropdown {
border-color: var(--eol-border);
border-radius: var(--eol-radius-sm);
box-shadow: var(--eol-shadow);
overflow: hidden;
}
.select2-search--dropdown .select2-search__field {
border-radius: 8px;
border: 1px solid var(--eol-border);
padding: .4rem .6rem;
outline: none;
}
.select2-search--dropdown .select2-search__field:focus {
border-color: var(--eol-primary);
box-shadow: 0 0 0 3px var(--eol-primary-100);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--eol-primary); }
.select2-container--default .select2-results__option[aria-selected=true] { background: var(--eol-primary-50); color: var(--eol-text); }
.dark-mode .select2-container--default .select2-selection--single { background: #111c33; border-color: var(--eol-border); }
.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--eol-text); }
.dark-mode .select2-dropdown { background: var(--eol-surface); border-color: var(--eol-border); }
.dark-mode .select2-search--dropdown .select2-search__field { background: #111c33; border-color: var(--eol-border); color: var(--eol-text); }
.dark-mode .select2-container--default .select2-results__option { color: var(--eol-text); }
.dark-mode .select2-container--default .select2-results__option[aria-selected=true] { background: rgba(37,99,235,.16); }
/* =====================================================================
BOTONES UNIFICADOS — barra de acciones (Opción B)
Todos sólidos y redondeados; las exportaciones conservan su color de
marca: Imprimir=azul, Excel=verde, PDF=rojo, WhatsApp=verde WhatsApp.
Aplica a TODO el sistema vía las clases que DataTables agrega a los
botones (.buttons-print / .buttons-excel / .buttons-pdf).
===================================================================== */
.dt-buttons .btn,
.dt-buttons .dt-button {
border-radius: var(--eol-radius-sm) !important;
font-weight: 600;
margin: 0 .4rem 0 0;
color: #fff !important;
border: 1px solid transparent !important;
box-shadow: var(--eol-shadow-sm);
transition: var(--eol-trans);
}
.dt-buttons .btn:last-child,
.dt-buttons .dt-button:last-child { margin-right: 0; }
.dt-buttons .btn:hover,
.dt-buttons .dt-button:hover { transform: translateY(-1px); }
.dt-buttons .btn i,
.dt-buttons .dt-button i { margin-right: .35rem; }
/* Imprimir → azul primario */
.dt-buttons .buttons-print,
.btn-eol-print {
background: var(--eol-primary) !important;
border-color: var(--eol-primary) !important;
color: #fff !important;
box-shadow: 0 4px 14px -4px rgba(37,99,235,.5) !important;
}
.dt-buttons .buttons-print:hover,
.btn-eol-print:hover { background: var(--eol-primary-600) !important; border-color: var(--eol-primary-600) !important; }
/* Excel → verde */
.dt-buttons .buttons-excel,
.btn-eol-excel {
background: #1D6F42 !important;
border-color: #1D6F42 !important;
color: #fff !important;
box-shadow: 0 4px 14px -4px rgba(29,111,66,.5) !important;
}
.dt-buttons .buttons-excel:hover,
.btn-eol-excel:hover { background: #165536 !important; border-color: #165536 !important; }
/* PDF → rojo */
.dt-buttons .buttons-pdf,
.btn-eol-pdf {
background: #D32F2F !important;
border-color: #D32F2F !important;
color: #fff !important;
box-shadow: 0 4px 14px -4px rgba(211,47,47,.5) !important;
}
.dt-buttons .buttons-pdf:hover,
.btn-eol-pdf:hover { background: #B71C1C !important; border-color: #B71C1C !important; }
/* WhatsApp → verde WhatsApp */
.dt-buttons .buttons-whatsapp,
.btn-whatsapp,
.btn-eol-whatsapp {
background: #25D366 !important;
border-color: #25D366 !important;
color: #0b3d1f !important;
box-shadow: 0 4px 14px -4px rgba(37,211,102,.5) !important;
}
.dt-buttons .buttons-whatsapp:hover,
.btn-whatsapp:hover,
.btn-eol-whatsapp:hover { background: #1EBE5A !important; border-color: #1EBE5A !important; color: #0b3d1f !important; }
/* =====================================================================
MENÚ DE USUARIO / CERRAR SESIÓN — versión moderna
===================================================================== */
.user-menu > .dropdown-menu {
border: none;
border-radius: var(--eol-radius);
box-shadow: 0 20px 50px -18px rgba(15,23,42,.45);
padding: 0;
min-width: 260px;
overflow: hidden;
}
.user-menu > .dropdown-menu > .user-header {
height: auto;
padding: 1.4rem 1rem 1.1rem;
background: linear-gradient(180deg, var(--eol-primary) 0%, var(--eol-primary-700) 100%);
text-align: center;
}
.user-menu > .dropdown-menu > .user-header img {
width: 82px; height: 82px;
border: 3px solid rgba(255,255,255,.85);
box-shadow: 0 6px 18px -6px rgba(0,0,0,.5);
}
.user-menu > .dropdown-menu > .user-header p {
color: #fff; font-weight: 700; font-size: 1rem; margin-top: .6rem;
}
.user-menu > .dropdown-menu > .user-header span { color: rgba(255,255,255,.85); font-size: .82rem; }
.user-menu > .dropdown-menu > .user-footer {
background: var(--eol-surface);
padding: .85rem 1rem;
border-top: 1px solid var(--eol-border);
}
.user-menu > .dropdown-menu > .user-footer .btn-salir {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
border-radius: 999px;
padding: .55rem 1rem;
font-weight: 600;
color: #fff;
background: #DC2626;
border: 1px solid #DC2626;
box-shadow: 0 4px 14px -4px rgba(220,38,38,.5);
transition: var(--eol-trans);
}
.user-menu > .dropdown-menu > .user-footer .btn-salir:hover {
background: #B91C1C;
border-color: #B91C1C;
transform: translateY(-1px);
box-shadow: 0 8px 22px -8px rgba(220,38,38,.6);
}
.dark-mode .user-menu > .dropdown-menu > .user-footer { background: var(--eol-surface); border-top-color: var(--eol-border); }
/* =====================================================================
SELECT2 clientes/proveedores: ESCRIBIR DIRECTO EN EL CAMPO
Al abrir, el buscador se superpone sobre el propio campo (no aparece
una cajita aparte debajo). Solo aplica a los selects con la clase
eol-cp-select2 (clientes/proveedores), no al resto.
===================================================================== */
/* Oculta el campo entero mientras está abierto: el buscador del dropdown
ocupa exactamente su lugar (una sola caja, se escribe "en el campo") */
.select2-container--open.eol-cp-select2 .select2-selection--single {
visibility: hidden;
}
/* El dropdown se sube para tapar el campo cuando abre hacia abajo */
.eol-cp-select2-dd.select2-dropdown {
border: 1px solid var(--eol-primary);
box-shadow: 0 0 0 3px var(--eol-primary-100), var(--eol-shadow);
border-radius: var(--eol-radius-sm);
}
.eol-cp-select2-dd.select2-dropdown--below {
margin-top: calc(-2.25rem - 2px);
}
.eol-cp-select2-dd .select2-search--dropdown {
padding: 0;
}
.eol-cp-select2-dd .select2-search--dropdown .select2-search__field {
height: calc(2.25rem + 2px);
border: none;
border-bottom: 1px solid var(--eol-border);
border-radius: var(--eol-radius-sm) var(--eol-radius-sm) 0 0;
box-shadow: none;
padding: 0 .75rem;
outline: none;
font-size: 1rem;
}
.eol-cp-select2-dd .select2-results { padding: 4px 0; }
.dark-mode .eol-cp-select2-dd .select2-search--dropdown .select2-search__field { border-bottom-color: var(--eol-border); }
/* =====================================================================
CONFIGURACIÓN — rediseño moderno (scope .config-moderna)
===================================================================== */
/* Card contenedor "Nombre del sitio" */
.config-moderna .input-group-text.w-25 {
background: var(--eol-primary-50);
border: 1px solid var(--eol-border);
color: var(--eol-primary-700);
font-weight: 600;
border-radius: 10px 0 0 10px;
justify-content: center;
}
.config-moderna #nombre { border-radius: 0 10px 10px 0; }
/* --- Tabs de perfil como "segmented control" --- */
.config-moderna .card-tabs > .card-header {
background: transparent !important;
border: none !important;
padding-bottom: 0;
}
.config-moderna .card-tabs .nav-tabs {
border: none;
gap: 4px;
background: #eaeef4;
padding: 5px;
border-radius: 12px;
display: inline-flex;
}
.config-moderna .card.card-tabs .nav-tabs .nav-item { margin: 0; }
.config-moderna .card.card-tabs .nav-tabs .nav-link {
border: none !important;
border-radius: 9px !important;
color: var(--eol-muted) !important;
font-weight: 600;
padding: .5rem 1.5rem;
background: transparent !important;
transition: var(--eol-trans);
}
.config-moderna .card.card-tabs .nav-tabs .nav-link:hover { color: var(--eol-primary-700) !important; }
.config-moderna .card.card-tabs .nav-tabs .nav-link.active {
background: #fff !important;
color: var(--eol-primary) !important;
box-shadow: var(--eol-shadow-sm);
}
.dark-mode .config-moderna .card.card-tabs .nav-tabs { background: #0b1526; }
.dark-mode .config-moderna .card.card-tabs .nav-tabs .nav-link.active { background: #17233b !important; }
/* --- Tarjetas de módulos --- */
.config-moderna .tab-pane .row { row-gap: 1.1rem; }
.config-moderna .tab-pane .card {
border: 1px solid var(--eol-border) !important;
border-radius: var(--eol-radius);
box-shadow: var(--eol-shadow-sm);
overflow: hidden;
height: 100%;
margin-bottom: 0;
transition: var(--eol-trans);
}
.config-moderna .tab-pane .card:hover {
box-shadow: var(--eol-shadow);
transform: translateY(-2px);
border-color: #d7deea !important;
}
.config-moderna .tab-pane .card > .card-header {
background: #fff;
border-bottom: 1px solid var(--eol-border);
display: flex;
align-items: center;
gap: 9px;
padding: .7rem .85rem;
min-height: auto;
}
.config-moderna .tab-pane .card .card-title {
font-weight: 700;
color: var(--eol-text);
font-size: 1rem;
margin: 0;
display: inline-flex;
align-items: center;
}
.config-moderna .tab-pane .card > .card-body { padding: .55rem .7rem .7rem; }
/* Icono coloreado (lo agrega configuracion.js) */
.config-moderna .cfg-card-icon {
width: 32px; height: 32px; border-radius: 9px;
display: inline-flex; align-items: center; justify-content: center;
color: #fff; font-size: .82rem; flex: 0 0 auto;
box-shadow: var(--eol-shadow-sm);
}
/* Contador activos/total (lo agrega configuracion.js) */
.config-moderna .cfg-count {
margin-left: 8px; font-size: .68rem; font-weight: 700;
color: var(--eol-muted); background: #f1f5f9;
padding: 2px 9px; border-radius: 999px; line-height: 1.5;
}
.dark-mode .config-moderna .cfg-count { background: #17233b; }
/* "Marcar todos" en el header, a la derecha */
.config-moderna .tab-pane .card > .card-header .custom-switch.ml-auto .custom-control-label {
font-size: .74rem; color: var(--eol-muted); text-transform: uppercase; letter-spacing: .3px; padding-top: 2px;
}
/* --- Filas de toggle --- */
.config-moderna .tab-pane .card-body .custom-switch {
padding: .34rem .5rem .34rem 3.1rem;
margin-bottom: 2px;
border-radius: 9px;
min-height: auto;
transition: var(--eol-trans);
}
.config-moderna .tab-pane .card-body .custom-switch:hover { background: var(--eol-primary-50); }
.dark-mode .config-moderna .tab-pane .card-body .custom-switch:hover { background: #142138; }
.config-moderna .tab-pane .card-body .custom-switch .custom-control-label {
cursor: pointer; font-weight: 500; color: var(--eol-text); font-size: .9rem; padding-top: 1px;
}
/* Interruptores modernos (aplica a todos los custom-switch de la página) */
.config-moderna .custom-switch .custom-control-label::before {
left: -2.6rem; width: 2.1rem; height: 1.15rem; top: .05rem;
border-radius: 999px; background: #cbd5e1; border: none; box-shadow: none;
transition: var(--eol-trans);
}
.config-moderna .custom-switch .custom-control-label::after {
left: -2.5rem; top: calc(.05rem + 3px); width: .82rem; height: .82rem;
border-radius: 50%; background: #fff; transition: var(--eol-trans);
}
.config-moderna .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
background: var(--eol-primary); box-shadow: 0 2px 6px -1px rgba(37,99,235,.5);
}
.config-moderna .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
transform: translateX(.95rem);
}
.config-moderna .custom-switch .custom-control-input:focus ~ .custom-control-label::before {
box-shadow: 0 0 0 3px var(--eol-primary-100);
}
/* =====================================================================
DASHBOARD — alturas parejas de las tarjetas del "Resumen general"
===================================================================== */
#dashboard-small-boxes-card .row > [class*="col-"] { display: flex; }
#dashboard-small-boxes-card .small-box {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
#dashboard-small-boxes-card .small-box > .inner { flex: 1 1 auto; }
#dashboard-small-boxes-card .small-box > .small-box-footer { margin-top: auto; }
/* Separación vertical entre filas = separación horizontal entre columnas (15px).
El margin-bottom del small-box queda anulado por el height:100% del flex, así
que el gap entre filas lo damos con margin-top en las filas siguientes. */
#dashboard-small-boxes-card .small-box { margin-bottom: 0; }
#dashboard-small-boxes-card .row + .row { margin-top: 15px; }
/* La última fila de tarjetas quedaba pegada al borde inferior del card. El card-body
tiene la clase pb-0 de Bootstrap, que trae !important; por eso hay que forzar el
padding con !important (el selector #id .card-body igual le gana en especificidad).
Aire abajo generoso + separación con la card de "Reservas a Entregar" de abajo. */
#dashboard-small-boxes-card .card-body { padding-bottom: 2rem !important; }
#dashboard-small-boxes-card { margin-bottom: 1.5rem; }
/* =====================================================================
USUARIOS — retoques modernos
===================================================================== */
.eol-avatar-tabla {
width: 40px; height: 40px; border-radius: 50%;
object-fit: cover; border: 2px solid var(--eol-border);
box-shadow: var(--eol-shadow-sm); background: #fff;
}
.eol-badge-perfil {
font-size: .74rem; font-weight: 600; padding: .42em .8em;
border-radius: 999px; letter-spacing: .2px;
display: inline-block; min-width: 120px; text-align: center;
}
/* Perfil en tono PASTEL (mismo criterio que las pastillas de cuenta) */
.eol-badge-perfil.badge-primary { background-color: #dbeafe !important; color: #1e40af !important; }
.eol-badge-perfil.badge-success { background-color: #d1fae5 !important; color: #065f46 !important; }
.eol-badge-perfil.badge-warning { background-color: #fef3c7 !important; color: #92400e !important; }
/* Botón de estado Activo/Inactivo como pill */
.tablaUsuarios .btnActivar { border-radius: 999px !important; font-weight: 600; padding: .2rem .8rem; }
/* =====================================================================
TARJETAS DE TOTALES — Administrar Compras
===================================================================== */
.compras-stat {
display: flex;
align-items: center;
gap: .7rem;
height: 100%;
background: var(--eol-surface);
border: 1px solid var(--eol-border);
border-radius: var(--eol-radius);
padding: .7rem .9rem;
box-shadow: var(--eol-shadow-sm);
transition: var(--eol-trans);
}
.compras-stat:hover { box-shadow: var(--eol-shadow); transform: translateY(-1px); }
.compras-stat-ico {
flex: 0 0 auto;
width: 40px; height: 40px;
border-radius: 11px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1rem; color: #fff;
}
.compras-stat-body { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.compras-stat-label {
font-size: .7rem; text-transform: uppercase; letter-spacing: .4px;
color: var(--eol-muted); font-weight: 600;
}
.compras-stat-value { font-size: 1.15rem; font-weight: 800; color: var(--eol-text); white-space: nowrap; }
.compras-stat--peso .compras-stat-ico { background: #14b8a6; } /* teal */
.compras-stat--fob .compras-stat-ico { background: var(--eol-primary); } /* azul */
.compras-stat--flete .compras-stat-ico { background: #f59e0b; } /* ámbar */
.compras-stat--costo .compras-stat-ico { background: #16a34a; } /* verde */
/* =====================================================================
ESTADO DEUDOR / ACREEDOR — filas por saldo (tinte suave + acento izq.)
===================================================================== */
.tablaDeudor tbody tr.saldo-row-neg > td,
.tablaAcreedor tbody tr.saldo-row-neg > td { background-color: #fff5f5 !important; }
.tablaDeudor tbody tr.saldo-row-pos > td,
.tablaAcreedor tbody tr.saldo-row-pos > td { background-color: #f2fdf5 !important; }
.tablaDeudor tbody tr.saldo-row-neg > td:first-child,
.tablaAcreedor tbody tr.saldo-row-neg > td:first-child { box-shadow: inset 4px 0 0 #ef4444; }
.tablaDeudor tbody tr.saldo-row-pos > td:first-child,
.tablaAcreedor tbody tr.saldo-row-pos > td:first-child { box-shadow: inset 4px 0 0 #22c55e; }
.tablaDeudor tbody tr.saldo-row-neg:hover > td,
.tablaAcreedor tbody tr.saldo-row-neg:hover > td { background-color: #fee2e2 !important; }
.tablaDeudor tbody tr.saldo-row-pos:hover > td,
.tablaAcreedor tbody tr.saldo-row-pos:hover > td { background-color: #dcfce7 !important; }
.dark-mode .tablaDeudor tbody tr.saldo-row-neg > td,
.dark-mode .tablaAcreedor tbody tr.saldo-row-neg > td { background-color: rgba(239,68,68,.13) !important; }
.dark-mode .tablaDeudor tbody tr.saldo-row-pos > td,
.dark-mode .tablaAcreedor tbody tr.saldo-row-pos > td { background-color: rgba(34,197,94,.13) !important; }
/* =====================================================================
PATRIMONIO — tile en modo carga manual (mes anterior sin cerrar)
Se marca con borde punteado para que se note que ese número lo pone
Ari y no el sistema.
===================================================================== */
.pn-tile-edit { border-style: dashed !important; background: #fffbeb; }
.dark-mode .pn-tile-edit { background: rgba(245, 158, 11, .08); }
/* =====================================================================
CUENTA CORRIENTE — columna "Forma de pago"
Una pastilla por medio de pago + su importe al lado. Cada operación
puede tener varias, así que van apiladas.
===================================================================== */
.fp-item { display: flex; align-items: center; gap: .35rem; margin: .1rem 0; white-space: nowrap; }
.fp-monto { font-size: .78rem; color: #475569; font-weight: 600; }
.dark-mode .fp-monto { color: #cbd5e1; }
/* =====================================================================
PAGOS "PINTADOS" — los que se toman como base de los gastos de
transferencia en Patrimonio. Mismo criterio que Deudor/Acreedor:
tinte suave + barra de acento a la izquierda (nada de relleno fuerte).
===================================================================== */
#viewPagos tbody tr.pago-pintado > td { background-color: #fef9c3 !important; }
#viewPagos tbody tr.pago-pintado > td:first-child { box-shadow: inset 4px 0 0 #f59e0b; }
#viewPagos tbody tr.pago-pintado:hover > td { background-color: #fef08a !important; }
.dark-mode #viewPagos tbody tr.pago-pintado > td { background-color: rgba(245,158,11,.15) !important; }
/* =====================================================================
COMPROBANTE (PDF) — botón "Adjuntar" alineado con el cuadro de archivo
(el tema le daba sombra/redondeo que lo desalineaba del custom-file)
===================================================================== */
#btnAdjuntarComprobante {
height: calc(2.25rem + 2px);
padding-top: 0;
padding-bottom: 0;
display: inline-flex;
align-items: center;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
box-shadow: none;
}
#btnAdjuntarComprobante:hover { transform: none; }
/* ============================================================
Sidebar moderno: fondo azul-oscuro degradado + íconos celestes
parejos + ítem activo como "pastilla" azul del tema. Look sobrio
y profesional. Todo por CSS, sin tocar menu.php.
============================================================ */
.main-sidebar {
background: linear-gradient(180deg, #1f3b63 0%, #0e1f38 100%) !important;
}
/* Zona del logo, apenas más oscura, con separación */
.main-sidebar .brand-link {
background: rgba(0, 0, 0, .18);
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
/* Cada ítem como fila redondeada con aire a los costados */
.main-sidebar .nav-sidebar .nav-link {
border-radius: 8px;
margin: 2px 8px;
}
/* Íconos en celeste suave y parejos; texto un poco más claro */
.main-sidebar .nav-sidebar .nav-icon { color: #74c0fc; }
.main-sidebar .nav-sidebar .nav-link p { color: #dfe7f1; }
/* Hover sutil */
.main-sidebar .nav-sidebar .nav-link:hover { background: rgba(255, 255, 255, .06); }
/* Ítem activo: pastilla azul del tema con ícono y texto blancos */
.main-sidebar .nav-sidebar .nav-link.active {
background: #2563EB !important;
box-shadow: 0 4px 12px rgba(37, 99, 235, .35);
}
.main-sidebar .nav-sidebar .nav-link.active > .nav-icon,
.main-sidebar .nav-sidebar .nav-link.active p { color: #fff !important; }
/* =========================================================================
ENCABEZADO DE TABLA PEGADO (una sola barra de scroll: la de la pagina).
Con layout-navbar-fixed la pagina scrollea y el navbar queda fijo; el thead
se pega justo debajo (top = alto del navbar, lo setea plantilla.js en
--eol-sticky-top). border-collapse:separate es clave para que el fondo del
thead pinte opaco (con collapse queda transparente y se ven las filas). */
.eol-sticky-head { border-collapse: separate !important; border-spacing: 0; }
.eol-sticky-head thead th {
position: sticky; top: 0; z-index: 5;
background-color: #fff !important; box-shadow: inset 0 -1px 0 #dee2e6;
}
.dark-mode .eol-sticky-head thead th { background-color: #343a40 !important; }