/* ============================================================
SARA · refresh de UI (overrides sobre Bootstrap 5.2)
Cargar DESPUÉS de newStyle.{empresa}.css en el :
La idea: esto es lo común a las 3 empresas. En cada
newStyle.{empresa}.css deja SOLO el color de acento (--sara-accent).
============================================================ */
:root{
/* Tipografía: UI en Nunito (ya la cargas), dm-mono solo para datos */
--bs-font-sans-serif: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
--bs-body-font-size: .92rem;
--bs-body-line-height: 1.55;
--bs-body-color: #2b2b30;
--bs-body-bg: #f4f3f1;
--bs-border-radius: .65rem;
--bs-border-radius-lg: .85rem;
/* Paleta del refresh */
--sara-sidebar: #18181c; /* barra lateral oscura */
--sara-sidebar-soft: #76767e; /* subtítulo / iconos inactivos */
--sara-sidebar-text: #c4c4ca; /* texto de items inactivos */
--sara-accent: #dc3545; /* acento de marca (mueve esto por empresa) */
--sara-surface: #ffffff;
--sara-line: #e6e4df;
--sara-muted: #86847c;
}
/* Reservar el monoespaciado para datos reales, no para toda la UI */
code, kbd, pre, samp, .text-mono, .dato-mono{
font-family: "dm-mono", ui-monospace, SFMono-Regular, monospace !important;
}
.container{
max-width: 1900px !important;
}
.sara-auth {
--sara-accent: #dc3545;
--sara-accent-hover: #ab222f;
--sara-bg: #f1f1ef;
--sara-card: #ffffff;
--sara-border: #e2e2dd;
--sara-text: #1f1f1d;
--sara-muted: #6b6b66;
--sara-danger: #c0392b;
min-height: 80vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--sara-bg);
padding: 24px;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.sara-auth__card {
width: 100%;
max-width: 400px;
background: var(--sara-card);
border: 1px solid var(--sara-border);
border-radius: 12px;
padding: 32px 28px;
}
.sara-auth__brand { text-align: center; margin-bottom: 28px; }
.sara-auth__logo {
width: 48px; height: 48px;
border-radius: 10px;
background: var(--sara-accent);
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 12px;
}
.sara-auth__logo svg { width: 26px; height: 26px; stroke: #fff; }
.sara-auth__title { margin: 0; font-size: 38px; font-weight: 600; letter-spacing: .5px; color: var(--sara-text); }
.sara-auth__subtitle { margin: 4px 0 0; font-size: 10px; color: var(--sara-muted); }
.sara-auth__field { margin-bottom: 16px; }
.sara-auth__field label {
display: block; font-size: 13px; font-weight: 500;
color: var(--sara-muted); margin-bottom: 6px;
}
.sara-auth__input { position: relative; }
.sara-auth__input > svg {
position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
width: 18px; height: 18px; stroke: var(--sara-muted); pointer-events: none;
}
.sara-auth__input input {
width: 100%; height: 42px;
padding: 0 38px;
border: 1px solid var(--sara-border);
border-radius: 8px;
font-size: 15px;
color: var(--sara-text);
background: var(--sara-card);
outline: none;
transition: border-color .15s, box-shadow .15s;
}
.sara-auth__input input:focus {
border-color: var(--sara-accent);
box-shadow: 0 0 0 3px rgba(24, 95, 165, .15);
}
.sara-auth__input input.is-invalid {
border-color: var(--sara-danger);
}
/* Evita el fondo amarillo del autocompletar del navegador */
.sara-auth__input input:-webkit-autofill,
.sara-auth__input input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 40px var(--sara-card) inset;
-webkit-text-fill-color: var(--sara-text);
}
.sara-auth__toggle {
position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
background: none; border: none; padding: 4px; cursor: pointer; line-height: 0;
}
.sara-auth__toggle svg { width: 18px; height: 18px; stroke: var(--sara-muted); }
.sara-auth__error { display: block; margin-top: 6px; font-size: 12px; color: var(--sara-danger); }
.sara-auth__row {
display: flex; align-items: center; justify-content: space-between;
margin: 4px 0 22px; font-size: 13px;
}
.sara-auth__remember { display: flex; align-items: center; gap: 7px; color: var(--sara-muted); cursor: pointer; }
.sara-auth__remember input { width: 15px; height: 15px; accent-color: var(--sara-accent); }
.sara-auth__forgot { color: var(--sara-muted); text-decoration: none; }
.sara-auth__forgot:hover { color: var(--sara-text); text-decoration: underline; }
.sara-auth__submit {
width: 100%; height: 44px;
background: var(--sara-accent); color: #fff;
border: none; border-radius: 8px;
font-size: 15px; font-weight: 600; cursor: pointer;
transition: background .15s;
}
.sara-auth__submit:hover { background: var(--sara-accent-hover); }
/* ---------- 1) Barra lateral ---------- */
/* .columnSx hereda .bg-danger; lo sobrescribimos solo en la columna */
.columnSx{
background-color: var(--sara-sidebar) !important;
border: 0 !important;
box-shadow: 0 1px 4px rgba(0,0,0,.10) !important;
/* Curva solo en el lado izquierdo; recto contra el contenido (como el mockup).
Orden: arriba-izq | arriba-der | abajo-der | abajo-izq */
border-radius: 16px 0 0 16px !important;
overflow: hidden; /* recorta el contenido interno a la curva */
}
.columnSx .saraTitle{
color:#fff;
letter-spacing:.10em;
font-weight:700;
text-align: left;
padding-left: 12px;
}
.columnSx .saraSubtitle{
color: var(--sara-sidebar-soft);
text-align: left;
padding-left: 12px;
font-size: 9px;
}
.columnSx .linea{
opacity:.3;
text-align: center;
}
/* Items del menú: más aire, jerarquía y estados */
.columnSx .nav-pills .nav-link{
display:flex; align-items:center; gap:11px;
color: var(--sara-sidebar-text) !important;
font-size:13.5px;
height:auto;
line-height:1.3;
margin:1px 8px;
padding:9px 12px !important;
border-radius:9px;
transition: background-color .12s ease, color .12s ease;
}
.columnSx .nav-pills .nav-link i,
.columnSx .nav-pills .nav-link svg{
color: var(--sara-sidebar-soft);
font-size:16px; width:18px; text-align:center;
transition: color .12s ease;
}
.columnSx .nav-pills .nav-link:hover{
background-color: rgba(255,255,255,.06) !important;
color:#fff !important;
}
.columnSx .nav-pills .nav-link:hover i{ color:#fff; }
/* Item activo: pastilla con el acento, texto blanco (antes era pastilla clara) */
.columnSx .nav-pills .nav-link.active,
.columnSx .nav-pills .show > .nav-link{
background-color: var(--sara-accent) !important;
color:#fff !important;
width:auto; /* anula el width:95% heredado */
border-radius:9px;
}
.columnSx .nav-pills .nav-link.active i{ color:#fff; }
/* Encabezado de sección opcional. Úsalo en la navegación:
General ... Comercial */
.columnSx .nav-section{
list-style:none;
font-size:10px; letter-spacing:1px; text-transform:uppercase;
color: var(--sara-sidebar-soft);
padding:14px 18px 6px;
}
/* Estado colapsado: centrar el ícono cuando se oculta el texto */
.collapsed .nav-pills .nav-link{ justify-content:left; padding:9px !important; }
.collapsed .nav-pills .nav-link i{ margin:0; }
/* Botón de colapsar al pie */
.columnSx .footer-collapse{
background: rgba(0,0,0,.25);
border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
}
/* Submenús dentro de la barra oscura (anula el rojo que pone newStyle) */
.columnSx .dropdown-menu{
position: static !important;
margin-top: 5px;
z-index: 1050;
background-color: transparent !important;
border: 0 !important;
padding: 2px 0 6px;
margin: 0 8px;
}
.columnSx .dropdown-menu .nav-link{
font-size:12.5px;
color:#a9a9b0 !important;
padding:7px 12px 7px 34px !important; /* indentado bajo el padre */
margin:1px 0;
}
.columnSx .dropdown-menu .nav-link i{ font-size:11px; width:auto; color:var(--sara-sidebar-soft); }
.columnSx .dropdown-menu .nav-link.active{
background-color: rgba(226,59,59,.18) !important;
color:#fff !important;
}
.columnSx .dropdown-menu .nav-link.active i{ color:#fff; }
/* ---------- 2) Topbar (x-layouts.navigation) ---------- */
.sara-topbar{
background: var(--sara-surface);
border-bottom: 1px solid var(--sara-line);
padding: .65rem 1.25rem;
}
.sara-search{
background:#f3f2ef; border:1px solid var(--sara-line);
border-radius:9px; padding:7px 12px; color:var(--sara-muted);
font-size:13px; min-width:240px;
}
.sara-empresa-pill{
display:inline-flex; align-items:center; gap:8px;
background:#f3f2ef; border:1px solid var(--sara-line);
border-radius:9px; padding:6px 11px; font-size:13px; color:#33332f;
}
.sara-empresa-pill i{ color: var(--sara-accent); }
.sara-avatar{
width:34px; height:34px; border-radius:50%;
background: var(--sara-accent); color:#fff;
display:flex; align-items:center; justify-content:center;
font-size:13px; font-weight:700;
}
/* Botones de ícono del header (alertas, TRM) */
.sara-icon-btn{
display:inline-flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:9px;
color:#5f5e5a; background:#fff; border:1px solid var(--sara-line);
text-decoration:none; position:relative;
transition: background-color .12s ease, color .12s ease;
}
.sara-icon-btn:hover{ background:#f3f2ef; color:#33332f; }
.sara-icon-btn i{ font-size:17px; }
/* Reubicar el badge .indicator dentro del botón de 38px */
.sara-icon-btn .indicator{ top:5px; right:5px; background:var(--sara-accent); }
/* Enlace de usuario (avatar + nombre + caret) */
.sara-topbar .sara-user{ color:#33332f !important; text-decoration:none; }
.sara-user-name{ font-size:13px; }
/* El dropdown del usuario debe ser blanco (anula el rojo de newStyle, solo en el header) */
.sara-topbar .dropdown-menu{
background-color:#fff !important;
border:1px solid var(--sara-line) !important;
border-radius:10px;
box-shadow:0 6px 24px rgba(0,0,0,.10);
padding:6px; margin-top:8px;
}
.sara-topbar .dropdown-item{ border-radius:7px; font-size:13.5px; padding:8px 12px; color:#33332f; }
.sara-topbar .dropdown-item:hover{ background:#f3f2ef; }
/* ---------- 3) Tarjetas / contenido ---------- */
.card{
border:1px solid var(--sara-line) !important;
border-radius: var(--bs-border-radius-lg) !important;
box-shadow:none;
}
.card .card-header{
background:transparent;
border-bottom:1px solid var(--sara-line);
font-weight:700;
}
.tituloPagina{ color:#26262a; font-weight:700; font-size:20px; }
.subtituloPagina{ color:#26262a; font-weight:700; font-size:16px; }
/* Metric cards: usa … */
.metric-card{
background:#fff; border:1px solid var(--sara-line);
border-radius: var(--bs-border-radius-lg); padding:14px 16px;
}
.metric-card .label{ font-size:12px; color:var(--sara-muted); }
.metric-card .value{ font-size:24px; font-weight:700; color:#26262a; margin-top:4px; }
/* Badge "empresa activa" */
.badge-empresa{
display:inline-flex; align-items:center; gap:6px;
background:#fceaea; color:#a32d2d;
font-size:11px; font-weight:700; padding:4px 10px;
border-radius:7px;
}
.badge-empresa .dot{ width:6px; height:6px; border-radius:50%; background:#22a06b; }
/* Filas de detalle clave/valor */
.kv .k{ font-size:11px; color:#9a988f; margin-bottom:3px; }
.kv .v{ font-size:13px; color:#33332f; }
/* ---------- 4) DataTables / botones (encaje con el tema) ---------- */
.dataTables_wrapper .dt-button{
border:1px solid var(--sara-line); border-radius:8px; color:#444;
}
.dataTables_wrapper .dt-button:hover{ background:#f3f2ef; }
table.dataTable thead th.sorting{ color:#555; }
/* Scrollbar discreto en la barra lateral */
.columnSx::-webkit-scrollbar{ width:8px; }
.columnSx::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:8px; }
/* ---------- 5) Submenús (dropdowns) dentro de la barra lateral ---------- */
/* Anula el fondo rojo de .dropdown-menu del newStyle, solo en el sidebar */
.columnSx .dropdown-menu{
position: static !important;
margin-top: 5px;
z-index: 1050;
width: auto;
background-color: transparent !important;
border: 0 !important;
padding: 2px 12px 2px 0px;
box-shadow: none;
}
.columnSx .dropdown-menu .nav-link{
font-size: 12.5px;
color: var(--sara-sidebar-soft) !important;
padding: 7px 2px 7px 2px !important; /* sangría de subnivel */
margin: 1px 6px 6px 0px;
}
.columnSx .dropdown-menu .nav-link i{ font-size: 11px; width: 12px; }
.columnSx .dropdown-menu .nav-link:hover{
background: rgba(255,255,255,.05) !important;
color: #fff !important;
}
.columnSx .dropdown-menu .nav-link.active{
background: rgba(226,59,59,.20) !important; /* acento tenue para subitem activo */
color: #fff !important;
}
.swal-confirm {
background-color: var(--sara-accent);
color: #fff;
border-radius: .25em;
border:1px solid white;
margin:3px;
}
.swal-cancel {
background-color: gray;
color: #fff;
border-radius: .25em;
border:1px solid white;
}
.sara-dash {
--sara-accent: #185FA5;
--sara-card: #ffffff;
--sara-border: #e2e2dd;
--sara-text: #1f1f1d;
--sara-muted: #6b6b66;
--sara-hint: #9a9a93;
--sara-normal: #185FA5;
--sara-bolsa: #BA7517;
--sara-ok: #1e7a45;
--sara-ok-bg: #e7f4ec;
}
.sara-dash__strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
margin-bottom: 1.25rem;
}
.sara-dash__strip-label { font-size: 12px; letter-spacing: .5px; color: var(--sara-hint); margin: 0 0 8px; }
.sara-dash__metric {
background: var(--sara-card); border: 1px solid var(--sara-border);
border-radius: 10px; padding: 12px 14px;
}
.sara-dash__metric-label { margin: 0; font-size: 12px; color: var(--sara-muted); }
.sara-dash__metric-value { margin: 4px 0 0; font-size: 19px; font-weight: 500; color: var(--sara-text); }
.sara-dash__card {
background: var(--sara-card); border: 1px solid var(--sara-border);
border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 12px;
}
.sara-dash__head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.sara-dash__head i.head-icon { font-size: 16px; color: var(--sara-muted); }
.sara-dash__head .title { font-size: 14px; font-weight: 500; color: var(--sara-text); }
.sara-dash__head .period { font-size: 12px; color: var(--sara-hint); }
.sara-dash__head .ver { margin-left: auto; color: var(--sara-muted); font-size: 15px; text-decoration: none; }
.sara-dash__head .ver:hover { color: var(--sara-text); }
.sara-dash__total { font-size: 27px; font-weight: 500; color: var(--sara-text); }
.sara-dash__bignum { font-size: 22px; font-weight: 500; color: var(--sara-text); text-align: center; }
.sara-dash__bar { display: flex; height: 8px; border-radius: 20px; overflow: hidden; margin: 12px 0 10px; }
.sara-dash__legend { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sara-dash__legend .dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.sara-dash__legend .li { display: flex; align-items: center; gap: 8px; }
.sara-dash__legend .li p { margin: 0; }
.sara-dash__legend .v { font-size: 13px; color: var(--sara-text); }
.sara-dash__legend .s { font-size: 12px; color: var(--sara-muted); }
.sara-dash__split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sara-dash__split .lbl { margin: 0; font-size: 12px; color: var(--sara-muted); }
.sara-dash__split .num { margin: 4px 0 0; font-size: 22px; font-weight: 500; color: var(--sara-text); }
.sara-dash__split .num small { font-size: .55em; color: var(--sara-muted); font-weight: 400; }
.sara-dash__split .cell + .cell { border-left: 1px solid var(--sara-border); padding-left: 12px; }
.sara-dash__empty {
background: var(--sara-card); border: 1px solid var(--sara-border);
border-radius: 12px; padding: 14px 1.25rem; margin-bottom: 12px;
display: flex; align-items: center; gap: 12px;
}
.sara-dash__empty i.ok { font-size: 20px; color: var(--sara-ok); }
.sara-dash__empty .t { margin: 0; font-size: 14px; font-weight: 500; color: var(--sara-text); }
.sara-dash__empty .d { margin: 2px 0 0; font-size: 13px; color: var(--sara-muted); }
.sara-dash__empty .ver { margin-left: auto; color: var(--sara-muted); font-size: 15px; text-decoration: none; }
.sara-vol {
--sara-text: #1f1f1d;
--sara-muted: #6b6b66;
--sara-hint: #9a9a93;
--sara-border: #e2e2dd;
--sara-strong: #cfcfc8;
--sara-pill: #f1f1ef;
}
.sara-vol__head { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.sara-vol__head i { font-size:16px; color: var(--sara-muted); }
.sara-vol__head .title { font-size:14px; font-weight:500; color: var(--sara-text); }
.sara-vol__head .period { font-size:12px; color: var(--sara-hint); }
.sara-vol__tabs { display:inline-flex; gap:4px; background: var(--sara-pill); padding:3px; border-radius:8px; margin-bottom:14px; }
.sara-vol__tabs button { border:none; background:transparent; color: var(--sara-muted); font-size:13px; padding:6px 14px; border-radius:6px; cursor:pointer; }
.sara-vol__tabs button.active { background:#fff; color: var(--sara-text); }
.sara-vol table { width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric: tabular-nums; margin:0; }
.sara-vol thead th { color: var(--sara-muted); font-weight:500; padding:6px 8px; text-align:right; border:0; }
.sara-vol th.l, .sara-vol td.l { text-align:left; }
.sara-vol tbody td { padding:7px 8px; text-align:right; color: var(--sara-text); border-top:0.5px solid var(--sara-border); }
.sara-vol td.tot { font-weight:500; }
.sara-vol tfoot td { border-top:1.5px solid var(--sara-strong); font-weight:500; color: var(--sara-text); padding:8px; text-align:right; }
.sara-vol tfoot td.l { text-align:left; }
.sara-vol__badge { font-size:11px; background: var(--sara-pill); padding:2px 7px; border-radius:20px; color: var(--sara-muted); }
.sara-vol .nit { display:block; font-size:11px; color: var(--sara-hint); }
.sara-dash__foot {
display: flex; justify-content: space-between; align-items: center;
margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--sara-border);
}
.sara-dash__chip { font-size: 12px; background: var(--sara-pill); color: var(--sara-muted); padding: 3px 10px; border-radius: 20px; }
.sara-dash__foot small { font-size: 12px; color: var(--sara-muted); }
/* KPIs superiores */
.sara-dash__kpi { text-align: center; }
.sara-dash__kpi .k-title { font-size: 13px; font-weight: 500; color: var(--sara-muted); }
.sara-dash__kpi .k-period { font-size: 11px; color: var(--sara-hint); display: block; margin-top: 2px; }
.sara-dash__kpi .k-foot { font-size: 12px; color: var(--sara-muted); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--sara-border); }
.sara-dash__kpi .sub { font-size: 12px; color: var(--sara-muted); }