/* ==========================================================================
   BeeAgro · plataforma de documentos
   El banco de trabajo es oscuro (el campo); el documento es papel.
   Cada tipo lleva un color de la marca: miel, hoja y el naranja de la colmena.
   ========================================================================== */

/* Paleta tomada del sistema de diseño de beeagro.pe:
   honey (el ámbar de la marca), earth (los neutros cálidos), hive (el rojo)
   y el verde hoja. Los hex salen de las rampas OKLCH del propio sitio. */
/* Dos temas sobre los mismos tres colores de la marca: blanco, naranja y
   negro. El claro es el que se ve por defecto; el oscuro se elige desde la
   barra y queda guardado en el navegador.

   El ámbar del logo (#F9B818) brilla sobre negro pero sobre blanco solo llega
   a 1.8:1 de contraste, ilegible como texto. Por eso hay dos acentos: uno para
   fondos de botón y otro, más hondo, para texto y bordes. */
:root {
  --sombra-hoja: 0 0 0 1px #E3DED5, 0 10px 30px -18px rgba(23,19,15,.4);
  --anillo-pin: #FFFFFF;
  --realce-grafico: rgba(23,19,15,.04);
  --medidor-lleno: #C15C00;
  --medidor-curso: #F0B44A;
  --noche:      #F6F3ED;  /* fondo de la página, earth-100 */
  --taller:     #FFFFFF;  /* las tarjetas y paneles */
  --taller-alto:#FBF9F5;
  --hueco:      #F1EDE6;  /* los campos, hundidos respecto al panel */
  --linea:      #D8D2C9;
  --linea-fuerte:#B9B2A8;
  --linea-suave:#E8E4DD;
  --borde-campo:#8C8378;  /* 3.73:1 sobre el panel: es el limite de un control */
  --campo-foco: #FFFFFF;
  --texto:      #17130F;  /* earth-900 */
  --tenue:      #4B4540;  /* earth-700 */
  --apagado:    #6B655F;  /* earth-600 — #817B74 daba 4.18:1 sobre blanco, por debajo del minimo */
  --tono-frio:  #B9B2A8;

  --cera:       #F9B818;  /* honey-400 — el ámbar del logo, para fondos */
  --cera-texto: #AE5100;  /* honey-800 — #C15C00 se quedaba en 4.38:1, no llegaba */
  --miel:       #EBA200;
  --miel-honda: #AE5100;
  --hoja:       #16794A;
  --hive:       #D93B00;
  --alerta:     #C62200;

  --papel:      #FFFFFF;
  --tinta:      #17130F;
  --papel-linea:#E8E4DD;

  --acento: var(--cera);
  --acento-fuerte: var(--cera-texto);
  --acento-tinta: #AE5100;

  --r: 12px;
  --sombra: 0 1px 2px rgba(23,19,15,.05), 0 10px 26px -18px rgba(23,19,15,.35);

  --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --cuerpo: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --dato: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;
}

[data-tema="oscuro"] {
  --sombra-hoja: 0 2px 4px rgba(0,0,0,.35), 0 24px 50px -18px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.05);
  --anillo-pin: #0A0805;
  --realce-grafico: rgba(255,255,255,.03);
  --medidor-lleno: #F9B818;
  --medidor-curso: #C15C00;
  --noche:      #0A0805;  /* earth-950 */
  --taller:     #1A1613;
  --taller-alto:#23201D;
  --hueco:      #120F0C;
  --linea:      #3A3532;
  --linea-fuerte:#57504A;
  --linea-suave:#241F1C;
  --borde-campo:#776D63;  /* 3.55:1 sobre el panel */
  --campo-foco: #0E0B08;
  --texto:      #F6F3ED;
  --tenue:      #CEC8C1;
  --apagado:    #948D85;
  --tono-frio:  #5A534C;

  --cera:       #F9B818;
  --cera-texto: #F9B818;  /* sobre negro el ámbar se lee perfecto */
  --miel:       #EBA200;
  --miel-honda: #DC7F00;
  --hoja:       #45C275;
  --hive:       #FA4200;
  --alerta:     #F96A4D;  /* #D62300 daba 3.51:1 sobre la tarjeta: ilegible */

  --sombra: 0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px -24px rgba(0,0,0,.9);
}

body[data-tipo="factura"] { --acento: var(--hoja); --acento-fuerte: var(--hoja); --acento-tinta: #086733; }
body[data-tipo="guia"]    { --acento: var(--hive); --acento-fuerte: var(--hive); --acento-tinta: #D62300; }

* { box-sizing: border-box; }

/* `hidden` tiene que ganarle a los display de los componentes. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--noche);
  color: var(--texto);
  font: 400 15px/1.5 var(--cuerpo);
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: var(--dato); font-variant-numeric: tabular-nums; }

:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

/* ── Armazón: riel agrupado a la izquierda + panel principal ─────────
   El riel se queda fijo en pantalla y no participa del scroll de la
   página; .app-principal lleva el margen que le abre sitio. Así el resto
   del documento (barra-top sticky, cajones fixed) no cambia de referencia. */
.app-shell { min-height: 100vh; }

.riel {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 45;
  width: 210px; overflow-y: auto;
  background: var(--taller); border-right: 1px solid var(--linea-suave);
  padding: 16px 10px 20px;
  display: flex; flex-direction: column; gap: 18px;
}
.riel-marca { padding: 2px 8px 6px; }
/* El mismo <img> que el resto de la plataforma: aplicarTema() ya sabe
   cambiarle el archivo entre la versión oscura y la clara del logo. */
.marca-logo { height: 28px; width: auto; display: block; }

.riel-grupo { display: flex; flex-direction: column; gap: 1px; }
.titulo-grupo {
  font-family: var(--dato); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--apagado);
  padding: 0 8px 6px;
}

/* Las vistas: antes pastillas en una fila, ahora filas de un menú vertical. */
.riel .vista {
  cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 8px 8px; border-radius: 8px; text-align: left;
  background: transparent; border: 1px solid transparent;
  color: var(--tenue); font: 500 13.5px var(--cuerpo);
}
.riel .vista:hover { color: var(--texto); background: var(--hueco); }
.riel .vista.activo {
  background: color-mix(in srgb, var(--cera) 16%, var(--taller));
  border-color: transparent; color: var(--cera-texto); font-weight: 700;
}
.riel-cuenta {
  margin-left: auto; font-family: var(--dato); font-size: 10px;
  background: var(--hueco); color: var(--apagado);
  padding: 1px 7px; border-radius: 999px;
}
.riel .vista.activo .riel-cuenta { background: color-mix(in srgb, var(--cera) 30%, transparent); color: var(--cera-texto); }
/* Un pendiente real (>0) se marca como alerta, no como dato neutro. */
.riel-cuenta.hay-pendiente { background: color-mix(in srgb, var(--alerta) 16%, transparent); color: var(--alerta); }

.cortina-riel {
  display: none; position: fixed; inset: 0; z-index: 44;
  background: rgba(10,8,5,.45);
}

/* El botón de abrir el riel en el celular: tres líneas, solo visible ahí. */
.riel-abrir {
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 34px; height: 34px; padding: 0; border-radius: 8px;
  background: transparent; border: 1px solid var(--linea); cursor: pointer;
}
.riel-abrir span { display: block; height: 2px; width: 16px; margin: 0 auto; background: var(--tenue); border-radius: 1px; }

.app-principal { margin-left: 210px; min-width: 0; }

/* ── Barra superior: ya no lleva la navegación, solo estado y cuenta ── */
.barra-top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  padding: 9px 22px; min-height: 54px;
  background: color-mix(in srgb, var(--noche) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea-suave);
}
.barra-top-marca { display: none; align-items: center; }
.barra-top-marca .marca-logo { height: 26px; width: auto; display: block; }
.chip-tema { min-width: 78px; justify-content: center; }

.barra-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }

/* Local + Google, agrupados en un solo racimo en vez de dos pastillas sueltas. */
.estado-cluster { display: flex; gap: 6px; }

/* El "⋯": lo que antes eran 3 chips (tema, Excel, membrete) sueltos. */
.menu-mas { position: relative; }
.menu-mas summary {
  list-style: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 30px; padding: 0; font-size: 15px; line-height: 1;
}
.menu-mas summary::-webkit-details-marker { display: none; }
.menu-lista {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 46;
  min-width: 168px; padding: 6px;
  background: var(--taller); border: 1px solid var(--linea); border-radius: 10px;
  box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: 2px;
}
.menu-fila {
  cursor: pointer; text-align: left; padding: 8px 10px; border-radius: 7px;
  background: transparent; border: 0; color: var(--texto); font: 500 13px var(--cuerpo);
}
.menu-fila:hover { background: var(--hueco); }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--linea);
  background: var(--taller);
  color: var(--tenue);
  font-size: 12px; font-weight: 500;
  white-space: nowrap;
}
.chip-btn { cursor: pointer; transition: border-color .15s, color .15s; }
.chip-btn:hover { border-color: var(--acento-fuerte); color: var(--texto); }
.punto {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--apagado); flex: none;
}
.punto-ok { background: var(--hoja); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hoja) 18%, transparent); }
.punto-error { background: var(--alerta); }
.punto-espera {
  background: var(--cera);
  animation: latido 1.4s ease-in-out infinite;
}
@keyframes latido { 50% { opacity: .3; } }

/* ── Estructura ─────────────────────────────────────────────────────── */
.taller {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 500px);
  gap: 26px;
  align-items: start;
  padding: 26px 22px 40px;
  max-width: 1580px; margin: 0 auto;
}

.panel {
  background: var(--taller);
  border: 1px solid var(--linea-suave);
  border-radius: var(--r);
  box-shadow: var(--sombra);
  overflow: hidden;
}

/* ── Selector de tipo: la serie es el dato, no un adorno ────────────── */
.tipos {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--linea-suave);
  background: var(--hueco);
}
.tipo {
  appearance: none; cursor: pointer;
  display: flex; flex-direction: column; gap: 5px;
  padding: 15px 16px 13px;
  background: transparent; border: 0;
  border-right: 1px solid var(--linea-suave);
  border-bottom: 2px solid transparent;
  text-align: left; color: var(--tenue);
  transition: background .18s, color .18s, border-color .18s;
}
.tipo:last-child { border-right: 0; }
.tipo:hover { background: color-mix(in srgb, var(--taller) 70%, transparent); color: var(--texto); }
.tipo-nombre { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.tipo-serie {
  font-family: var(--dato); font-size: 11px; letter-spacing: .02em;
  color: var(--apagado);
}
.tipo.activo { background: var(--taller); color: var(--texto); }
.tipo-cotizacion.activo { border-bottom-color: var(--cera); }
.tipo-factura.activo   { border-bottom-color: var(--hoja); }
.tipo-guia.activo      { border-bottom-color: var(--hive); }
.tipo.activo .tipo-serie { color: var(--acento-fuerte); }

/* ── Formulario ─────────────────────────────────────────────────────── */
#formulario { padding: 4px 20px 22px; }

.grupo { border: 0; margin: 0; padding: 18px 0 4px; border-top: 1px solid var(--linea-suave); }
.grupo:first-of-type { border-top: 0; }

.grupo-titulo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 0 0 12px;
  font-family: var(--dato); font-size: 10px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--apagado);
}

/* Rejilla de 4 columnas: los campos ocupan el ancho que su dato necesita. */
.campos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px 14px; }
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; grid-column: span 2; }
.campo-ancho { grid-column: span 4; }
.campo-corto { grid-column: span 1; }
.etiqueta { font-size: 11.5px; color: var(--tenue); letter-spacing: .01em; }
/* Proveedor que no entrega comprobante: su gasto se paga igual pero no baja
   impuestos, y eso tiene que verse sin abrir la ficha. */
.etiqueta-alerta {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--alerta) 14%, transparent);
  color: var(--alerta); font-size: 11.5px; white-space: nowrap;
}

.campo input,
.campo select,
#formulario textarea,
.cajon input {
  width: 100%;
  padding: 9px 11px;
  background: var(--hueco);
  border: 1px solid var(--borde-campo);
  border-radius: 8px;
  color: var(--texto);
  font: 400 14px var(--cuerpo);
  transition: border-color .15s, background .15s;
}
.campo input.mono, .cajon input.mono { font-family: var(--dato); font-size: 13.5px; }
.input-monto {
  width: 84px; padding: 5px 7px; background: var(--hueco);
  border: 1px solid var(--borde-campo); border-radius: 6px; color: var(--texto);
  font-family: var(--dato); font-size: 13px; text-align: right;
}
.input-monto:hover, .input-monto:focus { border-color: var(--acento-fuerte); outline: none; }
/* La fecha del reporte se corrige en la misma tabla: el dia se carga desde el
   celular y a veces sale con el mes o el año cambiado. */
.input-fecha {
  padding: 4px 6px; background: var(--hueco); border: 1px solid transparent; border-radius: 6px;
  color: var(--texto); font-family: var(--dato); font-size: 12.5px;
}
.input-fecha:hover, .input-fecha:focus { border-color: var(--acento-fuerte); outline: none; }
/* Los reportes no entraban en una laptop: la fila pedía 1,419 px contra un
   cuadro de 1,009, y las acciones en fila se llevaban 332. El detalle y la
   actividad envuelven en vez de cortarse con puntos, y las acciones se
   apilan a la derecha, una debajo de otra. */
.tabla-reportes .celda-accion, .tabla-reportes .celda-cliente {
  max-width: none; min-width: 110px; white-space: normal;
}
.tabla-reportes .acciones-fila { flex-direction: column; align-items: flex-end; gap: 4px; }
/* Con eso todavía pedía 1,069 en una laptop a 1280 (150 % de escala en
   Windows, la más común): el aire entre columnas cierra los 60 que faltan. */
.tabla.tabla-reportes thead th, .tabla.tabla-reportes tbody td { padding-left: 10px; padding-right: 10px; }
.tabla-reportes .acciones-fila .enlace {
  max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* El monto tambien se corrige ahi mismo, pero sin dejar el campo abierto: un
   input numerico suelto cambia de valor con la rueda del mouse al pasar por
   encima, y el monto normal es el que sale del tarifario. */
.valor-editable {
  padding: 0; background: none; border: 0; color: inherit;
  font: inherit; cursor: pointer;
  border-bottom: 1px dotted var(--apagado);
}
.valor-editable:hover, .valor-editable:focus-visible {
  color: var(--acento-fuerte); border-bottom-color: currentColor; outline: none;
}

/* Prestamos: lo que se le presto, lo que ya se le cobro y lo que falta. */
.prestamos { display: grid; gap: 8px; margin: 10px 0; }
.prestamo { padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--taller); }
.prestamo-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.prestamo-concepto { font-size: 13.5px; font-weight: 500; color: var(--texto); }
.prestamo-saldo { margin-left: auto; font-size: 13px; color: var(--texto); }
.prestamo-dato { display: block; margin-top: 2px; }
.prestamo-cobros { list-style: none; margin: 6px 0 0; padding: 6px 0 0; border-top: 1px solid var(--linea-suave); display: grid; gap: 3px; }
.prestamo-cobros li { display: flex; align-items: baseline; gap: 10px; font-size: 12px; color: var(--apagado); }
.prestamo-cobros li span:first-child { flex: 1 1 auto; }
.prestamo-acciones { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; }
.prestamo-acciones .enlace { font-size: 12px; }
.campo input::placeholder, #formulario textarea::placeholder { color: var(--apagado); }
.campo input:hover, .campo select:hover { border-color: var(--linea-fuerte); }
.campo input:focus, .campo select:focus, #formulario textarea:focus {
  border-color: var(--acento-fuerte); background: var(--campo-foco); outline: none;
}
.campo select { cursor: pointer; }
.campo select option { background: var(--taller); }
#formulario textarea { resize: vertical; font-size: 13.5px; line-height: 1.5; }

.mini {
  cursor: pointer; padding: 4px 10px; border-radius: 999px;
  background: transparent; border: 1px solid var(--linea);
  color: var(--tenue); font: 500 11px var(--cuerpo); letter-spacing: 0;
  text-transform: none;
}
.mini:hover { border-color: var(--acento-fuerte); color: var(--acento-fuerte); }

/* ── Ítems ──────────────────────────────────────────────────────────── */
.items-cabecera,
.item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px 108px 100px 104px 30px;
  gap: 8px; align-items: center;
}
.items-cabecera-guia,
.item-guia {
  grid-template-columns: minmax(0, 1fr) 70px 108px 104px 30px;
}
.items-cabecera {
  padding: 0 0 7px;
  font-family: var(--dato); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--apagado);
}
.items-cabecera span:nth-child(n+2) { text-align: right; }
.items-cabecera span:nth-child(3) { text-align: center; }

.item { padding: 4px 0; }
.item input, .item select {
  width: 100%; padding: 8px 10px;
  background: var(--hueco); border: 1px solid var(--linea);
  border-radius: 7px; color: var(--texto); font: 400 13.5px var(--cuerpo);
}
.item input:focus, .item select:focus { border-color: var(--acento-fuerte); outline: none; }
.item .num { font-family: var(--dato); text-align: right; font-size: 13px; }
.item select { font-size: 12px; cursor: pointer; }
.item select option { background: var(--taller); }
.item .importe {
  font-family: var(--dato); font-size: 13px; text-align: right;
  padding: 8px 10px; color: var(--acento-fuerte);
  border: 1px dashed var(--linea-suave); border-radius: 7px;
  white-space: nowrap; overflow: hidden;
}
.quitar {
  cursor: pointer; width: 30px; height: 32px; padding: 0;
  background: transparent; border: 1px solid transparent; border-radius: 7px;
  color: var(--apagado); font-size: 17px; line-height: 1;
}
.quitar:hover { color: var(--alerta); border-color: color-mix(in srgb, var(--alerta) 40%, transparent); }

/* La cotizacion de Arandano se cobra por meses: la columna Meses solo aparece
   ahi, entre Unidad y el precio (que pasa a llamarse Monto x mes). */
.item .meses, .items-cabecera .et-meses { display: none; }
.cultivo-por-meses .items-cabecera, .cultivo-por-meses .item {
  grid-template-columns: minmax(0, 1fr) 70px 108px 60px 100px 104px 30px;
}
.cultivo-por-meses .item .meses, .cultivo-por-meses .items-cabecera .et-meses { display: block; }

/* ── Observaciones: opciones para marcar ──────────────────────────────── */
.marcado-lista { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.marcado-opcion {
  display: flex; align-items: flex-start; gap: 6px; cursor: pointer;
  padding: 6px 10px; border-radius: 9px; border: 1px solid var(--linea);
  background: var(--hueco); font-size: 12px; color: var(--tenue); line-height: 1.35;
  max-width: 100%;
}
.marcado-opcion:hover { border-color: var(--acento-fuerte); }
.marcado-opcion input { accent-color: var(--acento-fuerte); width: 14px; height: 14px; margin-top: 1px; flex: none; cursor: pointer; }
.marcado-opcion.marcado-activo { border-color: var(--acento-fuerte); color: var(--texto); background: color-mix(in srgb, var(--acento-fuerte) 8%, var(--hueco)); }
.marcado-otro { display: flex; gap: 8px; margin-bottom: 8px; }
.marcado-otro-txt {
  flex: 1; min-width: 0; padding: 7px 10px; border-radius: 7px;
  background: var(--hueco); border: 1px solid var(--linea); color: var(--texto); font-size: 12.5px;
}
.marcado-otro-txt:focus { border-color: var(--acento-fuerte); outline: none; }

/* ── Totales ────────────────────────────────────────────────────────── */
.totales {
  display: grid; grid-template-columns: 1fr auto; gap: 10px 24px;
  align-items: start;
}
.interruptor { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--tenue); cursor: pointer; }
.interruptor input { accent-color: var(--acento-fuerte); width: 15px; height: 15px; cursor: pointer; }
.totales-lista { margin: 0; display: grid; gap: 6px; min-width: 230px; }
.totales-lista > div { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; }
.totales-lista dt { font-size: 13px; color: var(--tenue); }
.totales-lista dd { margin: 0; font-size: 14px; }
.totales-final {
  margin-top: 4px; padding-top: 9px; border-top: 1px solid var(--linea);
}
.totales-final dt { font-weight: 600; color: var(--texto); font-size: 14px; }
.totales-final dd { font-size: 21px; font-weight: 600; color: var(--acento-fuerte); letter-spacing: -.02em; }
.leyenda {
  grid-column: 1 / -1; margin: 2px 0 0;
  font-size: 10.5px; letter-spacing: .04em; color: var(--apagado);
}

