html, body {
height: 100%;
margin: 0;
overflow: hidden; /* Previene el scroll general para el layout de 2 columnas */
font-family: Arial, sans-serif; /* Fuente general */
}
/* Navbar superior */
.navbar-brand img {
height: 30px;
width: auto;
}
.navbar-text {
font-weight: bold;
color: #333;
}
/* Layout principal */
.row.flex-grow-1 {
height: calc(100% - 56px); /* Altura total - altura del navbar (aprox. 56px) */
}
/* Columna izquierda: Detalles del pedido */
.bg-light-grey {
background-color: #f8f9fa; /* Fondo ligeramente gris para la columna izquierda */
}
.order-items-list {
background-color: #f0f0f0; /* Fondo más claro para la lista de ítems */
flex-grow: 1; /* Permite que la lista ocupe el espacio disponible */
overflow-y: auto; /* Scroll si hay muchos ítems */
}
.item-card {
background-color: #fff;
border: 1px solid #dee2e6;
border-radius: .25rem;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.item-card.active {
border-color: #0d6efd; /* Color de borde de Bootstrap primary */
box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25); /* Sombra de foco de Bootstrap primary */
background-color: #e2f0ff; /* Un azul muy claro */
}
.item-card:hover {
transform: translateY(-2px);
box-shadow: 0 .25rem .5rem rgba(0,0,0,.1);
}
.item-price {
font-weight: bold;
color: #28a745; /* Bootstrap green */
}
.order-summary {
background-color: #fff;
border-top: 1px solid #dee2e6;
}
.total-amount {
color: #28a745; /* Un verde más oscuro */
font-weight: bold;
}
.loyalty-points {
background-color: #e9ecef; /* Gris claro */
border-radius: .5rem;
}
.customer-name-tag {
background-color: #6f42c1; /* Púrpura de Bootstrap */
color: white;
font-weight: bold;
border-radius: .25rem;
padding: .5rem .75rem;
display: flex;
align-items: center;
}
.customer-name-tag i {
font-size: 1.2em;
margin-right: .5rem;
}
.numeric-keypad .btn {
font-size: 1.2em;
font-weight: bold;
padding: .75rem;
}
.numeric-keypad .action-btn {
background-color: #0d6efd; /* Azul primario */
border-color: #0d6efd;
}
.btn-payment {
background-color: #6f42c1; /* Púrpura */
border-color: #6f42c1;
font-size: 1.3em;
padding: 1rem;
font-weight: bold;
}
.btn-payment:hover {
background-color: #5b36a1;
border-color: #5b36a1;
}
/* Columna derecha: Productos y categorías */
.categories-bar {
background-color: #f8f9fa;
border-bottom: 1px solid #dee2e6;
}
.category-btn.active {
background-color: #0d6efd;
color: white;
border-color: #0d6efd;
}
.product-grid {
flex-grow: 1;
overflow-y: auto; /* Scroll si hay muchos productos */
}
.product-card .card {
border: 1px solid #dee2e6;
border-radius: .25rem;
box-shadow: 0 .0625rem .125rem rgba(0,0,0,.05);
transition: all 0.2s ease-in-out;
cursor: pointer;
}
.product-card .card:hover {
transform: translateY(-3px);
box-shadow: 0 .25rem .5rem rgba(0,0,0,.1);
}
.product-card .card-img-top {
height: 120px; /* Altura fija para las imágenes de producto */
object-fit: contain; /* Asegura que la imagen se ajuste sin cortarse */
}
.product-card .card-title {
font-size: 0.95rem;
line-height: 1.2;
min-height: 2.4em; /* Espacio para 2 líneas */
}
.product-card .card-text {
font-size: 1.1rem;
}
/* Overrides y utilidades de Bootstrap */
.gx-0 {
--bs-gutter-x: 0;
}
.gy-0 {
--bs-gutter-y: 0;
}
.scrollMain{
overflow-y: auto;
}
.scrollCar{
overflow-y: auto;
height: calc(100vh - 10vh);
}
.colorNav{
background-color: #D35400;
}
.colorClose{
color: brown;
}
.colorPlus{
color: #28a745;
}
/* =========================
THEMES / SKINS (por rol)
Classes en :
- theme-default
- theme-dark
- theme-pro
========================= */
body.app-theme {
background: var(--app-bg) !important;
color: var(--app-text) !important;
}
/* FORMACON — marca: azul marino #0E224F, rojo acento #C53131 */
body.theme-default {
--formacon-navy: #0e224f;
--formacon-red: #c53131;
--app-bg: #f4f6fb;
--app-text: #1a1d2e;
--app-surface: #ffffff;
--app-border: #dfe3eb;
--app-navbar-bg: #0e224f;
--app-navbar-text: #ffffff;
--app-accent: #c53131;
--app-accent-soft: rgba(197, 49, 49, 0.12);
--bs-primary: #0e224f;
--bs-primary-rgb: 14, 34, 79;
--bs-link-color: #c53131;
--bs-link-hover-color: #9e2626;
}
body.theme-dark {
--formacon-navy: #0e224f;
--formacon-red: #c53131;
--app-bg: #0a1628;
--app-text: #e8eaef;
--app-surface: #111d33;
--app-border: #243652;
--app-navbar-bg: #0e224f;
--app-navbar-text: #ffffff;
--app-accent: #e05252;
--app-accent-soft: rgba(224, 82, 82, 0.15);
--bs-primary: #3d5a8a;
--bs-primary-rgb: 61, 90, 138;
--bs-link-color: #f07171;
--bs-link-hover-color: #ff9a9a;
}
body.theme-pro {
--formacon-navy: #0e224f;
--formacon-red: #c53131;
--app-bg: #f0f3f9;
--app-text: #0e224f;
--app-surface: #ffffff;
--app-border: #d4dce8;
--app-navbar-bg: #0e224f;
--app-navbar-text: #ffffff;
--app-accent: #c53131;
--app-accent-soft: rgba(197, 49, 49, 0.1);
--bs-primary: #0e224f;
--bs-primary-rgb: 14, 34, 79;
--bs-link-color: #c53131;
--bs-link-hover-color: #9e2626;
}
/* Navbar / offcanvas overrides */
body.app-theme .navbar {
background-color: var(--app-navbar-bg) !important;
}
body.app-theme .navbar .navbar-brand,
body.app-theme .navbar .nav-link,
body.app-theme .navbar .navbar-text,
body.app-theme .navbar .dropdown-toggle,
body.app-theme .navbar span,
body.app-theme .navbar strong {
color: var(--app-navbar-text) !important;
}
body.theme-dark .dropdown-menu {
background: #0f172a;
border: 1px solid #1f2937;
}
body.theme-dark .dropdown-item {
color: #e5e7eb;
}
body.theme-dark .dropdown-item:hover {
background: #111827;
}
/* Bootstrap surfaces */
body.theme-dark .card,
body.theme-dark .modal-content,
body.theme-dark .offcanvas {
background-color: var(--app-surface) !important;
color: var(--app-text) !important;
border-color: var(--app-border) !important;
}
body.theme-dark .table {
color: var(--app-text) !important;
}
/* Botón / acento principal (rojo FORMACON) */
.btn-formacon-accent {
background-color: var(--app-accent, #c53131) !important;
border-color: var(--app-accent, #c53131) !important;
color: #fff !important;
}
.btn-formacon-accent:hover {
filter: brightness(0.92);
color: #fff !important;
}
.bg-formacon-red {
background-color: var(--app-accent, #c53131) !important;
}
.text-formacon-navy {
color: var(--formacon-navy, #0e224f) !important;
}
.border-formacon-accent {
border-color: var(--app-accent, #c53131) !important;
}