/* IberMoria · lo propio de cada pantalla. */
.sin-js { padding: 24px; }
.ancho { width: 100%; }
.fin { justify-content: flex-end; }
.sin-borde { border: 0; margin: 0; padding: 0; min-width: 0; }
.apagado { color: var(--tinta-3); }
.bien-texto { color: var(--bien-texto); display: flex; gap: 6px; align-items: center; }
.con-boton { position: relative; display: block; }
.con-boton .entrada { padding-right: 48px; }
.con-boton .boton { position: absolute; right: 3px; top: 50%; translate: 0 -50%; min-height: 36px; width: 38px; }
.columna { min-width: 0; }
/* Modo espejo: fija arriba, que nadie lo confunda con el conmutador de verdad. */
.banda-espejo { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--e2); padding: 8px 16px;
  background: var(--vivo-suave); color: var(--vivo-texto); border-bottom: 1px solid currentColor; font-size: 0.92rem; }
.banda-espejo svg { flex: none; width: 18px; height: 18px; }

/* ---------- Entrar: siempre oscura, con el fondo propio del conmutador ---------- */
body.en-entrada { background: oklch(0.16 0.012 240); }
.entrada-fondo {
  min-height: 100dvh; display: grid; align-items: center; padding: var(--e6) clamp(16px, 7vw, 120px);
  background: oklch(0.16 0.012 240) image-set(url(../img/acceso.avif) type('image/avif'), url(../img/acceso.webp) type('image/webp')) 70% center / cover no-repeat;
  color-scheme: dark;
}
.entrada-tarjeta {
  width: min(100%, 420px); padding: var(--e8); border-radius: 22px; color: oklch(0.95 0.008 220);
  background: linear-gradient(180deg, oklch(0.24 0.014 235 / .86), oklch(0.19 0.012 235 / .9));
  border: 1px solid oklch(0.45 0.03 220 / .45);
  box-shadow: 0 1px 0 oklch(1 0 0 / .06) inset, 0 30px 80px -20px oklch(0 0 0 / .7), 0 0 0 1px oklch(0 0 0 / .3);
  display: grid; gap: var(--e4);
}
.entrada-tarjeta .marca.grande { padding: 0 0 var(--e2); color: inherit; }
.entrada-tarjeta .marca.grande svg { width: 44px; height: 44px; }
.entrada-tarjeta .marca small { color: oklch(0.75 0.015 220); }
.entrada-tarjeta h1 { font-size: 1.5rem; }
.entrada-lema, .entrada-pie { color: oklch(0.78 0.015 220); font-size: .9375rem; }
.entrada-pie { font-size: .8125rem; border-top: 1px solid oklch(0.4 0.02 230 / .5); padding-top: var(--e4); }
.entrada-tarjeta form { display: grid; gap: var(--e4); }
.entrada-tarjeta .campo > span { color: oklch(0.82 0.012 220); }
.entrada-tarjeta .entrada { background: oklch(0.15 0.01 235 / .8); border-color: oklch(0.42 0.02 230); color: oklch(0.96 0.005 220); }
.entrada-tarjeta .entrada:focus-visible { border-color: oklch(0.72 0.1 210); box-shadow: 0 0 0 3px oklch(0.45 0.08 215 / .5); }
.entrada-tarjeta .boton.discreto { color: oklch(0.8 0.02 220); }
.entrada-tarjeta .boton.discreto:hover { background: oklch(0.3 0.02 230); }
.entrada-tarjeta .boton.primario { background: oklch(0.62 0.1 215); color: oklch(0.15 0.01 235); min-height: 46px; font-size: 1rem; --icono-acento: oklch(0.45 0.13 50); }
.entrada-tarjeta .boton.primario:hover { background: oklch(0.69 0.1 212); }
.entrada-tarjeta .error-campo { color: oklch(0.82 0.1 25); }
@media (max-width: 600px) {
  .entrada-fondo { align-items: end; padding: var(--e4); background-position: 62% center; }
  .entrada-tarjeta { padding: var(--e6) var(--e5); }
}

