/* Numerador de Boletas — identidad: tinta de imprenta, magenta de proceso, tapete de corte */
@font-face { font-family: 'NB Mono'; src: url('../fonts/CourierPrime-Regular.ttf') format('truetype'); font-weight: 400; }
@font-face { font-family: 'NB Mono'; src: url('../fonts/CourierPrime-Bold.ttf') format('truetype'); font-weight: 700; }
@font-face { font-family: 'NB Cond'; src: url('../fonts/BarlowCondensed-Medium.ttf') format('truetype'); font-weight: 400 500; }
@font-face { font-family: 'NB Cond'; src: url('../fonts/BarlowCondensed-SemiBold.ttf') format('truetype'); font-weight: 600; }
@font-face { font-family: 'NB Cond'; src: url('../fonts/BarlowCondensed-Bold.ttf') format('truetype'); font-weight: 700; }
@font-face { font-family: 'NB Gruesa'; src: url('../fonts/Anton-Regular.ttf') format('truetype'); font-weight: 400 700; }

:root {
  --tinta: #16191e;
  --tinta-2: #23272f;
  --papel: #eceef1;
  --superficie: #ffffff;
  --linea: #d6dbe2;
  --texto-suave: #5b6471;
  --magenta: #c8005f;
  --magenta-suave: #fbe3ee;
  --cian: #0b86b8;
  --tapete: #27453c;
  --tapete-linea: rgba(255, 255, 255, .07);
  --tapete-texto: #dcefe7;
  --f-titulo: 'NB Cond', 'Arial Narrow', sans-serif;
  --f-num: 'NB Mono', 'Courier New', monospace;
  --bs-primary: #c8005f;
  --bs-primary-rgb: 200, 0, 95;
  --bs-link-color: #b00054;
  --bs-link-color-rgb: 176, 0, 84;
  --bs-link-hover-color: #8a0042;
  --bs-body-bg: #eceef1;
  --bs-border-radius: .45rem;
}

