/* Layout: app móvil de RH (referencia Zoho People) — banda verde con la tarjeta de checada montada encima, rejilla de 12 servicios, barra fija de 4 secciones; pantallas internas con encabezado blanco y regreso. Verde de marca para la acción, naranja y amarillo sólo como acento, color semántico sólo para estados. */
:root{
  --verde:#044d3e; --naranja:#F57C00; --amarillo:#F5C518;
  --bg:#f3f5f4; --sf:#ffffff; --sf2:#f3f5f4; --ink:#1f2a27; --mut:#5b6b66; --mut2:#7a8984;
  --ln:#e3e8e6; --ln2:#eef2f0; --campo:#d6dedb; --track:#e8eeeb;
  --band:#044d3e; --onband:#ffffff; --acc:#044d3e; --btn:#044d3e; --btnTx:#ffffff;
  --ok:#0f6b57; --okS:#e3f1ec; --wa:#b85f00; --waS:#fff0e0; --er:#b42318; --erS:#fdeceb; --nS:#eef2f0;
  --barOk:#0f6b57; --barWa:#e8a23c; --barEr:#b42318; --barHoy:#044d3e;
  --t1b:#e3f1ec; --t1f:#0f6b57; --t2b:#fff0e0; --t2f:#c46400; --t3b:#fdf6d8; --t3f:#8a6d00;
  --t4b:#e7eefb; --t4f:#2a55a5; --t5b:#efe9f8; --t5f:#6b46a8; --t6b:#fdeceb; --t6f:#b42318;
  --sombra:0 6px 18px rgba(4,77,62,.12);
  --f:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fd:"Barlow Semi Condensed","Barlow",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0f1513; --sf:#18201d; --sf2:#1f2925; --ink:#e3ebe8; --mut:#9fb0aa; --mut2:#7f918b;
  --ln:#2a3531; --ln2:#232d29; --campo:#35433e; --track:#26312d;
  --band:#063a2f; --onband:#ffffff; --acc:#6fd0b0; --btn:#0f7a62; --btnTx:#ffffff;
  --ok:#6fd0b0; --okS:#173229; --wa:#f0a64a; --waS:#3a2a14; --er:#f08679; --erS:#3b1d1a; --nS:#243029;
  --barOk:#3fae8c; --barWa:#e8a23c; --barEr:#e0665a; --barHoy:#6fd0b0;
  --t1b:#173229; --t1f:#6fd0b0; --t2b:#3a2a14; --t2f:#f0a64a; --t3b:#352f12; --t3f:#e6c64a;
  --t4b:#1b2740; --t4f:#8fb0ee; --t5b:#2a2140; --t5f:#b9a0e6; --t6b:#3b1d1a; --t6f:#f08679;
  --sombra:0 6px 18px rgba(0,0,0,.35); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f1513; --sf:#18201d; --sf2:#1f2925; --ink:#e3ebe8; --mut:#9fb0aa; --mut2:#7f918b;
  --ln:#2a3531; --ln2:#232d29; --campo:#35433e; --track:#26312d;
  --band:#063a2f; --onband:#ffffff; --acc:#6fd0b0; --btn:#0f7a62; --btnTx:#ffffff;
  --ok:#6fd0b0; --okS:#173229; --wa:#f0a64a; --waS:#3a2a14; --er:#f08679; --erS:#3b1d1a; --nS:#243029;
  --barOk:#3fae8c; --barWa:#e8a23c; --barEr:#e0665a; --barHoy:#6fd0b0;
  --t1b:#173229; --t1f:#6fd0b0; --t2b:#3a2a14; --t2f:#f0a64a; --t3b:#352f12; --t3f:#e6c64a;
  --t4b:#1b2740; --t4f:#8fb0ee; --t5b:#2a2140; --t5f:#b9a0e6; --t6b:#3b1d1a; --t6f:#f08679;
  --sombra:0 6px 18px rgba(0,0,0,.35); color-scheme:dark}