/* ---------- Inicio ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 18px; border: 1px solid var(--borde);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); gap: var(--e6); align-items: end;
  padding: var(--e8); margin-bottom: var(--e6); min-height: 248px;
  background: var(--superficie) var(--img-hero) right center / cover no-repeat; box-shadow: var(--sombra), var(--brillo);
}
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--velo) 0%, var(--velo) 35%, transparent 70%); }
.hero.esperando { display: block; }
.hero-estado { display: inline-flex; align-items: center; gap: var(--e2); font-weight: 600; font-size: .875rem; color: var(--tinta-2);
  padding: 4px 12px 4px 10px; border-radius: var(--r-pastilla); background: var(--superficie); box-shadow: var(--sombra); margin-bottom: var(--e4); }
.hero h1 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); }
.vivo-grande { display: flex; align-items: center; gap: var(--e2); margin-top: var(--e3); color: var(--tinta-2); }
.vivo-grande b { font-size: var(--t-cifra); font-weight: 700; color: var(--tinta); letter-spacing: -.03em; line-height: 1; }
.vivo-grande .punto { width: 10px; height: 10px; }
.libro { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .9375rem; background: var(--superficie); border-radius: var(--r-panel);
  box-shadow: var(--sombra-alta), var(--brillo); border: 1px solid var(--borde); overflow: hidden; }
.libro th, .libro td { padding: 9px var(--e4); text-align: right; border-bottom: 1px solid var(--borde); }
.libro thead th { font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-3); font-weight: 600; background: var(--superficie-2); }
.libro tbody th { text-align: left; font-weight: 500; color: var(--tinta-2); }
.libro tbody tr:last-child > * { border-bottom: 0; }
.libro td { font-weight: 600; }
.libro tr.apagado td { color: var(--tinta-2); font-weight: 500; }
.libro tr.margen th, .libro tr.margen td { background: var(--acento-suave); color: var(--acento-texto); font-weight: 700; }
.hero.cliente { grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); }
.saldo-etiqueta { color: var(--tinta-2); font-weight: 550; }
.saldo { font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.hero-sub { color: var(--tinta-2); margin: var(--e2) 0 var(--e4); max-width: 52ch; }
@media (max-width: 900px) {
  .hero, .hero.cliente { grid-template-columns: minmax(0, 1fr); padding: var(--e5) var(--e4); background-size: auto 62%; background-position: right top; }
  .hero::before { background: linear-gradient(180deg, transparent 0%, var(--velo) 34%, var(--velo) 100%); }
}

.leyenda { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--tinta-2); flex-wrap: wrap; }
.leyenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-left: 6px; }
.l-hoy { background: var(--acento); } .l-ayer { background: var(--borde-fuerte); } .l-margen { background: var(--vivo); }
.grafica { width: 100%; height: auto; display: block; overflow: visible; }
.grafica text { font: 500 10px var(--fuente); fill: var(--tinta-3); }
.grafica .eje { stroke: var(--borde-fuerte); }
.grafica .guia { stroke: var(--borde); stroke-dasharray: 3 4; }
.grafica .barra { fill: var(--acento); }
.grafica .sombra-barra { fill: var(--superficie-2); stroke: var(--borde); }
.grafica g:hover .barra { fill: var(--acento-hover); }
.grafica .relleno { fill: var(--acento-suave); opacity: .8; }
.grafica .linea { fill: none; stroke: var(--acento); stroke-width: 2.2; stroke-linejoin: round; }
.grafica .linea.dos { stroke: var(--vivo); stroke-width: 1.8; stroke-dasharray: 5 4; }
.grafica .punto-area { fill: transparent; }
.grafica .punto-area:hover { fill: var(--acento); fill-opacity: .25; }

/* ---------- Ficha de cliente ---------- */
.ficha-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e3) var(--e6); align-items: end; margin-bottom: var(--e5); }
.ficha-cab > .boton { grid-column: 1 / -1; justify-self: start; margin-left: calc(-1 * var(--e3)); }
.quien.grande .avatar { width: 56px; height: 56px; border-radius: 16px; font-size: 1.15rem; }
.quien.grande h1 { font-size: var(--t-ficha); white-space: normal; }
.ficha-saldo { display: grid; justify-items: end; gap: 2px; }
.ficha-saldo span:first-child { color: var(--tinta-3); font-size: .8125rem; }
.ficha-saldo b { font-size: 1.75rem; letter-spacing: -.03em; }
@media (max-width: 600px) { .ficha-cab { grid-template-columns: minmax(0, 1fr); } .ficha-saldo { justify-items: start; } }

