:root {
  --color-primary:   #00283e;
  --color-accent:    #f2b705;
  --color-soft:      #efd9c1;
  --color-white:     #ffffff;
  --color-success:   #16a34a;
  --color-danger:    #dc2626;
  --color-duplicate: #bfdbfe;
  --navbar-h:        56px;
  --sidebar-w:       252px;
}

/* ══════════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════════ */
#main-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--navbar-h);
  background-color: var(--color-primary) !important;
  z-index: 1030;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

.navbar-brand, .navbar-brand:hover {
  color: var(--color-accent) !important;
  font-weight: 700;
  letter-spacing: .4px;
}

/* Texto blanco SOLO para los links del navbar oscuro. Antes era global (.nav-link)
   y se colaba en cualquier pestaña Bootstrap del contenido, volviéndolas invisibles
   (blanco sobre blanco). Acotado a #main-navbar para que .nav-tabs funcione en las páginas. */
#main-navbar .nav-link { color: rgba(255,255,255,.8) !important; }
#main-navbar .nav-link:hover, #main-navbar .nav-link.active { color: var(--color-accent) !important; }

/* Botón toggle sidebar */
.sidebar-toggle {
  background: none;
  border: none;
  color: rgba(255,255,255,.8);
  font-size: 1.5rem;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  transition: color .15s;
}
.sidebar-toggle:hover { color: var(--color-accent); }

/* ══════════════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════════════ */
#sidebar {
  position: fixed;
  top: var(--navbar-h);
  left: calc(-1 * var(--sidebar-w));
  width: var(--sidebar-w);
  height: calc(100vh - var(--navbar-h));
  background-color: var(--color-primary);
  overflow-y: auto;
  z-index: 1025;
  transition: left .22s ease;
  display: flex;
  flex-direction: column;
  padding-bottom: 1.5rem;
}

body.sidebar-open #sidebar { left: 0; }

/* Backdrop — solo mobile */
#sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1024;
}
body.sidebar-open #sidebar-backdrop { display: block; }

/* En desktop: el backdrop no aparece — el contenido se desplaza */
@media (min-width: 992px) {
  body.sidebar-open #sidebar-backdrop { display: none; }

  body.sidebar-open #main-content {
    margin-left: var(--sidebar-w);
    transition: margin-left .22s ease;
  }
}

/* ── Elementos internos del sidebar ── */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 1.2rem .75rem;
  color: rgba(255,255,255,.6);
  font-size: .82rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-user i { font-size: 1.1rem; }

.sidebar-label {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: rgba(255,255,255,.35);
  padding: .8rem 1.2rem .2rem;
  margin: 0;
}

.sidebar-divider {
  border-top: 1px solid rgba(255,255,255,.08);
  margin: .5rem 0;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: rgba(255,255,255,.75);
  text-decoration: none;
  padding: .5rem 1.2rem;
  font-size: .88rem;
  transition: background .15s, color .15s;
}
.sidebar-link i { width: 16px; font-size: .95rem; flex-shrink: 0; }
.sidebar-link:hover { background: rgba(242,183,5,.1); color: var(--color-accent); }
.sidebar-link.active { background: rgba(242,183,5,.15); color: var(--color-accent); font-weight: 600; }

/* Secciones administrativas bloqueadas para no-admins: visibles pero con candado.
   El link igual lleva a "acceso denegado" (defensa real = decoradores de las vistas). */
.sidebar-label .bi-lock-fill { font-size: .6rem; opacity: .7; margin-left: .25rem; }
.sidebar-bloqueado .sidebar-link { opacity: .45; cursor: not-allowed; }
.sidebar-bloqueado .sidebar-link:hover { background: rgba(148,163,184,.12); color: rgba(255,255,255,.75); }

/* ══════════════════════════════════════════════════════
   LAYOUT GENERAL
══════════════════════════════════════════════════════ */
body {
  background-color: #f4f6f8;
  font-family: 'Segoe UI', system-ui, sans-serif;
  padding-top: var(--navbar-h);
}

.content-wrapper {
  padding: 1.5rem;
  transition: margin-left .22s ease;
}