body { background: var(--papel); color: var(--tinta); }
h1, h2, h3, .h1, .h2, .h3, .titulo { font-family: var(--f-titulo); font-weight: 700; letter-spacing: .01em; text-wrap: balance; }
h1, .h1 { font-size: 1.9rem; text-transform: uppercase; }
.btn-primary { --bs-btn-bg: var(--magenta); --bs-btn-border-color: var(--magenta); --bs-btn-hover-bg: #a8004f; --bs-btn-hover-border-color: #a8004f; --bs-btn-active-bg: #8f0043; --bs-btn-active-border-color: #8f0043; --bs-btn-disabled-bg: #d86a9b; --bs-btn-disabled-border-color: #d86a9b; }
.btn-outline-primary { --bs-btn-color: var(--magenta); --bs-btn-border-color: var(--magenta); --bs-btn-hover-bg: var(--magenta); --bs-btn-hover-border-color: var(--magenta); --bs-btn-active-bg: #a8004f; }
.form-check-input:checked { background-color: var(--magenta); border-color: var(--magenta); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: #e47aaa; box-shadow: 0 0 0 .2rem rgba(200, 0, 95, .15); }
.nav-pills .nav-link.active { background: var(--tinta); }
.nav-pills .nav-link { color: var(--tinta); }
.num { font-family: var(--f-num); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.tabular { font-variant-numeric: tabular-nums; }
.min-w-0 { min-width: 0; }

/* ---------- Estructura ---------- */
.app-shell { display: flex; min-height: 100vh; }
.app .sidebar { width: 250px; background-color: var(--tinta) !important; color: #cfd5de; display: flex; flex-direction: column; }
@media (min-width: 992px) { .sidebar { position: sticky; top: 0; height: 100vh; flex-shrink: 0; } }
@media (max-width: 991.98px) { .sidebar.offcanvas-lg { --bs-offcanvas-bg: var(--tinta); --bs-offcanvas-width: 270px; } }
.sidebar-marca { display: flex; align-items: center; gap: .75rem; padding: 1.1rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.marca-sello { width: 42px; height: 42px; border-radius: 8px; background: var(--magenta); color: #fff; display: grid; place-items: center; font-family: var(--f-num); font-weight: 700; font-size: 1.15rem; flex-shrink: 0; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }
.marca-nombre { font-family: var(--f-titulo); font-weight: 700; font-size: 1.35rem; color: #fff; text-transform: uppercase; line-height: 1; letter-spacing: .03em; }
.marca-empresa { font-size: .78rem; color: #9aa4b1; margin-top: 2px; max-width: 160px; }
.sidebar-nav { padding: .75rem .5rem; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.sidebar-nav a { display: flex; align-items: center; gap: .7rem; padding: .55rem .75rem; border-radius: 6px; color: #cfd5de; text-decoration: none; font-size: .92rem; }
.sidebar-nav a:hover { background: var(--tinta-2); color: #fff; }
.sidebar-nav a.activo { background: rgba(200, 0, 95, .18); color: #fff; box-shadow: inset 3px 0 0 var(--magenta); }
.sidebar-nav a i { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.sidebar-grupo { font-family: var(--f-titulo); text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; color: #7d8794; padding: 1rem .75rem .35rem; }
.sidebar-pie { padding: 1rem; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-rol { font-size: .75rem; color: #ff7fb4; }
.sidebar-version { font-size: .7rem; color: #6c7682; margin-top: .6rem; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; background: var(--superficie); border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 10; }
.topbar-titulo { font-family: var(--f-titulo); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.contenido { padding: 1.5rem; max-width: 1400px; width: 100%; }
@media (max-width: 575.98px) { .contenido { padding: 1rem; } }

.encabezado { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.25rem; }
.encabezado h1 { margin: 0; }
.encabezado .sub { color: var(--texto-suave); margin: .2rem 0 0; font-size: .92rem; }

.tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: 10px; }
.tarjeta > .tarjeta-cab { padding: .8rem 1rem; border-bottom: 1px solid var(--linea); display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.tarjeta-cab h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .05em; margin: 0; }
.tarjeta > .tarjeta-cuerpo { padding: 1rem; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; }
.kpi { background: var(--superficie); border: 1px solid var(--linea); border-radius: 10px; padding: .9rem 1rem; }
.kpi .etq { font-family: var(--f-titulo); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; color: var(--texto-suave); }
.kpi .val { font-family: var(--f-num); font-weight: 700; font-size: 1.75rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi .nota { font-size: .78rem; color: var(--texto-suave); }
.kpi.alerta { border-color: #f1b2cf; background: #fff6fa; }
.kpi.alerta .val { color: var(--magenta); }

.tabla { margin: 0; font-size: .9rem; }
.tabla th { font-family: var(--f-titulo); text-transform: uppercase; letter-spacing: .05em; font-size: .78rem; color: var(--texto-suave); font-weight: 600; white-space: nowrap; background: #f6f7f9; }
.tabla td { vertical-align: middle; }
.tabla-scroll { overflow-x: auto; }

.estado { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 600; padding: .18rem .55rem; border-radius: 999px; white-space: nowrap; }
.estado::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.estado-sorteada { background: #e7f3fa; color: #0a6f99; }
.estado-impresa { background: #eef6ee; color: #23753f; }
.estado-entregada { background: #ecebf7; color: #4a3f9a; }
.estado-anulada { background: #f4e9ec; color: #9c1c46; text-decoration: line-through; }
.chip-rol { font-size: .72rem; padding: .15rem .5rem; border-radius: 4px; background: #eef0f3; color: #3c4450; font-weight: 600; }
.chip-rol.admin { background: var(--magenta-suave); color: #8f0043; }
.chip-alerta { background: #fff1d6; color: #8a4f00; font-size: .72rem; padding: .15rem .45rem; border-radius: 4px; font-weight: 600; }

.dato-etq { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); font-family: var(--f-titulo); }
.dato-val { font-weight: 600; }
.vacio { text-align: center; padding: 2.5rem 1rem; color: var(--texto-suave); }
.vacio i { font-size: 2rem; display: block; margin-bottom: .5rem; color: #aab3be; }
.boletas-nums b { font-family: var(--f-num); display: inline-block; margin-right: .6rem; }

/* ---------- Pantallas simples (login, instalador) ---------- */
body.simple { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem;
  background-color: var(--tapete);
  background-image: linear-gradient(var(--tapete-linea) 1px, transparent 1px), linear-gradient(90deg, var(--tapete-linea) 1px, transparent 1px);
  background-size: 24px 24px; }
.simple-caja { background: var(--superficie); border-radius: 12px; padding: 2rem; width: 100%; max-width: 420px; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.simple-caja.ancho { max-width: 760px; }
.simple-marca { display: flex; gap: .8rem; align-items: center; margin-bottom: 1.5rem; }
.simple-titulo { font-family: var(--f-titulo); font-weight: 700; font-size: 1.5rem; text-transform: uppercase; line-height: 1; }
.simple-sub { color: var(--texto-suave); font-size: .88rem; }
.simple-pie { margin-top: 1.5rem; text-align: center; font-size: .75rem; color: #8a939f; }

/* ---------- Editor de plantillas ---------- */
.editor { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1099.98px) { .editor { grid-template-columns: minmax(0, 1fr); } }
.editor-panel { background: var(--superficie); border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; }
.editor-panel .nav { border-bottom: 1px solid var(--linea); }
.editor-panel .nav-link { font-family: var(--f-titulo); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; color: var(--texto-suave); border: 0; border-radius: 0; padding: .7rem .5rem; }
.editor-panel .nav-link.active { color: var(--magenta); box-shadow: inset 0 -3px 0 var(--magenta); background: none; }
.editor-seccion { padding: 1rem; display: grid; gap: 1rem; }
.editor-seccion legend, .leyenda { font-family: var(--f-titulo); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 600; color: var(--texto-suave); margin-bottom: .4rem; }
.editor-seccion .form-label { font-size: .78rem; color: var(--texto-suave); margin-bottom: .2rem; }
.editor-seccion input[type=number] { font-family: var(--f-num); }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip { font-size: .78rem; border: 1px solid var(--linea); background: #f4f6f8; color: var(--tinta); border-radius: 999px; padding: .2rem .65rem; cursor: pointer; }
.chip.on { background: var(--magenta-suave); border-color: var(--magenta); color: var(--magenta); font-weight: 600; }
.chip small { color: var(--texto-suave); }
.chip.on small { color: inherit; }
.bloque-form { background: #f6f7f9; border: 1px solid var(--linea); border-radius: 8px; padding: .75rem; display: grid; gap: .6rem; }

.tapete { border-radius: 10px; padding: 1rem; min-height: 460px; display: grid; gap: .75rem; align-content: start; min-width: 0;
  background-color: var(--tapete);
  background-image: linear-gradient(var(--tapete-linea) 1px, transparent 1px), linear-gradient(90deg, var(--tapete-linea) 1px, transparent 1px);
  background-size: 20px 20px; color: var(--tapete-texto); }
.tapete-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.tapete-cab h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .06em; margin: 0; color: var(--tapete-texto); }
.tapete .stat { font-family: var(--f-num); font-size: .78rem; background: rgba(0,0,0,.28); padding: .2rem .5rem; border-radius: 4px; white-space: nowrap; }
.tapete .btn-tapete { background: rgba(0,0,0,.28); color: var(--tapete-texto); border: 0; }
.tapete .btn-tapete:hover { background: rgba(0,0,0,.45); color: #fff; }
.tapete .btn-tapete.on { background: var(--magenta); color: #fff; }
.tapete input.form-control { background: rgba(0,0,0,.28); color: var(--tapete-texto); border: 0; width: 90px; font-family: var(--f-num); }
.tapete .ayuda { font-size: .8rem; opacity: .85; margin: 0; }
.lienzo { display: flex; justify-content: center; min-width: 0; }
#editorSvg { width: 100%; max-width: 900px; height: auto; touch-action: none; user-select: none; filter: drop-shadow(0 8px 16px rgba(0,0,0,.35)); }
#pliegoSvg { width: 100%; max-width: 640px; height: auto; filter: drop-shadow(0 10px 20px rgba(0,0,0,.4)); }
.blk { cursor: move; }
.gl { stroke: #d7e2ea; stroke-width: .12; }
.gl10 { stroke: #b8cbd8; stroke-width: .16; }
.guardado-estado { font-size: .8rem; color: var(--texto-suave); }

.buscador-resultado { background: var(--magenta-suave); border: 1px solid var(--magenta); border-radius: 8px; padding: .75rem 1rem; }
.lote { font-family: var(--f-num); font-size: .78rem; }

@media print { .sidebar, .topbar { display: none !important; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.pagination { --bs-pagination-color: var(--tinta); --bs-pagination-active-bg: var(--tinta); --bs-pagination-active-border-color: var(--tinta); --bs-pagination-hover-color: var(--magenta); --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(200,0,95,.15); }

/* Editor: barra compacta y tapete fijo mientras se desplazan las opciones */
.editor-barra { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.editor-barra .editor-nombre { flex: 1 1 220px; max-width: 360px; }
.editor-barra .editor-ref { flex: 1 1 180px; max-width: 260px; }
.editor-barra .guardado-estado { white-space: nowrap; }
.editor > .tapete { min-height: 0; }
@media (min-width: 1100px) {
  .editor > .tapete { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; }
  .editor > .tapete #editorSvg { max-height: calc(100vh - 11rem); }
}
@media (max-width: 1099.98px) {
  .editor > .tapete { order: -1; position: sticky; top: 3.4rem; z-index: 5; padding: .6rem; gap: .4rem; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
  .editor > .tapete .ayuda, .editor > .tapete .tapete-cab .d-flex { display: none !important; }
  .editor > .tapete #editorSvg { max-height: 34vh; }
  .editor > .tapete #pliegoSvg { max-height: 40vh; width: auto; max-width: 100%; }
}
@media (min-width: 992px) and (max-width: 1099.98px) { .editor > .tapete { top: .5rem; } }