@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

/* ----------------------------------------------------------------
   Sistema de diseño de Ohmia: azul/naranja de la marca real de MQX
   Informática sobre un fondo frío de "banco de trabajo" (nada de
   crema+serif, es el look por defecto de cualquier IA). Poppins para
   títulos (geométrica y redondeada, en la línea de la tipografía oficial
   de MQX "Gotham Rounded Condensed" -- de pago, sin equivalente gratuito
   exacto en Google Fonts), Inter para texto, JetBrains Mono para
   códigos/precios/números de serie -- el vocabulario real de un taller
   de informática.

   Elemento de firma: los estados (kanban, etiquetas) se leen como
   PILOTOS LED -- un punto de color con halo si está "encendido", en
   vez de píldoras de color planas -- tirando del propio punto naranja
   del logo de MQX. Es la única pieza "vistosa" del sistema; el resto
   se mantiene deliberadamente tranquilo.
   ---------------------------------------------------------------- */
:root{
  --bg: #EEF1F5;
  --panel: #FFFFFF;
  --panel2: #E6EBEF;
  --line: #D6DEE5;
  --text: #10161F;
  --muted: #5B6673;
  --volt: #FF9E18;       /* naranja de señal -- CTAs, estado activo, piloto "en curso" */
  --volt-text: #0060A8;  /* azul de marca -- titulares, enlaces, texto sobre tinta clara */
  --volt-dim: #FFE9C7;   /* naranja muy claro -- fondos de resalte */
  --ok: #2F8F5B;
  --amber: #B8860B;
  --red: #C0463C;
  --blue: #0060A8;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
}
.app-shell{
  display:flex;
  min-height: 100vh;
  position:relative;
  isolation:isolate;
}
/* Marca de agua fija en toda la pantalla de la app, mismo mecanismo
   que en documentos impresos (ver .doc-preview::before). */
.app-shell::before{
  content:"";
  position:fixed; inset:0;
  background-image:var(--watermark-logo);
  background-repeat:no-repeat; background-position:center; background-size:38vw auto;
  opacity:0.05; z-index:1; pointer-events:none;
}
::selection{ background: var(--volt-dim); color: var(--volt-text); }