*{box-sizing:border-box}
html,body{background:var(--bg)}
body{color:var(--ink);font:15px/1.4 var(--f);margin:0}
.app{max-width:560px;margin:0 auto;padding-block:0 96px}
.pad{padding-inline:16px}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--acc)}
:focus-visible{outline:2px solid var(--naranja);outline-offset:2px}
.ico{width:22px;height:22px;flex:none}
.num{font-variant-numeric:tabular-nums}
.sub{font-size:12.5px;color:var(--mut)}
.lbl{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);margin:18px 16px 8px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.lbl span{font-size:12px;letter-spacing:0;text-transform:none;font-weight:600}
.caja{margin-inline:16px;background:var(--sf);border:1px solid var(--ln);border-radius:14px}
.lista{padding:4px 14px}
.fila{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--ln2)}
.fila:last-child{border-bottom:0}
.fila .tx{flex:1;min-width:0}
.fila .tx b{display:block;font-size:14.5px;font-weight:600}
.tag{display:inline-block;font-size:12px;font-weight:700;padding:3px 9px;border-radius:6px;white-space:nowrap;background:var(--okS);color:var(--ok)}
.tag.w{background:var(--waS);color:var(--wa)} .tag.e{background:var(--erS);color:var(--er)} .tag.n{background:var(--nS);color:var(--mut)}
.av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:none;background:var(--t1b);color:var(--t1f)}
.vacio{color:var(--mut);font-size:13.5px;padding:14px 0;margin:0}
.btn{border:0;border-radius:12px;padding:14px;font-weight:700;font-size:16px;background:var(--btn);color:var(--btnTx);width:100%;display:flex;align-items:center;justify-content:center;gap:8px}
.btn.rojo{background:var(--er);color:#fff}
.btn.sec{background:var(--sf);color:var(--ink);border:1px solid var(--campo)}
.btn.chico{font-size:14px;padding:11px;border-radius:10px}
.btn:disabled{opacity:.55;cursor:default}
.aviso{margin:12px 16px 0;border-radius:10px;padding:10px 12px;font-size:13px;font-weight:600;background:var(--waS);color:var(--wa)}
.aviso.ok{background:var(--okS);color:var(--ok)} .aviso.e{background:var(--erS);color:var(--er)}

/* encabezados */
.banda{background:var(--band);color:var(--onband);padding:18px 18px 64px;display:flex;align-items:center;gap:12px}
.banda .yo{flex:1;min-width:0}
.banda .yo b{display:block;font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.banda .yo span{font-size:12.5px;opacity:.82}
.banda .av{width:42px;height:42px;font-size:15px;background:var(--naranja);color:#fff}
.prueba{font-size:11.5px;font-weight:700;letter-spacing:.06em;background:var(--amarillo);color:#3b3000;padding:4px 9px;border-radius:6px}
.cab{position:sticky;top:env(safe-area-inset-top,0px);z-index:4;background:var(--sf);border-bottom:1px solid var(--ln);padding:10px 16px;display:flex;align-items:center;gap:6px}
.cab .tt{flex:1;min-width:0}
.cab .tt b{display:block;font-size:17px;font-weight:700}
.reg{width:44px;height:44px;border:0;background:none;display:flex;align-items:center;justify-content:center;margin-left:-10px;color:var(--ink)}
.tabs{display:flex;gap:18px;margin-top:6px}
.tabs button{border:0;background:none;padding:8px 0;font-size:14px;font-weight:600;color:var(--mut2);border-bottom:3px solid transparent}
.tabs button[aria-pressed="true"]{color:var(--acc);border-bottom-color:var(--acc)}

/* tarjeta de checada */
.checa{margin:-48px 16px 0;background:var(--sf);border-radius:16px;box-shadow:var(--sombra);padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative}
.checa .top{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;font-size:12.5px;color:var(--mut);flex-wrap:wrap}
.chip{background:var(--okS);color:var(--ok);font-weight:600;padding:2px 8px;border-radius:6px;font-size:12.5px}
.reloj{font-family:var(--fd);font-size:44px;font-weight:700;letter-spacing:.5px;color:var(--acc);font-variant-numeric:tabular-nums;line-height:1.1;margin-top:4px}
.reloj small{font-size:13px;font-weight:600;color:var(--wa);letter-spacing:0;vertical-align:middle;margin-left:6px}
.sede{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--mut);flex-wrap:wrap;justify-content:center}
.sede select{border:0;background:none;font-weight:600;color:var(--acc);padding:4px 2px;font-size:12.5px;max-width:190px}
.seg{display:flex;background:var(--sf2);border:1px solid var(--ln);border-radius:10px;padding:3px;gap:3px;width:100%}
.seg button{flex:1;border:0;background:none;padding:8px 4px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--mut)}
.seg button[aria-pressed="true"]{background:var(--sf);color:var(--acc);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.campoDatos{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
label.f{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--mut);min-width:0}
label.f input,label.f select{font-size:15px;padding:10px;border:1px solid var(--campo);border-radius:10px;background:var(--sf);color:var(--ink);min-width:0;width:100%}
details.hora{width:100%;font-size:12.5px;color:var(--mut)}
details.hora summary{cursor:pointer;text-align:center;padding:4px}
details.hora .r{display:flex;gap:8px;align-items:flex-end;margin-top:6px}
.resul{width:100%;display:flex;gap:10px;align-items:center;border-radius:10px;padding:10px 12px;font-size:13.5px;font-weight:600;background:var(--okS);color:var(--ok)}
.resul.e{background:var(--erS);color:var(--er)} .resul.w{background:var(--waS);color:var(--wa)}
.resul img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}

/* inicio */
.tiles{margin:14px 16px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tile{background:var(--sf);border:1px solid var(--ln);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:2px;text-align:left}
.tile.ancho{grid-column:1/-1;flex-direction:row;align-items:center;gap:12px}
.tile .k{font-size:11.5px;color:var(--mut)}
.tile .v{font-size:16px;font-weight:700}
.tile .s{font-size:11.5px;font-weight:600;color:var(--ok)}
.tile .s.w{color:var(--wa)} .tile .s.e{color:var(--er)}
.serv{margin:0 16px;background:var(--sf);border-radius:16px;border:1px solid var(--ln);padding:14px 8px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:14px;column-gap:4px}
.svc{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11.5px;font-weight:500;color:var(--ink);text-align:center;line-height:1.2;padding:0;position:relative}
.svc .ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.svc.pronto{color:var(--mut2)}
.svc.pronto .ic{opacity:.55}
.svc .bd{position:absolute;top:-4px;right:calc(50% - 30px);min-width:18px;height:18px;border-radius:9px;background:var(--er);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}

/* tramos de campo */
.paso{margin:14px 16px 0;background:var(--sf);border:1px solid var(--ln);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px}
.paso .k{font-size:12px;color:var(--mut);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.linea{padding:4px 14px}
.tr{display:flex;gap:12px}
.tr .pt{display:flex;flex-direction:column;align-items:center;width:14px;flex:none;padding-top:14px}
.tr .pt i{width:12px;height:12px;border-radius:50%;background:var(--ok);display:block}
.tr .pt i.p{background:var(--sf);border:2px solid var(--campo)}
.tr .pt u{flex:1;width:2px;background:var(--ln);display:block;margin-top:2px}
.tr .tx{padding:10px 0;flex:1;min-width:0}
.tr .tx b{font-size:14px;font-weight:600;display:block}

/* asistencia */
.hoy{margin:14px 16px 0;background:var(--sf);border:1px solid var(--ln);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:12px}
.hoy .h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.grande{font-family:var(--fd);font-size:32px;font-weight:700;color:var(--acc);font-variant-numeric:tabular-nums}
.prog{height:8px;border-radius:4px;background:var(--track);overflow:hidden}
.prog div{height:100%;background:var(--barHoy)}
.kpis{margin:14px 16px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.kpi{background:var(--sf);border:1px solid var(--ln);border-radius:10px;padding:9px 6px;text-align:center}
.kpi b{display:block;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.kpi span{font-size:10.5px;color:var(--mut);display:block;line-height:1.2}
.kpi.w b{color:var(--wa)} .kpi.e b{color:var(--er)} .kpi.o b{color:var(--ok)}
.dia{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--ln2)}
.dia:last-child{border-bottom:0}
.dia .d{width:48px;font-size:12.5px;font-weight:600;flex:none}
.dia .bar{flex:1;height:10px;border-radius:5px;background:var(--track);position:relative;min-width:0}
.dia .bar i{position:absolute;top:0;height:100%;border-radius:5px;background:var(--barOk);display:block}
.dia .bar i.w{background:var(--barWa)} .dia .bar i.e{background:var(--barEr)} .dia .bar i.h{background:var(--barHoy)}
.dia .t{width:104px;text-align:right;font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums;flex:none}
.dia .t.w{color:var(--wa)} .dia .t.e{color:var(--er)}
.dia .gris{flex:1;font-size:12px;color:var(--mut2)}
.dia.off .d{color:var(--mut2)}
.diaNota{font-size:11.5px;color:var(--mut);margin:-6px 0 8px 58px}
.ley{margin:10px 16px 0;display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--mut)}
.ley span{display:flex;align-items:center;gap:5px}
.ley i{width:10px;height:10px;border-radius:3px;display:block}

/* permisos */
.anillos{margin:14px 16px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.anillo{background:var(--sf);border:1px solid var(--ln);border-radius:14px;padding:14px;display:flex;gap:12px;align-items:center;min-width:0}
.anillo .o{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.anillo .o span{width:42px;height:42px;border-radius:50%;background:var(--sf);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.anillo b{font-size:13px;display:block}
.form{padding:14px;display:flex;flex-direction:column;gap:10px}
.tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.adj{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ok);font-weight:600;border:1px dashed var(--campo);border-radius:10px;padding:10px;cursor:pointer}
.adj input{position:absolute;opacity:0;width:1px;height:1px}
.nota{font-size:12.5px;color:var(--mut);background:var(--sf2);border-radius:8px;padding:7px 9px}
.nota.ok{color:var(--ok);background:var(--okS)} .nota.w{color:var(--wa);background:var(--waS)} .nota.e{color:var(--er);background:var(--erS)}
.linkbtn{border:0;background:none;color:var(--acc);font-weight:700;font-size:12.5px;padding:6px 0}

/* aprobaciones */
.sol{background:var(--sf);border:1px solid var(--ln);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.sol .q{display:flex;gap:10px;align-items:center}
.sol .q .tx{flex:1;min-width:0}
.sol .q b{font-size:14.5px;display:block}
.dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pila{margin:12px 16px 0;display:flex;flex-direction:column;gap:10px}

/* corte */
.etapas{margin:14px 16px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.etapa{background:var(--sf);border:1px solid var(--ln);border-radius:10px;padding:10px 12px;min-width:0}
.etapa b{font-size:13px;display:block;color:var(--mut2)}
.etapa b.ok{color:var(--ok)} .etapa b.w{color:var(--wa)} .etapa b.e{color:var(--er)}
.etapa span{font-size:11.5px;color:var(--mut)}
.per summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:12px 0}
.per summary::-webkit-details-marker{display:none}
.per{border-bottom:1px solid var(--ln2)}
.per:last-child{border-bottom:0}
.per .tx{flex:1;min-width:0}
.per .tx b{font-size:14.5px;display:block}
.cifras{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin:0 0 10px}
.cifras div{background:var(--sf2);border-radius:8px;padding:6px 4px;text-align:center}
.cifras b{display:block;font-size:14px;font-variant-numeric:tabular-nums}
.cifras span{font-size:10px;color:var(--mut);line-height:1.15;display:block}
.dif{background:var(--sf);border:1px solid var(--ln);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:4px}
.dif b{font-size:14px}
.dif.hecha{opacity:.7}
.dif .acc{display:flex;gap:14px;flex-wrap:wrap}
.dif .rev{display:flex;gap:8px;margin-top:6px}
.dif .rev input{flex:1;min-width:0;font-size:14px;padding:9px;border:1px solid var(--campo);border-radius:9px;background:var(--sf);color:var(--ink)}
.dif .rev button{flex:none;width:auto;padding:9px 14px}
pre.desp{margin:0;padding:12px 14px;white-space:pre-wrap;word-break:break-word;font:13px/1.5 var(--f);color:var(--ink)}

/* más */
.mas{display:flex;align-items:center;gap:12px;padding:12px 0;border:0;border-bottom:1px solid var(--ln2);background:none;width:100%;text-align:left}
.mas:last-child{border-bottom:0}
.mas .ic{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none}
.mas .tx{flex:1}
.mas .tx b{display:block;font-size:15px;font-weight:600}
ol.pasos{margin:0;padding:12px 14px 12px 34px;display:flex;flex-direction:column;gap:8px;font-size:14px}
ol.pasos li::marker{color:var(--naranja);font-weight:700}

/* barra inferior */
nav.barra{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--sf);border-top:1px solid var(--ln);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:8px 0 calc(10px + env(safe-area-inset-bottom,0px))}
nav.barra button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--mut2);position:relative;padding:2px 0}
nav.barra button[aria-current="true"]{color:var(--acc)}
nav.barra .bd{position:absolute;top:-2px;left:calc(50% + 6px);min-width:16px;height:16px;border-radius:8px;background:var(--er);color:#fff;font-size:10px;line-height:16px;padding:0 4px}
.toast{position:fixed;left:16px;right:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:7;max-width:528px;margin:0 auto;background:var(--ink);color:var(--bg);border-radius:10px;padding:11px 14px;font-size:13.5px;font-weight:600}
@media (min-width:720px){
  .etapas{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion:no-preference){.prog div{transition:width .4s}}

/* ---------- app instalada: entrada, activación, administración ---------- */
html,body{min-height:100%}
body{-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
.puerta{min-height:100vh;min-height:100dvh;background:var(--band);color:var(--onband);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:32px 24px calc(32px + env(safe-area-inset-bottom,0px));text-align:center}
.puerta img.logo{width:190px;max-width:70%}
.puerta h1{font-family:var(--fd);font-size:26px;margin:0;text-wrap:balance}
.puerta p{margin:0;opacity:.85;font-size:15px;max-width:34ch}
.puntos{display:flex;gap:14px;justify-content:center;margin:6px 0}
.puntos i{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.7);display:block}
.puntos i.on{background:var(--amarillo);border-color:var(--amarillo)}
.teclado{display:grid;grid-template-columns:repeat(3,72px);gap:14px;justify-content:center}
.teclado button{width:72px;height:72px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:26px;font-weight:600;font-family:var(--fd)}
.teclado button:active{background:rgba(255,255,255,.28)}
.teclado button.txt{font-size:13px;font-family:var(--f);background:none}
.puerta .err{background:rgba(180,35,24,.9);color:#fff;border-radius:10px;padding:9px 12px;font-size:14px;font-weight:600;max-width:320px}
.puerta .btn{max-width:320px;background:var(--amarillo);color:#2b2300}
.puerta .linkb{border:0;background:none;color:#fff;opacity:.85;text-decoration:underline;font-size:14px}
.instala{background:rgba(255,255,255,.1);border-radius:14px;padding:14px;text-align:left;font-size:14px;max-width:340px}
.instala ol{margin:6px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.sinsenal{margin:10px 16px 0;border-radius:10px;padding:9px 12px;font-size:13px;font-weight:600;background:var(--waS);color:var(--wa)}
.qrbox{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px;text-align:center}
.qrbox svg{width:230px;height:230px;max-width:100%;background:#fff;border-radius:8px}
.qrbox code{font-size:11px;word-break:break-all;color:var(--mut)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.form .dos label.f, .form .campoDatos label.f{min-width:0}
.selfieMini{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;background:var(--sf2)}
.app.sin-nav{padding-bottom:24px}

/* cámara dentro de la app: la foto nunca pasa por la galería */
.cammodal{position:fixed;inset:0;z-index:20;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff}
.cammodal video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.camtop{position:absolute;top:0;left:0;right:0;padding:calc(14px + env(safe-area-inset-top,0px)) 16px 14px;background:linear-gradient(rgba(0,0,0,.6),transparent);display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;z-index:2}
.camtop b{font-size:17px}
.camtop span{font-size:13px;font-weight:600;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.18)}
.camtop span.ok{background:#0f6b57}
.camtop span.e{background:#b42318}
.camguia{position:absolute;width:62%;max-width:280px;aspect-ratio:3/4;border:3px solid rgba(255,255,255,.75);border-radius:50%;pointer-events:none}
.cambar{position:absolute;left:0;right:0;bottom:0;padding:18px 24px calc(22px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.camcancel{justify-self:start;border:0;background:none;color:#fff;font-size:16px;font-weight:600;padding:10px}
.shutter{width:76px;height:76px;border-radius:50%;border:5px solid #fff;background:var(--naranja);box-shadow:0 0 0 3px rgba(0,0,0,.3)}
.shutter:disabled{background:#777;opacity:.7}
.camerr{position:absolute;left:16px;right:16px;bottom:calc(130px + env(safe-area-inset-bottom,0px));background:#fff;color:#1f2a27;border-radius:14px;padding:14px;font-size:14px;line-height:1.4;z-index:3}
.camerr button{margin-top:10px}