/* KAIA · reglas responsivas y de impresión.
   Vivían en dealer.css, que solo cargaban algunas páginas: por eso el home y el
   selector de marca no tenían nada de móvil. Va en todas las páginas, siempre última. */

@media (max-width:820px){
  /* barra superior: el logo se queda, la nav pasa abajo */
  .topbar{flex-wrap:wrap;row-gap:12px;padding-block:14px}
  .topbar .mark img{width:82px}
  .nav{order:3;width:100%;gap:18px;font-size:11.5px;overflow-x:auto;
       -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .sesion{margin-left:auto}

  .page{padding-block:26px}
  .dhead{gap:14px}
  .dhead-r{width:100%}
  .dhead-r .sel{flex:1}

  /* formulario de nueva evaluación: una fila por campo */
  .nf{flex-direction:column;align-items:stretch;gap:12px}
  .nf label{width:100%}
  .nf select,.nf input{width:100%;min-width:0;min-height:46px;font-size:16px}
  .nf .btn{width:100%}
  .btn{min-height:48px}

  /* barra de progreso pegada arriba, sin tapar contenido */
  .runbar{top:0;flex-direction:column;align-items:stretch;gap:10px;padding:13px 16px;margin:18px 0 14px}
  .prog{min-width:0}

  /* La pregunta y sus botones: lo que más se toca. Estas reglas existían desde hace
     etapas apuntando a .ck y .nb, que se renombraron a .hy-ck y .hy-nb y dejaron de
     coincidir: el auditor venía tocando botones de 38 px, y el campo de comentario en
     13 px hacía que iOS le acercara la pantalla en cada observación. Son los tres
     botones que se tocan 75 veces por visita. */
  .hy-ck{padding:15px 16px}
  .hy-ck .q{font-size:15.5px}
  .hy-ck .n{font-size:12.5px}
  .hy-ck .a{gap:9px}
  .hy-nb{flex:1;min-width:96px;min-height:46px;font-size:13.5px;font-weight:500}
  .hy-ck .obs{width:100%;flex-basis:100%;min-height:46px;font-size:16px}
  .ck-alt .ck-chip{min-height:46px;font-size:14px}

  /* Cualquier campo que se toque desde el celular: 46 px de alto y letra de 16. Por
     debajo de 16 px iOS acerca la pantalla al enfocar el campo, y salir del zoom
     cuesta dos gestos mas en cada uno. Las reglas de arriba arreglaban el checklist y
     el plan, uno por uno; esto cubre el resto del portal —el selector de sede del
     buzon, el cierre de visita, los formularios de configuracion—, que es donde un bot
     de prueba encontro controles incomodos con el pulgar. */
  .hy-form input:not([type=checkbox]):not([type=radio]),
  .hy-form select,.hy-form textarea,
  .hy-cajon-b input:not([type=checkbox]):not([type=radio]),
  .hy-cajon-b select,.hy-cajon-b textarea,
  #bz-sede{min-height:46px;font-size:16px;width:100%;box-sizing:border-box}
  .hy-check input[type=checkbox]{width:22px;height:22px}

  /* plan de acción */
  .pcard{padding:16px}
  .pacc{font-size:15px}
  .pmeta{gap:14px}
  .pfoot{gap:9px}
  .pfoot .sel{flex:1;min-height:44px;font-size:15px}
  .ev{margin-left:0;width:100%;justify-content:center;min-height:44px}
  .chip{min-height:38px;padding-inline:15px}

  /* comparaciones: las etiquetas se achican para dejarle ancho a la barra */
  .evo{padding:18px 16px}
  .evo-row{grid-template-columns:88px 1fr 74px;gap:10px}
  .evo-n{font-size:11.5px}
  .evo-d{font-size:11.5px}
  .cat{grid-template-columns:78px 1fr 38px;gap:8px}
  .cat-n{font-size:11px}

  /* mapa y panel */
  .mapcard{padding:14px 12px 6px}
  .peru{max-height:none}
  .side{position:static}
  .citylist{max-height:none}
  .crow{padding:11px 12px;min-height:44px}
  .drow{min-height:44px}

  .kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:9px}
  .kpi{padding:14px 15px}
  .kpi.big{grid-column:span 2}
  .k-v{font-size:28px}

  .calidad,.nec,.hallazgos,.nuevo,.panel{padding:18px 16px}
  .cal-i{grid-template-columns:1fr;gap:8px}
  .cal-n{padding-top:0}
  .sect2{margin-top:34px;font-size:17px}
  h1{font-size:clamp(26px,7vw,34px)}
}

