/* ===================== ESTILOS GLOBALES ===================== */


/* ===== ASIDE COL ===== */
#aside-col { background-color: #f9fafb; border-right: 1px solid #e5e7eb; width: 200px; min-width: 200px; max-width: 200px; padding: 0 8px !important; }
@media (max-width:1200px){ #aside-col{ width:180px; min-width:180px; max-width:180px; } }
@media (max-width: 992px){ #aside-col{ width:160px; min-width:160px; max-width:160px; } }
@media (max-width: 768px){ #aside-col{ display:none; } }


/* ===== SIDEBAR ===== */
#aside-col { padding: 0 8px !important; }
.sidebar { position: sticky; top: 70px; max-height: calc(100vh - 80px); overflow: auto; padding-top: 10px; }
.sidebar-title { background: #1E3A8A; color: #fff; text-align: center; margin: 0; padding: 6px 8px; font-size: 14px; }
.sidebar-pill { background: #a00000; color: #fff; text-align: center; padding: 6px 8px; font-size: 12px; margin: 0; }



/* ===== TARJETAS ===== */
.card { border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; transition: all 0.2s ease-in-out; box-shadow: 0 1px 3px rgba(0,0,0,.08); background-color: #fff; }
.card:hover { transform: translateY(-3px); box-shadow: 0 3px 8px rgba(0,0,0,.15); }
.card-body { padding: .45rem .35rem; }
.card-img-top { width: 100%; height: auto; display: block; object-fit: contain; background-color: transparent; padding: 10px; }
.card-title { font-size: 13px; color: #111827; text-align: center; font-weight: 600; margin: 0; box-sizing: border-box; width: 100%; display: block; white-space: normal; word-break: normal; overflow-wrap: break-word; }


/* ===== GRID ===== */
.row-tight > [class^="col-"], .row-tight > [class*=" col-"] { padding-left: 12px; padding-right: 12px; }
@media (max-width: 768px){ .row-tight{ margin-left:-8px; margin-right:-8px; } .row-tight > [class^="col-"], .row-tight > [class*=" col-"]{ padding-left:8px; padding-right:8px; } }
@media (max-width: 576px){ .row-tight{ margin-left:-4px; margin-right:-4px; } .row-tight > [class^="col-"], .row-tight > [class*=" col-"]{ padding-left:4px; padding-right:4px; } }
@media (max-width: 360px){ .row-tight{ margin-left:-3px; margin-right:-3px; } .row-tight > [class^="col-"], .row-tight > [class*=" col-"]{ padding-left:3px; padding-right:3px; } }



/* --- Base --- */
html, body { height: 100%; margin: 0; }

/* ===== NAVBAR ===== */
.navbar {
  background-color: #343a40 !important;
  min-height: 56px;
  overflow: visible;
  z-index: 1030;        /* debajo del backdrop (1040) y modal (1050) de Bootstrap; antes 9999 tapaba los modales */
  padding: 0 !important;
  position: sticky;
  top: 0;
}
.navbar-dark .navbar-nav .nav-link { color: #e5e7eb !important; }
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus { color: #fff !important; }
.navbar.sticky-top { z-index: 1030; }
.dropdown-menu { z-index: 2000; }
.navbar { min-height: 56px; overflow: visible; }
.navbar .dropdown { position: relative; }
.navbar .dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: .25rem;
  z-index: 2000;
}

.navbar .nav-item.px-2 {
    padding-left: 8px !important;
    padding-right: 8px !important;
}







/*.navbar-nav { align-items: center; flex-wrap: nowrap; }*/
.navbar-brand {
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    margin-right: 0.25rem;
}

/*.navbar-brand .brand-text { font-weight: 600; letter-spacing: .2px; font-size: 1rem; }*/

.navbar-brand .brand-text {
    font-weight: 600;
    letter-spacing: .2px;
    font-size: 0.85rem;
    color: #1a1a1a;
    line-height: 1.5;
    margin-top: -2px;
}

/* ── Botón de inicio (pastilla blanca: el fondo blanco del logo se funde
      con la pastilla y solo resalta la bandera verde) ───────────────── */
.brand-inicio {
    background: #fff;
    border: 1px solid transparent;   /* compensa el borde de 1px de los btn-sm */
    border-radius: 6px;
    padding: 4px 8px !important;      /* misma altura que Promociones / Cerrar sesión */
    box-shadow: none;
    transition: background 0.15s;
    gap: 5px;
}
.brand-inicio:hover {
    background: #f1f1f1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    text-decoration: none;
}
.brand-inicio:active {
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.20);
    background: #e9e9e9;
}
.brand-inicio:focus,
.brand-inicio:focus-visible {
    outline: none;
    box-shadow: none;
    text-decoration: none;
}
.brand-logo {
    height: 20px;
    width: auto;
    object-fit: cover;
    flex-shrink: 0;
}
.brand-home-icon {
    color: #1a1a1a;
    font-size: 0.85rem;
    opacity: 0.9;
}



/*.navbar .nav-link { display: flex; align-items: center; }*/
.navbar .nav-link {
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}



.navbar .etiquetas-barra {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
  color: #f8f9fa;
}
.no-collapse .navbar-nav { flex-wrap: wrap; }
.no-collapse .nav-item { margin-bottom: .25rem; }
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,.75)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
@media (max-width: 576px) {
  .navbar .nav-link { font-size: 14px; }
  .navbar-brand .brand-text { font-size: .95rem; }
}
@media (max-width: 767.98px) {
  .navbar-collapse { padding: 0; background: transparent; }
}
/* ===== HEADER: nunca partir la navbar en 2 renglones =====
   Casi todas las páginas declaran viewport fijo width=1280, así que en tablet/móvil
   el header se renderiza a 1280px (no al ancho real del dispositivo). Por eso el
   arreglo aplica desde 768px en adelante (incluye ese 1280), no solo en el rango
   de tablet. nowrap !important vence la utilidad .flex-wrap del <ul> de Bootstrap. */
@media (min-width: 768px) {
  .navbar > .container-fluid { flex-wrap: nowrap !important; }
  .no-collapse .navbar-nav { flex-wrap: nowrap !important; }
  .no-collapse .nav-item { margin-bottom: 0; }
  /* el nombre del cliente cede espacio (se trunca con …, queda completo en el title)
     antes que empujar el resto y provocar el segundo renglón */
  .navbar .text-light { flex-shrink: 1; min-width: 0; max-width: 300px !important; }
}
/* Tablet responsive real (ancho aprieta): además compacta para que todo entre */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .navbar .nav-item.px-2 { padding-left: 4px !important; padding-right: 4px !important; }
  .navbar .navbar-brand { margin-right: 0.15rem; }
  .navbar .text-light { max-width: 140px !important; }
  .navbar-nav .btn-sm,
  .navbar-nav .btn-sm * { font-size: 0.7rem !important; }
  .navbar-nav .btn-sm { padding: 0.2rem 0.4rem !important; }
}

/* ===== ICONO USUARIO ===== */
.navbar .fa-user-circle.fa-lg { font-size: 1.5rem !important; line-height: 1; vertical-align: middle; }
.icon-guest { color: #F06A8A !important; }
.navbar .nav-link:hover .icon-guest { color: #F48CA0 !important; }
#cuentaDropdown + .dropdown-menu { right: 0 !important; left: auto !important; transform: none !important; min-width: 20rem; }
.dropdown-client-name { white-space: normal; overflow: visible; text-overflow: clip; font-weight: 600; }
#cuentaDropdown.dropdown-toggle::before { display: none !important; }
#cuentaDropdown.dropdown-toggle::after {
  display: inline-block !important;
  content: "";
  margin-left: .35rem;
  vertical-align: .255em;
  border-top: .3em solid;
  border-right: .3em solid transparent;
  border-left: .3em solid transparent;
  border-top-color: currentColor;
}
.dropdown-menu { transition: opacity .12s ease; }
.dropdown-menu.show { opacity: 1; }
.dropdown-menu:not(.show) { opacity: 0; }
.navbar .dropdown-menu { min-width: 20rem; }

/* ===== SUCURSAL ===== */
.navbar .badge-secondary.sucursal {
  background-color: #F06A8A !important;
  color: black !important;
  border: none;
}
.navbar .badge-info.sucursal {
  background-color: #28a745 !important;
  color: black !important;
  border: none;
}

/* ===== DESCUENTO ===== */
.descuento-vacio { background-color: #F06A8A !important; color: #000 !important; }
.descuento-lleno { background-color: #28a745 !important; color: #000 !important; }

/* ===== TOTAL ===== */
.total-vacio { background-color: #F06A8A !important; color: #000 !important; }
.total-lleno { background-color: #28a745 !important; color: #000 !important; }

/* ===== CARRITO ===== */
.carrito-vacio { background-color: #F06A8A !important; color: black !important; border-color: #F06A8A !important; }
.carrito-lleno { background-color: #28a745 !important; color: black !important; border-color: #28a745 !important; }

/* ===== SPINNER (botones +/-) ===== */
.spinner-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 2px;
  background-color: white;
}

.btn-decrement, .btn-increment {
  width: 18px;
  height: 18px;
  background-color: #ffc107;
  border: none;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border-radius: 50%;
  cursor: pointer;
}
.btn-decrement:hover, .btn-increment:hover { background-color: #e0a800; }
.cantidad-text {
  font-size: 12px;
  text-align: center;
  width: 25px;
  height: 18px;
  line-height: 18px;
  border: none;
  background-color: transparent;
  pointer-events: none;
}
.cantidad-text:focus { outline: none; }

/* ===== BOTONES VER/OCULTAR EXISTENCIAS ===== */
.btn.btn-danger.btn-ver-existencias {
  padding-top: 1px !important;
  padding-bottom: 1px !important;
  font-size: 13px !important;
  height: 26px !important;
  line-height: 1 !important;
}
.btn-ocultar-existencias {
  padding-top: 1px !important;
  padding-bottom: 1px !important;
  font-size: 13px !important;
  height: 26px !important;
  line-height: 1 !important;
  margin-right: 30px;
  display: none;
}

/* ===== BARRA ANARANJADA ===== */
.barra-anaranjada { background-color: orange; height: 50px; display: flex; align-items: center; justify-content: center; }
.menu-anaranjado a { color: white; font-size: 18px; margin: 0 15px; text-decoration: none; }
.menu-anaranjado a:hover { text-decoration: underline; }



/* ===== CUENTA Y BOTONES ===== */
.button-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }
.custom-button {
  width: 250px; height: 50px; font-weight: bold;
  background: linear-gradient(to bottom, #f8f9fa, #d1d8e0);
  border: 1px solid #ccc; text-align: center; line-height: 50px;
  border-radius: 5px; box-shadow: 2px 2px 5px rgba(0,0,0,.2); cursor: pointer;
}
.custom-button:hover { background: linear-gradient(to bottom, #d1d8e0, #f8f9fa); }

/* ===== INICIAR SESION ===== */
.form-container { display: flex; flex-direction: column; width: 800px; margin: auto; }
.form-group { display: flex; align-items: center; margin-bottom: 60px; }
.form-group label { width: 150px; font-weight: bold; }
.form-group select { flex: 1; width: 300px; }
.form-group button { margin-left: 10px; }