/* ── Acciones ───────────────────────────────────────────────────────── */
.acciones { display: flex; gap: 10px; align-items: stretch; padding-top: 20px; }
.boton {
  cursor: pointer; flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 20px; border: 0; border-radius: 9px;
  background: var(--acento); color: #17130F;
  font: 600 14.5px var(--cuerpo); letter-spacing: -.005em;
  transition: filter .15s, transform .1s;
}
.boton:hover { filter: brightness(1.08); }
.boton:active { transform: translateY(1px); }
.boton[disabled] { opacity: .55; cursor: progress; }
/* Un boton que se lleva plata anotada no puede verse igual que Guardar. */
.boton-peligro { background: var(--alerta); color: #FFF; }
.boton-nota {
  font-family: var(--dato); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; opacity: .62;
}
.boton-fantasma {
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 18px; border-radius: 9px;
  background: transparent; border: 1px solid var(--linea);
  color: var(--tenue); font: 500 13.5px var(--cuerpo); text-decoration: none;
}
.boton-fantasma:hover { border-color: var(--acento-fuerte); color: var(--texto); }

.aviso { margin: 12px 0 0; min-height: 18px; font-size: 13px; color: var(--tenue); }
.aviso[data-tono="error"] { color: var(--alerta); }
.aviso[data-tono="ok"] { color: var(--hoja); }

/* ── La hoja ────────────────────────────────────────────────────────── */
.hoja-zona { position: sticky; top: 84px; display: grid; gap: 10px; }
.hoja-marco { position: relative; container-type: inline-size; }
.hoja {
  position: relative;
  aspect-ratio: 1 / 1.4142;
  background: var(--papel);
  color: var(--tinta);
  border-radius: 3px;
  overflow: hidden;
  font-size: 1.62cqi;
  line-height: 1.35;
  box-shadow: var(--sombra-hoja);
  transition: opacity .28s ease, transform .28s ease;
}
.hoja-entrando { opacity: 0; transform: translateY(10px) scale(.995); }
.hoja-pie { margin: 0; font-size: 11px; color: var(--apagado); line-height: 1.5; }
.hoja-pie code { font-family: var(--dato); font-size: 10.5px; color: var(--tenue); }

/* Interior del documento — todo en em sobre el tamaño del contenedor */
.h-banda { height: .9em; background: var(--acento-tinta); }
.h-cuerpo { padding: 2.4em 2.6em 5em; }
.h-pie {
  position: absolute; left: 2.6em; right: 2.6em; bottom: 1.8em;
  padding-top: .7em; border-top: 1px solid var(--papel-linea);
  font-size: .82em; color: #9A928A; text-align: center; letter-spacing: .02em;
}
.h-membrete { display: flex; justify-content: space-between; align-items: flex-start; gap: 2em; }
.h-marca { font: 800 2.6em/1 var(--display); letter-spacing: -.035em; color: var(--tinta); }
.h-lema {
  font-family: var(--dato); font-size: .82em; letter-spacing: .12em;
  text-transform: uppercase; color: var(--acento-tinta); margin: .5em 0 0;
}
/* El logo real sobre el papel: el lema ya viene dentro de la imagen. */
.h-logo { width: 17em; height: auto; display: block; }
.h-emisor { margin: 1.1em 0 0; font-size: .95em; color: #6B635C; line-height: 1.5; }
.h-caja {
  border: 1.5px solid var(--acento-tinta); border-radius: .3em;
  padding: .9em 1.1em; text-align: center; min-width: 16.4em; flex: none;
}
.h-ruc { font-weight: 600; font-size: 1em; letter-spacing: .02em; }
.h-tipo {
  font-weight: 600; font-size: 1.05em; color: var(--acento-tinta);
  margin: .5em 0 .55em; letter-spacing: .03em;
}
.h-numero {
  font-family: var(--dato); font-weight: 600; font-size: 1.55em;
  border-top: 1px solid var(--papel-linea); padding-top: .35em; letter-spacing: -.02em;
  white-space: nowrap;
}
.h-fecha {
  margin: .7em 0 0; font-size: .88em; color: #9A928A; text-align: center;
  letter-spacing: .04em;
}
.h-vencimiento { margin-top: .2em; color: var(--acento-tinta); font-weight: 600; }

.h-bloque { margin-top: 1.9em; }
.h-bloque-titulo {
  font-family: var(--dato); font-size: .82em; letter-spacing: .16em;
  text-transform: uppercase; color: #9A928A;
  padding-bottom: .45em; border-bottom: 1px solid var(--papel-linea);
}
.h-rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9em 1.6em; margin-top: .9em; }
.h-rejilla-1 { grid-template-columns: 1fr; }
.h-dato-et { font-size: .82em; letter-spacing: .06em; text-transform: uppercase; color: #9A928A; }
.h-dato-v { font-weight: 600; font-size: 1.05em; margin-top: .12em; word-break: break-word; }
.h-dato-v.mono { font-family: var(--dato); font-weight: 500; }

.h-tabla { width: 100%; border-collapse: collapse; margin-top: 1.9em; }
.h-tabla thead th {
  background: var(--acento-tinta); color: #fff;
  font-family: var(--dato); font-weight: 500; font-size: .8em;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .75em .8em; text-align: left;
}
.h-tabla tbody td {
  padding: .68em .8em; font-size: .98em;
  border-bottom: 1px solid #EFECE6; vertical-align: top;
}
.h-tabla tbody tr:nth-child(even) td { background: #FAF8F4; }
.h-num { text-align: right; font-family: var(--dato); font-variant-numeric: tabular-nums; white-space: nowrap; }
.h-centro { text-align: center; font-family: var(--dato); font-size: .9em; }

.h-cierre { display: flex; justify-content: space-between; gap: 2em; margin-top: 1.6em; align-items: flex-start; }
.h-letras { font-weight: 600; font-size: .92em; max-width: 22em; letter-spacing: .01em; }
.h-totales { min-width: 15em; flex: none; }
.h-totales-fila { display: flex; justify-content: space-between; gap: 1.5em; padding: .3em 0; font-size: .98em; color: #6B635C; }
.h-totales-fila .h-num { color: var(--tinta); }
.h-total-final {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5em;
  background: var(--acento-tinta); color: #fff;
  padding: .65em .9em; margin-top: .5em; border-radius: .2em;
}
.h-total-final span:first-child { font-weight: 600; font-size: .95em; letter-spacing: .04em; }
.h-total-final .h-num { color: #fff; font-weight: 600; font-size: 1.35em; }

.h-firmas { display: flex; justify-content: space-between; gap: 3em; margin-top: 3.4em; }
.h-firma { flex: 1; border-top: 1px solid #C9C2BA; padding-top: .5em; text-align: center; font-size: .85em; color: #9A928A; }
.h-nota { margin-top: 1.4em; font-size: .88em; color: #6B635C; line-height: 1.5; }

/* Sello de registrado */
.sello {
  position: absolute; top: 26%; left: 50%;
  transform: translate(-50%, -50%) rotate(-11deg) scale(1.5);
  padding: .5rem 1.4rem;
  border: 3px double var(--acento-tinta); border-radius: 6px;
  color: var(--acento-tinta);
  font: 800 clamp(18px, 3.4cqi, 30px)/1 var(--display);
  letter-spacing: .12em; text-transform: uppercase;
  opacity: 0; pointer-events: none;
}
.sello-visible { animation: sellar 1.5s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes sellar {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(-11deg) scale(1.6); }
  22%  { opacity: .95; transform: translate(-50%, -50%) rotate(-11deg) scale(1); }
  75%  { opacity: .95; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(-11deg) scale(1); }
}

/* ── Registro ───────────────────────────────────────────────────────── */
.registro {
  max-width: 1580px; margin: 0 auto; padding: 0 22px 60px;
}
.registro-barra {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 0 14px; border-top: 1px solid var(--linea-suave);
}
.registro-titulo {
  margin: 0; font: 800 17px/1 var(--display); letter-spacing: -.02em;
}
.filtros { display: flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; }
.filtro {
  cursor: pointer; padding: 6px 12px; border-radius: 999px;
  background: transparent; border: 1px solid transparent;
  color: var(--apagado); font: 500 12.5px var(--cuerpo);
}
.filtro:hover { color: var(--texto); }
.filtro.activo { background: var(--taller); border-color: var(--linea); color: var(--texto); }
#buscar {
  flex: 1; min-width: 200px; max-width: 340px; margin-left: auto;
  padding: 8px 12px; border-radius: 999px;
  background: var(--taller); border: 1px solid var(--linea);
  color: var(--texto); font: 400 13px var(--cuerpo);
}
#buscar:focus { border-color: var(--acento-fuerte); outline: none; }

.tabla-envoltura {
  background: var(--taller); border: 1px solid var(--linea-suave);
  border-radius: var(--r); overflow: hidden;
}
.tabla { width: 100%; border-collapse: collapse; }
.tabla thead th {
  padding: 10px 14px; text-align: left;
  font-family: var(--dato); font-size: 9.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--apagado);
  background: var(--hueco); border-bottom: 1px solid var(--linea-suave);
}
.tabla tbody td { padding: 11px 14px; border-bottom: 1px solid var(--linea-suave); font-size: 13.5px; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover td { background: color-mix(in srgb, var(--taller-alto) 60%, transparent); }
.der, .tabla .der { text-align: right; }

.num-doc { display: inline-flex; align-items: center; gap: 8px; font-family: var(--dato); font-size: 13px; }
.marca-tipo { width: 3px; height: 15px; border-radius: 2px; flex: none; }
.marca-cotizacion { background: var(--cera); }
.marca-factura { background: var(--hoja); }
.marca-guia { background: var(--hive); }
.celda-cliente { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Sin esto, un nombre largo ("Mauricio Fabián Vallejos Cercado") se envolvía
   en tres líneas y estiraba cada fila; ahora se corta con puntos suspensivos
   y el nombre completo queda en el title al pasar el mouse. */
.celda-quien { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.estado {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--dato); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tenue);
}
.enlace {
  color: var(--tenue); text-decoration: none; font: 400 12.5px var(--cuerpo);
  border: 0; border-bottom: 1px solid transparent; padding: 0 0 1px;
  background: none; cursor: pointer;
}
.enlace:hover { color: var(--acento-fuerte); border-bottom-color: var(--acento-fuerte); }
.enlace-peligro:hover { color: var(--alerta); border-bottom-color: var(--alerta); }
.acciones-fila { display: flex; gap: 12px; justify-content: flex-end; }
.vacio { margin: 0; padding: 34px 16px; text-align: center; color: var(--apagado); font-size: 13.5px; }

/* ── Cajón de ajustes ───────────────────────────────────────────────── */
.cortina {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(6, 11, 8, .62); backdrop-filter: blur(2px);
}
.cajon {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 51;
  width: min(460px, 100vw);
  background: var(--taller); border-left: 1px solid var(--linea);
  overflow-y: auto;
  animation: entrar-cajon .22s ease-out;
}
@keyframes entrar-cajon { from { transform: translateX(24px); opacity: 0; } }
.cajon-barra {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; background: var(--taller);
  border-bottom: 1px solid var(--linea-suave);
}
.cajon-barra h2 { margin: 0; font: 800 16px/1 var(--display); letter-spacing: -.02em; }
.cerrar {
  cursor: pointer; width: 30px; height: 30px; border-radius: 8px;
  background: transparent; border: 1px solid var(--linea);
  color: var(--tenue); font-size: 18px; line-height: 1;
}
.cerrar:hover { border-color: var(--acento-fuerte); color: var(--texto); }
.cajon-bloque { padding: 20px; border-bottom: 1px solid var(--linea-suave); }
.cajon-bloque h3 {
  margin: 0 0 10px; font-family: var(--dato); font-size: 10px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--apagado);
}
.cajon-nota { margin: 0 0 12px; font-size: 13.5px; color: var(--texto); }
.cajon-ayuda { margin: 12px 0 0; font-size: 12px; line-height: 1.6; color: var(--apagado); }
.cajon-ayuda code, .cajon-nota code { font-family: var(--dato); font-size: 11.5px; color: var(--tenue); }
.cajon-acciones { display: flex; gap: 8px; margin-top: 12px; grid-column: 1 / -1; }
.campos-cajon { gap: 12px; }

/* ── Pastillas de estado ────────────────────────────────────────────── */
.pastilla {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-family: var(--dato); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap;
  border: 1px solid currentColor; color: var(--apagado);
}
.p-emitido { color: var(--tenue); }
.p-enviado, .p-preparado { color: var(--cera); }
.p-aceptado { color: var(--hoja); }
.p-rechazado, .p-error { color: var(--alerta); }
.p-facturado { color: var(--miel-honda); }

/* ── CRM ────────────────────────────────────────────────────────────── */
.crm { max-width: 1580px; margin: 0 auto; padding: 0 22px 60px; }
.crm-nota { margin: 0 0 0 4px; font-size: 12.5px; color: var(--apagado); }

/* ── Clientes · Lista (la vista por defecto) ─────────────────────────
   Con 3 clientes de prueba el embudo se veía bien; con 37 reales, la
   columna Prospecto no tiene fondo. La tabla se busca y se ordena en vez
   de scrollearse, y el embudo queda como vista aparte para quien de
   verdad quiere arrastrar tarjetas entre 2 o 3 clientes activos. */
.barra-filtro { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 14px; }
.fchip {
  cursor: pointer; font-size: 11.5px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--linea); background: var(--taller); color: var(--tenue);
  display: inline-flex; align-items: center; gap: 5px;
}
.fchip:hover { border-color: var(--linea-fuerte); color: var(--texto); }
.fchip.on { background: var(--cera); border-color: var(--cera); color: #17130F; font-weight: 700; }
.fchip .cnt { font-family: var(--dato); opacity: .75; }

/* Encabezados ordenables: la flecha solo se marca en la columna activa. */
#tabla-clientes th[data-orden] { cursor: pointer; user-select: none; }
#tabla-clientes th[data-orden]:hover { color: var(--texto); }
#tabla-clientes th[data-orden]::after { content: ""; margin-left: 4px; opacity: .35; }
#tabla-clientes th[data-orden].orden-activo::after {
  opacity: 1; color: var(--acento-fuerte);
  content: attr(data-dir);
}

.pill-estado {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--tono); color: var(--tono);
}
.apagado-fila { color: var(--apagado); font-size: 12px; }
.venta-vencida-txt, .agenda-vencida-txt { color: var(--alerta); }
#buscar-cliente {
  flex: 1; min-width: 200px; max-width: 320px; margin-left: auto;
  padding: 8px 12px; border-radius: 999px;
  background: var(--taller); border: 1px solid var(--linea);
  color: var(--texto); font: 400 13px var(--cuerpo);
}
#buscar-cliente:focus { border-color: var(--acento-fuerte); outline: none; }

.agenda {
  background: var(--taller); border: 1px solid var(--linea-suave);
  border-radius: var(--r); padding: 14px 16px; margin-bottom: 18px;
}
.agenda-titulo {
  margin: 0 0 10px; font-family: var(--dato); font-size: 10px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--apagado);
}
.agenda-lista { display: grid; gap: 4px; }
.agenda-item {
  cursor: pointer; display: grid; grid-template-columns: 82px minmax(0, 220px) 1fr;
  gap: 14px; align-items: baseline; text-align: left;
  padding: 7px 10px; border-radius: 8px;
  background: transparent; border: 1px solid transparent;
  color: var(--texto); font: 400 13px var(--cuerpo);
}
.agenda-item:hover { background: var(--hueco); border-color: var(--linea-suave); }
.agenda-fecha { font-size: 11.5px; color: var(--tenue); }
.agenda-vencida .agenda-fecha { color: var(--alerta); }
.agenda-cliente { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-accion { color: var(--apagado); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* El embudo: seis columnas que se encienden con el color del documento
   que las hace avanzar: la miel al cotizar y el verde al cerrar. */
.embudo {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(208px, 1fr);
  gap: 10px; overflow-x: auto; padding-bottom: 8px; align-items: start;
}
.columna {
  --tono: var(--apagado);
  background: var(--taller); border: 1px solid var(--linea-suave);
  border-top: 2px solid var(--tono); border-radius: 10px;
  padding: 12px; min-height: 140px;
  transition: background .15s, border-color .15s;
}
.e-prospecto   { --tono: var(--tono-frio); }
.e-contactado  { --tono: var(--tenue); }
.e-cotizada    { --tono: var(--cera); }
.e-negociacion { --tono: var(--miel-honda); }
.e-activo      { --tono: var(--hoja); }
.e-inactivo    { --tono: var(--alerta); }
.columna-lista { background: var(--taller-alto); border-color: var(--tono); }

.columna-barra { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.columna-nombre { font-size: 12.5px; font-weight: 600; color: var(--texto); }
.columna-cuenta { font-size: 12px; color: var(--tono); }
.columna-valor { margin: 2px 0 12px; font-size: 11px; color: var(--apagado); }
.columna-cartas { display: grid; gap: 8px; }
.columna-vacia { margin: 0; padding: 14px 4px; font-size: 12px; color: var(--apagado); text-align: center; }

.carta {
  cursor: pointer; padding: 11px 12px; border-radius: 9px;
  background: var(--hueco); border: 1px solid var(--linea-suave);
  transition: border-color .15s, transform .1s;
}
.carta:hover { border-color: var(--tono); }
.carta:active { transform: scale(.99); }
.carta-moviendo { opacity: .4; }
.carta-nombre { margin: 0 0 3px; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.carta-contacto { margin: 0 0 8px; font-size: 12px; color: var(--tenue); }
.carta-marcas { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.marca-dato {
  padding: 2px 7px; border-radius: 5px; background: var(--taller-alto);
  font-size: 10.5px; color: var(--tenue);
}
.carta-pie {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: var(--texto);
  padding-top: 8px; border-top: 1px solid var(--linea-suave);
}
.carta-docs { color: var(--apagado); font-size: 11px; }
.carta-estimado { margin: 4px 0 0; font-size: 10.5px; color: var(--apagado); }
.carta-accion {
  margin: 8px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--tono);
}
.carta-accion-vencida { color: var(--alerta); }

/* ── Cajón de envío y ficha de cliente ──────────────────────────────── */
.cajon-ancho { width: min(620px, 100vw); }

.envio-resumen {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--linea-suave);
}
.envio-numero { font-size: 15px; font-weight: 600; color: var(--acento-fuerte); }
.envio-cliente { margin-top: 3px; font-size: 13px; color: var(--tenue); }
.envio-total { font-size: 17px; font-weight: 600; }

.solo-lectura { color: var(--tenue) !important; cursor: default; }
.cajon textarea {
  width: 100%; padding: 9px 11px; border-radius: 8px;
  background: var(--hueco); border: 1px solid var(--linea);
  color: var(--texto); font: 400 13.5px/1.5 var(--cuerpo); resize: vertical;
}
.cajon textarea:focus, .cajon select:focus { border-color: var(--acento-fuerte); outline: none; }
.cajon select {
  width: 100%; padding: 9px 11px; border-radius: 8px; cursor: pointer;
  background: var(--hueco); border: 1px solid var(--linea);
  color: var(--texto); font: 400 14px var(--cuerpo);
}
.cajon select option { background: var(--taller); }

.previa-whatsapp {
  margin: 0; padding: 11px 13px; border-radius: 8px;
  background: var(--hueco); border: 1px solid var(--linea-suave);
  font: 400 12px/1.6 var(--cuerpo); color: var(--tenue);
  white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow-y: auto;
}

.historial { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.historial li {
  display: grid; grid-template-columns: 70px minmax(0, 1fr) 70px auto;
  gap: 10px; align-items: baseline; font-size: 12.5px; color: var(--tenue);
}
.historial-canal { color: var(--texto); }
.historial-fecha { font-size: 11px; color: var(--apagado); }

.lista-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.doc-fila {
  display: grid; grid-template-columns: 3px minmax(0, 120px) 70px 1fr auto;
  gap: 10px; align-items: center; font-size: 13px;
}
.doc-fecha, .doc-total { color: var(--tenue); font-size: 12px; }

/* Un informe emitido trae mas cosas que un comprobante: su tipo, si es parcial,
   el monto valorizado, el HES y cuatro acciones. En una linea no entran, asi
   que va en dos: arriba lo que lo identifica, abajo lo que se puede hacer. */
.doc-informe {
  display: grid; gap: 7px; padding: 11px 12px; border-radius: 9px;
  background: var(--hueco); border: 1px solid var(--linea-suave);
}
.doc-informe-cabeza {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px;
}
.doc-informe-acciones { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.doc-total { text-align: right; }

.bitacora { list-style: none; margin: 0; padding: 0 0 0 16px; position: relative; }
.bitacora::before {
  content: ''; position: absolute; left: 3px; top: 6px; bottom: 6px;
  width: 1px; background: var(--linea);
}
.hito { position: relative; padding: 0 0 16px; }
.hito::before {
  content: ''; position: absolute; left: -16px; top: 5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--acento); box-shadow: 0 0 0 3px var(--taller);
}
.hito-auto::before { background: var(--apagado); }
.hito-cabeza { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.hito-tipo { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tenue); }
.hito-fecha { font-size: 11px; color: var(--apagado); }
.hito-resumen { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; }
.hito-detalle { margin: 2px 0 0; font-size: 12px; color: var(--apagado); line-height: 1.5; }

.sufijo { color: var(--apagado); font-size: 11.5px; }
.celda-fecha { font-size: 12.5px; }

/* ── Semáforo ───────────────────────────────────────────────────────── */
.punto-verde { background: var(--hoja); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hoja) 16%, transparent); }
.punto-ambar { background: var(--cera); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cera) 16%, transparent); }
.punto-rojo  { background: var(--alerta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--alerta) 16%, transparent); }

/* ── Colmenas: apicultores y apiarios ───────────────────────────────── */
.colmenar { max-width: 1580px; margin: 0 auto; padding: 0 22px 60px; }
#buscar-colmenar {
  flex: 1; min-width: 200px; max-width: 320px; margin-left: auto;
  padding: 8px 12px; border-radius: 999px;
  background: var(--taller); border: 1px solid var(--linea);
  color: var(--texto); font: 400 13px var(--cuerpo);
}
#buscar-colmenar:focus { border-color: var(--acento-fuerte); outline: none; }

/* La barra del balance: lo comprometido contra lo que hay.
   Es el número que decide si BeeAgro puede cerrar el próximo fundo. */
