/* =====================================================================
   Comercial Kevin (web) - Estilos propios sobre Bootstrap 5
   ===================================================================== */
:root {
  --k-sidebar: #0f172a;
  --k-sidebar-hover: #1e293b;
  --k-sidebar-texto: #e2e8f0;
  --k-acento: #0f766e;
  --k-acento-oscuro: #115e59;
  --k-acento-claro: #ccfbf1;
  --k-fondo: #f1f5f9;
  --k-ancho-menu: 260px;
  --bs-body-bg: var(--k-fondo);
  --bs-body-color: #0f172a;
  --bs-secondary-color: #475569;
  --bs-heading-color: #0f172a;
  --bs-link-color: var(--k-acento);
  --bs-link-hover-color: var(--k-acento-oscuro);
}

body {
  background: var(--k-fondo);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #1e293b;
}

/* ---- Botones con el color de la marca ---- */
.btn-primary {
  --bs-btn-bg: var(--k-acento);
  --bs-btn-border-color: var(--k-acento);
  --bs-btn-hover-bg: var(--k-acento-oscuro);
  --bs-btn-hover-border-color: var(--k-acento-oscuro);
  --bs-btn-active-bg: #134e4a;
  --bs-btn-active-border-color: #134e4a;
  --bs-btn-disabled-bg: var(--k-acento);
  --bs-btn-disabled-border-color: var(--k-acento);
  --bs-btn-focus-shadow-rgb: 15, 118, 110;
}
.form-control:focus, .form-select:focus {
  border-color: #14b8a6;
  box-shadow: 0 0 0 .25rem rgba(20, 184, 166, .2);
}

/* ---- Tarjetas ---- */
.k-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: .85rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.k-form { max-width: 880px; }

