/* Visor TAIFA. Colores, radios y tamaños en variables; medidas de las maquetas aprobadas. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fuentes/PlusJakartaSans.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --tinta: #0b0b0c;
  --sec: #6b6b70;
  --ter: #9a9aa0;
  --linea: #efefef;
  --suave: #f7f7f8;
  --control: #f1f1f3;
  --marca: #2440eb;
  --rojo: #d6002a;
  --rojo-f: #fdeaea;
  --verde: #1b7f4a;
  --verde-f: #e6f5ec;
  --ambar: #b06000;
  --ambar-f: #fdf3e3;
  --azul-f: #ecefff;
  --gris: #6b6b70;
  --gris-f: #f1f1f3;
  --chev: #c4c4c8;
  --borde-sec: #e6e6ea;
  --cab: var(--marca);
  --r-hoja: 28px;
  --r-tarjeta: 18px;
  --r-corta: 16px;
  --r-ico: 14px;
  --r-pildora: 999px;
  --m-lado: 24px;
  --alto-pest: max(84px, calc(58px + env(safe-area-inset-bottom)));
  --alto-chat: 104px;
  --holgura-chat: 180px;
}

.tema-frentes { --cab: #2440eb; }
.tema-cliente { --cab: #4f35c4; }
.tema-chats { --cab: #1f3a5f; }
.tema-motores { --cab: #1e1b4b; }
.tema-parati { --cab: #a3123a; }
.tema-caja { --cab: #0b0b0c; }
.tema-general { --cab: #1e1b4b; }
.tema-pronto { --cab: #3f3f46; }
.tema-ajustes { --cab: #27272a; }
.tema-webs { --cab: #1a2fb8; }
.tema-redes-y-video { --cab: #9d174d; }
.tema-seo { --cab: #0f6b43; }
.tema-anuncios { --cab: #b4122f; }
.tema-ventas-y-leads { --cab: #9a5b00; }
.tema-finanzas { --cab: #3f3f46; }
.tema-datos { --cab: #0b6fa3; }
.tema-claude { --cab: #5b21b6; }

.tono-defecto, .tono-finanzas { background: #f1f1f3; color: #3a3a40; }
.tono-webs { background: #ecefff; color: #2440eb; }
.tono-redes-y-video { background: #fdeaf1; color: #c2185b; }
.tono-seo { background: #e6f5ec; color: #1b7f4a; }
.tono-anuncios { background: #fdeaea; color: #d6002a; }
.tono-ventas-y-leads { background: #fdf3e3; color: #b06000; }
.tono-datos { background: #e7f2fb; color: #0b6fa3; }
.tono-claude { background: #efeafe; color: #6b3ff0; }
.tono-motores { background: #e7e6f7; color: #1e1b4b; }
.tono-amaya-mediaclassics { background: #efeafe; color: #6b3ff0; }
.tono-siempremium { background: #e3f5f1; color: #0f7a6a; }
.tono-enigma-forense { background: #ecefff; color: #2440eb; }
.tono-corazonia { background: #fdf3e3; color: #b06000; }
.tono-muchas-mas { background: #fdeaf1; color: #c2185b; }
.tono-arkania { background: #e7f2fb; color: #0b6fa3; }
.tono-sibari { background: #fdeaea; color: #d6002a; }
.tono-maria-bernardeau { background: #fdf3e3; color: #b06000; }
.tono-oprea { background: #f1f1f3; color: #3a3a40; }

*, *::before, *::after { box-sizing: border-box; }
html { background: #ffffff; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cab);
  color: var(--tinta);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--tinta); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { a:hover { color: var(--marca); } }
h1, h2, p { margin: 0; }
button, input, textarea { font-family: inherit; }
button { cursor: pointer; color: inherit; }
svg { flex: none; display: block; }
[hidden] { display: none !important; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sec { color: var(--sec); }
.ter { color: var(--ter); }
.peq { font-size: 12px; }
.tenue { opacity: 0.5; }

.app { display: flex; flex-direction: column; min-height: 100dvh; }
.cuerpo { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.principal { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.migas { display: none; }

/* Cabecera de color */
.cab {
  padding: max(26px, calc(env(safe-area-inset-top) + 16px)) var(--m-lado) 42px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #ffffff;
  background: var(--cab);
}
.cab a { color: #ffffff; }
.cab-sup { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; }
.fecha { font-size: 13px; font-weight: 600; opacity: 0.78; }
.atras { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; opacity: 0.85; min-width: 0; min-height: 44px; }
.atras span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.redondos { display: flex; align-items: center; gap: 8px; flex: none; }
.redondo { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); display: flex; align-items: center; justify-content: center; position: relative; }
.redondo::after { content: ""; position: absolute; inset: -5px; }
.pildora { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, 0.16); border-radius: var(--r-pildora); padding: 6px 10px; white-space: nowrap; }
.punto { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; }
.punto-verde { background: #7ee2a8; }
.punto-ambar { background: #ffd28a; }
.punto-rojo { background: #ff9a9a; }
.punto-gris { background: #c4c4c8; }
.numero { display: flex; align-items: flex-end; gap: 12px; padding-top: 2px; }
.num { font-size: 76px; font-weight: 800; letter-spacing: -0.05em; line-height: 0.95; font-variant-numeric: tabular-nums; }
.num-t { font-size: 16px; font-weight: 600; line-height: 1.25; padding-bottom: 8px; opacity: 0.92; }
.numero svg { margin-bottom: 12px; opacity: 0.8; }

.ct { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 10px; }
.ct-c { background: rgba(255, 255, 255, 0.12); border-radius: var(--r-corta); padding: 12px 14px 11px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ct-t { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; opacity: 0.8; }
.ct-v { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ct-v2 { font-size: 16px; letter-spacing: -0.02em; display: flex; gap: 6px; align-items: baseline; white-space: nowrap; }
.ct-v2 small { font-size: 12px; font-weight: 700; opacity: 0.85; }
.ct-n { font-size: 11px; font-weight: 600; opacity: 0.75; display: flex; align-items: center; gap: 6px; }
.ct-barra { display: block; width: 100%; height: 4px; border: 0; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, 0.25); -webkit-appearance: none; appearance: none; }
.ct-barra::-webkit-progress-bar { background: rgba(255, 255, 255, 0.25); }
.ct-barra::-webkit-progress-value { background: #ffffff; }
.ct-barra::-moz-progress-bar { background: #ffffff; }

.cab-tit { display: flex; align-items: center; gap: 14px; padding-top: 2px; }
.cab-txt { display: flex; flex-direction: column; gap: 12px; min-width: 0; flex: 1; }
.cab-txt h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; overflow-wrap: anywhere; }
.cab-txt p { font-size: 14px; line-height: 1.5; font-weight: 500; opacity: 0.88; }
.ico-g { width: 48px; height: 48px; border-radius: var(--r-corta); display: flex; align-items: center; justify-content: center; flex: none; }
.cab > .cab-txt { padding-top: 0; }

.cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 6px; }
.cifra { background: rgba(255, 255, 255, 0.12); border-radius: var(--r-corta); padding: 9px 14px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cifra-v { font-size: 24px; font-weight: 800; letter-spacing: -0.04em; overflow-wrap: anywhere; }
.cifra-v.nada { opacity: 0.55; }
.cifra-e { font-size: 12px; font-weight: 600; opacity: 0.8; }

.datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 14px; }
.dato { background: rgba(255, 255, 255, 0.12); border-radius: var(--r-corta); padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dato-t { font-size: 11px; font-weight: 600; opacity: 0.8; }
.dato-v { font-size: 15px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.dato-nada { font-size: 12px; font-weight: 600; opacity: 0.6; }

/* Hoja blanca */
.hoja {
  flex: 1;
  background: #ffffff;
  border-radius: var(--r-hoja) var(--r-hoja) 0 0;
  margin-top: -18px;
  padding: 6px 0 calc(var(--alto-pest) + 24px);
  display: flex;
  flex-direction: column;
}
.con-chat .hoja { padding-bottom: calc(var(--alto-pest) + var(--alto-chat) + 24px); }
.titular { padding: 20px var(--m-lado) 6px; display: flex; align-items: center; gap: 10px; }
.titular h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.busca { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: var(--control); border-radius: var(--r-pildora); padding: 0 16px; min-height: 48px; position: relative; color: var(--sec); }
.busca input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: transparent; font-size: 16px; font-weight: 500; color: var(--tinta); outline: 0; -webkit-appearance: none; appearance: none; }
.busca input::placeholder { color: var(--sec); font-size: 14px; }
.busca-g { margin: 20px var(--m-lado) 8px; flex: none; }
.nuevo { flex: none; min-height: 48px; padding: 0 16px 0 14px; border-radius: var(--r-pildora); background: var(--tinta); color: #ffffff; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
a.nuevo { color: #ffffff; }

.grupo-t { padding: 18px var(--m-lado) 8px; display: flex; justify-content: space-between; align-items: baseline; }
.grupo-n { font-size: 13px; font-weight: 700; color: var(--sec); letter-spacing: 0.02em; text-transform: uppercase; }
.grupo-nota { font-size: 12px; font-weight: 600; color: var(--sec); }
.grupo + .grupo { position: relative; }
.grupo + .grupo::before { content: ""; display: block; margin: 10px var(--m-lado) 0; height: 1px; background: var(--linea); }

.fila { display: flex; align-items: center; gap: 14px; padding: 11px var(--m-lado); min-height: 66px; color: var(--tinta); }
.ico { width: 44px; height: 44px; border-radius: var(--r-ico); display: flex; align-items: center; justify-content: center; flex: none; }
.ico-m { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.ico-p { width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.ico-pp { width: 28px; height: 28px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: none; }
.fila-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fila-nombre { font-size: 15px; font-weight: 700; }
.fila-linea { font-size: 13px; color: var(--sec); font-weight: 500; line-height: 1.35; }
.fila-der { display: flex; align-items: center; gap: 10px; flex: none; }
.chev { color: var(--chev); }
.insignia { min-width: 22px; height: 22px; border-radius: 11px; background: var(--rojo); color: #ffffff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 7px; }
.ok { width: 22px; height: 22px; border-radius: 11px; background: var(--verde-f); color: var(--verde); display: flex; align-items: center; justify-content: center; }
.etiqueta { font-size: 11px; font-weight: 700; border-radius: 8px; padding: 3px 7px; white-space: nowrap; }
.e-gris { color: var(--gris); background: var(--gris-f); }
.e-azul { color: var(--marca); background: var(--azul-f); }
.e-ambar { color: var(--ambar); background: var(--ambar-f); }
.e-verde { color: var(--verde); background: var(--verde-f); }
.e-rojo { color: var(--rojo); background: var(--rojo-f); }
.edad { font-size: 11px; font-weight: 700; color: var(--gris); background: var(--gris-f); border-radius: 8px; padding: 3px 7px; flex: none; white-space: nowrap; }
.edad.urge { color: var(--rojo); background: var(--rojo-f); }
.edad.edad-curso { color: var(--ambar); background: var(--ambar-f); }
.pie { padding: 16px var(--m-lado) 0; font-size: 12px; color: var(--ter); display: flex; align-items: center; gap: 6px; }

/* Resumen, bloques y tarjetas */
.dos-resumen { display: flex; flex-direction: column; }
.resumen { margin: 24px 20px 0; padding: 14px 16px; border-radius: var(--r-tarjeta); background: var(--suave); display: flex; flex-direction: column; gap: 8px; }
.resumen-cab { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-weight: 700; color: var(--sec); letter-spacing: 0.04em; }
.resumen-cab .ter { font-size: 11px; font-weight: 500; letter-spacing: 0; }
.resumen-txt { font-size: 13px; line-height: 1.55; }
.resumen-g { padding: 0; gap: 4px; background: none; border-radius: 0; }
.resumen-c { padding: 16px 18px; border-radius: var(--r-tarjeta); background: var(--suave); display: flex; flex-direction: column; gap: 12px; }
.resumen-g h2 { padding: 0 10px; font-size: 13px; font-weight: 700; color: var(--sec); letter-spacing: 0.02em; text-transform: uppercase; }
.res-l { display: flex; flex-direction: column; gap: 2px; }
.res-t { font-size: 12px; font-weight: 600; color: var(--sec); }
.res-v { font-size: 15px; font-weight: 600; line-height: 1.35; }
.rojo { margin: 16px 20px 0; padding: 12px 14px; border-radius: var(--r-corta); background: var(--rojo-f); color: var(--rojo); font-size: 13px; line-height: 1.5; }
.dos-col, .dos-igual { display: flex; flex-direction: column; }
.bloque { display: flex; flex-direction: column; min-width: 0; }
.bloque-t { padding: 24px var(--m-lado) 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bloque-n { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.bloque-nota { font-size: 12px; color: var(--sec); font-weight: 600; }
.dos-col > .bloque + .bloque { margin-top: 24px; border-top: 1px solid var(--linea); margin-left: var(--m-lado); margin-right: var(--m-lado); }
.dos-col > .bloque + .bloque .bloque-t, .dos-col > .bloque + .bloque .tarea { padding-left: 0; padding-right: 0; }
.dos-col > .bloque + .bloque .bloque-t { padding-top: 20px; padding-bottom: 4px; }
.dos-col > .bloque + .bloque .reglas-g { padding: 0 var(--m-lado); display: flex; flex-direction: column; }
.regla-g { display: flex; gap: 10px; padding: 10px 0; font-size: 14px; font-weight: 600; line-height: 1.35; border-top: 1px solid var(--linea); }
.regla-g:first-child { border-top: 0; }
.regla-g .bola { flex: none; margin-top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--marca); }
.reglas { margin-left: 0; margin-right: 0; }

.tarjeta { margin: 10px 20px 0; padding: 14px 16px; border-radius: 18px; background: var(--suave); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.t-cab { display: flex; align-items: center; gap: 12px; }
.t-tit { font-size: 14px; font-weight: 700; }
.con-cliente .t-tit, .p-seccion-motores .t-tit { font-size: 15px; line-height: 19px; }
.con-cliente .ico-m { width: 40px; height: 40px; border-radius: 13px; }
.t-sub { font-size: 12px; color: var(--sec); font-weight: 500; }
.t-origen { font-size: 12px; font-weight: 600; color: var(--marca); }
.t-cuerpo { background: #ffffff; border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.t-ruta { font-size: 12px; color: var(--sec); overflow-wrap: anywhere; }
.t-aviso { background: var(--rojo-f); color: var(--rojo); border-radius: 12px; padding: 10px 12px; font-size: 13px; font-weight: 600; line-height: 1.4; margin: 12px 20px 0; }
.tarjeta .t-aviso { margin: 0; }
.ok-aviso { background: var(--verde-f); color: var(--verde); }
.t-tomada { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.t-tomada > span:first-child { display: inline-flex; gap: 6px; align-items: flex-start; color: var(--verde); }
.t-tomada .ter { font-size: 12px; font-weight: 500; }

/* La regla sagrada: abajo a la derecha, blanco a la izquierda, negro a la derecha */
.botones { display: flex; gap: 8px; justify-content: flex-end; margin-top: auto; flex-wrap: wrap; }
.b-sec, .b-pri { min-height: 44px; padding: 0 18px; border-radius: var(--r-pildora); font-size: 13px; font-weight: 700; border: 0; }
.b-sec { background: #ffffff; color: var(--tinta); border: 1.5px solid var(--borde-sec); }
.tarjeta .b-sec { border: 0; }
.b-pri { background: var(--tinta); color: #ffffff; }
.b-g { min-height: 54px; padding: 0 26px; font-size: 15px; }
.b-enlace { display: inline-flex; align-items: center; color: #ffffff; }
a.b-enlace { color: #ffffff; }
.cambios { display: flex; flex-direction: column; gap: 10px; }
.cambios textarea, .form input { width: 100%; background: var(--control); border: 0; border-radius: var(--r-ico); padding: 12px 16px; font-size: 16px; color: var(--tinta); }
.cambios textarea { min-height: 88px; resize: vertical; background: #ffffff; }

.tarea { display: flex; gap: 14px; padding: 8px var(--m-lado); align-items: center; }
.t-ico { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; }
.tarea-n { font-size: 15px; font-weight: 700; }
.tarea-d { font-size: 12px; color: var(--sec); font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.t-hecho .t-ico { background: var(--verde-f); color: var(--verde); }
.t-hecho .tarea-n { font-weight: 600; color: var(--sec); }
.t-hecho .tarea-d { color: var(--ter); }
.t-tuya .t-ico { background: var(--rojo-f); color: var(--rojo); }
.t-tuya .tarea-d { color: var(--rojo); font-weight: 600; }
.t-curso .t-ico, .t-decides .t-ico { background: var(--azul-f); color: var(--marca); }
.t-parada .t-ico, .t-pendiente .t-ico { background: var(--gris-f); color: var(--gris); }
.t-parada .tarea-n { color: var(--sec); }
.t-cliente .t-ico { background: var(--ambar-f); color: var(--ambar); }

.reglas { margin: 20px var(--m-lado) 0; padding: 16px 18px; background: var(--suave); border-radius: var(--r-tarjeta); display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.55; color: #4a4a50; }
.reglas strong { color: var(--tinta); font-weight: 700; }
.ico-pb { width: 32px; height: 32px; border-radius: 10px; background: #ffffff; color: var(--tinta); display: flex; align-items: center; justify-content: center; flex: none; }
.fuentes-casilla { margin: 20px var(--m-lado) 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--sec); line-height: 1.45; overflow-wrap: anywhere; }
.fuentes-casilla a { position: relative; color: var(--marca); font-weight: 600; }
.fuentes-casilla a::after { content: ""; position: absolute; inset: -15px 0; }
.sus-frentes { padding-top: 6px; }
.pedido { display: flex; align-items: flex-start; gap: 12px; padding: 7px var(--m-lado); font-size: 15px; line-height: 1.4; }
.bola { width: 7px; height: 7px; border-radius: 50%; background: #6b3ff0; margin-top: 7px; flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px var(--m-lado) 0; }
.chip { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: var(--r-pildora); background: var(--control); font-size: 14px; font-weight: 600; color: var(--tinta); }
.chip::after { content: ""; position: absolute; inset: -2px 0; }
.chip svg { color: var(--ter); }
.chip-n { font-size: 12px; font-weight: 700; color: var(--sec); }
.chip-n.cero { color: var(--ter); }
.chips-pie { display: flex; justify-content: flex-end; padding: 14px var(--m-lado) 0; }
.chips-pie .b-sec { min-height: 42px; padding: 0 16px; font-size: 13px; }
.cobro { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--m-lado); }
.cobro-der { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.importe { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vacio { padding: 16px var(--m-lado); font-size: 14px; color: var(--sec); line-height: 1.5; }
.res-cuenta { padding: 10px var(--m-lado) 0; }
mark { background: #fff1a8; color: inherit; border-radius: 3px; padding: 0 1px; }
.prosa { font-size: 14px; line-height: 1.55; }
.prosa > :not(.bloque-t) { margin-left: var(--m-lado); margin-right: var(--m-lado); }
.prosa ul { padding-left: 18px; margin-top: 6px; margin-bottom: 0; }
.prosa li { margin-bottom: 8px; }
.prosa h2, .prosa h3 { font-size: 15px; font-weight: 700; margin-top: 16px; margin-bottom: 4px; }
.prosa table { border-collapse: collapse; font-size: 13px; display: block; overflow-x: auto; max-width: calc(100% - 2 * var(--m-lado)); }
.prosa td, .prosa th { border-bottom: 1px solid var(--linea); padding: 6px 10px 6px 0; text-align: left; vertical-align: top; }
.bloque .form, .bloque .qr, .bloque .codigos, .bloque > .botones, .bloque > .peq, .bloque > .t-aviso { margin-left: var(--m-lado); margin-right: var(--m-lado); }
.form { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.form label { font-size: 12px; font-weight: 600; color: var(--sec); }
.qr { width: 220px; }
.qr svg { width: 100%; height: auto; }
.codigos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; font-size: 13px; }
code { font-family: ui-monospace, Menlo, monospace; overflow-wrap: anywhere; }

/* Barra de chat fija: móvil, encima de las pestañas */
.barra-chat {
  position: fixed; left: 0; right: 0; bottom: var(--alto-pest); z-index: 20;
  background: #ffffff; border-top: 1px solid var(--linea);
  padding: 10px 16px 12px; display: flex; flex-direction: column; gap: 8px;
}
.chat-info { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 11px; color: var(--sec); font-weight: 600; }
.motor { display: inline-flex; align-items: center; gap: 6px; }
.chat-enlaces { display: inline-flex; align-items: center; gap: 14px; flex: none; }
.chat-enlaces a { position: relative; display: inline-flex; align-items: center; gap: 4px; color: var(--sec); }
.chat-enlaces a::after { content: ""; position: absolute; inset: -24px -4px -7px; }
.chat-caja { display: flex; align-items: center; background: var(--control); border-radius: var(--r-pildora); padding: 4px 4px 4px 18px; gap: 8px; }
.chat-caja input { flex: 1; min-height: 40px; border: 0; background: transparent; font-size: 16px; font-weight: 500; color: var(--tinta); min-width: 0; outline: 0; }
.chat-caja input::placeholder { font-size: 14px; color: var(--sec); }
.enviar::after { content: ""; position: absolute; inset: -2px; }
.enviar { position: relative; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--tinta); color: #ffffff; display: flex; align-items: center; justify-content: center; flex: none; }
.enviar:disabled { background: #c4c4c8; cursor: default; }

/* Pestañas */
.pestanas {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--alto-pest); z-index: 30;
  background: #ffffff; border-top: 1px solid var(--linea);
  display: flex; justify-content: space-around; align-items: flex-start; padding: 12px 10px env(safe-area-inset-bottom);
}
.pestanas > a, .pestanas > button { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--sec); min-width: 60px; min-height: 44px; position: relative; background: none; border: 0; padding: 0; font-family: inherit; }
.pestanas .activa { font-weight: 700; color: var(--marca); }
.pest-n { position: absolute; top: -4px; right: 8px; min-width: 18px; height: 18px; border-radius: 9px; font-size: 11px; padding: 0 5px; }

.velo { position: fixed; inset: 0; background: rgba(11, 11, 12, 0.55); z-index: 40; }
.hoja-mas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: #ffffff; border-radius: 24px 24px 0 0; padding: 18px 16px calc(14px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 2px; max-height: 85dvh; overflow-y: auto; }
.hoja-mas-cab { display: flex; justify-content: space-between; align-items: center; padding: 0 8px 8px; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.cerrar { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--control); display: flex; align-items: center; justify-content: center; }
.cerrar::after { content: ""; position: absolute; inset: -4px; }
.mas-fila { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 8px; font-size: 15px; font-weight: 600; }
.mas-fila span:nth-child(2) { flex: 1; }

/* Puerta: entrar y alta */
.puerta { background: var(--marca); min-height: 100dvh; display: flex; flex-direction: column; }
.puerta-cab { padding: max(48px, calc(env(safe-area-inset-top) + 28px)) var(--m-lado) 46px; color: #ffffff; display: flex; flex-direction: column; gap: 10px; }
.puerta-marca { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; opacity: 0.8; }
.puerta-cab h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.puerta-cab p { font-size: 14px; opacity: 0.88; line-height: 1.5; }
.puerta-hoja { padding: 28px var(--m-lado) 40px; gap: 14px; }
.puerta-hoja .t-aviso { margin: 0; }
.puerta-hoja .vacio { padding: 0; }

/* Chat y motores */
.chat-bloque { margin-top: 8px; }
.hilo { display: flex; flex-direction: column; gap: 8px; padding: 0 var(--m-lado); }
.hilo .vacio { padding: 0; }
.msj { max-width: 85%; padding: 10px 14px; border-radius: var(--r-corta); background: var(--suave); display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.45; align-self: flex-start; }
.msj-t { white-space: pre-wrap; overflow-wrap: anywhere; }
.msj-monir { background: var(--tinta); color: #ffffff; align-self: flex-end; }
.msj-m { font-size: 11px; font-weight: 600; color: var(--sec); }
.msj-espera { font-size: 13px; font-weight: 600; color: var(--sec); }
.recorta { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.motor-sigla { font-size: 13px; font-weight: 800; }

/* Decidir: Ver, Cambios, voz, toast, pulsación larga */
.tono-parati { background: #fbe6ec; color: #a3123a; }
.cab-nota { font-size: 14px; line-height: 1.5; opacity: 0.88; }
.punto-vivo { background: var(--verde); }
.t-ver { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--marca); background: none; border: 0; padding: 0; font-family: inherit; line-height: 16px; position: relative; align-self: stretch; }
.t-ver::after { content: ""; position: absolute; inset: -18px 0 -10px; }
.t-visto { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--verde); background: var(--verde-f); border-radius: 8px; padding: 2px 7px; margin-left: 4px; }
.t-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.t-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.t-chip-ok { color: var(--verde); background: var(--verde-f); }
.t-chip-mal { color: var(--rojo); background: var(--rojo-f); }
.t-cola { font-size: 12px; font-weight: 700; color: var(--ambar); background: var(--ambar-f); border-radius: 8px; padding: 4px 8px; align-self: flex-start; }
.tarjeta.atenuada { opacity: 0.45; }
.atenuada .t-tomada, .atenuada > .botones:not(.botones-previos) { display: none; }
.botones-previos { pointer-events: none; }
.tarjeta.en-cola .botones { opacity: 0.45; pointer-events: none; }
.aviso-cola { margin: 16px 20px 0; padding: 10px 12px; border-radius: 12px; background: var(--ambar-f); color: var(--ambar); font-size: 13px; font-weight: 700; }
.nota-final { padding: 16px 20px 0; font-size: 12px; color: var(--ter); text-align: center; }
.margen-lado { margin: 12px 20px 0; }
.b-pri:disabled { background: #c4c4c8; cursor: default; }
.b-pri[data-largo] { position: relative; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.largo-barra { position: absolute; inset: 0; background: #2440eb; transform: scaleX(0); transform-origin: left; }
.largo-txt { position: relative; }
.b-pri.pulsando .largo-barra { transform: scaleX(1); transition: transform 1s linear; }
.cambios { background: #ffffff; border: 1.5px solid var(--borde-sec); border-radius: var(--r-tarjeta); padding: 14px 16px; }
.cambios .b-sec { border: 1.5px solid var(--borde-sec); }
.cambios textarea { background: var(--control); min-height: 72px; resize: none; line-height: 1.45; }
.voz { display: flex; align-items: center; gap: 12px; }
.voz-b { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--tinta); color: #ffffff; display: flex; align-items: center; justify-content: center; flex: none; }
.grabando .voz-b { background: var(--rojo); }
.onda { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; height: 28px; overflow: hidden; }
.onda span { width: 3px; height: 6px; flex: none; border-radius: 2px; background: var(--tinta); }
.onda span:nth-child(3n) { height: 14px; }
.onda span:nth-child(4n) { height: 22px; }
.onda span:nth-child(5n) { height: 10px; }
.onda span:nth-child(7n) { height: 26px; }
.voz-t { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }
.voz-estado { font-size: 12px; font-weight: 600; color: var(--sec); }
.segundo { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--control); border-radius: var(--r-ico); padding: 6px 6px 6px 16px; font-size: 13px; font-weight: 600; color: var(--sec); }
.segundo-c { display: inline-flex; align-items: center; gap: 12px; }
.segundo-c button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: #ffffff; display: flex; align-items: center; justify-content: center; }
.segundo-c output { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; min-width: 40px; text-align: center; color: var(--tinta); }
.ver { border: 0; padding: 20px; background: #ffffff; color: var(--tinta); width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 24px 24px 0 0; max-height: 80dvh; }
.ver[open] { display: flex; flex-direction: column; }
.ver::backdrop { background: rgba(11, 11, 12, 0.55); }
#ver-cuerpo { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow: hidden; flex: 1; }
.ver-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; }
.ver-tit { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.ver-cuerpo { overflow-y: auto; display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 80px; }
.ver-texto { background: var(--suave); font-size: 14px; }
.ver-video { display: block; width: 300px; max-width: 100%; aspect-ratio: 9 / 16; max-height: 100%; margin: 0 auto; border-radius: 20px; background: var(--tinta); flex: 1 1 auto; min-height: 0; }
.ver:has(.ver-video) { height: 70dvh; }
.ver-check { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; min-height: 44px; flex: none; }
.ver-check input { width: 20px; height: 20px; accent-color: var(--tinta); }
.enlace { color: var(--marca); font-weight: 600; overflow-wrap: anywhere; }
.reaut[open] { gap: 14px; }
.reaut .form { margin-top: 0; }
.toast { position: fixed; left: 16px; right: 16px; bottom: calc(var(--alto-pest) + 16px); z-index: 60; background: var(--tinta); color: #ffffff; border-radius: var(--r-corta); padding: 14px 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 10px 30px rgba(11, 11, 12, 0.35); }
.toast-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 700; line-height: 1.25; }
.toast-pie { display: flex; align-items: center; gap: 10px; }
.toast-seg { flex: none; font-size: 11px; font-weight: 600; opacity: 0.8; }
.toast-giro { flex: none; animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.toast-bar { flex: 1; min-width: 0; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.25); overflow: hidden; display: flex; }
.toast-bar span { flex: 1; height: 3px; background: #ffffff; transform-origin: left; }
.toast.corre .toast-bar span { animation: bajar 3s linear forwards; }
@keyframes bajar { to { transform: scaleX(0); } }
.toast-b { flex: none; min-height: 44px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: var(--r-pildora); background: transparent; color: #ffffff; font-size: 13px; font-weight: 700; }
.teclado .pestanas, .teclado .barra-chat, .teclado .toast { display: none; }

@media (max-width: 699px), (max-width: 959px) and (pointer: coarse), (max-width: 959px) and (pointer: none) {
  .p-cliente .ico-g { width: 56px; height: 56px; border-radius: 18px; }
  .p-cliente .sus-frentes::before, .p-cliente .hoja > .dos-igual:nth-child(2) > .bloque::before, .p-cliente .hoja > .bloque::before { content: ""; display: block; height: 1px; margin: 24px var(--m-lado) 7px; background: var(--linea); }
  .solo-mac { display: none !important; }
  .cab .ico-g { background: rgba(255, 255, 255, 0.16); color: #ffffff; }
  .cab-tit { flex-wrap: wrap; }
  .cab-txt { display: contents; }
  .cab-txt h1 { flex: 1 1 0; min-width: 0; }
  .cab-txt p { flex: 0 0 100%; }
  .cab-parati .cab-tit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* Ordenador: decide el dispositivo, no solo el ancho. Una ventana estrecha del Mac sigue siendo Mac. */
@media (min-width: 960px), (min-width: 700px) and (pointer: fine) {
  .solo-movil { display: none !important; }
  body { background: #ffffff; height: 100dvh; overflow: hidden; }
  .app { height: 100dvh; min-height: 0; }
  .banda { background: var(--marca); color: #ffffff; padding: 20px 32px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; flex: none; }
  .banda a { color: #ffffff; }
  .banda-n { display: flex; align-items: center; gap: 16px; }
  .banda-num { font-size: 54px; font-weight: 800; letter-spacing: -0.05em; line-height: 0.95; font-variant-numeric: tabular-nums; }
  .banda-t { display: flex; flex-direction: column; gap: 2px; }
  .banda-f { font-size: 16px; font-weight: 700; line-height: 1.2; display: inline-flex; align-items: center; gap: 6px; }
  .banda-s { font-size: 12px; font-weight: 600; opacity: 0.78; }
  .bd-ct { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
  .bd-c { background: rgba(255, 255, 255, 0.12); border-radius: var(--r-ico); padding: 10px 14px; display: flex; align-items: center; gap: 10px; }
  .bd-t { display: flex; flex-direction: column; }
  .bd-l { font-size: 11px; font-weight: 600; opacity: 0.8; }
  .bd-v { font-size: 17px; font-weight: 800; letter-spacing: -0.03em; }
  .bd-v small { font-size: 11px; font-weight: 600; opacity: 0.75; letter-spacing: inherit; }
  .bd-v .bd-fuerte { font-size: 12px; font-weight: 700; opacity: 1; }
  .bd-v .bd-motor { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; opacity: 0.85; }

  .cuerpo { flex: 1; min-height: 0; flex-direction: row; width: 100%; }
  .arbol { flex: 0 0 340px; padding: 22px 16px 28px 20px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--linea); overflow-y: auto; }
  .ar-t { font-size: 12px; font-weight: 700; color: var(--sec); letter-spacing: 0.04em; padding: 18px 12px 6px; }
  .ar-t:first-child { padding-top: 8px; }
  .ar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--r-ico); font-size: 14px; font-weight: 600; }
  .ar.activo { background: #f4f4f5; font-weight: 700; }
  .ar-nombre { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
  .ar .etiqueta { flex: none; }
  .ar .insignia { min-width: 20px; height: 20px; border-radius: 10px; font-size: 11px; padding: 0 6px; }
  .ar .ok { width: 20px; height: 20px; }
  .ar-vida { color: var(--sec); font-size: 13px; font-weight: 500; margin-top: 12px; }

  .principal { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 40px 40px 32px; gap: 22px; display: flex; flex-direction: column; position: relative; }
  .principal.con-chat { padding-bottom: 0; }
  .migas { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--sec); flex: none; }
  .migas a { position: relative; color: var(--sec); }
  .migas a::after { content: ""; position: absolute; inset: -15px 0; }
  .migas .aqui { color: var(--tinta); }

  .cab { background: none; color: var(--tinta); padding: 0; gap: 16px; }
  .cab a { color: inherit; }
  .cab-sup, .cab-frentes { display: none; }
  .cab-tit { flex-wrap: wrap; gap: 16px 24px; }
  .ico-g, .cab .ico-g { width: 56px; height: 56px; border-radius: 18px; }
  .cab-txt { flex: 1 1 320px; gap: 4px; }
  .cab-txt p { color: var(--sec); opacity: 1; max-width: 620px; }
  .cab-der { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
  .cab-der .pildora { background: var(--gris-f); color: var(--gris); }
  .cab-der .p-verde { background: var(--verde-f); color: var(--verde); }
  .cab-der .p-ambar { background: var(--ambar-f); color: var(--ambar); }
  .cab-der .p-rojo { background: var(--rojo-f); color: var(--rojo); }
  .cab-der .p-verde .punto { background: var(--verde); }
  .cab-der .p-ambar .punto { background: var(--ambar); }
  .cab-der .p-rojo .punto { background: var(--rojo); }
  .cab-der .p-gris .punto { background: var(--gris); }
  .cab .ct { display: flex; flex-wrap: wrap; }
  .cab .ct { display: none; }
  .datos { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 0; }
  .dato { flex: 1 1 200px; padding: 12px 16px; background: var(--suave); gap: 4px; }
  .dato-t { color: var(--sec); opacity: 1; }
  .dato-nada { color: var(--ter); opacity: 1; }

  .hoja { margin: 0; padding: 0; border-radius: 0; gap: 22px; flex: 1 0 auto; }
  .con-chat .hoja { padding-bottom: var(--holgura-chat); }
  .titular { padding: 0; gap: 12px 16px; flex-wrap: wrap; }
  .titular h1 { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; flex: 1 1 200px; }
  .titular .busca { flex: 2 1 360px; max-width: 640px; padding: 0 18px; }
  .titular .nuevo { padding: 0 20px 0 16px; }
  .busca-g { margin: 0; max-width: 640px; }

  .grupo { display: flex; flex-direction: column; gap: 12px; }
  .grupo + .grupo::before { display: none; }
  .grupo-t { padding: 0; }
  .grupo-n { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--tinta); text-transform: none; }
  .rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
  .rejilla .fila {
    padding: 16px; border-radius: var(--r-tarjeta); background: var(--suave); min-height: 0;
    display: grid; gap: 12px; grid-template-columns: auto 1fr auto; grid-template-areas: "ico . der" "txt txt txt"; align-items: center;
  }
  .rejilla .ico { width: 36px; height: 36px; border-radius: 12px; grid-area: ico; }
  .rejilla .ico svg { width: 17px; height: 17px; }
  .rejilla .fila-txt { grid-area: txt; gap: 3px; }
  .rejilla .fila-der { grid-area: der; gap: 8px; }
  .fila.res, .sus-frentes .fila, .bloque .fila { padding-left: 8px; padding-right: 8px; border-radius: var(--r-ico); }
  .pie { padding: 0; }

  .dos-resumen { flex-direction: row; flex-wrap: wrap; gap: 16px; }
  .resumen { margin: 0; flex: 2 1 420px; padding: 14px 18px; }
  .resumen-txt { line-height: 1.6; }
  .cifras { display: grid; flex: 1 1 320px; padding: 0; align-content: start; }
  .cifra { background: var(--suave); padding: 12px 14px; gap: 2px; }
  .cifra-v.nada { color: var(--chev); opacity: 1; }
  .cifra-e { font-size: 11px; color: var(--sec); opacity: 1; }
  .rojo { margin: 0; }
  .dos-col { flex-direction: row; flex-wrap: wrap; gap: 28px 40px; }
  .dos-col > .bloque { flex: 1 1 380px; gap: 8px; }
  .dos-col > .bloque + .bloque { margin: 0; border: 0; }
  .dos-col > .bloque + .bloque .bloque-t, .bloque-t { padding: 0; }
  .bloque-t { padding: 0; }
  .dos-igual { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
  .resumen-g { margin: 0; padding: 18px 20px; gap: 14px; background: var(--suave); border-radius: var(--r-tarjeta); }
  .resumen-c { padding: 0; background: none; border-radius: 0; gap: 14px; }
  .resumen-g h2 { padding: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--tinta); text-transform: none; }
  .sus-frentes { padding: 18px 8px; border-radius: var(--r-tarjeta); background: var(--suave); }
  .sus-frentes .grupo-t { padding: 0 12px 8px; }
  .dos-igual .bloque { padding: 18px 20px; border-radius: var(--r-tarjeta); background: var(--suave); gap: 8px; }
  .pedido { padding: 4px 0; }
  .chips { padding: 0; }
  .tarjeta { margin: 0; }
  .tarea { padding: 8px 0; }
  .tarea { padding-left: 0; padding-right: 0; }
  .reglas { margin: 12px 0 0; }
  .fuentes-casilla { margin: 0; }
  .cobro, .vacio { padding-left: 0; padding-right: 0; }
  .prosa { max-width: 860px; }
  .prosa > :not(.bloque-t) { margin-left: 0; margin-right: 0; }
  .bloque .form, .bloque .qr, .bloque .codigos, .bloque > .botones, .bloque > .peq, .bloque > .t-aviso { margin-left: 0; margin-right: 0; }
  .t-aviso { margin: 0; }
  .bloque { gap: 8px; }

  .barra-chat { position: sticky; bottom: 0; left: auto; right: auto; background: #ffffff; padding: 12px 0 18px; margin-top: auto; z-index: 5; flex: none; }
  .chat-info { font-size: 12px; flex-wrap: wrap; }
  .pestanas, .velo, .hoja-mas { display: none !important; }

  .rejilla-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; }
  .rejilla-tarjetas .vacio { grid-column: 1 / -1; }
  .rejilla-tarjetas .tarjeta { padding: 16px 18px; border-radius: var(--r-tarjeta); gap: 12px; }
  .aviso-cola { margin: 0; }
  .hilo { padding: 0; }
  .nota-final { padding: 0; text-align: left; }
  .cab-parati .cab-der { gap: 8px; }
  .ver { width: 640px; max-width: calc(100vw - 80px); margin: auto; border-radius: 24px; padding: 24px; max-height: 80dvh; }
  .reaut { width: 440px; }
  .toast { left: auto; right: 32px; bottom: 32px; width: 380px; }

  body.puerta { height: auto; min-height: 100dvh; overflow: auto; align-items: center; justify-content: center; padding: 40px; }
  .puerta-cab { width: 440px; padding: 0 4px 24px; }
  .hoja.puerta-hoja { flex: none; width: 440px; margin: 0; padding: 32px; border-radius: 24px; gap: 16px; }
  .puerta-hoja .form:first-child { margin-top: 0; }
}

@media (min-width: 700px) and (max-width: 1180px) and (pointer: fine), (min-width: 960px) and (max-width: 1180px) {
  .arbol { flex-basis: 250px; padding-right: 10px; }
  .ar .etiqueta { display: none; }
  .ar-nombre { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
  .ar .insignia, .ar .ok { flex: none; }
  .principal { padding-left: 24px; padding-right: 24px; }
  .rejilla { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .banda { padding: 14px 24px 16px; gap: 10px 24px; }
  .banda-num { font-size: 40px; }
  .bd-ct { margin-left: 0; }
  .bd-v small { display: none; }
}

@media (min-width: 1181px) and (max-width: 1399px) {
  .bd-c:nth-child(-n+2) .bd-v small, .bd-v .bd-motor { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .tarjeta { transition: opacity 0.2s ease; }
}

/* Ajustes, Motores y Chats: retoques de pantalla contra sus maquetas (cada regla va acotada a la clase de <body> de su pantalla). */
.p-ajustes .bloque-t { padding: 22px var(--m-lado) 8px; align-items: center; }
.p-ajustes .bloque-n { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; line-height: 16px; color: var(--sec); text-transform: uppercase; }
.p-ajustes .bloque-nota { line-height: 16px; }
.p-ajustes .cobro { margin: 0 var(--m-lado); padding: 13px 0; border-top: 1px solid var(--linea); }
.p-ajustes .cobro .tarea-n { font-weight: 600; }
.p-ajustes .cobro .tarea-d { line-height: normal; }
.p-ajustes .ico-g { background: var(--control); color: #27272a; }
.p-ajustes .atras, .p-seccion-chats .atras { position: relative; }
.p-ajustes .atras { min-height: 26px; }
.p-ajustes .cab-sup { min-height: 26px; }
.p-ajustes .atras::after { content: ""; position: absolute; inset: -9px -8px; }
.p-seccion-chats .atras { min-height: 34px; }
.p-seccion-chats .atras::after { content: ""; position: absolute; inset: -5px; }
.p-seccion-chats .grupo-t { padding: 14px var(--m-lado) 6px; }
.p-seccion-chats .fila-nombre { overflow-wrap: normal; }
.p-seccion-chats .fila-der { gap: 14px; }
.p-seccion-chats .chat-col { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.p-seccion-chats .chat-hora { font-size: 12px; font-weight: 600; line-height: 15px; color: var(--ter); white-space: nowrap; }
.p-seccion-chats .chat-chip { font-size: 10px; font-weight: 700; line-height: 12px; padding: 2px 6px; border-radius: 7px; color: var(--gris); background: var(--gris-f); white-space: nowrap; }
.p-seccion-chats .chat-chip.viva { color: var(--verde); background: var(--verde-f); }
.p-seccion-motores .ico-m { width: 36px; height: 36px; }
.p-seccion-motores .nota-final { color: var(--sec); text-align: left; }
.p-seccion-motores .fila-doble { display: flex; flex-direction: column; }
.p-seccion-motores .motor-activo .tarjeta { margin-top: 14px; }
.p-seccion-motores .motor-activo .t-cab, .p-seccion-motores .api-motor .t-cab { align-items: flex-start; }
.p-seccion-motores .t-etq { font-size: 11px; font-weight: 600; line-height: 14px; color: var(--sec); }
.p-seccion-motores .skills-fila { margin: 12px var(--m-lado) 0; border-top: 1px solid var(--linea); }
.p-seccion-motores .skills-fila .fila { padding: 14px 0 4px; min-height: 0; }
.p-seccion-motores .skills-fila .fila-nombre { font-size: 14px; }

@media (min-width: 960px), (min-width: 700px) and (pointer: fine) {
  .p-ajustes .bloque { gap: 0; }
  .p-ajustes .bloque-t { padding: 0 0 8px; }
  .p-ajustes .cobro { margin: 0; }
  .p-seccion-chats .grupo-t { display: none; }
  .p-seccion-chats .busca-g { min-height: 44px; }
  .p-seccion-motores .fila-doble { flex-direction: row; flex-wrap: wrap; gap: 14px; }
  .p-seccion-motores .fila-doble > .bloque { flex: 1 1 380px; padding: 16px 18px; border-radius: var(--r-tarjeta); background: var(--suave); gap: 10px; }
  .p-seccion-motores .fila-doble .tarjeta { padding: 0; border-radius: 0; background: none; }
  .p-seccion-motores .motor-activo .tarjeta { margin-top: 0; }
  .p-seccion-motores .motor-activo .t-tit { font-size: 16px; }
  .p-seccion-motores .cab-der .pildora { font-weight: 700; padding: 7px 12px; }
  .p-seccion-motores .skills-fila { margin: -12px 0 0; border-top: 0; }
  .p-seccion-motores .skills-fila .fila { padding: 10px 8px 4px; }
}

@media (max-width: 699px), (max-width: 959px) and (pointer: coarse), (max-width: 959px) and (pointer: none) {
  .p-ajustes .hoja > .bloque:first-child .bloque-t { padding-top: 14px; }
}