/* Design tokens y layout base — sacados de /inicio_dashboard_prototipo.html,
   son la referencia visual validada, no reinventar. */
:root {
  --papel:#F6F5F0; --blanco:#FFF; --tinta:#22303C; --tinta-suave:#5C6B78;
  --linea:#E3E1D8; --verde:#157A57; --verde-claro:#E4F3EC;
  --azul:#2B5D8A; --azul-claro:#EAF1F7; --rojo:#B03A2E; --rojo-claro:#F9E9E7;
  --ambar:#8A6D2B; --ambar-claro:#FFF3C4;
  --morado:#6B4E9E; --morado-claro:#EDE7F6; --gris:#5C6B78; --gris-claro:#E9EBEC;
}

/* Etiquetas de producto (color elegido a mano al crearlas) */
.pill-etiqueta { display:inline-block; padding:2px 10px; border-radius:20px; font-size:11px; font-weight:700; white-space:nowrap; }
.pill-etiqueta.azul { background:var(--azul-claro); color:var(--azul); }
.pill-etiqueta.verde { background:var(--verde-claro); color:var(--verde); }
.pill-etiqueta.ambar { background:var(--ambar-claro); color:var(--ambar); }
.pill-etiqueta.rojo { background:var(--rojo-claro); color:var(--rojo); }
.pill-etiqueta.morado { background:var(--morado-claro); color:var(--morado); }
.pill-etiqueta.gris { background:var(--gris-claro); color:var(--gris); }
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:'Public Sans',sans-serif; background:var(--papel); color:var(--tinta); min-height:100vh; display:flex; }
a { text-decoration:none; color:inherit; }

