/* ===========================================================
   BITEL CAMPAÑAS PDV — Sistema de diseño
   Tipografía auto-alojada (offline): Sora (display) + Manrope (UI)
   =========================================================== */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/manrope-400.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/manrope-500.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/manrope-600.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/manrope-700.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/manrope-800.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/sora-700.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/sora-800.woff2') format('woff2')}

:root{
  /* Marca Bitel */
  --am:#FFD100; --am-ink:#3d3200;            /* amarillo + texto oscuro sobre amarillo */
  --ink:#16202e; --ink-2:#243447; --ink-3:#334155;
  /* Neutros (contraste AA sobre blanco) */
  --bg:#eef1f6; --surface:#ffffff; --surface-2:#f7f9fc;
  --line:#e2e7ef; --line-2:#eef1f6;
  --txt:#16202e; --mut:#51607a; --mut-2:#6b7890;
  /* Semánticos */
  --ok:#12934e; --okbg:#e6f6ec; --okln:#bfe6cd;
  --bad:#d11f2d; --badbg:#fdeaec; --badln:#f4c6cb;
  --warn:#b5730a; --warnbg:#fdf3e2; --warnln:#f2ddb4;
  /* Sombras */
  --sh-sm:0 1px 2px rgba(16,32,46,.06),0 1px 3px rgba(16,32,46,.05);
  --sh-md:0 4px 14px rgba(16,32,46,.08),0 2px 4px rgba(16,32,46,.05);
  --sh-am:0 6px 18px rgba(255,209,0,.45);
  --r:14px; --r-lg:18px;
  --font:'Manrope',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:'Sora',var(--font);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  color:var(--txt);
  font-size:16px; line-height:1.55;
  background:
    radial-gradient(1200px 480px at 100% -10%,rgba(255,209,0,.10),transparent 60%),
    linear-gradient(180deg,#f2f5fa 0%,#eaeef4 100%);
  background-attachment:fixed;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Barra superior ---------- */
.top{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:12px;
  padding:14px 16px calc(14px + 4px);
  padding-top:calc(14px + env(safe-area-inset-top));
  background:linear-gradient(120deg,#16202e 0%,#22344a 100%);
  color:#fff;
  border-bottom:3px solid var(--am);
  box-shadow:var(--sh-md);
}
.top .logo{
  font-family:var(--display); font-weight:800; font-size:17px; letter-spacing:-.5px;
  background:var(--am); color:var(--ink); padding:6px 11px; border-radius:9px;
  box-shadow:0 2px 0 rgba(0,0,0,.12) inset;
}
.top .tt{flex:1; min-width:0}
.top .tt b{font-family:var(--display); font-weight:700; font-size:15.5px; display:block; line-height:1.15; letter-spacing:-.2px}
.top .tt small{display:block; color:#aab6c6; font-size:11.5px; margin-top:2px; font-weight:500}
.net{
  display:inline-flex; align-items:center; gap:6px;
  font-size:10.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
  padding:5px 10px 5px 8px; border-radius:999px; white-space:nowrap;
}
.net::before{content:""; width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px rgba(255,255,255,.14)}
.net.on{background:rgba(18,147,78,.18); color:#7ff0ad}
.net.off{background:rgba(209,31,45,.20); color:#ffb0b6}

/* ---------- Barra de pendientes ---------- */
.pendbar{
  position:sticky; top:0; z-index:25;
  display:flex; align-items:center; gap:10px;
  padding:11px 16px; cursor:pointer;
  background:linear-gradient(90deg,var(--warnbg),#fff7e8);
  border-bottom:1px solid var(--warnln);
  color:#7a4e06; font-size:13px; font-weight:700;
}
.pendbar svg{flex:none; width:18px; height:18px}
.pendbar .pt{flex:1; min-width:0}
.pendbar .pendbtn{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--ink); color:#fff; padding:7px 12px; border-radius:999px;
  font-size:11.5px; font-weight:700; white-space:nowrap;
}
.pendbar .pendbtn svg{width:14px;height:14px}

/* ---------- Contenedor ---------- */
.wrap{max-width:600px; margin:0 auto; padding:16px 16px calc(36px + env(safe-area-inset-bottom))}

/* ---------- Tarjetas / secciones ---------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:16px 16px 18px; margin-bottom:14px; box-shadow:var(--sh-sm);
}
.sec{display:flex; align-items:center; gap:9px; margin:0 0 4px}
.sec .ic{
  flex:none; width:30px; height:30px; border-radius:9px;
  display:grid; place-items:center; background:var(--ink); color:var(--am);
}
.sec .ic svg{width:17px; height:17px}
.sec h2{font-family:var(--display); font-weight:700; font-size:14.5px; margin:0; letter-spacing:-.2px}
.sec p{margin:1px 0 0; font-size:11.5px; color:var(--mut); font-weight:500}

label{
  display:block; margin:14px 0 6px;
  font-size:11.5px; font-weight:700; color:var(--mut); text-transform:uppercase; letter-spacing:.4px;
}
.card > label:first-of-type{margin-top:14px}

/* ---------- Campos ---------- */
select,input,textarea{
  width:100%; padding:13px 13px; min-height:50px;
  font-family:inherit; font-size:16px; color:var(--txt);
  background:var(--surface-2); border:1.5px solid var(--line); border-radius:var(--r);
  transition:border-color .18s, box-shadow .18s, background .18s;
  appearance:none;
}
textarea{min-height:auto; resize:vertical; line-height:1.5}
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2351607a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:40px;
}
select:focus,input:focus,textarea:focus{
  outline:none; border-color:var(--ink); background:#fff;
  box-shadow:0 0 0 4px rgba(22,32,46,.10);
}
::placeholder{color:#9aa6ba}

/* ---------- Segmento Evento ---------- */
.seg{display:flex; gap:8px; margin-top:4px}
.seg button{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:12px; cursor:pointer;
  font-family:var(--font); font-weight:800; font-size:14.5px; color:var(--ink);
  background:var(--surface-2); border:1.5px solid var(--line); border-radius:var(--r);
  transition:all .16s;
}
.seg button svg{width:18px; height:18px}
.seg button.on{background:var(--ink); color:#fff; border-color:var(--ink); box-shadow:var(--sh-sm)}
.seg button.on svg{color:var(--am)}
/* 3 botones (Apertura / Cierre / Adicional): ícono arriba, texto abajo, más compacto */
.seg3 button{flex-direction:column; gap:5px; min-height:60px; padding:10px 6px; font-size:12px; letter-spacing:.2px}
.seg3 button svg{width:20px; height:20px}
.modohint{margin-top:10px; padding:11px 13px; border-radius:11px; font-size:12.5px; line-height:1.5;
  background:#eef4ff; border:1px solid #cfe0fb; color:#274b8a}
.modohint b{font-weight:800}

/* ---------- Info del plan ---------- */
.info{
  margin-top:12px; padding:12px 14px; font-size:13.5px; line-height:1.75;
  background:linear-gradient(180deg,#fffdf2,#fff);
  border:1px solid var(--warnln); border-left:4px solid var(--am); border-radius:12px;
}
.info .row{display:flex; justify-content:space-between; gap:12px}
.info .row span:first-child{color:var(--mut); font-weight:600}
.info .row b{text-align:right; font-weight:700}

/* ---------- Foto / evidencia ---------- */
.fotobtns{display:flex; gap:8px}
.fbtn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:56px; padding:14px; cursor:pointer;
  font-family:var(--font); font-weight:800; font-size:14.5px;
  border-radius:var(--r); border:1.5px solid var(--line); background:var(--surface-2); color:var(--ink);
  transition:all .16s;
}
.fbtn svg{width:20px; height:20px}
.fbtn.cam{background:var(--ink); color:#fff; border-color:var(--ink); box-shadow:var(--sh-sm)}
.fbtn.cam svg{color:var(--am)}
.fbtn:active{transform:translateY(1px)}
.hint{font-size:11.5px; color:var(--mut); margin-top:7px; display:flex; gap:6px; align-items:flex-start}
.hint svg{width:14px; height:14px; flex:none; margin-top:1px; color:var(--mut-2)}
.foto{margin-top:10px; width:100%; border-radius:14px; border:1px solid var(--line); box-shadow:var(--sh-sm); display:block}

.gpsbox{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  margin-top:10px; padding:11px 13px; border-radius:12px;
  font-size:13px; font-weight:600; line-height:1.35;
  background:var(--surface-2); border:1px solid var(--line); color:var(--mut);
}
.gpsbox svg{flex:none; width:18px; height:18px}
.gpsbox.ok{background:var(--okbg); border-color:var(--okln); color:#0e7a41}
.gpsbox.err{background:var(--badbg); border-color:var(--badln); color:var(--bad)}

/* ---------- Participantes (chips) ---------- */
.addrow{display:flex; gap:8px}
.addrow input{flex:1}
.addrow button{
  flex:none; width:52px; min-height:50px; border:none; border-radius:var(--r); cursor:pointer;
  background:var(--ink); color:var(--am); display:grid; place-items:center;
}
.addrow button svg{width:22px; height:22px}
.chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:9px}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ink); color:#fff; border-radius:999px; padding:7px 8px 7px 13px; font-size:13px; font-weight:600;
}
.chip b{cursor:pointer; font-weight:800; opacity:.75; width:18px; height:18px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.14)}
.chip b:hover{opacity:1}

/* ---------- Enviar ---------- */
.send{
  width:100%; min-height:58px; margin-top:6px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--display); font-weight:800; font-size:16.5px; letter-spacing:-.2px;
  color:var(--ink); background:var(--am); border:none; border-radius:16px;
  box-shadow:var(--sh-am); transition:transform .08s, box-shadow .18s, opacity .18s, background .18s;
}
.send svg{width:20px; height:20px}
.send:active{transform:translateY(1px) scale(.995)}
.send:disabled{opacity:.42; box-shadow:none; cursor:not-allowed}
.send.offline{background:var(--ink); color:#fff; box-shadow:var(--sh-md)}
.send.offline svg{color:var(--am)}

/* ---------- Mensajes ---------- */
.msg{
  display:flex; align-items:flex-start; gap:10px;
  margin-top:14px; padding:13px 15px; border-radius:13px;
  font-size:14px; font-weight:600; line-height:1.5; border:1px solid transparent;
}
.msg svg{flex:none; width:20px; height:20px; margin-top:1px}
.msg.ok{background:var(--okbg); border-color:var(--okln); color:#0e7a41}
.msg.err{background:var(--badbg); border-color:var(--badln); color:var(--bad)}
.msg.info{background:var(--warnbg); border-color:var(--warnln); color:#7a4e06}

/* ---------- Pie / link ---------- */
.link{
  display:flex; align-items:center; justify-content:center; gap:7px;
  margin-top:20px; padding:12px; text-decoration:none;
  font-weight:700; font-size:14px; color:var(--ink);
}
.link svg{width:16px; height:16px}
.faltan{
  margin-top:10px; padding:10px 13px; border-radius:11px;
  background:var(--warnbg); border:1px solid var(--warnln); color:#7a4e06;
  font-size:12.5px; font-weight:600; line-height:1.45;
}
.faltan::before{content:"Para enviar, "; font-weight:800}
.ver{text-align:center; color:var(--mut-2); font-size:11px; margin-top:10px; font-weight:500}

/* ---------- Cámara en vivo ---------- */
.camov{
  position:fixed; inset:0; z-index:80; background:#000;
  display:flex; flex-direction:column;
  padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom);
}
.camhead{
  color:#fff; text-align:center; font-family:var(--display); font-weight:700;
  font-size:14.5px; padding:14px 16px 8px;
  background:linear-gradient(180deg,rgba(0,0,0,.6),transparent);
  position:absolute; top:env(safe-area-inset-top); left:0; right:0; z-index:2;
}
#camVid{flex:1; width:100%; height:100%; object-fit:cover; background:#000}
.cambar{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:center; justify-content:space-around;
  padding:18px 24px calc(24px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg,rgba(0,0,0,.65),transparent);
}
.shutter{
  width:74px; height:74px; border-radius:50%; cursor:pointer;
  background:#fff; border:5px solid rgba(255,255,255,.45);
  box-shadow:0 0 0 2px #fff inset; transition:transform .08s;
}
.shutter:active{transform:scale(.92)}
.cbtn{
  width:52px; height:52px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; color:#fff;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(4px);
}
.cbtn svg{width:24px; height:24px}
.camerr{
  position:absolute; inset:0; z-index:3; margin:auto; height:max-content;
  align-self:center; max-width:320px; padding:24px; text-align:center; color:#fff;
}
.camerr svg{width:44px; height:44px; color:var(--am); margin-bottom:10px}
.camerr p{font-size:14.5px; line-height:1.5; margin:0 0 16px; color:#e7ecf2}
.camfb{width:100%; padding:13px; border:none; border-radius:12px; background:var(--am); color:var(--ink); font-weight:800; font-family:var(--font); cursor:pointer; font-size:15px}
.camclose{width:100%; padding:11px; margin-top:8px; border:1px solid rgba(255,255,255,.3); border-radius:12px; background:transparent; color:#cbd5e1; font-weight:700; font-family:var(--font); cursor:pointer}

/* ---------- Toast instalar ---------- */
.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(16px + env(safe-area-inset-bottom)); z-index:60; max-width:92%;
  display:flex; align-items:center; gap:12px;
  background:var(--ink); color:#fff; padding:12px 14px; border-radius:14px;
  font-size:13.5px; font-weight:600; box-shadow:0 10px 30px rgba(16,32,46,.4);
  border:1px solid rgba(255,255,255,.08);
}
.toast button{border:none; cursor:pointer; font-weight:800; font-family:var(--font)}
.toast .go{background:var(--am); color:var(--ink); padding:9px 13px; border-radius:10px}
.toast .x{background:transparent; color:#93a1b5; padding:6px 8px; font-size:16px}

/* ---------- Aparición escalonada ---------- */
@keyframes rise{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:translateY(0)}}
.reveal{opacity:0; animation:rise .5s cubic-bezier(.2,.7,.2,1) forwards}
.reveal:nth-of-type(1){animation-delay:.04s}
.reveal:nth-of-type(2){animation-delay:.12s}
.reveal:nth-of-type(3){animation-delay:.20s}
.reveal:nth-of-type(4){animation-delay:.28s}
.reveal:nth-of-type(5){animation-delay:.36s}
@media (prefers-reduced-motion:reduce){
  .reveal{animation:none; opacity:1}
  *{transition:none!important}
}

/* ===== Video (grabación de evidencia) ===== */
.shutter.rec{background:#dc2626; border-color:#fff}
.shutter.rec.grabando{background:#fff; border-color:#dc2626; border-radius:14px}
.rectimer{
  position:absolute; top:64px; left:0; right:0; text-align:center;
  color:#fff; font-weight:800; font-size:18px; letter-spacing:.5px;
  text-shadow:0 1px 6px rgba(0,0,0,.8); z-index:5;
}
.rectimer.listo{color:#4ade80}