:root {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --text: #1a2330;
  --muted: #6b7686;
  --border: #dde3ea;
  --primary: #0d6efd;
  --primary-dark: #0a58ca;
  --green: #16a34a;
  --green-bg: #e8f7ee;
  --red: #dc2626;
  --red-bg: #fdecec;
  --amber: #d97706;
  --amber-bg: #fef3e2;
  /* Compatibles: morado, para que no se confunda ni con los extras (ámbar)
     ni con lo ya confirmado (verde) de un vistazo. */
  --violet: #7c3aed;
  --violet-bg: #f3eeff;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--text); font-size: 14px;
}
.hidden { display: none !important; }
.spacer { flex: 1; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.num { text-align: right; }

/* ── Login ── */
.login-screen {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #12233d, #0d6efd);
}
.login-card {
  background: var(--panel); padding: 36px; border-radius: 14px; width: 340px;
  display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.login-card h1 { font-size: 22px; text-align: center; letter-spacing: 1px; margin-bottom: 8px; }
.login-card h1 span, .brand span { color: var(--primary); }
.login-card input {
  padding: 11px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px;
}
.login-card button {
  padding: 11px; background: var(--primary); color: #fff; border: 0; border-radius: 8px;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.login-error { color: var(--red); text-align: center; min-height: 18px; font-size: 13px; }

/* ── Topbar ── */
.topbar {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  background: #12233d; color: #fff; position: sticky; top: 0; z-index: 20;
}
.brand { font-weight: 800; letter-spacing: 1px; font-size: 16px; }
.user-name { color: #9fb3cc; font-size: 13px; }
.sync-status { color: #9fb3cc; font-size: 12px; }
.btn {
  border: 0; border-radius: 8px; padding: 8px 14px; cursor: pointer; font-size: 13px; font-weight: 600;
}
.btn-ghost { background: rgba(255,255,255,.12); color: #fff; }
.topbar .btn-ghost:hover { background: rgba(255,255,255,.22); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-primary:disabled { background: #b8c4d4; cursor: not-allowed; }
.btn-block { width: 100%; }
.master-toggle {
  display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.12);
  padding: 7px 12px; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 700;
  color: #ffd166; user-select: none;
}
.master-toggle input { accent-color: #ffd166; }
body.master-on .topbar { background: #7a4d00; }
body.master-on .master-toggle { background: #ffd166; color: #4a2f00; }

/* MODO CAJA encendido: se ve SIEMPRE que está puesto — mientras dure, las
   líneas confirmadas no descuentan stock, y olvidárselo puesto descuadraría
   el inventario sin que nadie se entere. */
#caja-wrap.caja-activa {
  background: #34d399; color: #05392a;
  box-shadow: 0 0 0 2px rgba(52, 211, 153, .45);
}
#caja-wrap.caja-activa input { accent-color: #05392a; }

/* ── Filtros ── */
.filters {
  display: flex; gap: 10px; align-items: center; padding: 12px 16px; flex-wrap: wrap;
  background: var(--panel); border-bottom: 1px solid var(--border);
  position: sticky; top: 52px; z-index: 15;
}
.filters input[type="search"] {
  flex: 0 0 340px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px;
}
.filters select {
  padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font-size: 13px;
}
.store-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 7px 11px; border-radius: 20px; border: 1px solid var(--border); background: #fff;
  cursor: pointer; font-size: 12px; font-weight: 600; color: var(--muted); user-select: none;
}
.chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip .n { opacity: .7; font-weight: 400; }

/* ── Tabla pedidos ── */
.orders-table { width: 100%; border-collapse: collapse; background: var(--panel); }
.orders-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); padding: 10px 12px; border-bottom: 2px solid var(--border);
  background: var(--panel);
}
/* Solo la lista principal lleva cabecera pegajosa (bajo topbar+filtros) */
#orders-view .orders-table th { position: sticky; top: 116px; z-index: 10; }
.orders-table th.num { text-align: right; }
.orders-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
/* Revisión 2026-09-13 (Rafa: «esto no se ve bien»): con `nowrap` en todas las
   celdas, Cliente y Destino exigían el ancho de su texto más largo y estiraban
   la tabla a 1837 px dentro de una ventana de 1353 — la página entera se iba de
   lado y, al desplazarla para ver Total y Estado, desaparecían Fecha, Nº y
   Cliente. Con un tope y puntos suspensivos la tabla cabe siempre; el texto
   completo sigue estando en el `title` de la celda. */
/* El tope va en un elemento DENTRO de la celda: `max-width` sobre un <td> los
   navegadores lo respetan a su manera, sobre un bloque no hay dudas. */
#orders-view .col-cliente, #orders-view .col-destino {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#orders-view .col-cliente { max-width: 220px; }
#orders-view .col-destino { max-width: 240px; }
.orders-table tbody tr { cursor: pointer; }
.orders-table tbody tr:hover { background: #eef4ff; }
/* Envíos urgentes (express pagado): fondo rojo para que se revisen */
.orders-table tbody tr.row-express { background: var(--red-bg); }
.orders-table tbody tr.row-express:hover { background: #fbdddd; }
.express-badge {
  display: inline-block; padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 800;
  background: var(--red); color: #fff; letter-spacing: .5px;
}
.shipping-express {
  background: var(--red-bg); border: 1px solid #f3b9b9; border-radius: 8px;
  padding: 8px 10px; margin-bottom: 8px; color: var(--red); font-weight: 700; font-size: 13px;
}
.store-badge {
  display: inline-block; padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 700;
  color: #fff; background: var(--muted);
}
.doc-badge {
  display: inline-block; padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 800;
  background: var(--amber-bg); color: var(--amber); letter-spacing: .3px;
}
.status-badge {
  display: inline-block; padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 600;
  background: #e8ecf1; color: #45536b;
}
.lines-progress { font-variant-numeric: tabular-nums; font-weight: 600; }
.lines-progress.complete { color: var(--green); }
.orders-footer { padding: 14px; text-align: center; color: var(--muted); }
.orders-footer button { margin-left: 10px; }

/* ── Overlays / detalle ── */
.overlay {
  position: fixed; inset: 0; background: rgba(10,20,35,.5); z-index: 50;
  display: flex; align-items: stretch; justify-content: center;
}
/* Los CUADROS pequeños (código de barras, dirección, reenvío…) se abren SOBRE
   la sección que esté abierta. Antes tenían el mismo z-index que las secciones
   y, como van antes en el HTML, el cuadro salía DETRÁS del inventario y parecía
   que "se actualizaba por detrás" (Rafa 2026-08-21). */
.overlay:has(> .modal) { z-index: 70; }
.overlay-modal { z-index: 70; }
.detail-panel {
  background: var(--bg); width: 100%; max-width: 1280px; margin: 0 auto;
  display: flex; flex-direction: column; overflow-y: auto;
  /* Nada puede desbordar a lo ancho: si una tabla se pasa, scrollea ELLA. Sin
     esto, la tabla del inventario (nombres largos, 1.584 px) empujaba el panel
     y la pantalla salía descuadrada (Rafa 2026-08-21). */
  overflow-x: hidden;
}
/* Tabla del inventario: el nombre parte de línea y, si aun así no cabe, la
   tabla lleva su propio scroll horizontal en vez de romper la página. */
/* Facturación ocupa TODA la pantalla (Rafa 2026-08-22: "¿no debería ir a
   pantalla completa y no en un popup?"): sin tope de 1280 px ni fondo gris a los lados. */
#fact-overlay .detail-panel, #facturacion-overlay .detail-panel { max-width: none; }
.inv-tabla-wrap { overflow-x: auto; max-width: 100%; }
.inv-tabla { min-width: 720px; }
.inv-tabla th:nth-child(2), .inv-tabla td:nth-child(2) { white-space: normal; min-width: 240px; }
.inv-tabla td:nth-child(3), .inv-tabla td:nth-child(4) { text-align: right; }
.inv-tabla td:last-child { text-align: right; }
.detail-header {
  display: flex; align-items: center; gap: 14px; padding: 12px 20px;
  background: var(--panel); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5;
}
.detail-header .btn-ghost { background: #eef1f5; color: var(--text); }
.lock-badge { background: var(--amber-bg); color: var(--amber); padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.detail-columns { display: flex; gap: 16px; padding: 16px 20px; align-items: flex-start; }
.detail-main { flex: 1; min-width: 0; }
.detail-side { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }
.side-card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
.side-card h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 8px; }
.side-card address { font-style: normal; line-height: 1.5; }

/* Con pocos días las columnas salían gigantes: se les pone tope y se agrupan
   a la izquierda (el gráfico por hora tiene 24 y no le afecta). */
#stats-days .col { max-width: 64px; }
#stats-days { justify-content: flex-start; gap: 6px; }

/* ── Filtros de Estadísticas ── */
.stats-filtros {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  padding: 10px 20px; border-bottom: 1px solid var(--border); background: var(--panel);
}
.stats-filtros label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: var(--muted);
}
.stats-filtros select, .stats-filtros input[type="date"] {
  font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text);
}
.stats-filtros .hidden { display: none; }

/* ── Aviso flotante (fallos en pantallas de gestión) ── */
.aviso-flotante {
  position: fixed; z-index: 9999; bottom: 20px; left: 50%; transform: translateX(-50%);
  max-width: min(560px, 92vw); padding: 12px 18px; border-radius: 10px;
  background: var(--red); color: #fff; font-weight: 700; font-size: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,.28);
}
.aviso-flotante.ok { background: var(--green); }
.aviso-flotante.hidden { display: none; }

/* ── Nota del cliente (arriba de todo, imposible de pasar por alto) ── */
.customer-note {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--amber-bg); border: 2px solid var(--amber); border-left-width: 8px;
  border-radius: 10px; padding: 12px 16px; margin-bottom: 12px;
}
.customer-note .cn-icon { font-size: 26px; line-height: 1.1; }
.customer-note .cn-label {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
  color: var(--amber); margin-bottom: 2px;
}
.customer-note .cn-text {
  font-size: 19px; font-weight: 700; line-height: 1.35; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
  /* Una nota muy larga no debe empujar la barra de escaneo fuera de la vista */
  max-height: 136px; overflow-y: auto;
}
/* La misma nota en la ficha de dirección: legible, sin robar protagonismo. */
.side-card .customer-note { padding: 10px 12px; border-left-width: 6px; }
.side-card .customer-note .cn-icon { font-size: 20px; }
.side-card .customer-note .cn-text { font-size: 15px; }

/* ── Escaneo ── */
.scan-bar {
  display: flex; gap: 10px; align-items: center; margin-bottom: 12px;
  background: var(--panel); border: 2px solid var(--primary); border-radius: 10px; padding: 10px 14px;
}
.scan-bar input {
  flex: 1; border: 0; outline: 0; font-size: 17px; font-weight: 600; letter-spacing: .5px;
}
#scan-feedback { font-weight: 700; font-size: 13px; }
#scan-feedback.ok { color: var(--green); }
#scan-feedback.err { color: var(--red); }
.scan-bar.flash-ok { border-color: var(--green); background: var(--green-bg); }
.scan-bar.flash-err { border-color: var(--red); background: var(--red-bg); }
/* Revisión 2026-09-11: aviso normal (línea ya completa), espera de la CAJA y
   cuadro crítico (solo se cierra con clic). */
#scan-feedback.aviso { color: var(--amber); }
.scan-bar.flash-aviso { border-color: var(--amber); background: var(--amber-bg); }
.scan-bar.esperando-caja { flex-wrap: wrap; border-color: var(--amber); background: var(--amber-bg); }
.scan-espera { flex-basis: 100%; font-weight: 800; font-size: 14px; color: var(--amber); }
.dialogo-overlay.dialogo-critico .modal { box-shadow: 0 0 0 4px var(--red); }

/* Revisión 2026-09-11: «Cancelar en bloque» de Reseñas, aparte de los filtros. */
.resenas-bloque { margin: 8px 20px 0; border: 1px solid #f3b9b9; border-radius: 8px; background: var(--red-bg); padding: 6px 12px; }
.resenas-bloque summary { cursor: pointer; font-weight: 700; color: var(--red); font-size: 13px; }
.resenas-bloque-cuerpo { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 8px 0 4px; }

/* Revisión 2026-09-11 — tableta (1024 px): ninguna pantalla se desplaza en horizontal. */
@media (max-width: 1180px) {
  /* Pedidos: fuera Destino y la tienda abreviada, para que se vean Estado y Líneas */
  #orders-view .orders-table th:nth-child(5), #orders-view .orders-table td:nth-child(5) { display: none; }
  #orders-view .orders-table th, #orders-view .orders-table td { padding-left: 8px; padding-right: 8px; }
  #orders-view .store-badge { max-width: 110px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
  #orders-view .col-cliente { max-width: 190px; }
  /* Ficha: el envío (con el botón de etiqueta) arriba de la columna, no al fondo */
  .detail-side .side-envio { order: -1; }
  /* Inventario: el SKU parte de línea y los botones (lápiz incluido) bajan si no caben */
  .inv-tabla { min-width: 0; }
  .inv-tabla td:first-child { white-space: normal; word-break: break-all; }
  .inv-tabla td:last-child { white-space: normal !important; }
}

/* ── Líneas ── */
.line-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 10px; display: flex; gap: 14px; align-items: flex-start;
}
.line-card.done { background: var(--green-bg); border-color: #bfe8cd; }
.line-card .qty {
  font-size: 20px; font-weight: 800; min-width: 46px; text-align: center;
  padding: 6px 4px; border-radius: 8px; background: #eef1f5;
}
.line-card.done .qty { background: var(--green); color: #fff; }
/* Más de una unidad pendiente: hay que escanear/confirmar una por una */
.line-card .qty.qty-multi {
  background: var(--amber, #d97706); color: #fff;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, .25);
}
.line-info { flex: 1; min-width: 0; }
.line-name { font-weight: 600; margin-bottom: 3px; }
.line-meta { color: var(--muted); font-size: 12px; line-height: 1.5; }
.line-sku { font-family: ui-monospace, monospace; font-size: 12px; color: var(--muted); }
.line-badges { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 5px; }
.badge.no-barcode { background: var(--amber-bg); color: var(--amber); cursor: pointer; }
.badge.has-barcode { background: #e8ecf1; color: var(--muted); font-family: ui-monospace, monospace; }
.badge.done-via { background: var(--green-bg); color: var(--green); }

/* ── Estados de los emails de reseña ──
   Antes "enviado" usaba .has-barcode, un gris pensado para códigos de barras, y
   con 600 filas no se distinguía de un hueco vacío (Rafa: "cuando esté enviado
   ponlo en verde, más visual"). Cada estado tiene ahora su color y se lee de un
   vistazo bajando por la columna. */
.est { display: inline-block; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.est-enviado { background: var(--green-bg); color: var(--green); }
.est-espera { background: #eef2f7; color: var(--muted); font-weight: 700; }
.est-hoy { background: #e7efff; color: var(--primary); }
.est-caducado { background: var(--amber-bg); color: var(--amber); }
.est-error { background: var(--red-bg); color: var(--red); }
.est-noaplica { background: transparent; color: var(--muted); font-weight: 400; padding-left: 0; }
/* Fila entera cuando ya han salido los dos emails: cerrada, nada que mirar */
tr.resena-lista td { background: rgba(22, 163, 74, .045); }
.line-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.line-actions .btn { font-size: 12px; padding: 6px 10px; }
.btn-outline { background: #fff; border: 1px solid var(--border); color: var(--text); }
.btn-outline:hover { background: #eef1f5; }

/* ── Verificación dirección ── */
.verify-ok { color: var(--green); font-weight: 700; font-size: 12px; margin-top: 8px; }
#address-card .btn { margin-top: 10px; }

/* ── Modal ── */
.modal {
  background: var(--panel); border-radius: 14px; padding: 26px; width: 440px; margin: auto;
  display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.35);
  max-height: 90vh; overflow-y: auto;
}
.modal-wide { width: 560px; }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.modal-grid .cfg-label { margin-bottom: 0; }
.modal h2 { font-size: 18px; }
.modal input {
  padding: 12px; border: 2px solid var(--amber); border-radius: 8px; font-size: 17px;
  font-family: ui-monospace, monospace;
}
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ── Cuadro de diálogo propio (confirmar / pedir número / avisar) ──
   Por encima de TODO lo demás (modales 70, TPV 80, RGPD 95, aviso DHL 200):
   se abre desde cualquier pantalla y no puede quedar detrás de nada. */
.dialogo-overlay { z-index: 300; align-items: center; }
.dialogo-caja { width: min(500px, 94vw); }
.dialogo-caja h2 { font-size: 17px; line-height: 1.3; }
#dialogo-texto { white-space: pre-line; line-height: 1.45; max-height: 50vh; overflow-y: auto; }
#dialogo-texto:empty, .dialogo-aviso:empty { display: none; }
.dialogo-aviso { color: var(--red); font-weight: 700; }
.dialogo-caja .cfg-label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.dialogo-caja input { width: 100%; font-family: inherit; }
/* El botón con el foco se tiene que VER: es el que dispara Enter */
.dialogo-caja .btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

/* ── Auditoría ── */
.audit-list { max-height: 300px; overflow-y: auto; font-size: 12px; }
.audit-item { padding: 6px 0; border-bottom: 1px solid var(--border); }
.audit-item .who { font-weight: 600; }
.audit-item .when { color: var(--muted); }

/* ── Configuración ── */
.config-body { padding: 16px 20px; max-width: 860px; display: flex; flex-direction: column; gap: 12px; }
.switch-row { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; padding: 6px 0; }
.switch-row input { width: 20px; height: 20px; accent-color: var(--primary); }
.cfg-store {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.cfg-store:last-child { border-bottom: 0; }
.cfg-store .switch-row { min-width: 260px; padding: 0; }
.cfg-store .meta { flex: 1; color: var(--muted); font-size: 12px; min-width: 180px; }
.cfg-store .meta .err { color: var(--red); }
.cfg-store .btn { font-size: 12px; padding: 6px 10px; }
.cfg-keys {
  flex-basis: 100%; display: flex; gap: 8px; padding: 8px 0 4px 30px; flex-wrap: wrap;
}
.cfg-keys input {
  flex: 1; min-width: 220px; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 7px; font-family: ui-monospace, monospace; font-size: 12px;
}
.sync-off-badge {
  background: var(--amber-bg); color: var(--amber); padding: 5px 10px;
  border-radius: 6px; font-size: 11px; font-weight: 800;
}

/* ── Menú ── */
.menu-wrap { position: relative; }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 100;
  background: var(--panel); color: var(--text); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 14px 40px rgba(10,20,35,.25);
  min-width: 220px; padding: 8px; display: flex; flex-direction: column; gap: 2px;
}
.menu-panel button {
  text-align: left; background: none; border: 0; padding: 10px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 600; cursor: pointer; color: var(--text);
}
.menu-panel button:hover { background: #eef4ff; }
.menu-panel .menu-logout { color: var(--red); border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; margin-top: 4px; }
.menu-user {
  padding: 8px 12px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
  font-size: 12px; color: var(--muted);
}
.menu-user strong { display: block; color: var(--text); font-size: 13px; }
.role-pill {
  display: inline-block; margin-top: 3px; padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 800; letter-spacing: .5px;
  background: var(--amber-bg); color: var(--amber);
}
.role-pill.operario { background: #e8ecf1; color: #45536b; }

/* ── Estadísticas ── */
.config-body-wide { max-width: 1100px; }
.stats-table th, .stats-table td { white-space: nowrap; }
.stats-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.hour-chart {
  display: flex; gap: 2px; align-items: stretch; height: 150px; padding-top: 16px;
}
.hour-chart .col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.hour-chart .v { text-align: center; font-size: 10px; font-weight: 700; height: 14px; color: var(--text); }
.hour-chart .barbox { flex: 1; display: flex; align-items: flex-end; }
.hour-chart .bar {
  width: 100%; background: var(--primary); border-radius: 4px 4px 0 0;
}
.hour-chart .col:hover .bar { filter: brightness(1.18); }
.hour-chart .h { text-align: center; font-size: 10px; color: var(--muted); margin-top: 4px; }
.stats-empty { color: var(--muted); padding: 10px 0; }

/* ── Envíos ── */
.rules-table input, .rules-table select {
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px;
}
.rules-table td { padding: 6px 6px; }
/* ── Configuración de transportistas ── */
.carrier-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px;
}
.carrier-grid h4 { font-size: 13px; margin-bottom: 8px; }
.cfg-label {
  display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px;
}
.cfg-label input, .cfg-label select {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px;
  font-size: 13px; font-weight: 400; color: var(--text); text-transform: none; letter-spacing: 0;
}
/* Interruptor con su explicación al lado. La clase se usaba desde hace tiempo
   pero NO estaba definida: los <label> fluían como texto suelto y los
   interruptores se pisaban unos con otros. */
.cfg-check {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13px; line-height: 1.45; color: var(--text); cursor: pointer;
}
.cfg-check input[type="checkbox"] {
  flex: 0 0 auto; width: 16px; height: 16px; margin: 2px 0 0;
}
.cfg-check > span { flex: 1; min-width: 0; }
/* El del envío de verdad va enmarcado: es el que hace que salgan emails. */
.cfg-check-aviso {
  padding: 11px 13px; border: 2px solid var(--amber); border-radius: 9px;
  background: var(--amber-bg);
}

.cfg-ok { color: var(--green); font-weight: 700; }
.cfg-missing { color: var(--amber); font-weight: 700; }
.test-result { margin-top: 6px; font-size: 12px; line-height: 1.5; }
.test-result .test-ok { color: var(--green); background: var(--green-bg); padding: 5px 8px; border-radius: 6px; margin-bottom: 4px; }
.test-result .test-fail { color: var(--red); background: var(--red-bg); padding: 5px 8px; border-radius: 6px; margin-bottom: 4px; }

.rule-warning {
  display: inline-block; margin-top: 6px; padding: 6px 10px; border-radius: 7px;
  background: var(--amber-bg); color: var(--amber); font-weight: 700; font-size: 12px;
}
.shipment-row {
  padding: 8px 10px; background: #eef4ff; border-radius: 8px; margin-top: 8px;
  font-size: 13px; line-height: 1.5;
}
.shipment-row.shipment-error { background: var(--red-bg); }
.btn-label-print { font-size: 12px; padding: 4px 10px; margin-left: 6px; text-decoration: none; display: inline-block; }
code { background: #eef1f5; padding: 1px 5px; border-radius: 4px; font-size: 12px; }

/* ── Registro de errores ── */
.err-item { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.err-item:last-child { border-bottom: 0; }
.err-msg {
  margin-top: 4px; padding: 7px 10px; background: var(--red-bg); color: var(--red);
  border-radius: 7px; font-size: 12px; font-weight: 600; line-height: 1.5;
}
.err-item details pre {
  background: #f2f4f7; padding: 8px; border-radius: 6px; font-size: 11px;
  white-space: pre-wrap; word-break: break-all; max-height: 180px; overflow-y: auto;
}
.err-item details summary { cursor: pointer; margin-top: 4px; }

/* ── Usuarios ── */
.user-form { display: flex; gap: 8px; flex-wrap: wrap; }
.user-form input, .user-form select {
  padding: 9px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px;
}
.user-form input { flex: 1; min-width: 160px; }
.user-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.user-row:last-child { border-bottom: 0; }
.user-row .who { min-width: 240px; }
.user-row .who strong { display: block; }
.user-row .who span { color: var(--muted); font-size: 12px; }
.user-row .btn { font-size: 12px; padding: 6px 10px; }
.user-row.inactive { opacity: .5; }

@media (max-width: 900px) {
  .detail-columns { flex-direction: column; }
  .detail-side { width: 100%; }
  .filters input[type="search"] { flex: 1 1 100%; }
}

/* Empresa en la dirección (los clientes suelen meter aquí dirección extra) */
.addr-company { color: var(--muted); font-size: 13px; }
/* Enlaces al producto en cada línea */
.btn-prod { padding: 3px 7px; font-size: 11px; line-height: 1.4; text-decoration: none; }

/* Extras del plugin PRODUCT FIELDS: son artículos aparte que hay que coger */
.line-card.line-extra { border-left: 4px solid var(--amber); background: #fffdf7; }
.extra-badge {
  display: inline-block; padding: 2px 7px; border-radius: 5px; font-size: 11px;
  font-weight: 800; background: var(--amber); color: #fff; letter-spacing: .3px;
}

/* Patillas COMPATIBLES: se cogen de otro sitio y NO son originales — si se
   confunden, sale la pieza cara y encima no cuadra el inventario. */
/* COMPATIBLES (Rafa 2026-09-16: «debe marcarse MUY claro que son compatibles»):
   franja gruesa violeta, fondo teñido y una banda grande arriba de la línea que
   no se puede pasar por alto al coger la pieza. */
.line-card.line-compat { border-left: 10px solid var(--violet); background: var(--violet-bg); box-shadow: inset 0 0 0 2px var(--violet); }
.line-card.line-compat .line-name { color: #3b0764; }
.badge.badge-compat { background: var(--violet); color: #fff; letter-spacing: .4px; font-weight: 800; font-size: 13px; padding: 4px 10px; }
.compat-banner {
  display: block; margin: 0 0 8px; padding: 8px 12px; border-radius: 8px;
  background: var(--violet); color: #fff; font-weight: 900; font-size: 17px; letter-spacing: .5px; text-transform: uppercase;
}
.line-card.done.line-compat .compat-banner { opacity: .85; }

/* Envío sin completar: enlace deliberadamente discreto (no un botón grande),
   para que no se use por accidente. */
.link-parcial {
  display: block; width: 100%; margin-top: 8px; padding: 4px 0;
  background: none; border: 0; cursor: pointer;
  font-size: 12px; color: var(--muted); text-decoration: underline; text-align: center;
}
.link-parcial:hover { color: var(--amber); }

/* Qué ha salido ya de cada línea (envíos parciales y reenvíos) */
.badge.badge-enviada { background: #e8ecf1; color: var(--muted); }
.badge.badge-falta-enviar { background: var(--amber-bg); color: var(--amber); }

/* Cuadro de la segunda caja: reenvío / resto del pedido / 2.º envío */
.reenvio-op {
  display: flex; gap: 8px; align-items: flex-start; padding: 9px 11px; margin-bottom: 6px;
  border: 2px solid var(--border); border-radius: 9px; cursor: pointer; font-size: 13px;
}
.reenvio-op:has(input:checked) { border-color: var(--primary); background: #f3f8ff; }
.reenvio-op em { color: var(--muted); font-style: normal; display: block; font-size: 12px; }
.reenvio-lineas {
  max-height: 190px; overflow-y: auto; border: 1px solid var(--border); border-radius: 9px;
}
.reenvio-lineas label {
  display: flex; gap: 8px; align-items: flex-start; padding: 8px 11px; font-size: 13px;
  border-bottom: 1px solid var(--border); cursor: pointer;
}
.reenvio-lineas label:last-child { border-bottom: 0; }
.reenvio-lineas label:hover { background: #f5f8fc; }
.reenvio-lineas .rl-estado { display: block; font-size: 11px; color: var(--muted); }
.reenvio-lineas .rl-uds { margin-left: 6px; padding: 2px 6px; border: 1px solid var(--border, #d0d5dd); border-radius: 6px; font: inherit; font-size: 12px; background: #fff; vertical-align: middle; }

/* Lo que pagó el cliente por el envío (para cuadrarlo con el transportista) */
.ship-paid {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 5px;
  font-size: 11px; font-weight: 700; background: var(--amber-bg); color: var(--amber);
}
.ship-paid.ship-free { background: #eef1f5; color: var(--muted); }

/* Google no confirmó la dirección: hay que revisarla antes de la etiqueta */
.google-issue {
  background: var(--amber-bg); border: 1px solid #f0d0a0; border-radius: 8px;
  padding: 8px 10px; margin-bottom: 8px; color: var(--amber);
  font-size: 12px; font-weight: 600; line-height: 1.45;
}

/* Lo que NOS cuesta el envío (lo devuelve el transportista al crear la etiqueta) */
.ship-cost {
  display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 5px;
  font-size: 11px; font-weight: 700; background: #e8f0fe; color: var(--primary-dark);
}

/* Pedido ya enviado: evitar que se genere una segunda etiqueta sin querer */
.already-shipped {
  background: var(--green-bg); border: 1px solid #a8dcc0; border-radius: 8px;
  padding: 9px 11px; margin-bottom: 8px; color: #14663a;
  font-weight: 800; font-size: 13px; line-height: 1.4;
}
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn-danger:disabled { background: #e0a5a5; }

/* Aviso tras etiqueta DHL Global Mail: el paquete va a la caja de DHL */
.dhl-box-alert {
  position: fixed; inset: 0; z-index: 200; display: flex;
  align-items: center; justify-content: center; background: rgba(10,20,35,.75);
}
.dhl-box-inner {
  background: #ffcc00; color: #1a2330; border-radius: 18px; padding: 40px 56px;
  text-align: center; box-shadow: 0 24px 70px rgba(0,0,0,.45);
  animation: dhl-box-pop .18s ease-out;
}
.dhl-box-icon { font-size: 68px; line-height: 1; }
.dhl-box-text { font-size: 34px; font-weight: 900; letter-spacing: 1px; margin: 10px 0 6px; }
.dhl-box-sub { font-size: 14px; font-weight: 600; opacity: .8; margin-bottom: 18px; max-width: 420px; }
@keyframes dhl-box-pop { from { transform: scale(.9); opacity: 0 } to { transform: scale(1); opacity: 1 } }

/* Versión desplegada, en el menú */
.menu-version {
  border-top: 1px solid var(--border); margin-top: 6px; padding: 8px 14px 2px;
  font-size: 11px; color: var(--muted);
}
/* Aviso de versión nueva disponible */
.nueva-version {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px; z-index: 210;
  background: #12233d; color: #fff; padding: 12px 18px; border-radius: 10px;
  display: flex; align-items: center; gap: 14px; font-weight: 600; font-size: 13px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}

/* Preferencia del usuario dentro del menú */
.menu-pref {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  border-top: 1px solid var(--border); cursor: pointer; font-size: 13px;
}
.menu-pref:hover { background: #f2f5f9; }

/* ── Facturación (F0+F1, sandbox) ─────────────────────────────────────── */
.fact-banner {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  background: #fef3c7; border: 1px solid #f59e0b; color: #92400e;
  padding: 8px 14px; border-radius: 8px; margin: 10px 20px 0; font-size: 13px;
}
.fact-tabs { display: flex; gap: 6px; padding: 10px 20px 0; flex-wrap: wrap; }
.fact-tab {
  border: 1px solid var(--border); background: #fff; border-radius: 8px;
  padding: 7px 14px; cursor: pointer; font-size: 13px; font-weight: 600; color: #444;
}
.fact-tab:hover { background: #f2f5f9; }
.fact-tab.active { background: #0d6efd; border-color: #0d6efd; color: #fff; }
.fact-tab .n {
  background: #dc2626; color: #fff; border-radius: 10px; padding: 0 6px;
  font-size: 11px; margin-left: 4px;
}
.fact-tab .n:empty { display: none; }
.fact-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fact-table th, .fact-table td {
  padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left;
  vertical-align: top;
}
.fact-table th { font-size: 11px; text-transform: uppercase; color: #667; }
.fact-table td.num, .fact-table th.num { text-align: right; white-space: nowrap; }
.fact-table tbody tr:hover { background: #f7f9fc; }
.chip-mini {
  display: inline-block; border-radius: 6px; padding: 1px 7px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.fact-form-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px; margin: 8px 0 10px;
}
.fact-form-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #556; }
.fact-form-grid input { padding: 7px 9px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; }

/* ── TPV de mostrador (F2) ─────────────────────────────────────────────── */
.tpv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 980px) { .tpv-cols { grid-template-columns: 1fr; } }
.tpv-scan {
  width: 100%; box-sizing: border-box; font-family: ui-monospace, monospace;
  font-size: 1.35rem; font-weight: 600; padding: 12px 14px;
  border: 2px solid #0d6efd; border-radius: 10px;
}
.tpv-total {
  font-size: 2.1rem; font-weight: 800; text-align: right; margin: 10px 0;
  color: #111;
}
.tpv-metodos { display: flex; gap: 8px; margin: 6px 0; }
.tpv-metodo {
  flex: 1; border: 2px solid var(--border); background: #fff; border-radius: 10px;
  padding: 12px; font-size: 1.05rem; font-weight: 700; cursor: pointer;
}
.tpv-metodo.active { border-color: #0d6efd; background: #eaf2ff; color: #0d6efd; }
.tpv-cobrar {
  width: 100%; font-size: 1.3rem; font-weight: 800; padding: 14px;
  border-radius: 12px; letter-spacing: .5px;
}
.tpv-cambio { font-size: 1.15rem; font-weight: 800; }
.tpv-arqueo {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.tpv-arqueo > div {
  background: #f7f9fc; border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 110px;
}
.tpv-arqueo > div span { font-size: 11px; color: #667; text-transform: uppercase; }
.tpv-arqueo > div strong { font-size: 1.15rem; }
.tpv-arqueo-total { background: #eaf2ff !important; border-color: #0d6efd !important; }

/* ── ENTREGAFAS: espacio unificado óptica + TPV.
   Estética del programa ORIGINAL de la óptica (petición de Rafa): sidebar
   CLARA con borde fino, azul profundo oklch(0.45 0.15 240) como color de
   marca, elemento activo con fondo tintado, tarjetas blancas redondeadas
   con sombra suave. Los hex son el fallback del oklch. ─────────────────── */
.ef-shell { display: flex; width: 100%; height: 100vh; background: #f4f6fa; }
.ef-sidebar {
  width: 236px; flex-shrink: 0; color: #101828;
  background: #f8f9fc; background: oklch(0.98 0.005 240);
  border-right: 1px solid #e4e7ee; border-right: 1px solid oklch(0.92 0.005 240);
  display: flex; flex-direction: column; gap: 14px; padding: 16px 12px;
}
.ef-brand { display: flex; gap: 10px; align-items: center; padding: 4px 8px 12px; border-bottom: 1px solid #e9ecf2; }
.ef-logo { font-size: 26px; }
.ef-brand strong { display: block; letter-spacing: .6px; font-size: 15px; color: #1c2b4a; }
.ef-brand span { font-size: 11px; color: #7c8698; }
.ef-nav { display: flex; flex-direction: column; gap: 2px; }
.ef-item {
  display: flex; gap: 10px; align-items: center; text-align: left;
  background: none; border: 0; color: #3f4a5f; padding: 10px 12px;
  border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.ef-item:hover { background: #eceff5; color: #101828; }
.ef-item.active {
  background: #e2e9f8; background: oklch(0.93 0.025 240);
  color: #2c4ab0; color: oklch(0.45 0.15 240);
}
.ef-badge {
  margin-left: auto; background: #dc2626; color: #fff; border-radius: 10px;
  padding: 0 7px; font-size: 11px; font-weight: 700;
}
.ef-badge:empty { display: none; }
.ef-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.ef-stats { font-size: 11px; color: #7c8698; line-height: 1.6; padding: 0 8px; }
.ef-salir {
  background: #fff; border: 1px solid #dfe3ea; color: #3f4a5f; padding: 10px;
  border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 13px;
}
.ef-salir:hover { border-color: #2c4ab0; color: #2c4ab0; }
.ef-main { flex: 1; overflow-y: auto; padding: 22px 26px 60px; }
.ef-panel { max-width: 1080px; margin: 0 auto; }
.ef-head { margin: 0 0 16px; }
.ef-head h2 { margin: 0; font-size: 22px; color: #101828; }
.ef-head p { margin: 3px 0 0; color: #667; font-size: 13px; }
.ef-panel .side-card {
  background: #fff; border: 1px solid #e7eaf0; border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.ef-shell .btn-primary {
  background: #2c4ab0; background: oklch(0.45 0.15 240);
  border-color: transparent;
}
.ef-shell .btn-primary:hover { background: #24409c; background: oklch(0.41 0.15 240); }
@media (max-width: 900px) {
  .ef-sidebar { width: 62px; padding: 12px 6px; }
  .ef-item { justify-content: center; padding: 12px 6px; }
  .ef-item span, .ef-brand div, .ef-stats { display: none; }
  .ef-badge { position: absolute; transform: translate(14px, -10px); }
  .ef-item { position: relative; }
  .ef-salir { font-size: 16px; }
  .ef-main { padding: 14px 12px 60px; }
}

/* Buscador de inventario del TPV (desplegable bajo el campo) */
.tpv-buscar-res {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%;
  background: #fff; border: 1px solid #dfe3ea; border-radius: 10px;
  box-shadow: 0 10px 24px rgba(16, 24, 40, .14); overflow: hidden;
}
.tpv-buscar-item {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid #f0f2f6;
  padding: 9px 12px; cursor: pointer; font: inherit;
}
.tpv-buscar-item:hover { background: #eef3ff; }
.tpv-buscar-item:last-child { border-bottom: 0; }

/* Agenda: conmutador Día/Mes/Año + calendario mensual + rejilla anual */
.ag-vistas { display: inline-flex; border: 1px solid #dfe3ea; border-radius: 10px; overflow: hidden; }
.ag-vistas .ag-vista { border: 0; border-radius: 0; margin: 0; }
.ag-vistas .ag-vista.activa { background: #2c4ab0; background: oklch(0.45 0.15 240); color: #fff; }
.ag-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.ag-cal-cab { text-align: center; font-size: 11px; color: #7c8698; font-weight: 700; padding: 4px 0; }
.ag-cal-dia {
  min-height: 74px; background: #fff; border: 1px solid #e7eaf0; border-radius: 10px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 6px 8px; cursor: pointer; font: inherit;
}
.ag-cal-dia:hover { border-color: #2c4ab0; }
.ag-cal-dia.hoy { outline: 2px solid #2c4ab0; outline-offset: -2px; }
.ag-cal-dia.con-citas { background: #eef3ff; }
.ag-cal-num { font-weight: 700; color: #101828; }
.ag-cal-n { font-size: 11px; color: #2c4ab0; font-weight: 700; }
.ag-cal-conf { font-size: 11px; color: #15803d; }
.ag-anio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ag-anio-mes {
  background: #fff; border: 1px solid #e7eaf0; border-radius: 12px; padding: 14px;
  display: flex; flex-direction: column; gap: 4px; cursor: pointer; text-align: left; font: inherit;
}
.ag-anio-mes:hover { border-color: #2c4ab0; }
.ag-anio-mes.con-citas { background: #eef3ff; }

/* ── RGPD: bloque en la ficha + modal de firma ─────────────────────────── */
.rgpd-bloque {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 14px; border-radius: 10px; font-size: 13px;
}
.rgpd-ok { background: #ecfdf3; border: 1px solid #16a34a; color: #14532d; }
.rgpd-falta { background: #fef3c7; border: 1px solid #f59e0b; color: #92400e; }
.rgpd-card {
  background: #fff; border-radius: 14px; padding: 20px; margin: auto;
  width: min(720px, 94vw); max-height: 92vh; display: flex; flex-direction: column;
}
.rgpd-texto {
  white-space: pre-wrap; overflow-y: auto; max-height: 34vh;
  border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
  font-size: 11.5px; line-height: 1.5; color: #333; background: #fafbfd;
}
.rgpd-canvas {
  width: 100%; height: 180px; border: 2px dashed #98a2b3; border-radius: 10px;
  background: #fff; touch-action: none; cursor: crosshair;
}

/* ── ENTREGAFAS · pase FORMAL (Rafa: "una óptica necesita un aire serio").
   Todo va con ámbito .ef-shell / #ef-overlay: pícking conserva su estilo y
   el espacio clínico queda claramente diferenciado. ─────────────────────── */
.ef-shell { font-size: 14px; color: #1b2437; }
.ef-ico { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
.ef-brand .ef-ico { width: 26px; height: 26px; color: #2c4ab0; opacity: 1; }
.ef-brand strong { letter-spacing: .12em; font-size: 14px; }
.ef-brand span { letter-spacing: .02em; }
.ef-item .ef-ico { color: #64748b; }
.ef-item.active .ef-ico, .ef-item:hover .ef-ico { color: inherit; opacity: 1; }
.ef-head h2 { font-weight: 650; letter-spacing: -0.01em; }
.ef-head p { color: #64748b; }
.ef-panel .side-card h3 {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em;
  color: #475569; font-weight: 700; border-bottom: 1px solid #eef1f5;
  padding-bottom: 8px; margin-bottom: 12px;
}
.ef-shell .btn { border-radius: 8px; }
.ef-shell .btn-ghost { color: #33415c; }
.ef-shell .btn-ghost:hover { background: #eef2f7; color: #1b2437; }
.ef-shell .btn-outline { border-color: #d3dae5; color: #33415c; background: #fff; }
.ef-shell .btn-outline:hover { border-color: #2c4ab0; color: #2c4ab0; }
.ef-shell input, .ef-shell select, .ef-shell textarea {
  border: 1px solid #d9dfe9; border-radius: 8px; background: #fff;
}
.ef-shell input:focus, .ef-shell select:focus, .ef-shell textarea:focus {
  outline: 2px solid rgba(44, 74, 176, .22); outline-offset: 0;
  border-color: #2c4ab0; border-color: oklch(0.45 0.15 240);
}
.ef-shell label { color: #475569; }
.ef-shell .fact-table td { border-color: #eef1f5; }
.ef-shell .chip-mini { border-radius: 6px; font-weight: 600; letter-spacing: .01em; }
/* Pestañas de la ficha clínica: subrayado sobrio (nada de píldoras) */
.ef-shell .fact-tab {
  background: none; border: 0; border-bottom: 2px solid transparent;
  border-radius: 0; color: #5b6779; font-weight: 600; padding: 8px 12px;
}
.ef-shell .fact-tab:hover { color: #1b2437; border-bottom-color: #cbd5e1; }
.ef-shell .fact-tab.active {
  background: none; color: #2c4ab0; color: oklch(0.45 0.15 240);
  border-bottom-color: #2c4ab0; border-bottom-color: oklch(0.45 0.15 240);
}
.ef-shell .rgpd-bloque .btn { background: #fff; }
.ef-shell .rgpd-ok .btn-outline { border-color: #16a34a; color: #14532d; }
.ef-shell .tpv-scan { border: 1.5px solid #2c4ab0; font-weight: 600; }
.ef-shell .tpv-total { color: #1b2437; }

/* Gastos: zona de arrastre (facturación, estilo picking normal) */
.gastos-drop {
  border: 2px dashed #c4cddc; border-radius: 12px; padding: 22px 16px;
  text-align: center; color: #475569; background: #f8fafc; font-size: 14px;
}
.gastos-drop.encima { border-color: #0d6efd; background: #eaf2ff; color: #0d47a1; }
.gastos-drop-btn { color: #0d6efd; text-decoration: underline; cursor: pointer; }

/* ═══════════ TPV — diseño Claude Design (2026-08-22) ═══════════
   Paleta: fondo #F4F5F7 · tarjeta #FFFFFF/#E4E7EC · primario #2563EB (hover #1D4ED8)
   éxito #16A34A/#ECFDF3/#067647 · aviso #B45309/#FFFAEB/#FEF0C7/#FEDF89 · error #B42318/#FEF3F2
   texto #101828 / #667085 / #98A2B3 · bordes de control #D0D5DD · selección #EFF6FF+#2563EB */
.ef-panel.tpv { max-width: none; margin: 0; color: #101828; font-size: 15px; }
.ef-main:has(> .ef-panel.tpv:not(.hidden)) { padding: 0; background: #F4F5F7; }
.tpv kbd { font: 600 11px ui-monospace, monospace; background: #F2F4F7; border: 1px solid #D0D5DD; border-bottom-width: 2px; border-radius: 6px; padding: 3px 7px; color: #475467; }
.tpv .muted { color: #98A2B3; } .tpv .c { text-align: center; } .tpv .r { text-align: right; }
.tpv-top { display: flex; align-items: center; gap: 20px; padding: 12px 24px; background: #FFFFFF; border-bottom: 1px solid #E4E7EC; min-height: 84px; box-sizing: border-box; position: relative; }
.tpv-brand { display: flex; flex-direction: column; line-height: 1.15; min-width: 210px; }
.tpv-brand-1 { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; } .tpv-brand-2 { font-size: 12px; color: #667085; font-weight: 600; letter-spacing: 0.08em; }
.tpv-top-title { font-size: 22px; font-weight: 700; } .tpv-top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.tpv-scanbox { flex: 1; display: flex; align-items: center; gap: 14px; height: 56px; background: #FFFFFF; border: 2px solid #2563EB; border-radius: 12px; padding: 0 18px; box-shadow: 0 0 0 4px rgba(37,99,235,0.14); box-sizing: border-box; position: relative; }
.tpv-scanbox-sm { max-width: 640px; }
.tpv-scanbox input { flex: 1; border: 0; outline: 0; font-size: 19px; background: transparent; color: #101828; min-width: 0; padding: 0; height: 100%; }
.tpv-scanbox input::placeholder { color: #98A2B3; }
.tpv-barcode { display: inline-flex; gap: 2px; align-items: stretch; height: 22px; flex: none; } .tpv-barcode i { display: block; background: #475467; width: 3px; } .tpv-barcode i:nth-child(2n) { width: 2px; } .tpv-barcode i:nth-child(3) { width: 4px; }
.tpv-barcode-lg { height: 36px; opacity: 0.45; gap: 3px; } .tpv-barcode-lg i { background: #98A2B3; width: 5px; } .tpv-barcode-lg i:nth-child(2n) { width: 3px; } .tpv-barcode-lg i:nth-child(3) { width: 7px; }
.tpv-keys { display: flex; gap: 14px; align-items: center; color: #667085; font-size: 12px; flex: none; } .tpv-keys span { display: flex; gap: 5px; align-items: center; }
.tpv-hint { font-size: 13px; color: #667085; padding: 6px 24px 0; min-height: 22px; } .tpv-hint-warn { color: #B45309; }
/* El panel derecho es fijo a 560 px en el artboard (1920 px). Con el menú
   lateral de ENTREGAFAS (236 px) y pantallas de 1280–1440 hay que dejarlo
   fluido: nunca menos de 360 px ni más de 560, y el tique con min-width:0 para
   que sus tablas no empujen el ancho (medido: desbordaba 117 px a 1280). */
.tpv-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(360px, 34vw, 560px); gap: 20px; padding: 14px 24px 24px; box-sizing: border-box; min-height: calc(100vh - 130px); align-items: stretch; max-width: 100%; }
.tpv-grid > * { min-width: 0; }
@media (max-width: 1100px) { .tpv-grid { grid-template-columns: minmax(0, 1fr); } .tpv-side { max-width: none; } }
.tpv-top { flex-wrap: wrap; } .tpv-top .tpv-scanbox { min-width: 320px; }
/* La descripción nunca debe quedar en una columna de pocas letras: tiene un
   mínimo real (220 px) y si no cabe todo, la fila hace scroll horizontal dentro
   del tique en vez de partir palabra a palabra. A 1280 px con el menú lateral
   las columnas numéricas se estrechan. */
.tpv-lrow, .tpv-thead { grid-template-columns: minmax(220px, 1fr) 112px 96px 56px 100px 36px; gap: 8px; }
.tpv-lrow-abono, .tpv-thead-abono { grid-template-columns: 40px minmax(220px, 1fr) 140px 96px 100px; }
.tpv-lrow-cierre, .tpv-thead-cierre { grid-template-columns: 64px 124px minmax(160px, 1fr) 92px 104px 100px; }
.tpv-lineas { overflow-x: auto; } .tpv-lt, .tpv-lt2 { overflow-wrap: anywhere; }
@media (max-width: 1500px) { .tpv-lrow, .tpv-thead { grid-template-columns: minmax(200px, 1fr) 100px 88px 48px 92px 32px; font-size: 15px; padding-left: 16px; padding-right: 16px; } .tpv-lsub { padding-left: 32px; } .tpv-tique-head, .tpv-totales, .tpv-pago, .tpv-cliente { padding-left: 16px; padding-right: 16px; } }
.tpv-total { font-size: clamp(40px, 3.6vw, 64px); } .tpv-cambio { font-size: clamp(30px, 2.8vw, 48px); } .tpv-cobrar { font-size: clamp(22px, 1.8vw, 32px); }
.tpv-card { background: #FFFFFF; border: 1px solid #E4E7EC; border-radius: 12px; box-sizing: border-box; }
.tpv-card-title { font-size: 15px; font-weight: 600; }
.tpv-tique { display: flex; flex-direction: column; min-height: 0; }
.tpv-tique-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 22px; border-bottom: 1px solid #E4E7EC; flex-wrap: wrap; }
.tpv-tique-title { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tpv-tique-actions { display: flex; gap: 10px; }
.tpv-pill { font-size: 13px; color: #667085; background: #F2F4F7; border-radius: 999px; padding: 3px 10px; font-weight: 600; }
.tpv-btn { height: 44px; padding: 0 18px; background: #FFFFFF; border: 1px solid #D0D5DD; border-radius: 10px; font-size: 15px; font-weight: 600; color: #344054; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.tpv-btn:hover { border-color: #98A2B3; } .tpv-btn-soft { background: #EFF6FF; border-color: #B9CBF5; color: #2563EB; font-weight: 700; }
.tpv-btn-primary { background: #2563EB; border-color: #2563EB; color: #FFFFFF; font-weight: 700; } .tpv-btn-primary:hover { background: #1D4ED8; border-color: #1D4ED8; }
.tpv-btn-icon { width: 44px; padding: 0; font-size: 17px; } .tpv-btn-lg { height: 60px; font-size: 17px; } .tpv-date { height: 44px; border: 1px solid #D0D5DD; border-radius: 10px; padding: 0 14px; font: inherit; font-weight: 600; }
.tpv-link { background: none; border: 0; color: #2563EB; font: inherit; font-size: 14px; cursor: pointer; text-align: center; } .tpv-link:hover { text-decoration: underline; }
.tpv-libre, .tpv-graduada { padding: 12px 22px; border-bottom: 1px solid #E4E7EC; background: #F8FAFF; }
.tpv-libre { display: grid; grid-template-columns: minmax(240px, 1fr) 80px 150px 92px auto; gap: 10px; }
/* Con el lateral de ENTREGAFAS el tique es estrecho: la descripción ocupa toda la primera fila
   y cantidad / precio / IVA / Añadir van en la segunda (antes la descripción se quedaba en 128 px). */
@media (max-width: 1500px) { .tpv-libre { grid-template-columns: 80px 150px 92px auto; } .tpv-libre > :first-child { grid-column: 1 / -1; } }
#tpv-desc-res { right: auto; width: max(100%, 440px); max-width: calc(100vw - 48px); }
.tpv-libre input, .tpv-libre select, .tpv-graduada input, .tpv-graduada select { height: 44px; border: 1px solid #D0D5DD; border-radius: 10px; padding: 0 12px; font: inherit; font-size: 15px; box-sizing: border-box; width: 100%; background: #fff; }
.tpv-grad-row { display: flex; gap: 10px; margin-bottom: 10px; } .tpv-grad-row label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: #667085; position: relative; min-width: 150px; } .tpv-grad-row label.grow { flex: 1; }
.tpv-grad-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .tpv-grad-foot .tpv-hint { padding: 0; }
.tpv-thead { display: grid; padding: 10px 22px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: #98A2B3; border-bottom: 1px solid #F2F4F7; }
.tpv-thead-abono { grid-template-columns: 52px 1fr 170px 120px 120px; } .tpv-thead-cierre { grid-template-columns: 110px 160px 1fr 140px 140px 120px; }
.tpv-lineas { display: flex; flex-direction: column; overflow: auto; flex: 1; }
.tpv-linea { border-bottom: 1px solid #F2F4F7; } .tpv-linea-warn { background: #FFFAEB; } .tpv-linea-grad { background: #F8FAFF; border-left: 4px solid #2563EB; } .tpv-linea-sel { background: #EFF6FF; } .tpv-linea-off { opacity: 0.55; } .tpv-linea-abonoRow { background: #FEF3F2; }
.tpv-lrow { display: grid; align-items: center; padding: 14px 22px; font-size: 16px; } /* columnas: ver la regla .tpv-lrow, .tpv-thead de arriba (min 220 px para la descripción) */
.tpv-lsub { padding: 6px 22px 6px 42px; font-size: 15px; } .tpv-linea-grad .tpv-lrow:first-child { padding-bottom: 8px; } .tpv-linea-grad .tpv-lsub:last-child { padding-bottom: 14px; }
.tpv-lrow-abono { grid-template-columns: 52px 1fr 170px 120px 120px; } .tpv-lrow-cierre { grid-template-columns: 110px 160px 1fr 140px 140px 120px; font-size: 15px; padding: 13px 22px; }
.tpv-ldesc { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: normal; word-break: normal; } .tpv-lt { font-weight: 600; } .tpv-lt2 { font-weight: 600; font-size: 15px; } .tpv-ls { font-size: 13px; color: #667085; } .tpv-limp { font-weight: 700; }
.tpv-chips { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tpv-chip-warn { font-size: 12px; font-weight: 700; color: #B45309; background: #FEF0C7; border: 1px solid #FEDF89; border-radius: 999px; padding: 2px 9px; }
.tpv-chip-blue { font-size: 12px; font-weight: 700; color: #2563EB; background: #EFF6FF; border: 1px solid #B9CBF5; border-radius: 999px; padding: 2px 9px; }
.tpv-qty { display: flex; align-items: center; justify-content: center; gap: 6px; } .tpv-qty button { width: 36px; height: 36px; border: 1px solid #D0D5DD; border-radius: 8px; background: #FFFFFF; font-size: 18px; color: #344054; cursor: pointer; } .tpv-qty span { min-width: 32px; text-align: center; font-weight: 700; }
.tpv-x { width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; font-size: 18px; color: #98A2B3; cursor: pointer; justify-self: end; } .tpv-x:hover { background: #FEF3F2; color: #B42318; }
.tpv-vacio { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #667085; padding: 60px 20px; } .tpv-vacio-t { font-size: 22px; font-weight: 600; color: #475467; } .tpv-vacio-s { font-size: 15px; }
.tpv-side { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.tpv-totales { padding: 18px 22px; display: flex; flex-direction: column; gap: 9px; }
.tpv-row { display: flex; justify-content: space-between; align-items: center; font-size: 15px; color: #475467; } .tpv-row.muted { font-size: 14px; color: #98A2B3; }
.tpv-desc-ctl { display: flex; gap: 8px; align-items: center; } .tpv-desc-ctl input { width: 78px; height: 36px; border: 1px solid #D0D5DD; border-radius: 8px; text-align: right; padding: 0 10px; font: inherit; font-weight: 700; box-sizing: border-box; } .tpv-desc-importe { font-weight: 600; color: #B42318; min-width: 70px; text-align: right; }
.tpv-seg { display: inline-flex; border: 1px solid #D0D5DD; border-radius: 8px; overflow: hidden; } .tpv-seg button { padding: 5px 12px; font-size: 13px; font-weight: 600; color: #98A2B3; background: #fff; border: 0; cursor: pointer; } .tpv-seg button.active { background: #EFF6FF; color: #2563EB; }
.tpv-total-row { border-top: 1px solid #E4E7EC; padding-top: 10px; display: flex; justify-content: space-between; align-items: baseline; } .tpv-total-label { font-size: 16px; font-weight: 700; color: #667085; letter-spacing: 0.04em; }
.tpv-total { font-size: 56px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; } .tpv-total-vacio { color: #98A2B3; } .tpv-total-neg { color: #B42318; } .tpv-neg { color: #B42318; font-weight: 700; }
.tpv-cliente { padding: 14px 22px; display: flex; justify-content: space-between; align-items: center; gap: 10px; } .tpv-cliente .tpv-hint { padding: 0; min-height: 0; }
.tpv-cliente-form { padding: 12px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .tpv-cliente-form input { height: 44px; border: 1px solid #D0D5DD; border-radius: 10px; padding: 0 12px; font: inherit; box-sizing: border-box; }
.tpv-pago { padding: 16px 22px; display: flex; flex-direction: column; gap: 12px; }
.tpv-metodos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .tpv-metodo { height: 56px; background: #F9FAFB; border: 1px solid #D0D5DD; border-radius: 10px; font-size: 17px; font-weight: 600; color: #667085; cursor: pointer; font-family: inherit; } .tpv-metodo.active { background: #EFF6FF; border: 2px solid #2563EB; color: #2563EB; font-weight: 700; } .tpv-metodo.active::after { content: " ✓"; }
.tpv-efectivo { display: flex; align-items: center; gap: 14px; } .tpv-efectivo label { display: flex; flex-direction: column; gap: 4px; flex: 1; font-size: 13px; font-weight: 600; color: #667085; } .tpv-efectivo input { height: 52px; border: 1px solid #D0D5DD; border-radius: 10px; text-align: right; padding: 0 14px; font: inherit; font-size: 24px; font-weight: 700; box-sizing: border-box; width: 100%; }
.tpv-cambio-box { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; flex: 1; } .tpv-cambio-label { font-size: 13px; font-weight: 700; color: #067647; letter-spacing: 0.04em; } .tpv-cambio { font-size: 48px; font-weight: 800; color: #16A34A; line-height: 1; } .tpv-cambio-neg { color: #B42318; font-size: 24px; }
.tpv-cobrar-wrap { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.tpv-cobrar { height: 88px; background: #2563EB; border: 0; border-radius: 14px; color: #FFFFFF; font-size: 30px; font-weight: 800; letter-spacing: 0.02em; display: flex; align-items: center; justify-content: center; gap: 16px; cursor: pointer; box-shadow: 0 2px 6px rgba(37,99,235,0.35); font-family: inherit; }
.tpv-cobrar:hover { background: #1D4ED8; } .tpv-cobrar:disabled { background: #B8C4DB; cursor: not-allowed; box-shadow: none; } .tpv-cobrar kbd { background: rgba(255,255,255,0.22); border: 0; color: #fff; font-size: 13px; }
.tpv-out { text-align: center; font-size: 13px; color: #B42318; min-height: 18px; } .tpv-ok-inline { color: #067647; font-weight: 700; }
.tpv-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; } .tpv-check input { width: 24px; height: 24px; accent-color: #2563EB; margin: 0; } .tpv-check span { display: flex; flex-direction: column; } .tpv-check small { font-size: 13px; color: #667085; }
.tpv-checkbox { width: 24px; height: 24px; border: 2px solid #D0D5DD; border-radius: 6px; background: #fff; justify-self: center; cursor: pointer; color: #fff; font-weight: 800; font-size: 14px; padding: 0; } .tpv-checkbox.on { background: #2563EB; border-color: #2563EB; } .tpv-checkbox:disabled { cursor: not-allowed; }
.tpv-buscar-res { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; background: #fff; border: 1px solid #D0D5DD; border-radius: 12px; box-shadow: 0 12px 30px rgba(16,24,40,0.14); max-height: 360px; overflow: auto; }
.tpv-grad-row label .tpv-buscar-res { top: calc(100% + 4px); }
.tpv .tpv-buscar-item { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 10px 14px; border: 0; border-bottom: 1px solid #F2F4F7; background: #fff; cursor: pointer; font: inherit; } .tpv .tpv-buscar-item:hover { background: #EFF6FF; }
/* modal de venta cobrada */
.tpv-modal { position: fixed; inset: 0; background: rgba(16,24,40,0.32); display: flex; align-items: center; justify-content: center; z-index: 80; padding: 20px; }
.tpv-modal-card { width: 680px; max-width: 100%; background: #FFFFFF; border-radius: 16px; box-shadow: 0 24px 60px rgba(16,24,40,0.3); padding: 36px 44px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.tpv-ok { width: 72px; height: 72px; border-radius: 999px; background: #ECFDF3; border: 2px solid #16A34A; display: flex; align-items: center; justify-content: center; font-size: 34px; color: #16A34A; font-weight: 800; }
.tpv-modal-t { font-size: 28px; font-weight: 800; color: #067647; } .tpv-modal-s { font-size: 16px; color: #475467; } .tpv-modal-s strong { font-size: 18px; color: #101828; }
.tpv-modal-cifras { display: flex; gap: 36px; align-items: baseline; background: #F9FAFB; border: 1px solid #E4E7EC; border-radius: 12px; padding: 16px 28px; } .tpv-modal-cifras span { display: flex; flex-direction: column; gap: 2px; } .tpv-modal-cifras small { font-size: 12px; font-weight: 700; color: #667085; letter-spacing: 0.05em; } .tpv-modal-cifras b { font-size: 36px; font-weight: 800; line-height: 1; } .tpv-modal-cifras b.muted { font-size: 24px; font-weight: 700; color: #475467; } .tpv-modal-cifras .g { color: #16A34A; } .tpv-modal-cifras small.g { color: #067647; }
.tpv-modal-pedido { width: 100%; background: #EFF6FF; border: 1px solid #B9CBF5; border-radius: 12px; padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; text-align: left; box-sizing: border-box; } .tpv-modal-pedido-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 15px; font-weight: 800; color: #2563EB; } .tpv-modal-pedido-b { display: flex; gap: 10px; flex-wrap: wrap; }
.tpv-modal-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; margin-top: 4px; } .tpv-aviso { font-size: 13px; color: #B45309; background: #FFFAEB; border: 1px solid #FEDF89; border-radius: 8px; padding: 8px 12px; width: 100%; box-sizing: border-box; text-align: left; }
/* cierre */
.tpv-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; padding: 20px 24px 0; } @media (max-width: 1180px) { .tpv-kpis { grid-template-columns: repeat(2, 1fr); } }
.tpv-kpi { background: #FFFFFF; border: 1px solid #E4E7EC; border-radius: 12px; padding: 18px 22px; display: flex; flex-direction: column; gap: 6px; } .tpv-kpi span { font-size: 13px; font-weight: 600; color: #667085; } .tpv-kpi b { font-size: 36px; font-weight: 800; line-height: 1; } .tpv-kpi small { font-size: 13px; color: #667085; }
#ef-panel-cierre .tpv-tique { margin: 0 24px 24px; }
.tpv-abonar { position: absolute; inset: 0; background: #F4F5F7; z-index: 5; overflow: auto; }
#ef-panel-tpv { position: relative; min-height: 100%; }

/* ═══════════ PACIENTES — diseño Claude Design (artboards 1c + 2b) ═══════════ */
.ef-panel.pac { max-width: none; margin: 0; color: #101828; font-size: 15px; padding: 24px 32px; position: relative; min-height: calc(100vh - 1px); box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; }
.ef-main:has(> .ef-panel.pac:not(.hidden)) { padding: 0; background: #F4F5F7; }
.pac-title { font-size: 26px; font-weight: 800; } .pac-sub { font-size: 14px; color: #667085; margin-top: 4px; }
.pac-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pac-searchbox { display: flex; align-items: center; gap: 10px; height: 48px; background: #FFFFFF; border: 2px solid #2563EB; border-radius: 12px; padding: 0 16px; box-shadow: 0 0 0 4px rgba(37,99,235,0.10); box-sizing: border-box; width: 520px; max-width: 100%; }
.pac-searchbox input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; min-width: 0; } .pac-lupa { color: #98A2B3; font-size: 16px; }
.pac-chip { height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid #D0D5DD; background: #FFFFFF; font: inherit; font-size: 13px; font-weight: 600; color: #475467; cursor: pointer; }
.pac-chip[data-on="1"] { background: #EFF6FF; border-color: #2563EB; color: #2563EB; } .pac-chip[data-on="1"]::after { content: " ✕"; }
.pac-tools .tpv-btn-primary { margin-left: auto; }
.pac-card { background: #FFFFFF; border: 1px solid #E4E7EC; border-radius: 12px; display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.pac-thead, .pac-row { display: grid; grid-template-columns: minmax(200px, 1fr) 150px 150px 220px 150px 110px; gap: 10px; align-items: center; padding: 12px 22px; }
.pac-thead { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: #98A2B3; border-bottom: 1px solid #E4E7EC; }
.pac-rows { overflow: auto; } .pac-row { border-bottom: 1px solid #F2F4F7; cursor: pointer; font-size: 15px; } .pac-row:hover { background: #F9FAFB; }
.pac-row.sel { background: #EFF6FF; border-left: 4px solid #2563EB; padding-left: 18px; } .pac-row .n { font-weight: 600; } .pac-row.sel .n { font-weight: 800; }
.pac-row .rev-old { color: #B45309; font-weight: 600; } .pac-row .rev-vold { color: #B42318; font-weight: 600; } .pac-row .muted { color: #98A2B3; }
.pac-row .enc { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } .pac-row .enc::before { content: "⬤"; font-size: 9px; }
.pac-row .enc-taller::before { color: #2563EB; } .pac-row .enc-listo::before { color: #16A34A; } .pac-row .enc-pend::before { color: #B45309; }
.pac-row a { color: #2563EB; font-weight: 600; font-size: 14px; text-align: right; }
.pac-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 22px; border-top: 1px solid #F2F4F7; font-size: 13px; color: #667085; }
@media (max-width: 1400px) { .pac-thead, .pac-row { grid-template-columns: minmax(180px, 1fr) 130px 130px 180px 130px 90px; padding-left: 16px; padding-right: 16px; } }
/* panel lateral */
.pac-side { position: fixed; top: 0; right: 0; bottom: 0; width: min(720px, 92vw); background: #FFFFFF; border-left: 1px solid #E4E7EC; box-shadow: -16px 0 40px rgba(16,24,40,0.14); display: flex; flex-direction: column; z-index: 60; }
.pac-side-head { display: flex; flex-direction: column; border-bottom: 1px solid #E4E7EC; }
.pac-side-top { display: flex; align-items: center; gap: 14px; padding: 16px 24px; }
.pac-avatar { width: 48px; height: 48px; border-radius: 999px; background: #EFF6FF; border: 1px solid #B9CBF5; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; color: #2563EB; flex: none; }
.pac-side-name { font-size: 18px; font-weight: 800; } .pac-side-meta { font-size: 13px; color: #475467; }
.pac-side-x { margin-left: auto; width: 40px; height: 40px; border: 0; background: transparent; font-size: 18px; color: #98A2B3; cursor: pointer; border-radius: 8px; } .pac-side-x:hover { background: #F2F4F7; color: #101828; }
.pac-side-chips { display: flex; gap: 8px; padding: 0 24px 12px; flex-wrap: wrap; align-items: center; }
.pac-chip-ok { font-size: 12px; font-weight: 700; color: #067647; background: #ECFDF3; border: 1px solid #A6F4C5; border-radius: 999px; padding: 4px 10px; }
.pac-chip-no { font-size: 12px; font-weight: 700; color: #B42318; background: #FEF3F2; border: 1px solid #FECDCA; border-radius: 999px; padding: 4px 10px; }
.pac-side-body { padding: 14px 24px 40px; overflow: auto; flex: 1; }
.pac-side-body .pac-tabs { display: flex; gap: 2px; border-bottom: 1px solid #E4E7EC; margin: 0 0 14px; padding: 0; }
.pac-side-body .pac-tabs .fact-tab { background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: 12px 14px; font-size: 14px; font-weight: 600; color: #667085; cursor: pointer; }
.pac-side-body .pac-tabs .fact-tab.active { color: #2563EB; border-bottom-color: #2563EB; font-weight: 700; }
.pac-side-body h3 { font-size: 15px; font-weight: 700; margin: 0 0 8px; }
.pac-side-body .fact-form-grid input, .pac-side-body .fact-form-grid select { height: 40px; border: 1px solid #D0D5DD; border-radius: 9px; padding: 0 10px; font: inherit; box-sizing: border-box; width: 100%; }
.pac-side-body .btn-primary { background: #2563EB; border-color: #2563EB; border-radius: 9px; height: 40px; font-weight: 700; }
/* tarjeta de revisión (2b) */
.rev-card { border: 1px solid #E4E7EC; border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.rev-card-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; background: #F9FAFB; border-bottom: 1px solid #E4E7EC; font-size: 14px; font-weight: 700; } .rev-card-h a { font-size: 13px; font-weight: 600; color: #2563EB; margin-left: 10px; }
.rev-grid { display: grid; grid-template-columns: 40px repeat(8, 1fr); font-size: 13px; text-align: center; }
.rev-grid .h { padding: 6px 2px; color: #98A2B3; font-weight: 700; font-size: 10.5px; } .rev-grid .e { padding: 8px 2px; font-weight: 800; background: #F9FAFB; border-top: 1px solid #F2F4F7; } .rev-grid .v { padding: 8px 2px; border-top: 1px solid #F2F4F7; font-weight: 700; } .rev-grid .v.muted { color: #98A2B3; font-weight: 500; }
.rev-card-f { display: flex; justify-content: space-between; gap: 10px; padding: 8px 14px; border-top: 1px solid #F2F4F7; font-size: 12.5px; color: #667085; } .rev-card-f .ok { color: #067647; font-weight: 600; } .rev-card-f .old { color: #B45309; font-weight: 600; }
.rev-card-s { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; } .rev-card-s .t { font-size: 14px; font-weight: 600; } .rev-card-s .d { font-size: 12.5px; color: #667085; }

/* Fila de cabecera de la gafa graduada: la descripción ocupa las 4 primeras columnas
   (antes había 3 spans vacíos y el texto se partía letra a letra en una columna estrecha). */
.tpv-linea-grad > .tpv-lrow:first-child > .tpv-ldesc { grid-column: 1 / 5; }
.tpv-linea-grad > .tpv-lrow:first-child > .tpv-grad-imp { grid-column: 5; }

/* Subfilas de la gafa graduada (montura / cristales): la descripción nunca baja de 200 px;
   si la fila no cabe, la numérica se estrecha antes que partir el texto letra a letra. */
.tpv-linea-grad .tpv-lsub { grid-template-columns: minmax(200px, 1fr) 60px 96px 56px 100px 36px; }
.tpv-linea-grad .tpv-lsub .tpv-ldesc { min-width: 200px; }
@media (max-width: 1500px) { .tpv-linea-grad .tpv-lsub { grid-template-columns: minmax(180px, 1fr) 48px 88px 48px 92px 32px; padding-left: 28px; } }

/* Línea libre del tique: descuento % por línea y "necesita pedido" (Rafa 2026-08-22) */
.tpv-lctl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; font-size: 12.5px; color: #667085; }
.tpv-lctl input[type=number], .tpv-lctl select { height: 30px; border: 1px solid #D0D5DD; border-radius: 8px; padding: 0 8px; font: inherit; font-size: 12.5px; box-sizing: border-box; background: #fff; }
.tpv-lctl input[type=number] { width: 64px; text-align: right; }
.tpv-lctl label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.tpv-lctl input[type=checkbox] { accent-color: #2563EB; width: 16px; height: 16px; margin: 0; }
.tpv-lctl .tpv-chip-blue { cursor: default; }
.tpv-ldto { color: #B42318; font-weight: 600; }

/* precio editable en la línea; a 0 € se resalta en ámbar hasta que se ponga */
.tpv-lprecio { width: 96px; height: 34px; border: 1px solid #D0D5DD; border-radius: 8px; text-align: right; padding: 0 8px; font: inherit; font-size: 15px; box-sizing: border-box; }
.tpv-lprecio-falta { border-color: #FEDF89; background: #FFFAEB; box-shadow: 0 0 0 3px rgba(245,158,11,0.18); }

.tpv-res-cab { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: #98A2B3; padding: 8px 14px 4px; background: #F9FAFB; border-bottom: 1px solid #F2F4F7; }

/* ── Cuentas a cuenta (Rafa 2026-08-22) ─────────────────────────────────── */
.tpv-acuenta { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #E4E7EC; display: flex; flex-direction: column; gap: 10px; }
.tpv-amber { color: #B45309 !important; } .tpv-cambio-amber { color: #B45309; font-size: 32px; }
#btn-tpv-acuenta-sug { font-size: 13px; font-weight: 700; margin-top: 4px; }
.tpv-links { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
.tpv-check-inline { align-items: center; white-space: nowrap; } .tpv-check-inline input { width: 20px; height: 20px; }
.tpv-lrow-cuenta, .tpv-thead-cuenta { grid-template-columns: 88px minmax(180px, 1fr) 92px 100px 110px 170px; }
.tpv-cuenta-detalle { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.tpv-cuenta-lineas { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-top: 1px solid #F2F4F7; border-bottom: 1px solid #F2F4F7; }
.tpv-chip-ok { background: #ECFDF3; color: #067647; border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 700; }
.tpv-modal-cifras small.a, .tpv-modal-cifras b.a { color: #B45309; }
.tpv-aviso-info { background: #EFF6FF; color: #1D4ED8; }
.tpv-cobrar small { display: block; font-size: 13px; font-weight: 600; opacity: 0.85; }
/* Botón COBRAR con dos renglones (a cuenta): el detalle va DEBAJO, no al lado; y el buscador de paciente a todo el ancho. */
.tpv-cobrar { flex-wrap: wrap; row-gap: 2px; } .tpv-cobrar small { flex-basis: 100%; }
#tpv-paciente-q { width: 100%; }
/* Cifras del modal con 4 columnas (a cuenta): no partir los importes */
.tpv-modal-cifras { flex-wrap: wrap; } .tpv-modal-cifras span { min-width: 120px; } .tpv-modal-cifras b { white-space: nowrap; font-size: clamp(20px, 1.6vw, 28px); }

/* ── Firma RGPD a PANTALLA COMPLETA (tablet enganchada al ordenador, Rafa 2026-08-22) ── */
.rgpd-overlay { z-index: 95; background: #fff; }
.rgpd-full { position: fixed; inset: 0; display: flex; flex-direction: column; background: #fff; touch-action: none; user-select: none; -webkit-user-select: none; overscroll-behavior: none; }
.rgpd-full-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid #E4E7EC; font-size: 18px; }
.rgpd-full-titulo .muted { font-weight: 500; }
.rgpd-full-acciones { display: flex; gap: 10px; }
.rgpd-full-acciones button, .rgpd-full-pie button { min-height: 56px; padding: 0 22px; font: inherit; font-size: 18px; font-weight: 600; border-radius: 12px; border: 1px solid #D0D5DD; background: #fff; color: #101828; cursor: pointer; }
.rgpd-full-texto { margin: 10px 20px 0; max-height: 26vh; overflow: auto; white-space: pre-wrap; font-size: 13px; line-height: 1.45; color: #344054; border: 1px solid #E4E7EC; border-radius: 10px; padding: 10px 14px; background: #F9FAFB; touch-action: pan-y; user-select: text; -webkit-user-select: text; }
.rgpd-full-lienzo { flex: 1; margin: 10px 20px; position: relative; border: 3px dashed #98A2B3; border-radius: 16px; background: #fff; min-height: 180px; overflow: hidden; }
.rgpd-full-lienzo canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; display: block; }
.rgpd-full-guia { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; color: #98A2B3; font-size: 17px; pointer-events: none; }
.rgpd-full-guia::before { content: ""; display: block; margin: 0 8% 10px; border-top: 2px solid #D0D5DD; }
.rgpd-full-pie { display: flex; align-items: center; gap: 14px; padding: 12px 20px 18px; border-top: 1px solid #E4E7EC; }
.rgpd-full-pie .rgpd-out { color: #B42318; font-weight: 600; }
.rgpd-full-pie .rgpd-aceptar { margin-left: auto; background: #2563EB; color: #fff; border-color: #2563EB; min-width: 300px; min-height: 64px; font-size: 22px; font-weight: 800; }
.rgpd-full-pie .rgpd-aceptar:disabled { opacity: 0.45; cursor: default; }
@media (max-height: 720px) { .rgpd-full-texto { max-height: 18vh; font-size: 12px; } .rgpd-full-acciones button, .rgpd-full-pie button { min-height: 48px; font-size: 16px; } .rgpd-full-pie .rgpd-aceptar { min-height: 56px; font-size: 20px; } }

/* ── PEDIDOS DE TALLER (diseño Claude Design 2026-08-22) ─────────────────── */
#ef-panel-encargos { padding: 20px 24px 28px; }
.ped-h2 { margin: 0 0 4px; font-size: 24px; }
.ped-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.ped-kpis { display: flex; gap: 12px; flex-wrap: wrap; }
.ped-kpi { display: flex; align-items: baseline; gap: 8px; background: #fff; border: 1px solid #E4E7EC; border-radius: 12px; padding: 10px 16px; font-size: 13px; color: #667085; } .ped-kpi b { font-size: 22px; color: #101828; } .ped-kpi-ambar b { color: #B45309; } .ped-kpi-rojo b { color: #B42318; }
.ped-tools { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.ped-buscar { flex: 1; min-width: 260px; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #D0D5DD; border-radius: 10px; padding: 0 12px; height: 44px; box-sizing: border-box; } .ped-buscar input { border: 0; outline: 0; flex: 1; font: inherit; font-size: 15px; background: transparent; } .ped-buscar span { color: #98A2B3; font-size: 18px; }
.ped-vista { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #D0D5DD; border-radius: 10px; padding: 4px 6px 4px 10px; font-size: 14px; } .ped-vista button { height: 34px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-weight: 600; color: #475467; cursor: pointer; } .ped-vista button.active { background: #2563EB; color: #fff; }
.ped-nuevo { height: 44px; font-size: 15px; }
.ped-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .ped-chipf { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid #D0D5DD; background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: #475467; cursor: pointer; } .ped-chipf.active { background: #101828; color: #fff; border-color: #101828; }
.ped-card { background: #fff; border: 1px solid #E4E7EC; border-radius: 12px; } .ped-lista { overflow-x: auto; }
.ped-thead, .ped-row { display: grid; grid-template-columns: 130px minmax(170px, 1.2fr) 90px minmax(150px, 1fr) minmax(160px, 1fr) 200px minmax(190px, 1.1fr) 290px; gap: 12px; align-items: center; padding: 12px 18px; min-width: 1280px; }
.ped-thead { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: #98A2B3; border-bottom: 1px solid #F2F4F7; } .ped-thead .r { text-align: right; }
.ped-row { border-bottom: 1px solid #F2F4F7; font-size: 14.5px; cursor: pointer; } .ped-row:hover { background: #F9FAFB; } .ped-row-late { background: #FEF3F2; } .ped-row:last-child { border-bottom: 0; }
.ped-num { font-weight: 800; font-size: 15px; } .ped-num-xl { font-size: 22px; } .ped-sub { display: block; font-size: 12.5px; color: #667085; margin-top: 2px; font-weight: 400; } .ped-amber { color: #B45309 !important; font-weight: 700; } .ped-verde { color: #067647 !important; }
.ped-mont { display: flex; align-items: center; gap: 8px; } .ped-mont img { width: 40px; height: 28px; object-fit: cover; border-radius: 6px; border: 1px solid #E4E7EC; } .ped-nofoto { font-size: 12px; color: #98A2B3; border: 1px dashed #D0D5DD; border-radius: 6px; padding: 3px 6px; white-space: nowrap; }
.ped-estado { display: flex; gap: 6px; flex-wrap: wrap; }
.ped-chip { display: inline-block; border-radius: 999px; padding: 3px 10px; font-size: 12.5px; font-weight: 700; border: 1px solid transparent; white-space: nowrap; }
.ped-chip-gris { background: #F2F4F7; color: #475467; } .ped-chip-ambar { background: #FEF0C7; color: #B45309; border-color: #FEDF89; } .ped-chip-azul { background: #EFF6FF; color: #2563EB; border-color: #B9CBF5; } .ped-chip-verde { background: #ECFDF3; color: #067647; } .ped-chip-rojo { background: #FEF3F2; color: #B42318; border-color: #FECDCA; }
.ped-acc { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.ped-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid #D0D5DD; background: #fff; color: #344054; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; box-sizing: border-box; } .ped-btn:hover { background: #F9FAFB; text-decoration: none; } .ped-btn:disabled { opacity: 0.5; cursor: default; }
.ped-btn-azul { background: #2563EB; border-color: #2563EB; color: #fff; } .ped-btn-azul:hover { background: #1D4ED8; } .ped-btn-rojo { color: #B42318; border-color: #FECDCA; }
.ped-link { background: none; border: 0; color: #2563EB; font: inherit; font-weight: 600; cursor: pointer; padding: 0; }
.ped-vacio { padding: 40px; text-align: center; color: #667085; }
.ped-tablero { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 14px; align-items: start; }
.ped-col { background: #EEF0F3; border-radius: 12px; padding: 10px; min-height: 320px; } .ped-col.over { outline: 2px dashed #2563EB; outline-offset: -4px; }
.ped-col-h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; padding: 4px 6px 10px; } .ped-pill { background: #fff; border-radius: 999px; padding: 1px 8px; font-size: 12px; color: #475467; }
.ped-col-body { display: flex; flex-direction: column; gap: 10px; }
.ped-tarjeta { background: #fff; border: 1px solid #E4E7EC; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; cursor: grab; font-size: 14px; } .ped-tarjeta.late { border-color: #F04438; } .ped-tarjeta.ambar { border-color: #FEDF89; } .ped-tarjeta.dragging { opacity: 0.5; }
.ped-tarjeta-h { display: flex; justify-content: space-between; align-items: baseline; } .ped-tarjeta .ped-sub { margin-top: 0; }
.ped-card-aviso { font-size: 12.5px; font-weight: 700; margin-top: 4px; } .ped-card-aviso.rojo { color: #B42318; } .ped-card-aviso.ambar { color: #B45309; } .ped-card-aviso.azul { color: #2563EB; } .ped-card-aviso.verde { color: #067647; }
.ped-drop { border: 2px dashed #B9CBF5; border-radius: 10px; padding: 10px; text-align: center; color: #98A2B3; font-size: 12.5px; }
.ped-det-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; } .ped-det-pac { flex: 1; min-width: 280px; } .ped-det-pac .ped-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ped-inline { height: 30px; border: 1px solid #D0D5DD; border-radius: 8px; padding: 0 8px; font: inherit; font-size: 13px; width: 150px; box-sizing: border-box; background: #fff; } .ped-inline-xs { width: 60px; }
.ped-nuevo-cab { flex-basis: 100%; display: grid; grid-template-columns: minmax(260px, 2fr) 150px 200px 100px 170px; gap: 12px; } .ped-nuevo-cab label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: #475467; } .ped-nuevo-cab input { height: 40px; border: 1px solid #D0D5DD; border-radius: 10px; padding: 0 12px; font: inherit; font-size: 14px; box-sizing: border-box; width: 100%; }
.ped-stepper { display: flex; gap: 6px; background: #fff; border: 1px solid #E4E7EC; border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; overflow-x: auto; }
.ped-step { flex: 1; min-width: 100px; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 13px; color: #98A2B3; } .ped-step-dot { width: 28px; height: 28px; border-radius: 50%; background: #F2F4F7; color: #98A2B3; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; box-sizing: border-box; } .ped-step.hecho .ped-step-dot { background: #16A34A; color: #fff; } .ped-step.hecho { color: #067647; } .ped-step.actual .ped-step-dot { background: #FEF0C7; color: #B45309; border: 2px solid #F59E0B; } .ped-step.actual { color: #B45309; font-weight: 700; } .ped-step-t { font-weight: 600; } .ped-step-f { font-size: 11px; }
.ped-det-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); gap: 16px; align-items: start; } .ped-det-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ped-sec { padding: 16px 18px; } .ped-sec-h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .ped-sec-h h3 { margin: 0; font-size: 16px; } .ped-sec-h .ped-btn { margin-left: auto; }
.ped-grad-wrap { overflow-x: auto; } .ped-grad { width: 100%; border-collapse: collapse; text-align: center; } .ped-grad th { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: #98A2B3; padding: 6px 2px; } .ped-grad td { padding: 4px 2px; } .ped-grad .ped-ojo { font-size: 15px; color: #101828; text-align: left; padding-left: 6px; }
.ped-gin { width: 100%; min-width: 58px; height: 40px; border: 1px solid #D0D5DD; border-radius: 8px; text-align: center; font: inherit; font-size: 17px; font-weight: 700; box-sizing: border-box; } .ped-grad input[type=checkbox] { width: 20px; height: 20px; accent-color: #2563EB; }
.ped-aviso { background: #FEF0C7; color: #B45309; border: 1px solid #FEDF89; border-radius: 10px; padding: 8px 12px; font-size: 13px; margin: 10px 0 0; }
.ped-seg { display: flex; gap: 4px; background: #F2F4F7; border-radius: 10px; padding: 4px; margin-left: auto; } .ped-seg button { height: 34px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-weight: 600; color: #475467; cursor: pointer; } .ped-seg button.active { background: #fff; color: #101828; box-shadow: 0 1px 2px rgba(16,24,40,0.1); }
.ped-form2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; } .ped-form3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 8px; }
.ped-sec input:not([type=checkbox]):not(.ped-gin):not(.ped-inline), .ped-sec textarea { width: 100%; min-height: 40px; border: 1px solid #D0D5DD; border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 14px; box-sizing: border-box; } .ped-sec select { min-height: 32px; border: 1px solid #D0D5DD; border-radius: 8px; padding: 4px 8px; font: inherit; font-size: 13px; background: #fff; }
.ped-montura { display: flex; gap: 14px; } .ped-foto { width: 180px; height: 130px; flex: none; border: 2px dashed #D0D5DD; border-radius: 10px; display: flex; align-items: center; justify-content: center; text-align: center; color: #98A2B3; font-size: 13px; overflow: hidden; line-height: 1.4; } .ped-foto.over { border-color: #2563EB; } .ped-foto img { width: 100%; height: 100%; object-fit: cover; } .ped-montura-f { flex: 1; min-width: 0; }
.ped-check { display: flex; align-items: center; gap: 8px; font-size: 14px; } .ped-check input { width: 20px; height: 20px; accent-color: #2563EB; }
.ped-btns { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ped-imp-rows { display: flex; flex-direction: column; gap: 8px; } .ped-row2 { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14.5px; } .ped-row2 input { width: 120px !important; min-height: 36px !important; text-align: right; } .ped-row2-total { border-top: 1px solid #E4E7EC; padding-top: 8px; font-size: 16px; } .ped-row2-resto { border-top: 1px dashed #E4E7EC; padding-top: 8px; font-size: 16px; } .ped-row2-senal { display: flex; align-items: center; gap: 4px; color: #B42318; }
.ped-hist { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; } .ped-hist-row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; } .ped-hist-row .ped-sub { margin-top: 0; }
.ped-det-bar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #E4E7EC; border-radius: 12px; padding: 12px 16px; margin-top: 16px; flex-wrap: wrap; box-shadow: 0 -4px 16px rgba(16,24,40,0.06); z-index: 2; } .ped-out { flex: 1; color: #B42318; font-weight: 600; } .ped-det-bar select { margin-left: auto; width: auto; }
.oa-check { display: flex !important; align-items: center; gap: 8px; flex-direction: row !important; } .oa-check input { width: 20px !important; height: 20px; accent-color: #2563EB; }
@media (max-width: 1500px) { .ped-thead, .ped-row { grid-template-columns: 110px minmax(150px, 1.2fr) 80px minmax(130px, 1fr) minmax(140px, 1fr) 180px minmax(160px, 1.1fr) 250px; gap: 8px; padding: 10px 12px; min-width: 1180px; } .ped-tablero { grid-template-columns: repeat(5, minmax(200px, 1fr)); } .ped-det-grid { grid-template-columns: 1fr; } .ped-nuevo-cab { grid-template-columns: 1fr 1fr 1fr; } }
/* Pedidos de taller a todo el ancho (como el TPV): la tabla de 8 columnas no cabe en el ancho de lectura */
#ef-panel-encargos { max-width: none; width: auto; margin: 0; }
/* TOTAL editable del TPV: mismo tamaño que la cifra, subrayado discontinuo al pasar el ratón */
.tpv-total-edit { display: inline-flex; align-items: baseline; gap: 6px; font-size: clamp(40px, 3.6vw, 64px); font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: #101828; }
.tpv-total-input { width: 4.6em; max-width: 100%; text-align: right; border: 0; border-bottom: 3px dashed transparent; background: transparent; padding: 0 4px; margin: 0; font: inherit; color: inherit; outline: none; cursor: text; box-sizing: content-box; }
.tpv-total-input:hover { border-bottom-color: #B9CBF5; } .tpv-total-input:focus { border-bottom-color: #2563EB; background: #EFF6FF; border-radius: 10px; }
.tpv-total-eur { font-size: 0.55em; font-weight: 800; }
.tpv-total-ayuda { display: block; font-size: 11px; font-weight: 500; color: #98A2B3; letter-spacing: 0; text-transform: none; margin-top: 2px; }
/* Certificación de la graduación por el óptico (receta) */
.rev-cert { display: inline-block; border-radius: 999px; padding: 2px 8px; font-size: 11.5px; font-weight: 700; margin-right: 8px; }
.rev-cert.ok { background: #ECFDF3; color: #067647; } .rev-cert.no { background: #FEF0C7; color: #B45309; border: 1px solid #FEDF89; }
.rev-certificar { margin-right: 8px; font-weight: 700; }
/* Origen del cliente (Rafa 2026-08-23): chip por negocio en fichas, TPV y pedidos */
.origen-chip { display: inline-block; border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 700; border: 1px solid transparent; vertical-align: middle; white-space: nowrap; }
.origen-mini { font-size: 10.5px; padding: 1px 7px; }
.origen-entregafas { background: #EFF6FF; color: #1D4ED8; border-color: #B9CBF5; }
.origen-cristalesgafas { background: #ECFDF3; color: #067647; border-color: #ABEFC6; }
.origen-cristalesrepuesto { background: #F4F3FF; color: #5925DC; border-color: #D9D6FE; }
.origen-sunglassrevivers { background: #FEF0C7; color: #B45309; border-color: #FEDF89; }
.oa-origenes { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 4px 0 10px; } .oa-origenes label { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
.oa-brevo-sel { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; } .oa-brevo-sel label { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 320px; font-size: 13px; font-weight: 600; color: #475467; } .oa-brevo-sel select { height: 40px; border: 1px solid #D0D5DD; border-radius: 10px; padding: 0 10px; font: inherit; font-size: 14px; background: #fff; }
/* Simplificada → completa en la venta cobrada */
.tpv-completa { text-align: left; margin: 10px 0 4px; border: 1px solid #E4E7EC; border-radius: 12px; padding: 8px 14px; } .tpv-completa summary { cursor: pointer; font-weight: 700; font-size: 14px; color: #2563EB; }
.tpv-completa-form { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr auto; gap: 8px; margin-top: 10px; } .tpv-completa-form input { height: 40px; border: 1px solid #D0D5DD; border-radius: 10px; padding: 0 10px; font: inherit; font-size: 14px; }
@media (max-width: 900px) { .tpv-completa-form { grid-template-columns: 1fr 1fr; } }

/* ── Recordatorios de revisión/lentillas (Ajustes) + Comunicaciones (Rafa 2026-08-23) ── */
.oa-recordatorios { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 12px; padding: 10px 12px; background: #F9FAFB; border: 1px solid #EAECF0; border-radius: 10px; font-size: 13.5px; line-height: 1.6; }
.oa-recordatorios label { display: block; } .oa-recordatorios input[type="checkbox"] { margin-right: 6px; vertical-align: -1px; }
.oa-num { width: 64px; padding: 3px 6px; border: 1px solid #D0D5DD; border-radius: 6px; font: inherit; font-size: 13.5px; text-align: center; margin: 0 3px; }
.com-row { display: grid; grid-template-columns: minmax(220px, 1.4fr) minmax(200px, 1.2fr) 140px 120px 110px 150px; gap: 12px; align-items: center; padding: 12px 18px; border-bottom: 1px solid #F2F4F7; cursor: pointer; }
.com-row:hover { background: #F9FAFB; } .com-row:last-child { border-bottom: 0; }
.com-row b { font-size: 14.5px; color: #101828; display: block; } .com-row .sub { font-size: 12.5px; color: #667085; }
.com-est { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.com-est.borrador { background: #F2F4F7; color: #475467; } .com-est.enviando { background: #FEF0C7; color: #B45309; } .com-est.enviada { background: #D1FADF; color: #067647; }
.com-editor { display: grid; grid-template-columns: minmax(420px, 1.4fr) minmax(320px, 1fr); gap: 18px; align-items: start; }
.com-editor .ped-card { padding: 18px 20px; }
.com-editor label { display: block; font-size: 13px; font-weight: 600; color: #475467; margin-bottom: 12px; }
.com-editor input[type="text"], .com-editor input[type="url"], .com-editor textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 5px; padding: 9px 11px; border: 1px solid #D0D5DD; border-radius: 9px; font: inherit; font-size: 15px; color: #101828; }
.com-editor textarea { min-height: 220px; resize: vertical; line-height: 1.5; }
.com-seg { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 14px; } .com-seg label { display: flex; gap: 8px; align-items: center; margin: 0; font-weight: 500; color: #101828; font-size: 14px; }
.com-aud { background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 10px; padding: 12px 14px; font-size: 14px; color: #1E40AF; margin-bottom: 14px; } .com-aud b { font-size: 22px; display: block; }
.com-aud .muestra { font-size: 12.5px; color: #3B82F6; margin-top: 4px; }
.com-acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.com-prueba { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; } .com-prueba input { flex: 1; min-width: 200px; padding: 8px 10px; border: 1px solid #D0D5DD; border-radius: 8px; font: inherit; }
.com-preview { border: 1px solid #E4E7EC; border-radius: 12px; overflow: hidden; background: #f4f6f9; } .com-preview iframe { width: 100%; height: 520px; border: 0; background: #f4f6f9; }
.com-fallos { margin-top: 10px; font-size: 12.5px; color: #B42318; } .com-fallos li { margin: 2px 0; }
.pac-lent { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #FEF0C7; color: #B45309; margin-left: 6px; white-space: nowrap; }
.pac-lent.rojo { background: #FEE4E2; color: #B42318; }
@media (max-width: 1100px) { .com-editor { grid-template-columns: 1fr; } }

[data-user-nombre]:hover, [data-user-nombre]:focus { border-color: #D0D5DD !important; background: #fff !important; outline: none; }

/* ═══ FACTURACIÓN — rediseño Claude Design 2026-08-24 (handoff "Pantallas de facturación") ═══
   Todo acotado a #fact-overlay: misma estructura e ids, piel nueva (tokens del handoff). */
#fact-overlay .detail-panel { background: #F8FAFC; }
#fact-overlay .detail-header { background: #fff; border-bottom: 1px solid #E4E7EC; padding: 18px 32px; }
#fact-overlay .detail-header strong { font-size: 22px; font-weight: 700; color: #101828; }
#fact-overlay .detail-header .muted { font-size: 13px; color: #667085; }
#fact-overlay .btn-primary { background: #2563EB; border-color: #2563EB; border-radius: 8px; font-weight: 600; }
#fact-overlay .btn-primary:hover { background: #1D4ED8; }
#fact-overlay .btn-outline { background: #fff; border: 1px solid #D0D5DD; border-radius: 8px; color: #344054; font-weight: 600; }
#fact-overlay .btn-outline:hover { background: #F8FAFC; }
#fact-overlay .fact-banner { background: #FEF0C7; color: #B45309; border-bottom: 1px solid #FDE68A; padding: 8px 32px; font-size: 12.5px; font-weight: 600; }
#fact-overlay .fact-banner strong { color: #B45309; }
#fact-overlay .fact-tabs { display: flex; gap: 6px; padding: 10px 32px; background: #fff; border-bottom: 1px solid #E4E7EC; flex-wrap: wrap; }
#fact-overlay .fact-tab { border: 0; background: transparent; color: #475467; font: inherit; font-size: 13.5px; font-weight: 600; padding: 7px 14px; border-radius: 8px; cursor: pointer; }
#fact-overlay .fact-tab:hover { background: #F2F4F7; }
#fact-overlay .fact-tab.active { background: #2563EB; color: #fff; }
#fact-overlay .fact-tab .n { background: #FEE4E2; color: #B42318; border-radius: 999px; padding: 1px 7px; font-size: 11px; margin-left: 2px; }
#fact-overlay .fact-tab.active .n { background: rgba(255,255,255,.25); color: #fff; }
#fact-overlay .fact-body { padding: 20px 32px !important; max-width: none; }
#fact-overlay .fx-kpi > b { font-size: 26px; white-space: nowrap; }
#fact-overlay .fx-kpi > b .sub { font-size: 15px; font-weight: 600; color: #475467; }
#fact-overlay .fx-kpi > span { margin-top: 4px; }
#fact-overlay .fx-pill { padding: 8px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: #fff; border: 1px solid #D0D5DD; color: #475467; cursor: pointer; font-family: inherit; }
#fact-overlay .fx-pill.active { background: #2563EB; border-color: #2563EB; color: #fff; }
#fact-overlay .fx-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; font-weight: 600; }
#fact-overlay .fx-link { color: #2563EB; font-size: 12px; font-weight: 600; text-decoration: none; background: none; border: 0; cursor: pointer; padding: 0 4px; font-family: inherit; }
#fact-overlay .fx-link:hover { text-decoration: underline; }
#fact-overlay .side-card { background: #fff; border: 1px solid #E4E7EC; border-radius: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.05); padding: 16px 20px; }
#fact-overlay .side-card h3 { font-size: 14.5px; font-weight: 700; color: #101828; text-transform: none; letter-spacing: 0; margin-bottom: 8px; }
#fact-overlay .fact-table { width: 100%; background: #fff; border: 1px solid #E4E7EC; border-radius: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.05); border-collapse: separate; border-spacing: 0; overflow: hidden; }
#fact-overlay .fact-table th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #98A2B3; padding: 10px 14px; border-bottom: 1px solid #E4E7EC; text-align: left; background: #fff; }
#fact-overlay .fact-table td { font-size: 13px; color: #101828; padding: 9px 14px; border-bottom: 1px solid #F2F4F7; }
#fact-overlay .fact-table tbody tr:hover td { background: #F8FAFC; }
#fact-overlay .fact-table tr:last-child td { border-bottom: 0; }
#fact-overlay .fact-table .num, #fact-overlay .fact-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
#fact-overlay .chip-mini { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
/* KPIs: los bloques resumen existentes (tpv-arqueo) se vuelven tarjetas KPI del diseño */
#fact-overlay .tpv-arqueo, #fact-overlay .fx-kpis { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 12px; background: none; border: 0; padding: 0; margin: 0 0 14px; }
#fact-overlay .tpv-arqueo > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; background: #fff; border: 1px solid #E4E7EC; border-radius: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.05); padding: 16px 20px; }
#fact-overlay .fx-kpi { display: flex; flex-direction: column; gap: 2px; background: #fff; border: 1px solid #E4E7EC; border-radius: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.05); padding: 16px 20px; }
#fact-overlay .tpv-arqueo > div > span, #fact-overlay .fx-kpi > span { font-size: 12px; color: #667085; font-weight: 500; }
#fact-overlay .tpv-arqueo > div > strong, #fact-overlay .fx-kpi > b { font-size: 24px; font-weight: 700; color: #101828; font-variant-numeric: tabular-nums; }
#fact-overlay .fx-kpi.ambar > b { color: #B45309; } #fact-overlay .fx-kpi.rojo > b { color: #B42318; } #fact-overlay .fx-kpi.verde > b { color: #067647; }
/* Dropzones */
#fact-overlay .fx-drop, #fact-overlay .gastos-drop, #fact-overlay #tarjeta-drop { background: #fff; border: 2px dashed #93C5FD !important; border-radius: 12px !important; padding: 22px !important; text-align: center; color: #475467 !important; font-size: 13.5px; cursor: pointer; transition: background .12s; }
#fact-overlay .fx-drop:hover, #fact-overlay .gastos-drop:hover, #fact-overlay #tarjeta-drop:hover { background: #F0F6FF; }
/* Facturas: tabla + panel de detalle lado a lado */
#fact-overlay .fx-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
#fact-overlay .fx-split.con-detalle { grid-template-columns: minmax(0, 1fr) 400px; }
#fact-overlay #fact-detalle { position: sticky; top: 12px; }
/* Negocios: tarjetas en rejilla */
#fact-overlay #fact-negocios-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 14px; margin-bottom: 10px; }
/* Pasarelas: cuentas como tarjetas */
#fact-overlay #pasarelas-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; }
#fact-overlay #pasarelas-lista > .fact-fila { background: #fff; border: 1px solid #E4E7EC; border-radius: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.05); padding: 12px 14px; }
#fact-overlay #pasarelas-lista > .pf-slot { display: none; }
#fact-overlay #pasarelas-lista > .pf-slot:not(:empty) { display: block; grid-column: 1 / -1; background: #fff; border: 1px solid #93C5FD; border-radius: 12px; padding: 12px 14px; }
/* Revisión: tarjetas */
#fact-overlay .fx-rev { display: flex; flex-direction: column; gap: 10px; max-width: 980px; }
#fact-overlay .fx-rev-card { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid #E4E7EC; border-radius: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.05); padding: 14px 16px; }
#fact-overlay .fx-rev-ico { width: 44px; height: 44px; border-radius: 10px; background: #FEF0C7; display: flex; align-items: center; justify-content: center; font-size: 20px; flex: none; }
#fact-overlay .fx-rev-card .mono { font-family: ui-monospace, SF Mono, monospace; font-size: 12.5px; font-weight: 600; }
#fact-overlay .fx-rev-motivo { font-size: 13px; font-weight: 600; color: #B45309; margin: 2px 0; }
#fact-overlay .fx-vacio { border: 2px dashed #D0D5DD; border-radius: 12px; background: #fff; text-align: center; padding: 30px; color: #667085; }
#fact-overlay .fx-vacio .e { font-size: 34px; } #fact-overlay .fx-vacio b { display: block; font-size: 16px; color: #101828; margin-top: 6px; }
/* Formularios dentro del módulo */
#fact-overlay input, #fact-overlay select { border: 1px solid #D0D5DD; border-radius: 8px; }
@media (max-width: 1200px) { #fact-overlay .tpv-arqueo, #fact-overlay .fx-kpis { grid-template-columns: repeat(2, 1fr); } #fact-overlay .fx-split.con-detalle { grid-template-columns: 1fr; } #fact-overlay #fact-detalle { position: static; } }

/* Facturas con el detalle abierto: la tabla se estrecha y se cortaba (Rafa 2026-08-25).
   La tabla scrollea en su propia caja, se ocultan dos columnas secundarias y el detalle se compacta. */
#fact-overlay #fact-lista { overflow-x: auto; }
#fact-overlay .fx-split.con-detalle #fact-lista .fact-table th:nth-child(4),
#fact-overlay .fx-split.con-detalle #fact-lista .fact-table td:nth-child(4),
#fact-overlay .fx-split.con-detalle #fact-lista .fact-table th:nth-child(9),
#fact-overlay .fx-split.con-detalle #fact-lista .fact-table td:nth-child(9) { display: none; }
#fact-overlay .fx-split.con-detalle #fact-lista .fact-table td { padding: 8px 10px; }
#fact-overlay #fact-detalle { overflow: hidden; }
#fact-overlay #fact-detalle .fact-table { font-size: 12px; border: 0; box-shadow: none; table-layout: fixed; width: 100%; }
#fact-overlay #fact-detalle .fact-table th, #fact-overlay #fact-detalle .fact-table td { padding: 6px 7px; word-break: break-word; }
#fact-overlay #fact-detalle .fact-table th:first-child, #fact-overlay #fact-detalle .fact-table td:first-child { width: 44%; }
#fact-overlay #fact-detalle h3 { font-size: 15px; }
#fact-overlay #fact-detalle .btn { font-size: 12.5px; padding: 6px 10px; }

/* ═══ PUENTE DE MANDO — cuadro de mando de la empresa (2026-09-01) ═══
   Pantalla completa como Facturación. Prefijo pm- para no chocar con nada.
   Tres colores de estado (verde/ámbar/rojo) separados del azul de acción. */
#puente-overlay .detail-panel { max-width: none; background: #f6f7f9; }
#puente-overlay .pm-cuerpo { padding: 14px 24px 40px; max-width: 1360px; margin: 0 auto; width: 100%; }
#puente-overlay .pm-mono, #puente-overlay .pm-eyebrow, #puente-overlay .pm-meta, #puente-overlay .pm-delta, #puente-overlay .pm-chip, #puente-overlay .pm-sev,
#puente-overlay .pm-when, #puente-overlay .pm-estado, #puente-overlay .pm-fbtn, #puente-overlay .pm-btn, #puente-overlay .pm-act, #puente-overlay .pm-bbtn,
#puente-overlay .pm-impact, #puente-overlay .pm-btitle, #puente-overlay .pm-dec-fecha, #puente-overlay .pm-score .l, #puente-overlay .pm-leyenda, #puente-overlay .pm-salud {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
#puente-overlay .pm-eyebrow { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
#puente-overlay .pm-eyebrow.luz { color: #8db8f2; }
#puente-overlay .pm-meta { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-left: auto; }
#puente-overlay .pm-meta.luz { color: #9aa1ad; }
#puente-overlay .pm-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: #c3c2b7; }
#puente-overlay .pm-dot.ok { background: var(--green); } #puente-overlay .pm-dot.aviso { background: #f59e0b; } #puente-overlay .pm-dot.critico { background: var(--red); }
/* Salud global */
#puente-overlay .pm-salud { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 12px; color: #45536b; padding: 4px 0 14px; }
#puente-overlay .pm-salud > span { display: inline-flex; align-items: center; gap: 6px; }
#puente-overlay .pm-sep { color: var(--muted); }
#puente-overlay .pm-segbar { display: inline-flex; gap: 3px; }
#puente-overlay .pm-segbar i { width: 16px; height: 6px; border-radius: 3px; display: inline-block; background: #d3d8df; }
#puente-overlay .pm-segbar i.ok { background: var(--green); } #puente-overlay .pm-segbar i.aviso { background: #f59e0b; } #puente-overlay .pm-segbar i.critico { background: var(--red); }
/* Tarjetas */
#puente-overlay .pm-card { background: #fff; border: 1px solid #e4e7ec; border-radius: 12px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(16,24,40,.04); margin-bottom: 14px; }
#puente-overlay .pm-card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
#puente-overlay .pm-card-head h3 { font-size: 15px; font-weight: 700; margin: 0; }
#puente-overlay .pm-nota { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
#puente-overlay .pm-vacio { border: 2px dashed #d0d5dd; border-radius: 10px; text-align: center; padding: 22px; color: #667085; font-size: 13px; }
#puente-overlay .pm-vacio .e { font-size: 28px; display: block; color: var(--green); }
#puente-overlay .pm-vacio b { display: block; font-size: 15px; color: #101828; margin-bottom: 4px; }
#puente-overlay .pm-vacio.oscuro { border-color: rgba(255,255,255,.2); color: #9aa1ad; } #puente-overlay .pm-vacio.oscuro b { color: #fff; }
/* KPIs */
#puente-overlay .pm-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 14px; }
#puente-overlay .pm-kpi { display: flex; flex-direction: column; gap: 5px; background: #fff; border: 1px solid #e4e7ec; border-radius: 12px; padding: 14px 16px 12px; box-shadow: 0 1px 2px rgba(16,24,40,.04); min-width: 0; }
#puente-overlay .pm-valor { font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; color: #101828; }
#puente-overlay .pm-valor small { font-size: 15px; font-weight: 600; color: var(--muted); }
#puente-overlay .pm-delta { font-size: 11px; color: #45536b; font-variant-numeric: tabular-nums; line-height: 1.35; }
#puente-overlay .pm-delta b { font-weight: 700; } #puente-overlay .pm-delta.bien b, #puente-overlay .pm-delta b.bien { color: #067647; } #puente-overlay .pm-delta.mal b, #puente-overlay .pm-delta b.mal { color: #b42318; }
#puente-overlay .pm-spark { display: block; width: 100%; height: 34px; margin-top: 3px; } #puente-overlay .pm-spark.mini { width: 96px; height: 22px; margin: 0; }
/* Gráfica anual */
#puente-overlay .pm-leyenda { display: flex; gap: 14px; margin-left: auto; font-size: 11px; color: #45536b; }
#puente-overlay .pm-leyenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 6px; vertical-align: -1px; }
#puente-overlay .pm-chartwrap { overflow-x: auto; } #puente-overlay .pm-barras { display: block; width: 100%; min-width: 640px; height: auto; }
@media (prefers-reduced-motion: no-preference) { #puente-overlay .pm-barras rect.bar { transform-box: fill-box; transform-origin: 50% 100%; animation: pm-rise .45s cubic-bezier(.2,.7,.3,1) backwards; } @keyframes pm-rise { from { transform: scaleY(0); } } }
/* Rejilla principal */
#puente-overlay .pm-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 14px; align-items: start; }
#puente-overlay .pm-col { min-width: 0; }
/* Parte del agente */
#puente-overlay .pm-parte { border-left: 3px solid var(--primary); }
#puente-overlay .pm-prio { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid #eef1f5; }
#puente-overlay .pm-prio:first-of-type { border-top: 0; padding-top: 2px; }
#puente-overlay .pm-prio-n { font-family: ui-monospace, monospace; font-weight: 700; color: var(--primary); width: 1.6em; flex: none; padding-top: 2px; }
#puente-overlay .pm-prio-titulo { font-weight: 700; font-size: 14px; margin-bottom: 3px; }
#puente-overlay .pm-prio p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; }
#puente-overlay .pm-srcline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#puente-overlay .pm-chip { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; background: #f0f2f5; color: #45536b; padding: 3px 8px; border-radius: 999px; }
#puente-overlay .pm-btn, #puente-overlay .pm-act { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; border: 1px solid #e4e7ec; background: #fff; color: var(--primary); padding: 4px 10px; border-radius: 6px; cursor: pointer; }
#puente-overlay .pm-btn:hover, #puente-overlay .pm-act:hover { background: #f0f6ff; }
#puente-overlay .pm-act { border: 0; padding: 3px 6px; }
#puente-overlay .pm-parte-pie { margin-top: 10px; padding-top: 10px; border-top: 1px solid #eef1f5; font-size: 12px; color: var(--muted); }
/* Feed de excepciones */
#puente-overlay .pm-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
#puente-overlay .pm-fbtn { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; border: 1px solid #e4e7ec; border-radius: 999px; background: #fff; color: #45536b; padding: 4px 10px; cursor: pointer; }
#puente-overlay .pm-fbtn[aria-pressed="true"] { background: #1a2330; color: #fff; border-color: #1a2330; }
#puente-overlay .pm-ev { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid #eef1f5; }
#puente-overlay .pm-ev:first-of-type { border-top: 0; } #puente-overlay .pm-ev.visto { opacity: .7; }
#puente-overlay .pm-stripe { width: 3px; border-radius: 2px; flex: none; align-self: stretch; background: #dde3ea; }
#puente-overlay .pm-ev.critico .pm-stripe { background: var(--red); } #puente-overlay .pm-ev.aviso .pm-stripe { background: #f59e0b; }
#puente-overlay .pm-ev-body { min-width: 0; flex: 1; }
#puente-overlay .pm-ev-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 2px; }
#puente-overlay .pm-sev { font-size: 10px; letter-spacing: .1em; font-weight: 700; color: #45536b; }
#puente-overlay .pm-ev.critico .pm-sev { color: #b42318; } #puente-overlay .pm-ev.info .pm-sev { color: var(--muted); }
#puente-overlay .pm-when { font-size: 10.5px; color: var(--muted); margin-left: auto; }
#puente-overlay .pm-ev p { margin: 0 0 4px; font-size: 13.5px; } #puente-overlay .pm-ev-det { color: #45536b; font-size: 12.5px !important; }
#puente-overlay .pm-ev-acts { display: flex; gap: 4px; flex-wrap: wrap; }
/* Estado por área */
#puente-overlay .pm-area { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid #eef1f5; cursor: pointer; }
#puente-overlay .pm-area:first-of-type { border-top: 0; } #puente-overlay .pm-area:hover { background: #f7f9fc; }
#puente-overlay .pm-area-txt { min-width: 0; flex: 1; } #puente-overlay .pm-area-nombre { font-weight: 600; font-size: 13.5px; }
#puente-overlay .pm-area-desc { font-size: 12px; color: #45536b; }
#puente-overlay .pm-n { display: inline-block; background: #eef1f5; color: #45536b; border-radius: 10px; padding: 0 6px; font-size: 11px; margin-left: 4px; }
#puente-overlay .pm-estado { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); flex: none; }
#puente-overlay .pm-estado.critico { color: #b42318; font-weight: 700; } #puente-overlay .pm-estado.aviso { color: #b45309; }
#puente-overlay .pm-chev { color: #b9c0ca; font-size: 16px; line-height: 1; flex: none; }
/* Caja */
#puente-overlay .pm-cash { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-top: 1px solid #eef1f5; }
#puente-overlay .pm-cash:first-of-type { border-top: 0; } #puente-overlay .pm-cash .pm-dot { align-self: center; }
#puente-overlay .pm-cash-nombre { font-size: 13.5px; font-weight: 600; } #puente-overlay .pm-cash-nota { font-size: 11.5px; color: var(--muted); }
#puente-overlay .pm-cash-amt { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 14px; }
#puente-overlay .pm-cash-amt small { font-weight: 500; color: var(--muted); font-size: 11px; }
#puente-overlay .pm-cash.total { border-top: 2px solid #e4e7ec; }
/* Tareas */
#puente-overlay .pm-tarea-form { display: flex; gap: 6px; margin-bottom: 8px; }
#puente-overlay .pm-tarea-form input { flex: 1; border: 1px solid #d0d5dd; border-radius: 8px; padding: 7px 10px; font-size: 13px; }
#puente-overlay .pm-tarea { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; border-top: 1px solid #eef1f5; }
#puente-overlay .pm-tarea input { margin-top: 3px; accent-color: var(--primary); }
#puente-overlay .pm-tarea label { flex: 1; font-size: 13.5px; display: flex; flex-direction: column; }
#puente-overlay .pm-tarea-nota { font-size: 11.5px; color: var(--muted); }
#puente-overlay .pm-tarea.hecha label > span:first-child { color: var(--muted); text-decoration: line-through; }
#puente-overlay .pm-x { border: 0; background: none; color: #b9c0ca; font-size: 16px; cursor: pointer; padding: 0 4px; } #puente-overlay .pm-x:hover { color: var(--red); }
#puente-overlay .pm-hechas summary { font-size: 12px; color: var(--muted); cursor: pointer; padding: 6px 0; }
#puente-overlay .pm-hist { display: block; width: 100%; height: 44px; }
/* Registro de decisiones */
#puente-overlay .pm-dec { padding: 8px 0; border-top: 1px solid #eef1f5; } #puente-overlay .pm-dec:first-of-type { border-top: 0; }
#puente-overlay .pm-dec-head { display: flex; gap: 10px; align-items: baseline; }
#puente-overlay .pm-dec-fecha { font-size: 10.5px; color: var(--muted); flex: none; }
#puente-overlay .pm-dec-titulo { font-size: 13.5px; font-weight: 600; } #puente-overlay .pm-dec-nota { font-size: 12px; color: var(--muted); margin-top: 2px; }
/* El consejo (agente CEO): banda oscura */
#puente-overlay .pm-board { background: #12151b; color: #f4f5f7; border-radius: 14px; padding: 24px 26px 18px; margin: 0 0 14px; }
#puente-overlay .pm-board-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-bottom: 6px; }
#puente-overlay .pm-board-head h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.02em; flex-basis: 100%; color: #fff; }
#puente-overlay .pm-board-sub { margin: 0 0 16px; color: #9aa1ad; font-size: 13.5px; max-width: 70ch; }
#puente-overlay .pm-board-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
#puente-overlay .pm-bcard { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 7px; }
#puente-overlay .pm-bcard.descartada { opacity: .6; } #puente-overlay .pm-bcard.medida { border-color: rgba(141,184,242,.45); }
#puente-overlay .pm-bhead { display: flex; align-items: center; gap: 8px; }
#puente-overlay .pm-bhead svg { width: 16px; height: 16px; color: #8db8f2; flex: none; }
#puente-overlay .pm-btitle { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #8db8f2; }
#puente-overlay .pm-impact { margin-left: auto; font-size: 10.5px; background: rgba(255,255,255,.08); color: #fff; padding: 3px 9px; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; }
#puente-overlay .pm-bcard-titulo { font-size: 14.5px; font-weight: 700; color: #fff; }
#puente-overlay .pm-bcard p { margin: 0; font-size: 13px; color: #e6e8ec; line-height: 1.5; }
#puente-overlay .pm-bmed, #puente-overlay .pm-bfuente { font-size: 12px !important; color: #9aa1ad !important; }
#puente-overlay .pm-bacts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 2px; }
#puente-overlay .pm-bbtn { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.22); background: transparent; color: #8db8f2; padding: 4px 10px; border-radius: 6px; cursor: pointer; }
#puente-overlay .pm-bbtn:hover { background: rgba(255,255,255,.08); } #puente-overlay .pm-bbtn:disabled { opacity: .5; cursor: wait; }
#puente-overlay .pm-bestado { font-size: 12px; color: #9aa1ad; }
#puente-overlay .pm-board-score { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline; margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); }
#puente-overlay .pm-score { display: flex; flex-direction: column; gap: 1px; }
#puente-overlay .pm-score .n { font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
#puente-overlay .pm-score .l { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #9aa1ad; }
#puente-overlay .pm-board-learn { margin: 0 0 0 auto; max-width: 52ch; font-size: 12px; color: #9aa1ad; align-self: center; }
#puente-overlay .pm-board-learn b { color: #fff; }
/* Tiendas */
#puente-overlay .pm-tablewrap { overflow-x: auto; } #puente-overlay .pm-tabla { min-width: 680px; }
#puente-overlay .pm-tabla tfoot td { font-weight: 700; border-top: 2px solid #e4e7ec; }
#puente-overlay .pm-sparkcell { width: 110px; } #puente-overlay .pm-statecell { display: inline-flex; align-items: center; gap: 6px; }
#puente-overlay .pm-statecell span:last-child { font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
#puente-overlay .pm-pie { font-family: ui-monospace, monospace; font-size: 11px; color: var(--muted); margin: 18px 0 0; padding-top: 12px; border-top: 1px solid #e4e7ec; }
/* Cuadro modal pequeño */
.pm-modal-fondo { position: fixed; inset: 0; background: rgba(10,20,35,.55); z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; }
.pm-modal { background: #fff; border-radius: 12px; padding: 20px; width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.pm-modal h3 { font-size: 16px; margin: 0; } .pm-modal label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #45536b; }
.pm-modal textarea, .pm-modal input, .pm-modal select { border: 1px solid #d0d5dd; border-radius: 8px; padding: 8px 10px; font-size: 14px; font-family: inherit; }
.pm-modal-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
/* Ajustes */
#puente-overlay .pm-ajustes { background: #fff; border-bottom: 1px solid #e4e7ec; padding: 16px 24px; }
#puente-overlay .pm-ajustes fieldset { border: 1px solid #e4e7ec; border-radius: 10px; padding: 10px 14px 12px; margin: 0 0 12px; }
#puente-overlay .pm-ajustes legend { font-size: 12px; font-weight: 700; color: #45536b; padding: 0 6px; }
#puente-overlay .pm-ajustes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px 16px; }
#puente-overlay .pm-ajustes label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #45536b; }
#puente-overlay .pm-ajustes input, #puente-overlay .pm-ajustes select { border: 1px solid #d0d5dd; border-radius: 8px; padding: 7px 10px; font-size: 13px; }
@media (max-width: 1100px) { #puente-overlay .pm-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { #puente-overlay .pm-grid, #puente-overlay .pm-board-grid { grid-template-columns: 1fr; } #puente-overlay .pm-board-learn { margin-left: 0; } }
@media (max-width: 640px) { #puente-overlay .pm-kpis { grid-template-columns: repeat(2, 1fr); } #puente-overlay .pm-cuerpo { padding: 10px 12px 30px; } }
/* Puente de Mando — gastos y costes, mediciones automáticas, silenciar, móvil (2026-09-04) */
#puente-overlay .pm-costes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
#puente-overlay .pm-costes-grid > div { display: flex; flex-direction: column; gap: 2px; background: #f7f9fc; border-radius: 8px; padding: 8px 10px; }
#puente-overlay .pm-costes-grid b { font-size: 18px; font-variant-numeric: tabular-nums; }
#puente-overlay .pm-costes-nota { font-size: 11px; color: var(--muted); }
#puente-overlay .pm-mini-tabla > div { display: grid; grid-template-columns: 1.4fr 1fr auto auto; gap: 8px; align-items: center; padding: 4px 0; border-top: 1px solid #eef1f5; font-size: 12.5px; }
#puente-overlay .pm-mini-tabla > div:first-child { border-top: 0; }
#puente-overlay .pm-mini-tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#puente-overlay .pm-sub { font-size: 12px; font-weight: 700; margin: 10px 0 4px; color: #45536b; } #puente-overlay .pm-sub.mal { color: #b42318; }
#puente-overlay .pm-rec { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid #eef1f5; }
#puente-overlay .pm-rec-txt { min-width: 0; flex: 1; } #puente-overlay .pm-rec-nombre { font-size: 13px; font-weight: 600; } #puente-overlay .pm-rec-nota { font-size: 11.5px; color: var(--muted); }
#puente-overlay .pm-rec.cancelar .pm-rec-nombre { text-decoration: line-through; color: var(--muted); } #puente-overlay .pm-rec.revisar .pm-rec-nombre { color: #b45309; }
#puente-overlay .pm-rec-sel { border: 1px solid #d0d5dd; border-radius: 6px; padding: 3px 6px; font-size: 11.5px; background: #fff; }
#puente-overlay .pm-aviso-med { background: #eef5ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 8px 10px; font-size: 12.5px; margin-bottom: 10px; }
#puente-overlay .pm-bauto { font-size: 12.5px; background: rgba(255,255,255,.06); border-radius: 8px; padding: 8px 10px; color: #e6e8ec; }
#puente-overlay .pm-bauto.ok { border-left: 3px solid #16a34a; } #puente-overlay .pm-bauto.mal { border-left: 3px solid #dc2626; }
#puente-overlay .pm-chip.mal { background: #fdecec; color: #b42318; }
#puente-overlay .pm-hist-estado { margin-top: 6px; }
#puente-overlay .pm-ajustes label.ancho { grid-column: 1 / -1; }
#puente-overlay .pm-ajustes textarea { border: 1px solid #d0d5dd; border-radius: 8px; padding: 7px 10px; font-size: 12.5px; font-family: ui-monospace, monospace; }
#puente-overlay .pm-coste { width: 90px; border: 1px solid #d0d5dd; border-radius: 6px; padding: 4px 6px; font-size: 12.5px; text-align: right; }
#puente-overlay .mal { color: #b42318; }
/* Móvil: lo del café primero (parte y excepciones), lo demás debajo y compacto */
@media (max-width: 640px) {
  #puente-overlay .detail-header { flex-wrap: wrap; gap: 8px; }
  #puente-overlay .pm-kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  #puente-overlay .pm-kpi { padding: 10px 12px; } #puente-overlay .pm-valor { font-size: 22px; }
  #puente-overlay .pm-cuerpo { display: flex; flex-direction: column; }
  #puente-overlay .pm-cuerpo > * { min-width: 0; order: 4; }
  #puente-overlay .pm-salud { order: 0; } #puente-overlay .pm-grid { order: 1; } #puente-overlay .pm-kpis { order: 2; } #puente-overlay .pm-board { order: 3; }
  #puente-overlay .pm-chart { order: 5; } #puente-overlay .pm-tiendas { order: 6; } #puente-overlay .pm-pie { order: 9; }
  #puente-overlay .pm-grid, #puente-overlay .pm-col, #puente-overlay .pm-card { min-width: 0; } #puente-overlay .pm-tablewrap { font-size: 12px; }
  #puente-overlay .pm-costes-grid { grid-template-columns: 1fr; }
  #puente-overlay .pm-board { padding: 16px 14px; } #puente-overlay .pm-board-head h2 { font-size: 18px; }
}