/* EvoCárnica 360 · diseño EvoInmo (papel crema, verde petróleo, cobre; Lato) */
:root {
  --fondo: oklch(0.972 0.013 82); --marfil: oklch(0.985 0.009 85);
  --tinta: oklch(0.21 0.03 220); --tarjeta: oklch(0.995 0.004 85);
  --primario: oklch(0.45 0.085 182); --primario-texto: oklch(0.99 0.005 85);
  --secundario: oklch(0.945 0.014 82); --apagado: oklch(0.948 0.012 82);
  --apagado-texto: oklch(0.40 0.025 220);
  --acento: oklch(0.935 0.03 178); --acento-texto: oklch(0.34 0.07 185);
  --cobre: oklch(0.55 0.11 50); --cobre-suave: oklch(0.93 0.035 60);
  --exito: oklch(0.5 0.12 160); --aviso: oklch(0.72 0.13 75);
  --info: oklch(0.48 0.1 235); --peligro: oklch(0.52 0.19 27);
  --noche: oklch(0.26 0.045 215); --noche-texto: oklch(0.97 0.012 85);
  --borde-c: oklch(0.88 0.014 80);
  --lateral: oklch(0.255 0.042 212); --lateral-hondo: oklch(0.205 0.035 215);
  --lateral-texto: oklch(0.90 0.018 200);
  --lateral-vivo: oklch(0.8 0.1 172); --lateral-vivo-texto: oklch(0.2 0.04 215);
  --lateral-acento: oklch(0.31 0.045 205); --lateral-borde: oklch(0.36 0.035 210);
  --degradado-hero: linear-gradient(120deg, oklch(0.22 0.04 215), oklch(0.3 0.055 200) 55%, oklch(0.42 0.075 180));
  --degradado-lateral: linear-gradient(180deg, var(--lateral) 0%, var(--lateral-hondo) 100%);
  --sombra-tarjeta: 0 1px 0 oklch(1 0 0 / 0.7) inset, 0 1px 2px oklch(0.22 0.03 220 / 0.05), 0 10px 30px -14px oklch(0.22 0.03 220 / 0.16);
  --sombra-pop: 0 30px 60px -28px oklch(0.22 0.04 215 / 0.45);
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Lato", system-ui, sans-serif; color: var(--tinta); font-size: 14.5px; line-height: 1.5;
  background-color: var(--fondo);
  background-image:
    radial-gradient(1200px 600px at 100% -10%, oklch(0.93 0.03 178 / 0.35), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, oklch(0.93 0.035 60 / 0.35), transparent 60%);
  background-attachment: fixed;
}
a { color: var(--primario); }
button, input, select, textarea { font: inherit; color: inherit; }
.tnum { font-variant-numeric: tabular-nums; }
.apagado { color: var(--apagado-texto); }
.peque { font-size: 12.5px; }
.display { font-weight: var(--rd-peso-fuerte); letter-spacing: -0.012em; }
.antetitulo { font-size: 13px; font-weight: var(--rd-peso-fuerte); letter-spacing: 0.2em; text-transform: uppercase; color: var(--cobre); display: flex; align-items: center; gap: 8px; }
.antetitulo::before { content: ""; width: 18px; height: 2px; background: var(--cobre); border-radius: 2px; }
.linea-fina { height: 1px; background: linear-gradient(90deg, transparent, var(--borde-c), transparent); margin: 18px 0 22px; border: 0; }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde-c); border-radius: var(--rd-radio); box-shadow: var(--sombra-tarjeta); }
.pad { padding: 20px 22px; }
.rejilla { display: grid; gap: 18px; }
.r2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.r-21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .r4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .r3, .r-21 { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .r2, .r4 { grid-template-columns: 1fr; } }
.fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.entre { justify-content: space-between; }
.col { display: flex; flex-direction: column; gap: 10px; }
.mt { margin-top: 18px; } .mb { margin-bottom: 18px; }
.aparece { animation: aparece .45s var(--curva) both; }
@keyframes aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Botones y campos */
.boton, .boton-sec, .boton-pel, .boton-ok {
  height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; display: inline-flex;
  align-items: center; gap: 8px; font-weight: var(--peso-boton, 700); font-size: 14px; white-space: nowrap; transition: transform .15s, filter .15s, background .15s;
}
.boton { background: var(--primario); color: var(--primario-texto); }
.boton:hover { filter: brightness(1.08); }
.boton-sec { background: var(--tarjeta); border-color: var(--borde-c); color: var(--tinta); }
.boton-sec:hover { background: var(--acento); }
.boton-pel { background: var(--peligro); color: white; }
.boton-ok { background: var(--exito); color: white; }
.mini { height: 32px; padding: 0 12px; font-size: 13px; }
button:disabled { opacity: .55; cursor: not-allowed; }
.campo { height: 42px; width: 100%; border-radius: 12px; border: 1px solid var(--borde-c); background: var(--marfil); padding: 0 12px; outline: none; }
textarea.campo { height: auto; min-height: 90px; padding: 10px 12px; resize: vertical; }
.campo:focus { border-color: var(--primario); box-shadow: 0 0 0 3px oklch(0.45 0.085 182 / 0.18); }
label.et { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: var(--rd-peso-fuerte); color: var(--apagado-texto); }
label.chk { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.form { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form .ancho { grid-column: 1 / -1; }
@media (max-width: 720px) { .form { grid-template-columns: 1fr; } }

/* Estados */
.estado { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: var(--rd-peso-fuerte); white-space: nowrap; }
.estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.e-verde { color: var(--exito); background: oklch(0.5 0.12 160 / 0.12); }
.e-ambar { color: oklch(0.55 0.12 70); background: oklch(0.72 0.13 75 / 0.16); }
.e-azul { color: var(--info); background: oklch(0.48 0.1 235 / 0.12); }
.e-prim { color: var(--primario); background: oklch(0.45 0.085 182 / 0.12); }
.e-rojo { color: var(--peligro); background: oklch(0.52 0.19 27 / 0.12); }
.e-gris { color: var(--apagado-texto); background: var(--apagado); }
.pastilla { height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--borde-c); background: var(--tarjeta); cursor: pointer; font-weight: var(--rd-peso-fuerte); font-size: 13px; }
.pastilla.activa { background: var(--primario); color: var(--primario-texto); border-color: var(--primario); }

/* Tablas */
.tabla-env { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; }
.tabla th { background: oklch(0.945 0.014 82 / 0.7); text-align: left; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--apagado-texto); padding: 10px 12px; font-weight: var(--rd-peso-fuerte); }
.tabla td { padding: 11px 12px; border-top: 1px solid oklch(0.88 0.014 80 / 0.7); vertical-align: middle; }
.tabla tbody tr { cursor: default; }
.tabla tbody tr.clic { cursor: pointer; }
.tabla tbody tr:hover { background: oklch(0.935 0.03 178 / 0.4); }
.der { text-align: right; }

/* Marco */
.marco { display: grid; grid-template-columns: 284px minmax(0, 1fr); min-height: 100vh; }
.marco.contraido { grid-template-columns: 76px minmax(0, 1fr); }
.lateral { background: var(--degradado-lateral); color: var(--lateral-texto); position: sticky; top: 0; height: 100vh; overflow: hidden auto; display: flex; flex-direction: column; padding: 18px 14px; }
.lateral::before { content: ""; position: absolute; width: 220px; height: 220px; right: -80px; top: -80px; background: oklch(0.8 0.1 172 / 0.12); filter: blur(40px); border-radius: 50%; pointer-events: none; }
.monograma { width: 40px; height: 40px; border-radius: 12px; border: 1.5px solid var(--lateral-vivo); display: grid; place-items: center; font-weight: 900; color: white; position: relative; flex: none; }
.monograma::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--cobre); right: -3px; top: -3px; }
.marca-nom { font-weight: 900; color: white; font-size: 15px; line-height: 1.2; }
.marca-emp { color: var(--cobre-suave); font-size: 12px; }
.buscador { margin: 16px 0 10px; height: 38px; width: 100%; border-radius: 12px; background: oklch(1 0 0 / 0.06); border: 1px solid var(--lateral-borde); color: white; padding: 0 12px; outline: none; }
.buscador::placeholder { color: oklch(0.9 0.018 200 / 0.6); }
.item-nav { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--lateral-texto); text-decoration: none; cursor: pointer; position: relative; font-size: 14px; border: 0; background: none; width: 100%; text-align: left; }
.item-nav:hover { background: oklch(1 0 0 / 0.06); }
.item-nav.activo { background: oklch(1 0 0 / 0.10); color: white; font-weight: var(--rd-peso-fuerte); }
.item-nav.activo::before { content: ""; position: absolute; left: -6px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--lateral-vivo); }
.item-nav.activo svg { color: var(--lateral-vivo); }
.icono-caja { width: 28px; height: 28px; border-radius: 8px; background: oklch(1 0 0 / 0.07); display: grid; place-items: center; flex: none; }
.bloque-cab { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; cursor: pointer; font-weight: var(--rd-peso-fuerte); color: white; font-size: 13.5px; border: 0; background: none; width: 100%; text-align: left; }
.bloque-cab:hover { background: oklch(1 0 0 / 0.05); }
.contador { margin-left: auto; font-size: 12px; color: oklch(0.9 0.018 200 / 0.6); }
.punto-cobre { width: 6px; height: 6px; border-radius: 50%; background: var(--cobre); }
.flecha { transition: transform .25s var(--curva); }
.abierto .flecha { transform: rotate(90deg); }
.bloque-cuerpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--curva); }
.abierto .bloque-cuerpo { grid-template-rows: 1fr; }
.bloque-cuerpo > div { overflow: hidden; margin-left: 22px; padding-left: 10px; border-left: 1px solid oklch(1 0 0 / 0.10); }
.insignia { margin-left: auto; font-size: 12px; font-weight: 900; color: var(--lateral-vivo-texto); background: var(--cobre-suave); padding: 1px 7px; border-radius: 999px; }
.pie-lateral { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--lateral-borde); display: flex; flex-direction: column; gap: 10px; font-size: 12px; }
.usuario { display: flex; align-items: center; gap: 10px; }
.iniciales { width: 34px; height: 34px; border-radius: 50%; background: var(--lateral-vivo); color: var(--lateral-vivo-texto); display: grid; place-items: center; font-weight: var(--rd-peso-fuerte); font-size: 13px; flex: none; }
.principal { min-width: 0; display: flex; flex-direction: column; }
.cabecera-sup { height: 64px; display: flex; align-items: center; gap: 14px; padding: 0 28px; border-bottom: 1px solid oklch(0.88 0.014 80 / 0.6); background: oklch(0.985 0.009 85 / 0.7); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 5; }
.migas { color: var(--apagado-texto); font-size: 13px; }
.capsula { margin-left: auto; display: flex; align-items: center; gap: 8px; border: 1px solid var(--borde-c); border-radius: 999px; padding: 4px 6px 4px 14px; background: var(--tarjeta); }
.capsula select { border: 0; background: transparent; font-weight: var(--rd-peso-fuerte); outline: none; max-width: 240px; }
.campana { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--borde-c); background: var(--tarjeta); display: grid; place-items: center; cursor: pointer; }
.campana.activa { background: var(--acento); color: var(--acento-texto); border-color: var(--primario); }
.campana .n { position: absolute; top: -3px; right: -3px; background: var(--cobre); color: white; font-size: 12px; font-weight: var(--rd-peso-fuerte); border-radius: 999px; padding: 0 5px; }
.contenido { padding: 28px; max-width: 1480px; width: 100%; }
.pie-pagina { padding: 16px 28px 26px; font-size: 12px; color: var(--apagado-texto); }
.boton-menu { display: none; }
@media (max-width: 900px) {
  .marco, .marco.contraido { grid-template-columns: 1fr; }
  .lateral { position: fixed; z-index: 30; width: 290px; transform: translateX(-100%); transition: transform .3s var(--curva); }
  .lateral.visible { transform: none; box-shadow: var(--sombra-pop); }
  .boton-menu { display: grid; }
  .contenido { padding: 18px 16px; } .cabecera-sup { padding: 0 16px; }
}

/* Cabecera de pantalla */
.cab-pantalla { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.cab-pantalla h1 { font-size: 36px; margin: 6px 0 4px; font-weight: var(--rd-peso-fuerte); letter-spacing: -0.012em; line-height: 1.1; }
.cab-pantalla p { margin: 0; color: var(--apagado-texto); max-width: 720px; }

/* Hero y KPIs */
.hero { background: var(--degradado-hero); color: var(--noche-texto); border-radius: 28px; padding: 30px 32px; box-shadow: var(--sombra-pop); position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 340px; height: 340px; border-radius: 50%; border: 1px solid oklch(0.8 0.1 172 / 0.3); }
.hero h2 { font-weight: 300; font-size: 40px; line-height: 1.08; margin: 10px 0 0; }
.hero h2 em { font-style: italic; color: var(--lateral-vivo); }
.hero .antetitulo { color: var(--lateral-vivo); } .hero .antetitulo::before { background: var(--lateral-vivo); }
.cristal { background: oklch(0.2 0.035 215 / 0.45); border: 1px solid oklch(1 0 0 / 0.14); backdrop-filter: blur(10px); border-radius: var(--rd-radio); padding: 16px 18px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; }
.kpi { padding: 18px 20px; border-left: 1px solid var(--borde-c); }
.kpi:first-child { border-left: 0; background: var(--degradado-hero); color: var(--noche-texto); }
.kpi .v { font-size: 26px; font-weight: var(--rd-peso-fuerte); letter-spacing: -0.01em; }
.kpi .t { font-size: 12px; font-weight: var(--rd-peso-fuerte); letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.kpi:first-child .t { opacity: .85; }
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi:nth-child(3) { border-left: 0; } }
.barra { height: 10px; border-radius: 999px; background: var(--apagado); overflow: hidden; }
.barra > span { display: block; height: 100%; border-radius: 999px; }

/* Semáforo de decisión */
.decision { border-radius: var(--rd-radio); padding: 16px 18px; border: 1px solid; }
.d-ok { border-color: oklch(0.5 0.12 160 / 0.4); background: oklch(0.5 0.12 160 / 0.08); }
.d-cond { border-color: oklch(0.72 0.13 75 / 0.6); background: oklch(0.72 0.13 75 / 0.12); }
.d-bloq { border-color: oklch(0.52 0.19 27 / 0.4); background: oklch(0.52 0.19 27 / 0.08); }
.circulo { width: 14px; height: 14px; border-radius: 50%; display: inline-block; flex: none; }

/* Paneles laterales y ventanas */
.velo-panel { position: fixed; inset: 0; background: oklch(0.26 0.045 215 / 0.5); backdrop-filter: blur(3px); z-index: 40; display: flex; justify-content: flex-end; }
.panel { width: min(880px, 100%); height: 100%; overflow-y: auto; background: var(--fondo); padding: 26px; animation: entra .35s var(--curva) both; }
@keyframes entra { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.velo-ventana { position: fixed; inset: 0; background: oklch(0.26 0.045 215 / 0.5); backdrop-filter: blur(3px); z-index: 50; display: grid; place-items: center; padding: 16px; }
.ventana { width: min(620px, 100%); max-height: 92vh; overflow-y: auto; padding: 24px 26px; }
.ventana h3 { font-size: 26px; margin: 0 0 14px; font-weight: var(--rd-peso-fuerte); }
.aviso-toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 60; background: var(--noche); color: var(--noche-texto); padding: 12px 18px; border-radius: var(--rd-radio); box-shadow: var(--sombra-pop); max-width: min(560px, 92vw); }
.aviso-toast.error { background: var(--peligro); color: white; }

/* Estados vacíos */
.vacio { text-align: center; padding: 38px 16px; color: var(--apagado-texto); }
.cargando { padding: 30px; text-align: center; color: var(--apagado-texto); }
.error-caja { padding: 14px 16px; border-radius: var(--rd-radio); background: oklch(0.52 0.19 27 / 0.08); color: var(--peligro); border: 1px solid oklch(0.52 0.19 27 / 0.3); }

/* Chat */
.chat { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; padding: 6px; }
.burbuja { max-width: 78%; padding: 10px 14px; border-radius: var(--rd-radio); white-space: pre-wrap; word-wrap: break-word; }
.burbuja.yo { align-self: flex-end; background: var(--primario); color: var(--primario-texto); border-bottom-right-radius: 4px; }
.burbuja.el { align-self: flex-start; background: var(--tarjeta); border: 1px solid var(--borde-c); border-bottom-left-radius: 4px; }
.traza { font-size: 12px; color: var(--apagado-texto); background: var(--apagado); border-radius: 10px; padding: 6px 10px; align-self: flex-start; }

/* Página pública */
.publica { max-width: 760px; margin: 30px auto; padding: 0 16px; }
@media print { .no-imprimir { display: none !important; } body { background: white; } .tarjeta { box-shadow: none; } }

/* ── 1.1.0 · Personal, móvil y sin conexión ── */
.rejilla-botones { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.boton-grande { min-height: 88px; font-size: 19px; font-weight: var(--rd-peso-fuerte); flex-direction: column; justify-content: center; gap: 6px; border-radius: var(--rd-radio); }
.boton.peligro { background: var(--peligro); }
.dos-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .dos-col { grid-template-columns: 1fr; } }
.franja-red { display: flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 13px; font-weight: var(--rd-peso-fuerte); background: oklch(0.72 0.13 75 / 0.18); color: var(--tinta); border-bottom: 1px solid oklch(0.72 0.13 75 / 0.5); }
.franja-red.ok { background: oklch(0.5 0.12 160 / 0.12); border-color: oklch(0.5 0.12 160 / 0.4); }
.franja-red button { margin-left: auto; }
.mosaico { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.mosaico a { display: flex; flex-direction: column; gap: 10px; padding: 18px; min-height: 110px; text-decoration: none; color: var(--tinta); }
.mosaico a .icono-caja { background: var(--acento); color: var(--acento-texto); }
.interruptor { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--borde-c); border-radius: var(--rd-radio); cursor: pointer; background: var(--tarjeta); }
.interruptor.on { border-color: var(--primario); background: var(--acento); }
.interruptor input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--primario); }
.linea-producto { display: grid; grid-template-columns: minmax(0, 1fr) 110px 40px; gap: 8px; align-items: center; }
@media print { .lateral, .cabecera-sup, .pie-pagina, .franja-red, .no-imprimir { display: none !important; } }