/* ---------- Sidebar ---------- */
.sidebar{
  width: 240px;
  background: #FFFFFF;
  border-right: 1px solid #ECECEC;
  display:flex;
  flex-direction:column;
  padding: 22px 14px;
  position: sticky;
  top:0;
  height: 100vh;
  overflow-y: auto;
  flex-shrink:0;
}
.brand{
  font-family:'Poppins', sans-serif;
  font-weight:700;
  font-size: 19px;
  letter-spacing: 0.5px;
  padding: 0 8px 6px 8px;
  display:flex;
  align-items:center;
  gap:8px;
}
.brand .bolt{ color: var(--volt-text); font-size:22px; }
.brand-sub{
  font-size: 11px;
  color: #9A9A9A;
  padding: 0 8px 22px 8px;
  letter-spacing: 0.4px;
}
.nav-item{
  display:flex; align-items:center; gap:12px;
  padding: 15px 16px;
  border-radius: 10px;
  color: #3A3A3A;
  font-size: 15px;
  font-weight: 600;
  cursor:pointer;
  margin-bottom: 5px;
  transition: background .12s, color .12s;
  border-left: 3px solid transparent;
}
.nav-item:hover{ background: #F3F5F6; color: #101010; }
.nav-item.active{
  background: var(--volt);
  color: var(--text);
  border-left: 3px solid var(--volt-text);
}
.nav-icon{ width:20px; text-align:center; font-size:17px; }
.sidebar-foot{
  margin-top:auto;
  font-size: 11px;
  color: #9A9A9A;
  padding: 10px 8px 0 8px;
  border-top: 1px solid #ECECEC;
}

/* ---------- Main ---------- */
.main{ flex:1; padding: 28px 36px 60px 36px; max-width: 1180px; }
.topbar{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom: 26px;
}
.page-title{
  font-family:'Poppins', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing:0.01em;
}
.page-sub{ color: var(--muted); font-size: 13px; margin-top:4px; }
.btn{
  background: var(--volt);
  color: var(--text);
  border:none;
  font-family:'Inter';
  font-weight:700;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 10px;
  cursor:pointer;
  transition: filter .12s, transform .08s;
  box-shadow: 0 2px 6px rgba(255,158,24,0.30);
  /* Icono + texto en línea (pedido por Xavi 2026-09-30, sistema de botones):
     el icono es un SVG en línea que hereda el color del texto (currentColor),
     así combina solo con cada variante (ghost/danger/primario). */
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.btn svg{ display:block; flex-shrink:0; }
.btn:hover{ filter: brightness(1.06); transform: translateY(-1px); }
.btn:disabled{ opacity:0.4; cursor:not-allowed; box-shadow:none; }
.btn:disabled:hover{ filter:none; transform:none; }
.btn.ghost{
  background: var(--panel);
  border: 1.5px solid var(--line);
  color: var(--text);
  box-shadow: none;
}
.btn.ghost:hover{ background: var(--panel2); border-color: var(--volt); }
.btn.small{ padding: 8px 13px; font-size:12.5px; border-radius:8px; box-shadow:none; }
/* Botones destructivos (Eliminar/Anular) -- antes cada sitio ponía
   style="background:var(--red); color:#fff" a mano; con esta clase basta con
   añadir "danger" a un .btn.small (pedido por Xavi 2026-09-30, sistema de
   botones). */
.btn.danger{ background: var(--red); color:#fff; }
.btn.danger:hover{ filter: brightness(1.08); }

/* cards / grid */
.grid{ display:grid; gap:14px; }
.grid-5{ grid-template-columns: repeat(5, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: 1.3fr 1fr; }

.card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 1px 4px rgba(16,16,16,0.06);
}
.stat-card .stat-label{ font-size:12px; color:var(--muted); margin-bottom:8px; }
.stat-card .stat-value{ font-family:'JetBrains Mono'; font-size: 28px; font-weight:600; }
.stat-card .stat-value.volt{ color: var(--volt-text); }
.stat-card .stat-value.amber{ color: var(--amber); }
.stat-card .stat-value.red{ color: var(--red); }
.stat-card-click{ cursor:pointer; transition:box-shadow .15s, transform .15s; }
.stat-card-click:hover{ box-shadow: 0 3px 10px rgba(16,16,16,0.12); transform: translateY(-1px); }
.section-title-click{ cursor:pointer; }
.section-title-click:hover{ color: var(--volt-text); }

.section-title{
  font-family:'Poppins', sans-serif;
  font-size: 15px;
  font-weight:700;
  letter-spacing:0.01em;
  margin: 30px 0 12px 0;
  display:flex; align-items:center; justify-content:space-between;
}

/* barra de nivel/señal -- reutilizable para cualquier medida con umbral
   (stock, progreso...) */
.charge{
  width:100%; height:8px; border-radius:4px;
  background: var(--line);
  border: 1px solid var(--line);
  overflow:hidden;
  position:relative;
}
.charge > i{
  display:block; height:100%; border-radius:3px;
  background: linear-gradient(90deg, var(--volt-dim), var(--volt));
}
.charge.amber > i{ background: linear-gradient(90deg, #F6E4B8, var(--amber)); }
.charge.red > i{ background: linear-gradient(90deg, #F3CAC5, var(--red)); }

/* table */
table{ width:100%; border-collapse: collapse; font-size: 13px; }
th{
  text-align:left; color: var(--muted); font-weight:600; font-size:11.5px;
  text-transform: uppercase; letter-spacing:0.4px;
  padding: 8px 10px; border-bottom: 1px solid var(--line);
}
td{ padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align:middle; }
.th-sortable{ cursor:pointer; user-select:none; white-space:nowrap; }
.th-sortable:hover{ color: var(--text); }
tr:last-child td{ border-bottom:none; }
tr.row-click{ cursor:pointer; }
tr.row-click:hover td{ background: var(--panel2); }
.mono{ font-family:'JetBrains Mono'; font-size:12.5px; color: var(--blue); }

/* Etiquetas de estado, con un piloto LED delante -- el color vive en el
   punto, no en el fondo ni el texto, para que el estado se lea de un
   vistazo (mismo lenguaje que un panel de electrónica real). */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-size: 11px; font-weight:700; padding: 4px 10px 4px 8px;
  border-radius: 20px; letter-spacing:0.2px;
  background:var(--panel2); color:var(--text); border:1px solid var(--line);
}
.tag::before{
  content:''; width:7px; height:7px; border-radius:50%; flex-shrink:0;
  background:var(--muted);
}
.tag.recepcion::before{ background:var(--muted); }
.tag.diagnostico::before{ background:var(--amber); box-shadow:0 0 0 3px rgba(184,134,11,0.22); }
.tag.reparacion::before{ background:var(--volt); box-shadow:0 0 0 3px rgba(255,158,24,0.25); }
.tag.listo::before{ background:var(--ok); box-shadow:0 0 0 3px rgba(47,143,91,0.22); }
.tag.entregado::before{ background:var(--muted); }
.tag.pendiente::before{ background:var(--red); box-shadow:0 0 0 3px rgba(192,70,60,0.2); }
.tag.usada::before{ background:var(--ok); box-shadow:0 0 0 3px rgba(47,143,91,0.22); }

/* kanban */
.kanban{ display:grid; grid-template-columns: repeat(5,1fr); gap:12px; }
.kanban-col{ background: var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px; min-height: 200px; transition: border-color 0.3s, box-shadow 0.3s; }
.kanban-col-destacada{ border-color: var(--volt); box-shadow: 0 0 0 2px var(--volt); }
.kanban-col h4{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.4px; margin-bottom:10px; display:flex; justify-content:space-between; }
.kcard{
  background: var(--panel2); border:1px solid var(--line); border-radius:8px;
  padding: 10px; margin-bottom: 8px; font-size:12.5px; cursor:pointer;
}
.kcard:hover{ border-color: var(--volt); }
.kcard .kc-titulo{ font-weight:600; margin-bottom:4px; }
.kcard .kc-sub{ color:var(--muted); font-size:11.5px; margin-bottom:6px; }

/* modal */
.overlay{
  position:fixed; inset:0; background: rgba(8,10,12,0.72);
  display:none; align-items:center; justify-content:center; z-index:50; padding:20px;
}
.overlay.open{ display:flex; }
.modal{
  background: var(--panel); border:1px solid var(--line); border-radius:12px;
  width: 560px; max-width:100%; max-height: 86vh; overflow-y:auto;
  padding: 24px;
}
.modal h3{ font-family:'Poppins', sans-serif; font-weight:700; font-size:17px; margin-bottom:16px; cursor:move; user-select:none; }
.field{ margin-bottom:12px; }
.field label{ display:block; font-size:11.5px; color:var(--muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:0.3px; }
.field input, .field select, .field textarea{
  width:100%; background: var(--bg); border:1px solid var(--line); color:var(--text);
  padding: 9px 10px; border-radius:6px; font-family:'Inter'; font-size:13px;
}
.field textarea{ min-height: 70px; resize:vertical; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.row3{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:10px; }
/* Los <input>/.field dentro de un grid tienen min-width:auto por defecto,
   que respeta su ancho de contenido y se sale del carril de 1fr (pedido
   por Xavi 2026-09-03: la línea libre de material se salía del modal). */
.row2 > input, .row2 > select, .row2 > .field, .row3 > input, .row3 > select, .row3 > .field{ min-width:0; width:100%; }
/* En modales largos, botones Cerrar/Guardar sticky al fondo del modal
   con fondo propio, para no dejar ver el contenido que pasa por debajo. */
.modal-actions{
  display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-top:18px;
  position:sticky; bottom:-24px; z-index:2;
  margin-left:-24px; margin-right:-24px; margin-bottom:-24px;
  padding:14px 24px; background:var(--panel); border-top:1px solid var(--line);
  border-radius:0 0 12px 12px;
}

/* Botón de guardar flotante para vistas de página completa (no modal)
   que pueden crecer más altas que la pantalla -- fijo al viewport, a
   diferencia de .modal-actions (sticky dentro de su propio overflow). */
.page-actions-flotante{
  position:fixed; bottom:0; left:240px; right:0; z-index:40;
  display:flex; align-items:center; gap:10px;
  padding:14px 36px; background:var(--panel); border-top:1px solid var(--line);
}
@media (max-width:900px){
  .page-actions-flotante{ left:0; }
}

.tabs{ display:flex; gap:6px; margin-bottom:18px; border-bottom:1px solid var(--line); }
.tab{ padding:9px 4px; margin-right:18px; color:var(--muted); font-size:13px; font-weight:500; cursor:pointer; border-bottom:2px solid transparent; }
.tab.active{ color:var(--text); border-bottom:2px solid var(--volt); }

/* Pestañas de Ajustes -- clase propia (no ".tab") para no engancharse a
   la delegación de eventos genérica de los tabs de Documentos. */
.ajustes-tabs{ display:flex; gap:6px; margin-bottom:18px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.ajustes-tab{ padding:9px 4px; margin-right:18px; color:var(--muted); font-size:13px; font-weight:500; cursor:pointer; border-bottom:2px solid transparent; }
.ajustes-tab.active{ color:var(--text); border-bottom:2px solid var(--volt); }

.empty{ text-align:center; padding: 40px 20px; color: var(--muted); font-size:13px; }
.empty .big{ font-size:15px; color:var(--text); font-weight:600; margin-bottom:6px; font-family:'Poppins', sans-serif; }

/* ---------- Login ---------- */
.login-screen{ min-height:100vh; display:flex; }
.login-brand-panel{
  flex:1.1; position:relative; overflow:hidden;
  background: linear-gradient(160deg, #0A0E14 0%, #161C24 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:40px;
}
.login-brand-panel::before{
  content:''; position:absolute; width:520px; height:520px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,158,24,0.16), transparent 70%);
  top:-160px; right:-180px;
}
.login-logo{ height: clamp(120px, 20vh, 190px); width:auto; margin-bottom:24px; position:relative; }
.login-tagline{
  font-family:'Poppins', sans-serif; color:#F2F5F8; font-size:17px; font-weight:600;
  text-align:center; line-height:1.55; max-width:320px; position:relative;
}
.login-brand-foot{
  position:absolute; bottom:26px; font-family:'JetBrains Mono', monospace;
  font-size:11px; letter-spacing:3px; color:#8A8A8A;
}
.login-form-panel{ flex:1; display:flex; align-items:center; justify-content:center; background:var(--bg); padding:40px; }
.login-form-card{ width:100%; max-width:320px; }
.login-form-card h2{ font-family:'Poppins', sans-serif; font-weight:700; font-size:22px; margin-bottom:6px; }
.login-form-sub{ color:var(--muted); font-size:13px; margin-bottom:26px; }
.login-error{ color:var(--red); font-size:12.5px; margin:-10px 0 14px 0; }
@media (max-width: 760px){
  .login-brand-panel{ display:none; }
}

.hidden{ display:none !important; }
.doc-preview{ background:#fff; color:#111; border-radius:8px; padding:26px; font-size:12.5px; position:relative; padding-left:32px; isolation:isolate; }
.doc-preview h4{ font-family:'JetBrains Mono'; font-size:11px; color:#888; letter-spacing:1px; text-transform:uppercase; }
.doc-preview .dp-total{ font-size:20px; font-weight:700; text-align:right; margin-top:10px; }
.doc-preview table td, .doc-preview table th{ border-color:#eee; color:#111; }
/* Vista previa en pantalla: se ajusta a lo que quepa cómodo, con scroll
   propio SOLO dentro del papel si el documento es largo -- la
   proporción A4 forzada queda solo para la impresión real (@page). */
#doc-preview-content .doc-preview{ max-height:78vh; overflow-y:auto; box-shadow: inset 0 0 0 1px #eee; }
@page{ size: A4; margin: 15mm; }

/* Ficha de documento (presupuesto/albarán/factura). */
.dp-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:20px; }
.dp-empresa{ display:flex; gap:12px; align-items:center; }
.dp-empresa img{ height:96px; width:auto; flex-shrink:0; }
.dp-empresa-datos{ font-size:11px; line-height:1.5; color:#666; }
.dp-empresa-datos b{ display:block; font-size:13.5px; color:#111; margin-bottom:2px; }
.dp-tipo{ text-align:right; flex-shrink:0; }
.dp-tipo-label{ font-size:19px; font-weight:800; color:var(--volt-text); letter-spacing:0.3px; }
.dp-tipo-num{ font-family:'JetBrains Mono'; font-size:12px; color:#777; margin-top:3px; }
.dp-tipo-estado{ display:inline-block; margin-top:6px; font-size:10px; font-weight:600; padding:2px 8px; border-radius:20px; background:var(--volt-dim); color:var(--volt-text); }

.dp-cards{ display:grid; grid-template-columns: 1fr 1.3fr; gap:12px; margin-bottom:20px; }
.dp-card{ background:#F5F7F9; border-radius:10px; padding:12px 15px; }
.dp-card-label{ font-size:9px; text-transform:uppercase; letter-spacing:0.6px; color:#8b95a1; margin-bottom:3px; }
.dp-card b{ font-size:13px; color:#111; }
.dp-card .dp-card-sub{ font-size:11.5px; color:#666; margin-top:1px; line-height:1.4; }
.dp-card-fila{ display:flex; justify-content:space-between; gap:10px; }
.dp-card-fila + .dp-card-fila{ margin-top:8px; }

.dp-tabla{ width:100%; border-collapse:collapse; margin-bottom:2px; }
.dp-tabla thead th{ text-align:left; font-size:9.5px; text-transform:uppercase; letter-spacing:0.5px; color:#8b95a1; padding:0 8px 7px; border-bottom:2px solid #eee; font-weight:600; }
.dp-tabla thead th.num{ text-align:right; }
.dp-tabla tbody td{ padding:9px 8px; border-bottom:1px solid #f0f2f4; font-size:12.5px; color:#111; vertical-align:top; }
.dp-tabla tbody td.num{ text-align:right; font-family:'JetBrains Mono'; white-space:nowrap; }
.dp-tabla tbody td.acciones{ white-space:nowrap; text-align:right; }
.dp-garantia-badge{ display:inline-block; font-size:9px; background:var(--volt-dim); color:var(--volt-text); border-radius:6px; padding:1px 6px; margin-left:6px; vertical-align:middle; }

.dp-totales{ display:flex; justify-content:flex-end; margin-top:12px; }
.dp-totales-box{ min-width:230px; }
.dp-totales-fila{ display:flex; justify-content:space-between; font-size:12px; padding:3px 0; color:#666; }
.dp-totales-fila.dp-total-final{ border-top:2px solid var(--volt); margin-top:6px; padding-top:8px; font-size:19px; font-weight:800; color:#111; }

.dp-nota-legal{ background:#F5F7F9; border-radius:10px; padding:10px 14px; font-size:10px; color:#7a8290; margin-top:20px; text-align:center; line-height:1.5; }
.dp-pie-contacto{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:5px 20px; margin-top:14px; padding-top:11px; border-top:1px solid #eee; font-size:10.5px; color:#7a8290; text-align:center; letter-spacing:0.15px; }
.dp-pie-contacto span{ display:inline-flex; align-items:center; gap:5px; }

/* Impresión de la nota de entrega: se oculta todo excepto el documento */
#nota-entrega-imprimible{ display:none; }
.nota-print{ font-family: Arial, sans-serif; color:#111; font-size:13px; line-height:1.5; position:relative; padding-left:22px; isolation:isolate; }
/* Marca de agua: el logo de fondo, grande y casi imperceptible, en
   TODOS los documentos imprimibles -- un solo punto de verdad. */
.doc-preview::before, .nota-print::before{
  content:"";
  position:absolute; top:0; left:0; right:0; bottom:0;
  background-image:var(--watermark-logo);
  background-repeat:no-repeat; background-position:center; background-size:75% auto;
  /* z-index positivo (delante de todo): al 10% de opacidad no tapa el
     texto, y así ninguna caja con fondo sólido por encima puede ocultarlo. */
  opacity:0.10; z-index:5; pointer-events:none;
  /* Fuerza que Chrome imprima fondos/imagenes de fondo sin que el
     usuario tenga que marcar "Graficos de fondo" a mano. */
  print-color-adjust:exact; -webkit-print-color-adjust:exact;
}
.np-header{ text-align:right; margin-bottom:24px; padding-top:58px; }
.np-header b{ font-size:14px; }
.nota-print .np-linea{ margin:10px 0; }
.nota-print .np-linea .np-label{ display:inline-block; min-width:180px; font-weight:bold; }
.nota-print hr{ border:none; border-top:1px solid #999; margin:18px 0; }

/* Registro mercantil lateral: clase propia para poder pasar a
   position:fixed SOLO en impresión (repetido en cada hoja). */
.rm-lateral{ position:absolute; top:0; bottom:0; left:0; width:14px; overflow:visible; }
.rm-lateral span{ position:absolute; top:50%; left:50%; transform: translate(-50%,-50%) rotate(-90deg); transform-origin:center center; white-space:nowrap; font-size:9px; color:#888; letter-spacing:0.5px; }

.np-logo-print{ height:50px; width:auto; }
.sello-firma-taller{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.sello-firma-taller img{
  width:225px; mix-blend-mode:multiply; opacity:0.85;
  transform:rotate(-6deg); filter:contrast(1.2) saturate(0.9);
}

.np-cabecera{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; border-bottom:2px solid #ddd; padding-bottom:10px; margin-bottom:12px; }
.np-cabecera-titulo{ text-align:right; flex-shrink:0; min-width:170px; }
.np-titulo-doc{ display:block; font-size:15.5px; font-weight:800; letter-spacing:0.3px; color:var(--volt-text); }
.np-titulo-lugar{ display:block; font-size:10.5px; color:#777; margin-top:4px; white-space:nowrap; text-align:center; }
.np-titulo-fechahora{ display:block; font-size:10.5px; color:#777; margin-top:2px; text-align:center; }

.np-datos-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:3px 14px; font-size:11.5px; margin:6px 0; }
.np-datos-grid > div{ padding:1px 0; }
.np-datos-grid b, .np-linea-compacta b{ font-weight:bold; }
.np-linea-compacta{ font-size:11.5px; margin:3px 0; }
.nota-print-compacta hr{ margin:8px 0; }
.nota-print-compacta{ padding-bottom:32mm; }

.np-salto-pagina{ page-break-before:always; break-before:page; padding-top:20px; }

.np-pie-fijo{ position:relative; }
.np-pie-legal{ background:#F5F7F9; border-radius:10px; padding:8px 12px; font-size:9.5px; color:#7a8290; margin-top:14px; text-align:center; line-height:1.5; }

.np-pie-normal{ position:relative; }
.nota-deposito-print{ padding-bottom:0; }
.nota-deposito-print .np-pie-legal{ background:transparent; }
.np-pagina1{ display:flex; flex-direction:column; min-height:250mm; }
.np-pagina1 .np-pie-normal{ margin-top:auto; }

.np-foto-wrap{ position:relative; }
.np-foto-marca{
  position:absolute; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.55); color:#fff; font-size:9.5px;
  padding:2px 0; text-align:center; letter-spacing:0.2px;
  print-color-adjust:exact; -webkit-print-color-adjust:exact;
}

@media print{
  /* El contenedor raíz de toda la app se oculta con display:none (no
     solo visibility) -- si no, Chrome sigue maquetando su altura real
     y el número de páginas impresas varía según qué hubiera detrás. */
  #app-shell-wrap{ display:none !important; }
  .overlay{ display:none !important; }
  #nota-entrega-imprimible{ display:block !important; position:absolute !important; top:0; left:0; width:100%; padding:30px; }
  .doc-preview{ display:flex; flex-direction:column; min-height:250mm; }
  .dp-pie-documento{ padding-top:20px; margin-top:auto; }

  .rm-lateral{ position:fixed; top:0; bottom:0; left:0; }
  .np-logo-print{ position:fixed; top:10mm; right:10mm; }
  .doc-preview::before, .nota-print::before{ position:fixed; }
  .np-pie-fijo{ position:fixed; left:22px; right:0; bottom:6mm; }
}

@media (max-width: 900px){
  .grid-5{ grid-template-columns: repeat(2,1fr); }
  .grid-4{ grid-template-columns: repeat(2,1fr); }
  .grid-3{ grid-template-columns: repeat(2,1fr); }
  .grid-2{ grid-template-columns: 1fr; }
  .kanban{ grid-template-columns: 1fr; }
  .sidebar{ display:none; }
  .main{ padding: 14px; }
  .mobile-nav{ display:block !important; }
  table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table thead, table tbody{ min-width:100%; }
}
.mobile-nav{
  display:none;
  position: sticky; top:44px; z-index: 40;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 10px 14px;
  margin: -14px -14px 18px -14px;
}
.mobile-nav select{
  width:100%; background: var(--panel2); color: var(--text);
  border:1px solid var(--line); border-radius:8px;
  padding: 11px 12px; font-size:14px; font-weight:600;
  font-family:'Poppins', sans-serif;
}