/* portal.css — Lample Portal Cliente v3
   Redesigned for mechanics: big touch targets, one-handed use,
   status colors, fast picking flow. */

:root {
  --color-ok: #34d399;
  --color-ok-bg: rgba(52, 211, 153, 0.12);
  --color-ok-border: rgba(52, 211, 153, 0.25);
  --color-miss: #f87171;
  --color-miss-bg: rgba(248, 113, 113, 0.12);
  --color-miss-border: rgba(248, 113, 113, 0.25);
  --color-pend: #fbbf24;
  --color-pend-bg: rgba(251, 191, 36, 0.10);
  --color-pend-border: rgba(251, 191, 36, 0.25);
  --color-dmg: #a78bfa;
  --color-dmg-bg: rgba(167, 139, 250, 0.10);
  --color-dmg-border: rgba(167, 139, 250, 0.25);
  --touch-min: 48px;
  --touch-ideal: 56px;
}

/* Skin FUELLO ERP (Linear-inspired + glass) — base = modo OSCURO del ERP;
   el claro (default) va en los overrides html.light de abajo. JC 2026-07-07. */
body {
  background-color: #08090a;
  color: #f4f4f5;
  min-height: 100dvh;
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

/* ---- Gradients ---- */
.primary-gradient { background: linear-gradient(135deg, #8a98ff 0%, #7c8bff 100%); }
.glass-panel { background: rgba(20, 21, 24, 0.72); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.08); }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a2b30; border-radius: 999px; }
/* Firefox no soporta ::-webkit-scrollbar: su barra ancha tapaba los importes
   (JC 2026-07-10). scrollbar-width:thin es lo más fino que permite. */
* { scrollbar-width: thin; scrollbar-color: #2a2b30 transparent; }
html.light * { scrollbar-color: #d4d4d8 transparent; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none !important; }

/* ---- iOS safe area ---- */
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ---- Skeleton shimmer ---- */
.lp-skel {
  background: linear-gradient(90deg, #101113 25%, #18191c 50%, #101113 75%);
  background-size: 200% 100%;
  animation: skel 1.2s infinite;
  border-radius: 16px;
}
@keyframes skel {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- Fade in ---- */
.fade-in { animation: fadeIn 0.2s ease-out; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Empty state ---- */
.empty-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 64px 24px; text-align: center;
  background: rgba(255,255,255,0.02);
  border: 1.5px dashed rgba(255,255,255,0.06);
  border-radius: 20px;
  width: 100%;
}
.empty-state .material-symbols-outlined {
  font-size: 48px; opacity: 0.10; margin-bottom: 12px;
}
html.light .empty-state {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.06);
}

/* ================================================================
   PICKING SYSTEM v3 — Big, bold, one-handed
   ================================================================ */

/* ---- Stepper (the +/- quantity control) ---- */
.pick-stepper {
  display: flex; align-items: center;
  border-radius: 12px; overflow: hidden;
  background: #101113;
  border: 2px solid rgba(255, 255, 255, 0.10);
  user-select: none;
}
.pick-stepper button {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: none; background: transparent;
  color: #7c8bff; cursor: pointer;
  transition: background 0.12s, transform 0.1s;
}
.pick-stepper button:active {
  background: rgba(124, 139, 255, 0.18);
  transform: scale(0.90);
}
.pick-stepper button:disabled { opacity: 0.15; cursor: default; }
.pick-stepper .pick-count {
  min-width: 52px; text-align: center;
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 800; font-size: 18px;
  color: #f4f4f5; padding: 0 2px;
  line-height: 44px;
}
.pick-stepper .pick-count.partial { color: var(--color-pend); }
.pick-stepper .pick-count.complete { color: var(--color-ok); }

/* ---- Pick line states (borde completo tintado, estilo Linear) ---- */
.pick-line { transition: background 0.15s ease, border-color 0.15s ease; border: 1px solid transparent; }
.pick-line[data-state="complete"] {
  border-color: var(--color-ok-border);
  background: var(--color-ok-bg) !important;
}
.pick-line[data-state="partial"] {
  border-color: var(--color-pend-border);
  background: var(--color-pend-bg) !important;
}
.pick-line[data-state="garantia"] {
  border-color: var(--color-dmg-border);
  background: var(--color-dmg-bg) !important;
}
.pick-line[data-state="abono"] {
  border-color: var(--color-pend-border);
  background: var(--color-pend-bg) !important;
}
.pick-line[data-state="pending"] {
  border-color: rgba(255,255,255,0.06);
}
html.light .pick-line[data-state="pending"] { border-color: rgba(0,0,0,0.07); }

/* ---- Quick-action pill buttons ---- */
.pick-action {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 12px; border-radius: 10px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em;
  border: 1px solid transparent; cursor: pointer;
  transition: all 0.12s; font-family: 'Inter', sans-serif;
  min-height: 40px;
}
.pick-action:active { transform: scale(0.94); }
.pick-action.ok {
  background: var(--color-ok-bg); color: var(--color-ok);
  border-color: var(--color-ok-border);
}
/* Devoluciones (JC 2026-07-07): garantía = violeta, abono = ámbar */
.pick-action.garantia {
  background: var(--color-dmg-bg); color: var(--color-dmg);
  border-color: var(--color-dmg-border);
}
.pick-action.abono {
  background: var(--color-pend-bg); color: var(--color-pend);
  border-color: var(--color-pend-border);
}
.pick-action.reset {
  background: rgba(255,255,255,0.05); color: #7a8a9a;
  border-color: rgba(255,255,255,0.08);
}

/* ---- Note input ---- */
.pick-note-input {
  background: #101113; border: 1.5px solid rgba(255,255,255,0.10);
  border-radius: 10px; padding: 12px 14px; color: #f4f4f5;
  font-size: 14px; font-family: 'Inter', sans-serif;
  width: 100%; resize: none; min-height: 40px; max-height: 120px;
}
.pick-note-input:focus { outline: none; border-color: rgba(124,139,255,0.4); }
.pick-note-input::placeholder { color: rgba(161,161,170,0.4); }

/* ---- Bottom action bar (sticky) ---- */
.pick-bottom-bar {
  position: sticky; bottom: 80px; z-index: 30;
  padding: 14px 16px;
  background: rgba(8, 9, 10, 0.95);
  backdrop-filter: blur(16px);
  border-top: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 16px 16px 0 0;
  margin: 0 -20px;
  display: flex; gap: 10px; align-items: center;
}
@media (min-width: 768px) {
  .pick-bottom-bar {
    position: sticky; bottom: 16px;
    margin: 0 auto; padding: 14px 20px;
    border-radius: 16px;
    border: 1.5px solid rgba(255,255,255,0.08);
  }
}

/* ---- Progress ring ---- */
.progress-ring-circle {
  transition: stroke-dashoffset 0.3s ease;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

/* ---- Card press feedback ---- */
.card-press { transition: transform 0.15s, background 0.15s; }
.card-press:active { transform: scale(0.98); }

/* ---- Swipe hint glow on pending cards ---- */
@keyframes pendingPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
  50% { box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15); }
}
.pending-pulse { animation: pendingPulse 2.5s infinite; }

/* ---- Voice recording pulse ---- */
@keyframes voicePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
  50% { box-shadow: 0 0 0 16px rgba(239, 68, 68, 0.15); }
}
.voice-recording {
  animation: voicePulse 1.2s infinite;
  background: #ef4444 !important;
}

/* ---- "Mark all OK" swipe button ---- */
.swipe-all-ok {
  min-height: var(--touch-ideal);
  border-radius: 16px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* ---- Today badge (pulsing) ---- */
.today-badge {
  animation: todayPulse 2s infinite;
}
@keyframes todayPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ================================================================
   LIGHT MODE OVERRIDES
   ================================================================ */
/* LIGHT = modo por DEFECTO — paleta FUELLO ERP (Linear) exacta */
html.light body { background-color: #fafafa; color: #08090a; }
html.light .primary-gradient { background: linear-gradient(135deg, #6e79de 0%, #5e6ad2 100%); }
html.light .glass-panel { background: rgba(255,255,255,0.72); backdrop-filter: blur(12px); border-color: #e4e4e7; }
html.light ::-webkit-scrollbar-thumb { background: #d4d4d8; }
html.light .lp-skel { background: linear-gradient(90deg, #f4f4f5 25%, #e4e4e7 50%, #f4f4f5 75%); background-size: 200% 100%; }

html.light .bg-surface { background-color: #fafafa !important; }
html.light .bg-surface\/90,
html.light .bg-surface\/85,
html.light .bg-surface\/92,
html.light .bg-surface\/95 { background-color: rgba(250,250,250,0.95) !important; }
html.light .bg-surface-container-lowest { background-color: #ffffff !important; }
html.light .bg-surface-container-low { background-color: #ffffff !important; }
html.light .bg-surface-container { background-color: #ffffff !important; }
html.light .bg-surface-container-high { background-color: #f4f4f5 !important; }
html.light .bg-surface-container-highest { background-color: #e4e4e7 !important; }
html.light .bg-surface-dim { background-color: #f4f4f5 !important; }
/* Variantes HOVER: sin esto el hover usaba el color del tema oscuro (#101113)
   y "pintaba de negro" las filas en claro (JC 2026-07-10). */
html.light .hover\:bg-surface-container:hover { background-color: #f4f4f5 !important; }
html.light .hover\:bg-surface-container-low:hover { background-color: #f7f7f8 !important; }
html.light .hover\:bg-surface-container-high:hover { background-color: #ededf0 !important; }
html.light .hover\:bg-surface-container-highest:hover { background-color: #e4e4e7 !important; }
html.light .bg-primary { background-color: #5e6ad2 !important; }

html.light .text-on-surface { color: #08090a !important; }
html.light .text-on-surface-variant { color: #52525b !important; }
html.light .text-primary { color: #5e6ad2 !important; }
html.light .text-secondary { color: #059669 !important; }
html.light .text-error { color: #d14b4b !important; }
html.light .text-pending { color: #d97706 !important; }

html.light .border-outline-variant\/10,
html.light .border-outline-variant\/15,
html.light .border-outline-variant\/5 { border-color: #e4e4e7 !important; }

html.light .pick-stepper { background: #fff; border-color: #d4d4d8; }
html.light .pick-stepper button { color: #5e6ad2; }
html.light .pick-stepper button:active { background: rgba(94,106,210,0.1); }
html.light .pick-stepper .pick-count { color: #08090a; }
html.light .pick-stepper .pick-count.partial { color: #d97706; }
html.light .pick-stepper .pick-count.complete { color: #059669; }
html.light .pick-line { background: #fff !important; }
html.light .pick-note-input { background: #ffffff; border-color: #d4d4d8; color: #08090a; }
html.light .pick-note-input:focus { border-color: rgba(94,106,210,0.5); }
html.light .pick-bottom-bar { background: rgba(250,250,250,0.96); border-color: #e4e4e7; }
html.light .pick-action.reset { background: rgba(0,0,0,0.04); color: #52525b; border-color: #e4e4e7; }

/* ================================================================
   HOLDED-STYLE PAPER (hp-*)
   A4 white sheet on dark bg — used for factura, presupuesto, pedido,
   albarán read-only views. Dark-mode-safe; paper always stays white.
   ================================================================ */
.hp-toolbar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px;
  /* NUNCA a dos líneas (JC 2026-07-17: "con la sidebar el ancho se queda más
     pequeño y los botones salen en dos líneas"). Con Matrícula+Nota+EKON
     pdf+Chequear+Marcar como revisado+Imprimir a la vez, el corte a
     icon-only de abajo (900px) no siempre basta según cuántos botones haya
     — nowrap+scroll horizontal es la red de seguridad que garantiza una
     sola línea siempre, en vez de partir a dos. */
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  /* Sticky al ver documentos (JC 2026-07-09): la barra de acciones no se va al
     hacer scroll. Se queda justo bajo el topbar fijo (48px). */
  position: sticky; top: 48px; z-index: 30;
  background: #08090a;
  padding: 8px 0; margin-top: -8px;
}
.hp-toolbar > * { flex-shrink: 0; }
html.light .hp-toolbar { background: #fafafa; }
@media (max-width: 767px) { .hp-toolbar { top: 48px; } }
/* Subido de 640px a 900px (JC 2026-07-17): con la sidebar de la barra
   abierta, el ancho disponible del portal baja de eso mucho antes de llegar
   a una pantalla "móvil" — necesitaba pasar a icon-only bastante antes. */
@media (max-width: 900px) {
  .hp-toolbar .hp-btn span:not(.material-symbols-outlined) {
    display: none; /* en ancho reducido solo iconos + etiqueta de volver */
  }
  .hp-toolbar .hp-btn-ghost span:not(.material-symbols-outlined) {
    display: inline; /* keep back label */
  }
}
.hp-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 8px; border: none;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
  min-height: 40px;
}
.hp-btn:active { transform: scale(0.96); }
.hp-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.hp-btn-primary { background: #5e6ad2; color: #fff; }
.hp-btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.hp-btn-success { background: #059669; color: #fff; }
.hp-btn-success:hover:not(:disabled) { filter: brightness(1.08); }
.hp-btn-danger  { background: rgba(239,68,68,0.12); color: #EF4444; border: 1px solid rgba(239,68,68,0.25); }
.hp-btn-danger:hover:not(:disabled) { background: rgba(239,68,68,0.18); }

/* Quitar las flechas nativas de los input number (tapaban el valor). JC 2026-07-09 */
input[type="number"].lp-no-spin::-webkit-outer-spin-button,
input[type="number"].lp-no-spin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"].lp-no-spin { -moz-appearance: textfield; appearance: textfield; }

/* Toasts APILABLES (uno encima de otro, sin pisarse) + entrada suave. JC 2026-07-09 */
#lp-toasts {
  position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%);
  z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none; width: max-content; max-width: 92vw;
}
@media (min-width: 768px) { #lp-toasts { bottom: 26px; } }
.lp-toast {
  pointer-events: auto; display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-radius: 14px; max-width: 92vw;
  font-size: 13.5px; font-weight: 600; color: #f4f4f5;
  background: rgba(24,25,28,0.92); border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 12px 32px rgba(0,0,0,0.38); backdrop-filter: blur(12px);
  opacity: 0; transform: translateY(12px) scale(0.97);
  transition: opacity 0.24s ease, transform 0.26s cubic-bezier(0.22,1,0.36,1);
}
.lp-toast.in { opacity: 1; transform: translateY(0) scale(1); }
.lp-toast.out { opacity: 0; transform: translateY(-6px) scale(0.98); }
.lp-toast-ic { font-size: 20px; flex-shrink: 0; }
.lp-toast-msg { min-width: 0; }
html.light .lp-toast { background: rgba(255,255,255,0.96); color: #18181b; border-color: rgba(0,0,0,0.08); box-shadow: 0 12px 32px rgba(0,0,0,0.14); }
.hp-btn-ghost {
  display: inline-flex; align-items: center; gap: 6px; /* iconos centrados en altura */
  background: transparent; color: rgba(255,255,255,0.7);
  padding: 8px 12px; font-size: 14px; min-height: 44px;
  border-radius: 8px; border: none; cursor: pointer;
}
html.light .hp-btn-ghost { color: rgba(0,0,0,0.6); }
.hp-btn-ghost:hover { background: rgba(255,255,255,0.05); }
html.light .hp-btn-ghost:hover { background: rgba(0,0,0,0.04); }

/* Papel de documento estilo HOLDED (encargo JC 2026-07-07) con fuente RUBIK */
.hp-sheet {
  background: #fff;
  color: #202433;
  width: 210mm;         /* A4 portrait — desktop only */
  min-height: 297mm;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 2px 24px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.15);
  padding: 18mm 16mm;
  font-family: 'Rubik', 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.55;
  font-size: 13px;
  box-sizing: border-box;
}
/* Mobile: relax A4 rigidity so it fits the viewport without horizontal
   scroll. Paper style is preserved (white bg, shadow, rounded). */
@media (max-width: 768px) {
  .hp-sheet {
    width: 100%;
    min-height: 0;
    padding: 18px 16px;
    border-radius: 6px;
    font-size: 12px;
  }
  .hp-header { flex-direction: row; align-items: flex-start; gap: 12px; }
  .hp-header-left { align-items: center; }
  .hp-logo { width: 64px; height: 64px; }
  .hp-empresa-name { font-size: 16px; }
  .hp-vehiculo { text-align: right; }
  .hp-veh-plate { font-size: 13px; }
  .hp-doc-band { align-items: flex-start; gap: 16px; }
  .hp-doc-number { font-size: 20px; }
  .hp-doc-dates { gap: 16px; }
  .hp-client { display: block; }
  .hp-table { font-size: 11px; }
  .hp-th, .hp-td { padding: 6px 4px; }
  .hp-th-code { width: auto; }
  .hp-totals-box { width: 100%; }
}

.hp-header {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  margin-bottom: 32px;
}
.hp-header-left {
  display: flex; align-items: center; gap: 14px;
  min-width: 0;
}
.hp-logo {
  /* Logo grande y presente en la cabecera (JC 2026-07-09: "se veía muy pequeño").
     Sin aspect-ratio+stretch (creaba un bucle logo-más-alto→texto-se-parte). */
  width: 92px; height: 92px;
  flex-shrink: 0;
  margin-top: 0;
}
.hp-empresa-name {
  font-size: 19px; font-weight: 700; color: #16192a;
  letter-spacing: -0.3px;
}
.hp-empresa-line { font-size: 11.5px; color: #7a7f93; margin-top: 2px; }
.hp-empresa-line:first-of-type { margin-top: 5px; }

/* Vehículo arriba a la derecha — JC 2026-07-09: modelo pequeño arriba,
   matrícula MUCHO más grande debajo. */
.hp-vehiculo { text-align: right; flex-shrink: 0; }
.hp-veh-model { font-size: 11.5px; color: #7a7f93; letter-spacing: 0.2px; }
.hp-veh-plate {
  font-size: 26px; font-weight: 800; color: #16192a; margin-top: 2px;
  letter-spacing: 0.5px; font-variant-numeric: tabular-nums; line-height: 1.05;
}
/* Matrícula editada/añadida por el cliente en el portal (NO toca EKON) → azul. JC 2026-07-17. */
.hp-veh-plate--edit { color: #2563eb; }
.mat-edit-text { color: #2563eb !important; }
.mat-edit-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; margin-left: 2px;
  border: none; background: transparent; color: #2563eb; cursor: pointer;
  border-radius: 4px; vertical-align: middle;
}
.mat-edit-btn:hover { background: rgba(37, 99, 235, 0.12); }
/* Matrícula editable desde el listado: clic en la celda. Lápiz al pasar el ratón. */
.mat-editable { cursor: pointer; display: inline-flex; align-items: center; gap: 3px; border-radius: 4px; padding: 1px 3px; }
.mat-editable:hover { background: rgba(37, 99, 235, 0.10); }
.mat-editable-pencil { font-size: 13px; opacity: 0; color: #2563eb; transition: opacity 120ms ease; }
.mat-editable:hover .mat-editable-pencil { opacity: 1; }

/* Banda del documento: tipo+número (izq) · fecha+válido hasta (dcha) */
.hp-doc-band {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  border-top: 1px solid #ECEDF2; border-bottom: 1px solid #ECEDF2;
  padding: 16px 0; margin-bottom: 16px;
}
/* Etiquetas del documento en su propia línea, debajo de la banda (JC 2026-07-09) */
.hp-doc-badges-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 24px; }
.hp-doc-title { min-width: 0; }
.hp-doc-type {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 2px;
}
.hp-doc-number {
  font-size: 30px; font-weight: 700; color: #16192a; margin-top: 4px;
  letter-spacing: -0.5px; font-variant-numeric: tabular-nums;
}
/* Número compacto (presupuestos): del tamaño de Fecha/Válido hasta (JC 2026-07-09) */
.hp-doc-number.hp-doc-number-sm { font-size: 15px; font-weight: 700; margin-top: 6px; letter-spacing: 0; }
.hp-doc-badges { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.hp-doc-dates {
  display: flex; gap: 40px; flex-shrink: 0; text-align: right;
}
.hp-doc-dates .hp-meta-pair { align-items: flex-end; }
.hp-meta-pair { display: flex; flex-direction: column; gap: 3px; }
.hp-meta-val { font-size: 13px; font-weight: 500; color: #16192a; }
.hp-badge {
  display: inline-flex; align-items: center;
  padding: 4px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.8px;
  border: 1px solid;
}

.hp-divider {
  height: 1px; background: #E5E7EB; border: 0;
  margin: 0 0 24px 0;
}

.hp-label {
  font-size: 9.5px; text-transform: uppercase;
  letter-spacing: 1.4px; font-weight: 600; color: #9ba0b3;
  margin-bottom: 4px;
}

.hp-client {
  margin-bottom: 32px;
}
.hp-client-name { font-size: 15px; font-weight: 600; color: #16192a; }
.hp-client-line { font-size: 12.5px; color: #5d6274; margin-top: 2px; }
.hp-client-nif-inline {
  font-weight: 600;
  color: #111;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Las LÍNEAS DE PRODUCTO nunca desbordan el papel: en pantallas estrechas la
   tabla se desplaza dentro de su propio contenedor (feedback JC móvil). */
.hp-table-scroll { overflow-x: auto; margin-bottom: 28px; -webkit-overflow-scrolling: touch; }
.hp-table-scroll .hp-table { margin-bottom: 0; }
.hp-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 28px;
  font-size: 13px;
}
@media (max-width: 768px) {
  .hp-table { min-width: 430px; } /* columnas legibles; el scroll hace el resto */
  .hp-table-scroll { margin-bottom: 20px; }
}
/* Cabecera de tabla como BANDA gris clara (Holded) */
/* Factura fiel a EKON (JC 2026-07-09): tabla estándar de 7 columnas + subcabecera
   separadora por cada albarán (FECHA · Nº ALBARÁN · MATRÍCULA). */
.hp-table-fac { font-size: 11px; }
/* SIN scroll horizontal en facturas: la tabla siempre cabe en la hoja (JC 2026-07-10) */
.hp-sheet-fac .hp-table-scroll { overflow-x: hidden; }
.hp-sheet-fac .hp-table { min-width: 0 !important; width: 100%; }
.hp-sheet-fac .hp-td, .hp-sheet-fac .hp-th { word-break: break-word; }
/* Menos padding entre líneas de artículo (JC) */
.hp-table-fac .hp-td, .hp-table-fac .hp-th { padding-top: 3px !important; padding-bottom: 3px !important; }
/* Cabecera completa + caja dentro del thead → se repiten en cada folio */
.hp-table-fac .hp-fac-hdrrow td { padding: 0 0 8px !important; background: transparent !important; border: 0 !important; }
.hp-table-fac .hp-fac-boxrow td { padding: 2px 0 8px !important; background: transparent !important; border: 0 !important; }
.hp-table-fac .hp-fac-box { margin: 0; }
/* Cabecera de factura más compacta (menos altura) — JC 2026-07-09 */
.hp-sheet-fac .hp-header { margin-bottom: 10px !important; }
.hp-sheet-fac .hp-logo { width: 58px !important; height: 58px !important; }
.hp-sheet-fac .hp-empresa-line { line-height: 1.3 !important; }
.hp-sheet-fac .hp-doc-band { margin-top: 10px !important; margin-bottom: 8px !important; padding-bottom: 8px !important; }
.hp-sheet-fac .hp-client { margin-top: 8px !important; margin-bottom: 10px !important; }
.hp-sheet-fac .hp-client-line { line-height: 1.35 !important; }
.hp-table-fac .hp-alb-sep td {
  background: #eef1f5; padding: 5px 10px;
  border-top: 1px solid #d4d8de; border-bottom: 1px solid #d4d8de;
}
/* Posiciones fijas a lo ancho del folio; las etiquetas siempre alineadas (JC 2026-07-09) */
.hp-alb-sep-grid {
  display: grid; grid-template-columns: 22% 26% 26% 26%;
  gap: 4px; width: 100%; font-size: 10px; color: #1e293b;
}
.hp-alb-sep-grid > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-alb-sep-lbl { font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.02em; }
/* Albarán ELIMINADO en Ekon: apagado "como que no existe" pero legible (JC 2026-07-22) */
.alb-eliminado { opacity: 0.45; filter: grayscale(0.7); }
.alb-eliminado:hover { opacity: 0.7; }

/* ---- Banner de refresco al entrar (persistente) — JC 2026-07-23 ---- */
#lp-search-banner {
  position: fixed; top: 58px; left: 50%; transform: translate(-50%, -8px);
  z-index: 70; display: flex; align-items: center; gap: 9px;
  background: rgba(22, 23, 27, 0.96); backdrop-filter: blur(10px);
  color: #f4f4f5; border: 1px solid rgba(124,139,255,0.28);
  border-radius: 999px; padding: 9px 18px; font-size: 13px; font-weight: 600;
  box-shadow: 0 8px 28px rgba(0,0,0,0.42);
  opacity: 0; transition: opacity .25s ease, transform .25s ease; pointer-events: none;
  max-width: calc(100vw - 24px);
}
#lp-search-banner.in { opacity: 1; transform: translate(-50%, 0); }
html.light #lp-search-banner { background: rgba(255,255,255,0.98); color: #18181b; box-shadow: 0 8px 28px rgba(0,0,0,0.15); }

/* ---- Banner de PRESENCE staff ("otra persona en este taller") 2026-07-27 ---- */
#lp-presence-banner {
  position: fixed; top: 58px; left: 50%; transform: translate(-50%, -8px);
  z-index: 69; display: flex; align-items: center; gap: 9px;
  background: rgba(22, 23, 27, 0.96); backdrop-filter: blur(10px);
  color: #f4f4f5; border: 1px solid rgba(217, 119, 6, 0.4);
  border-radius: 999px; padding: 9px 18px; font-size: 13px; font-weight: 600;
  box-shadow: 0 8px 28px rgba(0,0,0,0.42);
  opacity: 0; transition: opacity .25s ease, transform .25s ease; pointer-events: none;
  max-width: calc(100vw - 24px);
}
#lp-presence-banner.in { opacity: 1; transform: translate(-50%, 0); }
html.light #lp-presence-banner { background: rgba(255,255,255,0.98); color: #18181b; box-shadow: 0 8px 28px rgba(0,0,0,0.15); }
.lp-sb-spin { width: 15px; height: 15px; flex-shrink: 0; border-radius: 50%; border: 2px solid rgba(124,139,255,0.3); border-top-color: #7c8bff; animation: lp-sb-rot .7s linear infinite; }
@keyframes lp-sb-rot { to { transform: rotate(360deg); } }

/* ---- Tour guiado (onboarding spotlight) — JC 2026-07-23 ---- */
#lp-tour { position: fixed; inset: 0; z-index: 96; pointer-events: none; }
#lp-tour .lp-tour-hole {
  position: fixed; left: 0; top: 0; width: 0; height: 0; border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(6, 8, 14, 0.66);
  outline: 2px solid #7c8bff; outline-offset: 3px;
  transition: left .28s cubic-bezier(.4,0,.2,1), top .28s cubic-bezier(.4,0,.2,1),
              width .28s cubic-bezier(.4,0,.2,1), height .28s cubic-bezier(.4,0,.2,1), opacity .2s;
  pointer-events: none;
}
#lp-tour .lp-tour-pop {
  position: fixed; pointer-events: auto; width: 320px; max-width: calc(100vw - 24px);
  background: rgba(22, 23, 27, 0.96); backdrop-filter: blur(12px);
  color: #f4f4f5; border: 1px solid rgba(124,139,255,0.28);
  border-radius: 18px; padding: 18px 18px 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.45); animation: lp-tour-in .22s ease;
}
html.light #lp-tour .lp-tour-pop { background: rgba(255,255,255,0.98); color: #18181b; box-shadow: 0 16px 48px rgba(0,0,0,0.18); }
#lp-tour .lp-tour-pop.center { left: 50% !important; top: 50% !important; transform: translate(-50%,-50%); width: 340px; }
@keyframes lp-tour-in { from { opacity: 0; transform: translateY(6px); } }
#lp-tour .lp-tour-ic { width: 42px; height: 42px; border-radius: 12px; background: rgba(124,139,255,0.16); color: #7c8bff; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
#lp-tour .lp-tour-ic .material-symbols-outlined { font-size: 24px; }
#lp-tour .lp-tour-body h3 { font-weight: 800; font-size: 18px; margin: 0 0 6px; }
#lp-tour .lp-tour-body p { font-size: 13.5px; line-height: 1.5; margin: 0; opacity: .82; }
#lp-tour .lp-tour-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; gap: 10px; }
#lp-tour .lp-tour-dots { display: flex; gap: 5px; }
#lp-tour .lp-tour-dot { width: 6px; height: 6px; border-radius: 999px; background: rgba(124,139,255,0.25); transition: all .2s; }
#lp-tour .lp-tour-dot.on { width: 18px; background: #7c8bff; }
#lp-tour .lp-tour-btns { display: flex; gap: 8px; }
#lp-tour .lp-tour-b { border: 0; border-radius: 10px; padding: 8px 14px; font-size: 12px; font-weight: 700; cursor: pointer; }
#lp-tour .lp-tour-b.ghost { background: transparent; color: inherit; opacity: .6; }
#lp-tour .lp-tour-b.ghost:hover { opacity: 1; }
#lp-tour .lp-tour-b.primary { background: linear-gradient(135deg, #8a98ff, #7c8bff); color: #fff; }

/* Nº de albarán clicable dentro de una factura → lleva al albarán (JC 2026-07-22) */
.hp-alb-link { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: #7c8bff; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.hp-alb-link:hover { color: #5b6ae0; }
@media print { .hp-alb-link { color: inherit; text-decoration: none; font-weight: inherit; } }
/* Cabecera en caja estilo EKON (Nº Factura · Cód. cliente · Fecha · Serie) — JC 2026-07-09 */
.hp-fac-box { display: flex; border: 1px solid #d4d4d8; border-radius: 6px; overflow: hidden; margin: 4px 0 16px; }
.hp-fac-cell { flex: 1; padding: 6px 10px; border-right: 1px solid #e4e4e7; display: flex; flex-direction: column; gap: 1px; }
.hp-fac-cell:last-child { border-right: 0; }
.hp-fac-lbl { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #71717a; }
.hp-fac-val { font-size: 12px; font-weight: 700; color: #18181b; }
/* Factura paginada: cada hoja con su cabecera; salto de página entre hojas (JC 2026-07-09) */
.hp-fac-page { position: relative; page-break-after: always; break-after: page; }
.hp-fac-page:last-child { page-break-after: auto; break-after: auto; }
.hp-fac-page + .hp-fac-page { margin-top: 22px; }
.hp-hoja { position: absolute; top: 12px; right: 14px; font-size: 10px; font-weight: 700; color: #94a3b8; }
.hp-table thead tr { background: #F7F8FA; }
.hp-table tbody tr { border-bottom: 1px solid #F1F2F6; }
.hp-table tbody tr:last-child { border-bottom: 0; }
.hp-th {
  text-align: left; padding: 8px 6px;
  font-size: 9.5px; text-transform: uppercase;
  letter-spacing: 1px; font-weight: 600; color: #9ba0b3;
}
.hp-th:first-child { padding-left: 12px; border-radius: 6px 0 0 6px; }
.hp-th:last-child  { padding-right: 12px; border-radius: 0 6px 6px 0; }
.hp-th-num { text-align: right; }
.hp-th-code { width: 13%; }

.hp-td {
  padding: 10px 6px;
  color: #202433;
}
.hp-td:first-child { padding-left: 12px; }
.hp-td:last-child  { padding-right: 12px; }
.hp-td-code {
  font-family: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
  font-size: 11.5px; color: #7a7f93;
}
.hp-td-num { text-align: right; font-variant-numeric: tabular-nums; color: #5d6274; }
.hp-td-dto { color: #9ba0b3; }
.hp-td-importe { font-weight: 600; color: #16192a; }

.hp-no-lineas {
  color: #888; font-size: 13px; text-align: center; padding: 24px 0;
}

/* Totales en CAJA gris redondeada (Holded) con el total en el color del doc */
.hp-totals {
  display: flex; justify-content: flex-end;
  margin-bottom: 28px;
}
.hp-totals-box {
  width: 290px;
  background: #F7F8FA;
  border-radius: 10px;
  padding: 14px 16px;
}
.hp-total-row {
  display: flex; justify-content: space-between;
  padding: 4px 0; font-size: 13px; color: #5d6274;
}
.hp-total-row .hp-num { font-variant-numeric: tabular-nums; color: #202433; }
.hp-total-final {
  padding: 10px 0 2px; margin-top: 8px;
  border-top: 1.5px solid;
  font-size: 19px; font-weight: 700;
}
.hp-total-final span:first-child {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1.6px; align-self: center; color: #9ba0b3;
}
.hp-total-final .hp-num { font-size: 21px; font-weight: 700; color: inherit !important; }

.hp-section {
  border-top: 1px solid #E5E7EB;
  padding-top: 16px;
  margin-bottom: 16px;
}
.hp-venc-row {
  display: flex; justify-content: space-between;
  padding: 4px 0; font-size: 13px;
}
.hp-venc-row span:first-child { color: #555; }
.hp-venc-row span:last-child  { color: #111; font-weight: 600; font-variant-numeric: tabular-nums; }
.hp-cuenta { font-size: 12px; color: #888; margin-top: 8px; }
.hp-cuenta .hp-num { font-variant-numeric: tabular-nums; }
.hp-obs {
  font-size: 13px; color: #555;
  font-style: italic;
  white-space: pre-wrap;
}
.hp-ref { margin-top: 12px; font-size: 12px; color: #888; }

/* Action bar below paper — e.g. accept/reject for presupuestos.
   Lives OUTSIDE the paper, styled in dark theme to match the rest of the portal. */
.hp-actions {
  max-width: 800px;
  margin: 20px auto 0;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .hp-actions { grid-template-columns: 1fr 1fr 1.2fr; }
}

/* ================================================================
   HOLDED-STYLE DENSE LIST (hp-list) — desktop-only table for document lists
   (facturas, presupuestos, pedidos). Mobile keeps the card grid via
   `.hp-cards-mobile { display:grid } @media(md) { display:none }`.
   ================================================================ */
.hp-list {
  display: none;
  background: var(--tw-bg-surface-container-low, rgba(16,24,38,0.6));
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 16px;
  /* Pantallas justas (15" con 125% zoom): la tabla se desplaza en horizontal
     en vez de cortar columnas (JC 2026-07-09). */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.hp-list-header, .hp-list-row { min-width: 900px; }
html.light .hp-list {
  background: #ffffff;
  border-color: rgba(0,0,0,0.06);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.hp-list-header, .hp-list-row {
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
}
.hp-list-header {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-on-surface-variant, #a0b0c0);
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
html.light .hp-list-header {
  background: rgba(0,0,0,0.02);
  border-bottom-color: rgba(0,0,0,0.06);
  color: #5a6a80;
}
.hp-list-row {
  cursor: pointer;
  font-size: 14px;
  transition: background 0.12s;
  border-top: 1px solid rgba(255,255,255,0.04);
  color: #f5f6fa;
}
html.light .hp-list-row { color: #1a2540; border-top-color: rgba(0,0,0,0.05); }
.hp-list-row:first-of-type { border-top: 0; }
.hp-list-row:hover { background: rgba(255,255,255,0.035); }
html.light .hp-list-row:hover { background: rgba(0,0,0,0.025); }
.hp-list-row:active { background: rgba(255,255,255,0.06); }
.hp-list-cell-num  { font-variant-numeric: tabular-nums; }
.hp-list-cell-mono { font-family: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace; }
.hp-list-cell-right { text-align: right; }
.hp-list-cell-strong { font-weight: 700; }
.hp-list-cell-muted { color: var(--color-text-on-surface-variant, #8896a6); }

/* Toggle: show dense list on desktop, cards on mobile */
@media (min-width: 768px) {
  .hp-list { display: block; }
  .hp-cards-mobile { display: none !important; }
}

/* Status pill reused across lists */
.hp-pill {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* Print rules — hide everything except the paper. Works for both the inline
   paper (inside the portal) and the fullscreen overlay (.hp-overlay). */
@media print {
  /* margin:0 elimina la cabecera y el pie del NAVEGADOR (URL, fecha, nº de
     página viven en el margen de @page — JC 2026-07-08); el margen visual
     lo pone el padding de la hoja. */
  @page { size: A4; margin: 0; }
  /* Facturas: margen 0 en @page → SIN encabezado/pie del navegador. Los márgenes
     visuales los dan el padding lateral de la hoja (vale para todas las páginas)
     y el padding superior de la cabecera repetida en el thead (JC 2026-07-09). */
  @page facturaPage { size: A4; margin: 0; }
  .hp-sheet-fac { page: facturaPage; padding: 12mm !important; }
  .hp-sheet { padding: 14mm !important; box-shadow: none !important; }
  html, body { background: #fff !important; color: #111 !important; }

  /* Hide everything by default */
  body * { visibility: hidden !important; }

  /* Imprimiendo desde el visor: la app de detrás NO ocupa flujo (la
     visibility sola dejaba una primera página en blanco — bug JC) */
  body.hp-overlay-open #app { display: none !important; }

  /* Then reveal the paper sheet and its descendants */
  .hp-sheet, .hp-sheet * { visibility: visible !important; }
  /* Forzar impresión de colores/logo (por defecto el navegador los omite → el
     logo salía en blanco). JC 2026-07-09. */
  .hp-sheet, .hp-sheet * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* When printing from the overlay, make it occupy normal flow */
  .hp-overlay {
    position: static !important;
    background: none !important;
    backdrop-filter: none !important;
    display: block !important;
  }
  .hp-overlay-bar { display: none !important; }
  .pp-side { display: none !important; }
  .pp-row { display: block !important; }
  .hp-overlay-scroll { padding: 0 !important; overflow: visible !important; }

  /* Sheet itself: remove shadow/margin. Let it flow so long tables paginate.
     padding 12mm = margen SIMÉTRICO en papel (con @page margin 0) — JC 2026-07-10. */
  .hp-sheet {
    box-shadow: none !important;
    border-radius: 0 !important;
    max-width: none !important;
    min-height: 0 !important; /* don't force blank space on short invoices */
    width: 100% !important;
    margin: 0 !important;
    padding: 12mm !important;
    position: static !important;
    box-sizing: border-box !important;
  }

  /* Factura paginada: cada .hp-fac-page ocupa exactamente 1 folio A4, con su
     propio margen, y no se parte a mitad (JC 2026-07-09). */
  .hp-fac-page {
    padding: 12mm 13mm !important;
    box-sizing: border-box !important;
    position: relative !important;
    margin: 0 !important;
    page-break-after: always !important;
    break-after: page !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    /* Clavado a UN folio A4: si la estimación se pasa, recorta en vez de
       desbaratar toda la paginación (presupuesto de líneas conservador). */
    height: 296mm !important;
    overflow: hidden !important;
  }
  .hp-fac-page:last-child { page-break-after: auto !important; break-after: auto !important; }
  .hp-fac-page + .hp-fac-page { margin-top: 0 !important; }

  /* Table: repeat thead on every page, avoid splitting a row mid-way */
  .hp-table { page-break-inside: auto; }
  .hp-table thead { display: table-header-group !important; }
  .hp-table tfoot { display: table-footer-group !important; }
  .hp-table tr { page-break-inside: avoid; page-break-after: auto; }

  /* Keep totals/vencimientos blocks together */
  .hp-totals, .hp-section { page-break-inside: avoid; }

  /* Hide toolbars/actions */
  .hp-toolbar, .hp-actions { display: none !important; }

  /* Imprimir SIN etiquetas (elección del modal, JC 2026-07-10): oculta los
     chips del documento y las líneas de marca de las piezas. */
  html.hp-print-nobadges .hp-doc-badges-row,
  html.hp-print-nobadges .hpe-inc-flag,
  html.hp-print-nobadges .hpe-mark-line { display: none !important; }

  /* Informe del Panel: revelar .dash, quitar márgenes del layout y neutralizar
     colores de tarjeta para que imprima limpio (JC 2026-07-09). */
  .dash, .dash * { visibility: visible !important; }
  #lp-content-slot { margin: 0 !important; padding: 8mm !important; }
  .dash { color: #111 !important; }
  .dash-noprint { display: none !important; }
  /* No cortar cuadros/gráficos a mitad al cambiar de hoja (JC 2026-07-09) */
  .dash-w, .dash-card { break-inside: avoid !important; page-break-inside: avoid !important; }
  .dash-card {
    background: #fff !important; border: 1px solid #e5e7eb !important;
    box-shadow: none !important;
  }
  .dash-card * { color: inherit; }
}

/* Fullscreen overlay used by albaranes "Ver documento" */
.hp-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  display: flex; flex-direction: column;
  animation: fadeIn 0.2s ease-out;
}
.hp-overlay-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 4px;
  padding: 12px 16px;
  flex-shrink: 0;
}
/* La barra del visor SIEMPRE es oscura → iconos claros aunque el tema sea claro
   (antes html.light los pintaba oscuros y no se veían — feedback JC) */
.hp-overlay .hp-btn-ghost,
html.light .hp-overlay .hp-btn-ghost { color: rgba(255,255,255,0.88); }
.hp-overlay .hp-btn-ghost:hover,
html.light .hp-overlay .hp-btn-ghost:hover { background: rgba(255,255,255,0.10); }
.pp-icon-btn {
  min-width: 44px; justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12) !important;
}
.pp-icon-btn .material-symbols-outlined { font-size: 19px; }
#pp-counter {
  font-size: 12px; font-weight: 700; min-width: 64px; text-align: center;
  color: rgba(255,255,255,0.85); font-variant-numeric: tabular-nums;
}
.hp-overlay-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px 40px;
  display: flex;
  justify-content: center;
  /* SIN esto, el flex fija la altura del papel a 1 folio y los documentos
     largos se salen del blanco (se veían "cortados" en oscuro — bug JC) */
  align-items: flex-start;
}
.hp-overlay-scroll .hp-sheet { margin-top: 0; flex-shrink: 0; }

/* ── Barra LATERAL de documentos del visor (estilo Holded) ── */
.pp-row { flex: 1; display: flex; min-height: 0; }
.pp-side {
  width: 250px; flex-shrink: 0;
  overflow-y: auto;
  padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(0,0,0,0.35);
  border-right: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 900px) { .pp-side { display: none; } }
.pp-side-search {
  /* STICKY: el buscador queda fijo arriba mientras la lista se desplaza (JC) */
  position: sticky; top: -8px; z-index: 2;
  display: flex; align-items: center; gap: 7px;
  margin: -8px -2px 6px;
  padding: 12px 10px;
  background: #12141c;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.pp-side-search .material-symbols-outlined { font-size: 16px; color: rgba(255,255,255,0.5); }
.pp-side-search input {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none;
  color: rgba(255,255,255,0.9); font-size: 12.5px; font-family: inherit;
}
.pp-side-search input::placeholder { color: rgba(255,255,255,0.35); }

.pp-side-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "title amount" "sub amount";
  gap: 0 10px;
  text-align: left;
  padding: 9px 12px;
  border-radius: 10px;
  border: none; background: transparent; cursor: pointer;
  color: rgba(255,255,255,0.82);
  transition: background 0.12s;
}
.pp-side-item:hover { background: rgba(255,255,255,0.07); }
.pp-side-item.is-active {
  background: rgba(124,139,255,0.18);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(124,139,255,0.35);
}
.pp-side-title { grid-area: title; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pp-side-sub { grid-area: sub; font-size: 10.5px; opacity: 0.6; margin-top: 1px; }
.pp-side-amount { grid-area: amount; align-self: center; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; opacity: 0.9; }

/* ================================================================
   PULIDO PREMIUM (2026-07-07) — microinteracciones, foco, acabado
   ================================================================ */

/* Foco de teclado visible en todo el portal (accesible y elegante) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid rgba(124, 139, 255, 0.55);
  outline-offset: 2px;
  border-radius: 8px;
}
html.light a:focus-visible, html.light button:focus-visible,
html.light input:focus-visible, html.light select:focus-visible,
html.light textarea:focus-visible, html.light [tabindex]:focus-visible {
  outline-color: rgba(94, 106, 210, 0.55);
}

/* Filas de listado: el chevron responde al hover (intención, no decoración) */
.hp-list-row .material-symbols-outlined:last-child {
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), color 0.18s;
}
.hp-list-row:hover .material-symbols-outlined:last-child {
  transform: translateX(3px);
  color: #5e6ad2;
}

/* Grid del catálogo: productos más pequeños, 2 móvil / 3 / 4 tablet / 5 / 6 desktop (JC 2026-07-09) */
#cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px)  { #cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px)  { #cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { #cat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1280px) { #cat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ── Resumen: widgets arrastrables (JC 2026-07-09) ── */
.dash-w { position: relative; }
.dash-full { grid-column: 1 / -1; }
/* Todos los cuadros-lista ocupan lo mismo aunque tengan menos ítems (JC 2026-07-09) */
.dash-w { height: 100%; }
.dash-cuadro { min-height: 320px; height: 100%; display: flex; flex-direction: column; }
/* Toda la tarjeta arrastra (sin icono, que tapaba cosas). Se reordena en vivo. */
@media (min-width: 768px) { .dash-w { cursor: grab; } .dash-w:active { cursor: grabbing; } }
/* Al arrastrar, la tarjeta se convierte en un HUECO vacío punteado (JC 2026-07-09) */
.dash-w.dash-dragging { outline: 2px dashed rgba(124,139,255,0.6); outline-offset: -2px; border-radius: 18px; background: rgba(124,139,255,0.07); }
.dash-w.dash-dragging > * { visibility: hidden; }

/* ── Dropdown propio (año/mes/…): legible en claro y oscuro (JC 2026-07-09) ── */
.lp-sel { position: relative; display: inline-block; }
.lp-sel-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 8px 6px 11px; border-radius: 9px;
  font-family: inherit; font-size: 12px; font-weight: 700;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  color: inherit; cursor: pointer; white-space: nowrap;
}
.lp-sel.is-active .lp-sel-btn { color: #7c8bff; border-color: rgba(124,139,255,0.55); background: rgba(124,139,255,0.12); }
.lp-sel-chev { font-size: 16px; opacity: 0.6; }
.lp-sel-menu {
  position: fixed; z-index: 9999;
  min-width: 150px; max-height: 300px; overflow-y: auto;
  padding: 6px; border-radius: 12px;
  background: #17181c; border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}
.lp-sel-opt {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 8px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: inherit; background: transparent; cursor: pointer; white-space: nowrap;
}
.lp-sel-opt:hover { background: rgba(124,139,255,0.14); }
.lp-sel-opt.is-sel { color: #7c8bff; background: rgba(124,139,255,0.10); }
html.light .lp-sel-btn { background: #fff; border-color: #e4e4e7; color: #3f3f46; }
html.light .lp-sel-menu { background: #fff; border-color: #e4e4e7; box-shadow: 0 12px 30px rgba(0,0,0,0.12); }

/* Tarjetas del catálogo: lift sutil + zoom de foto en desktop */
#cat-grid > div {
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s;
  border: 1px solid transparent;
}
html.light #cat-grid > div { border-color: rgba(0,0,0,0.06); }
/* Fotos SIEMPRE del mismo tamaño: contenedor cuadrado + recorte cover (JC 2026-07-09) */
#cat-grid > div .aspect-square { aspect-ratio: 1 / 1; width: 100%; height: auto; }
#cat-grid > div .aspect-square img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  #cat-grid > div:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  }
  #cat-grid > div:hover .aspect-square img { transform: scale(1.04); }
}

/* Pager de documentos: el papel entra con un deslizamiento corto */
@keyframes ppEnter {
  from { opacity: 0; transform: translateY(10px) scale(0.995); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.pp-enter { animation: ppEnter 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
#pp-counter { font-variant-numeric: tabular-nums; }

/* El papel en modo claro pide una sombra más suave (la oscura era de fondo negro) */
html.light .hp-sheet {
  box-shadow: 0 1px 2px rgba(20, 22, 40, 0.06), 0 12px 32px rgba(20, 22, 40, 0.10);
  border: 1px solid rgba(0,0,0,0.05);
}

/* Estados vacíos: el icono existía pero apenas se veía */
.empty-state .material-symbols-outlined { opacity: 0.22; color: #5e6ad2; }

/* Pantalla "Preparando tu portal…" — puntos de marca */
@keyframes lpDot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
  40% { transform: scale(1); opacity: 1; }
}
.lp-prepare-dots { display: flex; gap: 7px; justify-content: center; }
.lp-prepare-dots span {
  width: 9px; height: 9px; border-radius: 999px;
  background: #5e6ad2;
  animation: lpDot 1.3s infinite cubic-bezier(0.22, 1, 0.36, 1);
}
.lp-prepare-dots span:nth-child(2) { animation-delay: 0.16s; }
.lp-prepare-dots span:nth-child(3) { animation-delay: 0.32s; }

/* ── Menú lateral PLEGABLE (html.lp-nav-min = modo iconos) ── */
#lp-sidebar { transition: width 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
#lp-desktop-top, #lp-content-slot { transition: left 0.22s cubic-bezier(0.22, 1, 0.36, 1), margin-left 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
@media (min-width: 768px) {
  html.lp-nav-min #lp-sidebar { width: 68px !important; padding-left: 10px; padding-right: 10px; }
  html.lp-nav-min #lp-desktop-top { left: 68px !important; }
  html.lp-nav-min #lp-content-slot { margin-left: 68px !important; }
  /* solo iconos: fuera etiquetas, badges y textos */
  html.lp-nav-min #lp-desktop-nav a > span:not(.material-symbols-outlined),
  html.lp-nav-min #lp-desktop-nav button > span:not(.material-symbols-outlined),
  html.lp-nav-min #lp-desktop-nav div > span:not(.material-symbols-outlined),
  html.lp-nav-min #lp-nav-collapse > span:not(.material-symbols-outlined) { display: none; }
  html.lp-nav-min #lp-desktop-nav a,
  html.lp-nav-min #lp-desktop-nav button,
  html.lp-nav-min #lp-desktop-nav div,
  html.lp-nav-min #lp-nav-collapse { justify-content: center; padding-left: 0; padding-right: 0; }
  /* Badge tipo WhatsApp sobre el icono cuando el menú está plegado (JC 2026-07-09) */
  html.lp-nav-min #lp-desktop-nav a > span.lp-nav-badge {
    display: flex !important;
    position: absolute; top: 4px; right: 13px;
    min-width: 16px; height: 16px; margin: 0; padding: 0 4px;
    align-items: center; justify-content: center;
    border-radius: 999px; line-height: 1;
    background: #ef4444; color: #fff; font-size: 9px; font-weight: 800;
    box-shadow: 0 0 0 2px #08090a;
  }
  html.light.lp-nav-min #lp-desktop-nav a > span.lp-nav-badge { box-shadow: 0 0 0 2px #fafafa; }
  /* cabecera compacta: logo y tema en columna; taller y empresa fuera */
  html.lp-nav-min #lp-sidebar .mb-4 > .flex { flex-direction: column; gap: 10px; }
  html.lp-nav-min #lp-sidebar [id^="lp-empresa-toggle"] { display: none; }
  html.lp-nav-min #lp-sidebar .bg-surface-container.rounded-xl { display: none; }
}

/* ── Buscador de la topbar (pill con atajo "/") ── */
.lp-search {
  display: flex; align-items: center; gap: 8px;
  /* Buscador GLOBAL: más ancho (JC 2026-07-08) */
  width: 560px; max-width: 60vw;
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  transition: width 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
html.light .lp-search { background: #ffffff; border-color: #e4e4e7; }
.lp-search:focus-within {
  width: 680px;
  border-color: rgba(124,139,255,0.55);
  box-shadow: 0 0 0 3px rgba(124,139,255,0.12);
}
html.light .lp-search:focus-within {
  border-color: rgba(94,106,210,0.55);
  box-shadow: 0 0 0 3px rgba(94,106,210,0.10);
}
.lp-search .material-symbols-outlined {
  font-size: 17px; color: #71717a; flex-shrink: 0;
}
.lp-search input {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none !important;
  font-size: 13px; color: inherit;
  padding: 0;
}
.lp-search input::placeholder { color: rgba(161,161,170,0.55); }
html.light .lp-search input { color: #08090a; }
.lp-search kbd {
  flex-shrink: 0;
  font-family: inherit; font-size: 10.5px; font-weight: 600;
  color: #71717a;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 5px;
  padding: 1px 6px;
  line-height: 1.5;
}
html.light .lp-search kbd { background: #f4f4f5; border-color: #e4e4e7; color: #71717a; }
.lp-search:focus-within kbd { display: none; }
/* La "/" de operario es clicable (menú de funciones) y sigue visible al enfocar (JC 2026-07-09) */
#lp-op-slash { cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
#lp-op-slash:hover { color: #7c8bff; border-color: rgba(124,139,255,0.55); background: rgba(124,139,255,0.14); }
.lp-search:focus-within #lp-op-slash:not([hidden]) { display: inline-block; }
.lp-op-menu {
  position: fixed; z-index: 200; min-width: 244px;
  background: #16181d; border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px; padding: 6px; box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}
html.light .lp-op-menu { background: #fff; border-color: #e4e4e7; box-shadow: 0 16px 40px rgba(0,0,0,0.14); }
.lp-op-menu-title { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #8896a6; padding: 4px 8px 6px; }
.lp-op-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px; border-radius: 8px; cursor: pointer; color: inherit; background: transparent; border: none; }
.lp-op-menu-item:hover { background: rgba(124,139,255,0.12); }
.lp-op-menu-item .material-symbols-outlined { font-size: 20px; color: #7c8bff; flex-shrink: 0; }
.lp-op-menu-txt { display: flex; flex-direction: column; min-width: 0; }
.lp-op-menu-lbl { font-size: 12.5px; font-weight: 700; }
.lp-op-menu-hint { font-size: 10.5px; color: #8896a6; }

/* El contenido JAMÁS desborda en horizontal (móvil — feedback JC) */
#lp-content-slot { overflow-x: clip; max-width: 100vw; }
#cat-grid > div { min-width: 0; }

/* Móviles estrechos: stepper compacto y botones de devolución a lo ancho
   (se cortaban a la derecha — feedback JC desde el coche) */
@media (max-width: 480px) {
  .pick-stepper button { width: 38px; height: 40px; }
  .pick-stepper .pick-count { min-width: 42px; font-size: 15px; line-height: 40px; }
  .pick-action { flex: 1 1 45%; justify-content: center; min-width: 0; }
  .pick-line .p-3\.5 { padding: 12px; }
}

/* Movimiento reducido: quien lo pide, lo tiene */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Thin scrollbar (nav sidebar) ---- */
.lp-scroll-thin::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.lp-scroll-thin::-webkit-scrollbar-track {
  background: transparent;
}
.lp-scroll-thin::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.05);
  border-radius: 2px;
  transition: background 0.2s;
}
.lp-scroll-thin:hover::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
}
/* Firefox */
.lp-scroll-thin {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

/* ================================================================
   ACENTO POR EMPRESA (JC 2026-07-08)
   Recambios (LAMR) = skin azul índigo por defecto, sin cambios.
   Rectificados (LAMT) = TODO el acento pasa a NARANJA. Va al FINAL
   del fichero para ganar a los overrides html.light de arriba.
   ================================================================ */
html[data-empresa="LAMT"] {
  --emp-text: #fb923c;          /* texto/iconos acento (oscuro) */
  --emp-solid: #ea580c;         /* rellenos sólidos */
  --emp-rgb: 251, 146, 60;      /* tintes con alpha (oscuro) */
}
html.light[data-empresa="LAMT"] {
  --emp-text: #ea580c;
  --emp-solid: #ea580c;
  --emp-rgb: 234, 88, 12;
}

html[data-empresa="LAMT"] .text-primary { color: var(--emp-text) !important; }
html[data-empresa="LAMT"] .text-primary\/80 { color: rgba(var(--emp-rgb), 0.8) !important; }
html[data-empresa="LAMT"] .text-primary\/50 { color: rgba(var(--emp-rgb), 0.5) !important; }
html[data-empresa="LAMT"] .bg-primary { background-color: var(--emp-solid) !important; }
html[data-empresa="LAMT"] .bg-primary\/8 { background-color: rgba(var(--emp-rgb), 0.08) !important; }
html[data-empresa="LAMT"] .bg-primary\/10 { background-color: rgba(var(--emp-rgb), 0.1) !important; }
html[data-empresa="LAMT"] .bg-primary\/15 { background-color: rgba(var(--emp-rgb), 0.15) !important; }
html[data-empresa="LAMT"] .bg-primary\/20 { background-color: rgba(var(--emp-rgb), 0.2) !important; }
html[data-empresa="LAMT"] .border-primary\/15 { border-color: rgba(var(--emp-rgb), 0.15) !important; }
html[data-empresa="LAMT"] .border-primary\/20 { border-color: rgba(var(--emp-rgb), 0.2) !important; }
html[data-empresa="LAMT"] .border-primary\/25 { border-color: rgba(var(--emp-rgb), 0.25) !important; }
html[data-empresa="LAMT"] .border-primary\/30 { border-color: rgba(var(--emp-rgb), 0.3) !important; }
html[data-empresa="LAMT"] .border-primary\/40 { border-color: rgba(var(--emp-rgb), 0.4) !important; }
html[data-empresa="LAMT"] .border-primary\/50 { border-color: rgba(var(--emp-rgb), 0.5) !important; }
html[data-empresa="LAMT"] .ring-primary\/20 { --tw-ring-color: rgba(var(--emp-rgb), 0.2) !important; }
html[data-empresa="LAMT"] .ring-primary\/30 { --tw-ring-color: rgba(var(--emp-rgb), 0.3) !important; }
html[data-empresa="LAMT"] .ring-primary\/40 { --tw-ring-color: rgba(var(--emp-rgb), 0.4) !important; }
html[data-empresa="LAMT"] .ring-primary\/50 { --tw-ring-color: rgba(var(--emp-rgb), 0.5) !important; }
html[data-empresa="LAMT"] .shadow-primary\/20 { --tw-shadow-color: rgba(var(--emp-rgb), 0.2) !important; }
html[data-empresa="LAMT"] .shadow-primary\/25 { --tw-shadow-color: rgba(var(--emp-rgb), 0.25) !important; }

html[data-empresa="LAMT"] .primary-gradient {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
}
html[data-empresa="LAMT"] .hp-btn-primary { background: var(--emp-solid); }
html[data-empresa="LAMT"] .pick-stepper button { color: var(--emp-text); }
html[data-empresa="LAMT"] .pick-stepper button:active { background: rgba(var(--emp-rgb), 0.1); }
html[data-empresa="LAMT"] .pick-note-input:focus { border-color: rgba(var(--emp-rgb), 0.5); }

/* FONDO ENTERO del menú por empresa (JC 2026-07-08: "solo el color no se
   aprecia"): sidebar desktop + barras superior/inferior del móvil, tintadas
   de arriba a abajo. Recambios azul, Rectificados naranja. */
html[data-empresa="LAMR"] #lp-sidebar,
html[data-empresa="LAMR"] header.md\:hidden,
html[data-empresa="LAMR"] nav.md\:hidden { background-color: #10182e !important; }
html.light[data-empresa="LAMR"] #lp-sidebar,
html.light[data-empresa="LAMR"] header.md\:hidden,
html.light[data-empresa="LAMR"] nav.md\:hidden { background-color: #e6edfb !important; }

html[data-empresa="LAMT"] #lp-sidebar,
html[data-empresa="LAMT"] header.md\:hidden,
html[data-empresa="LAMT"] nav.md\:hidden { background-color: #24140a !important; }
html.light[data-empresa="LAMT"] #lp-sidebar,
html.light[data-empresa="LAMT"] header.md\:hidden,
html.light[data-empresa="LAMT"] nav.md\:hidden { background-color: #ffe9d8 !important; }

/* Sobre fondo tintado, los ítems del menú y bordes ganan un pelín de fuerza */
html.light[data-empresa] #lp-sidebar { border-right-color: rgba(0,0,0,0.06); }
html.light[data-empresa] #lp-desktop-nav a:hover,
html.light[data-empresa] #lp-desktop-nav button:hover { background-color: rgba(255,255,255,0.65); }
html.light[data-empresa="LAMR"] #lp-desktop-nav .bg-primary\/10 { background-color: rgba(94,106,210,0.16) !important; }
html.light[data-empresa="LAMT"] #lp-desktop-nav .bg-primary\/10 { background-color: rgba(234,88,12,0.16) !important; }

/* Selector de año: sin flecha nativa del navegador (salían DOS flechas,
   la nativa + la nuestra — JC 2026-07-08). La flecha es el SVG del markup. */
select.lp-year-select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
  font-family: inherit; /* misma tipografía que la app (JC 2026-07-09) */
}
select.lp-year-select::-ms-expand { display: none; }

/* ================================================================
   DOC WORKSPACE (JC 2026-07-08): ficha única de documento con lista
   lateral (dw-*) y papel de albarán con líneas editables (hpe-*).
   Base = modo oscuro; overrides html.light debajo.
   ================================================================ */
.dw-side { display: none; }
@media (min-width: 1024px) {
  .dw-wrap {
    display: grid;
    /* Más ancha (JC 2026-07-08) */
    grid-template-columns: 296px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    margin-left: -14px; /* pegada a la izquierda del contenido (JC) */
  }
  /* Modo Chequear (JC 2026-07-09): la lista lateral queda al MISMO ancho que
     siempre (296px); la tabla editable hace scroll horizontal si no cabe. */
  .dw-side {
    display: flex; flex-direction: column;
    position: sticky; top: 60px;
    /* SIEMPRE a altura completa, tenga o no items para llegar abajo (JC) */
    height: calc(100vh - 76px);
    /* Sin caja contenedora (JC): solo un filete de separación a la derecha */
    background: transparent;
    border: none;
    border-right: 1px solid rgba(255,255,255,0.08);
    border-radius: 0;
    overflow: hidden;
    /* Aire a la derecha para que no quede pegado al filete (JC) */
    padding-right: 18px;
  }
}
html.light .dw-side { border-right-color: #e4e4e7; }
.dw-side-filters {
  /* Envuelven a varias líneas en el lateral estrecho (JC 2026-07-09): antes se
     cortaban en nowrap. Los dropdowns propios (.lp-sel) fluyen. */
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: 6px; row-gap: 7px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.dw-side-filters .lp-sel-btn { font-size: 11px; padding: 0 7px 0 9px; height: 26px; }
html.light .dw-side-filters { border-bottom-color: #eeeef0; }
.dw-side-filters select {
  appearance: none; -webkit-appearance: none;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; padding: 4px 5px;
  font-size: 10px; font-weight: 700; color: inherit;
  font-family: inherit; /* misma tipografía que la app (JC 2026-07-09) */
  cursor: pointer;
  flex: 1 1 0; min-width: 0;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
html.light .dw-side-filters select { background: #fff; border-color: #e4e4e7; color: #3f3f46; }
/* Filtro ACTIVO (valor distinto del por defecto): resaltado para saber que filtra (JC 2026-07-09) */
.dw-side-filters select.dwf-active,
select.dwf-active {
  font-weight: 800;
  color: #7c8bff !important;
  border-color: rgba(124,139,255,0.55) !important;
  background: rgba(124,139,255,0.12) !important;
}
.dw-side-filters .dwf-chip {
  padding: 5px 9px; border-radius: 8px; cursor: pointer; flex-shrink: 0;
  line-height: 1; height: 26px; display: inline-flex; align-items: center;
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em;
  color: #059669; background: transparent; border: 1px solid rgba(5,150,105,0.35);
}
.dw-side-filters .dwf-chip.on { background: #059669; color: #fff; border-color: transparent; }
/* Chips de icono-solo (una sola línea en el lateral estrecho) — JC 2026-07-09 */
.dw-side-filters .dwf-chip-icon { padding: 4px 6px; }
.dw-side-filters .dwf-chip-icon .material-symbols-outlined { font-size: 17px; display: block; line-height: 1; }
.dw-item-icon { font-size: 15px; flex-shrink: 0; }
.dw-item-nota {
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; color: #8b93b8; font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dw-item-nota .material-symbols-outlined { font-size: 11px; flex-shrink: 0; }
.dw-side-empty { padding: 16px 12px; font-size: 11px; color: #a1a1aa; }
.dw-side-search {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: #a1a1aa;
  flex-shrink: 0;
}
.dw-side-search input {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none;
  font-size: 12px; color: inherit;
}
.dw-side-search input::placeholder { color: rgba(161,161,170,0.5); }
html.light .dw-side-search { border-bottom-color: #eeeef0; color: #52525b; }
.dw-side-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.dw-side-label {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.1em; color: #a1a1aa;
}
.dw-side-nav { display: flex; align-items: center; gap: 2px; }
.dw-side-nav button {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px;
  color: #a1a1aa; background: transparent; border: none; cursor: pointer;
}
.dw-side-nav button:hover:not(:disabled) { background: rgba(255,255,255,0.07); color: inherit; }
.dw-side-nav button:disabled { opacity: 0.25; cursor: default; }
.dw-side-count { font-size: 10px; font-weight: 700; color: #a1a1aa; font-variant-numeric: tabular-nums; padding: 0 2px; }
.dw-side-list { overflow-y: auto; }
.dw-item {
  display: flex; flex-direction: column; gap: 1px;
  width: 100%; text-align: left; cursor: pointer;
  padding: 8px 12px;
  border: none; background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.dw-item:hover { background: rgba(255,255,255,0.05); }
.dw-item.active { background: rgba(124,139,255,0.14); }
.dw-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.dw-item-title {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 12px; font-weight: 700; color: #f4f4f5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dw-item.active .dw-item-title { color: #7c8bff; }
.dw-item-amount { font-size: 11px; font-weight: 700; color: #f4f4f5; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.dw-item-sub { font-size: 10.5px; color: #a1a1aa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

html.light .dw-side { background: #ffffff; border-color: #e4e4e7; }
html.light .dw-side-head { border-bottom-color: #eeeef0; }
html.light .dw-item { border-bottom-color: #f1f1f3; }
html.light .dw-item:hover { background: #f7f7f8; }
html.light .dw-item.active { background: rgba(94,106,210,0.10); }
html.light .dw-item-title { color: #18181b; }
html.light .dw-item.active .dw-item-title { color: #5e6ad2; }
html.light .dw-item-amount { color: #18181b; }
html[data-empresa="LAMT"] .dw-item.active { background: rgba(var(--emp-rgb), 0.14); }
html[data-empresa="LAMT"] .dw-item.active .dw-item-title { color: var(--emp-text); }

/* ---- Líneas editables del albarán DENTRO del papel (solo desktop) ---- */
.hpe-row td { transition: background 0.15s ease; }
.hpe-row[data-state="complete"] td { background: rgba(5,150,105,0.07); }
.hpe-row[data-state="partial"] td { background: rgba(217,119,6,0.07); }
.hpe-row[data-state="garantia"] td { background: rgba(139,92,246,0.08); }
.hpe-row[data-state="abono"] td { background: rgba(217,119,6,0.10); }
.hpe-row[data-state="falta"] td { background: rgba(220,38,38,0.09); }
.hpe-stepper {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid #d4d4d8; border-radius: 8px; background: #fff;
  vertical-align: middle;
}
.hpe-stepper button {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: none; background: transparent;
  color: #5e6ad2; cursor: pointer; border-radius: 7px;
}
.hpe-stepper button:hover:not(:disabled) { background: rgba(94,106,210,0.1); }
.hpe-stepper button:disabled { opacity: 0.2; cursor: default; }
.hpe-count { display: inline-flex; align-items: baseline; font-size: 11.5px; font-weight: 800; color: #111; font-variant-numeric: tabular-nums; }
.hpe-count .hpe-of { color: #9ca3af; font-weight: 600; }
/* Cantidad recibida editable a mano (JC 2026-07-08) */
.hpe-count input {
  width: 26px; border: none; outline: none; background: transparent;
  font: inherit; color: inherit; text-align: right; padding: 0;
  -moz-appearance: textfield; appearance: textfield;
}
.hpe-count input::-webkit-outer-spin-button,
.hpe-count input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hpe-count input:focus { color: #5e6ad2; }
/* El precio no se parte de línea (el € se caía abajo — JC) */
.hp-td-num, .hp-th-num { white-space: nowrap; }
/* Cabecera y datos de RECIBIDA alineados (centrados) */
.hpe-th-recibida, .hpe-td-recibida { text-align: center !important; }
.hpe-actions { display: inline-flex; gap: 3px; }
.hpe-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
  border: 1px solid transparent; background: transparent; color: #9ca3af;
}
.hpe-btn:hover { background: rgba(0,0,0,0.05); color: #374151; }
.hpe-btn.g { color: #8b5cf6; }
.hpe-btn.g:hover, .hpe-btn.g.on { background: rgba(139,92,246,0.12); border-color: rgba(139,92,246,0.3); }
.hpe-btn.a { color: #D97706; }
.hpe-btn.a:hover, .hpe-btn.a.on { background: rgba(217,119,6,0.12); border-color: rgba(217,119,6,0.3); }
.hpe-btn.i:hover, .hpe-btn.i.on { background: rgba(220,38,38,0.12); border-color: rgba(220,38,38,0.3); }
/* Flag "!" de línea con incidencias (JC 2026-07-10): hover = tooltip, clic = modal.
   Con TODAS resueltas pasa a check verde con opacidad bajada (.ok). */
.hpe-inc-flag { background: none; border: 0; padding: 0 2px; margin-left: 5px; cursor: pointer; color: #DC2626; display: inline-flex; align-items: center; vertical-align: middle; line-height: 1; }
.hpe-inc-flag .material-symbols-outlined { font-size: 15px; display: block; }
/* Todo resuelto → CHECK verde, visible (JC 2026-07-10: "para saber que estás
   en el lugar correcto"). */
.hpe-inc-flag.ok { color: #059669; opacity: 0.5; }
.hpe-btn.n.on { color: #5e6ad2; }
.hpe-nota-line { font-size: 10.5px; color: #6b7280; font-style: italic; margin-top: 2px; }
.hpe-pill {
  display: inline-block; font-size: 8.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 1px 6px; border-radius: 999px; margin-left: 6px;
  vertical-align: middle;
}

@media print {
  .hp-noprint, .dw-side { display: none !important; }
}
/* Holder de impresión (printSheets, JC 2026-07-10): las hojas se mueven aquí
   (hijo directo de <body>) para que no hereden el layout de la app. */
.hp-print-holder { position: absolute; left: -10000px; top: 0; width: 210mm; }
@media print {
  html.hp-printing #app { display: none !important; }
  .hp-print-holder { position: static !important; left: 0 !important; width: auto !important; }
  .hp-print-holder, .hp-print-holder * { visibility: visible !important; }
}
@media print {
  .hpe-stepper { border: none; }
  .hpe-pill { border: 1px solid currentColor; }
}

/* Acordeón de resueltas (JC 2026-07-10): colapsado por defecto, no molesta */
.lp-acordeon summary {
  cursor: pointer; list-style: none; user-select: none;
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-headline, inherit); font-weight: 700;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--color-text-on-surface-variant, #8896a6);
  padding: 6px 0;
}
.lp-acordeon summary::-webkit-details-marker { display: none; }
.lp-acordeon summary::before {
  content: 'chevron_right'; font-family: 'Material Symbols Outlined';
  font-size: 17px; transition: transform 0.15s;
}
.lp-acordeon[open] summary::before { transform: rotate(90deg); }
/* En modo Chequear los botones ya marcan el estado: el flag sobra (JC 2026-07-10) */
.dw-editing .hpe-inc-flag { display: none; }

/* Interruptor de permisos (miembros, JC 2026-07-10) */
.lp-switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; display: inline-block; }
.lp-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 2; }
.lp-switch .track { position: absolute; inset: 0; border-radius: 999px; background: #3a3b40; transition: background 0.15s; }
.lp-switch .knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.16s cubic-bezier(0.34,1.4,0.6,1); box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.lp-switch input:checked + .track { background: #5e6ad2; }
.lp-switch input:checked ~ .knob { transform: translateX(18px); }
.lp-switch input:disabled { cursor: default; }
html.light .lp-switch .track { background: #d4d4d8; }
/* El override de tema claro tiene más especificidad que el :checked base y le
   dejaba el track gris; se repite con la misma especificidad (JC 2026-07-10). */
html.light .lp-switch input:checked + .track { background: #5e6ad2; }
/* Fila de permiso: se ilumina cuando su toggle está activo */
.lp-perm { transition: background 0.15s; }
.lp-perm:has(input:checked) { background: rgba(94,106,210,0.06); }
.lp-perm:has(input:disabled) { opacity: 0.6; }