/* GUACAMAYA — sala de demostración (simulada, sin datos reales) */
:root { --rojo: #e8442b; --rojo-2: #c7341d; --amarillo: #ffc21a; --azul: #1767c2; --verde: #1f9d63; --morado: #7b4bd1; --tinta: #1d2333; --tinta-2: #4b5468; --tinta-3: #8a92a5; --borde: #ece3d6; --fondo-app: #fff8ef; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; background: #121212; color: #fff; line-height: 1.45; }
button { font: inherit; }
.d-cab { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 10px 16px; background: var(--rojo); box-shadow: 0 4px 16px -8px rgba(0,0,0,.5); }
.d-marca { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 900; font-size: 1.2rem; }
.d-marca img { background: #111; border-radius: 10px; padding: 3px 5px; }
.d-marca small { display: block; font-size: .66rem; letter-spacing: .08em; margin-top: -3px; opacity: .9; }
.d-etq { font-size: .78rem; font-weight: 800; background: rgba(0,0,0,.2); padding: 5px 10px; border-radius: 999px; }
.d-guia { max-width: 1240px; margin: 0 auto; padding: 16px 16px 6px; }
.d-paso span { color: var(--amarillo); font-weight: 900; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.d-paso h1 { margin: 4px 0 4px; font-size: clamp(1.3rem, 4vw, 2rem); line-height: 1.15; }
.d-paso p { margin: 0; color: #cfd2d9; max-width: 75ch; min-height: 2.9em; }
.d-barra { height: 6px; border-radius: 999px; background: #2b2b2f; margin: 12px 0; overflow: hidden; }
.d-barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--amarillo), var(--rojo)); border-radius: 999px; transition: width .5s; }
.d-ctrl { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; max-width: 560px; }
.d-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 18px; border-radius: 999px; border: 0; background: var(--amarillo); color: #111; font-weight: 900; cursor: pointer; text-decoration: none; }
.d-btn.sec { background: #2b2b2f; color: #fff; }
.d-btn.on { background: var(--verde); color: #fff; }
.d-btn:disabled { opacity: .4; cursor: default; }
#bSig { white-space: nowrap; }
.d-tabs { position: sticky; top: 0; z-index: 10; display: flex; gap: 6px; overflow-x: auto; padding: 10px 16px; background: #121212; scrollbar-width: none; }
.d-tabs::-webkit-scrollbar { display: none; }
.d-tabs button { flex: none; position: relative; padding: 9px 14px; border-radius: 999px; border: 2px solid #34343a; background: #1c1c1f; color: #ddd; font-weight: 800; cursor: pointer; }
.d-tabs button.on { background: #fff; color: #111; border-color: #fff; }
.d-tabs button.mueve::after { content: ''; position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 0 0 rgba(232,68,43,.7); animation: punto 1.2s infinite; }
@keyframes punto { 70% { box-shadow: 0 0 0 8px rgba(232,68,43,0); } }
.d-tels { max-width: 1240px; margin: 0 auto; padding: 4px 16px 24px; display: grid; gap: 18px; }
.tel { display: none; width: 100%; max-width: 380px; margin: 0 auto; border-radius: 34px; background: #000; padding: 10px; box-shadow: 0 20px 50px rgba(0,0,0,.6); border: 2px solid #2b2b2f; transition: border-color .3s, transform .3s; }
.tel.activo { display: block; }
.tel-cab { text-align: center; font-weight: 900; font-size: .85rem; color: #bbb; padding: 2px 0 8px; }
.pantalla { position: relative; height: 640px; overflow: hidden auto; border-radius: 24px; background: var(--fondo-app); color: var(--tinta); }
.tel.oscuro .pantalla { background: #0d0f14; color: #e8eaf0; }
@media (min-width: 1100px) {
  .d-tabs { display: none; }
  .d-tels { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .tel { display: block; max-width: none; }
  .tel.mueve { border-color: var(--amarillo); transform: translateY(-6px); box-shadow: 0 0 0 4px rgba(255,194,26,.25), 0 20px 50px rgba(0,0,0,.6); }
  .tel.mueve .tel-cab { color: var(--amarillo); }
  .pantalla { height: 600px; }
}
.d-pie { text-align: center; padding: 10px 16px 40px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ── contenido de las pantallas ── */
.ap { padding: 14px; font-size: .9rem; }
.ap h2 { font-size: 1.15rem; margin: 2px 0 8px; line-height: 1.2; }
.ap h3 { font-size: .95rem; margin: 12px 0 6px; }
.chip { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: .72rem; font-weight: 900; }
.chip.v { background: #e3f6ec; color: var(--verde); } .chip.a { background: #fff3d1; color: #7a5600; } .chip.r { background: #fde6e2; color: var(--rojo-2); } .chip.z { background: #e8f0fb; color: var(--azul); }
.tarj { background: #fff; border: 1px solid var(--borde); border-radius: 16px; padding: 12px; margin-bottom: 10px; }
.oscuro .tarj { background: #171a22; border-color: #262a35; }
.fila { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; }
.fila.t { font-weight: 900; font-size: 1.05rem; border-top: 2px dashed var(--borde); margin-top: 6px; padding-top: 8px; }
.oscuro .fila.t { border-color: #2c3140; }
.boton { display: block; width: 100%; text-align: center; padding: 12px; border-radius: 999px; font-weight: 900; color: #fff; background: var(--rojo); border: 0; margin-top: 8px; }
.boton.v { background: var(--verde); } .boton.z { background: var(--azul); } .boton.am { background: var(--amarillo); color: #111; } .boton.gris { background: #e9e4dc; color: var(--tinta-2); }
.pulso { animation: pulso 1.3s ease-in-out infinite; }
@keyframes pulso { 50% { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(31,157,99,.18); } }
.portada { height: 96px; border-radius: 0 0 18px 18px; margin: -14px -14px 0; display: grid; place-items: center; font-size: 2.6rem; letter-spacing: 8px; background: linear-gradient(135deg, var(--rojo), var(--amarillo)); }
.logo-n { width: 54px; height: 54px; border-radius: 14px; background: #1d1d1d; display: grid; place-items: center; font-size: 1.7rem; border: 3px solid #fff; margin-top: -26px; box-shadow: 0 4px 10px rgba(0,0,0,.2); }
.prod { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--borde); border-radius: 14px; padding: 8px; margin-bottom: 8px; transition: box-shadow .3s; }
.prod .ic { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; font-size: 1.8rem; flex: none; }
.prod b { display: block; font-size: .88rem; } .prod small { color: var(--tinta-3); }
.prod .pr { color: var(--rojo-2); font-weight: 900; }
.prod .mas { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; background: var(--rojo); color: #fff; display: grid; place-items: center; font-weight: 900; flex: none; }
.prod.en { box-shadow: 0 0 0 3px var(--amarillo); }
.prod.en .mas { background: var(--verde); }
.barra-car { position: sticky; bottom: 0; margin: 10px -14px -14px; padding: 12px 14px; background: var(--rojo); color: #fff; font-weight: 900; display: flex; justify-content: space-between; border-radius: 16px 16px 0 0; }
.estado { text-align: center; padding: 16px 10px; border-radius: 18px; color: #fff; margin-bottom: 10px; }
.estado small { display: block; opacity: .9; }
.estado b { display: block; font-size: 1.3rem; }
.estado .prog { height: 6px; border-radius: 999px; background: rgba(255,255,255,.3); margin: 10px auto 0; max-width: 220px; overflow: hidden; }
.estado .prog i { display: block; height: 100%; background: #fff; border-radius: 999px; }
.pin { text-align: center; border: 2px solid var(--verde); }
.pin small { color: var(--verde); font-weight: 900; letter-spacing: .12em; display: block; }
.pin b { display: block; font-size: 2rem; letter-spacing: .3em; }
.domi-c { display: flex; gap: 10px; align-items: center; }
.domi-c .f { width: 52px; height: 52px; border-radius: 50%; background: #e7f5ff; display: grid; place-items: center; font-size: 1.7rem; border: 3px solid var(--amarillo); flex: none; }
.placa { display: inline-block; padding: 1px 8px; border-radius: 5px; background: var(--amarillo); color: #111; font-weight: 900; border: 2px solid #111; font-size: .8rem; letter-spacing: .06em; }
.pasos { list-style: none; margin: 0; padding: 0; }
.pasos li { position: relative; padding: 0 0 10px 24px; color: var(--tinta-3); font-size: .85rem; }
.pasos li::before { content: ''; position: absolute; left: 3px; top: 4px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--borde); background: #fff; }
.pasos li.h { color: var(--tinta); font-weight: 800; }
.pasos li.h::before { background: var(--verde); border-color: var(--verde); }
.estrellas { font-size: 1.8rem; color: #f5b301; letter-spacing: 4px; text-align: center; }
.alarma { position: absolute; inset: 0; z-index: 5; background: rgba(200,40,15,.94); display: grid; place-items: center; padding: 14px; animation: alarma 1s ease-in-out infinite; }
@keyframes alarma { 50% { background: rgba(232,68,43,.98); } }
.alarma .caja { background: #fff; color: var(--tinta); border-radius: 20px; padding: 16px; text-align: center; width: 100%; }
.alarma h2 { color: var(--rojo-2); font-size: 1.4rem; margin: 2px 0; }
.alarma ul { text-align: left; background: #fbf4ea; border-radius: 12px; padding: 8px 8px 8px 26px; margin: 8px 0; }
.ops { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; margin: 6px 0; }
.ops span { padding: 6px 9px; border-radius: 10px; border: 2px solid var(--borde); font-weight: 800; font-size: .8rem; }
.ops span.on { border-color: var(--verde); background: #e3f6ec; }
.interr { display: flex; justify-content: space-between; align-items: center; padding: 12px; border-radius: 14px; border: 2px solid var(--verde); background: #eefaf3; margin-bottom: 10px; font-weight: 900; }
.oscuro .interr { background: rgba(34,178,110,.12); color: #fff; }
.sw { width: 46px; height: 26px; border-radius: 999px; background: #22b26e; position: relative; flex: none; }
.sw::after { content: ''; position: absolute; right: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; }
.mapa { position: relative; height: 170px; border-radius: 14px; overflow: hidden; background: #e9efe4; margin-bottom: 10px; }
.oscuro .mapa { background: #1d2430; }
.mapa svg { width: 100%; height: 100%; display: block; }
.moto { position: absolute; font-size: 1.6rem; left: 12%; top: 64%; transform: translate(-50%, -50%); filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.moto.anda { animation: ruta 9s linear infinite; }
@keyframes ruta { 0% { left: 14%; top: 66%; } 35% { left: 42%; top: 66%; } 55% { left: 42%; top: 36%; } 100% { left: 84%; top: 30%; } }
.nota { font-size: .78rem; color: var(--tinta-3); }
.oscuro .nota { color: #9aa3b5; }
.lista-adm .tarj { display: flex; gap: 8px; align-items: flex-start; font-size: .82rem; }
.lista-adm .tarj b { display: block; }
.reparto .fila b { font-size: 1rem; }
.cod { display: flex; gap: 6px; justify-content: center; margin: 8px 0; }
.cod span { width: 42px; height: 50px; border-radius: 10px; background: #fff; color: #111; display: grid; place-items: center; font-size: 1.5rem; font-weight: 900; }
.reloj { font-size: 1.6rem; font-weight: 900; color: var(--rojo-2); }
.aparece { animation: aparece .45s ease-out; }
@keyframes aparece { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .pulso, .alarma, .moto.anda, .aparece, .d-tabs button.mueve::after { animation: none; } }