* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  /* ===== Sistema de diseño CatalogPro (rediseño jul 2026) ===== */
  /* Marca: magenta refinado -> ciruela, usado como degradado en acciones primarias */
  --brand: #d80a6b;
  --brand-2: #9a1259;
  --grad: linear-gradient(135deg, #d80a6b 0%, #9a1259 100%);
  /* Alias antiguos (se mantienen para no romper usos existentes) */
  --rosa: #d80a6b;
  --rosa-claro: #fdf2f8;
  --rosa-borde: #f6d9e8;
  --rosa-oscuro: #9a1259;
  /* Neutros con sesgo ciruela (elegido, no gris plano) */
  --gris-bg: #f6f3f9;
  --gris-borde: #ece6f1;
  --gris-borde-2: #e1d9e9;
  --gris-texto: #877e93;
  --texto: #1b1420;
  --surface: #ffffff;
  --surface-2: #fbf9fd;
  --surface-3: #f3eef7;
  /* Categorías (color = dato real) */
  --violet: #7c3aed;
  --teal: #0e9488;
  --amber: #d97706;
  /* Semánticos */
  --verde: #15a34a;
  --naranja: #d97706;
  --rojo: #dc2626;
  /* Elevación y radios */
  --shadow-sm: 0 1px 2px rgba(27,20,32,.06);
  --shadow: 0 1px 2px rgba(27,20,32,.05), 0 10px 30px -14px rgba(27,20,32,.20);
  --shadow-lg: 0 2px 6px rgba(27,20,32,.06), 0 26px 60px -22px rgba(27,20,32,.30);
  --r: 16px;
  --r-sm: 11px;
  --r-lg: 22px;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --img-fill: #fff; /* relleno blanco de las láminas PNG (transparencia) — blanco SIEMPRE, también en oscuro */
}

/* ===== MODO OSCURO (opt-in por interruptor; NO se fuerza por el sistema para no
   romper las zonas con estilos "inline" que aún asumen tema claro) ===== */
:root[data-theme="dark"] {
  --brand: #f0348a;
  --brand-2: #b21c6b;
  --grad: linear-gradient(135deg, #f0348a 0%, #b21c6b 100%);
  --rosa: #f0348a;
  --rosa-claro: #2a1220;
  --rosa-borde: #3a2233;
  --rosa-oscuro: #b21c6b;
  --gris-bg: #100c15;
  --gris-borde: #2a2137;
  --gris-borde-2: #352a45;
  --gris-texto: #9c90ac;
  --texto: #f4eff8;
  --surface: #191320;
  --surface-2: #1f1729;
  --surface-3: #261c33;
  --violet: #a78bfa;
  --teal: #2dd4bf;
  --amber: #fbbf24;
  --verde: #34d399;
  --naranja: #fbbf24;
  --rojo: #f87171;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 14px 34px -16px rgba(0,0,0,.7);
  --shadow-lg: 0 2px 8px rgba(0,0,0,.5), 0 30px 70px -24px rgba(0,0,0,.8);
  --img-fill: #fff;
  color-scheme: dark;
}
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(1100px 560px at 92% -6%, rgba(216,10,107,.06), transparent 60%),
    radial-gradient(900px 480px at -6% 2%, rgba(124,58,237,.05), transparent 55%),
    var(--gris-bg);
  color: var(--texto);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}
html {
  overflow-x: hidden;
}
.loading { text-align: center; padding: 4rem 2rem; color: var(--gris-texto); }

/* ===== LOGIN ===== */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--surface) 0%, var(--rosa-claro) 100%);
  padding: 1rem;
}
.login-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 2.6rem 2.1rem;
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 390px;
  border: 1px solid var(--gris-borde);
}
.login-logo {
  text-align: center;
  margin-bottom: 1.6rem;
}
.login-logo h1 {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.login-logo p {
  color: var(--gris-texto);
  font-size: 13px;
  margin-top: 4px;
}
.form-group { margin-bottom: 1rem; }
.form-group label {
  display: block;
  font-size: 13px;
  color: var(--gris-texto);
  margin-bottom: 6px;
  font-weight: 500;
}
.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--gris-borde-2);
  border-radius: var(--r-sm);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: var(--surface-2);
  color: var(--texto);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  border-color: var(--brand);
  background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
}
/* Las casillas y radios NUNCA deben estirarse al 100% (la regla de arriba los pillaba):
   rompía las filas con checkbox en flex (el nombre se colapsaba y el precio se montaba). */
.form-group input[type="checkbox"], .form-group input[type="radio"] {
  width: auto;
  padding: 0;
  flex: 0 0 auto;
}
.btn {
  width: 100%;
  padding: 11px 16px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:active { transform: scale(0.985); }
.btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; }
.btn-primary {
  background: var(--grad);
  color: white;
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--brand) 65%, transparent);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -8px color-mix(in srgb, var(--brand) 65%, transparent); }
.btn-secondary {
  background: var(--surface);
  color: var(--brand);
  border: 1px solid var(--gris-borde-2);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--brand) 40%, var(--gris-borde-2)); }
