/*
* brand-overrides.css — Tokens de marca COTRUST y recolor de SB Admin 2.
* Se carga DESPUÉS de sb-admin-2.min.css, por lo que pisa por cascada el
* primario original (#4e73df / #224abe) con la paleta de marca.
* No se recompila el SCSS: todos los overrides de color viven acá.
*/
:root {
--brand-blue: #1B34C4; /* primario — azul royal del wordmark */
--brand-blue-dark: #0F1F8A; /* hover / gradiente / estados activos */
--brand-cyan: #00B4E6; /* acento — el punto de la "O" */
--brand-cyan-dark: #0090BC;
--brand-tint: #E8ECFB;
--brand-ink: #1F2430;
--brand-muted: #5A6072;
}
/* Links */
a { color: var(--brand-blue); }
a:hover { color: var(--brand-blue-dark); }
.btn-link { color: var(--brand-blue); }
.btn-link:hover { color: var(--brand-blue-dark); }
/* Botón primario */
.btn-primary {
background-color: var(--brand-blue);
border-color: var(--brand-blue);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
background-color: var(--brand-blue-dark);
border-color: var(--brand-blue-dark);
}
.btn-primary.disabled,
.btn-primary:disabled {
background-color: var(--brand-blue);
border-color: var(--brand-blue);
}
.btn-primary:focus,
.btn-primary.focus {
box-shadow: 0 0 0 0.2rem rgba(27, 52, 196, 0.5);
}
/* Botón outline primario */
.btn-outline-primary {
color: var(--brand-blue);
border-color: var(--brand-blue);
}
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active {
color: #fff;
background-color: var(--brand-blue);
border-color: var(--brand-blue);
}
.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
color: var(--brand-blue);
}
/* Utilidades de color */
.bg-primary { background-color: var(--brand-blue) !important; }
.border-primary { border-color: var(--brand-blue) !important; }
.text-primary { color: var(--brand-blue) !important; }
a.text-primary:focus,
a.text-primary:hover { color: var(--brand-blue-dark) !important; }
.badge-primary { background-color: var(--brand-blue); }
.border-left-primary { border-left: 0.25rem solid var(--brand-blue) !important; }
.border-bottom-primary { border-bottom: 0.25rem solid var(--brand-blue) !important; }
/* Gradiente primario (login/register/cards) */
.bg-gradient-primary {
background-color: var(--brand-blue);
background-image: linear-gradient(180deg, var(--brand-blue) 10%, var(--brand-blue-dark) 100%);
}
/* Paginación pill moderna. El markup real usa .pagination-pills con botones .btn
(no .page-item/.page-link), y el windowing lo maneja js/pagination.js. */
.pagination-pills {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: .4rem;
width: 100%;
max-width: 100%;
padding-left: 0;
margin: 1rem auto 0 auto;
list-style: none;
}
.pagination-pills li { margin: 0; }
.pagination-pills form { margin: 0; }
.pagination-pills .btn {
min-width: 2.6rem;
height: 2.6rem;
padding: 0 .65rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
border-width: 1px;
font-size: 1rem;
font-weight: 600;
line-height: 1;
transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.pagination-pills .btn-outline-secondary {
color: var(--brand-ink);
background-color: #fff;
border-color: #d7dae2;
}
.pagination-pills .btn-outline-secondary:hover {
color: #fff;
background-color: var(--brand-blue);
border-color: var(--brand-blue);
transform: translateY(-1px);
}
.pagination-pills .active .btn,
.pagination-pills .btn-primary {
color: #fff;
box-shadow: 0 .25rem .6rem rgba(27, 52, 196, .28);
}
.pagination-pills .pagination-ellipsis-btn {
min-width: 2rem;
padding: 0 .35rem;
border: 0;
background: transparent;
box-shadow: none;
color: var(--brand-muted);
cursor: default;
pointer-events: none;
}
.pagination-pills [hidden] { display: none !important; }
/* Listas, nav pills, dropdowns activos */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link { background-color: var(--brand-blue); }
.dropdown-item.active,
.dropdown-item:active { background-color: var(--brand-blue); }
.list-group-item.active {
background-color: var(--brand-blue);
border-color: var(--brand-blue);
}
/* Controles de formulario marcados */
.custom-control-input:checked ~ .custom-control-label::before {
border-color: var(--brand-blue);
background-color: var(--brand-blue);
}
.form-control:focus,
.custom-select:focus {
border-color: var(--brand-cyan);
box-shadow: 0 0 0 0.2rem rgba(0, 180, 230, 0.25);
}
/* Item activo del submenú del sidebar */
.sidebar .nav-item .collapse .collapse-inner .collapse-item.active,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item.active {
color: var(--brand-blue);
}
/* Sidebar: gradiente dark -> azul royal de marca */
.sidebar.bg-gradient-dark,
.bg-gradient-dark {
background-color: var(--brand-blue-dark);
background-image: linear-gradient(180deg, var(--brand-blue) 10%, var(--brand-blue-dark) 100%);
}
/* Topbar */
.topbar .navbar-search .form-control {
border-radius: .35rem;
}
.topbar #sidebarToggleTop:hover {
background-color: var(--brand-tint);
}
/* Fondos de login/registro: reemplazan las imágenes externas de unsplash por
un gradiente de marca (evita dependencia de red y soporta offline). */
.bg-login-image,
.bg-register-image,
.bg-password-image {
background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-cyan) 100%) !important;
}
/* ============================================================================
* Lenguaje visual COTRUST portado desde el storefront (brand.css + pages.css).
* Superficies blancas con borde 1px #eceef3 y radio .75rem, sombras azules
* suaves, pills de radio 999px sobre --brand-tint, íconos + label. No hardcodear
* hex de marca en las vistas: usar las variables --brand-* de arriba.
* ==========================================================================*/
/* ===== Superficie "panel": recolor de las .card de SB Admin 2 ===== */
.card {
border: 1px solid #eceef3;
border-radius: .75rem;
box-shadow: 0 .25rem .9rem rgba(27, 52, 196, .05);
}
.card .card-header {
background: #fff;
border-bottom: 1px solid #f1f2f6;
border-top-left-radius: .75rem;
border-top-right-radius: .75rem;
}
/* Panel estático reutilizable (mismo lenguaje que Cotrust) */
.panel {
background: #fff;
border: 1px solid #eceef3;
border-radius: .75rem;
box-shadow: 0 .25rem .9rem rgba(27, 52, 196, .05);
}
.panel-body { padding: 1.1rem 1.25rem; }
.panel-title {
display: flex;
align-items: center;
gap: .5rem;
margin: 0 0 .9rem;
font-size: 1.05rem;
font-weight: 700;
color: var(--brand-ink);
}
.panel-title i { color: var(--brand-blue); }
/* ===== Encabezado de página con ícono (reemplaza los se transforman: cada fila pasa a ser una
* tarjeta con etiqueta:valor. Las etiquetas las inyecta js/admin-tables.js
* (data-label leído del ). La celda de acciones lleva .cell-actions.
* ==========================================================================*/
@media (max-width: 767.98px) {
.table-cards thead { display: none; }
.table-cards,
.table-cards tbody,
.table-cards tr,
.table-cards td {
display: block;
width: 100%;
}
.table-cards tr {
margin-bottom: .85rem;
padding: .35rem .95rem;
background: #fff;
border: 1px solid #eceef3;
border-radius: .75rem;
box-shadow: 0 .25rem .9rem rgba(27, 52, 196, .05);
}
.table-cards tr:hover { background: #fff; }
.table-cards td {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
padding: .55rem 0;
border: 0;
border-bottom: 1px solid #f1f2f6;
text-align: right;
white-space: normal;
word-break: break-word;
}
.table-cards td:last-child { border-bottom: 0; }
.table-cards td::before {
content: attr(data-label);
flex: 0 0 auto;
font-size: .74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .03em;
color: var(--brand-muted);
text-align: left;
}
/* Celda de acciones: ocupa el ancho completo, botones abajo */
.table-cards td.cell-actions {
display: block;
text-align: center;
padding-top: .7rem;
}
.table-cards td.cell-actions::before { display: none; }
.table-cards td.cell-actions .table-actions { justify-content: center; }
.table-cards td.cell-actions .table-actions .btn { flex: 1 1 auto; }
}
/* ===== Logo de marca en el sidebar (chip blanco sobre el gradiente oscuro) === */
.sidebar-brand .brand-logo {
height: 30px;
width: auto;
padding: .3rem .5rem;
background: #fff;
border-radius: .5rem;
}
/* ============================================================================
* BARRA LATERAL EN MOBILE / TABLET (< 768px) — drawer cerrado por defecto.
* SB Admin 2 muestra por defecto una barra angosta de íconos (6.5rem) que
* ocupa espacio en pantallas chicas y, al recargar/filtrar, vuelve a aparecer
* aunque la hayas cerrado. Acá la convertimos en un panel deslizable que
* arranca CERRADO (fuera de pantalla) y se abre con el botón hamburguesa
* (#sidebarToggleTop añade la clase .toggled). El backdrop y el cierre por
* clic/Escape los maneja js/site.js.
* ==========================================================================*/
.sidebar-backdrop { display: none; }
@media (max-width: 767.98px) {
.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 14rem !important;
height: 100vh;
overflow-y: auto;
z-index: 1045;
transform: translateX(-100%);
transition: transform .25s ease;
}
.sidebar.toggled {
width: 14rem !important;
overflow-y: auto;
transform: translateX(0);
}
/* Ítems en modo "abierto": ancho completo, texto al lado del ícono. */
.sidebar .nav-item .nav-link {
width: 14rem;
text-align: left;
padding: 1rem;
}
.sidebar .nav-item .nav-link span {
font-size: .85rem;
display: inline;
}
.sidebar .sidebar-brand .sidebar-brand-text { display: inline; }
/* Submenús en el flujo del panel (no flotando a la derecha). */
.sidebar .nav-item .collapse,
.sidebar .nav-item .collapsing {
position: relative;
left: 0;
top: 0;
margin: 0 1rem;
-webkit-animation: none;
animation: none;
}
.sidebar .nav-item .collapse .collapse-inner {
border-radius: 0;
box-shadow: none;
}
/* El contenido ocupa todo el ancho: el panel va por encima. */
#content-wrapper { width: 100%; }
/* Backdrop oscuro detrás del panel abierto. */
.sidebar-backdrop {
position: fixed;
inset: 0;
z-index: 1040;
background: rgba(0, 0, 0, .45);
}
body.sidebar-toggled .sidebar-backdrop { display: block; }
}
/* ============================================================================
* EDITOR DE STOCK — steppers +/-, guardado AJAX y feedback por fila.
* Pensado para carga táctil desde celular/tablet (js/stock-editor.js).
* ==========================================================================*/
.stock-table .stock-name { font-weight: 600; }
.stock-controls {
display: inline-flex;
align-items: center;
gap: .5rem;
flex-wrap: nowrap;
}
.stock-stepper {
display: inline-flex;
align-items: stretch;
}
.stock-stepper .stock-step {
width: 2.75rem;
min-height: 2.5rem;
padding: 0;
font-size: 1.4rem;
font-weight: 700;
line-height: 1;
color: var(--brand-blue);
background: #f4f6fc;
border: 1px solid #d6dbec;
display: inline-flex;
align-items: center;
justify-content: center;
-webkit-user-select: none;
user-select: none;
touch-action: manipulation;
}
.stock-stepper .stock-step:hover { background: var(--brand-tint); }
.stock-stepper .stock-step:active { background: #dfe4f7; }
.stock-stepper .stock-step:first-child { border-radius: .5rem 0 0 .5rem; }
.stock-stepper .stock-step:last-child { border-radius: 0 .5rem .5rem 0; border-left: 0; }
.stock-stepper .stock-step + .stock-input { border-left: 0; }
.stock-stepper .stock-input {
width: 4.5rem;
min-height: 2.5rem;
text-align: center;
font-size: 1.05rem;
font-weight: 600;
border: 1px solid #d6dbec;
border-radius: 0;
-moz-appearance: textfield;
appearance: textfield;
}
.stock-stepper .stock-input::-webkit-outer-spin-button,
.stock-stepper .stock-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.stock-save {
min-height: 2.5rem;
min-width: 2.75rem;
touch-action: manipulation;
}
.stock-status {
font-size: .8rem;
font-weight: 600;
min-width: 4.5rem;
text-align: left;
white-space: nowrap;
}
.stock-status.is-ok { color: #1f9d57; }
.stock-status.is-error { color: #d6455d; }
/* Estados de la fila */
.stock-form.is-dirty .stock-input {
border-color: #e0a83a;
background: #fff8e9;
}
.stock-form.is-dirty .stock-save {
background: #e0a83a;
border-color: #e0a83a;
}
.stock-form.is-dirty .stock-save:hover {
background: #c9922b;
border-color: #c9922b;
}
.stock-form.is-saved .stock-input {
border-color: #46b47c;
background: #ecfaf2;
transition: background-color .3s ease, border-color .3s ease;
}
.stock-form.is-saving { opacity: .6; pointer-events: none; }
/* Barra flotante "Guardar todo" */
.stock-savebar {
position: fixed;
left: 50%;
bottom: 1rem;
transform: translateX(-50%);
z-index: 1030;
display: flex;
align-items: center;
gap: .75rem;
padding: .55rem .6rem .55rem 1rem;
background: var(--brand-ink);
color: #fff;
border-radius: 999px;
box-shadow: 0 .5rem 1.5rem rgba(15, 31, 138, .25);
max-width: calc(100% - 1.5rem);
}
.stock-savebar[hidden] { display: none; }
/* Reserva espacio abajo para que la barra no tape la última fila / paginación. */
body.stock-savebar-open { padding-bottom: 4.5rem; }
.stock-savebar .stock-savebar-text {
display: inline-flex;
align-items: center;
gap: .45rem;
font-size: .9rem;
white-space: nowrap;
}
.stock-savebar .stock-dirty-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.55rem;
height: 1.55rem;
padding: 0 .4rem;
background: rgba(255, 255, 255, .18);
border-radius: 999px;
font-weight: 700;
font-size: .95rem;
line-height: 1;
}
.stock-savebar .stock-saveall {
white-space: nowrap;
flex-shrink: 0;
}
/* En pantallas chicas: barra de acción de ancho completo anclada abajo. */
@media (max-width: 575.98px) {
.stock-savebar {
left: 0;
right: 0;
bottom: 0;
transform: none;
width: 100%;
max-width: none;
gap: .75rem;
justify-content: space-between;
border-radius: .9rem .9rem 0 0;
padding: .7rem 1rem;
padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
}
body.stock-savebar-open { padding-bottom: 5.5rem; }
}
/* Touch first: en pantallas chicas todo a lo ancho y más grande. */
@media (max-width: 767.98px) {
.stock-editor-cell { padding-top: .35rem; }
.stock-controls {
display: flex;
flex-wrap: wrap;
width: 100%;
gap: .5rem;
}
.stock-stepper {
flex: 1 1 0;
min-width: 0;
}
.stock-stepper .stock-step {
flex: 0 0 3rem;
min-height: 3rem;
font-size: 1.6rem;
}
.stock-stepper .stock-input {
flex: 1 1 0;
width: auto;
min-width: 0;
min-height: 3rem;
font-size: 1.2rem;
}
.stock-save {
flex: 0 0 auto;
min-height: 3rem;
min-width: 3rem;
font-size: 1.05rem;
}
/* El texto de estado pasa debajo, ancho completo, para no romper la fila. */
.stock-status {
flex: 1 1 100%;
min-width: 0;
text-align: center;
order: 3;
}
.stock-status:empty { display: none; }
}