/* ---------- Números: tablero de arrastrar ---------- */
.tablero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: var(--e6); align-items: start; }
.tablero .destinos { position: sticky; top: var(--e4); }
@media (max-width: 1000px) { .tablero { grid-template-columns: minmax(0, 1fr); } .tablero .destinos { position: static; order: -1; } }
.panel-cuerpo.estrecho { padding: var(--e3) var(--e5); border-bottom: 1px solid var(--borde); }
.nums { list-style: none; margin: 0; padding: 0; }
.nums li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--e3); align-items: center; padding: var(--e3) var(--e5); border-bottom: 1px solid var(--borde); background: var(--superficie); }
.nums li[draggable="true"] { cursor: grab; }
.nums li.arrastrando { opacity: .45; }
.nums .asa { color: var(--tinta-3); }
.nums .num-datos b { font-size: 1rem; }
.nums .sub { display: flex; gap: 4px; align-items: center; color: var(--tinta-3); font-size: .8125rem; flex-wrap: wrap; }
.nums .asignar-aqui { grid-column: 1 / -1; }
.nums .asignar-aqui:empty { display: none; }
@media (max-width: 720px) { .nums li { grid-template-columns: minmax(0, 1fr) auto; } .nums .asa { display: none; } .nums li > .chips { grid-column: 1 / -1; justify-content: flex-start; } }
.zonas { display: grid; gap: var(--e2); }
.zonas-de { font-size: .875rem; color: var(--tinta-2); }
.zona { display: flex; gap: var(--e3); align-items: center; padding: var(--e3); border-radius: 12px; border: 1.5px dashed var(--borde-fuerte); background: var(--superficie-2);
  transition: border-color var(--rapido) var(--ease), background-color var(--rapido) var(--ease), transform var(--rapido) var(--ease); }
.zona .sub { display: block; color: var(--tinta-3); font-size: .8125rem; }
.soltando .zona { border-color: var(--acento); background: var(--acento-suave); }
.zona.encima { transform: scale(1.02); background: var(--acento); color: var(--sobre-acento); border-style: solid; }
.zona.encima .sub { color: inherit; }

/* ---------- Llamadas ---------- */
.filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 136px), 1fr)); gap: var(--e3); padding: var(--e4) var(--e5); margin-bottom: var(--e4); }
.filtros .ancho-2 { grid-column: span 2; }
@media (max-width: 520px) { .filtros .ancho-2 { grid-column: 1 / -1; } }
.resumen-llamadas { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e4); color: var(--tinta-2); }
.resumen-llamadas b { color: var(--tinta); }
.resumen-llamadas:empty { display: none; }
.acciones-procesar { display: flex; gap: var(--e2); flex-wrap: wrap; }

/* ---------- Tarifas ---------- */
.tarifas-rejilla { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: var(--e6); align-items: start; }
@media (max-width: 1000px) { .tarifas-rejilla { grid-template-columns: minmax(0, 1fr); } }
.lista-tarifas ul { list-style: none; margin: 0; padding: var(--e2); display: grid; gap: 2px; }
.lista-tarifas button { width: 100%; text-align: left; border: 0; background: none; padding: var(--e3); border-radius: var(--r-campo); cursor: pointer; display: grid; gap: 2px; }
.lista-tarifas button:hover { background: var(--hover); }
.lista-tarifas button[aria-current="true"] { background: var(--acento-suave); color: var(--acento-texto); }
.lista-tarifas .sub { font-size: .8125rem; color: var(--tinta-3); }
.probador { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: flex-end; }
.probador .numero { flex: 1 1 220px; }
.probador .segundos { flex: 0 1 120px; }
.probador .boton { flex: 1 0 auto; max-width: 100%; }
@media (min-width: 601px) { .probador .boton { flex-grow: 0; } }
.probador-resultado:not(:empty) { margin-top: var(--e4); }
.probado { display: grid; gap: var(--e2); padding: var(--e4); border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--borde); }
.probado.mal { background: var(--mal-suave); color: var(--mal-texto); }
.probado-destino { display: flex; gap: var(--e2); align-items: center; font-weight: 600; }
.probado-precio b { font-size: 1.75rem; letter-spacing: -.03em; }
.tabla.compacta { margin-top: var(--e2); background: var(--superficie); border-radius: var(--r-campo); }
.form-precio { border-bottom: 1px solid var(--borde); display: grid; gap: var(--e3); }
.errores-imp { margin: 0; padding-left: var(--e5); color: var(--mal-texto); font-size: .875rem; font-family: var(--mono); }

