/* NAGURA OPS 2.0 - dashboard local */
/* Inter: la tipografia estandar de dashboards. Empaquetada local (funciona sin internet). */
@font-face { font-family: 'Inter'; src: url('fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/inter-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/inter-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/inter-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

/* LA PALETA "PAPEL" — los colores de la tienda, medidos en su home.
 *
 * Todo tono que lleve texto encima está VERIFICADO contra WCAG AA (4.5:1 para
 * texto, 3:1 para bordes de control) sobre los tres fondos de la app: papel,
 * panel y banda. Cuatro de los tonos del primer borrador no pasaban y se
 * corrigieron aquí; si algún día se tocan, hay que volver a medirlos.
 *
 * EL ORO DE LA MARCA VA PARTIDO EN DOS a propósito: #8A6A32 es el de la tienda
 * y sirve para rellenos, bordes y selección, pero como TEXTO da 3.89 sobre la
 * banda beige y no llega. Para eso está --acento-texto. */
:root {
  /* DESDE EL 6-OCT-2026 la base es CLARO PROFESIONAL. Estos valores salen de
   * public/tema.js (TEMAS.claro); app.js los vuelve a poner al arrancar, con el
   * tema que cada quien eligió (☀️/🌙) y los cambios de 🎨 Colores. Si se cambia
   * un color de fábrica, se cambia en tema.js, no aquí. */
  color-scheme: light;
  /* Las del mapa y el resto que agregó tema.js */
  --fondo: #f4f5f7;
  --panel: #ffffff;
  --panel-hondo: rgba(0, 0, 0, 0.04);
  --panel-borde: #e3e6eb;
  --borde-control: #9aa3b2;
  --texto: #111827;
  --texto-suave: #4b5563;
  --texto-tenue: #6b7280;
  --sobre-color: #ffffff;
  --acento: #2563eb;
  --acento-texto: #2563eb;
  --acento-wash: rgba(37, 99, 235, 0.096);
  --acento-suave: rgba(37, 99, 235, 0.24);
  --acento-fuerte: rgba(37, 99, 235, 0.4);
  --acento-borde: rgba(37, 99, 235, 0.448);
  --acento-halo: rgba(37, 99, 235, 0.416);
  --acento-glow: rgba(37, 99, 235, 0.16);
  --wash-tenue: rgba(0, 0, 0, 0.048);
  --wash-suave: rgba(0, 0, 0, 0.072);
  --wash-medio: rgba(0, 0, 0, 0.112);
  --wash-fuerte: rgba(0, 0, 0, 0.128);
  --sombra-flotante: 0 12px 28px rgba(15, 23, 42, 0.16);
  --sombra-caja: 0 10px 30px rgba(15, 23, 42, 0.10);
  --rojo-apagado: #ef9d9d;
  --rojo-apagado-texto: #4e1c27;
  --morado: #7c3aed;
  --morado-suave: rgba(124, 58, 237, 0.144);
  --morado-wash: rgba(124, 58, 237, 0.288);
  --morado-borde: rgba(124, 58, 237, 0.4);
  --mapa-vacio: rgba(0, 0, 0, 0.112);
  --verde: #15803d;
  --verde-tinte: rgba(21, 128, 61, 0.128);
  --verde-wash: rgba(21, 128, 61, 0.24);
  --verde-borde: rgba(21, 128, 61, 0.64);
  --ambar: #b45309;
  --ambar-tinte: rgba(180, 83, 9, 0.128);
  --ambar-wash: rgba(180, 83, 9, 0.24);
  --ambar-borde: rgba(180, 83, 9, 0.72);
  --rojo: #dc2626;
  --rojo-tinte: rgba(220, 38, 38, 0.128);
  --rojo-wash: rgba(220, 38, 38, 0.24);
  --rojo-borde: rgba(220, 38, 38, 0.64);
  --mapa-0: #dc2626;
  --mapa-1: #ea580c;
  --mapa-2: #eab308;
  --mapa-3: #84cc16;
  --mapa-4: #22c55e;
  --mapa-5: #15803d;
  --meta: #0866ff;
  --meta-fondo: #d3e3ff;
  --meta-borde: #9cc2ff;
  --meta-tinta: #043380;
  --meta-caja: #ffffff;
  --meta-num: #053d99;
  --dropi: #f26b1d;
  --dropi-fondo: #fde4d6;
  --dropi-borde: #fac4a5;
  --dropi-tinta: #79360f;
  --dropi-caja: #ffffff;
  --dropi-num: #914011;

  /* LA PALETA OSCURA. Es la que la app tuvo siempre; el paso por la paleta
   * "papel" de la tienda duró un día y Josué no se acomodó.
   *
   * Los tokens de aquí abajo NO son los originales: nacieron al pasar a papel,
   * cuando los colores sueltos que había repartidos por el archivo se juntaron
   * en un solo sitio. Se quedan, porque media app se construyó usándolos. Lo
   * que volvió son los VALORES, sacados de leer qué color tenía cada regla
   * antes del cambio, no de recordarlos.
   *
   * Todo tono con texto encima está verificado contra WCAG AA (4.5:1 texto,
   * 3:1 bordes de control) sobre los tres fondos. Si se tocan, hay que volver
   * a medirlos. */

  /* ---- Superficies ---- */
  /* Hundido de verdad: en oscuro se rebaja con negro, no con un beige. */

  /* ---- Tinta ---- */
  /* En oscuro los rellenos de color son CLAROS, así que lo que va encima es
     tinta, no blanco. Al revés que en papel. */

  /* ---- Acento: el azul ---- */
  /* En oscuro el acento SÍ sirve como texto —7.4:1 sobre el panel—, así que
     este token apunta al mismo color. En papel había que partirlo en dos. */

  /* ---- El semáforo ---- */



  /* ---- Realces neutros ----
   * En oscuro los realces se hacen con BLANCO a poca alfa. Si algo se ve plano,
   * el culpable suele ser uno de estos que se quedó en tinta. */

  /* ---- Sombras: en oscuro son largas y negras ---- */

  /* ---- Fuera de la paleta, a propósito ---- */
  --naranja: #ef9f27;                     /* escalón intermedio de la huella del comprador */
  --naranja-suave: rgba(239, 159, 39, 0.18);
  --azul-dia2: #4d9fff;                   /* el punto del día 2 */
  --whatsapp: #25d366;                    /* MARCA EXTERNA: no re-teñir jamás */
  --whatsapp-texto: #06210f;              /* el verde de WhatsApp es CLARO: su texto va oscuro */

  /* ---- Medidas compartidas ----
   * Los tres controles de la cabecera de Operación —la pastilla del riel, el
   * buscador y la barra del pedido— viven en containers distintos y cada uno
   * traía su propio padding: salían en 36, 40 y 46 px de alto y arrancaban a
   * tres alturas diferentes. Con una sola medida se mueven juntos. */
  --alto-control: 40px;
  --hueco-etiqueta: 6px;

  /* ---- Las alturas del Resumen ----
   * Las dos columnas se alinean colgándose de estas medidas, no de márgenes
   * calculados a ojo: la fila ANCHA (La venta y Devoluciones) y la fila normal
   * (La logística), más el hueco entre filas. El panel de "Falta cobrar" pide
   * dos filas normales más su hueco, que es justo lo que ocupa La logística. */
  --alto-fila-ancha: 107px;
  --alto-fila: 97px;
  --hueco-filas: 10px;
}


* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.55;
  /* En fondo oscuro el texto claro se adelgaza ópticamente: esto lo mantiene
     nítido. En fondo claro haría lo contrario, así que va atado a la paleta. */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Cifras de ancho fijo: las columnas de numeros quedan alineadas. */
.num, .tarjeta-valor, .nav-badge, .aviso-orden, .chip b, .tabla td {
  font-variant-numeric: tabular-nums;
}

/* ---- Cabecera: titulo + barra superior ---- */
.cabecera-app {
  background: var(--panel);
  border-bottom: 1px solid var(--panel-borde);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* LA MARCA: es el nombre de la tienda Y el botón de inicio.
   Antes había una franja con "CENTRO DE OPERACIONES NAGURA" que ocupaba un
   renglón entero en todas las pantallas para decir algo que ya se sabe. */
.marca {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--texto);
  padding: 6px 12px 6px 6px; border-radius: 8px;
  border: 1px solid transparent;
}
.marca:hover { background: var(--acento-wash); }
.marca.activo { background: var(--acento-suave); border-color: var(--acento); }
.marca-bandera { font-size: 17px; line-height: 1; }
.marca-nombre { font-size: 13px; font-weight: 700; letter-spacing: 3px; white-space: nowrap; }
.marca:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* LA MARCA Y EL MENÚ, JUNTOS Y A LA IZQUIERDA. A la derecha solo queda el
   estado: en línea, la hora, los iconos y quién entró.
   Antes era una rejilla de tres columnas que centraba el menú, y con eso el
   lado del estado (491 px con el usuario y el botón de salir) se salía de su
   columna y se encimaba con Operación y Seguimiento. Con flex nadie invade a
   nadie: el estado se va al fondo y lo demás se queda donde empieza. */
.barra {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  border-top: 1px solid var(--panel-borde);
  padding: 4px 20px;
  min-height: 48px;
}
.barra-estado { margin-left: auto; }

.menubar { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--texto-suave);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
}
.nav-item:hover { background: var(--acento-suave); color: var(--texto); }
.nav-item.activo { background: var(--acento-suave); color: var(--acento); font-weight: 600; }
.nav-icono { font-size: 15px; }
/* Los módulos que van sin letra: se les quita el relleno de los lados —que
   estaba ahí para el texto— y se les agranda el emoji, porque solo con él se
   tiene que reconocer el módulo de un vistazo. */
.nav-solo-icono { padding: 8px 11px; gap: 0; }
.nav-solo-icono .nav-icono { font-size: 18px; }

.barra-lado { min-width: 0; }
/* Si el menú no cabe en lo que sobra, envuelve. Antes no envolvía y por eso el
   choque se resolvía encimando en vez de bajando de renglón. */
.menubar { flex-wrap: wrap; justify-content: flex-start; min-width: 0; }
.barra-estado {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--texto-suave);
  white-space: nowrap;
}
.estado-hora { margin-left: 10px; }
.punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--texto-tenue); }
.punto.ok { background: var(--verde); }
.punto.error { background: var(--rojo); }

/* Íconos de infraestructura (Integraciones). No están en el menú porque no son
   un área del negocio: son el cuarto de máquinas, y se miran cuando algo falla. */
.estado-iconos { display: flex; align-items: center; gap: 4px; margin-left: 10px; }
.icono-estado {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px; font-size: 15px; text-decoration: none;
  border: 1px solid transparent; transition: background 0.12s, border-color 0.12s;
}
.icono-estado:hover { background: var(--wash-medio); border-color: var(--panel-borde); }
.icono-estado.activo { background: var(--acento-suave); border-color: var(--acento); }
.icono-estado.icono-mal { background: var(--rojo-wash); border-color: var(--rojo); }
/* El punto rojo avisa sin obligar a entrar a revisar. */
.icono-alerta {
  position: absolute; top: 3px; right: 3px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--rojo); border: 1.5px solid var(--fondo);
}

/* ---- Contenido (debajo de la barra) ---- */
/* SIN max-width. Esa línea centraba el tablero en 1160 px y en una pantalla
   de 1900 dejaba 370 px muertos de cada lado — el ancho de la columna del
   mensaje, tirado dos veces.
   El motivo de un max-width es que una línea de TEXTO larguísima cuesta leerla,
   pero esto no es un documento: es una fila de trabajo, y el único texto largo
   —el mensaje al cliente— lleva su propio tope más abajo. */
.contenido { max-width: none; margin: 0; padding: 20px 20px 40px; }

.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 24px; }
.tarjeta {
  background: var(--panel); border: 1px solid var(--panel-borde);
  border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 6px;
}
.tarjeta-etiqueta {
  color: var(--texto-suave); font-size: 12.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.tarjeta-valor { font-size: 28px; font-weight: 600; color: var(--acento); line-height: 1.2; }
.tarjeta-nota { color: var(--texto-suave); font-size: 12.5px; }

.panel { background: var(--panel); border: 1px solid var(--panel-borde); border-radius: 12px; padding: 24px; }
.panel h2 { font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.panel p { color: var(--texto-suave); font-size: 14px; line-height: 1.65; margin-bottom: 8px; }
.panel strong { color: var(--texto); font-weight: 600; }
.silencio { color: var(--texto-tenue); }

/* ---- Insignia en el menu ---- */
.nav-badge {
  background: var(--rojo); color: var(--sobre-color); font-size: 12px; font-weight: 700;
  border-radius: 10px; padding: 1px 7px; margin-left: 2px;
}

/* ---- Estados comunes ---- */
.cargando { color: var(--texto-suave); padding: 30px; text-align: center; }
.tarjeta.alerta { border-color: var(--rojo); }
.tarjeta.alerta .tarjeta-valor { color: var(--rojo); }
.sub { color: var(--texto-suave); font-size: 12.5px; margin-top: 3px; line-height: 1.45; }
.sub-titulo {
  font-size: 13px; font-weight: 600; margin: 20px 0 10px; color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: 0.8px;
}
.num { text-align: right; }
.vacio { text-align: center; }

/* ---- Chips de hito ---- */
.barra-hitos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel); border: 1px solid var(--borde-control); color: var(--texto-suave);
  border-radius: 20px; padding: 6px 13px; font-size: 12.5px; font-weight: 500; cursor: pointer;
  font-family: inherit; transition: border-color 0.15s, color 0.15s;
}
.chip:hover { border-color: var(--chip, var(--acento)); color: var(--texto); }
.chip b { color: var(--texto); font-weight: 600; margin-left: 3px; }
.chip-activo { border-color: var(--chip); color: var(--texto); background: var(--fondo); }
.chip-fijo { cursor: default; padding: 4px 11px; }
.chip-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--chip, var(--acento)); flex: none; }

/* ---- Pestanas y acciones ---- */
.fila-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.pestanas { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.pestana {
  background: transparent; border: 1px solid transparent; color: var(--texto-suave);
  padding: 8px 14px; border-radius: 8px; cursor: pointer; font-family: inherit;
  font-size: 13.5px; font-weight: 500;
}
.pestana:hover { background: var(--acento-suave); color: var(--texto); }
.pestana.activa { background: var(--acento-suave); color: var(--acento); border-color: var(--panel-borde); font-weight: 600; }

.boton {
  background: var(--acento); color: var(--sobre-color); border: none; border-radius: 8px;
  padding: 9px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.boton:hover { filter: brightness(1.1); }
/* Sin opacity: apagaria tambien el texto y lo volveria ilegible. */
.boton:disabled { background: var(--panel-hondo); color: var(--texto-tenue); cursor: default; }
.boton-suave { background: transparent; color: var(--texto-suave); border: 1px solid var(--borde-control); }
.boton-suave:hover { color: var(--texto); border-color: var(--acento); filter: none; }
.boton-wa { background: var(--whatsapp); color: var(--whatsapp-texto); }

.campo {
  flex: 1; min-width: 240px; background: var(--fondo); border: 1px solid var(--borde-control);
  color: var(--texto); border-radius: 8px; padding: 10px 12px; font-family: inherit; font-size: 13.5px;
}
.campo::placeholder { color: var(--texto-tenue); }
.campo:focus { outline: none; border-color: var(--acento); }

/* ---- Avisos ---- */
.lista-avisos { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.aviso {
  background: var(--panel); border: 1px solid var(--panel-borde); border-left: 3px solid var(--chip);
  border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 9px;
}
.aviso-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aviso-orden { color: var(--texto-suave); font-size: 12.5px; font-weight: 500; }
.aviso-fecha { color: var(--texto-tenue); font-size: 12px; margin-left: auto; }
.aviso-cliente { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--texto-suave); }
.aviso-cliente strong { color: var(--texto); font-weight: 600; }
.aviso-meta { font-size: 12.5px; color: var(--texto-tenue); line-height: 1.5; }
.aviso-mensaje {
  background: var(--fondo); border: 1px solid var(--panel-borde); border-radius: 8px;
  padding: 11px 13px; font-size: 13.5px; line-height: 1.6; color: var(--texto);
}
.aviso-pie { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }

/* ---- Tabla ---- */
.tabla-wrap { overflow-x: auto; border: 1px solid var(--panel-borde); border-radius: 12px; }
.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--panel); }
.tabla th {
  text-align: left; padding: 12px 14px; color: var(--texto-suave); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--panel-borde); font-weight: 600;
}
.tabla td { padding: 12px 14px; border-bottom: 1px solid var(--panel-borde); vertical-align: top; }
.tabla tbody tr { cursor: pointer; }
.tabla tbody tr:hover { background: var(--acento-suave); }
.tabla tbody tr:last-child td { border-bottom: none; }

/* ---- Detalle y linea de tiempo ---- */
.detalle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; font-size: 13.5px; margin-bottom: 8px; }
.detalle-grid > div > div { margin-top: 4px; line-height: 1.5; }
.linea-tiempo { list-style: none; border-left: 2px solid var(--panel-borde); margin-left: 6px; }
.linea-tiempo li { position: relative; padding: 0 0 16px 20px; font-size: 13.5px; }
.linea-tiempo strong { font-weight: 600; }
.lt-punto { position: absolute; left: -7px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--chip); border: 2px solid var(--panel); }

/* ---- Plantillas ---- */
.plantilla { border-left: 3px solid var(--chip); padding: 12px 0 12px 14px; margin-bottom: 16px; }
.plantilla label { display: block; margin-bottom: 8px; }
.plantilla textarea {
  width: 100%; background: var(--fondo); border: 1px solid var(--borde-control); color: var(--texto);
  border-radius: 8px; padding: 11px 13px; font-family: inherit; font-size: 13.5px; line-height: 1.6; resize: vertical;
}
.plantilla textarea:focus { outline: none; border-color: var(--acento); }
.plantilla button { margin-top: 8px; }
.panel code {
  background: var(--fondo); border: 1px solid var(--panel-borde); border-radius: 4px;
  padding: 2px 6px; font-size: 12.5px; color: var(--acento);
  font-family: "Cascadia Mono", Consolas, ui-monospace, monospace;
}

/* ============ PESTANA DE DATOS ============ */
.explica { color: var(--texto-suave); font-size: 13.5px; line-height: 1.6; margin-bottom: 16px; }
.explica strong { color: var(--texto); font-weight: 600; }
.destacado {
  background: var(--acento-suave); border: 1px solid var(--acento);
  border-radius: 8px; padding: 11px 14px; font-size: 13.5px; margin-bottom: 14px; color: var(--texto);
}
.sello-sync { font-size: 12px; color: var(--texto-tenue); }
.nota-pie { font-size: 12.5px; text-align: center; padding: 8px 0 4px; }
.titulo-modulo { font-size: 17px; font-weight: 600; flex: 1; }

