/* Checadu — capa de aplicación para celular.
   Todo vive dentro de media queries: en computadora nada cambia. */

.tabbar,.hoja,.hoja-fondo,.topbar-marca{display:none}

@media (max-width:760px){
  html{-webkit-text-size-adjust:100%}
  body{-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
  input,select,textarea{font-size:16px!important}          /* iOS no hace zoom al enfocar */
  .btn{min-height:46px}
  .btn-sm{min-height:40px}
  a,button{touch-action:manipulation}

  /* ---------- barra de pestañas inferior (común) */
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(255,255,255,.96);
    backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
    border-top:1px solid var(--linea);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px))}
  .tabbar a,.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border:0;background:none;
    font:inherit;color:var(--tinta-50);text-decoration:none;border-radius:12px;min-width:0;cursor:pointer}
  .tabbar i{font-style:normal;font-size:1.25rem;line-height:1.2}
  .tabbar span{font-size:.68rem;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .tabbar .act{color:var(--verde-700)}
  .tabbar .act i{transform:translateY(-1px)}
  .tabbar a:active,.tabbar button:active{background:var(--verde-10)}
  .tab-principal{position:relative}
  .tab-principal i{width:52px;height:52px;margin-top:-26px;border-radius:50%;background:var(--verde);color:#fff;display:grid;place-items:center;
    box-shadow:0 8px 20px rgba(14,138,95,.35);font-size:1.4rem;border:4px solid #fff}
  .tab-principal span{color:var(--verde-700)}

  /* ---------- sitio público como app */
  body.sitio{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  .sitio .barra-in{height:56px;gap:10px}
  .sitio .barra-acc .btn:not(.btn-fantasma){display:none}
  .sitio .barra-acc .btn-fantasma{min-height:36px;padding:6px 12px}
  .contenedor{padding-left:18px;padding-right:18px}
  .hero-in{padding-top:28px;padding-bottom:36px;gap:26px}
  .hero h1{font-size:2.4rem}
  .hero-sub{font-size:1.05rem;margin-bottom:20px}
  .hero-botones{flex-direction:column;align-items:stretch}
  .hero-botones .btn{width:100%!important;padding:16px!important}
  .hero-admin{margin-top:14px}
  .vista-previa{border-radius:18px;box-shadow:0 10px 30px rgba(14,34,51,.1)}
  .vp-kpis b{font-size:1.05rem}
  .vp-grafica{height:64px}
  .rasgos,.rasgos-6{grid-template-columns:1fr 1fr}
  .rasgo{padding:20px 12px;border-bottom:1px solid var(--linea)}
  .rasgo:nth-child(2n){border-right:0}
  .bloque{padding:34px 0}
  .panel-verde{padding:22px;border-radius:20px;gap:20px}
  .como .tarjeta{margin-top:12px}
  .lista-check-2{grid-template-columns:1fr}
  .cierre{padding:30px 20px;border-radius:20px}
  .cierre .btn{width:100%!important}
  .pie{padding:22px 0}
  .pie-in{flex-direction:column;align-items:flex-start}
  .pie-enlaces{gap:14px}
  .pie-lema{margin-bottom:14px}

  /* ---------- panel y consola como app */
  body.con-panel{background:var(--fondo)}
  .con-panel .lateral-nav{display:none}
  .con-panel .contenido{min-height:100vh}
  .con-panel .topbar{padding:calc(8px + env(safe-area-inset-top,0px)) 14px 8px;gap:10px;min-height:56px;
    background:rgba(255,255,255,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .topbar-marca{display:flex;align-items:center}
  .topbar-marca img{height:28px;max-width:90px;object-fit:contain}
  .topbar-titulo{font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
  .topbar-usuario .btn{display:none}
  .topbar-usuario .avatar{width:34px;height:34px}
  .con-panel .cuerpo{padding:14px 14px calc(92px + env(safe-area-inset-bottom,0px));gap:14px}
  .cabecera-pagina{flex-direction:column;align-items:stretch;gap:10px}
  .cabecera-pagina h2{font-size:1.45rem}
  .cabecera-pagina .der{margin-left:0;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .cabecera-pagina .der .btn{flex:0 0 auto}
  .kpis,.kpis-6{grid-template-columns:1fr 1fr;gap:10px}
  .kpi{padding:14px;gap:10px;border-radius:16px}
  .kpi b{font-size:1.5rem}
  .kpi-icono{width:36px;height:36px;font-size:.95rem}
  .tarjeta{padding:16px;border-radius:16px}
  .barras{height:140px;gap:3px}
  .barra em{font-size:.62rem}
  .anillo{width:110px;height:110px}.anillo i{width:72px;height:72px;font-size:1.1rem}
  .linea-campos .campo{flex:1 1 100%}
  .rejilla.r-2,.rejilla.r-3,.rejilla.r-4{grid-template-columns:1fr}
  details.desplegable>summary{padding:15px 16px}
  details.desplegable>div{padding:0 16px 16px}
  .aviso{font-size:.9rem;padding:12px 14px}
  .acciones-rapidas{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .accion{padding:14px 6px;font-size:.8rem}
  .barra-masiva{position:sticky;bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:30;box-shadow:0 8px 24px rgba(14,34,51,.15)}
  .barra-masiva select{flex:1 1 100%}
  .rep-tipos{display:flex;overflow-x:auto;gap:8px;padding-bottom:4px;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
  .rep-tipo{flex:0 0 72%;scroll-snap-align:start}
  .rep-cols{grid-template-columns:1fr 1fr}
  .exp-encabezado{padding:16px;gap:12px}
  .exp-avatar{width:52px;height:52px;font-size:1.15rem}
  .exp-encabezado .der{width:100%;display:flex;gap:8px}
  .exp-encabezado .der>*{flex:1}
  .exp-encabezado .der .btn,.exp-encabezado .der form .btn{width:100%}
  .calendarios{gap:14px}.cal{max-width:none;flex:1 1 100%}
  .ficha{grid-template-columns:1fr}
  .ficha dt{margin-top:6px}
  .mapa-grande{height:320px}
  .asis-boton{bottom:calc(84px + env(safe-area-inset-bottom,0px));right:14px;width:50px;height:50px}
  .asis-panel{left:0;right:0;bottom:0;width:auto;height:82vh;border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom,0px);z-index:90}

  /* ---------- tablas convertidas en tarjetas (data-label lo pone movil.js) */
  .tabla-envoltura{border:0;background:transparent;overflow:visible;border-radius:0}
  .tabla-envoltura table,.tabla-envoltura tbody,.tabla-envoltura tr,.tabla-envoltura td{display:block;width:100%}
  .tabla-envoltura thead{display:none}
  .tabla-envoltura tr{position:relative;background:#fff;border:1px solid var(--linea);border-radius:16px;margin-bottom:10px;
    padding:12px 14px;box-shadow:0 1px 2px rgba(14,34,51,.04)}
  .tabla-envoltura tbody tr:hover{background:#fff}
  .tabla-envoltura td{border:0;padding:4px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;text-align:right;font-size:.92rem}
  .tabla-envoltura td::before{content:attr(data-label);color:var(--tinta-50);font-size:.76rem;font-weight:650;text-align:left;flex:0 0 40%;padding-top:2px}
  .tabla-envoltura td[data-label=""]::before{display:none}
  .tabla-envoltura td[data-label=""]{justify-content:flex-end}
  .tabla-envoltura td.num{text-align:right}
  .tabla-envoltura td:empty{display:none}
  .tabla-envoltura td.td-titulo{display:block;text-align:left;font-size:1rem;padding:0 30px 8px 0;margin-bottom:6px;border-bottom:1px solid var(--linea)}
  .tabla-envoltura td.td-titulo::before{display:none}
  .tabla-envoltura td.td-check{position:absolute;top:10px;right:10px;width:auto;padding:0}
  .tabla-envoltura td.td-check::before{display:none}
  .tabla-envoltura td.td-check input{width:22px;height:22px}
  .tabla-envoltura td.td-completa,.tabla-envoltura td.vacio{display:block;text-align:left}
  .tabla-envoltura td.td-completa::before,.tabla-envoltura td.vacio::before{display:none}
  .tabla-envoltura tr:has(> td.td-completa:only-child){padding:0;border:0;box-shadow:none;background:transparent}
  .tabla-envoltura .celda-checadas{justify-content:flex-end}
  .tabla-envoltura .celda-persona{justify-content:flex-start}
  .tabla-envoltura td form{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
  .tabla-envoltura .fila-incidencia{border-left:4px solid var(--ambar)}
  .tarjeta table,.inst-tabla{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* ---------- hoja "Más" */
  .hoja-fondo{display:block;position:fixed;inset:0;background:rgba(14,34,51,.4);z-index:80;animation:aparece .18s ease}
  .hoja{display:block;position:fixed;left:0;right:0;bottom:0;z-index:81;background:#fff;border-radius:22px 22px 0 0;
    padding:8px 16px calc(18px + env(safe-area-inset-bottom,0px));max-height:85vh;overflow:auto;animation:sube .22s cubic-bezier(.2,.9,.3,1)}
  .hoja[hidden],.hoja-fondo[hidden]{display:none!important}
  .hoja-asa{width:40px;height:5px;border-radius:3px;background:#d7dfdb;margin:4px auto 12px}
  .hoja-cab{display:flex;gap:12px;align-items:center;padding:4px 4px 14px;border-bottom:1px solid var(--linea);margin-bottom:12px}
  .hoja-cab small{color:var(--tinta-50)}
  .hoja-rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .hoja-rejilla a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border-radius:14px;background:#f4f7f5;
    color:var(--tinta);text-decoration:none;text-align:center;font-size:.8rem;font-weight:600}
  .hoja-rejilla a i{font-style:normal;font-size:1.35rem}
  .hoja-rejilla a.act{background:var(--verde-10);color:var(--verde-700)}
  .hoja-rejilla a:active{transform:scale(.97)}
  @keyframes sube{from{transform:translateY(100%)}to{transform:none}}
  @keyframes aparece{from{opacity:0}to{opacity:1}}

  /* ---------- app instalada (standalone) */
  html.en-app .con-panel .topbar{padding-top:calc(10px + env(safe-area-inset-top,0px))}
}

@media (max-width:760px) and (prefers-reduced-motion:reduce){.hoja,.hoja-fondo{animation:none}}