@media (max-width:420px){
  .wrap{padding-inline:16px}
  .hy-nb{min-width:0}
  .evo-row{grid-template-columns:74px 1fr 64px}
  .kpis{grid-template-columns:1fr 1fr}
  .kpi.big{grid-column:span 2}
}

@media (hover:none){
  .pillar:hover,.brand:hover,.pcard:hover{transform:none;box-shadow:none}
  .hy-nb:hover{border-color:var(--line);color:var(--ink-2)}
  .hy-nb.on:hover{border-color:var(--ink);color:#fff}
}

@media (max-width:820px){.pr-cols{grid-template-columns:1fr;gap:18px}.proc{padding:18px 16px}}

@media print{
  @page{margin:14mm}
  .topbar,.footer,.inf-acc,.bg,.sesion{display:none!important}
  body{background:#fff;font-size:11pt}
  .inf{max-width:none;padding:0}
  .hoja{border:0;border-radius:0;padding:0;background:#fff}
  .i-p,.i-s{break-inside:avoid}
  .i-h{border-bottom-color:#000}
}

@media (max-width:820px){
  .hoja{padding:24px 18px}
  .inf{padding-inline:16px;max-width:100%}
  .i-h h1{font-size:22px}
}

@media (max-width:820px){.slope{min-width:560px}}


/* — de dashboard.css — */

@media (max-width:1040px){.dgrid{grid-template-columns:1fr}}

@media (max-width:640px){
  .v-in{border-radius:14px;gap:12px;padding:14px 18px}
}

@media (prefers-reduced-motion:reduce){
  .kpis .kpi,.mapcard,.side,.evo,.proc,.calidad,
  .slope .sl line,.slope .sl circle,.slope text{animation:none}
}

@media (max-width:1040px){.kpis.seis{grid-template-columns:repeat(3,minmax(0,1fr))}}

@media (max-width:640px){
  .kpis.dos{grid-template-columns:1fr}
  .kpis.seis{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:640px){.kpis.dos .kpi.big{grid-column:1 / -1}}

@media (prefers-reduced-motion:reduce){.peru .dep.con.critico{animation:none}}

@media (max-width:560px){.acceso{margin:40px auto;padding:30px 22px}}

/* Mejoras locales: pendientes legibles también con una mano. */
.hy-hoy{margin-bottom:20px}.hy-hoy-chips{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.hy-hoy-chips [aria-pressed=true]{background:var(--ink,#242b30);color:white}
.hy-hoy-lista{list-style:none;margin:0;padding:0;max-height:520px;overflow:auto}
.hy-hoy-lista li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line,#ddd)}
.hy-hoy-lista h3{font-size:16px;margin:8px 0 4px}.hy-hoy-lista p{font-size:13px;margin:0}.hy-hoy-lista .hy-btn{flex-shrink:0}
body.hy-tv #hy-hoy{display:none}
@media(max-width:600px){.hy-hoy-lista li{align-items:stretch;flex-direction:column}.hy-hoy-chips button{min-height:44px}.hy-runbar{position:relative}.hy-ck .obs{font-size:16px!important;min-height:44px}.hy-estado-guardado{white-space:normal}.ck-barra{flex-wrap:wrap}.ck-barra .hy-btn{min-height:44px}}