/* Registro de visitas · página pública (visitas.html) y módulos del anfitrión y portería */
:root {
  --vs-rojo: #dc2626;
  --vs-rojo-osc: #b91c1c;
  --vs-rojo-lt: #fef2f2;
  --vs-tx: #0f172a;
  --vs-tx2: #475569;
  --vs-tx3: #94a3b8;
  --vs-borde: #e2e8f0;
  --vs-fondo: #f6f7fb;
  --vs-ok: #047857;
  --vs-ok-lt: #ecfdf5;
  --vs-ambar: #b45309;
  --vs-ambar-lt: #fffbeb;
  --vs-azul: #1d4ed8;
  --vs-azul-lt: #eff6ff;
  --vs-radio: 16px;
}
.vs-body { margin: 0; background: var(--vs-fondo); color: var(--vs-tx); font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
.vs-body *, .vs-root * { box-sizing: border-box; }
.vs-top { background: #fff; border-bottom: 1px solid var(--vs-borde); position: sticky; top: 0; z-index: 10; }
.vs-top-in { max-width: 620px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 12px; }
.vs-top img { height: 40px; width: auto; }
.vs-ayuda-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 700; color: var(--vs-tx2); background: #f1f5f9; border: none; border-radius: 999px; padding: 8px 12px; cursor: pointer; }
.vs-ayuda-btn:hover { background: var(--vs-rojo-lt); color: var(--vs-rojo); }
.vs-ayuda-btn i { color: var(--vs-rojo); font-size: 15px; }
.vs-top-txt { display: flex; flex-direction: column; line-height: 1.15; }
.vs-top-txt strong { font-size: 15px; }
.vs-top-txt span { font-size: 12px; color: var(--vs-tx2); }
.vs-main { max-width: 620px; margin: 0 auto; padding: 18px 16px 48px; }
.vs-foot { max-width: 620px; margin: 0 auto; padding: 8px 16px 32px; font-size: 12px; color: var(--vs-tx3); text-align: center; line-height: 1.7; }
.vs-foot-logo { height: 34px; width: auto; opacity: .75; margin-bottom: 6px; }
.vs-foot-copy { margin-top: 6px; color: #cbd5e1; }
.vs-foot button { background: none; border: none; color: var(--vs-tx2); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }

.vs-card { background: #fff; border: 1px solid var(--vs-borde); border-radius: var(--vs-radio); padding: 18px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.vs-hero { background: linear-gradient(135deg, #fff 55%, var(--vs-rojo-lt)); }
.vs-hero h1 { font-size: 22px; line-height: 1.2; margin: 0 0 6px; }
.vs-hero h1 em { font-style: normal; color: var(--vs-rojo); }
.vs-hero p { margin: 0; color: var(--vs-tx2); font-size: 14px; line-height: 1.5; }
.vs-como { list-style: none; padding: 0; margin: 16px 0 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; counter-reset: paso; }
.vs-como li { background: #fff; border: 1px solid var(--vs-borde); border-radius: 12px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; font-size: 11.5px; color: var(--vs-tx2); position: relative; }
.vs-como li i { width: 34px; height: 34px; border-radius: 50%; background: var(--vs-rojo-lt); color: var(--vs-rojo); display: grid; place-items: center; font-size: 15px; }
.vs-como li strong { display: block; color: var(--vs-tx); font-size: 12.5px; }
.vs-tipos { border: none; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vs-tipos legend { font-size: 13px; font-weight: 700; margin-bottom: 8px; padding: 0; }
.vs-tipo { position: relative; display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--vs-borde); border-radius: 12px; padding: 10px; cursor: pointer; background: #fff; transition: border-color .15s, background .15s; }
.vs-tipo:hover { border-color: #fca5a5; }
.vs-tipo input { position: absolute; opacity: 0; pointer-events: none; }
.vs-tipo > i { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; display: grid; place-items: center; background: #f1f5f9; color: var(--vs-tx2); font-size: 15px; }
.vs-tipo span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.3; }
.vs-tipo small { color: var(--vs-tx3); font-size: 11.5px; }
.vs-tipo-on { border-color: var(--vs-rojo); background: var(--vs-rojo-lt); }
.vs-tipo-on > i { background: var(--vs-rojo); color: #fff; }
.vs-tipo input:focus-visible + i { outline: 2px solid var(--vs-rojo); outline-offset: 2px; }
.vs-tipo-epp { position: absolute; top: 6px; right: 8px; font-style: normal; font-size: 10.5px; font-weight: 800; color: #b45309; }
.vs-epp { display: flex; gap: 10px; align-items: flex-start; background: #fffbeb; border: 1.5px solid #fcd34d; color: #92400e; border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.45; margin: 0 0 14px; text-align: left; }
.vs-epp > i { font-size: 18px; color: #d97706; margin-top: 1px; }
@media (max-width: 380px) { .vs-tipos { grid-template-columns: 1fr; } }
.vs-hero-porteria { background: linear-gradient(135deg, #fff 45%, #fff7ed); border-color: #fed7aa; }
.vs-porteria-tag { display: inline-flex; align-items: center; gap: 6px; background: #ffedd5; color: #9a3412; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; margin-bottom: 8px; }
.vs-hero-ayuda { font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.vs-hero-ayuda:hover { text-decoration: underline; }
.vs-hint { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; font-weight: 500; color: var(--vs-tx3); line-height: 1.4; }
.vs-hint i { color: #f59e0b; margin-top: 2px; }
.vs-hint-bloque { margin: -6px 0 14px; }
.vs-tip { display: flex; gap: 8px; align-items: flex-start; text-align: left; background: var(--vs-ambar-lt); color: #92400e; border-radius: 12px; padding: 9px 12px; font-size: 12.5px; line-height: 1.45; margin: 0 0 14px; }
.vs-tip i { margin-top: 2px; }
.vs-pase-logo { height: 46px; width: auto; display: block; margin: 0 auto 10px; }
.vs-pasos-ayuda { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 6px; }
.vs-pasos-ayuda > div { display: flex; gap: 12px; align-items: flex-start; background: #f8fafc; border-radius: 12px; padding: 10px 12px; }
.vs-pasos-ayuda b { flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--vs-rojo); color: #fff; display: grid; place-items: center; font-size: 14px; }
.vs-pasos-ayuda strong { display: block; color: var(--vs-tx); }
.vs-h2 { font-size: 16px; font-weight: 800; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.vs-h2 i { color: var(--vs-rojo); }
.vs-muted { color: var(--vs-tx2); font-size: 13px; line-height: 1.5; }
.vs-small { font-size: 12px; }
.vs-pasos { display: flex; gap: 6px; margin: 4px 0 14px; }
.vs-paso { flex: 1; height: 4px; border-radius: 4px; background: var(--vs-borde); }
.vs-paso-on { background: var(--vs-rojo); }

.vs-campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 13px; font-weight: 700; color: var(--vs-tx); }
.vs-campo small { font-weight: 500; color: var(--vs-tx3); }
.vs-campo input, .vs-campo textarea, .vs-campo select, .vs-input {
  font: inherit; font-weight: 500; font-size: 15px; padding: 11px 12px; border: 1.5px solid var(--vs-borde); border-radius: 12px; background: #fff; color: var(--vs-tx); width: 100%;
}
.vs-campo input:focus, .vs-campo textarea:focus, .vs-input:focus { outline: none; border-color: var(--vs-rojo); box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
.vs-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.vs-opcional { border: 1px dashed var(--vs-borde); border-radius: 12px; padding: 12px 12px 0; margin-bottom: 14px; background: #fcfcfd; }
.vs-opcional > p { margin: 0 0 10px; font-size: 12.5px; color: var(--vs-tx2); }
.vs-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.vs-sug { border: 1px solid var(--vs-borde); border-radius: 12px; margin-top: -8px; margin-bottom: 14px; overflow: hidden; }
.vs-sug button { display: flex; width: 100%; justify-content: space-between; gap: 8px; text-align: left; background: #fff; border: none; border-bottom: 1px solid #f1f5f9; padding: 10px 12px; font: inherit; font-size: 14px; cursor: pointer; }
.vs-sug button:hover, .vs-sug button:focus { background: var(--vs-rojo-lt); outline: none; }
.vs-sug span { color: var(--vs-tx3); font-size: 12px; }
.vs-elegido { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--vs-ok); background: var(--vs-ok-lt); border-radius: 12px; margin-bottom: 14px; font-size: 14px; }
.vs-elegido strong { flex: 1; }

.vs-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--vs-tx2); margin-bottom: 12px; cursor: pointer; }
.vs-check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--vs-rojo); flex: 0 0 20px; }
.vs-link { background: none; border: none; color: var(--vs-rojo); font: inherit; font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline; }

.vs-btn { font: inherit; font-weight: 700; font-size: 15px; border-radius: 12px; padding: 12px 18px; border: 1.5px solid var(--vs-borde); background: #fff; color: var(--vs-tx); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; }
.vs-btn:hover { background: #f8fafc; }
.vs-btn[disabled] { opacity: .55; cursor: default; }
.vs-btn-prim { background: var(--vs-rojo); border-color: var(--vs-rojo); color: #fff; }
.vs-btn-prim:hover { background: var(--vs-rojo-osc); }
.vs-btn-ok { background: var(--vs-ok); border-color: var(--vs-ok); color: #fff; }
.vs-btn-bloque { width: 100%; }
.vs-btn-sm { min-height: 34px; padding: 6px 12px; font-size: 13px; border-radius: 10px; }
.vs-acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.vs-acciones > .vs-btn { flex: 1 1 160px; }

.vs-error { background: var(--vs-rojo-lt); color: var(--vs-rojo-osc); border: 1px solid #fecaca; border-radius: 12px; padding: 10px 12px; font-size: 13.5px; margin-bottom: 14px; display: flex; gap: 8px; }
.vs-aviso { background: var(--vs-azul-lt); color: #1e3a8a; border: 1px solid #bfdbfe; border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.5; margin-bottom: 14px; display: flex; gap: 8px; }

/* Estado y pase */
.vs-estado { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; padding: 5px 11px; border-radius: 999px; }
.vs-e-pendiente, .vs-e-invitada { background: var(--vs-ambar-lt); color: var(--vs-ambar); }
.vs-e-aprobada { background: var(--vs-ok-lt); color: var(--vs-ok); }
.vs-e-en_curso { background: var(--vs-azul-lt); color: var(--vs-azul); }
.vs-e-concluida { background: #f1f5f9; color: var(--vs-tx2); }
.vs-e-rechazada, .vs-e-cancelada, .vs-e-no_asistio { background: var(--vs-rojo-lt); color: var(--vs-rojo-osc); }
.vs-pase { text-align: center; padding: 22px 18px; border-top: 6px solid var(--vs-rojo); }
.vs-qr { width: min(260px, 72vw); aspect-ratio: 1; margin: 6px auto 12px; background: #fff; border-radius: 14px; padding: 10px; border: 1px solid var(--vs-borde); }
.vs-qr svg, .vs-qr img { width: 100%; height: 100%; display: block; }
.vs-codigo { font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 26px; font-weight: 800; letter-spacing: 4px; color: var(--vs-tx); }
.vs-codigo-lbl { font-size: 11.5px; color: var(--vs-tx3); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.vs-datos { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 14px; margin: 14px 0 0; text-align: left; }
.vs-datos dt { color: var(--vs-tx3); font-weight: 600; font-size: 12.5px; padding-top: 1px; }
.vs-datos dd { margin: 0; font-weight: 600; word-break: break-word; }
.vs-linea { display: flex; flex-direction: column; gap: 0; margin: 4px 0 0; padding: 0; list-style: none; }
.vs-linea li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--vs-tx2); padding: 6px 0; }
.vs-linea i { color: var(--vs-tx3); width: 16px; margin-top: 2px; }
.vs-linea .vs-hecho i { color: var(--vs-ok); }

/* Calificación */
.vs-estrellas { display: flex; gap: 4px; }
.vs-estrellas button { background: none; border: none; font-size: 28px; color: #e2e8f0; cursor: pointer; padding: 2px; line-height: 1; }
.vs-estrellas button.vs-on { color: #f59e0b; }
.vs-aspecto { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f1f5f9; flex-wrap: wrap; }
.vs-aspecto span { font-weight: 700; font-size: 14px; }

/* Modal legal */
.vs-modal { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.vs-modal-in { background: #fff; width: 100%; max-width: 640px; max-height: 88vh; border-radius: 20px 20px 0 0; display: flex; flex-direction: column; }
.vs-modal-cab { padding: 16px 18px; border-bottom: 1px solid var(--vs-borde); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vs-modal-cab h3 { margin: 0; font-size: 16px; }
.vs-modal-cuerpo { padding: 4px 18px 18px; overflow-y: auto; font-size: 13.5px; line-height: 1.6; color: var(--vs-tx2); }
.vs-modal-cuerpo h4 { color: var(--vs-tx); font-size: 14px; margin: 16px 0 4px; }
.vs-modal-cuerpo ul { padding-left: 18px; margin: 4px 0; }
.vs-x { background: #f1f5f9; border: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 16px; color: var(--vs-tx2); }
@media (min-width: 700px) { .vs-modal { align-items: center; } .vs-modal-in { border-radius: 20px; } }

.vs-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(20px); background: var(--vs-tx); color: #fff; padding: 11px 16px; border-radius: 12px; font-size: 14px; opacity: 0; transition: .25s; z-index: 60; max-width: calc(100vw - 32px); }
.vs-toast-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.vs-cargando { text-align: center; padding: 34px 16px; color: var(--vs-tx2); }
.vs-mis { display: flex; flex-direction: column; gap: 8px; }
.vs-mis button { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; width: 100%; background: #fff; border: 1px solid var(--vs-borde); border-radius: 12px; padding: 10px 12px; font: inherit; cursor: pointer; }
.vs-mis button:hover { border-color: var(--vs-rojo); }
@media (max-width: 480px) { .vs-fila { grid-template-columns: 1fr; } .vs-hero h1 { font-size: 20px; } .vs-ayuda-btn span { display: none; } .vs-top-txt span { display: none; } }

/* ---------------- Anfitrión (app y panel) ---------------- */
.vs-root { font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; color: var(--vs-tx); }
.vs-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; }
.vs-tab { font: inherit; font-size: 13px; font-weight: 700; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--vs-borde); background: #fff; color: var(--vs-tx2); cursor: pointer; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.vs-tab-on { background: var(--vs-tx); border-color: var(--vs-tx); color: #fff; }
.vs-tab b { background: var(--vs-rojo); color: #fff; border-radius: 999px; padding: 0 6px; font-size: 11px; }
.vs-item { border: 1px solid var(--vs-borde); border-radius: 14px; padding: 12px; margin-bottom: 10px; background: #fff; }
.vs-item-cab { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.vs-item-cab strong { font-size: 15px; }
.vs-item .vs-acciones { margin-top: 10px; }
.vs-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 12px; }
.vs-kpi { background: #fff; border: 1px solid var(--vs-borde); border-radius: 14px; padding: 12px; }
.vs-kpi span { font-size: 12px; color: var(--vs-tx2); display: block; }
.vs-kpi strong { font-size: 22px; }
.vs-estrellas-mini { color: #f59e0b; letter-spacing: 1px; font-size: 13px; }
.vs-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.vs-tabla th, .vs-tabla td { text-align: left; padding: 8px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.vs-tabla th { font-size: 11.5px; color: var(--vs-tx3); text-transform: uppercase; letter-spacing: .04em; }
.vs-tabla-wrap { overflow-x: auto; }
.vs-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.vs-chip { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #f1f5f9; color: var(--vs-tx2); }
.vs-chip-epp { background: #fef3c7; color: #92400e; }
.vs-chip-sc { background: #ffedd5; color: #9a3412; }
.vs-chip-copia { background: var(--vs-azul-lt); color: var(--vs-azul); }
.vs-config-h { font-size: 14px; font-weight: 800; margin: 20px 0 6px; display: flex; gap: 8px; align-items: center; }
.vs-config-h i { color: var(--vs-rojo); }
.vs-config-tipo { border: 1px solid var(--vs-borde); border-radius: 14px; padding: 12px 12px 4px; margin: 10px 0; background: #fcfcfd; }
.vs-config-checks { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; margin-bottom: 8px; }
.vs-config-checks .vs-check { margin: 0; }
.vs-config-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 14px; }
.vs-config-num { display: flex; align-items: center; gap: 8px; }
.vs-config-num input { max-width: 120px; }
.vs-config-num em { font-style: normal; font-weight: 500; color: var(--vs-tx3); }
.vs-config input[readonly] { background: #f8fafc; color: var(--vs-tx3); }
.vs-enlace { display: flex; gap: 8px; align-items: center; background: #f8fafc; border: 1px solid var(--vs-borde); border-radius: 12px; padding: 8px 10px; font-size: 12.5px; word-break: break-all; margin: 8px 0; }

/* ---------------- Portería (guardia.html) ---------------- */
.gv-scan { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1; margin: 0 auto 12px; background: #000; border-radius: 18px; overflow: hidden; }
.gv-scan video { width: 100%; height: 100%; object-fit: cover; }
.gv-marco { position: absolute; inset: 18%; border: 3px solid rgba(255, 255, 255, .9); border-radius: 18px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); }
.gv-scan-cargando { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; font-weight: 600; background: rgba(0, 0, 0, .55); }
.gv-ficha .sk-bloque, .vs-root .sk-bloque { height: 58px; margin-bottom: 10px; border-radius: 12px; }
.gv-codigo { display: flex; gap: 8px; }
.gv-codigo input { text-transform: uppercase; letter-spacing: 3px; font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 800; text-align: center; }
.gv-ficha { border-radius: 16px; padding: 16px; border: 2px solid var(--vs-borde); background: #fff; }
.gv-ficha-ok { border-color: var(--vs-ok); }
.gv-ficha-alerta { border-color: #f59e0b; }
.gv-nombre { font-size: 20px; font-weight: 800; margin: 6px 0 2px; }
.gv-sincita { display: inline-block; vertical-align: middle; background: #ffedd5; color: #9a3412; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; margin-left: 4px; }
.gv-qr-grande { width: min(300px, 78vw); aspect-ratio: 1; margin: 14px auto 6px; padding: 10px; background: #fff; border: 2px solid var(--vs-borde); border-radius: 18px; }
.gv-qr-grande svg { width: 100%; height: 100%; display: block; }
.gv-qr-vencido { opacity: .25; filter: grayscale(1); }
.gv-reloj { font-weight: 800; color: var(--vs-tx2); font-size: 14px; margin: 0 0 8px; }
/* Botón de visitante sin cita (abre la ventana guiada) */
.gv-boton-sincita { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; font: inherit; cursor: pointer;
  background: #fff; border: 2px dashed #fca5a5; border-radius: 18px; padding: 16px 18px; margin-bottom: 14px; color: var(--vs-tx); transition: background .15s, border-color .15s, transform .1s; }
.gv-boton-sincita:hover { background: var(--vs-rojo-lt); border-color: var(--vs-rojo); }
.gv-boton-sincita:active { transform: scale(.99); }
.gv-boton-sincita > i:first-child { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 14px; display: grid; place-items: center; background: var(--vs-rojo); color: #fff; font-size: 20px; }
.gv-boton-sincita span { flex: 1; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.gv-boton-sincita strong { font-size: 16px; }
.gv-boton-sincita small { font-size: 12.5px; color: var(--vs-tx2); }
.gv-boton-sincita > i:last-child { color: var(--vs-tx3); }
.gv-titulo { font-size: 16px; font-weight: 800; margin: 0 0 12px; color: var(--vs-tx); }
.gv-titulo i { color: var(--vs-rojo); margin-right: 6px; }
.gv-cerrar-porteria { text-align: center; margin: 4px 0 8px; font-size: 13px; }
.gv-cerrar-porteria .vs-link { color: var(--vs-tx3); }

/* Visitas de hoy: lista con estados animados */
#panelVisitasLista *, .gv-modal * { box-sizing: border-box; }
.gv-lista { padding: 16px; }
.gv-lista-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.gv-lista-estado { font-size: 12px; color: var(--vs-tx3); margin: 4px 0 10px; min-height: 16px; display: flex; align-items: center; gap: 6px; }
.gv-vivo { font-size: 7px; color: #22c55e; animation: gvLatido 2s ease-in-out infinite; }
.gv-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.gv-filtro { flex: 0 0 auto; font: inherit; font-size: 12.5px; font-weight: 700; padding: 6px 11px; border-radius: 999px; border: 1.5px solid var(--vs-borde); background: #fff; color: var(--vs-tx2); cursor: pointer; }
.gv-filtro b { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 3px; border-radius: 9px; background: #f1f5f9; font-size: 11px; text-align: center; }
.gv-filtro-dentro b { background: #dcfce7; color: #166534; }
.gv-filtro-llegar b { background: #fef3c7; color: #92400e; }
.gv-filtro-pendientes b { background: #ffedd5; color: #9a3412; }
.gv-filtro-on { background: var(--vs-tx); border-color: var(--vs-tx); color: #fff; }
.gv-filtro-on b { background: rgba(255, 255, 255, .2); color: #fff; }
.gv-lista-filas { display: flex; flex-direction: column; gap: 8px; }
.gv-fila { position: relative; display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; width: 100%; text-align: left; font: inherit; cursor: pointer; color: var(--vs-tx);
  background: #fff; border: 1px solid var(--vs-borde); border-left: 5px solid #cbd5e1; border-radius: 14px; padding: 10px 12px; transition: box-shadow .15s, transform .1s; }
.gv-fila:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, .08); }
.gv-fila:active { transform: scale(.99); }
.gv-fila-en_curso { border-left-color: #22c55e; background: linear-gradient(90deg, #f0fdf4, #fff 45%); }
.gv-fila-aprobada { border-left-color: #f59e0b; }
.gv-fila-pendiente { border-left-color: #f97316; background: linear-gradient(90deg, #fff7ed, #fff 45%); }
.gv-fila-concluida { border-left-color: #cbd5e1; opacity: .62; }
.gv-fila-concluida .gv-avatar { filter: grayscale(1); }
.gv-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; background: var(--vs-rojo-lt); color: var(--vs-rojo); flex: 0 0 40px; }
.gv-fila-en_curso .gv-avatar { background: #dcfce7; color: #166534; }
.gv-fila-aprobada .gv-avatar { background: #fef3c7; color: #92400e; }
.gv-fila-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.gv-fila-info strong { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gv-fila-info small { font-size: 12px; color: var(--vs-tx2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gv-fila-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.gv-fila-chips:empty { display: none; }
.gv-chip { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 6px; background: #f1f5f9; color: var(--vs-tx2); }
.gv-chip-sc { background: #ffedd5; color: #9a3412; }
.gv-chip-epp { background: #fef3c7; color: #92400e; }
.gv-est { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 12.5px; font-weight: 800; white-space: nowrap; text-align: right; }
.gv-est b { font-weight: 800; }
.gv-est small { font-size: 11px; font-weight: 600; color: var(--vs-tx3); }
.gv-est-dentro { color: #15803d; }
.gv-est-llegar { color: #b45309; }
.gv-est-pendiente { color: #c2410c; }
.gv-est-salio { color: #64748b; }
.gv-est-otro { color: #64748b; flex-direction: row; gap: 4px; }
.gv-pulso, .gv-parpadeo { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: 1px; }
.gv-pulso { background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: gvPulso 1.8s ease-out infinite; }
.gv-parpadeo { background: #f97316; animation: gvParpadeo 1.1s ease-in-out infinite; }
.gv-tic { display: inline-block; animation: gvTic 3s ease-in-out infinite; margin-right: 3px; }
.gv-fila-entra { animation: gvEntra .35s ease both; animation-delay: calc(var(--i, 0) * 40ms); }
.gv-fila-nueva { animation: gvEntra .4s ease both, gvDestello 2.4s ease .1s; }
.gv-fila-cambio { animation: gvDestello 2.4s ease; }
.gv-vacio { text-align: center; color: var(--vs-tx3); padding: 26px 10px; }
.gv-vacio i { font-size: 30px; margin-bottom: 8px; opacity: .6; }
.gv-vacio p { margin: 0; font-size: 13.5px; }
@keyframes gvPulso { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); } 70% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
@keyframes gvParpadeo { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes gvTic { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-14deg); } 90% { transform: rotate(14deg); } 95% { transform: rotate(-8deg); } }
@keyframes gvLatido { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes gvEntra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes gvDestello { 0%, 40% { box-shadow: 0 0 0 3px rgba(59, 130, 246, .45); background-color: #eff6ff; } 100% { box-shadow: none; } }

/* Ventana guiada: visitante sin cita */
body.gv-modal-abierto { overflow: hidden; }
.gv-modal { position: fixed; inset: 0; z-index: 1200; background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 16px; animation: gvFondo .2s ease; font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif; }
.gv-m-caja { width: 100%; max-width: 560px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; background: #fff; border-radius: 24px; box-shadow: 0 24px 60px rgba(15, 23, 42, .35); overflow: hidden; animation: gvSube .25s cubic-bezier(.2, .9, .3, 1.2); color: var(--vs-tx); }
.gv-m-cab { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #f1f5f9; }
.gv-m-cab h2 { flex: 1; margin: 0; font-size: 17px; font-weight: 800; }
.gv-m-x, .gv-m-volver { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; border: none; background: #f1f5f9; color: var(--vs-tx2); font-size: 24px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.gv-m-volver { font-size: 16px; }
.gv-m-x:hover, .gv-m-volver:hover { background: #e2e8f0; color: var(--vs-tx); }
.gv-m-cuerpo { flex: 1; overflow-y: auto; padding: 18px 20px 20px; animation: gvAparece .25s ease; }
.gv-m-pie { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border-top: 1px solid #f1f5f9; background: #f8fafc; }
.gv-m-pie .vs-btn { flex: 0 0 auto; min-height: 56px; }
.gv-m-pie .btn-large, .gv-m-prim { margin: 0 !important; flex: 1 1 auto; width: auto; min-height: 56px; font-size: 16px; }
.gv-m-progreso { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 16px; }
.gv-m-progreso span { height: 6px; border-radius: 3px; background: #e2e8f0; transition: background .3s; }
.gv-m-progreso .hecho { background: var(--vs-ok); }
.gv-m-progreso .actual { background: var(--vs-rojo); }
.gv-m-pregunta { font-size: 21px; font-weight: 800; margin: 0 0 4px; line-height: 1.25; }
.gv-m-ayuda { font-size: 14px; color: var(--vs-tx2); margin: 0 0 16px; }
.gv-m-elegir .gv-m-pregunta { margin-bottom: 16px; text-align: center; }
.gv-m-opciones, .gv-m-tipos { display: flex; flex-direction: column; gap: 10px; }
.gv-m-opcion, .gv-m-tipo, .gv-m-sinanf, .gv-m-persona { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: #fff; border: 2px solid var(--vs-borde); border-radius: 16px; padding: 14px 16px; color: var(--vs-tx); transition: border-color .15s, background .15s, transform .1s; }
.gv-m-opcion:hover, .gv-m-tipo:hover, .gv-m-sinanf:hover, .gv-m-persona:hover { border-color: #fca5a5; background: var(--vs-rojo-lt); }
.gv-m-opcion:active, .gv-m-tipo:active, .gv-m-persona:active { transform: scale(.99); }
.gv-m-opcion { padding: 18px; }
.gv-m-opcion > i:first-child, .gv-m-tipo > i:first-child, .gv-m-sinanf > i:first-child { width: 50px; height: 50px; flex: 0 0 50px; border-radius: 14px; display: grid; place-items: center; background: var(--vs-rojo-lt); color: var(--vs-rojo); font-size: 22px; }
.gv-m-opcion > span, .gv-m-tipo > span, .gv-m-sinanf > span, .gv-m-persona > span:not(.gv-avatar) { flex: 1; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; min-width: 0; }
.gv-m-opcion strong, .gv-m-tipo strong { font-size: 16.5px; }
.gv-m-opcion small, .gv-m-tipo small, .gv-m-sinanf small, .gv-m-persona small { font-size: 13px; color: var(--vs-tx2); }
.gv-m-opcion > i:last-child, .gv-m-persona > i:last-child { color: var(--vs-tx3); }
.gv-m-tipo em { font-style: normal; font-size: 11.5px; font-weight: 800; color: #92400e; background: #fef3c7; padding: 3px 8px; border-radius: 8px; white-space: nowrap; }
.gv-m-tipo.on { border-color: var(--vs-rojo); background: var(--vs-rojo-lt); }
.gv-m-sinanf { border-style: dashed; margin-top: 12px; }
.gv-m-sinanf > i:first-child { background: #f1f5f9; color: var(--vs-tx2); }
.gv-m-buscar { display: flex; align-items: center; gap: 10px; border: 2px solid var(--vs-borde); border-radius: 16px; padding: 0 16px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.gv-m-buscar:focus-within { border-color: var(--vs-rojo); box-shadow: 0 0 0 4px rgba(220, 38, 38, .12); }
.gv-m-buscar i { color: var(--vs-tx3); }
.gv-m-buscar input { flex: 1; border: none; outline: none; font: inherit; font-size: 18px; padding: 15px 0; background: transparent; min-width: 0; }
.gv-m-sug { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.gv-m-sug:empty { display: none; }
.gv-m-persona { padding: 10px 14px; animation: gvEntra .25s ease both; }
.gv-m-persona strong { font-size: 15.5px; }
.gv-m-sinres { color: var(--vs-tx2); font-size: 14px; background: #f8fafc; border-radius: 12px; padding: 12px 14px; margin: 0; }
.gv-m-elegido { display: flex; align-items: center; gap: 14px; border: 2px solid var(--vs-ok); background: var(--vs-ok-lt); border-radius: 16px; padding: 14px 16px; animation: gvAparece .25s ease; }
.gv-m-elegido > i { font-size: 24px; color: var(--vs-ok); }
.gv-m-elegido span { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.gv-m-elegido strong { font-size: 16.5px; }
.gv-m-elegido small { color: var(--vs-tx2); font-size: 13px; }
.gv-m-campo { display: block; margin-bottom: 16px; }
.gv-m-campo > span { display: block; font-size: 14px; font-weight: 700; color: var(--vs-tx2); margin-bottom: 6px; }
.gv-m-campo input { width: 100%; font: inherit; font-size: 18px; padding: 13px 14px; border: 2px solid var(--vs-borde); border-radius: 14px; outline: none; background: #fff; color: var(--vs-tx); transition: border-color .15s, box-shadow .15s; }
.gv-m-campo input:focus { border-color: var(--vs-rojo); box-shadow: 0 0 0 4px rgba(220, 38, 38, .12); }
.gv-m-fila { display: flex; gap: 8px; }
.gv-m-fila input { flex: 1; min-width: 0; }
.gv-m-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gv-m-chip { font: inherit; font-size: 13.5px; font-weight: 700; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--vs-borde); background: #fff; color: var(--vs-tx2); cursor: pointer; white-space: nowrap; }
.gv-m-chip.on, .gv-m-chip:hover { border-color: var(--vs-rojo); color: var(--vs-rojo); background: var(--vs-rojo-lt); }
.gv-m-resumen { border: 1px solid var(--vs-borde); border-radius: 16px; overflow: hidden; margin-bottom: 14px; }
.gv-m-res { display: grid; grid-template-columns: 82px 1fr auto; gap: 10px; align-items: center; width: 100%; text-align: left; font: inherit; background: #fff; border: none; border-bottom: 1px solid #f1f5f9; padding: 11px 14px; cursor: pointer; color: var(--vs-tx); }
.gv-m-res:last-child { border-bottom: none; }
.gv-m-res:hover { background: #f8fafc; }
.gv-m-res span { color: var(--vs-tx3); font-size: 13px; font-weight: 600; }
.gv-m-res strong { font-size: 15px; overflow-wrap: break-word; min-width: 0; }
.gv-m-res i { color: var(--vs-tx3); font-size: 12px; }
.gv-m-check { position: relative; display: flex; align-items: center; gap: 12px; border: 2px solid var(--vs-borde); border-radius: 14px; padding: 13px 14px; margin-bottom: 10px; cursor: pointer; font-size: 14.5px; line-height: 1.35; transition: border-color .15s, background .15s; }
.gv-m-check input { position: absolute; opacity: 0; pointer-events: none; }
.gv-m-check > i { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; border: 2px solid #cbd5e1; display: grid; place-items: center; color: transparent; font-size: 14px; transition: all .15s; }
.gv-m-check.on { border-color: var(--vs-ok); background: var(--vs-ok-lt); }
.gv-m-check.on > i { background: var(--vs-ok); border-color: var(--vs-ok); color: #fff; animation: gvMarca .25s ease; }
.gv-m-check:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(59, 130, 246, .4); }
.gv-m-leer { background: var(--vs-azul-lt); color: #1e3a8a; border-radius: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.55; margin: 4px 0 10px; }
.gv-m-leer-etq { display: block; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; }
.gv-m-qr { text-align: center; }
.gv-m-pasos { list-style: none; padding: 0; margin: 10px 0 0; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.gv-m-pasos li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: var(--vs-tx2); }
.gv-m-pasos b { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; background: var(--vs-rojo); color: #fff; display: grid; place-items: center; font-size: 13px; }
.gv-m-listo { text-align: center; padding: 6px 0; }
.gv-m-exito { width: 84px; height: 84px; margin: 6px auto 16px; border-radius: 50%; background: var(--vs-ok); color: #fff; font-size: 38px; display: grid; place-items: center; animation: gvExito .5s cubic-bezier(.2, .9, .3, 1.4); box-shadow: 0 0 0 10px var(--vs-ok-lt); }
.gv-m-listo-nombre { font-size: 20px; font-weight: 800; margin: 8px 0 2px; }
.gv-m-aviso { background: #f8fafc; border-radius: 12px; padding: 12px 14px; font-size: 13.5px; color: var(--vs-tx2); margin: 16px 0 0; text-align: left; line-height: 1.5; }
.gv-m-aviso i { color: var(--vs-rojo); margin-right: 4px; }
.gv-m-cuerpo .vs-error { margin-bottom: 14px; animation: gvSacude .35s ease; }
@keyframes gvFondo { from { opacity: 0; } to { opacity: 1; } }
@keyframes gvSube { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes gvAparece { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes gvMarca { from { transform: scale(.6); } to { transform: scale(1); } }
@keyframes gvExito { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes gvSacude { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (max-width: 560px) {
  .gv-modal { padding: 0; align-items: flex-end; }
  .gv-m-caja { max-width: none; border-radius: 22px 22px 0 0; max-height: 94vh; max-height: 94dvh; }
  .gv-m-pregunta { font-size: 19px; }
  .gv-fila { grid-template-columns: 36px 1fr; }
  .gv-fila .gv-avatar { width: 36px; height: 36px; font-size: 13px; }
  .gv-fila .gv-est { grid-column: 2; flex-direction: row; align-items: center; gap: 6px; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .gv-pulso, .gv-parpadeo, .gv-tic, .gv-vivo, .gv-fila-entra, .gv-fila-nueva, .gv-fila-cambio, .gv-modal, .gv-m-caja, .gv-m-cuerpo, .gv-m-persona, .gv-m-exito { animation: none !important; }
}

/* Anfitrión (app → Visitas y panel de supervisor): lista con estados animados y ventana guiada */
.va-root .sk, .va-modal .sk { display: inline-block; background: linear-gradient(90deg, #eef2f7 25%, #f8fafc 50%, #eef2f7 75%); background-size: 200% 100%; animation: vaBrillo 1.3s linear infinite; border-radius: 8px; }
.va-root .sk-linea { height: 12px; }
.va-modal .sk-bloque { display: block; width: 100%; }
@keyframes vaBrillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.va-pin { text-align: center; padding: 26px 18px; }
.va-pin h3 { margin: 12px 0 4px; font-size: 18px; }
.va-pin-icono { width: 58px; height: 58px; margin: 0 auto; border-radius: 18px; display: grid; place-items: center; background: var(--vs-rojo-lt); color: var(--vs-rojo); font-size: 24px; }
.va-pin-form { display: flex; gap: 8px; max-width: 320px; margin: 12px auto 0; }
.va-pin-form .vs-input { flex: 1; min-width: 0; text-align: center; font-size: 20px; letter-spacing: 4px; }
.va-hero { display: grid; grid-template-columns: 1fr auto; gap: 12px 14px; align-items: center; background: linear-gradient(135deg, #fff 55%, var(--vs-rojo-lt)); }
.va-hero h2 { font-size: 19px; font-weight: 800; margin: 0 0 3px; display: flex; align-items: center; gap: 8px; }
.va-hero h2 i { color: var(--vs-rojo); }
.va-hero p { margin: 0; color: var(--vs-tx2); font-size: 13.5px; }
.va-invitar { min-height: 46px; box-shadow: 0 6px 16px rgba(220, 38, 38, .25); }
.va-kpis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.va-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 0; font: inherit; text-align: left; cursor: pointer; background: #fff; border: 1.5px solid var(--vs-borde); border-radius: 14px; padding: 10px 12px; color: var(--vs-tx); transition: border-color .15s, transform .1s; position: relative; }
.va-kpi:active { transform: scale(.98); }
.va-kpi i { position: absolute; top: 10px; right: 10px; font-size: 13px; color: var(--vs-tx3); }
.va-kpi b { font-size: 24px; font-weight: 800; line-height: 1.1; }
.va-kpi span { font-size: 12px; color: var(--vs-tx2); font-weight: 600; }
.va-kpi-pend:not(.va-kpi-cero) { border-color: #fdba74; background: #fff7ed; }
.va-kpi-pend:not(.va-kpi-cero) b, .va-kpi-pend:not(.va-kpi-cero) i { color: #c2410c; }
.va-kpi-pend:not(.va-kpi-cero)::after { content: ''; position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%; background: #f97316; animation: gvPulsoNar 1.8s ease-out infinite; }
.va-kpi-dentro:not(.va-kpi-cero) { border-color: #86efac; background: #f0fdf4; }
.va-kpi-dentro:not(.va-kpi-cero) b, .va-kpi-dentro:not(.va-kpi-cero) i { color: #15803d; }
.va-kpi-cero b { color: var(--vs-tx3); }
.va-kpi.on { box-shadow: 0 0 0 2px var(--vs-tx) inset; }
.va-act { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--vs-tx3); display: flex; align-items: center; gap: 6px; }
.va-act .vs-link { font-size: 12px; margin-left: auto; }
.vs-tab .va-b-pend { background: #f97316; animation: gvLatido 1.6s ease-in-out infinite; }
.va-lista { display: flex; flex-direction: column; gap: 10px; }
.va-item { background: #fff; border: 1px solid var(--vs-borde); border-left: 5px solid #cbd5e1; border-radius: 16px; padding: 12px 14px; animation: gvEntra .35s ease both; animation-delay: calc(var(--i, 0) * 40ms); }
.va-item.va-sk { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.va-e-en_curso { border-left-color: #22c55e; background: linear-gradient(90deg, #f0fdf4, #fff 50%); }
.va-e-pendiente { border-left-color: #f97316; background: linear-gradient(90deg, #fff7ed, #fff 50%); }
.va-e-aprobada { border-left-color: #10b981; }
.va-e-aprobada.va-e-llega { border-left-color: #f59e0b; }
.va-e-invitada { border-left-color: #93c5fd; border-left-style: dashed; }
.va-e-concluida { border-left-color: #cbd5e1; }
.va-e-concluida .va-item-cab, .va-e-cancelada .va-item-cab, .va-e-rechazada .va-item-cab, .va-e-no_asistio .va-item-cab { opacity: .7; }
.va-e-rechazada, .va-e-cancelada, .va-e-no_asistio { border-left-color: #fca5a5; }
.va-nueva { animation: gvEntra .4s ease both, gvDestello 2.4s ease .1s; }
.va-cambio { animation: gvDestello 2.4s ease; }
.va-item-cab { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: start; cursor: pointer; outline: none; border-radius: 10px; }
.va-item-cab:focus-visible { box-shadow: 0 0 0 3px rgba(59, 130, 246, .4); }
.va-avatar { width: 42px; height: 42px; flex-basis: 42px; }
.va-e-en_curso .va-avatar { background: #dcfce7; color: #166534; }
.va-e-pendiente .va-avatar { background: #ffedd5; color: #9a3412; }
.va-e-invitada .va-avatar { background: var(--vs-azul-lt); color: var(--vs-azul); }
.va-e-concluida .va-avatar { background: #f1f5f9; color: var(--vs-tx2); }
.va-item-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.va-item-info strong { font-size: 15px; overflow-wrap: anywhere; }
.va-item-info small { font-size: 12.5px; color: var(--vs-tx2); }
.va-cuando { font-size: 12.5px; color: var(--vs-tx); font-weight: 600; margin-top: 3px; }
.va-cuando i { color: var(--vs-tx3); margin-right: 2px; }
.va-item-info .vs-chips:empty { display: none; }
.va-item-der { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.va-flecha { color: var(--vs-tx3); font-size: 12px; transition: transform .2s; }
.va-item-cab[aria-expanded="true"] .va-flecha { transform: rotate(180deg); }
.va-est { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 0 4px; font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 999px; white-space: nowrap; text-align: right; }
.va-est small { flex-basis: 100%; font-size: 10.5px; font-weight: 600; opacity: .8; }
.va-est-dentro { background: #dcfce7; color: #15803d; }
.va-est-pendiente { background: #ffedd5; color: #c2410c; }
.va-est-invitada { background: var(--vs-azul-lt); color: var(--vs-azul); }
.va-est-llegar { background: #fef3c7; color: #b45309; }
.va-est-ok { background: var(--vs-ok-lt); color: var(--vs-ok); }
.va-est-fin { background: #f1f5f9; color: #64748b; }
.va-est-no { background: var(--vs-rojo-lt); color: var(--vs-rojo-osc); }
.va-est .gv-pulso, .va-est .gv-parpadeo { width: 8px; height: 8px; margin-right: 2px; }
.va-gira { display: inline-block; animation: vaGira 2.4s ease-in-out infinite; }
@keyframes vaGira { 0%, 40% { transform: rotate(0); } 50%, 90% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
@keyframes gvPulsoNar { 0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, .55); } 70% { box-shadow: 0 0 0 8px rgba(249, 115, 22, 0); } 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); } }
.va-detalle { margin: 12px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--vs-borde); animation: gvAparece .2s ease; }
.va-espera { margin: 10px 0 0; font-size: 12.5px; color: #9a3412; background: #fff7ed; border-radius: 10px; padding: 8px 10px; line-height: 1.45; }
.va-espera-inv { color: #1e3a8a; background: var(--vs-azul-lt); }
.va-acciones { margin-top: 12px; }
.va-acciones > .vs-btn { flex: 1 1 130px; }
.va-btn-suave { color: var(--vs-tx2); border-color: transparent; background: #f8fafc; }
.va-vacio { text-align: center; padding: 30px 16px; color: var(--vs-tx2); background: #fff; border: 1.5px dashed var(--vs-borde); border-radius: 16px; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.va-vacio i { font-size: 30px; color: var(--vs-tx3); margin-bottom: 6px; }
.va-vacio strong { color: var(--vs-tx); font-size: 15px; }
.va-vacio span { font-size: 13px; }
/* Ventana del anfitrión: por encima de la barra de navegación de la app */
.va-modal { z-index: 10600; }
.va-modal .vs-btn { font-size: 15px; }
.va-modal .gv-m-pie .vs-btn { min-height: 52px; }
.va-modal .gv-m-pie .gv-m-prim { flex: 1 1 auto; justify-content: center; }
.va-modal .gv-m-pie .vs-btn:not(.gv-m-prim) { flex: 0 0 auto; }
.va-dias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.va-dia { display: flex; flex-direction: column; align-items: center; gap: 2px; font: inherit; cursor: pointer; background: #fff; border: 2px solid var(--vs-borde); border-radius: 14px; padding: 12px 6px; color: var(--vs-tx); transition: border-color .15s, background .15s; }
.va-dia strong { font-size: 15px; }
.va-dia small { font-size: 12px; color: var(--vs-tx2); text-transform: capitalize; }
.va-dia:hover { border-color: #fca5a5; }
.va-dia.on { border-color: var(--vs-rojo); background: var(--vs-rojo-lt); }
.va-dia.on strong { color: var(--vs-rojo); }
.gv-m-campo input.va-on { border-color: var(--vs-rojo); background: var(--vs-rojo-lt); }
.va-compartir { display: flex; flex-direction: column; gap: 10px; }
.va-comp { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; font: inherit; cursor: pointer; text-decoration: none; background: #fff; border: 2px solid var(--vs-borde); border-radius: 16px; padding: 13px 16px; color: var(--vs-tx); transition: border-color .15s, background .15s; }
.va-comp:hover { border-color: #cbd5e1; background: #f8fafc; }
.va-comp > i { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; display: grid; place-items: center; background: #f1f5f9; color: var(--vs-tx2); font-size: 20px; }
.va-comp span { display: flex; flex-direction: column; line-height: 1.3; }
.va-comp strong { font-size: 15.5px; }
.va-comp small { font-size: 12.5px; color: var(--vs-tx2); }
.va-comp-wa { border-color: #86efac; background: #f0fdf4; }
.va-comp-wa > i { background: #25d366; color: #fff; }
.va-comp-wa:hover { border-color: #22c55e; background: #dcfce7; }
.va-nota { font-size: 12.5px; color: var(--vs-tx2); margin: 12px 0 0; line-height: 1.45; }
.va-nota i { color: var(--vs-tx3); margin-right: 4px; }
@media (max-width: 560px) {
  .va-hero { grid-template-columns: 1fr; }
  .va-invitar { width: 100%; }
  .va-item-cab { grid-template-columns: 38px 1fr; }
  .va-avatar { width: 38px; height: 38px; }
  .va-item-der { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .va-est { justify-content: flex-start; text-align: left; }
  .va-est small { flex-basis: auto; margin-left: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .va-item, .va-nueva, .va-cambio, .va-gira, .va-kpi-pend::after, .vs-tab .va-b-pend, .va-detalle, .va-root .sk { animation: none !important; }
}

/* Portería en modo contingencia (servidor de visitas sin respuesta) */
.gv-contingencia { border: 2px solid #f59e0b; background: linear-gradient(135deg, #fffbeb, #fff 70%); padding: 14px 16px; margin-bottom: 14px; animation: gvAparece .3s ease; }
.gv-cont-cab { display: flex; align-items: center; gap: 8px; color: #92400e; font-size: 15px; }
.gv-cont-cab i { font-size: 18px; color: #d97706; }
.gv-cont-punto { width: 9px; height: 9px; border-radius: 50%; background: #f59e0b; margin-left: auto; animation: gvParpadeo 1.2s ease-in-out infinite; }
.gv-contingencia p { margin: 8px 0 0; font-size: 13px; color: #78350f; line-height: 1.45; }
.gv-contingencia .gv-cont-meta { font-size: 12px; color: #92400e; opacity: .85; }
@media (prefers-reduced-motion: reduce) { .gv-contingencia, .gv-cont-punto { animation: none !important; } }