/* =====================================================================
   Móvil. Va la última: aquí se rematan los tamaños de pantalla pequeña.
   Reglas de la casa:
     · Nada se sale por los lados: la página no se mueve en horizontal.
     · El acceso cabe en una pantalla (en los móviles más bajos, como mucho
       se desliza un poco).
     · Sin rebote del navegador al llegar arriba o abajo.
   ===================================================================== */
html,body{overflow-x:clip;max-width:100%}
html{overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overscroll-behavior:none}
img,video{max-width:100%}

/* ---------------------------------------------------------------- acceso */
@media (max-width:760px){
  .acceso{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;grid-template-columns:none;overflow:hidden}
  .acc-foto{flex:none;min-height:clamp(150px,27dvh,250px)!important;justify-content:space-between;gap:14px!important;
    padding:calc(18px + env(safe-area-inset-top)) 20px 20px!important;background-position:80% 42%!important}
  .acc-foto:before{background:linear-gradient(180deg,rgba(0,22,46,.55) 0%,rgba(0,22,46,.72) 100%),linear-gradient(90deg,rgba(0,22,46,.55),rgba(0,22,46,.1))!important}
  .acc-marcas{gap:11px!important;flex-wrap:nowrap;min-width:0}
  .acc-marcas .acc-logo{width:min(128px,36vw)!important;flex:none}
  .acc-sep{height:20px!important;gap:4px!important;flex:none}
  .acc-astra-blanco{flex:none;min-width:0}
  .acc-astra-blanco img{height:20px!important;width:auto;max-width:28vw}
  .acc-claim h2{font-size:clamp(23px,6.6vw,27px)!important;line-height:1.08!important;margin:0!important}
  .acc-claim h2 br{display:none}
  .acc-claim p,.acc-chips,.acc-dominio{display:none!important}

  .acc-lado{flex:1;min-height:0;justify-content:center;padding:14px 14px calc(8px + env(safe-area-inset-bottom))!important}
  .acc-card{margin:auto 0!important;padding:20px 18px 18px!important;border-radius:24px!important;transform:none!important}
  .acc-astra{margin:0 0 12px!important;font-size:11.5px!important;padding:3px 10px 3px 3px!important}
  .acc-astra span{width:20px!important;height:20px!important;border-radius:7px!important}
  .acc-astra img{width:13px!important}
  .acceso .acc-card .logo{padding:0 0 14px!important;gap:12px!important}
  .acc-card .logo .sym{width:44px!important;height:44px!important;border-radius:13px!important}
  .acc-card .logo .sym img{width:27px!important}
  .acc-card .logo .w{font-size:19px!important}
  .acc-card .logo small{font-size:12px!important}
  .acc-card h1{font-size:28px!important;margin:0 0 4px!important}
  .acc-card>p{font-size:14px!important;margin:0 0 14px!important;line-height:1.4!important}
  :is(#clerk-signin,#clerk-components) .ck-social{height:46px!important;font-size:15px!important}
  :is(#clerk-signin,#clerk-components) .ck-divisor-fila{margin:10px 0 10px!important}
  :is(#clerk-signin,#clerk-components) .ck-label{margin:0 0 6px!important}
  :is(#clerk-signin,#clerk-components) .ck-campo{height:46px!important;margin-bottom:12px!important;font-size:16px!important}
  :is(#clerk-signin,#clerk-components) .ck-boton{height:48px!important}
  :is(#clerk-signin,#clerk-components) .ck-otp{height:48px!important}
  .acc-pie{gap:4px 14px!important;padding-top:10px!important;font-size:11.5px!important;margin-top:0!important}
  .acc-pie .acc-firma img{height:12px!important}
  /* El humo de la tarjeta sigue al dedo: aquí no tiene sentido. */
  .acc-card .humo{opacity:.45!important}
}
/* Móviles bajos (SE y parecidos): fuera la frase de debajo del título. */
@media (max-width:760px) and (max-height:700px){
  .acc-card>p{display:none!important}
  .acc-foto{padding-bottom:16px!important;gap:10px!important}
  .acc-claim h2{font-size:22px!important}
  .acc-card{padding:16px 16px 14px!important}
  .acc-astra{margin-bottom:8px!important}
  .acceso .acc-card .logo{padding-bottom:10px!important}
  .acc-card h1{font-size:25px!important;margin-bottom:10px!important}
}

/* ================================================================ dentro del panel */
.sb-cerrar,.kb-fases,.wa-modo-c{display:none}
.grid>*{min-width:0}
.card{min-width:0}

@media (max-width:860px){
  /* Menú: hoja opaca a pantalla completa, con su botón de cerrar y la lista que se desplaza sola. */
  .sb.abierta{inset:8px!important;padding:16px 12px calc(12px + env(safe-area-inset-bottom))!important;
    background:var(--vidrio-reflejo),color-mix(in oklab,var(--fondo) 94%,#fff)!important;box-shadow:var(--sombra-flota)!important}
  html[data-estilo="noche"] .sb.abierta{background:var(--vidrio-reflejo),#0d1b2e!important}
  .sb.abierta .nav{min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .sb.abierta .sb-cerrar{display:grid;place-items:center;position:absolute;top:16px;right:14px;width:38px;height:38px;border-radius:50%;
    border:1px solid var(--vidrio-borde);background:var(--vidrio-fuerte);color:var(--text-dark);z-index:2}
  .sb.abierta .nav a{padding:12px 12px;font-size:15.5px}
  .app{padding:8px 8px calc(8px + env(safe-area-inset-bottom))!important}
  .tb{top:8px;padding:0 8px 0 10px;height:56px;gap:8px}
  .search{display:flex!important;flex:1;min-width:0;height:38px;padding:0 14px}
  .search input{min-width:0}
  .me{gap:8px}
  .vh{margin:2px 2px 12px}
  .vh h1{font-size:21px}
  .vh p{font-size:13.5px}

  /* Expedientes: el tablero sin deslizar de lado. */
  .kb-fases{display:flex;gap:6px;overflow:visible;flex-wrap:wrap;margin:0 0 10px}
  .kb-fases .chip{padding:7px 11px;font-size:12.5px}
  .kb-fases .chip b{font-weight:700;margin-left:3px;color:var(--text-muted)}
  .kb-fases .chip.on b{color:inherit}
  .kb{display:block!important;overflow:visible!important}
  .kb .col{display:none;width:auto!important;min-height:0!important;margin:0}
  .kb .col.sel{display:block}
  .kb .col h4{display:none}
  .filters{flex-wrap:wrap}

  /* Tablas como fichas. */
  table.t,table.t tbody,table.t tr,table.t td{display:block;width:100%}
  table.t thead{display:none}
  table.t tr{padding:12px 14px;border-bottom:1px solid var(--divider)}
  table.t td{border:0!important;padding:3px 0!important;display:flex;justify-content:space-between;align-items:baseline;gap:12px;text-align:right;font-size:13.5px}
  table.t td:before{content:attr(data-label);color:var(--text-muted);font-size:12.5px;font-weight:600;text-align:left;flex:none}
  table.t td:first-child{font-size:15px;padding-bottom:6px!important}
  table.t td:first-child:before{display:none}
  table.t td>*{max-width:70%}
  .card:has(> table.t),.card:has(table.t){overflow:visible!important}

  /* Chat: el nombre del cliente cabe. */
  .wa,.co{height:calc(100dvh - 56px - 24px)!important}
  .wa-cab{gap:9px;padding:0 10px}
  .wa-modo-l{display:none}
  .wa-modo-c{display:inline;font-size:12px}
  .wa-modo{gap:6px}

  /* Ficha (cajón inferior): que respete la barra del sistema. */
  .dr{padding-bottom:env(safe-area-inset-bottom)}
}

@media (max-width:560px){
  /* Cifras de 2 en 2, más compactas: menos desplazamiento. */
  .g4{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .kpi{padding:12px 12px 11px!important}
  .kpi small{font-size:12px!important;line-height:1.25;display:block;padding-right:30px}
  .kpi b{font-size:24px!important;margin:6px 0 2px!important;letter-spacing:-.02em}
  .kpi .d,.kpi .mx-d{font-size:11px!important;line-height:1.25}
  .kpi .mx-d i{display:none}
  .kpi>.app-ico{position:absolute!important;top:10px;right:10px;--s:24px!important;width:24px!important;height:24px!important;flex-basis:24px!important}
  .kpi>.app-ico svg{width:14px;height:14px}
  .mx-kpi b{font-size:24px!important}
  .mx-obj{grid-column:1/-1}
  .grid{gap:8px}
  .ini-banner{min-height:118px;padding:18px 16px;margin-bottom:10px}
  .ini-banner h1{font-size:24px!important}
  .ini-banner p{font-size:13px}
  .ini-banner .fila{position:static;margin-top:10px}
  .card{padding:14px 14px}
  .ap-opciones{grid-template-columns:1fr 1fr}
  .ap-colores{gap:8px}
  .ap-color{width:38px;height:38px}
  .ap-barra{bottom:8px;padding:8px 10px}
  .ap-barra .estado{font-size:12px}
  #v-metricas .vh .fila{width:100%}
  #v-metricas .ap-seg{width:100%;justify-content:space-between}
  #v-metricas .ap-seg button{padding:0 9px;font-size:12.5px;height:32px}
  .mx-evol{min-height:210px}
  .pie{font-size:12px;padding-bottom:calc(6px + env(safe-area-inset-bottom))}
}
@media (max-width:860px){
  .sb.abierta .logo{padding:2px 50px 10px 6px}
  .sb.abierta .nav a{padding:10px 12px;font-size:15px;margin-bottom:1px}
  .sb.abierta .nav .grp{padding:10px 12px 4px}
  .sb.abierta .sbfoot{flex-direction:row;align-items:center;justify-content:space-between;padding-top:10px}
  .sb.abierta .sbfoot .btn{margin-top:0!important;height:38px}
}

@media (max-width:560px){
  .ini-banner.b-balanza{min-height:150px}
  .ini-banner.b-balanza:after{right:-12%;opacity:.85;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 35%,#000 70%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 35%,#000 70%)}
}
@media (max-width:760px){.acc-ver-demo{margin-top:10px;font-size:12.5px}}
@media (max-width:560px){
  .aviso-version{left:50%;max-width:calc(100vw - 20px);height:36px;gap:8px;padding:0 4px 0 12px;font-size:12.5px}
  .aviso-version small{display:none}
  .aviso-version .btn{height:28px;padding:0 10px;font-size:12px}
  .aviso-version .x{width:24px;height:24px;font-size:16px}
}

/* ================================================================ barra de abajo (móvil)
   Fija siempre: no se esconde al desplazar. El contenido pasa por debajo. */
html{-webkit-tap-highlight-color:transparent}
*{-webkit-tap-highlight-color:transparent}
button,a,[role="button"],input,select,textarea{-webkit-tap-highlight-color:transparent}
.barra{display:none}
@media (max-width:860px){
  :root{--barra-alto:64px}
  .barra{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;z-index:25;left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));
    height:var(--barra-alto);padding:5px;border-radius:24px;border:1px solid var(--vidrio-borde);
    background:color-mix(in oklab,var(--fondo) 96%,#fff);box-shadow:0 14px 34px -14px rgba(0,28,57,.45);
    backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%)}
  html[data-estilo="noche"] .barra{background:rgba(13,27,46,.97)}
  .barra button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;
    border:0;border-radius:18px;background:transparent;color:var(--text-muted);font:600 11px/1 var(--font-ui);padding:0;cursor:pointer;outline:0;
    transition:background .2s,color .2s;user-select:none;-webkit-user-select:none;touch-action:manipulation}
  .barra button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .barra button .ico,.barra button .app-ico{flex:none}
  .barra button .app-ico{--s:28px;border-radius:9px;transition:transform .2s}
  .barra button.on{background:color-mix(in oklab,var(--marca) 11%,transparent);color:var(--marca)}
  .barra button.on .app-ico{transform:translateY(-1px) scale(1.06)}
  html[data-estilo="noche"] .barra button.on{background:rgba(227,170,57,.16);color:#e3aa39}
  .barra button:focus-visible{box-shadow:0 0 0 2px var(--acento,#e3aa39)}
  .barra button:active{transform:scale(.96)}
  .barra b{position:absolute;top:5px;left:calc(50% + 6px);min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#d64545;color:#fff;
    font:700 10px/17px var(--font-ui);text-align:center;box-shadow:0 0 0 2px var(--fondo)}
  .barra b{top:2px;left:calc(50% + 8px)}
  /* Sitio para la barra: nada queda tapado. */
  .app{padding-bottom:calc(var(--barra-alto) + 22px + env(safe-area-inset-bottom))!important}
  .menu-movil{display:none!important}
  .wa,.co{height:calc(100dvh - 56px - 24px - var(--barra-alto) - 22px - env(safe-area-inset-bottom))!important}
  .toast{bottom:calc(var(--barra-alto) + 24px + env(safe-area-inset-bottom))}
  .aviso-version{z-index:120}
  /* El menú completo («Más») y la ficha van por encima de la barra. */
  .sb.abierta{z-index:60;bottom:calc(var(--barra-alto) + 16px + env(safe-area-inset-bottom))!important}
  .ap-barra{bottom:calc(var(--barra-alto) + 18px + env(safe-area-inset-bottom))!important}
}
@media (max-width:560px){
  .seg-fila:has([data-resp]){flex-direction:column;align-items:stretch;gap:8px}
  .seg-op:has([data-resp]){justify-content:flex-start}
  .seg-op:has([data-resp]) .btn{flex:1 1 calc(50% - 6px)}
  .seg-op .btn{white-space:nowrap}
  .pres{flex-direction:column}
  .pres img,.pres-sin{width:min(240px,100%);height:auto;aspect-ratio:1}
}

/* ================================================================ repaso móvil (30/10/2026) */
.sw{flex:none}
.sw:not(.off){background:var(--ok)}
@media (max-width:860px){
  /* Ficha: altura fija (no salta al cambiar de pestaña) y pestañas en una sola línea que se desliza. */
  .dr{top:6vh!important;top:6dvh!important;max-height:none!important}
  .dr .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-4px;margin-right:-4px;padding:0 4px}
  .dr .tabs::-webkit-scrollbar{display:none}
  .dr .tabs button{flex:none;white-space:nowrap}
  /* Avisos: hoja a lo ancho, por encima de la barra de abajo. */
  .av-panel{top:72px!important;left:8px!important;right:8px!important;width:auto!important;
    max-height:calc(100dvh - 72px - var(--barra-alto) - 30px - env(safe-area-inset-bottom))!important;z-index:61}
  /* Selectores de periodo: una sola fila que se desliza, sin saltos de línea. */
  .ap-seg{flex-wrap:nowrap!important;max-width:100%;overflow-x:auto;scrollbar-width:none}
  .ap-seg::-webkit-scrollbar{display:none}
  .ap-seg button{flex:none;white-space:nowrap}
  /* Mi cuenta: la barra de «volver a la marca del despacho» al final, sin tapar nada. */
  .ap-barra{position:static!important;border-radius:18px;flex-wrap:wrap;justify-content:space-between}
  /* Mensajes emergentes: anchos y legibles. */
  .toast{left:12px!important;right:12px;transform:translateY(10px)!important;border-radius:16px;white-space:normal;line-height:1.35;justify-content:flex-start}
  .toast.on{transform:none!important}
}
@media (max-width:560px){
  /* Inicio: en «Necesita a una persona» los botones van debajo del texto. */
  .aviso-l:has(>.fila){flex-wrap:wrap}
  .aviso-l:has(>.fila) .tx{min-width:calc(100% - 50px)}
  .aviso-l>.fila{width:100%;justify-content:flex-end;gap:8px}
  /* Expedientes: la temperatura al lado del nombre. */
  .kc b{display:inline}
  /* WhatsApp: las cifras del día en rejilla, sin cortarse por el lado. */
  .wa-kpis{display:grid!important;grid-template-columns:repeat(3,1fr);overflow:visible}
  .wa-kpis span{padding:7px 10px}
  /* Cifras sueltas (número impar de tarjetas): la última ocupa la fila entera. */
  .g4>.kpi:last-child:nth-child(odd),.ag-kpis>.ag-k:last-child:nth-child(odd),.kpi:nth-child(odd):has(+ .mx-obj){grid-column:1/-1}
  /* Buscadores a lo ancho. */
  #ar-buscar{max-width:none!important;width:100%}
  /* Tablas pequeñas de Métricas: el nombre a la izquierda, junto a su color. */
  table.mx-mini td:first-child{justify-content:flex-start;text-align:left;gap:8px}
  /* Ajustes: cifras sin partir. */
  .set .row>b{white-space:nowrap}
  .pie-sep{display:none}
  .pie{flex-direction:column;gap:2px}
}