/* ---------- Menú lateral ---------- */
.lateral {
  width:230px; flex-shrink:0; background:var(--tinta); color:#E8ECEF;
  display:flex; flex-direction:column; min-height:100vh; padding:18px 12px;
}
.lat-brand { display:flex; align-items:center; gap:10px; padding:4px 10px 18px; border-bottom:1px solid #38495B; margin-bottom:14px; }
.lat-logo { width:38px; height:38px; border-radius:9px; background:var(--papel); flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.lat-logo img { width:100%; height:100%; object-fit:cover; }
#sb-logo-letra { font-family:'Fraunces',serif; font-size:18px; font-weight:600; color:var(--tinta); }
.lat-brand h1 { font-family:'Fraunces',serif; font-size:15.5px; font-weight:600; line-height:1.2; }
#sb-local-nombre { font-size:11px; color:#9FB0BE; display:block; }

.onexor-badge { display:flex; align-items:center; gap:6px; margin-top:12px; padding-top:10px; border-top:1px solid #38495B; font-size:10.5px; color:#7C8FA0; }
.onexor-badge img { width:14px; height:14px; border-radius:3px; flex-shrink:0; }

.aviso-suscripcion {
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding:10px 20px; text-align:center; font-size:13.5px; font-weight:700; color:#fff;
}
.aviso-suscripcion.amarillo { background:var(--ambar); }
.aviso-suscripcion.rojo { background:var(--rojo); }

.lat-seccion { font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#7C8FA0; padding:12px 12px 6px; }
.lat-item {
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px;
  font-size:13.5px; font-weight:600; color:#C7D1D9; cursor:pointer; margin-bottom:2px;
}
.lat-item:hover { background:#33465A; color:#fff; }
.lat-item.activo { background:var(--papel); color:var(--tinta); }
.lat-item .ico { width:20px; text-align:center; font-size:16px; flex-shrink:0; }
.lat-item .badge {
  margin-left:auto; background:var(--rojo); color:#fff; font-size:10.5px; font-weight:700;
  min-width:18px; height:18px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 5px;
}
.lat-pie { margin-top:auto; padding:12px; border-top:1px solid #38495B; font-size:12px; color:#9FB0BE; }
.lat-pie b { color:#E8ECEF; display:block; font-size:13px; }
.lat-pie button {
  width:100%; margin-top:10px; padding:8px 10px; border-radius:8px; border:1px solid #38495B;
  background:#33465A; color:#E8ECEF; font-family:inherit; font-size:12.5px; cursor:pointer;
}
.lat-pie button:hover { background:#3E5570; }

/* ---------- Contenido ---------- */
.principal { flex:1; padding:26px 32px; overflow-y:auto; }
.saludo h2 { font-family:'Fraunces',serif; font-size:24px; font-weight:600; }
.saludo p { color:var(--tinta-suave); font-size:14px; margin-top:2px; margin-bottom:20px; }

.nota-demo {
  margin-top:22px; background:var(--azul-claro); color:var(--azul); border-radius:12px;
  padding:12px 16px; font-size:12.5px;
}

/* ---------- Páginas de módulo: topbar + menú hamburguesa ----------
   Patrón validado en los prototipos (todos menos el dashboard): el
   menú lateral se oculta en un panel deslizable para no robar
   espacio en pantallas de trabajo (inventario, POS, etc). */
body.pagina-modulo { display:block; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:10px 24px; background:var(--blanco); border-bottom:1px solid var(--linea); }
.brand { display:flex; align-items:center; gap:10px; }
.brand-logo { width:36px; height:36px; border-radius:8px; background:var(--papel); overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.brand-logo img { width:100%; height:100%; object-fit:cover; }
.brand-logo span { font-family:'Fraunces',serif; font-size:17px; font-weight:600; color:var(--tinta); }
.brand h1 { font-family:'Fraunces',serif; font-size:18px; font-weight:600; }
.brand span { font-size:12px; color:var(--tinta-suave); display:block; }
.topbar-info { font-size:13px; color:var(--tinta-suave); }
.topbar-info b { color:var(--tinta); }

.btn-menu {
  width:42px; height:42px; border:1.5px solid var(--linea); background:var(--blanco);
  border-radius:10px; cursor:pointer; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px; flex-shrink:0;
}
.btn-menu:hover { background:var(--papel); border-color:var(--azul); }
.btn-menu span { display:block; width:18px; height:2.5px; background:var(--tinta); border-radius:2px; }

.menu-fondo {
  position:fixed; inset:0; background:rgba(34,48,60,.45);
  opacity:0; pointer-events:none; transition:opacity .18s; z-index:20;
}
.menu-fondo.abierto { opacity:1; pointer-events:auto; }
.menu-panel {
  position:fixed; top:0; left:0; bottom:0; width:250px; z-index:21;
  background:var(--tinta); color:#E8ECEF; padding:18px 12px;
  display:flex; flex-direction:column; overflow-y:auto;
  transform:translateX(-105%); transition:transform .2s ease;
}
.menu-panel.abierto { transform:translateX(0); }
.menu-head { display:flex; align-items:center; justify-content:space-between; padding:4px 10px 16px; border-bottom:1px solid #38495B; margin-bottom:12px; }
.menu-head-brand { display:flex; align-items:center; gap:10px; }
.menu-logo { width:34px; height:34px; border-radius:8px; background:var(--papel); overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.menu-logo img { width:100%; height:100%; object-fit:cover; }
.menu-head-brand h2 { font-family:'Fraunces',serif; font-size:15.5px; font-weight:600; line-height:1.2; }
.menu-head-brand span { font-size:11px; color:#9FB0BE; display:block; }
.menu-cerrar { background:none; border:none; color:#9FB0BE; font-size:22px; cursor:pointer; line-height:1; font-family:inherit; }
.menu-cerrar:hover { color:#fff; }
/* dentro del menú hamburguesa, la sección/ítem/pie reutilizan las
   mismas clases lat-* que el menú fijo del dashboard */
.menu-panel .lat-pie { margin-top:auto; }

/* ---------- Contenido de página de módulo ---------- */
.contenido { max-width:1020px; margin:0 auto; padding:24px; }
h2.titulo { font-family:'Fraunces',serif; font-size:22px; font-weight:600; margin-bottom:4px; }
.subtitulo { color:var(--tinta-suave); font-size:14px; margin-bottom:18px; }

.alerta-banner {
  display:flex; align-items:center; gap:10px;
  background:var(--ambar-claro); color:var(--ambar);
  border-radius:12px; padding:12px 16px; margin-bottom:16px; font-size:13.5px; font-weight:600;
  cursor:pointer;
}
.alerta-banner:hover { filter:brightness(.97); }

.barra-acciones { display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.buscar { flex:1; min-width:220px; position:relative; }
.buscar input {
  width:100%; padding:12px 16px; font-size:15px; font-family:inherit;
  border:2px solid var(--linea); border-radius:12px; outline:none; background:var(--blanco);
}
.buscar input:focus { border-color:var(--azul); box-shadow:0 0 0 4px var(--azul-claro); }
.filtros { display:flex; gap:6px; }
.filtro {
  padding:11px 16px; border:1.5px solid var(--linea); background:var(--blanco);
  border-radius:12px; font-family:inherit; font-size:13.5px; font-weight:600;
  color:var(--tinta-suave); cursor:pointer;
}
.filtro.activo { background:var(--tinta); color:#fff; border-color:var(--tinta); }
.btn-nuevo {
  padding:11px 20px; background:var(--verde); color:#fff; border:none; border-radius:12px;
  font-family:inherit; font-size:14.5px; font-weight:700; cursor:pointer;
}
.btn-nuevo:hover { background:#0F6146; }
.btn-nuevo:disabled { opacity:.6; cursor:default; }

.panel { background:var(--blanco); border:1px solid var(--linea); border-radius:14px; padding:6px 20px 10px; margin-bottom:16px; }
table { width:100%; border-collapse:collapse; font-size:13.5px; }
th { text-align:left; color:var(--tinta-suave); font-weight:600; font-size:12px; padding:10px 8px 8px; border-bottom:1px solid var(--linea); }
td { padding:10px 8px; border-bottom:1px solid #F0EEE6; font-variant-numeric:tabular-nums; vertical-align:middle; }
td.num, th.num { text-align:right; }
tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:#FBFAF6; }
th.col-propio { background:var(--azul-claro); color:var(--azul); border-radius:8px 8px 0 0; }
td.col-propio { background:var(--azul-claro); color:var(--azul); font-weight:700; }
tbody tr:hover td.col-propio { background:#DCE9F4; }
.prod-nombre { font-weight:600; }
.prod-sub { font-size:12px; color:var(--tinta-suave); }
.tag { display:inline-block; padding:2px 9px; border-radius:20px; font-size:10.5px; font-weight:700; letter-spacing:.04em; }
.tag.libro { background:var(--azul-claro); color:var(--azul); }
.tag.articulo { background:var(--ambar-claro); color:var(--ambar); }
.stock-bajo { color:var(--rojo); font-weight:700; }
.stock-cero { background:var(--rojo-claro); color:var(--rojo); font-weight:700; padding:2px 9px; border-radius:20px; font-size:11.5px; }
.consig { font-size:11px; color:var(--tinta-suave); }
.btn-link { background:none; border:none; color:var(--azul); font-family:inherit; font-size:12.5px; cursor:pointer; text-decoration:underline; }
.btn-mini { padding:7px 14px; font-size:12.5px; font-weight:700; font-family:inherit; border-radius:9px; cursor:pointer; border:none; background:var(--verde); color:#fff; white-space:nowrap; }
.btn-mini:hover { background:#0F6146; }

/* ---------- Modal genérico ---------- */
.overlay { position:fixed; inset:0; background:rgba(34,48,60,.45); display:none; align-items:center; justify-content:center; z-index:10; padding:16px; }
.overlay.abierto { display:flex; }
.modal { background:var(--blanco); border-radius:18px; padding:26px; width:480px; max-width:100%; max-height:92vh; overflow-y:auto; }
.modal h3 { font-family:'Fraunces',serif; font-size:19px; margin-bottom:14px; }
.campo { margin-bottom:12px; }
.campo label { display:block; font-size:12.5px; font-weight:700; color:var(--tinta-suave); margin-bottom:5px; }
.campo input, .campo select {
  width:100%; padding:11px 13px; font-size:14.5px; font-family:inherit;
  border:1.5px solid var(--linea); border-radius:10px; outline:none;
}
.campo input:focus, .campo select:focus { border-color:var(--azul); }
.fila2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.isbn-zona { display:flex; gap:8px; }
.isbn-zona input { flex:1; }
.btn-magia {
  padding:0 16px; background:var(--azul); color:#fff; border:none; border-radius:10px;
  font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap;
}
.btn-magia:hover { background:#224A6E; }
.btn-magia:disabled { opacity:.6; cursor:default; }
.magia-aviso {
  display:none; background:var(--verde-claro); color:var(--verde);
  border-radius:10px; padding:9px 12px; font-size:12.5px; font-weight:600; margin-top:8px;
}
.magia-aviso.visible { display:block; }
.magia-aviso.aviso-vacio { background:var(--ambar-claro); color:var(--ambar); }
.modal-acciones { display:flex; gap:10px; margin-top:18px; }
.modal-acciones button { flex:1; padding:13px; border-radius:12px; font-family:inherit; font-size:15px; font-weight:700; cursor:pointer; }
.btn-guardar { background:var(--verde); color:#fff; border:none; }
.btn-guardar:disabled { opacity:.6; cursor:default; }
.btn-cancelar { background:var(--blanco); color:var(--tinta); border:1.5px solid var(--linea); }
.nota-margen { font-size:12px; color:var(--tinta-suave); margin-top:4px; }
.nota-margen b { color:var(--verde); }

@media (max-width:760px) {
  body { flex-direction:column; }
  .lateral { width:100%; min-height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; padding:10px; }
  .lat-brand { border:none; padding:4px 10px; margin:0; }
  .lat-seccion, .lat-pie { display:none; }
  .lat-item { padding:8px 10px; }
  .principal { padding:20px; }
}