/* Paleta: fondo #f4f7fb, tarjetas #ffffff, azul primario #1d4ed8, verde de seguridad #10b981. Siempre en claro: es la identidad de la app. */
:root { color-scheme: light; --fondo: #f4f7fb; --tarjeta: #ffffff; --texto: #0f172a; --suave: #475569; --azul: #1d4ed8; --azul-hover: #1e40af; --verde: #10b981; --verde-fondo: #ecfdf5; --verde-borde: #6ee7b7; --verde-texto: #065f46; --borde: #e2e8f0; --aviso-fondo: #fef3c7; --aviso-texto: #78350f; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--fondo); color: var(--texto); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.5; }
.tarjeta { width: 100%; max-width: 560px; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 20px; padding: 28px 24px 32px; text-align: center; box-shadow: 0 10px 30px rgba(15,23,42,.08); }
[hidden] { display: none !important; }

/* Insignia de disponibilidad del tecnico (estado REAL: su panel conectado) */
.insignia { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px; padding: 7px 15px; border-radius: 999px; font-size: .86rem; font-weight: 600; line-height: 1.3; border: 1px solid; text-align: left; }
.insignia.en-linea { background: var(--verde-fondo); border-color: var(--verde-borde); color: var(--verde-texto); }
.insignia.fuera { background: #f1f5f9; border-color: #cbd5e1; color: var(--suave); }
.punto { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: #94a3b8; }
.en-linea .punto { background: var(--verde); animation: pulso 1.8s ease-out infinite; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.55); } 70% { box-shadow: 0 0 0 9px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } }

.logo { display: block; margin: 0 auto 8px; }
h1 { margin: 0; font-size: 1.55rem; line-height: 1.25; }
.sub { margin: 10px 0 22px; color: var(--suave); font-size: 1.04rem; }

/* Boton principal */
.boton { display: block; width: 100%; background: var(--azul); color: #fff; text-decoration: none; font-weight: 700; padding: 18px 20px; border-radius: 14px; font-size: 1.2rem; box-shadow: 0 8px 20px rgba(29,78,216,.28); transition: background .18s, box-shadow .18s, transform .18s; }
.boton:hover { background: var(--azul-hover); box-shadow: 0 10px 24px rgba(29,78,216,.36); transform: translateY(-1px); }
.boton:focus-visible { outline: 3px solid var(--texto); outline-offset: 3px; }
.aviso { margin: 10px 0 16px; color: var(--suave); font-size: .9rem; }
.alerta { margin: 0 0 18px; padding: 14px 16px; border-radius: 12px; background: var(--aviso-fondo); color: var(--aviso-texto); text-align: left; }

/* Clave del ZIP (solo si el ZIP de verdad esta protegido) */
.clave { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; margin: 0 0 18px; padding: 14px 16px; border: 2px dashed var(--azul); border-radius: 12px; background: #eff6ff; font-weight: 600; }
.clave code { font-family: ui-monospace, Consolas, monospace; font-size: 1.3rem; font-weight: 800; letter-spacing: .08em; background: #fff; border: 1px solid var(--borde); padding: 4px 12px; border-radius: 8px; user-select: all; }
.btn-copiar { cursor: pointer; border: 0; border-radius: 10px; background: var(--azul); color: #fff; font-weight: 700; font-size: .95rem; padding: 9px 16px; }
.btn-copiar:hover { background: var(--azul-hover); }
.btn-copiar:focus-visible { outline: 3px solid var(--texto); outline-offset: 2px; }
.copiada { color: var(--verde-texto); font-size: .9rem; }

.confianza { list-style: none; margin: 0 0 22px; padding: 14px 16px; text-align: left; background: var(--verde-fondo); border: 1px solid var(--verde-borde); border-radius: 12px; font-size: .95rem; color: var(--verde-texto); }
.confianza li { display: flex; gap: 10px; align-items: center; margin: 6px 0; }
.confianza span { flex: 0 0 22px; text-align: center; }

/* Accesos: visitante o cliente con cuenta */
.accesos { margin: 0 0 22px; text-align: left; }
.accesos h2 { margin: 0 0 10px; font-size: 1.1rem; text-align: center; }
.acceso { margin: 0 0 10px; padding: 13px 15px; border: 1px solid var(--borde); border-radius: 12px; background: #f8fafc; }
.acceso p { margin: 0; font-size: .95rem; color: var(--suave); }
.acceso .acceso-tit { color: var(--texto); font-weight: 700; font-size: 1rem; margin-bottom: 2px; }
.acceso-visitante { border-color: #bfdbfe; background: #eff6ff; border-left: 4px solid var(--azul); }

/* Guia con imagenes */
.guia { margin: 6px 0 20px; text-align: left; }
.guia h2 { margin: 0 0 12px; font-size: 1.15rem; text-align: center; }
.guia-pasos { list-style: none; margin: 0; padding: 0; }
.guia-pasos > li { display: block; margin: 0 0 22px; padding: 0 0 22px; border-bottom: 1px solid var(--borde); }
.guia-pasos > li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.paso-cab { display: flex; gap: 12px; align-items: flex-start; }
.paso-cab p { margin: 0; font-size: 1.02rem; }
.paso-cab .num { margin-top: 1px; }
.guia-pasos img { display: block; max-width: 100%; height: auto; margin: 12px auto 0; border: 1px solid var(--borde); border-radius: 12px; box-shadow: 0 2px 10px rgba(15,23,42,.08); }
.guia-pasos a:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 12px; display: block; }
.pie-img { margin: 6px 0 0; text-align: center; color: var(--suave); font-size: .8rem; }
.pie-img a { color: var(--azul); font-weight: 600; }
.num { flex: 0 0 38px; height: 38px; border-radius: 50%; background: var(--azul); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; }

.tecnico { margin: 4px 0 8px; padding: 18px 16px; border: 1px solid var(--borde); border-radius: 14px; text-align: center; }
.tecnico p { margin: 0; }
.rol { color: var(--suave); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.nombre { font-size: 1.15rem; font-weight: 700; margin-top: 2px !important; }
.cargo { color: var(--suave); font-size: .95rem; }
.contacto { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.enlace { display: block; padding: 12px 14px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 1rem; word-break: break-word; }
.whatsapp { background: #16a34a; color: #fff; }
.correo { border: 1px solid var(--borde); color: var(--azul); }
.enlace:hover { filter: brightness(1.08); }
.enlace:focus-visible { outline: 3px solid var(--texto); outline-offset: 2px; }
.ayuda { text-align: left; margin-top: 10px; border-top: 1px solid var(--borde); padding-top: 10px; font-size: .92rem; }
.ayuda summary { cursor: pointer; color: var(--azul); font-weight: 600; }
.ayuda p { margin: 8px 0 0; color: var(--suave); }
.huella { font-family: ui-monospace, Consolas, monospace; font-size: .75rem; word-break: break-all; }

@media (prefers-reduced-motion: reduce) { .en-linea .punto { animation: none; } .boton { transition: none; } .boton:hover { transform: none; } }
@media (max-width: 420px) { .tarjeta { padding: 22px 16px 26px; } h1 { font-size: 1.35rem; } }