/* ============================================================================================
   Sistema de diseño (componentes). Tokens: primario #A6192E (Pantone 187C, usado con moderación),
   neutros slate, radios suaves (xl/2xl), sombras sutiles y áreas de toque >= 44px.
   app.css se carga ANTES de tailwind.css: las utilidades de Tailwind pueden ajustar estos componentes.
   ============================================================================================ */
:root { --marca:#A6192E; --marca-osc:#8a1426; --marca-suave:#fbeef0; --borde:#e2e8f0; --texto:#1e293b; --texto-2:#64748b; }
body { background:#f8fafc; color:var(--texto); -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:2px solid var(--marca); outline-offset:2px; }
.ico { display:inline-block; flex-shrink:0; vertical-align:middle; }

/* Tarjetas */
.card { background:#fff; border-radius:1rem; border:1px solid var(--borde);
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06); }

/* Botones */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:44px; padding:.6rem 1.1rem;
  border-radius:.75rem; font-weight:600; font-size:.875rem; line-height:1.2; user-select:none;
  transition:background-color .2s, box-shadow .2s, transform .1s, border-color .2s, color .2s; }
.btn:active:not(:disabled) { transform:scale(.97); }
.btn:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
.btn-primary { background:var(--marca); color:#fff; box-shadow:0 4px 6px -1px rgba(166,25,46,.25), 0 2px 4px -2px rgba(166,25,46,.2); }
.btn-primary:hover:not(:disabled) { background:var(--marca-osc); box-shadow:0 10px 15px -3px rgba(166,25,46,.3), 0 4px 6px -4px rgba(166,25,46,.25); }
.btn-secondary { background:#fff; color:#334155; border:1px solid #d1d5db; box-shadow:0 1px 2px rgba(15,23,42,.05); }
.btn-secondary:hover:not(:disabled) { background:#f8fafc; border-color:#94a3b8; }
.btn-ghost { color:var(--marca); min-height:40px; }
.btn-ghost:hover:not(:disabled) { background:var(--marca-suave); }
.btn-danger { background:#dc2626; color:#fff; box-shadow:0 4px 6px -1px rgba(220,38,38,.25); }
.btn-danger:hover:not(:disabled) { background:#b91c1c; }
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:.75rem;
  color:#475569; transition:background-color .2s, color .2s, transform .1s; }
.icon-btn:hover { background:#f1f5f9; color:#0f172a; }
.icon-btn:active { transform:scale(.95); }

/* Formularios */
.input { width:100%; min-height:44px; border:1px solid #d1d5db; border-radius:.75rem; padding:.6rem .85rem; font-size:.95rem;
  background:#f9fafb; color:var(--texto); transition:border-color .2s, box-shadow .2s, background-color .2s; }
.input::placeholder { color:#9ca3af; }
.input:hover:not(:disabled) { border-color:#9ca3af; }
.input:focus { outline:none; background:#fff; border-color:var(--marca); box-shadow:0 0 0 3px rgba(166,25,46,.16); }
select.input { padding-right:2.25rem; }
.label { display:block; font-size:.8125rem; font-weight:600; color:#374151; margin-bottom:.375rem; }

/* Estados (badges): fondo suave + texto de alto contraste + punto de color */
.badge { display:inline-flex; align-items:center; gap:.375rem; padding:.2rem .6rem; border-radius:999px; font-size:.72rem;
  font-weight:600; line-height:1.3; white-space:nowrap; }
.badge-dot::before { content:''; width:.4rem; height:.4rem; border-radius:999px; background:currentColor; opacity:.85; }

/* Tablas: solo líneas horizontales sutiles; en móvil cada fila es una tarjeta */
table.tabla { width:100%; font-size:.875rem; border-collapse:separate; border-spacing:0; }
table.tabla th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--texto-2);
  font-weight:600; padding:.75rem 1rem; border-bottom:1px solid var(--borde); background:#f8fafc; position:sticky; top:0; z-index:1; }
table.tabla td { padding:.75rem 1rem; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
table.tabla tbody tr { transition:background-color .15s; }
table.tabla tbody tr:hover { background:#f8fafc; }
table.tabla tbody tr:last-child td { border-bottom:0; }
@media (max-width:639px) {
  table.tabla:not(.tabla-fija) thead { display:none; }
  table.tabla:not(.tabla-fija), table.tabla:not(.tabla-fija) tbody, table.tabla:not(.tabla-fija) tr,
  table.tabla:not(.tabla-fija) td { display:block; width:100%; }
  table.tabla:not(.tabla-fija) tbody { padding:.25rem .75rem; }
  table.tabla:not(.tabla-fija) tr { background:#fff; border:1px solid var(--borde); border-radius:1rem; margin:.65rem 0;
    padding:.6rem 1rem; box-shadow:0 1px 2px rgba(15,23,42,.05); }
  table.tabla:not(.tabla-fija) tbody tr:hover { background:#fff; }
  table.tabla:not(.tabla-fija) td { border:0; padding:.4rem 0; display:flex; align-items:center; justify-content:space-between;
    gap:1rem; text-align:right; min-height:2rem; }
  table.tabla:not(.tabla-fija) td::before { content:attr(data-label); font-size:.72rem; font-weight:600; color:var(--texto-2);
    text-transform:uppercase; letter-spacing:.03em; text-align:left; flex-shrink:0; }
  table.tabla:not(.tabla-fija) td[data-label=""]::before { content:none; }
  table.tabla:not(.tabla-fija) td[data-label=""] { justify-content:flex-end; }
}

/* Pestañas */
.tab { padding:.75rem 1rem; min-height:44px; font-weight:600; font-size:.9rem; border-bottom:2px solid transparent; color:var(--texto-2);
  transition:color .2s, border-color .2s; }
.tab:hover { color:var(--texto); }
.tab.active { color:var(--marca); border-color:var(--marca); }

/* Navegación: barra lateral (escritorio) */
.marca-logo { width:2.25rem; height:2.25rem; border-radius:.75rem; background:var(--marca) url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M22%208.35V20a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2V8.35A2%202%200%200%201%203.26%206.5l8-3.2a2%202%200%200%201%201.48%200l8%203.2A2%202%200%200%201%2022%208.35Z%27/%3E%3Cpath%20d%3D%27M6%2018h12%27/%3E%3Cpath%20d%3D%27M6%2014h12%27/%3E%3Crect%20width%3D%2712%27%20height%3D%2712%27%20x%3D%276%27%20y%3D%2710%27/%3E%3C/svg%3E") center/62% no-repeat;
  box-shadow:0 4px 10px -2px rgba(166,25,46,.35); flex-shrink:0; display:inline-block; }
.marca-logo-sm { width:2rem; height:2rem; border-radius:.65rem; }
.nav-item { display:flex; align-items:center; gap:.75rem; min-height:42px; padding:.55rem .75rem; border-radius:.75rem;
  font-size:.9rem; font-weight:500; color:#475569; transition:background-color .2s, color .2s; }
.nav-item:hover { background:#f1f5f9; color:#0f172a; }
.nav-item.activo { background:var(--marca-suave); color:var(--marca); font-weight:600; }
.nav-item.activo .ico { color:var(--marca); }
.nav-item-lg { min-height:52px; font-size:1rem; padding:.75rem 1rem; }
.avatar { width:2.25rem; height:2.25rem; border-radius:999px; background:var(--marca-suave); color:var(--marca); font-weight:700;
  font-size:.8rem; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.avatar-lg { width:3rem; height:3rem; font-size:1rem; }
@media (min-width:1024px) { body.con-sesion #shell { padding-left:16rem; } }

/* Navegación inferior (móvil y tablet) */
#bottomnav { padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -4px 16px rgba(15,23,42,.06); }
.bn-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem; min-height:64px;
  font-size:.68rem; font-weight:600; color:#64748b; transition:color .2s, transform .1s; }
.bn-item:active { transform:scale(.95); }
.bn-item.activo { color:var(--marca); }
.bn-fab { width:3.6rem; height:3.6rem; margin-top:-1.6rem; border-radius:999px; background:var(--marca); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 20px -4px rgba(166,25,46,.45), 0 0 0 5px #fff;
  transition:background-color .2s, transform .1s; }
.bn-item:active .bn-fab { transform:scale(.93); background:var(--marca-osc); }
.bn-badge { position:absolute; top:-.35rem; right:-.65rem; min-width:1.1rem; height:1.1rem; padding:0 .25rem; border-radius:999px;
  background:var(--marca); color:#fff; font-size:.62rem; font-weight:700; line-height:1.1rem; text-align:center; box-shadow:0 0 0 2px #fff; }
.bn-badge-error { background:#dc2626; }
@media (max-width:1023px) { body.con-sesion #view { padding-bottom:6.5rem; } }

/* Menú "Más" (hoja inferior) */
#drawer .drawer-fondo { opacity:0; transition:opacity .2s; }
#drawer .drawer-panel { transform:translateY(100%); transition:transform .22s cubic-bezier(.2,.8,.2,1); }
#drawer.abierto .drawer-fondo { opacity:1; }
#drawer.abierto .drawer-panel { transform:none; }

/* Panel de notificaciones: tarjeta flotante */
.panel-notif { position:fixed; z-index:60; background:#fff; border:1px solid var(--borde); border-radius:1rem; overflow:hidden;
  box-shadow:0 20px 25px -5px rgba(15,23,42,.12), 0 8px 10px -6px rgba(15,23,42,.1); animation:entrar .18s ease-out;
  top:4.5rem; right:1.5rem; width:min(400px, calc(100vw - 1.5rem)); }
.panel-notif-lista { max-height:min(60vh, 520px); overflow-y:auto; overscroll-behavior:contain; scroll-behavior:smooth; }
.panel-notif-lista > li + li { border-top:1px solid #f1f5f9; }
@media (max-width:1023px) { .panel-notif { top:auto; bottom:5.25rem; left:.75rem; right:.75rem; width:auto; } }

/* Plano SVG */
.plano svg { width:100%; height:auto; max-height:70vh; user-select:none; }
.plano .calle { cursor:pointer; transition:filter .15s; }
.plano .calle:hover rect { filter:brightness(.93); }
.plano .calle rect { vector-effect:non-scaling-stroke; stroke-width:1px; }
.plano .calle.sel rect { stroke:#A6192E; stroke-width:3px; }
.plano .calle.pulso rect { animation:pulso 1.2s ease-out; }
@keyframes pulso { 0% { stroke:#A6192E; stroke-width:5px; } 100% { stroke-width:1px; } }
.plano.arrastrable .calle { cursor:grab; }

.feed-item { animation:entrar .25s ease-out; }
@keyframes entrar { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
#lector video { border-radius:.75rem; }
.plano.arrastrable svg { touch-action:none; }

/* ---------------- Editor de layouts por celdas ---------------- */
.editor-lienzo { height:72vh; min-height:420px; background:#eef2f7; position:relative; touch-action:none; }
.editor-svg { width:100%; height:100%; display:block; outline:none; user-select:none; }
.editor-lienzo[data-tool=dibujar] .editor-svg, .editor-lienzo[data-tool=calibrar] .editor-svg { cursor:crosshair; }
.editor-lienzo[data-tool=mano] .editor-svg, .editor-lienzo[data-pan] .editor-svg { cursor:grab; }
.editor-lienzo[data-tool=plano] .editor-svg { cursor:move; }
.editor-lienzo[data-tool=seleccionar] .ec { cursor:move; }
.editor-svg .gl  { stroke:#94a3b8; stroke-opacity:.28; stroke-width:1; vector-effect:non-scaling-stroke; }
.editor-svg .gl5 { stroke:#64748b; stroke-opacity:.45; stroke-width:1; vector-effect:non-scaling-stroke; }
.editor-svg .gborde { stroke:#475569; stroke-width:1.5; vector-effect:non-scaling-stroke; }
.editor-svg .gnum { fill:#64748b; font-family:ui-monospace,monospace; }
.editor-svg .ec rect { stroke-width:1.5; vector-effect:non-scaling-stroke; }
.editor-svg .ec text { fill:#0f172a; font-weight:700; pointer-events:none; }
.editor-svg .ec.sel rect { stroke:#A6192E; stroke-width:3; }
.editor-svg .ec.inval rect { stroke:#dc2626; fill:#fecaca; fill-opacity:.8; }
.editor-svg .handle { fill:#fff; stroke:#A6192E; stroke-width:2; vector-effect:non-scaling-stroke; cursor:nwse-resize; }
.editor-svg .borrador { fill:#A6192E; fill-opacity:.15; stroke:#A6192E; stroke-width:2; stroke-dasharray:6 4; vector-effect:non-scaling-stroke; }
.editor-svg .borrador.inval { fill:#dc2626; fill-opacity:.2; stroke:#dc2626; }
.editor-svg .cursor-celda { fill:#A6192E; fill-opacity:.12; stroke:#A6192E; stroke-width:1; vector-effect:non-scaling-stroke; pointer-events:none; }
.editor-svg .marco { fill:#1d4ed8; fill-opacity:.08; stroke:#1d4ed8; stroke-width:1; stroke-dasharray:4 3; vector-effect:non-scaling-stroke; }
.editor-svg .calib-linea { stroke:#d97706; stroke-width:2.5; stroke-dasharray:6 4; vector-effect:non-scaling-stroke; }
.editor-svg .calib-punto { fill:#d97706; stroke:#fff; stroke-width:2; vector-effect:non-scaling-stroke; }
.editor-svg .medida { fill:#A6192E; font-weight:700; paint-order:stroke; stroke:#fff; stroke-width:3px; vector-effect:non-scaling-stroke; }
.tool-btn { display:inline-flex; align-items:center; gap:.35rem; padding:.4rem .65rem; border-radius:.45rem; font-size:.8rem; color:#334155; white-space:nowrap; }
.tool-btn:hover:not(:disabled) { background:#e2e8f0; }
.tool-btn.activo { background:#A6192E; color:#fff; }
.tool-btn:disabled { opacity:.4; cursor:not-allowed; }

/* ---------------- Fase 1: tiempo real, captura, hoja ---------------- */
.plano.con-zoom svg { cursor:grab; touch-action:none; }
.plano.arrastrando svg { cursor:grabbing; }
.plano .txt-halo { paint-order:stroke; stroke:#fff; stroke-linejoin:round; }
.plano .plano-fondo { pointer-events:none; }
#card-plano:fullscreen, #card-plano.fs-simulado { position:fixed; inset:0; z-index:60; border-radius:0; padding:12px; background:#fff; display:flex; flex-direction:column; }
#card-plano:fullscreen #plano, #card-plano.fs-simulado #plano { flex:1; min-height:0; }
#card-plano:fullscreen .plano svg, #card-plano.fs-simulado .plano svg { max-height:none; height:100%; }

.mat-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:56px; padding:.45rem .2rem; border:1px solid #d1d5db; border-radius:.75rem; background:#fff; line-height:1.1; transition:background-color .15s, border-color .15s, transform .1s; }
.mat-btn:active { transform:scale(.95); }
.mat-btn b { font-size:1rem; }
.mat-btn span { font-size:.6rem; color:#64748b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.mat-btn.activo { background:#A6192E; border-color:#A6192E; color:#fff; }
.mat-btn.activo span { color:#fde2e6; }

.tabla-hoja th { font-size:.68rem; font-weight:700; padding:.35rem .4rem; border:1px solid #1e293b; background:#f8fafc; white-space:nowrap; }
.tabla-hoja td { padding:.3rem .4rem; border:1px solid #94a3b8; height:1.9rem; }
@media print {
  @page { size:A4 landscape; margin:10mm; }
  body { background:#fff !important; }
  #topbar, #sidebar, #bottomnav, #toasts, .no-print { display:none !important; }
  body.con-sesion #shell { padding-left:0 !important; }
  main { max-width:none !important; padding:0 !important; }
  .card { border:none !important; box-shadow:none !important; padding:0 !important; }
  .tabla-hoja td { height:auto; }
}

/* ---------------- Mejoras: pestañas, anotador PDF, firma ---------------- */
.pestana { min-height:40px; padding:.5rem 1rem; border-radius:999px; font-size:.85rem; font-weight:600; color:#475569; white-space:nowrap; display:inline-flex; align-items:center; gap:.45rem; transition:background-color .2s, color .2s; }
.pestana:hover { background:#eef2f7; color:#0f172a; }
.pestana.activa { background:#1e293b; color:#fff; }
.pestana-n { font-size:.7rem; min-width:1.25rem; padding:0 .35rem; border-radius:999px; background:rgba(15,23,42,.08); text-align:center; }
.pestana.activa .pestana-n { background:rgba(255,255,255,.25); }
.anot-pagina { position:relative; background:#fff; box-shadow:0 4px 16px rgba(15,23,42,.18); margin:0 auto 18px; }
.anot-pagina img { display:block; width:100%; height:auto; user-select:none; -webkit-user-drag:none; }
.anot-pagina svg.capa { position:absolute; inset:0; width:100%; height:100%; touch-action:none; }
.anot-pagina[data-tool=texto] svg.capa, .anot-pagina[data-tool=firma] svg.capa { cursor:crosshair; }
.anot-pagina[data-tool=resaltado] svg.capa, .anot-pagina[data-tool=dibujo] svg.capa { cursor:crosshair; }
.anot-pagina[data-tool=seleccionar] .anot { cursor:move; }
.anot-pagina .anot.sel > :first-child { outline:none; filter:drop-shadow(0 0 2px #2563eb); }
.anot-editor { position:absolute; z-index:5; background:rgba(255,255,220,.95); border:1.5px dashed #2563eb; padding:2px 4px; font:13px/1.25 Roboto, sans-serif; color:#b91c1c; resize:both; outline:none; }
.tool-v { display:flex; align-items:center; gap:.5rem; width:100%; padding:.55rem .75rem; border-radius:.5rem; font-size:.85rem; color:#334155; }
.tool-v:hover { background:#e2e8f0; }
.tool-v.activo { background:#A6192E; color:#fff; }
.firma-pad { touch-action:none; background:#fff; border:1px dashed #94a3b8; border-radius:.5rem; width:100%; height:180px; cursor:crosshair; }
.plano .area-forma { pointer-events:none; }

/* ---------------- Organizador de PDF ---------------- */
.org-rejilla { display:grid; grid-template-columns:repeat(auto-fill, minmax(175px, 1fr)); gap:14px; align-content:start; }
.org-rejilla-mini { grid-template-columns:repeat(auto-fill, minmax(88px, 1fr)); gap:8px; }
.org-pag { position:relative; background:#fff; border:1px solid #cbd5e1; border-radius:.5rem; padding:6px; cursor:grab; user-select:none; outline:none; }
.org-pag:hover { border-color:#94a3b8; box-shadow:0 2px 8px rgba(15,23,42,.12); }
.org-pag.sel, .org-pag:focus-visible { border-color:#A6192E; box-shadow:0 0 0 2px rgba(166,25,46,.35); }
.org-img { aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#f8fafc; border-radius:.3rem; }
.org-img img { max-width:100%; max-height:100%; transition:transform .2s; box-shadow:0 1px 3px rgba(15,23,42,.25); background:#fff; }
.org-num { position:absolute; right:8px; bottom:8px; background:#0f172a; color:#fff; font-size:.65rem; padding:0 .35rem; border-radius:.25rem; }
.org-origen { position:absolute; left:8px; top:8px; color:#fff; font-size:.6rem; padding:.05rem .35rem; border-radius:.25rem; }
.org-rot { position:absolute; right:8px; top:8px; background:#fff; border:1px solid #cbd5e1; font-size:.6rem; padding:0 .3rem; border-radius:.25rem; }
.org-usada { position:absolute; left:6px; top:6px; background:#16a34a; color:#fff; font-size:.6rem; width:1rem; height:1rem; border-radius:999px; display:flex; align-items:center; justify-content:center; }
.org-pag-fuente { padding:4px; cursor:pointer; }
.org-acciones { position:absolute; left:50%; bottom:6px; transform:translateX(-50%); display:none; gap:2px; background:rgba(15,23,42,.88); border-radius:.4rem; padding:2px; }
.org-pag:hover .org-acciones, .org-pag.sel .org-acciones { display:flex; }
.org-acciones button { color:#fff; font-size:.75rem; width:1.45rem; height:1.45rem; border-radius:.3rem; }
.org-acciones button:hover { background:rgba(255,255,255,.2); }
.org-acciones .org-del:hover { background:#dc2626; }
.org-arrastrando { opacity:.35; }
.org-antes { box-shadow:-4px 0 0 0 #A6192E; }
.org-despues { box-shadow:4px 0 0 0 #A6192E; }
#org-doc.org-sobre { border-color:#A6192E; background:#fbeef0; }
.org-error .org-img { background:#fee2e2; }
@media (hover:none) { .org-acciones { display:flex; position:static; transform:none; margin-top:4px; justify-content:center; } }

/* ---------------- Rediseño: jerarquía tipográfica y detalles ---------------- */
#view h1 { color:#1e293b; letter-spacing:-.015em; }
@media (min-width:640px) { #view h1.text-xl { font-size:1.5rem; line-height:2rem; } }
#view h2 { color:#1e293b; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.tabular-nums { font-variant-numeric:tabular-nums; }
input[type=checkbox] { width:1.15rem; height:1.15rem; accent-color:var(--marca); }
::selection { background:rgba(166,25,46,.15); }

/* Tipo de línea (pallet / artículo sin pallet) en códigos no catalogados */
.tipo-btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:44px; border-radius:.75rem;
  border:1px solid #d1d5db; background:#fff; font-size:.85rem; font-weight:600; color:#334155; transition:background-color .15s, border-color .15s; }
.tipo-btn.activo { background:#1e293b; border-color:#1e293b; color:#fff; }