/* ========================================================================== Home A2RZ — Dashboard theme Verde olivo como primary (en vez del azul de Bootstrap) + acentos pastel/lechosos. Requiere Bootstrap 5.3 (modo oscuro nativo via data-bs-theme en ). ========================================================================== */ /* ---------- Paleta ---------- */ :root { --olive: #5f7340; --olive-hover: #4f6035; --olive-rgb: 95, 115, 64; --olive-soft: #e4ecd6; /* verde pastel lechoso */ --mint: #d7e6cf; --rose: #efd9d9; --rose-text: #a35555; --amber: #f3e8cf; --amber-text: #9a7a3a; --body-bg: #f5f6f1; --card-bg: #ffffff; --card-border: #e6e9df; --text: #2e3327; --sidebar-bg: #ffffff; --topbar-bg: rgba(255, 255, 255, 0.72); --soft-bg: #eef1e6; --muted: #6b7263; } [data-bs-theme="dark"] { --olive: #9bb070; --olive-hover: #aac082; --olive-rgb: 155, 176, 112; --olive-soft: #2f3a23; --mint: #26331f; --rose: #3a2727; --rose-text: #d9a8a8; --amber: #38301f; --amber-text: #d8bd8a; --body-bg: #171915; --card-bg: #1f2220; --card-border: #2e312c; --text: #d7d9d2; --sidebar-bg: #1b1d19; --topbar-bg: rgba(27, 29, 25, 0.72); --soft-bg: #262923; --muted: #9a9d8e; } /* ---------- Base ---------- */ body { background-color: var(--body-bg); color: var(--text); transition: background-color .2s ease, color .2s ease; } a { color: var(--olive); } /* ---------- Primary = verde olivo (override sin compilar SCSS) ---------- */ .text-primary { color: var(--olive) !important; } .bg-primary { background-color: var(--olive) !important; } .border-primary { border-color: var(--olive) !important; } .link-primary { color: var(--olive) !important; } .link-primary:hover { color: var(--olive-hover) !important; } .btn-primary { --bs-btn-bg: var(--olive); --bs-btn-border-color: var(--olive); --bs-btn-hover-bg: var(--olive-hover); --bs-btn-hover-border-color: var(--olive-hover); --bs-btn-active-bg: var(--olive-hover); --bs-btn-active-border-color: var(--olive-hover); --bs-btn-disabled-bg: var(--olive); --bs-btn-disabled-border-color: var(--olive); } .btn-outline-primary { --bs-btn-color: var(--olive); --bs-btn-border-color: var(--olive); --bs-btn-hover-bg: var(--olive); --bs-btn-hover-border-color: var(--olive); --bs-btn-active-bg: var(--olive); --bs-btn-active-border-color: var(--olive); --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; } .progress-bar { background-color: var(--olive); } .list-group-item.active { background-color: var(--olive); border-color: var(--olive); color: #fff; } .dropdown-item.active, .dropdown-item:active { background-color: var(--olive); color: #fff; } .nav-pills .nav-link.active { background-color: var(--olive); } /* Checkbox / radio y focus en olivo */ .form-check-input:checked { background-color: var(--olive); border-color: var(--olive); } .form-check-input:focus { border-color: var(--olive); box-shadow: 0 0 0 .25rem rgba(var(--olive-rgb), .25); } .form-control:focus, .form-select:focus { border-color: var(--olive); box-shadow: 0 0 0 .25rem rgba(var(--olive-rgb), .25); } a:focus, .btn:focus { box-shadow: 0 0 0 .25rem rgba(var(--olive-rgb), .25); } /* ---------- rounded-4 global (componentes base ~0.75rem) ---------- */ :root { --bs-border-radius: .75rem; --bs-border-radius-sm: .5rem; --bs-border-radius-lg: .75rem; --bs-border-radius-xl: .75rem; } .card, .btn, .form-control, .form-select, .badge, .progress, .list-group-item, .dropdown-menu, .input-group-text, .alert, .offcanvas { border-radius: .75rem !important; } /* ---------- Tarjetas ---------- */ .card { background-color: var(--card-bg); border-color: var(--card-border); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); } .card-header { background-color: transparent; border-bottom-color: var(--card-border); } .card-title { color: var(--text); font-weight: 600; } .text-muted, .secondary { color: var(--muted) !important; } /* KPI */ .kpi { overflow: hidden; } .kpi .kpi-icon { width: 2.6rem; height: 2.6rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .75rem; font-size: 1.25rem; background-color: var(--olive-soft); color: var(--olive); } .kpi .kpi-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; } /* Badges pastel lechosos */ .badge.bg-soft-green { background-color: var(--olive-soft); color: var(--olive); } .badge.bg-soft-mint { background-color: var(--mint); color: var(--olive); } .badge.bg-soft-rose { background-color: var(--rose); color: var(--rose-text); } .badge.bg-soft-amber { background-color: var(--amber); color: var(--amber-text); } /* Montos en tabla */ .amount-pos { color: var(--olive); font-weight: 600; } .amount-neg { color: var(--rose-text); font-weight: 600; } .table { --bs-table-bg: transparent; } .table > :not(caption) > * > * { color: var(--text); } .table thead th { color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; } .table-hover > tbody > tr:hover > * { background-color: var(--soft-bg); } /* ---------- Tablas de listado -> tarjetas apiladas en teléfono ---------- */ /* Patrón canónico (ver docs/UI_GUIDE.md): agregar la clase .table-cards a la y data-label="..." a cada

. Marcar la celda principal con .tc-title (oculta su label) y la celda de "sin resultados" (colspan) con .tc-empty. Por encima de 575.98px no cambia nada: sigue siendo tabla normal. */ @media (max-width: 575.98px) { .table-cards thead { display: none; } .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: 100%; } .table-cards tr { border: 1px solid var(--card-border); border-radius: .75rem; padding: .35rem .75rem; margin-bottom: .6rem; background: var(--card-bg); } .table-cards tr:last-child { margin-bottom: 0; } .table-cards td { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 0 !important; padding: .3rem 0; text-align: right; } .table-cards td::before { content: attr(data-label); color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; text-align: left; } .table-cards td.tc-title { font-weight: 600; font-size: 1rem; padding-top: .5rem; } .table-cards td.tc-title::before { content: none; } .table-cards td.tc-empty { justify-content: center; padding: 1rem 0; } .table-cards td.tc-empty::before { content: none; } /* Fila con solo la celda vacía (sin resultados): sin borde de tarjeta */ .table-cards tr:has(td.tc-empty) { border: 0; background: transparent; padding: 0; } /* Totales de pie de tabla (subtotal/total): línea compacta, no tarjeta */ .table-cards tfoot tr { border: 0; margin-bottom: 0; padding: .15rem 0; background: transparent; } } /* ---------- Captura de pedidos: ítems -> mini-formulario apilado en = md; en = lg abajo */ } .sidebar .brand { font-weight: 700; font-size: 1.15rem; color: var(--text); padding: 1.1rem 1rem; display: flex; align-items: center; gap: .55rem; border-bottom: 1px solid var(--card-border); } .sidebar .offcanvas-header { padding-top: max(1rem, env(safe-area-inset-top)); border-bottom: 1px solid var(--card-border); } .sidebar .dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--olive); display: inline-block; } .sidebar .nav-link { color: var(--text); border-radius: .65rem; padding: .55rem .85rem; margin: .15rem .5rem; display: flex; align-items: center; gap: .65rem; font-weight: 500; } .sidebar .nav-link i { font-size: 1.05rem; opacity: .8; } .sidebar .nav-link:hover { background-color: var(--soft-bg); color: var(--text); } .sidebar .nav-link.active { background-color: var(--olive-soft); color: var(--olive); font-weight: 600; } .sidebar .nav-section { text-transform: uppercase; font-size: .7rem; letter-spacing: .08em; color: var(--muted); padding: 1rem 1rem .35rem; font-weight: 700; } /* offcanvas-lg: vuelve estático en >= lg */ @media (min-width: 992px) { .offcanvas-lg.sidebar { width: 260px; } } .main-col { min-width: 0; } .topbar { position: sticky; top: 0; z-index: 1020; background-color: var(--topbar-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--card-border); padding: .7rem 1rem; /* Respeta el notch/isla en modo standalone (PWA instalada) */ padding-top: max(.7rem, env(safe-area-inset-top)); padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); } .topbar .brand-text { font-weight: 700; color: var(--text); } .topbar .brand-sub { font-size: .72rem; color: var(--muted); } .theme-toggle { width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .75rem; border: 1px solid var(--card-border); background: var(--card-bg); color: var(--text); font-size: 1.05rem; cursor: pointer; transition: background .15s ease; } .theme-toggle:hover { background: var(--soft-bg); } .avatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--olive); color: #fff; font-weight: 700; font-size: .85rem; } /* ---------- Chart SVG ---------- */ .chart-area path.area { fill: rgba(var(--olive-rgb), .18); } .chart-area path.line { fill: none; stroke: var(--olive); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; } .chart-area path.area-exp { fill: rgba(var(--rose-rgb, 165, 85, 85), .12); } .chart-area path.line-exp { stroke: var(--rose-text); stroke-dasharray: 4 4; } .chart-area .axis { stroke: var(--card-border); } .chart-area text { fill: var(--muted); font-size: 11px; } .chart-area .dot { fill: var(--olive); } @media (prefers-reduced-motion: no-preference) { .chart-area path.line { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw 1.4s ease forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } } .content-pad { padding: 1.25rem; padding-left: max(1.25rem, env(safe-area-inset-left)); padding-right: max(1.25rem, env(safe-area-inset-right)); padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); } @media (min-width: 768px) { .content-pad { padding: 1.75rem; padding-left: max(1.75rem, env(safe-area-inset-left)); padding-right: max(1.75rem, env(safe-area-inset-right)); padding-bottom: max(1.75rem, env(safe-area-inset-bottom)); } } /* ---------- Tap targets táctiles ---------- */ /* En pantallas táctiles, agranda los botones de icono-solo (acciones de fila en tablas/tarjetas) para facilitar el toque y separa pares editar/eliminar. */ @media (hover: none) and (pointer: coarse) { .table .btn-sm, .table-cards .btn-sm { min-width: 2.5rem; min-height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; } .table .btn-sm + form, .table-cards .btn-sm + form { margin-left: .35rem; } }