/* ---- Filtros ---- */
.filtros-panel {
  background: var(--panel); border: 1px solid var(--panel-borde); border-radius: 12px;
  padding: 11px 14px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 9px;
  /* Pegado JUSTO donde acaba la cabecera. El 96px de antes era su alto cuando
     tenía la franja del título; al quitarla quedó en 54 y este número no se
     movió, así que entre las dos barras quedaba un hueco de 42px por el que se
     veía pasar el contenido al hacer scroll. Ahora el alto se mide y se publica
     desde app.js: si la cabecera cambia, esto se reacomoda solo. */
  position: sticky; top: var(--alto-cabecera, 54px); z-index: 5;
}
.filtros-fila {
  flex-wrap: wrap; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fila-fechas, .fila-fichas { border-top: 1px solid var(--panel-borde); padding-top: 9px; }
.contador-pedidos { margin-left: auto; font-size: 12.5px; color: var(--texto-suave); white-space: nowrap; }
.select-producto { max-width: 260px; min-width: 150px; flex: 0 1 auto; }
.select-activo { border-color: var(--acento); color: var(--acento); }
.ficha {
  display: inline-flex; align-items: center; gap: 6px; background: var(--acento-suave);
  border: 1px solid var(--acento); color: var(--acento); border-radius: 16px;
  padding: 4px 11px; font-size: 12.5px; cursor: pointer; font-family: inherit;
}
.ficha:hover { background: var(--fondo); }
.ficha-x { font-size: 13px; }

/* Encabezado de sección con su propio filtro a la derecha */
.panel-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.panel-cab h2 { margin-bottom: 0; }
.select-seccion { max-width: 230px; min-width: 150px; flex: 0 1 auto; }
.panel-cab .conmutador { margin-left: auto; }

/* Conmutador de métrica (efectividad / cancelación) */
.conmutador {
  display: inline-flex; background: var(--fondo); border: 1px solid var(--borde-control);
  border-radius: 8px; padding: 2px; gap: 2px;
}
.conm-op {
  background: transparent; border: none; color: var(--texto-suave); font-family: inherit;
  font-size: 12.5px; padding: 5px 12px; border-radius: 6px; cursor: pointer;
}
.conm-op:hover { color: var(--texto); }
.conm-op.activo { background: var(--acento); color: var(--sobre-color); font-weight: 600; }

.aviso-motor {
  background: var(--ambar-wash); border: 1px solid var(--ambar); border-radius: 10px;
  padding: 12px 15px; margin-bottom: 14px; font-size: 13px; color: var(--texto-suave); line-height: 1.6;
}
.aviso-motor strong { color: var(--texto); display: block; margin-bottom: 2px; }

/* ---- Separación entre bloques ---- */
.bloque + .bloque {
  border-top: 1px solid var(--panel-borde);
  padding-top: 22px;
  margin-top: 22px;
}
.btn-imprimir { padding: 6px 10px; font-size: 14px; }

/* Cabecera que solo aparece en papel */
.cabecera-impresion { display: none; }

/* ---- Bloque Resumen ---- */
.resumen { margin-bottom: 20px; }
/* EL RESUMEN, EN DOS. A la izquierda los números del periodo; a la derecha lo
   que no depende de él —las devoluciones son de todos los tiempos— y las notas
   de qué quedó fuera. La derecha lleva mínimo 300px porque adentro van tres
   tarjetas de dinero: más angosta y quedan en dos renglones desparejos. */
.resumen-columnas {
  display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(300px, 1fr);
  gap: 20px; align-items: start;
}
.resumen-numeros, .resumen-aparte { min-width: 0; }
/* Las notas al pie, dentro de la columna, se separan de lo de arriba. */
.resumen-aparte .nota-pie { text-align: left; padding: 0; margin-top: 12px; }
/* SIEMPRE TRES, NUNCA DOS Y UNA ABAJO. Con auto-fit, en cuanto la columna baja
   de 515px las tres tarjetas se reparten en dos renglones y la fila pasa de 107
   a 224: el doble de alto que La venta, y adiós a la alineación. */
.resumen-aparte .tarjetas-sin-filtro { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1750px) {
  /* EL NÚMERO SALE DE UNA CUENTA, no de probar a ojo. El texto más ancho de las
     tres tarjetas de Devoluciones es el título "Se va en devoluciones": 129px.
     Con los 30px de padding, cada tarjeta necesita 159 y la fila 3×159 + 2×10 =
     497. La columna derecha vale (ancho útil − 20) / 2.8, y el ancho útil es la
     ventana menos el riel, los huecos y la barra de scroll: por debajo de unos
     1750px de ventana ya no llega a 497 y los títulos se parten en dos renglones
     —la fila crece 30px y la alineación con La venta se pierde—.
     Apiladas se ven las dos completas; alineadas y apretadas no le sirven a nadie. */
  .resumen-columnas { grid-template-columns: 1fr; }
}
.resumen-cab { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.resumen-cab h2 { font-size: 19px; font-weight: 600; }
.grupo-titulo {
  font-size: 11.5px; color: var(--texto-tenue); letter-spacing: 1.2px;
  text-transform: uppercase; font-weight: 600; margin: 16px 0 7px;
}
.grupo-titulo:first-of-type { margin-top: 0; }
.tarjetas-grupo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: var(--hueco-filas); margin-bottom: var(--hueco-filas);
}
/* La fila ancha manda en las DOS columnas: La venta a la izquierda y
   Devoluciones a la derecha. Sus tarjetas salían de 107 y 119 porque el
   contenido no era igual de largo; con la medida puesta salen las dos de 107 y
   lo que sigue en cada columna arranca a la misma altura. */
.grupo-venta .tarj,
.tarjetas-sin-filtro .tarj { min-height: var(--alto-fila-ancha); }
.grupo-venta { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.tarj {
  background: var(--panel); border: 1px solid var(--panel-borde); border-radius: 10px;
  padding: 13px 15px; display: flex; flex-direction: column; gap: 3px;
}
.tarj-titulo { font-size: 12px; font-weight: 500; color: var(--texto-suave); }
.tarj-valor { font-size: 22px; font-weight: 600; line-height: 1.25; font-variant-numeric: tabular-nums; }
.tarj-grande .tarj-valor { font-size: 26px; }
.tarj-nota { font-size: 12px; color: var(--texto-tenue); line-height: 1.4; }

/* Tarjetas de LA VENTA: cantidad y dinero al mismo nivel, en un renglón */
.tarj-venta { padding: 14px 16px; }
.tarj-doble { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tarj-doble .tarj-valor { font-size: 27px; }
.tarj-separador {
  width: 1px; align-self: stretch; min-height: 22px;
  background: var(--panel-borde); flex: none;
}
.tarj-monto { font-variant-numeric: tabular-nums; }

.tarj-bueno { border-color: var(--verde-borde); }
.tarj-bueno .tarj-valor, .tarj-bueno .tarj-titulo, .tarj-bueno .tarj-nota { color: var(--verde); }
.tarj-malo { border-color: var(--rojo-borde); }
.tarj-malo .tarj-valor, .tarj-malo .tarj-titulo, .tarj-malo .tarj-nota { color: var(--rojo); }
.tarj-aviso { border-color: var(--ambar-borde); }
.tarj-aviso .tarj-valor, .tarj-aviso .tarj-titulo, .tarj-aviso .tarj-nota { color: var(--ambar); }
.tarj-base { border: 2px solid var(--acento); }
.tarj-base .tarj-valor, .tarj-base .tarj-titulo, .tarj-base .tarj-nota { color: var(--acento); }

/* ---- Proyección: lo que falta cobrar ---- */
/* Del alto del bloque de La logística —sus dos filas más el hueco—, para que
   las dos columnas vuelvan a encontrarse aquí abajo. El padding baja de 15 a 11
   porque con 15 el texto se pasaba 7px de la medida y la alineación se perdía
   por esos siete. */
.resumen-aparte .proyeccion {
  min-height: calc(var(--alto-fila) * 2 + var(--hueco-filas));
  padding: 11px 17px;
}
.proyeccion {
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--panel-borde);
  border-left: 3px solid var(--verde); border-radius: 0 10px 10px 0;
  padding: 15px 17px; margin-top: 4px;
}
.proy-icono { font-size: 22px; line-height: 1.2; }
.proy-texto { flex: 1; min-width: 250px; }
.proy-titulo { font-size: 14.5px; font-weight: 600; margin-bottom: 6px; }
.proyeccion p { font-size: 13px; color: var(--texto-suave); line-height: 1.6; margin-bottom: 5px; }
.proyeccion strong { color: var(--texto); font-weight: 600; }
.proy-nota { font-size: 12px !important; color: var(--texto-tenue) !important; }
.proy-cifras { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.proy-cifras > div { display: flex; flex-direction: column; gap: 2px; }
.proy-etq { font-size: 11.5px; color: var(--texto-tenue); }
.proy-val { font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.proy-extra { color: var(--verde); }

.nota-prorrata {
  background: var(--ambar-wash); border-left: 3px solid var(--ambar);
  padding: 10px 13px; font-size: 12.5px; color: var(--texto-suave); line-height: 1.55; margin-top: 4px;
}
.nota-prorrata strong { color: var(--texto); }

/* ---- Integraciones ---- */
.tarjetas-integracion { display: grid; grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); gap: 14px; margin-bottom: 18px; }
.tarjeta-integracion {
  background: var(--panel); border: 1px solid var(--panel-borde); border-radius: 12px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 9px;
}
.tarjeta-integracion.sin-conectar { border-style: dashed; }
.tarjeta-integracion.proxima { opacity: 0.75; }
.tarjeta-integracion header { display: flex; align-items: center; gap: 9px; }
.int-icono { font-size: 19px; }
.int-nombre { font-size: 15px; font-weight: 600; }
.int-que { font-size: 12.5px; color: var(--texto-suave); line-height: 1.5; }
.int-datos { display: flex; gap: 18px; flex-wrap: wrap; }
.int-datos dt { font-size: 11.5px; color: var(--texto-tenue); }
.int-datos dd { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.int-lista { font-size: 12px; color: var(--texto-tenue); line-height: 1.5; }
.int-aviso { font-size: 12px; color: var(--ambar); }
.int-error { font-size: 12px; color: var(--rojo); }
.tarjeta-integracion footer { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.insignia { margin-left: auto; border-radius: 12px; padding: 3px 10px; font-size: 11.5px; font-weight: 600; }
.insignia-ok { background: var(--verde-wash); color: var(--verde); }
.insignia-parcial { background: var(--ambar-wash); color: var(--ambar); }
.insignia-falta { background: var(--rojo-wash); color: var(--rojo); }
.insignia-proxima { background: var(--fondo); color: var(--texto-tenue); }
.filtros-titulo { font-size: 12.5px; font-weight: 600; color: var(--texto-suave); min-width: 78px; }
.presets { display: flex; gap: 4px; flex-wrap: wrap; }
.preset {
  background: transparent; border: 1px solid var(--borde-control); color: var(--texto-suave);
  border-radius: 7px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; font-family: inherit;
}
.preset:hover { color: var(--texto); border-color: var(--acento); }
.preset.activo { background: var(--acento); color: var(--sobre-color); border-color: var(--acento); font-weight: 600; }
.campo-fecha { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--texto-suave); }
.campo-fecha input {
  background: var(--fondo); border: 1px solid var(--borde-control); color: var(--texto);
  border-radius: 7px; padding: 6px 9px; font-family: inherit; font-size: 12.5px;
}
.campo-fecha input:focus { outline: none; border-color: var(--acento); }
.select {
  background: var(--fondo); border: 1px solid var(--borde-control); color: var(--texto);
  border-radius: 7px; padding: 8px 10px; font-family: inherit; font-size: 13px;
  max-width: 280px; flex: 1; min-width: 170px;
}
.select:focus { outline: none; border-color: var(--acento); }

/* ---- Diagnóstico y acciones ---- */
.diagnostico {
  background: var(--panel); border: 1px solid var(--panel-borde);
  border-left: 4px solid var(--texto-tenue); border-radius: 0 12px 12px 0; padding: 18px 20px;
}
.diag-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.diag-cab h2 { font-size: 17px; font-weight: 600; margin: 0; }
.diag-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--texto-tenue); flex: none; }
.diag-texto { font-size: 13.5px; color: var(--texto-suave); line-height: 1.65; margin-bottom: 4px; }
.diag-bueno { border-left-color: var(--verde); }
.diag-bueno .diag-punto { background: var(--verde); }
.diag-regular { border-left-color: var(--ambar); }
.diag-regular .diag-punto { background: var(--ambar); }
.diag-malo { border-left-color: var(--rojo); }
.diag-malo .diag-punto { background: var(--rojo); }

.acciones { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.accion {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  background: var(--fondo); border-radius: 9px; padding: 12px 15px;
}
.accion-num {
  width: 22px; height: 22px; border-radius: 6px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  background: var(--verde-wash); color: var(--verde);
}
.accion-aviso .accion-num { background: var(--ambar-wash); color: var(--ambar); }
.accion-texto { flex: 1; min-width: 220px; }
.accion-titulo { font-size: 13.5px; font-weight: 600; margin-bottom: 2px; }
.accion-detalle { font-size: 12.5px; color: var(--texto-suave); line-height: 1.5; }
.accion-monto { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.accion-dinero { font-size: 16px; font-weight: 700; color: var(--verde); font-variant-numeric: tabular-nums; white-space: nowrap; }
.accion-aviso .accion-dinero { color: var(--ambar); }
.accion-etq { font-size: 11.5px; color: var(--texto-tenue); white-space: nowrap; }

/* ---- Veredicto ---- */
.veredicto {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--panel-borde); border-left: 5px solid var(--texto-tenue);
  border-radius: 12px; padding: 22px 24px; margin-bottom: 18px;
}
.veredicto-numero { font-size: 56px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.veredicto-texto { flex: 1; min-width: 260px; }
.veredicto-texto h2 { font-size: 18px; font-weight: 600; margin-bottom: 8px; line-height: 1.35; }
.veredicto-texto p { color: var(--texto-suave); font-size: 13.5px; line-height: 1.6; margin-bottom: 6px; }
.veredicto-texto strong { color: var(--texto); font-weight: 600; }
.veredicto-nota { font-size: 12.5px !important; color: var(--texto-tenue) !important; }
.veredicto-alerta {
  background: var(--ambar-wash); border-left: 3px solid var(--ambar); border-radius: 0 6px 6px 0;
  padding: 9px 12px; margin: 10px 0 !important; font-size: 13px !important; color: var(--texto-suave) !important;
}
.veredicto-bien { border-left-color: var(--verde); }
.veredicto-bien .veredicto-numero { color: var(--verde); }
.veredicto-regular { border-left-color: var(--ambar); }
.veredicto-regular .veredicto-numero { color: var(--ambar); }
.veredicto-mal { border-left-color: var(--rojo); }
.veredicto-mal .veredicto-numero { color: var(--rojo); }
.veredicto-neutro .veredicto-numero { color: var(--texto-suave); }

/* ---- KPIs ---- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi {
  background: var(--panel); border: 1px solid var(--panel-borde); border-top: 3px solid var(--texto-tenue);
  border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
}
.kpi-titulo { font-size: 12.5px; font-weight: 500; color: var(--texto-suave); }
.kpi-valor { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.kpi-nota { font-size: 12px; color: var(--texto-tenue); line-height: 1.4; }
.kpi-bien { border-top-color: var(--verde); }
.kpi-bien .kpi-valor { color: var(--verde); }
.kpi-regular { border-top-color: var(--ambar); }
.kpi-regular .kpi-valor { color: var(--ambar); }
.kpi-mal { border-top-color: var(--rojo); }
.kpi-mal .kpi-valor { color: var(--rojo); }
.kpi-neutro .kpi-valor { color: var(--acento); }

.delta { font-size: 11.5px; font-weight: 500; margin-top: 2px; }
.delta-sube { color: var(--verde); }
.delta-baja { color: var(--rojo); }
.delta-igual { color: var(--texto-tenue); }

/* ---- Oportunidad ---- */
.panel-oportunidad { border-color: var(--acento); margin-bottom: 18px; }
.oportunidad-lista { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.oportunidad-fila {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--fondo); border-radius: 8px; padding: 10px 14px;
}
.oportunidad-nombre { font-weight: 600; font-size: 13.5px; min-width: 120px; }
.oportunidad-detalle { color: var(--texto-suave); font-size: 12.5px; flex: 1; min-width: 190px; }
.oportunidad-monto { color: var(--verde); font-weight: 600; font-size: 13.5px; font-variant-numeric: tabular-nums; }

/* ---- Embudo ---- */
.embudo { display: flex; flex-direction: column; gap: 14px; }
.embudo-etiqueta {
  display: flex; justify-content: space-between; font-size: 13.5px;
  color: var(--texto-suave); margin-bottom: 5px;
}
.embudo-etiqueta b { color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.embudo-barra { background: var(--fondo); border-radius: 6px; height: 24px; overflow: hidden; }
.embudo-relleno { height: 100%; border-radius: 6px; transition: width 0.4s ease; }
.embudo-fuga { font-size: 12.5px; color: var(--rojo); margin-top: 5px; padding-left: 12px; }

/* ---- Grafica ---- */
.grafica { width: 100%; height: 180px; display: block; }
.grafica-pie { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--texto-suave); margin-top: 8px; }
.punto-linea { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 5px; }

/* ---- Pauta Meta ---- */
.pestanas { display: flex; gap: 4px; margin: 22px 0 14px; border-bottom: 1px solid var(--panel-borde); }
.pestana {
  background: none; border: none; border-bottom: 2px solid transparent; color: var(--texto-suave);
  font-family: inherit; font-size: 13.5px; font-weight: 600; padding: 10px 18px; cursor: pointer;
  margin-bottom: -1px;
}
.pestana:hover { color: var(--texto); }
.pestana.activa { color: var(--acento); border-bottom-color: var(--acento); }

.panel-cabecera { display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px; }
.panel-cabecera h2 { margin: 0; }

/* ---- Marco por PRODUCTO: la unidad de decisión ---- */
.marco-producto {
  background: var(--panel); border: 1px solid var(--panel-borde);
  border-radius: 14px; margin-bottom: 20px; overflow: hidden;
}
.marco-cargando { opacity: 0.45; pointer-events: none; }
.marco-cabecera {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 20px; background: var(--wash-tenue);
  border-bottom: 1px solid var(--panel-borde);
}
.marco-titulo { display: flex; flex-direction: column; gap: 2px; }
.marco-titulo h2 { margin: 0; font-size: 17px; }

.presets-chicos .preset { font-size: 12px; padding: 5px 10px; }

.marco-metricas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  border-bottom: 1px solid var(--panel-borde);
}
.metrica-chica {
  display: flex; flex-direction: column; gap: 3px; padding: 12px 14px;
  border-right: 1px solid var(--panel-borde);
}
.metrica-chica:last-child { border-right: none; }
.metrica-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--texto-tenue); }
.metrica-valor { font-size: 17px; font-weight: 700; }
.metrica-nota { font-size: 11.5px; color: var(--texto-tenue); }
.metrica-sello { justify-content: center; }
.sello { font-size: 12.5px; font-weight: 700; }
.sello-bien { color: var(--verde); }
.sello-mal { color: var(--rojo); }

/* ---- Marco por CAMPAÑA, dentro del producto ---- */
.marco-campana { border-bottom: 1px solid var(--panel-borde); }
.marco-campana:last-child { border-bottom: none; }
.marco-abo { border-left: 3px solid var(--acento); }
.marco-cbo { border-left: 3px solid var(--verde); }

.campana-cabecera {
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 18px; background: var(--wash-tenue);
  border-bottom: 1px solid var(--panel-borde);
}
.campana-nombre { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.campana-datos { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--texto-suave); }
.insignia-tipo {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.6px;
  padding: 3px 7px; border-radius: 4px;
}
.insignia-abo { background: var(--acento-suave); color: var(--acento); }
.insignia-cbo { background: var(--verde-wash); color: var(--verde); }

/* ---- Tabla de adsets: separadores claros en filas Y columnas ---- */
.tabla-adsets { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla-adsets th {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--texto-tenue); text-align: left; padding: 9px 12px;
  background: var(--wash-tenue);
  border-bottom: 1px solid var(--panel-borde); border-right: 1px solid var(--panel-borde);
  white-space: nowrap;
}
.tabla-adsets th:last-child, .tabla-adsets td:last-child { border-right: none; }
.tabla-adsets td {
  padding: 10px 12px; vertical-align: middle;
  border-bottom: 1px solid var(--panel-borde); border-right: 1px solid var(--panel-borde);
}
.tabla-adsets tbody tr:last-child td { border-bottom: none; }
.tabla-adsets th.num, .tabla-adsets td.num { text-align: right; white-space: nowrap; }
.tabla-adsets .col-adset { min-width: 190px; }
.tabla-adsets .col-veredicto { min-width: 170px; }
.tabla-adsets .sub { display: block; font-size: 11.5px; color: var(--texto-tenue); margin-top: 2px; }
.tabla-adsets tbody tr:hover { background: var(--wash-tenue); }
.tabla-adsets .fila-bien { background: var(--verde-tinte); }
.tabla-adsets .fila-mal { background: var(--rojo-tinte); }
.tabla-adsets .fila-apagada { opacity: 0.5; }

/* El calendario del adset: un cuadro por día desde que arrancó. Se lee de un
   vistazo si viene vendiendo seguido o si lleva días en cero. */
.calendario { display: flex; flex-wrap: wrap; gap: 3px; max-width: 340px; }
/* Calendario de verdad: cada día con su número arriba y su cuadro abajo,
   partido por mes, para poder señalar "el 14 no vendió" sin contar cuadros. */
.mes { margin-bottom: 10px; }
.mes:last-child { margin-bottom: 0; }
.mes-nombre {
  display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--texto-tenue); margin-bottom: 5px;
}
.mes-dias { display: flex; flex-wrap: wrap; gap: 3px; max-width: 420px; }
.celda-dia { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.numero-dia { font-size: 9.5px; color: var(--texto-tenue); line-height: 1; }
.dia {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 5px;
  font-size: 11px; font-weight: 700; color: var(--sobre-color);
}
.dia-si { background: var(--verde); }
.dia-no { background: var(--rojo); }
/* Un día que no salió al aire no vendió, pero tampoco falló: no se pinta de rojo. */
/* Hereda el color de .dia, que ahora es blanco para ir sobre relleno sólido:
   sin color propio, el número quedaría invisible sobre este wash claro. */
.dia-pausa { background: var(--wash-fuerte); border: 1px solid var(--panel-borde); color: var(--texto-suave); }
.dia-hoy { background: transparent; border: 1.5px dashed var(--borde-control); color: var(--texto-suave); }
/* El arranque se marca con el borde, para no perder el color de si vendió o no. */
.dia-arranque { box-shadow: 0 0 0 2px var(--acento); }

.leyenda-calendario {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  padding: 9px 18px; font-size: 11.5px; color: var(--texto-tenue);
  border-top: 1px solid var(--panel-borde);
}
.leyenda-calendario span { display: inline-flex; align-items: center; gap: 5px; }
.leyenda-calendario i { width: 13px; height: 13px; border-radius: 3px; }

.veredicto {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
  padding: 2px 7px; border-radius: 4px; margin-right: 6px;
}
.veredicto-escalar { background: var(--verde-wash); color: var(--verde); }
.veredicto-apagar { background: var(--rojo-wash); color: var(--rojo); }
.veredicto-apagada { background: var(--wash-suave); color: var(--texto-tenue); }
.veredicto-cbo { background: var(--acento-suave); color: var(--acento); }
.veredicto-subir { background: var(--verde-wash); color: var(--verde); }
.veredicto-frenar { background: var(--rojo-wash); color: var(--rojo); }
.veredicto-sostener, .veredicto-sin_techo { background: var(--ambar-wash); color: var(--ambar, var(--ambar)); }
.veredicto-estabilizando, .veredicto-sin_cpa { background: var(--wash-medio); color: var(--texto-tenue); }

/* La decisión de un CBO es sobre el presupuesto: va en su propia banda, debajo
   del nombre de la campaña, que es donde se toma. */
.banda-presupuesto {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 18px; font-size: 13px; color: var(--texto-suave);
  border-bottom: 1px solid var(--panel-borde);
}
.banda-bueno { background: var(--verde-tinte); }
.banda-malo { background: var(--rojo-tinte); }
.banda-aviso { background: var(--ambar-tinte); }
.veredicto-esperar, .veredicto-nuevo { background: var(--wash-medio); color: var(--texto-tenue); }

.fila-apagada { opacity: 0.55; }
.etiqueta-tenue { font-size: 11px; color: var(--texto-tenue); }

/* El CPA costeado se escribe a mano: es una decisión, no un cálculo. */
.campo-objetivo {
  width: 78px; background: var(--fondo); color: var(--texto);
  border: 1px solid var(--borde-control); border-radius: 6px;
  padding: 4px 7px; font-family: inherit; font-size: 13px; text-align: right;
}
.campo-objetivo:focus { outline: none; border-color: var(--acento); }

/* ---- Operación: la fila de confirmación ----
   Es una lista de tareas, no un tablero: cada renglón es un cliente al que hay
   que escribirle, y se abre para ver el mensaje ya armado. */
.cola { display: flex; flex-direction: column; }
.pedido { border-bottom: 1px solid var(--panel-borde); }
.cola .pedido:last-child { border-bottom: none; }
/* Pastillas chicas, en fila. Cada una abre su propio menú desplegable. */
.pastillas { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.pastilla {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--panel-borde); border-radius: 999px;
  padding: 8px 14px; font-family: inherit; font-size: 13px; color: var(--texto);
  transition: border-color 0.12s, background 0.12s;
}
.pastilla:hover:not(:disabled) { border-color: var(--acento); background: var(--acento-wash); }
.pastilla-abierta { border-color: var(--acento); background: var(--acento-suave); }
.pastilla-vacia { opacity: 0.4; cursor: default; }
/* En Seguimiento la pastilla vacía SÍ se pica —enseña qué significa ese paso—,
   así que ni el cursor ni el tono deben decir "aquí no hay nada que hacer". */
.op-riel .pastilla-vacia:not(:disabled) { opacity: 0.55; cursor: pointer; }
.op-riel .pastilla-vacia:not(:disabled):hover { opacity: 1; }
.pastilla-nombre { font-weight: 600; }
.pastilla-cuenta {
  font-weight: 800; background: var(--wash-fuerte);
  border-radius: 999px; padding: 1px 8px; font-size: 12px;
}
.pastilla-abierta .pastilla-cuenta { background: var(--acento-fuerte); }
.pastilla-alerta { font-size: 11px; color: var(--rojo); font-weight: 700; }
/* "Todos" no es un paso del camino sino el buscador, así que se despega de la
   fila de pastillas con una línea punteada en vez de ir pegada como una más. */
.pastilla-todos { border-style: dashed; margin-left: 6px; }

/* La barra "PEDIDO": siempre visible. Lo único que aparece y desaparece es su
   cuerpo, que además trae su propio scroll para no comerse la pantalla. */
.barra-lista {
  background: var(--panel); border: 1px solid var(--panel-borde);
  border-radius: 11px; overflow: hidden;
}
.barra-abierta { border-color: var(--acento); }
.barra-cabecera {
  display: flex; align-items: center; gap: 14px; width: 100%; cursor: pointer;
  background: none; border: none; font-family: inherit; font-size: 13.5px;
  color: var(--texto); padding: 0 16px; height: var(--alto-control); text-align: left;
}
.barra-cabecera:hover:not(:disabled) { background: var(--wash-tenue); }
.barra-cabecera:disabled { cursor: default; }
/* WASH Y NO SUAVE: aquí el tinte del acento siempre fue del 7%. Al juntar los
   colores sueltos en tokens, esta regla acabó apuntando a --acento-suave, que en
   papel pesaba casi lo mismo (13%) pero en oscuro pesa 15% — más del doble. La
   barra se aclaraba tanto que "#1784 · VORTIX…" caía a 4.31:1. */
.barra-abierta .barra-cabecera { background: var(--acento-wash); border-bottom: 1px solid var(--panel-borde); }
.barra-flecha { margin-left: auto; color: var(--texto-tenue); font-size: 11px; }
/* Con un cliente elegido la barra deja de ser una lista y pasa a ser su ficha. */
.barra-elegido { border-color: var(--acento); }
.barra-elegido .barra-cabecera { background: var(--acento-wash); }
.barra-cambiar {
  border: 1px solid var(--borde-control); border-radius: 999px;
  padding: 2px 10px; font-size: 11px;
}
.barra-cuerpo { max-height: 58vh; overflow-y: auto; }
@media print { .barra-cuerpo { max-height: none; overflow: visible; } }

/* Buscador: vive siempre afuera, no dentro de ningún desplegable. */
.campo-buscar { display: flex; flex-direction: column; margin: 16px 0 10px; }
/* Dentro de la fila no lleva margen propio: lo pone la fila. */
.fila-busqueda .campo-buscar, .fila-busqueda .campo-pedido { margin: 0; }
.campo-buscar input {
  background: var(--panel); color: var(--texto);
  border: 1px solid var(--borde-control); border-radius: 9px;
  height: var(--alto-control); padding: 0 14px;
  font-family: inherit; font-size: 13.5px;
}
.campo-buscar input:focus { outline: none; border-color: var(--acento); }

.pedido-fila {
  display: grid; grid-template-columns: 14px minmax(200px, 1fr) 90px auto 24px;
  gap: 14px; align-items: center; padding: 12px 15px; cursor: pointer;
}
/* El color va por DÍA, como lo piensa el dueño: día 4+ son posibles cancelados. */
.punto-urgencia { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.punto-dia1 { background: var(--verde); }
.punto-dia2 { background: var(--azul-dia2); }
.punto-dia3 { background: var(--ambar); }
.punto-dia4 { background: var(--rojo); }

/* Buscador y leyenda: entre las pastillas y la lista, como en la herramienta
   que ya usa a diario. */
.etiqueta-campo {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--texto-tenue);
  /* Alto de línea y hueco FIJOS: con line-height normal cada etiqueta medía
     distinto según su fuente heredada, y eso desalineaba los controles de
     abajo aunque todos tuvieran el mismo alto. */
  display: block; line-height: 16px; margin: 0 0 var(--hueco-etiqueta);
}
.leyenda-dias {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  padding: 10px 2px 0; font-size: 11.5px; color: var(--texto-tenue);
}
.leyenda-dias span { display: inline-flex; align-items: center; gap: 6px; }
.pedido-fila:hover { background: var(--wash-tenue); }
.pedido-seleccionado { background: var(--acento-suave); box-shadow: inset 3px 0 0 var(--acento); }
.pedido-seleccionado .pedido-flecha { color: var(--acento); font-size: 13px; }

/* El mensaje vive en su propia sección fija, siempre en el mismo lugar. */
.panel-cliente {
  background: var(--panel); border: 1px solid var(--panel-borde);
  border-radius: 11px; padding: 16px 18px;
}
.panel-cliente-vacio {
  display: flex; align-items: center; justify-content: center;
  padding: 30px; color: var(--texto-tenue); font-size: 13.5px;
  border-style: dashed;
}
/* Contacto, teléfono y datos, todo en un renglón. Cada recuadro copiable mide
   lo que mide su texto: no tiene por qué ocupar el renglón entero. */
/* El renglón vive DENTRO de la columna del mensaje, así que mide lo mismo que
   la caja de abajo por construcción — sin max-width que calcular ni mantener. */
.cliente-renglon {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.caja-copiar {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; font-family: inherit; text-align: left;
  background: var(--fondo); color: var(--texto);
  border: 1px solid var(--borde-control); border-radius: 9px;
  /* Alto FIJO, igual que la pastilla de la fecha de al lado: con padding el
     alto salía del contenido y las tres piezas del renglón no cuadraban. */
  height: 38px; padding: 0 12px; transition: border-color 0.12s, background 0.12s;
}
.caja-copiar:hover { border-color: var(--acento); background: var(--acento-wash); }
.caja-copiar.copiado { border-color: var(--verde); background: var(--verde-wash); }
.caja-texto { font-size: 13.5px; }
.caja-texto-fuerte { font-size: 14.5px; font-weight: 800; letter-spacing: 0.3px; }
.caja-icono { font-size: 14px; opacity: 0.7; }
/* Mismo alto y mismo borde que los botones de copiar de al lado: son datos
   del mismo renglón, aunque estos no se copien. */
.cliente-dato {
  display: inline-flex; align-items: center;
  font-size: 12.5px; color: var(--texto-suave);
  border: 1px solid var(--panel-borde); border-radius: 9px;
  padding: 0 12px; height: 38px; white-space: nowrap;
}

/* EL ANCHO DEL MENSAJE MANDA SOBRE SU CABECERA.
   El tope estaba puesto en el <pre> y no en la caja, así que la caja seguía
   siendo ancha y el botón de copiar —que se posiciona contra ella— caía FUERA
   del recuadro beige. Ahora el tope vive en la caja: el botón queda dentro y la
   fila de arriba se alinea con el mismo ancho.
   78 caracteres porque a 1900px una línea corrida llegaría a 250. */
.caja-mensaje { position: relative; }
.mensaje-listo { margin: 0; padding-right: 46px; }
.caja-icono-solo {
  position: absolute; top: 9px; right: 9px;
  background: var(--panel); border: 1px solid var(--panel-borde); border-radius: 7px;
  cursor: pointer; font-size: 14px; padding: 5px 8px; line-height: 1; color: var(--texto);
}
.caja-icono-solo:hover { border-color: var(--acento); background: var(--acento-suave); }
.caja-icono-solo.copiado { border-color: var(--verde); color: var(--verde); }
.pedido-espera { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.pedido-quien, .pedido-que { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13.5px; }
.pedido-quien strong, .pedido-que { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pedido .sub { font-size: 11.5px; color: var(--texto-tenue); }
.pedido-monto { font-size: 15px; font-weight: 700; text-align: right; white-space: nowrap; }
.pedido-marcas { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.pedido-flecha { color: var(--texto-tenue); font-size: 10px; text-align: right; }
.marca {
  font-size: 10.5px; font-weight: 600; padding: 2px 6px; border-radius: 4px;
  background: var(--wash-medio); color: var(--texto-tenue); white-space: nowrap;
}
.marca-mal { background: var(--rojo-wash); color: var(--rojo); }
/* En qué paso va el pedido. Solo sale en "Todos", que es la única lista donde
   los renglones vienen mezclados de todas las pastillas. */
.marca-paso { background: var(--acento-suave); color: var(--acento); }
.marca-bien { background: var(--verde-wash); color: var(--verde); }
/* Pedido sin cobertura de TIUI: se pasa a mano a Dropi (15-oct). */
.marca-dropi { background: var(--dropi-fondo); color: var(--dropi-tinta); }

.pedido-detalle { border-top: 1px solid var(--panel-borde); padding: 14px 15px; }
.pedido-datos { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 12.5px; color: var(--texto-suave); margin-bottom: 12px; }
.mensaje-listo {
  background: var(--fondo); border: 1px solid var(--panel-borde); border-radius: 9px;
  padding: 14px 16px; font-family: inherit; font-size: 13px; line-height: 1.55;
  color: var(--texto); white-space: pre-wrap; margin: 0 0 12px;
}
.pedido-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.separador-acciones { flex: 1; }

/* Izquierda el mensaje, derecha lo que se hace con él. */
/* TRES COLUMNAS: el mensaje, qué se hace con él, y con quién se está tratando.
   La tercera nació de que a 2K sobraba pantalla a la derecha y la huella —lo que
   se mira ANTES de decidir— estaba escondida en una pastillita de 11px. */
.cliente-columnas {
  display: grid;
  /* EN FRACCIONES Y NO EN PÍXELES. Con la primera columna clavada a 640px, las
     otras dos se quedaban con lo que sobrara y a 1350 de ventana les tocaban
     165px cada una: los botones no caben en eso y la rejilla se desbordaba.
     En fracciones las tres se encogen juntas y el mínimo de 230px protege a las
     dos de la derecha. Las pastillas de la columna del trabajo siguen midiendo
     todas lo mismo entre sí, que es lo que importaba: lo hereda la columna. */
  grid-template-columns: minmax(0, 1.75fr) minmax(230px, 1fr) minmax(230px, 1fr);
  gap: 16px;
}
.columna-mensaje { display: flex; flex-direction: column; gap: 12px; }
.boton-wa { align-self: flex-start; }

.columna-acciones {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--fondo); border: 1px solid var(--panel-borde);
  border-radius: 9px; padding: 16px;
}
/* Apagada hasta que el mensaje salga: no se puede decir "confirmó" antes de escribir. */
.columna-apagada { opacity: 0.6; }
.acciones-titulo {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--texto-tenue);
}
.acciones-botones { display: flex; flex-direction: column; gap: 8px; }

/* Cada botón dice qué hace y, si está apagado, por qué. Un botón gris sin
   explicación se siente roto. */
.accion-btn {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  cursor: pointer; font-family: inherit; color: var(--texto);
  background: var(--panel); border: 1px solid var(--panel-borde);
  border-left: 3px solid var(--panel-borde);
  border-radius: 9px; padding: 11px 13px;
  transition: border-color 0.12s, background 0.12s, transform 0.08s;
}
.accion-btn:not(:disabled):hover { background: var(--wash-suave); transform: translateX(2px); }
.accion-btn:not(:disabled):active { transform: translateX(0); }
.accion-icono-btn { font-size: 17px; line-height: 1; flex: none; }
.accion-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.accion-texto b { font-size: 13.5px; }
.accion-nota { font-size: 11.5px; color: var(--texto-tenue); }

.accion-confirmado:not(:disabled) { border-left-color: var(--verde); }
.accion-confirmado:not(:disabled):hover { border-color: var(--verde); }
.accion-recordatorio:not(:disabled) { border-left-color: var(--ambar); }
.accion-recordatorio:not(:disabled):hover { border-color: var(--ambar); }
.accion-cancelar:not(:disabled) { border-left-color: var(--rojo); }
.accion-cancelar:not(:disabled):hover { border-color: var(--rojo); }
/* La llamada es el último recurso antes de cancelar: se distingue de los demás. */
.accion-llamada:not(:disabled) { border-left-color: var(--acento); }
.accion-llamada:not(:disabled):hover { border-color: var(--acento); }
.accion-apagada { opacity: 0.4; cursor: not-allowed; }

/* Los dos caminos para marcar el mensaje como enviado, del mismo tamaño: ambos
   son válidos y ninguno debe verse como el "raro". */
.mensaje-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.mensaje-botones .boton { flex: 1; min-width: 165px; }

/* Cuando no hay mensaje que mandar (el cliente ya confirmó): se dice, en vez de
   dejar una caja vacía con botones de enviar al lado. */
.caja-sin-mensaje { display: flex; align-items: center; padding: 18px; }
.caja-sin-mensaje p { font-size: 13.5px; line-height: 1.6; }
.caja-sin-mensaje .sub { margin-top: 4px; display: inline-block; }
/* Esperando respuesta: hay mensaje escrito pero todavía no toca mandarlo. */
.caja-esperando b { color: var(--ambar); }

/* ---- Etapa 1: la dirección ----
   Dos columnas: los campos a la IZQUIERDA y el mensaje a la DERECHA, que se
   rearma con cada tecla. Es donde se juega el flete. */
.dir-panel {
  background: var(--acento-wash); border: 1px solid var(--acento-borde);
  border-radius: 10px; padding: 14px; margin-top: 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.dir-cargando { color: var(--texto-suave); font-size: 13px; }
.dir-cabecera { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.dir-cabecera > div { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 3px; }
.dir-cabecera b { font-size: 13.5px; }
.dir-icono { font-size: 19px; line-height: 1.1; flex: none; }
.dir-nota { font-size: 12px; color: var(--texto-suave); line-height: 1.5; }
.dir-marca { background: var(--verde-wash); color: var(--verde); padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 700; flex: none; }

/* Las pastillas de etapa son hermanas dentro de la columna, y el hueco entre
   ellas ya lo pone el gap de la columna: el margen de arriba las separaría dos
   veces. */
.columna-mensaje > .dir-panel { margin-top: 0; }
.dir-mensaje { display: flex; flex-direction: column; gap: 9px; }

.dir-campos { display: flex; flex-direction: column; gap: 9px; }
.dir-fila { display: flex; gap: 8px; }
.dir-fila .dir-campo { flex: 1; min-width: 0; }
.dir-campo { display: flex; flex-direction: column; gap: 3px; }
.dir-campo > span { font-size: 11.5px; color: var(--texto-suave); }
.dir-campo input {
  background: var(--panel); color: var(--texto);
  border: 1px solid var(--borde-control); border-radius: 8px;
  padding: 8px 11px; font-family: inherit; font-size: 13px; width: 100%;
}
.dir-campo input:focus { outline: none; border-color: var(--acento); }
.dir-campo input:disabled { color: var(--texto-tenue); }
.dir-campo em { font-size: 11px; font-style: normal; color: var(--texto-tenue); line-height: 1.4; }
.dir-mal input { border-color: var(--rojo); }
.dir-mal em { color: var(--rojo); }
.dir-duda input { border-color: var(--ambar); }
.dir-duda em { color: var(--ambar); }

.dir-casilla { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--texto-suave); cursor: pointer; }
.dir-casilla input { accent-color: var(--acento); }

.dir-dropi { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.dir-dropi > span { font-size: 11.5px; color: var(--texto-tenue); }

.dir-aviso-recordatorio {
  background: var(--ambar-wash); border-left: 3px solid var(--ambar);
  border-radius: 0; padding: 8px 11px; font-size: 12.5px; color: var(--texto-suave);
}
.dir-aviso-recordatorio b { color: var(--ambar); }
.dir-nota-reloj { font-size: 11.5px; color: var(--texto-tenue); }
.dir-mensaje .caja-mensaje { flex: 1; }

/* ---- Modo pruebas ----
   Apagado: una liga discreta. Encendido: imposible de ignorar, porque mientras
   esté prendido los pedidos reales no se ven y hay que saberlo de un golpe. */
.pruebas-apagado { margin: 14px 0 0; }

.pruebas-barra {
  background: var(--morado-suave); border: 1px solid var(--morado-borde);
  border-radius: 10px; padding: 13px 15px; margin: 16px 0 0;
  display: flex; flex-direction: column; gap: 11px;
}
.pruebas-titulo { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.pruebas-titulo > div { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 3px; }
.pruebas-titulo b { font-size: 13px; letter-spacing: 0.05em; color: var(--morado); }
.pruebas-icono { font-size: 19px; line-height: 1.1; flex: none; }
.pruebas-nota { font-size: 12px; color: var(--texto-suave); line-height: 1.5; }
.pruebas-nota b { letter-spacing: 0; color: var(--texto); font-size: 12px; }

.pruebas-controles { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pruebas-etiqueta { font-size: 11.5px; color: var(--texto-tenue); }
.pruebas-chip {
  background: transparent; border: 1px solid var(--panel-borde); border-radius: 20px;
  color: var(--texto-suave); cursor: pointer; font-family: inherit;
  font-size: 11.5px; padding: 4px 11px;
}
.pruebas-chip:hover { border-color: var(--morado); color: var(--texto); }
.pruebas-chip-activo { background: var(--morado-borde); border-color: var(--morado); color: var(--morado); font-weight: 700; }
.pruebas-reiniciar { margin-left: auto; }

/* ---- Huella del comprador ----
   Va hasta la DERECHA del renglón del cliente: se suma a lo que ya había, no
   desplaza nada. El color lo pone Dropi mirando TODAS las tiendas, no solo esta. */
.huella-chip {
  margin-left: auto; flex: none;
  font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 20px;
  white-space: nowrap; cursor: help;
}
.huella-verde    { background: var(--verde-wash); color: var(--verde); }
.huella-amarillo { background: var(--ambar-wash); color: var(--ambar); }
.huella-naranja  { background: var(--naranja-suave); color: var(--naranja); }
.huella-rojo     { background: var(--rojo-wash); color: var(--rojo); }
.huella-gris     { background: var(--wash-medio); color: var(--texto-tenue); }
.huella-falla    { background: var(--ambar-wash); color: var(--ambar); font-weight: 600; }

/* ---- La puerta del anticipo ---- */
.anticipo-panel {
  display: flex; flex-direction: column; gap: 11px;
  border-radius: 10px; padding: 14px; margin-top: 14px;
}
.anticipo-rojo { background: var(--rojo-tinte); border: 1px solid var(--rojo-borde); }
.anticipo-amarillo { background: var(--ambar-tinte); border: 1px solid var(--ambar-borde); }

.anticipo-cabecera { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.anticipo-cabecera > div { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 3px; }
.anticipo-cabecera b { font-size: 13.5px; }
.anticipo-icono { font-size: 20px; line-height: 1.1; flex: none; }
.anticipo-porque { font-size: 12px; color: var(--texto-suave); line-height: 1.5; }
.anticipo-monto {
  display: flex; flex-direction: column; align-items: flex-end; flex: none;
  font-size: 11px; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: 0.04em;
}
.anticipo-monto b { font-size: 19px; color: var(--texto); letter-spacing: 0; }
.anticipo-falta { font-size: 12px; color: var(--ambar); line-height: 1.5; }
.anticipo-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.anticipo-botones .boton { flex: 1; min-width: 165px; }

/* Los escalones del cobro. El color dice en qué va sin tener que leer:
   ámbar mientras está en el aire, verde cuando ya pagó, apagado si no quiso. */
.anticipo-aceptado  { background: var(--acento-wash); border: 1px solid var(--acento-borde); }
.anticipo-pagado    { background: var(--verde-tinte); border: 1px solid var(--verde-borde); }
.anticipo-rechazado { background: var(--wash-tenue); border: 1px solid var(--panel-borde); }
.anticipo-pagado .anticipo-monto b { color: var(--verde); }

.cobro-reloj { font-size: 11.5px; color: var(--texto-tenue); }
.cobro-reloj-alerta { font-size: 12.5px; color: var(--texto-suave); }
.cobro-reloj-alerta b { color: var(--ambar); }

/* El recordatorio de cambiar el monto en Dropi. Va marcado porque olvidarlo
   significa que al cliente le vuelven a cobrar lo que ya pagó. */
.cobro-dropi {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; line-height: 1.55; color: var(--texto-suave);
  background: var(--ambar-tinte); border-left: 3px solid var(--ambar);
  border-radius: 6px; padding: 9px 11px;
}
.cobro-dropi b { color: var(--ambar); }

/* El botón de "ya pagó": es el que cierra el cobro y abre el paso siguiente. */
.boton-ok { background: var(--verde); color: var(--sobre-color); }

/* ---- Pendientes de la app ----
   La libreta de lo que quedó a medias entre una sesión y otra. No es del
   negocio, por eso vive como ícono en la barra y no en el menú. */
.pend-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.pend-form { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 4px; }
.pend-form input, .pend-form textarea, .pend-form select {
  background: var(--panel); color: var(--texto);
  border: 1px solid var(--borde-control); border-radius: 9px;
  padding: 10px 13px; font-family: inherit; font-size: 13.5px; width: 100%;
}
.pend-form textarea { resize: vertical; line-height: 1.5; }
.pend-form input:focus, .pend-form textarea:focus, .pend-form select:focus { outline: none; border-color: var(--acento); }
.pend-form-fila { display: flex; gap: 8px; flex-wrap: wrap; }
.pend-form-fila select { flex: 1; min-width: 130px; }

.pend-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.pend-item {
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--panel); border: 1px solid var(--panel-borde);
  border-left: 3px solid var(--panel-borde);
  border-radius: 9px; padding: 12px 14px;
}
.pend-alta:not(.pend-hecho) { border-left-color: var(--rojo); }
.pend-normal:not(.pend-hecho) { border-left-color: var(--acento); }
/* Sin opacity: atenúa el texto y rompe el contraste. Se baja el color a mano. */
.pend-hecho .pend-titulo { color: var(--texto-tenue); text-decoration: line-through; }
.pend-hecho .pend-detalle { color: var(--texto-tenue); }

.pend-check, .pend-borrar {
  background: none; border: none; cursor: pointer; font-family: inherit;
  color: var(--texto-suave); flex: none; padding: 0; line-height: 1;
}
.pend-check { font-size: 17px; }
.pend-check:hover { color: var(--verde); }
.pend-borrar { font-size: 13px; color: var(--texto-tenue); }
.pend-borrar:hover { color: var(--rojo); }

.pend-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pend-titulo { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.pend-detalle { font-size: 12.5px; color: var(--texto-suave); line-height: 1.5; }
.pend-meta { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; font-size: 11.5px; color: var(--texto-tenue); }
.pend-area { background: var(--acento-suave); color: var(--acento); padding: 2px 8px; border-radius: 20px; font-weight: 600; }
/* Nombre propio: `pend-alta` ya la usa la tarjeta para el borde, y reusarla aquí
   hacía que una misma clase significara dos cosas distintas. */
.pend-insignia-alta { background: var(--rojo-wash); color: var(--rojo); padding: 2px 8px; border-radius: 20px; font-weight: 700; }

.pend-insignia-ok { background: var(--verde-wash); color: var(--verde); padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 700; flex: none; }
.pend-guardado { color: var(--verde); font-size: 12.5px; align-self: center; }
.pend-ver-hechos { margin-top: 18px; font-size: 12.5px; padding: 6px 12px; border-radius: 7px; cursor: pointer; }
.pend-lista-hechos { margin-top: 8px; }

/* ---- Ver todo el flujo ----
   Botoncito discreto al lado del rótulo: no compite con el mensaje, que es lo
   que se usa a diario. */
/* OJO: NO se toca .campo-buscar — es columna porque envuelve el buscador
   (rótulo arriba, campo abajo). Los rótulos que llevan botón usan esta variante. */
.campo-buscar-con-boton { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.boton-flujo {
  background: transparent; border: 1px solid var(--panel-borde); border-radius: 7px;
  color: var(--texto-suave); cursor: pointer; font-family: inherit;
  font-size: 11.5px; padding: 4px 10px; white-space: nowrap;
}
.boton-flujo:hover { border-color: var(--acento); color: var(--texto); }
.boton-flujo-activo { border-color: var(--acento); color: var(--acento); }

.flujo-intro { font-size: 12.5px; color: var(--texto-suave); line-height: 1.5; margin-bottom: 4px; }
.flujo-lista { display: flex; flex-direction: column; gap: 12px; }

.flujo-paso {
  border: 1px solid var(--panel-borde); border-left: 3px solid var(--panel-borde);
  border-radius: 9px; padding: 13px 15px;
  display: flex; flex-direction: column; gap: 9px;
}
/* El escalón de hoy se ve de un golpe; los ya pasados se apagan sin esconderse. */
.flujo-aqui { border-left-color: var(--acento); background: var(--acento-wash); }
.flujo-hecho { opacity: 0.55; }

.flujo-cabecera { display: flex; align-items: center; gap: 11px; }
.flujo-num { font-size: 17px; line-height: 1; flex: none; }
.flujo-titulos { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.flujo-titulos b { font-size: 13.5px; }
.flujo-espera { font-size: 11.5px; color: var(--texto-tenue); }
.flujo-marca {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; flex: none;
  background: var(--acento-suave); color: var(--acento);
  padding: 3px 8px; border-radius: 20px;
}
.flujo-marca-ok { background: var(--verde-wash); color: var(--verde); letter-spacing: 0; }
/* Los pasos que todavía no existen se muestran igual: esconderlos haría creer
   que el camino de un pedido termina antes de donde de verdad termina. */
.flujo-marca-obra { background: var(--ambar-wash); color: var(--ambar); letter-spacing: 0; }
.flujo-pendiente { border-style: dashed; }
.flujo-bloque {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--texto-tenue); margin: 14px 0 2px; padding-top: 10px;
  border-top: 1px solid var(--panel-borde);
}
.flujo-lista > .flujo-bloque:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.flujo-porque { font-size: 12px; color: var(--texto-suave); line-height: 1.5; }

/* ---- Panel de cancelar ----
   Es el único botón de la pantalla que escribe en Dropi y en Shopify, y no se
   puede deshacer. Por eso se sale del estilo de los demás: fondo rojo tenue y
   un paso a propósito para elegir el motivo antes de poder confirmar. */
.panel-cancelar {
  display: flex; flex-direction: column; gap: 11px;
  background: var(--rojo-tinte); border: 1px solid var(--rojo-borde);
  border-radius: 10px; padding: 14px;
}
.panel-cancelar-ok { background: var(--verde-tinte); border-color: var(--verde-borde); }
.panel-cancelar-mal { background: var(--ambar-tinte); border-color: var(--ambar-borde); }

.cancel-titulo { font-size: 13.5px; font-weight: 700; }
.cancel-aviso { font-size: 12px; color: var(--texto-suave); line-height: 1.5; }
.cancel-aviso b { color: var(--texto); }
.cancel-pregunta { font-size: 12px; color: var(--texto-suave); font-weight: 600; }
.cancel-falta { color: var(--ambar); }

.cancel-motivos { display: flex; flex-direction: column; gap: 6px; }
.cancel-motivo {
  display: flex; align-items: flex-start; gap: 9px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--panel-borde);
  border-radius: 8px; padding: 9px 11px; font-size: 13px;
}
.cancel-motivo:hover { border-color: var(--borde-control); }
.cancel-motivo input { margin-top: 2px; accent-color: var(--rojo); flex: none; }
.cancel-motivo span { display: flex; flex-direction: column; gap: 2px; }
.cancel-motivo-ayuda { font-size: 11.5px; color: var(--texto-tenue); }

.cancel-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.boton-peligro { background: var(--rojo); color: var(--sobre-color); }
.boton-peligro:disabled { background: var(--rojo-apagado); color: var(--rojo-apagado-texto); }

.cancel-lista { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.cancel-linea {
  display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px;
  color: var(--texto-suave);
}
.cancel-linea b { color: var(--texto); font-weight: 600; }
.cancel-error { font-size: 12px; color: var(--ambar); line-height: 1.5; }

/* Aviso de recordatorios: trabajo que vence, va arriba de todo. */
/* El aviso es un BOTÓN: se pica y filtra la fila a esos clientes. Va en rojo
   porque es lo que más urge de la pantalla, y en la banda beige el ámbar se
   perdía — era el elemento con menos contraste siendo el más importante. */
.aviso-recordatorio {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 12px; border-radius: 7px; cursor: pointer;
  background: var(--rojo); border: 1px solid var(--rojo);
  color: var(--sobre-color); font-family: inherit; font-size: 12px; font-weight: 600;
}
.aviso-recordatorio > div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 220px; }
.aviso-recordatorio .silencio { font-size: 11.5px; }
.aviso-recordatorio:hover { filter: brightness(1.08); }
.aviso-recordatorio.aviso-puesto { background: var(--texto); border-color: var(--texto); }
.aviso-monto { font-weight: 400; opacity: .85; }
.aviso-flecha { font-weight: 400; opacity: .8; }
.aviso-icono { font-size: 18px; }
.pastilla-listo { font-size: 11px; color: var(--ambar); font-weight: 700; }

/* El deshacer va abajo a la derecha y discreto: es la salida del clic mal dado. */
.boton-deshacer {
  margin-top: auto; align-self: flex-end;
  background: none; border: 1px solid var(--panel-borde); border-radius: 7px;
  color: var(--texto-tenue); cursor: pointer; font-family: inherit;
  font-size: 12px; padding: 5px 11px;
}
.boton-deshacer:hover:not(:disabled) { border-color: var(--acento); color: var(--texto); }
.boton-deshacer:disabled { color: var(--texto-tenue); cursor: default; }
/* Dentro del panel del anticipo no va abajo a la derecha: va en la fila de botones. */
.anticipo-botones .boton-deshacer { margin-top: 0; align-self: center; flex: none; }

/* CÓMO SE ENCOGEN LAS TRES COLUMNAS.
   Por debajo de 1550px la huella se pasa a lo ancho POR DEBAJO de las otras
   dos. No es que no quepa —a 1350 las tres entran—, es que entrando dejan la
   columna del trabajo en 446px, y ahí dentro va el formulario de la dirección
   con tres campos en un renglón: C.P., ciudad y estado a 140px cada uno. Va abajo
   ella y no las acciones a propósito: la huella se lee de un vistazo y aguanta
   estar lejos, mientras que los botones de "¿qué contestó?" tienen que quedar
   junto al mensaje que se acaba de leer. */
@media (max-width: 1550px) {
  .cliente-columnas { grid-template-columns: minmax(0, 1.6fr) minmax(230px, 1fr); }
  .columna-huella { grid-column: 1 / -1; }
}

/* ── SOLO CONFIRMADOS: dirección | mensaje | huella, y las acciones abajo ──
   Es la única etapa con DOS cosas de trabajo a la vez: un formulario que se
   revisa y un mensaje que se manda. Apiladas en la misma columna dejaban media
   pantalla vacía al lado.

   El orden lo hace `order`, no `grid-row`: en una rejilla el orden de colocación
   es el del documento MODIFICADO por order, así que basta con mandar la huella y
   las acciones al final para que el navegador arme los renglones solo. Con
   grid-row fijo habría que repetir los números en cada quiebre de pantalla. */
.cols-con-direccion {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(230px, 0.72fr);
}
/* La cabecera cruza las tres: dentro de la columna, la dirección arrancaría un
   renglón más abajo que el mensaje de al lado. */
.cols-con-direccion > .cliente-renglon { grid-column: 1 / -1; order: -1; margin: 0; }
.cols-con-direccion .columna-msj { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.cols-con-direccion .columna-msj > .dir-panel { margin-top: 0; }
.cols-con-direccion .columna-huella { order: 2; }
/* El anticipo hasta el fondo: no es trabajo, es un aviso de algo que ya pasó. */
.cols-con-direccion .columna-anticipo { order: 4; grid-column: 1 / -1; min-width: 0; }
.cols-con-direccion .columna-anticipo > .anticipo-panel { margin-top: 0; }
.cols-con-direccion .columna-acciones {
  order: 3; grid-column: 1 / -1;
  flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 16px;
}
/* En la fila los botones van en hilera y se reparten el ancho: apilados dejaban
   una tira flaquísima de tres renglones cruzando toda la pantalla. */
.cols-con-direccion .acciones-botones { flex-direction: row; flex-wrap: wrap; flex: 1; gap: 10px; }
.cols-con-direccion .acciones-botones .accion-btn { width: auto; flex: 1 1 200px; }
.cols-con-direccion .acciones-titulo { flex: none; max-width: 220px; }
.cols-con-direccion .acciones-apunte,
.cols-con-direccion .boton-deshacer { flex: none; }

@media (max-width: 1550px) {
  /* La huella se va a lo ancho, entre el trabajo y las acciones. */
  .cols-con-direccion { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .cliente-columnas { grid-template-columns: 1fr; }
  .columna-huella { grid-column: auto; }
  .cols-con-direccion { grid-template-columns: 1fr; }
}

@media (max-width: 1000px) {
  .pedido-fila { grid-template-columns: 14px 1fr auto; }
  .pedido-marcas { grid-column: 1 / -1; justify-content: flex-start; }
  .grupo { grid-template-columns: 26px 1fr auto 20px; }
  .grupo-monto { display: none; }
}

/* Tarjetas del resumen que se pueden abrir para ver de qué pedidos hablan. */
.tarj-abrible { cursor: pointer; transition: border-color 0.12s, background 0.12s; }
.tarj-abrible:hover { border-color: var(--acento); background: var(--acento-wash); }
.tarj-abrible:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.tarj-abierta { border-color: var(--acento); background: var(--acento-suave); }
.tarj-lupa { float: right; font-size: 9px; color: var(--texto-tenue); }
.panel-detalle { margin-top: 12px; border-color: var(--acento); }
.fila-aviso { background: var(--ambar-tinte); }
@media print { .tarj-lupa { display: none; } }

.acciones { display: flex; flex-direction: column; gap: 8px; }
.accion { display: flex; gap: 11px; align-items: flex-start; padding: 11px 13px; border-radius: 9px; background: var(--wash-tenue); }
.accion-bueno { border-left: 3px solid var(--verde); }
.accion-malo { border-left: 3px solid var(--rojo); }
.accion-icono { font-size: 17px; line-height: 1.2; }
.accion-cuerpo { display: flex; flex-direction: column; gap: 2px; }

/* En papel las tablas anchas no pueden scrollear: se dejan caber. */
.tabla-envoltura { overflow-x: auto; }
@media print { .tabla-envoltura { overflow-x: visible; } .pestanas { display: none; } }

/* ---- Tablas de datos ---- */
.tabla-datos td { vertical-align: middle; }
/* "En camino" es lo que todavía no se sabe: se pinta más apagado que entregados
   y devoluciones para que la vista caiga primero en lo que YA se resolvió. */
.tabla-datos td.tabla-camino { color: var(--texto-suave); }
.tabla-datos th { padding: 0; }
.th-orden {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: none; border: none; color: var(--texto-suave); font-family: inherit;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 12px 14px; cursor: pointer; text-align: left;
}
.num .th-orden { justify-content: flex-end; }
.th-orden:hover { color: var(--texto); background: var(--acento-suave); }
.th-orden .flecha { font-size: 10px; opacity: 0.45; }
.th-activo { color: var(--acento); }
.th-activo .flecha { opacity: 1; }
.pista-orden { display: block; margin-top: 6px; font-size: 12.5px; color: var(--texto-tenue); }
.aviso-desconexion {
  background: var(--ambar-wash); border: 1px solid var(--ambar); border-radius: 8px;
  padding: 10px 14px; margin-bottom: 14px; font-size: 13px; color: var(--texto-suave);
}
.enlace-filtro {
  background: none; border: none; color: var(--texto); font-family: inherit; font-size: 13.5px;
  font-weight: 500; cursor: pointer; padding: 0; text-align: left; text-decoration: underline;
  text-decoration-color: var(--borde-control); text-underline-offset: 3px;
}
.enlace-filtro:hover { color: var(--acento); text-decoration-color: var(--acento); }
.celda-barra { display: flex; align-items: center; gap: 9px; min-width: 190px; }
.barra-mini { flex: 1; background: var(--fondo); border-radius: 4px; height: 9px; overflow: hidden; min-width: 60px; }
.barra-mini-relleno { height: 100%; border-radius: 4px; }
.barra-valor { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 46px; }
.sem-bien { background: var(--verde); } .sem-texto-bien { color: var(--verde); }
.sem-regular { background: var(--ambar); } .sem-texto-regular { color: var(--ambar); }
.sem-mal { background: var(--rojo); } .sem-texto-mal { color: var(--rojo); }
.sem-neutro { background: var(--texto-tenue); } .sem-texto-neutro { color: var(--texto-tenue); }
.aviso-muestra {
  font-size: 11.5px; color: var(--ambar); background: var(--ambar-wash);
  border-radius: 4px; padding: 2px 7px; white-space: nowrap;
}

/* ---- LAS CIUDADES DE UNA PAQUETERÍA ----
   Se despliegan DENTRO de la tabla, en un renglón que cruza todas las columnas:
   así la ciudad queda pegada a la paquetería de la que se está hablando y no en
   un panel aparte al que hay que ir a buscar. */
.fila-desplegable { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.fila-desplegable:hover { text-decoration: underline; text-decoration-color: var(--acento); text-underline-offset: 3px; }
.flecha-fila {
  font-size: 10px; color: var(--texto-tenue);
  transition: transform .12s ease; display: inline-block;
}
.fila-abierta .flecha-fila { transform: rotate(90deg); color: var(--acento); }
.fila-abierta { color: var(--acento); }
/* El renglón desplegado se hunde: deja claro que lo de dentro pertenece a la
   fila de arriba y no es una fila más de la tabla. */
.fila-ciudades > td { background: var(--panel-hondo); padding: 0; }
.ciudades-caja { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.ciudades-caja .explica { margin: 0; }
.tabla-ciudades td, .tabla-ciudades th { padding: 8px 12px; font-size: 13px; }
.tabla-ciudades td { vertical-align: middle; }
.tabla-ciudades .celda-barra { min-width: 210px; }
/* Sin muestra para medir, la fila baja de tono: está para decir DÓNDE ha
   entregado, no qué tan bien. Un porcentaje ahí sería una conclusión inventada.
   CON COLOR Y NO CON OPACIDAD: opacity .62 la dejaba en 2.96:1 contra el fondo,
   por debajo del 4.5 de WCAG, y una fila que no se lee no informa de nada. */
.ciudad-sin-muestra td { color: var(--texto-tenue); }
.ciudades-pie { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- Ganadores ---- */
.ganadores { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 12px; }
.ganador {
  background: var(--fondo); border: 1px solid var(--panel-borde); border-radius: 10px;
  padding: 13px 15px; display: flex; flex-direction: column; gap: 7px;
}
.ganador-accionable { border-color: var(--acento); }
.ganador-estado { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; font-size: 13.5px; }
.ganador-estado .silencio { font-weight: 400; font-size: 12px; }
.ganador-mejor, .ganador-peor { font-size: 13px; color: var(--texto-suave); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ganador-mejor b, .ganador-peor b { color: var(--texto); font-variant-numeric: tabular-nums; }
.etiqueta-buena { background: var(--verde-wash); color: var(--verde); border-radius: 4px; padding: 1px 7px; font-size: 11.5px; font-weight: 600; }
.etiqueta-mala { background: var(--rojo-wash); color: var(--rojo); border-radius: 4px; padding: 1px 7px; font-size: 11.5px; font-weight: 600; }

/* ---- Rentabilidad ---- */
.panel-rentabilidad { border-width: 2px; }
.rent-gana { border-color: var(--verde-borde); }
.rent-pierde { border-color: var(--rojo-borde); }

.cuenta {
  background: var(--fondo); border-radius: 10px; padding: 6px 16px; margin-bottom: 16px;
}
.cuenta-linea {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--panel-borde);
}
.cuenta-linea:last-child { border-bottom: none; }
.cuenta-concepto { display: flex; flex-direction: column; font-size: 14px; }
.cuenta-monto { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cuenta-suma .cuenta-monto { color: var(--verde); }
.cuenta-resta .cuenta-monto { color: var(--texto-suave); }
.cuenta-total {
  border-top: 2px solid var(--panel-borde); margin-top: 4px; padding-top: 16px; padding-bottom: 14px;
}
.cuenta-total .cuenta-concepto { font-size: 15px; font-weight: 700; letter-spacing: 0.5px; }
.cuenta-total .cuenta-monto { font-size: 30px; font-weight: 700; }
.rent-gana .cuenta-total .cuenta-monto, .rent-gana .cuenta-total .cuenta-concepto { color: var(--verde); }
.rent-pierde .cuenta-total .cuenta-monto, .rent-pierde .cuenta-total .cuenta-concepto { color: var(--rojo); }
.cuenta-total .sub { font-weight: 400; letter-spacing: 0; color: var(--texto-suave); }

.kpis-rent { margin-top: 16px; margin-bottom: 12px; }

.conectar-meta {
  background: var(--acento-suave); border: 1px dashed var(--acento);
  border-radius: 10px; padding: 16px 18px; margin-bottom: 16px;
}
.conectar-meta h3 { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.conectar-meta p { font-size: 13.5px; color: var(--texto-suave); line-height: 1.6; margin-bottom: 6px; }
.conectar-meta strong { color: var(--texto); }

.select-campana { min-width: 200px; max-width: 100%; }

/* ---- Conexión con Meta ---- */
.pasos-meta { margin: 0 0 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.pasos-meta li { font-size: 13.5px; line-height: 1.65; color: var(--texto-suave); padding-left: 6px; }
.pasos-meta strong { color: var(--texto); font-weight: 600; }
.pasos-meta b { color: var(--acento); font-weight: 600; }
.pasos-meta em { color: var(--texto); font-style: normal; background: var(--fondo); padding: 1px 6px; border-radius: 4px; }
.pasos-meta a { color: var(--acento); }
.ojo { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ambar); }

.campo-etiqueta { display: block; font-size: 13.5px; font-weight: 500; margin-bottom: 8px; }
.exito { background: var(--verde-wash); border: 1px solid var(--verde); border-radius: 8px;
  padding: 11px 14px; font-size: 13.5px; margin: 12px 0; line-height: 1.55; }
.error-caja { background: var(--rojo-wash); border: 1px solid var(--rojo); border-radius: 8px;
  padding: 11px 14px; font-size: 13.5px; margin: 12px 0; line-height: 1.55; }

.conectado-ok { display: flex; align-items: center; gap: 12px; background: var(--verde-tinte);
  border: 1px solid var(--verde-borde); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.lista-cuentas { list-style: none; margin-bottom: 14px; }
.lista-cuentas li { padding: 8px 0; border-bottom: 1px solid var(--panel-borde); font-size: 13.5px; }
.lista-cuentas li:last-child { border-bottom: none; }

.lista-check { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 16px; }
.check-cuenta { display: flex; align-items: flex-start; gap: 10px; background: var(--fondo);
  border: 1px solid var(--panel-borde); border-radius: 8px; padding: 10px 13px; cursor: pointer; font-size: 13.5px; }
.check-cuenta:hover { border-color: var(--acento); }
.check-cuenta input { margin-top: 3px; accent-color: var(--acento); width: 16px; height: 16px; }

/* ---- Dinero ---- */
.dinero { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 12px; }
.dinero-caja {
  background: var(--fondo); border: 1px solid var(--panel-borde); border-radius: 10px;
  padding: 15px; display: flex; flex-direction: column; gap: 4px;
}
.dinero-bien { border-color: var(--verde-borde); }
.dinero-bien .kpi-valor { color: var(--verde); }
.dinero-mal { border-color: var(--rojo-borde); }
.dinero-mal .kpi-valor { color: var(--rojo); }

/* ---- Toast ---- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--panel); border: 1px solid var(--acento); color: var(--texto);
  padding: 13px 20px; border-radius: 10px; font-size: 13.5px; z-index: 50; max-width: 90vw;
}
.toast-error { border-color: var(--rojo); }

/* Pantallas medianas: el estado se apila debajo del menu en vez de encimarse. */
/* ============ IMPRESIÓN / PDF — TAMAÑO CARTA ============
   El tablero es oscuro y lleno de controles; en papel eso no sirve. Aquí se
   convierte en un reporte blanco, sin botones, que no parte tablas a la mitad. */
@page {
  size: letter;
  margin: 1.4cm 1.3cm;
}

@media print {
  /* Los colores viven en variables: se redefinen y todo el tablero cambia. */
  :root {
    --fondo: #ffffff;
    --panel: #ffffff;
    --panel-borde: #c9ced8;
    --borde-control: #9aa2b0;
    --texto: #101418;
    --texto-suave: #3d4550;
    --texto-tenue: #5c6672;
    --acento: #14508f;
    --acento-suave: #eef4fb;
  }

  body { background: #fff; color: #000; font-size: 10.5pt; line-height: 1.45; }
  .contenido { max-width: none; padding: 0; margin: 0; }

  /* Fuera todo lo que no se puede tocar en papel */
  .cabecera-app, .filtros-panel, .fila-acciones, .boton, .boton-suave, .preset,
  .select, .ficha, .toast, .th-orden .flecha, .pista-orden,
  [data-ver-todos] { display: none !important; }

  /* Los encabezados y los nombres de fila eran botones: en papel son texto.
     Ojo: .enlace-filtro lleva DENTRO el nombre de la paquetería o el estado —
     ocultarlo dejaría la tabla sin la columna que la hace legible. */
  .th-orden { display: block !important; padding: 5px 6px; }
  .enlace-filtro {
    display: inline !important; text-decoration: none !important;
    color: #101418 !important; font-weight: 600;
  }
  .tabla-datos td .sub { display: block; }

  /* En papel no hay scroll: la tabla tiene que caber en el ancho de la hoja */
  .tabla-wrap { overflow: visible !important; border: none !important; }
  .tabla { table-layout: fixed; width: 100%; }
  /* break-word partía los encabezados a media palabra ("DESPACHAD OS") */
  .tabla th { word-break: normal; overflow-wrap: normal; }
  .tabla td { word-break: normal; overflow-wrap: break-word; }
  .th-orden {
    font-size: 7.5pt; letter-spacing: 0; text-transform: none;
    text-align: left; white-space: normal;
  }
  .num .th-orden { text-align: right; }
  .celda-barra { min-width: 0 !important; gap: 4px; }
  .barra-mini { min-width: 22px; }
  .barra-valor { min-width: 34px; font-size: 8.5pt; }
  .aviso-muestra { display: none; }

  .cabecera-impresion {
    display: block;
    border-bottom: 2px solid #14508f;
    padding-bottom: 8px;
    margin-bottom: 16px;
  }
  .ci-titulo { font-size: 15pt; font-weight: 700; color: #14508f; }
  .ci-linea { font-size: 10pt; color: #3d4550; margin-top: 2px; }
  .ci-pie { font-size: 8.5pt; color: #5c6672; margin-top: 4px; }

  /* Nada se parte a la mitad entre páginas */
  .bloque, .panel, .resumen, .tarj, .tarjetas-grupo, .aviso, .ganador,
  .proyeccion, .cuenta, .tabla-wrap, tr { break-inside: avoid; page-break-inside: avoid; }
  h2, h3, .grupo-titulo { break-after: avoid; page-break-after: avoid; }

  .bloque + .bloque {
    border-top: 1px solid #c9ced8;
    padding-top: 14px;
    margin-top: 14px;
  }

  /* Cajas legibles en blanco: borde fino en vez de fondo de color */
  .tarj, .panel, .aviso, .ganador, .dinero-caja, .oportunidad-fila, .cuenta {
    border: 1px solid #c9ced8 !important;
    background: #fff !important;
  }
  .tarj-valor { font-size: 15pt; }
  .tarj-grande .tarj-valor { font-size: 17pt; }
  .tarjetas-grupo { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .grupo-venta { grid-template-columns: repeat(2, 1fr); }
  .kpis, .kpis-rent { grid-template-columns: repeat(3, 1fr); gap: 7px; }

  /* Los semáforos se conservan, en tonos que sí imprimen */
  .tarj-bueno .tarj-valor, .cuenta-suma .cuenta-monto, .proy-extra { color: #12693f !important; }
  .tarj-malo .tarj-valor, .embudo-fuga { color: #a01b21 !important; }
  .tarj-aviso .tarj-valor { color: #8a5a05 !important; }
  .tarj-base { border: 2px solid #14508f !important; }
  .sem-bien { background: #12693f !important; }
  .sem-regular { background: #b07a10 !important; }
  .sem-mal { background: #a01b21 !important; }
  .barra-mini { background: #e6e9ef !important; }
  .embudo-barra { background: #e6e9ef !important; }

  .tabla { font-size: 9pt; }
  .tabla th, .tabla td { padding: 5px 7px; }
  .tabla tbody tr:hover { background: none !important; }
  .grafica { height: 130px; }

  a { text-decoration: none; color: inherit; }
}

/* Con 4 módulos el menú ya no deja lugar al estado a los lados: debajo de este
   ancho se apila en vez de encimarse. */
@media (max-width: 1250px) {
  .barra { grid-template-columns: 1fr; justify-items: center; padding: 6px 12px 10px; gap: 6px; }
  .barra-lado:first-child { display: none; }
  .barra-estado { justify-self: center; }
}

@media (max-width: 700px) {
  .marca-nombre { letter-spacing: 1.5px; }
  .contenido { padding: 20px 16px; }
  .lista-avisos { grid-template-columns: 1fr; }
}

/* ---- La foto de la etiqueta ----
   Se enseña en el hueco entre el agradecimiento y la guía. Va chica: es una
   referencia para copiarla y pegarla en WhatsApp, no una galería. */
.etiqueta-foto { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.etiqueta-foto img {
  max-width: 220px; max-height: 260px; border-radius: 8px;
  border: 1px solid var(--panel-borde); background: var(--panel);
}
.etiqueta-acciones { display: flex; flex-direction: column; gap: 6px; }
.etiqueta-acciones .boton-flujo { text-align: center; text-decoration: none; }

/* ═══════════ OPERACIÓN: el riel y el trabajo ═══════════
   Sin tope de ancho: aquí el ancho no sobra, se usa. El riel se queda en su
   columna fija y todo lo demás —la lista, el mensaje, las respuestas— crece con
   la pantalla. El único texto con tope es el mensaje al cliente, que lo lleva
   en su propia regla. */

.op-layout { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 18px; align-items: start; }
.op-principal { min-width: 0; }

/* EL RIEL DE LA IZQUIERDA.
   Las pastillas en columna, TODAS del mismo alto y en el orden del camino.
   Antes eran una rejilla de 14 arriba: se comía tres renglones de alto y dejaba
   el mensaje —lo único que se trabaja— abajo y estrecho.
   Lleva su propia etiqueta ("Ver") para que la primera pastilla arranque a la
   misma altura que Buscar y Pedido por estructura, no por un margen a ojo. */
/* El riel se queda debajo de las DOS barras de arriba, no a 16px del borde de
   la ventana: ahí se metía por debajo de la cabecera y sus primeras pastillas
   quedaban tapadas. */
.op-riel {
  display: flex; flex-direction: column; gap: 4px;
  position: sticky;
  top: calc(var(--alto-cabecera, 54px) + var(--alto-filtros, 54px) + 16px);
}
/* El riel es flex con gap de 4px, y ese gap TAMBIÉN cae entre la etiqueta y la
   primera pastilla: sumaba 4px que las otras dos columnas no tienen. Se le
   restan aquí, atados a la misma variable, para que sigan juntos si cambia. */
.op-riel > .etiqueta-campo { margin-bottom: calc(var(--hueco-etiqueta) - 4px); }
/* La única raya del riel: aparta "Todos" —que es la fila entera, no un paso del
   camino— del resto. Sutil a propósito: separa, no divide. */
.riel-corte { height: 1px; background: var(--panel-borde); margin: 7px 10px; }
.op-riel .pastilla {
  width: 100%; height: var(--alto-control); justify-content: flex-start;
  border-radius: 8px; padding: 0 11px; gap: 8px;
}
.op-riel .pastilla-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.op-riel .pastilla-cuenta { margin-left: auto; }
.op-riel .leyenda-dias {
  flex-direction: column; align-items: flex-start; gap: 6px;
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--panel-borde);
}

/* Buscar y Pedido comparten renglón. El buscador se queda angosto: lo que
   importa es la barra del pedido, que es donde se elige a quién se atiende. */
.fila-busqueda {
  display: grid; grid-template-columns: minmax(190px, 300px) minmax(0, 1fr);
  gap: 12px;
  /* start, no end: alineadas por ARRIBA, que es donde están las etiquetas.
     Y sin margen superior, para arrancar exactamente donde arranca el riel. */
  align-items: start; margin: 0 0 10px;
}
.fila-busqueda .campo-buscar { margin: 0; }
.campo-pedido { display: flex; flex-direction: column; min-width: 0; position: relative; }
/* La caja del pedido lleva borde propio, así que su botón interior tiene que
   medir 2px menos para que el RECUADRO —que es lo que se ve— quede del mismo
   alto que el buscador y que la pastilla del riel. */
.campo-pedido .barra-cabecera { height: calc(var(--alto-control) - 2px); }

/* ── El desplegable se SUPERPONE ──
   Antes empujaba todo hacia abajo y había que perseguir el contenido con el
   scroll cada vez que se abría la lista. */
.barra-lista { position: relative; overflow: visible; }
/* Sin borde inferior: con la lista superpuesta ese pixel movía todo lo de
   abajo un pelo cada vez que se abría. */
.barra-abierta .barra-cabecera { border-radius: 11px 11px 0 0; border-bottom: none; }
.barra-cuerpo {
  position: absolute; top: 100%; left: -1px; right: -1px; z-index: 60;
  max-height: 62vh; overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--acento); border-top: none;
  border-radius: 0 0 11px 11px;
  box-shadow: var(--sombra-flotante);
}
@media print { .barra-cuerpo { position: static; max-height: none; overflow: visible; box-shadow: none; } }

@media (max-width: 1100px) {
  .op-layout { grid-template-columns: 1fr; }
  /* .op-lateral la sigue usando Seguimiento: no se toca. */
  .op-lateral { position: static; }
  .op-lateral .leyenda-dias { flex-direction: row; flex-wrap: wrap; }
  /* En pantalla angosta el riel deja de ser columna y vuelve a ser rejilla:
     una lista de 14 en vertical arriba dejaría el mensaje fuera de la vista. */
  .op-riel { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .op-riel > .etiqueta-campo { grid-column: 1 / -1; }
  .riel-corte { grid-column: 1 / -1; }
  .op-riel .leyenda-dias { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .fila-busqueda { grid-template-columns: 1fr; }
}

/* En "Guía enviada" no hay botones: solo se explica que ahí se acaba. */
.acciones-cerrado { font-size: 12.5px; color: var(--texto-suave); line-height: 1.6; }

/* ═══════════ SEGUIMIENTO ═══════════ */
/* La explicación del paso vive DENTRO del riel, debajo de las pastillas: habla
   de la que se acaba de picar, así que es donde se busca. Se separa con la
   misma raya y el mismo hueco que la leyenda de días, que es su vecina. */
.op-riel .seg-explica { margin-top: 14px; }
.seg-explica {
  background: var(--panel); border: 1px solid var(--panel-borde); border-radius: 10px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 6px;
  font-size: 12.5px; color: var(--texto-suave); line-height: 1.55;
}
.seg-explica b { font-size: 13px; color: var(--texto); }
.seg-quehacer { color: var(--ambar); }

.pedido-dias { font-size: 12px; color: var(--texto-tenue); text-align: right; }
.pedido-dias-mal { color: var(--ambar); font-weight: 600; }

/* El recorrido: lo que Dropi no guarda y la app sí. */
.seg-recorrido { margin-top: 14px; }
.seg-lista { list-style: none; margin: 8px 0 0; padding: 0 0 0 4px; }
.seg-paso { display: flex; gap: 12px; align-items: flex-start; padding: 0 0 14px; position: relative; }
.seg-paso:not(:last-child)::before {
  content: ''; position: absolute; left: 4px; top: 14px; bottom: 0;
  width: 1px; background: var(--panel-borde);
}
.seg-paso > div { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.seg-punto {
  width: 9px; height: 9px; border-radius: 50%; margin-top: 4px; flex: none;
  background: var(--borde-control);
}
.seg-paso-ahora .seg-punto { background: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.seg-paso-ahora b { color: var(--acento); }
.seg-nota { font-size: 11.5px; color: var(--texto-tenue); margin-top: 4px; }

/* ═══════════ El marcador del día ═══════════
   Lo que se entregó hoy y lo que dejó, con la cuenta que registra Dropi pedido
   por pedido. No es trabajo pendiente: es el número por el que se trabaja. */
.dia-panel {
  background: linear-gradient(180deg, var(--verde-tinte), var(--verde-tinte));
  border: 1px solid var(--verde-borde); border-radius: 12px;
  padding: 16px 18px; margin-bottom: 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.dia-cabecera { display: flex; align-items: center; gap: 12px; }
.dia-cabecera > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.dia-cabecera b { font-size: 14px; }
.dia-icono { font-size: 22px; }
.dia-nota { font-size: 12px; color: var(--texto-suave); }
.dia-fecha { font-size: 12px; color: var(--texto-tenue); }

.dia-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.dia-cifra {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--panel-hondo); border-radius: 9px; padding: 10px 12px;
}
.dia-cifra span { font-size: 11px; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: 0.04em; }
.dia-cifra b { font-size: 20px; }
.dia-resta b { color: var(--texto-suave); font-size: 17px; }
/* La utilidad es LA cifra: se ve distinta a propósito. */
.dia-neta { background: var(--verde-wash); border: 1px solid var(--verde-borde); }
.dia-neta b { color: var(--verde); }
.dia-neta em { font-size: 11px; color: var(--texto-suave); font-style: normal; }
.dia-ayer { font-size: 12px; color: var(--texto-suave); }

/* ═══════════ EL MAPA DE MÉXICO ═══════════ */
.presets-mapa { margin-left: auto; }
.mapa-caja { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 16px; align-items: start; }
.mapa-svg { width: 100%; height: auto; display: block; background: var(--panel-hondo); border-radius: 10px; }
.mapa-svg path { transition: opacity .12s; }
.mapa-svg path:hover { opacity: 0.75; stroke: var(--texto); stroke-width: 1.2; }

.mapa-ficha {
  background: var(--panel); border: 1px solid var(--panel-borde); border-radius: 10px;
  padding: 14px; display: flex; flex-direction: column; gap: 5px;
  font-size: 12.5px; color: var(--texto-suave); min-height: 150px;
}
.mapa-ficha b { color: var(--texto); font-size: 13.5px; }
.mapa-dato-grande { font-size: 30px; font-weight: 700; line-height: 1.1; margin: 2px 0 4px; }
.mapa-poco { color: var(--texto-tenue); font-style: italic; }

.mapa-escala { display: flex; align-items: center; gap: 5px; margin-top: 12px; font-size: 11px; color: var(--texto-tenue); }
.mapa-escala i { width: 22px; height: 11px; border-radius: 3px; display: inline-block; }
.mapa-escala small { margin-right: 6px; }
.mapa-nota { font-size: 11.5px; color: var(--ambar); margin-top: 8px; line-height: 1.5; }

@media (max-width: 900px) { .mapa-caja { grid-template-columns: 1fr; } }

/* ---- El rescate de una novedad ---- */
.nov-motivos { display: flex; flex-wrap: wrap; gap: 7px; }
.nov-motivo {
  background: transparent; color: var(--texto-suave);
  border: 1px solid var(--borde-control); border-radius: 999px;
  padding: 6px 13px; font-family: inherit; font-size: 12.5px; cursor: pointer;
}
.nov-motivo:hover { color: var(--texto); border-color: var(--acento); }
/* Los que el recorrido señala como probables se ven primero y se ven distintos. */
.nov-probable { border-color: var(--ambar-borde); color: var(--texto); }
.nov-motivo.activo { background: var(--acento); border-color: var(--acento); color: var(--sobre-color); font-weight: 600; }
.nov-pregunta { font-size: 13px; color: var(--ambar); line-height: 1.6; }
.nov-textos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.nov-texto { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* ---- DROPHUNTER ----------------------------------------------------------
   Riel a la izquierda (las mismas clases que Operación y Logística) y una lista
   de renglones a la derecha. Cada renglón es una rejilla fija para que los
   números de todos queden en la misma columna y se puedan comparar de un
   vistazo; el detalle se abre debajo del renglón, sin cambiar de pantalla. */
.fila-abierta { background: var(--acento-suave); }
.dh-buscar-campo {
  background: var(--fondo); border: 1px solid var(--borde-control); color: var(--texto);
  border-radius: 7px; padding: 6px 11px; font-family: inherit; font-size: 12.5px;
  width: 220px; max-width: 100%;
}
.dh-buscar-campo:focus { outline: none; border-color: var(--acento); }
.dh-sub { font-size: 11px; margin-top: 2px; }

/* ---- EL WALLET, debajo de las tarjetas de Devoluciones ------------------- */
.wallet-estado {
  margin-top: 12px; padding: 10px 13px; border-radius: 10px;
  border: 1px solid var(--panel-borde); background: var(--panel); font-size: 12.5px; color: var(--texto-suave);
}
.wallet-estado b { color: var(--texto); }
.wallet-viejo { border-color: var(--ambar-borde); background: var(--ambar-tinte); }
.wallet-doble { margin: 8px 0 0; color: var(--rojo); font-size: 12.5px; }
.wallet-doble b { color: var(--rojo); }
.wallet-como { margin-top: 6px; }
.wallet-como summary { cursor: pointer; color: var(--acento-texto); }
.wallet-como ol { margin: 8px 0 4px; padding-left: 18px; line-height: 1.9; }
.wallet-como p { font-size: 11.5px; margin: 4px 0 0; }
.wallet-marcador { cursor: grab; text-decoration: none; margin-left: 4px; }

.dh-panel { padding: 18px 20px; }
/* Más vendidos | Más recientes, a la derecha del título de Nuevos. */
.dh-orden-nuevos { margin-left: auto; }
.dh-lista { display: flex; flex-direction: column; }
.dh-fila {
  display: grid;
  grid-template-columns: 24px 52px minmax(220px, 1fr) 92px 118px 92px 84px 72px 92px;
  gap: 12px; align-items: center;
  padding: 10px 8px; border-top: 1px solid var(--panel-borde);
  cursor: pointer; border-radius: 8px;
}
.dh-fila:hover { background: var(--acento-wash); }
.dh-fila-abierta { background: var(--acento-suave); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.dh-fila-abierta:hover { background: var(--acento-suave); }
.dh-encabezado {
  cursor: default; border-top: 0; padding-top: 0; padding-bottom: 8px;
  font-size: 11.5px; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: 0.04em;
}
.dh-encabezado:hover { background: none; }
.dh-n { font-size: 12px; text-align: right; }
/* Fondo blanco: las fotos de Dropi son casi todas producto sobre blanco, y sobre
   el azul marino se veían como recortes flotando. */
.dh-mini {
  width: 52px; height: 52px; object-fit: contain; border-radius: 8px;
  background: #fff; border: 1px solid var(--panel-borde);
}
.dh-sin-foto { display: flex; align-items: center; justify-content: center; font-size: 20px; background: var(--fondo); }
.dh-prod { min-width: 0; }
/* Dos renglones como máximo: los nombres de Dropi vienen larguísimos. */
.dh-nombre {
  font-size: 13.5px; font-weight: 600; color: var(--texto); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dh-prod .dh-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.dh-chip {
  font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 10px;
  background: var(--wash-medio); color: var(--texto-suave); white-space: nowrap;
}
/* Un producto que ya vende no es un hallazgo: 91% de lo que se movió en VORTIX
   eran sus propios pedidos. */
.dh-chip-mio { background: var(--ambar-wash); color: var(--ambar); }
.dh-chip-nuevo { background: var(--verde-wash); color: var(--verde); }
.dh-chip-alerta { background: var(--rojo-wash); color: var(--rojo); }
.dh-chip-seguido { background: var(--acento-suave); color: var(--acento-texto); }
/* 🔥 Despegando: el chip del día es el dato principal del renglón, va encendido. */
.dh-chip-fuego { background: var(--naranja-suave); color: var(--naranja); }
.dh-chip-apuesta { background: var(--morado-suave); color: var(--morado); }
/* Los que se apagan siguen en la lista —para ver qué fue flor de un día—, pero
   apagados. Con el color del texto y no con opacity: opacity bajaba el contraste
   de todo el renglón a menos de 3:1 (ya pasó en Logística). Solo la foto se
   atenúa, que es decoración. */
.dh-fila-apagada .dh-nombre, .dh-fila-apagada .dh-ventas b { color: var(--texto-suave); }
.dh-fila-apagada .dh-mini { opacity: 0.5; }
.dh-ventas b { font-size: 17px; }
.dh-ventas, .dh-const, .dh-tend, .dh-costo { text-align: right; font-size: 13px; white-space: nowrap; }
.dh-encabezado > :nth-child(n+4) { text-align: right; justify-content: flex-end; }
.dh-encabezado .th-orden { font-size: 11.5px; }
.dh-tend { font-weight: 600; }
.dh-acciones { display: flex; gap: 6px; justify-content: flex-end; }
.dh-accion {
  background: transparent; border: 1px solid var(--borde-control); border-radius: 7px;
  color: var(--texto-suave); cursor: pointer; font-family: inherit; font-size: 12px;
  height: 30px; padding: 0 9px; white-space: nowrap;
}
.dh-accion:hover { border-color: var(--acento); color: var(--texto); }
.dh-seguido { color: var(--ambar); border-color: var(--ambar-borde); }
.dh-copiado { color: var(--verde); border-color: var(--verde-borde); }

/* Las barritas de los últimos 14 días: si vende parejo o si tuvo un solo golpe
   —en una tabla de números se ven idénticos—. El día que no ha terminado va
   tenue. */
.dh-barras { display: flex; gap: 2px; align-items: flex-end; height: 28px; justify-content: flex-end; }
.dh-barras i { width: 6px; background: var(--acento); border-radius: 1px; display: block; }
.dh-barras i.vacia { background: var(--panel-borde); }
.dh-barras i.parcial, .dh-grafica i.parcial { opacity: 0.45; }

/* El riel: la regla de la lista y el estado de los censos. */
.dh-censos { margin-top: 10px; }
.dh-ranuras { display: flex; gap: 5px; flex-wrap: wrap; }
.dh-ranura {
  font-size: 11.5px; padding: 2px 8px; border-radius: 10px;
  background: var(--wash-medio); color: var(--texto-tenue);
}
.dh-ranura.hecho { background: var(--verde-wash); color: var(--verde); }
.dh-ranura.corriendo { background: var(--ambar-wash); color: var(--ambar); }
.dh-ranura.perdido { background: var(--rojo-wash); color: var(--rojo); }

/* EL DETALLE, pegado debajo de su renglón. */
.dh-detalle {
  background: var(--panel-hondo); border: 1px solid var(--acento-borde); border-top: 0;
  border-radius: 0 0 10px 10px; padding: 18px 20px; margin-bottom: 8px;
}
.dh-det-cabeza { display: flex; gap: 18px; align-items: flex-start; }
.dh-foto {
  width: 132px; height: 132px; object-fit: contain; flex: none;
  background: #fff; border: 1px solid var(--panel-borde); border-radius: 10px;
}
.dh-foto.dh-sin-foto { background: var(--fondo); font-size: 36px; }
.dh-det-datos { min-width: 0; flex: 1; }
.dh-det-datos h3 { font-size: 16px; font-weight: 600; margin: 0 0 3px; }
.dh-det-botones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.dh-det-botones .boton-flujo { font-size: 12px; padding: 6px 11px; text-decoration: none; }
.dh-cifras { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 14px; }
.dh-cifras div { display: flex; flex-direction: column; gap: 1px; }
.dh-cifras b { font-size: 16px; }
.dh-cifras .silencio { font-size: 11px; }
.dh-seguimiento {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 16px; padding: 10px 12px; border-radius: 9px; background: var(--wash-tenue);
  font-size: 12.5px;
}
.dh-nota {
  flex: 1; min-width: 200px;
  background: var(--fondo); border: 1px solid var(--borde-control); color: var(--texto);
  border-radius: 7px; padding: 6px 10px; font-family: inherit; font-size: 12.5px;
}
.dh-nota:focus { outline: none; border-color: var(--acento); }
.dh-guardado { border-color: var(--verde) !important; }
.dh-det-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; margin-top: 18px; }
.dh-det-titulo {
  font-size: 11.5px; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: 0.04em;
  margin: 16px 0 8px;
}
.dh-det-grid .dh-det-titulo { margin-top: 0; }
.dh-grafica { display: flex; align-items: flex-end; gap: 3px; height: 108px; padding-top: 16px; border-bottom: 1px solid var(--panel-borde); }
.dh-dia { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; position: relative; }
.dh-dia i { width: 100%; max-width: 16px; background: var(--acento); border-radius: 2px 2px 0 0; display: block; }
.dh-reabasto { position: absolute; top: -2px; font-size: 10px; color: var(--verde); }
.dh-grafica-pie { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; margin-top: 5px; }
.dh-comp { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.dh-comp-cifra b { font-size: 18px; }
.dh-titulares { margin: 6px 0 0; padding-left: 16px; font-size: 12px; color: var(--texto-suave); line-height: 1.5; }
.dh-stock { display: flex; flex-wrap: wrap; gap: 6px; }
.dh-stock-item { font-size: 12px; padding: 4px 9px; border-radius: 7px; background: var(--wash-tenue); color: var(--texto-suave); }
.dh-stock-item b { color: var(--texto); }
.dh-aviso { margin: 14px 0 0; font-size: 12.5px; }

/* Pantallas angostas: primero se va la gráfica chiquita; luego el número de
   renglón, la constancia y el costo (siguen en el detalle). */
@media (max-width: 1350px) {
  .dh-fila { grid-template-columns: 24px 52px minmax(200px, 1fr) 88px 88px 80px 70px 92px; }
  .dh-col-serie { display: none; }
}
@media (max-width: 1100px) {
  .dh-fila { grid-template-columns: 44px minmax(0, 1fr) 80px 76px 88px; }
  .dh-n, .dh-const, .dh-costo,
  .dh-encabezado > :nth-child(1), .dh-encabezado > :nth-child(6), .dh-encabezado > :nth-child(8) { display: none; }
  .dh-mini { width: 44px; height: 44px; }
  .dh-det-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dh-fila { grid-template-columns: 44px minmax(0, 1fr) 70px; }
  .dh-tend, .dh-acciones, .dh-encabezado > :nth-child(7), .dh-encabezado > :nth-child(9) { display: none; }
  .dh-det-cabeza { flex-direction: column; }
}

/* Campañas de Meta sin producto asignado: su gasto no se le puede cobrar a
   nadie, y entonces ese producto parece vender gratis. Se marcan para que
   salten a la vista en una lista de treinta y tantas. */
.fila-sin-asignar { background: var(--ambar-tinte); }
.fila-sin-asignar td:first-child { box-shadow: inset 3px 0 0 var(--ambar); }
/* El desplegable guarda solo, sin botón: el destello verde es el acuse. */
.select-guardado { border-color: var(--verde) !important; }

/* El desplegable para asignarle producto a una campaña huérfana. Vive DENTRO de
   la campaña, en Pauta, porque ahí es donde se ve el problema: mandar a buscar
   el arreglo a otra pantalla es pedirle a alguien que salga de donde estaba. */
.campana-asignar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding: 9px 12px;
  background: var(--ambar-tinte);
  border: 1px solid var(--ambar-borde); border-radius: 9px;
  font-size: 12.5px; color: var(--texto-suave);
}
.campana-asignar select { min-width: 260px; }

/* Encabezados que ordenan. Se ven como texto hasta que el ratón pasa encima:
   una tabla llena de botones azules compite con los datos, que son lo que
   importa. La flecha dice por dónde va el orden sin tener que adivinar. */
.th-orden {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  display: inline-flex; align-items: center; gap: 4px;
}
.th-orden:hover { color: var(--acento); }
.th-flecha { font-size: 9px; opacity: 0.35; }
.th-orden:hover .th-flecha { opacity: 0.7; }
.th-activo { color: var(--acento); }
.th-activo .th-flecha { opacity: 1; }

/* Devoluciones y wallet. Se despega del resto del bloque de dinero porque NO
   respeta el filtro de fechas: es plata que cae cuando cae, no del periodo. */
.dev-panel {
  margin-top: 18px; padding: 14px 16px 4px;
  border: 1px dashed var(--panel-borde); border-radius: 11px;
  background: var(--ambar-tinte);
}
.dev-cabecera { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.dev-cabecera h3 { margin: 0; font-size: 14px; }

/* Las tarjetas de devoluciones viven en la rejilla del dinero pero NO siguen el
   filtro de fechas. El borde punteado lo dice sin tener que leer la nota. */
.kpis-rent .kpi:nth-last-child(-n+3) { border-style: dashed; }

/* La cuarta fila de EL DINERO: devoluciones. NO sigue el filtro de fechas, y el
   borde punteado lo dice sin que haya que leer la nota. */

/* "Proceder a cancelación": mueve el pedido a la pastilla donde se cancela, pero
   NO cancela. Va en ámbar y no en rojo justamente por eso — el rojo se reserva
   para el botón que sí toca Dropi y Shopify y no se deshace. */
.accion-proceder, .boton-proceder { border-color: var(--ambar-borde); }
.accion-proceder .accion-icono-btn, .boton-proceder { color: var(--ambar); }

/* ---- LA PANTALLA DE ENTRADA ------------------------------------------------
   Vive sola: no hay cabecera ni menú porque todavía no se sabe quién es.       */
.cuerpo-entrada {
  display: grid;
  place-items: center;
  padding: 24px;
  /* Un respiro de color para que no parezca una pantalla rota. */
  background:
    radial-gradient(900px 500px at 50% -10%, var(--acento-suave), transparent 70%),
    var(--fondo);
}

.caja-entrada {
  width: 100%;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--panel-borde);
  border-radius: 16px;
  padding: 28px 26px 24px;
  box-shadow: var(--sombra-caja);
}

.marca-entrada { text-align: center; margin-bottom: 22px; }
.marca-sello {
  width: 46px; height: 46px; margin: 0 auto 12px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--acento-suave);
  border: 1px solid var(--borde-control);
  color: var(--acento);
  font-size: 24px; font-weight: 700;
}
.marca-entrada h1 { font-size: 17px; font-weight: 600; letter-spacing: 3px; }
.marca-pie { font-size: 12px; color: var(--texto-tenue); letter-spacing: 1px; }

.caja-entrada label {
  display: block;
  margin: 14px 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-suave);
  letter-spacing: 0.4px;
}

.caja-entrada input {
  width: 100%;
  padding: 11px 12px;
  font: inherit;
  font-size: 15px;              /* 16px o más evita que el iPhone haga zoom al escribir */
  color: var(--texto);
  background: var(--fondo);
  border: 1px solid var(--borde-control);
  border-radius: 9px;
}
.caja-entrada input:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  border-color: var(--acento);
}

.campo-clave { position: relative; }
.campo-clave input { padding-right: 44px; }
.ojo {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 8px;
  color: var(--texto-suave); font-size: 15px; cursor: pointer;
}
.ojo:hover { background: var(--acento-suave); color: var(--texto); }

.pista { margin-top: 6px; font-size: 12px; color: var(--texto-tenue); }

.boton-entrar {
  width: 100%;
  margin-top: 20px;
  padding: 12px;
  font: inherit; font-size: 15px; font-weight: 600;
  color: var(--sobre-color);
  background: var(--acento);
  border: 0; border-radius: 10px;
  cursor: pointer;
}
.boton-entrar:hover { filter: brightness(1.08); }
.boton-entrar:disabled { opacity: 0.6; cursor: default; }

.error-entrada {
  margin-top: 14px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--rojo);
  background: var(--rojo-wash);
  border: 1px solid var(--rojo-borde);
  border-radius: 9px;
}

.aviso-primera {
  padding: 11px 12px;
  margin-bottom: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--texto-suave);
  background: var(--acento-suave);
  border: 1px solid var(--borde-control);
  border-radius: 9px;
}
.aviso-primera b { color: var(--texto); }

/* ---- Quién entró, en la barra de estado ---- */
.estado-quien {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--panel-borde);
}
.quien-nombre {
  font-weight: 600;
  color: var(--texto);
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quien-salir {
  font: inherit;
  font-size: 11px;
  padding: 2px 8px;
  color: var(--texto-suave);
  background: none;
  border: 1px solid var(--borde-control);
  border-radius: 999px;
  cursor: pointer;
}
.quien-salir:hover { color: var(--texto); background: var(--acento-suave); }

/* ---- USUARIOS: quién entra y hasta dónde ---- */
.usuarios-lista { display: grid; gap: 10px; margin-top: 14px; }

.usuario-fila {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto;
  grid-template-areas: "quien perfil acciones" "visto visto acciones";
  gap: 4px 16px;
  align-items: center;
  padding: 12px 14px;
  background: var(--fondo);
  border: 1px solid var(--panel-borde);
  border-radius: 10px;
}
.usuario-apagado { opacity: 0.55; }
.usuario-quien { grid-area: quien; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.usuario-perfil { grid-area: perfil; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.usuario-visto { grid-area: visto; font-size: 12px; color: var(--texto-tenue); }
.usuario-acciones { grid-area: acciones; display: flex; gap: 8px; }
.usuario-btn { padding: 5px 10px; font-size: 12px; }

.usuarios-alta {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 14px;
}
.usuarios-alta label {
  display: block; margin-bottom: 5px;
  font-size: 12px; font-weight: 600; color: var(--texto-suave);
}
.usuarios-alta input, .usuarios-alta select {
  width: 100%; padding: 8px 10px;
  font: inherit; font-size: 13px;
  color: var(--texto); background: var(--panel);
  border: 1px solid var(--borde-control); border-radius: 8px;
}
.usuarios-aviso { margin-top: 12px; font-size: 13px; color: var(--verde); }
.usuarios-mal { color: var(--rojo); }

/* En pantalla chica (celular) todo se apila: la app se va a usar desde el
   teléfono cuando Josué esté fuera. */
@media (max-width: 760px) {
  .usuario-fila { grid-template-columns: 1fr; grid-template-areas: "quien" "perfil" "visto" "acciones"; }
  .usuarios-alta { grid-template-columns: 1fr; }
}
.usuario-perfil .chip-activo { border-color: var(--acento); color: var(--acento); }

/* ---- La salida a mano de la llamada ---- */
.acciones-apunte { margin: 8px 0 0; text-align: center; }
.apunte-enlace {
  font: inherit;
  font-size: 12.5px;
  color: var(--texto-suave);
  background: none;
  border: 0;
  border-bottom: 1px dashed var(--borde-control);
  padding: 2px 0;
  cursor: pointer;
}
.apunte-enlace:hover { color: var(--texto); border-bottom-color: var(--acento); }
.apunte-enlace:disabled { opacity: 0.5; cursor: default; }

/* El botón de llamar es un enlace <a>: hay que quitarle lo de enlace para que
   se vea idéntico a los botones que tiene al lado. */
a.accion-btn { text-decoration: none; }

/* ── La huella del comprador, en su propia columna ──────────────────────────
   Todo el recuadro se tiñe del color del riesgo: de un vistazo, sin leer. Los
   tres números son los que deciden, así que van grandes y no en un title. */
/* La huella se acomoda mirando SU PROPIO ancho, no el de la ventana. Antes
   dependía de un @media: en un monitor 2K la ventana era ancha pero la columna
   de la huella no siempre, y al revés. Ahora la pregunta se la hace a sí misma. */
.columna-huella { min-width: 0; container-type: inline-size; }
.huella-panel {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px; border-radius: 10px;
  border: 1px solid var(--panel-borde); background: var(--fondo);
}
.huella-tit {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--texto-tenue);
}
.huella-etiqueta { font-size: 17px; font-weight: 700; line-height: 1.15; }
.huella-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.huella-cifras div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.huella-cifras b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.huella-cifras span { font-size: 10.5px; color: var(--texto-suave); }
.huella-vacio { font-size: 14px; font-weight: 600; }
.huella-nota { font-size: 11.5px; color: var(--texto-suave); line-height: 1.5; }

/* El color del recuadro ES el dato: verde pasa derecho, rojo se asegura. */
.huella-panel.huella-verde    { background: var(--verde-tinte); border-color: var(--verde); }
.huella-panel.huella-verde .huella-etiqueta { color: var(--verde); }
.huella-panel.huella-amarillo { background: var(--ambar-tinte); border-color: var(--ambar); }
.huella-panel.huella-amarillo .huella-etiqueta { color: var(--ambar); }
.huella-panel.huella-naranja  { background: var(--naranja-suave); border-color: var(--naranja); }
.huella-panel.huella-naranja .huella-etiqueta { color: var(--naranja); }
.huella-panel.huella-rojo     { background: var(--rojo-tinte); border-color: var(--rojo); }
.huella-panel.huella-rojo .huella-etiqueta { color: var(--rojo); }
/* Gris es "no se sabe", que NO es lo mismo que "está bien". */
.huella-panel.huella-gris     { background: var(--wash-medio); }
.huella-panel.huella-gris .huella-etiqueta { color: var(--texto-suave); }
.huella-panel.huella-falla    { background: var(--ambar-tinte); border-color: var(--ambar); }

/* Cuando la huella tiene ancho de sobra —un monitor 2K le deja casi 900px— se
   acuesta: etiqueta, cifras y nota en un renglon. Va AQUI y no arriba porque
   @container no suma especificidad: puesto antes, la regla base de .huella-panel
   le ganaba y se quedaba siempre en columna. */
@container (min-width: 520px) {
  .huella-panel { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 16px; }
  .huella-cifras { flex: 1; max-width: 340px; }
}

/* Ya no hay @media para la huella: se acomoda sola por su propio ancho, arriba.
   El que había la mandaba a cruzar toda la fila por debajo de 1400px, y ahí era
   donde el botón de "Confirmó" acababa hasta el fondo de la pantalla. */

/* ---- PRECIOS: la calculadora de precios y ofertas ---------------------------
   Una hoja. Las casillas de captura usan el mismo estilo que Operación
   (.dir-campo), para que toda la app se vea igual donde se meten datos. */
#contenido [data-param], .pc-prod input, .pc-prod select, .pc-prod textarea {
  background: var(--panel); border: 1px solid var(--borde-control); color: var(--texto);
  border-radius: 8px; padding: 7px 10px; font-family: inherit; font-size: 13px; width: 100%;
}
#contenido [data-param]:focus, .pc-prod input:focus, .pc-prod select:focus, .pc-prod textarea:focus { outline: none; border-color: var(--acento); }
.pc-prod input[type=number], #contenido [data-param] { text-align: right; }
/* Un parámetro que Josué pisó a mano se distingue del que viene de los pedidos. */
#contenido [data-param].pc-manual { border-color: var(--acento); box-shadow: inset 3px 0 0 var(--acento); }

.pc-params-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 10px 16px; }
.pc-param label, .pc-campo label, .pc-notas-label { display: block; font-size: 11.5px; color: var(--texto-suave); margin-bottom: 4px; }
.pc-param-nota { font-size: 11px; color: var(--texto-tenue); margin-top: 3px; line-height: 1.4; }
.pc-real { color: var(--verde); font-weight: 600; }
.pc-tuyo { color: var(--acento-texto); font-weight: 600; }
.pc-link { background: none; border: 0; padding: 0; color: var(--acento-texto); cursor: pointer; font: inherit; font-size: 11px; }
.pc-link:hover { text-decoration: underline; }
.pc-deriv { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--panel-borde); font-size: 13px; color: var(--texto-suave); }
.pc-deriv b { color: var(--texto); }

.pc-barra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 12px; }
.pc-agregar { margin-left: auto; font-size: 13px; padding: 7px 14px; border-color: var(--acento); color: var(--acento-texto); }
.pc-cuenta { opacity: 0.7; margin-left: 3px; }

.pc-prod { margin-bottom: 14px; padding: 18px 20px; }
.pc-cab { display: grid; grid-template-columns: minmax(180px, 2fr) 150px 120px 200px 120px 32px; gap: 10px; align-items: end; }
.pc-meta { display: flex; gap: 4px; }
.pc-meta select { width: 58px; flex: none; }
.pc-quitar, .pc-quitar-oferta { background: none; border: 0; color: var(--texto-tenue); cursor: pointer; font-size: 15px; padding: 4px; }
.pc-quitar:hover, .pc-quitar-oferta:hover { color: var(--rojo); }

.pc-tabla { margin-top: 14px; min-width: 980px; font-size: 13px; }
/* Encabezados en dos renglones y celdas más justas: con el padding de .tabla
   (12px 14px) las 13 columnas no cabían ni a 1,600 px. */
.pc-tabla th { text-align: right; white-space: normal; line-height: 1.25; vertical-align: bottom; padding: 6px 8px; }
.pc-tabla td { text-align: right; white-space: nowrap; vertical-align: middle; padding: 6px 8px; }
.pc-tabla th:first-child, .pc-tabla td:first-child { text-align: left; }
.pc-in input { width: 78px; }
.pc-clave { font-weight: 700; font-size: 14px; }
.pc-bien { color: var(--verde); }
.pc-medio { color: var(--ambar); }
.pc-mal { color: var(--rojo); }
.pc-usar { font-size: 11px; padding: 2px 7px; margin-left: 4px; }
.pc-pie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; }

.pc-ajustes { margin-top: 12px; font-size: 12.5px; color: var(--texto-suave); }
.pc-ajustes summary { cursor: pointer; color: var(--acento-texto); margin-bottom: 8px; }
.pc-notas-label { margin-top: 10px; }
.pc-notas { resize: vertical; min-height: 44px; }
.pc-nota p { font-size: 12.5px; }

/* La TABLA de Precios: una hoja de Excel de verdad, con cuadrícula. Producto,
   estado y utilidad son celdas combinadas (rowspan) sobre sus ofertas. */
.pc-vistas { margin-bottom: 14px; }
.pc-hoja-panel { padding: 0; overflow: hidden; }
.pc-hoja { width: 100%; min-width: 1180px; border-collapse: collapse; font-size: 13px; }
.pc-hoja th, .pc-hoja td { border: 1px solid var(--panel-borde); padding: 6px 9px; text-align: right; white-space: nowrap; vertical-align: middle; }
.pc-hoja th { background: var(--wash-medio); color: var(--texto-suave); font-size: 11.5px; font-weight: 600; white-space: normal; line-height: 1.25; vertical-align: bottom; position: sticky; top: 0; }
.pc-hoja th:first-child, .pc-hoja .pc-h-nombre { text-align: left; }
.pc-hoja tbody.pc-grupo { border-top: 2px solid var(--borde-control); }
.pc-hoja tbody.pc-grupo:hover td { background: var(--wash-tenue); }
.pc-h-nombre { font-weight: 700; white-space: normal; min-width: 140px; }
.pc-hoja select, .pc-hoja input {
  background: var(--panel); border: 1px solid var(--borde-control); color: var(--texto);
  border-radius: 7px; padding: 5px 8px; font-family: inherit; font-size: 13px;
}
.pc-hoja select:focus, .pc-hoja input:focus { outline: none; border-color: var(--acento); }
.pc-hoja .pc-meta input { width: 80px; text-align: right; }
.pc-h-estado { font-weight: 600; }
.pc-est-testeo .pc-h-estado { color: var(--acento-texto); }
.pc-est-no_funciono .pc-h-estado { color: var(--rojo); }
.pc-est-pautando .pc-h-estado { color: var(--verde); }
.pc-est-no_funciono .pc-h-nombre { color: var(--texto-tenue); text-decoration: line-through; }
.pc-hoja-pie { padding: 10px 14px; margin: 0; font-size: 12px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* La hoja v2 (5-oct): se escribe EN la celda, como en Excel. La casilla llena
   la celda y solo se marca al enfocarla; las columnas fijas van en gris. */
.pc-hoja td.pc-c { padding: 0; }
.pc-hoja td.pc-c input, .pc-hoja td.pc-c select { width: 100%; min-width: 86px; border: 1px solid transparent; border-radius: 0; background: transparent; padding: 8px 9px; text-align: right; }
.pc-hoja td.pc-c:first-child input { text-align: left; font-weight: 700; min-width: 150px; }
.pc-hoja td.pc-c input:hover { background: var(--wash-suave); }
.pc-hoja td.pc-c input:focus, .pc-hoja td.pc-c select:focus { border-color: var(--acento); background: var(--panel); }
.pc-hoja td.pc-c select { text-align: left; min-width: 140px; }
.pc-hoja .pc-fijo { color: var(--texto-tenue); background: var(--wash-tenue); }
.pc-hoja tbody tr:hover td { background: var(--wash-tenue); }
.pc-hoja tr.pc-est-no_funciono td.pc-c:first-child input { color: var(--texto-tenue); text-decoration: line-through; }
.pc-hoja tr.pc-est-testeo .pc-h-estado { color: var(--acento-texto); }
.pc-hoja tr.pc-est-no_funciono .pc-h-estado { color: var(--rojo); }
.pc-hoja tr.pc-est-pautando .pc-h-estado { color: var(--verde); }

@media (max-width: 1100px) {
  .pc-cab { grid-template-columns: 1fr 1fr; }
  .pc-nombre { grid-column: 1 / -1; }
}
.pc-sub { font-weight: 400; font-size: 10.5px; color: var(--texto-tenue); }

/* ---- COLORES (🎨) y el interruptor ☀️/🌙 de la barra ---------------------- */
.interruptor-tema {
  background: transparent; border: 1px solid var(--borde-control); color: var(--texto);
  border-radius: 999px; width: 32px; height: 28px; font-size: 14px; line-height: 1; cursor: pointer;
}
.interruptor-tema:hover { border-color: var(--acento); background: var(--acento-wash); }
.col-temas { margin-top: 12px; }
.col-explica { margin-top: 8px; font-size: 12.5px; }
.col-rejilla { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 16px; align-items: start; margin-top: 16px; }
.col-grupo { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); margin: 16px 0 6px; }
.col-grupo:first-child { margin-top: 0; }
.col-fila { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 92px 30px; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--panel-borde); }
.col-muestra { width: 44px; height: 32px; border: 1px solid var(--borde-control); border-radius: 8px; padding: 2px; background: var(--panel); cursor: pointer; }
.col-nombre b { display: block; font-size: 13.5px; }
.col-nombre small { color: var(--texto-suave); font-size: 12px; }
.col-hex { width: 92px; background: var(--panel); color: var(--texto); border: 1px solid var(--borde-control); border-radius: 7px; padding: 6px 8px; font: 12.5px ui-monospace, Consolas, monospace; }
.col-hex:focus { outline: none; border-color: var(--acento); }
.col-reset { background: none; border: 1px solid var(--borde-control); color: var(--texto-suave); border-radius: 7px; width: 30px; height: 30px; cursor: pointer; }
.col-reset:hover { color: var(--acento-texto); border-color: var(--acento); }
.col-aviso { font-size: 11.5px; color: var(--ambar); white-space: nowrap; }
.col-pie { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.col-previa { position: sticky; top: 76px; }
.col-previa > p { color: var(--texto-suave); font-size: 13px; margin-bottom: 12px; }
.col-tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.col-tarjeta { border: 1px solid var(--panel-borde); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.col-tarjeta small { font-size: 11.5px; color: var(--texto-suave); }
.col-tarjeta b { font-size: 22px; }
.col-tarjeta span { font-size: 11.5px; }
.col-bien { border-color: var(--verde-borde); background: var(--verde-tinte); } .col-bien b, .col-bien span { color: var(--verde); }
.col-ojo { border-color: var(--ambar-borde); background: var(--ambar-tinte); } .col-ojo b, .col-ojo span { color: var(--ambar); }
.col-mal { border-color: var(--rojo-borde); background: var(--rojo-tinte); } .col-mal b, .col-mal span { color: var(--rojo); }
.col-tabla { width: 100%; font-size: 13px; }
.col-textos { margin: 12px 0; font-size: 13px; }
.col-textos a { color: var(--acento-texto); }
.col-mapa { display: flex; gap: 4px; }
.col-mapa i { flex: 1; height: 16px; border-radius: 4px; }
@media (max-width: 900px) { .col-rejilla { grid-template-columns: 1fr; } .col-previa { position: static; } }

/* ---- LOGÍSTICA: Resumen (auditoría) y El dinero — rehecho el 6-oct-2026 ----
   El diseño viene de iBoost. Cada tarjeta lleva un TONO (acento, real, neutro,
   verde, ámbar, rojo) que pinta su fondo, su caja de número y su barra con las
   variables del tema: así se ve bien en Claro y en Grafito sin un solo hex. */
.au .resumen-cab { margin-bottom: 4px; }
.au-titulo { display: block; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--texto-suave); margin: 18px 0 8px; }
.au-fila2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.au-fila3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.au-tarjeta, .au-hito, .di-pastilla {
  --t: var(--acento); --t-fondo: var(--acento-wash); --t-caja: var(--acento-suave); --t-borde: var(--acento-borde);
  background: var(--t-fondo); border: 1px solid var(--t-borde); border-radius: 12px; padding: 12px 14px;
}
.tono-acento { --t: var(--acento); --t-fondo: var(--acento-wash); --t-caja: var(--acento-suave); --t-borde: var(--acento-borde); }
.tono-real, .tono-rojo { --t: var(--rojo); --t-fondo: var(--rojo-tinte); --t-caja: var(--rojo-wash); --t-borde: var(--rojo-borde); }
.tono-verde { --t: var(--verde); --t-fondo: var(--verde-tinte); --t-caja: var(--verde-wash); --t-borde: var(--verde-borde); }
.tono-ambar { --t: var(--ambar); --t-fondo: var(--ambar-tinte); --t-caja: var(--ambar-wash); --t-borde: var(--ambar-borde); }
.tono-morado { --t: var(--morado); --t-fondo: var(--morado-suave); --t-caja: var(--morado-wash); --t-borde: var(--morado-borde); }
.tono-neutro { --t: var(--texto-suave); --t-fondo: var(--wash-tenue); --t-caja: var(--wash-medio); --t-borde: var(--panel-borde); }
.au-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; margin-bottom: 8px; }
.au-sello { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--t, var(--texto-suave)); background: var(--t-caja, var(--wash-medio)); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.au-cifra { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 10px; }
.au-etiqueta { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.au-caja { display: inline-block; font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--texto); background: var(--t-caja, var(--wash-medio)); border-radius: 8px; padding: 2px 10px; }
.au-cifra .au-caja.tono-verde, .au-cifra .au-caja.tono-ambar, .au-cifra .au-caja.tono-rojo { color: var(--t); }
.au-pie { font-size: 12px; color: var(--texto-suave); line-height: 1.45; margin: 0; }
.au-pie b { color: var(--texto); }
.au-hito .au-caja { margin-bottom: 10px; }
.au-barra { height: 6px; border-radius: 999px; background: var(--t-caja, var(--wash-medio)); overflow: hidden; flex: 1; }
.au-barra > i { display: block; height: 100%; border-radius: 999px; background: var(--t, var(--acento)); }
.au-barra-pie { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--texto-suave); }
.au-barra-pie b { color: var(--texto); }
.au-abrible { cursor: pointer; transition: border-color .15s; }
.au-abrible:hover, .au-abierta { border-color: var(--t); }
.au-ver { font-size: 11px; color: var(--t); font-weight: 600; }
/* Cada tasa es su propia tarjeta (7-oct): separadas por una línea casi no se veían. */
.au-tasas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.au-tasa { --t: var(--texto); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; background: var(--t-fondo, var(--wash-tenue)); border: 1px solid var(--t-borde, var(--panel-borde)); border-radius: 12px; }
.au-tasa.tono-verde { --t: var(--verde); }
.au-tasa.tono-neutro { --t: var(--texto); }
.au-tasa.tono-rojo { --t: var(--rojo); }
.au-tasa-valor { font-size: 26px; font-weight: 700; color: var(--t); }
.au-comp { display: grid; grid-template-columns: 56px 1fr 44px; align-items: center; gap: 8px; font-size: 11px; color: var(--texto-suave); }
.au-comp small:last-child { text-align: right; color: var(--texto); font-weight: 600; }
.au-comp .au-barra { --t-caja: var(--wash-medio); }
.au-comp-costeo .au-barra > i { background: var(--texto-tenue); }
.au-veredicto { font-size: 12px; font-weight: 600; color: var(--t); margin-top: 2px; }
.au-nota { font-size: 12px; color: var(--texto-suave); margin: 12px 0 0; line-height: 1.5; }
.au-nota b { color: var(--texto); }
.au-nota a { color: var(--acento-texto); }

.di-cab { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.di-intro { font-size: 13px; color: var(--texto-suave); max-width: 560px; margin-top: 4px; line-height: 1.5; }
.di-intro b { color: var(--texto); }
.di-filtro { font-size: 12.5px; color: var(--texto-suave); }
.di-filtro b { color: var(--texto); }
.di-fila3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; align-items: start; }
.di-col { display: flex; flex-direction: column; gap: 8px; background: var(--wash-tenue); border: 1px solid var(--panel-borde); border-radius: 12px; padding: 12px; }
.di-col > .au-titulo { margin: 2px 0 4px; }
.di-renglon { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 13px; }
.di-renglon b { font-variant-numeric: tabular-nums; }
.di-entra { background: var(--verde-tinte); color: var(--texto); }
.di-entra b { color: var(--verde); }
.di-sale { background: var(--rojo-tinte); color: var(--texto); }
.di-sale b { color: var(--rojo); }
.di-ganancia { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 9px; background: var(--verde); color: var(--sobre-color); font-weight: 700; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; margin-top: 4px; }
.di-ganancia b { font-size: 22px; letter-spacing: 0; }
.di-ganancia.di-perdida { background: var(--rojo); }
.di-pastilla { display: flex; flex-direction: column; gap: 6px; }
.di-pastilla .au-cab { margin-bottom: 0; }
.di-pastilla .au-caja { align-self: flex-start; color: var(--t); }
.di-col .wallet-estado { margin-top: 2px; }
.di-cierra { --t: var(--ambar); --t-caja: var(--ambar-wash); margin-top: 14px; border: 1px dashed var(--ambar-borde); background: var(--ambar-tinte); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.di-cierra .au-cab { margin: 0; justify-content: flex-start; }
.di-cierra .au-titulo { margin: 0; color: var(--texto); }
.di-cierra-fila { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.di-calle { display: flex; flex-direction: column; }
.di-calle b { font-size: 28px; line-height: 1; }
.di-calle span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); }
.di-calle small { font-size: 12px; color: var(--texto-suave); }
.di-flecha { color: var(--texto-suave); font-size: 18px; }
.di-destinos { display: flex; flex-direction: column; gap: 6px; }
.di-destino { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 8px; font-size: 13px; }
.di-final { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.di-final small { font-size: 11.5px; color: var(--texto-suave); }
.di-final b { font-size: 28px; color: var(--verde); line-height: 1.1; }
.di-cuenta { font-size: 12.5px; color: var(--texto-suave); margin: 0; border-top: 1px solid var(--ambar-borde); padding-top: 8px; }
.di-cuenta b { color: var(--verde); }
.di-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.di-chip { background: var(--ambar-wash); border-radius: 8px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
@media (max-width: 1100px) {
  .au-fila3, .di-fila3, .au-tasas, .di-chips { grid-template-columns: 1fr; }
  .di-cierra-fila { grid-template-columns: 1fr; }
  .di-final { align-items: flex-start; text-align: left; }
}
@media (max-width: 700px) { .au-fila2 { grid-template-columns: 1fr; } }

/* ---- Auditoría en PANTALLA PARTIDA (6-oct): Auditoría | El dinero ----------
   Las dos mitades lado a lado y todo más apretado: cajas, letras y huecos más
   chicos, y las explicaciones largas al pasar el ratón (ⓘ). Abajo de 1400px no
   caben y se vuelven a apilar. */
/* stretch: las dos mitades miden lo mismo, la más alta manda. La nota de
   "fuera de la cuenta" se va al fondo de Auditoría para que no quede un hueco. */
.au-dividida { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.au-dividida > .au { display: flex; flex-direction: column; }
.au-dividida > .au > .nota-pie:last-child { margin-top: auto; padding-top: 6px; }
.au-dividida > .panel { margin: 0; padding: 14px 16px; }
.au-dividida .resumen-cab { margin-bottom: 0; }
.au-dividida .resumen-cab h2 { font-size: 17px; }
.au-dividida .au-titulo { margin: 12px 0 6px; font-size: 10.5px; }
.au-dividida .au-fila2, .au-dividida .au-fila3 { gap: 8px; }
.au-dividida .au-tarjeta, .au-dividida .au-hito, .au-dividida .di-pastilla { padding: 9px 11px; border-radius: 10px; }
.au-dividida .au-cab { margin-bottom: 4px; font-size: 12.5px; }
.au-dividida .au-cifra { margin-top: 6px; gap: 2px; }
.au-dividida .au-caja { font-size: 18px; padding: 1px 8px; }
.au-dividida .au-pie { font-size: 11.5px; line-height: 1.35; }
.au-dividida .au-hito .au-caja { margin-bottom: 7px; }
.au-dividida .au-barra-pie { margin-top: 5px; font-size: 11.5px; }
.au-dividida .au-tasa { padding: 9px 11px; gap: 2px; border-radius: 10px; }
.au-dividida .au-tasa-valor { font-size: 21px; }
.au-dividida .au-comp { grid-template-columns: 50px 1fr 38px; gap: 6px; }
.au-dividida .au-nota { margin-top: 8px; font-size: 11.5px; }
.au-dividida .nota-pie, .au-dividida .nota-prorrata { font-size: 11.5px; margin-top: 6px; }
.au-dividida .di-fila3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 10px; }
.au-dividida .di-col { padding: 9px; gap: 6px; border-radius: 10px; }
.au-dividida .di-col-dev { grid-column: 1 / -1; }
/* Rentabilidad y Lo que cuesta vender, del mismo alto: la fila se estira y sus
   tarjetas crecen parejo para llenar el espacio (no queda hueco abajo). */
.au-dividida .di-fila3 { align-items: stretch; }
.au-dividida .di-fila3 > .di-col:not(.di-col-dev) > .di-pastilla { flex: 1; }
.di-dev-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.au-dividida .di-renglon { padding: 5px 9px; font-size: 12.5px; }
.au-dividida .di-ganancia { padding: 8px 11px; }
.au-dividida .di-ganancia b { font-size: 18px; }
.au-dividida .di-cierra { margin-top: 10px; padding: 10px 12px; gap: 7px; }
.au-dividida .di-cierra-fila { gap: 10px; }
.au-dividida .di-calle b, .au-dividida .di-final b { font-size: 22px; }
.au-dividida .di-destino { padding: 5px 10px; font-size: 12.5px; }
.au-dividida .di-cuenta { font-size: 11.5px; padding-top: 6px; }
.au-dividida .di-chip { padding: 5px 10px; font-size: 12.5px; }
.au-dividida .wallet-estado { font-size: 12px; }
.di-info { color: var(--texto-tenue); font-weight: 400; cursor: help; }
.di-final[title] { cursor: help; }
.au-dividida > .panel { padding: 12px 14px; }
.au-dividida .wallet-estado { padding: 6px 9px; margin-top: 0; }
.au-dividida .wallet-como summary { font-size: 11.5px; }
.au-dividida .di-renglon { padding: 4px 9px; }
.au-dividida .di-chips { gap: 6px; }
.au-dividida .au-tasa .au-pie { font-size: 11px; }
[title] > .au-pie, .au-pie[title], .au-nota[title] { cursor: help; }
@media (max-width: 1400px) {
  .au-dividida { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .di-dev-fila, .au-dividida .di-fila3 { grid-template-columns: 1fr; }
}

/* Filtro por mes y año, junto a los botones de periodo. */
.filtro-mes { display: flex; gap: 6px; align-items: center; }
.filtro-mes .select { min-width: 0; }

/* Tarjetas de MARCA en la Auditoría (7-oct): Meta en su azul y Dropi en su
   naranja, en PASTEL (los sólidos resaltaban demasiado). Los tonos salen de
   tema.js; los dos colores base se cambian en 🎨 Colores → Marcas. */
.au-marca { --m-fondo: var(--meta-fondo); --m-borde: var(--meta-borde); --m-tinta: var(--meta-tinta); --m-caja: var(--meta-caja); --m-num: var(--meta-num);
  background: var(--m-fondo); border-color: var(--m-borde); color: var(--m-tinta); }
.marca-dropi { --m-fondo: var(--dropi-fondo); --m-borde: var(--dropi-borde); --m-tinta: var(--dropi-tinta); --m-caja: var(--dropi-caja); --m-num: var(--dropi-num); }
.au-marca .au-cab, .au-marca .au-cab b { color: var(--m-tinta); }
.au-marca .au-etiqueta { color: var(--m-tinta); opacity: 0.8; }
.au-marca .au-caja { background: var(--m-caja); color: var(--m-num); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.au-marca .au-pie { color: var(--m-tinta); opacity: 0.9; }
.au-marca .au-pie b { color: var(--m-tinta); }
.au-marca .au-sello { background: var(--m-caja); color: var(--m-tinta); }

/* Seguimiento: interruptor Dropi | Dropea (15-oct). Cada uno con sus pastillas. */
.seg-proveedor { display: inline-flex; border: 1px solid var(--borde-control); border-radius: 8px; overflow: hidden; margin-right: 8px; }
.seg-prov { background: transparent; border: 0; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--texto-tenue); cursor: pointer; }
.seg-prov b { margin-left: 4px; font-weight: 700; }
.seg-prov + .seg-prov { border-left: 1px solid var(--borde-control); }
.seg-prov-dropi.activo { background: var(--dropi-fondo); color: var(--dropi-tinta); }
.seg-prov-dropea.activo { background: var(--verde-wash); color: var(--verde); }

/* Verificación en 2 pasos (Usuarios, 15-oct). */
.dos-pasos-si { color: var(--verde); font-weight: 700; }
.dos-pasos-fila { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.dos-pasos-fila input { width: 140px; font-size: 18px; letter-spacing: 3px; text-align: center; }
.dos-pasos-pasos { margin: 8px 0 4px 18px; padding: 0; }
/* Blanco fijo a propósito: un QR sobre fondo oscuro no lo lee la cámara. */
.dos-pasos-qr { width: 200px; height: 200px; background: white; border-radius: 8px; padding: 4px; margin: 6px 0 8px; }
.dos-pasos-qr svg { width: 100%; height: 100%; display: block; }
.dos-pasos-clave { font-size: 13px; letter-spacing: 1px; user-select: all; }