/* El CRM dentro de la app de Helios (html.en-app, ver en-app.js) y el menú Más como hoja en el teléfono. */

/* ---------- Menú Más: cuadrícula de áreas ---------- */

.mas-hoja{display:grid;gap:18px}
.mas-quien{margin:0;font-size:13px}
.mas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.mas-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:92px;padding:12px 8px;border:1px solid var(--h-linea);border-radius:18px;background:var(--h-papel-2);color:var(--h-tinta);font:700 13px/1.25 Manrope,system-ui,sans-serif;text-align:center;cursor:pointer;transition:background-color var(--h-dur-1) var(--h-curva),transform var(--h-dur-1) var(--h-curva)}
.mas-tile svg{width:24px;height:24px}
.mas-tile:hover{background:var(--h-pestana-hover)}
.mas-tile:active{transform:scale(.97)}
.mas-tile.activa{background:var(--h-boton);color:var(--h-boton-texto);border-color:transparent}
.mas-cuenta{padding-top:14px;border-top:1px solid var(--h-linea)}
.mas-cuenta .btn{width:100%;min-height:48px}

@media (max-width:760px){
  /* En el teléfono, Más sube desde abajo como hoja. */
  .cl-dialog.cl-hoja-mas{width:100%;max-width:none;max-height:min(88dvh,760px);margin:auto 0 0;border-radius:26px 26px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom);animation:mas-sube var(--h-dur-3) var(--h-curva)}
  .cl-hoja-mas .cl-dialog-head{padding:14px 20px 12px}
  .cl-hoja-mas .cl-dialog-head::before{content:'';position:absolute;top:7px;left:50%;width:38px;height:4px;margin-left:-19px;border-radius:4px;background:var(--h-linea)}
  .cl-hoja-mas .cl-dialog-body{padding:16px 16px 22px}
  .mas-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .mas-tile{min-height:84px;border-radius:16px;font-size:12px}
}
@keyframes mas-sube{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.cl-dialog.cl-hoja-mas{animation:none}}

/* ---------- Dentro de la app ---------- */

/* La página ocupa la pantalla entera: la barra de estado y la del inicio son de la app. */
html.en-app,html.en-app body{overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}
html.en-app .h-bottom,html.en-app .h-topbar,html.en-app .mas-tile{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
/* El fondo bajo la barra de estado, para que lo que se desplaza no pase por detrás de la hora. */
html.en-app body::after{content:'';position:fixed;inset:0 0 auto;height:env(safe-area-inset-top);background:var(--h-fondo);z-index:60;pointer-events:none}

/* Con la barra nativa de la app (vidrio líquido, ver crm-shell.js) la de la web se oculta. La app vieja no pone la clase. */
html.barra-nativa .h-bottom{display:none}

@media (max-width:760px){
  html.en-app .h-app{padding-top:calc(env(safe-area-inset-top) + 4px)}
  html.en-app .h-topbar{top:calc(env(safe-area-inset-top) + 4px);height:52px}
  /* Atrás: el gesto del borde ya existe; queda la flecha sola. */
  html.en-app .h-volver{width:40px;padding:0;justify-content:center}
  html.en-app .h-volver span{display:none}
  html.en-app .h-volver:not([hidden])~.h-marca .h-powered{display:inline-flex!important}
  /* iOS acerca la pantalla si el texto de un campo es menor de 16 px. */
  html.en-app input:not([type=checkbox]):not([type=radio]):not([type=range]),html.en-app select,html.en-app textarea{font-size:max(16px,1em)}
  html.en-app .h-bottom{bottom:calc(6px + env(safe-area-inset-bottom))}
  html.en-app .h-toast,html.en-app #clinic-notice{bottom:calc(88px + env(safe-area-inset-bottom))}
}

/* ---------- Ruta en vivo y Ruta del repartidor ---------- */

.ruta-conteo{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.ruta-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--h-papel);border:1px solid var(--h-linea);font-size:13px;font-weight:700;color:var(--h-tinta-2)}
.ruta-chip b{font:var(--h-cifra-peso) 16px/1 var(--h-cifra-familia);color:var(--h-tinta)}
.ruta-mapa{height:min(52vh,460px);border-radius:22px;overflow:hidden;border:1px solid var(--h-linea);background:var(--h-papel-2);box-shadow:var(--h-sombra-1)}
.ruta-mapa .leaflet-control-attribution{font-size:10px;background:color-mix(in srgb,var(--h-papel) 80%,transparent)}
.ruta-lista{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.ruta-fila{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px;border-radius:18px;background:var(--h-papel);border:1px solid var(--h-linea)}
.ruta-quien{display:grid;min-width:0}
.ruta-quien strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ruta-quien small{color:var(--h-tinta-2);font-size:13px}
.ruta-fila .btn{min-height:40px;padding:0 12px;font-size:13px}
.ruta-pin{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;font:800 12px/1 Manrope,system-ui,sans-serif;color:#fff;background:var(--h-tinta-2);border:2px solid var(--h-papel);box-shadow:0 4px 10px -4px rgba(0,0,0,.45)}
.ruta-pin.en-ruta,.ruta-chip.en-ruta b{background:var(--h-positivo)}
.ruta-chip.en-ruta b,.ruta-chip.quieto b,.ruta-chip.sin-senal b{background:none}
.ruta-chip.en-ruta{color:var(--h-positivo)}
.ruta-pin.quieto{background:#9A7A3C}
.ruta-pin.sin-senal{background:var(--h-borde)}
.ruta-vacia h2,.ruta-repartidor h2{margin-top:0}
.ruta-repartidor{display:grid;gap:14px;max-width:560px}
.ruta-repartidor .btn{justify-self:start;min-height:50px}
@media (max-width:760px){.ruta-repartidor .btn{justify-self:stretch}.ruta-fila .btn{padding:0 10px}}