.balance {
  background: var(--taller); border: 1px solid var(--linea-suave);
  border-radius: var(--r); padding: 16px 18px 14px; margin-bottom: 18px;
}
.balance-cifras { display: flex; flex-wrap: wrap; gap: 28px; margin-bottom: 16px; }
.balance-dato { display: flex; flex-direction: column; gap: 2px; }
.balance-et {
  font-family: var(--dato); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--apagado);
}
.balance-n { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.balance-curso { color: var(--cera); }
.balance-saldo { margin-left: auto; text-align: right; }
.balance-saldo .balance-n { color: var(--hoja); }
.balance-falta .balance-n { color: var(--alerta); }

.balance-barra { position: relative; padding-bottom: 20px; }
.balance-pista {
  display: flex; height: 12px; border-radius: 6px; overflow: hidden;
  background: var(--hueco); border: 1px solid var(--linea-suave);
}
.balance-oferta { background: var(--medidor-lleno); }
.balance-curso-barra {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--cera) 70%, transparent) 0 5px,
    transparent 5px 10px), color-mix(in srgb, var(--cera) 22%, transparent);
}
.balance-marca {
  position: absolute; top: -3px; bottom: 4px; width: 2px;
  background: var(--texto); transform: translateX(-1px);
}
.balance-marca span {
  position: absolute; top: 100%; left: 0; transform: translateX(-50%);
  font-family: var(--dato); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tenue); white-space: nowrap;
}
.balance-nota { margin: 6px 0 0; font-size: 12.5px; color: var(--apagado); }

.enlace-fuerte { color: var(--texto); font-size: 13.5px; font-weight: 500; }
.enlace-fuerte:hover { color: var(--acento-fuerte); }
.celda-accion { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--tenue); }

.ubicacion { display: flex; flex-direction: column; gap: 5px; }
.ubicacion-fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ubicacion-fila input {
  width: 118px; padding: 9px 11px; border-radius: 8px;
  background: var(--hueco); border: 1px solid var(--linea);
  color: var(--texto); font: 400 13px var(--dato);
}
.ubicacion-fila input:focus { border-color: var(--acento-fuerte); outline: none; }

/* ── Mapa ───────────────────────────────────────────────────────────── */
.mapa-vista { max-width: 1580px; margin: 0 auto; padding: 0 22px 24px; }
.mapa-barra {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 0; border-top: 1px solid var(--linea-suave);
}
.capas { display: flex; gap: 6px; }
.capa {
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px;
  background: transparent; border: 1px solid var(--linea);
  color: var(--apagado); font: 500 12.5px var(--cuerpo);
}
.capa.activo { background: var(--taller); color: var(--texto); }
.capa:hover { border-color: var(--acento-fuerte); }
.capa-n { font-size: 11px; color: var(--apagado); }
.capa.activo .capa-n { color: var(--acento-fuerte); }

/* Punteo rápido: los mismos botones de "capa", pero para crear, no filtrar.
   Ocupan toda la fila propia para no mezclarse con el filtro de arriba. */
.agregar-mapa {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  width: 100%; padding-top: 2px;
}
.agregar-etiqueta { font-size: 12px; color: var(--apagado); margin-right: 2px; }
/* Clase propia, no ".capa": esa la usa el filtro de capas del mapa y su
   propio manejador de clics — compartirla hacía que un clic acá le llegara
   también a ese otro handler y le apagara la capa a ciegas. */
.boton-punteo {
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px;
  background: transparent; border: 1px solid var(--linea);
  color: var(--apagado); font: 500 12.5px var(--cuerpo);
}
.boton-punteo:hover { border-color: var(--acento-fuerte); }
.boton-punteo.activo {
  background: var(--cera); border-color: var(--cera); color: #17130F; font-weight: 600;
}

/* Cada capa tiene su forma, para que el color quede libre para el semáforo:
   el cliente es un círculo, el apicultor un panal, el apiario un terreno. */
.forma { width: 11px; height: 11px; background: currentColor; flex: none; display: inline-block; }
.forma-cliente { border-radius: 50%; }
.forma-apicultor { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.forma-apiario { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
/* El fundo es la parcela donde de verdad se trabaja: un cuadrado de terreno.
   Tiene que distinguirse a 16 px del hexágono del apicultor. */
.forma-sede { border-radius: 2px; }

.leyenda { display: flex; gap: 14px; flex-wrap: wrap; }
.sem { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--apagado); }
.sem::before { content: ''; width: 9px; height: 9px; border-radius: 50%; }
.sem-verde::before { background: var(--hoja); }
.sem-ambar::before { background: var(--cera); }
.sem-rojo::before { background: var(--alerta); }
.mapa-nota { margin: 0 0 0 auto; font-size: 12.5px; color: var(--tenue); }

.mapa-lienzo { position: relative; }
#mapa {
  height: min(70vh, 720px); min-height: 380px;
  border-radius: var(--r); border: 1px solid var(--linea-suave);
  background: var(--hueco); z-index: 1;
}
#mapa.mapa-ubicando { cursor: crosshair; border-color: var(--acento-fuerte); }
.ubicando {
  position: absolute; z-index: 500; top: 14px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--taller) 94%, transparent);
  border: 1px solid var(--acento); backdrop-filter: blur(6px);
  font-size: 13px; color: var(--texto); box-shadow: 0 10px 30px -12px rgba(0,0,0,.9);
}

/* Sin ubicar: lo que ya existe en la base pero nadie ha puntedo todavía. */
.sin-ubicar { margin-top: 16px; }
.sin-ubicar-lista {
  display: flex; gap: 8px; flex-wrap: wrap;
  max-height: 220px; overflow-y: auto; padding: 2px;
}
.tarjeta-sin-ubicar {
  cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 10px;
  background: var(--taller); border: 1px solid var(--linea-suave);
  color: var(--texto); text-align: left; min-width: 170px; max-width: 240px;
}
.tarjeta-sin-ubicar:hover { border-color: var(--acento-fuerte); }
.tsu-nombre {
  font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; display: block;
}
.tsu-sub {
  font-size: 11px; color: var(--apagado); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; display: block;
}

.pin-envoltura { background: none; border: 0; }
.pin {
  width: 16px; height: 16px; display: block;
  background: var(--sem, var(--tenue));
  box-shadow: 0 0 0 2px var(--anillo-pin), 0 0 10px -2px var(--sem, transparent);
}
.pin.forma-cliente { border-radius: 50%; }

/* Globo de Leaflet, vestido como el resto del taller */
.globo-envoltura .leaflet-popup-content-wrapper {
  background: var(--taller); color: var(--texto);
  border: 1px solid var(--linea); border-radius: 10px;
  box-shadow: 0 20px 44px -20px rgba(0,0,0,.95);
}
.globo-envoltura .leaflet-popup-content { margin: 12px 14px; min-width: 230px; }
.globo-envoltura .leaflet-popup-tip { background: var(--taller); border: 1px solid var(--linea); }
.globo-envoltura a.leaflet-popup-close-button { color: var(--apagado); }
.globo-capa {
  font-family: var(--dato); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--acento-fuerte);
}
.globo h4 { margin: 3px 0 9px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.globo-fila {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 3px 0; font-size: 12.5px; color: var(--apagado);
}
.globo-fila b { color: var(--texto); font-weight: 500; text-align: right; }
.globo-acciones { display: flex; gap: 6px; margin-top: 10px; }
.globo-btn {
  cursor: pointer; flex: 1; padding: 7px 10px;
  border-radius: 7px; border: 1px solid var(--linea);
  background: var(--hueco); color: var(--texto); font: 500 12.5px var(--cuerpo);
}
.globo-btn:hover { border-color: var(--acento-fuerte); color: var(--acento-fuerte); }
.globo-btn-quitar:hover { border-color: var(--alerta); color: var(--alerta); }

.leaflet-control-attribution {
  background: color-mix(in srgb, var(--noche) 78%, transparent) !important;
  color: var(--apagado) !important; font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--tenue) !important; }
.leaflet-bar a {
  background: var(--taller) !important; color: var(--texto) !important;
  border-color: var(--linea) !important;
}
.leaflet-bar a:hover { background: var(--taller-alto) !important; }

/* ── Calendario ─────────────────────────────────────────────────────── */
.mes-control { display: flex; align-items: center; gap: 6px; }
.mes-nombre {
  min-width: 148px; text-align: center; font-weight: 600; font-size: 14px;
  text-transform: capitalize;
}
.leyenda-cal {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 12px; font-size: 12px; color: var(--tenue);
}
.leyenda-personas { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.leyenda-persona { display: inline-flex; align-items: center; gap: 5px; }
.leyenda-persona i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; flex: none; }
.leyenda-persona-vacia { color: var(--apagado); font-style: italic; }
.cal-nota { margin-left: auto; color: var(--apagado); }

.cal-cabecera, .cal-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-cabecera {
  margin-bottom: 6px;
  font-family: var(--dato); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--apagado); text-align: center;
}
.cal-dia {
  min-height: 104px; padding: 6px 7px 8px; border-radius: 9px;
  border: 1px solid var(--linea-suave); background: var(--taller);
  display: flex; flex-direction: column; gap: 4px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.cal-dia:hover { border-color: var(--acento-fuerte); }
.cal-dia-fuera { opacity: .38; }
.cal-dia-hoy { border-color: var(--acento-fuerte); background: color-mix(in srgb, var(--acento-fuerte) 7%, var(--taller)); }
.cal-dia-n { font-family: var(--dato); font-size: 11.5px; color: var(--tenue); }
.cal-dia-hoy .cal-dia-n { color: var(--acento-fuerte); font-weight: 700; }

.cal-ev {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 3px 6px; border-radius: 5px; border: 0; border-left: 3px solid var(--tenue);
  background: var(--hueco); color: var(--texto);
  font: 500 11px/1.3 var(--cuerpo);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-ev:hover { background: var(--taller-alto); }
.cal-ev-hecho { opacity: .5; text-decoration: line-through; }
.cal-ev-hora { font-family: var(--dato); font-size: 10px; color: var(--tenue); margin-right: 4px; }
.cal-ev-candado { font-size: 9px; margin-right: 2px; }
.cal-mas { font-size: 10.5px; color: var(--apagado); padding-left: 6px; }

.cal-lista { display: flex; flex-direction: column; gap: 3px; }
.cal-lista-dia {
  margin: 14px 0 4px; font-family: var(--dato); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--apagado);
}
.cal-fila {
  display: grid; grid-template-columns: 84px auto minmax(0, 1fr) 190px 96px;
  gap: 12px; align-items: center; width: 100%; text-align: left; cursor: pointer;
  padding: 9px 10px; border-radius: 8px; border: 1px solid transparent;
  background: transparent; color: var(--texto); font: 400 13px var(--cuerpo);
  border-left: 3px solid var(--tenue);
}
/* La pastilla se queda del ancho de su texto en vez de estirarse con la celda. */
.cal-fila .pastilla { justify-self: start; }
.cal-fila:hover { background: var(--taller); border-color: var(--linea-suave); }
.cal-fila-sub { color: var(--tenue); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 900px) {
  /* En un celular una rejilla de 7 columnas no se lee: se muestra la lista
     siempre, así que el botón "Mes" —que ahí no hace nada— se esconde para
     no sugerir una vista que no existe en esta pantalla. */
  .cal-mes { display: none; }
  .cal-lista { display: flex !important; }
  .filtros[data-grupo="calendario"] { display: none; }
  .cal-fila { grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; }
  .cal-fila > :nth-child(n+3) { grid-column: 2; }
}

/* ── Libros: egresos y almacén ──────────────────────────────────────── */
.libro { max-width: 1580px; margin: 0 auto; padding: 0 22px 60px; }
#buscar-egreso, #buscar-almacen {
  flex: 1; min-width: 180px; max-width: 300px; margin-left: auto;
  padding: 8px 12px; border-radius: 999px;
  background: var(--taller); border: 1px solid var(--linea);
  color: var(--texto); font: 400 13px var(--cuerpo);
}
#buscar-egreso:focus, #buscar-almacen:focus { border-color: var(--acento-fuerte); outline: none; }

.rango { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--apagado); }
.rango input {
  padding: 7px 10px; border-radius: 8px;
  background: var(--taller); border: 1px solid var(--linea);
  color: var(--texto); font: 400 12.5px var(--dato);
}
.rango input:focus { border-color: var(--acento-fuerte); outline: none; }

/* Tarjetas de cifra: la misma pieza para egresos, almacén y campañas */
.tarjetas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px; margin-bottom: 16px;
}
.tarjeta {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 15px; border-radius: 10px;
  background: var(--taller); border: 1px solid var(--linea-suave);
}
.tarjeta-et {
  font-family: var(--dato); font-size: 9.5px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--apagado);
}
.tarjeta-n { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.tarjeta-nota { font-size: 11px; color: var(--apagado); }
.tarjeta-acento { border-color: color-mix(in srgb, var(--acento) 45%, transparent); }
.tarjeta-acento .tarjeta-n { color: var(--acento-fuerte); }
.tarjeta-alerta { border-color: color-mix(in srgb, var(--alerta) 50%, transparent); }
.tarjeta-alerta .tarjeta-n { color: var(--alerta); }

/* Lo proyectado no es plata que exista. Va en gris y con borde punteado para
   que nunca se confunda con lo facturado o lo cobrado, que van al lado. */
.tarjeta-proyeccion { border-style: dashed; background: transparent; }
.tarjeta-proyeccion .tarjeta-n,
.tarjeta-proyeccion .tarjeta-et { color: var(--apagado); }
.tarjeta-semaforo .semaforo-cuenta { display: flex; gap: 12px; margin-top: 4px; }
.tarjeta-semaforo .sem { font-family: var(--dato); font-size: 15px; color: var(--texto); }

/* Carga rápida: una fila que se llena y se envía sin abrir nada */
.carga {
  display: flex; align-items: flex-end; gap: 10px;
  padding: 14px 16px; margin-bottom: 14px;
  background: var(--taller); border: 1px solid var(--linea-suave); border-radius: var(--r);
}
.carga-campos {
  flex: 1; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.carga-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.carga-campo > span { font-size: 11px; color: var(--tenue); }
.carga-corto { max-width: 160px; }
.carga-ancho { grid-column: span 2; }
.carga-campo input, .carga-campo select {
  width: 100%; padding: 8px 10px; border-radius: 8px;
  background: var(--hueco); border: 1px solid var(--linea);
  color: var(--texto); font: 400 13.5px var(--cuerpo);
}
.carga-campo input.mono { font-family: var(--dato); }
.carga-campo input:focus, .carga-campo select:focus { border-color: var(--acento-fuerte); outline: none; }
.carga-monto { display: flex; gap: 6px; }
.carga-monto select { width: 74px; flex: none; font-size: 12.5px; }
.carga .boton { flex: none; align-self: flex-end; min-width: 130px; }

.alerta-stock {
  padding: 11px 15px; margin-bottom: 14px; border-radius: 10px;
  background: color-mix(in srgb, var(--alerta) 10%, var(--taller));
  border: 1px solid color-mix(in srgb, var(--alerta) 40%, transparent);
  font-size: 13px; color: var(--texto); line-height: 1.6;
}
.celda-alerta { color: var(--alerta); }
.tabla-compacta tbody td, .tabla-compacta thead th { padding: 7px 10px; font-size: 12.5px; }

/* Barra de avance de campaña */
.avance {
  height: 6px; border-radius: 3px; overflow: hidden; min-width: 70px;
  background: var(--hueco); border: 1px solid var(--linea-suave);
}
.avance-barra { height: 100%; background: var(--hoja); }
.avance-grande { height: 10px; border-radius: 5px; margin-top: 12px; }

/* Usuarios */
.lista-usuarios { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.usuario-fila {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px; align-items: center;
  padding-bottom: 8px; border-bottom: 1px solid var(--linea-suave);
}
.usuario-nombre { font-size: 13.5px; font-weight: 500; }
.rol-select {
  padding: 4px 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linea); background: var(--hueco);
  color: var(--texto); font: 500 11.5px var(--cuerpo);
}
.rol-select:hover { border-color: var(--acento-fuerte); }

/* Portón de entrada */
.porton {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 24px;
  background: var(--noche);
}
.porton-caja {
  width: min(400px, 100%); display: grid; gap: 14px;
  /* Columna explícita: sin ella, el `span 2` que heredan los campos del
     formulario abre una segunda columna y la tarjeta se sale en el celular. */
  grid-template-columns: minmax(0, 1fr);
  padding: 30px 28px 26px; border-radius: 14px;
  background: var(--taller); border: 1px solid var(--linea);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.95);
}
.porton-logo { width: 190px; height: auto; margin: 0 auto 4px; display: block; }
.porton-nota { margin: 0; font-size: 13px; line-height: 1.6; color: var(--apagado); text-align: center; }
.porton-caja .campo { grid-column: 1 / -1; }
.porton-caja .boton { margin-top: 4px; }
.porton-caja .aviso { text-align: center; margin: 0; }

/* ── Tablero ────────────────────────────────────────────────────────── */
.tablero { max-width: 1580px; margin: 0 auto; padding: 0 22px 60px; }
#tablero-cuerpo {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 16px; transition: opacity .15s;
}
/* Al recargar se mantiene lo dibujado, atenuado: sin salto de maqueta. */
#tablero-cuerpo.recargando { opacity: .45; }

.bloque-tablero {
  background: var(--taller); border: 1px solid var(--linea-suave);
  border-radius: var(--r); padding: 18px 20px 20px;
}
.bloque-titulo {
  margin: 0 0 14px; font-family: var(--dato); font-size: 10px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--apagado);
}
.bloque-titulo-2 { margin-top: 24px; }
.dos-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

/* La cifra que encabeza el tablero: una sola, en la misma sans de todo. */
.heroe { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; }
.heroe-et {
  font-family: var(--dato); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--apagado);
}
.heroe-n {
  font: 600 clamp(38px, 5vw, 54px)/1 var(--cuerpo);
  letter-spacing: -.035em; color: var(--texto);
}
.heroe-nota { font-size: 13px; color: var(--tenue); }
.heroe-extra { font-size: 13px; color: var(--tenue); margin-top: 2px; }
.heroe-extra b { color: var(--texto); }

/* Cifras grandes con dígitos proporcionales; tabular solo en columnas. */
.cifra { font-family: var(--cuerpo); font-variant-numeric: normal; }
.tarjeta-n.cifra { font-size: 20px; }

.grafico-caja { position: relative; }
.grafico { width: 100%; height: auto; display: block; overflow: visible; }
/* Con pocos meses el gráfico no debe estirarse a lo alto: se limita y centra. */
.grafico-alto { max-height: 300px; }
.grafico .eje {
  font: 400 11px var(--cuerpo); fill: var(--apagado);
  font-variant-numeric: tabular-nums;
}
.grafico .cifra-marca {
  font: 500 11.5px var(--dato); fill: var(--tenue);
  font-variant-numeric: tabular-nums;
}
.grafico .col, .grafico .fila { cursor: default; }
.grafico .col:hover .col-zona, .grafico .fila:hover rect[fill="transparent"] { fill: var(--realce-grafico); }
.grafico .col:focus-visible, .grafico .fila:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.grafico-vacio, .grafico-nota { margin: 8px 0 0; font-size: 12.5px; color: var(--apagado); }
.pie-nota { margin: 14px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--apagado); }

.leyenda-grafico { display: flex; gap: 18px; margin-bottom: 10px; }
.clave { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--tenue); }
.clave i { width: 10px; height: 10px; border-radius: 2px; flex: none; }

/* Medidor de colmenas: la pista es un paso más claro de la misma rampa. */
.medidor { position: relative; padding-bottom: 22px; }
.medidor-pista {
  display: flex; height: 12px; border-radius: 6px; overflow: hidden;
  background: var(--hueco); border: 1px solid var(--linea-suave);
}
/* Dos pasos de la misma rampa: lo confirmado brilla, lo que está en trato no. */
.medidor-lleno { background: var(--medidor-lleno); }
.medidor-curso { background: var(--medidor-curso); }
.medidor-marca {
  position: absolute; top: -3px; bottom: 6px; width: 2px;
  background: var(--texto); transform: translateX(-1px);
}
.medidor-marca span {
  position: absolute; top: 100%; left: 0; transform: translateX(-50%);
  font-family: var(--dato); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tenue); white-space: nowrap;
}

.estados-fila { display: flex; flex-wrap: wrap; gap: 16px; }
.estado-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto); }

.tabla-seccion th {
  padding-top: 16px !important; font-family: var(--dato); font-size: 9.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--acento-fuerte);
  text-align: left; border-bottom: 1px solid var(--linea);
}

.globo-tablero {
  position: fixed; z-index: 60; pointer-events: none;
  display: grid; gap: 3px; padding: 9px 12px; border-radius: 9px;
  background: color-mix(in srgb, var(--taller-alto) 96%, transparent);
  border: 1px solid var(--linea); box-shadow: 0 14px 34px -16px rgba(0,0,0,.95);
  font-size: 12.5px; color: var(--tenue); white-space: nowrap;
}
.globo-tablero b { color: var(--texto); font-weight: 600; }
.globo-tablero span { display: flex; align-items: center; gap: 7px; }
.globo-tablero i { width: 9px; height: 9px; border-radius: 2px; flex: none; }

/* ── Personal de campo ──────────────────────────────────────────────── */

/* El aviso de lo que quedó guardado en el teléfono sin señal. */
.sin-senal {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 11px 15px; margin-bottom: 14px; border-radius: 10px;
  background: color-mix(in srgb, var(--cera) 12%, var(--taller));
  border: 1px solid color-mix(in srgb, var(--cera) 45%, transparent);
  font-size: 13px; color: var(--texto);
}

/* En el celular el formulario del día va en una sola columna, con campos
   grandes: se llena de pie, en el campo, muchas veces con guantes. */
