/* Vista «Acceso restringido» · sobria y clara. El terracota marca el riesgo alto; nada grita. */
#vistaAcceso{ --ac-tinta: #2f2d2a; --ac-pro: #8a6f4d; --ac-riesgo: #b5604a; --ac-papel: #f3efe8; }
.ac-cabeza{ display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.ac-cabeza h2{ margin: 4px 0 2px; font: 300 30px/1.1 Outfit, sans-serif; letter-spacing: -.02em; }
.ac-cabeza p{ margin: 0; font-size: 13px; color: var(--ink-2); }
.ac-cabeza .sc-kicker{ font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.ac-cabeza-acc{ display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ac-buscar{ height: 38px; width: 280px; max-width: 100%; padding: 0 14px; border-radius: 999px; border: 1px solid var(--glass-edge); background: var(--glass-2); font: 500 13px Inter, sans-serif; color: var(--ink); }
.ac-confidencial{ margin: 0 0 14px; font-size: 12px; color: var(--ink-3); }

.ac-cuerpo{ display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 16px; align-items: start; margin-bottom: 26px; }
.ac-lista{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; align-content: start; }
.ac-tarjeta{ display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; border: 1px solid var(--glass-edge); background: var(--glass); text-align: left; cursor: pointer; color: var(--ink); font: inherit;
  transition: transform .5s cubic-bezier(.22,.8,.2,1), box-shadow .5s ease, background .4s ease; }
.ac-tarjeta:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px -22px rgba(40,30,20,.55); }
.ac-tarjeta.sel{ background: var(--glass-2); box-shadow: inset 0 0 0 1.5px var(--ac-tinta); }
.ac-tarjeta.levantada{ opacity: .55; }
.ac-tarjeta[hidden]{ display: none; }
.ac-foto{ flex: none; width: 54px; height: 54px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ac-tinta); color: var(--ac-papel); font: 500 17px Outfit, sans-serif; }
.ac-foto img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.ac-foto.grande{ width: 92px; height: 92px; font-size: 28px; }
.n-riesgo .ac-foto, .ac-f-cab .ac-foto.grande{ box-shadow: 0 0 0 2px var(--ac-papel), 0 0 0 3.5px var(--ac-pro); }
.n-riesgo .ac-foto{ box-shadow: 0 0 0 2px var(--ac-papel), 0 0 0 3.5px var(--ac-riesgo); }
.ac-t-txt{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ac-t-txt b{ font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-t-txt small{ font-size: 12px; color: var(--ink-2); }
.ac-t-txt em{ font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.ac-nivel{ flex: none; padding: 4px 9px; border-radius: 999px; font: 600 10.5px Inter, sans-serif; letter-spacing: .04em; text-transform: uppercase; background: color-mix(in srgb, var(--ac-pro) 14%, transparent); color: var(--ac-pro); }
.n-riesgo .ac-nivel{ background: color-mix(in srgb, var(--ac-riesgo) 15%, transparent); color: var(--ac-riesgo); }
.ac-vacio{ grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; padding: 26px; border-radius: 18px; border: 1px dashed var(--line-2); text-align: center; color: var(--ink-2); font-size: 13px; }
.ac-vacio b{ color: var(--ink); font-size: 14px; }

.ac-ficha{ position: sticky; top: 16px; display: none; flex-direction: column; gap: 14px; padding: 20px; border-radius: 22px; background: var(--glass-2); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-up); }
.ac-ficha.abierta{ display: flex; animation: ac-entra .5s cubic-bezier(.22,.8,.2,1); }
@keyframes ac-entra{ from{ opacity: 0; transform: translateY(8px); } }
.ac-f-cab{ display: flex; gap: 14px; align-items: flex-start; }
.ac-f-cab > div{ flex: 1; min-width: 0; }
.ac-f-cab h2{ margin: 2px 0; font: 300 26px/1.15 Outfit, sans-serif; letter-spacing: -.01em; }
.ac-f-cab p{ margin: 2px 0 0; font-size: 12.5px; color: var(--ink-2); }
.ac-n{ display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ac-pro) !important; }
.ac-n.n-riesgo{ color: var(--ac-riesgo) !important; }
.ac-n i{ width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ac-nota{ display: flex; flex-direction: column; gap: 2px; padding: 11px 13px; border-radius: 14px; background: var(--field); font-size: 13px; }
.ac-nota b{ font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ac-nota.alerta{ background: color-mix(in srgb, var(--ac-riesgo) 12%, transparent); }
.ac-nota.alerta b{ color: var(--ac-riesgo); }
.ac-datos{ margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ac-datos div{ padding: 9px 11px; border-radius: 12px; background: var(--field); }
.ac-datos dt{ font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 600; }
.ac-datos dd{ margin: 3px 0 0; font-size: 13px; }
.ac-privado{ border-radius: 14px; background: var(--field); padding: 10px 13px; font-size: 13px; }
.ac-privado summary{ cursor: pointer; font-weight: 600; font-size: 12.5px; color: var(--ink-2); }
.ac-privado p{ margin: 8px 0 0; line-height: 1.5; }
.ac-acciones{ display: flex; gap: 8px; flex-wrap: wrap; }
.ac-acciones .btn{ flex: 1 1 auto; justify-content: center; }
.ac-911{ background: var(--ac-riesgo) !important; color: #fff !important; border-color: transparent !important; }
.ac-reg{ display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px; background: var(--field); }
.ac-reg-t{ margin: 0; font-weight: 600; font-size: 13px; }
.ac-reg textarea{ width: 100%; border-radius: 12px; border: 1px solid var(--line-2); background: var(--glass-2); padding: 10px 12px; font: 500 13px Inter, sans-serif; color: var(--ink); resize: vertical; }
.ac-levantar{ align-self: flex-start; }
.ac-h3{ margin: 6px 0 10px; font: 400 18px Outfit, sans-serif; }

/* Protocolo */
.ac-proto{ display: flex; flex-direction: column; gap: 8px; }
.ac-aviso{ padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--ac-riesgo) 13%, transparent); color: var(--ink); font-size: 13px; line-height: 1.5; }
.ac-aviso b{ color: var(--ac-riesgo); }
.ac-fase{ border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-edge); overflow: hidden; }
.ac-fase summary{ display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; font-weight: 600; font-size: 13.5px; }
.ac-fase summary::-webkit-details-marker{ display: none; }
.ac-fase summary span{ flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ac-tinta); color: var(--ac-papel); font-size: 11px; }
.ac-fase.alerta summary span{ background: var(--ac-riesgo); }
.ac-fase summary::after{ content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg); transition: transform .4s ease; }
.ac-fase[open] summary::after{ transform: rotate(-135deg); }
.ac-fase ol{ margin: 0; padding: 0 16px 6px 46px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.ac-guiones{ display: flex; flex-direction: column; gap: 6px; padding: 6px 14px 14px; }
.ac-guion{ display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--field); text-align: left; font: 500 13px/1.5 Inter, sans-serif; color: var(--ink); cursor: pointer; transition: background .3s ease; }
.ac-guion:hover{ background: var(--glass-2); }
.ac-guion span{ display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }

@media (max-width: 1100px){ .ac-cuerpo{ grid-template-columns: minmax(0, 1fr); } .ac-ficha{ position: static; } }
@media (max-width: 640px){ .ac-buscar{ width: 100%; } .ac-cabeza-acc{ width: 100%; } }
@media (prefers-reduced-motion: reduce){ .ac-tarjeta, .ac-ficha.abierta, .ac-fase summary::after{ transition: none; animation: none; } }
/* Aviso en el mostrador */
.sc-restringido{ display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; background: color-mix(in srgb, #b5604a 12%, transparent); color: var(--ink); font-weight: 500; line-height: 1.45; }
.sc-restringido b{ color: #b5604a; }
.sc-restringido-acc{ display: flex; gap: 6px; flex-wrap: wrap; }

/* Señalética: triángulo amarillo = falta menor · octágono rojo = vetado */
.ac-ico{ flex: none; width: 17px; height: 17px; display: inline-block; vertical-align: -3px; margin-right: 6px; }
.ac-ico.amarillo{ color: #e0b53a; filter: drop-shadow(0 1px 1px rgba(90,60,0,.25)); }
.ac-ico.rojo{ color: #c8402e; filter: drop-shadow(0 1px 1px rgba(90,10,0,.25)); }
.ac-t-txt b{ display: flex; align-items: center; }
.ac-n .ac-ico{ width: 15px; height: 15px; margin-right: 2px; }
.ac-cnt{ display: inline-flex; align-items: center; margin-right: 14px; }
.n-administrativo .ac-nivel{ background: rgba(224,181,58,.18); color: #8a6a12; }
.n-administrativo .ac-foto{ box-shadow: 0 0 0 2px var(--ac-papel), 0 0 0 3.5px #e0b53a; }
.n-prohibido .ac-nivel, .n-riesgo .ac-nivel{ background: rgba(200,64,46,.13); color: #b3392a; }
.n-prohibido .ac-foto{ box-shadow: 0 0 0 2px var(--ac-papel), 0 0 0 3.5px #c8402e; }
.ac-n.n-administrativo{ color: #8a6a12 !important; }
.ac-n.n-prohibido, .ac-n.n-riesgo{ color: #b3392a !important; }
.ac-aviso.menor{ background: rgba(224,181,58,.16); }
.ac-aviso.menor b{ color: #8a6a12; }
.sc-restringido.menor{ background: rgba(224,181,58,.16); }
.sc-restringido.menor b{ color: #8a6a12; }

/* Reglas de oro */
.ac-reglas{ padding: 12px 14px; border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-edge); font-size: 12.5px; }
.ac-reglas b{ display: block; margin-bottom: 4px; font-size: 13px; }
.ac-reglas ul{ margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; color: var(--ink-2); line-height: 1.45; }

/* ---------- Botón de emergencia (mantener presionado) ---------- */
.ac-emergencia{ position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 0; border-radius: 18px; cursor: pointer; text-align: left;
  background: #c8402e; color: #fff; box-shadow: 0 14px 30px -18px rgba(200,64,46,.9); user-select: none; -webkit-user-select: none; touch-action: none; font: inherit; transition: transform .4s cubic-bezier(.22,.8,.2,1); }
.ac-emergencia:active{ transform: scale(.98); }
.ac-em-anillo{ position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: conic-gradient(#fff var(--p, 0%), rgba(255,255,255,.25) 0); }
.ac-em-anillo::after{ content: "!"; position: absolute; inset: 4px; border-radius: 50%; background: #c8402e; display: grid; place-items: center; font: 700 16px Inter, sans-serif; }
.ac-emergencia.cargando .ac-em-anillo{ animation: em-carga 3s linear forwards; }
@property --p{ syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@keyframes em-carga{ to{ --p: 100%; } }
.ac-em-txt b{ display: block; font-size: 14px; }
.ac-em-txt small{ font-size: 11.5px; opacity: .85; }
.ac-fab{ position: fixed; right: 18px; bottom: 18px; z-index: 55; }
.ac-fab .ac-emergencia{ width: auto; padding: 8px 14px 8px 8px; border-radius: 999px; }
.ac-fab .ac-em-txt small{ display: none; }
.ac-fab .ac-emergencia.cargando .ac-em-txt small{ display: block; }
@media (max-width: 1100px){ .ac-fab{ bottom: 92px; right: 12px; } .ac-fab .ac-em-txt{ display: none; } .ac-fab .ac-emergencia{ padding: 8px; } }

/* Simulacro */
.em-sim{ position: fixed; inset: 0; z-index: 330; display: grid; place-items: center; padding: 18px; background: rgba(30,6,4,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: em-entra .4s ease; }
@keyframes em-entra{ from{ opacity: 0; } }
.em-caja{ width: min(600px, 100%); max-height: 92vh; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 26px; border-radius: 26px; background: #fff; color: #2b1411; text-align: center; box-shadow: 0 40px 90px -30px rgba(0,0,0,.7); animation: av-sube .6s cubic-bezier(.22,.8,.2,1); }
.em-sello{ padding: 5px 12px; border-radius: 999px; background: repeating-linear-gradient(135deg, #ffe7a3 0 10px, #ffd76b 10px 20px); color: #5b4300; font: 700 11px Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.em-pulso{ position: relative; width: 70px; height: 70px; margin: 6px 0; }
.em-pulso i{ position: absolute; inset: 0; border-radius: 50%; background: #d62f22; animation: em-ola 2s ease-out infinite; }
.em-pulso i:nth-child(2){ animation-delay: .6s; } .em-pulso i:nth-child(3){ animation-delay: 1.2s; }
.em-pulso::after{ content: "!"; position: absolute; inset: 14px; border-radius: 50%; background: #d62f22; color: #fff; display: grid; place-items: center; font: 700 24px Inter, sans-serif; }
@keyframes em-ola{ from{ transform: scale(.6); opacity: .55; } to{ transform: scale(1.6); opacity: 0; } }
.em-caja h2{ margin: 0; font: 500 28px Outfit, sans-serif; color: #b3231a; }
.em-sub{ margin: 0; font-size: 13.5px; color: #5d4541; }
.em-pasos{ list-style: none; margin: 6px 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.em-pasos li{ display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: #faf6f5; opacity: .45; transition: opacity .6s ease, background .6s ease; }
.em-pasos li.hecho{ opacity: 1; background: #f1f6f1; }
.em-pasos b{ display: block; font-size: 13.5px; } .em-pasos small{ display: block; font-size: 12.5px; line-height: 1.45; color: #5d4541; }
.em-check{ flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 2px solid #d9cfcc; transition: all .5s ease; }
.hecho .em-check{ border-color: #5e8f6c; background: #5e8f6c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.em-real{ width: 100%; padding: 10px 12px; border-radius: 14px; background: #fff1ee; border: 1px solid #f3c2bb; font-size: 13px; text-align: left; }
.em-acc{ display: flex; gap: 8px; width: 100%; }
.em-acc .btn{ flex: 1; justify-content: center; }
.em-911{ background: #d62f22 !important; color: #fff !important; border-color: transparent !important; }
.em-pie{ margin: 0; font-size: 11.5px; color: #8b6b66; }
@media (prefers-reduced-motion: reduce){ .em-pulso i, .em-sim, .em-caja{ animation: none; } .ac-emergencia.cargando .ac-em-anillo{ animation-duration: .01s; } }
.ac-ayuda-motivo{ margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(224,181,58,.14); font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.ac-ayuda-motivo[hidden]{ display: none; }

/* ---------- Explicación 3D del sistema de alertas: maqueta isométrica ---------- */
.x3d{ position: fixed; inset: 0; z-index: 335; display: grid; place-items: center; padding: 16px; background: rgba(24,20,16,.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: em-entra .45s ease; }
.x3d-caja{ width: min(720px, 100%); max-height: 94vh; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 22px 18px; border-radius: 28px; background: #f6f2ec; color: #2b2622; box-shadow: 0 40px 90px -30px rgba(0,0,0,.7); animation: av-sube .7s cubic-bezier(.22,.8,.2,1); }
.x3d-escenario{ position: relative; width: 100%; height: 360px; perspective: 1300px; overflow: hidden; border-radius: 20px; background: radial-gradient(80% 70% at 50% 60%, #fbf8f3, #e9e2d6); }
.x3d-piso{ position: absolute; left: 50%; top: 54%; width: 330px; height: 330px; margin: -165px 0 0 -165px; transform-style: preserve-3d; border-radius: 18px;
  background: linear-gradient(#efe9df, #e6ddcf); box-shadow: 0 0 0 1px rgba(120,100,70,.18), 0 40px 60px -30px rgba(60,40,20,.45);
  transform: rotateX(58deg) rotateZ(-38deg); animation: x-gira 16s ease-in-out infinite alternate; }
@keyframes x-gira{ from{ transform: rotateX(58deg) rotateZ(-44deg); } to{ transform: rotateX(56deg) rotateZ(-32deg); } }
.x3d-zona{ position: absolute; border-radius: 10px; background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(120,100,70,.22); transition: background .8s ease, box-shadow .8s ease; }
.x3d-zona span{ position: absolute; left: 0; right: 0; bottom: 7px; text-align: center; font: 600 9.5px Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8a7a64; }
.z-entrada{ left: 4%; top: 74%; width: 26%; height: 22%; }
.z-recepcion{ left: 4%; top: 44%; width: 26%; height: 26%; }
.z-vestidores{ left: 4%; top: 4%; width: 26%; height: 36%; }
.z-piso{ left: 34%; top: 4%; width: 62%; height: 92%; }
.x3d-boton{ position: absolute; left: 50%; top: 40%; margin-left: -8px; width: 16px; height: 16px; border-radius: 50%; background: #c8402e; box-shadow: 0 0 0 0 rgba(200,64,46,.5); }
/* Cámaras: cubito oscuro con su cono de visión sobre el piso */
.x3d-cam{ position: absolute; width: 0; height: 0; transform-style: preserve-3d; }
.x3d-cam b{ position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 3px; background: #3a3632; transform: translateZ(14px); box-shadow: 0 0 0 2px #f6f2ec; }
.x3d-cono{ position: absolute; left: 0; top: -45px; width: 110px; height: 90px; transform-origin: 0 50%; transform: rotate(var(--r)); clip-path: polygon(0 50%, 100% 0, 100% 100%);
  background: linear-gradient(90deg, rgba(90,80,70,.22), rgba(90,80,70,0)); transition: background .8s ease, transform 1.4s cubic-bezier(.22,.8,.2,1); }
/* Persona: se para sobre el piso y mira a la cámara */
.x3d-persona{ position: absolute; left: 14%; top: 86%; width: 0; height: 0; transform-style: preserve-3d; transition: left 2.2s cubic-bezier(.45,.05,.3,1), top 2.2s cubic-bezier(.45,.05,.3,1); }
.x3d-figura{ position: absolute; left: -9px; bottom: 0; width: 18px; height: 44px; transform-origin: 50% 100%; transform: rotateZ(38deg) rotateX(-90deg); }
.x3d-figura::before{ content: ""; position: absolute; left: 1px; right: 1px; bottom: 0; height: 30px; border-radius: 9px 9px 4px 4px; background: linear-gradient(90deg, #4a443d, #2f2b27); }
.x3d-figura em{ position: absolute; left: 3px; top: 0; width: 12px; height: 12px; border-radius: 50%; background: #4a443d; }
.x3d-mira{ position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 2px solid transparent; transition: border-color .6s ease, transform .6s ease; }
.x3d-onda{ position: absolute; left: 17%; top: 56.5%; width: 20px; height: 20px; margin: -10px; border-radius: 50%; border: 2px solid #c8402e; opacity: 0; }
/* Elementos que flotan arriba (pantalla): celulares, nube, 911 */
.x3d-alto{ position: absolute; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(14px) scale(.9); transition: opacity .7s ease, transform .9s cubic-bezier(.22,.8,.2,1); }
.x3d-celulares{ left: 6%; top: 8%; gap: 8px; }
.x3d-celulares i{ width: 22px; height: 38px; border-radius: 6px; background: #2f2b27; box-shadow: inset 0 0 0 2px #2f2b27, inset 0 0 0 5px #5b544c; position: relative; }
.x3d-celulares i::after{ content: "!"; position: absolute; inset: 7px 4px; border-radius: 3px; background: #c8402e; color: #fff; display: grid; place-items: center; font: 700 10px Inter, sans-serif; }
.x3d-nube{ right: 7%; top: 8%; flex-direction: column; width: 92px; height: 58px; border-radius: 30px; background: #fff; box-shadow: 0 14px 30px -18px rgba(0,0,0,.45); font-size: 11px; }
.x3d-nube b{ font-size: 12px; }
.x3d-nube span{ display: flex; align-items: center; gap: 4px; color: #c8402e; font-weight: 700; font-size: 10px; letter-spacing: .1em; }
.x3d-nube span::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: #c8402e; animation: x-rec 1s steps(2) infinite; }
@keyframes x-rec{ 50%{ opacity: 0; } }
.x3d-911{ right: 7%; bottom: 10%; flex-direction: column; width: 92px; height: 66px; border-radius: 18px; background: #c8402e; color: #fff; box-shadow: 0 14px 30px -14px rgba(200,64,46,.8); }
.x3d-911 b{ font: 700 24px/1 Outfit, sans-serif; } .x3d-911 span{ font-size: 10px; opacity: .9; }

/* ----- Escenas ----- */
[data-paso] .z-recepcion{ background: rgba(255,255,255,.75); }
[data-paso="llega"] .x3d-persona{ left: 20%; top: 60%; }
[data-paso="llega"] .x3d-boton{ animation: x-boton 1.4s ease-out 1.8s infinite; }
@keyframes x-boton{ from{ box-shadow: 0 0 0 0 rgba(200,64,46,.55); } to{ box-shadow: 0 0 0 16px rgba(200,64,46,0); } }
[data-paso="alerta"] .x3d-persona{ left: 20%; top: 60%; }
[data-paso="alerta"] .x3d-onda{ animation: x-onda 1.6s ease-out infinite; }
@keyframes x-onda{ from{ opacity: .8; transform: scale(.6); } to{ opacity: 0; transform: scale(9); } }
[data-paso="alerta"] .x3d-celulares, [data-paso="camaras"] .x3d-celulares, [data-paso="evidencia"] .x3d-celulares, [data-paso="autoridad"] .x3d-celulares{ opacity: 1; transform: none; }
[data-paso="alerta"] .x3d-celulares i{ animation: x-vibra .5s ease-in-out infinite; }
[data-paso="alerta"] .x3d-celulares i:nth-child(2){ animation-delay: .15s; } [data-paso="alerta"] .x3d-celulares i:nth-child(3){ animation-delay: .3s; }
@keyframes x-vibra{ 25%{ transform: rotate(-6deg); } 75%{ transform: rotate(6deg); } }
[data-paso="camaras"] .x3d-persona{ left: 66%; top: 42%; }
[data-paso="evidencia"] .x3d-persona{ left: 74%; top: 72%; }
[data-paso="autoridad"] .x3d-persona{ left: 58%; top: 28%; }
:is([data-paso="camaras"], [data-paso="evidencia"], [data-paso="autoridad"]) .x3d-mira{ border-color: #c8402e; animation: x-mira 1.6s ease-in-out infinite; }
@keyframes x-mira{ 50%{ transform: scale(1.25); } }
:is([data-paso="camaras"], [data-paso="evidencia"], [data-paso="autoridad"]) .x3d-cono{ background: linear-gradient(90deg, rgba(200,64,46,.35), rgba(200,64,46,0)); }
[data-paso="camaras"] .c1 .x3d-cono{ transform: rotate(20deg); } [data-paso="camaras"] .c2 .x3d-cono{ transform: rotate(160deg); }
[data-paso="camaras"] .c3 .x3d-cono{ transform: rotate(230deg); } [data-paso="camaras"] .c4 .x3d-cono{ transform: rotate(330deg); }
[data-paso="evidencia"] .c2 .x3d-cono{ transform: rotate(110deg); } [data-paso="evidencia"] .c3 .x3d-cono{ transform: rotate(200deg); }
[data-paso="autoridad"] .c1 .x3d-cono{ transform: rotate(5deg); } [data-paso="autoridad"] .c2 .x3d-cono{ transform: rotate(170deg); }
:is([data-paso="evidencia"], [data-paso="autoridad"]) .x3d-nube{ opacity: 1; transform: none; }
[data-paso="autoridad"] .x3d-911{ opacity: 1; transform: none; animation: x-boton 1.6s ease-out .9s infinite; }

.x3d-texto{ text-align: center; min-height: 104px; }
.x3d-n{ margin: 2px 0 0; font: 700 10.5px Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #a1907a; }
.x3d-texto h2{ margin: 4px 0; font: 400 26px/1.15 Outfit, sans-serif; }
.x3d-d{ margin: 0 auto; max-width: 520px; font-size: 13.5px; line-height: 1.55; color: #5d544a; }
.x3d-puntos{ display: flex; gap: 6px; }
.x3d-puntos i{ width: 22px; height: 4px; border-radius: 2px; background: #ddd3c4; transition: background .6s ease; }
.x3d-puntos i.on{ background: #c8402e; }
.x3d-acc{ display: flex; gap: 8px; width: 100%; }
.x3d-acc .btn{ flex: 1; justify-content: center; }
@media (max-width: 640px){ .x3d-escenario{ height: 280px; } .x3d-piso{ width: 250px; height: 250px; margin: -125px 0 0 -125px; } .x3d-cono{ width: 80px; height: 66px; top: -33px; } }
@media (prefers-reduced-motion: reduce){ .x3d-piso, .x3d-onda, .x3d-celulares i, .x3d-mira, .x3d-911, .x3d-boton{ animation: none !important; } .x3d-persona, .x3d-cono, .x3d-alto{ transition: none; } }

.em-confirma{ width: min(420px, 100%); }
.em-confirma .em-acc .btn{ min-height: 46px; }
/* Teléfono: botones en rejilla pareja de 2 columnas y nombres completos */
@media (max-width: 640px){
  .ac-cabeza-acc{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ac-cabeza-acc .ac-buscar{ grid-column: 1 / -1; }
  .ac-cabeza-acc > button{ width: 100%; height: 40px; justify-content: center; text-align: center; }
  .ac-cabeza-acc > #acAgregar, .ac-cabeza-acc > #acTodas[hidden] + #acExplicar{ grid-column: 1 / -1; }
  .ac-t-txt b{ white-space: normal; line-height: 1.25; }
  .ac-fab .ac-emergencia{ padding: 6px; }
  .ac-fab .ac-em-anillo{ width: 30px; height: 30px; }
}