.btn-danger {
  background: var(--surface);
  color: var(--rojo);
  border: 1px solid color-mix(in srgb, var(--rojo) 45%, var(--gris-borde-2));
  box-shadow: var(--shadow-sm);
}
.btn-danger:hover { transform: translateY(-1px); background: #fef2f2; }
.btn-pequeno {
  padding: 6px 12px;
  font-size: 12px;
  width: auto;
}
.error-msg {
  background: #fee;
  color: #c00;
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 1rem;
}
.exito-msg {
  background: #ecfdf5;
  color: var(--verde);
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 1rem;
}

/* ===== LAYOUT PRINCIPAL ===== */
.app-shell { min-height: 100vh; }
.topbar {
  background: var(--grad);
  color: white;
  padding: 14px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 8px 24px -16px rgba(154,18,89,.7);
}
.topbar-titulo {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.topbar-usuario {
  font-size: 12px;
  opacity: 0.9;
}
.topbar-logout {
  background: rgba(255,255,255,0.15);
  color: white;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
}
.contenedor {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

/* ===== NAVTABS ===== */
.navtabs {
  background: var(--surface);
  border-bottom: 1px solid var(--gris-borde);
  display: flex;
  flex-wrap: wrap;            /* que envuelva en varias filas → se ven TODAS las pestañas */
  padding: 6px 1rem 0;
  gap: 2px;
  max-width: 1200px;
  margin: 0 auto;
}
.navtab {
  background: transparent;
  border: 0;
  padding: 11px 15px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  color: var(--gris-texto);
  cursor: pointer;
  border-radius: 10px 10px 0 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.navtab:hover { color: var(--brand); background: var(--surface-3); }
.navtab.navtab-activa {
  color: var(--brand);
  border-bottom-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}

/* En tablet/móvil: padding más compacto en los tabs para que entren más */
@media (max-width: 1024px) {
  .navtab {
    padding: 12px 12px;
    font-size: 12px;
  }
  .navtabs {
    padding: 0 0.5rem;
  }
}

/* ===== CLIENTES ===== */
.clientes-tabla {
  background: var(--surface);
  border: 1px solid var(--gris-borde);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.cliente-fila {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gris-borde);
  transition: background 0.12s;
}
.cliente-fila:last-child { border-bottom: 0; }
.cliente-fila:hover { background: color-mix(in srgb, var(--brand) 5%, transparent); }
.cliente-fila-baja {
  opacity: 0.55;
  background: var(--surface-2);
}
.cliente-fila-codigo {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--brand);
  font-family: var(--mono, monospace);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 7px;
  min-width: 50px;
  text-align: center;
}
.cliente-fila-info { flex: 1; min-width: 0; }
.cliente-fila-nombre {
  font-size: 13px;
  font-weight: 500;
  color: var(--texto);
  margin-bottom: 2px;
}
.cliente-fila-detalles {
  font-size: 11px;
  color: var(--gris-texto);
}
.cliente-baja-badge {
  display: inline-block;
  background: #fee;
  color: var(--rojo);
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  font-weight: 500;
}
.paginacion {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 1.2rem;
}
.paginacion button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ===== COMERCIALES ===== */
.comerciales-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.comercial-card {
  background: var(--surface);
  border: 1px solid var(--gris-borde);
  border-radius: var(--r);
  padding: 15px 17px;
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.14s ease, transform 0.14s ease, border-color 0.14s ease;
}
.comercial-card:hover { border-color: color-mix(in srgb, var(--brand) 30%, var(--gris-borde)); box-shadow: var(--shadow); transform: translateY(-2px); }
.comercial-inactivo {
  opacity: 0.55;
  background: var(--surface-2);
}
.comercial-card-info { flex: 1; min-width: 0; }
.comercial-card-cabecera {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.comercial-nombre {
  font-size: 14px;
  font-weight: 500;
  color: var(--texto);
}
.comercial-card-detalles {
  font-size: 12px;
  color: var(--gris-texto);
}
.comercial-card-acciones {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
}

/* SELECTOR DE NIVEL DEL COMERCIAL: hasta dónde llega en la app (solo visor / visita sin
   pedido / completo). Va como un mando de 3 posiciones y no como 3 interruptores sueltos,
   para que no puedan quedar en un estado contradictorio. */
.nivel-comercial {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--borde, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
  background: #f9fafb;
}
.nivel-etiqueta {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9ca3af;
  padding: 0 8px;
}
.nivel-btn {
  border: 0;
  border-left: 1px solid var(--borde, #e5e7eb);
  background: transparent;
  color: #6b7280;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.nivel-btn:hover { background: #f3f4f6; color: #374151; }
.nivel-btn.nivel-activo { color: #fff; font-weight: 800; }
.nivel-btn.nivel-activo:hover { filter: brightness(1.06); }
.nivel-btn.nivel-visor.nivel-activo { background: #7c3aed; }      /* morado: solo mirar */
.nivel-btn.nivel-sinpedido.nivel-activo { background: #0d9488; }  /* verde azulado: fase intermedia */
.nivel-btn.nivel-completo.nivel-activo { background: #16a34a; }   /* verde: flujo completo */

.rol-badge {
  display: inline-block;
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.rol-admin {
  background: var(--rosa-claro);
  color: var(--rosa);
}
.rol-sales {
  background: #e0f2fe;
  color: #075985;
}
.rol-yo {
  background: #fef3c7;
  color: #92400e;
}
.rol-baja {
  background: #fee;
  color: var(--rojo);
}
@media (max-width: 640px) {
  .comercial-card { flex-direction: column; align-items: stretch; }
  .comercial-card-acciones { justify-content: flex-start; }
}

/* ===== LISTA DE CATALOGOS ===== */
.titulo-pagina {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}
.titulo-pagina h2 {
  font-size: 20px;
  color: var(--texto);
  font-weight: 600;
}
.catalogos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.catalogo-card {
  background: var(--surface);
  border-radius: var(--r);
  border: 1px solid var(--gris-borde);
  padding: 1.3rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}
.catalogo-card:hover {
  border-color: color-mix(in srgb, var(--brand) 32%, var(--gris-borde));
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.catalogo-card:active { transform: translateY(-1px) scale(0.995); }
.catalogo-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.catalogo-card-tipo {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tipo-maestro { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); }
.tipo-clon { background: color-mix(in srgb, var(--violet) 12%, transparent); color: var(--violet); }
.tipo-express { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }

/* MAESTRO: destaca claramente (es el catálogo principal). Barra lateral gruesa de
   marca, leve tinte y chip sólido; y salen los primeros por el orden del backend. */
.catalogo-card-maestro {
  border-left: 7px solid var(--brand);
  background: linear-gradient(100deg, color-mix(in srgb, var(--brand) 7%, var(--surface)), var(--surface) 55%);
  box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 8px 22px -14px color-mix(in srgb, var(--brand) 60%, transparent);
}
.catalogo-card-maestro .catalogo-card-tipo.tipo-maestro {
  background: var(--brand); color: #fff; letter-spacing: .07em;
}
.catalogo-card-maestro .catalogo-card-nombre { font-size: 17px; }
/* EXPRESS: se mantiene, pero un pelín más discreto para que el maestro mande. */
.catalogo-card-express { border-left: 3px solid color-mix(in srgb, var(--amber) 55%, transparent); }
.catalogo-card-nombre {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--texto);
  margin-bottom: 7px;
}
.catalogo-card-info {
  font-size: 12.5px;
  color: var(--gris-texto);
}
.catalogo-card-estado {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  margin-left: 6px;
}
.estado-borrador { background: var(--surface-3); color: var(--gris-texto); }
.estado-publicado { background: color-mix(in srgb, var(--verde) 15%, transparent); color: var(--verde); }

/* ===== EMPTY STATE ===== */
.empty-state {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--gris-texto);
}
.empty-state-icono { font-size: 48px; margin-bottom: 1rem; opacity: 0.4; }
.empty-state h3 { font-size: 18px; margin-bottom: 8px; color: var(--texto); }
.empty-state p { font-size: 14px; margin-bottom: 1.5rem; }

/* ===== MODAL ===== */
.modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 99000; /* Más alto que el visor fullscreen para que el modal de anotar pedido salga por delante */
  /* LEY: TODAS las ventanas se tienen que poder recorrer de arriba abajo. El fondo mismo
     scrollea (con inercia táctil) para el caso que rompía en la tablet: al abrirse salta el
     foco a un campo, sube el teclado y tapa la mitad de abajo; con la ventana centrada y el
     fondo fijo, los botones quedaban detrás del teclado sin forma de subirlos. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* margin:auto centra la ventana cuando cabe y, cuando NO cabe (teclado arriba, pantalla
   baja), deja llegar tanto al principio como al final sin que se corte por arriba (el bug
   clásico de flex + align-items:center + overflow). */
.modal-bg > .modal,
.modal-bg > .modal-card { margin: auto; }
/* Diálogos que usan class="modal" (ficha de recuadro, selector de campo/variante,
   ofertas…): DEBEN tener fondo sólido. Sin esto se veían transparentes y, sobre una
   lámina de fondo, el texto era ilegible. */
.modal {
  background: var(--surface);
  color: var(--texto);
  border: 1px solid var(--gris-borde);
  border-radius: var(--r);
  padding: 1.5rem;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;   /* inercia al arrastrar con el dedo (iPad) */
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
  box-sizing: border-box;
}
.modal-card {
  background: var(--surface);
  color: var(--texto);
  border: 1px solid var(--gris-borde);
  border-radius: var(--r);
  padding: 1.5rem;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;   /* inercia al arrastrar con el dedo (iPad) */
  box-shadow: var(--shadow-lg);
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.2rem;
}
.modal-header h3 { font-size: 17px; }
.modal-cerrar {
  background: none;
  border: 0;
  font-size: 22px;
  color: var(--gris-texto);
  cursor: pointer;
  line-height: 1;
}
.modal-acciones {
  display: flex;
  gap: 8px;
  margin-top: 1.5rem;
}
.modal-acciones .btn { flex: 1; }

/* ===== EDITOR DE CATALOGO ===== */
.editor-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 1.2rem;
}
@media (max-width: 768px) {
  .editor-grid { grid-template-columns: 1fr; }
}
.editor-panel {
  background: var(--surface);
  border-radius: var(--r);
  border: 1px solid var(--gris-borde);
  padding: 1.35rem;
  box-shadow: var(--shadow-sm);
}
.editor-panel h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
  color: var(--texto);
}
.upload-zona {
  border: 1.5px dashed color-mix(in srgb, var(--brand) 55%, var(--gris-borde-2));
  background: var(--rosa-claro);
  border-radius: var(--r-sm);
  padding: 1.6rem;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.upload-zona:hover { background: color-mix(in srgb, var(--brand) 7%, var(--surface)); border-color: var(--brand); }
.upload-zona.upload-zona-pdf {
  border-color: color-mix(in srgb, var(--violet) 55%, var(--gris-borde-2));
  background: color-mix(in srgb, var(--violet) 6%, var(--surface));
}
.upload-zona.upload-zona-pdf .upload-zona-icono,
.upload-zona.upload-zona-pdf .upload-zona-texto {
  color: var(--violet);
}
.upload-zona.upload-zona-pdf:hover { background: color-mix(in srgb, var(--violet) 10%, var(--surface)); }
.upload-zona-icono { font-size: 30px; color: var(--brand); margin-bottom: 6px; }
.upload-zona-texto { color: var(--brand); font-size: 13.5px; font-weight: 600; }
.upload-zona-sub { color: var(--gris-texto); font-size: 11px; margin-top: 4px; }

.lamina-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  background: var(--surface-2);
  border: 1px solid var(--gris-borde);
  border-radius: var(--r-sm);
  margin-bottom: 8px;
  transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}
.lamina-fila:hover {
  border-color: color-mix(in srgb, var(--brand) 32%, var(--gris-borde));
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
/* Resaltado breve de la lámina a la que volvemos tras editar (para ubicarse) */
.lamina-fila-vuelta {
  animation: laminaVuelta 1.5s ease-out 1;
}
@keyframes laminaVuelta {
  0%   { box-shadow: 0 0 0 3px rgba(204, 0, 122, 0.75); border-color: var(--rosa); }
  100% { box-shadow: 0 0 0 3px rgba(204, 0, 122, 0); }
}
.lamina-numero {
  width: 32px;
  font-size: 13px;
  font-weight: 600;
  color: var(--rosa);
  text-align: center;
  flex-shrink: 0;
}
/* El número NO cambia al reordenar (solo al pulsar Renumerar). Cuando deja de coincidir
   con la posición, se marca en ámbar y se muestra debajo la posición real. */
.lamina-numero.desfasado { color: #b45309; }
.lamina-pos {
  display: block;
  font-size: 9px;
  font-weight: 700;
  color: var(--gris-texto);
  letter-spacing: .02em;
  margin-top: 1px;
}
.lamina-mini {
  width: 54px;
  height: 70px;
  background: var(--surface);
  border: 1px solid var(--gris-borde);
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.lamina-mini:hover {
  transform: scale(1.6);
  z-index: 10;
  box-shadow: 0 8px 24px rgba(204, 0, 122, 0.25);
}
.lamina-info {
  flex: 1;
  min-width: 0;
}
.lamina-titulo {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 2px;
}
.lamina-notas {
  font-size: 11px;
  color: var(--gris-texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lamina-acciones { display: flex; gap: 5px; }
.lamina-acciones button {
  background: var(--surface);
  border: 1px solid var(--gris-borde-2);
  padding: 5px 9px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 12px;
  color: var(--texto);
  box-shadow: var(--shadow-sm);
  transition: background 0.13s, border-color 0.13s, color 0.13s, transform 0.1s;
}
.lamina-acciones button:hover { background: color-mix(in srgb, var(--brand) 9%, var(--surface)); border-color: color-mix(in srgb, var(--brand) 40%, var(--gris-borde-2)); color: var(--brand); transform: translateY(-1px); }
.lamina-acciones button.btn-borrar:hover { background: #fef2f2; border-color: color-mix(in srgb, var(--rojo) 45%, var(--gris-borde-2)); color: var(--rojo); }

/* Spinner para subidas */
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--rosa-borde);
  border-top-color: var(--rosa);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.subida-progreso {
  background: var(--rosa-claro);
  border: 1px solid var(--rosa-borde);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--rosa);
}

/* ===== IMPERSONACION ===== */
.banner-impersonacion {
  background: #fef3c7;
  border-bottom: 2px solid #f59e0b;
  padding: 10px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #78350f;
}
.banner-impersonacion b { color: #422006; }
.btn-volver-admin {
  background: var(--surface);
  border: 1px solid #f59e0b;
  color: #92400e;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.btn-volver-admin:hover {
  background: #f59e0b;
  color: white;
}
.topbar-action {
  background: rgba(255,255,255,0.15);
  color: white;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.topbar-action:hover {
  background: rgba(255,255,255,0.25);
}
.comercial-impersonar {
  background: var(--surface);
  border: 1px solid var(--gris-borde);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.comercial-impersonar:hover {
  border-color: var(--rosa);
  background: var(--rosa-claro);
}

/* ===== ASIGNACIONES catalogo-comerciales ===== */
.asignaciones-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.asignacion-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1.5px solid var(--gris-borde);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.asignacion-fila:hover {
  border-color: var(--rosa);
  background: var(--rosa-claro);
}
.asignacion-fila.asignacion-activa {
  border-color: var(--rosa);
  background: var(--rosa-claro);
}
.asignacion-fila input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--rosa);
}
.asignacion-info { flex: 1; min-width: 0; }
.asignacion-nombre {
  font-size: 13px;
  font-weight: 500;
  color: var(--texto);
  margin-bottom: 2px;
}
.asignacion-meta {
  font-size: 11px;
  color: var(--gris-texto);
}
.asg-status {
  font-size: 11px;
  color: var(--rosa);
  font-weight: 500;
  white-space: nowrap;
}

/* ============================================================================
   VISOR COMERCIAL — tablet vertical, modo presentación + mosaico
   ============================================================================ */
.visor-shell {
  background: var(--surface-2);
  min-height: calc(100vh - 110px);
}

.visor-cabecera {
  background: var(--surface);
  border-bottom: 1px solid var(--gris-borde);
  padding: 12px 14px;
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.visor-cabecera-fila {
  display: flex;
  align-items: center;
  gap: 10px;
}
.btn-icon-volver {
  background: var(--gris-bg);
  border: 1px solid var(--gris-borde);
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--rosa);
  font-weight: 500;
}
.btn-icon-volver:hover { background: var(--rosa-claro); border-color: var(--rosa); }
.visor-titulo-bloque {
  flex: 1;
  min-width: 0;
}
.visor-titulo {
  font-size: 15px;
  font-weight: 600;
  color: var(--texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.visor-subtitulo {
  font-size: 11px;
  color: var(--gris-texto);
  margin-top: 2px;
}
.visor-modo-switch {
  display: flex;
  gap: 4px;
  background: var(--gris-bg);
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--gris-borde);
}
.visor-modo-btn {
  background: transparent;
  border: 0;
  width: 38px;
  height: 32px;
  border-radius: 7px;
  font-size: 16px;
  cursor: pointer;
  color: var(--gris-texto);
}
.visor-modo-btn.activo {
  background: var(--surface);
  color: var(--rosa);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.visor-buscador-fila {
  position: relative;
}
.visor-buscador {
  width: 100%;
  padding: 11px 38px 11px 14px;
  border: 1.5px solid var(--gris-borde);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  background: var(--surface);
  box-sizing: border-box;
}
.visor-buscador:focus { border-color: var(--rosa); }
.visor-buscador-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--gris-texto);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 8px;
}
/* Aviso de "faltan letras" mientras escribes 1-2 caracteres (ver búsqueda en pintarVisor).
   Ocupa toda la fila (por eso el flex-wrap) y desaparece en cuanto la búsqueda arranca. */
.visor-buscador-fila { flex-wrap: wrap; }
.visor-buscador-pista {
  width: 100%;
  margin-top: 4px;
  font-size: 12px;
  color: var(--gris-texto);
}

/* ===== Modo presentación ===== */
.visor-presentacion {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.visor-nav-superior {
  width: 100%;
  max-width: 720px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--surface);
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--gris-borde);
  flex-wrap: wrap;
}
.visor-nav-btn {
  background: var(--rosa);
  color: white;
  border: 0;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  min-width: 110px;
}
.visor-nav-btn:hover { background: var(--rosa-oscuro); }
.visor-nav-btn:disabled {
  background: var(--gris-borde);
  color: #888;
  cursor: not-allowed;
}
.visor-contador {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: inherit;
}
.visor-contador-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--rosa);
}
.visor-contador-total {
  font-size: 13px;
  color: var(--gris-texto);
}

.visor-imagen-contenedor {
  width: 100%;
  max-width: 720px;
  background: var(--surface);
  border: 1px solid var(--gris-borde);
  border-radius: 14px;
  padding: 8px;
  overflow: hidden;
  position: relative;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.visor-imagen-zoom {
  width: 100%;
  transform-origin: center center;
  transition: transform 0.15s;
  /* Aceleracion GPU para zoom/pan fluido en tablet */
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.visor-imagen {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  pointer-events: none;
  /* Las láminas PNG tienen canal alfa (transparencia). Fondo blanco en la propia
     imagen para que las zonas transparentes NO se vean negras (sobre todo en
     pantalla completa, cuyo backdrop es #000). No altera los archivos. */
  background: var(--img-fill);
  /* Mantener nitidez en zoom alto (PNG 150 dpi con textos pequenos) */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  /* GPU layer para zoom fluido */
  transform: translateZ(0);
}
.visor-zoom-reset {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(204, 0, 122, 0.95);
  color: white;
  border: 0;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 5;
}

.visor-info-lamina {
  width: 100%;
  max-width: 720px;
  background: var(--surface);
  border: 1px solid var(--gris-borde);
  border-radius: 10px;
  padding: 12px 14px;
}
.visor-info-titulo {
  font-size: 14px;
  font-weight: 500;
  color: var(--texto);
  margin-bottom: 4px;
}
.visor-info-notas {
  font-size: 13px;
  color: var(--gris-texto);
  line-height: 1.4;
}
.visor-zoom-hint {
  font-size: 11px;
  color: var(--gris-texto);
  text-align: center;
  max-width: 720px;
  padding: 4px 8px;
}

.visor-vacio {
  text-align: center;
  padding: 4rem 1.5rem;
  color: var(--gris-texto);
}
.visor-vacio h3 { font-size: 17px; margin-bottom: 6px; color: var(--texto); }
.visor-vacio p { font-size: 13px; }

/* ===== Modo mosaico ===== */
.visor-mosaico {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  padding: 14px;
}
.visor-mosaico-celda {
  background: var(--surface);
  border: 1px solid var(--gris-borde);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, transform 0.05s;
}
.visor-mosaico-celda:hover {
  border-color: var(--rosa);
}
/* La lámina que estabas viendo al abrir el mosaico: resaltada para localizarla de un vistazo. */
.visor-mosaico-celda.mosaico-celda-actual {
  border-color: var(--rosa);
  box-shadow: 0 0 0 3px var(--rosa), 0 8px 20px -8px rgba(204,0,122,.5);
}
.visor-mosaico-celda:active {
  transform: scale(0.97);
}
.visor-mosaico-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}
.visor-mosaico-num {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(204, 0, 122, 0.92);
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}
.visor-mosaico-titulo {
  padding: 6px 8px;
  font-size: 11px;
  color: var(--texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-top: 1px solid var(--gris-borde);
}

/* Mosaico denso en tablets pequeñas: 4 columnas */
@media (max-width: 900px) {
  .visor-mosaico { grid-template-columns: repeat(4, 1fr); }
  .visor-mosaico-img { height: 160px; }
}
@media (max-width: 640px) {
  .visor-mosaico { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px; }
  .visor-mosaico-img { height: 140px; }
  .visor-nav-btn { min-width: 80px; padding: 9px 10px; font-size: 12px; }
}

/* ===== EDICION INLINE DE TAGS ===== */
.lamina-tags-input {
  width: 100%;
  padding: 6px 10px;
  margin-top: 4px;
  border: 1px dashed var(--gris-borde-2);
  border-radius: 8px;
  font-size: 11px;
  font-family: inherit;
  background: var(--surface-2);
  color: var(--texto);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s, background 0.15s;
}
.lamina-tags-input::placeholder { color: var(--gris-texto); font-size: 10.5px; }
.lamina-tags-input:focus { border-color: var(--brand); border-style: solid; background: var(--surface); }
.lamina-tags-input.lamina-tags-dirty {
  border-color: var(--naranja);
  border-style: solid;
  background: color-mix(in srgb, var(--naranja) 12%, var(--surface));
}
.lamina-tags-input.lamina-tags-saved {
  border-color: var(--verde);
  border-style: solid;
  background: color-mix(in srgb, var(--verde) 12%, var(--surface));
}
/* Caja "Subida masiva": antes tenía color inline (parche claro en oscuro) */
.upload-zona-multi {
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
  border-color: color-mix(in srgb, var(--brand) 40%, var(--gris-borde-2));
}
.upload-zona-multi:hover { background: color-mix(in srgb, var(--brand) 12%, var(--surface)); }
.btn-guardar-tags {
  background: #fbbf24 !important;
  color: white !important;
  border: 0 !important;
  font-size: 13px !important;
  padding: 5px 10px !important;
  border-radius: 6px !important;
  cursor: pointer;
  animation: pulse-warn 1.5s ease-in-out infinite;
}
@keyframes pulse-warn {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

/* ===== DRAG & DROP REORDENAR LAMINAS ===== */
.drag-handle {
  color: #9ca3af;
  font-size: 14px;
  cursor: grab;
  padding: 0 4px;
  user-select: none;
  flex-shrink: 0;
  letter-spacing: -2px;
  font-family: monospace;
}
.drag-handle:hover { color: var(--rosa); }
.lamina-fila[draggable="true"] { cursor: grab; }
.lamina-fila[draggable="true"]:active { cursor: grabbing; }
.lamina-arrastrando {
  opacity: 0.4;
  transform: scale(0.98);
}
.lamina-arrastrando-target {
  border-color: var(--rosa) !important;
  border-width: 2px !important;
  background: var(--rosa-claro) !important;
  border-style: dashed !important;
}

/* ===== LIGHTBOX ===== */
.lightbox-bg {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem 1rem;
  z-index: 200;
  cursor: zoom-out;
}
.lightbox-img {
  max-width: 95vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
.lightbox-cerrar {
  position: absolute;
  top: 14px;
  right: 18px;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  font-family: inherit;
}
.lightbox-cerrar:hover { background: rgba(255, 255, 255, 0.3); }
.lightbox-info {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  max-width: 90%;
  text-align: center;
}

/* Aumentar tamaño miniatura para que el click sea cómodo */
.lamina-mini { cursor: zoom-in; }

/* ============================================================================
   B5 - CATALOGOS EXPRESS
   ============================================================================ */

/* Linea del maestro padre en la card del listado */
.catalogo-card-parent {
  font-size: 11px;
  color: var(--gris-texto);
  margin-top: -4px;
  margin-bottom: 4px;
  font-style: italic;
}

/* Grid dos columnas del editor Express */
.express-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 900px) {
  .express-grid {
    grid-template-columns: 1fr;
  }
}

.express-panel {
  display: flex;
  flex-direction: column;
}
.express-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.express-lista {
  max-height: 70vh;
  overflow-y: auto;
  border: 1px solid var(--gris-borde);
  border-radius: 8px;
  padding: 4px;
  background: var(--surface-2);
}

.express-fila {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid #eee;
  background: var(--surface);
  border-radius: 4px;
  margin-bottom: 2px;
}
.express-fila:last-child { border-bottom: none; }

.express-fila .lamina-mini {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.express-fila .lamina-info {
  flex: 1;
  min-width: 0;
}
.express-fila .lamina-titulo {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.express-fila .lamina-numero {
  font-size: 11px;
  color: var(--gris-texto);
  min-width: 24px;
  text-align: center;
}

.express-check {
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;
}
.express-check:disabled { cursor: not-allowed; opacity: 0.5; }

.express-fila-en-express {
  background: #f0fdf4;
  opacity: 0.7;
}

.express-badge-ya {
  font-size: 10px;
  background: #dcfce7;
  color: #166534;
  padding: 2px 6px;
  border-radius: 10px;
  flex-shrink: 0;
}

/* Boton borrar especifico del Express (mas pequeno que en editor maestro) */
.express-lista .btn-borrar {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  border-radius: 4px;
  color: #c00;
}
.express-lista .btn-borrar:hover {
  background: #fee2e2;
}

/* ============================================================================
   B6 - VISITAS Y ANOTACIONES
   ============================================================================ */

/* Barra superior de visita activa */
.banner-visita {
  background: linear-gradient(90deg, #fef3c7, #fde68a);
  color: #78350f;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 2px solid #f59e0b;
  flex-wrap: wrap;
}

/* Cliente fila clickable */
.cliente-fila-clickable {
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cliente-fila-clickable:hover {
  background: var(--surface-2);
}
.cliente-fila-clickable:active {
  background: #f3f4f6;
}
.cliente-fila-chevron {
  color: var(--gris-texto);
  font-size: 20px;
  padding-right: 8px;
}

/* Detalle cliente: dos columnas */
.cliente-detalle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 900px) {
  .cliente-detalle-grid {
    grid-template-columns: 1fr;
  }
}

/* Tabla key-value para ficha */
.kv-tabla {
  display: flex;
  flex-direction: column;
}
.kv-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: 13px;
}
.kv-row:last-child { border-bottom: none; }
.kv-label {
  color: var(--gris-texto);
  font-weight: 500;
}
.kv-val {
  word-break: break-word;
}

/* Historial de visitas */
.historial-visitas {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 70vh;
  overflow-y: auto;
}
.visita-fila {
  display: grid;
  grid-template-columns: 140px 1fr 24px;
  gap: 8px;
  padding: 10px;
  background: var(--surface-2);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  align-items: center;
}
.visita-fila:hover { background: #f3f4f6; }
.visita-fecha {
  font-size: 12px;
  color: var(--gris-texto);
}
.visita-titulo {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.visita-chevron {
  color: var(--gris-texto);
  font-size: 20px;
  text-align: right;
}
.visita-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: #e5e7eb;
  color: #374151;
}
.visita-badge-draft { background: #fef3c7; color: #92400e; }
.visita-badge-confirmed { background: #dcfce7; color: #166534; }
.visita-badge-pedido { background: var(--rosa-claro); color: var(--rosa); }
.visita-badge-sin { background: #f3f4f6; color: var(--gris-texto); }

/* Modal elegir catálogo para visita */
.lista-catalogos-visita {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 50vh;
  overflow-y: auto;
}
.btn-elegir-cat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--gris-borde);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.15s;
}
.btn-elegir-cat:hover {
  background: var(--rosa-claro);
  border-color: var(--rosa);
}

/* Panel anotaciones dentro del visor */
.visor-anotaciones {
  background: var(--surface);
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 12px;
  margin-top: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}
.visor-anotaciones-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: #78350f;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 8px;
}
.visor-anotaciones-vacio {
  font-size: 13px;
  color: var(--gris-texto);
  text-align: center;
  padding: 8px;
  font-style: italic;
}
.visor-anotaciones-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.anot-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #fffbeb;
  border-radius: 8px;
  border-left: 3px solid #f59e0b;
}
.anot-chip-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.anot-chip-texto {
  flex: 1;
  font-size: 13px;
  word-break: break-word;
}
.anot-chip-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 14px;
  flex-shrink: 0;
}
.anot-chip-btn:hover {
  background: rgba(0,0,0,0.06);
}
.anot-chip-btn-borrar:hover {
  background: #fee2e2;
}

/* ============ CARRITO DE LA VISITA (pedido en curso) ============ */
.carrito-fab {
  position: fixed;
  right: 16px;
  /* Carrito abajo a la DERECHA. El 🛟 de incidencias se movió a la izquierda, así que ya
     no hace falta apilar el carrito encima; va a su sitio, en la esquina. */
  bottom: 20px;
  z-index: 9100;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: #166534;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.28);
  /* En tablet, un toque un poco largo seleccionaba el texto "Pedido" y saltaba el menú
     "Buscar en Google" en vez de pulsar. Bloqueamos selección y callout táctil. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
.carrito-fab:hover { background: #14532d; }
/* El carrito es hijo de .visor-shell y en PANTALLA COMPLETA se ocultaba (regla que esconde
   todo lo que no sea la lámina): por eso "no hacía nada". Lo mostramos por encima del fondo. */
body.visor-fullscreen-activo .carrito-fab { display: inline-flex !important; z-index: 9600; }
.carrito-fab-badge {
  background: var(--surface);
  color: #166534;
  border-radius: 999px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
}
.carrito-overlay {
  position: fixed;
  inset: 0;
  /* Por encima de la capa de pantalla completa (9000): si no, se abría por debajo de la
     lámina y parecía que el botón no funcionaba. */
  z-index: 9600;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.carrito-panel {
  background: var(--blanco, #fff);
  width: 100%;
  max-width: 560px;
  max-height: 82vh;
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.3);
  animation: carritoSube 0.18s ease-out;
}
@keyframes carritoSube { from { transform: translateY(24px); opacity: 0.6; } to { transform: translateY(0); opacity: 1; } }
.carrito-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 6px;
}
.carrito-titulo { font-size: 17px; font-weight: 700; }
.carrito-cerrar {
  background: none; border: none; cursor: pointer;
  font-size: 20px; color: var(--gris-texto); padding: 4px 8px; border-radius: 6px;
}
.carrito-cerrar:hover { background: rgba(0,0,0,0.06); }
.carrito-sub { padding: 0 16px 8px; font-size: 12px; color: var(--gris-texto); }
.carrito-lista {
  flex: 1;
  overflow-y: auto;
  padding: 4px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.carrito-vacio { padding: 32px 16px; text-align: center; color: var(--gris-texto); font-size: 14px; line-height: 1.5; }
.carrito-linea {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--gris-borde, #e5e7eb);
  border-radius: 10px;
  background: var(--surface-2);
}
.carrito-linea-ir {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 8px;
  padding: 4px 8px;
  cursor: pointer;
  flex-shrink: 0;
  min-width: 54px;
}
.carrito-linea-ir:hover { background: #d1fae5; }
.carrito-linea-icon { font-size: 15px; }
.carrito-linea-num { font-size: 11px; font-weight: 700; color: #166534; white-space: nowrap; }
.carrito-linea-texto { flex: 1; font-size: 13px; word-break: break-word; }
.carrito-linea-acc { display: flex; gap: 2px; flex-shrink: 0; }
.carrito-btn {
  background: none; border: none; cursor: pointer;
  padding: 6px 8px; border-radius: 6px; font-size: 15px;
}
.carrito-btn:hover { background: rgba(0,0,0,0.06); }
.carrito-btn-quitar:hover { background: #fee2e2; }
.carrito-footer {
  display: flex;
  gap: 8px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--gris-borde, #e5e7eb);
}
.carrito-footer .carrito-seguir { flex: 1; }
@media (min-width: 640px) {
  .carrito-overlay { align-items: center; }
  .carrito-panel { border-radius: 16px; max-height: 80vh; }
}

/* Fondo blanco en TODAS las vistas de lámina: los PNG llevan transparencia y sin
   esto las zonas transparentes se ven negras (grid, mosaico, lightbox, editor). */
.lamina-mini,
.visor-mosaico-img,
.mosaico-img,
.zonas-lienzo-img,
.lightbox-img {
  background: var(--img-fill);
}

/* Badge de anotaciones en mosaico */
.visor-mosaico-anots {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(245, 158, 11, 0.95);
  color: white;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 600;
  z-index: 2;
}

/* Detalle visita: filas de anotaciones */
.anot-fila {
  display: flex;
  gap: 12px;
  padding: 10px;
  border-bottom: 1px solid #f3f4f6;
  align-items: center;
}
.anot-fila:last-child { border-bottom: none; }
.anot-fila .lamina-mini {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 6px;
}
.anot-info {
  flex: 1;
  min-width: 0;
}
.anot-titulo {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 2px;
}
.anot-texto {
  font-size: 13px;
  color: #374151;
  word-break: break-word;
  white-space: pre-wrap;
}

/* ============================================================================
   D - PLANTILLAS DE ANOTACION
   ============================================================================ */

/* Pantalla de gestión */
.plantilla-lista {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.plantilla-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--gris-borde);
  border-radius: 8px;
  cursor: grab;
  transition: background 0.15s;
}
.plantilla-fila:hover {
  background: var(--surface-2);
}
.plantilla-fila.lamina-arrastrando {
  opacity: 0.4;
}
.plantilla-tipo-badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 10px;
  font-weight: 500;
  flex-shrink: 0;
}
.tipo-pedido { background: #dcfce7; color: #166534; }
.tipo-devolucion { background: #fef3c7; color: #92400e; }
.tipo-nota { background: #e5e7eb; color: #374151; }
/* Clases de PEDIDO: descuento % (ámbar) vs bonificación en género (violeta) */
.tpl-badge-descuento { background: color-mix(in srgb, var(--amber) 20%, transparent); color: var(--amber); }
.tpl-badge-bonif { background: color-mix(in srgb, var(--violet) 18%, transparent); color: var(--violet); }
.plantilla-texto {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  min-width: 0;
  word-break: break-word;
}
.plantilla-acciones {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.plantilla-acciones button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 4px 6px;
  border-radius: 4px;
}
.plantilla-acciones button:hover {
  background: rgba(0,0,0,0.06);
}
.plantilla-acciones .btn-borrar:hover {
  background: #fee2e2;
}

/* Chips de plantillas en el modal de anotar */
.anot-chips-plantillas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 130px;
  overflow-y: auto;
  padding: 6px;
  background: var(--surface-2);
  border-radius: 8px;
  border: 1px solid #f3f4f6;
}
.chip-plantilla {
  background: var(--surface);
  border: 1px solid var(--gris-borde);
  border-radius: 16px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.chip-plantilla:hover {
  background: var(--rosa-claro);
  border-color: var(--rosa);
  color: var(--rosa);
}
.chip-plantilla:active {
  transform: scale(0.96);
}

/* ============================================================================
   C - CONFIGURACION DE EMAILS
   ============================================================================ */

/* Interruptor modo pruebas/produccion */
.modo-switch-bg {
  display: flex;
  background: #f3f4f6;
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
}
.modo-btn {
  flex: 1;
  padding: 14px;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  color: var(--gris-texto);
}
.modo-btn-activo.modo-btn-pruebas {
  background: var(--surface);
  color: #b91c1c;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.modo-btn-activo.modo-btn-prod {
  background: var(--surface);
  color: #166534;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Log de emails enviados en detalle visita */
.emails-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.email-fila {
  display: flex;
  gap: 12px;
  padding: 10px;
  background: var(--surface-2);
  border-radius: 8px;
  border-left: 3px solid #166534;
  align-items: flex-start;
}
.email-fila-error {
  border-left-color: #dc2626;
  background: #fef2f2;
}
.email-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
}
.email-badge-ok { background: #dcfce7; color: #166534; }
.email-badge-fail { background: #fee2e2; color: #991b1b; }
.email-badge-pruebas { background: #fee2e2; color: #b91c1c; }
.email-badge-prod { background: #dcfce7; color: #166534; }

/* form-group consistente con el resto de la app */
.editor-panel .form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 4px;
}
.editor-panel .form-group input,
.editor-panel .form-group textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--gris-borde);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
}
.editor-panel .form-group input:focus,
.editor-panel .form-group textarea:focus {
  border-color: var(--rosa);
}
.editor-panel .form-group {
  margin-bottom: 12px;
}

/* ============================================================================
   F - PANEL ULTIMA VISITA
   ============================================================================ */

.ultima-visita-panel {
  background: linear-gradient(180deg, #fffbeb, #fff);
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 14px 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* En el visor el panel se llama "privado" - rojo */
.ultima-visita-panel-privada {
  background: linear-gradient(180deg, #fef2f2, #fff);
  border-color: #fecaca;
}

.uv-cabecera, .uv-cabecera-modal {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.uv-cabecera-privada {
  background: #fee2e2;
  margin: -14px -16px 12px -16px;
  padding: 10px 16px;
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid #fca5a5;
}
.uv-titulo {
  font-size: 14px;
  font-weight: 600;
  color: #78350f;
}
.uv-titulo-privada {
  font-size: 14px;
  font-weight: 700;
  color: #991b1b;
  letter-spacing: 0.3px;
}
.uv-grupo {
  margin-bottom: 8px;
}
.uv-grupo:last-child {
  margin-bottom: 0;
}
.uv-grupo-titulo {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}
.uv-grupo-lista {
  margin: 0;
  padding-left: 22px;
  list-style: disc;
}
.uv-grupo-lista li {
  font-size: 13px;
  margin-bottom: 3px;
  color: #333;
}
.uv-grupo-texto {
  display: block;
  font-size: 12px;
  color: #555;
  margin-left: 0;
  margin-top: 1px;
  font-style: italic;
}
.uv-notas-generales {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #fde68a;
}
.ultima-visita-panel-privada .uv-notas-generales {
  border-top-color: #fecaca;
}

/* Modal ancho para mostrar lista de catalogos con resumen arriba */
.modal-card-ancho {
  max-width: 640px !important;
}

/* Botón "📋 Notas" en barra visor: estilo discreto pero localizable */
.visor-modo-btn-notas {
  background: #fef3c7 !important;
  border: 1px solid #fde68a !important;
  color: #92400e !important;
}
.visor-modo-btn-notas:hover {
  background: #fde68a !important;
}

/* ============================================================================
   G - PLANNING / RUTERO
   ============================================================================ */

.planning-filtros {
  background: var(--surface);
  border: 1px solid var(--gris-borde);
  border-radius: 12px;
  padding: 12px;
  margin: 14px 0;
}

.planning-chips-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.planning-chip {
  background: #f3f4f6;
  border: 1px solid var(--gris-borde);
  border-radius: 16px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.planning-chip:hover {
  background: #e5e7eb;
}
.planning-chip-activo {
  background: var(--rosa);
  color: white;
  border-color: var(--rosa);
  font-weight: 500;
}

.planning-inputs-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.planning-input {
  padding: 8px 12px;
  border: 1px solid var(--gris-borde);
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  font-family: inherit;
  flex: 1;
  min-width: 180px;
}
.planning-input:focus { border-color: var(--rosa); }

.planning-resumen {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--gris-texto);
  margin-bottom: 10px;
}
.planning-resumen-chip {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 500;
}

.planning-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ===== PLANNING POR ZONA (tarjetas + ruta por cercanía) ===== */
.plan-resumen { display:flex; gap:10px; flex-wrap:wrap; margin:4px 0 12px; }
.plan-kpi { flex:1; min-width:120px; background:var(--surface); border:1px solid var(--gris-borde);
  border-radius:12px; padding:11px 14px; }
.plan-kpi .n { font-size:24px; font-weight:800; line-height:1; }
.plan-kpi .l { font-size:12px; color:var(--gris-texto); margin-top:3px; font-weight:600; }
.plan-kpi.u .n { color:#dc2626; } .plan-kpi.p .n { color:#d97706; } .plan-kpi.a .n { color:#16a34a; }
.plan-barra { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.plan-sub { font-size:12.5px; color:var(--gris-texto); }
.plan-btn-ruta { margin-left:auto; border:0; background:var(--brand,#d80a6b); color:#fff;
  border-radius:11px; padding:10px 16px; font-size:14px; font-weight:800; cursor:pointer;
  font-family:inherit; box-shadow:0 4px 14px -6px rgba(0,0,0,.3); }
.plan-btn-ruta.on { background:#16a34a; }
.plan-zona { margin-top:16px; }
.plan-zona-cab { display:flex; align-items:center; gap:9px; margin-bottom:8px; padding:0 2px; }
.plan-zona-cab h3 { margin:0; font-size:16px; font-weight:800; }
.plan-zona-cuenta { font-size:12px; color:var(--gris-texto); font-weight:600; }
.plan-zona-urg { margin-left:auto; font-size:11.5px; font-weight:800; color:#dc2626;
  background:#fee2e2; padding:3px 9px; border-radius:999px; }
.plan-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
.plan-tar { background:var(--surface); border:1px solid var(--gris-borde); border-radius:14px;
  padding:12px 13px; position:relative; overflow:hidden; cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.05), 0 4px 14px -10px rgba(0,0,0,.18); }
.plan-tar::before { content:""; position:absolute; left:0; top:0; bottom:0; width:5px; }
.plan-tar.u::before { background:#dc2626; } .plan-tar.p::before { background:#d97706; }
.plan-tar.a::before { background:#16a34a; } .plan-tar.s::before { background:#8b7d86; }
.plan-tar-num { position:absolute; top:10px; right:10px; width:24px; height:24px; border-radius:50%;
  background:var(--brand,#d80a6b); color:#fff; font-size:12px; font-weight:800;
  display:none; align-items:center; justify-content:center; }
.plan-grid.con-ruta .plan-tar-num { display:flex; }
.plan-tar-nombre { font-size:15px; font-weight:800; padding-left:6px; padding-right:28px; line-height:1.25; }
.plan-tar-muni { font-size:12.5px; color:var(--gris-texto); padding-left:6px; margin-top:1px; }
.plan-estado { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
  padding:4px 9px; border-radius:999px; margin:8px 0 0 6px; }
.plan-estado .pt { width:8px; height:8px; border-radius:50%; }
.plan-estado.u { background:#fee2e2; color:#dc2626; } .plan-estado.u .pt { background:#dc2626; }
.plan-estado.p { background:#fef3c7; color:#d97706; } .plan-estado.p .pt { background:#d97706; }
.plan-estado.a { background:#dcfce7; color:#16a34a; } .plan-estado.a .pt { background:#16a34a; }
.plan-estado.s { background:#eeeaec; color:#8b7d86; } .plan-estado.s .pt { background:#8b7d86; }
.plan-tar-pie { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; padding-left:6px; }
.plan-ult { font-size:11.5px; color:var(--gris-texto); }
.plan-visita { border:1.5px solid var(--brand,#d80a6b); background:transparent; color:var(--brand,#d80a6b);
  border-radius:9px; padding:6px 11px; font-size:12.5px; font-weight:800; cursor:pointer; font-family:inherit; white-space:nowrap; }
.plan-visita:hover { background:var(--brand,#d80a6b); color:#fff; }

/* ===== SUBTABS Planning / Agenda ===== */
.plan-subtabs { display:flex; gap:6px; margin:6px 0 14px; }
.plan-subtab { flex:1; border:1.5px solid var(--gris-borde); background:var(--surface); color:var(--gris-texto);
  border-radius:11px; padding:11px 14px; font-size:15px; font-weight:700; cursor:pointer; font-family:inherit; }
.plan-subtab.on { background:var(--brand,#d80a6b); border-color:var(--brand,#d80a6b); color:#fff; }

/* ===== AGENDA ===== */
.ag-top { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.ag-seg { display:inline-flex; background:var(--papel-3,#f3ecf0); border-radius:11px; padding:3px; }
.ag-seg button { border:0; background:transparent; color:var(--gris-texto); font-weight:700; font-size:14px;
  padding:8px 16px; border-radius:9px; cursor:pointer; font-family:inherit; }
.ag-seg button.on { background:var(--surface); color:var(--gris-texto-fuerte,inherit); box-shadow:0 1px 3px rgba(0,0,0,.15); }
.ag-rango { font-size:15px; font-weight:800; }
.ag-flechas { display:inline-flex; gap:4px; margin-left:auto; }
.ag-flechas button { min-width:42px; height:40px; padding:0 12px; border:1px solid var(--gris-borde); background:var(--surface);
  border-radius:10px; font-size:15px; font-weight:700; cursor:pointer; color:var(--gris-texto); font-family:inherit; }

.ag-semana { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.ag-dia { background:var(--surface); border:1px solid var(--gris-borde); border-radius:12px; min-height:220px;
  display:flex; flex-direction:column; overflow:hidden; }
.ag-dia.hoy { border-color:var(--brand,#d80a6b); box-shadow:0 0 0 2px var(--marca-suave,#fce7f1); }
.ag-dia-cab { padding:8px 10px; border-bottom:1px solid var(--gris-borde); text-align:center; }
.ag-dia-cab .d { font-size:11.5px; color:var(--gris-texto); font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
.ag-dia-cab .n { font-size:20px; font-weight:800; }
.ag-dia.hoy .ag-dia-cab .n { color:var(--brand,#d80a6b); }
.ag-dia-cuerpo { padding:8px; display:flex; flex-direction:column; gap:7px; flex:1; }
.ag-cita { border-radius:9px; padding:7px 9px; font-size:12px; line-height:1.3; cursor:pointer; border-left:4px solid; position:relative; }
.ag-cita .h { font-weight:800; }
.ag-cita .c { font-weight:600; }
.ag-cita.pend { background:#fef3c7; border-color:#d97706; color:#7c4a03; }
.ag-cita.hecha { background:#dcfce7; border-color:#16a34a; color:#14532d; }
.ag-cita.hecha .c { text-decoration:line-through; }
.ag-cita.hecha .tick { position:absolute; top:6px; right:7px; color:#16a34a; font-weight:900; }
.ag-cita.cancelada { background:#f3f4f6; border-color:#9ca3af; color:#6b7280; opacity:.7; }
.ag-hueco { border:1.5px dashed var(--gris-borde); border-radius:9px; color:var(--gris-texto); font-size:11.5px;
  text-align:center; padding:8px; font-weight:600; cursor:pointer; }
.ag-hueco:hover { border-color:var(--brand,#d80a6b); color:var(--brand,#d80a6b); }

.ag-dia-vista { background:var(--surface); border:1px solid var(--gris-borde); border-radius:14px; overflow:hidden; }
.ag-franja { display:grid; grid-template-columns:64px 1fr; border-top:1px solid var(--gris-borde); }
.ag-franja:first-child { border-top:0; }
.ag-franja .hh { padding:12px 10px; font-size:12.5px; color:var(--gris-texto); font-weight:700; border-right:1px solid var(--gris-borde); }
.ag-franja .cont { padding:8px 10px; display:flex; flex-direction:column; gap:6px; min-height:52px; cursor:pointer; }

@media (max-width:640px){
  .ag-semana { grid-template-columns:1fr; }
  .ag-dia { min-height:auto; }
}

.planning-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border-radius: 8px;
  border-left: 4px solid #6b7280;
  cursor: pointer;
  transition: background 0.15s;
}
.planning-fila:hover {
  background: var(--surface-2);
}

.planning-chip-estado {
  font-size: 18px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

.planning-fila-info {
  flex: 1;
  min-width: 0;
}
.planning-fila-nombre {
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 2px;
}
.planning-fila-meta {
  font-size: 12px;
  color: #555;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.planning-fila-tiempo {
  font-size: 12px;
  color: var(--gris-texto);
  margin-top: 2px;
}

.planning-btn-visita {
  flex-shrink: 0;
}

/* Chip mini en lista clientes */
.planning-chip-mini {
  font-size: 14px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  background: #f3f4f6;
  margin-right: 8px;
}

/* Botón link sutil dentro de la ficha */
.btn-link {
  background: none;
  border: none;
  color: var(--rosa);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 6px;
  margin-left: 6px;
  text-decoration: underline;
  font-family: inherit;
}
.btn-link:hover {
  color: #a00060;
}

/* ============================================================================
   B7 - PINS X+Y SOBRE LAMINA
   ============================================================================ */

/* Wrapper relativo para posicionar pins */
.visor-imagen-wrapper {
  position: relative;
  display: inline-block;
  line-height: 0; /* sin gap bajo la imagen */
}
.visor-imagen-wrapper .visor-imagen {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Pin numerado tipo Google Maps */
.visor-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  background: #166534;
  color: white;
  border: 2px solid white;
  border-radius: 50% 50% 50% 0;
  width: 36px;
  height: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  padding: 0;
  font-family: inherit;
  rotate: -45deg;
  transition: transform 0.15s ease;
}
.visor-pin:hover {
  transform: translate(-50%, -100%) scale(1.15);
  z-index: 100;
}
.visor-pin-num {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  rotate: 45deg;
}
.visor-pin-icon {
  font-size: 9px;
  line-height: 1;
  margin-top: 1px;
  rotate: 45deg;
}

/* ============================================================================
   B7 - MODO PANTALLA COMPLETA
   ============================================================================ */

.visor-fullscreen-btn {
  background: var(--rosa);
  color: white;
  border: 0;
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}
.visor-fullscreen-btn:hover {
  background: var(--rosa-oscuro);
}

/* En tablet/móvil: solo icono para ahorrar espacio */
@media (max-width: 900px) {
  .visor-fullscreen-btn {
    padding: 9px 12px;
    min-width: 44px;
  }
  .visor-fullscreen-btn-texto {
    display: none;
  }
}

/* Cuando body tiene .visor-fullscreen-activo: ocultar todo lo que no sea la imagen */
body.visor-fullscreen-activo {
  overflow: hidden;
  background: #000;
}
/* Ocultar TODA la UI menos el contenedor de imagen */
body.visor-fullscreen-activo .nav-bar,
body.visor-fullscreen-activo .visor-cabecera,
body.visor-fullscreen-activo .visor-nav-superior,
body.visor-fullscreen-activo .visor-info-lamina,
body.visor-fullscreen-activo .visor-anotaciones,
body.visor-fullscreen-activo .visor-export-bar,
body.visor-fullscreen-activo .visor-zoom-hint,
body.visor-fullscreen-activo .barra-visita-activa,
body.visor-fullscreen-activo .visor-buscador-fila,
body.visor-fullscreen-activo .editor-pestanas,
body.visor-fullscreen-activo .visor-modo-switch,
body.visor-fullscreen-activo .visor-titulo-bloque,
body.visor-fullscreen-activo .btn-icon-volver,
body.visor-fullscreen-activo .barra-impersonacion,
body.visor-fullscreen-activo .nav-tabs,
body.visor-fullscreen-activo header,
body.visor-fullscreen-activo .header-cabecera,
body.visor-fullscreen-activo .contenedor > *:not(#vista-contenido),
body.visor-fullscreen-activo .visor-shell > *:not(.visor-presentacion) {
  display: none !important;
}
/* Forzar la imagen y su contenedor a ocupar TODO el viewport */
body.visor-fullscreen-activo,
body.visor-fullscreen-activo .contenedor,
body.visor-fullscreen-activo #vista-contenido,
body.visor-fullscreen-activo .visor-shell,
body.visor-fullscreen-activo .visor-presentacion {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;   /* en tablet, 100vh cuenta la barra del navegador y la lámina se salía */
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #000 !important;
  z-index: 9000;
}
/* UNA SOLA FUENTE DE VERDAD PARA EL TAMAÑO. Antes el contenedor usaba una unidad
   (100dvh = 968px en la tablet) y el zoom de dentro otra (100vh = 1024px): el hijo era
   56px más alto que su padre, que recorta, así que la lámina perdía 28px por arriba.
   Ahora el contenedor fijo marca el viewport y TODOS los hijos van al 100% de él. */
body.visor-fullscreen-activo .visor-imagen-contenedor,
body.visor-fullscreen-activo .visor-imagen-zoom {
  flex: 1 0 auto !important;   /* nunca se encoge: si algo más asoma, la lámina manda */
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #000 !important;
  overflow: hidden !important;
}
/* El wrapper se AJUSTA A LA IMAGEN (no al viewport): las zonas clicables se colocan en
   % sobre él, así que si fuera más grande que la lámina los toques caerían torcidos.
   Por eso el límite va en unidades de pantalla, no en %: un max-height del 100% de un
   padre de altura automática no limita nada, y por eso la lámina seguía saliéndose. */
body.visor-fullscreen-activo .visor-imagen-wrapper,
body.visor-fullscreen-activo .visor-imagen {
  max-width: 100vw !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;   /* en tablet descuenta la barra del navegador */
  width: auto !important;
  height: auto !important;
}
body.visor-fullscreen-activo .visor-imagen-wrapper {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
/* La lámina ENTERA siempre: se ajusta al hueco sin recortarse por ningún lado. */
body.visor-fullscreen-activo .visor-imagen {
  object-fit: contain;
  display: block;
}
/* ...Y ENCAJADA A PANTALLA aunque el archivo sea pequeño (incidencia #30: una lámina de
   600x960 salía a 600x960 en medio de la pantalla negra). Con width/height:auto y solo
   max-*, el navegador nunca AMPLÍA. Aquí el ancho se calcula con la proporción real de la
   lámina (--ar, la pone _proporcionLamina al cargar): el menor entre "todo el ancho" y
   "todo el alto × proporción". Así la imagen mide exactamente lo que se ve, sin franjas
   dentro de ella, y el wrapper (y las zonas, que van en %) coinciden con la lámina.
   Va detrás de la regla de width:auto a propósito: misma especificidad, gana esta. */
body.visor-fullscreen-activo .visor-imagen {
  width: min(100vw, calc(100vh * var(--ar, 0.7))) !important;    /* respaldo sin dvh */
  width: min(100vw, calc(100dvh * var(--ar, 0.7))) !important;
  height: auto !important;
}

/* EL CARRITO TAMBIÉN EN PANTALLA COMPLETA. La regla de arriba oculta todo lo que no
   sea la lámina, y el carrito caía dentro: te quedabas sin ver el pedido justo en la
   pantalla donde lo estás haciendo. Ahora acompaña a los controles: aparece al tocar y
   se va solo a los 2,8 s, para no tapar la lámina mientras el cliente la mira.
   (Va después a propósito: misma especificidad que la regla que lo escondía, gana esta.) */
body.visor-fullscreen-activo .visor-shell > .carrito-fab {
  display: inline-flex !important;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
body.visor-fullscreen-activo.visor-fullscreen-controles-visibles .visor-shell > .carrito-fab {
  opacity: 1;
  pointer-events: auto;
}

/* EL 🛟 NO VA ENCIMA DE LA LÁMINA (10 sep 2026). Flotante abajo a la izquierda, tapaba
   justo donde muchas láminas llevan el código y los precios. Dentro del visor tiene su
   botón en la fila de ◀ Anterior / Siguiente ▶ (.visor-sos-btn), así que el flotante se
   oculta mientras esa fila existe. Si un navegador viejo no entiende :has(), no pasa
   nada: se ven los dos, como antes. Fuera del visor (inicio, listas) sigue flotando. */
body:has(.visor-nav-superior) .btn-incidencia { display: none; }
.visor-sos-btn { flex: 0 0 auto; min-width: 52px; padding-left: 12px; padding-right: 12px; font-size: 20px; }
/* En pantalla completa la fila está oculta: el flotante vuelve, pero como el carrito,
   solo al tocar la pantalla y se va a los pocos segundos, para no tapar la lámina. */
body.visor-fullscreen-activo .btn-incidencia {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  bottom: 18px !important;   /* en modo sencillo iba a 96px por la franja, que aquí no está */
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
body.visor-fullscreen-activo.visor-fullscreen-controles-visibles .btn-incidencia {
  opacity: 1;
  pointer-events: auto;
}

/* Controles auto-ocultos */
.fullscreen-controles {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
body.visor-fullscreen-controles-visibles .fullscreen-controles {
  opacity: 1;
  pointer-events: auto;
}

/* Inyectamos los controles dinamicamente via JS, pero su CSS lo dejamos aqui */
.fs-btn {
  background: rgba(0,0,0,0.6);
  color: white;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  width: 56px;
  height: 56px;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}
.fs-btn:hover { background: rgba(0,0,0,0.85); }
.fs-btn:disabled { opacity: 0.3; cursor: not-allowed; }
/* Botón "↩ Volver" del overlay de pantalla completa (cuando venimos de un enlace entre
   catálogos): en ⛶ se ocultan la cabecera y la barra flotante, así que el retorno tiene
   que estar aquí. Píldora con texto, no círculo. */
.fs-btn-volver {
  width: auto;
  height: 48px;
  border-radius: 24px;
  padding: 0 18px;
  gap: 6px;
  font-size: 15px;
  font-weight: 800;
  background: rgba(30,58,138,0.92);
  white-space: nowrap;
}
.fs-btn-volver:hover { background: rgba(30,58,138,1); }
/* Mismo motivo que .barra-enlace: con el banner de actualización visible, bajarlo. */
body.con-banner-update .fs-btn-volver { top: 66px !important; }

/* ============================================================================
   B7 - MODAL PRIVADO (cuando se anota en fullscreen)
   ============================================================================ */

.modal-bg-discreto {
  background: rgba(0,0,0,0.4); /* menos oscuro que el normal */
  z-index: 10000;
}
.modal-card-privado {
  max-width: 420px !important;
  border: 2px solid #dc2626;
  box-shadow: 0 8px 24px rgba(220,38,38,0.4) !important;
}
.modal-cabecera-privada {
  background: #dc2626;
  color: white;
  padding: 8px 14px;
  margin: -16px -16px 12px -16px;
  border-radius: 12px 12px 0 0;
}
.modal-cabecera-privada-titulo {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-align: center;
}

/* ============================================================================
   H - MAPA
   ============================================================================ */

.contenedor-mapa {
  max-width: 1400px;
}

.mapa-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
}
.mapa-chips-modo {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.mapa-info {
  font-size: 13px;
  color: var(--gris-texto);
}

.mapa-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 14px;
  min-height: 600px;
}
@media (max-width: 900px) {
  .mapa-layout {
    grid-template-columns: 1fr;
  }
}

.mapa-leaflet {
  height: 600px;
  border-radius: 12px;
  border: 1px solid var(--gris-borde);
  background: #f3f4f6;
}

.mapa-lateral {
  background: var(--surface);
  border: 1px solid var(--gris-borde);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  max-height: 600px;
}
.mapa-lateral h4 {
  margin-top: 0;
  font-size: 14px;
  color: #333;
}

.mapa-seleccionados-lista {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 10px;
}

.mapa-sel-fila {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border-radius: 8px;
  background: var(--surface-2);
  margin-bottom: 4px;
}
.mapa-sel-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.mapa-sel-info {
  flex: 1;
  min-width: 0;
}
.mapa-sel-nombre {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mapa-sel-meta {
  font-size: 11px;
  color: var(--gris-texto);
}
.mapa-sel-quitar {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #999;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: inherit;
}
.mapa-sel-quitar:hover {
  background: #fee2e2;
  color: #dc2626;
}

.mapa-acciones {
  display: flex;
  gap: 8px;
}
.mapa-acciones .btn {
  flex: 1;
}

.mapa-ruta-info {
  margin-top: 10px;
}
.mapa-ruta-resumen {
  background: color-mix(in srgb, var(--brand) 7%, var(--surface));
  border: 1px solid #fbcfe8;
  border-radius: 8px;
  padding: 10px;
  font-size: 13px;
  color: #831843;
}

/* Botones dentro de popups de Leaflet */
.leaflet-popup-btn {
  background: var(--surface);
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.leaflet-popup-btn:hover {
  border-color: var(--rosa);
  color: var(--rosa);
}
.leaflet-popup-btn-primary {
  background: var(--rosa);
  color: white;
  border-color: var(--rosa);
}
.leaflet-popup-btn-primary:hover {
  background: #a00060;
  color: white;
}

/* ============================================================================
   J - DESCARGAR CATALOGO
   ============================================================================ */

.catalogo-card-acciones {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gris-borde);
}

.btn-card-mini {
  background: var(--surface-2);
  border: 1px solid var(--gris-borde-2);
  border-radius: 9px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  color: var(--texto);
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.btn-card-borrar { border-color: #fca5a5 !important; color: #dc2626 !important; }
.btn-card-borrar:hover { background: #fee2e2 !important; border-color: #dc2626 !important; }

/* Botón de quitar/borrar seleccionadas en el mosaico (rojo, para que se distinga). */
.mosaico-btn-quitar { background: #fee2e2; color: #dc2626; border: 1px solid #fca5a5; font-weight: 700; }
.mosaico-btn-quitar:hover { background: #dc2626; color: #fff; }

/* SOLO VISOR: se ocultan las pestañas de navegación; el comercial solo mira catálogos. */
body.solo-visor .navtabs { display: none !important; }

/* SOLO VISOR: la lámina LO MÁS GRANDE POSIBLE. El visor normal apila ~300px de barras
   encima de la lámina (barra superior de la app + cabecera con buscador/categorías + barra
   de navegación) y la deja pequeña. Aquí, como solo se MIRA, se recupera ese espacio:
   - se oculta la barra superior de la app,
   - la cabecera se encoge y el buscador/categorías se pliegan tras la lupa 🔍,
   - la barra ◀/▶ se superpone abajo sobre la lámina,
   - la imagen se limita por ANCHO y por ALTURA para llenar la pantalla. */
body.solo-visor .topbar { display: none !important; }
/* El body reserva 50px arriba para una barra fija que en solo-visor no existe: se recupera. */
body.solo-visor { padding-top: 0 !important; }
body.solo-visor .visor-cabecera { padding: 4px 8px; gap: 4px; }
/* Buscador y categorías: ocultos por defecto, se abren con el botón 🔍 (toggle) */
body.solo-visor .visor-buscador-fila,
body.solo-visor .visor-chips-cats { display: none; }
body.solo-visor .visor-cabecera.solovisor-buscar-abierto .visor-buscador-fila { display: flex; }
body.solo-visor .visor-cabecera.solovisor-buscar-abierto .visor-chips-cats { display: flex; flex-wrap: wrap; }
.solovisor-solo { display: none; }        /* 📄 y ✉️: solo en modo solo-visor */
body.solo-visor .solovisor-solo { display: inline-flex; }
/* BUSCAR LÁMINA: en el visor normal la barra de búsqueda está siempre a la vista, así que el
   botón sobra. En solo-visor y en modo sencillo la cabecera va despejada y el buscador se
   pliega: ahí SÍ hace falta el 🔍 para poder buscar por nombre, número o categoría. */
/* OJO con la especificidad: más abajo hay `body.modo-simple .visor-modo-btn {display:none}`
   con la MISMA fuerza y, al ir después, ganaba y el 🔍 seguía oculto. Por eso aquí se
   encadena `.visor-modo-btn.btn-buscar-lamina` (más específico): gana esté donde esté. */
.btn-buscar-lamina { display: none; }
body.solo-visor .visor-modo-btn.btn-buscar-lamina,
body.modo-simple .visor-modo-btn.btn-buscar-lamina { display: inline-flex !important; }

body.solo-visor .visor-presentacion {
  padding: 2px;
  gap: 4px;
  min-height: calc(100vh - 52px - var(--solovisor-extra, 0px));   /* respaldo para navegadores viejos (Chrome <108 sin dvh) */
  min-height: calc(100dvh - 52px - var(--solovisor-extra, 0px));
  justify-content: center;
}
/* Barra de navegación ◀ 1/372 ▶: fina y en su fila (NO superpuesta) para no tapar datos
   de la lámina pegados al borde. Va arriba de la imagen (su sitio natural en el DOM). */
body.solo-visor .visor-nav-superior {
  width: auto; max-width: 96vw; margin: 0 auto;
  padding: 5px 8px; gap: 8px;
}
body.solo-visor .visor-nav-btn { padding: 7px 14px; min-width: 0; }
body.solo-visor .visor-export-bar { display: none; }   /* descargas: no en modo solo mirar */
/* La imagen ocupa el resto: alto de pantalla MENOS cabecera fina + barra de navegación.
   Así la barra nunca se solapa con la lámina. */
body.solo-visor .visor-imagen-contenedor {
  max-width: 100vw;
  /* --solovisor-extra lo pone renderApp() con lo que ocupen las barras de arriba
     (banner de "estas viendo como...", etc.). Con el 112px fijo, en cuanto aparecia
     una barra la lamina se salia por abajo (incidencia #5 de eva). */
  max-height: calc(100vh - 112px - var(--solovisor-extra, 0px));   /* respaldo Chrome <108 (sin dvh) */
  max-height: calc(100dvh - 112px - var(--solovisor-extra, 0px));
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.solo-visor .visor-imagen-zoom {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.solo-visor .visor-imagen {
  width: auto;
  /* NORMALIZAR el tamaño: la lámina ocupa SIEMPRE todo el alto disponible, tenga la
     resolución que tenga. Con height:auto + solo max-height, las láminas subidas a baja
     resolución (p.ej. 600x960) se veían pequeñas porque no se ampliaban; ahora todas se
     ven al mismo tamaño (incidencia #16). max-width evita que una lámina ancha se salga;
     max-height queda de respaldo. Las de baja resolución se verán algo menos nítidas hasta
     resubirlas a buena resolución. */
  height: calc(100vh - 112px - var(--solovisor-extra, 0px));   /* respaldo Chrome <108 (sin dvh) */
  height: calc(100dvh - 112px - var(--solovisor-extra, 0px));
  max-width: 100%;
  max-height: calc(100vh - 112px - var(--solovisor-extra, 0px));
  max-height: calc(100dvh - 112px - var(--solovisor-extra, 0px));
  object-fit: contain;
  border-radius: 6px;
}
.solovisor-volver {
  position: fixed; top: 10px; left: 10px; z-index: 9700;
  min-height: 44px; padding: 0 16px; border: none; border-radius: 12px;
  background: #7c3aed; color: #fff; font-size: 15px; font-weight: 800; cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(124,58,237,.7);
}
.solovisor-volver:active { transform: scale(.97); }
/* Cuando está el botón morado fijo "← Catálogos" (arriba-izquierda), la cabecera se indenta
   para que NO se solape con el título ni el buscador (incidencia #19, se veía en PC). Solo en
   pantallas anchas: en móvil el botón y la cabecera no chocan igual. */
@media (min-width: 600px) {
  body.solo-visor.solovisor-con-volver .visor-cabecera { padding-left: 168px; }
}
.solovisor-instalar {
  position: fixed; bottom: 14px; left: 14px; z-index: 9700;
  min-height: 46px; padding: 0 18px; border: none; border-radius: 14px;
  background: #16a34a; color: #fff; font-size: 15px; font-weight: 800; cursor: pointer;
  box-shadow: 0 8px 20px -6px rgba(22,163,74,.7);
}
.solovisor-instalar:active { transform: scale(.97); }
/* En solo-visor la esquina inferior IZQUIERDA la ocupa el botón verde de instalar, así que
   ahí el 🛟 se queda a la DERECHA (no hay carrito en solo-visor con el que chocar). */
body.solo-visor .btn-incidencia { left: auto; right: 18px; }

/* ENVIAR LÁMINAS: barra flotante inferior + selección en el mosaico */
.barra-enviar-laminas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9800;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.98); border-top: 1px solid var(--gris-borde);
  box-shadow: 0 -6px 20px -8px rgba(0,0,0,.25);
}
.barra-enviar-laminas .bel-cancel {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid var(--gris-borde); background: var(--gris-bg); color: #444;
  font-size: 16px; font-weight: 800; cursor: pointer;
}
.barra-enviar-laminas .bel-info { flex: 1; font-size: 13px; color: var(--gris-texto); }
.barra-enviar-laminas .bel-enviar {
  flex: 0 0 auto; min-height: 44px; padding: 0 18px; border: none; border-radius: 12px;
  background: #16a34a; color: #fff; font-size: 15px; font-weight: 800; cursor: pointer;
}
.barra-enviar-laminas .bel-enviar:disabled { background: var(--gris-borde); color: #888; cursor: not-allowed; }
/* Botón imprimir: mismo tamaño que enviar, color distinto para diferenciarlos (incidencia #18). */
.barra-enviar-laminas .bel-imprimir { background: #4f46e5; }
.barra-enviar-laminas .bel-imprimir:disabled { background: var(--gris-borde); }
/* la barra no debe tapar el final del mosaico */
.visor-mosaico.mosaico-enviar { padding-bottom: 80px; }
/* casilla de selección en cada celda */
.visor-mosaico-celda .celda-check {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px;
  border-radius: 50%; background: rgba(255,255,255,.9); border: 2px solid #cbd5e1;
  color: transparent; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 900; z-index: 3;
}
.visor-mosaico-celda.celda-sel { outline: 3px solid #16a34a; outline-offset: -3px; }
.visor-mosaico-celda.celda-sel .celda-check { background: #16a34a; border-color: #16a34a; color: #fff; }
.visor-mosaico.mosaico-enviar .visor-mosaico-celda { cursor: pointer; }
.btn-card-mini:hover {
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--brand) 40%, var(--gris-borde-2));
  color: var(--brand);
  transform: translateY(-1px);
}

.descargar-opciones {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.descargar-opcion {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  background: var(--surface);
  border: 2px solid var(--gris-borde);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all 0.15s;
}
.descargar-opcion:hover:not(:disabled) {
  border-color: var(--rosa);
  background: color-mix(in srgb, var(--brand) 7%, var(--surface));
}
.descargar-opcion:disabled {
  cursor: wait;
}

.descargar-opcion-icono {
  font-size: 32px;
  flex-shrink: 0;
}

.descargar-opcion-info {
  flex: 1;
}

.descargar-opcion-titulo {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin-bottom: 2px;
}

.descargar-opcion-desc {
  font-size: 12px;
  color: var(--gris-texto);
  line-height: 1.4;
}

/* ============================================================================
   E - PESTAÑAS DEL EDITOR DE CATALOGO + HISTORIAL DE VERSIONES
   ============================================================================ */

.editor-pestanas {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--gris-borde);
  flex-wrap: wrap;
}

.editor-pestana {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  color: var(--gris-texto);
  margin-bottom: -2px;
  border-radius: 10px 10px 0 0;
  transition: color 0.15s, background 0.15s;
}
.editor-pestana:hover {
  color: var(--brand);
  background: var(--surface-3);
}
.editor-pestana-activa {
  color: var(--brand);
  font-weight: 700;
  border-bottom-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}

.versiones-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.version-fila {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--gris-borde);
  border-radius: 10px;
}
.version-fila:hover {
  background: color-mix(in srgb, var(--brand) 7%, var(--surface));
  border-color: var(--rosa);
}

.version-badge {
  background: linear-gradient(135deg, #cc007a, #dc2675);
  color: white;
  font-weight: 700;
  font-size: 18px;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(204, 0, 122, 0.3);
}

.version-info {
  flex: 1;
  min-width: 0;
}

.version-cabecera {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.version-titulo {
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

.version-meta {
  font-size: 12px;
  color: var(--gris-texto);
}

.version-fecha {
  font-size: 12px;
  color: var(--gris-texto);
  margin-bottom: 4px;
}

.version-notas {
  font-size: 13px;
  color: #555;
  font-style: italic;
  margin-top: 6px;
  padding-left: 12px;
  border-left: 3px solid var(--rosa);
}

.version-acciones {
  display: flex;
  gap: 6px;
  flex-direction: column;
}

@media (max-width: 600px) {
  .version-fila {
    flex-wrap: wrap;
  }
  .version-acciones {
    flex-direction: row;
    width: 100%;
  }
  .version-acciones .btn-card-mini {
    flex: 1;
  }
}

/* ============================================================================
   I - MODO OFFLINE (PWA + IndexedDB)
   ============================================================================ */

/* Indicador de estado online/offline en topbar */
.indicador-online {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.indicador-online-on {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}
.indicador-online-off {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
  animation: pulso-offline 2s ease-in-out infinite;
}
@keyframes pulso-offline {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Notificación in-app de cambio de estado online/offline */
.notif-online {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%) translateY(-30px);
  color: white;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  opacity: 0;
  transition: all 0.35s ease;
  z-index: 99999;
  pointer-events: none;
}
.notif-online-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Badge en tarjeta de catálogo cuando está descargado offline */
.catalogo-card-offline {
  margin-left: auto;
  font-size: 16px;
  filter: drop-shadow(0 0 4px rgba(22, 163, 74, 0.4));
}

/* Botón "✅ Offline" cuando ya está descargado (estilo verde) */
.btn-card-offline-on {
  background: #dcfce7 !important;
  border-color: #86efac !important;
  color: #166534 !important;
  font-weight: 600;
}
.btn-card-offline-on:hover {
  background: #bbf7d0 !important;
  color: #14532d !important;
}

/* I.2 - Aviso offline en visor */
.visor-aviso-offline {
  background: #fef3c7;
  color: #78350f;
  padding: 8px 14px;
  font-size: 12px;
  border-bottom: 1px solid #fcd34d;
  text-align: center;
}

/* ============================================================================
   I.3 - SINCRONIZACIÓN Y VISITAS PENDIENTES
   ============================================================================ */

.indicador-pendientes {
  background: #d97706;
  color: white;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
  cursor: pointer;
  animation: pulso-pendiente 2.5s infinite;
}
.indicador-pendientes:hover {
  background: #b45309;
}
@keyframes pulso-pendiente {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.visita-pendiente-fila {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid #e5e7eb;
}
.visita-pendiente-fila:last-child {
  border-bottom: none;
}
.visita-pendiente-info {
  flex: 1;
  min-width: 0;
}

/* ============================================================================
   PWA UPDATE BANNER - aviso "hay actualización disponible"
   ============================================================================ */

.pwa-update-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(90deg, #cc007a, #dc2675);
  color: white;
  padding: 10px 14px;
  display: none;
  align-items: center;
  gap: 10px;
  z-index: 999999;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  font-size: 14px;
  font-family: inherit;
}

.pwa-update-banner-visible {
  display: flex;
  animation: pwa-update-banner-in 0.4s ease-out;
}

@keyframes pwa-update-banner-in {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.pwa-update-banner-texto {
  flex: 1;
  font-weight: 500;
}

.pwa-update-banner-btn {
  background: var(--surface);
  color: #cc007a;
  border: none;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s;
}
.pwa-update-banner-btn:hover {
  transform: scale(1.05);
}

.pwa-update-banner-cerrar {
  background: rgba(255,255,255,0.2);
  color: white;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.pwa-update-banner-cerrar:hover {
  background: rgba(255,255,255,0.35);
}

/* Empujar contenido cuando banner está visible (evitar que tape topbar) */
body.con-banner-update {
  padding-top: 50px;
}
/* La barra de volver de un ENLACE entre catálogos va position:fixed a top:0, así que el
   padding-top del body NO la mueve: el banner rosa (z-index 999999) se le ponía justo
   ENCIMA y el comercial se quedaba sin botón para volver al catálogo de origen —
   parecía que el enlace no tuviera vuelta. Con el banner visible, la barra baja debajo. */
body.con-banner-update .barra-enlace {
  top: 50px;
}
@media (max-width: 600px) {
  body.con-banner-update .barra-enlace { top: 45px; }
}

@media (max-width: 600px) {
  .pwa-update-banner {
    padding: 8px 10px;
    font-size: 13px;
    gap: 6px;
  }
  .pwa-update-banner-texto {
    font-size: 12px;
  }
  .pwa-update-banner-btn {
    padding: 5px 10px;
    font-size: 12px;
  }
  body.con-banner-update {
    padding-top: 45px;
  }
}

/* ============================================================================
   FASE 1 - PRODUCTOS
   ============================================================================ */

.productos-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.producto-fila {
  display: grid;
  grid-template-columns: 85px 110px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 13px;
  background: var(--surface);
  border: 1px solid var(--gris-borde);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}
.producto-fila:hover {
  border-color: color-mix(in srgb, var(--brand) 32%, var(--gris-borde));
  background: color-mix(in srgb, var(--brand) 5%, var(--surface));
  box-shadow: var(--shadow-sm);
}
.producto-fila-inactivo {
  opacity: 0.55;
}

.prod-badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}
.prod-badge-sage {
  background: #dbeafe;
  color: #1e40af;
}
.prod-badge-comercial {
  background: #fef3c7;
  color: #78350f;
}

.producto-codigo {
  font-family: monospace;
  font-size: 13px;
  font-weight: 600;
  color: #444;
}

.producto-info {
  min-width: 0;
}
.producto-nombre {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.producto-meta {
  font-size: 11px;
  color: var(--gris-texto);
  margin-top: 2px;
}

.producto-precios {
  text-align: right;
  font-size: 12px;
}
.producto-precio-pvp {
  color: #16a34a;
  font-weight: 600;
}
.producto-precio-pvf {
  color: var(--rosa);
  font-weight: 500;
  font-size: 11px;
}

@media (max-width: 600px) {
  .producto-fila {
    grid-template-columns: 70px 1fr;
    grid-template-areas:
      "badge codigo"
      "info info"
      "precios precios";
  }
  .producto-fila .prod-badge { grid-area: badge; }
  .producto-fila .producto-codigo { grid-area: codigo; }
  .producto-fila .producto-info { grid-area: info; }
  .producto-fila .producto-precios { grid-area: precios; text-align: left; }
}

/* ============================================================================
   FASE 2.a — Autocomplete de productos (modal anotar visita)
   ============================================================================ */
.ac-producto-wrap {
  position: relative;
}
.ac-producto-input {
  width: 100%;
  padding: 10px 36px 10px 12px;
  border: 1px solid var(--gris-borde, #e5e7eb);
  border-radius: 8px;
  font-size: 14px;
  background: var(--surface);
  box-sizing: border-box;
}
.ac-producto-input:focus {
  border-color: var(--rosa-principal, #cc007a);
  outline: none;
  box-shadow: 0 0 0 3px rgba(204, 0, 122, 0.1);
}
.ac-producto-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: #f3f4f6;
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--gris-texto);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ac-producto-clear:hover {
  background: #e5e7eb;
  color: var(--texto);
}
.ac-producto-resultados {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--gris-borde, #e5e7eb);
  border-radius: 8px;
  margin-top: 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  max-height: 320px;
  overflow-y: auto;
  z-index: 10000;
}
.ac-item {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
  font-size: 13px;
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover { background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
.ac-item-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.ac-item-tipo { font-size: 14px; }
.ac-item-pvf {
  margin-left: auto;
  color: var(--rosa-principal, #cc007a);
  font-weight: 600;
  font-size: 12px;
}
.ac-item-row2 {
  color: var(--gris-texto);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ac-loading, .ac-empty {
  padding: 14px;
  text-align: center;
  color: var(--gris-texto);
  font-size: 13px;
  font-style: italic;
}
.ac-producto-seleccionado {
  margin-top: 8px;
}
.ac-producto-card {
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
}
.ac-producto-card-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.ac-producto-card-row2 {
  color: #14532d;
  font-size: 12px;
}
.ac-badge-sage, .ac-badge-promo {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}
.ac-badge-sage {
  background: #dbeafe;
  color: #1e40af;
}
.ac-badge-promo {
  background: #fef3c7;
  color: #78350f;
}
.ac-pvf {
  margin-left: auto;
  color: var(--rosa-principal, #cc007a);
  font-weight: 700;
}

/* ============================================================================
   FASE 2.b' — Editor de zonas sobre láminas
   ============================================================================ */
.zonas-editor-overlay {
  position: fixed;
  inset: 0;
  background: #1f2937;
  z-index: 20000;
  display: flex;
  flex-direction: column;
}
.zonas-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #111827;
  color: #fff;
  flex-shrink: 0;
}
/* Los .btn son width:100% por defecto (pensados para formularios). En la barra
   del editor de zonas van en fila, así que aquí miden lo que mida su texto: sin
   esto, al permitir el salto de línea cada botón se comía una fila entera. */
.zonas-editor-header .btn {
  width: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}
.zonas-contador {
  background: #374151;
  color: #fff;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
}
.zonas-editor-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.zonas-editor-lienzo-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px;
  overflow: auto;
}
.zonas-ayuda {
  background: #1e3a5f;
  color: #bfdbfe;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.zonas-lienzo-wrap {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  max-width: 100%;
  cursor: crosshair;
  user-select: none;
  touch-action: none;
}
.zonas-lienzo-img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 140px);
  user-select: none;
}
.zonas-capa {
  position: absolute;
  inset: 0;
}
/* F3: overlays de los recuadros de precio en el lienzo del editor (revisión). */
.zonas-recuadros-capa {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* DEBE ir por encima de .zonas-capa: esa capa cubre todo el lienzo y se pinta
     después, así que sin z-index se comía los clics de ✓/✕/F y del arrastre. */
  z-index: 6;
}
/* Tablas de expositor: hueco arrastrable/redimensionable en el lienzo del editor. */
.zonas-tablas-capa { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.zona-tabla-ov {
  position: absolute;
  outline: 3px dashed #0ea5e9;
  background: rgba(14, 165, 233, 0.10);
  box-sizing: border-box;
  pointer-events: none;   /* el interior deja pasar clics a las zonas de debajo */
}
/* Se arrastra por la barra de título; se estira por las asas; ✕ para quitar. */
/* Asa de arrastre: compacta y semitransparente, para no tapar la tabla que ahora
   se ve dentro de la caja (antes ocupaba todo el ancho y cubria su cabecera). */
.zona-tabla-lbl {
  position: absolute; top: 0; left: 0;
  max-width: 62%;
  background: rgba(3, 105, 161, 0.82); color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: 0 0 6px 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  pointer-events: auto; cursor: move;
}
.zona-tabla-lbl:hover { background: #0369a1; }
.zona-tabla-ov .zona-recuadro-asa { border-color: #0ea5e9; pointer-events: auto; }
.zona-tabla-ov .zona-recuadro-del { pointer-events: auto; }

/* La TABLA DE VERDAD dentro de la caja: se ve tal como se va a pegar mientras se
   mueve y se estira, así se comprueba a la vez que es la tabla correcta y que
   cubre el bloque de precios de debajo. Se ancla arriba-izquierda y conserva su
   proporción (igual que al pegarla: ancho del hueco, alto el que le salga). */
/* La imagen es el CONTENIDO de la caja (no va superpuesta): así la caja crece
   con la tabla y lo que ves encuadrado es exactamente lo que se va a pegar. */
/* La tabla llena la caja, pero SIN DEFORMARSE: con height:100% a secas se
   estiraba para cuadrar y el editor mentía (en la lámina salía más baja).
   Con `contain` anclado arriba-izquierda, si no llega abajo SE VE el hueco que
   queda, que es justo lo que hay que saber para ajustar. */
.zona-tabla-img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top left;
  background: #fff;
  pointer-events: none;
  user-select: none;
}
/* 👁 alterna sólida / semitransparente para ver qué hay debajo */
.zona-tabla-ov.translucida .zona-tabla-img { opacity: 0.45; }
.zona-tabla-ojo {
  position: absolute;
  top: 0; right: 26px;
  width: 24px; height: 24px;
  border: 0; border-radius: 0;
  background: #0369a1; color: #fff;
  font-size: 13px; line-height: 24px; padding: 0;
  cursor: pointer; pointer-events: auto;
  z-index: 3;
}
.zona-tabla-ojo:hover { background: #075985; }
.zona-tabla-ov.translucida .zona-tabla-ojo { background: #b45309; }
.zona-tabla-lbl, .zona-tabla-ov .zona-recuadro-del { z-index: 3; }

/* MODO DIBUJAR RECUADRO: solo se dibuja. Zonas y recuadros se atenúan y se hacen
   inertes a propósito (si no, arrastrar sobre una zona la movería en vez de dibujar).
   Se marca en el lienzo para que SE VEA que están desactivados, no que está colgado. */
.zonas-lienzo-wrap.modo-recuadro {
  outline: 3px dashed #7c3aed;
  outline-offset: 2px;
}
.zonas-lienzo-wrap.modo-recuadro .zona-rect,
.zonas-lienzo-wrap.modo-recuadro .zona-recuadro-ov {
  pointer-events: none !important;
  opacity: 0.35;
}
/* MODO COLOCAR TABLA: solo se toca la tabla. Zonas y cuadros de precio se
   atenúan y se hacen inertes, para que no se creen ni se muevan por descuido.
   Se marca el lienzo en azul para que SE VEA que el modo está puesto. */
/* Marca sólida y pegada al borde: con línea DISCONTINUA parecía una "caja"
   gigante dibujada sobre la lámina y despistaba. */
.zonas-lienzo-wrap.modo-tabla {
  outline: 4px solid #0ea5e9;
  outline-offset: 0;
}
.zonas-lienzo-wrap.modo-tabla .zona-rect,
.zonas-lienzo-wrap.modo-tabla .zona-recuadro-ov {
  pointer-events: none !important;
  opacity: 0.3;
}
.zonas-lienzo-wrap.modo-tabla .zona-tabla-ov { outline-width: 4px; }

.zona-recuadro-ov {
  position: absolute;
  outline: 2px solid #7c3aed;
  background: rgba(124, 58, 237, 0.14);
  box-sizing: border-box;
  pointer-events: auto;
}
.zona-recuadro-ov.sin-producto {
  outline-color: #d97706;
  background: rgba(217, 119, 6, 0.14);
}
/* Recuadro con alguna señal que no cuadra: ámbar, pendiente de aprobación. */
.zona-recuadro-ov.revisar {
  outline-color: #f59e0b;
  outline-style: dashed;
  background: rgba(245, 158, 11, 0.22);
}
.zona-recuadro-del {
  position: absolute;
  top: -10px; right: -10px;
  width: 18px; height: 18px;
  border: none; border-radius: 50%;
  background: #dc2626; color: #fff;
  font-size: 11px; line-height: 1;
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
/* Asas para estirar el recuadro de precio (esquinas opuestas: mueve y ajusta tamaño). */
.zona-recuadro-asa {
  position: absolute;
  width: 11px; height: 11px;
  background: #fff;
  border: 2px solid #7c3aed;
  border-radius: 2px;
  box-sizing: border-box;
}
.zona-recuadro-asa.nw { top: -6px; left: -6px; cursor: nwse-resize; }
.zona-recuadro-asa.se { bottom: -6px; right: -6px; cursor: nwse-resize; }
.zona-recuadro-ov.revisar .zona-recuadro-asa { border-color: #f59e0b; }
.zona-recuadro-campo {
  position: absolute;
  bottom: -10px; left: -8px;   /* izquierda: la derecha la ocupa el asa de estirar */
  min-width: 18px; height: 16px;
  border: none; border-radius: 8px;
  background: #7c3aed; color: #fff;
  font-size: 9px; font-weight: 800; line-height: 1;
  cursor: pointer; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
}
.zona-recuadro-ap {
  position: absolute;
  top: -10px; right: 12px;
  width: 18px; height: 18px;
  border: none; border-radius: 50%;
  background: #16a34a; color: #fff;
  font-size: 11px; line-height: 1;
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.zona-rect {
  position: absolute;
  border: 2px solid;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  cursor: pointer;
}
.zona-rect-asignada {
  border-color: #16a34a;
  background: rgba(22, 163, 74, 0.18);
}
.zona-rect-vacia {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.18);
  border-style: dashed;
}
/* Zona propuesta por IA (aun sin confirmar): distintivo visual */
.zona-rect-ia {
  border-color: #a855f7;
  background: rgba(168, 85, 247, 0.15);
  border-style: dashed;
  animation: pulse-ia 1.8s ease-in-out infinite;
}
@keyframes pulse-ia {
  0%, 100% { border-color: #a855f7; background: rgba(168, 85, 247, 0.12); }
  50% { border-color: #c084fc; background: rgba(168, 85, 247, 0.22); }
}
.zona-rect-sel {
  border-width: 3px;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.4);
  cursor: move;
}
/* Destello del bloque de edición al pulsar "✏️ Cambiar / editar esta zona" */
.zona-edit-flash {
  border-radius: 8px;
  animation: zonaEditFlash 0.6s ease-in-out 2;
}
@keyframes zonaEditFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.55); }
}
/* Zona recién duplicada/clonada: parpadea unos segundos para localizarla al instante */
.zona-rect-nueva {
  animation: zonaNuevaPulse 0.65s ease-in-out 4;
  z-index: 12;
}
@keyframes zonaNuevaPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.85); }
  50%      { box-shadow: 0 0 0 10px rgba(124, 58, 237, 0.12); }
}
/* Handles de las esquinas para redimensionar (solo en zona seleccionada) */
.zona-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #0ea5e9;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  z-index: 10;
}
.zona-handle-nw { top: -7px;    left: -7px;   cursor: nwse-resize; }
.zona-handle-ne { top: -7px;    right: -7px;  cursor: nesw-resize; }
.zona-handle-se { bottom: -7px; right: -7px;  cursor: nwse-resize; }
.zona-handle-sw { bottom: -7px; left: -7px;   cursor: nesw-resize; }
.zona-rect-temp {
  border-color: #0ea5e9;
  background: rgba(14, 165, 233, 0.15);
  border-style: dashed;
}
/* Hueco que se está dibujando para una tabla NUEVA (modo colocar tabla):
   verde, para que no se confunda con dibujar una zona de producto. */
.zona-rect-temp-tabla {
  border-color: #16a34a;
  background: rgba(22, 163, 74, 0.18);
  border-width: 3px;
}
/* Pista de que el cuadro se puede apartar. Va al pie del diálogo: en la tablet nadie
   descubre que se mueve si no se le dice. */
.dlg-pista-mover {
  font-size: 11px; color: var(--gris-texto); text-align: center;
  padding: 6px 0 2px; opacity: .7; user-select: none; pointer-events: none;
}

/* Producto que no se vende en la zona de esta farmacia, dentro de una lámina mixta:
   la lámina se enseña, pero ese producto queda marcado y no se puede anotar. */
.visor-zona-vetada {
  background: repeating-linear-gradient(45deg, rgba(220,38,38,.16) 0 8px, rgba(220,38,38,.28) 8px 16px);
  outline: 2px solid rgba(220,38,38,.75);
  cursor: not-allowed;
}
.visor-zona-veto-txt {
  position: absolute; top: 2px; left: 2px;
  background: #b91c1c; color: #fff; font-size: 10px; font-weight: 700;
  padding: 1px 5px; border-radius: 4px; pointer-events: none; white-space: nowrap;
}

/* FASE "VISITA SIN PEDIDO": zonas que se marcan de un toque. La que el cliente ya se
   lleva se ve EN VERDE. Verde = anotado, NO facturado (es la señal que pidió Fernando
   para distinguirlo de un pedido de verdad). */
.visor-zona-marcable {
  outline: 2px dashed rgba(13,148,136,.55);
  outline-offset: -2px;
}
.visor-zona-llevada {
  background: rgba(16,185,129,.28);
  outline: 3px solid rgba(5,150,105,.9);
  outline-offset: -2px;
}
.visor-zona-llevada-txt {
  position: absolute; top: 2px; left: 2px;
  background: #059669; color: #fff; font-size: 10px; font-weight: 800;
  padding: 1px 6px; border-radius: 4px; pointer-events: none; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
/* El contador flotante en esta fase no es un carrito: es "lo que se lleva". */
.carrito-fab-sinpedido { background: #0d9488 !important; }

/* Aviso en el visor de que hay láminas ocultas por la zona de la farmacia. */
.visor-aviso-zona {
  background: #dbeafe; color: #1e40af; padding: 8px 14px; font-size: 13px;
  border-bottom: 1px solid #bfdbfe; text-align: center;
}
.visor-aviso-zona.sin-zona { background: #fef3c7; color: #92400e; border-bottom-color: #fcd34d; }
:root[data-theme="dark"] .visor-aviso-zona { background: #172554; color: #bfdbfe; border-bottom-color: #1e3a8a; }
:root[data-theme="dark"] .visor-aviso-zona.sin-zona { background: #422006; color: #fde68a; border-bottom-color: #854d0e; }

/* Tercer distintivo de la lámina: cuándo se tocó por última vez. En ámbar cuando
   se modificó DESPUÉS de darla por revisada (hay que volver a mirarla). */
.lamina-estado-cambio {
  display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 10px;
  background: rgba(127,127,127,0.12); color: var(--gris-texto);
  margin-right: 6px; cursor: pointer; white-space: nowrap;
}
.lamina-estado-cambio:hover { background: rgba(127,127,127,0.22); }
.lamina-estado-cambio.pend {
  background: #fef3c7; color: #92400e; font-weight: 600; border: 1px solid #fcd34d;
}
.lamina-estado-cambio.pend:hover { background: #fde68a; }
/* Lámina OCULTA: apagada pero a la vista en el editor, para no olvidarse de que está ahí. */
.lamina-estado-oculta { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 10px; background: #fee2e2; color: #b91c1c; margin-right: 6px; }
.lamina-estado-oculta[hidden] { display: none; }
.lamina-fila.lamina-oculta .lamina-mini, .mosaico-card-oculta .mosaico-img { opacity: 0.35; filter: grayscale(1); }
.lamina-fila.lamina-oculta .lamina-titulo { opacity: 0.55; }
:root[data-theme="dark"] .lamina-estado-cambio.pend { background: #422006; color: #fde68a; border-color: #854d0e; }

/* ===== MANUAL DE INSTRUCCIONES ===== */
.manual-wrap { max-width: 1100px; }
.manual-cabecera {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.manual-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.manual-acciones .btn { width: auto; flex: 0 0 auto; white-space: nowrap; }
.manual-buscador {
  width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 15px;
  border: 1px solid var(--gris-borde-2); border-radius: 10px;
  background: var(--surface); color: inherit; margin-bottom: 18px;
}
.manual-cuerpo { display: flex; gap: 24px; align-items: flex-start; }
.manual-indice {
  flex: 0 0 250px; position: sticky; top: 12px;
  display: flex; flex-direction: column; gap: 2px;
  border-right: 1px solid var(--gris-borde); padding-right: 12px;
}
.manual-indice a {
  color: var(--gris-texto); text-decoration: none; font-size: 13px;
  padding: 6px 8px; border-radius: 6px; line-height: 1.35;
}
.manual-indice a:hover { background: var(--surface-2, rgba(216,10,107,0.06)); color: var(--brand); }
.manual-contenido { flex: 1 1 auto; min-width: 0; }
.manual-apartado {
  background: var(--surface); border: 1px solid var(--gris-borde);
  border-radius: 12px; padding: 18px 20px; margin-bottom: 16px;
  scroll-margin-top: 12px;
}
.manual-apartado h3 { margin: 0 0 6px; font-size: 19px; }
.manual-para { margin: 0 0 12px; font-size: 13px; color: var(--gris-texto); }
.manual-pasos { margin: 0; padding-left: 22px; }
.manual-pasos li { margin-bottom: 9px; line-height: 1.5; }
.manual-pasos code, .manual-ojo code {
  background: rgba(127,127,127,0.14); padding: 1px 5px; border-radius: 4px; font-size: 13px;
}
.manual-ojo {
  margin-top: 14px; background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 8px; padding: 10px 12px; font-size: 13px; color: #78350f;
}
.manual-ojo ul { margin: 6px 0 0; padding-left: 20px; }
.manual-ojo li { margin-bottom: 5px; }
:root[data-theme="dark"] .manual-ojo { background: #422006; border-color: #854d0e; color: #fde68a; }
.manual-vacio { color: var(--gris-texto); padding: 20px; text-align: center; }
@media (max-width: 820px) {
  .manual-cuerpo { flex-direction: column; }
  .manual-indice { position: static; flex: none; width: 100%; border-right: none; padding-right: 0;
    border-bottom: 1px solid var(--gris-borde); padding-bottom: 10px; margin-bottom: 6px; }
}
/* Al imprimir: solo el manual, sin índice ni botones (queda un PDF limpio) */
@media print {
  .topbar, .navtabs, .manual-acciones, .manual-buscador, .manual-indice, .btn-incidencia, .btn-incidencia-bandeja { display: none !important; }
  .manual-apartado { break-inside: avoid; border: none; padding: 0 0 10px; }
}

.zona-num {
  background: #111827;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 0 0 6px 0;
  line-height: 1.4;
}
.zonas-editor-panel {
  width: 340px;
  flex-shrink: 0;
  background: var(--surface);
  padding: 18px;
  overflow-y: auto;
}
.zona-lista-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--r-sm);
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 13px;
  background: var(--surface);
  transition: border-color 0.13s, background 0.13s, box-shadow 0.13s;
}
.zona-lista-item:hover {
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
  border-color: color-mix(in srgb, var(--brand) 32%, var(--gris-borde));
  box-shadow: var(--shadow-sm);
}
.zona-lista-num {
  background: var(--grad);
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}
.zona-lista-info { flex: 1; }
.zona-producto-actual {
  background: color-mix(in srgb, var(--verde) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--verde) 35%, var(--gris-borde));
  border-radius: var(--r-sm);
  padding: 11px;
  margin-bottom: 10px;
  font-size: 13px;
}

/* Responsive: en móvil/tablet vertical el panel va abajo */
@media (max-width: 768px) {
  .zonas-editor-body { flex-direction: column; }
  .zonas-editor-panel {
    width: auto;
    max-height: 55vh;
    -webkit-overflow-scrolling: touch;
    border-top: 2px solid #e5e7eb;
  }
  .zonas-lienzo-img { max-height: 42vh; }
}

/* FASE 2.b': botón crear producto al vuelo en el autocomplete */
.ac-crear {
  padding: 12px;
  text-align: center;
  cursor: pointer;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 600;
  border-top: 1px solid #dbeafe;
}
.ac-crear:hover { background: #dbeafe; }

/* ============================================================================
   FASE 2.c' — Zonas clicables del comercial (E3: invisibles, iluminan al tocar)
   ============================================================================ */
.visor-zonas-capa {
  position: absolute;
  inset: 0;
  pointer-events: none; /* la capa no bloquea; solo las zonas individuales */
}
/* F3 precios dinámicos: capa que TAPA el precio impreso y lo REESCRIBE (no interactiva). */
.visor-recuadros-capa {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1; /* sobre la imagen, bajo la capa de zonas clicables */
}
.visor-recuadro-precio {
  position: absolute;
  overflow: visible;   /* el número nuevo puede desbordar al hueco blanco de la derecha */
  display: flex;
  align-items: center;
}
.visor-recuadro-txt {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.visor-zona {
  position: absolute;
  pointer-events: auto;   /* la zona SÍ es clicable */
  cursor: pointer;
  border: 2px solid transparent;
  background: transparent;
  border-radius: 4px;
  transition: background 0.3s ease, border-color 0.3s ease;
  box-sizing: border-box;
}
/* FASE 1 precios dinámicos: etiqueta de precio de HOY sobre la zona (no bloquea el toque) */
.visor-zona-precio {
  position: absolute;
  left: 3px; bottom: 3px;
  background: rgba(21,163,74,.94);   /* verde = precio */
  color: #fff;
  font-size: 10px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 1px 6px; border-radius: 6px;
  pointer-events: none;              /* el clic pasa a la zona */
  white-space: nowrap;
  line-height: 1.5;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.visor-zona-precio.tiene-pendiente { background: rgba(217,119,6,.96); } /* ámbar si hay cambio programado a futuro */
/* F4 ofertas: etiqueta de campaña vigente (arriba-derecha de la zona). */
.visor-export-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 10px 0 4px;
}
.visor-zona-oferta {
  position: absolute;
  right: 3px; bottom: calc(100% + 2px); /* justo ENCIMA de la zona, no sobre el precio */
  background: #dc2626;
  color: #fff;
  font-size: 10px; font-weight: 800;
  padding: 1px 6px; border-radius: 6px;
  pointer-events: none;
  white-space: nowrap;
  line-height: 1.5;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  letter-spacing: .02em;
}
/* E3: cuando se ilumina la capa (al tocar la lámina), las zonas se hacen visibles */
.visor-zonas-iluminadas .visor-zona {
  border-color: rgba(14, 165, 233, 0.9);
  background: rgba(14, 165, 233, 0.22);
  animation: zonaPulso 0.6s ease;
}
@keyframes zonaPulso {
  0% { background: rgba(14, 165, 233, 0.45); }
  100% { background: rgba(14, 165, 233, 0.22); }
}

/* FASE 2.c'-2: modal al pulsar zona (producto + cantidad + plantillas) */
.zona-modal-producto {
  background: var(--surface-2);
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
}
.zona-cantidad-rapida {
  display: flex;
  gap: 8px;
}
.zona-cant-btn {
  flex: 1;
  padding: 10px;
  border: 1px solid #d1d5db;
  background: var(--surface);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  color: #374151;
}
.zona-cant-btn:hover {
  background: color-mix(in srgb, var(--brand) 7%, var(--surface));
  border-color: var(--rosa-principal, #cc007a);
}
/* Controles de zoom del lienzo del editor de zonas */
.zonas-zoom-ctrl {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0;
  flex-wrap: wrap;
}
.zonas-zoom-ctrl button {
  min-width: 34px;
  padding: 5px 10px;
  border: 1px solid #d1d5db;
  background: var(--surface);
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  color: #374151;
}
.zonas-zoom-ctrl button:hover { background: #f5f3ff; border-color: #a855f7; }
.zonas-zoom-ctrl #zonas-zoom-label {
  min-width: 46px;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  color: #374151;
}

/* Distintivo de estado de zonas en la fila de lámina (editor admin) */
.lamina-estado-zonas {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  margin: 2px 0;
}
.lamina-estado-zonas.ok { background: #dcfce7; color: #15803d; }
.lamina-estado-zonas.auto { background: #ffedd5; color: #c2410c; }
/* Distintivo de PRECIOS dinámicos en la rejilla: con 350+ láminas hay que ver de un
   vistazo cuáles tienen los precios asignados y cuáles faltan. */
.lamina-estado-precios {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  margin: 2px 0 2px 4px;
}
.lamina-estado-precios.ok { background: #ede9fe; color: #6d28d9; }
.lamina-estado-precios.pend { background: #fef3c7; color: #b45309; }
.lamina-estado-precios.none { background: var(--surface-2); color: var(--gris-texto); }
.lamina-estado-precios.excl { background: #e5e7eb; color: #374151; }
.lamina-estado-precios.tabla { background: #e0f2fe; color: #0369a1; }
.lamina-estado-zonas.none { background: #f3f4f6; color: #9ca3af; }

/* Zona-enlace en el visor: se pinta como un BOTÓN visible (deliberado) */
.visor-zona-enlace {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2563eb;
  border: 2px solid #1d4ed8 !important;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.45);
  cursor: pointer;
  overflow: hidden;
  padding: 2px;
}
.visor-zona-enlace:active { transform: scale(0.97); }
.visor-zona-enlace-txt {
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.15;
  text-align: center;
  padding: 2px 6px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  white-space: normal;
  overflow: hidden;
}

/* Barra fija arriba mientras estás en un catálogo enlazado */
.barra-enlace {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99600;
  background: #1e3a8a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  font-size: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.barra-enlace-info { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-enlace-btn {
  background: var(--surface);
  color: #1e3a8a;
  border: 0;
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.barra-enlace-btn:active { transform: scale(0.96); }


/* Selector de familia (color x graduacion) en el modal de anotar */
.zona-familia-selector {
  background: #faf5ff;
  border: 1px solid #e9d5ff;
  border-radius: 10px;
  padding: 12px;
}
.fam-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.fam-chip {
  padding: 8px 14px;
  border: 1px solid #d1d5db;
  background: var(--surface);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: #374151;
}
.fam-chip:hover {
  background: #f5f3ff;
  border-color: #a855f7;
}
.fam-chip.sel {
  background: #a855f7;
  border-color: #a855f7;
  color: #fff;
}
/* Selección rápida de plantillas: agrupada, ordenada y muy visual para el comercial. */
.zona-tpl-filtro {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--gris-borde-2);
  border-radius: 10px;
  font-size: 15px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.zona-tpl-filtro:focus { outline: none; border-color: var(--brand); }
/* Con muchas plantillas (52+), la zona hace scroll y no dispara el modal. */
.zona-tpl-scroll {
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
}
.zona-tpl-cuenta {
  display: inline-block;
  background: var(--gris-borde);
  color: var(--gris-texto);
  border-radius: 10px;
  padding: 0 7px;
  font-size: 10px;
  font-weight: 800;
  margin-left: 4px;
}
.zona-tpl-vacio { color: var(--gris-texto); font-size: 13px; text-align: center; padding: 12px; }
.zona-tpl-grupo { margin-bottom: 10px; }
.zona-tpl-grupo-tit {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gris-texto);
  margin: 2px 0 6px;
}
.zona-plantillas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.zona-tpl-chip {
  padding: 10px 16px;
  border: 1.5px solid #d1d5db;
  background: var(--surface);
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  min-height: 44px;               /* cómodo para tocar en tablet */
  display: inline-flex;
  align-items: center;
  position: relative;
  transition: transform .08s ease, box-shadow .12s ease;
  cursor: pointer;
  color: #374151;
}

/* Botones de condiciones (bonificación / descuento): un toque, bien grandes y de color.
   Reemplazan al buscador de plantillas: lo que pedía Fernando, "más visual y sencillo". */
.cond-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.cond-chip {
  flex: 1 1 auto;
  min-width: 68px;
  min-height: 54px;
  padding: 8px 14px;
  border: 2px solid var(--gris-borde-2, #d1d5db);
  border-radius: 14px;
  background: var(--surface, #fff);
  color: inherit;
  font-size: 20px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .08s ease;
}
.cond-chip:active { transform: scale(.96); }
/* Bonificación seleccionada: verde. Descuento seleccionado: naranja. Muy distinguibles. */
.cond-chip.sel {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(22,163,74,.6);
}
.cond-chip-dto.sel {
  background: #ea580c;
  border-color: #ea580c;
  box-shadow: 0 4px 12px -4px rgba(234,88,12,.6);
}
/* "✏️ Otra" seleccionada: gris pizarra, para distinguirla de los valores fijos. */
.cond-chip.cond-otra.sel {
  background: #475569;
  border-color: #475569;
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(71,85,105,.6);
}
/* Campo escribir a mano (otra bonif/dto) y nota. */
.cond-otra-input {
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  padding: 12px 14px;
  border: 2px solid var(--gris-borde-2, #d1d5db);
  border-radius: 12px;
  background: var(--surface, #fff);
  color: inherit;
  font-size: 18px;
  font-weight: 600;
  font-family: inherit;
}
.cond-otra-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.18);
}

/* ---------- CUADRO DE DEVOLUCIÓN ---------- */
/* Botón que lanza el cuadro (en el modal de producto y en el carrito). Ámbar, para
   distinguirlo claramente de "Anotar" (que es la acción normal de pedido). */
.btn-devolver-lanzar {
  width: 100%;
  min-height: 48px;
  margin-top: 6px;
  border: 2px solid #f59e0b;
  border-radius: 12px;
  background: #fff7ed;
  color: #b45309;
  font-size: 15px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
}
.btn-devolver-lanzar:active { transform: scale(.98); }

/* ---------- REJILLA DE REPOSICIÓN DE GAFAS ---------- */
/* Modelos en filas, graduaciones en columnas. Va a pantalla casi completa porque en la
   tablet hay que ver a la vez las 6 graduaciones y el total de la derecha. */
.btn-reposicion-lanzar {
  width: 100%;
  min-height: 48px;
  margin-top: 6px;
  border: 2px solid var(--rosa, #d80a6b);
  border-radius: 12px;
  background: #fff1f7;
  color: #9a1259;
  font-size: 15px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
}
.btn-reposicion-lanzar:active { transform: scale(.98); }
.rep-card {
  width: min(1100px, 96vw);
  max-width: 96vw;
  height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
}
.rep-buscador-fila { position: relative; padding: 0 4px 8px; }
.rep-buscador {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--gris-borde, #d1d5db);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  box-sizing: border-box;
}
.rep-buscador:focus { border-color: var(--rosa, #d80a6b); outline: none; }
.rep-resultados {
  position: absolute;
  left: 4px; right: 4px; top: 100%;
  z-index: 20;
  max-height: 46vh;
  overflow-y: auto;
  background: var(--surface, #fff);
  border: 1px solid var(--gris-borde, #d1d5db);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
.rep-res-info { padding: 12px 14px; color: var(--gris-texto, #6b7280); font-size: 14px; }
.rep-res-fam { padding: 10px 12px; border-bottom: 1px solid var(--gris-borde, #eee); }
.rep-res-fam:last-child { border-bottom: 0; }
.rep-res-nombre { font-weight: 800; font-size: 15px; }
.rep-res-sub { font-weight: 500; font-size: 12px; color: var(--gris-texto, #6b7280); margin-left: 8px; }
.rep-res-colores { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rep-color-btn {
  min-height: 40px;
  padding: 6px 14px;
  border: 1.5px solid var(--rosa, #d80a6b);
  border-radius: 999px;
  background: #fff;
  color: #9a1259;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.rep-color-btn:active { background: #ffe4f0; }
/* La tabla scrollea sola (a lo ancho y a lo alto) sin arrastrar el modal. */
.rep-tabla-caja {
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--gris-borde, #e5e7eb);
  border-radius: 10px;
}
.rep-vacio { padding: 28px 18px; text-align: center; color: var(--gris-texto, #6b7280); line-height: 1.7; }
table.rep-tabla { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14px; }
table.rep-tabla th, table.rep-tabla td { border-bottom: 1px solid var(--gris-borde, #e5e7eb); padding: 4px; text-align: center; }
table.rep-tabla thead th {
  position: sticky; top: 0; z-index: 3;
  background: #fff1f7; color: #9a1259; font-weight: 800; padding: 10px 4px; white-space: nowrap;
}
/* Primera columna pegada a la izquierda: al mirar la +3,50 hay que seguir viendo el modelo. */
table.rep-tabla .rep-fila-cab {
  position: sticky; left: 0; z-index: 2;
  background: var(--surface, #fff);
  text-align: left;
  padding: 6px 10px;
  min-width: 165px;
  font-weight: 700;
}
table.rep-tabla thead .rep-fila-cab { z-index: 4; background: #fff1f7; }
.rep-fila-modelo { display: block; }
.rep-fila-color { display: inline-block; font-size: 12px; font-weight: 600; color: var(--gris-texto, #6b7280); }
.rep-fila-quitar {
  float: right; border: 0; background: transparent; cursor: pointer;
  color: var(--gris-texto, #9ca3af); font-size: 15px; padding: 2px 4px;
}
input.rep-celda {
  width: 54px; min-height: 44px;
  border: 1.5px solid var(--gris-borde, #d1d5db);
  border-radius: 8px;
  text-align: center;
  font-size: 17px; font-weight: 700; font-family: inherit;
  background: var(--surface, #fff);
}
input.rep-celda:focus { border-color: var(--rosa, #d80a6b); outline: none; }
input.rep-celda.rep-celda-guardando { border-color: #93c5fd; }
input.rep-celda.rep-celda-error { border-color: #dc2626; background: #fef2f2; }
.rep-celda-no { color: #d1d5db; font-size: 18px; }
.rep-fila-total { font-weight: 800; font-size: 16px; min-width: 54px; }
tr.rep-subtotal th, tr.rep-subtotal td { background: #f9fafb; font-size: 13px; }
tr.rep-subtotal td { text-align: left; padding-left: 10px; }
tr.rep-subtotal-impar th, tr.rep-subtotal-impar td { background: #fef2f2; }
.rep-sub-cero { color: #9ca3af; }
.rep-aviso-impar { color: #dc2626; font-weight: 800; }
.rep-pie { display: flex; align-items: center; gap: 12px; padding-top: 10px; }
.rep-total { flex: 1; font-size: 16px; }
@media (max-width: 700px) {
  .rep-card { width: 98vw; height: 92vh; }
  table.rep-tabla .rep-fila-cab { min-width: 130px; }
  input.rep-celda { width: 46px; font-size: 16px; }
}

/* La tarjeta puede quedar alta en la tablet: se hace desplazable y el botón "Añadir"
   se queda fijo abajo, siempre a mano, sin tener que buscarlo con scroll. */
.dev-card {
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
}
.dev-header h3 { color: #b45309; }
/* El botón Añadir, pegado abajo dentro de la tarjeta (siempre a mano). */
.dev-add {
  position: sticky; bottom: 0;
}
.dev-prod { background: #f3ecf0; border-radius: 12px; padding: 11px 13px; margin: 4px 0 6px; }
.dev-prod-n { font-size: 15px; font-weight: 800; }
.dev-prod-c { font-size: 12px; color: #6b5563; margin-top: 1px; }
.dev-lbl { font-size: 14px; font-weight: 700; margin: 14px 0 7px; }
.dev-lbl small { font-weight: 500; color: #9a8791; }

.dev-cont { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 2px 0; }
.dev-pm {
  width: 60px; height: 60px; border-radius: 50%; border: 0;
  background: #f3ecf0; color: inherit; font-size: 32px; cursor: pointer; font-family: inherit;
}
.dev-pm:active { background: #d80a6b; color: #fff; }
.dev-cant { font-size: 40px; font-weight: 800; min-width: 70px; text-align: center; }

/* Estado seleccionado: colores semánticos (verde/ámbar/rojo). */
.cond-chip.dev-est.sel.bueno { background: #dcfce7; border-color: #16a34a; color: #166534; box-shadow: none; }
.cond-chip.dev-est.sel.caducado { background: #fef3c7; border-color: #d97706; color: #b45309; box-shadow: none; }
.cond-chip.dev-est.sel.roto { background: #fee2e2; border-color: #dc2626; color: #dc2626; box-shadow: none; }

.dev-motivos-rapidos { display: flex; flex-wrap: wrap; gap: 6px; }
.dev-mot-chip {
  border: 1.5px solid #e7dce3; border-radius: 999px; background: #fff;
  color: #6b5563; font-size: 12.5px; font-weight: 600; padding: 6px 12px; cursor: pointer; font-family: inherit;
}
.dev-mot-chip:active { background: #fce7f1; }

.dev-res-btns { display: flex; flex-direction: column; gap: 9px; }
.dev-res {
  width: 100%; min-height: 54px; border: 2px solid #e7dce3; border-radius: 14px; background: #fff;
  color: inherit; font-size: 15px; font-weight: 800; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: 12px; padding: 0 16px; text-align: left;
}
.dev-res-ic { font-size: 22px; }
.dev-res.sel { background: #d80a6b; border-color: #d80a6b; color: #fff; box-shadow: 0 6px 18px -8px rgba(216,10,107,.6); }
.dev-subcambio { display: none; margin-top: 10px; padding: 12px; border: 1.5px dashed #d80a6b; border-radius: 12px; background: #fce7f1; }
.dev-subcambio.on { display: block; }

.dev-retira {
  display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 14px;
  background: #dcfce7; border-radius: 12px; font-size: 14px; font-weight: 600; color: #166534; cursor: pointer;
}
.dev-retira input { width: 22px; height: 22px; accent-color: #16a34a; }

.dev-add {
  width: 100%; min-height: 54px; margin-top: 16px; border: 0; border-radius: 14px;
  background: #16a34a; color: #fff; font-size: 17px; font-weight: 800; cursor: pointer; font-family: inherit;
}
.dev-add:disabled { opacity: .45; cursor: default; }
/* Título de cada fila dentro del cuadro sencillo (¿lleva regalo? / ¿descuento?) */
.simple-cond-titulo {
  font-size: 17px;
  font-weight: 700;
  margin: 6px 0 2px;
  text-align: left;
}
.zona-tpl-chip:hover {
  background: color-mix(in srgb, var(--brand) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--brand) 45%, var(--gris-borde-2));
}
.zona-tpl-chip:active { transform: scale(0.96); }
/* Distinción visual: descuento % (ámbar) / bonificación (violeta) */
.zona-tpl-chip.zona-tpl-descuento { border-color: color-mix(in srgb, var(--amber) 55%, var(--gris-borde-2)); background: color-mix(in srgb, var(--amber) 12%, var(--surface)); color: var(--amber); }
.zona-tpl-chip.zona-tpl-bonif { border-color: color-mix(in srgb, var(--violet) 55%, var(--gris-borde-2)); background: color-mix(in srgb, var(--violet) 12%, var(--surface)); color: var(--violet); }
/* SELECCIONADA: relleno pleno + check, se ve al instante qué está elegido */
.zona-tpl-chip.seleccionada { color: #fff; border-color: transparent; box-shadow: 0 3px 8px rgba(0,0,0,.18); padding-right: 34px; }
.zona-tpl-chip.seleccionada::after {
  content: '✓'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 13px; font-weight: 900;
}
.zona-tpl-chip.seleccionada:not(.zona-tpl-descuento):not(.zona-tpl-bonif) { background: var(--brand); }
.zona-tpl-chip.zona-tpl-descuento.seleccionada { background: var(--amber); }
.zona-tpl-chip.zona-tpl-bonif.seleccionada { background: var(--violet); }

/* ============================================================================
   MOSAICO — reordenar láminas en cuadrícula
   ============================================================================ */
.mosaico-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: #1f2937;
  z-index: 20000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mosaico-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #111827;
  color: #fff;
  flex-shrink: 0;
}
.mosaico-ayuda {
  background: #1e3a5f;
  color: #bfdbfe;
  padding: 8px 16px;
  font-size: 13px;
  flex-shrink: 0;
}
.mosaico-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  grid-auto-rows: min-content;
  gap: 14px;
  align-content: start;
}
/* Buscador de lámina dentro del mosaico de reordenar. */
.mosaico-buscar-barra { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: #111827; flex-shrink: 0; }
.mosaico-buscar-barra input {
  flex: 1; min-width: 160px; padding: 8px 12px; border-radius: 10px; border: 1px solid #374151;
  background: #1f2937; color: #fff; font-size: 14px; font-family: inherit;
}
.mosaico-buscar-barra input::placeholder { color: #9ca3af; }
#mosaico-buscar-cuenta { font-size: 12px; color: #9ca3af; min-width: 54px; text-align: center; }
/* Coincidencias: todas con borde ámbar, la actual en magenta; el resto se atenúa. */
.mosaico-card.mosaico-match { outline: 3px solid #f59e0b; outline-offset: -2px; }
.mosaico-card.mosaico-match-actual { outline: 3px solid #d80a6b; box-shadow: 0 0 0 5px rgba(216,10,107,.4); }
.mosaico-grid.mosaico-buscando .mosaico-card:not(.mosaico-match) { opacity: .3; transition: opacity .15s; }
/* Barra flotante de navegación rápida del mosaico (inicio/subir/bajar/final). */
.mosaico-nav {
  position: absolute;
  right: 14px;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 5;
}
.mosaico-nav-btn {
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(216,10,107,.92);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 16px -4px rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mosaico-nav-btn:active { transform: scale(.92); }

/* Las imágenes NO se arrastran solas: al arrastrar sobre una foto se mueve la TARJETA
   (reordenar), no la imagen suelta. Antes la imagen nativa podía salirse de la ventana
   y soltarse en el escritorio/barra de Windows, que abría archivos. */
.mosaico-img, .lamina-mini {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ---------- ARCHIVO DE CATÁLOGOS ---------- */
.archivo-cabecera { margin: 8px 0 14px; }
.archivo-buscador {
  width: 100%; padding: 12px 14px; margin-bottom: 18px;
  border: 1.5px solid var(--gris-borde-2, #d1d5db); border-radius: 12px;
  background: var(--surface, #fff); color: inherit; font-size: 15px; box-sizing: border-box; font-family: inherit;
}
.archivo-seccion-tit { font-size: 16px; font-weight: 800; margin: 10px 0 10px; color: var(--marca, #d80a6b); }
.archivo-comercial { margin-bottom: 16px; }
.archivo-comercial-tit {
  font-size: 14px; font-weight: 700; color: var(--gris-texto, #6b7280);
  padding: 6px 0; border-bottom: 1px dashed var(--gris-borde, #e5e7eb); margin-bottom: 10px;
}
.archivo-card {
  background: var(--surface, #fff); border: 1px solid var(--gris-borde-2, #e5e7eb);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.archivo-card-cab { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.archivo-card-nombre { font-size: 16px; font-weight: 800; }
.archivo-badge {
  display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; margin-left: 8px;
}
.archivo-badge-maestro { background: #ede9fe; color: #6d28d9; }
.archivo-badge-express { background: #dcfce7; color: #15803d; }
.archivo-card-meta { font-size: 12.5px; color: var(--gris-texto, #6b7280); }
.archivo-versiones { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.archivo-version {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--gris-fondo, #f9fafb); border-radius: 10px; padding: 8px 10px;
}
.archivo-vbadge {
  flex: 0 0 auto; background: var(--marca, #d80a6b); color: #fff; font-weight: 800;
  font-size: 12px; padding: 3px 9px; border-radius: 8px;
}
.archivo-vinfo { flex: 1 1 200px; font-size: 12.5px; color: var(--tinta, #374151); }
.archivo-vnotas { display: block; color: var(--gris-texto, #6b7280); font-style: italic; }
.archivo-vacc { display: flex; gap: 6px; flex-wrap: wrap; }
.archivo-sin-versiones { font-size: 12.5px; color: var(--gris-texto, #9ca3af); padding: 6px 2px; }
.archivo-vacio { color: var(--gris-texto, #9ca3af); font-size: 13px; padding: 10px 2px; }
.btn-card-restaurar { border-color: #f59e0b !important; color: #b45309 !important; font-weight: 700; }
/* Línea de "versiones guardadas" en la tarjeta del catálogo. */
.catalogo-card-versiones { font-size: 12px; color: var(--marca, #d80a6b); font-weight: 600; margin-top: 4px; }
/* Distintivo "sin cambios" en el historial/archivo de versiones. */
.version-sincambios {
  display: inline-block; font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px;
  background: #fef3c7; color: #92400e; margin-left: 6px; vertical-align: middle;
}
/* Barra de progreso al cerrar versión (avance por tiempo estimado, honesta: tope 92%). */
.cerrar-barra { height: 12px; background: var(--gris-borde, #e5e7eb); border-radius: 999px; overflow: hidden; }
.cerrar-barra-fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, #d80a6b, #f5479b);
  transition: width .3s ease;
  background-size: 200% 100%;
  animation: cerrar-barra-anim 1.1s linear infinite;
}
@keyframes cerrar-barra-anim { 0% { background-position: 200% 0; } 100% { background-position: 0 0; } }
/* Buscador de lámina en el archivo */
.archivo-busq-cab { font-size: 12.5px; font-weight: 700; color: var(--gris-texto, #6b7280); margin: 4px 0 6px; }
.archivo-busq-fila {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 6px;
  background: var(--gris-fondo, #f9fafb); border: 1px solid var(--gris-borde, #eee); border-radius: 10px; cursor: pointer;
}
.archivo-busq-fila:hover { border-color: var(--marca, #d80a6b); }
.archivo-busq-num { flex: 0 0 auto; font-weight: 800; color: var(--gris-texto, #6b7280); min-width: 26px; text-align: center; }
.archivo-busq-info { flex: 1 1 auto; font-size: 13px; display: flex; flex-direction: column; }
.archivo-busq-donde { font-size: 11.5px; color: var(--gris-texto, #9ca3af); }
.archivo-busq-ver { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: var(--marca, #d80a6b); }

/* Visor de una versión por dentro */
.archivo-visor-overlay {
  position: fixed; inset: 0; background: rgba(17,24,39,.55); z-index: 21000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.archivo-visor {
  background: var(--surface, #fff); color: inherit; border-radius: 16px; padding: 16px;
  width: 100%; max-width: 980px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px -20px rgba(0,0,0,.6);
}
.archivo-visor-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.archivo-visor-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px;
}
.archivo-visor-celda {
  border: 1px solid var(--gris-borde-2, #e5e7eb); border-radius: 10px; overflow: hidden; background: var(--gris-fondo, #f9fafb); position: relative;
}
.archivo-visor-img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.archivo-visor-noimg {
  width: 100%; aspect-ratio: 3/4; align-items: center; justify-content: center; flex-direction: column;
  text-align: center; color: var(--gris-texto, #9ca3af); font-size: 22px; gap: 4px;
}
.archivo-visor-num {
  position: absolute; top: 6px; left: 6px; background: rgba(216,10,107,.92); color: #fff;
  font-size: 12px; font-weight: 800; padding: 2px 7px; border-radius: 7px;
}
.archivo-visor-tit { font-size: 11.5px; padding: 6px 8px 4px; line-height: 1.3; }
.archivo-visor-recuperar {
  display: block; width: calc(100% - 12px); margin: 0 6px 6px; padding: 6px;
  border: 1.5px solid #f59e0b; border-radius: 8px; background: #fff7ed; color: #b45309;
  font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.archivo-visor-recuperar:active { transform: scale(.97); }
.mosaico-card {
  background: var(--surface);
  border-radius: 8px;
  overflow: hidden;
  cursor: grab;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  height: 250px;
  display: flex;
  flex-direction: column;
}
.mosaico-card:active { cursor: grabbing; }
.mosaico-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}
.mosaico-arrastrando {
  opacity: 0.35;
  filter: grayscale(0.6);
  outline: 3px dashed var(--brand, #d80a6b);
  outline-offset: -3px;
}
/* Mientras se arrastra, las demás no deben "saltar" al pasar por encima */
.mosaico-arrastrando-activo .mosaico-card:hover {
  transform: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
/* Hueco de destino: dónde van a caer exactamente las láminas */
.mosaico-insercion {
  height: 250px;
  border-radius: 8px;
  border: 3px dashed var(--brand, #d80a6b);
  background: rgba(216, 10, 107, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  animation: mosaicoLatido 1s ease-in-out infinite;
}
@keyframes mosaicoLatido {
  0%, 100% { background: rgba(216, 10, 107, 0.18); }
  50%      { background: rgba(216, 10, 107, 0.38); }
}
@media (prefers-reduced-motion: reduce) {
  .mosaico-insercion { animation: none; }
}
.mosaico-num {
  position: absolute;
  top: 6px;
  left: 6px;
  background: #111827;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  width: 32px;
  height: 28px;
  border: 2px solid transparent;
  border-radius: 6px;
  text-align: center;
  z-index: 3;
  padding: 0;
  cursor: text;
  font-family: inherit;
}
.mosaico-num:hover {
  border-color: #0ea5e9;
}
.mosaico-num:focus {
  outline: none;
  border-color: #0ea5e9;
  background: #0ea5e9;
  width: 48px;
}
.mosaico-img {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  object-fit: contain;
  background: var(--surface);
  display: block;
}
.mosaico-titulo {
  padding: 8px;
  font-size: 12px;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

/* --- Canal de incidencias: botón flotante siempre a mano --- */
.btn-incidencia {
  position: fixed;
  /* Incidencias a la IZQUIERDA; el carrito va a la DERECHA. Antes estaban los dos a la
     derecha, casi pegados, y se tocaba uno por otro. */
  left: 18px;
  right: auto;
  bottom: 18px;
  /* POR ENCIMA de los cuadros (.modal-bg va a 99000): si no, con un cuadro abierto el 🛟
     quedaba tapado y no se podía avisar del problema que se estaba viendo justo ahí. */
  z-index: 99500;
  min-width: 52px;
  height: 52px;
  padding: 0 14px;
  border: 0;
  border-radius: 26px;
  background: var(--brand, #d80a6b);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
.btn-incidencia:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.34); }
.btn-incidencia.con-pendientes { background: #b45309; }
/* En móvil: pegado abajo a la IZQUIERDA (su sitio, ver arriba). Ponía right:12px sin quitar
   el left:18px de la regla base: con left y right a la vez, un botón fixed se ESTIRA de lado
   a lado y el 🛟 salía como una barra rosa que tapaba las tarjetas (móvil de Fernando,
   11 sep 2026, vista de admin). */
@media (max-width: 640px) { .btn-incidencia { left: 12px; right: auto; bottom: 12px; } }

/* Bandeja de avisos (solo admin): botón APARTE del 🛟, para que el de escribir un
   aviso nunca deje de escribir. Va justo a su derecha y solo sale si hay pendientes. */
.btn-incidencia-bandeja {
  position: fixed;
  left: 80px;
  bottom: 18px;
  z-index: 99500;
  min-width: 52px;
  height: 52px;
  padding: 0 14px;
  border: 0;
  border-radius: 26px;
  background: #b45309;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.btn-incidencia-bandeja:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.34); }
@media (max-width: 640px) { .btn-incidencia-bandeja { left: 72px; bottom: 12px; } }
body.modo-simple .btn-incidencia-bandeja { bottom: 96px; z-index: 99500; }

/* Tipo de aviso: chips de una sola elección */
.chip-tipo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border: 2px solid var(--gris-borde);
  border-radius: 999px; cursor: pointer; font-size: 13px;
}
.chip-tipo:has(input:checked) { border-color: var(--brand, #d80a6b); background: rgba(216,10,107,0.08); font-weight: 700; }
.chip-tipo input { margin: 0; accent-color: var(--brand, #d80a6b); }

/* --- Aviso flotante con DESHACER tras borrar algo --- */
.toast-deshacer {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 30000;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(92vw, 620px);
  padding: 10px 12px 10px 16px;
  background: #1f2937;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  font-size: 14px;
  animation: toastSube 0.18s ease-out;
}
.toast-deshacer span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast-deshacer .btn { background: var(--brand, #d80a6b); color: #fff; flex-shrink: 0; }
.toast-deshacer-x {
  background: transparent; border: 0; color: #9ca3af;
  font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; flex-shrink: 0;
}
.toast-deshacer-x:hover { color: #fff; }
@keyframes toastSube { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .toast-deshacer { animation: none; } }

/* --- Zona para soltar varios Excel a la vez (tablas de expositor) --- */
.tablas-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  padding: 18px 14px;
  border: 2px dashed var(--gris-borde);
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 13px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.tablas-drop.activo {
  border-color: var(--brand, #d80a6b);
  background: rgba(216, 10, 107, 0.10);
}

/* --- Selección múltiple en el mosaico (mover varias láminas en bloque) --- */
.mosaico-marca {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.85);
  background: rgba(17,24,39,0.55);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  z-index: 2;
  pointer-events: none; /* el clic lo gestiona la tarjeta entera */
}
.mosaico-card.mosaico-sel {
  outline: 3px solid var(--brand, #d80a6b);
  outline-offset: -3px;
}
.mosaico-card.mosaico-sel .mosaico-marca {
  background: var(--brand, #d80a6b);
  border-color: #fff;
}
.mosaico-barra-sel {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: #111827;
  border-top: 2px solid var(--brand, #d80a6b);
  color: #e5e7eb;
  font-size: 13px;
  flex-shrink: 0;
}
.mosaico-barra-sel[hidden] { display: none; }
.mosaico-barra-cuenta {
  font-weight: 700;
  color: #fff;
  background: var(--brand, #d80a6b);
  padding: 3px 10px;
  border-radius: 999px;
}
.mosaico-barra-sep {
  width: 1px;
  height: 20px;
  background: #374151;
}
.mosaico-barra-input {
  width: 70px;
  padding: 5px 8px;
  border-radius: 6px;
  border: 2px solid #374151;
  background: #1f2937;
  color: #fff;
  font-weight: 700;
  text-align: center;
}
.mosaico-barra-input:focus {
  outline: none;
  border-color: var(--brand, #d80a6b);
}

/* ============================================================================
   Resumen pre-envío de visita (revisar antes de enviar emails)
   ============================================================================ */
.resumen-preenvio-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--surface-2);
  z-index: 20500;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.resumen-preenvio-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}
.resumen-preenvio-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
.resumen-preenvio-info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
}
.resumen-tabla-wrap {
  overflow-x: auto;
  background: var(--surface);
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}
.resumen-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.resumen-tabla th {
  background: var(--surface-2);
  color: #374151;
  padding: 10px 12px;
  border-bottom: 2px solid #e5e7eb;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
}
.resumen-tabla td {
  padding: 10px 12px;
  border-bottom: 1px solid #f3f4f6;
}
.resumen-tabla tr:last-child td { border-bottom: none; }
.resumen-tabla tfoot td { background: var(--surface-2); }
.resumen-borrar-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 15px;
  padding: 4px 6px;
  border-radius: 4px;
  color: var(--gris-texto);
}
.resumen-borrar-btn:hover { background: #fee2e2; color: #b91c1c; }
.resumen-otras-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--surface);
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}
.resumen-otras-lista li {
  padding: 10px 14px;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #374151;
}
.resumen-otras-lista li:last-child { border-bottom: none; }
.resumen-borrar-mini {
  margin-left: auto;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #9ca3af;
  padding: 2px 8px;
  border-radius: 4px;
  line-height: 1;
}
.resumen-borrar-mini:hover { background: #fee2e2; color: #b91c1c; }
.resumen-acciones {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid #e5e7eb;
  flex-wrap: wrap;
}

/* Responsive móvil/tablet vertical */
@media (max-width: 600px) {
  .resumen-tabla th, .resumen-tabla td { padding: 8px 6px; font-size: 12px; }
  .resumen-cant-input { width: 50px !important; }
}

/* ============================================================================
   Búsqueda global (Ctrl+K + icono lupa)
   ============================================================================ */
.navtab-lupa {
  font-size: 16px;
  padding: 6px 12px;
}
.busqueda-global-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 21000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
}
.busqueda-global-modal {
  width: 100%;
  max-width: 640px;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}
.busqueda-global-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
}
.busqueda-global-header input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  background: transparent;
}
.busqueda-global-cerrar {
  cursor: pointer;
  font-size: 22px;
  color: #9ca3af;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  line-height: 1;
}
.busqueda-global-cerrar:hover {
  background: #f3f4f6;
  color: #374151;
}
.busqueda-global-resultados {
  flex: 1;
  overflow-y: auto;
  min-height: 80px;
  padding: 6px 0;
}
.busqueda-global-hint {
  padding: 16px;
  text-align: center;
  color: #9ca3af;
  font-size: 13px;
}
.busqueda-global-seccion {
  padding: 8px 18px 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gris-texto);
  text-transform: uppercase;
  background: var(--surface-2);
  border-top: 1px solid #f3f4f6;
}
.busqueda-global-seccion:first-child { border-top: none; }
.busqueda-global-item {
  padding: 10px 18px;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
  font-size: 13px;
}
.busqueda-global-item:hover { background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
.bg-item-titulo { color: var(--texto); }
.bg-item-subtitulo {
  font-size: 12px;
  color: var(--gris-texto);
  margin-top: 2px;
}

/* ============================================================================
   Estadísticas por cliente (bloque en su ficha)
   ============================================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.stat-card {
  background: var(--surface-2);
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
}
.stat-label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--gris-texto);
  font-weight: 600;
  margin-bottom: 6px;
}
.stat-valor {
  font-size: 22px;
  font-weight: 700;
  color: var(--texto);
  line-height: 1.1;
}
.stat-sub {
  font-size: 11px;
  color: var(--gris-texto);
  margin-top: 4px;
}
.stats-top-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--surface);
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
}
.stats-top-tabla th {
  background: var(--surface-2);
  padding: 8px 10px;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--gris-texto);
  font-weight: 700;
  border-bottom: 1px solid #e5e7eb;
}
.stats-top-tabla td {
  padding: 8px 10px;
  border-bottom: 1px solid #f3f4f6;
}
.stats-top-tabla tr:last-child td { border-bottom: none; }

/* ============================================================================
   Dashboard admin
   ============================================================================ */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
}
.dash-widget {
  background: var(--surface);
  border: 1px solid var(--gris-borde);
  border-radius: var(--r);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .16s ease, transform .16s ease;
}
.dash-widget:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.dash-widget-full {
  grid-column: 1 / -1;
}
.dash-widget-full:hover { transform: none; }
.dash-widget h3 {
  margin: 0 0 16px 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--texto);
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-badge {
  background: var(--surface-3);
  color: var(--gris-texto);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
}
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}
.dash-kpi {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--gris-borde);
  border-radius: var(--r-sm);
  padding: 20px 14px;
  text-align: center;
}
.dash-kpi-valor {
  font-size: 32px;
  font-weight: 800;
  color: var(--texto);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.dash-kpi-label {
  font-size: 10.5px;
  text-transform: uppercase;
  color: var(--gris-texto);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-top: 9px;
}
.dash-kpi-sub {
  font-size: 11.5px;
  color: color-mix(in srgb, var(--gris-texto) 80%, transparent);
  margin-top: 4px;
}
.dash-lista {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dash-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--gris-borde);
  cursor: pointer;
  font-size: 13px;
  padding-left: 8px; padding-right: 8px;
  margin-left: -8px; margin-right: -8px;
  border-radius: 8px;
  transition: background .12s ease;
}
.dash-item:hover { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.dash-item:last-child { border-bottom: none; }
.dash-item-titulo {
  color: var(--texto);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.dash-item-sub {
  font-size: 11px;
  color: var(--gris-texto);
  margin-top: 3px;
}
.dash-rank {
  display: inline-block;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  background: var(--grad);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
}
.dash-vacio {
  color: color-mix(in srgb, var(--gris-texto) 80%, transparent);
  font-size: 13px;
  text-align: center;
  padding: 14px 0;
  font-style: italic;
  margin: 0;
}
.dash-mas {
  font-size: 11px;
  color: var(--gris-texto);
  text-align: center;
  margin-top: 6px;
  font-style: italic;
}
.dash-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.dash-tabla th {
  padding: 6px 8px;
  background: var(--surface-2);
  color: var(--gris-texto);
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  border-bottom: 1px solid #e5e7eb;
}
.dash-tabla td {
  padding: 6px 8px;
  border-bottom: 1px solid #f3f4f6;
}
.dash-tabla tr:last-child td { border-bottom: none; }

/* Toggle notificaciones email */
.notif-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.notif-toggle input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #cc007a;
}
.notif-toggle-text {
  font-size: 14px;
  color: #374151;
}

/* ============================================================================
   AULA DE FORMACIÓN
   ============================================================================ */
.aula-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.aula-card {
  background: var(--surface);
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: box-shadow 0.15s ease;
}
.aula-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.aula-card-icono {
  font-size: 38px;
  text-align: center;
  background: var(--surface-2);
  border-radius: 8px;
  padding: 10px;
  line-height: 1;
}
.aula-card-cuerpo {
  flex: 1;
}
.aula-card-titulo {
  font-weight: 600;
  color: var(--texto);
  font-size: 14px;
  margin-bottom: 4px;
  line-height: 1.3;
}
.aula-card-tematica {
  display: inline-block;
  background: color-mix(in srgb, var(--brand) 7%, var(--surface));
  color: #be185d;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  margin-bottom: 6px;
}
.aula-card-meta {
  font-size: 11px;
  color: var(--gris-texto);
  margin-bottom: 6px;
}
.aula-card-desc {
  font-size: 12px;
  color: #4b5563;
  line-height: 1.4;
}
.aula-card-acciones {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  border-top: 1px solid #f3f4f6;
  padding-top: 10px;
}
.aula-card-acciones .btn {
  flex: 1;
  min-width: 0;
  text-align: center;
}

/* ============================================================================
   SISTEMA DE AYUDAS — Tooltips contextuales (?)
   Uso: <span class="ayuda-tip" data-tip="texto explicativo">?</span>
   Aparece al pasar el ratón o al recibir foco (táctil).
   ============================================================================ */
.ayuda-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--gris-texto);
  font-size: 11px;
  font-weight: 700;
  font-family: Arial, sans-serif;
  cursor: help;
  position: relative;
  margin-left: 6px;
  vertical-align: middle;
  user-select: none;
  border: none;
  outline: none;
  flex-shrink: 0;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
  /* Forzar overflow visible para que el tooltip pueda salir del contenedor */
  overflow: visible !important;
}
.ayuda-tip:hover,
.ayuda-tip:focus {
  background: var(--brand);
  color: #fff;
}

/* El globo aparece al hover o focus, encima del icono */
.ayuda-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #111827;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  white-space: normal;
  width: max-content;
  max-width: 280px;
  text-align: left;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Flecha apuntando hacia el icono */
.ayuda-tip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--texto);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

.ayuda-tip:hover::after,
.ayuda-tip:hover::before,
.ayuda-tip:focus::after,
.ayuda-tip:focus::before {
  opacity: 1;
  visibility: visible;
}

/* Variante: tooltip que se abre hacia abajo (cuando el ? está cerca del borde superior) */
.ayuda-tip.tip-abajo::after {
  bottom: auto;
  top: calc(100% + 8px);
}
.ayuda-tip.tip-abajo::before {
  bottom: auto;
  top: calc(100% + 2px);
  border-top-color: transparent;
  border-bottom-color: var(--texto);
}

/* Variante: tooltip que se abre hacia la izquierda (cuando el ? está pegado al borde derecho) */
.ayuda-tip.tip-izq::after {
  left: auto;
  right: calc(100% + 8px);
  bottom: 50%;
  transform: translateY(50%);
}
.ayuda-tip.tip-izq::before {
  left: auto;
  right: calc(100% + 2px);
  bottom: 50%;
  transform: translateY(50%);
  border-top-color: transparent;
  border-left-color: var(--texto);
}

/* ============================================================================
   BOTONES SELECTOR CALIDAD PDF (alta / pequeña para WhatsApp)
   ============================================================================ */
.btn-calidad-pdf {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
  width: 100%;
}
.btn-calidad-pdf:hover:not(:disabled) {
  border-color: #cc007a;
  background: #fef3f9;
}
.btn-calidad-pdf:disabled {
  cursor: wait;
}
.bcp-icono {
  font-size: 32px;
  flex-shrink: 0;
}
.bcp-cuerpo {
  flex: 1;
}
.bcp-titulo {
  font-weight: 600;
  font-size: 15px;
  color: var(--texto);
  margin-bottom: 2px;
}
.bcp-sub {
  font-size: 12px;
  color: #4b5563;
  margin-bottom: 4px;
}
.bcp-tam {
  font-size: 11px;
  color: #9ca3af;
}

/* ============================================================================
   CATEGORÍAS / TAGS - chips y selector
   ============================================================================ */

/* Chips de categoría en la fila de cada lámina (admin editor) */
.lamina-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0;
}
.lamina-cat-chip {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

/* Gestión de categorías en Configuración */
.cat-fila {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: var(--surface);
}
.cat-color-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid #00000010;
}
.cat-nombre-input {
  flex: 1;
  border: 0;
  font-size: 14px;
  font-weight: 500;
  padding: 4px;
  background: transparent;
  outline: none;
  font-family: inherit;
}
.cat-nombre-input:focus {
  background: var(--surface-2);
  border-radius: 4px;
}
.cat-color-input {
  width: 32px;
  height: 32px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  padding: 2px;
}
.cat-cuenta {
  font-size: 11px;
  color: var(--gris-texto);
  white-space: nowrap;
}

/* Checkboxes de categorías en modal editar lámina */
.cat-chip-edit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 3px;
  padding: 5px 10px;
  border: 1px solid #d1d5db;
  border-radius: 14px;
  cursor: pointer;
  font-size: 12px;
  background: var(--surface);
  user-select: none;
  transition: background 0.15s, border-color 0.15s;
}
.cat-chip-edit:hover {
  background: var(--surface-2);
  border-color: #9ca3af;
}
.cat-chip-edit input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}
.cat-chip-edit:has(input:checked) {
  background: #fef3f9;
  border-color: #cc007a;
}
.cat-chip-color {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

/* Chips de filtro en visor */
.visor-chips-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.visor-chip-cat {
  background: var(--surface);
  border: 1px solid #d1d5db;
  border-radius: 14px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  color: #4b5563;
  transition: all 0.15s;
  white-space: nowrap;
}
.visor-chip-cat:hover {
  border-color: #cc007a;
  color: #cc007a;
}
.visor-chip-cat-activo {
  background: #cc007a;
  color: #fff !important;
  border-color: #cc007a !important;
}

/* ============================================================================
   BACKUP LOCAL DE PEDIDOS - lista
   ============================================================================ */
.backup-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: var(--surface);
  transition: border-color 0.15s;
}
.backup-fila:hover {
  border-color: #cc007a40;
  background: #fefcfd;
}
.backup-icono {
  font-size: 26px;
  flex-shrink: 0;
}
.backup-info {
  flex: 1;
  min-width: 0;
}
.backup-nombre {
  font-weight: 600;
  font-size: 14px;
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.backup-meta {
  font-size: 11px;
  color: var(--gris-texto);
  margin-top: 2px;
}
.backup-acciones {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .backup-meta { font-size: 10px; }
  .backup-acciones { gap: 2px; }
  .backup-acciones button { padding: 6px 8px; font-size: 11px; }
}

/* ============================================================================
   MODO SENCILLO — para los comerciales que vienen del papel.
   Todo grande: se usa de pie, con una mano, dentro de una farmacia.
   Objetivo de tamaño: ningún botón que se pulse por debajo de 56 px de alto.
   ============================================================================ */
.simple-pantalla {
  min-height: calc(100vh - 60px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 24px 18px; box-sizing: border-box; text-align: center;
}
.simple-lista-pantalla { justify-content: flex-start; }
.simple-saludo { font-size: 22px; color: var(--gris-texto); margin-bottom: 6px; }

.simple-boton-gigante {
  width: 100%; max-width: 460px; min-height: 130px;
  border: none; border-radius: 22px; cursor: pointer;
  background: var(--grad); color: #fff;
  font-size: 26px; font-weight: 800; letter-spacing: .5px; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  box-shadow: 0 12px 28px -10px rgba(216,10,107,.7);
}
.simple-boton-gigante.verde { background: linear-gradient(135deg,#16a34a,#15803d); box-shadow: 0 12px 28px -10px rgba(22,163,74,.7); }
.simple-boton-gigante:active { transform: scale(.98); }
.simple-icono { font-size: 42px; line-height: 1; }

.simple-boton-secundario {
  width: 100%; max-width: 460px; min-height: 60px;
  border: 2px solid var(--gris-borde-2); border-radius: 16px; cursor: pointer;
  background: var(--surface); color: inherit; font-size: 17px; font-weight: 600; font-family: inherit;
}
.simple-aviso-visita {
  background: #fef3c7; color: #92400e; border-radius: 16px; padding: 16px 20px;
  font-size: 18px; line-height: 1.5; max-width: 460px; width: 100%;
}

/* Dos accesos medianos bajo "Empezar visita": planning y formación. */
.simple-accesos {
  display: flex; gap: 12px; width: 100%; max-width: 460px;
}
.simple-boton-medio {
  flex: 1; min-height: 92px;
  border: 2px solid var(--gris-borde-2); border-radius: 18px; cursor: pointer;
  background: var(--surface); color: inherit; font-size: 17px; font-weight: 700; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.simple-boton-medio:active { transform: scale(.97); }
.simple-medio-icono { font-size: 34px; line-height: 1; }

/* Botón flotante para volver al inicio sencillo desde planning/formación. */
.simple-volver-flotante {
  position: fixed; top: 12px; left: 12px; z-index: 9700;
  min-height: 46px; padding: 0 18px;
  border: none; border-radius: 14px; cursor: pointer;
  background: var(--grad); color: #fff; font-size: 16px; font-weight: 800; font-family: inherit;
  box-shadow: 0 8px 20px -8px rgba(216,10,107,.7);
}
/* EL "← INICIO" NO PUEDE TAPAR NADA (10 sep 2026). Es position:fixed arriba-izquierda:
   - Con el aviso rosa de actualización (fixed, top:0, ~50px) quedaba medio debajo: se baja
     lo mismo que la barra de enlace (v277). El padding-top del body NO mueve un fixed.
   - En el visor tapaba el principio del título: la cabecera le deja sitio (la clase la pone
     _ponerVolverSimple), como el "← Catálogos" del solo visor (incidencia #19).
   - En pantalla completa tapaba la esquina de la lámina: ahí no hace falta, se sale con ×. */
body.con-banner-update .simple-volver-flotante { top: 62px; }
@media (max-width: 600px) {
  body.con-banner-update .simple-volver-flotante { top: 57px; }
}
body.modo-simple.simple-con-volver .visor-cabecera { padding-left: 138px; }
body.visor-fullscreen-activo .simple-volver-flotante { display: none !important; }

/* Cabecera de las pantallas de lista */
.simple-cabecera {
  display: flex; align-items: center; gap: 12px; width: 100%; max-width: 560px;
  font-size: 21px; font-weight: 700; margin-bottom: 4px;
}
.simple-atras {
  width: 52px; height: 52px; border-radius: 14px; border: 2px solid var(--gris-borde-2);
  background: var(--surface); color: inherit; font-size: 26px; cursor: pointer; flex: 0 0 auto;
}
.simple-buscador {
  width: 100%; max-width: 560px; padding: 16px 18px; font-size: 19px;
  border: 2px solid var(--gris-borde-2); border-radius: 16px;
  background: var(--surface); color: inherit; box-sizing: border-box;
}
.simple-lista { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 10px; }
.simple-item {
  width: 100%; min-height: 74px; text-align: left; cursor: pointer;
  border: 2px solid var(--gris-borde); border-radius: 16px; background: var(--surface);
  padding: 12px 16px; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  font-family: inherit; color: inherit;
}
.simple-item:active { border-color: var(--brand); }
.simple-item-nombre { font-size: 18px; font-weight: 700; }
.simple-item-sub { font-size: 14px; color: var(--gris-texto); }
.simple-vacio { text-align: center; color: var(--gris-texto); font-size: 17px; padding: 30px 10px; }

/* Barra fija del pedido durante la visita */
.simple-barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: #111827; color: #fff;
  box-shadow: 0 -6px 20px rgba(0,0,0,.28);
}
/* La cuenta del pedido ES un botón (abre el pedido). Se le quita el aspecto de botón del
   navegador para que siga viéndose como el texto blanco de la barra negra. */
.simple-barra-cuenta {
  font-size: 19px; font-weight: 700;
  background: transparent; border: none; color: inherit; font-family: inherit;
  padding: 10px 12px; border-radius: 12px; cursor: pointer;
}
.simple-barra-cuenta:active { background: rgba(255,255,255,.14); }
/* Nada de la barra debe poder seleccionarse: en tablet, mantener el dedo sobre un texto
   abre el menú de Android ("Buscar en Google") en vez de pulsar. */
.simple-barra, .simple-barra * {
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  touch-action: manipulation;
}
/* En pantalla completa la capa negra también usa z-index 9000: la barra del pedido debe ir
   POR ENCIMA, o el toque se lo come la capa y parece que el botón no responde. */
body.visor-fullscreen-activo .simple-barra { z-index: 9500; }

/* FAMILIA: líneas ya añadidas sin cerrar el cuadro (varias graduaciones/colores de una vez) */
.fam-anadidas {
  margin: 10px 0 4px;
  /* Con muchas variantes hay que poder recorrer la lista con el dedo: la caja era de 132px
     y el gesto acababa arrastrando el cuadro en vez de la lista. Más alta y con scroll propio. */
  max-height: 40vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; touch-action: pan-y;
  border: 1px solid #bbf7d0; background: #f0fdf4; border-radius: 10px;
  padding: 8px 10px;
}
.fam-anadida {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: #166534; font-weight: 600;
  padding: 5px 0; border-bottom: 1px dashed #bbf7d0;
}
.fam-anadida-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fam-anadida-btn {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  border: 1px solid #bbf7d0; background: #fff; color: #166534;
  font-size: 17px; font-weight: 800; line-height: 1;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
}
.fam-anadida-btn:active { transform: scale(.94); }
.fam-btn-quitar { border-color: #fecaca; color: #b91c1c; font-size: 14px; }
.fam-anadida:last-child { border-bottom: none; }
.btn-terminar-fam { background: #16a34a !important; color: #fff !important; font-weight: 800; }

/* NAVEGACIÓN AGRUPADA: fila 1 = menús (más peso visual), fila 2 = apartados del menú abierto. */
.navtab-grupo { font-weight: 700; }
.navtabs-sub {
  margin-top: -2px;
  padding-left: 10px;
  border-left: 3px solid color-mix(in srgb, var(--brand) 45%, transparent);
  background: color-mix(in srgb, var(--brand) 4%, transparent);
  border-radius: 0 10px 10px 0;
}
.navtabs-sub .navtab { font-size: 13px; font-weight: 500; }

/* CONFIGURACIÓN EN SECCIONES PLEGABLES (19 bloques agrupados en 5) */
.cfg-secciones { display: flex; flex-direction: column; gap: 10px; }
.cfg-seccion {
  border: 1px solid var(--gris-borde);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}
.cfg-seccion-titulo {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  font-size: 16px; font-weight: 700; color: var(--texto);
  cursor: pointer; list-style: none;
  user-select: none; -webkit-user-select: none;
}
.cfg-seccion-titulo::-webkit-details-marker { display: none; }
.cfg-seccion-titulo::before {
  content: '▸'; color: var(--brand); font-size: 14px;
  transition: transform .15s ease;
}
.cfg-seccion[open] > .cfg-seccion-titulo::before { transform: rotate(90deg); }
.cfg-seccion[open] > .cfg-seccion-titulo {
  border-bottom: 1px solid var(--gris-borde);
  background: color-mix(in srgb, var(--brand) 5%, transparent);
}
.cfg-seccion-titulo .cfg-seccion-num {
  margin-left: auto; font-size: 12px; font-weight: 600; color: var(--gris-texto);
  background: var(--gris-bg); border-radius: 999px; padding: 2px 10px;
}
/* Dentro de una sección, los bloques ya no necesitan su propio marco */
.cfg-seccion .editor-panel {
  border: none; border-radius: 0; margin: 0;
  border-top: 1px solid var(--gris-borde);
  box-shadow: none;
}
.cfg-seccion > .editor-panel:first-of-type { border-top: none; }

/* CONFIGURACIÓN: barra de guardar SIEMPRE a la vista (sticky) mientras se edita. */
.config-barra-guardar {
  position: sticky;
  bottom: 0;
  z-index: 50;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end;
  margin: 14px 0;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--gris-borde);
  border-radius: 12px;
  box-shadow: 0 -6px 20px -10px rgba(0,0,0,.35);
}
.config-barra-guardar .config-barra-txt {
  margin-right: auto; font-size: 12px; color: var(--gris-texto);
}
/* Cambiar de catálogo sin salir de la visita (el general, el de promociones…) */
.simple-barra-cat {
  min-width: 56px; min-height: 56px; border-radius: 14px; cursor: pointer;
  border: 2px solid rgba(255,255,255,.35); background: transparent; color: #fff;
  font-size: 24px; font-family: inherit; flex: 0 0 auto;
}
.simple-item-catalogo { min-height: 88px; }
.simple-item-activo { border-color: var(--brand); background: rgba(216,10,107,.08); }
.simple-barra-btn {
  min-height: 56px; padding: 0 26px; border: none; border-radius: 14px;
  background: #16a34a; color: #fff; font-size: 19px; font-weight: 800; cursor: pointer; font-family: inherit;
}

/* Modal de producto: contador enorme */
.simple-modal-bg { align-items: flex-end; }
.simple-modal {
  width: 100%; max-width: 520px; margin: 0 auto; background: var(--surface);
  border-radius: 24px 24px 0 0; padding: 22px 20px 26px;
  display: flex; flex-direction: column; gap: 14px; box-sizing: border-box;
}
.simple-modal-cab { text-align: center; }
.simple-modal-nombre { font-size: 21px; font-weight: 800; line-height: 1.3; }
.simple-modal-ref { font-size: 16px; color: #1d4ed8; font-weight: 700; margin-top: 4px; }
.simple-modal-precio { font-size: 17px; color: var(--gris-texto); margin-top: 4px; }
.simple-contador { display: flex; align-items: center; justify-content: center; gap: 20px; }
.simple-mas-menos {
  width: 84px; height: 84px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--gris-borde); color: inherit; font-size: 44px; line-height: 1; font-family: inherit;
}
.simple-mas-menos:active { background: var(--brand); color: #fff; }
.simple-cantidad { font-size: 60px; font-weight: 800; min-width: 110px; }
.simple-rapidos { display: flex; gap: 10px; justify-content: center; }
.simple-rapidos button {
  min-width: 66px; min-height: 52px; border-radius: 14px; cursor: pointer;
  border: 2px solid var(--gris-borde-2); background: var(--surface); color: inherit;
  font-size: 19px; font-weight: 700; font-family: inherit;
}
.simple-anadir {
  min-height: 78px; border: none; border-radius: 18px; cursor: pointer;
  background: #16a34a; color: #fff; font-size: 23px; font-weight: 800; font-family: inherit;
}
.simple-quitar, .simple-cancelar {
  min-height: 56px; border-radius: 14px; cursor: pointer; font-size: 17px; font-family: inherit;
  border: 2px solid var(--gris-borde-2); background: var(--surface); color: inherit;
}
.simple-quitar { border-color: #fca5a5; color: #b91c1c; }

/* Repaso del pedido */
.simple-repaso-linea {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 2px solid var(--gris-borde); border-radius: 16px; padding: 14px 16px; background: var(--surface);
}
.simple-repaso-nombre { font-size: 17px; font-weight: 700; }
.simple-repaso-sub { font-size: 15px; color: var(--gris-texto); }
.simple-repaso-quitar {
  width: 54px; height: 54px; border-radius: 14px; cursor: pointer; font-size: 22px;
  border: 2px solid #fca5a5; background: var(--surface); color: #b91c1c; flex: 0 0 auto;
}
.simple-abajo { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }

/* Confirmación */
.simple-exito { font-size: 90px; line-height: 1; }
.simple-exito-txt { font-size: 26px; font-weight: 800; line-height: 1.4; }
.simple-exito-txt span { font-size: 17px; font-weight: 400; color: var(--gris-texto); }

.simple-aviso {
  position: fixed; left: 50%; top: 22%; transform: translateX(-50%); z-index: 9500;
  background: #16a34a; color: #fff; font-size: 20px; font-weight: 700;
  padding: 16px 28px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.simple-pie {
  margin-top: auto; padding-top: 20px; display: flex; flex-direction: column;
  align-items: center; gap: 8px; font-size: 12px; color: var(--gris-texto);
}
.simple-enlace {
  border: none; background: none; color: var(--brand); font-size: 16px;
  cursor: pointer; font-family: inherit; padding: 10px;
}
/* En modo sencillo el visor deja hueco a la barra del pedido */
/* En modo sencillo desaparece todo lo que no sea el camino: pestañas, cabecera y
   la barra de visita normal (aquí la sustituye la barra grande del pedido). */
body.modo-simple .navtabs,
body.modo-simple .topbar,
body.modo-simple .banner-visita { display: none !important; }
body.modo-simple { padding-bottom: 84px; }
/* Botones del visor: nada por debajo de 56px, que se tocan con el dedo en la tablet */
body.modo-simple .visor-nav-btn,
body.modo-simple .visor-fullscreen-btn { min-height: 56px; font-size: 17px; }
/* Del visor solo queda pasar láminas: fuera modos (presentación/mosaico), descargas,
   última visita, "+ Anotar" y el carrito flotante (lo sustituye la barra de abajo). */
body.modo-simple .visor-modo-btn,
body.modo-simple .carrito-fab,
body.modo-simple .visor-export-bar,
body.modo-simple .visor-anotaciones-header { display: none !important; }
/* ...pero SÍ dejamos el conmutador presentación/mosaico: el comercial en modo sencillo
   también quiere ver todas las láminas de golpe (mosaico). */
body.modo-simple .visor-modo-btn.visor-modo-vista { display: inline-flex !important; }
/* "ÚLTIMA VISITA": la regla de arriba escondía TODOS los botones de la cabecera del visor,
   y este caía dentro — el comercial en modo sencillo no tenía forma de ver qué se llevó
   el cliente la vez anterior (Fernando, 4 sep 2026). Se destapa y, además, se le pone
   texto: un 📋 pequeño no lo encuentra quien viene del papel. */
body.modo-simple .visor-modo-btn.btn-ultima-visita {
  display: inline-flex !important;
  width: auto;
  background: #0d9488;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  padding: 0 14px;
  min-height: 44px;
  border-radius: 22px;
  white-space: nowrap;
}
/* "ENVIAR LÁMINAS": la regla body.modo-simple .visor-modo-btn{display:none} también lo
   escondía, así que el comercial en tablet (todos van en modo sencillo) no tenía el ✉️
   para mandar láminas a un cliente que las pide (Fernando, 29 sep 2026: "en modo mosaico
   ese botón no se ve por ningún lado"). Se destapa y, como con "Última visita", se le pone
   TEXTO: un ✉️ suelto no lo encuentra quien viene del papel. */
body.modo-simple .visor-modo-btn.btn-enviar-laminas {
  display: inline-flex !important;
  width: auto;
  background: #d80a6b;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  padding: 0 14px;
  min-height: 44px;
  border-radius: 22px;
  white-space: nowrap;
}
body.modo-simple .visor-modo-btn.btn-enviar-laminas::after { content: " Enviar láminas"; }
/* "A MI WHATSAPP" (28-oct-2026): el catálogo entero en PDF al WhatsApp del comercial para reenviarlo. Verde WhatsApp
   y con texto, por lo mismo que "Enviar láminas". En móvil baja de línea con el resto (regla de max-width:599px). */
body.modo-simple .visor-modo-btn.btn-mi-whatsapp {
  display: inline-flex !important;
  width: auto;
  background: #16a34a;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  padding: 0 14px;
  min-height: 44px;
  border-radius: 22px;
  white-space: nowrap;
}
body.modo-simple .visor-modo-btn.btn-mi-whatsapp::after { content: " Enviar catálogo a mi WhatsApp"; }
/* Las tres pastillas, con el icono y el texto centrados en altura (Fernando, 30-oct-2026: "están en la parte de arriba
   del botón"): inline-flex sin align-items los deja arriba. El gap sustituye al espacio del ::after, que flex se come. */
body.modo-simple .visor-modo-btn.btn-ultima-visita,
body.modo-simple .visor-modo-btn.btn-enviar-laminas,
body.modo-simple .visor-modo-btn.btn-mi-whatsapp {
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: auto;
  min-height: 48px;
  line-height: 1.1;
}
/* Con tres pastillas (Enviar láminas, A mi WhatsApp y, con visita, Última visita) en una TABLET de 768 px el 📺 y el ▦
   mosaico se iban fuera de la pantalla (medido 28-oct: ▦ en x 798-836 con 768 de ancho; scrollWidth no lo ve por el
   recorte). En modo sencillo los botones bajan de línea antes que salirse, a cualquier ancho; y hasta tablet, el título
   va en su línea y los botones en la suya. */
body.modo-simple .visor-modo-switch { flex-wrap: wrap; justify-content: flex-end; }
/* 📺 ▦ y 🔍 a tamaño de DEDO (Fernando, 30-oct-2026: "muy pequeños, muy incómodos"). Medían 38×32 px, por debajo de los
   44-48 recomendados para tocar en tablet o móvil. Fondo y borde para que se vean como botones, no como iconos sueltos.
   En solo visor son todos iconos, así que van todos a la misma medida. */
body.modo-simple .visor-modo-btn.visor-modo-vista,
body.modo-simple .visor-modo-btn.btn-buscar-lamina,
body.solo-visor .visor-modo-btn {
  width: 52px;
  height: 48px;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  background: var(--surface);
  border: 1px solid var(--gris-borde);
  border-radius: 10px;
}
body.modo-simple .visor-modo-btn.visor-modo-vista.activo,
body.solo-visor .visor-modo-btn.visor-modo-vista.activo {
  border: 2px solid var(--rosa);
  background: var(--rosa-claro);
}
@media (max-width: 1024px) {
  body.modo-simple .visor-cabecera-fila { flex-wrap: wrap; row-gap: 6px; }
  body.modo-simple .visor-titulo-bloque { flex: 1 1 100%; }
}
/* ============================================================================
   TAMAÑO UNIFORME DE LA LÁMINA EN MODO SENCILLO
   El arreglo del tamaño (v269) se escribió SOLO para body.solo-visor. En modo sencillo
   no existía, así que cada lámina salía del alto que le daba la proporción de su imagen
   original: medido en la misma pantalla, las 5 primeras láminas daban 801, 947, 993, 986
   y 994 px, mientras en solo visor todas daban 1168. De ahí "unas a página completa y
   otras no" (Fernando, 7 sep 2026, avisos #26/#27/#28/#29). Y al no haber tope de alto,
   una lámina alta se salía por abajo y la franja de "TERMINAR" le comía la última línea.
   El hueco NO se fija a ojo: --simple-chrome lo mide _ajustarAltoLaminaSimple() sumando
   lo que ocupan de verdad la cabecera, la barra de pasar láminas y la franja del pedido.
   Poner un número fijo es lo que provocó en su día que la lámina se saliera al aparecer
   una barra (incidencia #5). El valor de reserva solo actúa si aún no se ha medido.
   ============================================================================ */
body.modo-simple .visor-imagen-contenedor {
  max-width: 100vw;
  max-height: calc(100vh - var(--simple-chrome, 210px));    /* respaldo Chrome <108 (sin dvh) */
  max-height: calc(100dvh - var(--simple-chrome, 210px));
  display: flex;
  align-items: center;
  justify-content: center;
}
body.modo-simple .visor-imagen-zoom {
  width: auto;
  max-width: 100%;
  max-height: 100%;
}
body.modo-simple .visor-imagen {
  width: auto;
  /* height (no solo max-height): con max-height, una lámina de baja resolución NO se
     amplía y se queda pequeña — la misma lección de la incidencia #16. */
  height: calc(100vh - var(--simple-chrome, 210px));
  height: calc(100dvh - var(--simple-chrome, 210px));
  max-width: 100%;
  max-height: calc(100vh - var(--simple-chrome, 210px));
  max-height: calc(100dvh - var(--simple-chrome, 210px));
  object-fit: contain;
}
/* PANTALLA COMPLETA en modo sencillo: la franja del pedido NO puede quedarse encima de la
   lámina tapándole la última línea. En ⛶ manda la lámina y los controles propios (× ◀ ▶);
   para terminar la visita se sale de pantalla completa. */
body.visor-fullscreen-activo .simple-barra { display: none !important; }
body.visor-fullscreen-activo.modo-simple { padding-bottom: 0 !important; }

/* El texto solo en modo sencillo: en el normal la cabecera va apretada y basta el icono. */
.btn-ultima-visita-txt { display: none; }
body.modo-simple .btn-ultima-visita-txt { display: inline; }
/* El 🛟 de incidencias no debe quedar tapado por la barra negra del pedido (misma altura). */
body.modo-simple .btn-incidencia { bottom: 96px; z-index: 99500; }

/* PARTE DE ARRIBA DESPEJADA en modo sencillo: antes se apilaban 50px muertos + cabecera
   con buscador + categorías + toggle (~245px) y en la tablet los botones rosas de navegación
   quedaban cortados por el borde. Recuperamos los 50px y quitamos buscador/categorías del
   visor (el modo sencillo va guiado y despejado); arriba queda solo volver + título + 📺/▦. */
body.modo-simple { padding-top: 0 !important; }
/* ...SALVO con el aviso rosa de actualización (fixed, top:0): sin este hueco, el aviso
   tapaba la cabecera del visor entera —título, 🔍, "Última visita"— mientras estaba en
   pantalla, y el "← Inicio" (que sí baja, ver .simple-volver-flotante) quedaba sin
   cabecera al lado y encima de "◀ Anterior". Mismo hueco que en el resto de la app. */
body.modo-simple.con-banner-update { padding-top: 50px !important; }
@media (max-width: 600px) {
  body.modo-simple.con-banner-update { padding-top: 45px !important; }
}
body.modo-simple .visor-cabecera { padding: 6px 10px; gap: 4px; }
body.modo-simple .visor-buscador-fila,
body.modo-simple .visor-chips-cats { display: none !important; }
/* ...pero se despliegan al pulsar el 🔍 (si no, no había forma de buscar una lámina). */
body.modo-simple .visor-cabecera.solovisor-buscar-abierto .visor-buscador-fila { display: flex !important; }
body.modo-simple .visor-cabecera.solovisor-buscar-abierto .visor-chips-cats { display: flex !important; flex-wrap: wrap; }

/* ============================================================================
   TODO LO FIJO ARRIBA SE BAJA CON EL AVISO ROSA — UNA SOLA REGLA (11 sep 2026)
   El aviso "Hay una nueva versión" es fixed, top:0, z-index 999999: tapa lo que haya en
   su franja. Se fue arreglando botón a botón con medidas fijas (50px, 45px en móvil):
   barra de enlace (v277), «← Inicio» (v295)... y el «← Catálogos» del solo visor se quedó
   fuera (incidencia #31: parecía que no se podía salir del catálogo). Además en móvil el
   aviso ocupa dos líneas (53px) y 45px no bastaba. Ahora el alto REAL lo mide
   _medirAvisoActualizacion() (app.js) en --aviso-alto y todo usa ese valor.
   Va al FINAL del fichero a propósito: misma especificidad que las reglas antiguas, gana
   la última. UN BOTÓN FIJO NUEVO ARRIBA = AÑADIRLO AQUÍ, no inventarle su propia medida.
   ============================================================================ */
body.con-banner-update { padding-top: var(--aviso-alto, 50px); }
body.modo-simple.con-banner-update,
body.solo-visor.con-banner-update { padding-top: var(--aviso-alto, 50px) !important; }
body.con-banner-update .solovisor-volver { top: calc(10px + var(--aviso-alto, 50px)); }
body.con-banner-update .simple-volver-flotante { top: calc(12px + var(--aviso-alto, 50px)); }
body.con-banner-update .barra-enlace { top: var(--aviso-alto, 50px); }
body.con-banner-update .fs-btn-volver { top: calc(16px + var(--aviso-alto, 50px)) !important; }
/* En solo visor la lámina se mide contra el alto de la pantalla: con el hueco del aviso
   tiene que descontarlo, o se sale por abajo esos mismos píxeles. */
body.solo-visor.con-banner-update .visor-imagen {
  height: calc(100vh - 112px - var(--solovisor-extra, 0px) - var(--aviso-alto, 50px));
  height: calc(100dvh - 112px - var(--solovisor-extra, 0px) - var(--aviso-alto, 50px));
  max-height: calc(100vh - 112px - var(--solovisor-extra, 0px) - var(--aviso-alto, 50px));
  max-height: calc(100dvh - 112px - var(--solovisor-extra, 0px) - var(--aviso-alto, 50px));
}

/* ============================================================================
   SOLO VISOR EN MÓVIL (11 sep 2026, incidencia #31 vista en el móvil de Fernando:
   ~320px de ancho CSS). La cabecera solo estaba pensada para tablet: una fila con
   ← + título + 6 iconos. En un móvil los iconos se comían el ancho y al título le
   quedaban unos píxeles (la fecha salía en vertical, una palabra por renglón); el botón
   morado fijo «← Catálogos» tapaba además el nombre (el hueco para él solo existía a
   partir de 600px), y la flecha rosa ← hacía lo mismo que el botón morado.
   Aquí: la cabecera empieza DEBAJO del botón morado, el nombre va en su fila entera y
   los iconos en la de abajo; sin flecha rosa si está el botón morado. Y la lámina, que
   se medía con los 112px de cabecera de la tablet y se salía por abajo, ocupa el ancho
   con su proporción (en un móvil vertical manda el ancho). En tablet NO cambia nada.
   Va al final para ganar a las reglas de arriba (misma especificidad).
   ============================================================================ */
@media (max-width: 599px) {
  body.solo-visor.solovisor-con-volver .visor-cabecera { padding-top: 58px; }   /* 10 + 44 del botón + aire */
  body.solo-visor.solovisor-con-volver .btn-icon-volver { display: none; }
  body.solo-visor .visor-cabecera-fila { flex-wrap: wrap; row-gap: 6px; }
  body.solo-visor .visor-titulo-bloque { flex: 1 1 100%; }
  body.solo-visor .visor-titulo { white-space: normal; overflow: visible; }
  body.solo-visor .visor-modo-switch { flex-wrap: wrap; }
  /* MODO SENCILLO en móvil: mismo arreglo que solo-visor. Al añadir la pastilla ancha
     "✉️ Enviar láminas" (v313), en el móvil de Fernando los botones se salían por la
     derecha y el de MOSAICO quedaba fuera de pantalla (30-sep-2026). Bajamos el título a
     su línea y los botones a la suya, donde caben 🔍 + Enviar láminas + 📺 + ▦. */
  body.modo-simple .visor-cabecera-fila { flex-wrap: wrap; row-gap: 6px; }
  body.modo-simple .visor-titulo-bloque { flex: 1 1 100%; }
  body.modo-simple .visor-titulo { white-space: normal; overflow: visible; }
  body.modo-simple .visor-modo-switch { flex-wrap: wrap; justify-content: flex-end; }
  body.solo-visor .visor-imagen-contenedor,
  body.solo-visor.con-banner-update .visor-imagen-contenedor { max-height: none; }
  body.solo-visor .visor-imagen,
  body.solo-visor.con-banner-update .visor-imagen { width: 100%; height: auto; max-height: none; }
}

/* "Salir / cambiar de usuario" en el pie: SOLO en solo visor, que es el único modo sin la
   barra de arriba (y por tanto sin el "Salir" de siempre). Ver salirDeSoloVisor(). */
.solovisor-salir-wrap { display: none; }
/* margin-bottom: el 🛟 va fijo abajo a la derecha y tapaba el final del botón ("usuario")
   en el móvil de Fernando. Con este hueco, al bajar del todo el botón queda por encima. */
body.solo-visor .solovisor-salir-wrap { display: block; margin-top: 10px; margin-bottom: 84px; }
.solovisor-salir {
  background: #fff; color: #6b7280; border: 1px solid #d1d5db; border-radius: 10px;
  padding: 10px 16px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.solovisor-salir:active { transform: scale(.97); }

/* Desplegable de VISITAS ANTERIORES (20 sep 2026): encima del panel de la visita, tanto en
   el modal del visor como en la ficha del cliente. Solo sale si hay más de una visita. */
.uv-selector {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 10px; font-size: 13px; color: var(--gris-texto);
}
.uv-selector select {
  flex: 1 1 220px; max-width: 100%;
  padding: 9px 10px; min-height: 42px;      /* dedo en tablet */
  border: 1px solid var(--gris-borde); border-radius: 10px;
  background: var(--surface); color: var(--texto);
  font-family: inherit; font-size: 14px;
}

/* BARRA DE ARRIBA EN MÓVIL (11 sep 2026): era una sola fila sin poder partirse (título a la
   izquierda; Online, Ver como…, tema y Salir a la derecha). En el móvil de Fernando no cabía
   y "Salir" quedaba cortado fuera de la pantalla. En estrecho: dos filas, los botones debajo
   del título y todos a la vista. En tablet/PC no cambia. */
@media (max-width: 600px) {
  .topbar { flex-wrap: wrap; row-gap: 10px; padding: 12px 16px; }
  .topbar-acciones { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
}

/* ============================================================================
   MODO SENCILLO EN EL MÓVIL (6-nov-2026, revisión en el Samsung de pruebas a 320 px CSS,
   el mismo ancho que el móvil de Fernando). Medido elemento a elemento, se salía:
   - la fila 🔍 ✉️ 📲 📺 ▦ del visor, 72 px por la derecha: la cabecera se metía 138 px hacia
     dentro para el «← Inicio» flotante y las pastillas con texto no podían partirse;
   - «TERMINAR ▸» de la barra del pedido (llegaba a 358 px);
   - «✉️ Enviar (n)» de la barra de enviar láminas, y su texto salía una palabra por línea;
   - las ventanas que suben desde abajo, por ARRIBA: más altas que la pantalla y pegadas al
     fondo con flex-end, lo que sobraba quedaba encima del borde, sin forma de verlo.
   Además «Anterior / Siguiente» ocupaban dos filas y la lámina se quedaba en una tira.
   Va al final para ganar a las reglas anteriores. En tablet y PC no cambia nada.
   ============================================================================ */
/* Ventana que sube desde abajo: pegada abajo si cabe, y si no cabe empieza arriba y se desplaza.
   (margin-top:auto en vez de align-items:flex-end, que en un contenedor con scroll corta por arriba). */
.simple-modal-bg { align-items: flex-start; }
.simple-modal-bg > .simple-modal { margin-top: auto; }
/* El 🛟 flotante: a 96 px solo si está la barra negra del pedido; si no, abajo del todo.
   Y fuera mientras se escribe el aviso: tapaba su propia ventana. */
body.modo-simple:not(:has(#simple-barra)) .btn-incidencia { bottom: 18px; }
body:has(#inc-texto) .btn-incidencia { display: none; }
/* La × de cerrar ventanas medía 12 × 22: imposible de acertar con el dedo. */
.modal-cerrar { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }

@media (max-width: 599px) {
  body.modo-simple:not(:has(#simple-barra)) .btn-incidencia { bottom: 12px; }
  /* Lo que va al fondo de una lista no puede quedar debajo del 🛟: hueco para bajarlo de él. */
  body.modo-simple:not(:has(#simple-barra)) { padding-bottom: 76px; }
  /* Las ventanas que suben desde abajo (pedido, apuntar un producto) llevan sus botones justo
     donde va el 🛟 y los tapaba («Seguir en el catálogo»): mientras están abiertas, fuera. */
  body:has(#carrito-overlay) .btn-incidencia,
  body:has(.simple-modal-bg) .btn-incidencia { display: none; }
  /* Pie del pedido (modo normal): Reposición, Devolver y Seguir/Cerrar en fila no cabían. */
  .carrito-footer { flex-wrap: wrap; }
  .carrito-footer > .btn { flex: 1 1 calc(50% - 4px); min-width: 0; margin-bottom: 0 !important; }
  .carrito-footer > div { flex: 1 1 100%; }

  /* CABECERA DEL VISOR: el título en la fila del «← Inicio» (sin meter toda la cabecera hacia
     dentro), en una línea; debajo las dos pastillas a medias y luego los iconos. */
  body.modo-simple.simple-con-volver .visor-cabecera { padding-left: 10px; }
  body.modo-simple.simple-con-volver .btn-icon-volver { display: none; }
  body.modo-simple .visor-titulo-bloque { flex: 1 1 0; min-height: 46px; display: flex; flex-direction: column; justify-content: center; }
  body.modo-simple.simple-con-volver .visor-titulo-bloque { margin-left: 112px; }
  body.modo-simple .visor-titulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
  body.modo-simple .visor-subtitulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.modo-simple .visor-modo-switch { flex: 1 1 100%; gap: 6px; padding: 4px; }
  body.modo-simple .visor-modo-btn.btn-enviar-laminas,
  body.modo-simple .visor-modo-btn.btn-mi-whatsapp {
    order: -1; flex: 1 1 calc(50% - 3px); min-width: 0; white-space: normal;
    font-size: 13px; padding: 4px 8px; min-height: 46px; text-align: center;
  }
  body.modo-simple .visor-modo-btn.btn-ultima-visita { flex: 1 1 auto; min-width: 0; white-space: normal; font-size: 13px; padding: 4px 8px; min-height: 46px; }
  body.modo-simple .visor-modo-btn.visor-modo-vista,
  body.modo-simple .visor-modo-btn.btn-buscar-lamina { width: 48px; height: 46px; font-size: 22px; }

  /* LA LÁMINA, A TODO EL ANCHO. En la tablet se encaja al alto de la pantalla (todas iguales y
     enteras, 7-sep); en un móvil en vertical eso la dejaba en una tira de 90 px bajo la cabecera.
     Aquí manda el ancho, como en el solo visor (11-sep): todas igual de anchas y se baja para
     ver el final. El hueco de abajo (padding del body) deja asomarla por encima del pedido. */
  body.modo-simple .visor-imagen-contenedor { max-height: none; }
  body.modo-simple .visor-imagen { width: 100%; height: auto; max-height: none; }

  /* ANTERIOR / SIGUIENTE en una sola fila: en el móvil bastan las flechas. */
  .visor-nav-txt { display: none; }
  .visor-nav-superior { flex-wrap: nowrap; gap: 6px; padding: 6px; }
  .visor-nav-superior .visor-nav-btn { min-width: 0; padding: 0 8px; }
  .visor-nav-superior .visor-nav-btn:not(.visor-sos-btn) { flex: 1 1 0; font-size: 20px; }
  .visor-nav-superior .visor-sos-btn { flex: 0 0 48px; min-width: 48px; }
  .visor-nav-superior .visor-contador { flex: 0 0 auto; }
  .visor-nav-superior .visor-fullscreen-btn { flex: 0 0 48px; min-width: 48px; padding: 0; }
  body.modo-simple .visor-nav-btn,
  body.modo-simple .visor-fullscreen-btn { min-height: 50px; }

  /* BARRA DEL PEDIDO: los tres botones dentro de la pantalla. */
  .simple-barra { padding: 8px 10px; gap: 8px; }
  .simple-barra-cuenta { flex: 1 1 auto; min-width: 0; font-size: 16px; padding: 8px 6px; }
  .simple-barra-btn { flex: 0 0 auto; padding: 0 14px; font-size: 16px; }
  .simple-barra-cat { min-width: 50px; min-height: 50px; }

  /* BARRA DE ENVIAR LÁMINAS: el texto en su línea y los botones debajo, a partes iguales. */
  .barra-enviar-laminas { flex-wrap: wrap; gap: 8px; padding: 8px 10px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .barra-enviar-laminas .bel-info { flex: 1 1 100%; order: -1; text-align: center; font-size: 13px; }
  .barra-enviar-laminas .bel-enviar { flex: 1 1 0; min-width: 0; padding: 0 8px; font-size: 14px; }
  .visor-mosaico.mosaico-enviar { padding-bottom: 130px; }

  /* PLANNING: filtros y botones de visita a tamaño de dedo (medían 29 px de alto). */
  .planning-chip { min-height: 38px; }
  .plan-visita { min-height: 38px; min-width: 44px; }
  /* APUNTAR UN PRODUCTO: la fila 3 · 6 · 12 · 24 · Otra no cabía y, centrada, se salía por los dos
     lados (el «3» quedaba a la izquierda de la pantalla, sin forma de llegar). Cuatro en fila y
     «Otra» debajo. Y el − / + (84 px) se estrujaba en óvalos: más pequeños para que quepan. */
  .simple-rapidos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .simple-rapidos button { min-width: 0; }
  .simple-rapidos .cond-otra { grid-column: 1 / -1; }
  .simple-contador { gap: 12px; }
  .simple-mas-menos { width: 68px; height: 68px; flex: 0 0 68px; font-size: 38px; }
  .simple-cantidad { font-size: 52px; min-width: 80px; text-align: center; }

  /* BUSCADOR DEL VISOR: categorías (26 px) y la ✕ de borrar (28 px), a tamaño de dedo. */
  .visor-chip-cat { min-height: 38px; }
  .visor-buscador-clear { min-width: 40px; min-height: 40px; }

  /* El 🛟 tapaba la ✕ y «Imprimir» de la barra de enviar láminas: va por encima de ella.
     (Con :not(:has(#simple-barra)) delante, que lleva un id, porque si no pierde contra la regla
     de «sin barra del pedido → abajo del todo», más específica.) */
  body:has(.barra-enviar-laminas) .btn-incidencia,
  body.modo-simple:not(:has(#simple-barra)):has(.barra-enviar-laminas) .btn-incidencia { bottom: 118px; }
  /* La ✕ del pedido (33 px) y «Ver mis avisos anteriores» (15 px de alto), a tamaño de dedo. */
  .carrito-cerrar { min-width: 44px; min-height: 44px; }
  .btn-enlace { padding-top: 10px; padding-bottom: 10px; }

  /* AYUDAS «?»: el globo mide hasta 280 px y se centraba en el icono; junto al borde se cortaba.
     En el móvil sale como un aviso a lo ancho, ARRIBA (abajo quedaba debajo de la barra del pedido:
     la cabecera fija del visor encierra al globo en su capa), sin depender de dónde esté el «?». */
  .ayuda-tip { width: 26px; height: 26px; font-size: 13px; }
  .ayuda-tip::after,
  .ayuda-tip.tip-abajo::after,
  .ayuda-tip.tip-izq::after {
    position: fixed; left: 12px; right: 12px; bottom: auto; top: calc(12px + var(--aviso-alto, 0px));
    width: auto; max-width: none; transform: none; z-index: 100000; font-size: 14px; padding: 12px 14px;
  }
  .ayuda-tip::before { display: none; }
}
/* En tablet la barra de enviar láminas mide ~64 px: el 🛟 también por encima (mismo refuerzo de
   especificidad que en el móvil; sin él la tapaba igual, medido en la Tab S10 FE+ el 6-nov). */
@media (min-width: 600px) {
  body:has(.barra-enviar-laminas) .btn-incidencia,
  body.modo-simple:not(:has(#simple-barra)):has(.barra-enviar-laminas) .btn-incidencia { bottom: 84px; }
}
/* A tamaño de dedo también en la TABLET, que es donde más se usan (medidos en la Tab S10 FE+):
   filtros del planning y categorías del buscador (26-29 px de alto), ✕ del buscador y del pedido. */
.planning-chip { min-height: 38px; }
.plan-visita { min-height: 38px; min-width: 44px; }
.visor-chip-cat { min-height: 38px; }
.visor-buscador-clear { min-width: 40px; min-height: 40px; }
.carrito-cerrar { min-width: 44px; min-height: 44px; }
/* Lo apuntado en la visita, probado con el dedo en la Tab S10 FE+ (6-nov): ✏️ y 🗑 de cada línea medían
   ~30 px; y la fila «Seguir en el catálogo / Cerrar visita» no se estiraba (el div no crecía) y
   «Seguir…» salía en tres renglones con medio panel vacío al lado. */
.carrito-btn { min-width: 44px; min-height: 44px; font-size: 18px; }
/* Lo mismo en la lista de lo apuntado bajo la lámina: ✏️ y 🗑 medían 28 × 25. */
.anot-chip-btn { min-width: 40px; min-height: 40px; font-size: 17px; }
.carrito-footer { flex-wrap: wrap; }
.carrito-footer > div { flex: 1 1 100%; }
.carrito-footer .carrito-seguir { flex: 1 1 0; }
.carrito-footer > div > .btn-primary { flex: 2 1 0; }

/* ===== ORDENAR CATÁLOGOS (admin, v336 · 6-nov-2026) ===== */
.ordenar-cats-card{max-width:520px}
.ordenar-cats-ayuda{font-size:13px;color:var(--gris-texto);margin:0 0 10px}
.ordenar-cats-lista{display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow-y:auto}
.ordenar-cats-fila{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}
.ordenar-cats-num{flex:0 0 26px;height:26px;border-radius:50%;background:#f1f5f9;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.ordenar-cats-nombre{flex:1 1 0;min-width:0;font-size:14px;font-weight:600;overflow-wrap:anywhere}
.ordenar-cats-btn{flex:0 0 44px;width:44px;height:44px;border:1px solid #cbd5e1;border-radius:10px;background:#f8fafc;font-size:16px;cursor:pointer}
.ordenar-cats-btn:active{background:#e2e8f0}
.ordenar-cats-btn:disabled{opacity:.3;cursor:default}