.carga-vertical { flex-direction: column; align-items: stretch; }
.carga-vertical .carga-campos { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.reporte-acciones { display: flex; gap: 10px; margin-top: 12px; }
.reporte-acciones .boton { flex: 1; }
.reporte-acciones .boton-fantasma { flex: none; min-width: 130px; }

#pago-calculado {
  font-weight: 600; font-size: 15px;
  color: var(--acento-fuerte) !important;
  border-style: dashed;
}

@media (max-width: 720px) {
  .carga-vertical .carga-campos { grid-template-columns: 1fr; }

  /* Con una sola columna, "span 2" no ensancha: inventa una segunda columna
     implícita. Los campos anchos se quedaban con casi todo el sitio y los
     normales caían en el sobrante —"Cliente o fundo" terminaba en 77 px, con
     su rótulo partido en tres líneas—. En una columna nadie abarca dos. */
  .carga-vertical .carga-ancho { grid-column: auto; }
  .carga-vertical .carga-corto { max-width: none; }

  /* 16 px es el mínimo para que el navegador del celular no haga zoom solo al
     tocar el campo; con 15 px la pantalla saltaba en cada toque. */
  .carga-vertical .carga-campo input,
  .carga-vertical .carga-campo select { padding: 13px 12px; font-size: 16px; }
  .carga-vertical .carga-campo > span { font-size: 12.5px; }

  .reporte-acciones { flex-direction: column; }
  .reporte-acciones .boton-fantasma { min-width: 0; }
}

/* ── Adaptaciones ───────────────────────────────────────────────────── */
/* A dos columnas, la hoja se queda con 500 px y los campos de la
   izquierda terminan partiendo cada rótulo en tres líneas. Debajo de
   1280 conviene una sola columna: primero se llena, después se mira. */
@media (max-width: 1280px) {
  .taller { grid-template-columns: minmax(0, 1fr); }
  .hoja-zona { position: static; max-width: 620px; }
}
@media (max-width: 940px) {
  /* El riel no cabe permanente en un celular: se vuelve un cajón que se
     abre con el botón de tres líneas, en vez de estirar o scrollear la
     barra de arriba. */
  .app-principal { margin-left: 0; }
  .riel {
    left: -230px; width: 220px; box-shadow: var(--sombra);
    transition: left .18s ease;
  }
  .riel.abierto { left: 0; }
  .cortina-riel.abierta { display: block; }
  .riel-abrir { display: flex; }
  .barra-top-marca { display: flex; }
}

@media (max-width: 720px) {
  .barra-top { padding: 10px 14px; }
  .taller { padding: 16px 14px 30px; gap: 18px; }
  .campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campo { grid-column: span 2; }
  .campo-ancho { grid-column: span 2; }
  .campo-corto { grid-column: span 1; }
  .tipos { grid-template-columns: 1fr; }
  .tipo { flex-direction: row; align-items: baseline; justify-content: space-between; border-right: 0; border-bottom: 1px solid var(--linea-suave); }
  .items-cabecera { display: none; }
  .item, .item-guia, .cultivo-por-meses .item { grid-template-columns: 1fr 1fr 30px; gap: 6px; padding: 10px 0; border-bottom: 1px dashed var(--linea-suave); }
  .item .desc { grid-column: 1 / -1; }
  .item .importe { grid-column: 1 / span 2; }
  .item .meses { grid-column: 1 / span 1; }
  .totales { grid-template-columns: 1fr; }
  .registro, .colmenar, .mapa-vista, .libro, .tablero { padding: 0 14px 40px; }
  .dos-columnas { grid-template-columns: minmax(0, 1fr); }
  .bloque-tablero { padding: 14px 15px 16px; }
  .carga { flex-direction: column; align-items: stretch; }
  .carga-campos { grid-template-columns: 1fr 1fr; }
  .carga-corto { max-width: none; }
  .carga-ancho { grid-column: span 2; }
  #buscar-egreso, #buscar-almacen { margin-left: 0; max-width: none; }
  .rango { width: 100%; }
  .rango input { flex: 1; }
  .balance-cifras { gap: 18px; }
  .balance-saldo { margin-left: 0; text-align: left; }
  .mapa-nota { margin-left: 0; }
  .ubicacion-fila input { width: 100px; }
  .tabla-envoltura { overflow-x: auto; }
  .tabla { min-width: 720px; }
  #buscar { margin-left: 0; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print {
  .riel, .barra-top, .panel, .registro, .cajon, .cortina, .hoja-pie { display: none !important; }
  .app-principal { margin-left: 0; }
  .taller { display: block; padding: 0; }
  .hoja { box-shadow: none; font-size: 10.5pt; }
}

/* ══ Correo ══════════════════════════════════════════════════════════════
   Dos columnas: lo que la plataforma sabe que hay que hacer, y lo que llegó
   por correo. Se lee de un vistazo al empezar el día. */

.bloque-correo { min-width: 0; }

.sub-titulo {
  margin: 0 0 10px;
  font: 600 11px/1 var(--dato);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--apagado);
}

.lista-pendientes, .lista-correos { margin: 0; padding: 0; list-style: none; }

.pendiente {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--taller);
  margin-bottom: 8px;
}

/* El texto ocupa lo que sobra; la cifra y el botón se quedan a la derecha. */
.pendiente-texto { flex: 1; min-width: 0; }
.pendiente-que { display: block; font-size: 13.5px; font-weight: 500; }
.pendiente-quien {
  display: block;
  font-size: 12px;
  color: var(--apagado);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pendiente .cifra, .pendiente .mono { flex: none; font-size: 13px; }
.pendiente .mini { flex: none; }

.pendiente-plata { border-left: 3px solid var(--alerta); }

.correo {
  padding: 12px 14px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--taller);
  margin-bottom: 8px;
}
.correo-nuevo { border-left: 3px solid var(--cera); }

.correo-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.correo-de {
  font-size: 12.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.correo-cab .mini { margin-left: auto; flex: none; }
.correo-asunto { font-size: 13.5px; font-weight: 500; margin-bottom: 4px; }
.correo-resumen {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--apagado);
  /* El resumen es para decidir si vale abrirlo, no para leerlo entero. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rotulo {
  flex: none;
  padding: 2px 7px;
  border-radius: 999px;
  font: 500 10.5px/1.5 var(--dato);
  letter-spacing: .04em;
  border: 1px solid;
}
.rotulo-plata { color: var(--alerta); border-color: color-mix(in oklch, var(--alerta) 40%, transparent); }
.rotulo-urge  { color: var(--cera-texto); border-color: color-mix(in oklch, var(--cera) 50%, transparent); }

.fila-botones { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .dos-columnas { grid-template-columns: minmax(0, 1fr); }
}

/* Exportar: una fila por tabla, con los tres formatos a la derecha. */
.fila-exportar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--linea);
}
.fila-exportar-nombre { flex: 1; min-width: 0; font-size: 13.5px; }
.fila-exportar .mini { flex: none; text-decoration: none; }
.exportar-todo { display: block; margin-top: 16px; text-align: center; text-decoration: none; }

/* Rendiciones de viáticos: una fila por persona. */
.fila-viatico {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--taller);
  margin-bottom: 8px;
}
.fila-viatico .cifra { flex: none; font-size: 13px; }
.fila-viatico .mini { flex: none; text-decoration: none; }
.falta { color: var(--alerta); font-weight: 600; }

@media (max-width: 700px) {
  .fila-viatico, .pendiente { flex-wrap: wrap; }
  .fila-viatico .pendiente-texto, .pendiente .pendiente-texto { flex: 1 0 100%; }
}

/* Importar: el cruce de columnas, una fila por campo. */
.archivo-boton { display: block; margin: 10px 0; text-align: center; cursor: pointer; }
.cruce { margin: 12px 0; }
.cruce-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}
.cruce-fila > span { flex: 0 0 44%; font-size: 12.5px; color: var(--apagado); }
.cruce-fila > select { flex: 1; min-width: 0; }

/* Ventas encontradas en el correo. */
.barra-ventas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
/* El boton se estiraba a todo el ancho: .boton es de ancho completo por defecto. */
.barra-ventas .boton { width: auto; flex: none; }

