:root {
    --fondo: #f5f5f7;
    --borde: #e5e3e1;
    --texto-suave: #6b6461;
}
html { font-size: 15px; }
body { background: var(--fondo); min-height: 100vh; }
[hidden] { display: none !important; } /* gana sobre utilidades como .d-flex */
.table td, .table th { vertical-align: middle; }
.titulo-pagina { font-weight: 700; }

/* ---- Colores de marca (se configuran en Mantenimiento > Configuración) ---- */
.barra-marca { background: var(--marca-2); }
.barra-marca .nav-link.active { color: var(--marca-2-texto) !important; border-bottom: 3px solid var(--marca); }
.logo-nav { height: 34px; width: auto; border-radius: 6px; background: #fff; padding: 2px; }
.btn-marca { background: var(--marca); color: var(--marca-texto); border-color: var(--marca); }
.btn-marca:hover, .btn-marca:focus { background: var(--marca); color: var(--marca-texto); filter: brightness(.92); }
.btn-outline-marca { color: var(--marca); border-color: var(--marca); background: transparent; }
.btn-outline-marca:hover, .btn-outline-marca.active { background: var(--marca); color: var(--marca-texto); }
.text-marca { color: var(--marca) !important; }
.bg-marca { background: var(--marca) !important; color: var(--marca-texto) !important; }
.borde-marca { border-color: var(--marca) !important; }
.form-check-input:checked { background-color: var(--marca); border-color: var(--marca); }

/* ---- Tarjetas del panel ---- */
.kpi { border: 0; border-left: 4px solid var(--marca); border-radius: .6rem; }
.kpi .valor { font-size: 1.5rem; font-weight: 700; }
.kpi.alerta { border-left-color: #f0ad00; }
.kpi.ok { border-left-color: #198754; }
.stock-bajo { color: #dc3545; font-weight: 600; }
/* Insumos con datos por confirmar con el cliente */
.por-confirmar { color: #8a5300; font-weight: 600; }
#tabla tbody tr:has(.por-confirmar) > td:first-child { box-shadow: inset 4px 0 0 #f0ad00; }
#tabla.solo-por-confirmar tbody tr:not(:has(.por-confirmar)) { display: none; }

/* ---- Login ---- */
.login-fondo { background: linear-gradient(135deg, var(--marca-2) 0%, var(--marca) 100%); min-height: 100vh; }
.login-card { width: 100%; max-width: 380px; border-radius: 1rem; }
.login-logo { max-height: 90px; max-width: 200px; }

/* ---- Punto de venta ---- */
.pos { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 1rem; align-items: start; }
.pos-categorias { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; }
.pos-categorias .btn { white-space: nowrap; border-radius: 999px; }
.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .9rem; }
.producto-card {
    border: 1px solid var(--borde); border-radius: 14px; overflow: hidden; background: #fff;
    text-align: left; padding: 0; cursor: pointer; transition: transform .12s, box-shadow .12s;
    display: flex; flex-direction: column; position: relative;
}
.producto-card.agotado { opacity: .55; }
.producto-card.agotado .producto-foto { filter: grayscale(1); }
.producto-top {
    position: absolute; top: .5rem; left: .5rem; background: rgb(255 255 255 / .92); color: #b3261e;
    font-size: .72rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; box-shadow: 0 1px 4px rgb(0 0 0 / .15);
}
.producto-rapido {
    position: absolute; top: .45rem; right: .45rem; width: 2rem; height: 2rem; border-radius: 50%; border: 0;
    background: var(--marca); color: var(--marca-texto); display: grid; place-items: center; box-shadow: 0 2px 6px rgb(0 0 0 / .25);
}
.producto-rapido:hover { filter: brightness(.9); }
.producto-stock { font-size: .72rem; font-weight: 600; color: #a15c00; background: #fff4d6; border-radius: 999px; padding: 0 .45rem; }
.producto-stock.agotado { color: #fff; background: #6c757d; }
.comanda-mini { border-left: 4px solid #adb5bd; }
.comanda-mini.PREPARANDO { border-left-color: #f0ad00; }
.comanda-mini.LISTO { border-left-color: #198754; }
.producto-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgb(0 0 0 / .08); }
.producto-card:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; }
.producto-foto { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; background: #f0ece9; display: block; }
.producto-foto.sin-foto { display: grid; place-items: center; font-size: 3rem; background: linear-gradient(135deg, #fff4ee, #f6e3da); }
.producto-info { padding: .6rem .75rem .75rem; display: grid; gap: .15rem; }
.producto-nombre { font-weight: 600; line-height: 1.2; }
.producto-precio { color: var(--marca); font-weight: 700; }
.producto-desc { color: var(--texto-suave); font-size: .8rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pedido { position: sticky; top: 1rem; }
.pedido .lineas { max-height: 38vh; overflow-y: auto; }
.pedido .linea small { color: var(--texto-suave); }
.segmentado .btn { flex: 1; }
@media (max-width: 991px) { .pos { grid-template-columns: 1fr; } .pedido { position: static; } }

/* ---- Domicilios ---- */
.domicilio { border-left: 4px solid #adb5bd; }
.domicilio.PENDIENTE { border-left-color: #f0ad00; }
.domicilio.EN_CAMINO { border-left-color: #0d6efd; }
.domicilio.ENTREGADO { border-left-color: #198754; opacity: .8; }
.domicilio.tarde { box-shadow: 0 0 0 2px #dc3545; }
.tablero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.tablero-col { background: #ecebea; border-radius: .8rem; padding: .75rem; min-height: 200px; }
.tablero-col > h6 { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; }
.tablero-col .card + .card { margin-top: .6rem; }
@media (max-width: 991px) { .tablero { grid-template-columns: 1fr; } }

/* ---- Cocina (comandas) ---- */
.cocina .tablero-col { min-height: 70vh; }
.comanda { border: 0; border-top: 6px solid #198754; }
.comanda.medio { border-top-color: #f0ad00; }
.comanda.tarde { border-top-color: #dc3545; }
.comanda .reloj { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.1rem; }
.comanda.tarde .reloj { color: #dc3545; }
.comanda .item { font-size: 1.05rem; padding: .25rem 0; border-bottom: 1px dashed var(--borde); }
.comanda .item:last-child { border-bottom: 0; }
.comanda .cant { display: inline-block; min-width: 2rem; font-weight: 800; }
.comanda .opciones { color: var(--texto-suave); font-size: .88rem; padding-left: 2rem; }
.comanda .nota { color: #b3261e; font-weight: 600; font-size: .88rem; padding-left: 2rem; }
.comanda .editable { font-size: .75rem; }

/* ---- Configuración ---- */
.vista-previa { border-radius: .6rem; overflow: hidden; border: 1px solid var(--borde); }
.color-input { width: 3.2rem; height: 2.4rem; padding: .2rem; }

/* ---- Impresión (Exportar a PDF desde el navegador) ---- */
@media print {
    .no-imprimir, nav, .toast-container, .btn { display: none !important; }
    body { background: #fff; }
    main { padding: 0 !important; }
    .card { border: 0 !important; box-shadow: none !important; }
}

/* ---- Utilidades text-bg-* (vienen en Bootstrap 5.2; este proyecto usa 5.1) ---- */
.text-bg-primary   { color: #fff !important; background-color: #0d6efd !important; }
.text-bg-secondary { color: #fff !important; background-color: #6c757d !important; }
.text-bg-success   { color: #fff !important; background-color: #198754 !important; }
.text-bg-danger    { color: #fff !important; background-color: #dc3545 !important; }
.text-bg-warning   { color: #000 !important; background-color: #ffc107 !important; }
.text-bg-info      { color: #000 !important; background-color: #0dcaf0 !important; }
.text-bg-light     { color: #000 !important; background-color: #f8f9fa !important; }
.text-bg-dark      { color: #fff !important; background-color: #212529 !important; }

/* Configurable modules must stay hidden even with Bootstrap display classes. */
[hidden] { display: none !important; }