/* DEEC Studio · panel administrativo: compatibilidad móvil. REGLA DE AISLAMIENTO: este archivo se carga solo con (max-width:900px) y todas sus reglas viven dentro de @media (max-width:900px); no puede alterar el escritorio (lo comprueba tests/admin-mobile.test.js y backend/scripts/ui-panel-aislamiento.mjs). Lo exclusivo de escritorio va en admin-desktop.css. Se carga al final, después de todos los estilos del panel; solo corrige la adaptación a pantallas pequeñas sin tocar los componentes ni la lógica. */

/* El relleno de .main lo comparte la barra de búsqueda (.gsbar, márgenes negativos del mismo valor): no se redefine aquí.

/* ───────── Contención: ningún contenido ancho puede ensanchar la página ─────────
   Un elemento de cuadrícula o de flex no se encoge por debajo de su contenido (min-width:auto): una tabla ancha estiraba toda la página (757 px en una pantalla de 360 px). */

@media (max-width:900px){
  .main,.stack,.stack>*,.card,.cols>*,.grid2>*,.grid3>*,.top>*{min-width:0}
  .card{max-width:100%}
  .tw{max-width:100%;-webkit-overflow-scrolling:touch}
  img,svg,video{max-width:100%}
  /* La columna única de la cuadrícula del panel no puede crecer con su contenido */
  .app,.app>.main{grid-template-columns:minmax(0,1fr)}
  /* Menú lateral: cerrado no proyecta sombra sobre el borde ni recibe foco; al abrirse se ve entero */
  .sb{box-shadow:none;visibility:hidden;max-width:86vw;overflow-y:auto;overscroll-behavior:contain;transition:translate .3s cubic-bezier(.2,.8,.2,1),visibility 0s linear .3s}
  .sb.open{box-shadow:0 20px 60px -10px color-mix(in srgb,var(--shadow) 40%,transparent);visibility:visible;transition-delay:0s,0s}
  .burger{flex:none;width:44px;height:44px}
}

/* ───────── Barra superior móvil: logotipo a la izquierda; lupa y menú a la derecha (iconos lineales, sin caja) ───────── */
@media (max-width:900px){
  .gsbar{display:flex;align-items:center;gap:2px;min-height:56px;margin-bottom:14px;padding-top:4px;padding-bottom:4px;-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg2)}
  .gsbar__logo{display:block;height:var(--logo-h);width:auto;object-fit:contain;margin-right:auto;filter:var(--logo-filter)}
  .gsbar__btn,.gsbar .burger{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--fg);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .gsbar__btn svg,.gsbar .burger svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
  .gsbar__btn:active,.gsbar .burger:active{opacity:.55}
  .gsbar .burger{margin-right:-10px}
  .gsbar__btn:focus-visible,.gsbar .burger:focus-visible{outline:2px solid var(--acc);outline-offset:-6px;border-radius:10px}
  /* Buscador: el campo, los resultados y los controles existentes (#gs, #gsRes) pasan a un modal de pantalla completa; sin abrirlo no ocupan espacio */
  .gs{display:none}
  body.gs-open{overflow:hidden}
  body.gs-open .gsbar{z-index:95}
  .gs.is-modal{position:fixed;left:0;right:0;top:var(--vvt,0px);height:var(--vvh,100dvh);max-width:none;z-index:96;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);align-content:start;padding:calc(10px + env(safe-area-inset-top)) 6px 0 14px;background:var(--card);overflow:hidden}
  .gs.is-modal .gs__i{left:30px;top:calc(10px + env(safe-area-inset-top) + 24px)}
  .gs.is-modal input{grid-column:1;grid-row:1;min-height:48px;padding-right:14px;font-size:16px}
  .gs.is-modal .gs__x{grid-column:2;grid-row:1;display:inline-grid;place-items:center;width:48px;height:48px;padding:0;border:0;background:none;color:var(--fg);cursor:pointer}
  .gs.is-modal .gs__x svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
  .gs.is-modal .gs__k{display:none}
  .gs.is-modal .gs__res{position:static;grid-column:1/-1;grid-row:2;max-height:none;margin:10px -6px 0 -14px;padding:6px 10px calc(16px + env(safe-area-inset-bottom));border:0;border-radius:0;box-shadow:none;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  /* Menú lateral: un único desplazamiento vertical independiente que alcanza todas las opciones (antes la lista interna quedaba comprimida y el pie tapaba opciones) */
  .sb{height:100dvh;max-height:none;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding-bottom:calc(22px + env(safe-area-inset-bottom))}
  .sb .nav{flex:none;overflow:visible;margin-right:0;padding-right:0}
  .sb .sb__foot{margin-top:auto}
  body.sb-open{overflow:hidden}
}

