/* ====================================================================
   COOKINGSOFT - Tema de marca (basado en el logo)
   Paleta:  naranja #f7931e · ámbar #fbb03b · naranja oscuro #e2660a
            grafito #2e2e2e · gris #4a4a4a · plata #e9ecef
            verde (éxito/caja) #2a9d8f
==================================================================== */
:root {
    --cs-orange: #f7931e;
    --cs-orange-dark: #e2660a;
    --cs-amber: #fbb03b;
    --cs-graphite: #2e2e2e;
    --cs-gray: #4a4a4a;
    --cs-silver: #e9ecef;
    --cs-green: #2a9d8f;
    --cs-bg: #f4f5f7;
    --cs-radius: 1rem;
    --cs-shadow: 0 .6rem 1.6rem rgba(46,46,46,.10);
    --cs-shadow-sm: 0 .25rem .8rem rgba(46,46,46,.08);
    --cs-grad: linear-gradient(135deg, #f7931e 0%, #fbb03b 100%);
    --cs-grad-dark: linear-gradient(135deg, #2e2e2e 0%, #4a4a4a 100%);

    /* Overrides Bootstrap */
    --bs-primary: #f7931e;
    --bs-primary-rgb: 247,147,30;
    --bs-link-color: #e2660a;
    --bs-link-hover-color: #b85408;
}

body { font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--cs-graphite); background: var(--cs-bg); }
h1,h2,h3,h4,h5,h6,.navbar-brand,.kpi-value,.display-1,.display-4,.display-5,.display-6{
    font-family:'Poppins','Inter',sans-serif; }
.fw-bold,.fw-semibold{ letter-spacing:-.01em; }
a { text-decoration: none; }

/* ---------- Botones ---------- */
.btn { border-radius:.7rem; font-weight:600; }
.btn-primary, .btn-danger {
    --bs-btn-bg: var(--cs-orange); --bs-btn-border-color: var(--cs-orange);
    --bs-btn-hover-bg: var(--cs-orange-dark); --bs-btn-hover-border-color: var(--cs-orange-dark);
    --bs-btn-active-bg: var(--cs-orange-dark); --bs-btn-active-border-color: var(--cs-orange-dark);
    color:#fff; }
.btn-primary:hover, .btn-danger:hover { color:#fff; }
.btn-outline-primary, .btn-outline-danger {
    --bs-btn-color: var(--cs-orange-dark); --bs-btn-border-color: var(--cs-orange);
    --bs-btn-hover-bg: var(--cs-orange); --bs-btn-hover-border-color: var(--cs-orange);
    --bs-btn-hover-color:#fff; }
.btn-success { --bs-btn-bg: var(--cs-green); --bs-btn-border-color: var(--cs-green);
    --bs-btn-hover-bg:#23867a; --bs-btn-hover-border-color:#23867a; }
.btn-dark { --bs-btn-bg: var(--cs-graphite); --bs-btn-border-color: var(--cs-graphite); }
.text-orange, .text-primary, .text-danger { color: var(--cs-orange-dark) !important; }
.bg-orange { background: var(--cs-orange) !important; color:#fff; }
.badge.bg-primary { background: var(--cs-orange) !important; }

/* ---------- Tarjetas / superficies ---------- */
.card { border-radius: var(--cs-radius); border:1px solid rgba(46,46,46,.05); }
.shadow-sm { box-shadow: var(--cs-shadow-sm) !important; }
.shadow { box-shadow: var(--cs-shadow) !important; }
.badge { font-weight:600; }
/* Contraste de badges: texto oscuro sobre fondos claros */
.badge.bg-warning, .badge.bg-info, .badge.bg-light { color:#2e2e2e !important; }
.badge.bg-secondary, .badge.bg-success, .badge.bg-primary,
.badge.bg-danger, .badge.bg-dark { color:#fff !important; }
.form-control, .form-select { border-radius:.6rem; }
.form-control:focus, .form-select:focus {
    border-color: var(--cs-amber); box-shadow: 0 0 0 .2rem rgba(247,147,30,.18); }

/* ---------- Navbar ---------- */
.cs-navbar { background: var(--cs-grad-dark) !important; }
.cs-navbar .navbar-brand img { height:34px; width:auto; }

/* ---------- Sidebar ---------- */
.sidebar { min-height: calc(100vh - 56px); background:#fff;
    box-shadow: inset -1px 0 0 rgba(0,0,0,.05); }
.sidebar .nav-link { color:#5a5a5a; border-radius:.7rem; margin:3px 10px; font-weight:500;
    display:flex; align-items:center; transition:all .15s ease; }
.sidebar .nav-link:hover { background: var(--cs-silver); color: var(--cs-graphite); transform:translateX(2px); }
.sidebar .nav-link.active { background: var(--cs-grad); color:#fff; box-shadow:0 .3rem .8rem rgba(247,147,30,.4); }
.sidebar .nav-link i { margin-right:.6rem; font-size:1.05rem; width:1.2rem; text-align:center; }
.sidebar .nav-heading { font-size:.68rem; text-transform:uppercase; letter-spacing:.09em;
    color:#a0a4ab; padding:.7rem 1.4rem .25rem; font-weight:700; }

/* ---------- KPI ---------- */
.kpi-card { border:none; color:#fff; overflow:hidden; position:relative; border-radius:var(--cs-radius); }
.kpi-card .kpi-icon{ position:absolute; right:-6px; bottom:-12px; font-size:5rem; opacity:.18; }
.kpi-card .kpi-value{ font-size:1.9rem; font-weight:700; line-height:1.1; }
.kpi-card .kpi-label{ font-size:.76rem; text-transform:uppercase; letter-spacing:.05em; opacity:.92; }
.kpi-orange{ background: var(--cs-grad); }
.kpi-green { background: linear-gradient(135deg,#2a9d8f,#1f7a6f); }
.kpi-blue  { background: linear-gradient(135deg,#3a6ea5,#284b77); }
.kpi-amber { background: linear-gradient(135deg,#fbb03b,#f7931e); }
.kpi-dark  { background: var(--cs-grad-dark); }
.kpi-red   { background: linear-gradient(135deg,#ef5350,#c62828); }
/* alias para vistas previas */
.kpi-blue.kpi-card{}

/* ---------- Landing / login ---------- */
.hero-landing{ min-height:100vh; background:
    radial-gradient(circle at 15% 20%, rgba(251,176,59,.25), transparent 45%),
    var(--cs-grad-dark); }
.login-bg{ min-height:100vh; background:
    radial-gradient(circle at 85% 15%, rgba(247,147,30,.30), transparent 45%),
    var(--cs-grad-dark); }
.login-bg .card, .login-card{ border-radius:1.4rem; }
.brand-logo-lg{ max-width:200px; height:auto; }

/* ---------- Menú del cliente ---------- */
.menu-body{ background: var(--cs-bg); padding-bottom:96px; }
.menu-hero{ position:relative; color:#fff; padding:1.4rem 0 1.1rem;
    background: var(--cs-grad-dark); border-radius:0 0 1.6rem 1.6rem; box-shadow:var(--cs-shadow); }
.menu-hero::after{ content:""; position:absolute; inset:0; border-radius:0 0 1.6rem 1.6rem;
    background: radial-gradient(circle at 90% 0%, rgba(247,147,30,.35), transparent 55%); }
.menu-hero > .container{ position:relative; z-index:1; }
.menu-logo{ width:56px; height:56px; object-fit:cover; border-radius:1rem; background:#fff; padding:4px; }

.menu-search .form-control{ border-radius:2rem; padding-left:2.6rem; }
.menu-search .bi{ position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:#9aa0a6; }

.menu-cat-nav{ position:sticky; top:0; z-index:1020; background:rgba(244,245,247,.95);
    backdrop-filter:blur(8px); border-bottom:1px solid #e4e6ea; }
.menu-cat-nav .chip{ white-space:nowrap; border-radius:2rem; font-weight:600; font-size:.85rem;
    border:1.5px solid #e0e2e6; color:#5a5a5a; padding:.35rem .9rem; background:#fff; transition:all .15s; }
.menu-cat-nav .chip.active{ background:var(--cs-grad); color:#fff; border-color:transparent; }

.cat-section{ scroll-margin-top:64px; }
.cat-title{ display:flex; align-items:center; gap:.5rem; font-weight:700; color:var(--cs-graphite); }
.cat-title .cat-ico{ width:34px; height:34px; border-radius:.7rem; display:flex; align-items:center;
    justify-content:center; background:var(--cs-grad); color:#fff; font-size:1.05rem; }

.product-card{ transition:transform .12s ease, box-shadow .12s ease; border:none; overflow:hidden; height:100%; }
.product-card:hover{ transform:translateY(-2px); box-shadow:var(--cs-shadow); }
.product-img{ width:100%; height:100%; max-height:130px; object-fit:cover; aspect-ratio:1/1; }
.product-desc{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-card .add-to-cart{ border-radius:2rem; }

/* Barra carrito flotante */
.cart-bar{ position:fixed; bottom:0; left:0; right:0; z-index:1030; padding:.7rem 1rem;
    max-width:780px; margin:0 auto; }
.cart-bar .btn{ border-radius:1.1rem; box-shadow:0 .6rem 1.6rem rgba(42,157,143,.5); }
.offcanvas-bottom{ border-radius:1.2rem 1.2rem 0 0; }
.type-selector .btn-check:checked + .btn{ box-shadow:0 .3rem .8rem rgba(247,147,30,.4); }

/* ---------- Seguimiento ---------- */
.progress-tracker{ position:relative; }
.progress-tracker .step{ position:relative; z-index:2; }
.progress-tracker .step-dot{ width:36px; height:36px; border-radius:50%; background:#dee2e6;
    color:#fff; display:flex; align-items:center; justify-content:center; transition:all .3s ease; }
.progress-tracker .step.done .step-dot{ background:var(--cs-green); transform:scale(1.06); }
.progress-tracker .step.current .step-dot{ background:var(--cs-orange); animation:pulse 1.4s infinite; }
.progress-tracker .step-label{ display:block; font-size:.66rem; margin-top:5px; color:#6c757d; }
.progress-tracker::before{ content:""; position:absolute; top:18px; left:10%; right:10%;
    height:3px; background:#dee2e6; z-index:1; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(247,147,30,.5);} 70%{ box-shadow:0 0 0 .6rem rgba(247,147,30,0);} 100%{ box-shadow:0 0 0 0 rgba(247,147,30,0);} }

/* ---------- Tarjetas de pedido (paneles) ---------- */
.order-card-wrap .card{ border-left:5px solid var(--cs-orange); }
.order-card-wrap .js-items li{ padding:3px 0; border-bottom:1px dashed #eef0f3; }
.order-note{ color:var(--cs-orange-dark); font-size:.8rem; }
.order-card-wrap .card-header{ background:#fff; border-bottom:1px solid #f0f1f4; }
@keyframes pop{ from{ transform:scale(.94); opacity:0;} to{ transform:scale(1); opacity:1;} }
.order-card-wrap{ animation:pop .25s ease; }

/* ---------- Tablas ---------- */
.table>:not(caption)>*>*{ padding:.85rem .9rem; }
.table thead th{ font-size:.76rem; text-transform:uppercase; letter-spacing:.03em; color:#6c757d; }

/* ---------- QR ---------- */
.qr-print-card{ border:2px dashed #ced4da; border-radius:1.2rem; }

/* ---------- Tirilla / ticket 80mm ---------- */
.ticket{ width:280px; margin:0 auto; font-family:'Courier New', monospace; color:#000; font-size:13px; }
.ticket h1{ font-family:inherit; font-size:18px; }
.ticket .t-line{ border-top:1px dashed #000; margin:6px 0; }
.ticket table{ width:100%; }
.ticket .t-right{ text-align:right; }

/* Scroll horizontal limpio */
.scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.scroll-x::-webkit-scrollbar{ height:5px; }
.scroll-x::-webkit-scrollbar-thumb{ background:#ced4da; border-radius:3px; }

/* ---------- Alerts ---------- */
.alert { border:none; border-radius:.8rem; box-shadow:var(--cs-shadow-sm); border-left:5px solid transparent; }
.alert-success { background:#e8f7f4; color:#1f6f64; border-left-color:var(--cs-green); }
.alert-danger  { background:#fdeceb; color:#a52823; border-left-color:#ef5350; }
.alert-info    { background:#eaf2fb; color:#2c5d8f; border-left-color:#3a6ea5; }
.alert-warning { background:#fff4e3; color:#9a5b00; border-left-color:var(--cs-orange); }

/* Aparición suave + icono alineado */
.alert { animation: alertIn .25s ease; }
.alert .btn-close { padding: .9rem; }
@keyframes alertIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

/* ---------- Toasts ---------- */
.toast { border-radius:.8rem; animation: toastIn .25s ease; }
@keyframes toastIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:none; } }

/* ---------- Modales ---------- */
.modal-content { border:none; border-radius:1rem; box-shadow:0 1rem 3rem rgba(46,46,46,.22); }
.modal-header { border-bottom:1px solid #eef0f3; }
.modal-footer { border-top:1px solid #eef0f3; }

/* ---------- Estados vacíos ---------- */
.empty-state { text-align:center; padding:3rem 1rem; color:#9aa0a6; }
.empty-state i { font-size:3rem; opacity:.55; }

/* ---------- Switches e inputs ---------- */
.form-switch .form-check-input:checked { background-color:var(--cs-orange); border-color:var(--cs-orange); }
.form-check-input:focus { border-color:var(--cs-amber); box-shadow:0 0 0 .2rem rgba(247,147,30,.18); }
.input-group-text { background:#f1f3f5; border-radius:.6rem 0 0 .6rem; }

/* ---------- Títulos de página ---------- */
main h1.h3 { position:relative; }

/* ---------- Tarjetas tipo enlace ---------- */
a.card, .card-link-hover { transition:transform .12s ease, box-shadow .12s ease; }
a.card:hover, .card-link-hover:hover { transform:translateY(-2px); box-shadow:var(--cs-shadow); }

/* ---------- Botón warning (texto oscuro legible) ---------- */
.btn-warning { --bs-btn-bg:var(--cs-amber); --bs-btn-border-color:var(--cs-amber);
    --bs-btn-hover-bg:#f0a52e; --bs-btn-hover-border-color:#f0a52e; --bs-btn-color:#2e2e2e; --bs-btn-hover-color:#2e2e2e; }

/* ---------- Impresión de un elemento dentro de un modal ---------- */
@media print {
    body.cs-printing * { visibility:hidden !important; }
    body.cs-printing .cs-print-target, body.cs-printing .cs-print-target * { visibility:visible !important; }
    body.cs-printing .cs-print-target { position:absolute; left:0; top:0; width:100%; }
}

/* ---------- Mayúsculas de marca (botones y títulos) ---------- */
.btn { text-transform:uppercase; letter-spacing:.03em; font-size:.85rem; }
.btn-lg { font-size:1rem; }
.btn-sm { font-size:.74rem; }
main h1, main h1.h3, .modal-title, .card-header, .offcanvas-title {
    text-transform:uppercase; letter-spacing:.02em;
}
main h1 { color:var(--cs-graphite); }
main h1 .bi { color:var(--cs-orange); }

/* ---------- Chip de usuario (navbar) ---------- */
.user-chip { display:flex; align-items:center; gap:.55rem; padding:.25rem .6rem .25rem .25rem;
    background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.15); border-radius:2rem; }
.user-chip .avatar { width:32px; height:32px; border-radius:50%; background:var(--cs-grad);
    color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; }
.user-chip .u-name { color:#fff; font-weight:600; line-height:1; font-size:.85rem; }
.user-chip .u-role { color:rgba(255,255,255,.6); font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; }

/* ---------- Footer del sidebar (logout) ---------- */
.sidebar-footer { border-top:1px solid #eef0f3; padding:.8rem 1rem; margin-top:auto; }
.sidebar-footer .btn { width:100%; }

/* ---------- Documento imprimible en modal (QR, etc.) ---------- */
#docArea .cs-doc { margin:0 auto; }

/* ---------- Sidebar offcanvas (móvil/PWA) ---------- */
@media (max-width: 767.98px){
    .sidebar.offcanvas-md { width:78%; max-width:300px; }
}

/* ---------- Pestañas (nav-pills) con la marca, no azul ---------- */
.nav-pills { --bs-nav-pills-link-active-bg: var(--cs-orange); }
.nav-pills .nav-link { color: var(--cs-gray); font-weight: 600; border:1px solid #e3e6ea; margin-right:.4rem; }
.nav-pills .nav-link:hover { color: var(--cs-orange-dark); border-color:var(--cs-amber); }
.nav-pills .nav-link.active { color:#fff; background: var(--cs-grad); border-color:transparent;
    box-shadow:0 .25rem .7rem rgba(247,147,30,.35); }
/* Enlaces generales en color de marca (no azul Bootstrap) */
a { color: var(--cs-orange-dark); }
a:hover { color: var(--cs-orange); }

/* ---------- Refinamientos PRO ---------- */
/* Sidebar fijo en escritorio */
@media (min-width: 768px){
    #sidebar .offcanvas-body{ position:sticky; top:56px; height:calc(100vh - 56px); overflow-y:auto; }
}
/* KPI con leve elevación al pasar */
.kpi-card{ transition:transform .15s ease, box-shadow .15s ease; }
.kpi-card:hover{ transform:translateY(-3px); }
/* Encabezados de tarjeta consistentes */
.card-header{ font-weight:600; border-bottom:1px solid #eef0f3; }
/* Filas vencidas más suaves y de marca */
.table-danger, .table-danger > * { --bs-table-bg:#fdece9; --bs-table-color:#8a2b22; }
/* Botones con micro-sombra */
.btn-primary, .btn-success, .btn-dark{ box-shadow:0 .25rem .6rem rgba(0,0,0,.10); }
.btn-primary:active, .btn-success:active{ transform:translateY(1px); }
/* Inputs y selects un poco más altos/cómodos */
.form-control, .form-select{ padding-top:.5rem; padding-bottom:.5rem; }
/* Entrada suave del contenido del panel */
main { animation: fadeUp .25s ease; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
/* Avatares/íconos de tabla */
.table img.rounded{ box-shadow:0 .15rem .4rem rgba(0,0,0,.08); }
/* Chips de estado de pedido más legibles */
.badge.fs-5{ letter-spacing:.02em; }
/* Scrollbar fina general */
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-thumb{ background:#cfd4da; border-radius:6px; }
*::-webkit-scrollbar-thumb:hover{ background:#b6bcc4; }

/* ---------- Responsive ---------- */
@media (max-width: 575.98px){
    .kpi-card .kpi-value{ font-size:1.5rem; }
    .menu-logo{ width:46px; height:46px; }
}
@media print{
    .no-print{ display:none !important; }
    body{ background:#fff; }
    .ticket{ width:auto; }
}