/* ── 1.1.1 · Marca EvoCárnica y portada de entrada ── */
.marca { display: flex; align-items: center; gap: 12px; min-width: 0; }
.marca .marca-nom { font-size: 17px; letter-spacing: -0.01em; white-space: nowrap; }
.marca .marca-emp { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cobre-txt { color: oklch(0.78 0.11 60); }
.entrada { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(360px, 1fr); }
.entrada-hero { position: relative; overflow: hidden; background: var(--degradado-hero); color: var(--noche-texto); padding: 40px 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.entrada-halo { position: absolute; inset: auto -20% -35% auto; width: 720px; height: 720px; border-radius: 50%; background: radial-gradient(circle, oklch(0.8 0.1 172 / 0.22), transparent 62%); pointer-events: none; }
.entrada-hero::before { content: ""; position: absolute; right: -140px; top: -140px; width: 520px; height: 520px; border-radius: 50%; border: 1.5px solid oklch(1 0 0 / 0.10); box-shadow: 0 0 0 60px oklch(1 0 0 / 0.025), 0 0 0 120px oklch(1 0 0 / 0.02); pointer-events: none; }
.entrada-centro { position: relative; max-width: 760px; }
.entrada-centro .antetitulo { color: var(--lateral-vivo); }
.entrada-centro h1 { font-weight: 300; font-size: clamp(34px, 4.4vw, 58px); line-height: 1.05; letter-spacing: -0.02em; margin: 14px 0 16px; }
.entrada-centro h1 em { color: var(--lateral-vivo); font-style: italic; }
.entrada-lema { font-size: 17px; line-height: 1.55; opacity: .9; max-width: 620px; margin: 0 0 26px; }
.ventajas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ventaja { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--rd-radio); background: oklch(1 0 0 / 0.06); border: 1px solid oklch(1 0 0 / 0.10); backdrop-filter: blur(6px); font-size: 13.5px; line-height: 1.45; }
.ventaja strong { display: block; font-size: 14.5px; margin-bottom: 2px; color: white; }
.ventaja > div { opacity: .92; }
.ventaja-ico { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: oklch(0.8 0.1 172 / 0.18); color: var(--lateral-vivo); }
.cifras { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 26px; }
.cifras div { display: flex; align-items: baseline; gap: 8px; }
.cifras b { font-size: 26px; font-weight: 300; color: white; }
.cifras span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.entrada-form { display: grid; place-items: center; padding: 24px 16px; }
@media (max-width: 980px) {
  .entrada { grid-template-columns: 1fr; }
  .entrada-hero { padding: 24px 18px; }
  .ventajas { grid-template-columns: 1fr; }
  .entrada-lema { font-size: 15.5px; }
}

/* ── 1.2.0 · Control de versiones, acceso con Face ID e instalación ── */
.aviso-act-fondo { position: fixed; inset: 0; z-index: 90; background: oklch(0.17 0.035 215 / 0.62); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 16px; }
.aviso-act { width: min(560px, 100%); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; outline: none; }
.aviso-act-cab { background: var(--degradado-hero); color: var(--noche-texto); padding: 22px 24px; }
.aviso-act-cab .antetitulo { color: var(--lateral-vivo); }
.aviso-act-cab h2 { margin: 6px 0 4px; font-size: 22px; font-weight: var(--rd-peso-fuerte); }
.aviso-act-cuerpo { padding: 18px 24px; overflow-y: auto; }
.aviso-act-pie { padding: 14px 24px 20px; border-top: 1px solid var(--borde-c); flex-wrap: wrap; }
.boton-version { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 0; color: inherit; font: inherit; font-size: 12.5px; opacity: .85; cursor: pointer; padding: 4px 10px; border-radius: 999px; }
.boton-version:hover { background: oklch(1 0 0 / 0.08); opacity: 1; }
.punto-version { width: 8px; height: 8px; border-radius: 50%; background: oklch(0.72 0.15 155); flex: none; }
.punto-version.nueva { background: var(--aviso); box-shadow: 0 0 0 0 oklch(0.72 0.13 75 / 0.7); animation: pulso-version 1.8s infinite; }
@keyframes pulso-version { 70% { box-shadow: 0 0 0 8px oklch(0.72 0.13 75 / 0); } 100% { box-shadow: 0 0 0 0 oklch(0.72 0.13 75 / 0); } }
@media (prefers-reduced-motion: reduce) { .punto-version.nueva { animation: none; } }
.destacado-ia { display: flex; align-items: center; gap: 18px; margin-top: 24px; padding: 16px 20px; border-radius: var(--rd-radio); background: linear-gradient(110deg, oklch(0.55 0.11 50 / 0.28), oklch(0.8 0.1 172 / 0.12)); border: 1px solid oklch(0.78 0.11 60 / 0.35); max-width: 620px; }
.destacado-ia b { font-size: 38px; font-weight: 300; color: white; letter-spacing: -0.02em; }
.destacado-ia strong { display: block; color: white; font-size: 16px; }
.destacado-ia span { font-size: 14px; opacity: .88; }
@media print { .aviso-act-fondo, .boton-version { display: none !important; } }

/* ── 1.3.0 · Paginación, permisos y gestión ── */
.paginacion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 16px; border-top: 1px solid var(--borde-c); background: oklch(0.945 0.014 82 / 0.5); }
.paginas { flex-wrap: wrap; }
.pag { min-width: 34px; height: 34px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--borde-c); background: var(--tarjeta); color: var(--tinta); font: inherit; font-size: 13.5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pag:hover:not(:disabled) { border-color: var(--primario); }
.pag.activa { background: var(--primario); border-color: var(--primario); color: var(--primario-texto); font-weight: var(--rd-peso-fuerte); }
.pag:disabled { opacity: .4; cursor: default; }
.pag-sep { padding: 0 4px; color: var(--apagado-texto); }
.mini-campo { height: 34px; padding: 0 10px; font-size: 13.5px; width: auto; }
.tabla.matriz td.centro, .tabla.matriz th.centro { text-align: center; }
.tabla.matriz input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--primario); }
fieldset.campo-bloqueado { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.campo-bloqueado .campo { background: var(--apagado); color: var(--apagado-texto); }
.campo-error { border-color: var(--peligro) !important; }
@media print { body.sin-imprimir * { display: none !important; } body.sin-imprimir::after { content: "Tu perfil no permite imprimir esta pantalla."; display: block; padding: 40px; font: 18px Lato, sans-serif; } }
@media (max-width: 640px) { .paginacion { justify-content: center; } }

/* ── 1.4.0 · Fichas 360 ── */
.ficha360-fondo { position: fixed; inset: 0; z-index: 40; background: oklch(0.26 0.045 215 / 0.55); backdrop-filter: blur(4px); display: flex; justify-content: center; padding: 10px 12px; overflow-y: auto; }
/* 1.36: la ficha usa casi todo el ancho de la ventana (antes, un máximo fijo de 1280 px) */
.ficha360 { --tono: var(--primario); position: relative; width: 100%; container: ficha / inline-size; align-self: flex-start; }
/* Pestañas: siempre caben y cuadradas. ficha360.js mide cada una en tres tamaños (normal, compacta y mínima, sin
   icono) y, si ni así caben, enseña las que quepan y agrupa el resto en «Más ▾». La «✕» queda fija a la izquierda. */
.f360-pestanas { display: flex; gap: 4px; padding: 0 2px; align-items: flex-end; flex-wrap: nowrap; min-width: 0; }
.f360-cerrar { flex: none; width: 40px; height: 40px; border-radius: 13px 13px 0 0; border: 0; background: var(--noche); color: white; cursor: pointer; display: grid; place-items: center; padding: 0; }
.f360-pestana { flex: none; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 15px; border: 0; border-radius: 13px 13px 0 0; background: oklch(1 0 0 / 0.72); color: var(--tinta); font: inherit; font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; border-top: 3px solid transparent; border-bottom: 3px solid transparent; white-space: nowrap; }
.f360-pestana > svg { flex: none; display: block; }
.f360-pestana-t { display: block; line-height: 1.2; }
.f360-pestana:hover { background: white; }
.f360-pestana.activa { background: var(--tarjeta); border-top-color: var(--tono-p); color: var(--tono-p); }
.f360-pestana:focus-visible, .f360-cerrar:focus-visible { outline: 2px solid var(--tono-p, var(--tono)); outline-offset: -3px; }
.f360-num { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 19px; box-sizing: border-box; background: color-mix(in oklch, var(--tono-p, var(--tono)) 15%, transparent); color: var(--tono-p, var(--tono)); border-radius: 999px; padding: 0 7px; font-size: 12px; line-height: 1; }
.f360-pestanas.modo-compacta, .f360-pestanas.modo-minima { gap: 3px; }
.f360-pestanas.modo-compacta .f360-pestana, .f360-pestanas.modo-minima .f360-pestana { padding: 0 10px; font-size: 13px; gap: 5px; }
.f360-pestanas.modo-minima .f360-pestana:not(.f360-mas) > svg { display: none; }
.f360-mas-caja { position: relative; flex: none; display: flex; }
.f360-mas { --tono-p: var(--tono); }
.f360-mas.abierta { background: white; }
.f360-menu-mas { position: absolute; top: 100%; left: 0; z-index: 5; width: min(280px, calc(100vw - 16px)); max-height: 60vh; overflow-y: auto; padding: 6px; margin-top: 4px; background: var(--tarjeta); border: 1px solid var(--borde-c); border-radius: var(--rd-radio); box-shadow: var(--sombra-pop); display: flex; flex-direction: column; gap: 2px; }
.f360-menu-item { display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 14px; font-weight: var(--rd-peso-fuerte); color: var(--tinta); cursor: pointer; text-align: left; white-space: nowrap; }
.f360-menu-item > svg { flex: none; color: var(--tono-p); }
.f360-menu-item > span:not(.f360-num) { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.f360-menu-item:hover, .f360-menu-item:focus-visible { background: color-mix(in oklch, var(--tono-p) 10%, transparent); outline: none; }
/* Copia invisible donde se miden las pestañas */
.f360-medidor { position: absolute; left: 0; top: 0; width: max-content; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
.f360-medidor .f360-pestanas { padding: 0; }
.f360-tarjeta { background: var(--tarjeta); border-radius: 0 20px 20px 20px; box-shadow: var(--sombra-pop); overflow: hidden; border-top: 4px solid var(--tono); }
/* Cabecera en una franja: foto, nombre con «Editar» al lado, código y chips; las cifras a la derecha si caben */
.f360-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px 20px; background: linear-gradient(100deg, color-mix(in oklch, var(--tono) 9%, var(--tarjeta)), var(--tarjeta) 60%); border-bottom: 1px solid var(--borde-c); }
.f360-id { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 420px; }
.f360-ident { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.f360-foto { position: relative; width: 58px; height: 58px; border-radius: var(--rd-radio); flex: none; background: var(--tono); color: white; display: grid; place-items: center; font-size: 21px; font-weight: var(--rd-peso-fuerte); overflow: visible; }
.f360-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--rd-radio); }
.f360-camara { position: absolute; right: -6px; bottom: -6px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--tarjeta); background: var(--cobre); color: white; display: grid; place-items: center; cursor: pointer; padding: 0; }
.f360-linea-titulo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.f360-titulo { margin: 0; font-size: 22px; font-weight: var(--rd-peso-fuerte); letter-spacing: -0.01em; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
.f360-editar { flex: none; }
/* En pantallas anchas el nombre va en una línea: si no cabe junto a las cifras, las cifras bajan a la fila de debajo */
@container ficha (min-width: 901px) {
  .f360-id { min-width: min-content; }
  .f360-titulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62cqw; }
}
.f360-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.f360-sub { margin-right: 4px; }
/* La raya de separación de la primera cifra de cada fila queda recortada (overflow), así no sobra raya al bajar de fila */
.f360-kpis { display: flex; flex-wrap: wrap; flex: 0 1 auto; row-gap: 6px; overflow: hidden; }
.f360-kpi { display: flex; align-items: center; gap: 9px; padding: 3px 14px; margin-left: -1px; border-left: 1px solid var(--borde-c); color: var(--tono); }
.f360-kpi > svg { flex: none; }
.f360-kpi b { display: block; font-size: 17px; line-height: 1.25; color: var(--tinta); white-space: nowrap; }
.f360-kpi span { display: block; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--apagado-texto); white-space: nowrap; }
.f360-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 20px; border-bottom: 1px solid var(--borde-c); background: oklch(0.945 0.014 82 / 0.45); }
.f360-acciones :is(.boton, .boton-sec, .boton-pel, .boton-ok):not(.mini) { height: 34px; min-height: 34px; padding: 0 14px; font-size: 13.5px; }
.f360-cuerpo { padding: 14px 20px 20px; }
.f360-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* Secciones: cada una mide su ancho (container query) y reparte sus datos en 1 a 6 columnas; las cortas van de dos en dos */
.f360-seccion { margin-bottom: 12px; container: seccion / inline-size; min-width: 0; }
.f360-seccion > .tarjeta { box-shadow: none; }
@container ficha (min-width: 1200px) {
  .f360-cuerpo:has(> .f360-seccion.corta), .f360-cuerpo > div:has(> .f360-seccion.corta) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; align-items: start; }
  .f360-cuerpo:has(> .f360-seccion.corta) > *, .f360-cuerpo > div:has(> .f360-seccion.corta) > * { grid-column: 1 / -1; min-width: 0; }
  /* Solo se emparejan dos cortas seguidas; una corta suelta sigue a todo lo ancho */
  .f360-cuerpo > .f360-seccion.corta:has(+ .f360-seccion.corta), .f360-cuerpo > .f360-seccion.corta + .f360-seccion.corta,
  .f360-cuerpo > div > .f360-seccion.corta:has(+ .f360-seccion.corta), .f360-cuerpo > div > .f360-seccion.corta + .f360-seccion.corta { grid-column: auto; }
}
.f360-sec-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--borde-c); min-height: 26px; }
.f360-sec-cab h3 { margin: 0; font-size: 12.5px; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--tono); }
.f360-sec-ico { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in oklch, var(--tono) 14%, transparent); color: var(--tono); }
.f360-datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 18px; }
.f360-dato { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.f360-dato.ancho { grid-column: 1 / -1; }
.f360-dato span { font-size: 12.5px; color: var(--apagado-texto); }
.f360-dato b { font-size: 15px; font-weight: var(--rd-peso-fuerte); overflow-wrap: anywhere; }
/* Columnas de datos según el ancho: 6 desde ~1700 px, 5 desde ~1400, 4, 3, 2 y 1 en móvil */
@container ficha (max-width: 900px) { .f360-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container ficha (max-width: 540px) { .f360-datos { grid-template-columns: 1fr; } }
@container seccion (min-width: 0px) { .f360-datos { grid-template-columns: 1fr; } }
@container seccion (min-width: 420px) { .f360-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container seccion (min-width: 660px) { .f360-datos { grid-template-columns: repeat(3, minmax(0, 1fr)); } .f360-dato.ancho { grid-column: span 2; } }
@container seccion (min-width: 960px) { .f360-datos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container seccion (min-width: 1340px) { .f360-datos { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@container seccion (min-width: 1640px) { .f360-datos { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.f360-enlace { padding: 8px 0; border-bottom: 1px solid var(--borde-c); text-decoration: none; color: inherit; }
.f360-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.f360-galeria figure { position: relative; margin: 0; border-radius: var(--rd-radio); overflow: hidden; border: 1px solid var(--borde-c); background: var(--apagado); }
/* Foto provisional (122): orientativa de un banco libre o de la marca aproximada; autor y licencia al pasar el ratón */
.foto-provisional { position: absolute; right: 8px; top: 8px; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .01em; background: oklch(0.2 0 0 / .62); color: #fff; border-radius: 999px; padding: 2px 8px; cursor: help; max-width: calc(100% - 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f360-galeria img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.f360-galeria figcaption { display: flex; justify-content: space-between; gap: 6px; padding: 8px; }
.f360-barras { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding-top: 10px; }
.f360-barra { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.f360-barra span { width: 100%; max-width: 46px; background: var(--tono); border-radius: 8px 8px 3px 3px; opacity: .85; }
.f360-barra em { font-style: normal; font-size: 12.5px; color: var(--apagado-texto); }
.f360-linea { border-left: 2px solid var(--borde-c); margin-left: 6px; padding-left: 16px; display: flex; flex-direction: column; gap: 12px; }
.f360-hito { position: relative; }
.f360-punto { position: absolute; left: -23px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--tono); border: 2px solid var(--tarjeta); }
@container ficha (max-width: 900px) {
  .f360-kpis { width: 100%; }
  .f360-kpi:first-child { border-left: 0; padding-left: 0; }
  .f360-rejilla { grid-template-columns: 1fr; }
}
@container ficha (max-width: 540px) {
  .f360-cab, .f360-cuerpo, .f360-acciones { padding-left: 12px; padding-right: 12px; }
  .f360-cab { padding-top: 10px; padding-bottom: 10px; }
  .f360-id { flex-basis: 100%; gap: 12px; align-items: flex-start; }
  .f360-foto { width: 48px; height: 48px; font-size: 18px; border-radius: var(--rd-radio); }
  .f360-foto img { border-radius: var(--rd-radio); }
  .f360-titulo { font-size: 18px; }
  .f360-linea-titulo { align-items: flex-start; justify-content: space-between; }
  .f360-kpis { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .f360-kpi { border-left: 0; padding: 4px 0; gap: 8px; }
  .f360-kpi b { font-size: 15.5px; }
  .f360-kpi span { font-size: 12px; }
  .f360-acciones { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .f360-acciones > * { flex: none; }
}
@media (max-width: 600px) { .ficha360-fondo { padding: 6px 0 0; } .f360-tarjeta { border-radius: 0; } }
@media print { .ficha360-fondo { position: static; background: none; padding: 0; } .f360-pestanas, .f360-acciones, .f360-editar, .f360-camara { display: none !important; } }

/* ───── 1.5.0 · Facturación profesional a pantalla completa ───── */
.enlace { background: none; border: 0; padding: 0; color: var(--primario); cursor: pointer; font: inherit; text-align: left; }
.enlace:hover { text-decoration: underline; }
.fila-click { cursor: pointer; }
.campo-aviso { border-color: var(--aviso) !important; background: oklch(0.72 0.13 75 / 0.12) !important; }
.editor-fac { position: fixed; inset: 0; z-index: 45; background: var(--fondo); display: flex; flex-direction: column; overflow: hidden; }
.ef-barra { display: flex; align-items: center; gap: 14px; padding: 12px 20px; background: var(--tarjeta); border-bottom: 1px solid var(--borde-c); flex-wrap: wrap; }
.ef-titulo { font-size: 20px; font-weight: var(--rd-peso-fuerte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }
.ef-cuerpo { flex: 1; overflow: auto; padding: 18px 20px 40px; display: flex; flex-direction: column; gap: 14px; }
.ef-cab { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; }
.ef-cab .ancho { grid-column: span 2; }
.ef-tabla td { vertical-align: top; padding: 6px 6px; }
.ef-tabla .mini-campo { width: 100%; min-width: 74px; height: 36px; font-size: 14px; }
.ef-tabla td.der .mini-campo, .ef-tabla .der { text-align: right; }
.ef-pie { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.ef-totales { min-width: 300px; display: flex; flex-direction: column; gap: 6px; margin-left: auto; }
.ef-total, .doc-total { font-size: 22px; border-top: 1px solid var(--borde-c); padding-top: 8px; margin-top: 4px; }
@media (max-width: 900px) { .ef-cab { grid-template-columns: 1fr 1fr; } .ef-titulo { max-width: 90vw; } }
@media (max-width: 560px) { .ef-cab { grid-template-columns: 1fr; } .ef-cab .ancho { grid-column: auto; } .ef-barra { padding: 10px 12px; } .ef-cuerpo { padding: 12px; } }

/* Documento de factura (pantalla y A4) */
.publica-ancha { max-width: 980px; }
.doc-fac { position: relative; background: #fff; color: #1d2a30; border: 1px solid var(--borde-c); border-radius: 18px; padding: 34px 38px; width: min(960px, 100%); margin: 0 auto; box-shadow: var(--sombra-tarjeta); font-size: 14px; }
.doc-marca { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(-24deg); font-size: 96px; font-weight: 900; color: oklch(0.55 0.11 50 / 0.12); pointer-events: none; letter-spacing: .08em; }
.doc-cab { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; border-bottom: 2px solid var(--primario); padding-bottom: 14px; }
.doc-emisor { font-size: 20px; font-weight: 900; color: var(--primario); }
.doc-titulo { text-align: right; }
.doc-num { font-size: 24px; font-weight: 700; margin: 2px 0; }
.doc-cliente { margin: 16px 0; padding: 12px 14px; border: 1px solid var(--borde-c); border-radius: 12px; max-width: 460px; }
.doc-rect { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: oklch(0.93 0.035 60); }
.doc-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.doc-tabla th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--apagado-texto); border-bottom: 1px solid var(--borde-c); padding: 6px 6px; }
.doc-tabla td { border-bottom: 1px solid oklch(0.93 0.01 80); padding: 7px 6px; vertical-align: top; }
.doc-tabla .der { text-align: right; }
.doc-pie { display: flex; justify-content: space-between; gap: 24px; margin-top: 18px; flex-wrap: wrap; }
.doc-izq { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 4px; }
.doc-totales { min-width: 280px; display: flex; flex-direction: column; gap: 4px; }
.doc-totales table { width: 100%; font-size: 12px; border-collapse: collapse; margin-bottom: 6px; }
.doc-totales th { font-size: 12px; color: var(--apagado-texto); font-weight: 700; }
.doc-totales .der { text-align: right; padding: 2px 4px; }
.doc-legal { margin-top: 22px; border-top: 1px solid var(--borde-c); padding-top: 8px; }
@media (max-width: 640px) { .doc-fac { padding: 18px 14px; } .doc-cab { flex-direction: column; } .doc-titulo { text-align: left; } .doc-tabla { font-size: 12px; } }
@media print {
  @page { size: A4; margin: 12mm; }
  body:has(.doc-fac) * , body:has(.doc-declaracion) * { visibility: hidden; }
  body:has(.doc-fac) .doc-fac, body:has(.doc-fac) .doc-fac *, body:has(.doc-declaracion) .doc-declaracion, body:has(.doc-declaracion) .doc-declaracion * { visibility: visible; }
  body:has(.doc-fac) .doc-fac, body:has(.doc-declaracion) .doc-declaracion { position: absolute; left: 0; top: 0; width: 100%; border: 0; box-shadow: none; padding: 0; }
  .editor-fac { position: static; overflow: visible; }
  .doc-marca { color: rgba(0,0,0,.08); }
}

/* ───── 1.6.0 · Fichas 360 en todas partes, buscador global y TPV ───── */
.buscar-todo { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--borde-c); border-radius: 999px; background: var(--tarjeta); color: var(--apagado-texto); cursor: pointer; font: inherit; min-width: 220px; margin-left: 12px; }
.buscar-todo span { flex: 1; text-align: left; }
.buscar-todo kbd { font-size: 12px; border: 1px solid var(--borde-c); border-radius: 6px; padding: 1px 6px; }
@media (max-width: 900px) { .buscar-todo { min-width: 0; } .buscar-todo span, .buscar-todo kbd { display: none; } }
.buscador-global { width: min(680px, 100%); max-height: 78vh; display: flex; flex-direction: column; padding: 10px 14px; align-self: flex-start; margin-top: 8vh; }
.bg-resultados { overflow-y: auto; margin-top: 6px; border-top: 1px solid var(--borde-c); }
.bg-grupo { font-size: 12.5px; font-weight: var(--rd-peso-fuerte); letter-spacing: .14em; text-transform: uppercase; color: var(--cobre); padding: 10px 6px 4px; }
.bg-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 8px; border: 0; background: none; border-radius: 10px; cursor: pointer; text-align: left; font: inherit; color: var(--tinta); }
.bg-item.activo, .bg-item:hover { background: var(--acento); }
.bg-item > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip360 { font-size: 12px; font-weight: var(--rd-peso-fuerte); color: var(--primario); border: 1px solid currentColor; border-radius: 999px; padding: 1px 7px; }
tr.clic:hover td:first-child strong::after { opacity: .8; }

.tpv { position: fixed; inset: 0; z-index: 44; background: var(--fondo); display: flex; flex-direction: column; overflow: hidden; }
.tpv-centro { align-items: center; justify-content: center; padding: 16px; }
.tpv-barra { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--noche); color: var(--noche-texto); flex-wrap: wrap; }
.tpv-barra .apagado { color: oklch(0.85 0.02 200); }
.tpv-barra .boton-sec { background: oklch(1 0 0 / 0.08); color: var(--noche-texto); border-color: oklch(1 0 0 / 0.2); }
.tpv-peso { min-width: 150px; padding: 6px 14px; border-radius: 12px; background: oklch(0 0 0 / 0.25); font-size: 26px; font-weight: 700; text-align: right; display: flex; flex-direction: column; line-height: 1.1; }
.tpv-peso.estable { box-shadow: inset 0 0 0 2px var(--lateral-vivo); }
.tpv-peso small { font-size: 12px; font-weight: 400; opacity: .7; }
.tpv-cuerpo { flex: 1; display: grid; grid-template-columns: 1fr 400px; min-height: 0; }
.tpv-productos { padding: 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.tpv-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.tpv-boton { --c: var(--primario); display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-height: 120px; padding: 8px; border: 0; border-radius: 16px; background: var(--tarjeta); box-shadow: inset 0 -5px 0 var(--c), var(--sombra-tarjeta); cursor: pointer; font: inherit; color: var(--tinta); text-align: left; }
.tpv-boton:active { transform: scale(.97); }
.tpv-boton img { width: 100%; height: 64px; object-fit: cover; border-radius: 10px; }
.tpv-ini { height: 64px; border-radius: 10px; background: var(--c); color: white; display: grid; place-items: center; font-size: 26px; font-weight: 900; text-transform: uppercase; }
.tpv-nom { font-weight: 700; font-size: 14px; line-height: 1.2; }
.tpv-pre { font-size: 13px; color: var(--apagado-texto); }
.tpv-ticket { display: flex; flex-direction: column; background: var(--tarjeta); border-left: 1px solid var(--borde-c); min-height: 0; }
.tpv-lineas { flex: 1; overflow-y: auto; }
.tpv-linea { display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--borde-c); background: none; font: inherit; text-align: left; cursor: pointer; color: var(--tinta); }
.tpv-linea > span { display: flex; flex-direction: column; }
.tpv-linea.activa { background: var(--acento); }
.tpv-total { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 14px; border-top: 2px solid var(--tinta); font-size: 20px; }
.tpv-total strong { font-size: 34px; }
.tpv-teclado { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px 12px; }
.tpv-teclado button { height: 50px; border: 1px solid var(--borde-c); border-radius: 12px; background: var(--fondo); font: inherit; font-size: 20px; font-weight: 700; cursor: pointer; color: var(--tinta); }
.tpv-teclado .t-acc { font-size: 14px; background: var(--acento); color: var(--acento-texto); }
.tpv-teclado .t-pel { font-size: 14px; color: var(--peligro); }
.tpv-teclado button:disabled { opacity: .4; }
.tpv-pantalla { grid-column: 1 / -1; height: 44px; border-radius: 10px; background: var(--noche); color: var(--noche-texto); font-size: 26px; text-align: right; padding: 4px 12px; }
.tpv-cobrar { margin: 8px 12px 12px; height: 64px; font-size: 22px; justify-content: center; }
@media (max-width: 900px) { .tpv-cuerpo { grid-template-columns: 1fr; grid-template-rows: 1fr auto; } .tpv-ticket { border-left: 0; border-top: 1px solid var(--borde-c); max-height: 60vh; } }
.ticket80 { width: 76mm; max-width: 100%; margin: 10px auto; padding: 8px; font-family: ui-monospace, "Courier New", monospace; font-size: 12px; background: white; color: black; border: 1px dashed var(--borde-c); }
.ticket80 .t-c { text-align: center; margin-bottom: 6px; }
.ticket80 .t-f { display: flex; justify-content: space-between; gap: 8px; }
.ticket80 .t-tot { font-weight: 900; font-size: 14px; border-top: 1px dashed black; margin-top: 4px; padding-top: 4px; }
@media print {
  body:has(.ticket80) * { visibility: hidden; }
  body:has(.ticket80) .ticket80, body:has(.ticket80) .ticket80 * { visibility: visible; }
  body:has(.ticket80) .ticket80 { position: absolute; left: 0; top: 0; border: 0; margin: 0; width: 72mm; }
}
.visor { min-height: 100vh; background: var(--degradado-hero); color: white; display: flex; flex-direction: column; padding: 28px 36px; gap: 16px; font-size: 24px; }
.visor-reposo { align-items: center; justify-content: center; text-align: center; }
.visor-emp { font-size: 18px; letter-spacing: .2em; text-transform: uppercase; opacity: .8; }
.visor-bien { font-size: 64px; font-weight: 300; }
.visor-lineas { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.visor-linea { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.15); }
.visor-linea small { display: block; font-size: 16px; opacity: .75; }
.visor-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 36px; border-top: 3px solid white; padding-top: 12px; }
.visor-total strong { font-size: 84px; }
.visor-peso { font-size: 30px; opacity: .9; margin-top: 12px; }

/* 1.7.0 · Lápiz de editar en cada línea y botón Guardar siempre visible */
.boton-lapiz { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid var(--borde-c); background: var(--tarjeta); color: var(--primario); cursor: pointer; vertical-align: middle; }
.boton-lapiz:hover { background: var(--primario); color: var(--primario-texto); border-color: var(--primario); }
.tabla tbody tr.clic { user-select: none; }
.ventana > .fila.mt:last-child, .ventana .pie-guardar { position: sticky; bottom: -24px; margin-bottom: -24px; padding: 14px 0 20px; background: var(--tarjeta); border-top: 1px solid var(--borde-c); z-index: 3; gap: 10px; }
.ventana > .fila.mt:last-child .boton, .pie-guardar .boton { height: 46px; padding: 0 26px; font-size: 15.5px; box-shadow: 0 6px 18px -8px var(--primario); }
@media print { .boton-lapiz { display: none; } }

/* 1.7.1 · Menú por áreas, favoritos y «Todo el menú» */
.lateral { padding: 14px 12px; overflow: hidden; }
.nav-lateral { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 0 -6px; padding: 0 6px; scrollbar-width: thin; scrollbar-color: oklch(1 0 0 / .18) transparent; }
.lateral .buscador { margin: 12px 0 10px; }
.nav-rapido { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border-radius: 10px; border: 1px solid var(--lateral-borde); background: oklch(1 0 0 / .05); color: var(--lateral-texto); font-size: 12.5px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; }
.nav-rapido:hover, .nav-rapido.activo { background: oklch(1 0 0 / .12); color: white; }
.nav-areas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: oklch(0 0 0 / .18); margin-bottom: 10px; position: sticky; top: 0; z-index: 2; }
.nav-area { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 1px 6px; border: 0; border-radius: 9px; background: none; color: var(--lateral-texto); cursor: pointer; font-size: 12px; font-weight: 700; min-width: 0; }
.nav-area span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-area:hover { background: oklch(1 0 0 / .07); }
.nav-area.activa { background: var(--lateral-vivo); color: var(--lateral-vivo-texto); }
.nav-area .punto-cobre { position: absolute; top: 5px; right: 7px; }
.nav-titulo { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .62; padding: 8px 10px 3px; }
.nav-bloque + .nav-bloque { margin-top: 2px; }
.nav-fav { margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--lateral-borde); }
.nav-fila { display: flex; align-items: center; }
.nav-fila .item-nav { flex: 1; min-width: 0; }
.item-nav.compacto { padding: 6px 10px; font-size: 13.5px; gap: 9px; }
.item-nav.compacto.activo::before { top: 6px; bottom: 6px; }
.nav-estrella { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border: 0; background: none; color: var(--lateral-texto); border-radius: 7px; cursor: pointer; opacity: 0; transition: opacity .15s; }
.nav-fila:hover .nav-estrella, .nav-estrella:focus-visible, .nav-estrella.on { opacity: .9; }
.nav-estrella.on { color: var(--cobre); }
.nav-estrella.on svg path { fill: currentColor; }
.pie-lateral { padding-top: 10px; gap: 8px; }
.todo-menu { width: min(1100px, 96vw); max-height: 88vh; overflow: auto; padding: 20px 24px; align-self: flex-start; margin-top: 5vh; }
.todo-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px 22px; margin-top: 14px; }
.todo-bloque { margin: 8px 0 12px; display: flex; flex-direction: column; gap: 2px; }
.todo-bloque strong { display: flex; align-items: center; gap: 6px; font-size: 13.5px; margin-bottom: 3px; }
.todo-bloque a { padding: 5px 8px 5px 22px; border-radius: 8px; text-decoration: none; color: var(--tinta); font-size: 14px; }
.todo-bloque a:hover { background: var(--acento); }
.todo-bloque a.activo { background: var(--primario); color: var(--primario-texto); font-weight: var(--rd-peso-fuerte); }

/* 1.8.0 · Contabilidad */
.tabla tbody.asiento { border-top: 2px solid var(--borde-c); }
.tabla tbody.asiento tr.asiento-cab td { background: var(--secundario); }
.tabla tbody.asiento td { padding-top: 6px; padding-bottom: 6px; }

/* 1.9.0 · ventanas anchas (restaurar copias, importar) */
.ventana.ancha { width: min(980px, 100%); }
.importar-mapa { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 14px; }
.importar-mapa .et { margin: 0; }
.fila-error td { background: oklch(0.52 0.19 27 / 0.06); }
.zona-fichero { border: 2px dashed var(--borde-c); border-radius: 16px; padding: 28px; text-align: center; cursor: pointer; display: block; }
.zona-fichero:hover, .zona-fichero.encima { border-color: var(--primario); background: oklch(0.45 0.085 182 / 0.05); }

/* 1.10.1 · pastilla de versión nueva en la barra superior */
.pastilla-act { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid oklch(0.72 0.13 75 / 0.6);
  background: oklch(0.72 0.13 75 / 0.14); color: var(--tinta); font: inherit; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.pastilla-act:hover { background: oklch(0.72 0.13 75 / 0.24); }
@media (max-width: 760px) { .pastilla-act { padding: 0 10px; font-size: 12.5px; } }

/* Agente con bata blanca */
.agente-ficha { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.fila-agente { display: flex; gap: 8px; align-items: flex-end; }
.fila-agente .burbuja { margin: 0; }

/* ───── 1.14.0 · Factura A4 vertical ───── */
.a4 { --marca: #2f5f63; position: relative; background: #fff; color: #1b2328; width: 210mm; max-width: 100%; min-height: 297mm; margin: 0 auto; padding: 0 14mm 12mm; box-shadow: 0 10px 40px -18px rgba(20,30,40,.45); border-radius: 4px;
  font: 400 10.5pt/1.35 Lato, system-ui, sans-serif; box-sizing: border-box; overflow: hidden; }
.a4 * { box-sizing: border-box; }
.a4-franja { height: 7mm; margin: 0 -14mm 8mm; background: linear-gradient(90deg, var(--marca), color-mix(in oklab, var(--marca) 70%, #b8693b)); }
.a4-marca-agua { position: absolute; inset: 40% 0 auto; text-align: center; font-size: 72pt; font-weight: 900; color: rgba(0,0,0,.06); transform: rotate(-24deg); pointer-events: none; letter-spacing: .1em; }
.a4-cab { display: flex; justify-content: space-between; gap: 10mm; align-items: flex-start; padding-bottom: 6mm; border-bottom: 2px solid var(--marca); }
.a4-emisor { display: flex; gap: 5mm; align-items: flex-start; min-width: 0; }
.a4-logo { width: 26mm; height: 26mm; object-fit: contain; flex: none; }
.a4-logo-letras { display: grid; place-items: center; border-radius: 6mm; background: var(--marca); color: #fff; font-size: 20pt; font-weight: 900; letter-spacing: .02em; }
.a4-razon { font-size: 15pt; font-weight: 900; color: var(--marca); line-height: 1.15; margin-bottom: 1.5mm; }
.a4-datos { font-size: 9pt; color: #45525a; margin-top: 1mm; }
.a4-titulo { text-align: right; flex: none; }
.a4-tipo { font-size: 22pt; font-weight: 300; letter-spacing: .04em; text-transform: uppercase; color: var(--marca); margin-bottom: 2mm; }
.a4-mini { border-collapse: collapse; font-size: 9.5pt; margin-left: auto; }
.a4-mini th { text-align: left; font-weight: 400; color: #5d6970; padding: .6mm 4mm .6mm 0; white-space: nowrap; }
.a4-mini td { text-align: right; padding: .6mm 0; }
.a4-mini.ancho { width: 100%; margin: 0; }
.a4-bloques { display: grid; grid-template-columns: 1.15fr 1fr; gap: 5mm; margin: 6mm 0 5mm; }
.a4-caja { border: 1px solid #d9dfe3; border-radius: 3mm; padding: 3.5mm 4.5mm; font-size: 9.8pt; break-inside: avoid; }
.a4-et { font-size: 7.8pt; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--marca); margin-bottom: 1.6mm; }
.a4-cliente { font-size: 12.5pt; font-weight: 700; margin-bottom: .8mm; }
.a4-tenue { color: #6a767d; }
.a4-aviso { border-left: 3px solid #b8693b; background: #fbf3ed; padding: 2.5mm 4mm; margin-bottom: 4mm; font-size: 9.5pt; }
.a4-tabla { width: 100%; border-collapse: collapse; font-size: 9.3pt; }
.a4-tabla thead th { background: var(--marca); color: #fff; font-weight: 700; font-size: 8.3pt; letter-spacing: .04em; text-transform: uppercase; padding: 2.2mm 2mm; text-align: left; }
.a4-tabla thead th:first-child { border-radius: 2mm 0 0 0; } .a4-tabla thead th:last-child { border-radius: 0 2mm 0 0; }
.a4-tabla td { padding: 2mm; border-bottom: 1px solid #e6eaed; vertical-align: top; }
.a4-tabla tbody tr:nth-child(even) td { background: #f7f9fa; }
.a4-tabla tbody tr { break-inside: avoid; }
.a4-tabla tfoot td { border-top: 1.5px solid var(--marca); border-bottom: 0; padding-top: 2.4mm; font-size: 9pt; }
.a4-tabla .der { text-align: right; white-space: nowrap; }
.a4-desc { font-weight: 700; }
.a4-lote { font-size: 8.2pt; color: #5d6970; margin-top: .6mm; }
.a4-resumen { display: grid; grid-template-columns: 1fr 66mm; gap: 6mm; margin-top: 6mm; break-inside: avoid; }
.a4-izq { display: flex; flex-direction: column; gap: 4mm; }
.a4-iva { width: 100%; border-collapse: collapse; font-size: 9pt; }
.a4-iva th { font-size: 7.8pt; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5d6970; border-bottom: 1px solid #d9dfe3; padding: 1.4mm 2mm; }
.a4-iva td { padding: 1.4mm 2mm; border-bottom: 1px solid #eef1f3; }
.a4-iva .der { text-align: right; }
.a4-pago { display: flex; flex-direction: column; gap: 1mm; }
.a4-obs { margin-top: 1.5mm; color: #45525a; font-style: italic; }
.a4-totales { display: flex; flex-direction: column; gap: 1.6mm; font-size: 10pt; }
.a4-total { display: flex; justify-content: space-between; align-items: baseline; background: var(--marca); color: #fff; border-radius: 3mm; padding: 3.5mm 4mm; margin-top: 1mm; font-size: 10pt; }
.a4-total strong { font-size: 17pt; font-weight: 900; }
.a4-estado { text-align: center; border-radius: 2mm; padding: 2mm; font-size: 9.5pt; }
.a4-estado.debe { background: #fdecea; color: #a5281b; } .a4-estado.pagada { background: #e6f4ec; color: #1d6b43; font-weight: 700; }
.a4-qr { display: flex; gap: 3mm; align-items: center; margin-top: 2mm; border: 1px solid #d9dfe3; border-radius: 3mm; padding: 2.5mm; }
.a4-qr-img { width: 24mm; height: 24mm; flex: none; } .a4-qr-img svg { width: 100%; height: 100%; display: block; }
.a4-qr .peque { font-size: 7.6pt; line-height: 1.3; color: #45525a; }
.a4-pie { margin-top: 9mm; padding-top: 3mm; border-top: 1px solid #d9dfe3; font-size: 7.8pt; color: #45525a; display: flex; flex-direction: column; gap: .8mm; text-align: center; }
.ef-cuerpo .a4, .publica-ancha .a4 { margin-top: 8px; margin-bottom: 8px; }
.publica-ancha:has(.a4) { max-width: calc(210mm + 32px); }
@media (max-width: 820px) {
  .a4 { width: 100%; min-height: 0; padding: 0 16px 16px; font-size: 13px; }
  .a4-franja { margin: 0 -16px 16px; }
  .a4-cab, .a4-emisor { flex-direction: column; } .a4-titulo { text-align: left; } .a4-mini { margin-left: 0; }
  .a4-bloques, .a4-resumen { grid-template-columns: 1fr; }
  .a4-tabla { font-size: 12px; } .a4-tabla th, .a4-tabla td { padding: 6px 4px; }
}
@media print {
  @page { size: A4 portrait; margin: 0 0 12mm; @bottom-center { content: "Página " counter(page) " de " counter(pages); font: 8pt Lato, sans-serif; color: #6a767d; } }
  body:has(.a4) * { visibility: hidden; }
  body:has(.a4) .a4, body:has(.a4) .a4 * { visibility: visible; }
  body:has(.a4) .a4 { position: absolute; left: 0; top: 0; width: 210mm; min-height: 0; box-shadow: none; border-radius: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .a4-tabla thead { display: table-header-group; }
}

/* ───── 1.14.0 · Repaso general de campos, desplegables y anchos para pantallas grandes ───── */
/* 1.36: el contenido del marco usa todo el ancho disponible, sin máximo */
.contenido { max-width: none; }
@media (min-width: 1700px) { .contenido { padding: 26px 32px; } }
/* Etiqueta siempre encima y alineada con su campo */
label.et { align-items: stretch; text-align: left; justify-content: flex-start; min-width: 0; line-height: 1.25; }
label.et > .campo, label.et > select, label.et > textarea, label.et > input, label.et > fieldset, label.et > div { width: 100%; margin: 0; }
label.et .peque { font-weight: 400; }
fieldset.campo-bloqueado { border: 0; padding: 0; margin: 0; min-width: 0; }
.campo { font-size: 14.5px; color: var(--tinta); }
textarea.campo { height: auto; min-height: 84px; padding: 10px 12px; line-height: 1.45; resize: vertical; }
input.campo[type="number"], input.campo.tnum { font-variant-numeric: tabular-nums; }
input.campo[type="date"], input.campo[type="datetime-local"], input.campo[type="time"] { padding-right: 10px; }
/* Desplegables con flecha propia, separada del borde */
select.campo, .ventana select, .form select, .tarjeta select:not(.sin-flecha) {
  -webkit-appearance: none; appearance: none; padding-right: 42px; text-overflow: ellipsis; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232f5f63' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 14px 14px; }
select.campo:hover { border-color: color-mix(in oklab, var(--primario) 45%, var(--borde-c)); }
select.campo:disabled { cursor: not-allowed; opacity: .7; }
.capsula select { -webkit-appearance: none; appearance: none; padding-right: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232f5f63' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 4px center / 12px; }
/* Formularios: más columnas cuando hay sitio */
.form { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 16px 18px; }
/* Ventanas: aprovechan las pantallas grandes */
.ventana { width: min(860px, 96vw); }
.ventana.ancha { width: min(1480px, 96vw); }
@media (min-width: 1600px) { .ventana { width: min(980px, 92vw); } }
/* Tablas: sin desplazamiento lateral mientras quepan; números alineados */
.tabla { width: 100%; }
.tabla th, .tabla td { padding: 11px 14px; }
.tabla td.der, .tabla th.der { text-align: right; }
.tabla-env { overflow-x: auto; }
@media (min-width: 1400px) { .tabla td { white-space: normal; } }

/* ───── 1.14.0 · Ciclo presupuesto → pedido → albarán → factura ───── */
.ciclo { display: flex; align-items: stretch; gap: 0; margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--borde-c); border-radius: var(--rd-radio); background: var(--marfil); overflow-x: auto; }
.ciclo.cargando { min-height: 64px; }
.ciclo-paso { position: relative; display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: 170px; padding: 4px 26px 4px 6px; }
.ciclo-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--tarjeta); border: 2px solid var(--borde-c); color: var(--apagado-texto); }
.ciclo-paso.hecho .ciclo-ico { background: var(--primario); border-color: var(--primario); color: #fff; }
.ciclo-paso.actual .ciclo-ico { box-shadow: 0 0 0 4px oklch(0.45 0.085 182 / 0.22); }
.ciclo-paso.saltado { opacity: .55; }
.ciclo-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ciclo-et { font-size: 12.5px; font-weight: var(--rd-peso-fuerte); letter-spacing: .12em; text-transform: uppercase; color: var(--apagado-texto); }
.ciclo-paso.actual .ciclo-et { color: var(--primario); }
.ciclo-doc { all: unset; cursor: pointer; display: flex; flex-direction: column; line-height: 1.2; border-radius: 8px; padding: 2px 4px; margin-left: -4px; }
.ciclo-doc:hover:not(:disabled) { background: oklch(0.45 0.085 182 / 0.1); }
.ciclo-doc:disabled { cursor: default; }
.ciclo-doc b { font-size: 14px; } .ciclo-doc small { font-size: 12.5px; color: var(--apagado-texto); }
.ciclo-flecha { position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; border-top: 2px solid var(--borde-c); border-right: 2px solid var(--borde-c); transform: translateY(-50%) rotate(45deg); }
.ciclo-paso.hecho .ciclo-flecha { border-color: var(--primario); }
.ciclo-sig { display: flex; align-items: center; padding-left: 10px; flex: none; }
.f360-ciclo { padding: 14px 24px 0; } .f360-ciclo .ciclo { margin: 0; }
@media (max-width: 900px) { .f360-ciclo { padding: 12px 14px 0; } }
@media print { .f360-ciclo, .ciclo { display: none !important; } }

/* ───── 1.15.0 · KPIs y gráficas en cada pantalla ───── */
.panel-kpis { margin-bottom: 18px; }
.kpi2-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.kpi2 { background: var(--tarjeta); border: 1px solid var(--borde-c); border-radius: var(--rd-radio); padding: 14px 16px; box-shadow: var(--sombra-tarjeta); display: flex; flex-direction: column; gap: 6px; min-height: 104px; }
.kpi2.cargando { background: linear-gradient(90deg, var(--marfil), var(--tarjeta), var(--marfil)); background-size: 200% 100%; animation: brillo 1.4s infinite linear; }
@keyframes brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.kpi2-cab { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: var(--rd-peso-fuerte); color: var(--apagado-texto); }
.kpi2-ico { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--acento); color: var(--acento-texto); flex: none; }
.kpi2 > b { font-size: 25px; font-weight: var(--rd-peso-fuerte); letter-spacing: -.01em; color: var(--tinta); line-height: 1.1; }
.kpi2 small { font-size: 12px; color: var(--apagado-texto); }
.tend { font-weight: var(--rd-peso-fuerte); } .tend.sube { color: var(--exito); } .tend.baja { color: var(--peligro); }
.panel-kpis-pleg { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0 4px; font-size: 12.5px; font-weight: var(--rd-peso-fuerte); color: var(--primario); }
.graf-rejilla-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 14px; margin-top: 10px; }
.graf-tarjeta.ancha { grid-column: 1 / -1; }
.graf-tarjeta h4 { margin: 0 0 10px; font-size: 13.5px; font-weight: var(--rd-peso-fuerte); color: var(--tinta); }
.graf svg { width: 100%; height: auto; display: block; overflow: visible; }
.graf-rejilla { stroke: var(--borde-c); stroke-width: 1; stroke-dasharray: 3 4; }
.graf-eje { font-size: 12px; fill: var(--apagado-texto); font-family: Lato, sans-serif; }
.graf rect { transition: opacity .15s; } .graf rect:hover { opacity: .78; }
.graf-leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--apagado-texto); margin-top: 6px; }
.graf-leyenda i, .dona-ley i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
/* Gráfica común configurable (grafica.js) */
.graf2 { min-width: 0; }
.graf2-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.graf2-titulo { margin: 0; font-size: 13.5px; font-weight: var(--rd-peso-fuerte); color: var(--tinta); line-height: 1.35; }
.graf-tarjeta .graf2-titulo { margin: 0; }
.graf2-boton { all: unset; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--apagado-texto); cursor: pointer; border: 1px solid transparent; }
.graf2-boton:hover, .graf2-boton.activo { background: var(--acento); color: var(--acento-texto); border-color: var(--borde-c); }
.graf2-boton:focus-visible { outline: 2px solid var(--primario); outline-offset: 1px; }
.graf2-panel { border: 1px solid var(--borde-c); background: var(--marfil); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; }
.graf2-op { display: grid; grid-template-columns: 130px 1fr; gap: 8px; align-items: start; }
.graf2-op-t { font-size: 12px; font-weight: var(--rd-peso-fuerte); color: var(--apagado-texto); padding-top: 5px; }
.graf2-op-l { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.graf2-op-l label.chk { font-size: 13px; }
.graf2-chip { all: unset; cursor: pointer; font-size: 12.5px; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--borde-c); background: var(--tarjeta); color: var(--tinta); }
.graf2-chip.activo { background: var(--primario); border-color: var(--primario); color: var(--primario-texto); font-weight: var(--rd-peso-fuerte); }
.graf2-chip:focus-visible { outline: 2px solid var(--primario); outline-offset: 1px; }
.graf2-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px dashed var(--borde-c); padding-top: 8px; }
.graf2-cuerpo { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-start; }
.graf2-dibujo { flex: 1 1 360px; min-width: 0; }
.graf2-svg { position: relative; }
.graf2-svg svg { width: 100%; height: auto; display: block; overflow: visible; touch-action: pan-y; }
.graf-rejilla.cero { stroke-dasharray: none; stroke: var(--apagado-texto); opacity: .45; }
.graf2-valor { font-size: 12px; font-weight: var(--rd-peso-fuerte); fill: var(--tinta); font-family: Lato, sans-serif; font-variant-numeric: tabular-nums; }
.graf2-foco { fill: var(--acento); opacity: .55; }
.graf2-zona { cursor: crosshair; }
.graf2-tip { position: absolute; top: 0; transform: translateX(-50%); pointer-events: none; z-index: 3; min-width: 150px; max-width: 260px; background: var(--tarjeta); color: var(--tinta);
  border: 1px solid var(--borde-c); border-radius: 10px; padding: 7px 9px; box-shadow: 0 6px 18px rgb(0 0 0 / .12); font-size: 12px; }
.graf2-tip.izq { transform: translateX(calc(-100% - 8px)); }
.graf2-tip > b { display: block; margin-bottom: 3px; }
.graf2-tip div { display: flex; align-items: center; gap: 6px; } .graf2-tip div span { flex: 1; color: var(--apagado-texto); }
.graf2-tip i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.graf2-tip-var { color: var(--apagado-texto); font-size: 12.5px; margin-top: 2px; }
.graf2-resumen { flex: 0 1 190px; min-width: 160px; margin: 0; display: grid; grid-template-columns: 1fr; gap: 6px; font-size: 12.5px; }
.graf2-resumen > div { background: var(--marfil); border: 1px solid var(--borde-c); border-radius: 10px; padding: 6px 9px; }
.graf2-resumen dt { color: var(--apagado-texto); font-size: 13px; } .graf2-resumen dt small { font-size: 12px; opacity: .85; }
.graf2-resumen dd { margin: 1px 0 0; font-weight: var(--rd-peso-fuerte); font-size: 14px; color: var(--tinta); }
.graf2-resumen dd.sube { color: var(--exito); } .graf2-resumen dd.baja { color: var(--peligro); }
.graf2-resumen .graf2-res-de { background: none; border: 0; padding: 0; font-size: 12.5px; font-weight: var(--rd-peso-fuerte); color: var(--apagado-texto); }
@media (max-width: 700px) { .graf2-resumen { flex-basis: 100%; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } .graf2-op { grid-template-columns: 1fr; gap: 4px; } }
.graf2-cargando { height: 170px; display: flex; align-items: flex-end; gap: 8px; padding: 10px 6px 26px; position: relative; }
.graf2-cargando span { flex: 1; background: var(--apagado, #eee); border-radius: 6px 6px 2px 2px; animation: graf2-latido 1.2s ease-in-out infinite; }
.graf2-cargando span:nth-child(1) { height: 40%; } .graf2-cargando span:nth-child(2) { height: 65%; animation-delay: .1s; } .graf2-cargando span:nth-child(3) { height: 50%; animation-delay: .2s; }
.graf2-cargando span:nth-child(4) { height: 80%; animation-delay: .3s; } .graf2-cargando span:nth-child(5) { height: 55%; animation-delay: .4s; } .graf2-cargando span:nth-child(6) { height: 70%; animation-delay: .5s; }
.graf2-cargando em { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-style: normal; font-size: 12px; color: var(--apagado-texto); }
@keyframes graf2-latido { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .graf2-cargando span { animation: none; } }
.graf2-vacio { padding: 18px 10px; text-align: center; color: var(--apagado-texto); font-size: 13px; border: 1px dashed var(--borde-c); border-radius: 10px; }
.graf2-vacio .enlace { all: unset; cursor: pointer; color: var(--primario); font-weight: var(--rd-peso-fuerte); text-decoration: underline; }
.graf2-tabla { max-height: 340px; overflow: auto; }
.graf2-tarta .graf2-hueco { fill: var(--tarjeta); }
.dona-ley div.foco { font-weight: var(--rd-peso-fuerte); } .dona-ley em { font-style: normal; color: var(--apagado-texto); min-width: 52px; text-align: right; font-size: 12px; }
.ranking-fila.foco { background: var(--acento); }
.ranking-barra { position: relative; } .ranking-barra i:not(.anterior) { position: relative; } .ranking-barra i.anterior { position: absolute; inset: 0 auto 0 0; background: #b9c6ca; opacity: .7; }
.ranking { display: flex; flex-direction: column; gap: 6px; }
.ranking-fila { all: unset; display: grid; grid-template-columns: minmax(120px, 1.2fr) 1.4fr auto; align-items: center; gap: 10px; font-size: 13px; padding: 3px 4px; border-radius: 8px; }
.ranking-fila:not(:disabled) { cursor: pointer; } .ranking-fila:not(:disabled):hover { background: var(--acento); }
.ranking-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ranking-barra { height: 10px; background: var(--marfil); border-radius: 99px; overflow: hidden; } .ranking-barra i { display: block; height: 100%; border-radius: 99px; }
.dona { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.dona-t { font-size: 16px; font-weight: var(--rd-peso-fuerte); fill: var(--tinta); font-family: Lato, sans-serif; }
.dona-ley { display: flex; flex-direction: column; gap: 6px; font-size: 13px; flex: 1; min-width: 160px; }
.dona-ley div { display: flex; align-items: center; gap: 4px; } .dona-ley span { flex: 1; } 
@media print { .panel-kpis { display: none; } }

/* ───── 1.15.1 · Menú lateral más claro y ágil ───── */
@media (min-width: 901px) { .marco { grid-template-columns: 300px minmax(0, 1fr); } }
.lateral { padding: 16px 14px; }
.nav-areas { gap: 5px; padding: 5px; border-radius: 14px; background: var(--lateral-hondo); box-shadow: inset 0 1px 0 oklch(1 0 0 / .05), 0 8px 14px -6px var(--lateral-hondo); }
.nav-area { gap: 4px; padding: 9px 2px 7px; border-radius: 10px; font-size: 12px; letter-spacing: .01em; transition: background .15s, transform .15s; }
.nav-area:hover { transform: translateY(-1px); }
.nav-area.activa { box-shadow: 0 6px 16px -8px var(--lateral-vivo); }
.nav-titulo { padding: 12px 10px 5px; opacity: .55; font-size: 12px; }
.nav-titulo::after { content: ""; flex: 1; height: 1px; background: var(--lateral-borde); margin-left: 6px; }
.nav-bloque { animation: entra-nav .22s var(--suave-curva, ease) both; }
@keyframes entra-nav { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.item-nav.compacto { padding: 5px 8px; min-height: 38px; font-size: 14px; gap: 10px; border-radius: 11px; transition: background .15s, padding-left .15s; }
.item-nav.compacto:hover { background: oklch(1 0 0 / .07); padding-left: 11px; }
.nav-ico { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; flex: none; background: oklch(1 0 0 / .07); color: var(--lateral-texto); transition: background .15s, color .15s; }
.item-nav.compacto:hover .nav-ico { background: oklch(1 0 0 / .12); }
.item-nav.activo .nav-ico { background: var(--lateral-vivo); color: var(--lateral-vivo-texto); }
.item-nav.activo .nav-ico svg { color: var(--lateral-vivo-texto); }
.item-nav.compacto.activo { background: linear-gradient(90deg, oklch(1 0 0 / .13), oklch(1 0 0 / .04)); }
.nav-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-recientes { margin-bottom: 8px; }
.nav-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 4px 4px; }
.nav-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 28px; padding: 0 10px; border-radius: 999px; background: oklch(1 0 0 / .07); border: 1px solid var(--lateral-borde); color: var(--lateral-texto); font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-chip:hover { background: oklch(1 0 0 / .14); color: #fff; }
.nav-fav .item-nav.compacto { min-height: 34px; }
.lateral .buscador { height: 40px; border-radius: 12px; padding-left: 36px; background: oklch(1 0 0 / .07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d8e6e4' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center; }
.marco.contraido .lateral .item-nav .icono-caja { width: 34px; height: 34px; }
@media (max-width: 900px) { .lateral { width: 300px; } }
.a4-firma { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; margin-top: 6mm; break-inside: avoid; }
.a4-firma img { max-height: 26mm; max-width: 100%; display: block; margin: 2mm 0; }
.a4-linea-firma { height: 22mm; border-bottom: 1px solid #9aa5ab; margin-bottom: 2mm; }
.velo-ventana:has(.a4) .ventana { background: #e9edef; }

/* 1.19.0 · Logotipo de la empresa activa en el menú (imagen corporativa por empresa) */
.logo-empresa { margin: 10px 0 4px; padding: 10px 14px; background: var(--lateral-claro, #fbf8f1); border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.logo-empresa img { max-height: 54px; max-width: 100%; object-fit: contain; display: block; }
.selector-idioma { margin-left: 0; gap: 6px; padding-left: 10px; cursor: pointer; }
.selector-idioma select { font-weight: 600; }
@media (max-width: 760px) { .selector-idioma select { max-width: 92px; } }

/* Cabecera en el móvil: todo cabe en una línea (migas ocultas, selectores estrechos, buscador solo icono) */
@media (max-width: 760px) {
  .cabecera-sup { gap: 8px; padding: 0 10px; }
  .cabecera-sup .migas { display: none; }
  .cabecera-sup .capsula { margin-left: auto; padding-left: 10px; min-width: 0; }
  .cabecera-sup .capsula > .peque { display: none; }
  .cabecera-sup .capsula select { max-width: 112px; text-overflow: ellipsis; }
  .cabecera-sup .selector-idioma { margin-left: 0; padding-left: 8px; }
  .cabecera-sup .selector-idioma select { max-width: 58px; }
  .buscar-todo span, .buscar-todo kbd { display: none; }
  .buscar-todo { padding: 0 10px; min-width: 0; }
}
@media (max-width: 420px) { .cabecera-sup .capsula select { max-width: 84px; } .cabecera-sup .selector-idioma > svg { display: none; } }

/* Puesta en marcha */
.barra-avance { height: 10px; border-radius: 999px; background: var(--apagado); overflow: hidden; }
.barra-avance > div { height: 100%; border-radius: 999px; transition: width .5s var(--curva); }
.paso-marcha { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--borde-c); }
.paso-marcha:last-child { border-bottom: 0; }
.paso-num { width: 30px; height: 30px; flex: none; border-radius: 999px; display: grid; place-items: center; font-weight: var(--rd-peso-fuerte); background: var(--apagado); color: var(--apagado-texto); }
.paso-num.hecho { background: var(--exito); color: #fff; }
@media (max-width: 560px) { .paso-marcha { flex-wrap: wrap; } .paso-marcha .estado { order: 3; } }

/* La historia de tu jamón (página pública del consumidor) */
.historia { max-width: 720px; }
.historia-cab { text-align: center; padding: 18px 0 8px; }
.historia-cab h1 { font-size: clamp(26px, 6vw, 38px); margin: 10px 0 4px; color: var(--marca, var(--tinta)); }
.historia-logo { max-height: 72px; max-width: 220px; }
.historia-marca { font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--marca); }
.historia-buscar { display: flex; gap: 8px; margin: 14px 0 18px; } .historia-buscar .campo { flex: 1; min-width: 0; }
@media (max-width: 520px) { .historia-buscar { flex-direction: column; } .historia-buscar .campo { flex: none; } }
.historia-aviso { border-left: 4px solid var(--aviso); }
.historia-precinto { width: 18px; height: 54px; border-radius: 6px; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .35), 0 0 0 1px var(--borde-c); }
.historia-cifra { text-align: center; padding: 8px 14px; border-radius: var(--rd-radio); background: color-mix(in oklch, var(--marca) 12%, transparent); }
.historia-cifra strong { display: block; font-size: 30px; color: var(--marca); } .historia-cifra span { font-size: 12px; color: var(--apagado-texto); }
.historia-linea { list-style: none; margin: 18px 0; padding: 0 0 0 6px; border-left: 2px solid color-mix(in oklch, var(--marca) 40%, transparent); }
.historia-linea li { display: flex; gap: 14px; padding: 10px 0 16px; margin-left: -19px; }
.historia-punto { width: 34px; height: 34px; flex: none; border-radius: 999px; display: grid; place-items: center; color: #fff; background: var(--marca); box-shadow: 0 0 0 4px var(--fondo); }

/* Portales del ganadero y de maquila */
/* ───────────── Equipo C · Portal del ganadero y portal de maquila (páginas públicas) ───────────── */
.portal-ext .pe-cifras { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.portal-ext .pe-cifra { font-size: 28px; font-weight: 300; line-height: 1.15; margin: 2px 0; }
.portal-ext .pe-pestanas .pastilla { min-height: 40px; }
.pe-rejilla { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.pe-partida { min-width: 0; }
.pe-mini-cifras { display: grid; gap: 10px 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pe-mini-cifras > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pe-mini-cifras strong { font-size: 15px; overflow-wrap: anywhere; }

/* Merma en directo frente a la máxima pactada */
.pe-barra { height: 10px; border-radius: 999px; background: var(--borde-c); overflow: hidden; margin-bottom: 4px; }
.pe-barra > span { display: block; height: 100%; border-radius: 999px; background: var(--primario); transition: width .6s var(--curva); }
.pe-barra > .pe-barra-verde { background: var(--exito); }
.pe-barra > .pe-barra-ambar { background: var(--aviso); }
.pe-barra > .pe-barra-rojo { background: var(--peligro); }

/* Avance del curado por fases */
.pe-curado { border-top: 1px solid var(--borde-c); padding-top: 10px; }
.pe-fases { list-style: none; display: flex; gap: 4px; padding: 0; margin: 8px 0 6px; }
.pe-fases li { flex: 1 1 0; min-width: 0; text-align: center; font-size: 12px; font-weight: var(--rd-peso-fuerte); color: var(--apagado-texto);
  padding-top: 8px; border-top: 4px solid var(--borde-c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-fases li.hecha { border-top-color: var(--exito); color: var(--tinta); }
.pe-fases li.actual { border-top-color: var(--aviso); color: var(--tinta); }

@media (max-width: 560px) {
  .portal-ext .pe-cifra { font-size: 24px; }
  .pe-rejilla { grid-template-columns: 1fr; }
  .pe-mini-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pe-fases li { font-size: 12px; }
  .portal-ext .hero { padding: 22px 18px; border-radius: 20px; }
}
@media print { .portal-ext .pe-pestanas { display: none; } }

/* Rentabilidad de partidas y optimizador del despiece */
/* Equipo A · Rentabilidad de partidas, ranking de ganaderos y optimizador del despiece */

/* Ranking: nota de calidad con su barra */
.rp-nota { display: flex; align-items: center; gap: 8px; min-width: 130px; }
.rp-barra { flex: 1; min-width: 60px; height: 8px; }
.rp-parte { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--borde-c); }
.rp-parte:last-of-type { border-bottom: 0; }

/* Optimizador: elección de grupo de canales */
.od-grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.od-grupo { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 64px; padding: 12px 14px; border-radius: var(--rd-radio);
  border: 1px solid var(--borde-c); background: var(--tarjeta); color: var(--tinta); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.od-grupo span { font-size: 13px; color: var(--apagado-texto); }
.od-grupo:hover { border-color: var(--primario); }
.od-grupo.activo { border-color: var(--primario); background: color-mix(in oklch, var(--primario) 9%, var(--tarjeta)); box-shadow: inset 0 0 0 1px var(--primario); }
.od-tipo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 720px) { .od-tipo { grid-template-columns: 1fr; } }

/* Optimizador: tarjeta de cada pieza */
.od-pieza { min-width: 0; }
.od-pieza .tabla tr.od-rec td { background: color-mix(in oklch, var(--exito) 8%, transparent); }
.od-pieza details summary { cursor: pointer; color: var(--apagado-texto); font-weight: var(--rd-peso-fuerte); }
.od-datos { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.od-datos li { line-height: 1.4; overflow-wrap: anywhere; }
.od-sel { display: block; margin-top: 4px; max-width: 100%; width: 100%; }
.od-ia { white-space: pre-wrap; padding: 14px 16px; border-radius: var(--rd-radio); border: 1px solid var(--borde-c); background: var(--marfil); color: var(--tinta); line-height: 1.5; }

/* Parte diario, modo inspección y panel del dueño */
/* ───── Equipo D · Parte diario, Modo inspección y Panel del dueño ───── */

/* Parte diario */
.pd-semaforo { --c: var(--exito); display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--rd-radio); background: color-mix(in oklab, var(--c) 10%, var(--tarjeta)); border: 1.5px solid color-mix(in oklab, var(--c) 45%, transparent); flex-wrap: wrap; }
.pd-semaforo.pd-ambar { --c: var(--aviso); } .pd-semaforo.pd-rojo { --c: var(--peligro); }
.pd-luz { width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 6px color-mix(in oklab, var(--c) 22%, transparent); flex: none; }
.pd-sem-t { font-size: 20px; font-weight: var(--rd-peso-fuerte); color: var(--tinta); }
.pd-sem-m { color: var(--apagado-texto); }
.pd-sem-f { margin-left: auto; color: var(--apagado-texto); }
.pd-dias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pd-cifras { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 18px; }
.pd-cifra-t { font-size: 13px; font-weight: var(--rd-peso-fuerte); letter-spacing: .08em; text-transform: uppercase; color: var(--apagado-texto); }
.pd-cifra-v { font-size: 22px; font-weight: var(--rd-peso-fuerte); color: var(--tinta); line-height: 1.2; overflow-wrap: anywhere; }
.pd-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 16px; }
.pd-bloque { border-top: 4px solid var(--c); }
.pd-ico { background: color-mix(in oklab, var(--c) 16%, transparent); color: var(--c); }
.pd-n { font-size: 20px; font-weight: var(--rd-peso-fuerte); color: var(--c); white-space: nowrap; }
.pd-ver { display: inline-block; margin-top: 8px; }
.pd-linea { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 4px; border: 0; border-bottom: 1px solid var(--borde-c); background: none; font: inherit; color: var(--tinta); text-align: left; cursor: pointer; }
.pd-linea:last-child { border-bottom: 0; }
.pd-linea:disabled { cursor: default; opacity: 1; }
.pd-linea:not(:disabled):hover { background: var(--acento); }
.pd-linea-t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pd-linea-t strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-linea-v { font-weight: var(--rd-peso-fuerte); white-space: nowrap; }
.pd-envio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pd-burbuja { white-space: pre-line; background: #dcf8c6; color: #111b21; border-radius: 4px 16px 16px 16px; padding: 12px 14px; font-size: 14.5px; line-height: 1.5; box-shadow: 0 1px 1px rgba(0,0,0,.08); overflow-wrap: anywhere; }
.pd-toque { min-height: 48px; }
.pd-dest { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--borde-c); border-radius: var(--rd-radio); flex-wrap: wrap; }
.pd-dest-ok { border-color: var(--exito); background: color-mix(in oklab, var(--exito) 8%, transparent); }
.pd-dest-mal { border-color: var(--peligro); background: color-mix(in oklab, var(--peligro) 8%, transparent); }
.pd-fila-dest { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.campo-error { border-color: var(--peligro) !important; box-shadow: 0 0 0 2px color-mix(in oklab, var(--peligro) 20%, transparent); }
@media (max-width: 900px) { .pd-dias, .pd-envio { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .pd-fila-dest { grid-template-columns: 1fr 1fr; } .pd-sem-f { margin-left: 0; width: 100%; } .pd-cifras { grid-template-columns: 1fr 1fr; } }

/* Modo inspección */
.ins-tipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 10px; }
.ins-tipo { display: flex; flex-direction: column; gap: 4px; min-height: 64px; padding: 12px 14px; border: 1.5px solid var(--borde-c); border-radius: var(--rd-radio); background: var(--tarjeta); color: var(--tinta); font: inherit; text-align: left; cursor: pointer; }
.ins-tipo.activo { border-color: var(--primario); background: var(--acento); box-shadow: inset 0 0 0 1px var(--primario); }
.ins-secciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 8px 16px; }
.ins-chk { min-height: 40px; }
.ins-boton { min-height: 52px; padding: 0 24px; font-size: 16px; }
.ins-vista { max-width: calc(210mm + 32px); margin: 0 auto; }
.ins-a4 { padding-bottom: 16mm; }
.ins-global { --c: #1d6b43; display: flex; justify-content: space-between; gap: 6mm; flex-wrap: wrap; margin-top: 6mm; padding: 3.5mm 5mm; border-radius: 3mm; background: color-mix(in oklab, var(--c) 10%, #fff); border-left: 5px solid var(--c); font-size: 11pt; }
.ins-global strong { color: var(--c); }
.ins-luz { --c: #6a767d; display: inline-flex; align-items: center; gap: 1.6mm; font-size: 8.6pt; font-weight: var(--rd-peso-fuerte); color: var(--c); white-space: nowrap; }
.ins-luz::before { content: ""; width: 3mm; height: 3mm; border-radius: 50%; background: var(--c); }
.ins-indice a { color: inherit; text-decoration: none; }
.ins-sec { margin-top: 9mm; }
.ins-sec-cab { display: flex; align-items: center; gap: 3mm; padding-bottom: 2mm; border-bottom: 1.5px solid var(--marca); break-after: avoid; break-inside: avoid; }
.ins-sec-cab h2 { flex: 1; margin: 0; font-size: 13.5pt; font-weight: var(--rd-peso-fuerte); color: var(--marca); }
.ins-num { display: grid; place-items: center; width: 7mm; height: 7mm; border-radius: 50%; background: var(--marca); color: #fff; font-size: 9.5pt; font-weight: var(--rd-peso-fuerte); flex: none; }
.ins-motivo { margin: 2mm 0 3mm; color: #45525a; font-style: italic; }
.ins-h4 { margin: 4mm 0 2mm; font-size: 9pt; font-weight: var(--rd-peso-fuerte); letter-spacing: .1em; text-transform: uppercase; color: var(--marca); break-after: avoid; }
.ins-tabla { font-size: 8.6pt; }
.ins-tabla td { overflow-wrap: anywhere; }
.ins-firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 12mm; margin-top: 18mm; break-inside: avoid; }
.ins-firmas div { border-top: 1px solid #333; padding-top: 2mm; font-size: 9pt; }
@media (max-width: 820px) { .ins-tabla { display: block; overflow-x: auto; } .ins-firmas { grid-template-columns: 1fr; } }
@media print { .ins-tabla { display: table; overflow: visible; } }

/* Panel del dueño (móvil, toques grandes, contraste alto para leer al sol) */
.dueno { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.dueno-saludo h1 { margin: 6px 0 2px; font-size: 30px; font-weight: var(--rd-peso-fuerte); color: var(--tinta); line-height: 1.15; }
.dueno-fecha { font-size: 16px; color: var(--apagado-texto); font-weight: var(--rd-peso-fuerte); }
.dueno-fecha::first-letter { text-transform: uppercase; }
.dueno-semaforo { --c: var(--exito); display: flex; align-items: center; gap: 16px; min-height: 84px; padding: 16px 18px; border-radius: var(--rd-radio); background: var(--c); color: #fff; text-decoration: none; box-shadow: var(--sombra-pop); }
.dueno-semaforo.dueno-ambar { --c: oklch(0.62 0.14 70); } .dueno-semaforo.dueno-rojo { --c: var(--peligro); }
.dueno-luz { width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 7px rgba(255,255,255,.28); flex: none; }
.dueno-sem-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.dueno-sem-txt strong { font-size: 22px; font-weight: var(--rd-peso-fuerte); line-height: 1.1; }
.dueno-sem-txt span { font-size: 16px; font-weight: var(--rd-peso-fuerte); opacity: .95; }
.dueno-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dueno-cifra { display: flex; flex-direction: column; gap: 4px; min-height: 132px; padding: 16px; border-radius: var(--rd-radio); background: var(--tarjeta); border: 1.5px solid var(--borde-c); color: var(--tinta); text-decoration: none; box-shadow: var(--sombra-tarjeta); min-width: 0; }
.dueno-cifra:active, .dueno-aviso:active, .dueno-acceso:active, .dueno-semaforo:active { transform: scale(.98); }
.dueno-cifra-t { font-size: 13px; font-weight: var(--rd-peso-fuerte); letter-spacing: .06em; text-transform: uppercase; color: var(--apagado-texto); }
.dueno-cifra-v { font-size: clamp(21px, 6.2vw, 30px); font-weight: var(--rd-peso-fuerte); line-height: 1.1; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dueno-cifra-s { font-size: 14px; font-weight: var(--rd-peso-fuerte); color: var(--apagado-texto); }
.dueno-cmp { margin-top: auto; align-self: flex-start; font-size: 13.5px; font-weight: var(--rd-peso-fuerte); padding: 3px 10px; border-radius: 999px; }
.dueno-cmp-bien { color: #fff; background: var(--exito); } .dueno-cmp-mal { color: #fff; background: var(--peligro); } .dueno-cmp-neutro { color: var(--tinta); background: var(--apagado); }
.dueno-mal { color: var(--peligro); } .dueno-bien { color: var(--exito); }
.dueno-atencion { display: flex; flex-direction: column; gap: 10px; }
.dueno-atencion h2 { margin: 6px 0 2px; font-size: 20px; font-weight: var(--rd-peso-fuerte); color: var(--tinta); }
.dueno-aviso { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; border-radius: var(--rd-radio); background: var(--tarjeta); border: 1.5px solid var(--borde-c); color: var(--tinta); text-decoration: none; }
.dueno-punto { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.dueno-p-rojo { background: var(--peligro); } .dueno-p-ambar { background: var(--aviso); }
.dueno-aviso-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.dueno-aviso-txt strong { font-size: 17px; font-weight: var(--rd-peso-fuerte); }
.dueno-aviso-txt span { font-size: 14px; color: var(--apagado-texto); font-weight: var(--rd-peso-fuerte); }
.dueno-accesos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dueno-acceso { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 104px; padding: 12px 6px; border-radius: var(--rd-radio); background: var(--primario); color: var(--primario-texto); text-decoration: none; font-size: 16px; font-weight: var(--rd-peso-fuerte); text-align: center; }
.dueno-pie { text-align: center; color: var(--apagado-texto); font-size: 14px; margin: 0 0 12px; }
.dueno-recargar, .dueno-reintentar { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--borde-c); background: var(--tarjeta); color: var(--tinta); font: inherit; font-weight: var(--rd-peso-fuerte); cursor: pointer; }
@media (max-width: 380px) { .dueno-accesos { grid-template-columns: 1fr; } .dueno-acceso { flex-direction: row; min-height: 64px; } }

/* Valor en curación, previsión de campaña y subproductos */
/* ───── Equipo B · Valor del stock en curación, certificado para el banco, previsión de campaña y subproductos ───── */

/* Valor en curación: elegir partidas del certificado */
.vc-elegir { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 6px 14px; max-height: 260px; overflow: auto; padding: 8px 10px; border: 1px solid var(--borde-c); border-radius: var(--curva, 12px); background: var(--tarjeta); }
.vc-elegir .chk { font-size: 13px; }
/* Certificado A4: título algo más pequeño (es más largo que «Factura») y declaración responsable */
.a4 .vc-a4-tipo { font-size: 17pt; max-width: 80mm; margin-left: auto; line-height: 1.1; }
.a4 .vc-declaracion p { margin: 0 0 1.6mm; font-size: 8.8pt; line-height: 1.4; text-align: justify; }
.a4 .vc-declaracion p:last-child { margin-bottom: 0; font-size: 7.8pt; }

/* Previsión de campaña */
.cp-detalle { background: color-mix(in oklab, var(--primario) 4%, var(--tarjeta)); padding: 10px 14px !important; }
.cp-sub th, .cp-sub td { padding: 6px 10px; font-size: 13px; }
.cp-margen { margin: 0 16px 16px; }
.cp-tabla td.der, .cp-tabla td.tnum { white-space: nowrap; }
.cp-lista { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; line-height: 1.5; }

/* Subproductos */
.sp-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.sp-fecha { min-width: 150px; }

@media (max-width: 640px) {
  .vc-elegir { max-height: 200px; }
  .cp-margen { margin: 0 10px 10px; }
  .sp-fecha { flex: 1 1 140px; }
}
@media print {
  .vc-elegir, .cp-detalle { display: none; }
  /* Certificado A4 dentro de una ventana: la ventana deja de recortar y se ocultan las páginas en blanco de detrás */
  .velo-ventana:has(.a4) { position: static; display: block; background: none; backdrop-filter: none; padding: 0; transform: none; }
  .ventana:has(.a4) { max-height: none; overflow: visible; width: auto; padding: 0; border: 0; box-shadow: none; background: none; transform: none !important; animation: none !important; }
  body:has(.velo-ventana .a4) .contenido *:not(:has(.a4)):not(.a4):not(.a4 *) { display: none !important; }
}

/* Sostenibilidad, exportación a terceros países, voz, cámara y modo planta */
/* ── Equipo E · Sostenibilidad, exportación a terceros países, voz y cámara en planta, modo planta para tablet ── */

/* ───── Sostenibilidad y bienestar animal ───── */
.sost-filtros { gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.sost-filtros .et { flex: 1 1 170px; min-width: 0; }
.sost-semaforos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.sost-ind { border-left: 6px solid var(--borde-c); display: flex; flex-direction: column; gap: 4px; }
.sost-ind > .fila { flex-wrap: nowrap; align-items: flex-start; gap: 10px; }
.sost-ind.s-verde { border-left-color: var(--exito); } .sost-ind.s-ambar { border-left-color: var(--aviso); } .sost-ind.s-rojo { border-left-color: var(--peligro); }
.sost-valor { font-size: 28px; font-weight: var(--rd-peso-fuerte); line-height: 1.1; color: var(--tinta); }
.sost-luz { display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex: none; vertical-align: middle; box-shadow: 0 0 0 3px oklch(0 0 0 / 0.06); }
.sost-a4 { font-size: 12.5px; }
.sost-a4-h { margin: 18px 0 6px; font-size: 14px; border-bottom: 2px solid #1d2a30; padding-bottom: 3px; }
.sost-a4-tabla { width: 100%; border-collapse: collapse; font-size: 12px; }
.sost-a4-tabla th, .sost-a4-tabla td { border: 1px solid #c9ced1; padding: 5px 7px; text-align: left; }
.sost-a4-tabla th { background: #f1f3f4; }
@media print { .sost-a4 .sost-luz { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .sost-a4-tabla th { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* ───── Exportación a terceros países ───── */
fieldset.exp-campos { border: 0; padding: 0; margin: 0; min-width: 0; }

/* ───── Dictado por voz ───── */
.dictado { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.dictado-mic { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 64px; padding: 10px 22px; border-radius: 999px; border: 0; cursor: pointer;
  font: inherit; font-size: 18px; font-weight: var(--rd-peso-fuerte); background: var(--primario); color: var(--primario-texto); box-shadow: var(--sombra-pop); touch-action: manipulation; }
.dictado.grande .dictado-mic { min-height: 110px; font-size: 22px; border-radius: 28px; }
.dictado-mic:disabled { opacity: .45; cursor: default; }
.dictado-mic.escuchando { background: var(--peligro); animation: dictado-latido 1.1s ease-in-out infinite; }
@keyframes dictado-latido { 0%, 100% { box-shadow: 0 0 0 0 oklch(0.52 0.19 27 / 0.55); } 50% { box-shadow: 0 0 0 18px oklch(0.52 0.19 27 / 0); } }
@media (prefers-reduced-motion: reduce) { .dictado-mic.escuchando { animation: none; } }
.dictado-ejemplo { margin: 0; text-align: center; color: var(--apagado-texto); }
.dictado-parcial { margin: 0; font-size: 20px; text-align: center; font-style: italic; }
.dictado-frase { font-size: 22px; font-weight: var(--rd-peso-fuerte); line-height: 1.25; margin: 2px 0 8px; }
.dictado-datos { gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.dictado-dato { display: inline-flex; flex-direction: column; padding: 6px 12px; border-radius: 12px; background: var(--tarjeta); border: 1px solid var(--borde-c); min-width: 70px; }
.dictado-dato small { font-size: 12.5px; color: var(--apagado-texto); text-transform: uppercase; letter-spacing: .04em; }
.dictado-dato b { font-size: 20px; }
.dictado-si, .dictado-no { min-height: 60px; font-size: 18px; flex: 1 1 160px; justify-content: center; }
.dictado-escribir summary { cursor: pointer; }

/* ───── Lectura con la cámara ───── */
.lectura-doc { display: flex; flex-direction: column; gap: 10px; }
.lectura-camara { min-height: 72px; font-size: 18px; justify-content: center; cursor: pointer; }
.lectura-foto { width: 100%; max-height: 260px; object-fit: contain; border-radius: var(--rd-radio); border: 1px solid var(--borde-c); background: #000; }
.escaner { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.escaner-video { width: 100%; max-height: 300px; object-fit: cover; border-radius: var(--rd-radio); background: #000; }
.escaner-abrir { min-height: 56px; justify-content: center; }

/* ───── Modo planta (tablet de sala): tema oscuro propio, alto contraste, pensado para guantes ───── */
body.con-modo-planta { overflow: hidden; }
body.con-modo-planta .lateral, body.con-modo-planta .cabecera-sup, body.con-modo-planta .pie-pagina, body.con-modo-planta .franja-red { display: none !important; }
.modo-planta {
  --mp-fondo: #0a0f12; --mp-caja: #141c21; --mp-caja-2: #1c262c; --mp-texto: #f3f6f7; --mp-suave: #b9c6cc; --mp-borde: #33444d;
  --mp-amarillo: #ffd23f; --mp-verde: #2fd38a; --mp-rojo: #ff5a4f; --mp-azul: #4fb3ff;
  --tinta: var(--mp-texto); --tarjeta: var(--mp-caja); --marfil: var(--mp-caja-2); --borde-c: var(--mp-borde); --apagado: var(--mp-caja-2); --apagado-texto: var(--mp-suave);
  --primario: #18a58e; --primario-texto: #04110e; --exito: var(--mp-verde); --peligro: var(--mp-rojo); --aviso: var(--mp-amarillo);
  position: fixed; inset: 0; z-index: 38; display: flex; flex-direction: column; background: var(--mp-fondo); color: var(--mp-texto);
  font-size: 18px; overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.modo-planta input, .modo-planta textarea, .modo-planta select { user-select: text; -webkit-user-select: text; }
.modo-planta .campo { height: 56px; font-size: 18px; color: var(--mp-texto); }
.modo-planta .boton, .modo-planta .boton-sec { min-height: 56px; font-size: 17px; border-radius: 16px; }
.modo-planta .boton-sec { background: var(--mp-caja-2); color: var(--mp-texto); border-color: var(--mp-borde); }
.modo-planta .decision { color: var(--mp-texto); }
.modo-planta .d-ok { background: oklch(0.7 0.15 160 / 0.16); border-color: var(--mp-verde); }
.modo-planta .d-cond { background: oklch(0.85 0.15 90 / 0.14); border-color: var(--mp-amarillo); }
.modo-planta .d-bloq { background: oklch(0.65 0.2 27 / 0.18); border-color: var(--mp-rojo); }
.modo-planta .vacio { color: var(--mp-suave); }
/* Lo que se reutiliza tal cual (ventanas, fichaje, trazabilidad) conserva el tema claro de la aplicación */
.modo-planta .velo-ventana, .modo-planta .velo-panel, .modo-planta .ficha360-fondo, .mp-claro {
  --tinta: oklch(0.21 0.03 220); --tarjeta: oklch(0.995 0.004 85); --marfil: oklch(0.985 0.009 85); --borde-c: oklch(0.88 0.014 80);
  --apagado: oklch(0.948 0.012 82); --apagado-texto: oklch(0.40 0.025 220); --primario: oklch(0.45 0.085 182); --primario-texto: oklch(0.99 0.005 85);
  --exito: oklch(0.5 0.12 160); --peligro: oklch(0.52 0.19 27); --aviso: oklch(0.72 0.13 75); color: var(--tinta); user-select: text; -webkit-user-select: text;
}
.modo-planta .velo-ventana .campo, .mp-claro .campo { height: 48px; color: var(--tinta); }
.modo-planta .velo-ventana .boton-sec, .mp-claro .boton-sec { background: var(--tarjeta); color: var(--tinta); border-color: var(--borde-c); }
.modo-planta .velo-ventana .decision, .mp-claro .decision { color: var(--tinta); }
.mp-claro { background: oklch(0.972 0.013 82); border-radius: 22px; padding: 14px; }
.mp-claro .vacio { color: var(--apagado-texto); }

.mp-cabecera { flex: none; display: flex; align-items: center; gap: 16px; padding: 12px 20px; background: #050809; border-bottom: 2px solid var(--mp-borde); flex-wrap: wrap; }
.mp-reloj { font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; display: flex; flex-direction: column; }
.mp-reloj small { font-size: 15px; font-weight: 600; color: var(--mp-suave); letter-spacing: 0; margin-top: 4px; }
.mp-reloj small::first-letter { text-transform: uppercase; }
.mp-quien { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mp-sede { height: 48px; max-width: 360px; border-radius: 14px; border: 2px solid var(--mp-borde); background: var(--mp-caja); color: var(--mp-texto); font: inherit; font-size: 18px; font-weight: 700; padding: 0 12px; }
.mp-operario { font-size: 17px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-operario span { color: var(--mp-suave); font-weight: 400; }
.mp-acciones-cab { display: flex; gap: 10px; margin-left: auto; }
.mp-boton-cab { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 18px; border-radius: 16px; border: 2px solid var(--mp-borde);
  background: var(--mp-caja); color: var(--mp-texto); font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; touch-action: none; }
.mp-salir::before { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 0)); background: oklch(0.65 0.2 27 / 0.55); pointer-events: none; }
.mp-salir > * { position: relative; }

.mp-cuerpo { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px 28px; -webkit-overflow-scrolling: touch; }
.mp-rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; min-height: 420px; }
@media (max-width: 1000px) { .mp-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .mp-rejilla { grid-template-columns: 1fr; } }
.mp-accion { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 170px; border-radius: 28px; border: 3px solid transparent;
  background: var(--mp-caja); color: var(--mp-texto); font: inherit; font-size: 26px; font-weight: 800; cursor: pointer; touch-action: manipulation; box-shadow: inset 0 -8px 0 var(--c, var(--mp-borde)); }
.mp-accion:active { transform: scale(.98); border-color: var(--c, var(--mp-borde)); }
.mp-accion svg { color: var(--c, var(--mp-texto)); }
.mp-canal { --c: var(--mp-amarillo); } .mp-pieza { --c: #ff9f43; } .mp-fichar { --c: var(--mp-azul); } .mp-temperatura { --c: #7ee0ff; } .mp-incidencia { --c: var(--mp-rojo); } .mp-traza { --c: var(--mp-verde); } .mp-guia { --c: #c39bff; }

.mp-panel { display: flex; flex-direction: column; gap: 16px; }
.mp-panel-cab { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mp-panel-cab h2 { margin: 0; font-size: 28px; font-weight: 800; }
.mp-volver { display: inline-flex; align-items: center; gap: 10px; min-height: 64px; padding: 0 22px; border-radius: 18px; border: 2px solid var(--mp-borde); background: var(--mp-caja-2); color: var(--mp-texto); font: inherit; font-size: 20px; font-weight: 800; cursor: pointer; }
.mp-girar { transform: rotate(180deg); }
.mp-chip { padding: 6px 14px; border-radius: 999px; background: var(--mp-caja-2); border: 1px solid var(--mp-borde); font-size: 15px; font-weight: 700; }
.mp-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .mp-dos { grid-template-columns: 1fr; } .mp-reloj { font-size: 40px; } .mp-accion { min-height: 130px; font-size: 22px; } }
.mp-caja { background: var(--mp-caja); border: 2px solid var(--mp-borde); border-radius: 24px; padding: 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mp-nota { color: var(--mp-suave); font-size: 16px; margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mp-nota b { color: var(--mp-texto); }
.mp-grande { font-size: 34px; font-weight: 800; line-height: 1.1; }
.mp-subtitulo { margin: 8px 0 0; font-size: 20px; }
.mp-boton-ancho .boton, .mp-boton-ancho .boton-sec { width: 100%; min-height: 84px; font-size: 22px; justify-content: center; border-radius: 22px; }
.mp-guardar { width: 100%; min-height: 84px !important; font-size: 24px !important; justify-content: center; border-radius: 22px !important; }

.mp-buscar { display: flex; align-items: center; gap: 10px; min-height: 72px; padding: 0 18px; border-radius: 18px; background: #000; border: 2px solid var(--mp-borde); }
.mp-buscar-txt { flex: 1; font-size: 38px; font-weight: 800; }
.mp-tecla-mini { min-height: 48px; padding: 0 16px; border-radius: 12px; border: 2px solid var(--mp-borde); background: var(--mp-caja-2); color: var(--mp-texto); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.mp-teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mp-tecla { min-height: 74px; border-radius: 18px; border: 2px solid var(--mp-borde); background: var(--mp-caja-2); color: var(--mp-texto); font: inherit; font-size: 32px; font-weight: 800; cursor: pointer; touch-action: manipulation; }
.mp-tecla:active { background: var(--mp-borde); }
.mp-tecla-borrar { color: var(--mp-amarillo); }
.mp-pantalla { min-height: 96px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 20px; background: #000; border: 3px solid var(--mp-borde); font-size: 56px; font-weight: 800; }
.mp-pantalla small { font-size: 24px; color: var(--mp-suave); }
.mp-pantalla.fuera { border-color: var(--mp-rojo); color: var(--mp-rojo); }

.mp-fichas { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.mp-ficha { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 84px; padding: 8px; border-radius: 18px; border: 3px solid var(--mp-borde);
  background: var(--mp-caja-2); color: var(--mp-texto); font: inherit; cursor: pointer; text-align: center; touch-action: manipulation; }
.mp-ficha.ancha { grid-column: span 2; }
.mp-ficha b { font-size: 24px; line-height: 1.1; }
.mp-ficha.ancha b { font-size: 19px; }
.mp-ficha small { font-size: 14px; color: var(--mp-suave); }
.mp-ficha.activa { border-color: var(--mp-amarillo); background: oklch(0.85 0.15 90 / 0.16); }
.mp-ficha.hecha { opacity: .7; }
.mp-ficha.pendiente { border-color: var(--mp-amarillo); }
@media (max-width: 520px) { .mp-ficha.ancha { grid-column: span 1; } .mp-fichas { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }
.mp-pastilla { min-height: 52px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--mp-borde); background: var(--mp-caja-2); color: var(--mp-texto); font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }
.mp-pastilla.activa { background: var(--mp-amarillo); color: #111; border-color: var(--mp-amarillo); }
.mp-pastilla.roja.activa { background: var(--mp-rojo); border-color: var(--mp-rojo); color: #fff; }
.mp-lista { display: flex; flex-direction: column; }
.mp-linea { display: flex; justify-content: space-between; gap: 10px; padding: 12px 4px; border-bottom: 1px solid var(--mp-borde); font-size: 17px; flex-wrap: wrap; }
.mp-texto { min-height: 96px; font-size: 18px !important; height: auto !important; padding: 12px !important; }
.mp-codigo { flex: 1 1 280px; height: 72px !important; font-size: 26px !important; font-weight: 700; }
.mp-boton-medio { min-height: 72px !important; font-size: 20px !important; padding: 0 26px; }
.modo-planta .dictado-mic { background: var(--mp-amarillo); color: #111; }
.modo-planta .dictado-mic.escuchando { background: var(--mp-rojo); color: #fff; }
.modo-planta .dictado-dato { background: #000; }
@media print { .modo-planta { display: none !important; } }

/* ───── canales (Yolanda en producción) ───── */
/* Equipo CANALES · medios en la bandeja de WhatsApp y en el correo (canales-medios.js) */
.medio-msj { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 100%; }
.medio-cab { font-size: 13px; }
.medio-audio { width: 100%; max-width: 320px; min-height: 40px; }
.medio-foto { display: block; max-width: 100%; width: 260px; max-height: 320px; object-fit: cover; border-radius: 10px; border: 1px solid var(--borde-c); background: var(--tarjeta); }
.medio-texto { white-space: pre-wrap; word-wrap: break-word; font-size: 13px; padding: 8px 10px; border-radius: 10px; background: color-mix(in oklch, var(--tarjeta) 82%, transparent); color: var(--tinta); border: 1px solid var(--borde-c); max-height: 260px; overflow: auto; }
.burbuja.yo .medio-texto { color: var(--tinta); }
.medio-lineas { display: flex; flex-direction: column; gap: 2px; }
.medio-ajustes { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.medio-chk { align-items: flex-start; min-height: 44px; }
.medio-chk input { margin-top: 3px; width: 20px; height: 20px; flex: none; }
@media (max-width: 640px) { .medio-foto { width: 100%; } }

/* ───── voz (Yolanda en producción) ───── */
/* Yolanda al teléfono (p_voz.js): transcripción de la llamada en burbujas */
.voz-transcripcion { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; padding: 4px 2px; }
.voz-turno { max-width: 86%; padding: 8px 12px; border-radius: var(--rd-radio); border: 1px solid var(--borde-c); background: var(--tarjeta); overflow-wrap: anywhere; }
.voz-turno.voz-yolanda { align-self: flex-start; border-bottom-left-radius: 4px; }
.voz-turno.voz-cliente { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--apagado); color: var(--tinta); }
@media (max-width: 560px) { .voz-turno { max-width: 96%; } }

/* ───── videollamada y formador (Yolanda en producción) ───── */
/* ───── Videollamada con Yolanda y formador virtual (equipo VIDEO) ───── */

/* Cara del agente: foto real del avatar en círculo; aro que respira al hablar; iniciales si aún no hay foto */
.cara-agente { position: relative; display: inline-grid; place-items: center; flex: none; border-radius: 50%; overflow: visible; background: var(--primario); }
.cara-agente img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 22%; display: block; background: var(--apagado); }
.cara-agente::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--tarjeta), 0 0 0 3px oklch(0.45 0.085 182 / 0.35); pointer-events: none; }
.cara-agente::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--cobre); opacity: 0; transform: scale(.96); pointer-events: none; }
.cara-agente.habla::after { animation: cara-respira 1.6s var(--curva) infinite; }
.cara-iniciales { color: var(--primario-texto); font-weight: var(--rd-peso-fuerte); letter-spacing: .04em; line-height: 1; user-select: none; }
@keyframes cara-respira { 0% { opacity: .9; transform: scale(.97); } 60% { opacity: .25; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.14); } }

/* Antes de llamar */
.vl { overflow: hidden; }
.vl-presenta { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.vl-titulo { margin: 4px 0 2px; font-size: 21px; }
.vl-boton-llamar { min-height: 46px; padding: 0 20px; }

/* Durante la llamada: vídeo de la persona con reloj arriba y subtítulos abajo */
.vl-llamada { padding: 0; }
.vl-pantalla { position: relative; aspect-ratio: 16 / 10; max-height: 70vh; width: 100%; background: oklch(0.2 0.02 220); border-radius: 22px 22px 0 0; overflow: hidden; }
.vl-medio { position: absolute; inset: 0; }
.vl-medio audio { display: none; }
.vl-video, .vl-medio video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vl-llamada.vl-habla .vl-pantalla { box-shadow: inset 0 0 0 3px var(--cobre); }
.vl-espera { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; color: oklch(0.97 0.01 85); }
.vl-espera-txt { font-weight: var(--rd-peso-fuerte); }
.vl-arriba { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; pointer-events: none; }
.vl-arriba .estado { background: oklch(0.99 0 0 / 0.92); }
.vl-reloj { font-weight: var(--rd-peso-fuerte); font-size: 13px; padding: 3px 10px; border-radius: 999px; background: oklch(0.15 0.02 220 / 0.6); color: white; }
.vl-reloj-ambar { background: var(--aviso); color: oklch(0.2 0.03 60); }
.vl-reloj-rojo { background: var(--peligro); color: white; }
.vl-subtitulos { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 4px; align-items: center; pointer-events: none; }
.vl-sub { max-width: min(680px, 100%); background: oklch(0.12 0.02 220 / 0.72); color: white; padding: 6px 12px; border-radius: 10px; font-size: 15px; line-height: 1.35; text-align: center; }
.vl-sub span { font-weight: var(--rd-peso-fuerte); color: var(--cobre-suave); }
.vl-sub-yo { font-size: 13px; opacity: .85; }
.vl-controles { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding: 12px; }
.vl-control { min-height: 46px; min-width: 150px; justify-content: center; }
.vl-apagado { border-color: var(--peligro); color: var(--peligro); }

/* Formador */
.formador-ficha { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.formador-prefs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; align-items: end; }
.formador-voz { min-height: 42px; }
.formador-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.formador-rec { display: flex; align-items: center; gap: 10px; padding: 14px; text-align: left; cursor: pointer; font: inherit; color: inherit; min-height: 64px; }
.formador-rec:hover { border-color: var(--primario); }
.formador-rec .icono-caja { background: oklch(0.45 0.085 182 / 0.1); color: var(--primario); }
.formador-rec-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.formador-sesion { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; align-items: start; }
.formador-pasos { background: var(--tarjeta); border: 1px solid var(--borde-c); border-radius: var(--rd-radio); padding: 16px; }
.formador-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 62vh; overflow-y: auto; }
.formador-lista li { border: 1px solid var(--borde-c); border-radius: var(--rd-radio); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.formador-lista li.actual { border-color: var(--primario); box-shadow: 0 0 0 2px oklch(0.45 0.085 182 / 0.15); }
.formador-lista li.visto strong::after { content: " ✓"; color: var(--exito); }
.formador-lista a { text-decoration: none; }
.formador-paso { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.formador-paso:focus-visible { outline: 2px solid var(--primario); outline-offset: 3px; border-radius: 6px; }
@media (max-width: 860px) {
  .formador-sesion { grid-template-columns: 1fr; }
  .formador-persona { order: -1; }
  .vl-pantalla { aspect-ratio: 3 / 4; max-height: 62vh; }
  .vl-control { flex: 1; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .cara-agente.habla::after { animation: none; opacity: .8; transform: none; } }

/* Ajustes › Videollamada */
.ajv-lista { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ajv-lista li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--borde-c); border-radius: 12px; }
.ajv-lista li > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ajv-luz { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ajv-lista li.ok .ajv-luz { background: var(--exito); box-shadow: 0 0 0 3px oklch(0.5 0.12 160 / 0.18); }
.ajv-lista li.mal .ajv-luz { background: var(--peligro); box-shadow: 0 0 0 3px oklch(0.52 0.19 27 / 0.18); }
.ajv-lista li.mal { border-color: oklch(0.52 0.19 27 / 0.3); }
.ajv-cara { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.ajv-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ajv-avatar { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 8px 10px; border: 1px solid var(--borde-c); border-radius: var(--rd-radio); background: var(--tarjeta); cursor: pointer; font: inherit; color: inherit; text-align: center; }
.ajv-avatar:hover:not(:disabled) { border-color: var(--primario); }
.ajv-avatar:disabled { cursor: default; }
.ajv-avatar.elegido { border-color: var(--exito); box-shadow: 0 0 0 2px oklch(0.5 0.12 160 / 0.25); }
.ajv-foto { width: 100%; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--apagado); display: grid; place-items: center; }
.ajv-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.ajv-nombre { font-weight: var(--rd-peso-fuerte); font-size: 13.5px; overflow-wrap: anywhere; }
.ajv-interruptores { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.ajv-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.ajv-error { color: var(--peligro); }
.campo.campo-error { border-color: var(--peligro); }
.ajv-cifras { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 8px; }
.ajv-cifra { font-size: 26px; font-weight: 300; }

/* Fichero de proveedores: cabeceras para ordenar y pasos del alta */
.th-orden { all: unset; cursor: pointer; font: inherit; color: inherit; white-space: nowrap; }
.th-orden:hover, .th-orden:focus-visible { color: var(--primario); text-decoration: underline; }
.pasos-alta { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; padding: 0; margin: 4px 0 14px; }
.pasos-alta li { flex: 1 1 120px; }
.pasos-alta button { width: 100%; height: 36px; border-radius: 999px; border: 1px solid var(--borde-c); background: var(--tarjeta); color: var(--apagado-texto); font-weight: var(--rd-peso-fuerte); font-size: 13px; cursor: default; }
.pasos-alta button span { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--borde-c); margin-right: 4px; font-size: 12px; }
.pasos-alta li.activo button { background: var(--primario); color: var(--primario-texto); border-color: var(--primario); }
.pasos-alta li.activo button span { background: var(--primario-texto); color: var(--primario); }
.pasos-alta li.hecho button { color: var(--tinta); cursor: pointer; border-color: var(--exito); }
.pasos-alta li.hecho button span { background: var(--exito); color: #fff; }
/* ── Fichero maestro de artículos 360 y catálogo comercial (098) ── */
.art-filtros { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.art-filtros select.campo { width: auto; max-width: 240px; }
.art-barra { gap: 8px; flex-wrap: wrap; padding-top: 0; }
.art-columnas { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(300px, 86vw); padding: 14px 16px; display: grid; gap: 6px; box-shadow: var(--sombra-pop); }
.art-mini { display: inline-grid; width: 40px; height: 40px; border-radius: 10px; overflow: hidden; background: var(--apagado); vertical-align: middle; }
.art-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-mini span { display: grid; place-items: center; width: 100%; height: 100%; background: var(--primario); color: #fff; font-size: 12px; font-weight: var(--rd-peso-fuerte); }
.art-mosaico { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.art-tarjeta { display: flex; flex-direction: column; text-align: left; padding: 0; border: 1px solid var(--borde-c); border-radius: var(--rd-radio); background: var(--tarjeta); overflow: hidden; cursor: pointer; font: inherit; color: inherit; transition: border-color .15s, transform .15s; min-width: 0; }
.art-tarjeta:hover { border-color: var(--primario); transform: translateY(-1px); }
.art-tarjeta:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }
.art-tarjeta-foto { position: relative; aspect-ratio: 4 / 3; background: var(--apagado); }
.art-tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-tarjeta-foto > span { display: grid; place-items: center; width: 100%; height: 100%; background: var(--primario); color: #fff; font-size: 30px; font-weight: var(--rd-peso-fuerte); opacity: .9; }
.art-sinfoto { position: absolute; left: 8px; top: 8px; font-style: normal; font-size: 12px; font-weight: var(--rd-peso-fuerte); background: oklch(1 0 0 / .88); color: var(--tinta); border-radius: 999px; padding: 2px 8px; }
.art-tarjeta-txt { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; min-width: 0; }
.art-tarjeta-txt strong { font-size: 14.5px; line-height: 1.25; overflow-wrap: anywhere; }
.art-alergenos { display: flex; flex-wrap: wrap; gap: 6px; }
.art-alergeno { padding: 4px 10px; border-radius: 999px; font-size: 12.5px; border: 1px solid var(--borde-c); color: var(--apagado-texto); }
.art-alergeno.contiene { border-color: var(--peligro); color: var(--peligro); font-weight: var(--rd-peso-fuerte); background: oklch(0.52 0.19 27 / 0.08); }
.art-alergeno.trazas { border-color: var(--aviso); color: oklch(0.5 0.12 70); font-weight: var(--rd-peso-fuerte); background: oklch(0.72 0.13 75 / 0.12); }
.art-nutri { max-width: 420px; }
.art-sangria { padding-left: 26px !important; color: var(--apagado-texto); }
@media (max-width: 640px) { .art-filtros > * { flex: 1 1 140px; max-width: none !important; } .art-mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

.cat-vista { max-width: calc(210mm + 32px); margin: 0 auto; }
.cat-a4 { padding: 0; min-height: 0; }
.cat-pagina { position: relative; min-height: 285mm; padding: 14mm 14mm 18mm; break-after: page; display: flex; flex-direction: column; border-bottom: 1px dashed #d9dfe3; }
.cat-pagina:last-child { break-after: auto; border-bottom: 0; }
.cat-portada { padding-top: 0; justify-content: space-between; }
.cat-portada .a4-franja { margin: 0 -14mm; height: 12mm; }
.cat-portada-centro { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 5mm; }
.cat-logo { width: 46mm; height: 46mm; object-fit: contain; }
.cat-logo-letras { display: grid; place-items: center; border-radius: 10mm; background: var(--marca); color: #fff; font-size: 36pt; font-weight: 900; }
.cat-empresa { font-size: 16pt; font-weight: var(--rd-peso-fuerte); color: var(--marca); letter-spacing: .02em; }
.cat-titulo { font-size: 38pt; font-weight: 300; letter-spacing: .02em; margin: 6mm 0 0; color: #1b2328; line-height: 1.05; }
.cat-subtitulo { font-size: 13pt; color: #45525a; max-width: 150mm; }
.cat-fecha { font-size: 10.5pt; color: #6a767d; border-top: 2px solid var(--marca); padding-top: 3mm; margin-top: 4mm; }
.cat-contacto { text-align: center; font-size: 9pt; color: #45525a; border-top: 1px solid #d9dfe3; padding-top: 4mm; }
.cat-h2 { font-size: 20pt; font-weight: 300; color: var(--marca); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 6mm; padding-bottom: 3mm; border-bottom: 2px solid var(--marca); }
.cat-indice { display: flex; flex-direction: column; gap: 1.6mm; font-size: 10pt; }
.cat-indice > div { display: flex; align-items: baseline; gap: 2mm; }
.cat-indice i { flex: 1; border-bottom: 1px dotted #b8c1c6; transform: translateY(-1mm); min-width: 6mm; }
.cat-indice em { font-style: normal; color: #6a767d; font-size: 8.5pt; }
.cat-ind-familia { font-weight: var(--rd-peso-fuerte); color: var(--marca); font-size: 11.5pt; margin-top: 3mm; text-transform: uppercase; letter-spacing: .04em; }
.cat-ind-subfamilia { font-weight: var(--rd-peso-fuerte); padding-left: 4mm; }
.cat-ind-articulo { padding-left: 8mm; }
.cat-ruta { font-size: 8.5pt; font-weight: var(--rd-peso-fuerte); letter-spacing: .14em; text-transform: uppercase; color: var(--marca); margin-bottom: 4mm; }
.cat-foto { height: 118mm; border-radius: 4mm; overflow: hidden; position: relative; background: #f1f3f4; display: grid; place-items: center; }
.cat-foto-credito { position: absolute; left: 0; right: 0; bottom: 0; font-style: normal; font-size: 7pt; color: #fff; background: rgb(0 0 0 / .5); padding: 1mm 3mm; }
.cat-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-foto span { font-size: 54pt; font-weight: var(--rd-peso-fuerte); color: #fff; background: var(--marca); width: 100%; height: 100%; display: grid; place-items: center; opacity: .85; }
.cat-cuerpo { display: flex; flex-direction: column; gap: 2.6mm; margin-top: 6mm; }
.cat-ref { font-size: 9pt; color: #6a767d; }
.cat-nombre { font-size: 21pt; font-weight: var(--rd-peso-fuerte); line-height: 1.12; margin: 0; color: #1b2328; }
.cat-sellos { display: flex; flex-wrap: wrap; gap: 2mm; }
.cat-sello { border: 1px solid var(--marca); color: var(--marca); border-radius: 999px; padding: .8mm 3mm; font-size: 8.8pt; font-weight: var(--rd-peso-fuerte); }
.cat-sello.cat-bellota_100 { background: #1f1f1f; border-color: #1f1f1f; color: #fff; }
.cat-sello.cat-bellota { background: #b3202a; border-color: #b3202a; color: #fff; }
.cat-sello.cat-cebo_campo { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.cat-sello.cat-cebo { background: #fff; border-color: #6a767d; color: #1b2328; }
.cat-desc { font-size: 11pt; line-height: 1.5; margin: 1mm 0; color: #2a353b; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.cat-dato { font-size: 9.5pt; margin: 0; color: #2a353b; }
.cat-formatos { margin-top: 1mm; }
.cat-precio { margin-top: auto; align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; background: var(--marca); color: #fff; border-radius: 3mm; padding: 3mm 5mm; }
.cat-precio strong { font-size: 18pt; font-weight: var(--rd-peso-fuerte); }
.cat-precio span { font-size: 8.5pt; opacity: .9; }
.cat-ficha .cat-cuerpo { flex: 1; }
.cat-pie { position: absolute; left: 14mm; right: 14mm; bottom: 7mm; display: flex; justify-content: space-between; gap: 6mm; font-size: 8pt; color: #6a767d; border-top: 1px solid #e6eaed; padding-top: 2mm; }
@media (max-width: 820px) {
  .cat-pagina { min-height: 0; padding: 18px 16px 44px; }
  .cat-portada .a4-franja { margin: 0 -16px; }
  .cat-foto { height: 56vw; }
  .cat-titulo { font-size: 30px; } .cat-nombre { font-size: 22px; }
  .cat-pie { left: 16px; right: 16px; bottom: 10px; }
}
@media print {
  .cat-pagina { height: 284mm; min-height: 0; overflow: hidden; border-bottom: 0; } /* la hoja A4 menos el margen inferior del pie «Página X de Y» */
  .cat-a4 .a4-franja { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* Clientes 360: fichero general (columnas, franja de riesgo) y ficha ordenada */
.cli-barra { gap: 8px; align-items: center; }
.cli-cuenta { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: color-mix(in oklch, currentColor 14%, transparent); font-size: 12.5px; }
.cli-tabla th { white-space: nowrap; }
.cli-orden { all: unset; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.cli-orden:hover, .cli-orden.activa { color: var(--primario); }
.cli-orden:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; border-radius: 4px; }
.cli-columnas { display: flex; flex-direction: column; gap: 2px; max-height: min(60vh, 520px); overflow-y: auto; }
.cli-col-fila { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 3px 2px; border-bottom: 1px solid var(--borde-c); }
.cli-columnas > div.peque { flex: none; }
.franja-riesgo { --c: var(--exito); display: flex; align-items: center; gap: 8px; min-width: 130px; }
.franja-riesgo.r-ambar { --c: var(--aviso); } .franja-riesgo.r-rojo { --c: var(--peligro); } .franja-riesgo.r-gris { --c: var(--apagado-texto); }
.franja-barra { position: relative; flex: 1; height: 8px; border-radius: 999px; background: var(--apagado); overflow: hidden; }
.franja-barra > span { display: block; height: 100%; border-radius: 999px; background: var(--c); }
.franja-riesgo.r-gris .franja-barra > span { opacity: .25; }
.franja-riesgo > b { font-size: 12.5px; color: var(--c); min-width: 54px; text-align: right; }
.franja-riesgo.grande { gap: 14px; flex-wrap: wrap; }
.franja-riesgo.grande .franja-barra { flex: 1 1 260px; height: 16px; overflow: visible; background: linear-gradient(90deg, color-mix(in oklch, var(--exito) 16%, var(--apagado)) 0 80%, color-mix(in oklch, var(--aviso) 22%, var(--apagado)) 80% 100%); }
.franja-riesgo.grande .franja-barra > span { max-width: 100%; }
.franja-riesgo.grande .franja-barra > i { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--tinta); opacity: .35; transform: translateX(-1px); }
.franja-riesgo.grande > b { font-size: 22px; min-width: 0; }
.franja-riesgo.grande > em { font-style: normal; font-weight: var(--rd-peso-fuerte); color: var(--c); }
.cli-limites { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cli-limite { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: var(--rd-radio); border: 1px solid var(--borde-c); min-width: 0; }
.cli-limite span { font-size: 12px; color: var(--apagado-texto); }
.cli-limite b { font-size: 18px; }
.cli-limite em { font-style: normal; font-size: 12px; color: var(--apagado-texto); }
.cli-limite.usado { border-color: var(--primario); background: color-mix(in oklch, var(--primario) 7%, transparent); }
.cli-limite.efectivo { background: var(--apagado); }
.cli-pasos { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 16px; flex-wrap: wrap; }
.cli-pasos button { all: unset; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: var(--rd-peso-fuerte); font-size: 14px; color: var(--apagado-texto); padding-right: 10px; }
.cli-pasos li.activo button { color: var(--tinta); } .cli-pasos li.activo .paso-num { background: var(--primario); color: var(--primario-texto); }
.cli-form-tit { margin: 18px 0 10px; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--primario); }
.cli-form-tit:first-child { margin-top: 0; }
.cli-tabla td { white-space: nowrap; padding-top: 9px; padding-bottom: 9px; }
.cli-tabla td.cli-nombre { white-space: normal; min-width: 200px; max-width: 320px; }
@media (max-width: 900px) { .cli-limites { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cli-barra > .fila:last-child { margin-left: 0 !important; } }
@media (max-width: 560px) { .franja-riesgo { min-width: 110px; } }
/* Condiciones de venta (100): descuentos en cascada, promoción aplicada y aviso de margen en la línea */
.dtos-cascada { display: flex; gap: 3px; min-width: 150px; }
.dtos-cascada .mini-campo, .ef-tabla .dtos-cascada .mini-campo { width: 50px; min-width: 50px; padding: 0 5px; }
.nota-promo { color: var(--primario); font-weight: var(--rd-peso-fuerte); display: flex; align-items: center; gap: 4px; margin-top: 3px; }
.nota-margen { font-weight: var(--rd-peso-fuerte); margin-top: 3px; }
.nota-margen.rojo { color: var(--peligro); }
.nota-margen.ambar { color: oklch(0.55 0.12 70); }
.totales-condiciones { display: flex; flex-direction: column; gap: 4px; min-width: 260px; }
.campo-nota { display: flex; flex-direction: column; gap: 4px; justify-content: flex-end; }
.tramos-rappel { display: flex; flex-direction: column; gap: 6px; }
.tramos-rappel .fila { gap: 6px; flex-wrap: nowrap; }
.barra-rappel { position: relative; height: 10px; border-radius: 999px; background: var(--apagado); overflow: hidden; min-width: 140px; }
.barra-rappel > span { display: block; height: 100%; border-radius: 999px; background: var(--primario); }

/* Diseño de documentos: textos libres de cabecera, legales y de pie (Configuración › Diseño de documentos) */
.a4-texto-libre { white-space: pre-line; }
.a4-texto-cab { margin: -2mm 0 4mm; font-size: 8.6pt; color: #45525a; }
.a4-legal { margin-top: 6mm; font-size: 7.6pt; color: #45525a; border-top: 1px dashed #d9dfe3; padding-top: 2.5mm; }

/* Informes a medida: subtotales y cabecera solo al imprimir */
.solo-imprimir { display: none; }
@media print { .solo-imprimir { display: block; margin-bottom: 4mm; } }
.tabla tr.fila-subtotal td { background: var(--marfil); }

/* ─── Fichas de ficheros maestros (ficha_entidad.js): sub-solapas, totales, cifras y gráfico doble ─── */
.sub-solapas-barra { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; border-bottom: 1px solid var(--borde-c); margin-bottom: 14px; }
.sub-solapa { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: var(--rd-peso-fuerte); color: var(--apagado-texto); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.sub-solapa:hover { color: var(--tinta); }
.sub-solapa.activa { color: var(--tono); border-bottom-color: var(--tono); }
.sub-solapa:focus-visible { outline: 2px solid var(--tono); outline-offset: -2px; border-radius: 6px; }
.sub-num { background: color-mix(in oklch, var(--tono) 14%, transparent); color: var(--tono); border-radius: 999px; padding: 0 7px; font-size: 12.5px; }
.tabla-docs tfoot td { border-top: 2px solid var(--borde-c); background: oklch(0.945 0.014 82 / 0.45); padding-top: 9px; padding-bottom: 9px; }
.cifras-ficha { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.cifra-ficha { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: var(--rd-radio); border: 1px solid var(--borde-c); min-width: 0; }
.cifra-ficha span { font-size: 12px; color: var(--apagado-texto); }
.cifra-ficha b { font-size: 18px; overflow-wrap: anywhere; }
.cifra-ficha em { font-style: normal; font-size: 12px; color: var(--apagado-texto); }
.leyenda-cuadro { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }
.barras-doble .barra-par { display: flex; align-items: flex-end; justify-content: center; gap: 2px; width: 100%; height: 100%; }
.barras-doble .barra-par span { flex: 1; max-width: 20px; background: var(--tono); border-radius: 5px 5px 2px 2px; opacity: .85; }
.barras-doble .barra-par span.anterior { background: var(--borde-c); opacity: 1; }
@container ficha (max-width: 900px) { .cifras-ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.f360-acciones a.boton, .f360-acciones a.boton-sec, .tabla-docs a.boton-sec { text-decoration: none; }

/* ─── Colores de los listados (reglas-color-logica.js): franja lateral, fondo suave y punto con etiqueta ─── */
.lc-c-verde { --lc: var(--exito); } .lc-c-ambar { --lc: var(--aviso); } .lc-c-rojo { --lc: var(--peligro); } .lc-c-azul { --lc: var(--info); } .lc-c-gris { --lc: oklch(0.6 0.01 230); } .lc-c-cobre { --lc: var(--cobre); }
.lc-f-verde { --lcf: var(--exito); } .lc-f-ambar { --lcf: var(--aviso); } .lc-f-rojo { --lcf: var(--peligro); } .lc-f-azul { --lcf: var(--info); } .lc-f-gris { --lcf: oklch(0.6 0.01 230); } .lc-f-cobre { --lcf: var(--cobre); }
.tabla tr.lc-franja > td:first-child { box-shadow: inset 4px 0 0 0 var(--lc); }
.tabla tr.lc-fondo > td { background: color-mix(in oklch, var(--lcf) 10%, var(--tarjeta)); }
.tabla tr.lc-fondo:hover > td { background: color-mix(in oklch, var(--lcf) 18%, var(--tarjeta)); }
.lc-punto { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: var(--rd-peso-fuerte); color: var(--lc); white-space: nowrap; margin-right: 6px; }
.lc-punto::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lc); flex: none; }
.lc-puntos { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 2px; }
.lc-leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: -4px 0 12px; font-size: 12.5px; color: var(--apagado-texto); }
.lc-muestra { display: inline-flex; align-items: center; gap: 6px; }
.lc-muestra i { width: 12px; height: 12px; border-radius: 3px; background: var(--lc); flex: none; }
.lc-muestra.punto i { border-radius: 50%; width: 9px; height: 9px; }
.lc-muestra.fondo i { background: color-mix(in oklch, var(--lc) 25%, var(--tarjeta)); border: 1px solid var(--lc); }
.lc-regla { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 2px; border-bottom: 1px solid var(--borde-c); flex-wrap: wrap; }
.lc-regla .chk { flex: 1; min-width: 200px; }
.lc-paleta { display: flex; flex-wrap: wrap; gap: 8px; }
.lc-paleta button { width: 36px; height: 36px; border-radius: 10px; border: 3px solid var(--tarjeta); outline: 1px solid var(--borde-c); background: var(--lc); cursor: pointer; }
.lc-paleta button.activa { outline: 3px solid var(--tinta); }
.lc-previa { border: 1px dashed var(--borde-c); border-radius: var(--rd-radio); overflow: hidden; }
.barra-maestro { gap: 8px; align-items: center; flex-wrap: wrap; }
.barra-maestro .barra-derecha { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 900px) { .barra-maestro .barra-derecha { margin-left: 0; } .cifras-ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ───── Menú por bloques plegables (estilo EvoInmo): uno abierto a la vez, contador, punto cobre, línea guía y pastilla viva ───── */
.buscador-caja { position: relative; margin: 12px 0 10px; }
.lateral .buscador-caja .buscador { margin: 0; padding-right: 36px; }
.lateral .buscador:focus { border-color: var(--lateral-vivo); box-shadow: 0 0 0 3px oklch(0.8 0.1 172 / .2); }
.buscador::-webkit-search-cancel-button { display: none; }
.buscador-borrar { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--lateral-texto); display: grid; place-items: center; cursor: pointer; }
.buscador-borrar:hover { background: oklch(1 0 0 / .12); color: #fff; }
.nav-area-t { display: flex; align-items: center; gap: 8px; padding: 14px 10px 5px; font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--cobre-suave); }
.nav-area-t::after { content: ""; flex: 1; height: 1px; background: var(--lateral-borde); }
.nav-grupo { border-radius: 12px; transition: background .2s; }
.nav-grupo + .nav-grupo { margin-top: 2px; }
.nav-grupo.abierto { background: oklch(0 0 0 / .16); }
.nav-cab { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 5px 8px; border: 0; border-radius: 12px; background: none; color: #fff; font: inherit; font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; }
.nav-cab:hover { background: oklch(1 0 0 / .07); }
.nav-cab:focus-visible, .lateral .item-nav:focus-visible, .nav-estrella:focus-visible, .nav-rapido:focus-visible { outline: 2px solid var(--lateral-vivo); outline-offset: 1px; }
.nav-cab .nav-ico { width: 30px; height: 30px; border-radius: 9px; background: oklch(1 0 0 / .08); color: var(--lateral-texto); }
.nav-grupo.con-activa > .nav-cab .nav-ico { background: oklch(0.8 0.1 172 / .2); color: var(--lateral-vivo); }
.nav-cuenta { margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: oklch(1 0 0 / .09); color: var(--lateral-texto); font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; flex: none; }
.nav-cab .punto-cobre { margin-left: auto; flex: none; width: 7px; height: 7px; box-shadow: 0 0 0 3px oklch(0.55 0.11 50 / .28); }
.nav-cab .punto-cobre + .nav-cuenta { margin-left: 0; }
.nav-flecha { display: inline-flex; flex: none; opacity: .7; transition: transform .25s var(--curva), opacity .2s; }
.nav-grupo.abierto .nav-flecha { transform: rotate(90deg); opacity: 1; }
.nav-cuerpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--curva); }
.nav-grupo.abierto .nav-cuerpo { grid-template-rows: 1fr; }
.nav-cuerpo > .nav-hijos { overflow: hidden; min-height: 0; }
.nav-hijos { margin-left: 23px; padding-left: 9px; border-left: 1px solid oklch(1 0 0 / .14); }
.nav-grupo.abierto .nav-hijos { padding-bottom: 6px; }
.nav-hijos .item-nav.compacto { min-height: 34px; padding: 4px 8px; font-size: 13.5px; gap: 9px; color: var(--lateral-texto); }
.nav-hijos .item-nav.compacto:hover { padding-left: 10px; color: #fff; }
.nav-hijos .nav-ico { width: 24px; height: 24px; border-radius: 7px; background: none; }
.nav-hijos .item-nav.compacto.activo { background: oklch(1 0 0 / .11); color: #fff; font-weight: 700; }
.nav-hijos .item-nav.activo::before { left: -11px; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: var(--lateral-vivo); box-shadow: 0 0 10px oklch(0.8 0.1 172 / .7); }
.nav-hijos .item-nav.activo .nav-ico { background: var(--lateral-vivo); color: var(--lateral-vivo-texto); }
.nav-sub { padding: 10px 8px 3px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--lateral-texto); opacity: .62; }
.nav-sub:first-child { padding-top: 4px; }
/* Modo contraído: columna de iconos, uno por bloque, y el bloque se abre al lado */
.marco.contraido .lateral { padding: 14px 10px; z-index: 20; }
.marco.contraido .lateral-cab { flex-direction: column; gap: 8px; }
.marco.contraido .usuario { flex-direction: column; gap: 4px; }
.marco.contraido .pie-lateral > .fila { justify-content: center; }
.nav-icono { justify-content: center; padding: 2px 0; }
.nav-icono .icono-caja, .marco.contraido .lateral .nav-icono .icono-caja { width: 44px; height: 38px; border-radius: 12px; background: oklch(1 0 0 / .06); transition: background .15s; }
.nav-icono:hover, .nav-icono.activo { background: none; }
.nav-icono:hover .icono-caja, .nav-icono.volado .icono-caja { background: oklch(1 0 0 / .15); color: #fff; }
.nav-icono.activo .icono-caja { background: oklch(0.8 0.1 172 / .2); color: var(--lateral-vivo); }
.nav-icono.activo::before { left: -10px; top: 10px; bottom: 10px; }
.nav-icono .punto-cobre { position: absolute; top: 5px; right: 4px; }
.nav-volado { position: fixed; left: 82px; z-index: 40; width: 270px; max-height: calc(100vh - 16px); overflow: auto; padding: 6px 8px 10px; border-radius: 14px; background: var(--degradado-lateral); border: 1px solid var(--lateral-borde); box-shadow: var(--sombra-pop); color: var(--lateral-texto); }
.nav-volado-t { display: flex; align-items: center; gap: 8px; padding: 8px 8px 6px; color: #fff; font-weight: 800; font-size: 13.5px; }
.nav-volado .nav-hijos { margin-left: 10px; padding-bottom: 2px; }
/* Móvil: el mismo menú en un cajón, con velo detrás y botón de cerrar */
.cerrar-cajon { display: none; }
@media (max-width: 900px) {
  .boton-contraer, .nav-volado { display: none !important; }
  .cerrar-cajon { display: inline-flex; }
  .velo-lateral { position: fixed; inset: 0; z-index: 29; background: oklch(0.17 0.035 215 / .5); backdrop-filter: blur(2px); }
  .lateral { width: min(320px, 88vw); }
  .nav-cab { min-height: 46px; }
  .nav-hijos .item-nav.compacto { min-height: 42px; font-size: 14.5px; }
  .nav-estrella { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) { .nav-cuerpo, .nav-flecha, .nav-grupo { transition: none; } }

/* ─── 1.36 · Menú lateral cuadrado: la estrella de favorito no roba sitio al texto (aparece encima al pasar el ratón),
   accesos rápidos sin desbordar y textos largos con «…» y el nombre completo en el title ─── */
.nav-fila { position: relative; }
.nav-estrella:not(.on) { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); background: var(--lateral-hondo, var(--noche)); box-shadow: -8px 0 8px var(--lateral-hondo, var(--noche)); }
.nav-rapido { flex: 1 1 auto; min-width: 0; padding: 0 9px; gap: 5px; }
.nav-rapido > svg { flex: none; }
.nav-cab .nav-txt { line-height: 1.25; }
.item-nav .nav-txt { line-height: 1.25; }
/* 1.36 · Cápsulas de empresa e idioma en móvil: el desplegable encoge dentro de su cápsula (la flecha no se sale) */
/* Barra superior: los botones redondos no se aplastan y lo que encoge (buscador y cápsulas) lo hace sin salirse */
.cabecera-sup .campana { flex: none; }
.cabecera-sup .buscar-todo { flex: 0 1 auto; min-width: 40px; overflow: hidden; }
.cabecera-sup .buscar-todo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cabecera-sup .buscar-todo > svg, .cabecera-sup .buscar-todo kbd { flex: none; }
.cabecera-sup .capsula { overflow: hidden; flex: 0 1 auto; min-width: 0; }
.cabecera-sup .capsula > svg, .cabecera-sup .capsula > .peque { flex: none; }
.cabecera-sup .capsula select { min-width: 0; flex: 1 1 auto; text-overflow: ellipsis; }
.cabecera-sup .migas { flex: 0 1 auto; min-width: 0; }
@media (max-width: 1280px) { .cabecera-sup .buscar-todo kbd { display: none; } }
@media (max-width: 760px) {
  .cabecera-sup .buscar-todo { margin-left: 0; }
  .cabecera-sup .capsula { flex: 1 1 auto; max-width: max-content; }
  .cabecera-sup .capsula select { max-width: none; }
  .cabecera-sup .selector-idioma { flex: 0 0 auto; }
}
/* En el móvil, el idioma es un botón redondo con el globo (el desplegable, invisible, lo cubre entero) */
@media (max-width: 420px) {
  .cabecera-sup .selector-idioma { position: relative; flex: none; width: 40px; max-width: none; height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
  .cabecera-sup .selector-idioma > svg { display: block !important; }
  .cabecera-sup .selector-idioma select { position: absolute; inset: 0; width: 100%; max-width: none; opacity: 0; cursor: pointer; }
}

/* ─── 1.36 · Barra superior reorganizada (barra_superior.js) ───
   De izquierda a derecha: buscar pantallas y datos · empresa con su color · accesos rápidos · gráficas · idioma ·
   campana · usuario. Por debajo de 1200 px los accesos, las gráficas y el idioma pasan al menú «⋯». */
.marco { --color-empresa: var(--primario); }
.cabecera-sup { gap: 8px; box-shadow: inset 0 3px 0 var(--color-empresa); }
.lateral { box-shadow: inset 0 3px 0 var(--color-empresa); }
.cabecera-sup .migas { display: none; }
.bs-hueco { flex: 1 1 0; min-width: 0; }
.cabecera-sup .buscar-todo { flex: 0 1 300px; min-width: 40px; margin-left: 0; }
.cabecera-sup .capsula { margin-left: 0; }
.bs-empresa { gap: 8px; padding: 4px 6px 4px 12px; height: 40px; box-sizing: border-box; background: color-mix(in oklch, var(--color-empresa) 9%, var(--tarjeta)); border-color: color-mix(in oklch, var(--color-empresa) 42%, var(--borde-c)); cursor: pointer; max-width: 320px; }
.bs-empresa select { color: var(--tinta); cursor: pointer; }
.bs-punto-empresa { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--color-empresa); box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-empresa) 22%, transparent); }
.bs-desplegable { position: relative; flex: none; display: flex; }
.bs-solo-ancho, .bs-solo-estrecho { flex: none; }
.bs-solo-estrecho { display: none; }
.bs-boton.abierto { background: var(--acento); border-color: var(--primario); }
.bs-idioma .bs-boton { width: auto; padding: 0 10px 0 11px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; }
.bs-usuario .bs-boton { padding: 0; }
.bs-menu { position: absolute; top: calc(100% + 6px); z-index: 50; box-sizing: border-box; max-width: calc(100vw - 16px); max-height: min(70vh, 560px); overflow: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; background: var(--tarjeta); border: 1px solid var(--borde-c); border-radius: var(--rd-radio); box-shadow: var(--sombra-pop); }
.bs-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 10px; box-sizing: border-box; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 14px; line-height: 1.2; color: var(--tinta); text-decoration: none; cursor: pointer; text-align: left; }
.bs-item > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-item > svg { flex: none; }
.bs-item:hover, .bs-item:focus-visible { background: var(--acento); outline: none; }
.bs-item.activo { font-weight: var(--rd-peso-fuerte); }
.bs-item.activo > svg:last-child { color: var(--primario); }
.bs-menu-t { padding: 8px 10px 4px; font-size: 12px; font-weight: var(--rd-peso-fuerte); letter-spacing: .12em; text-transform: uppercase; color: var(--apagado-texto); }
.bs-iniciales { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--color-empresa); color: #fff; font-size: 12px; font-weight: var(--rd-peso-fuerte); line-height: 1; }
.bs-iniciales.grande { flex: none; width: 38px; height: 38px; font-size: 14px; }
.bs-quien { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--borde-c); }
.bs-correo { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bandera { display: block; flex: none; }
.cabecera-sup .campana > svg { display: block; }
@media (max-width: 1200px) {
  .bs-solo-ancho { display: none !important; }
  .bs-solo-estrecho { display: flex; }
  .bs-empresa-t { display: none; }
}
@media (max-width: 900px) {
  .cabecera-sup .buscar-todo { flex: none; width: 40px; padding: 0; justify-content: center; }
}
@media (max-width: 760px) {
  .cabecera-sup { gap: 6px; }
  .bs-empresa { flex: 1 1 auto; min-width: 0; max-width: max-content; }
}
/* Ajustes › Empresa: elegir el color de la empresa */
.muestra-color { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--tarjeta); outline: 1px solid var(--borde-c); cursor: pointer; padding: 0; flex: none; }
.muestra-color.activa { outline: 3px solid var(--tinta); }
.muestra-color.libre { background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); }
.muestra-color.libre::-webkit-color-swatch-wrapper { padding: 0; } .muestra-color.libre::-webkit-color-swatch { border: 0; border-radius: 50%; }
.lateral .nav-lateral { margin-top: 10px; }

/* ───────────── Regla fija (Javier, 08/11/2026): la cabecera de toda ventana y panel no se mueve al bajar ─────────────
   El título con sus botones (Imprimir o PDF, Volver, Cerrar, Enviar…) se queda arriba mientras se desplaza el contenido:
   documentos, presupuestos, albaranes, informes, cartas de porte y cualquier ventana o panel lateral. */
.ventana > .fila.entre:first-child { position: sticky; top: -24px; z-index: 6; margin: -24px -26px 14px; padding: 18px 26px 12px; background: inherit; border-bottom: 1px solid var(--borde-c); }
.ventana > .fila.entre:first-child h3 { margin: 0; }
.ventana > .fila.entre:first-child + .mb, .ventana > .fila.entre.mb:first-child { margin-bottom: 14px; }
.panel > .fila.entre:first-child { position: sticky; top: -26px; z-index: 6; margin: -26px -26px 14px; padding: 16px 26px 12px; background: var(--fondo); border-bottom: 1px solid var(--borde-c); }
@media print { .ventana > .fila.entre:first-child, .panel > .fila.entre:first-child { position: static; border: 0; } }
/* Documentos públicos (portal del cliente, del ganadero y de maquila): la barra de Volver / Imprimir también se queda arriba */
.publica > .fila.no-imprimir:first-child { position: sticky; top: 0; z-index: 6; margin: -30px -16px 14px; padding: 14px 16px 12px; background: var(--fondo); border-bottom: 1px solid var(--borde-c); }
/* 1.37 · KPI, cifras y pastillas que llevan a su detalle (propsDestino en lib.js) */
.pulsable { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.pulsable:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px oklch(0.22 0.04 215 / 0.45); }
.pulsable:active { transform: translateY(0); }
.pulsable:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }
.kpi.pulsable:hover, .cifra-ficha.pulsable:hover { background-color: color-mix(in oklch, var(--primario) 6%, transparent); }
.kpi.pulsable:first-child:hover { background: var(--degradado-hero); }
.kpi.pulsable:focus-visible, .f360-kpi.pulsable:focus-visible { outline-offset: -3px; }
.f360-kpi.pulsable { border-radius: 10px; }
.f360-kpi.pulsable:hover { background-color: color-mix(in oklch, var(--tono) 8%, transparent); }
.estado.pulsable:hover { transform: translateY(-1px); box-shadow: 0 4px 10px -6px currentColor; }
.filtro-ruta { display: inline-flex; align-items: center; gap: 6px; }
@media (prefers-reduced-motion: reduce) { .pulsable, .pulsable:hover { transition: none; transform: none; } }
.cab-pantalla > .fila { flex-wrap: wrap; max-width: 100%; }

/* Regla fija (Javier, 08/11/2026): en toda ficha 360 (factura, albarán, pedido, cliente, artículo…) las pestañas, la cabecera
   con sus KPIs, el ciclo del documento y la fila de botones se quedan fijos; con la rueda solo se mueve el contenido de abajo.
   En el móvil (pantalla baja o estrecha) la cabecera ocuparía casi todo, así que allí se desplaza todo junto como antes. */
@media screen and (min-width: 700px) and (min-height: 560px) {
  .ficha360-fondo:has(> .ficha360 > .f360-tarjeta) { overflow: hidden; }
  .ficha360:has(> .f360-tarjeta) { display: flex; flex-direction: column; max-height: 100%; }
  .ficha360 > .f360-pestanas { flex: none; }
  .ficha360 > .f360-tarjeta { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .ficha360 > .f360-tarjeta > :not(.f360-cuerpo) { flex: none; }
  .ficha360 > .f360-tarjeta > .f360-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
  .ficha360 > .f360-tarjeta > .f360-acciones { box-shadow: 0 6px 10px -10px oklch(0.22 0.03 220 / 0.5); position: relative; z-index: 2; }
}

/* Historial en lenguaje de persona: cada cambio en su línea «Campo: antes → después» */
.cambios-legibles { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; font-size: 13.5px; }
.cambios-legibles li > span { color: var(--apagado-texto); margin-right: 6px; }
.cambios-legibles li > span::after { content: ":"; }
.cambios-legibles s { color: var(--apagado-texto); }
.quien-cambio { font-weight: 600; color: var(--tinta); }

/* Lectura cómoda (Javier, 08/11/2026 · prueba en las fichas 360): etiquetas más grandes y oscuras, valores más grandes y
   títulos de sección más visibles. Aprobada («Me gusta, a todos los menús»): ahora es la línea común de debajo;
   aquí queda solo el aire propio de las fichas. */
.f360-cuerpo .f360-datos { gap: 16px 22px; }
.f360-cuerpo .f360-dato { gap: 4px; }
.f360-cuerpo .f360-seccion + .f360-seccion { margin-top: 10px; }

/* Dictado por voz en las cajas de conversación: el botón late en rojo mientras escucha */
.boton-dictar { flex: none; min-width: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.boton-dictar.oyendo { background: color-mix(in oklch, var(--peligro) 14%, var(--tarjeta)); color: var(--peligro); border-color: var(--peligro); animation: latido-dictado 1.2s ease-in-out infinite; }
.boton-dictar .dictando { font-size: 14px; font-weight: 600; }
@keyframes latido-dictado { 50% { box-shadow: 0 0 0 6px color-mix(in oklch, var(--peligro) 18%, transparent); } }
@media (prefers-reduced-motion: reduce) { .boton-dictar.oyendo { animation: none; } }
.caja-dictado { display: flex; gap: 8px; align-items: flex-start; }
.caja-dictado > textarea { flex: 1; min-width: 0; }
/* ═══════════════ 1.37 · LECTURA CLARA: la línea común de todo el programa (Javier, 09/11/2026) ═══════════════
   «Veo todo tan pequeño que no veo… mucha letra pequeña, tengo que fijar mucho la vista.» La propuesta de las fichas 360
   pasa a TODAS las pantallas desde aquí (nada pantalla por pantalla):
   · texto normal 15,5 px · ayudas («peque») y etiquetas 14,5 px (etiquetas en seminegrita y más oscuras);
   · valores de campos 16 px y de fichas 17,5 px · tablas: títulos 13 px y celdas 15,5 px;
   · títulos de sección con fondo suave del color de la pantalla y raya inferior; más aire entre bloques;
   · ningún tamaño por debajo de 12 px (lo vigila pruebas/lectura_clara.test.mjs, con sus excepciones justificadas).
   El menú lateral conserva su estructura: solo gana un punto de letra en sus títulos y entradas. */
:root {
  --lc-texto: 15.5px; --lc-ayuda: 14.5px; --lc-etiqueta: 14.5px; --lc-campo: 16px; --lc-valor: 17.5px;
  --lc-th: 13px; --lc-td: 15.5px; --lc-titulo-seccion: 16px; --lc-boton: 15px; --lc-chip: 13.5px;
  --apagado-texto: oklch(0.37 0.025 220);
}
body { font-size: var(--lc-texto); line-height: 1.55; }
.peque { font-size: var(--lc-ayuda); line-height: 1.5; }
/* Ayudas dentro del primer indicador (fondo oscuro): claras, no grises sobre oscuro */
.kpi:first-child .apagado, .kpi:first-child .peque { color: oklch(0.93 0.02 190 / .88); }
.antetitulo { font-size: 13px; letter-spacing: .16em; }
/* Cabecera de pantalla: la explicación se lee de un vistazo */
.cab-pantalla p { font-size: 16px; line-height: 1.55; max-width: 860px; color: color-mix(in oklch, var(--apagado-texto) 70%, var(--tinta)); }
.migas { font-size: 14.5px; }
.pie-pagina { font-size: 13.5px; }
.marca-emp { font-size: 13px; }
/* Títulos de sección: los de las tarjetas, con la banda suave y la raya de las fichas 360 */
:where(.tarjeta) h3 { font-size: 19px; line-height: 1.3; }
:where(.tarjeta) h4 { font-size: 16.5px; line-height: 1.3; }
.tarjeta > .pad.fila.entre:first-child:has(> h3, > h4, > div > h3) {
  background: color-mix(in oklch, var(--primario) 6%, transparent); border-bottom: 2px solid color-mix(in oklch, var(--primario) 26%, transparent);
  border-radius: 21px 21px 0 0; padding-top: 14px; padding-bottom: 12px; }
.cli-form-tit, .f360-sec-cab h3 { font-size: var(--lc-titulo-seccion); letter-spacing: .06em; font-weight: var(--rd-peso-fuerte); }
.cli-form-tit { padding: 8px 12px; border-radius: 10px; background: color-mix(in oklch, var(--primario) 7%, transparent); border-bottom: 2px solid color-mix(in oklch, var(--primario) 30%, transparent); margin: 22px 0 12px; }
.f360-sec-cab { background: color-mix(in oklch, var(--tono) 7%, transparent); border-radius: 10px; padding: 8px 10px; border-bottom: 2px solid color-mix(in oklch, var(--tono) 35%, transparent); }
.f360-sec-ico { width: 30px; height: 30px; }
/* Etiquetas y valores de los campos (componente Campo de lib.js y cualquier label.et) */
label.et { font-size: var(--lc-etiqueta); font-weight: 600; gap: 7px; color: color-mix(in oklch, var(--apagado-texto) 55%, var(--tinta)); }
label.et .peque { font-size: 13.5px; }
label.chk { font-size: 15.5px; }
.campo { height: 44px; font-size: var(--lc-campo); font-weight: 500; color: var(--tinta); }
.campo::placeholder { color: color-mix(in oklch, var(--apagado-texto) 75%, transparent); }
.mini-campo { height: 38px; font-size: 14.5px; }
.form { gap: 18px 20px; }
.f360-dato span { font-size: var(--lc-etiqueta); font-weight: 600; color: color-mix(in oklch, var(--apagado-texto) 55%, var(--tinta)); }
.f360-dato b { font-size: var(--lc-valor); line-height: 1.3; }
.cifra-ficha span, .cifra-ficha em, .cli-limite span, .cli-limite em { font-size: 13.5px; }
/* Tablas y listados */
.tabla th { font-size: var(--lc-th); color: color-mix(in oklch, var(--apagado-texto) 70%, var(--tinta)); padding: 11px 12px; }
.tabla td { font-size: var(--lc-td); padding: 12px; }
.tabla td .peque { font-size: 14px; }
/* Las cifras de las columnas de números no se parten en dos líneas («78,4» arriba y «%» abajo) */
.tabla td.der { white-space: nowrap; }
.lc-leyenda { font-size: 14px; } .lc-punto { font-size: 13px; }
/* Botones, pestañas y chips */
.boton, .boton-sec, .boton-pel, .boton-ok { font-size: var(--lc-boton); }
.mini { height: 34px; font-size: 14px; }
.f360-acciones :is(.boton, .boton-sec, .boton-pel, .boton-ok):not(.mini) { font-size: 14.5px; }
.pastilla { height: 36px; padding: 0 15px; font-size: 14.5px; }
.sub-solapa { font-size: 14.5px; }
.estado { font-size: var(--lc-chip); padding: 4px 11px; }
.chip360 { font-size: 12px; }
/* Indicadores (KPI) de cabecera y sus etiquetas */
.kpi .t { font-size: 13.5px; } .kpi .v { font-size: 28px; }
.kpi2-cab { font-size: 14.5px; font-weight: var(--rd-peso-fuerte); color: color-mix(in oklch, var(--apagado-texto) 60%, var(--tinta)); }
.kpi2 > b { font-size: 28px; }
.kpi2 small { font-size: 14px; line-height: 1.4; }
.f360-titulo { font-size: 24px; }
.f360-kpi b { font-size: 18.5px; }
.f360-kpi span { font-size: 12.5px; }
.dueno-cifra-t, .pd-cifra-t { font-size: 13.5px; }
.cifras span { font-size: 13px; }
/* Gráficas: títulos, leyendas y resúmenes */
.graf-tarjeta h4, .graf2-titulo { font-size: 16px; }
.graf-leyenda, .graf2-chip, .graf2-op-t { font-size: 13.5px; }
.graf2-resumen { font-size: 14px; } .graf2-resumen dt { font-size: 13px; }
.graf2-tip { font-size: 13.5px; }
.dona-ley, .ranking-fila { font-size: 14px; } .dona-ley em { font-size: 13px; }
/* Ventanas, avisos y estados de pantalla */
.ventana h3 { font-size: 26px; }
.vacio { font-size: 15.5px; } .cargando { font-size: 15.5px; }
.traza { font-size: 13.5px; }
.decision { font-size: 15.5px; }
/* Menú lateral: misma estructura, un punto más de letra */
.nav-hijos .item-nav.compacto { font-size: 14px; }
.nav-titulo, .nav-sub, .nav-area-t { font-size: 12px; }
.nav-chip { font-size: 13px; }
.pie-lateral { font-size: 13px; }
/* Avance del curado (portal de maquila): en el móvil las fases bajan a dos filas en vez de encoger la letra */
@media (max-width: 560px) { .pe-fases { flex-wrap: wrap; row-gap: 8px; } .pe-fases li { flex: 1 1 22%; } }
@media (max-width: 720px) { .cab-pantalla p { font-size: 15.5px; } .kpi2 > b { font-size: 25px; }
  /* Con la letra más grande, un estado largo baja de línea en vez de salirse de la pantalla */
  .estado { white-space: normal; max-width: 100%; border-radius: 12px; } }

/* ═══════════════ Cifras con signo: márgenes, beneficios, resultados y variaciones en color ═══════════════
   Pieza común (lib.js · Cifra, fondoCifra; lógica en cifra-signo-logica.js): verde si es a favor, rojo si es pérdida,
   ámbar si el margen es bajo y neutro si es cero. Siempre con su signo (+ / −): el color no es lo único que avisa. */
.cs { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* El sombreado sale a los lados con sombras del mismo color, sin ocupar sitio: la cifra queda en su raya en las
   columnas de números (la prueba de alineación mide el texto, no el sombreado) */
.cs-pos, .cs-neg, .cs-bajo, .cs-cero { font-weight: var(--rd-peso-fuerte); border-radius: 7px; padding: 1px 0; margin: 0 7px;
  background: var(--cs-bg); box-shadow: 7px 0 0 var(--cs-bg), -7px 0 0 var(--cs-bg); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cs-pos { color: oklch(0.42 0.12 158); --cs-bg: oklch(0.6 0.13 158 / 0.14); }
.cs-neg { color: oklch(0.47 0.19 27); --cs-bg: oklch(0.6 0.2 27 / 0.13); }
.cs-bajo { color: oklch(0.46 0.11 62); --cs-bg: oklch(0.76 0.14 75 / 0.22); }
.cs-cero { color: var(--apagado-texto); --cs-bg: var(--apagado); }
.cs-caja.cs-pos { --cs-bg: oklch(0.6 0.13 158 / 0.24); } .cs-caja.cs-neg { --cs-bg: oklch(0.6 0.2 27 / 0.22); } .cs-caja.cs-bajo { --cs-bg: oklch(0.76 0.14 75 / 0.34); }
.cs-caja { padding: 3px 0; }
.der .cs:is(.cs-pos, .cs-neg, .cs-bajo, .cs-cero) { margin-right: 0; }
/* Tarjetas e indicadores enteros sombreados (fondoCifra): TarjetaKpi signo=…, kpis de la ficha 360 con signo */
.cs-fondo-pos { --cs-c: oklch(0.42 0.12 158); --cs-f: oklch(0.6 0.13 158 / 0.10); }
.cs-fondo-neg { --cs-c: oklch(0.47 0.19 27); --cs-f: oklch(0.6 0.2 27 / 0.10); }
.cs-fondo-bajo { --cs-c: oklch(0.46 0.11 62); --cs-f: oklch(0.76 0.14 75 / 0.16); }
.cs-fondo-cero { --cs-c: var(--apagado-texto); --cs-f: transparent; }
.kpi2.cs-fondo { background: linear-gradient(var(--cs-f), var(--cs-f)), var(--tarjeta); border-color: color-mix(in oklch, var(--cs-c) 35%, var(--borde-c)); }
.kpi2.cs-fondo > b, .f360-kpi.cs-fondo b, .cs-fondo > .cs-valor { color: var(--cs-c) !important; }
.kpi2.cs-fondo .kpi2-ico { background: color-mix(in oklch, var(--cs-c) 14%, transparent); color: var(--cs-c) !important; }
.f360-kpi.cs-fondo { background: var(--cs-f); border-radius: 10px; }
tr.cs-fondo > td { background: var(--cs-f); }
@media print { .cs-pos, .cs-neg, .cs-bajo, .cs-cero, .cs-fondo { background: none !important; box-shadow: none !important; } }
.kpi.cs-fondo:not(:first-child) { background: var(--cs-f); }
.kpi.cs-fondo:not(:first-child) .v { color: var(--cs-c); }
.dueno-cifra.cs-fondo { background: linear-gradient(var(--cs-f), var(--cs-f)), var(--tarjeta); border-color: color-mix(in oklch, var(--cs-c) 40%, var(--borde-c)); }
.dueno-cifra.cs-fondo .dueno-cifra-v { color: var(--cs-c); }
/* Ayudas en párrafo: líneas no más largas de lo que se lee de un tirón */
p.peque.apagado { max-width: 120ch; line-height: 1.55; }
/* Lista corta de ayuda (en vez de un párrafo largo): cada idea en su línea, con su dato clave en negrita */
.ayuda-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: var(--lc-ayuda); color: color-mix(in oklch, var(--apagado-texto) 80%, var(--tinta)); }
.ayuda-lista li { position: relative; padding-left: 16px; line-height: 1.45; }
.ayuda-lista li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: color-mix(in oklch, var(--primario) 55%, transparent); }
.ayuda-lista b { color: var(--tinta); }

/* ───────────── Pedidos en directo (09/11/2026) ───────────── */
.directo { --d-azul: var(--info); --d-morado: oklch(0.5 0.14 300); --d-verde: var(--exito); --d-cobre: var(--cobre); --d-turquesa: oklch(0.52 0.1 190); --d-gris: var(--apagado-texto); }
.directo .t-azul { --d: var(--d-azul); } .directo .t-morado { --d: var(--d-morado); } .directo .t-verde { --d: var(--d-verde); }
.directo .t-cobre { --d: var(--d-cobre); } .directo .t-turquesa { --d: var(--d-turquesa); } .directo .t-gris { --d: var(--d-gris); }
.directo-vivo { align-self: center; font-size: 13px; font-weight: 600; color: var(--apagado-texto); white-space: nowrap; }
.directo-vivo.ok { color: var(--exito); } .directo-vivo.mal { color: var(--peligro); }
.directo-vivo.ok::first-letter { animation: graf2-latido 1.6s ease-in-out infinite; }
.directo-medios { display: flex; flex-wrap: wrap; gap: 8px; }
.directo-medio { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 6px 14px; border-radius: 12px; border: 1px solid var(--borde-c);
  background: var(--tarjeta); color: var(--tinta); cursor: pointer; font: inherit; border-left: 4px solid var(--d, var(--primario)); }
.directo-medio svg { color: var(--d, var(--primario)); }
.directo-medio span { color: var(--apagado-texto); font-size: 13px; }
.directo-medio.activo { background: color-mix(in oklch, var(--d, var(--primario)) 12%, var(--tarjeta)); border-color: var(--d, var(--primario)); }
.directo-lista { padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.directo-pedido { display: grid; grid-template-columns: 74px 44px minmax(0, 1fr) auto minmax(150px, auto); align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 12px 16px; border: 1px solid var(--borde-c); border-left: 5px solid var(--d, var(--primario)); border-radius: 12px; background: var(--tarjeta); color: var(--tinta);
  font: inherit; cursor: pointer; transition: background .2s, box-shadow .2s; }
.directo-pedido:hover { background: color-mix(in oklch, var(--d, var(--primario)) 6%, var(--tarjeta)); }
.directo-pedido.nuevo { animation: entra .5s var(--suave-curva, ease-out); box-shadow: 0 0 0 2px color-mix(in oklch, var(--d, var(--primario)) 45%, transparent);
  background: color-mix(in oklch, var(--d, var(--primario)) 9%, var(--tarjeta)); }
.directo-hora { font-size: 18px; font-weight: 600; display: flex; flex-direction: column; line-height: 1.2; }
.directo-hora em { font-style: normal; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--d, var(--primario)); }
.directo-icono { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--d, var(--primario));
  background: color-mix(in oklch, var(--d, var(--primario)) 13%, transparent); }
.directo-cliente { display: flex; flex-direction: column; min-width: 0; }
.directo-cliente strong { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.directo-cliente .peque { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.directo-importe { display: flex; flex-direction: column; align-items: flex-end; }
.directo-importe strong { font-size: 18px; }
.directo-estado { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
@media (max-width: 760px) {
  .directo-pedido { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px; }
  .directo-icono { display: none; }
  .directo-estado { grid-column: 2 / -1; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; }
  .directo-hora { font-size: 15px; }
}
:fullscreen .directo { padding: 12px 20px; }
@media (prefers-reduced-motion: reduce) { .directo-pedido.nuevo, .directo-vivo.ok::first-letter { animation: none; } }
/* Medidor del dictado: enseña si llega sonido del micrófono (09/11/2026) */
.nivel-dictado { display: inline-block; width: 34px; height: 6px; border-radius: 3px; background: color-mix(in oklch, currentColor 18%, transparent); overflow: hidden; margin-left: 6px; }
.nivel-dictado > span { display: block; height: 100%; width: 100%; background: currentColor; transform-origin: left center; transition: transform .08s linear; }
/* ═══════════════ REDISEÑO «rd» · SISTEMA VISUAL (fase piloto, 09/11/2026) ═══════════════
   Maqueta aprobada por Javier: tarjetas con cabecera tenue, filas pautadas etiqueta-izquierda / valor-derecha, tablas
   empresariales (cabecera crema, pautado suave, cifras a la derecha) y letra Inter con números tabulares.
   Todo cuelga de la clase «rd» (y «rd-ficha» para la cabecera de una ficha 360 piloto) y lee sus medidas de los
   tokens --rd-*: para subir o bajar la letra de golpe basta con cambiar aquí los tamaños. Las piezas comunes no
   cambian de forma: Seccion/Dato/Datos (ficha360.js), tablas «.tabla», Estado, PanelKpis, Kpis, Cifras,
   SubSolapas, BarraMaestro y Paginacion se pintan así cuando están dentro de «rd».
   Fase piloto: listado de clientes y pestañas General, Condiciones comerciales y Cobros de la ficha de cliente
   (rediseno-logica.js). Aprobado, REDISENO.todo pone «rd» en <body> y lo recibe todo el programa.
   Tamaños: el extremo alto de la propuesta y nunca menos de 13 px en valores y celdas ni de 12 px en etiquetas
   pequeñas y cabeceras de columna (Javier pidió letra grande: LECTURA CLARA). Contraste alto en las etiquetas. */
:root {
  /* Tipografía */
  --rd-fuente: "Inter", "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rd-titulo-pagina: 28px; --rd-titulo-ficha: 22px; --rd-titulo-tarjeta: 15px;
  --rd-texto: 14px; --rd-ayuda: 13px; --rd-secundario: 12px;
  --rd-etiqueta: 13px; --rd-valor: 14px;
  --rd-th: 12px; --rd-td: 14px;
  --rd-kpi: 26px; --rd-kpi-ficha: 20px; --rd-cifra: 22px; --rd-kpi-etiqueta: 13px;
  --rd-boton: 13px; --rd-chip: 12px;
  --rd-peso-normal: 400; --rd-peso-medio: 500; --rd-peso-fuerte: 600;
  /* Colores (los de siempre: verde de la marca, crema y blanco) */
  --rd-verde: var(--primario);
  --rd-texto-1: var(--tinta);
  --rd-texto-2: oklch(0.40 0.024 220);            /* etiquetas y cabeceras: gris oscuro, contraste alto */
  --rd-fondo: var(--fondo);
  --rd-tarjeta: oklch(0.998 0.002 85);
  --rd-borde: oklch(0.895 0.013 80);
  --rd-separador: oklch(0.93 0.009 80);
  --rd-cab-tarjeta: color-mix(in oklch, var(--primario) 7%, oklch(0.985 0.006 110));
  --rd-cab-tabla: oklch(0.958 0.013 80);
  --rd-pauta: oklch(0.982 0.007 80);
  --rd-hover: color-mix(in oklch, var(--primario) 7%, var(--rd-tarjeta));
  --rd-seleccion: color-mix(in oklch, var(--primario) 13%, var(--rd-tarjeta));
  /* Estados: verde correcto, ámbar atención, rojo crítico, azul información y gris inactivo */
  --rd-ok: oklch(0.45 0.11 158); --rd-ok-fondo: oklch(0.6 0.12 158 / 0.13);
  --rd-aviso: oklch(0.5 0.11 65); --rd-aviso-fondo: oklch(0.78 0.13 78 / 0.22);
  --rd-error: oklch(0.5 0.18 27); --rd-error-fondo: oklch(0.62 0.19 27 / 0.12);
  --rd-info: oklch(0.47 0.1 240); --rd-info-fondo: oklch(0.6 0.1 240 / 0.12);
  --rd-neutro: oklch(0.42 0.015 230); --rd-neutro-fondo: oklch(0.93 0.006 230);
  /* Espacios, radios y sombras */
  --rd-radio: 12px; --rd-radio-control: 10px;
  --rd-hueco: 16px; --rd-relleno: 16px;
  --rd-cab-tarjeta-alto: 40px; --rd-fila-dato: 34px; --rd-fila-tabla: 52px; --rd-control: 38px;
  --rd-sombra: 0 1px 2px oklch(0.22 0.03 220 / 0.05), 0 2px 8px -4px oklch(0.22 0.03 220 / 0.08);
}

/* La línea común de letra (LECTURA CLARA) toma, dentro de «rd», los tamaños del rediseño: así botones, campos, tablas,
   ayudas y estados de TODAS las pantallas cambian solo por tokens, y las reglas propias de cada pantalla (TPV, modo
   planta, editores…) siguen mandando sobre lo común. */
.rd { --lc-texto: var(--rd-texto); --lc-ayuda: var(--rd-ayuda); --lc-etiqueta: var(--rd-etiqueta); --lc-campo: var(--rd-texto); --lc-valor: var(--rd-valor);
  --lc-th: var(--rd-th); --lc-td: var(--rd-td); --lc-titulo-seccion: var(--rd-titulo-tarjeta); --lc-boton: var(--rd-boton); --lc-chip: var(--rd-chip); --peso-boton: var(--rd-peso-fuerte); }
:where(.rd) .campo { border-radius: var(--rd-radio-control); font-weight: var(--rd-peso-normal); }
/* Interfaces especiales con tema propio: solo toman letra y radios; sus colores y medidas siguen siendo los suyos */
.modo-planta { --rd-tarjeta: var(--mp-caja); --rd-fondo: var(--mp-fondo); --rd-borde: var(--mp-borde); --rd-separador: var(--mp-borde); --rd-texto-1: var(--mp-texto); --rd-texto-2: var(--mp-suave);
  --rd-cab-tarjeta: var(--mp-caja-2); --rd-cab-tabla: var(--mp-caja-2); --rd-pauta: var(--mp-caja); --rd-hover: var(--mp-caja-2); --rd-seleccion: var(--mp-caja-2); --rd-verde: #2fd3b0;
  --rd-ok: var(--mp-verde); --rd-aviso: var(--mp-amarillo); --rd-error: var(--mp-rojo); --rd-info: var(--mp-azul); --rd-neutro: var(--mp-suave); --rd-neutro-fondo: var(--mp-caja-2);
  --lc-texto: 18px; --lc-campo: 18px; --lc-td: 17px; --lc-th: 14px; --lc-boton: 17px; --lc-chip: 14px; --lc-ayuda: 15px; }
.modo-planta .velo-ventana, .modo-planta .velo-panel, .modo-planta .ficha360-fondo, .mp-claro { --rd-tarjeta: oklch(0.998 0.002 85); --rd-fondo: oklch(0.972 0.013 82); --rd-borde: oklch(0.895 0.013 80);
  --rd-separador: oklch(0.93 0.009 80); --rd-texto-1: oklch(0.21 0.03 220); --rd-texto-2: oklch(0.40 0.024 220); --rd-cab-tarjeta: oklch(0.955 0.012 170); --rd-cab-tabla: oklch(0.958 0.013 80);
  --rd-pauta: oklch(0.982 0.007 80); --rd-hover: oklch(0.95 0.02 175); --rd-seleccion: oklch(0.92 0.03 175); --rd-verde: oklch(0.45 0.085 182); }

/* Letra y números */
.rd, .rd-ficha { font-family: var(--rd-fuente); font-size: var(--rd-texto); line-height: 1.5; color: var(--rd-texto-1); }
.rd :is(.tnum, .der, .cs, .pag), .rd-ficha :is(.tnum, .f360-kpi b) { font-variant-numeric: tabular-nums; }
:where(.rd) .peque { font-size: var(--rd-ayuda); }
:where(.rd) :is(h1, h2, h3, h4, strong, b) { font-weight: var(--rd-peso-fuerte); }
:where(.rd) a { color: var(--rd-verde); text-underline-offset: 2px; }

/* Cabecera de pantalla (Cabecera de lib.js) */
:where(.rd) .antetitulo { font-size: 12px; font-weight: var(--rd-peso-fuerte); letter-spacing: .14em; }
:where(.rd) .cab-pantalla { align-items: center; }
:where(.rd) .cab-pantalla h1 { font-size: var(--rd-titulo-pagina); font-weight: var(--rd-peso-fuerte); letter-spacing: -0.02em; margin: 4px 0 6px; }
:where(.rd) .cab-pantalla p { font-size: var(--rd-texto); color: var(--rd-texto-2); max-width: 900px; }
:where(.rd) .linea-fina { margin: 14px 0 18px; }

/* Botones, campos y pastillas */
:where(.rd) .boton-sec { border-color: var(--rd-borde); background: var(--rd-tarjeta); }
:where(.rd) .pastilla { height: 32px; padding: 0 13px; font-size: var(--rd-boton); font-weight: var(--rd-peso-medio); border-color: var(--rd-borde); background: var(--rd-tarjeta); }
:where(.rd) .pastilla.activa { font-weight: var(--rd-peso-fuerte); background: var(--rd-verde); border-color: var(--rd-verde); }
:where(.rd) .cli-cuenta { font-size: var(--rd-secundario); font-weight: var(--rd-peso-fuerte); line-height: 18px; }

/* Estados (Estado de lib.js): etiqueta pequeña con fondo suave, punto y texto (nunca solo color) */
:where(.rd, .rd-ficha) .estado { font-size: var(--rd-chip); font-weight: var(--rd-peso-medio); padding: 3px 9px; gap: 5px; line-height: 1.35; }
:where(.rd, .rd-ficha) .estado::before { width: 6px; height: 6px; }
:is(.rd, .rd-ficha) .e-verde { color: var(--rd-ok); background: var(--rd-ok-fondo); }
:is(.rd, .rd-ficha) .e-ambar { color: var(--rd-aviso); background: var(--rd-aviso-fondo); }
:is(.rd, .rd-ficha) .e-rojo { color: var(--rd-error); background: var(--rd-error-fondo); }
:is(.rd, .rd-ficha) .e-azul { color: var(--rd-info); background: var(--rd-info-fondo); }
:is(.rd, .rd-ficha) .e-gris { color: var(--rd-neutro); background: var(--rd-neutro-fondo); }

/* Tarjetas: títulos y banda de cabecera de cualquier tarjeta de pantalla (no solo las de las fichas) */
:where(.rd) .tarjeta h3 { font-size: var(--rd-titulo-tarjeta); font-weight: var(--rd-peso-fuerte); letter-spacing: 0; }
:where(.rd) .tarjeta h4 { font-size: var(--rd-texto); font-weight: var(--rd-peso-fuerte); }
.rd .tarjeta > .pad.fila.entre:first-child:has(> h3, > h4, > div > h3) { background: var(--rd-cab-tarjeta); border-bottom: 1px solid var(--rd-borde);
  border-radius: calc(var(--rd-radio) - 1px) calc(var(--rd-radio) - 1px) 0 0; padding-top: 10px; padding-bottom: 10px; }
.rd .tarjeta > .pad.fila.entre:first-child :is(h3, h4) { color: var(--rd-verde); }
:where(.rd) .ventana h3 { font-size: var(--rd-titulo-ficha); font-weight: var(--rd-peso-fuerte); letter-spacing: -0.01em; }
:where(.rd) .cli-form-tit { font-size: var(--rd-titulo-tarjeta); font-weight: var(--rd-peso-fuerte); letter-spacing: 0; text-transform: none; background: var(--rd-cab-tarjeta);
  border-bottom: 1px solid var(--rd-borde); color: var(--rd-verde); }
:where(.rd) .pad { padding: 16px 18px; }
:where(.rd) .tarjeta { border-radius: var(--rd-radio); border-color: var(--rd-borde); background: var(--rd-tarjeta); box-shadow: var(--rd-sombra); }
:where(.rd) .tarjeta > .paginacion:last-child { border-radius: 0 0 var(--rd-radio) var(--rd-radio); }

/* Indicadores: PanelKpis (graficas.js) y Kpis (registro.js) con el mismo estilo que los de las fichas */
:where(.rd) .panel-kpis { margin-bottom: var(--rd-hueco); }
:where(.rd) .panel-kpis { container: kpis / inline-size; }
:where(.rd) .kpi2-fila { gap: var(--rd-hueco); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
/* Cuatro indicadores: los cuatro en fila o, si no caben, dos y dos (nunca tres y uno suelto) */
:where(.rd) .kpi2-fila:has(> .kpi2:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container kpis (max-width: 860px) { .rd .kpi2-fila:has(> .kpi2:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
:where(.rd) .kpi2 { border-radius: var(--rd-radio); border-color: var(--rd-borde); background: var(--rd-tarjeta); box-shadow: var(--rd-sombra); padding: 14px 16px; gap: 8px; min-height: 100px; }
:where(.rd) .kpi2-cab { font-size: var(--rd-kpi-etiqueta); font-weight: var(--rd-peso-medio); color: var(--rd-texto-2); }
:where(.rd) .kpi2 { min-width: 0; }
:where(.rd) .kpi2-cab > span:not(.kpi2-ico) { min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
:where(.rd) .kpi2-ico { width: 28px; height: 28px; border-radius: 8px; }
:where(.rd) .kpi2 > b { font-size: var(--rd-kpi); font-weight: var(--rd-peso-fuerte); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
:where(.rd) .kpi2 small { font-size: var(--rd-secundario); color: var(--rd-texto-2); }
:where(.rd) .tend { font-weight: var(--rd-peso-fuerte); }
:where(.rd) .panel-kpis-pleg { font-size: var(--rd-ayuda); font-weight: var(--rd-peso-fuerte); }
:where(.rd) .kpis { border-radius: var(--rd-radio); }
:where(.rd) .kpi .t { font-size: var(--rd-kpi-etiqueta); font-weight: var(--rd-peso-medio); letter-spacing: 0; text-transform: none; }
:where(.rd) .kpi .v { font-size: var(--rd-kpi); font-weight: var(--rd-peso-fuerte); letter-spacing: -0.02em; }

/* Listados: la barra (BarraMaestro) dentro de la misma tarjeta que la tabla */
.rd .listado-barra { padding: 14px var(--rd-relleno) 0; }
.rd .listado-barra .barra-maestro { margin-bottom: 12px; gap: 10px 8px; }
/* Arriba el buscador y los botones (Columnas, Colores, Exportar); debajo, los filtros rápidos */
.rd .barra-maestro > .fila:not(.barra-derecha) { order: 3; flex: 1 1 100%; }
.rd .barra-maestro .barra-derecha { order: 2; }
.rd .barra-maestro .campo-filtro { width: auto; flex: 0 1 200px; height: var(--rd-control); }
.rd .barra-maestro input[type="search"] { height: var(--rd-control); width: 240px; max-width: 320px; flex: 1 1 240px; padding-left: 36px;
  background: var(--rd-tarjeta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23596a70' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center; }
.rd .listado-barra .lc-leyenda { margin: 0 0 12px; font-size: var(--rd-ayuda); }
.rd .lc-punto { font-size: var(--rd-secundario); font-weight: var(--rd-peso-medio); }

/* Tablas empresariales: cabecera crema en mayúsculas discretas, filas altas pautadas, cifras a la derecha */
:where(.rd) .tabla { font-size: var(--rd-td); }
:where(.rd) .tabla th { background: var(--rd-cab-tabla); font-size: var(--rd-th); font-weight: var(--rd-peso-fuerte); letter-spacing: .05em; color: var(--rd-texto-2);
  padding: 11px 14px; border-bottom: 1px solid var(--rd-borde); white-space: nowrap; }
:where(.rd) .tabla th.der, :where(.rd) .tabla td.der { text-align: right; }
:where(.rd) .tabla td { font-size: var(--rd-td); padding: 10px 14px; height: var(--rd-fila-tabla); border-top: 1px solid var(--rd-separador); color: var(--rd-texto-1); }
:where(.rd) .tabla tbody tr:first-child > td { border-top: 0; }
:where(.rd) .tabla tbody tr:nth-child(even) { background: var(--rd-pauta); }
:where(.rd) .tabla tbody tr:hover { background: var(--rd-hover); }
:where(.rd) .tabla tbody tr:has(> td > input[type="checkbox"]:checked) > td { background: var(--rd-seleccion); }
:where(.rd) .tabla td :is(strong, b) { font-weight: var(--rd-peso-fuerte); }
:where(.rd) .tabla td .peque { font-size: var(--rd-secundario); }
:where(.rd) .tabla td.cli-nombre .peque { margin-top: 1px; }
:where(.rd) .tabla tfoot td { background: var(--rd-cab-tabla); border-top: 1px solid var(--rd-borde); height: 44px; font-weight: var(--rd-peso-fuerte); }
.rd .cli-orden:hover, .rd .cli-orden.activa { color: var(--rd-verde); }
.rd .franja-riesgo > b { font-size: var(--rd-ayuda); font-weight: var(--rd-peso-fuerte); }
.rd .franja-barra { height: 6px; }

/* Paginación */
:where(.rd) .paginacion { background: var(--rd-tarjeta); border-top: 1px solid var(--rd-borde); padding: 10px var(--rd-relleno); }
:where(.rd) .paginacion .peque { font-size: var(--rd-ayuda); }
:where(.rd) .pag { height: 32px; min-width: 32px; border-radius: 8px; border-color: var(--rd-borde); font-size: var(--rd-ayuda); }
:where(.rd) .pag.activa { font-weight: var(--rd-peso-fuerte); }

/* Ficha 360: cabecera (nombre, chips y cifras con la etiqueta encima) y pestañas con la letra nueva */
/* Las pestañas se quedan como están (letra y medidas de siempre: así caben con su icono) */
:is(.rd, .rd-ficha) :is(.f360-pestanas, .f360-medidor, .f360-menu-mas) { font-family: "Lato", system-ui, sans-serif; }
/* El menú lateral también conserva su letra (con Inter, más ancha, se cortaban nombres como «Contabilidad e impuestos») */
.rd .lateral { font-family: "Lato", system-ui, sans-serif; }
:is(.rd, .rd-ficha) .f360-cab { padding: 14px 20px; gap: 12px 20px; }
:is(.rd, .rd-ficha) .f360-titulo { font-size: var(--rd-titulo-ficha); font-weight: var(--rd-peso-fuerte); letter-spacing: -0.015em; }
:is(.rd, .rd-ficha) .f360-foto { border-radius: 14px; font-weight: var(--rd-peso-fuerte); }
:is(.rd, .rd-ficha) .f360-sub { font-size: var(--rd-ayuda); color: var(--rd-texto-2); }
:is(.rd, .rd-ficha) .f360-ident .antetitulo { font-size: 12px; font-weight: var(--rd-peso-fuerte); letter-spacing: .12em; }
:is(.rd, .rd-ficha) .f360-kpi { padding: 4px 16px; gap: 10px; }
:is(.rd, .rd-ficha) .f360-kpi > div { display: flex; flex-direction: column-reverse; gap: 1px; }
:is(.rd, .rd-ficha) .f360-kpi b { font-size: var(--rd-kpi-ficha); font-weight: var(--rd-peso-fuerte); letter-spacing: -0.01em; line-height: 1.2; }
:is(.rd, .rd-ficha) .f360-kpi span { font-size: var(--rd-secundario); font-weight: var(--rd-peso-medio); letter-spacing: 0; text-transform: none; color: var(--rd-texto-2); }
:is(.rd, .rd-ficha) .f360-acciones { padding: 8px 20px; gap: 6px; }
:is(.rd, .rd-ficha) .f360-acciones :is(.boton, .boton-sec, .boton-pel, .boton-ok):not(.mini) { height: 34px; min-height: 34px; padding: 0 14px; font-size: var(--rd-boton); font-weight: var(--rd-peso-fuerte); }
:is(.rd, .rd-ficha) .f360-editar { height: 30px; font-size: var(--rd-boton); font-weight: var(--rd-peso-fuerte); }

/* Ficha 360: el cuerpo es una rejilla de tarjetas (2 columnas en escritorio y tableta, 3 en pantallas muy anchas,
   1 en el móvil). Las secciones con tabla o gráfica, y lo que no es sección, ocupan todo el ancho. */
.ficha360 .f360-cuerpo:is(.rd, .rd *) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: var(--rd-hueco);
  align-items: start; align-content: start; padding: 16px 20px 22px; background: var(--rd-fondo); }
.ficha360 .f360-cuerpo:is(.rd, .rd *) > * { grid-column: 1 / -1; min-width: 0; }
.ficha360 .f360-cuerpo:is(.rd, .rd *) > .f360-seccion.tarjeta-datos { grid-column: auto; }
.f360-cuerpo.rd .f360-seccion, .rd .f360-cuerpo .f360-seccion { margin: 0; }
.ficha360 .f360-cuerpo:is(.rd, .rd *) > p { margin: 0; }

/* Tarjeta (Seccion): cabecera tenue con icono y título verde; contenido en filas pautadas */
.rd .f360-seccion { background: var(--rd-tarjeta); border: 1px solid var(--rd-borde); border-radius: var(--rd-radio); box-shadow: var(--rd-sombra); padding: 0 var(--rd-relleno) 8px; }
.rd .f360-sec-cab { margin: 0 calc(-1 * var(--rd-relleno)) 4px; padding: 4px var(--rd-relleno); min-height: var(--rd-cab-tarjeta-alto); gap: 9px;
  background: var(--rd-cab-tarjeta); border: 0; border-bottom: 1px solid var(--rd-borde); border-radius: calc(var(--rd-radio) - 1px) calc(var(--rd-radio) - 1px) 0 0; }
.rd .f360-sec-cab h3 { font-size: var(--rd-titulo-tarjeta); font-weight: var(--rd-peso-fuerte); letter-spacing: 0; text-transform: none; color: var(--rd-verde); }
.rd .f360-sec-ico { width: 22px; height: 22px; border-radius: 6px; background: none; color: var(--rd-verde); }
.rd .f360-sec-cab .mini { height: 28px; padding: 0 10px; }
.rd .f360-seccion > p, .rd .f360-seccion > .apagado { margin: 10px 0 6px; }
.rd .f360-seccion > .tabla-env { margin: -4px calc(-1 * var(--rd-relleno)) -8px; }
.rd .f360-seccion > .tabla-env:not(:last-child) { margin-bottom: 0; }
.rd .f360-seccion .paginacion { margin: 0 calc(-1 * var(--rd-relleno)) -8px; border-radius: 0 0 var(--rd-radio) var(--rd-radio); }
.rd .f360-seccion .cli-form-tit { margin: 14px 0 6px; padding: 0; background: none; border: 0; border-radius: 0; font-size: var(--rd-etiqueta); font-weight: var(--rd-peso-fuerte);
  letter-spacing: .04em; color: var(--rd-texto-2); }

/* Filas de datos (Datos + Dato): etiqueta a la izquierda en gris, valor a la derecha; en tarjetas anchas, varias columnas de filas */
.rd .f360-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 0 32px; }
.rd .f360-dato { display: grid; grid-template-columns: minmax(7.5em, 40%) minmax(0, 1fr); align-items: baseline; gap: 4px 14px; min-height: var(--rd-fila-dato); padding: 7px 0;
  border-bottom: 1px solid var(--rd-separador); }
.rd .f360-datos > .f360-dato:last-child { border-bottom: 0; }
.rd .f360-dato.ancho { grid-column: 1 / -1; }
.rd .f360-dato > span { font-size: var(--rd-etiqueta); font-weight: var(--rd-peso-normal); color: var(--rd-texto-2); line-height: 1.4; }
.rd .f360-dato > b { font-size: var(--rd-valor); font-weight: var(--rd-peso-medio); color: var(--rd-texto-1); line-height: 1.4; overflow-wrap: anywhere; }
.rd .f360-dato > b a { text-decoration: none; font-weight: var(--rd-peso-medio); }
.rd .f360-dato > b a:hover { text-decoration: underline; }
.rd .f360-dato > b .estado { margin-left: 6px; vertical-align: 1px; }
.rd .f360-dato > b > .estado:first-child { margin-left: 0; }

/* Cifras de resumen (Cifras de ficha_entidad.js): como los indicadores */
.rd .cifras-ficha { gap: var(--rd-hueco); margin: 0; }
.rd .cifra-ficha { background: var(--rd-tarjeta); border-radius: var(--rd-radio); border-color: var(--rd-borde); box-shadow: var(--rd-sombra); padding: 14px 16px; gap: 4px; }
.rd .cifra-ficha span { font-size: var(--rd-kpi-etiqueta); font-weight: var(--rd-peso-medio); color: var(--rd-texto-2); }
.rd .cifra-ficha b { font-size: var(--rd-cifra); font-weight: var(--rd-peso-fuerte); letter-spacing: -0.015em; }
.rd .cifra-ficha em { font-size: var(--rd-secundario); color: var(--rd-texto-2); }

/* Sub-solapas y tablas sueltas de una pestaña: la tabla va en su tarjeta */
.rd .sub-solapas-barra { margin-bottom: 12px; border-bottom-color: var(--rd-borde); }
.rd .sub-solapa { font-size: var(--rd-texto); font-weight: var(--rd-peso-fuerte); }
.rd .sub-num { font-size: var(--rd-secundario); }
.rd :is(.sub-solapas-cuerpo, .f360-cuerpo) > .tabla-env { background: var(--rd-tarjeta); border: 1px solid var(--rd-borde); border-radius: var(--rd-radio); box-shadow: var(--rd-sombra); }
.rd .sub-solapas-cuerpo > .f360-seccion + .f360-seccion { margin-top: var(--rd-hueco); }
.rd :is(.sub-solapas-cuerpo, .f360-cuerpo) > .paginacion { border: 1px solid var(--rd-borde); border-radius: var(--rd-radio); margin-top: 8px; }

/* Estados de pantalla */
:where(.rd) .vacio { font-size: var(--rd-texto); }
:where(.rd) .vacio > div:first-child { font-weight: var(--rd-peso-fuerte) !important; }
:where(.rd) .cargando { font-size: var(--rd-texto); }
:where(.rd) .error-caja { border-radius: var(--rd-radio-control); font-size: var(--rd-texto); }

@media (max-width: 720px) {
  .ficha360 .f360-cuerpo:is(.rd, .rd *) { padding: 12px; gap: 12px; }
  .rd .f360-dato { grid-template-columns: minmax(6.5em, 42%) minmax(0, 1fr); }
  .rd .cab-pantalla h1 { font-size: 24px; }
  /* Cifras de la cabecera de la ficha de dos en dos, sin cortarse */
  :is(.rd, .rd-ficha) .f360-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1 1 100%; }
  :is(.rd, .rd-ficha) .f360-kpi { padding: 4px 8px; margin-left: 0; border-left: 0; gap: 8px; min-width: 0; }
  :is(.rd, .rd-ficha) .f360-kpi > div { min-width: 0; }
  :is(.rd, .rd-ficha) .f360-kpi b { font-size: 17px; }
  :is(.rd, .rd-ficha) .f360-kpi span { white-space: normal; line-height: 1.3; }
}

/* ═══════════════ 1.40 · Ordenar cualquier listado pulsando la cabecera (orden-tablas.js) ═══════════════
   La flecha va colocada aparte (no ocupa sitio): las cifras de la columna siguen en su raya con su título. */
.tabla th.th-ordenable { position: relative; cursor: pointer; user-select: none; }
.tabla th.th-ordenable:hover, .tabla th.th-ordenable:focus-visible { color: var(--primario); }
.tabla th.th-ordenable:focus-visible { outline: 2px solid var(--primario); outline-offset: -2px; }
.tabla th.th-ordenable::after { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); font-size: 12px; line-height: 1; color: var(--primario); }
.tabla th.th-ordenable[aria-sort="ascending"]::after { content: "▲"; }
.tabla th.th-ordenable[aria-sort="descending"]::after { content: "▼"; }
.tabla th.th-ordenable[aria-sort="ascending"], .tabla th.th-ordenable[aria-sort="descending"] { color: var(--primario); }
.tabla th.th-ordenable[aria-sort="none"]:hover::after { content: "↕"; opacity: .55; }
/* Empresa activa a simple vista (Javier, 09/11/2026): la barra de arriba, el selector y la cabecera del menú toman un fondo
   suave del color de la empresa; con varias empresas cada una tiene su tono (barra-logica.js · colorEmpresa). */
.cabecera-sup { background: color-mix(in oklch, var(--color-empresa) 11%, var(--fondo)); border-bottom-color: color-mix(in oklch, var(--color-empresa) 35%, var(--borde-c)); }
.bs-empresa { background: color-mix(in oklch, var(--color-empresa) 20%, var(--tarjeta)); border-color: color-mix(in oklch, var(--color-empresa) 60%, var(--borde-c)); }
.lateral-cab { margin: -14px -12px 10px; padding: 14px 12px 12px; background: color-mix(in oklch, var(--color-empresa) 32%, transparent); border-bottom: 1px solid color-mix(in oklch, var(--color-empresa) 55%, transparent); }
.lateral-cab .marca-emp { display: inline-block; margin-top: 2px; padding: 1px 8px; border-radius: 999px; background: var(--color-empresa); color: #fff; font-weight: 600; max-width: 100%; }