.venta {
  padding: 12px 14px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--taller);
  margin-bottom: 8px;
}
/* Lo que no está en la plataforma se distingue por la franja, no por el color. */
.venta-nueva { border-left: 3px solid var(--alerta); }
.venta-fecha { font-size: 12px; color: var(--apagado); }
.venta .cifra { margin-left: auto; font-size: 13.5px; }
.venta-pie {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.venta-pie .pendiente-quien { white-space: normal; }
.venta-pie .mini { margin-left: auto; }

/* ── Expediente del servicio ─────────────────────────────────────────
   La ficha de un servicio junta cinco cosas que antes vivían sueltas:
   papeles, proveedores, colmenas, plata y costos. Todo junto en una sola
   columna era ilegible, así que se reparte en pestañas y solo se muestra
   una a la vez. */
.ficha-pestanas {
  display: flex; gap: 4px; flex-wrap: wrap;
  padding: 12px 20px 0; border-bottom: 1px solid var(--linea-suave);
}
.ficha-pestanas .filtro { padding: 7px 13px; }
/* El contador solo aparece cuando hay algo que mirar. */
.pest-cuenta {
  font-family: var(--dato); font-size: 10px; margin-left: 5px;
  padding: 1px 5px; border-radius: 999px;
  background: var(--linea); color: var(--tenue);
}
.filtro.activo .pest-cuenta { background: var(--cera); color: #17130F; }
.pest-cuenta.alerta { background: var(--alerta); color: #fff; }

/* El expediente es una lista de verificación: se lee de un vistazo qué
   papel falta, sin tener que abrir cada uno. */
.expediente { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.exp-fila {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 11px;
  align-items: center; padding: 11px 13px;
  border: 1px solid var(--linea); border-radius: 10px; background: var(--taller);
}
.exp-fila.exp-falta { border-style: dashed; }
.exp-marca {
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; flex: none;
}
.exp-ok    { background: color-mix(in srgb, var(--hoja) 22%, transparent); color: var(--hoja); }
.exp-medio { background: color-mix(in srgb, var(--cera) 25%, transparent); color: var(--cera); }
.exp-nada  { background: var(--linea); color: var(--apagado); }
.exp-tipo { font-size: 13.5px; font-weight: 600; }
.exp-detalle { font-size: 12px; color: var(--apagado); margin-top: 2px; }
.exp-acciones { display: flex; gap: 8px; align-items: center; }

/* Cada proveedor que aporta colmenas al fundo, con su plata al costado. */
.acopio-tarjeta {
  border: 1px solid var(--linea); border-radius: 12px;
  padding: 14px; margin-bottom: 10px; background: var(--taller);
}
.acopio-cabeza {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.acopio-nombre { font-size: 14px; font-weight: 700; }
.acopio-cifras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px; margin: 10px 0;
}
.acopio-cifra { display: grid; gap: 2px; }
.acopio-cifra span:first-child {
  font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--apagado);
}
.acopio-cifra span:last-child { font-family: var(--dato); font-size: 14px; }
.cifra-buena { color: var(--hoja); }
.cifra-debe { color: var(--alerta); }

/* Las cuotas al proveedor: lo pactado, lo pagado y lo que falta. */
.cuotas { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px; }
.cuota-fila {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px;
  align-items: center; font-size: 12.5px;
  padding: 7px 10px; border-radius: 8px; background: var(--hueco);
}
.cuota-fila.cuota-vencida { box-shadow: inset 3px 0 0 var(--alerta); }
.cuota-fila.cuota-pagada { opacity: .62; }

/* Los ingresos de colmenas no son un solo día: es una línea de tiempo. */
.mov-colmenas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mov-fila {
  display: grid; grid-template-columns: 74px auto 1fr auto; gap: 11px;
  align-items: center; font-size: 13px; padding: 8px 11px;
  border-radius: 8px; background: var(--taller);
  border-left: 3px solid var(--hoja);
}
.mov-fila.mov-retiro { border-left-color: var(--cera); }
.mov-cantidad { font-family: var(--dato); font-weight: 600; }

/* Operarios del proveedor: verde solo si tiene DNI, SCTR y EMO vigentes. */
.operario-fila {
  display: grid; grid-template-columns: 10px 1fr auto; gap: 11px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px;
  background: var(--taller); margin-bottom: 7px;
}
.op-luz { width: 10px; height: 10px; border-radius: 50%; }
.op-apto { background: var(--hoja); }
.op-trabado { background: var(--alerta); }
.op-docs { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.op-doc {
  font-family: var(--dato); font-size: 10px; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 999px; border: 1px solid currentColor;
}
.doc-vigente   { color: var(--hoja); }
.doc-por-vencer{ color: var(--cera); }
.doc-vencido   { color: var(--alerta); }
.doc-ausente   { color: var(--apagado); border-style: dashed; }

@media (max-width: 620px) {
  .exp-fila { grid-template-columns: 18px 1fr; }
  .exp-acciones { grid-column: 1 / -1; justify-content: flex-end; }
  .mov-fila { grid-template-columns: 68px auto 1fr; }
}

/* ── Rentabilidad por cliente ────────────────────────────────────────
   El margen negativo no puede distinguirse solo por el color: lleva el
   signo delante, así se lee igual en blanco y negro o con daltonismo. */
.margen-negativo { fill: var(--alerta); color: var(--alerta); }
.margen-positivo { fill: var(--hoja); color: var(--hoja); }
.clave-nota { color: var(--apagado); font-style: italic; }
.leyenda-grafico { flex-wrap: wrap; align-items: center; }

/* ── Ficha de cliente: primero el historial ──────────────────────────
   Se entra a la ficha desde "Próximas acciones", o sea a hacer algo con
   el cliente, no a corregirle el RUC. Por eso los datos quedan plegados
   cuando ya están completos y lo primero que se ve es qué pasó y qué
   sigue. Si falta información, el bloque se abre solo. */
.ficha-cabecera {
  padding: 16px 20px; border-bottom: 1px solid var(--linea-suave);
  display: grid; gap: 7px;
}
.ficha-linea { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 13px; }
.ficha-linea .sep { color: var(--linea-fuerte); }
.ficha-dato { color: var(--tenue); }
.ficha-dato a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--linea); }
.ficha-dato a:hover { color: var(--texto); border-bottom-color: var(--acento-fuerte); }

/* La próxima acción es a lo que se vino: se lee antes que nada. */
.proxima-tira {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; border-radius: 9px;
  background: var(--taller); border: 1px solid var(--linea);
  font-size: 13px;
}
.proxima-tira.vencida { border-color: var(--alerta); }
.proxima-tira .et {
  font-family: var(--dato); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--apagado);
}
.proxima-tira .cuando { margin-left: auto; font-family: var(--dato); font-size: 12px; color: var(--tenue); }
.proxima-tira.vencida .cuando { color: var(--alerta); }

/* Bloque plegable para los datos que ya no hay que tocar. */
.plegable { border-bottom: 1px solid var(--linea-suave); }
.plegable > summary {
  list-style: none; cursor: pointer; padding: 14px 20px;
  display: flex; align-items: center; gap: 9px;
  font: 600 12px var(--cuerpo); letter-spacing: .06em; text-transform: uppercase;
  color: var(--apagado);
}
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary:hover { color: var(--texto); }
.plegable > summary::before {
  content: '▸'; font-size: 10px; transition: transform .15s; display: inline-block;
}
.plegable[open] > summary::before { transform: rotate(90deg); }
.plegable > summary .falta {
  margin-left: auto; text-transform: none; letter-spacing: 0;
  font-weight: 500; font-size: 11.5px; color: var(--alerta);
}
.plegable .cajon-bloque { border-bottom: 0; padding-top: 0; }

/* Encabezado del historial, con el botón de agregar al costado. */
.bloque-cabeza {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.bloque-cabeza h3 { margin: 0; }
.btn-mas {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 12px 6px 9px; border-radius: 999px;
  border: 1px solid var(--linea); background: var(--taller); color: var(--tenue);
  font: 600 12.5px var(--cuerpo);
}
.btn-mas:hover { border-color: var(--acento-fuerte); color: var(--texto); }
.btn-mas i {
  width: 17px; height: 17px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 13px; line-height: 1;
  background: var(--acento); color: #17130F; font-weight: 700; font-style: normal;
}
.btn-mas[aria-expanded="true"] { border-color: var(--acento-fuerte); color: var(--texto); }

/* El cuestionario de nueva acción: aparece donde va a caer el registro. */
.caja-accion {
  border: 1px solid var(--acento-fuerte); border-radius: 11px;
  padding: 14px; margin-bottom: 14px; background: var(--taller);
}
.caja-accion .campos { margin: 0; }

/* El detalle detrás del total: cada cobro y cada gasto del cliente. Lo que
   entra y lo que sale se distinguen por el signo y por la franja lateral,
   no solo por el color. */
.movs-plata { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 5px; }
.mov-plata {
  display: grid; grid-template-columns: 74px minmax(0, 1fr) auto auto;
  gap: 10px; align-items: center; font-size: 12.5px;
  padding: 8px 11px; border-radius: 8px; background: var(--taller);
  border-left: 3px solid var(--hoja);
}
.mov-plata.es-gasto { border-left-color: var(--apagado); }
.mov-que { min-width: 0; overflow-wrap: anywhere; }
.mov-monto { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mov-plata.es-gasto .mov-monto { color: var(--tenue); }

@media (max-width: 620px) {
  .mov-plata { grid-template-columns: 68px 1fr auto; }
  .mov-plata .pastilla { grid-column: 2; justify-self: start; }
}

/* ── Ficha de cliente: tablero, condiciones y fotos ──────────────────
   Las cifras van arriba, chicas y en fila: responden "¿cómo vamos con
   este fundo?" sin obligar a recorrer los bloques de abajo. */
.mini-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 8px; margin-top: 4px;
}
.mini-kpi {
  padding: 9px 11px; border-radius: 9px;
  background: var(--taller); border: 1px solid var(--linea);
  display: grid; gap: 1px;
}
.mini-kpi-et {
  font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--apagado);
}
.mini-kpi-n { font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.mini-kpi-nota { font-size: 10.5px; color: var(--apagado); }
.mini-kpi-alerta { border-color: color-mix(in srgb, var(--alerta) 50%, transparent); }
.mini-kpi-alerta .mini-kpi-n { color: var(--alerta); }

/* Con qué cuenta el fundo. El icono es apoyo, no la información: cada
   fila dice su nombre al lado. */
.condiciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.cond-fila {
  display: grid; grid-template-columns: 22px 130px 1fr; gap: 9px;
  align-items: baseline; font-size: 13px;
  padding: 7px 10px; border-radius: 8px; background: var(--taller);
}
.cond-icono { font-size: 14px; line-height: 1; }
.cond-et { color: var(--apagado); font-size: 12px; }
.cond-valor { overflow-wrap: anywhere; }

/* Galería: miniaturas parejas, sin deformar la foto. */
.galeria {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px;
}
.foto { margin: 0; display: grid; gap: 5px; }
.foto img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 9px; border: 1px solid var(--linea); display: block;
  background: var(--hueco);
}
.foto a:hover img { border-color: var(--acento-fuerte); }
.foto figcaption {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 11.5px; color: var(--apagado);
}
.foto figcaption span { overflow-wrap: anywhere; }

@media (max-width: 620px) {
  .cond-fila { grid-template-columns: 22px 1fr; }
  .cond-valor { grid-column: 2; }
  .galeria { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
}

/* ── Vigencia de cada lote de colmenas ───────────────────────────────
   Un servicio de 500 colmenas que entró en dos tandas tiene dos fechas
   de salida. La franja lateral dice el estado sin depender del color:
   cada lote lleva además su pastilla con el texto. */
.lotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.lote {
  display: grid; grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: 10px; background: var(--taller);
  border-left: 3px solid var(--linea-fuerte);
}
.lote-vigente    { border-left-color: var(--hoja); }
.lote-por-vencer { border-left-color: var(--cera); }
.lote-vencido    { border-left-color: var(--alerta); }
.lote-retirado   { opacity: .55; }
.lote-cifra { display: grid; gap: 1px; }
.lote-cifra .mono { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.lote-datos { min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
.lote-vence { text-align: right; display: grid; gap: 3px; justify-items: end; }
.lote-por-vencer .pastilla { color: var(--cera); }
.lote-vencido .pastilla { color: var(--alerta); }
.lote-vigente .pastilla { color: var(--hoja); }

@media (max-width: 620px) {
  .lote { grid-template-columns: 64px 1fr; }
  .lote-vence { grid-column: 1 / -1; justify-items: start; text-align: left; }
}

/* Agregar otra pieza del mismo tipo: una cotización que se rehízo, un
   contrato y su adenda. Va discreto, alineado con las acciones de arriba. */
.exp-agregar { text-align: right; margin: -2px 0 4px; }
.exp-agregar .enlace { font-size: 12px; color: var(--apagado); }
.exp-agregar .enlace:hover { color: var(--texto); }


/* ── Ficha del servicio: leer antes que editar ──────────────────────────
   La plata del servicio va arriba, pegada al avance de colmenas, porque son
   las dos preguntas que uno trae al abrir la ficha: cuántas entraron y si
   deja algo. */
.tira-plata {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  margin-top: 14px; background: var(--linea-suave);
  border: 1px solid var(--linea-suave); border-radius: 8px; overflow: hidden;
}
.tira-plata > div {
  background: var(--taller); padding: 9px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
/* Una cifra no se parte: "S/ 140,218.00" cortado en dos renglones se lee
   como dos números distintos. Si no entra, el auto-fit baja de columnas. */
.tira-plata b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
/* El porcentaje va debajo de la cifra, no pegado a su derecha: con la cifra
   sin partir, el "3%" se salía de la columna y quedaba cortado por el borde. */
.tira-plata small {
  display: block; font-size: 11.5px; color: var(--tenue); font-weight: 400;
}

/* La franja de proyección va apagada y punteada: es un plan, no una cobranza. */
.tira-proyeccion { border-style: dashed; margin-top: 8px; }
.tira-proyeccion > div { background: transparent; }
.tira-proyeccion b, .tira-proyeccion .etiqueta { color: var(--apagado); }
.tira-proyeccion .proyeccion-nota {
  grid-column: 1 / -1; font-size: 11.5px; color: var(--apagado);
  padding: 7px 12px; border-top: 1px solid var(--linea-suave);
}

.ficha-lectura { display: flex; flex-direction: column; gap: 18px; }
.datos-grupo {
  display: grid; gap: 10px 20px;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}
.datos-grupo + .datos-grupo { padding-top: 16px; border-top: 1px solid var(--linea-suave); }
.dato { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dato > span:last-child { font-size: 14.5px; overflow-wrap: anywhere; }
.dato small { color: var(--tenue); font-weight: 400; font-size: 12px; }
.ficha-notas {
  margin: 0; padding: 10px 12px; border-radius: 8px;
  background: var(--hueco);
  font-size: 13.5px; color: var(--tenue);
}
#btn-editar-ficha { align-self: flex-start; }


/* La columna de colmenas cuenta un solo hecho: cuantas de cuantas, con la
   barra debajo. Antes eran dos columnas —el numero y la barra— separadas por
   las fechas, asi que habia que leerlas en dos sitios. */
.celda-avance { min-width: 8.5rem; }
.avance-cifra { font-size: 14px; font-weight: 600; margin-bottom: 5px; }
.avance-cifra span { font-weight: 400; color: var(--apagado); font-size: 12.5px; }


/* Dos enlaces en la misma celda se leen como uno solo si van pegados. */
.acciones-fila { display: flex; gap: 14px; justify-content: flex-end; align-items: baseline; }


/* Un enlace que avisa de algo pendiente, sin llegar a ser un error. */
.enlace-aviso { color: var(--miel-honda); }
.enlace-aviso:hover { color: var(--cera-texto); border-bottom-color: currentColor; }


/* El formulario de registro, plegado hasta que se pide con el "+". */
.carga-plegada { display: none; }

/* ── Desglose por categoría ─────────────────────────────────────────────
   Filtra y a la vez muestra el peso de cada categoría. La barra va contra
   la categoría más grande, no contra el total: comparar entre ellas es lo
   que uno quiere, y contra el total casi todas se verían como una raya. */
.desglose {
  display: grid; gap: 8px; margin: 14px 0 4px;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
}
.cat {
  display: flex; flex-direction: column; gap: 5px; text-align: left;
  padding: 10px 12px 9px; border: 1px solid var(--linea-suave);
  border-radius: 10px; background: var(--taller); cursor: pointer;
  font: inherit; color: inherit; transition: border-color .15s, background .15s;
}
.cat:hover { border-color: var(--linea-fuerte); }
.cat:focus-visible { outline: 2px solid var(--miel); outline-offset: 2px; }
.cat-nombre {
  font-size: 12px; color: var(--tenue); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cat-monto { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.cat-monto small { font-size: 11px; font-weight: 400; color: var(--apagado); margin-left: 4px; }
.cat-barra { height: 3px; border-radius: 2px; background: var(--hueco); overflow: hidden; }
.cat-barra i { display: block; height: 100%; background: var(--linea-fuerte); }

/* La elegida es la única con color: el resto se apaga para que se note. */
.cat-activa { border-color: var(--miel); background: color-mix(in srgb, var(--cera) 8%, transparent); }
.cat-activa .cat-nombre { color: var(--texto); }
.cat-activa .cat-barra i { background: var(--miel); }

/* El segundo nivel del desglose: mismo mecanismo, un escalón más adentro. */
.desglose-hijo {
  margin-top: 2px; padding-left: 14px;
  border-left: 2px solid var(--linea);
  align-items: start;
}
.desglose-et {
  grid-column: 1 / -1; font-family: var(--dato); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--apagado);
  margin-bottom: 2px;
}
.cat-chica { padding: 8px 10px 7px; }
.cat-chica .cat-monto { font-size: 13.5px; }

/* ── La franja del pulso ────────────────────────────────────────────────
   Las cifras del negocio, arriba del Tablero. Estuvo un rato en todas las
   pantallas y competía con el título de cada una: es contenido del tablero,
   no parte del marco. Acá aporta lo que el tablero no tenía —por cobrar,
   caja chica, lo que falta aprobar— sin repetir nada. */
.franja-pulso {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px;
  margin: 0 clamp(12px, 3vw, 28px) 4px;
  padding: 2px;
  background: var(--taller);
  border: 1px solid var(--linea-suave); border-radius: 10px;
}
.pulso {
  display: flex; align-items: baseline; gap: 6px;
  padding: 6px 10px; border: 0; border-radius: 6px; background: transparent;
  font: inherit; color: var(--tenue); cursor: pointer;
  transition: background .15s, color .15s;
}
.pulso:hover { background: var(--hueco); color: var(--texto); }
.pulso:focus-visible { outline: 2px solid var(--miel); outline-offset: -2px; }
.pulso-et {
  font-family: var(--dato); font-size: 9px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--apagado); white-space: nowrap;
}
.pulso-n { font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.pulso-n small { font-size: 10px; font-weight: 400; color: var(--apagado); margin-left: 3px; }

/* Solo se pinta lo que pide atención; el resto queda en tinta tenue. */
.pulso.bien .pulso-n { color: var(--hoja); }
.pulso.mal  .pulso-n { color: var(--alerta); }
.pulso.ojo  .pulso-n { color: var(--cera-texto); }

@media (max-width: 52rem) {
  .franja-pulso { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .franja-pulso::-webkit-scrollbar { display: none; }
  .pulso { flex: 0 0 auto; }
}
  .pulso { flex: 0 0 auto; }
}

/* Una barra del tablero que lleva a sus filas se ve tocable. */
.fila-puerta { cursor: pointer; }
.fila-puerta:hover rect:first-child { fill: var(--realce-grafico); }
.fila-puerta:focus-visible { outline: 2px solid var(--miel); outline-offset: 2px; }

/* El pie de una tarjeta: dice qué significa la cifra sin repetirla. */
.tarjeta-pie { font-size: 11.5px; color: var(--apagado); margin-top: 2px; display: block; }

/* ── La tira de totales por libro ───────────────────────────────────────
   El detalle de cada libro, subordinado a la franja del pulso que va más
   arriba. Antes eran seis tarjetas grandes: con la franja encima, doce
   números que mirar antes de llegar a la tabla. */
#resumen-egresos.tarjetas {
  display: flex; flex-wrap: wrap; gap: 0; align-items: stretch;
  background: var(--taller); border: 1px solid var(--linea-suave);
  border-radius: 10px; padding: 2px; margin: 0 0 4px;
}
.tira-dato {
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 14px; border: 0; background: transparent;
  font: inherit; color: inherit; text-align: left;
}
button.tira-dato { cursor: pointer; border-radius: 7px; transition: background .15s; }
button.tira-dato:hover { background: var(--hueco); }
button.tira-dato:focus-visible { outline: 2px solid var(--miel); outline-offset: -2px; }
.tira-dato + .tira-dato { border-left: 1px solid var(--linea-suave); }
.tira-et {
  font-family: var(--dato); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--apagado); white-space: nowrap;
}
.tira-n { font-size: 14px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }

/* El libro que se está mirando se marca; el pendiente se pinta. */
.tira-aqui .tira-n { color: var(--cera-texto); }
.tira-aqui .tira-et { color: var(--cera-texto); }
.tira-ojo .tira-n { color: var(--alerta); }

/* El resumen que va en la línea del plegable: dice lo que urge sin abrirlo.
   Sin `nowrap` el flex aprieta el título y lo parte en cinco renglones, que
   es peor que el bloque que se venía a esconder. */
.resumen-plegable {
  margin-left: auto; font-weight: 400; letter-spacing: 0;
  text-transform: none; font-size: 12.5px; color: var(--apagado);
  white-space: nowrap;
}
#tablero-viaticos > summary { flex-wrap: wrap; }
#tablero-viaticos > summary > :first-child { white-space: nowrap; }
.resumen-plegable.urge { color: var(--alerta); }

/* Dentro de un libro el plegable es un bloque más, no un separador de página. */
#tablero-viaticos.plegable {
  border: 1px solid var(--linea-suave); border-radius: 10px;
  background: var(--taller); margin: 0 0 6px;
}
#tablero-viaticos > summary { padding: 9px 14px; }
#tablero-viaticos #lista-viaticos { padding: 0 14px 10px; }

/* Cada cosa que se arma trae su propia receta debajo: se separan con un
   marco suave para que dos tablas seguidas no se lean como una sola. */
.receta-bloque { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--linea-suave); }
.receta-bloque:last-of-type { margin-bottom: 6px; padding-bottom: 0; border-bottom: 0; }
.receta-cabeza { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.receta-cabeza b { font-size: 14px; }
.receta-cabeza .enlace { margin-left: auto; }

/* Barra de asignación en lote (Egresos). Sale del flujo normal de la tabla:
   solo existe mientras haya filas marcadas, y por eso no ocupa sitio fijo. */
.lote-barra {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 10px 14px;
  background: var(--taller-alto); border: 1px solid var(--linea-suave);
  border-radius: 10px;
}
.lote-barra label { color: var(--apagado); font-size: 13px; }
.lote-barra select { min-width: 220px; }
.lote-barra .boton { flex: 0 0 auto; }
#lote-cuenta { color: var(--tenue); }
.celda-marca { width: 30px; }

/* ── Expediente: los papeles en la cadena en que pasan ───────────────────
   Cinco columnas: orden, flecha, factura, flecha, voucher. La orden abarca
   todas sus facturas, así un cobro por cuotas se lee como uno solo. */
.cadena {
  display: grid; align-items: stretch;
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr);
  row-gap: 8px;
}
.cadena-previa { grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); }
.cadena-orden, .cadena-pila { display: grid; gap: 8px; align-content: start; }
.cadena-orden { grid-column: 1; }
.cadena-factura { grid-column: 3; display: grid; }
.cadena-voucher { grid-column: 5; display: grid; gap: 8px; align-content: start; }
.cadena-orden > .papel { height: 100%; }
.cadenas { display: grid; gap: 10px; }
.cadenas > .cadena + .cadena { padding-top: 10px; border-top: 1px solid var(--linea-suave); }
.cadena-titulos {
  margin: 4px 0 6px; font-family: var(--dato); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--apagado);
}
.cadena-flecha {
  align-self: center; justify-self: center; width: 8px; height: 8px;
  border-top: 1.5px solid var(--linea-fuerte); border-right: 1.5px solid var(--linea-fuerte);
  transform: rotate(45deg); margin-left: -3px;
}
.cadena-mas { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 16px; margin-top: 8px; }
.cadena-mas .enlace { font-size: 12px; color: var(--apagado); }
.cadena-mas .enlace:hover { color: var(--texto); }
.cadena-mas:empty { display: none; }
.cadena-aviso { color: var(--cera-texto); }

.papel {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: 9px 10px; border: 1px solid var(--linea); border-radius: 10px; background: var(--taller);
}
.papel-vacio { border-style: dashed; background: transparent; }
.papel-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.papel-tipo {
  font-family: var(--dato); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Con los títulos de columna a la vista, la etiqueta dentro de cada papel sobra;
   en el teléfono, sin títulos, vuelve. */
.cadenas .papel-tipo { display: none; }
.papel-quitar {
  width: 20px; height: 20px; margin: -4px -5px 0 auto; border: 0; border-radius: 999px; flex: none;
  background: transparent; color: var(--apagado); font-size: 15px; line-height: 1; cursor: pointer;
}
.papel-quitar:hover { background: var(--hueco); color: var(--alerta); }
.papel-numero { font-size: 13px; font-weight: 500; color: var(--texto); overflow-wrap: anywhere; }
.papel-dato { font-size: 11.5px; color: var(--apagado); font-variant-numeric: tabular-nums; }
.papel-pie { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 2px; }
.papel-pie:empty { display: none; }
.papel-estado {
  font-family: var(--dato); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 1px 7px; border-radius: 999px; border: 1px solid currentColor;
}
.papel-cobrada { color: var(--hoja); }
.papel-debe { color: var(--alerta); }
.papel-falta { font-size: 11px; color: var(--cera-texto); }
.papel-acciones { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: auto; padding-top: 5px; }
.papel-acciones .enlace { font-size: 12px; }
.papel-enlazar {
  width: 100%; margin-top: 3px; padding: 5px 6px; border-radius: 7px; font-size: 12px;
  background: var(--hueco); border: 1px solid var(--borde-campo); color: var(--texto);
}
.papel-suelto { border-color: color-mix(in srgb, var(--cera) 55%, var(--linea)); }

/* El número es un botón: se toca para corregirlo. Sin número, la invitación. */
.numero-editable, .numero-poner {
  align-self: flex-start; max-width: 100%; padding: 0; border: 0; background: none;
  text-align: left; cursor: pointer; border-bottom: 1px dashed transparent;
}
.numero-editable:hover { border-bottom-color: var(--linea-fuerte); }
.numero-poner { font: 500 12.5px var(--cuerpo); color: var(--cera-texto); }
.numero-poner:hover { border-bottom-color: currentColor; }

/* COS y guía de remisión: dentro de su orden, debajo, más chicas. */
.anexos { display: grid; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--linea-suave); }
.anexo {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 7px; row-gap: 1px;
  align-items: baseline;
}
.anexo-tipo {
  font-family: var(--dato); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--apagado);
}
.anexo-numero { font-size: 12.5px; font-weight: 500; color: var(--texto); overflow-wrap: anywhere; }
.anexo-numero.numero-poner { font-size: 12px; color: var(--cera-texto); }
.anexo .papel-quitar { margin: 0; align-self: center; }
.anexo-dato, .anexo-acciones, .anexo-enlazar { grid-column: 2 / -1; }
.anexo-dato { font-size: 11.5px; color: var(--apagado); font-variant-numeric: tabular-nums; }
.anexo-acciones { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.anexo-acciones .enlace { font-size: 12px; }
.anexo-aviso { font-size: 11.5px; color: var(--cera-texto); }
.anexo-mas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.anexo-mas .enlace { font-size: 12px; color: var(--apagado); }
.anexo-mas .enlace:hover { color: var(--texto); }
.anexo-elegir { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.anexo-que { font-size: 12px; color: var(--texto); }
/* Sin nada agregado, la línea de "+ COS · + Guía" no lleva raya encima. */
.anexos:has(> .anexo-mas:first-child) { border-top: 0; padding-top: 0; }
.anexos-sueltos {
  margin-top: 10px; padding: 9px 10px; border: 1px solid color-mix(in srgb, var(--cera) 55%, var(--linea));
  border-radius: 10px;
}
.anexos-sueltos .cadena-aviso { margin: 0; }

/* En un teléfono no caben tres columnas: la cadena baja, con la flecha hacia abajo. */
@media (max-width: 600px) {
  .cadena, .cadena-previa { grid-template-columns: minmax(0, 1fr); }
  .cadena > * { grid-column: 1 !important; grid-row: auto !important; }
  .cadena-flecha { transform: rotate(135deg); margin: 0 0 2px; }
  .cadena-titulos { display: none; }
  .cadenas .papel-tipo { display: block; }
}

/* ── Las colmenas en el mapa del fundo ──────────────────────────────────── */
.mapa-barra { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 10px 0 8px; }
.mapa-barra .campo { flex: 1 1 140px; }
.mapa-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 8px 0; }
.mapa-acciones .sufijo[data-tono="ok"] { color: var(--hoja); }
.mapa-acciones .sufijo[data-tono="error"] { color: var(--alerta); }
.mapa-acciones .boton-fantasma.activo { border-color: var(--miel); color: var(--texto); }
.mapa-fundo {
  height: 46vh; min-height: 280px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--linea); background: var(--hueco);
}
.mapa-pendientes { color: var(--cera-texto); }
/* ── A donde se fue la plata: la pantalla del gerente ──────────────────── */
.gerente { margin: 0 0 16px; }
.gerente-cuadros { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 8px; }
.gerente-bloque { padding: 12px 14px; border: 1px solid var(--linea); border-radius: 12px; background: var(--taller); }
.gerente-bloque h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); }
.gerente-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.gerente-lista li { display: grid; grid-template-columns: minmax(0, 1fr) 54px auto; gap: 4px 10px; align-items: center; }
.gerente-que { font-size: 13px; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gerente-barra { grid-column: 1 / -1; order: 3; height: 4px; border-radius: 999px; background: var(--hueco); }
.gerente-barra i { display: block; height: 100%; border-radius: 999px; background: var(--miel); }
.gerente-monto { font-size: 13px; text-align: right; }
.gerente-n { font-size: 11px; text-align: right; }
.gerente-ojo .gerente-que { color: var(--alerta); }
.gerente-ojo .gerente-barra i { background: var(--alerta); }

/* ── Gasto rapido: una sola pantalla, pensada para el celular ─────────── */
/* Una sola columna: los .campo de adentro piden dos y, sin esto, el formulario
   se abre en cuatro y el monto queda del tamaño de un botón. */
.rapido { display: grid; grid-template-columns: 1fr; gap: 10px; }
.rapido > * { grid-column: 1 / -1; }
.rapido-monto {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 4px;
  border: 1px solid var(--borde-campo); border-radius: 14px; background: var(--hueco);
}
.rapido-moneda { font: 500 22px var(--dato); color: var(--apagado); }
.rapido-monto input {
  flex: 1 1 auto; width: 100%; border: 0; background: none; color: var(--texto);
  font: 600 38px var(--dato); letter-spacing: -.5px; padding: 2px 0;
}
.rapido-monto input:focus { outline: none; }
.rapido-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0 4px; }
.rapido-chip {
  padding: 9px 14px; border-radius: 999px; border: 1px solid var(--linea); background: var(--taller);
  color: var(--texto); font: 400 14px var(--cuerpo); cursor: pointer;
}
.rapido-chip.activo { border-color: var(--miel); background: var(--hueco); font-weight: 500; }
.rapido-foto { margin: 2px 0; }
.rapido-foto img { max-width: 100%; max-height: 42vh; border-radius: 12px; border: 1px solid var(--linea); }
/* Gasto o ingreso: lo primero que hay que decir es de qué lado va la plata,
   así que son dos mitades arriba de todo y no una pregunta más. */
.rapido-modo { margin: 0 0 2px; }
.rapido-modo .rapido-chip { flex: 1 1 0; text-align: center; }
/* Un grupo de preguntas que se va entero cuando no viene al caso: guarda la
   separación de la columna para que, estando, no se note que es un grupo. */
.rapido-bloque { display: grid; gap: 10px; }

/* Lo marcado contra lo programado, lote por lote. */
.lotes-mapa { margin-top: 14px; }
.lotes-mapa h4 { margin: 0; font-size: 13px; letter-spacing: .02em; }
.lotes-mapa .marco-tabla { margin-top: 6px; }
.lote-ok { color: var(--hoja); font-size: 12px; }
.lote-falta { color: var(--alerta); font-size: 12px; }
.lote-sobra { color: var(--cera-texto); font-size: 12px; }
/* Cuando lo que se ve salio del telefono y no del servidor, se dice. */
.mapa-viejo {
  color: var(--alerta); padding: 8px 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--alerta) 8%, transparent);
}
/* El punto de cada colmena, acá y en el mapa que ve el fundo.
   Va atado al pin de Leaflet: suelto se comía al punto de estado de la
   barra de arriba —el de Local y Google— y lo dejaba gris y estirado. */
