/* app.vivevyvo.com · panel y pantallas de ingreso. Paleta oficial 2026-10-22. */
:root{
  --palm:#004851; --palm-2:#003A42; --palm-3:#0B5560; --turquesa:#009F91; --aqua:#00BAB3;
  --sand:#ECDCC8; --dunes:#FF8F1C; --beles:#F93822;
  --tinta:#172126; --boton:#00786D; --boton-h:#00665D;
  --crema:#FAF7F2; --crema-2:#F3EEE6; --linea:#E6DFD3; --gris:#5B6A70; --gris-2:#8A979C; --blanco:#fff;
  --titulo:'Montserrat',system-ui,sans-serif; --texto:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1); --r:18px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--crema);color:var(--tinta);font:400 15px/1.5 var(--texto);-webkit-font-smoothing:antialiased}
a{color:var(--boton)}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer}
.ic{flex:none}
h1,h2{font-family:var(--titulo);letter-spacing:-.02em;margin:0}
.suave{color:var(--gris);margin:4px 0 0}
.suave small,small.suave{font-size:13px}
.sub{position:relative;display:inline-block;z-index:0}
.sub::after{content:"";position:absolute;z-index:-1;left:-4%;right:-4%;bottom:-.14em;height:.3em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M3 15C32 4 58 22 92 11S152 3 197 13' fill='none' stroke='%23FF8F1C' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%}
.marca{display:inline-flex;align-items:center;font:800 22px/1 var(--titulo);letter-spacing:.06em;color:inherit;text-decoration:none}
.marca .o{display:inline-block;width:.78em;height:.78em;border:.19em solid var(--aqua);border-radius:50%;margin-left:.06em}

/* Botones */
.btn,.btn-sec,.btn-mini{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;font-weight:600;text-decoration:none;transition:background .2s,transform .12s var(--ease);white-space:nowrap}
.btn{min-height:46px;padding:0 22px;background:var(--boton);color:#fff;font-size:15px}
.btn:hover{background:var(--boton-h)}
.btn-sec{min-height:40px;padding:0 16px;background:var(--crema-2);color:var(--palm);font-size:14px}
.btn-sec:hover{background:var(--sand)}
.btn-mini{min-height:30px;padding:0 12px;background:var(--crema-2);color:var(--palm);font-size:12.5px}
.btn-icono{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:12px;background:transparent;color:inherit}
.btn-icono:hover{background:rgba(255,255,255,.1)}
.peligro{color:#B3261E}
.btn-sec.peligro{background:#FCE8E6}
.btn:active,.btn-sec:active,.btn-mini:active{transform:scale(.97)}
.btn.ancho{width:100%}
.btn .ic,.btn-sec .ic{width:18px;height:18px}

/* Chips de estado */
.chip{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font:600 12px/1.4 var(--texto);background:var(--crema-2);color:var(--palm);white-space:nowrap}
.est-publicada,.est-activo{background:#DDF3EF;color:#00574F}
.est-borrador,.est-prospecto{background:var(--crema-2);color:var(--gris)}
.est-en_revision{background:#FFE9D2;color:#8A4A00}
.est-suspendida,.est-suspendido{background:#FCE8E6;color:#9B2C22}
.chip.plan{background:var(--palm);color:var(--crema)}
.chip.ejemplo{background:#EFE7FF;color:#4B2E9A}
.chip.alerta{background:#FFE9D2;color:#8A4A00}

/* Avisos */
.aviso{padding:12px 16px;border-radius:14px;background:#DDF3EF;color:#00574F;font-weight:500;margin:0 0 18px}
.aviso.error{background:#FCE8E6;color:#9B2C22}

/* ---------- Pantallas simples (entrar, código, muy pronto) ---------- */
body.simple{min-height:100vh;min-height:100svh;display:grid;place-items:center;background:var(--sand);padding:24px 16px}
.simple-in{width:100%;max-width:440px}
.simple-in>.marca{color:var(--palm);font-size:26px;margin:0 0 22px}
.tarjeta{background:#fff;border-radius:28px;padding:34px 28px;box-shadow:0 24px 60px rgba(0,72,81,.12)}
.tarjeta.centro{text-align:center}
.titulo{font:800 clamp(30px,6vw,40px)/1 var(--titulo);text-transform:uppercase;color:var(--palm);margin:0 0 12px}
.pildora-tag{display:inline-block;margin:0 0 16px;padding:7px 14px;border-radius:999px;background:var(--palm);color:var(--crema);font:600 13px/1 var(--texto);rotate:-2deg}
.tarjeta .btn{margin-top:18px}
.pie-mini{margin:18px 0 0;font-size:14px;text-align:center}
.formulario{margin-top:20px}
.campo{display:block;border:0;padding:0;margin:0 0 16px;min-width:0}
.campo>span,.campo>legend{display:block;font-weight:600;font-size:14px;margin-bottom:7px;color:var(--tinta)}
.campo small{font-weight:400;color:var(--gris)}
.campo input,.campo textarea,.en-linea input{width:100%;min-height:46px;padding:11px 14px;border:1.5px solid var(--linea);border-radius:14px;background:#fff;font:400 15px/1.4 var(--texto);color:var(--tinta);transition:border-color .2s,box-shadow .2s}
.campo textarea{resize:vertical;min-height:90px}
.campo input:focus,.campo textarea:focus,.en-linea input:focus{outline:0;border-color:var(--turquesa);box-shadow:0 0 0 4px rgba(0,159,145,.14)}
.campo.mal input,.campo.mal textarea{border-color:#D9534F}
.error-campo{color:#B3261E;font-size:14px;margin:-6px 0 12px}
.codigo{text-align:center;font:800 32px/1 var(--titulo)!important;letter-spacing:.3em;padding:14px!important}

/* ---------- Panel ---------- */
body.panel{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}
.lado{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:26px;padding:24px 16px;background:var(--palm);color:var(--crema)}
.lado>.marca{padding:4px 10px;font-size:24px}
.menu{display:flex;flex-direction:column;gap:4px;flex:1}
.menu a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:14px;color:rgba(250,247,242,.78);text-decoration:none;font-weight:500;transition:background .2s,color .2s}
.menu a:hover{background:rgba(255,255,255,.07);color:var(--crema)}
.menu a.on{background:var(--crema);color:var(--palm)}
.yo{display:flex;align-items:center;gap:10px;padding:10px;border-radius:16px;background:rgba(255,255,255,.06)}
.yo-txt{flex:1;min-width:0;line-height:1.25}
.yo-txt b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yo-txt small{color:rgba(250,247,242,.6);font-size:12px}
.avatar{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--aqua);color:var(--palm);font:800 15px var(--titulo)}
.contenido{padding:34px clamp(18px,3vw,44px) 60px;min-width:0}
.cabeza-pag{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 26px;flex-wrap:wrap}
.cabeza-pag h1{font:800 clamp(28px,3.2vw,40px)/1.05 var(--titulo);color:var(--palm)}
.saludo{margin:0 0 4px;color:var(--gris);font-weight:500}
.volver{display:inline-block;margin:0 0 8px;font-size:14px;text-decoration:none;color:var(--gris)}
.bloque{background:#fff;border-radius:var(--r);padding:24px;margin:0 0 18px;box-shadow:0 1px 0 rgba(0,72,81,.04)}
.bloque h2{font-size:18px;color:var(--palm);margin:0 0 16px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.bloque h2 small{font:400 13px var(--texto);letter-spacing:0}
.metricas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 18px}
.metrica{display:flex;flex-direction:column;gap:2px;padding:20px;border-radius:var(--r);background:#fff;text-decoration:none;color:var(--tinta);transition:transform .2s var(--ease),box-shadow .2s}
.metrica:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,72,81,.08)}
.metrica small{color:var(--gris);font-weight:600}
.metrica b{font:800 40px/1.05 var(--titulo);color:var(--palm)}
.metrica span{color:var(--gris);font-size:13px}
.metrica:first-child{background:var(--palm);color:var(--crema)}
.metrica:first-child b{color:var(--crema)}
.metrica:first-child small,.metrica:first-child span{color:rgba(250,247,242,.72)}
.que-sigue{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.que-sigue li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-radius:14px;background:var(--crema);font-weight:500}
.vacio{color:var(--gris);margin:0}
.vacio-grande{text-align:center;padding:60px 20px;background:#fff;border-radius:var(--r)}
.vacio-grande h2{color:var(--palm);font-size:22px;margin-bottom:8px}
.vacio-grande p{color:var(--gris);margin:0 0 20px}
.nota-ejemplo{font-size:13px;color:#4B2E9A;background:#F4EFFF;padding:10px 14px;border-radius:12px}

/* Filtros como botones (nada de desplegables) */
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.filtros a{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:#fff;color:var(--palm);text-decoration:none;font-weight:600;font-size:14px}
.filtros a em{font-style:normal;font-size:12px;color:var(--gris);background:var(--crema-2);border-radius:999px;padding:1px 8px}
.filtros a.on{background:var(--palm);color:var(--crema)}
.filtros a.on em{background:rgba(255,255,255,.16);color:var(--crema)}

/* Rejilla de experiencias */
.rejilla-exp{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.exp{display:flex;flex-direction:column;background:#fff;border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--tinta);transition:transform .25s var(--ease),box-shadow .25s}
.exp:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,72,81,.1)}
.exp-foto{aspect-ratio:4/3;background:var(--sand);display:grid;place-items:center;overflow:hidden}
.exp-foto img{width:100%;height:100%;object-fit:cover}
.exp-foto i{font-style:normal;color:var(--gris);font-size:13px}
.exp-cuerpo{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px}
.exp-chips{display:flex;gap:6px;flex-wrap:wrap}
.exp-cuerpo b{font-size:15.5px;line-height:1.3}
.exp-cuerpo small{color:var(--gris)}
.exp-precio{font:800 17px var(--titulo);color:var(--palm)}
.exp-precio em{font:400 12.5px var(--texto);color:var(--gris);font-style:normal}

/* Listas de filas */
.lista-filas{display:grid;gap:8px}
.fila-p{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:#fff;text-decoration:none;color:var(--tinta)}
a.fila-p:hover{box-shadow:0 10px 26px rgba(0,72,81,.08)}
.bloque .fila-p{background:var(--crema)}
.fila-p .avatar{background:var(--sand);color:var(--palm)}
.fila-txt{flex:1;min-width:0}
.fila-txt b{display:block}
.fila-txt small{color:var(--gris)}
.fila-der{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}

/* Fichas (formularios) */
.ficha{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:18px;align-items:start}
.lateral .pegado{position:sticky;top:20px}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chips-elegir{display:flex;flex-wrap:wrap;gap:8px}
.chips-elegir label,.dias label,.segmento label{position:relative;cursor:pointer}
.chips-elegir input,.dias input,.segmento input,.interruptor input{position:absolute;opacity:0;pointer-events:none}
.chips-elegir span{display:inline-flex;align-items:center;padding:9px 14px;border-radius:999px;background:var(--crema-2);color:var(--palm);font-weight:600;font-size:14px;transition:background .2s,color .2s,transform .12s}
.chips-elegir label:active span{transform:scale(.96)}
.chips-elegir input:checked+span{background:var(--palm);color:var(--crema)}
.chips-elegir input:focus-visible+span,.dias input:focus-visible+span,.segmento input:focus-visible+span{outline:3px solid var(--aqua);outline-offset:2px}
.estados input:checked+span.est-publicada{background:#00574F;color:#fff}
.estados input:checked+span.est-en_revision{background:var(--dunes);color:var(--palm)}
.estados input:checked+span.est-suspendida,.estados input:checked+span.est-suspendido{background:#9B2C22;color:#fff}
.estados input:checked+span.est-activo{background:#00574F;color:#fff}
.dias{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.dias span{display:grid;place-items:center;height:42px;border-radius:12px;background:var(--crema-2);color:var(--palm);font-weight:700}
.dias input:checked+span{background:var(--turquesa);color:#fff}
.segmento{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:14px;background:var(--crema-2);margin:0 0 14px}
.segmento span{display:grid;place-items:center;height:40px;border-radius:11px;font-weight:600;color:var(--gris);transition:background .2s,color .2s}
.segmento input:checked+span{background:#fff;color:var(--palm);box-shadow:0 2px 8px rgba(0,72,81,.1)}
.interruptor{display:flex;align-items:center;gap:12px;margin:0 0 16px;cursor:pointer;font-weight:500;position:relative}
.interruptor span{flex:none;width:46px;height:28px;border-radius:999px;background:var(--linea);position:relative;transition:background .2s}
.interruptor span::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .25s var(--ease)}
.interruptor input:checked+span{background:var(--turquesa)}
.interruptor input:checked+span::after{transform:translateX(18px)}
.interruptor small{color:var(--gris);font-weight:400}
.solo-plan{display:none}
.ficha.es-plan .solo-plan{display:block}
.ficha.es-plan .solo-uno{display:none}
.precio-vivo{margin:0 0 16px;padding:12px 14px;border-radius:14px;background:var(--sand);color:var(--palm);font-weight:600}
.con-sufijo{display:flex;align-items:center;gap:8px}
.con-sufijo input{max-width:120px}
.con-sufijo em{font-style:normal;font-weight:700;color:var(--palm)}
.dato{font:800 22px var(--titulo);color:var(--palm)}
.mini-lista{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mini-lista li{display:flex;justify-content:space-between;gap:10px;align-items:center}

/* Fotos */
.fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.foto{position:relative;margin:0;border-radius:16px;overflow:hidden;background:var(--sand);aspect-ratio:4/3}
.foto img{width:100%;height:100%;object-fit:cover}
.foto>.chip{position:absolute;left:10px;top:10px;background:var(--palm);color:var(--crema)}
.foto figcaption{position:absolute;inset:auto 8px 8px;display:flex;gap:6px;justify-content:flex-end}
.foto.portada{outline:3px solid var(--turquesa);outline-offset:-3px}
.subir label{display:grid;place-items:center;aspect-ratio:4/3;border-radius:16px;border:2px dashed var(--linea);color:var(--palm);font-weight:600;cursor:pointer;transition:border-color .2s,background .2s}
.subir label:hover{border-color:var(--turquesa);background:#F2FBFA}
.subir span{display:flex;align-items:center;gap:8px}
.subir input{position:absolute;opacity:0;width:1px;height:1px}
.en-linea{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.en-linea input{flex:1;min-width:160px}
.en-linea .segmento{margin:0;min-width:220px}
.bloqueos{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.bloqueos li{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:var(--crema)}
.bloqueos li form{margin-left:auto}
.zona-peligro{border:1.5px dashed #F1C2BD}
.actividad{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.actividad li{display:grid;grid-template-columns:140px 160px 1fr;gap:12px;padding:10px 4px;border-bottom:1px solid var(--crema-2);font-size:14px}
.actividad time{color:var(--gris);font-variant-numeric:tabular-nums}
.actividad small{grid-column:3;color:var(--gris)}

/* ---------- Celular: el menú baja a una barra de pestañas, como una app ---------- */
@media (max-width:900px){
  body.panel{grid-template-columns:1fr;padding-bottom:84px}
  .lado{position:fixed;inset:auto 0 0 0;height:auto;z-index:50;flex-direction:row;padding:8px 8px calc(8px + env(safe-area-inset-bottom));gap:0;border-radius:22px 22px 0 0}
  .lado>.marca,.yo{display:none}
  .menu{flex-direction:row;justify-content:space-around;gap:2px}
  .menu a{flex:1;flex-direction:column;gap:3px;padding:7px 2px;font-size:11px;border-radius:12px;text-align:center}
  .menu a span{white-space:nowrap}
  .contenido{padding:22px 16px 40px}
  .metricas{grid-template-columns:1fr 1fr}
  .ficha{grid-template-columns:1fr}
  .lateral .pegado{position:static}
  .actividad li{grid-template-columns:1fr;gap:2px}
  .actividad small{grid-column:auto}
  .fila-p{flex-wrap:wrap}
  .fila-der{width:100%;justify-content:flex-start;padding-left:50px}
}
@media (max-width:420px){.menu a span{font-size:10px}.que-sigue li{flex-direction:column;align-items:flex-start}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===================== App del usuario (paso 2) ===================== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
body.app{background:var(--crema)}
.previa{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;padding:8px 16px;background:var(--dunes);color:var(--palm);font:600 13px/1.3 var(--texto);text-align:center}
.previa a{color:var(--palm)}
.app-cab{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px clamp(16px,4vw,48px);background:rgba(250,247,242,.9);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--linea)}
.app-cab .marca{color:var(--palm)}
.app-nav{display:flex;gap:6px}
.app-nav a{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;color:var(--palm);text-decoration:none;font-weight:600;font-size:14px}
.app-nav a .ic{width:20px;height:20px}
.app-nav a.on{background:var(--palm);color:var(--crema)}
.vy-ic{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--palm);color:var(--aqua);font:800 10px var(--titulo)}
.app-nav a.on .vy-ic{background:var(--aqua);color:var(--palm)}
.app-main{max-width:1280px;margin:0 auto;padding:22px clamp(16px,4vw,48px) 60px}

/* Saludo con un toque de collage */
.saludo-app{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:30px clamp(20px,4vw,44px) 0;border-radius:28px;background:var(--palm);color:var(--crema);overflow:hidden;min-height:220px;margin:0 0 18px}
.saludo-txt{padding-bottom:30px;max-width:560px;position:relative;z-index:1}
.saludo-app h1{font:800 clamp(34px,5vw,60px)/.95 var(--titulo);text-transform:uppercase;letter-spacing:-.03em;margin:0 0 12px}
.saludo-app p{margin:0;color:rgba(250,247,242,.82);font-size:16px}
.saludo-st{width:clamp(130px,18vw,210px);height:auto;align-self:flex-end;margin-bottom:-6px;rotate:3deg}
.saludo-g{position:absolute;pointer-events:none}
.saludo-g.g1{width:30px;right:22%;top:22px;rotate:12deg}
.saludo-g.g2{width:70px;right:4%;top:30px;rotate:-10deg}

/* Filtros */
.filtros-app{display:grid;gap:14px;margin:0 0 22px;padding:20px;border-radius:24px;background:#fff}
.buscar{position:relative;display:block}
.buscar input{width:100%;min-height:52px;padding:12px 56px 12px 18px;border:1.5px solid var(--linea);border-radius:999px;font:500 16px var(--texto);color:var(--tinta);background:var(--crema)}
.buscar input:focus{outline:0;border-color:var(--turquesa);box-shadow:0 0 0 4px rgba(0,159,145,.14);background:#fff}
.buscar button{position:absolute;right:6px;top:6px;width:40px;height:40px;border:0;border-radius:50%;background:var(--boton);color:#fff;display:grid;place-items:center}
.fila-filtro{display:grid;gap:8px;min-width:0}
.et{font:700 13px var(--texto);color:var(--palm);text-transform:uppercase;letter-spacing:.04em}
.carril{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:0 20px 2px;scroll-snap-type:x proximity}
.carril::-webkit-scrollbar{display:none}
.carril label{scroll-snap-align:start;flex:none}
.dos-filtros{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px}
.contador{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:var(--crema-2)}
.contador button{width:38px;height:38px;border:0;border-radius:50%;background:#fff;color:var(--palm);font:700 20px/1 var(--texto);box-shadow:0 1px 3px rgba(0,72,81,.12);transition:transform .12s}
.contador button:active{transform:scale(.92)}
.contador input{width:42px;border:0;background:transparent;text-align:center;font:800 18px var(--titulo);color:var(--palm);min-height:0;padding:0}
#resultados{transition:opacity .2s}
#resultados.cargando{opacity:.45}
.conteo{margin:0 0 12px;color:var(--gris);font-weight:500}

/* Tarjetas de experiencia */
.rejilla-app{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.tarj{display:flex;flex-direction:column;border-radius:22px;background:#fff;overflow:hidden;text-decoration:none;color:var(--tinta);transition:transform .3s var(--ease),box-shadow .3s}
.tarj:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(0,72,81,.14)}
.tarj:active{transform:scale(.98)}
.tarj-foto{position:relative;aspect-ratio:4/3;background:var(--sand);overflow:hidden}
.tarj-foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.tarj:hover .tarj-foto img{transform:scale(1.05)}
.tarj-sellos{position:absolute;left:10px;top:10px;display:flex;gap:6px;flex-wrap:wrap}
.sello{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:999px;font:700 11.5px/1 var(--texto);background:#fff;color:var(--palm);box-shadow:0 4px 12px rgba(0,0,0,.12)}
.sello .ic{width:13px;height:13px;color:var(--turquesa)}
.sello.plan{background:var(--palm);color:var(--crema)}
.tarj-cuerpo{display:flex;flex-direction:column;gap:5px;padding:14px 16px 16px;flex:1}
.tarj-cuerpo small{color:var(--gris);font-weight:500}
.tarj-cuerpo b{font-size:16px;line-height:1.3;flex:1}
.tarj-precio{display:flex;flex-direction:column;margin-top:6px}
.tarj-precio em{font-style:normal;font-size:12px;color:var(--gris)}
.tarj-precio strong{font:800 20px var(--titulo);color:var(--palm)}
.vacio-app{text-align:center;padding:50px 20px;border-radius:24px;background:#fff}
.vacio-app h1,.vacio-app h2{font:800 24px/1.1 var(--titulo);color:var(--palm);margin:14px 0 8px}
.vacio-app p{color:var(--gris);max-width:460px;margin:0 auto 20px}
.vacio-app.grande{padding:80px 24px;max-width:640px;margin:20px auto}

/* Detalle */
.volver-app{display:inline-block;margin:0 0 14px;color:var(--gris);text-decoration:none;font-weight:500}
.detalle{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:28px;align-items:start}
.galeria{position:relative;border-radius:26px;overflow:hidden;background:var(--sand)}
.gal-carril{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.gal-carril::-webkit-scrollbar{display:none}
.gal-carril figure{flex:0 0 100%;margin:0;aspect-ratio:16/10;scroll-snap-align:start}
.gal-carril img{width:100%;height:100%;object-fit:cover}
.gal-puntos{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:6px}
.gal-puntos i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);transition:width .25s,background .25s}
.gal-puntos i.on{width:20px;border-radius:4px;background:#fff}
.galeria .tarj-sellos{left:14px;top:14px}
.det-cab{padding:22px 0 6px}
.det-cab small{color:var(--gris);font-weight:600}
.det-cab h1{font:800 clamp(28px,3.4vw,42px)/1.05 var(--titulo);color:var(--palm);margin:8px 0 10px;letter-spacing:-.025em}
.det-resumen{font-size:18px;color:var(--tinta);margin:0 0 12px}
.det-ocasiones{display:flex;gap:6px;flex-wrap:wrap}
.det-bloque{padding:22px 0;border-top:1px solid var(--linea)}
.det-bloque h2{font-size:19px;color:var(--palm);margin:0 0 12px}
.det-bloque p{margin:0;color:var(--tinta)}
.det-bloque.doble{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.incluye{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
.incluye li{display:flex;gap:10px;align-items:flex-start}
.incluye .ic{width:20px;height:20px;color:var(--turquesa);margin-top:1px}
.no-incluye{margin-top:14px!important;color:var(--gris)!important;font-size:14px}
.del-plan{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.del-plan li{padding:12px 14px;border-radius:14px;background:#fff}
.del-plan b{display:block}
.del-plan small{color:var(--gris)}
.pasos-res{list-style:none;margin:0;padding:0;counter-reset:p;display:grid;gap:12px}
.pasos-res li{counter-increment:p;position:relative;padding-left:46px;color:var(--gris)}
.pasos-res li::before{content:counter(p);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--sand);color:var(--palm);font:800 15px var(--titulo)}
.pasos-res b{display:block;color:var(--tinta)}
.garantia{display:flex;gap:16px;align-items:flex-start;padding:22px;border-radius:20px;background:var(--sand);border-top:0;margin-top:8px}
.det-lado{position:sticky;top:84px}
.caja-reserva{padding:24px;border-radius:24px;background:#fff;box-shadow:0 20px 50px rgba(0,72,81,.1)}
.cr-precio{margin:0 0 18px;display:flex;flex-direction:column}
.cr-precio em{font-style:normal;color:var(--gris);font-size:14px}
.cr-precio strong{font:800 34px/1.1 var(--titulo);color:var(--palm);transition:transform .25s var(--ease)}
.cr-precio strong.pulso{transform:scale(1.04)}
.cr-precio small{color:var(--gris)}
.caja-reserva .campo input[type=date]{min-height:48px}
.fecha-msg{display:block;margin-top:6px;color:var(--gris)}
.fecha-msg.mal{color:#B3261E;font-weight:600}
.cr-nota{margin:12px 0 0;text-align:center;font-size:13px;color:var(--gris)}
.parecidas{margin-top:40px}
.parecidas h2{font:800 24px var(--titulo);color:var(--palm);margin:0 0 16px}

@media (max-width:900px){
  body.app{padding-bottom:78px}
  .app-nav{position:fixed;inset:auto 0 0 0;z-index:50;justify-content:space-around;padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:var(--palm);border-radius:22px 22px 0 0}
  .app-nav a{flex:1;flex-direction:column;gap:3px;padding:6px 2px;font-size:11px;color:rgba(250,247,242,.78);border-radius:14px}
  .app-nav a.on{background:var(--crema);color:var(--palm)}
  .app-nav .vy-ic{background:var(--aqua);color:var(--palm)}
  .detalle{grid-template-columns:1fr}
  .det-lado{position:fixed;left:0;right:0;bottom:70px;top:auto;z-index:30;padding:0 10px}
  .caja-reserva{padding:14px 16px;border-radius:20px;display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;box-shadow:0 -8px 30px rgba(0,72,81,.16)}
  .caja-reserva .cr-precio{margin:0}
  .caja-reserva .cr-precio strong{font-size:22px}
  .caja-reserva .cr-precio small{display:none}
  .caja-reserva .campo{margin:0;grid-column:1/-1}
  .caja-reserva .campo:first-of-type{grid-column:auto;grid-row:1;justify-self:end}
  .caja-reserva .campo:first-of-type>span:not(.contador),.caja-reserva .campo:first-of-type small{display:none}
  .caja-reserva .campo>span{font-size:12px;margin-bottom:4px}
  .caja-reserva .btn{grid-column:1/-1;min-height:48px}
  .cr-nota{display:none}
  .app-main{padding-bottom:300px}
  .incluye{grid-template-columns:1fr}
  .det-bloque.doble{grid-template-columns:1fr}
  .dos-filtros{grid-template-columns:1fr}
  .saludo-st{width:110px}
  .saludo-app{min-height:0;padding-top:22px}
}
@media (max-width:420px){.saludo-st{display:none}.saludo-txt{padding-bottom:22px}}
.ver-app{display:block;padding:11px 12px;border-radius:14px;color:var(--aqua);font-weight:600;text-decoration:none;font-size:14px}
.ver-app:hover{background:rgba(255,255,255,.07)}
@media (max-width:900px){.ver-app{display:none}}
/* Celular: sin vidrio en el encabezado (si no, la barra fija queda atada a él) y contador en una sola línea */
@media (max-width:900px){
  .app-cab{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--crema)}
  .caja-reserva .contador{display:flex;flex-wrap:nowrap;min-width:max-content}
  .previa{font-size:12px;padding:6px 12px}
}

/* ===================== Login con tarjeta que gira ===================== */
.simple-in.ancho{max-width:880px}
.flip{perspective:1800px}
.flip-in{position:relative;height:540px;border-radius:30px;background:#fff;box-shadow:0 30px 70px rgba(0,72,81,.16);transform-style:preserve-3d}
.flip-panel{position:absolute;top:0;bottom:0;width:50%;padding:44px 40px;display:flex;flex-direction:column;justify-content:center;transition:opacity .55s var(--ease),transform .7s var(--ease)}
.lado-correo{left:0}
.lado-codigo{left:50%;opacity:0;transform:scale(.94);pointer-events:none}
.flip.girado .lado-correo{opacity:0;transform:scale(.94);pointer-events:none}
.flip.girado .lado-codigo{opacity:1;transform:none;pointer-events:auto;transition-delay:.25s}
.flip-tapa{position:absolute;top:0;left:50%;width:50%;height:100%;z-index:3;transform-origin:left center;transform-style:preserve-3d;transition:transform .95s cubic-bezier(.65,0,.35,1);will-change:transform}
.flip.girado .flip-tapa{transform:rotateY(-180deg)}
.tapa-cara{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:44px 38px;display:flex;flex-direction:column;justify-content:flex-start}
.tapa-cara.frente{background:var(--palm);color:var(--crema);border-radius:0 30px 30px 0}
.tapa-cara.dorso{background:var(--dunes);color:var(--palm);transform:rotateY(180deg);border-radius:30px 0 0 30px}
.tapa-tit{position:relative;z-index:1;margin:0 0 12px;font:800 clamp(30px,3.4vw,42px)/.95 var(--titulo);text-transform:uppercase;letter-spacing:-.03em}
.frente .tapa-tit span{color:var(--aqua)}
.tapa-txt{position:relative;z-index:1;margin:0;max-width:260px;font-size:15px;line-height:1.45;opacity:.9}
.tapa-st{position:absolute;right:-8px;bottom:-10px;width:62%;max-width:250px;height:auto;rotate:3deg}
.dorso .tapa-st{rotate:-4deg;width:56%}
.tapa-g{position:absolute;pointer-events:none}
.tapa-g.g1{width:30px;left:40px;bottom:120px;rotate:12deg}
.tapa-g.g2{width:70px;right:40px;top:40px;rotate:-10deg}
.tapa-g.g3{width:36px;left:44px;bottom:110px}
.tapa-g.g4{width:86px;left:120px;bottom:180px;rotate:30deg}
.enlace-btn{margin:14px auto 0;border:0;background:none;color:var(--boton);font:500 14px var(--texto);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.flip .titulo{font-size:clamp(30px,3.6vw,40px)}
.flip .btn[data-enviar-correo].cargando{opacity:.7;pointer-events:none}

/* Celular: la tarjeta entera gira sobre sí misma */
@media (max-width:760px){
  .flip-in{height:auto;min-height:470px;background:none;box-shadow:none;transition:transform .9s cubic-bezier(.65,0,.35,1)}
  .flip.girado .flip-in{transform:rotateY(180deg)}
  .flip-panel{position:relative;width:auto;left:auto;padding:34px 26px;border-radius:28px;background:#fff;box-shadow:0 24px 60px rgba(0,72,81,.14);backface-visibility:hidden;-webkit-backface-visibility:hidden;opacity:1!important;transform:none;pointer-events:auto;min-height:470px}
  .lado-codigo{position:absolute;inset:0;transform:rotateY(180deg)!important}
  .flip-tapa{display:none}
  .lado-correo::before,.lado-codigo::before{content:"";display:block;width:84px;height:84px;margin:-6px 0 14px;border-radius:24px;background:var(--palm) url("https://vivevyvo.com/assets/img/st-senala.webp") center 20%/120% auto no-repeat}
  .lado-codigo::before{background-color:var(--dunes);background-image:url("https://vivevyvo.com/assets/img/st-celular.webp")}
}
@media (prefers-reduced-motion:reduce){.flip-tapa,.flip-in,.flip-panel{transition:none!important}}

/* ===================== Reservas (paso 3) ===================== */
.res-solicitada{background:#FFE9D2;color:#8A4A00}
.res-en_validacion{background:#E3F1FF;color:#0B4F8A}
.res-confirmada{background:#DDF3EF;color:#00574F}
.res-pagada{background:#00574F;color:#fff}
.res-finalizada{background:var(--palm);color:var(--crema)}
.res-cancelada{background:#FCE8E6;color:#9B2C22}
.res-reembolsada{background:#EFE7FF;color:#4B2E9A}
.cod{font:600 12px/1 ui-monospace,Menlo,monospace;color:var(--gris);background:var(--crema-2);padding:4px 8px;border-radius:8px}
.datos-res{display:grid;grid-template-columns:120px 1fr;gap:10px 14px;margin:0}
.datos-res dt{color:var(--gris);font-size:14px}
.datos-res dd{margin:0}
.linea-tiempo{list-style:none;margin:0;padding:0 0 0 18px;border-left:2px solid var(--linea);display:grid;gap:14px}
.linea-tiempo li{position:relative;display:grid;gap:2px}
.linea-tiempo li::before{content:"";position:absolute;left:-25px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--turquesa);box-shadow:0 0 0 3px #fff}
.linea-tiempo li.res-cancelada::before{background:#D9534F}
.linea-tiempo li.res-solicitada::before{background:var(--dunes)}
.linea-tiempo time{font-size:12.5px;color:var(--gris)}
.linea-tiempo small{color:var(--tinta)}
.linea-tiempo li{background:none;color:inherit}
.acciones-res form{margin:0 0 10px}
.acciones-res .btn .ic{width:18px;height:18px}
.mini{font-size:12.5px;margin:-4px 0 12px}
.desplegar{margin:0 0 10px;border-radius:14px;background:var(--crema)}
.desplegar summary{cursor:pointer;padding:12px 14px;font-weight:600;color:var(--palm);list-style:none}
.desplegar summary::-webkit-details-marker{display:none}
.desplegar summary::after{content:"+";float:right;font-weight:800}
.desplegar[open] summary::after{content:"–"}
.desplegar form{padding:0 14px 14px}
.desplegar.peligro summary{color:#9B2C22}

/* App: solicitar, mis planes, mi VYVO */
.caja-reserva.resumen{display:block}
.res-foto{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:16px;margin:0 0 14px}
.res-tit{display:block;font-size:16px;margin:0 0 10px}
.res-datos{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 16px}
.res-datos dt{color:var(--gris)}
.res-datos dd{margin:0;font-weight:600;text-align:right}
.det-bloque.destacado{padding:22px;border-radius:20px;background:#fff;border-top:0;margin:0 0 6px}
.datos-pago{margin:12px 0 0!important;padding:14px 16px;border-radius:14px;background:var(--sand);color:var(--palm)!important;font-weight:600;white-space:pre-line}
.lista-planes{display:grid;gap:10px}
.plan-fila{display:flex;align-items:center;gap:14px;padding:12px;border-radius:20px;background:#fff;text-decoration:none;color:var(--tinta);transition:transform .2s var(--ease),box-shadow .2s}
.plan-fila:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,72,81,.1)}
.plan-foto{flex:none;width:86px;height:86px;border-radius:14px;overflow:hidden;background:var(--sand)}
.plan-foto img{width:100%;height:100%;object-fit:cover}
.plan-txt{flex:1;min-width:0;display:grid;gap:4px;justify-items:start}
.plan-txt small{color:var(--gris)}
.plan-fila>.ic{color:var(--gris)}
.fundador-carnet{position:relative;display:grid;gap:2px;padding:24px;border-radius:24px;background:var(--palm);color:var(--crema);margin:0 0 16px;overflow:hidden}
.fundador-carnet small{color:var(--aqua);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.fundador-carnet b{font:800 54px/1 var(--titulo)}
.fundador-carnet svg{position:absolute;right:22px;top:22px}
.btn-sec.ancho{width:100%}
@media (max-width:900px){
  .caja-reserva.resumen{position:static;box-shadow:none}
  .det-lado:has(.resumen){position:static;padding:0}
  .datos-res{grid-template-columns:1fr}
  .datos-res dt{margin-top:6px}
}

/* ===================== Vy AI (paso 4) ===================== */
.vy{max-width:820px;margin:0 auto;display:flex;flex-direction:column;min-height:calc(100svh - 140px)}
.vy-cab{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:22px;background:var(--palm);color:var(--crema);margin:0 0 14px}
.vy-avatar{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--aqua);color:var(--palm);font:800 17px var(--titulo)}
.vy-cab b{display:block;font:800 18px var(--titulo)}
.vy-cab small{color:rgba(250,247,242,.72)}
.vy-beta{margin-left:auto;padding:4px 10px;border-radius:999px;background:var(--dunes);color:var(--palm);font:700 11px var(--texto)}
.vy-chat{flex:1;display:flex;flex-direction:column;gap:10px;padding:6px 2px 14px}
.vy-msj{max-width:82%;padding:12px 16px;border-radius:20px;font-size:15.5px;line-height:1.45;animation:vy-entra .35s var(--ease) both}
.vy-msj.b{align-self:flex-start;background:#fff;border-bottom-left-radius:6px;box-shadow:0 2px 8px rgba(0,72,81,.06)}
.vy-msj.u{align-self:flex-end;background:var(--boton);color:#fff;border-bottom-right-radius:6px}
.vy-msj.error{background:#FCE8E6;color:#9B2C22}
.vy-meta{display:block;margin-top:6px;font-size:11.5px;color:var(--gris)}
@keyframes vy-entra{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.vy-planes{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;animation:vy-entra .45s var(--ease) both}
.vy-planes .tarj-foto{aspect-ratio:16/10}
.vy-pensando{align-self:flex-start;display:flex;gap:5px;padding:15px 16px;border-radius:20px;background:#fff}
.vy-pensando i{width:7px;height:7px;border-radius:50%;background:var(--gris-2);animation:vy-punto 1s infinite}
.vy-pensando i:nth-child(2){animation-delay:.15s}.vy-pensando i:nth-child(3){animation-delay:.3s}
@keyframes vy-punto{0%,80%,100%{opacity:.3;transform:none}40%{opacity:1;transform:translateY(-3px)}}
.vy-humano{align-self:flex-start;padding:12px 16px;border-radius:16px;background:var(--sand);color:var(--palm);font-weight:600}
.vy-sugerencias{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.vy-sugerencias button{border:1.5px solid var(--linea);background:#fff;color:var(--palm);border-radius:999px;padding:9px 14px;font:600 13.5px var(--texto);transition:background .2s,border-color .2s,transform .12s}
.vy-sugerencias button:hover{border-color:var(--turquesa);background:#F2FBFA}
.vy-sugerencias button:active{transform:scale(.97)}
.vy-escribir{position:sticky;bottom:12px;display:flex;align-items:flex-end;gap:8px;padding:8px 8px 8px 16px;border-radius:26px;background:#fff;box-shadow:0 12px 34px rgba(0,72,81,.14)}
.vy-escribir textarea{flex:1;border:0;resize:none;max-height:140px;padding:10px 0;font:500 16px/1.4 var(--texto);color:var(--tinta);background:transparent}
.vy-escribir textarea:focus{outline:0}
.vy-escribir button{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--boton);color:#fff;display:grid;place-items:center;transition:transform .12s,opacity .2s}
.vy-escribir button:active{transform:scale(.92)}
.vy-escribir.ocupado button{opacity:.5;pointer-events:none}
.vy-pie{margin:10px 0 0;text-align:center;font-size:12.5px;color:var(--gris)}
.vy-chat.admin{max-height:70vh;overflow:auto}
.vy-chat.admin .vy-msj{max-width:92%;font-size:14px;animation:none}
@media (max-width:900px){.vy{min-height:calc(100svh - 190px)}.vy-escribir{bottom:84px}.vy-msj{max-width:90%}}
@media (prefers-reduced-motion:reduce){.vy-msj,.vy-planes{animation:none}}
.vy-sugerencias[hidden]{display:none}

/* ===================== Soporte (paso 5) ===================== */
.ayuda-buscar{margin:0 0 14px}
.ayuda-buscar input{background:#fff}
.faq{display:grid;gap:8px;margin:0 0 22px}
.faq-item{border-radius:16px;background:#fff}
.faq-item summary{cursor:pointer;padding:16px 18px;font-weight:600;color:var(--palm);list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-weight:800;color:var(--dunes);transition:transform .25s var(--ease)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{margin:0;padding:0 18px 16px;color:var(--tinta)}
.ayuda-pasos{display:grid;gap:10px;margin:0 0 16px}
.ayuda-paso{display:flex;align-items:center;gap:14px;padding:16px;border-radius:20px;background:#fff;text-decoration:none;color:var(--tinta);transition:transform .2s var(--ease),box-shadow .2s}
.ayuda-paso:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,72,81,.1)}
.ayuda-paso>span:nth-child(2){flex:1;display:grid;gap:2px}
.ayuda-paso small{color:var(--gris)}
.ayuda-paso>.ic{color:var(--gris)}
.ayuda-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--dunes);color:var(--palm)}
.ayuda-paso .vy-avatar{width:44px;height:44px}
.vy-cab.persona{background:var(--palm)}
.vy-cab.persona .vy-avatar{background:var(--dunes);color:var(--palm)}
.vy-cab a.vy-beta{text-decoration:none}
.sop-sistema{align-self:center;max-width:90%;padding:6px 12px;border-radius:999px;background:var(--crema-2);color:var(--gris);font-size:12.5px;text-align:center}
.sop-autor{display:block;font-size:11.5px;font-weight:700;opacity:.75;margin-bottom:2px}
.vy-msj.u .vy-meta{color:rgba(255,255,255,.75)}

/* Bandeja del equipo, a todo el ancho */
.cab-acciones{display:flex;gap:8px;flex-wrap:wrap}
.bandeja{display:grid;grid-template-columns:340px minmax(0,1fr);gap:16px;min-height:calc(100vh - 230px)}
.bandeja-lista{display:flex;flex-direction:column;gap:6px;max-height:calc(100vh - 230px);overflow:auto;padding-right:4px}
.hilo{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:#fff;text-decoration:none;color:var(--tinta);border:2px solid transparent}
.hilo.on{border-color:var(--turquesa)}
.hilo.nuevo{background:#FFF4E8}
.hilo .avatar{background:var(--sand);color:var(--palm)}
.hilo-txt{flex:1;min-width:0}
.hilo-txt b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hilo-txt small{display:block;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hilo-der{display:grid;justify-items:end;gap:4px}
.hilo-der time{font-size:12px;color:var(--gris)}
.hilo-der em,.badge{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--beles);color:#fff;font:700 12px var(--texto);font-style:normal}
.menu a .badge{margin-left:auto}
.bandeja-chat{display:flex;flex-direction:column;background:#fff;border-radius:var(--r);padding:16px;min-width:0}
.bandeja-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;padding:0 0 12px;border-bottom:1px solid var(--crema-2);margin:0 0 10px}
.bandeja-cab small{display:block;color:var(--gris)}
.bandeja-acc{display:flex;gap:6px;flex-wrap:wrap}
.vy-chat.admin-sop{flex:1;overflow:auto;max-height:calc(100vh - 420px);padding:6px}
.vy-chat.admin-sop .vy-msj.b{background:var(--crema)}
.bandeja-chat .vy-escribir{position:static;box-shadow:none;border:1.5px solid var(--linea);margin-top:10px}
.respuestas-rapidas{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.respuestas-rapidas button{border:0;border-radius:999px;background:var(--crema-2);color:var(--palm);padding:7px 12px;font:600 12.5px var(--texto);cursor:pointer}

/* Aviso grande cuando llega un mensaje */
.aviso-soporte{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 18px;padding:16px 18px;border-radius:18px;background:var(--dunes);color:var(--palm);box-shadow:0 14px 34px rgba(255,143,28,.35);animation:vy-entra .4s var(--ease) both}
.aviso-soporte b{flex:1;font-size:16px;min-width:200px}
.pulso-dot{width:12px;height:12px;border-radius:50%;background:var(--beles);box-shadow:0 0 0 0 rgba(249,56,34,.6);animation:pulso 1.4s infinite}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(249,56,34,.6)}70%{box-shadow:0 0 0 14px rgba(249,56,34,0)}100%{box-shadow:0 0 0 0 rgba(249,56,34,0)}}
.faq-edit .faq-fila{display:grid;grid-template-columns:90px 1fr;gap:12px}
@media (max-width:900px){
  .bandeja{grid-template-columns:1fr}
  .bandeja-lista{max-height:none}
  .vy-chat.admin-sop{max-height:60vh}
  .menu a .badge{position:absolute;margin:0;transform:translate(14px,-8px)}
  .menu a{position:relative}
}
/* Equipo con varios roles por persona */
.lista-equipo{display:grid;gap:10px}
.miembro{padding:14px 16px;border-radius:16px;background:var(--crema)}
.miembro-cab{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.miembro-cab .avatar{background:var(--sand);color:var(--palm)}
.roles-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding-left:50px}
.roles-form .chips-elegir span{padding:7px 12px;font-size:13px}
.ayuda-roles{margin-top:14px}
.ayuda-roles .datos-res{padding:0 14px 14px}
@media (max-width:900px){.roles-form{padding-left:0}}

/* ===================== Funciones del 22-oct: reseñas, guardados, beneficios, empresas, avisos, calendario ===================== */
:root{--sombra:0 1px 2px rgba(0,72,81,.06),0 10px 28px rgba(0,72,81,.08);--sombra-alta:0 24px 60px rgba(0,72,81,.18)}
.mini{font-size:13px}
.tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.trampa{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.metricas:has(>.metrica:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.metricas:has(>.metrica:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.metricas:has(>.metrica:only-child){grid-template-columns:minmax(0,320px)}
.metrica.destacada{background:var(--sand)}
.metrica.destacada b{color:var(--palm)}

/* Estrellas */
.estrellas{display:inline-flex;gap:2px;vertical-align:middle}
.estrellas i{width:14px;height:14px;background:#E3DCD0;-webkit-mask:var(--estrella) center/contain no-repeat;mask:var(--estrella) center/contain no-repeat}
.estrellas i.on{background:var(--beles)}
.estrellas i.media{background:linear-gradient(90deg,var(--beles) 50%,#E3DCD0 50%)}
:root{--estrella:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z'/%3E%3C/svg%3E")}
.tarj-calif{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-size:13px;color:var(--tinta)}
.tarj-calif .ic{width:14px;height:14px;fill:var(--beles);stroke:var(--beles)}
.tarj-calif small{font-weight:500;color:var(--gris)}
.det-calif{display:inline-flex;align-items:center;gap:8px;margin:8px 0 2px;color:var(--tinta);text-decoration:none;font-size:14px}
.det-calif b{font:800 16px/1 var(--titulo)}
.det-calif span{color:var(--gris)}
.det-calif:hover span{text-decoration:underline}

/* Reseñas */
.resenas{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.resena{padding:16px 18px;border-radius:18px;background:var(--crema)}
.bloque.resena{background:#fff}
.resena.oculta{opacity:.55}
.resena p{margin:8px 0 0}
.resena-cab{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.resena-cab .avatar{width:32px;height:32px;font-size:14px}
.resena-cab time{margin-left:auto;color:var(--gris);font-size:13px}
.resena-mod{margin-left:8px}
.resena-resp{margin-top:12px!important;padding:12px 14px;border-left:3px solid var(--turquesa);border-radius:0 12px 12px 0;background:rgba(0,159,145,.07)}
.resena-resp b{display:block;font-size:13px;color:var(--palm);margin-bottom:2px}
.chip.fundador{background:var(--dunes);color:var(--palm)}
.en-linea.responder{margin-top:12px}
.opinar{background:linear-gradient(180deg,#fff,var(--crema))}
.elegir-estrellas{display:inline-flex;flex-direction:row-reverse;gap:6px;border:0;padding:0;margin:4px 0 14px}
.elegir-estrellas input{position:absolute;opacity:0;pointer-events:none}
.elegir-estrellas label{cursor:pointer;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;transition:transform .16s var(--ease),background .2s}
.elegir-estrellas label .ic{width:32px;height:32px;stroke:#CFC6B8;fill:transparent;transition:fill .18s,stroke .18s}
.elegir-estrellas label:active{transform:scale(.88)}
.elegir-estrellas input:checked~label .ic,.elegir-estrellas label:hover .ic,.elegir-estrellas label:hover~label .ic{fill:var(--beles);stroke:var(--beles)}
.elegir-estrellas input:focus-visible+label{outline:3px solid rgba(0,159,145,.35)}

/* Guardar y compartir */
.det-acciones{display:flex;gap:10px;margin:14px 0 0}
.det-acciones form{margin:0}
.guardar .ic{transition:transform .25s var(--ease),fill .2s}
.guardar.on{background:#FFE4DE;color:#B2261A}
.guardar.on .ic{fill:currentColor}
.guardar.latido .ic{animation:latido .4s var(--ease)}
@keyframes latido{40%{transform:scale(1.35)}}
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));z-index:120;translate:-50% 16px;opacity:0;padding:12px 18px;border-radius:999px;background:rgba(23,33,38,.92);color:#fff;font-weight:600;font-size:14px;box-shadow:var(--sombra-alta);transition:opacity .25s,translate .35s var(--ease);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1;translate:-50% 0}
@media (min-width:901px){.toast{bottom:32px}}

/* Pestañas segmentadas (estilo iOS) */
.segmentos{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;padding:3px;margin:0 0 20px;border-radius:12px;background:var(--crema-2)}
.segmentos a{display:flex;align-items:center;justify-content:center;gap:6px;min-width:120px;min-height:36px;padding:0 16px;border-radius:9px;color:var(--gris);font-weight:600;font-size:14px;text-decoration:none;transition:background .2s,color .2s,box-shadow .2s}
.segmentos a.on{background:#fff;color:var(--palm);box-shadow:0 1px 3px rgba(0,72,81,.12),0 3px 8px rgba(0,72,81,.06)}
.segmentos em{font-style:normal;font-size:12px;opacity:.7}
.vacio-ic{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 6px;border-radius:22px;background:var(--palm);color:var(--crema)}
.vacio-ic .ic{width:30px;height:30px}
.vacio-ic.corazon{background:#FFE4DE;color:#B2261A}
.vacio-app.enviado .vacio-ic{background:var(--boton)}

/* Beneficios e invitaciones */
.beneficios,.invitados,.lista-simple{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.beneficio{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:var(--crema)}
.beneficio.usado{opacity:.6}
.beneficio>span:nth-child(2){flex:1;display:flex;flex-direction:column}
.beneficio small{color:var(--gris)}
.beneficio-ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:var(--dunes);color:var(--palm)}
.beneficio-ic .ic{width:20px;height:20px}
.beneficio-elegir{display:grid;gap:8px}
.beneficio-op{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid var(--linea);border-radius:16px;cursor:pointer;transition:border-color .2s,background .2s}
.beneficio-op:has(input:checked){border-color:var(--dunes);background:#FFF4E8}
.beneficio-op input{width:20px;height:20px;accent-color:var(--boton);flex:none}
.beneficio-op>span:last-child{display:flex;flex-direction:column}
.beneficio-op small{color:var(--gris)}
.beneficio-usado{display:flex;gap:10px;align-items:flex-start;margin:12px 0 0;padding:12px;border-radius:14px;background:#FFF4E8;font-size:14px}
.beneficio-usado .ic{color:#B85F00;width:20px;height:20px;margin-top:2px}
.beneficio-usado b{display:block}
.invita{background:var(--palm);color:var(--crema)}
.invita h2{color:var(--crema)}
.invita b{color:var(--dunes)}
.enlace-invita{display:flex;gap:8px;margin-top:14px}
.enlace-invita input{flex:1;min-width:0;min-height:46px;padding:0 14px;border:0;border-radius:14px;background:rgba(255,255,255,.12);color:var(--crema);font:600 14px var(--texto)}
.invitados li{display:flex;align-items:center;gap:10px}
.invitados .avatar{width:30px;height:30px;font-size:13px}
.invitados b{color:var(--crema);flex:1}
.lista-simple li{display:flex;flex-direction:column;padding:10px 0;border-bottom:1px solid var(--linea)}
.lista-simple small{color:var(--gris)}

/* Empresas y pagos */
.empresas-lado .pasos-res{margin-top:12px}
.chip.emp-nueva{background:#FFE9D2;color:#8A4A00}
.chip.emp-en_conversacion{background:#E3F1FF;color:#0B4F8A}
.chip.emp-ganada{background:#DDF3EF;color:#00574F}
.chip.emp-descartada{background:var(--crema-2);color:var(--gris)}
.fila-p.on{outline:2px solid var(--turquesa);outline-offset:-2px}
.mensaje-largo{margin:14px 0;padding:14px;border-radius:14px;background:var(--crema);white-space:pre-line}
.tabla-scroll{overflow-x:auto;margin:0 -4px}
.tabla{width:100%;border-collapse:collapse;font-size:14px}
.tabla th{text-align:left;font-size:12px;font-weight:600;color:var(--gris);text-transform:uppercase;letter-spacing:.04em;padding:8px 10px;border-bottom:1px solid var(--linea)}
.tabla td{padding:12px 10px;border-bottom:1px solid var(--linea);vertical-align:top}
.tabla td small{display:block;color:var(--gris);font-size:12px}
.tabla td a{color:var(--tinta);font-weight:600;text-decoration:none}
.tabla .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabla tfoot td{font-weight:800;color:var(--palm);border-bottom:0}

/* Avisos al celular */
.avisos-celular{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:14px 16px;border-radius:20px;background:#fff;box-shadow:var(--sombra);animation:entrar .5s var(--ease)}
.avisos-celular.listo{background:#DDF3EF}
.avisos-ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px;background:var(--palm);color:var(--crema)}
.avisos-txt{flex:1;display:flex;flex-direction:column;min-width:0}
.avisos-txt small{color:var(--gris)}
.avisos-celular .cerrar{color:var(--gris);font-size:22px}
@keyframes entrar{from{opacity:0;translate:0 10px}}

/* Calendario estilo Apple */
.cal-campo{position:relative}
.cal-boton{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:0 14px;border:1.5px solid var(--linea);border-radius:14px;background:#fff;color:var(--gris);font:500 15px var(--texto);text-align:left;transition:border-color .2s,box-shadow .2s,transform .12s var(--ease)}
.cal-boton:active{transform:scale(.99)}
.cal-boton[aria-expanded=true],.cal-boton:focus-visible{outline:0;border-color:var(--turquesa);box-shadow:0 0 0 4px rgba(0,159,145,.14)}
.cal-boton.con-valor{color:var(--tinta);font-weight:600}
.cal-boton.con-valor span::first-letter{text-transform:uppercase}
.cal-boton svg{color:var(--boton);flex:none}
.en-linea .cal-campo{flex:1;min-width:180px}
.cal-panel{position:absolute;z-index:60;top:calc(100% + 8px);left:0;width:min(340px,calc(100vw - 32px));padding:16px 14px 12px;border-radius:22px;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:0 0 0 1px rgba(0,72,81,.06),var(--sombra-alta);transform-origin:top left;opacity:0;scale:.96;translate:0 -6px;transition:opacity .2s,scale .3s var(--ease),translate .3s var(--ease)}
.cal-panel.abierto{opacity:1;scale:1;translate:0 0}
.cal-panel.hoja{position:fixed;top:auto;left:0;right:0;bottom:0;width:auto;padding:10px 18px calc(22px + env(safe-area-inset-bottom));border-radius:26px 26px 0 0;scale:1;translate:0 100%;transition:translate .38s cubic-bezier(.32,.72,0,1),opacity .2s;z-index:130}
.cal-panel.hoja::before{content:"";display:block;width:38px;height:5px;margin:0 auto 12px;border-radius:3px;background:#D5CEC3}
.cal-panel.hoja.abierto{translate:0 0}
.cal-velo{position:fixed;inset:0;z-index:125;background:rgba(0,40,45,.32);opacity:0;transition:opacity .3s}
.cal-velo.abierto{opacity:1}
.cal-cab{display:flex;align-items:center;justify-content:space-between;padding:0 4px 10px}
.cal-cab b{font:700 17px var(--texto);color:var(--tinta)}
.cal-cab b::first-letter{text-transform:uppercase}
.cal-cab button{display:inline-grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--boton);transition:background .2s}
.cal-cab button:hover:not(:disabled){background:var(--crema-2)}
.cal-cab button:disabled{color:#C9C2B6;cursor:default}
.cal-sem,.cal-dias{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}
.cal-sem span{font-size:12px;font-weight:600;color:var(--gris-2);padding:2px 0 6px}
.cal-dias{row-gap:2px}
.cal-dias.de-der{animation:mesDer .3s var(--ease)}
.cal-dias.de-izq{animation:mesIzq .3s var(--ease)}
@keyframes mesDer{from{opacity:0;translate:24px 0}}
@keyframes mesIzq{from{opacity:0;translate:-24px 0}}
.cal-dias button{position:relative;justify-self:center;width:42px;height:42px;border:0;border-radius:50%;background:transparent;color:var(--tinta);font:500 17px/1 var(--texto);font-variant-numeric:tabular-nums;transition:background .15s,color .15s,transform .12s var(--ease)}
.cal-dias button:not(:disabled):hover{background:var(--crema-2)}
.cal-dias button:not(:disabled):active{transform:scale(.9)}
.cal-dias button:disabled{color:#C9C2B6;cursor:default}
.cal-dias button.hoy{color:var(--boton);font-weight:700}
.cal-dias button.lleno::after{content:"";position:absolute;left:50%;bottom:5px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--beles)}
.cal-dias button.sel{background:var(--boton);color:#fff;font-weight:700}
.cal-dias button:focus-visible{outline:2px solid var(--turquesa);outline-offset:1px}
.cal-nota{display:flex;align-items:center;gap:6px;justify-content:center;margin:10px 0 0;font-size:12px;color:var(--gris)}
.cal-nota .pt{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--tinta);margin-left:8px}
.cal-nota .pt.lleno{background:var(--beles)}
.det-lado .cal-panel{left:auto;right:0;transform-origin:top right}

@media (max-width:900px){
  .tres{grid-template-columns:1fr}
  .metricas:has(>.metrica:nth-child(3):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
  .avisos-celular{flex-wrap:wrap}
  .avisos-celular .btn{width:100%}
  .avisos-celular .cerrar{position:absolute;right:20px}
  .avisos-celular{position:relative}
  .segmentos{display:grid;width:100%}
}
@media (prefers-reduced-motion:reduce){.cal-panel,.cal-dias,.toast,.avisos-celular{animation:none!important;transition:opacity .15s!important}}
.det-bloque.invita{padding:24px 22px;border:0;border-radius:24px;margin-top:8px}
.det-bloque.invita p{color:rgba(250,247,242,.86)}
.beneficio{flex-wrap:wrap}
.beneficio>span:nth-child(2){min-width:160px}