@media (max-width:640px){
  /* Cabecera: el menú y el título comparten renglón; las acciones ocupan el ancho */
  .top{gap:12px;margin-bottom:18px}
  .top>div:first-child{flex:1 1 100%;align-items:flex-start}
  .top h1{font-size:30px;line-height:1.15;overflow-wrap:anywhere}
  .top p{font-size:16px;overflow-wrap:anywhere}
  .top__act{width:100%}
  .top__act .btn,.top__act .tab{flex:1 1 auto}
  /* Tarjetas: la cabecera pasa a varias líneas si no cabe */
  .card__h,.is-res .card__h{flex-wrap:wrap;gap:8px 12px;padding:12px 16px}
  .is-res .card__h h2{flex:1 1 140px}
  .card__h .btn,.card__h .bd{max-width:100%}
  /* Objetivos táctiles y formularios (16 px evita el zoom automático de iOS al enfocar un campo) */
  .btn{min-height:44px}
  .btn--sm{min-height:40px}
  .fld input,.fld select,.fld textarea,.card select,.card input[type=search],.filters select{min-height:44px;font-size:16px}
  .fld select,.filters select,.card .filters select,.card select{width:100%;max-width:100%}
  .filters{gap:10px}
  .filters .fld,.filters .fld--grow{min-width:0;flex:1 1 100%}
  .nav a{min-height:44px}
  .tab{min-height:44px}
  .tabs,.tabs--s{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;white-space:nowrap}
  .tabs>*{flex:none}
  /* Modales: hoja inferior que nunca excede la pantalla; su contenido se desplaza */
  .mdl__box{max-width:100vw;width:100%;max-height:92dvh;overflow-y:auto}
  .mdl__box img{max-width:100%;height:auto}
  /* Avisos */
  .toast{left:12px;right:12px;max-width:none}
  .kpis{gap:10px}
  .kpi{padding:14px}
  .kpi b{font-size:26px}
  /* Métricas: el icono y la cifra comparten renglón; la etiqueta y el detalle ocupan todo el ancho de la tarjeta (≈30 % menos de alto) */
  .kpis .kpi{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;align-items:center;padding:12px}
  .kpis .kpi .kpi__i{grid-column:1;grid-row:1;width:32px;height:32px;margin:0}
  .kpis .kpi b{font-size:26px}
  .kpis .kpi span{grid-column:1/-1;grid-row:2;margin-top:8px}
  .kpis .kpi small{grid-column:1/-1;grid-row:3;margin-top:2px}
  /* indicadores compactos: icono a la izquierda; a la derecha la cifra con su variación; debajo el título (una línea) y la descripción */
  .kpis .kpi{align-content:start}
  .kpis .kpi .kpi__n{grid-column:2;grid-row:1;justify-self:end;margin:0}
  .kpis .kpi .kpi__n{gap:6px}
  .kpis .kpi .kpi__d{order:-1;padding:3px 9px;font-size:12.5px;overflow:hidden;text-overflow:ellipsis}
  .kpis .kpi small{min-height:1.35em}
  .kv dd{overflow-wrap:anywhere}
  /* Fichas de datos (dt/dd): etiqueta a la izquierda y valor a la derecha en el mismo renglón (antes un renglón para la etiqueta y otro para el valor: la mitad de alto) */
  .kv{grid-template-columns:minmax(84px,32%) minmax(0,1fr);gap:0 12px;align-items:stretch}
  .kv dt{padding-top:12px;font-size:11.5px;line-height:1.35}   /* sin baseline: las celdas se estiran para que la banda mida el renglón (admin-rows.css) */
  .kv dd{margin:0}
  .kv dd:has(>:is(.pr,.bd,.tag,[class*=pill],[class*=chip]):only-child){justify-self:end}
  /* Editor de etapas del proyecto: nombre, estado, fechas y botones se reparten en renglones en vez de una fila de seis columnas */
  /* Tres renglones por etapa (antes cuatro): nombre; estado y fecha de inicio; fecha de fin y botones de orden/quitar */
  .stage{grid-template-columns:22px minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:center}
  .stage .n{grid-column:1;grid-row:1}
  .stage [data-sf=name]{grid-column:2/-1;grid-row:1}
  .stage [data-sf=status]{grid-column:2;grid-row:2}
  .stage [data-sf=start]{grid-column:3;grid-row:2}
  .stage [data-sf=end]{grid-column:2;grid-row:3}
  .stage .mv{grid-column:3;grid-row:3;justify-content:flex-end;gap:3px}
  .stage input,.stage select{min-height:44px;font-size:16px}
  /* Sin desbordes: los controles de fecha del navegador traen un ancho propio; se fuerzan al ancho de su columna y los botones de orden/borrado caben en la misma fila */
  .stage>*{min-width:0;max-width:100%}
  .stage input,.stage select{width:100%;min-width:0;box-sizing:border-box;-webkit-appearance:none;appearance:none;padding-left:10px;padding-right:10px}
  .stage input[type=date]{text-align:left;padding-right:6px}
  .stage select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/16px;padding-right:32px}
  .stage .mv{display:flex;min-width:0;flex-wrap:nowrap}
  .stage .mv .ib{flex:1 1 0;min-width:0;max-width:44px}
  .ib{min-width:40px;min-height:40px}
  .ag__dn{min-width:36px;min-height:36px}
  .tw td .lnk,.tw td>a:not(.btn){display:inline-block;padding:12px 0}
  .login__logo-a{display:inline-block;padding:11px 0}
  .range{flex-wrap:wrap}
  .range .btn{flex:1 1 100%}

  /* ───────── Tablas: cada fila pasa a tarjeta con su encabezado por campo (admin-mobile.js añade data-label) ───────── */
  .tw table.stk{display:block;width:100%}
  .tw table.stk thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tw table.stk tbody{display:block}
  /* Tablas con orden por columna (botones .sth en el encabezado): el encabezado se muestra como renglón de botones para poder seguir ordenando */
  .tw table.stk--sort thead{position:static;width:auto;height:auto;overflow:visible;clip:auto;display:block;padding:10px 16px;border-bottom:1px solid var(--line)}
  .tw table.stk--sort thead tr{display:flex;flex-wrap:wrap;gap:6px 8px;padding:0;border:0}
  .tw table.stk--sort thead th{display:block;padding:0;border:0;background:none}
  .tw table.stk--sort thead .sth{min-height:40px;padding:0 10px}
  /* Criterio de distribución de las filas (todas las tablas): la fila es una tarjeta con cuadrícula de dos columnas. Cada campo lleva su etiqueta encima; la primera celda con título (td[data-w=head])
     ocupa el renglón completo como encabezado de la tarjeta, las barras, acciones, campos y textos largos (data-w=full) también, y los datos cortos (estado, fecha, importe) se reparten de dos en dos.
     admin-mobile.js asigna data-w; «dense» rellena los huecos que dejan los campos anchos. */
  .tw table.stk tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row dense;gap:0 14px;align-items:stretch;padding:0 16px;border-bottom:0;overflow:hidden}
  /* Renglones alternados (admin-rows.css): sin línea entre campos; cada renglón de datos de la tarjeta es una banda de ancho completo y las pares llevan el fondo tenue (admin-mobile.js marca data-band) */
  .tw table.stk td{display:block;min-width:0;padding:7px 0;border:0;overflow-wrap:anywhere;white-space:normal}
  .tw table.stk td[data-band]{background:var(--row-alt);box-shadow:0 0 0 100vmax var(--row-alt);clip-path:inset(0 -100vmax)}
  .tw table.stk td[data-w=full]{grid-column:1/-1}
  .tw table.stk tr{position:relative}
  /* Barra de prioridad (rojo · naranja · azul): continua, de color sólido y POR ENCIMA del sombreado. En la tarjeta-fila el sombreado lo pintan las celdas, que cubrirían la sombra interior de la fila; por eso la barra es un elemento propio
     (tr::before, z-index sobre las celdas) y las bandas empiezan después de ella (el recorte izquierdo deja libres sus 3 px: las celdas llegan al borde de la fila). */
  .tw table.stk tbody tr.row--crit,.tw table.stk tbody tr.row--high,.tw table.stk tbody tr.row--low{box-shadow:none}
  .tw table.stk tbody tr.row--crit::before,.tw table.stk tbody tr.row--high::before,.tw table.stk tbody tr.row--low::before{content:"";position:absolute;left:0;top:0;bottom:0;z-index:2;width:3px;background:var(--bar)}
  .tw table.stk tbody tr.row--crit{--bar:var(--bad)}.tw table.stk tbody tr.row--high{--bar:var(--hi-s)}.tw table.stk tbody tr.row--low{--bar:var(--acc)}
  .tw table.stk tbody tr.row--crit td[data-band],.tw table.stk tbody tr.row--high td[data-band],.tw table.stk tbody tr.row--low td[data-band]{clip-path:inset(0 -100vmax 0 3px)}
  /* Tarjeta con cuerpo acolchado que contiene tarjetas-fila (p. ej. Usuarios y accesos): el recorte pasa al cuerpo de la tarjeta para que la banda llegue a sus bordes (ver admin-rows.css) */
  .card__b:has(table.stk):not(:has(.fbar,.xf,.cf,.filters,.fbx)){overflow:clip}
  .card__b:has(table.stk):not(:has(.fbar,.xf,.cf,.filters,.fbx)) .tw:has(table.stk),.card__b:has(table.stk):not(:has(.fbar,.xf,.cf,.filters,.fbx)) .tw table.stk tr{overflow:visible}
  .tw table.stk td[data-w=head]{grid-column:1/-1;grid-row:1;padding:16px 34px 9px 0;font-size:16px}
  .tw table.stk td[data-w=sel]{position:absolute;top:12px;right:14px}
  .tw table.stk td[data-label]::before{content:attr(data-label);display:block;margin-bottom:3px;font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .tw table.stk td[data-label]::before{white-space:normal;overflow-wrap:anywhere}
  /* Renglones: cada campo es un renglón horizontal completo con la etiqueta a la izquierda y el valor a la derecha (en pantallas estrechas un campo por renglón; desde 641 px, dos campos por renglón).
     Los estados (data-w=badge) ya llevan la etiqueta a la izquierda y la insignia a la derecha; el título (head), la casilla (sel) y las acciones (act) no llevan etiqueta. */
  .tw table.stk tr:not([data-go^="#/clientes/"]) td[data-label]:not([data-w=head]):not([data-w=act]):not([data-w=badge]){display:flow-root}
  .tw table.stk tr:not([data-go^="#/clientes/"]) td[data-label]:not([data-w=head]):not([data-w=act]):not([data-w=badge])::before{float:left;width:min(38%,132px);margin:0 12px 0 0}
  @media (max-width:640px){.tw table.stk tr:not([data-go^="#/clientes/"]) td:not([data-w=head]):not([data-w=sel]){grid-column:1/-1;margin:0 -16px;padding-left:16px;padding-right:16px}}
  @media (min-width:641px){.tw table.stk tr:not([data-go^="#/clientes/"]) td[data-label]:not([data-w=head]):not([data-w=act]):not([data-w=badge])::before{width:min(46%,120px);margin-right:10px}}
  .tw table.stk td select,.tw table.stk td input:not([type=checkbox]):not([type=radio]){width:100%;min-width:0;max-width:100%}
  .tw table.stk td[data-w=head]::before,.tw table.stk td[data-w=act]::before{display:none}
  /* Estados (data-w=badge): renglón completo con la etiqueta a la izquierda y la insignia a la derecha; el detalle (small) va debajo, también a la derecha */
  .tw table.stk td[data-w=badge]{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 10px}
  .tw table.stk td[data-w=badge]::before{flex:1 1 40%;margin:0}
  .tw table.stk td[data-w=badge] small{flex:1 0 100%;margin:0;text-align:right}
  /* Acciones de la fila: sin etiqueta, al ancho completo y con los botones repartidos */
  .tw table.stk td[data-w=act]{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}
  /* Celda Prospecto de las actividades comerciales: misma columna de etiqueta que ACTIVIDAD y DETALLE; etiqueta y nombre comparten línea base y la bandera con el negocio quedan bajo el nombre, en la columna del valor */
  .tw table.stk tr[class] td.cu__p[data-label]:not([data-w=head]):not([data-w=act]):not([data-w=badge]){display:grid;grid-template-columns:min(38%,132px) minmax(0,1fr);column-gap:12px;align-items:baseline}
  .tw table.stk tr[class] td.cu__p[data-label]:not([data-w=head]):not([data-w=act]):not([data-w=badge])::before{float:none;width:auto;margin:0;grid-column:1;grid-row:1}
  .tw table.stk td.cu__p>a{grid-column:2;grid-row:1;min-width:0;margin:-12px 0}   /* el área táctil (12 px de relleno arriba y abajo) no altera la altura del renglón */
  .tw table.stk td.cu__p>small{grid-column:2;grid-row:2;margin-top:3px}
  .tw table.stk td[data-w=act] .btn{flex:1 1 auto;justify-content:center}
  .tw table.stk td[data-w=act] .row-act{display:flex;flex:1 1 100%;flex-wrap:wrap;gap:8px;justify-content:stretch}
  /* Etiquetas y chips (nowrap en escritorio) pueden partirse en dos renglones en vez de invadir la columna vecina */
  .tw table.stk td :is([class*=pill],[class*=chip],.pr,.bd,.tag){max-width:100%;white-space:normal}
  .tw table.stk td .bar{min-width:0}
  .tw table.stk .row-act,.tw table.stk td .btn{flex-wrap:wrap}

  /* Clientes (solo la lista de 7 columnas; la tabla «Clientes que requieren atención» de los resúmenes tiene 3 y usa la fila apilada común): cada fila es una tarjeta (cliente y estado arriba; ubicación, industria, contrataciones y proyectos en cuadrícula; «Ver cliente» al pie). Solo presentación: mismos datos y misma fila clicable. */
  .card:has(tr[data-go^="#/clientes/"] > td:nth-child(7)){padding:0;border:0;background:none;box-shadow:none;overflow:visible}
  .card:has(tr[data-go^="#/clientes/"] > td:nth-child(7)) .tw{overflow:visible}
  .tw table.stk tr[data-go^="#/clientes/"]:has(>td:nth-child(7)){position:relative;display:grid;grid-template-columns:30px minmax(0,1fr) minmax(0,1fr) auto;grid-auto-flow:row;gap:0;align-items:start;margin:0 0 14px;padding:16px;overflow:visible;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:0 10px 26px -18px color-mix(in srgb,var(--shadow) 35%,transparent)}
  .tw table.stk tr[data-go^="#/clientes/"]:has(>td:nth-child(7)):last-child{border-bottom:1px solid var(--line)}
  .tw table.stk tr[data-go^="#/clientes/"]:has(>td:nth-child(7)) td{padding:0}
  .tw table.stk tr[data-go^="#/clientes/"]:has(>td:nth-child(7)) td::before{margin-bottom:4px;font-size:11px;letter-spacing:.1em}
  .tw table.stk tr[data-go^="#/clientes/"]:has(>td:nth-child(7)) td:nth-child(1){grid-column:1;grid-row:1;padding-top:3px}
  .tw table.stk tr[data-go^="#/clientes/"]:has(>td:nth-child(7)) td:nth-child(2){grid-column:2/-1;grid-row:1;padding:0 4px 8px 4px}
  .tw table.stk tr[data-go^="#/clientes/"]:has(>td:nth-child(7)) td:nth-child(2)::before,.tw table.stk tr[data-go^="#/clientes/"]:has(>td:nth-child(7)) td:nth-child(5)::before{display:none}
  .tw table.stk tr[data-go^="#/clientes/"]:has(>td:nth-child(7)) td:nth-child(2) b{display:block;font-size:17px;font-weight:600;line-height:1.3;color:var(--fg)}
  .tw table.stk tr[data-go^="#/clientes/"]:has(>td:nth-child(7)) td:nth-child(2) small{display:block;margin-top:2px;font-size:13.5px;color:var(--muted)}
  .tw table.stk tr[data-go^="#/clientes/"]:has(>td:nth-child(7)) td:nth-child(5){grid-column:2/-1;grid-row:2;padding:0 0 14px 4px;justify-self:start}
  .tw table.stk tr[data-go^="#/clientes/"]:has(>td:nth-child(7)) td:nth-child(3),.tw table.stk tr[data-go^="#/clientes/"]:has(>td:nth-child(7)) td:nth-child(4),.tw table.stk tr[data-go^="#/clientes/"]:has(>td:nth-child(7)) td:nth-child(6),.tw table.stk tr[data-go^="#/clientes/"]:has(>td:nth-child(7)) td:nth-child(7){position:relative;padding:12px 8px 12px 34px}
  .tw table.stk tr[data-go^="#/clientes/"]:has(>td:nth-child(7)) td:nth-child(3){grid-column:1/3;grid-row:3;border-top:1px solid var(--line)}
  .tw table.stk tr[data-go^="#/clientes/"]:has(>td:nth-child(7)) td:nth-child(4){grid-column:3/5;grid-row:3;border-top:1px solid var(--line);border-left:1px solid var(--line);padding-left:42px}
  .tw table.stk tr[data-go^="#/clientes/"]:has(>td:nth-child(7)) td:nth-child(6){grid-column:1/3;grid-row:4;border-top:1px solid var(--line)}
  .tw table.stk tr[data-go^="#/clientes/"]:has(>td:nth-child(7)) td:nth-child(7){grid-column:3/5;grid-row:4;border-top:1px solid var(--line);border-left:1px solid var(--line);padding-left:42px}
  .tw table.stk tr[data-go^="#/clientes/"]:has(>td:nth-child(7)) td:nth-child(3) small{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
  .tw table.stk tr[data-go^="#/clientes/"]:has(>td:nth-child(7)) td:nth-child(6),.tw table.stk tr[data-go^="#/clientes/"]:has(>td:nth-child(7)) td:nth-child(7){font-size:20px;font-weight:500;color:var(--fg)}
  .tw table.stk tr[data-go^="#/clientes/"]:has(>td:nth-child(7)) td:nth-child(3)::after,.tw table.stk tr[data-go^="#/clientes/"]:has(>td:nth-child(7)) td:nth-child(4)::after,.tw table.stk tr[data-go^="#/clientes/"]:has(>td:nth-child(7)) td:nth-child(6)::after,.tw table.stk tr[data-go^="#/clientes/"]:has(>td:nth-child(7)) td:nth-child(7)::after{content:"";position:absolute;left:4px;top:14px;width:22px;height:22px;background:center/20px 20px no-repeat}
  .tw table.stk tr[data-go^="#/clientes/"]:has(>td:nth-child(7)) td:nth-child(4)::after,.tw table.stk tr[data-go^="#/clientes/"]:has(>td:nth-child(7)) td:nth-child(7)::after{left:12px}
  .tw table.stk tr[data-go^="#/clientes/"]:has(>td:nth-child(7)) td:nth-child(3)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E")}
  .tw table.stk tr[data-go^="#/clientes/"]:has(>td:nth-child(7)) td:nth-child(4)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4h9v17M14 9h5v12M3 21h18M8 8h2M8 12h2M8 16h2'/%3E%3C/svg%3E")}
  .tw table.stk tr[data-go^="#/clientes/"]:has(>td:nth-child(7)) td:nth-child(6)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l4 4v14H7zM14 3v4h4M10 12h5M10 16h5'/%3E%3C/svg%3E")}
  .tw table.stk tr[data-go^="#/clientes/"]:has(>td:nth-child(7)) td:nth-child(7)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5A1.5 1.5 0 0 1 4.5 5H9l2 2.5h8.5A1.5 1.5 0 0 1 21 9v9.5a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5z'/%3E%3C/svg%3E")}
  .tw table.stk tr[data-go^="#/clientes/"]:has(>td:nth-child(7))::after{content:"Ver cliente  ›";grid-column:1/-1;grid-row:5;padding-top:12px;border-top:1px solid var(--line);text-align:right;font-size:15px;color:var(--acc)}

  /* «Clientes que requieren atención» (resúmenes): cliente y número de alertas en el mismo renglón; el motivo principal debajo, a todo el ancho */
  .tw table.stk tr[data-go^="#/clientes/"]:not(:has(>td:nth-child(4))){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 12px;align-items:baseline}
  .tw table.stk tr[data-go^="#/clientes/"]:not(:has(>td:nth-child(4))) td:nth-child(1){grid-column:1;padding-bottom:2px}
  .tw table.stk tr[data-go^="#/clientes/"]:not(:has(>td:nth-child(4))) td:nth-child(2){grid-column:2;grid-row:1;padding-bottom:2px;white-space:nowrap}
  .tw table.stk tr[data-go^="#/clientes/"]:not(:has(>td:nth-child(4))) td:nth-child(3){grid-column:1/-1}
  .tw table.stk tr[data-go^="#/clientes/"]:not(:has(>td:nth-child(4))) td:nth-child(-n+2)::before{display:none}
  .tw table.stk tr[data-go^="#/clientes/"]:not(:has(>td:nth-child(4))) td:nth-child(2)::before{display:inline;content:attr(data-label) ": ";margin:0;letter-spacing:.04em;text-transform:none;font-size:12.5px}
}

/* ───────── Tableta y teléfono (≤900 px) ───────── */
@media (max-width:900px){
  /* Tablas que siguen siendo tablas (641-900 px): los renglones de detalle de una celda no se parten en 5-6 líneas de 60 px; la tabla ya se desplaza dentro de su tarjeta */
  .tw td small{min-width:150px}
  /* Agenda, vista de mes: la celda mide ~55 px; queda la bandera y el país sigue en el título del botón */
  .ag__mg .ag__cn em{display:none}

  /* ───────── Acciones como enlace (el estilo vive en admin-links.css): medidas de móvil ───────── */
  #app .btn,
  .mdl .btn,
  .fbm .btn{flex:0 0 auto;min-height:44px;padding:0;font-size:15px}
  #app .btn.dpers{font-size:13px}
  /* Varias acciones en un renglón: enlaces separados por aire, alineados a la izquierda */
  .tw table.stk td[data-w=act],
  .tw table.stk td[data-w=act] .row-act,
  .pc2 .row-act,.top__act,.row-act,.mdl__f,.fbm__f{gap:2px 22px;justify-content:flex-start}
}

/* ───────── Teléfono (≤640 px): ajustes que solo hacen falta en anchos de teléfono ───────── */
@media (max-width:640px){
  .tw td small{min-width:0}
  /* Catálogo: la tarjeta de producto pasa de «imagen 16:9 arriba y datos debajo» (445 px) a miniatura a la izquierda con título, precio y estado a su lado; cifras y acciones debajo, a todo el ancho */
  .pc2{display:grid;grid-template-columns:96px minmax(0,1fr);gap:6px 12px;align-items:start;padding:12px}
  .pc2__img{grid-column:1;grid-row:1/4;aspect-ratio:1;border-radius:10px}
  .pc2__bd{left:6px;top:6px;padding:2px 8px;font-size:10.5px}
  .pc2__b{display:contents}
  .pc2__t{grid-column:2;grid-row:1}
  .pc2__p{grid-column:2;grid-row:2;font-size:24px}
  .pc2__s{grid-column:2;grid-row:3}
  .pc2__k{grid-column:1/-1;grid-row:4;gap:6px 14px;margin-top:4px}
  .pc2 .row-act{grid-column:1/-1;grid-row:5;display:flex;flex-wrap:wrap;gap:2px 22px;justify-content:flex-start}
  /* Barras del resumen comercial: admin-layout.css (se carga después de admin-crmsum.css) las dejaba en tres columnas y la etiqueta quedaba en ~57 px, partida en 3-4 renglones.
     Etiqueta y cifra comparten renglón y la barra ocupa todo el ancho debajo. */
  .is-res .cs__b li{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
  .is-res .cs__t{grid-column:1/-1;order:3}
}

/* ───────── Pantalla de carga: el nombre del producto y el avance no se pisan en anchos pequeños ───────── */
@media (max-width:480px){
  .dl__box{width:clamp(250px,80vw,400px)}
  .dl__meta{flex-wrap:wrap;gap:8px 12px;letter-spacing:.16em;font-size:10.5px;line-height:1.4}
}

/* Tablas con muchas columnas (admin-mobile.js les pone .wide y a su .tw .tw--wide): se conservan como tabla con desplazamiento horizontal; encabezados y filas se mueven juntos con la alineación de siempre.
   El indicador de desplazamiento es siempre visible (barra fina y sombras en los bordes donde queda contenido) y la columna de selección queda fija. */
@media (max-width:900px){
  .tw.tw--wide{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
  .tw--wide::-webkit-scrollbar{height:8px}
  .tw--wide::-webkit-scrollbar-thumb{border-radius:8px;background:var(--line-strong)}
  .tw--wide table.wide{width:max-content;min-width:100%}
  .tw--wide table.wide th,.tw--wide table.wide td{white-space:nowrap}
  .tw--wide table.wide th:has(.ck__in),.tw--wide table.wide td.ck{position:sticky;left:0;z-index:2;background:var(--card)}
  .tw--wide table.wide tbody tr:nth-child(even) td.ck{background:var(--bg2)}
  .tw--wide table.wide tbody tr.row--crit td.ck{background:var(--bad-l);box-shadow:inset 3px 0 0 var(--bad)}
  .tw--wide table.wide tbody tr.row--high td.ck{background:var(--hi-l);box-shadow:inset 3px 0 0 var(--hi-s)}
  .tw--wide table.wide tbody tr.row--low td.ck{box-shadow:inset 3px 0 0 var(--acc)}
}
/* «Clientes que requieren atención» (3 columnas): el cliente y las alertas comparten renglón (composición propia más arriba) y el motivo principal lleva la etiqueta a la izquierda y el valor a la derecha */
@media (max-width:900px){
  .tw table.stk tr[data-go^="#/clientes/"]:not(:has(>td:nth-child(4))) td:nth-child(3){display:flow-root}
  .tw table.stk tr[data-go^="#/clientes/"]:not(:has(>td:nth-child(4))) td:nth-child(3)::before{float:left;width:min(38%,132px);margin:0 12px 0 0}
}
@media (max-width:900px){
  @media (min-width:641px){
    /* Tablet (641–900 px): las tablas conservan su forma de tabla; alternan por fila con un solo pintor (la primera celda) y de borde a borde de la tarjeta (admin-rows.css) */
    .tw table.stk tbody tr:nth-child(even) td:first-child{background:var(--row-alt);box-shadow:0 0 0 100vmax var(--row-alt);clip-path:inset(0 -100vmax)}
    /* la barra de prioridad se dibuja en la primera celda (encima de su fondo) y el sombreado empieza después de ella */
    .tw table.stk tbody tr.row--crit>td:first-child{box-shadow:inset 3px 0 0 var(--bad)}.tw table.stk tbody tr.row--high>td:first-child{box-shadow:inset 3px 0 0 var(--hi-s)}.tw table.stk tbody tr.row--low>td:first-child{box-shadow:inset 3px 0 0 var(--acc)}
    .tw table.stk tbody tr.row--crit:nth-child(even)>td:first-child{box-shadow:inset 3px 0 0 var(--bad),0 0 0 100vmax var(--row-alt)}.tw table.stk tbody tr.row--high:nth-child(even)>td:first-child{box-shadow:inset 3px 0 0 var(--hi-s),0 0 0 100vmax var(--row-alt)}.tw table.stk tbody tr.row--low:nth-child(even)>td:first-child{box-shadow:inset 3px 0 0 var(--acc),0 0 0 100vmax var(--row-alt)}
    .card__b:has(table.stk):not(:has(.fbar,.xf,.cf,.filters,.fbx)){overflow:clip}
    .card__b:has(table.stk):not(:has(.fbar,.xf,.cf,.filters,.fbx)) .tw:has(table.stk){overflow:visible}
  }
}
@media (max-width:640px){
  /* Modales (hoja de abajo): ocupan el área visible (--mvh/--mvt los fija admin-mobile.js con visualViewport, así el teclado virtual no los tapa), con márgenes proporcionados al ancho, cabecera y pie compactos,
     área segura inferior y sin que el desplazamiento interno arrastre la página de detrás. Los controles miden 16 px para que iOS no amplíe la página al enfocarlos. */
  #modal .mdl{inset:auto;left:0;right:0;top:var(--mvt,0px);height:var(--mvh,100dvh)}
  .mdl__box{max-height:calc(var(--mvh,100dvh) * .94);overscroll-behavior:contain}
  .mdl__h{padding:14px 16px}
  .mdl__h h2{min-width:0;font-size:17px;line-height:1.3;overflow-wrap:anywhere}
  .mdl__b{padding:16px;gap:16px}
  .mdl__f{padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .mdl .cp__b,.mdl .cp__q input{font-size:16px}
}
@media (max-width:900px){
  @media (min-width:641px){
    /* Tableta (641–900 px): misma estructura que en escritorio (icono · título · cifra con variación · descripción) */
    .kpis .kpi{display:flex;flex-direction:column}
    .kpis .kpi small{min-height:1.35em}
  }
}
@media (max-width:640px){
  /* Indicadores compactos (referencia móvil): cuadrícula de dos columnas; arriba el icono y, a la derecha, la cifra con su variación; debajo el título y la descripción, con la flecha de navegación centrada a su derecha.
     Solo móvil: escritorio y tableta conservan su estructura. */
  .kpis .kpi{grid-template-columns:auto minmax(0,1fr) auto;column-gap:8px;padding:14px 12px}
  .kpis .kpi .kpi__n{grid-column:2/4}
  .kpis .kpi>span{grid-column:1/3;margin-top:10px;font-size:11.5px;letter-spacing:.03em}   /* «VIDEOLLAMADAS» cabe entera en 360 px junto a la flecha */
  .kpis .kpi small{grid-column:1/3;margin-top:3px;padding-right:0}
  .kpis .kpi .kpi__go{position:static;grid-column:3;grid-row:2/4;align-self:center;justify-self:end;width:18px;height:18px}
  .kpis .kpi--link:hover .kpi__go,.kpis .kpi--link:focus-visible .kpi__go{transform:translateX(2px)}
}


/* ───────── Dos columnas visuales en móvil (≤640 px): izquierda, lo descriptivo (títulos, nombres, identificadores); derecha, estados, indicadores, cifras y fechas, en el mismo renglón.
   admin-mobile.js marca data-two en la fila y data-side=l|r en cada celda; las filas con acciones o campos conservan la tarjeta de siempre. Solo presentación: escritorio y tableta no cambian. ───────── */
@media (max-width:640px){
  .tw table.stk tr[data-two][data-two][data-two][data-stk]:not(:has(>td:nth-child(7))){grid-template-columns:minmax(0,1fr) fit-content(54%);grid-auto-flow:row dense;gap:4px 14px;align-items:start;padding:12px 16px}
  .tw table.stk tr[data-two][data-two][data-two][data-stk]:not(:has(>td:nth-child(7))) td[data-side]:not([data-w=sel]):not([data-w=act]):not([data-x=a]):not([data-x=b]){display:block;grid-column:auto;min-width:0;margin:0;padding:0}
  .tw table.stk tr[data-two][data-two][data-two][data-stk]:not(:has(>td:nth-child(7))) td[data-side]:not([data-w=sel]):not([data-w=act]):not([data-x=a]):not([data-x=b])[data-side=l]{grid-column:1;text-align:start}
  .tw table.stk tr[data-two][data-two][data-two][data-stk]:not(:has(>td:nth-child(7))) td[data-side]:not([data-w=sel]):not([data-w=act]):not([data-x=a]):not([data-x=b])[data-side=r]{grid-column:2;text-align:end;justify-self:end}
  .tw table.stk tr[data-two][data-two][data-two][data-stk]:not(:has(>td:nth-child(7))) td[data-side]:not([data-w=sel]):not([data-w=act]):not([data-x=a]):not([data-x=b])[data-w=head]{font-size:15.5px;font-weight:600}
  .tw table.stk tr[data-two][data-two][data-two][data-stk]:not(:has(>td:nth-child(7))) td[data-side]:not([data-w=sel]):not([data-w=act]):not([data-x=a]):not([data-x=b])::before{display:none}
  .tw table.stk tr[data-two][data-two][data-two][data-stk]:not(:has(>td:nth-child(7))) td[data-side]:not([data-w=sel]):not([data-w=act]):not([data-x=a]):not([data-x=b])[data-lab]::before{display:inline;float:none;width:auto;margin:0;content:attr(data-label) ": ";font-size:12px;letter-spacing:0;text-transform:none;color:var(--muted)}
  .tw table.stk tr[data-two][data-two][data-two][data-stk]:not(:has(>td:nth-child(7))) td[data-side]:not([data-w=sel]):not([data-w=act]):not([data-x=a]):not([data-x=b])[data-side=r]:has(.bar){display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:110px}
  .tw table.stk tr[data-two][data-two][data-two][data-stk]:not(:has(>td:nth-child(7))) td[data-side]:not([data-w=sel]):not([data-w=act]):not([data-x=a]):not([data-x=b])[data-side=r]:has(.bar) .bar{flex:1 1 64px;min-width:64px}
  .tw table.stk tr[data-two][data-two][data-two][data-stk]:not(:has(>td:nth-child(7))) td[data-side]:not([data-w=sel]):not([data-w=act]):not([data-x=a]):not([data-x=b])[data-side=l] small{display:block;margin-top:1px}
  .tw table.stk tr[data-two][data-two][data-two][data-stk]:not(:has(>td:nth-child(7))) td[data-side]:not([data-w=sel]):not([data-w=act]):not([data-x=a]):not([data-x=b])[data-side=r] small{display:block;margin-top:1px;text-align:end}
  .tw table.stk tbody tr[data-two]:nth-child(even){background:var(--row-alt)}
  /* Actividades urgentes: icono y título a la izquierda, estado a la derecha en el mismo renglón; la acción debajo del título */
  .pl>.pi{grid-template-columns:auto minmax(0,1fr) auto;gap:6px 12px;align-items:start}
  .pl>.pi .pr{grid-column:3;grid-row:1;justify-self:end;text-align:end}
  .pl>.pi .pi__t{grid-column:2;grid-row:1}
  .pl>.pi .btn{grid-column:2/-1;grid-row:2;justify-self:start}
}
@media (max-width:640px){
  .tw table.stk tr[data-two][data-two][data-two][data-stk]:not(:has(>td:nth-child(7))) td[data-side][data-w=full]:not([data-w=sel]):not([data-w=act]):not([data-x=a]):not([data-x=b]){grid-column:1/-1;text-align:start;justify-self:stretch}
}
@media (max-width:640px){
  /* Actividades urgentes: título e insignia comparten renglón; el detalle ocupa el ancho completo debajo y la acción al final */
  .pl>.pi .pi__t{display:contents}
  .pl>.pi .pi__t b{grid-column:2;grid-row:1;align-self:center}
  .pl>.pi .pi__t small{grid-column:2/-1;grid-row:2;margin:0}
  .pl>.pi .pi__i{grid-row:1}
  .pl>.pi .btn{grid-row:3}
}
@media (max-width:640px){
  /* Barras del resumen comercial en dos columnas: a la izquierda la etiqueta y su barra, a la derecha la cifra y el porcentaje, en el mismo renglón */
  .is-res .cs__b li{grid-template-columns:minmax(0,1fr) auto;column-gap:14px;row-gap:5px;align-items:center}
  .is-res .cs__b .cs__l{grid-column:1;grid-row:1}
  .is-res .cs__b .cs__t{grid-column:1;grid-row:2;order:0}
  .is-res .cs__b .cs__n{grid-column:2;grid-row:1/span 2;justify-self:end;text-align:end}
}
@media (max-width:640px){
  .tw table.stk tr[data-two][data-two][data-two][data-stk]:not(:has(>td:nth-child(7))) td[data-side=r][data-lab]:not([data-w=sel]):not([data-w=act]):not([data-x=a]):not([data-x=b]){text-wrap:balance}
}
@media (max-width:640px){
  /* Columna derecha: la fecha o el porcentaje va en el mismo renglón que su insignia, a su izquierda; la insignia sigue al borde final */
  .tw table.stk tr[data-two][data-two][data-two][data-stk]:not(:has(>td:nth-child(7))) td[data-side]:not([data-w=sel]):not([data-w=act]):not([data-x=a]):not([data-x=b])[data-side=r]:has(.bd,.pr):has(small){display:flex;align-items:center;justify-content:flex-end;gap:2px 10px;justify-self:end}
  .tw table.stk tr[data-two][data-two][data-two][data-stk]:not(:has(>td:nth-child(7))) td[data-side]:not([data-w=sel]):not([data-w=act]):not([data-x=a]):not([data-x=b])[data-side=r]:has(.bd,.pr) small{order:-1;display:inline;margin:0;text-align:end;white-space:nowrap}
  /* Contrataciones recientes: una sola fecha por registro, en la columna derecha junto a su insignia (no bajo el identificador) */
  .card--c4 .ord-d{display:inline}
  .card--c4 .tw table.stk tr[data-two][data-two][data-two][data-stk]:not(:has(>td:nth-child(7))) td[data-side]:not([data-w=sel]):not([data-w=act]):not([data-x=a]):not([data-x=b])[data-side=l] small{display:none}
}
@media (max-width:640px){
  .tw table.stk tr[data-two][data-two][data-two][data-stk]:not(:has(>td:nth-child(7))) td[data-side=r][data-w=badge]:has(small):not([data-w=sel]):not([data-w=act]):not([data-x=a]):not([data-x=b]){flex-wrap:nowrap}
  .tw table.stk tr[data-two][data-two][data-two][data-stk]:not(:has(>td:nth-child(7))) td[data-side=r][data-w=badge]:has(.bd,.pr) small:not([data-x=a]):not([data-x=b]):not([data-x=c]){flex:0 0 auto}
}