/* =====================================================================
   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,svg,video,canvas{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{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}
}