.k-stat { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; }
.k-stat-icono {
  width: 3rem; height: 3rem; border-radius: .75rem; font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--k-acento-claro); color: var(--k-acento);
}
.k-stat-alerta { background: #fee2e2; color: #dc2626; }
.k-stat-valor { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }

/* ---- Tabla ---- */
.table > thead > tr > th {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
  color: #475569; background: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: .8rem 1rem;
}
.table > tbody > tr > td { padding: .75rem 1rem; }
.k-inactivo > td { color: #64748b; }

/* ---- Menu lateral ---- */
.k-sidebar {
  width: var(--k-ancho-menu);
  background: var(--k-sidebar);
  color: var(--k-sidebar-texto);
  display: flex;
  flex-direction: column;
}
.k-brand {
  color: #fff; font-weight: 700; font-size: 1.15rem;
  padding: 1.25rem 1.25rem 1rem;
}
.k-brand .bi-shop { color: #2dd4bf; }
/* El menu se desplaza hacia abajo cuando no entra en la pantalla (sin partirse en columnas) */
.k-nav {
  padding: 0 .75rem 1rem; flex: 1 1 auto; min-height: 0;
  flex-wrap: nowrap; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: #334155 transparent;
}
.k-nav::-webkit-scrollbar { width: 6px; }
.k-nav::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
.k-brand, .k-usuario { flex: 0 0 auto; }
.k-nav-titulo {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  color: #94a3b8; padding: 1rem .75rem .35rem;
}
.k-nav .nav-link {
  display: flex; align-items: center; gap: .75rem;
  color: var(--k-sidebar-texto); border-radius: .6rem; padding: .6rem .75rem;
}
.k-nav .nav-link:hover { background: var(--k-sidebar-hover); color: #fff; }
.k-nav .nav-link.active { background: var(--k-acento); color: #fff; }
.k-nav .nav-link.disabled { color: #64748b; pointer-events: none; }
.k-nav .nav-link .bi { font-size: 1.1rem; }
.k-pronto {
  margin-left: auto; background: #1e293b; color: #94a3b8; font-weight: 500; font-size: .65rem;
}
.k-usuario {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem 1.25rem; border-top: 1px solid #1e293b; color: #fff;
}
.k-usuario-wrap { flex: 0 0 auto; position: relative; }
.k-usuario-boton {
  width: 100%; background: transparent; border: 0; border-top: 1px solid #1e293b;
  text-align: left; cursor: pointer; transition: background .15s;
}
.k-usuario-boton:hover, .k-usuario-boton[aria-expanded="true"] { background: #1e293b; }
.k-usuario-boton:focus-visible { outline: 2px solid #2dd4bf; outline-offset: -2px; }
.k-usuario-avatar {
  width: 2.3rem; height: 2.3rem; border-radius: 50%; background: #1e293b; color: #2dd4bf;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}

/* ---- Estructura general ---- */
.k-topbar {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1.5rem; background: #fff; border-bottom: 1px solid #e2e8f0;
  position: sticky; top: 0; z-index: 100;
}
.k-contenido { padding: 1.5rem; }

@media (min-width: 992px) {
  .k-sidebar { position: fixed; top: 0; bottom: 0; left: 0; }
  .k-main { margin-left: var(--k-ancho-menu); }
  .k-contenido { padding: 1.75rem 2rem; }
}
/* Menu oculto (solo pantallas grandes; en moviles ya se abre y se cierra solo) */
@media (min-width: 992px) {
  html.menu-oculto .k-sidebar { display: none !important; }
  html.menu-oculto .k-main { margin-left: 0; }
}
.offcanvas-lg.k-sidebar { --bs-offcanvas-bg: var(--k-sidebar); --bs-offcanvas-color: var(--k-sidebar-texto); }
/* Bootstrap deja transparente el offcanvas-lg en pantallas grandes: se fuerza el fondo oscuro del menú */
.k-sidebar { background-color: var(--k-sidebar) !important; color: var(--k-sidebar-texto) !important; }
.k-sidebar .k-nav .nav-link { color: var(--k-sidebar-texto); }
.k-sidebar .k-nav .nav-link:hover { color: #fff; }
.k-sidebar .k-nav .nav-link.active { color: #fff; }
.k-sidebar .k-brand { color: #fff; }
.k-usuario .text-white-50 { color: #94a3b8 !important; }

/* ---- Login y paginas de error ---- */
.k-login {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #0f172a 0%, #134e4a 100%);
  padding: 1.5rem;
}
.k-login-caja { width: 100%; max-width: 400px; color: #fff; }
.k-login-caja .k-card { color: #1e293b; }
.k-login-caja .text-secondary { color: #cbd5e1 !important; }
.k-login-caja .k-card .text-secondary { color: #64748b !important; }
.k-login-logo {
  width: 4rem; height: 4rem; border-radius: 1rem; margin: 0 auto; font-size: 2rem;
  background: var(--k-acento); color: #fff;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Ticket (texto de 44 columnas armado por Oracle) ---------- */
.k-ticket {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .78rem; line-height: 1.35;
  background: #fff; border: 1px dashed #cbd5e1; border-radius: .5rem;
  padding: 1rem; margin: 0; overflow-x: auto; white-space: pre; color: #0f172a;
}
@media print {
  .k-sidebar, .k-topbar, .btn, form, .alert { display: none !important; }
  .k-main { margin: 0 !important; }
  body { background: #fff; }
}

/* ---------- Reportes: barras por dia ---------- */
.barra-fila { display: flex; align-items: center; gap: .75rem; padding: .3rem 0; }
.barra-etq { width: 3rem; color: #475569; font-size: .85rem; }
.barra-pista { flex: 1; background: #e2e8f0; border-radius: 999px; height: .75rem; overflow: hidden; }
.barra-valor { height: 100%; background: var(--k-acento); border-radius: 999px; min-width: 2px; }
.barra-num { width: 11rem; text-align: right; white-space: nowrap; }
@media (max-width: 575.98px) { .barra-num { width: 8.5rem; font-size: .85rem; } }

/* ---- Menu de usuario (se abre al pulsar el usuario) ---- */
.k-usuario-menu { left: .6rem; right: .6rem; width: auto; min-width: 0; padding: 0 0 .4rem; border: 0; border-radius: .9rem; overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .35); }
.k-usuario-menu-top { min-width: 19rem; padding: 0 0 .4rem; border: 0; border-radius: .9rem; overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .2); }
.k-um-cabecera { display: flex; align-items: center; gap: .75rem; padding: 1rem 1rem .85rem; }
.k-um-avatar { width: 2.6rem; height: 2.6rem; flex: 0 0 auto; }
.k-um-sesion { margin: 0 1rem .85rem; padding: .65rem .85rem; background: #f1f5f9; border-radius: .7rem; }
.k-um-reloj { font-size: 1.6rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; color: #0f766e; }
.k-usuario-menu .dropdown-header, .k-usuario-menu-top .dropdown-header {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; padding: .6rem 1rem .2rem; }
.k-usuario-menu .dropdown-item, .k-usuario-menu-top .dropdown-item { padding: .5rem 1rem; }
/* La barra superior solo muestra el usuario cuando el menu lateral no se ve */
@media (min-width: 992px) {
  html:not(.menu-oculto) .k-topbar-usuario { display: none; }
}