/* ══════════════════════════════════════════════════════
   BOTONES
══════════════════════════════════════════════════════ */
.btn-primary { background-color: var(--color-accent); border-color: var(--color-accent); color: var(--color-primary); font-weight: 600; }
.btn-primary:hover { background-color: #d9a304; border-color: #d9a304; color: var(--color-primary); }

.btn-outline-primary { border-color: var(--color-primary); color: var(--color-primary); }
.btn-outline-primary:hover { background-color: var(--color-primary); color: white; }

/* ══════════════════════════════════════════════════════
   ENCABEZADOS DE SECCIÓN
══════════════════════════════════════════════════════ */
.page-header { background-color: var(--color-primary); color: white; padding: 1rem 1.5rem; border-radius: .375rem; margin-bottom: 1.5rem; }
.page-header h1, .page-header h2 { margin: 0; font-size: 1.4rem; font-weight: 600; }

/* ══════════════════════════════════════════════════════
   TABLAS
══════════════════════════════════════════════════════ */
.table thead { background-color: var(--color-primary); color: white; }
.table tbody tr:nth-child(even) { background-color: var(--color-soft); }
.table tbody tr:hover { background-color: #e8cca8; }

/* ══════════════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════════════ */
.card-header-cci { background-color: var(--color-primary); color: white; }

/* ══════════════════════════════════════════════════════
   COTIZADOR
══════════════════════════════════════════════════════ */
.precio-ok    { color: var(--color-success); font-weight: 700; }
.precio-error { color: var(--color-danger);  font-weight: 700; }
.producto-duplicado { background-color: var(--color-duplicate) !important; }
.badge-min-price { background-color: var(--color-danger); color: white; font-size: .7rem; }

/* ══════════════════════════════════════════════════════
   BADGES
══════════════════════════════════════════════════════ */
.badge-activo   { background-color: var(--color-success); color: white; }
.badge-inactivo { background-color: #6b7280; color: white; }

/* ══════════════════════════════════════════════════════
   ANIMACIONES
══════════════════════════════════════════════════════ */
@keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

/* ══════════════════════════════════════════════════════
   MOCKUPS en las cards de Producción / Envío
══════════════════════════════════════════════════════ */
/* Miniaturas CUADRADAS proporcionales al ancho del card (no invasivas).
   El ancho por celda escala según cuántos mockups haya (1 → ~40% = x/2.5). */
.mockups-box { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; cursor: pointer; }
.mockups-box:hover { opacity: .9; }
.mockups-cell { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: #e5e7eb; }
.mockups-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mockups-box.mockups-n1 .mockups-cell { width: 40%; }
.mockups-box.mockups-n2 .mockups-cell { width: 32%; }
.mockups-box.mockups-n3 .mockups-cell,
.mockups-box.mockups-n4 .mockups-cell { width: 23%; }
.mockups-more {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); color: #fff; font-weight: 700; font-size: 1rem;
}
.mockups-empty {
  width: 40%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  color: #94a3b8; font-size: 1.6rem; background: #eef2f6; border-radius: 6px;
}

/* Keep dense tables inside their own scroll region on narrow screens. */
.content-wrapper, .card, .card-body { min-width: 0; }
.table-responsive { max-width: 100%; }
#form-cotizacion { min-width: 0; }
#form-cotizacion .card { max-width: 100%; }
@media (max-width: 767.98px) {
  #form-cotizacion > .d-flex { justify-content: flex-start !important; }
  #form-cotizacion .btn-group { flex-wrap: wrap; }
  #conv-card { width: min(300px, calc(100vw - 2rem)); right: 1rem; }
}
button:focus-visible, a:focus-visible { outline: 2px solid #0d6efd; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  #sidebar, #main-content { transition: none !important; }
}
#tabla-items td:nth-child(2) { min-width: 280px; }

/* ══════════════════════════════════════════════════════
   PÁGINA DEL CHAT: la página no se desplaza, solo los paneles
   (2026-09-24, pedido de Sebastián: «es molesto hacer scroll donde no debo»).
   #main-content mide exactamente la ventana debajo de la barra superior y es
   una columna: el encabezado «CRM — Chat» (y los mensajes flash, si hay) se
   quedan quietos arriba y .chat-wrap se lleva el resto. Adentro, la lista, el
   hilo y el panel derecho tienen su propio scroll. 100dvh sigue al alto real
   del celular (barra del navegador, teclado); 100vh queda de respaldo.
══════════════════════════════════════════════════════ */
body.pagina-chat #main-content {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--navbar-h));
  height: calc(100dvh - var(--navbar-h));
  min-height: 0;
}
body.pagina-chat #main-content > * { flex-shrink: 0; }
body.pagina-chat #main-content > .chat-wrap { flex: 1 1 0; min-height: 0; }
@media (max-width: 767px) {
  /* En el celular cada píxel es del hilo: menos marco alrededor. */
  body.pagina-chat #main-content { padding: .5rem; }
  body.pagina-chat #main-content > .page-header { padding: .5rem .8rem; margin-bottom: .5rem !important; }
  body.pagina-chat #main-content > .page-header h2 { font-size: 1.1rem; }
}