.leaflet-marker-icon > .punto {
  width: 100%; height: 100%; border-radius: 999px; border: 2px solid #FFF;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.punto-campo { background: var(--hoja); }
.punto-retirada { background: var(--apagado); }
.punto-pendiente { background: var(--miel); }
/* Pasados quince dias sin revisar, el pin lo dice: es lo que manda al campo. */
.punto-atrasada { border-color: var(--alerta); box-shadow: 0 0 0 2px color-mix(in srgb, var(--alerta) 55%, transparent); }
/* Varias cajas en el mismo sitio: un circulo con cuantas son. */
.punto-grupo {
  display: grid; place-items: center; color: #FFF; font-weight: 600; font-size: 12px;
  font-family: var(--dato); cursor: pointer;
}
/* Las colmenas de las otras empresas del fundo, que solo ve el
   administrador: cuadradas y del color de su empresa, como en el teléfono
   del fundo, para no confundirlas con las de BeeAgro aunque no se
   distingan bien los colores. Varias empresas en un mismo punto, oscuro. */
.leaflet-marker-icon > .punto-tercero {
  border-radius: 4px; display: grid; place-items: center; color: #FFF;
  font: 600 11px var(--dato); cursor: pointer;
}
.punto-tercero.tercero-mezcla { background: #2B2622; }
.leaflet-marker-icon > .punto-tercero.tercero-problema {
  border-color: #3A2A00; box-shadow: 0 0 0 3px var(--miel), 0 1px 4px rgba(0, 0, 0, .45);
}
.marca-color {
  display: inline-block; flex: none; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px;
  vertical-align: -1px; border: 1px solid rgba(0, 0, 0, .25);
}
/* La casilla del mapa para prenderlas, con el aviso de que queda anotado. */
.mapa-terceros {
  max-width: 230px; padding: 7px 10px; background: var(--taller); color: var(--texto);
  font: 500 12px var(--cuerpo);
}
.mapa-terceros label { display: flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.mapa-terceros input { width: auto; margin: 0; flex: none; }
.mapa-terceros-aviso { display: block; margin-top: 2px; font-size: 10.5px; color: var(--cera-texto); }
.mapa-terceros-leyenda { display: grid; gap: 3px; margin-top: 6px; font-size: 11.5px; color: var(--apagado); }
.mapa-terceros-leyenda:empty { display: none; }
.sello-admin { font: 500 10.5px var(--dato); letter-spacing: .04em; color: var(--cera-texto); }
.aviso-admin {
  margin: 0 0 12px; padding: 8px 11px; border-radius: 8px; font-size: 12px; line-height: 1.55;
  color: var(--texto); background: color-mix(in srgb, var(--cera) 10%, var(--taller));
  border: 1px solid color-mix(in srgb, var(--cera) 45%, transparent);
}
.aviso-admin b { color: var(--cera-texto); }
/* Sus dos tablas de cinco columnas no caben en el diálogo de 640 px. En el
   celular el diálogo ya ocupa todo el ancho. */
@media (min-width: 721px) {
  .entrevista.lectura-ancha { width: min(980px, calc(100vw - 32px)); }
}
.entrevista.lectura-ancha .marco-tabla { overflow-x: auto; }
.ficha-colmena .ficha-urge { color: var(--alerta); }
.ficha-colmena b { display: block; font-size: 14px; }
.ficha-colmena span { display: block; font-size: 12px; color: var(--apagado); }
.ficha-colmena .ficha-botones { display: flex; gap: 10px; margin-top: 6px; }
/* Una casilla dentro del formulario de emision: la fila se lee como frase. */
.campo.casilla { flex-direction: row; align-items: center; gap: 9px; }
.campo.casilla input { width: auto; }
.campo.casilla span { font-size: 13.5px; color: var(--texto); }

/* Las colmenas que quedaron en el mismo punto, una debajo de otra. */
.colmenas-lista { display: grid; gap: 6px; max-height: 50vh; overflow-y: auto; margin: 12px 0; }
.colmena-fila {
  display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; align-items: baseline;
  padding: 9px 11px; border: 1px solid var(--linea); border-radius: 10px; background: var(--taller);
}
.colmena-que { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.colmena-codigo { font-size: 13.5px; font-weight: 500; color: var(--texto); }
.colmena-acciones { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.colmena-acciones .enlace { font-size: 12px; }

.enlace-mapa {
  padding: 10px 12px; border-radius: 10px; background: var(--hueco); border: 1px solid var(--linea);
  font-size: 13px; overflow-wrap: anywhere; user-select: all;
}

/* Lo que anotó el fundo. La nota anulada queda tachada, no se borra; quién
   la anuló va como bloque aparte para que no quede tachado también. */
.fila-anulada td { text-decoration: line-through; opacity: .6; }
.fila-anulada .anulada-por { display: inline-block; text-decoration: none; }
.sello-verificado { color: var(--hoja); }
.sello-sin-verificar { color: var(--apagado); }
/* Dos renglones en una celda: el dato y, abajo y más chico, su detalle. */
.tabla .celda-doble small { display: block; margin-top: 2px; color: var(--apagado); font-size: 11.5px; }
.colmena-que.en-columna { flex-direction: column; gap: 2px; }

/* ── Seguridad y salud: los papeles que pide el fundo ───────────────────── */
.ssoma-lista { display: grid; gap: 8px; margin: 10px 0 4px; }
.ssoma-fila {
  display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: space-between; align-items: center;
  padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--taller);
}
.ssoma-que { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.ssoma-fecha { font-size: 12px; color: var(--apagado); }
.ssoma-nombre { font-size: 13.5px; font-weight: 500; color: var(--texto); }
.ssoma-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.ssoma-acciones .enlace { font-size: 12px; }
.ssoma-papeles { display: grid; gap: 8px; margin: 10px 0 2px; }
.ssoma-papel {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px;
}
.ssoma-papel .sufijo { flex: 1 1 240px; }
.ssoma-empresa {
  padding: 4px 8px; border-radius: 7px; font-size: 12px; max-width: 260px;
  background: var(--hueco); border: 1px solid var(--borde-campo); color: var(--texto);
}
.ssoma-datos { display: grid; gap: 6px; margin: 10px 0 2px; }
.ssoma-datos > div { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; }
.ssoma-datos dt { font-size: 12px; color: var(--apagado); }
.ssoma-datos dd { margin: 0; font-size: 13px; color: var(--texto); }

/* Marcar gente: nombre, DNI y de quién es. En rojo el que no puede entrar. */
.epp-equipos { border: 0; padding: 0; margin: 12px 0 0; }
.epp-equipos legend { padding: 0; }
.epp-chips { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 6px 0; }
.epp-chip, .epp-guardar, .gente-fila {
  display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--texto); cursor: pointer;
}
.epp-chip {
  padding: 5px 11px; border: 1px solid var(--linea); border-radius: 999px; background: var(--taller);
}
.epp-chip:has(input:checked) { border-color: var(--miel); background: var(--hueco); }
.epp-agregar { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; }
.epp-agregar input {
  flex: 1 1 auto; padding: 7px 10px; border-radius: 8px; font-size: 13px;
  background: var(--hueco); border: 1px solid var(--borde-campo); color: var(--texto);
}
.epp-guardar { margin-top: 4px; font-size: 12.5px; color: var(--apagado); }
.gente-lista { display: grid; gap: 2px; max-height: 40vh; overflow-y: auto; margin-top: 6px; }
.gente-fila { padding: 6px 8px; border-radius: 8px; }
.gente-fila:hover { background: var(--hueco); }
.gente-nombre { flex: 1 1 auto; min-width: 0; }
.gente-dni { font-size: 12px; color: var(--apagado); }
.gente-de { font-size: 12px; color: var(--tenue); }
.gente-traba .gente-nombre { color: var(--cera-texto); }
.gente-titulo {
  margin: 10px 0 2px; font-family: var(--dato); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--apagado);
}

/* ── Programación por lote ─────────────────────────────────────────────── */
.form-lotes { display: grid; gap: 10px; }
.form-lotes textarea {
  width: 100%; padding: 10px 12px; border-radius: 8px; resize: vertical; tab-size: 14;
  background: var(--hueco); border: 1px solid var(--borde-campo); color: var(--texto);
  font: 400 12.5px/1.5 var(--dato); white-space: pre; overflow-x: auto;
}
.tabla-lotes tbody + tbody .lotes-grupo th { padding-top: 14px; }
.lotes-grupo th {
  text-align: left; font-family: var(--cuerpo); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--texto); background: var(--taller-alto);
}
.lotes-grupo .sufijo { font-weight: 400; margin-left: 6px; }
.tabla-lotes tfoot th { border-top: 1px solid var(--linea-fuerte); }
.lotes-mensajes { margin: 0; padding: 10px 12px 10px 28px; border-radius: 8px; display: grid; gap: 4px; font-size: 13px; }
.lotes-errores { background: color-mix(in srgb, var(--alerta) 9%, var(--taller)); color: var(--alerta); }
.lotes-avisos { background: color-mix(in srgb, var(--cera) 14%, var(--taller)); color: var(--texto); }
.lotes-diferencia {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding: 10px 12px; border-radius: 10px; font-size: 13px;
  border: 1px solid color-mix(in srgb, var(--cera) 45%, transparent);
  background: color-mix(in srgb, var(--cera) 10%, var(--taller));
}
.lotes-diferencia p { margin: 0; flex: 1 1 260px; }
.lotes-diferencia .boton { flex: 0 0 auto; }
#caja-editar-lotes { margin-top: 12px; }

/* Botón de satélite, con la misma pinta que el zoom de Leaflet. */
.mapa-satelite a {
  display: block; width: auto; padding: 0 10px; height: 30px; line-height: 30px;
  font: 500 12px var(--cuerpo); color: var(--texto); background: var(--taller);
  text-decoration: none; white-space: nowrap;
}
.mapa-satelite a:hover { background: var(--hueco); }

/* Pegar una ubicación: coordenadas o enlace de Google Maps. */
.pegar-ubicacion {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 10px;
}
.pegar-ubicacion input {
  flex: 1 1 280px; min-width: 200px; padding: 8px 12px; border-radius: 999px;
  background: var(--taller); border: 1px solid var(--linea); color: var(--texto);
  font: 400 13px var(--cuerpo);
}
.pegar-ubicacion input:focus { outline: 2px solid var(--acento-fuerte); outline-offset: 1px; }
.pegar-en-ficha {
  width: 100%; margin-top: 6px; padding: 8px 11px; border-radius: 8px;
  background: var(--hueco); border: 1px solid var(--linea); color: var(--texto);
  font: 400 13px var(--cuerpo);
}

/* Los fundos del cliente: cada uno se abre para corregirlo o ubicarlo. */
.lista-fundos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fundo summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fundo-nombre { font-weight: 600; font-size: 13.5px; }
.fundo-sub { font-size: 12px; color: var(--apagado); }
.fundo-pin {
  margin-left: auto; font: 500 11px var(--dato); letter-spacing: .04em;
  padding: 2px 8px; border-radius: 999px;
  background: var(--hueco); border: 1px solid var(--linea-suave); color: var(--tenue);
}
.fundo-pin.ubicado { color: var(--hoja); border-color: color-mix(in srgb, var(--hoja) 45%, transparent); }

/* ── Buscar en el mapa ─────────────────────────────────────────────────── */
.buscar-mapa {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 10px;
}
.buscar-mapa input {
  flex: 1 1 300px; min-width: 200px; padding: 8px 12px; border-radius: 999px;
  background: var(--taller); border: 1px solid var(--linea); color: var(--texto);
  font: 400 13px var(--cuerpo);
}
.buscar-mapa input:focus { outline: 2px solid var(--acento-fuerte); outline-offset: 1px; }
.hallados { flex: 1 1 100%; display: flex; gap: 8px; flex-wrap: wrap; }
.hallado {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 999px; cursor: pointer;
  background: var(--taller); border: 1px solid var(--linea-suave);
  color: var(--texto); font: 500 12.5px var(--cuerpo);
}
.hallado:hover { border-color: var(--acento-fuerte); }
.hallado .forma { width: 9px; height: 9px; }
.hallado small { color: var(--apagado); font-weight: 400; }

/* La tarjeta de "sin ubicar" y su aspa para apartarla de la lista. */
.tarjeta-caja { position: relative; display: flex; }
.tsu-quitar {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
  border-radius: 50%; border: 1px solid var(--linea); background: var(--hueco);
  color: var(--apagado); font: 600 13px/1 var(--cuerpo); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .12s;
}
.tarjeta-caja:hover .tsu-quitar, .tsu-quitar:focus { opacity: 1; }
.tsu-quitar:hover { color: var(--alerta); border-color: var(--alerta); }

.descartados { margin-top: 10px; font-size: 12.5px; }
.descartados-lista { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.descartado {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px;
  border-radius: 999px; background: var(--hueco); border: 1px dashed var(--linea);
  color: var(--apagado); font-size: 12px;
}
.descartado button {
  border: 0; background: none; color: var(--acento-fuerte); cursor: pointer;
  font: 500 12px var(--cuerpo); padding: 0;
}

/* ── El nombre del fundo sobre el mapa ─────────────────────────────────── */
.leaflet-tooltip.etiqueta-fundo {
  background: color-mix(in srgb, var(--taller) 90%, transparent);
  border: 1px solid var(--linea-suave); border-radius: 6px;
  box-shadow: 0 6px 16px -10px rgba(0,0,0,.9);
  padding: 2px 7px; color: var(--texto);
  font: 600 11.5px var(--cuerpo); white-space: nowrap;
}
.leaflet-tooltip.etiqueta-fundo::before { display: none; }

/* ── Mapa de calor por regiones ────────────────────────────────────────── */
.leyenda-calor {
  padding: 9px 11px; border-radius: 10px; line-height: 1.5;
  background: color-mix(in srgb, var(--taller) 94%, transparent);
  border: 1px solid var(--linea); color: var(--texto);
  font: 400 11.5px var(--cuerpo); box-shadow: 0 10px 26px -14px rgba(0,0,0,.9);
}
.leyenda-calor b { display: block; margin-bottom: 5px; font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--apagado); }
.leyenda-calor .paso { display: flex; align-items: center; gap: 7px; }
.leyenda-calor i { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }

.leaflet-tooltip.globo-region {
  background: var(--taller); color: var(--texto);
  border: 1px solid var(--linea); border-radius: 8px; padding: 7px 10px;
  box-shadow: 0 14px 30px -18px rgba(0,0,0,.95);
  font: 400 12px var(--cuerpo); line-height: 1.5;
}
.leaflet-tooltip.globo-region b { font-size: 12.5px; }
.leaflet-tooltip.globo-region::before { border-top-color: var(--linea); }

/* La fecha del pago se puede tocar para corregirla, y al lado va su voucher. */
.cuota-pago { display: inline-flex; align-items: baseline; gap: 10px; }
.cuota-pago .enlace.sufijo { font-size: 12px; }

/* El camino de la plata cobrada: lo que entró, lo retenido y el IGV. */
.tira-deposito { margin-top: 8px; border-top: 1px dashed var(--linea); padding-top: 10px; }
.tira-deposito .sufijo { display: block; font-size: 11px; margin-top: 2px; }
.deposito-aviso {
  flex: 1 1 100%; margin-top: 4px; padding: 8px 11px; border-radius: 8px;
  background: var(--hueco); border: 1px solid var(--linea-suave);
  font-size: 12.5px; color: var(--apagado);
}

/* Lo que el servicio deja. Va al final y con la ganancia resaltada: es la
   única cifra de las tres franjas que contesta "¿valió la pena?". */
/* Columnas más anchas que las otras dos franjas: acá las cifras llevan seis
   dígitos —S/ 140,218.00— y en una columna de 140px se salían por el borde.
   Con esto bajan a cuatro por fila y la ganancia cierra abajo. */
.tira-cuenta { margin-top: 8px; grid-template-columns: repeat(auto-fit, minmax(9.8rem, 1fr)); }
/* La ganancia cierra la franja a todo el ancho: es la única cifra de las
   tres que contesta "¿valió la pena?", y sola en una esquina no se leía. */
.tira-cierre {
  grid-column: 1 / -1;
  flex-direction: row !important; align-items: baseline; gap: 12px !important;
}
.tira-cierre b { font-size: 17px; }
.tira-cierre small { display: inline !important; margin-left: 4px; }
.tira-cuenta .proyeccion-nota {
  grid-column: 1 / -1; font-size: 11.5px; color: var(--apagado);
  padding: 7px 12px; border-top: 1px solid var(--linea-suave); background: var(--taller);
}

/* La columna de bajas del informe de mortandad: una casilla por lote, angosta,
   para que la tabla no se deforme por una columna que casi siempre va en cero. */
.entrada-muertas {
  width: 5.5rem; padding: 4px 7px; text-align: right;
  border: 1px solid var(--linea); border-radius: 6px;
  background: var(--taller); color: var(--texto); font: inherit; font-size: 13px;
}
.entrada-muertas:focus { outline: 2px solid var(--acento); outline-offset: 1px; }

/* Un bloque que se abre cuando hace falta. La línea cerrada tiene que decir
   lo suficiente para no tener que abrirlo solo para enterarse de qué hay. */
.bloque-plegable > summary {
  cursor: pointer; list-style: none; margin: 0;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.bloque-plegable > summary::-webkit-details-marker { display: none; }
/* El triángulo, dibujado a mano para que gire y tome el color del texto. */
.bloque-plegable > summary::before {
  content: ''; flex: none; width: 0; height: 0; margin-right: 2px;
  border: 5px solid transparent; border-left-color: var(--apagado);
  transition: transform .15s; transform-origin: 3px 50%;
}
.bloque-plegable[open] > summary::before { transform: rotate(90deg); }
.bloque-plegable > summary:hover::before { border-left-color: var(--acento-fuerte); }
.bloque-plegable > summary h3 { margin: 0; }
.bloque-plegable > summary .sufijo { margin-left: auto; text-align: right; }
.bloque-plegable[open] > summary { margin-bottom: 14px; }
.bloque-cabeza-suelta { margin-bottom: 10px; }

/* Cada ingreso dice en su propia línea de quién vino y hasta cuándo corre su
   plazo: antes eso vivía en un bloque aparte que repetía los mismos lotes. */
.mov-de { flex: 1; min-width: 0; }
.mov-de .sufijo { display: block; }
.mov-vigencia { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.mov-vigencia .sufijo { font-size: 11px; }

/* Los cambios de colmena de un proveedor, bajo sus cifras. */
.cambios { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 1px; }
.cambio-fila {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 0; border-top: 1px solid var(--linea-suave);
}
.cambio-que { flex: 1; min-width: 0; }
.cambio-que .sufijo { display: block; }
.cambio-fila .doc-fecha { flex: none; }

/* Elegir qué colmenas se cambiaron: una por código, para tocarlas con el dedo
   parado en el campo. */
#buscar-colmena-cambio { margin-top: 4px; }
.rejilla-colmenas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 6px; margin-top: 6px; max-height: 28vh; overflow-y: auto;
  padding: 8px; border: 1px solid var(--linea); border-radius: 9px; background: var(--hueco);
}
.chip-colmena[hidden] { display: none; }
.chip-colmena {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 7px 9px; border-radius: 7px;
  border: 1px solid var(--linea); background: var(--taller); font-size: 13px;
}
.chip-colmena:has(input:checked) { border-color: var(--acento); background: var(--acento-suave, var(--taller)); }
.chip-colmena .sufijo { font-size: 11px; }

/* Revisar papeles: ficha a la izquierda, lo que dice el documento a la derecha. */
.revision { display: grid; gap: 10px; margin: 14px 0; max-height: 46vh; overflow-y: auto; }
.revision-papel {
  padding: 10px 12px; border-radius: 10px;
  background: var(--taller); border: 1px solid var(--linea-suave);
}
.revision-cabeza { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; }
.revision-cabeza .enlace { margin-left: auto; font-size: 12px; }
.revision-fila {
  display: grid; grid-template-columns: 20px 74px 1fr 16px 1fr; align-items: center;
  gap: 8px; padding: 5px 0; font-size: 12.5px; cursor: pointer;
}
.revision-campo { color: var(--apagado); }
.revision-antes { color: var(--tenue); text-decoration: line-through; }
.revision-flecha { color: var(--apagado); text-align: center; }
.revision-despues { color: var(--texto); font-weight: 600; }
@media (max-width: 620px) {
  .revision-fila { grid-template-columns: 20px 1fr 1fr; }
  .revision-campo { grid-column: 2 / -1; }
  .revision-flecha { display: none; }
}

/* La sede va debajo del nombre de la empresa, como un apellido. */
.globo-sede {
  margin: -5px 0 9px; font-size: 12px; color: var(--apagado);
}

/* La plata del cliente, repartida por servicio: cada sitio con su subtotal. */
.grupos-servicio { margin-top: 14px; display: grid; gap: 8px; }
.grupo-servicio summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.grupo-nombre { font-weight: 600; font-size: 13px; }
.grupo-sede {
  font-size: 11px; padding: 1px 8px; border-radius: 999px;
  background: var(--hueco); border: 1px solid var(--linea-suave); color: var(--apagado);
}
.grupo-cuenta { font-size: 11.5px; color: var(--tenue); }
.grupo-total { margin-left: auto; font-size: 13px; font-weight: 600; }
.grupo-servicio .movs-plata { margin-top: 6px; }

/* El directorio: la gente del cliente, agrupada por sede. */
.directorio-grupo + .directorio-grupo { margin-top: 14px; }
.directorio-grupo h4 {
  margin: 0 0 7px; font: 600 11px var(--dato); letter-spacing: .12em;
  text-transform: uppercase; color: var(--acento-fuerte);
}
.directorio-grupo h4 .sufijo { letter-spacing: 0; text-transform: none; }
.personas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.persona {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 12px; border-radius: 10px;
  background: var(--taller); border: 1px solid var(--linea-suave);
}
.persona-principal { border-color: color-mix(in srgb, var(--acento-fuerte) 45%, transparent); }
.persona-quien { display: flex; flex-direction: column; gap: 2px; min-width: 190px; }
.persona-nombre { font-size: 13.5px; font-weight: 600; }
.persona-cargo { font-size: 11.5px; color: var(--apagado); }
.persona-marca {
  font: 500 10px var(--dato); letter-spacing: .08em; text-transform: uppercase;
  color: var(--acento-fuerte);
}
.persona-contacto { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; }
.persona .mini { margin-left: auto; }
.campo-marca { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.campo-marca .cajon-ayuda { flex: 1 1 100%; margin: 2px 0 0 24px; }

/* El servicio de un cobro se elige en la misma fila. */
.celda-servicio { min-width: 170px; }
.sel-servicio {
  width: 100%; padding: 4px 8px; border-radius: 8px; font: 400 12.5px var(--cuerpo);
  background: var(--taller); border: 1px solid var(--linea-suave); color: var(--texto);
}
.sel-servicio:focus { outline: 2px solid var(--acento-fuerte); outline-offset: 1px; }

/* La cuenta del servicio: dos cuentas, cada una con su título y su detalle. */
.totales-titulo dt {
  font: 600 10.5px var(--dato); letter-spacing: .12em; text-transform: uppercase;
  color: var(--acento-fuerte);
}
.totales-sub dt { padding-left: 14px; color: var(--tenue); font-size: 12px; }
.totales-sub dd { color: var(--tenue); font-size: 12px; }

/* Repartir los sueltos: el gasto a la izquierda, a quién se le carga a la derecha. */
.reparto { display: grid; gap: 6px; margin: 14px 0; max-height: 46vh; overflow-y: auto; }
.reparto-fila {
  display: grid; grid-template-columns: 20px 1fr 1fr; align-items: center; gap: 10px;
  padding: 8px 11px; border-radius: 10px; cursor: pointer;
  background: var(--taller); border: 1px solid var(--linea-suave);
}
.reparto-fila:hover { border-color: var(--acento-fuerte); }
.reparto-que, .reparto-destino { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.reparto-desc { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reparto-dato, .reparto-porque { font-size: 11px; color: var(--apagado); }
.reparto-destino b { font-size: 12.5px; }
.reparto-serv { font-size: 11.5px; color: var(--acento-fuerte); }
.reparto-sin { color: var(--tenue); }
@media (max-width: 620px) {
  .reparto-fila { grid-template-columns: 20px 1fr; }
  .reparto-destino { grid-column: 2; padding-top: 4px; border-top: 1px dashed var(--linea-suave); }
}

/* Importar del Drive: ancho, hoja por hoja, fila por fila. */
.entrevista.importar-drive { width: min(1080px, calc(100vw - 32px)); }
.imp-carpeta { display: flex; gap: 10px; margin: 12px 0; }
.imp-carpeta input {
  flex: 1; padding: 9px 12px; border-radius: 10px; font: 400 13px var(--cuerpo);
  background: var(--hueco); border: 1px solid var(--linea); color: var(--texto);
}
.imp-lista { display: grid; gap: 8px; max-height: 58vh; overflow-y: auto; overflow-x: hidden; }
.imp-fila > *, .imp-hoja summary > * { min-width: 0; overflow-wrap: anywhere; }
.imp-hoja { border: 1px solid var(--linea-suave); border-radius: 10px; background: var(--taller); }
.imp-hoja summary {
  display: grid; grid-template-columns: 20px 1fr auto; gap: 4px 10px; align-items: center;
  padding: 9px 12px; cursor: pointer;
}
.imp-hoja-nombre { font-size: 12.5px; }
.imp-hoja-dato { font-size: 11.5px; color: var(--apagado); text-align: right; }
.imp-estado { grid-column: 2 / -1; font-size: 11.5px; color: var(--apagado); }
.imp-estado small { display: block; color: var(--tenue); }
.imp-cuadra { color: var(--hoja); }
.imp-descuadre { color: var(--alerta); }
.imp-copia, .imp-aparte { color: var(--tenue); }
.imp-filas { display: grid; gap: 2px; padding: 0 8px 10px; }
.imp-fila {
  display: grid; grid-template-columns: 20px 92px 1fr 220px 92px; gap: 10px; align-items: baseline;
  padding: 5px 6px; border-radius: 6px; font-size: 12px; cursor: pointer;
}
.imp-fila:hover { background: var(--hueco); }
.imp-fila small { display: block; font-size: 10.5px; color: var(--apagado); }
.imp-fila small b { color: var(--alerta); font-weight: 500; }
.imp-apagada { opacity: .55; }
.imp-monto { text-align: right; }
.imp-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (max-width: 760px) {
  .imp-fila { grid-template-columns: 20px 1fr 80px; }
  .imp-fecha { grid-column: 2; }
  .imp-libro { grid-column: 2 / -1; }
  .imp-hoja summary { grid-template-columns: 20px 1fr; }
  .imp-hoja-dato { grid-column: 2; text-align: left; }
}

/* ══════════════════════════════════════════════════════════════════════
   CAPA DE ORDEN · cabecera de vista y controles
   Todo lo de abajo reordena lo que ya existía: la cabecera de cada
   pantalla pasa de una fila revuelta a dos renglones con jerarquía, y
   los controles (pestañas, buscador, fechas, listas) comparten una sola
   altura y un solo borde para que la fila se lea como una sola pieza.
   ══════════════════════════════════════════════════════════════════════ */

.registro-barra {
  display: block;
  padding: 20px 0 16px;
  border-top: 1px solid var(--linea-suave);
}

.cab-fila { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.cab-titulo { flex: 1 1 320px; min-width: 0; }
.registro-titulo { font: 800 21px/1.2 var(--display); letter-spacing: -.025em; }
.cab-titulo p { margin: 3px 0 0; font-size: 12.5px; color: var(--apagado); }
.cab-dice { max-width: 64ch; }

.cab-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.cab-acciones:empty { display: none; }
/* Lo que agrega algo va siempre al extremo: el mismo sitio en cada pantalla. */
.cab-acciones > .chip-primario { order: 2; }

.cab-herramientas {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  margin-top: 14px;
}
/* Si para este usuario no quedó ningún control visible, el renglón no ocupa. */
.cab-herramientas:not(:has(> * > *:not([hidden]))) { display: none; }
.cab-pestanas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.cab-refinos {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px; flex-wrap: wrap; margin-left: auto; min-width: 0; flex: 1 1 auto;
}

/* ── Pestañas: un solo bloque hundido, no cuatro pastillas sueltas ──── */
.filtros {
  display: inline-flex; gap: 2px; margin: 0; padding: 3px;
  background: var(--hueco); border: 1px solid var(--linea-suave); border-radius: 10px;
}
.filtro {
  padding: 6px 12px; border-radius: 7px; border: 1px solid transparent;
  color: var(--apagado); font: 500 12.5px var(--cuerpo); white-space: nowrap;
}
.filtro:hover { color: var(--texto); }
.filtro.activo {
  background: var(--taller); border-color: transparent; color: var(--texto);
  font-weight: 600; box-shadow: 0 1px 2px rgba(23,19,15,.10);
}

/* ── Una sola altura para todo lo que acota la lista ────────────────── */
.cab-refinos input[type="search"],
.cab-refinos select,
.cab-refinos .rango input,
.cab-acciones .chip,
.cab-acciones .mini,
.cab-acciones .boton {
  height: 34px; border-radius: 9px;
}
.cab-refinos input[type="search"],
.cab-refinos select {
  padding: 0 12px; background: var(--taller); border: 1px solid var(--linea);
  color: var(--texto); font: 400 13px var(--cuerpo); min-width: 0;
}
#buscar, #buscar-cliente, #buscar-colmenar, #buscar-egreso,
#buscar-almacen, #buscar-caja, #buscar-ingreso {
  flex: 1 1 220px; max-width: 300px; margin-left: 0;
}
.cab-refinos select {
  appearance: none; cursor: pointer; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236B655F' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
[data-tema="oscuro"] .cab-refinos select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23B9B2A8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.cab-refinos input[type="search"]:hover,
.cab-refinos select:hover { border-color: var(--linea-fuerte); }
.cab-refinos input[type="search"]:focus,
.cab-refinos select:focus,
.cab-refinos .rango input:focus { border-color: var(--acento-fuerte); outline: none; }
.cab-refinos .rango { gap: 7px; }
.cab-refinos .rango input { padding: 0 10px; font: 400 12.5px var(--dato); }

/* ── Acciones: una manda y el resto acompaña ────────────────────────── */
.cab-acciones .chip, .cab-acciones .mini {
  padding: 0 14px; font: 500 12.5px var(--cuerpo); border-radius: 9px;
}
.cab-acciones .boton {
  flex: 0 0 auto; flex-direction: row; align-items: center; gap: 6px;
  padding: 0 16px; font: 600 13px var(--cuerpo);
}
.chip-primario {
  background: var(--cera); border-color: var(--cera); color: #17130F; font-weight: 700;
}
.chip-primario:hover { background: var(--miel); border-color: var(--miel); color: #17130F; }

@media (max-width: 720px) {
  .registro-barra { padding: 16px 0 12px; }
  .registro-titulo { font-size: 19px; }
  .cab-titulo { flex-basis: 100%; }
  .cab-acciones { margin-left: 0; width: 100%; }
  .cab-acciones > * { flex: 1 1 auto; justify-content: center; }
  .cab-herramientas { margin-top: 12px; gap: 10px; }
  .cab-pestanas, .cab-refinos { width: 100%; margin-left: 0; }
  .cab-pestanas .filtros { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .cab-pestanas .filtros::-webkit-scrollbar { display: none; }
  .cab-refinos input[type="search"] { max-width: none; }
  .cab-refinos .rango, .cab-refinos select { flex: 1 1 140px; }
}

/* ══ Barra de abajo · el celular ══════════════════════════════════════
   Lo más usado a un dedo del pulgar, y en el medio, levantado, el gasto
   rápido: es lo que se anota de pie y lo que no debe atrasarse. En la
   computadora no existe —ahí manda el riel de la izquierda—. */
.barra-abajo { display: none; }

@media (max-width: 940px) {
  .barra-abajo {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px;
    position: fixed; right: 0; bottom: 0; left: 0; z-index: 43;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--taller) 94%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--linea-suave);
  }
  .abajo-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 7px 2px 5px; border: 0; border-radius: 10px;
    background: transparent; color: var(--apagado);
    font: 500 10.5px var(--cuerpo); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .abajo-icono { width: 22px; height: 22px; display: block; }
  .abajo-item.activo { color: var(--cera-texto); font-weight: 700; }
  .abajo-item.activo .abajo-icono { stroke-width: 2; }
  .abajo-item:active { background: var(--hueco); }
  .abajo-gasto { color: var(--cera-texto); }
  .abajo-gasto .abajo-icono {
    width: 38px; height: 38px; padding: 7px; margin-top: -16px;
    border-radius: 50%; background: var(--cera); color: #17130F;
    border: 3px solid var(--noche);
    box-shadow: 0 8px 18px -8px rgba(23,19,15,.55);
  }
  /* Sitio para que la barra no tape la última fila de ninguna lista. */
  body { padding-bottom: 76px; }
  /* La cortina del menú también apaga la barra de abajo. */
  .cortina-riel { z-index: 44; }
}

@media print {
  .barra-abajo { display: none !important; }
}

/* ══ Barra de arriba, en el celular ═══════════════════════════════════
   "Google sin conectar" empujaba la página 56 px hacia la derecha: toda
   la plataforma se podía arrastrar de lado en el teléfono. En pantalla
   chica los dos estados se dicen con su punto de color —verde o rojo—,
   que es lo único que se mira de reojo, y el nombre de quien entró se
   recorta en vez de empujar. */
#texto-google { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
#chip-usuario { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 720px) {
  .barra-top { gap: 8px; padding: 8px 12px; min-height: 50px; }
  .chip-texto, #texto-google { display: none; }
  #chip-local, #chip-google { width: 30px; padding: 0; justify-content: center; }
  #chip-usuario { max-width: 112px; }
  .barra-acciones { flex-wrap: nowrap; gap: 6px; }
}

/* El taller de emisión es de dos columnas; su cabecera cruza las dos. */
.taller > .cab-ancha { grid-column: 1 / -1; padding-top: 0; border-top: 0; }
.mapa-vista > .registro-barra { border-top: 0; }

/* ══ Tostadas ═════════════════════════════════════════════════════════
   El resultado de cada clic, encima de todo y donde sí se mira. En la
   computadora bajan por la esquina; en el celular suben desde abajo,
   por encima de la barra del pulgar. */
.tostadas {
  position: fixed; z-index: 70; right: 18px; bottom: 18px;
  display: flex; flex-direction: column; gap: 8px;
  width: min(380px, calc(100vw - 36px)); pointer-events: none;
}
.tostada {
  pointer-events: auto; cursor: pointer;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px 11px 12px; border-radius: 11px;
  background: var(--taller); border: 1px solid var(--linea);
  box-shadow: 0 12px 30px -12px rgba(23,19,15,.45);
  animation: tostada-entra .22s cubic-bezier(.2,.8,.3,1);
}
.tostada p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--texto); }
.tostada-marca { width: 4px; align-self: stretch; border-radius: 999px; background: var(--linea-fuerte); flex: none; }
.tostada[data-tono="ok"] .tostada-marca { background: var(--hoja); }
.tostada[data-tono="error"] .tostada-marca { background: var(--alerta); }
.tostada[data-tono="error"] { border-color: color-mix(in srgb, var(--alerta) 35%, var(--linea)); }
.tostada.yendose { animation: tostada-sale .2s forwards; }

@keyframes tostada-entra {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes tostada-sale {
  to { opacity: 0; transform: translateY(6px) scale(.98); }
}

@media (max-width: 940px) {
  .tostadas {
    right: 12px; left: 12px; width: auto;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}

@media print { .tostadas { display: none !important; } }

/* ══ Tablas ═══════════════════════════════════════════════════════════
   Tres cosas: que el monto no se parta en dos líneas, que la fila de
   rótulos siga visible al bajar por una lista larga, y que lo que borra
   no compita con el dato. */

/* overflow:hidden convertía la tabla en su propio contenedor de scroll y
   mataba el sticky; clip recorta igual sin crearlo. */
.tabla-envoltura { overflow: clip; }
/* Pero clip recorta en silencio: una tabla más ancha que su cuadro perdía
   la punta derecha, que es donde están Aprobar y Rechazar, sin forma de
   llegar. Cuando de verdad no entra (lo mide vigilarTablasAnchas, en
   app.js) ese cuadro se arrastra de lado, y ahí la fila de rótulos deja de
   pegarse arriba: con scroll el cuadro es contenedor y el sticky estorba. */
.tabla-envoltura.desborda { overflow-x: auto; }
.tabla-envoltura.desborda .tabla thead th { position: static; }
.tabla thead th {
  position: sticky; top: 53px; z-index: 2;
  background: var(--hueco);
}
.tabla td.der, .tabla th.der { white-space: nowrap; }
/* En dólares, el equivalente en soles baja a su propia línea. */
.tabla td.der .sufijo { display: block; }

/* Borrar nunca es lo primero que se lee en una fila. */
.tabla .enlace-peligro, .tabla [data-borrar], .tabla [data-eliminar] {
  color: var(--apagado); font-size: 12.5px;
}
.tabla tr:hover .enlace-peligro, .tabla tr:hover [data-borrar],
.tabla tr:hover [data-eliminar] { color: var(--alerta); }

@media (max-width: 720px) {
  /* Con scroll horizontal la tabla sí es contenedor: el sticky estorba. */
  .tabla thead th { position: static; }
}

/* ══ Facetas ══════════════════════════════════════════════════════════
   El ámbar de la marca ya dice "este es el botón que hace algo". Un
   filtro encendido no hace nada: solo acota. Se marca en tinta, para que
   en la misma pantalla no compitan dos ámbares con distinto significado. */
.fchip.on {
  background: var(--texto); border-color: var(--texto); color: var(--taller);
  font-weight: 600;
}
.fchip.on .cnt { opacity: .7; }

/* ══ La línea de carga ════════════════════════════════════════════════
   Después de cada clic que va al servidor, algo tiene que moverse. Una
   línea de 2 px arriba de todo alcanza, y como tarda 250 ms en aparecer,
   lo que contesta rápido no la muestra siquiera. */
.cargando-barra {
  position: fixed; top: 0; right: 0; left: 0; height: 2px; z-index: 80;
  opacity: 0; pointer-events: none; transition: opacity .18s;
  background: linear-gradient(90deg,
    transparent, var(--cera) 35%, var(--miel-honda) 50%, var(--cera) 65%, transparent);
  background-size: 220% 100%;
}
html.cargando .cargando-barra {
  opacity: 1; transition-delay: .25s;
  animation: cargando-corre 1.1s linear infinite;
}
@keyframes cargando-corre {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
  html.cargando .cargando-barra { animation: none; background: var(--cera); }
}

/* Mientras el servidor contesta, el botón que envió se ve trabajando. */
.ocupado { opacity: .6; cursor: progress; }

/* El dibujo de cada vista en el riel: el mismo que abajo en el celular. */
.riel-icono { width: 17px; height: 17px; flex: none; opacity: .8; }
.riel .vista.activo .riel-icono { opacity: 1; stroke-width: 1.9; }

/* ══ Aviso de pantalla ════════════════════════════════════════════════
   Lo que sale dos veces —al proveedor y en impuestos— iba como una línea
   de texto rojo suelta sobre la tabla. Como caja, con su marca, se lee
   como lo que es: una advertencia, no un título más. */
/* Caja de bloque, no flex: en flex cada <strong> se volvía su propia
   columna y "S/ 180.00" se partía en dos líneas. */
.aviso-caja {
  position: relative; display: block;
  margin: 14px 0 0; padding: 11px 14px 11px 38px;
  border-radius: 11px; font-size: 13px; line-height: 1.5;
  background: var(--taller-alto); border: 1px solid var(--linea-suave);
  color: var(--tenue);
}
.aviso-caja::before {
  content: '!'; position: absolute; left: 12px; top: 12px;
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--linea-fuerte); color: var(--taller);
  font: 700 12px/1 var(--cuerpo);
}
.aviso-caja[data-tono="error"] {
  background: color-mix(in srgb, var(--alerta) 7%, var(--taller));
  border-color: color-mix(in srgb, var(--alerta) 26%, var(--linea-suave));
  color: var(--texto);
}
.aviso-caja[data-tono="error"]::before { background: var(--alerta); color: #FFF; }
.aviso-caja[data-tono="error"] strong { color: var(--alerta); }
.aviso-caja .sufijo { display: block; margin-top: 2px; }

/* La pantalla nueva entra con un gesto corto: sin eso, el cambio de vista
   no se siente como respuesta al clic. El mapa solo aclara —moverle el
   contenedor a Leaflet mientras acomoda sus teselas no es buena idea—. */
@keyframes vista-entra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes vista-aclara { from { opacity: 0; } to { opacity: 1; } }
[data-panel].entrando { animation: vista-entra .18s ease-out; }
[data-panel="mapa"].entrando { animation: vista-aclara .18s ease-out; }

/* ══ Herramientas del mapa ════════════════════════════════════════════
   Punteo y pegado de coordenadas se usan solo cuando se está ubicando
   algo. Guardados tras una línea que se abre, el mapa arranca dos
   renglones más arriba. */
.mapa-herramientas { margin: 8px 0 4px; }
.mapa-herramientas > summary {
  list-style: none; cursor: pointer; width: fit-content;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--taller); border: 1px solid var(--linea);
  color: var(--tenue); font: 500 12.5px var(--cuerpo);
}
.mapa-herramientas > summary::-webkit-details-marker { display: none; }
.mapa-herramientas > summary::before {
  content: '+'; font: 600 14px/1 var(--dato); color: var(--acento-fuerte);
}
.mapa-herramientas[open] > summary::before { content: '−'; }
.mapa-herramientas > summary:hover { border-color: var(--acento-fuerte); color: var(--texto); }
.mapa-herramientas[open] > summary { margin-bottom: 8px; }

/* La franja vive dentro del tablero: ya no necesita su propio margen de
   página, y en pantalla ancha reparte las seis cifras en columnas iguales
   en vez de dejar una sola colgando en el segundo renglón. */
.tablero > .franja-pulso { margin: 2px 0 16px; }
@media (min-width: 52rem) {
  .franja-pulso { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; }
  /* En columnas iguales, el rótulo al costado no entra en todas: apilado
     las seis celdas se leen igual, rótulo arriba y cifra abajo. */
  .pulso { flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 10px; }
  .pulso-n { font-size: 13.5px; }
}

/* Arreglar con qué se pagó, sin abrir movimiento por movimiento. */
.medio-arreglo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--linea-suave);
}
.medio-arreglo .etiqueta { flex: 1 1 100%; }
.medio-arreglo select {
  height: 30px; padding: 0 8px; border-radius: 8px;
  background: var(--taller); border: 1px solid var(--linea);
  color: var(--texto); font: 400 12.5px var(--cuerpo); max-width: 160px;
}

/* ══ Lo demás del mapa del fundo ══════════════════════════════════════
   Eran siete enlaces subrayados en fila: en el celular se leían como un
   párrafo y había que buscar el que se quería. Como botones separados,
   cada uno se ve y se toca. "Guardar para ir sin señal" se subió arriba,
   con los de marcar: es lo que se hace antes de salir al campo. */
.mapa-mas {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0;
}
.mapa-mas .enlace {
  padding: 8px 13px; border-radius: 9px; text-decoration: none;
  background: var(--taller); border: 1px solid var(--linea);
  color: var(--tenue); font: 500 12.5px var(--cuerpo);
}
.mapa-mas .enlace:hover { border-color: var(--acento-fuerte); color: var(--texto); }

@media (max-width: 720px) {
  .mapa-acciones .boton, .mapa-acciones .boton-fantasma { flex: 1 1 100%; }
  .mapa-mas { display: grid; grid-template-columns: 1fr 1fr; }
  .mapa-mas .enlace { text-align: center; }
}

/* ══ El gasto rápido en el celular ════════════════════════════════════
   Después de agregarle categoría, fecha, quién pagó y comprobante, la
   pantalla quedó larga: el botón de guardar caía detrás de un scroll.
   Se queda pegado abajo, siempre a la vista, y la foto —lo que se tiene
   en la mano al pagar— subió junto al monto. */
.rapido-pie {
  position: sticky; bottom: 0; z-index: 2;
  margin: 14px -26px -24px; padding: 12px 26px calc(14px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--taller) 94%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--linea-suave);
}
.rapido-pie .boton { flex: 1; }
.rapido-foto .boton-fantasma { width: 100%; }

@media (max-width: 720px) {
  .rapido-pie { margin: 14px -16px -22px; padding-right: 16px; padding-left: 16px; }
}

/* ══ La caja en el celular ════════════════════════════════════════════
   Nueve columnas no entran en un teléfono: la tabla se arrastraba de
   lado y para ver un gasto había que empujarla. En pantalla chica cada
   movimiento es una ficha de dos líneas —qué fue y cuánto— con su
   categoría, quién pagó y con qué debajo. Lo que no entra no se pierde:
   está en la computadora, donde se revisa de verdad. */
.caja-resumen { display: none; }

@media (max-width: 720px) {
  .tabla-envoltura:has(.tabla-caja) { overflow: clip; }
  .tabla.tabla-caja { min-width: 0; display: block; }
  .tabla.tabla-caja thead { display: none; }
  .tabla.tabla-caja tbody, .tabla.tabla-caja tr, .tabla.tabla-caja td { display: block; }
  .tabla.tabla-caja tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 10px;
    padding: 11px 14px; border-bottom: 1px solid var(--linea-suave);
  }
  .tabla.tabla-caja td { padding: 0; border: 0; font-size: 13.5px; }
  .tabla.tabla-caja .caja-aparte { display: none; }
  .tabla.tabla-caja .celda-fecha { font-size: 11.5px; color: var(--apagado); }
  .tabla.tabla-caja .celda-accion { font-weight: 600; white-space: normal; max-width: none; }
  .tabla.tabla-caja .caja-resumen {
    display: block; margin-top: 2px;
    font-size: 11.5px; font-weight: 400; color: var(--apagado);
  }
  .tabla.tabla-caja .caja-plata {
    grid-column: 2; grid-row: 1 / span 2; align-self: center;
    font-size: 15px; font-weight: 600; white-space: nowrap;
  }
  .tabla.tabla-caja .caja-plata:empty { display: none; }
  .tabla.tabla-caja .caja-salida:not(:empty)::before { content: '−'; }
  .tabla.tabla-caja .acciones-fila { grid-column: 1 / -1; justify-content: flex-start; gap: 14px; margin-top: 6px; }
}

/* ══ Petty Cash ═══════════════════════════════════════════════════════
   Tres tarjetas arriba y nada desplegado de antemano: el saldo es un
   dato —no hay nada que abrir de él— y las otras dos se tocan para que
   el desglose salga donde ya estás mirando. El mes manda sobre las
   fechas sueltas: una caja se cierra por mes y se pregunta por mes. */

.caja-tarjetas { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.tarjeta-saldo { position: relative; overflow: hidden; }
.tarjeta-sello {
  position: absolute; right: -10px; bottom: -14px; width: 86px; height: 86px;
  color: var(--acento-fuerte); opacity: .12; pointer-events: none;
}

.tarjeta-abre {
  position: relative; cursor: pointer; text-align: left; font: inherit;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.tarjeta-abre:hover { border-color: var(--linea-fuerte); }
.tarjeta-abre:active { transform: translateY(1px); }
.tarjeta-abre.abierta {
  border-color: var(--acento-fuerte);
  box-shadow: 0 0 0 1px var(--acento-fuerte) inset;
}
.tarjeta-flecha {
  position: absolute; top: 14px; right: 14px;
  width: 7px; height: 7px; border-right: 1.6px solid var(--apagado);
  border-bottom: 1.6px solid var(--apagado); transform: rotate(45deg);
  transition: transform .18s;
}
.tarjeta-abre.abierta .tarjeta-flecha { transform: rotate(-135deg); border-color: var(--acento-fuerte); }
.tarjeta-ingresos .tarjeta-n { color: var(--hoja); }
.tarjeta-egresos .tarjeta-n { color: var(--cera-texto); }

.caja-detalle {
  margin: 0 0 16px; padding: 16px 18px;
  background: var(--taller); border: 1px solid var(--linea-suave); border-radius: var(--r);
  animation: vista-entra .18s ease-out;
}
.caja-detalle .bloque-cabeza { margin-bottom: 10px; }
.caja-detalle .bloque-cabeza .mini { margin-left: auto; }
.caja-depositos { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 1px; }
.caja-depositos li {
  display: grid; grid-template-columns: 1fr auto; gap: 0 12px;
  padding: 8px 0; border-top: 1px solid var(--linea-suave); font-size: 13.5px;
}
.caja-depositos .sufijo { grid-column: 1; font-size: 11.5px; }
.caja-depositos .mono { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 600; }

/* Las marcas: lo que está acotando la lista, quitable de un toque. */
.caja-marcas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.caja-marca {
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--texto); border: 1px solid var(--texto); color: var(--taller);
  font: 500 12px var(--cuerpo);
}
.caja-marca:hover { background: var(--alerta); border-color: var(--alerta); }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Adentro de una categoría: lo que estás viendo y por dónde se vuelve. */
.cat-adentro {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  padding: 12px 14px; border-radius: var(--r);
  background: var(--taller); border: 1px solid var(--linea-suave);
}
.cat-adentro-nombre { font: 700 15px var(--display); letter-spacing: -.01em; }
.cat-adentro-cifra { font-size: 15px; font-weight: 600; }
.cat-volver { margin-right: 2px; }

/* Anotar y buscar: dos botones redondos, sin texto que leer. El icono
   llevaba su tamaño solo en la lupa y se perdía; ahora los dos miden lo
   mismo y se ven iguales en la barra. */
.caja-mas, .caja-lupa, .caja-enlace {
  width: 38px; min-width: 38px; height: 38px;
  padding: 0; gap: 0; justify-content: center;
}
.caja-lupa svg, .caja-enlace svg { width: 17px; height: 17px; display: block; }
.caja-mas-signo { font: 400 24px/1 var(--cuerpo); display: block; margin-top: -2px; }

@media (max-width: 720px) {
  .caja-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tarjeta-saldo { grid-column: 1 / -1; }
  .caja-detalle { padding: 14px 15px; }
}

/* El campo libre para unir personas, al lado de los dos selects. */
.medio-arreglo input {
  height: 30px; padding: 0 10px; border-radius: 8px; max-width: 150px;
  background: var(--taller); border: 1px solid var(--linea);
  color: var(--texto); font: 400 12.5px var(--cuerpo);
}
.medio-arreglo input:focus { border-color: var(--acento-fuerte); outline: none; }

/* El historial no se ve hasta que se pide: duerme fuera de la vista y se
   muda al panel de Egresos cuando lo abren. */
.casa-lista[hidden] { display: none !important; }
.caja-panel-cuerpo { margin-top: 12px; }
.caja-panel-cuerpo .tabla-envoltura { border: 0; border-radius: 0; background: transparent; }
.caja-modos { margin-left: 8px; }
.caja-reparto-pie { margin: -4px 0 10px; }
.caja-detalle .bloque-cabeza { flex-wrap: wrap; gap: 8px; }

@media (max-width: 720px) {
  .caja-modos { order: 3; width: 100%; margin-left: 0; }
  .caja-detalle .bloque-cabeza .mini { order: 2; }
}

/* Cada fila del reparto es un botón que lleva a esos movimientos. Mantiene
   la misma rejilla de antes: lo que cambia es que ahora se puede entrar. */
.gerente-lista li { display: block; }
.gerente-fila {
  width: 100%; cursor: pointer; text-align: left; font: inherit;
  display: grid; grid-template-columns: minmax(0, 1fr) 54px auto;
  gap: 4px 10px; align-items: center;
  padding: 5px 7px; margin: 0 -7px; border: 0; border-radius: 8px;
  background: transparent; color: inherit;
  transition: background .14s;
}
button.gerente-fila:hover:not([disabled]) { background: var(--hueco); }
button.gerente-fila:hover:not([disabled]) .gerente-que { color: var(--acento-fuerte); }
/* La misma rejilla para las filas que no se pueden abrir —los medios de
   pago, los depósitos—: sin ella la barra perdía su sitio y se estiraba
   tapando media pantalla. */
.gerente-fila[disabled], div.gerente-fila { cursor: default; padding: 2px 0; margin: 0; }

/* ══ Los egresos de un recorte, a pantalla casi completa ══════════════
   Una lista de 50 movimientos no se lee espiando entre dos bloques: el
   cuadro se abre grande, con su propio scroll, y al cerrarlo la lista
   vuelve a su sitio. */
.hoja-lista {
  width: min(980px, calc(100vw - 20px));
  height: min(92dvh, 940px);
  max-height: 92dvh;
}
.hoja-lista .entrevista-caja {
  display: flex; flex-direction: column; height: 100%;
  padding: 18px 20px 0;
}
.hoja-lista-cuerpo {
  flex: 1; min-height: 0; overflow-y: auto;
  margin: 12px -20px 0; padding: 0 20px 20px;
}
.hoja-lista-cuerpo .tabla-envoltura { border: 0; background: transparent; }
.hoja-lista .entrevista-titulo { font-size: 18px; }

/* El bolsillo ya no ocupa el cuadro: queda plegado para cuando se busca. */
.gerente-extra { margin-top: 14px; }
.gerente-extra > summary {
  list-style: none; cursor: pointer; width: fit-content;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--taller); border: 1px solid var(--linea);
  color: var(--tenue); font: 500 12px var(--cuerpo);
}
.gerente-extra > summary::-webkit-details-marker { display: none; }
.gerente-extra > summary::before { content: '+'; font: 600 13px/1 var(--dato); color: var(--acento-fuerte); }
.gerente-extra[open] > summary::before { content: '−'; }
.gerente-extra[open] > summary { margin-bottom: 10px; }

@media (max-width: 720px) {
  .hoja-lista { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .hoja-lista .entrevista-caja { padding: 16px 14px 0; }
  .hoja-lista-cuerpo { margin: 10px -14px 0; padding: 0 14px 18px; }
}

/* La vuelta atrás es solo la flecha: el nombre de lo que se está viendo
   ya está al lado y no hace falta repetirlo en el botón. */
.cat-volver { font-size: 15px; line-height: 1; padding: 4px 12px; }

/* De dónde salió el gasto: del fondo de Petty Cash o cargado aparte. Lo
   que vino de la caja lleva su marca; lo demás no necesita decir nada. */
.marca-origen {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: 999px; background: var(--hueco); color: var(--apagado);
  font: 500 9.5px var(--dato); letter-spacing: .08em; text-transform: uppercase;
  vertical-align: middle;
}

/* ══ Dentro del cuadro ════════════════════════════════════════════════
   El recorte ya dice de qué es: repetir la categoría en cada fila gasta
   el ancho que necesitan el detalle y el monto, y por eso la tabla se
   salía por la derecha. Adentro se muestran solo las columnas que
   todavía informan algo. */
.en-hoja .celda-comp,
.en-hoja .celda-saldo,
.en-hoja .celda-entra { display: none; }
.en-hoja.sin-categoria .celda-cat { display: none; }
.en-hoja.sin-persona .celda-persona { display: none; }
.en-hoja { min-width: 0; }
/* Red de seguridad: si aun así no entra, se arrastra en vez de cortarse. */
.hoja-lista-cuerpo { overflow-x: auto; }

/* El nivel de abajo como filtro: subcategorías dentro de una categoría,
   categorías dentro de un fundo o una persona. */
.hoja-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 10px -20px 0; padding: 10px 20px 0;
  border-top: 1px solid var(--linea-suave);
}
.hoja-chips .fchip { font-size: 12px; }
.hoja-chips .cnt { font-size: 10.5px; }

@media (max-width: 720px) {
  .hoja-chips {
    margin: 8px -14px 0; padding: 10px 14px 0;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  }
  .hoja-chips::-webkit-scrollbar { display: none; }
  .hoja-chips .fchip { flex: 0 0 auto; }
}

/* ══ El lápiz de cada fila ════════════════════════════════════════════
   "Editar" y "Eliminar" en texto competían con el dato en cada renglón.
   Como iconos callados se ven cuando se los busca y desaparecen cuando
   se está leyendo. */
.icono-fila {
  display: inline-grid; place-items: center; cursor: pointer;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px;
  background: transparent; color: var(--tono-frio);
  transition: background .14s, color .14s;
}
.icono-fila svg { width: 15px; height: 15px; display: block; }
.icono-fila:hover { background: var(--hueco); color: var(--texto); }
.icono-peligro:hover { background: color-mix(in srgb, var(--alerta) 10%, transparent); color: var(--alerta); }
.tabla tbody tr:hover .icono-fila { color: var(--apagado); }
.acciones-fila { gap: 2px; align-items: center; }

/* ══ Que la lista entre completa en el cuadro ═════════════════════════
   El detalle se cortaba con puntos suspensivos y aun así la tabla se
   iba por la derecha: adentro del cuadro el detalle envuelve y la tabla
   se reparte el ancho que hay, sin mínimos. */
/* Nada de table-layout fijo: con anchos repartidos a mano el detalle se
   quedaba en 135 px y una frase normal caía en ocho renglones. Auto, con
   el detalle envolviendo y los demás apretados, reparte solo. */
.en-hoja .tabla { width: 100%; min-width: 0; }
.en-hoja .celda-accion {
  max-width: none; width: 46%; white-space: normal; overflow: visible;
  text-overflow: clip; font-size: 13px; color: var(--texto);
}
.en-hoja .celda-fecha, .en-hoja .celda-sub,
.en-hoja .celda-persona, .en-hoja .caja-plata { white-space: nowrap; width: 1%; }
.en-hoja .celda-sub, .en-hoja .celda-persona { font-size: 12.5px; }
.en-hoja .celda-quien, .en-hoja .celda-cliente { white-space: normal; max-width: none; }
.en-hoja tbody td { padding: 10px 10px; }
/* El rótulo "SUBCATEGORÍA", con su espaciado de letras y sin envolver,
   reclamaba 134 px: tanto como el detalle. Adentro envuelve y la columna
   se achica a lo que mide su contenido. */
.en-hoja thead th { padding: 9px 10px; white-space: normal; letter-spacing: .07em; }
.en-hoja .celda-accion { min-width: 190px; }

/* La franja de rótulos se pega al borde del cuadro, no al de la página:
   adentro el que hace scroll es el cuadro, y con el tope de la pantalla
   la franja flotaba dejando pasar una fila por debajo. */
.en-hoja thead th { top: 0; }

/* ══ La ficha del movimiento, encima ══════════════════════════════════
   Vivía al final de la pantalla: tocar el lápiz mandaba el scroll hasta
   abajo y guardar devolvía a cualquier parte. Es el mismo formulario,
   mudado a un cuadro que se abre donde uno ya estaba mirando. */
.hoja-editar { width: min(860px, calc(100vw - 20px)); max-height: 92dvh; }
.hoja-editar .entrevista-caja { display: flex; flex-direction: column; max-height: 92dvh; }
.hoja-editar-cuerpo { overflow-y: auto; margin-top: 10px; }
.hoja-editar-cuerpo .carga { margin: 0; border: 0; background: transparent; padding: 0; }
.hoja-editar .entrevista-titulo { font-size: 16px; }
.casa-form[hidden] { display: none !important; }

@media (max-width: 720px) {
  .hoja-editar { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .hoja-editar .entrevista-caja { max-height: 100dvh; }
}

/* El "+" al lado de la categoría: agregar una sin salir de la ficha. */
.campo-con-mas { display: flex; gap: 6px; align-items: stretch; }
.campo-con-mas select { flex: 1; min-width: 0; }
.campo-con-mas .mini { flex: none; width: 34px; padding: 0; font-size: 15px; line-height: 1; }
.nueva-categoria {
  display: grid; gap: 8px; align-items: end;
  grid-template-columns: minmax(0, 1fr) minmax(0, 150px) auto;
  padding: 12px 14px; border-radius: 10px;
  background: var(--hueco); border: 1px dashed var(--linea-fuerte);
}
.nueva-categoria .cajon-ayuda { grid-column: 1 / -1; margin: 0; }
.nueva-categoria input, .nueva-categoria select {
  height: 34px; padding: 0 10px; border-radius: 8px;
  background: var(--taller); border: 1px solid var(--linea);
  color: var(--texto); font: 400 13px var(--cuerpo); width: 100%;
}
.nueva-categoria .mini { height: 34px; }

@media (max-width: 720px) {
  .nueva-categoria { grid-template-columns: 1fr; }
}

/* ══ El mapa del fundo a pantalla completa ════════════════════════════
   Sin la API del navegador: en el iPhone solo la admite el video, así
   que el marco se estira con CSS. Igual en la computadora y en Android,
   y se sale con Esc o con el mismo botón. */
.mapa-marco { position: relative; }
.mapa-expandir {
  position: absolute; top: 10px; right: 10px; z-index: 450;
  display: grid; place-items: center; cursor: pointer;
  width: 34px; height: 34px; padding: 0; border-radius: 9px;
  background: color-mix(in srgb, var(--taller) 92%, transparent);
  border: 1px solid var(--linea); color: var(--tenue);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.mapa-expandir svg { width: 17px; height: 17px; }
.mapa-expandir:hover { border-color: var(--acento-fuerte); color: var(--texto); }

.mapa-marco.mapa-completo {
  position: fixed; inset: 0; z-index: 60; margin: 0; border-radius: 0;
  background: var(--noche);
}
.mapa-marco.mapa-completo .mapa-fundo {
  height: 100dvh; min-height: 0; border: 0; border-radius: 0;
}
.mapa-marco.mapa-completo .mapa-expandir {
  top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px;
  width: 40px; height: 40px;
}
/* Con el mapa estirado, la página de atrás no se arrastra. */
body.con-mapa-completo { overflow: hidden; }

/* Las dos maneras de mirar el fundo. */
.mapa-pestanas { margin: 10px 0 12px; }

/* ══ Lo que se revisó ═════════════════════════════════════════════════
   Las visitas se anotan de a una —o de a lote entero— y después no había
   dónde ver qué se hizo: cuántas se revisaron hoy, quién y en qué lotes. */
#revisiones-hechas .bloque-cabeza { flex-wrap: wrap; gap: 8px; }
.revision-cifra { margin: 6px 0 12px; font-size: 14px; color: var(--tenue); }
.revision-cifra strong { font-size: 19px; color: var(--texto); }
.revision-grupos {
  display: grid; gap: 14px; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.revision-grupo h5 {
  margin: 0 0 6px; font-family: var(--dato); font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--apagado);
}
.revision-grupo .gerente-monto { font-weight: 600; }

@media (max-width: 720px) {
  .revision-grupos { grid-template-columns: 1fr 1fr; }
}

/* ══ La ficha del servicio ════════════════════════════════════════════
   Va al costado y no al centro: la lista de atrás queda a la vista y se
   salta de un servicio a otro sin cerrar nada. Lo que faltaba era ancho
   —la dirección de un fundo se partía en cuatro líneas y las pestañas
   caían en dos renglones—, así que ahora entra más y se puede ensanchar
   del todo cuando hay mucho que leer. */
.cajon-ancho { width: min(760px, 100vw); }
.cajon-gigante { width: min(1180px, 100vw); }

.cajon-ensanchar { display: none; }
@media (min-width: 1100px) {
  .cajon-ensanchar { display: inline-grid; place-items: center; }
  .cajon-ensanchar svg { width: 15px; height: 15px; }
}

/* La fecha del grupo de lotes se corrige tocándola. */
.lotes-grupo .enlace { font: inherit; color: inherit; }
.lotes-grupo .enlace:hover { color: var(--acento-fuerte); }

/* ══ Lotes con partes ═════════════════════════════════════════════════
   Un lote grande se marca por pedazos —P04-1, P04-2…— y la tabla se
   llenaba de renglones sueltos. Se suman a su lote y el detalle se abre
   con el +. */
.lote-abre {
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  padding: 0; border: 0; background: transparent; color: inherit;
  font: inherit; text-align: left;
}
.lote-mas {
  display: grid; place-items: center; width: 16px; height: 16px;
  border-radius: 5px; background: var(--hueco); color: var(--tenue);
  font: 600 12px/1 var(--dato);
}
.lote-abre:hover .lote-mas { background: var(--acento); color: #17130F; }
.lote-abre .sufijo { font-size: 11px; }
.sublote td { background: var(--taller-alto); }
.sublote-nombre { padding-left: 26px !important; color: var(--tenue); font-size: 12.5px; }

/* En qué fundos tiene colmenas cada apicultor. El mismo pone en dos
   sitios a la vez y en la lista no había manera de verlo. */
.fundos-apicultor { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.marca-fundo {
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--hueco); border: 1px solid transparent;
  color: var(--tenue); font: 500 11px var(--cuerpo);
}
.marca-fundo .mono { font-size: 10.5px; color: var(--apagado); }
.marca-fundo:hover { border-color: var(--acento-fuerte); color: var(--texto); }

/* ══ Qué no cuadra ════════════════════════════════════════════════════
   Las piezas de un servicio se anotan por separado y cada una puede
   quedar coja sin que nadie se entere hasta que el fundo pregunta. */
.revision-servicio { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.falla {
  padding: 10px 12px 10px 14px; border-radius: 10px;
  background: var(--taller-alto); border-left: 3px solid var(--linea-fuerte);
}
.falla-alerta { border-left-color: var(--alerta); background: color-mix(in srgb, var(--alerta) 6%, var(--taller)); }
.falla-ojo { border-left-color: var(--cera); }
.falla-que { display: block; font-size: 13.5px; color: var(--texto); }
.falla-como { display: block; margin-top: 2px; font-size: 12px; color: var(--apagado); }

body::before{content:"ENTORNO DE PRUEBAS · lo que hagas aquí no toca la plataforma real";position:fixed;z-index:2147483647;top:0;left:0;right:0;padding:3px 8px;background:#b42318;color:#fff;font:600 12px/1.4 system-ui,sans-serif;text-align:center;pointer-events:none;opacity:.94}