/* Lo de autorizar.html y asistente.html. Sale de index.html: mismos colores, misma tarjeta. */
:root{
  --ink:#1a1614; --ink-2:#4a423d; --muted:#7d736b; --line:#e3ddd2;
  --bg:#f6f4ef; --card:#fffdf9; --accent:#1a1614; --on-accent:#f6f4ef; --accent-soft:#efeae1;
  --sello:#9e1b2c; --halo:rgba(158,27,44,.10); --alta:#a4343a; --bien:#2f6b4f;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#ece6dc; --ink-2:#bdb3a7; --muted:#8c8177; --line:#2b2524;
    --bg:#0e0c0c; --card:#171414; --accent:#ece6dc; --on-accent:#0e0c0c; --accent-soft:#221d1c;
    --sello:#d4404f; --halo:rgba(212,64,79,.16); --alta:#e8828a; --bien:#7bc3a0;
  }
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font:15px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);
  background:radial-gradient(ellipse 60% 45% at 50% 18%,var(--halo),transparent 70%),var(--bg);
  display:grid;place-items:center;min-height:100vh;padding:32px 16px}
button,input{font:inherit}
button{cursor:pointer}

.caja{width:100%;max-width:440px}
.caja.ancha{max-width:620px}
.identidad{text-align:center;margin-bottom:22px}
.identidad .emblema{width:92px;height:92px;color:var(--sello);display:block;margin:0 auto 12px}
.nombre{font:600 25px/1 Cinzel,"Times New Roman",serif;letter-spacing:.3em;margin-right:-.3em}
.lema{color:var(--muted);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin:10px 0 0}

.emblema .ojo{transform-box:fill-box;transform-origin:center;animation:parpadeo 7s infinite}
.emblema .ojo:nth-child(2){animation-delay:1.3s}
.emblema .ojo:nth-child(3){animation-delay:2.9s}
.emblema .ojo:nth-child(4){animation-delay:.6s}
.emblema .ojo:nth-child(5){animation-delay:4.4s}
.emblema .ojo:nth-child(6){animation-delay:3.6s}
.emblema .ojo:nth-child(7){animation-delay:5.5s}
@keyframes parpadeo{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
@media (prefers-reduced-motion: reduce){ .emblema .ojo{animation:none} }

.tarjeta{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px 22px;margin-bottom:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 32px -18px rgba(0,0,0,.25);overflow-wrap:anywhere}
h1,h2{font:600 13px/1.3 Cinzel,"Times New Roman",serif;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sello);margin:0 0 12px}
h3{font-size:14px;margin:16px 0 4px}
p{margin:0 0 10px}
a{color:var(--ink);text-underline-offset:2px}
ol{margin:0 0 6px;padding-left:22px}
.nota{color:var(--muted);font-size:13.5px}
label{display:block;font-size:12.5px;color:var(--muted);margin:13px 0 5px}
input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink)}
input:focus{outline:2px solid var(--sello);outline-offset:-1px;border-color:transparent}
.btn{width:100%;padding:11px;border-radius:8px;border:1px solid var(--accent);background:var(--accent);
  color:var(--on-accent);margin-top:16px;font-weight:550;transition:filter .15s}
.btn:hover{filter:brightness(1.15)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.secundario{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.chico{width:auto;padding:7px 14px;margin-top:0;font-size:13.5px;flex:none}
.btn:focus-visible,a:focus-visible,.enlace:focus-visible{outline:2px solid var(--sello);outline-offset:2px}
.fila{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.fila .btn{flex:1 1 140px}
.fila .btn.chico{flex:none}
.fila input{flex:1 1 180px;min-width:0}
#direccion{flex-basis:250px}
.aviso{margin:12px 0 0;font-size:13.5px;min-height:19px;color:var(--alta)}
.aviso.bien{color:var(--bien)}
.enlace{display:block;margin:12px auto 0;border:0;background:none;padding:2px;color:var(--muted);
  font-size:12.5px;text-decoration:underline;text-underline-offset:2px}
.enlace:hover{color:var(--ink)}
.pie{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
.pie a,.pie .enlace{margin:4px 0 0;color:var(--muted);font-size:12.5px}
.oculto{display:none!important}

/* Qué puede el asistente en cada producto, y la lista de asistentes conectados. */
.lista{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--line)}
.lista li{padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.lista li.no{color:var(--ink-2)}
.lista .fila{justify-content:space-between}
.cliente{font:600 20px/1.25 Cinzel,"Times New Roman",serif;letter-spacing:.06em;color:var(--ink);
  text-transform:none;margin:4px 0 6px}
.beta{display:inline-block;margin-left:6px;padding:2px 5px;border:1px solid currentColor;border-radius:3px;font:600 9.5px/1 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;vertical-align:middle;opacity:.8}
.junte{display:block;width:100%;max-width:400px;height:auto;margin:16px auto 6px}
.proveedores{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px}
.proveedores button{padding:6px 12px;border-radius:5px;border:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-size:13.5px;cursor:pointer}
.proveedores button:hover{border-color:var(--sello)}
.proveedores button[aria-checked="true"]{border-color:var(--sello);color:var(--sello);background:var(--halo)}
.guia{border-top:1px solid var(--line);padding-top:10px}
.guia img{display:block;height:96px;width:auto;margin:4px 0 0}