/* ---------- Rutas ---------- */
.rutas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--e4); }
.ruta { padding: var(--e4) var(--e5); }
.ruta header { margin-bottom: var(--e3); }
.ruta header p { font-size: .8125rem; }
.cadena { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.cadena li { display: flex; align-items: center; gap: var(--e2); padding: 8px 0; position: relative; }
.cadena li + li::before { content: ''; position: absolute; left: 11px; top: -8px; height: 16px; border-left: 1.5px dashed var(--borde-fuerte); }
.cadena .paso { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--superficie-2); border: 1px solid var(--borde); font-size: .75rem; }

/* ---------- Pagos, actividad, guía ---------- */
.suma-pagos { padding: var(--e3) var(--e5); border-bottom: 1px solid var(--borde); color: var(--tinta-2); font-size: .875rem; }
.entrada.grande { font-size: 1.25rem; font-weight: 600; }
.cronologia { list-style: none; margin: 0; padding: var(--e2) var(--e5); }
.cronologia li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--e4); padding: var(--e3) 0; border-bottom: 1px solid var(--borde); }
.cronologia li:last-child { border-bottom: 0; }
.cronologia time { color: var(--tinta-3); font-size: .8125rem; padding-top: 2px; }
.cronologia .sub { color: var(--tinta-3); font-size: .8125rem; overflow-wrap: anywhere; }
.cronologia li.mal b { color: var(--mal-texto); }
@media (max-width: 600px) { .cronologia li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.guia { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e4); max-width: 860px; }
.guia li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e4); padding: var(--e5); }
.guia h2 { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e2); }
.guia h2 .icono { color: var(--acento-texto); }
.guia p { color: var(--tinta-2); max-width: 70ch; margin-bottom: var(--e3); }
.guia-n { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; background: var(--acento-suave); color: var(--acento-texto); }
.guia-pie { margin-top: var(--e6); max-width: 70ch; }

/* ---------- Segunda tanda: edición de tarifas, proveedores y rutas ---------- */
.barra-tarifa { display: flex; gap: var(--e2); flex-wrap: wrap; padding: var(--e3) var(--e5); border-bottom: 1px solid var(--borde); background: var(--superficie-2); }
.aviso-calculo:empty { display: none; }
.form-linea { display: grid; gap: var(--e3); margin-bottom: var(--e6); max-width: 720px; }
.tabla td .sub { white-space: normal; }
.ruta header { display: flex; justify-content: space-between; gap: var(--e3); align-items: flex-start; }
.ruta-edicion { display: grid; gap: var(--e3); }
.cadena.editable li { border: 1px solid var(--borde); border-radius: 10px; padding: 6px var(--e2); margin-bottom: 6px; background: var(--superficie);
  flex-wrap: wrap; transition: transform var(--rapido) var(--ease), box-shadow var(--rapido) var(--ease); }
.cadena.editable li + li::before { display: none; }
.cadena.editable li[draggable="true"] { cursor: grab; }
.cadena.editable li.arrastrando { opacity: .5; }
.cadena.editable li:hover { box-shadow: var(--sombra); }
.cadena.editable .asa { color: var(--tinta-3); display: inline-flex; }
.cadena.editable .chips { margin-left: auto; gap: 2px; }
.cadena.editable .porcentaje { display: inline-flex; align-items: center; gap: 4px; }
.cadena.editable .porcentaje .entrada { width: 64px; min-height: 32px; padding: 4px 8px; }