:root{
  --morado-950:#1a0b33; --morado-800:#3a1877; --morado-700:#5b21b6;
  --morado-600:#7c3aed; --morado-500:#9d5cf5; --morado-300:#c9a6fb; --morado-100:#efe3fe;
  --blanco:#ffffff; --hueso:#faf8ff; --linea:#e9e0fb;
  --texto-900:#241539; --texto-500:#7a6f92; --texto-400:#a79ac0;
  --exito:#22c55e; --alerta:#f59e0b; --peligro:#ef4444;
  --radio-tarjeta:18px; --radio-chip:999px;
  --sombra-tarjeta: 0 6px 18px -8px rgba(91,33,182,0.20);
  --fuente: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}
html,body{height:100%; overscroll-behavior:none; overscroll-behavior-y:contain;}
body{
  margin:0; font-family:var(--fuente);
  background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 35%, #e0c3fc 70%, #fbc2eb 100%);
  background-attachment: fixed;
  color:var(--texto-900); overscroll-behavior:none; overscroll-behavior-y:contain;
}
html[data-tema="oscuro"] body {
  background: radial-gradient(120% 60% at 50% -10%, #241a3d 0%, #120d18 55%);
}
button, input, textarea{font-family:inherit;}
a{color:inherit; text-decoration:none;}
img{max-width:100%;}

.telefono{max-width:430px; margin:0 auto; min-height:100vh; position:relative; padding-bottom:96px; padding-top:env(safe-area-inset-top);}

/* ============ SPLASH SCREEN / CARGA DE LA APP ============ */
.splash-screen{
  position:fixed; inset:0; z-index:999999;
  background:#000;
  display:flex; align-items:center; justify-content:center;
  opacity:1; transition:opacity 0.5s ease, visibility 0.5s ease;
  overflow:hidden; pointer-events:none; user-select:none;
}
.splash-screen.oculto{
  opacity:0; visibility:hidden; pointer-events:none;
}
.splash-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
  pointer-events:none; user-select:none; border:none; outline:none;
  transition: opacity 0.4s ease;
}
.splash-mascot{
  width:140px; height:140px; border-radius:28px;
  box-shadow:0 18px 36px -10px rgba(91,33,182,0.35);
  animation: splashBounce 2s infinite ease-in-out;
  object-fit:cover;
}
.splash-title{
  font-size:28px; font-weight:800; color:var(--morado-700); margin-top:16px; margin-bottom:12px; letter-spacing:-0.03em;
}
.splash-loader{
  width:32px; height:32px; border:3px solid var(--morado-200); border-top-color:var(--morado-600);
  border-radius:50%; animation: splashSpin 0.8s linear infinite; margin-top:4px;
}
@keyframes splashBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.03); }
}
@keyframes splashSpin {
  to { transform: rotate(360deg); }
}

/* ============ AUTENTICACIÓN ============ */
#authScreen{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; position:relative; z-index:10; pointer-events:auto !important;}
.auth-caja{width:100%; max-width:380px; background:var(--blanco); border-radius:24px; padding:28px 24px; box-shadow:var(--sombra-tarjeta); position:relative; z-index:20; pointer-events:auto !important;}
.auth-logo{width:70px; height:70px; border-radius:20px; background:linear-gradient(135deg,var(--morado-600),var(--morado-700)); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; box-shadow:0 14px 28px -10px rgba(91,33,182,0.5); overflow:hidden; padding:4px;}
.auth-logo-img{width:100%; height:100%; object-fit:cover; border-radius:16px;}
.auth-titulo{text-align:center; font-size:22px; font-weight:800; letter-spacing:-0.02em; margin-bottom:2px;}
.auth-sub{text-align:center; color:var(--texto-500); font-size:13.5px; margin-bottom:20px;}
.auth-tabs{display:flex; background:var(--morado-100); border-radius:14px; padding:4px; margin-bottom:18px;}
.auth-tab{flex:1; text-align:center; padding:9px; border-radius:11px; font-size:13.5px; font-weight:700; color:var(--morado-700); cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;}
.auth-tab.activo{background:var(--blanco); box-shadow:0 4px 10px -4px rgba(91,33,182,0.3);}
.campo{margin-bottom:12px; position:relative; z-index:25; pointer-events:auto !important;}
.campo label{display:block; font-size:11.5px; font-weight:700; color:var(--texto-500); text-transform:uppercase; letter-spacing:0.4px; margin-bottom:5px;}
.campo input, .campo select, .campo textarea{
  width:100%; border:1.5px solid var(--linea); border-radius:13px; padding:12px 13px;
  font-size:15px; background:var(--hueso); color:var(--texto-900); outline:none;
  position:relative; z-index:30; pointer-events:auto !important; user-select:text !important; -webkit-user-select:text !important;
}
.campo input:focus, .campo select:focus, .campo textarea:focus{border-color:var(--morado-500);}
.campo-error{color:var(--peligro); font-size:12.5px; margin-top:4px; min-height:15px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.vista-auth{display:none;}
.vista-auth.activo{display:block;}

/* ============ Barra Superior Audio Persistente (Estilo WhatsApp) ============ */
.top-audio-banner {
  position: sticky;
  top: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  height: 36px;
  background: var(--blanco);
  color: var(--texto-900);
  border-bottom: 1.5px solid var(--borde);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.22s ease;
}

body[data-tema="oscuro"] .top-audio-banner {
  background: var(--fondo-tarjeta);
  color: var(--texto-900);
  border-bottom: 1px solid var(--borde);
}

.top-audio-banner.oculto {
  display: none !important;
}

.top-audio-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.top-audio-equalizer {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
  flex-shrink: 0;
}

.top-audio-equalizer span {
  width: 3px;
  height: 100%;
  background: #ffffff;
  border-radius: 2px;
  animation: eqBar 0.8s ease-in-out infinite alternate;
}

.top-audio-equalizer span:nth-child(2) { animation-delay: 0.2s; }
.top-audio-equalizer span:nth-child(3) { animation-delay: 0.4s; }

@keyframes eqBar {
  0% { height: 20%; }
  100% { height: 100%; }
}

.top-audio-text {
  min-width: 0;
  flex: 1;
}

.top-audio-title {
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-audio-subtitle {
  font-size: 10.5px;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-audio-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.top-audio-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #ffffff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.15s ease;
}

.top-audio-btn:active {
  transform: scale(0.92);
}

.top-audio-btn.close {
  background: rgba(0, 0, 0, 0.25);
  font-size: 16px;
}

/* ============ Campanita / mensajes flotantes ============ */
.icono-flotante{
  position:fixed; top:calc(env(safe-area-inset-top) + 14px); z-index:18;
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,0.85); backdrop-filter:blur(16px);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px -8px rgba(91,33,182,0.35); color:var(--morado-700);
}
.icono-flotante.campana{right:18px;}
.icono-flotante.cubo-latido{
  left:18px;
  border-radius:12px;
  cursor:pointer;
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.icono-flotante.cubo-latido.activo{
  background:linear-gradient(135deg, #ec4899, #8b5cf6);
  color:#ffffff;
  box-shadow:0 0 14px rgba(236,72,153,0.6);
}
.icono-flotante .punto-badge{
  position:absolute; top:6px; right:6px; width:9px; height:9px; border-radius:50%;
  background:var(--alerta); border:2px solid var(--hueso); display:none;
}
.icono-flotante.hay-notif .punto-badge{display:block;}

/* ============ Vistas / secciones principales ============ */
.vista-app{display:none; padding:64px 16px 20px; opacity:0; transition:opacity 0.15s ease-in-out; overscroll-behavior:none; overscroll-behavior-y:contain;}
.vista-app.activo{display:block; opacity:1;}
.titulo-vista{font-size:22px; font-weight:800; letter-spacing:-0.02em; margin-bottom:14px;}

.feed{display:flex; flex-direction:column; gap:10px;}
.aviso-vacio{
  text-align:center; color:var(--texto-500); font-size:13.5px; padding:30px 20px;
  background:var(--blanco); border-radius:var(--radio-tarjeta); border:1px dashed var(--linea);
}

/* ---- Barra de estados (historias) ---- */
.barra-estados{display:flex; gap:12px; overflow-x:auto; padding:2px 2px 14px; scrollbar-width:none;}
.barra-estados::-webkit-scrollbar{display:none;}
.item-estado{display:flex; flex-direction:column; align-items:center; gap:5px; flex:0 0 auto; width:64px;}
.item-estado .anillo-estado{width:58px; height:58px; border-radius:50%; padding:0; background:transparent;}
.item-estado .anillo-estado.visto{background:transparent;}
.item-estado .anillo-estado.mio{background:transparent;}
.item-estado img{width:100%; height:100%; border-radius:50%; object-fit:cover; border:none; display:block;}
.item-estado .plus{position:relative;}
.item-estado .plus .signo{position:absolute; bottom:-2px; right:-2px; width:19px; height:19px; border-radius:50%; background:var(--morado-600); border:2px solid var(--hueso); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800;}
.item-estado span{font-size:11px; color:var(--texto-500); font-weight:600; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:64px;}

/* ---- Composer de publicación ---- */
.compositor{background:var(--blanco); border-radius:var(--radio-tarjeta); box-shadow:var(--sombra-tarjeta); padding:12px 14px; margin-bottom:14px;}
.compositor-fila{display:flex; gap:10px; align-items:center;}
.compositor-fila img{width:38px; height:38px; border-radius:50%; object-fit:cover; flex:0 0 auto;}
.compositor textarea{flex:1; border:none; background:var(--hueso); border-radius:13px; padding:10px 13px; resize:none; font-size:14.5px; min-height:40px; outline:none;}
.compositor-acciones{display:flex; justify-content:space-between; align-items:center; margin-top:10px;}
.compositor-adjuntar{display:flex; align-items:center; gap:6px; color:var(--morado-700); font-weight:700; font-size:13px;}
.compositor-preview{width:100%; max-height:180px; object-fit:cover; border-radius:12px; margin-top:8px; display:none;}
.compositor-preview.activo{display:block;}

/* ---- Publicaciones del feed ---- */
.publicacion{background:var(--blanco); border-radius:var(--radio-tarjeta); box-shadow:var(--sombra-tarjeta); overflow:hidden; margin-bottom:12px;}
.publicacion-header{display:flex; align-items:center; gap:10px; padding:12px 14px;}
.publicacion-header img{width:42px; height:42px; border-radius:50%; object-fit:cover;}
.publicacion-header .nombre{font-weight:700; font-size:14.5px;}
.publicacion-header .fecha{font-size:11.5px; color:var(--texto-500);}
.publicacion-texto{padding:0 14px 10px; font-size:14.5px; line-height:1.5;}
.publicacion-img{width:100%; max-height:340px; object-fit:cover; display:block;}
.publicacion-acciones{display:flex; border-top:1px solid var(--linea);}
.publicacion-accion{flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:11px; font-size:13px; font-weight:700; color:var(--texto-500);}
.publicacion-accion.activo{color:var(--morado-700);}
.publicacion-accion svg{width:17px; height:17px;}
.comentarios-caja{padding:0 14px 12px; display:none;}
.comentarios-caja.activo{display:block;}
.comentario-item{display:flex; gap:8px; padding:6px 0; font-size:13px;}
.comentario-item img{width:26px; height:26px; border-radius:50%; object-fit:cover; flex:0 0 auto;}
.comentario-item b{font-weight:700; margin-right:5px;}
.comentario-input-fila{display:flex; gap:8px; margin-top:8px;}
.comentario-input-fila input{flex:1; border:1px solid var(--linea); border-radius:20px; padding:8px 13px; font-size:13px; outline:none;}

/* ---- Tarjetas de persona (buscar / feed de personas) ---- */
.tarjeta{
  background:var(--blanco); border-radius:var(--radio-tarjeta); box-shadow:var(--sombra-tarjeta);
  border:1px solid rgba(91,33,182,0.06); display:flex; align-items:center; gap:13px;
  padding:12px 14px; transition:transform .2s cubic-bezier(.2,.8,.2,1);
}
.tarjeta:active{transform:scale(0.97);}
.avatar-wrap{position:relative; flex:0 0 auto;}
.avatar-circulo{width:56px; height:56px; border-radius:50%; object-fit:cover; border:2px solid var(--morado-100); display:block; background:var(--morado-100);}
.punto-online{position:absolute; bottom:1px; right:1px; width:13px; height:13px; border-radius:50%; background:var(--texto-400); border:2px solid var(--blanco);}
.punto-online.en-linea{background:var(--exito);}
.check-amigo{
  position:absolute; bottom:-2px; right:-2px; width:19px; height:19px; border-radius:50%;
  background:var(--exito); border:2px solid var(--blanco); display:none;
  align-items:center; justify-content:center;
}
.check-amigo.activo{display:flex;}
.id-persona{display:flex; flex-direction:column; gap:4px; min-width:0; flex:1 1 auto;}
.id-persona .nombre{font-size:16px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.id-persona .detalle{font-size:12.5px; color:var(--texto-500); display:flex; align-items:center; gap:5px; flex-wrap:wrap;}
.id-persona .detalle .sep{width:3px; height:3px; border-radius:50%; background:var(--texto-400);}
.chevron{flex:0 0 auto; color:var(--morado-300);}
.mini-btn{flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:5px; padding:8px 12px; border-radius:12px; font-size:12.5px; font-weight:700;}
.mini-btn.primario{background:linear-gradient(135deg,var(--morado-600),var(--morado-700)); color:#fff;}
.mini-btn.secundario{background:var(--morado-100); color:var(--morado-700);}
.acciones-tarjeta{display:flex; gap:6px; flex:0 0 auto;}
.icono-btn{width:38px; height:38px; border-radius:50%; background:var(--morado-100); color:var(--morado-700); display:flex; align-items:center; justify-content:center; flex:0 0 auto; cursor:pointer; transition:all .15s ease;}
.icono-btn.activo{background:var(--morado-600); color:#ffffff; box-shadow:0 2px 8px rgba(124,58,237,0.35);}
.icono-btn.llamada-audio{background:#e6f8ef; color:var(--exito);}
.icono-btn.llamada-video{background:#e9f1ff; color:#2563eb;}

/* ---- Buscador ---- */
.caja-busqueda{display:flex; align-items:center; gap:8px; background:var(--blanco); border:1.5px solid var(--linea); border-radius:16px; padding:11px 14px; margin-bottom:14px;}
.caja-busqueda input{flex:1; border:none; outline:none; font-size:15px; background:transparent;}
.caja-busqueda svg{color:var(--texto-400); flex:0 0 auto;}

/* ---- Contactos: sub tabs ---- */
.sub-tabs{display:flex; gap:8px; margin-bottom:14px; overflow-x:auto;}
.sub-tab{flex:1; text-align:center; padding:9px; border-radius:12px; font-size:13.5px; font-weight:700; color:var(--morado-700); background:var(--morado-100); cursor:pointer; white-space:nowrap;}
.sub-tab.activo{background:var(--morado-700); color:#fff;}

/* ---- Admin Panel: Navegación por Grid de Tarjetas Cuadradas ---- */
.admin-grid-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
  width: 100%;
  box-sizing: border-box;
}

.admin-card-cuadrado {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 18px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 105px;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

.admin-card-cuadrado:active {
  transform: scale(0.96);
}

.admin-card-cuadrado.activo {
  background: linear-gradient(135deg, var(--morado-600), var(--morado-700));
  border-color: var(--morado-700);
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.35);
}

.admin-card-cuadrado .admin-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--morado-100);
  color: var(--morado-700);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  transition: background 0.15s ease, color 0.15s ease;
}

.admin-card-cuadrado.activo .admin-card-icon {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.admin-card-cuadrado .admin-card-title {
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

.admin-card-cuadrado.activo .admin-card-title {
  color: #ffffff;
}

.admin-card-cuadrado .admin-card-sub {
  font-size: 10.5px;
  color: var(--texto-500);
  line-height: 1.2;
}

.admin-card-cuadrado.activo .admin-card-sub {
  color: rgba(255, 255, 255, 0.82);
}

html[data-tema="oscuro"] .admin-card-cuadrado {
  background: var(--fondo-tarjeta, #121217);
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-tema="oscuro"] .admin-card-cuadrado.activo {
  background: linear-gradient(135deg, var(--morado-600), var(--morado-800));
}

/* ---- Mensajes ---- */
.lista-conversaciones{display:flex; flex-direction:column; gap:8px;}
.conversacion-item{display:flex; align-items:center; gap:12px; background:var(--blanco); border-radius:16px; padding:11px 13px; box-shadow:var(--sombra-tarjeta);}
.conversacion-item img{width:48px; height:48px; border-radius:50%; object-fit:cover;}
.conversacion-info{flex:1; min-width:0;}
.conversacion-info .nombre{font-weight:700; font-size:14.5px;}
.conversacion-info .preview{font-size:12.5px; color:var(--texto-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.conversacion-hora{font-size:11px; color:var(--texto-400); flex:0 0 auto;}

/* ---- Vista de chat individual con fondo difuminado y dinámico ---- */
.vista-chat{position:fixed; inset:0; z-index:75; background:radial-gradient(circle at 15% 15%, rgba(192, 132, 252, 0.35) 0%, transparent 45%), radial-gradient(circle at 85% 75%, rgba(147, 197, 253, 0.35) 0%, transparent 45%), radial-gradient(circle at 50% 50%, rgba(244, 114, 182, 0.25) 0%, transparent 55%), linear-gradient(160deg, #f3e8ff 0%, #fae8ff 40%, #e0e7ff 100%); backdrop-filter:blur(32px) saturate(200%); -webkit-backdrop-filter:blur(32px) saturate(200%); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .38s cubic-bezier(.2,.85,.2,1); overscroll-behavior:none; overscroll-behavior-y:contain;}
html[data-tema="oscuro"] .vista-chat{background:radial-gradient(circle at 15% 15%, rgba(139, 92, 246, 0.28) 0%, transparent 50%), radial-gradient(circle at 85% 75%, rgba(236, 72, 153, 0.22) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.18) 0%, transparent 60%), linear-gradient(160deg, #090611 0%, #110d1f 50%, #19102b 100%);}
.vista-chat.activo{transform:translateX(0);}
.chat-header{display:flex; align-items:center; gap:12px; padding:calc(env(safe-area-inset-top) + 12px) 16px 12px; background:rgba(255,255,255,0.45); backdrop-filter:blur(24px) saturate(190%); -webkit-backdrop-filter:blur(24px) saturate(190%); border-bottom:1px solid rgba(255,255,255,0.4); flex:0 0 auto; box-shadow:0 4px 20px rgba(0,0,0,0.02);}
html[data-tema="oscuro"] .chat-header{background:rgba(18,14,28,0.55); border-bottom-color:rgba(255,255,255,0.12);}
.chat-header img{width:38px; height:38px; border-radius:50%; object-fit:cover;}
.chat-header .info{flex:1; min-width:0;}
.chat-header .nombre{font-weight:700; font-size:14.5px;}
.chat-header .estado-linea{font-size:11.5px; color:var(--texto-500);}
.chat-header .btn-volver{width:34px; height:34px; border-radius:50%; background:var(--morado-100); color:var(--morado-700); display:flex; align-items:center; justify-content:center;}
.chat-header .acciones{display:flex; gap:8px;}
.chat-mensajes{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; overscroll-behavior:none; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch;}
@keyframes msgCollisionPop {
  0% { transform: scale(0.3) translateY(20px); opacity: 0; }
  60% { transform: scale(1.08) translateY(-4px); opacity: 1; }
  80% { transform: scale(0.96) translateY(2px); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.burbuja{max-width:82%; padding:11px 16px; border-radius:20px; font-size:14.5px; line-height:1.45; position:relative; backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); transition:transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease; will-change:transform, opacity;}
.burbuja:hover{transform:translateY(-2px) scale(1.01);}

/* Animaciones laterales optimizadas para mensajes enviados y recibidos */
@keyframes msgOutSlide { 0% { opacity: 0; transform: translate3d(36px, 0, 0) scale(0.96); } 100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }
@keyframes msgInSlide { 0% { opacity: 0; transform: translate3d(-36px, 0, 0) scale(0.96); } 100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }
.msg-out-slide { animation: msgOutSlide 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.msg-in-slide { animation: msgInSlide 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* ================= 20 ANIMACIONES DE MENSAJES SALIENTES (OUTGOING) ================= */
.msg-out-anim-1 { animation: outCollisionPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.msg-out-anim-2 { animation: outFallTop 0.45s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
.msg-out-anim-3 { animation: outJorobado 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards; }
.msg-out-anim-4 { animation: outElasticRight 0.5s ease-out forwards; }
.msg-out-anim-5 { animation: outSpiralSpin 0.55s ease-out forwards; }
.msg-out-anim-6 { animation: outFlip3D 0.45s ease-out forwards; }
.msg-out-anim-7 { animation: outRubberband 0.5s ease-in-out forwards; }
.msg-out-anim-8 { animation: outSwingDrop 0.5s ease-out forwards; }
.msg-out-anim-9 { animation: outMatrixSnap 0.4s ease-out forwards; }
.msg-out-anim-10 { animation: outSkewSlide 0.42s ease-out forwards; }
.msg-out-anim-11 { animation: outFloatPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.msg-out-anim-12 { animation: outWobble 0.5s ease-in-out forwards; }
.msg-out-anim-13 { animation: outZoomBurst 0.38s ease-out forwards; }
.msg-out-anim-14 { animation: outCurtainFall 0.42s ease-out forwards; }
.msg-out-anim-15 { animation: outWaveSpring 0.5s ease-out forwards; }
.msg-out-anim-16 { animation: outImpactShock 0.4s ease-out forwards; }
.msg-out-anim-17 { animation: outVortex 0.52s ease-out forwards; }
.msg-out-anim-18 { animation: outGlitchPop 0.38s ease-out forwards; }
.msg-out-anim-19 { animation: outDropBounce 0.55s ease-out forwards; }
.msg-out-anim-20 { animation: outArcLaunch 0.48s ease-out forwards; }

@keyframes outCollisionPop { 0% { opacity: 0; transform: scale(0.3) translateX(80px); } 70% { transform: scale(1.12) translateX(-6px); } 100% { opacity: 1; transform: scale(1) translateX(0); } }
@keyframes outFallTop { 0% { opacity: 0; transform: translateY(-100px) scale(0.8); } 70% { transform: translateY(12px) scale(1.05); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes outJorobado { 0% { opacity: 0; transform: translateY(40px) scaleX(1.3) scaleY(0.6) rotate(6deg); } 60% { transform: translateY(-10px) scaleX(0.85) scaleY(1.2) rotate(-3deg); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
@keyframes outElasticRight { 0% { opacity: 0; transform: translateX(120px) scaleX(1.4); } 60% { transform: translateX(-15px) scaleX(0.9); } 80% { transform: translateX(5px) scaleX(1.03); } 100% { opacity: 1; transform: translateX(0) scaleX(1); } }
@keyframes outSpiralSpin { 0% { opacity: 0; transform: scale(0.2) rotate(360deg) translateX(100px); } 100% { opacity: 1; transform: scale(1) rotate(0deg) translateX(0); } }
@keyframes outFlip3D { 0% { opacity: 0; transform: perspective(400deg) rotateY(90deg) scale(0.7); } 100% { opacity: 1; transform: perspective(400deg) rotateY(0deg) scale(1); } }
@keyframes outRubberband { 0% { opacity: 0; transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 65% { transform: scale3d(1.15, 0.85, 1); } 100% { opacity: 1; transform: scale3d(1, 1, 1); } }
@keyframes outSwingDrop { 0% { opacity: 0; transform: rotate(15deg) translateY(-60px); } 60% { transform: rotate(-8deg) translateY(10px); } 100% { opacity: 1; transform: rotate(0) translateY(0); } }
@keyframes outMatrixSnap { 0% { opacity: 0; transform: scaleY(0.05) scaleX(1.3); } 70% { transform: scaleY(1.15) scaleX(0.95); } 100% { opacity: 1; transform: scale(1); } }
@keyframes outSkewSlide { 0% { opacity: 0; transform: skewX(-25deg) translateX(90px); } 70% { transform: skewX(8deg) translateX(-8px); } 100% { opacity: 1; transform: skewX(0) translateX(0); } }
@keyframes outFloatPop { 0% { opacity: 0; transform: translateY(60px) scale(0.6); } 70% { transform: translateY(-8px) scale(1.08); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes outWobble { 0% { opacity: 0; transform: translateX(50px); } 15% { transform: translateX(-25%) rotate(-5deg); } 30% { transform: translateX(20%) rotate(3deg); } 45% { transform: translateX(-15%) rotate(-3deg); } 60% { transform: translateX(10%) rotate(2deg); } 100% { opacity: 1; transform: translateX(0) rotate(0); } }
@keyframes outZoomBurst { 0% { opacity: 0; transform: scale(2.2); } 70% { transform: scale(0.92); } 100% { opacity: 1; transform: scale(1); } }
@keyframes outCurtainFall { 0% { opacity: 0; transform: scaleY(0); transform-origin: top; } 100% { opacity: 1; transform: scaleY(1); transform-origin: top; } }
@keyframes outWaveSpring { 0% { opacity: 0; transform: translateY(40px) rotate(8deg); } 50% { transform: translateY(-12px) rotate(-4deg); } 100% { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes outImpactShock { 0% { opacity: 0; transform: scale(0.1); box-shadow: 0 0 30px rgba(139,92,246,0.8); } 60% { transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); box-shadow: none; } }
@keyframes outVortex { 0% { opacity: 0; transform: rotate(-270deg) scale(0.1); } 100% { opacity: 1; transform: rotate(0) scale(1); } }
@keyframes outGlitchPop { 0% { opacity: 0; transform: translate(15px, -15px) skewX(20deg); } 50% { transform: translate(-8px, 8px) skewX(-10deg); } 100% { opacity: 1; transform: translate(0, 0) skewX(0); } }
@keyframes outDropBounce { 0% { opacity: 0; transform: translateY(-120px); } 40% { transform: translateY(0); } 65% { transform: translateY(-20px); } 82% { transform: translateY(0); } 92% { transform: translateY(-6px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes outArcLaunch { 0% { opacity: 0; transform: translate(80px, 80px) rotate(12deg) scale(0.4); } 70% { transform: translate(-10px, -10px) rotate(-3deg) scale(1.05); } 100% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); } }

/* ================= 20 ANIMACIONES DE MENSAJES ENTRANTES (INCOMING) ================= */
.msg-in-anim-1 { animation: inCollisionPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.msg-in-anim-2 { animation: inFallTop 0.45s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
.msg-in-anim-3 { animation: inJorobado 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards; }
.msg-in-anim-4 { animation: inElasticLeft 0.5s ease-out forwards; }
.msg-in-anim-5 { animation: inSpiralSpin 0.55s ease-out forwards; }
.msg-in-anim-6 { animation: inFlip3D 0.45s ease-out forwards; }
.msg-in-anim-7 { animation: inRubberband 0.5s ease-in-out forwards; }
.msg-in-anim-8 { animation: inSwingDrop 0.5s ease-out forwards; }
.msg-in-anim-9 { animation: inMatrixSnap 0.4s ease-out forwards; }
.msg-in-anim-10 { animation: inSkewSlide 0.42s ease-out forwards; }
.msg-in-anim-11 { animation: inFloatPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.msg-in-anim-12 { animation: inWobble 0.5s ease-in-out forwards; }
.msg-in-anim-13 { animation: inZoomBurst 0.38s ease-out forwards; }
.msg-in-anim-14 { animation: inCurtainFall 0.42s ease-out forwards; }
.msg-in-anim-15 { animation: inWaveSpring 0.5s ease-out forwards; }
.msg-in-anim-16 { animation: inImpactShock 0.4s ease-out forwards; }
.msg-in-anim-17 { animation: inVortex 0.52s ease-out forwards; }
.msg-in-anim-18 { animation: inGlitchPop 0.38s ease-out forwards; }
.msg-in-anim-19 { animation: inDropBounce 0.55s ease-out forwards; }
.msg-in-anim-20 { animation: inArcLaunch 0.48s ease-out forwards; }

@keyframes inCollisionPop { 0% { opacity: 0; transform: scale(0.3) translateX(-80px); } 70% { transform: scale(1.12) translateX(6px); } 100% { opacity: 1; transform: scale(1) translateX(0); } }
@keyframes inFallTop { 0% { opacity: 0; transform: translateY(-100px) scale(0.8); } 70% { transform: translateY(12px) scale(1.05); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes inJorobado { 0% { opacity: 0; transform: translateY(40px) scaleX(1.3) scaleY(0.6) rotate(-6deg); } 60% { transform: translateY(-10px) scaleX(0.85) scaleY(1.2) rotate(3deg); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
@keyframes inElasticLeft { 0% { opacity: 0; transform: translateX(-120px) scaleX(1.4); } 60% { transform: translateX(15px) scaleX(0.9); } 80% { transform: translateX(-5px) scaleX(1.03); } 100% { opacity: 1; transform: translateX(0) scaleX(1); } }
@keyframes inSpiralSpin { 0% { opacity: 0; transform: scale(0.2) rotate(-360deg) translateX(-100px); } 100% { opacity: 1; transform: scale(1) rotate(0deg) translateX(0); } }
@keyframes inFlip3D { 0% { opacity: 0; transform: perspective(400deg) rotateY(-90deg) scale(0.7); } 100% { opacity: 1; transform: perspective(400deg) rotateY(0deg) scale(1); } }
@keyframes inRubberband { 0% { opacity: 0; transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 65% { transform: scale3d(1.15, 0.85, 1); } 100% { opacity: 1; transform: scale3d(1, 1, 1); } }
@keyframes inSwingDrop { 0% { opacity: 0; transform: rotate(-15deg) translateY(-60px); } 60% { transform: rotate(8deg) translateY(10px); } 100% { opacity: 1; transform: rotate(0) translateY(0); } }
@keyframes inMatrixSnap { 0% { opacity: 0; transform: scaleY(0.05) scaleX(1.3); } 70% { transform: scaleY(1.15) scaleX(0.95); } 100% { opacity: 1; transform: scale(1); } }
@keyframes inSkewSlide { 0% { opacity: 0; transform: skewX(25deg) translateX(-90px); } 70% { transform: skewX(-8deg) translateX(8px); } 100% { opacity: 1; transform: skewX(0) translateX(0); } }
@keyframes inFloatPop { 0% { opacity: 0; transform: translateY(60px) scale(0.6); } 70% { transform: translateY(-8px) scale(1.08); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes inWobble { 0% { opacity: 0; transform: translateX(-50px); } 15% { transform: translateX(25%) rotate(5deg); } 30% { transform: translateX(-20%) rotate(-3deg); } 45% { transform: translateX(15%) rotate(3deg); } 60% { transform: translateX(-10%) rotate(-2deg); } 100% { opacity: 1; transform: translateX(0) rotate(0); } }
@keyframes inZoomBurst { 0% { opacity: 0; transform: scale(2.2); } 70% { transform: scale(0.92); } 100% { opacity: 1; transform: scale(1); } }
@keyframes inCurtainFall { 0% { opacity: 0; transform: scaleY(0); transform-origin: top; } 100% { opacity: 1; transform: scaleY(1); transform-origin: top; } }
@keyframes inWaveSpring { 0% { opacity: 0; transform: translateY(40px) rotate(-8deg); } 50% { transform: translateY(-12px) rotate(4deg); } 100% { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes inImpactShock { 0% { opacity: 0; transform: scale(0.1); box-shadow: 0 0 30px rgba(59,130,246,0.8); } 60% { transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); box-shadow: none; } }
@keyframes inVortex { 0% { opacity: 0; transform: rotate(270deg) scale(0.1); } 100% { opacity: 1; transform: rotate(0) scale(1); } }
@keyframes inGlitchPop { 0% { opacity: 0; transform: translate(-15px, -15px) skewX(-20deg); } 50% { transform: translate(8px, 8px) skewX(10deg); } 100% { opacity: 1; transform: translate(0, 0) skewX(0); } }
@keyframes inDropBounce { 0% { opacity: 0; transform: translateY(-120px); } 40% { transform: translateY(0); } 65% { transform: translateY(-20px); } 82% { transform: translateY(0); } 92% { transform: translateY(-6px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes inArcLaunch { 0% { opacity: 0; transform: translate(-80px, 80px) rotate(-12deg) scale(0.4); } 70% { transform: translate(10px, -10px) rotate(3deg) scale(1.05); } 100% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); } }
.burbuja.mia{align-self:flex-end; background:linear-gradient(135deg, rgba(124, 58, 237, 0.92) 0%, rgba(109, 40, 217, 0.88) 100%); color:#ffffff; border-bottom-right-radius:6px; border:1px solid rgba(255,255,255,0.35); box-shadow:0 10px 28px -6px rgba(124, 58, 237, 0.42), 0 4px 10px -2px rgba(0,0,0,0.08), inset 0 1px 1px rgba(255,255,255,0.4);}
.burbuja.suya{align-self:flex-start; background:rgba(255, 255, 255, 0.76); color:var(--texto-900); border:1.5px solid rgba(255, 255, 255, 0.85); border-bottom-left-radius:6px; box-shadow:0 10px 28px -6px rgba(0, 0, 0, 0.1), 0 4px 10px -2px rgba(0, 0, 0, 0.04), inset 0 1px 1.5px rgba(255, 255, 255, 0.9);}
html[data-tema="oscuro"] .burbuja.suya{background:rgba(26, 22, 38, 0.76); border:1.5px solid rgba(255, 255, 255, 0.18); color:#f3f4f6; box-shadow:0 10px 28px -6px rgba(0, 0, 0, 0.6), 0 4px 10px -2px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.15);}

.burbuja-ultimo-mensaje-neon {
  border: 2px solid #8b5cf6 !important;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.85), inset 0 0 8px rgba(99, 102, 241, 0.6) !important;
  animation: pulsoNeonBurbuja 2.4s ease-in-out infinite alternate !important;
}

@keyframes pulsoNeonBurbuja {
  0% {
    border-color: #8b5cf6;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.7), inset 0 0 6px rgba(139, 92, 246, 0.4);
  }
  50% {
    border-color: #ec4899;
    box-shadow: 0 0 16px rgba(236, 72, 153, 0.9), inset 0 0 10px rgba(236, 72, 153, 0.6);
  }
  100% {
    border-color: #3b82f6;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.8), inset 0 0 8px rgba(59, 130, 246, 0.5);
  }
}
.burbuja img{max-width:100%; border-radius:10px; display:block; margin-top:4px;}
.chat-input-barra{display:flex; align-items:center; gap:8px; padding:10px 12px calc(12px + env(safe-area-inset-bottom)); background:rgba(255,255,255,0.78); backdrop-filter:blur(18px) saturate(180%); -webkit-backdrop-filter:blur(180%); border-top:1px solid rgba(139,92,246,0.15); flex:0 0 auto; min-height:60px;}
html[data-tema="oscuro"] .chat-input-barra{background:rgba(24,24,36,0.82); border-top-color:rgba(139,92,246,0.25);}
.btn-chat-adjuntar{width:38px; height:38px; border-radius:50%; background:var(--morado-100); color:var(--morado-700); display:flex; align-items:center; justify-content:center; flex:0 0 auto; cursor:pointer; transition:transform .15s ease, background .15s ease;}
.btn-chat-adjuntar:active{transform:scale(0.92); background:var(--morado-200);}
.chat-input-barra input[type="text"]{flex:1; min-width:0; border:1.5px solid var(--linea); border-radius:22px; padding:10px 14px; font-size:14.5px; outline:none; background:var(--hueso); color:var(--texto-900);}
.icono-btn.llamada-audio-input, .icono-btn.llamada-video-input{width:36px; height:36px; border-radius:50%; background:var(--morado-100); color:var(--morado-700); display:flex; align-items:center; justify-content:center; flex:0 0 auto; cursor:pointer; transition:transform .15s ease, background .15s ease;}
.icono-btn.llamada-audio-input:active, .icono-btn.llamada-video-input:active{transform:scale(0.92); background:var(--morado-200);}
.chat-input-barra button#chatBtnEnviar{width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--morado-600),var(--morado-700)); color:#fff; display:flex; align-items:center; justify-content:center; flex:0 0 auto; border:none; cursor:pointer; box-shadow:0 4px 12px rgba(91,33,182,0.3); transition:transform .15s ease;}
.chat-input-barra button#chatBtnEnviar:active{transform:scale(0.92);}

/* ---- Live Photos (iOS & Android Compatible) ---- */
.live-photo-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: 12px;
  max-width: 100%;
}
.live-photo-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(12px);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.5px;
  z-index: 5;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.live-photo-badge svg {
  animation: livePulse 1.8s infinite ease-in-out;
}
@keyframes livePulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.18); opacity: 1; }
}
.live-photo-animating img {
  animation: liveMotionKeyframes 1.2s ease-in-out;
}
@keyframes liveMotionKeyframes {
  0% { transform: scale(1); filter: brightness(1); }
  30% { transform: scale(1.05) rotate(0.8deg); filter: brightness(1.12); }
  60% { transform: scale(1.02) rotate(-0.8deg); filter: brightness(1.06); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* ---- Grids de Tarjetas Cuadradas (Chats, Contactos y Ajustes) ---- */
.grid-cuadrados-chats,
.grid-cuadrados-contactos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 380px) {
  .grid-cuadrados-chats,
  .grid-cuadrados-contactos {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
  }
}

.tarjeta-chat-cuadrada,
.tarjeta-contacto-cuadrada {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 10px;
  border-radius: 20px;
  cursor: pointer;
  box-sizing: border-box;
}

.tarjeta-chat-cuadrada .chat-cuadrado-avatar-wrap,
.tarjeta-contacto-cuadrada .avatar-wrap {
  position: relative;
  width: 58px;
  height: 58px;
  margin-bottom: 6px;
}

.tarjeta-chat-cuadrada img,
.tarjeta-contacto-cuadrada img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.tarjeta-contacto-cuadrada .id-persona .nombre,
.tarjeta-chat-cuadrada .conversacion-info .nombre {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
  margin: 0 auto;
}

.tarjeta-contacto-cuadrada .id-persona .detalle,
.tarjeta-chat-cuadrada .conversacion-info .preview {
  font-size: 11px;
  color: var(--texto-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
  margin: 2px auto 0;
}

.profesion-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--morado-700);
  background: var(--morado-100);
  padding: 2px 6px;
  border-radius: 6px;
  margin-top: 4px;
  display: inline-block;
}

#vistaAjustes {
  display: flex;
  flex-direction: column;
}

#vistaAjustes .tarjeta-ajustes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  margin-bottom: 12px;
  width: 100%;
  box-sizing: border-box;
}

#vistaAjustes .fila-ajustes {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 8px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.08) !important;
  cursor: pointer;
  user-select: none;
  transition: transform 0.15s ease, background 0.15s ease;
  overflow: hidden;
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}

html[data-tema="oscuro"] #vistaAjustes .fila-ajustes {
  background: rgba(18, 18, 23, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37) !important;
}

#vistaAjustes .fila-ajustes:active {
  transform: scale(0.96);
}

#vistaAjustes .fila-ajustes svg {
  width: 26px;
  height: 26px;
  margin-bottom: 6px;
  color: var(--morado-700);
  flex-shrink: 0;
}

#vistaAjustes .fila-ajustes .txt {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--texto-900);
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

#vistaAjustes .fila-ajustes .chevron {
  display: none;
}

/* ---- Ajustes estilo iOS 17 ---- */
.tarjeta-ajustes{
  background:var(--blanco);
  border-radius:20px;
  box-shadow:0 8px 24px rgba(0,0,0,0.04);
  overflow:hidden;
  margin-bottom:18px;
  border:1px solid var(--borde);
}
.fila-ajustes{
  display:flex;
  align-items:center;
  gap:14px;
  padding:15px 18px;
  border-bottom:1px solid var(--linea);
  cursor:pointer;
  user-select:none;
  transition:background 0.15s ease, transform 0.1s ease;
}
.fila-ajustes:last-child{border-bottom:none;}
.fila-ajustes:active{background:rgba(91, 33, 182, 0.06); transform:scale(0.985);}
.fila-ajustes svg{color:var(--morado-700); flex:0 0 auto;}
.fila-ajustes .txt{flex:1; font-size:14.5px; font-weight:600; color:var(--texto-900); letter-spacing:-0.2px;}
.fila-ajustes.peligro{color:var(--peligro);}
.fila-ajustes.peligro .txt{color:var(--peligro);}
.fila-ajustes.peligro svg{color:var(--peligro);}
.editar-avatar-btn{position:relative; width:88px; height:88px; margin:16px auto 4px;}
.editar-avatar-btn img{width:100%; height:100%; border-radius:50%; object-fit:cover; border:3px solid var(--morado-100);}
.editar-avatar-btn .lapiz{position:absolute; bottom:0; right:0; width:28px; height:28px; border-radius:50%; background:var(--morado-700); color:#fff; display:flex; align-items:center; justify-content:center; border:2px solid var(--blanco);}

/* ============ Hoja de acciones / modales ============ */
/* Accordion styles for Settings UI */
.panel-acordeon {
  border: 1px solid var(--linea);
  border-radius: 14px;
  background: var(--blanco);
  margin-bottom: 10px;
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.panel-acordeon:hover {
  border-color: var(--morado-300);
}

.panel-header {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  background: var(--blanco);
  color: var(--texto-900);
}

.chevron-acordeon {
  transition: transform 0.25s ease;
  color: var(--texto-500);
}

.panel-acordeon.abierto .chevron-acordeon {
  transform: rotate(180deg);
  color: var(--morado-600);
}

.panel-body {
  display: none;
  padding: 14px 16px;
  border-top: 1px solid var(--linea);
  background: var(--hueso);
}

.panel-acordeon.abierto .panel-body {
  display: block;
}

.velo{position:fixed; inset:0; z-index:2000; background:rgba(26,11,51,0.35); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .28s ease;}
.velo.activo{opacity:1; pointer-events:auto;}
.hoja{position:fixed; left:50%; bottom:14px; z-index:2010; width:min(94%,402px); transform:translate(-50%,130%); transition:transform .38s cubic-bezier(.2,.9,.25,1.15); max-height:80vh; overflow-y:auto;}
.hoja.activo{transform:translate(-50%,0%);}
.hoja-grupo{background:rgba(255,255,255,0.85); backdrop-filter:blur(26px) saturate(180%); border-radius:20px; overflow:hidden; margin-bottom:8px; box-shadow:0 20px 40px -12px rgba(26,11,51,0.35);}
.hoja-persona{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid rgba(91,33,182,0.12);}
.hoja-persona img{width:38px; height:38px; border-radius:50%; object-fit:cover;}
.hoja-persona span{font-size:12.5px; color:var(--texto-500); font-weight:600;}
.hoja-opcion{display:flex; align-items:center; justify-content:center; gap:8px; padding:16px; font-size:16.5px; font-weight:500; color:var(--morado-700); border-bottom:1px solid rgba(91,33,182,0.12);}
.hoja-opcion:last-child{border-bottom:none;}
.hoja-opcion:active{background:rgba(124,58,237,0.08);}
.hoja-opcion.peligro{color:var(--peligro);}
.hoja-cancelar{background:rgba(255,255,255,0.85); backdrop-filter:blur(26px); border-radius:20px; padding:16px; text-align:center; font-size:16.5px; font-weight:700; color:var(--morado-700); box-shadow:0 20px 40px -12px rgba(26,11,51,0.35);}
.hoja-form{padding:16px;}

.toast{position:fixed; left:50%; top:calc(env(safe-area-inset-top) + 18px); transform:translate(-50%,-140%); background:var(--morado-800); color:#fff; padding:11px 18px; border-radius:14px; font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:8px; z-index:220; box-shadow:0 12px 26px -8px rgba(26,11,51,0.5); transition:transform .4s cubic-bezier(.2,.9,.25,1.2); max-width:88vw;}
.toast.activo{transform:translate(-50%,0);}

/* ============ Barra de navegación ============ */
nav.tabbar{position:fixed; left:50%; bottom:14px; transform:translateX(-50%); width:min(92%,400px); z-index:15; background:rgba(255,255,255,0.75); backdrop-filter:blur(22px) saturate(180%); border-radius:26px; display:flex; justify-content:space-around; align-items:center; padding:11px 6px; box-shadow:0 14px 30px -10px rgba(91,33,182,0.35); border:1px solid rgba(255,255,255,0.6);}
nav.tabbar .tab{display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--texto-400); position:relative;}
nav.tabbar .tab.activo{color:var(--morado-700);}
nav.tabbar .tab span{font-size:10px; font-weight:600;}
nav.tabbar .tab .badge{position:absolute; top:-4px; right:-8px; background:var(--peligro); color:#fff; font-size:9px; font-weight:800; min-width:15px; height:15px; border-radius:8px; display:none; align-items:center; justify-content:center; padding:0 3px;}
nav.tabbar .tab .badge.activa{display:flex;}

/* ============ Vista de perfil ============ */
.vista-perfil{position:fixed; inset:0; z-index:70; background:var(--fondo-app, var(--hueso)); transform:translateX(100%); transition:transform .42s cubic-bezier(.2,.85,.2,1); overflow-y:auto; -webkit-overflow-scrolling:touch;}
.vista-perfil.activo{transform:translateX(0);}
.perfil-header{position:relative;}
.perfil-header .cover{width:100%; height:170px; object-fit:cover; filter:brightness(0.95); background:linear-gradient(135deg,var(--morado-500),var(--morado-700),#ec4899);}
.perfil-header .volver{position:absolute; top:calc(env(safe-area-inset-top) + 12px); left:14px; width:38px; height:38px; border-radius:50%; background:rgba(15,23,42,0.45); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer; transition:transform 0.15s ease, background 0.15s ease;}
.perfil-header .volver:active{transform:scale(0.92); background:rgba(15,23,42,0.7);}
.perfil-avatar-wrap{margin:-52px 0 0 20px; width:100px; position:relative; z-index:2;}
.perfil-avatar-wrap .anillo{width:100px; height:100px; border-radius:50%; padding:3px; background:linear-gradient(135deg, #8b5cf6, #ec4899, #3b82f6); box-shadow:0 8px 24px rgba(139,92,246,0.3);}
.perfil-avatar-wrap .anillo.sin-estado{background:var(--linea);}
.perfil-avatar-wrap .anillo img{width:100%; height:100%; border-radius:50%; object-fit:cover; border:3.5px solid var(--blanco); background:var(--morado-100);}
.estado-24{position:absolute; top:-8px; right:-58px; background:linear-gradient(135deg, var(--morado-600), #ec4899); color:#fff; font-size:11px; font-weight:700; padding:6px 11px; border-radius:14px; white-space:nowrap; box-shadow:0 8px 18px -4px rgba(139,92,246,0.5); max-width:190px; overflow:hidden; text-overflow:ellipsis; backdrop-filter:blur(8px);}
.estado-24::after{content:""; position:absolute; left:-4px; bottom:6px; width:8px; height:8px; background:var(--morado-700); transform:rotate(45deg);}

.perfil-info{padding:14px 20px 4px;}
.perfil-info h2{margin:0 0 3px; font-size:21px; letter-spacing:-0.02em;}
.perfil-info .profesion{font-size:14px; color:var(--morado-700); font-weight:600; margin-bottom:2px;}
.perfil-info .ubicacion{font-size:13.5px; color:var(--texto-500); margin-bottom:10px;}
.perfil-info .descripcion{font-size:14px; color:var(--texto-900); line-height:1.5; margin-bottom:14px;}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px;}
.chip{background:var(--morado-100); color:var(--morado-800); font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:var(--radio-chip); display:flex; align-items:center; gap:5px;}

.interacciones{display:flex; gap:10px; padding:0 20px 18px;}
.stat-box{flex:1; background:var(--blanco); border:1px solid var(--linea); border-radius:16px; padding:12px; text-align:center;}
.stat-box .n{font-size:19px; font-weight:800; color:var(--morado-700);}
.stat-box .l{font-size:11px; color:var(--texto-500); font-weight:600;}

.acciones-perfil{display:flex; gap:10px; padding:0 20px 22px;}
.btn{flex:1; display:flex; align-items:center; justify-content:center; gap:7px; font-weight:700; font-size:14px; padding:13px; border-radius:16px;}
.btn-primario{background:linear-gradient(135deg,var(--morado-600),var(--morado-700)); color:#fff; box-shadow:0 10px 22px -8px rgba(91,33,182,0.55);}
.btn-primario:active{transform:scale(0.98);}
.btn-secundario{background:var(--blanco); border:1.5px solid var(--linea); color:var(--morado-700);}
.btn-secundario:active{background:var(--morado-100);}
.btn[disabled]{opacity:.55; pointer-events:none;}
.btn.es-amigo{background:var(--morado-100); color:var(--morado-700); box-shadow:none;}

.seccion-titulo{padding:0 20px 10px; font-size:13.5px; font-weight:700; color:var(--texto-500);}
.galeria{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; padding:0 0 30px;}
.galeria img{width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--morado-100);}

.lista-notif{padding:6px 4px;}
.notif-item{display:flex; gap:10px; align-items:flex-start; padding:12px 16px; border-bottom:1px solid rgba(91,33,182,0.1);}
.notif-item:last-child{border-bottom:none;}
.notif-item.no-leida{background:rgba(124,58,237,0.05);}
.notif-icono{width:34px; height:34px; border-radius:50%; overflow:hidden; background:var(--morado-100); color:var(--morado-700); display:flex; align-items:center; justify-content:center; flex:0 0 auto; font-size:15px;}
.notif-icono img{width:100%; height:100%; object-fit:cover;}
.notif-texto{font-size:13.5px; line-height:1.4;}
.notif-hora{font-size:11px; color:var(--texto-400); margin-top:2px;}
.notif-vacio{padding:26px 16px; text-align:center; color:var(--texto-500); font-size:13.5px;}

.spinner{width:18px; height:18px; border-radius:50%; border:2.5px solid rgba(255,255,255,0.4); border-top-color:#fff; animation:girar .7s linear infinite; display:inline-block;}
@keyframes girar{to{transform:rotate(360deg);}}

.oculto{display:none!important;}

svg{display:block;}

/* =========================================================
   MODO OSCURO
   Se activa poniendo data-tema="oscuro" en <html> (ver app.js).
   Como casi todo el CSS ya usa variables, alcanza con redefinirlas.
   ========================================================= */
html[data-tema="oscuro"]{
  --morado-950:#efe3fe; --morado-800:#c9a6fb; --morado-700:#a685f0;
  --morado-600:#9d5cf5; --morado-500:#8b5cf6; --morado-300:#5b3d8a; --morado-100:#241a3d;
  --blanco:#191320; --hueso:#120d18; --linea:#2c2438;
  --texto-900:#f1ecfb; --texto-500:#a89bc4; --texto-400:#786a99;
}
html[data-tema="oscuro"] body{
  background:radial-gradient(120% 60% at 50% -10%, #241a3d 0%, #120d18 55%);
}
html[data-tema="oscuro"] .campo input,
html[data-tema="oscuro"] .campo select,
html[data-tema="oscuro"] .campo textarea{ background:#1d1626; color:var(--texto-900); }
html[data-tema="oscuro"] .compositor textarea{ background:#1d1626; color:var(--texto-900); }
html[data-tema="oscuro"] .icono-flotante{ background:rgba(30,22,42,0.85); }
html[data-tema="oscuro"] .hoja-grupo,
html[data-tema="oscuro"] .hoja-cancelar,
html[data-tema="oscuro"] nav.tabbar{ background:rgba(25,19,32,0.88); }
html[data-tema="oscuro"] .btn-secundario{ background:var(--blanco); }
html[data-tema="oscuro"] .perfil-header .cover{ filter:brightness(0.72); }

/* Transición suave al cambiar de tema, en vez de un corte seco */
body, .tarjeta, .publicacion, .compositor, .tarjeta-ajustes, .hoja-grupo, .hoja-cancelar,
nav.tabbar, .conversacion-item, .stat-box, .caja-busqueda, .campo input, .campo select,
.campo textarea, .btn-secundario, .auth-caja{
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}

/* Modo Oscuro Verdadero OLED / iOS */
html[data-tema="oscuro"] {
  --blanco: #000000;
  --fondo-app: #050508;
  --fondo-tarjeta: #121217;
  --linea: rgba(255, 255, 255, 0.08);
  --borde: rgba(255, 255, 255, 0.12);
}

/* ---- Interruptor (switch) de modo oscuro / ajustes booleanos ---- */
.interruptor{position:relative; width:46px; height:27px; border-radius:20px; background:var(--linea); flex:0 0 auto; transition:background .25s ease;}
.interruptor .bola{position:absolute; top:2.5px; left:2.5px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,0.25); transition:transform .25s cubic-bezier(.2,.9,.25,1.2);}
.interruptor.activo{background:linear-gradient(135deg,var(--morado-600),var(--morado-700));}
.interruptor.activo .bola{transform:translateX(19px);}

/* =========================================================
   ANIMACIONES DE ENTRADA — tarjetas, publicaciones y modales
   aparecen con un pequeño deslizamiento + fade, en vez de "saltar"
   de golpe. Como el contenido se pinta con innerHTML, la animación
   se dispara sola cada vez que el navegador crea el elemento.
   ========================================================= */
@keyframes enlaceApareceArriba{ from{opacity:0; transform:translateY(10px) scale(0.98);} to{opacity:1; transform:translateY(0) scale(1);} }
@keyframes enlaceApareceEscala{ from{opacity:0; transform:scale(0.85);} to{opacity:1; transform:scale(1);} }
@keyframes enlacePop{ 0%{transform:scale(1);} 40%{transform:scale(1.35);} 100%{transform:scale(1);} }
@keyframes enlaceBrilloVerificado{ 0%,100%{filter:drop-shadow(0 0 0 rgba(56,151,240,0));} 50%{filter:drop-shadow(0 0 4px rgba(56,151,240,0.65));} }

.tarjeta{animation:enlaceApareceArriba .38s cubic-bezier(.2,.8,.2,1) both;}
.publicacion{animation:enlaceApareceArriba .42s cubic-bezier(.2,.8,.2,1) both;}
.conversacion-item{animation:enlaceApareceArriba .36s cubic-bezier(.2,.8,.2,1) both;}
.item-estado{animation:enlaceApareceEscala .35s cubic-bezier(.2,.8,.2,1) both;}
.notif-item{animation:enlaceApareceArriba .3s ease both;}
.admin-fila{animation:enlaceApareceArriba .32s ease both;}
/* escalona un poco las tarjetas consecutivas para que no aparezcan todas a la vez */
.tarjeta:nth-child(1),.publicacion:nth-child(1),.conversacion-item:nth-child(1){animation-delay:0s;}
.tarjeta:nth-child(2),.publicacion:nth-child(2),.conversacion-item:nth-child(2){animation-delay:.03s;}
.tarjeta:nth-child(3),.publicacion:nth-child(3),.conversacion-item:nth-child(3){animation-delay:.06s;}
.tarjeta:nth-child(4),.publicacion:nth-child(4),.conversacion-item:nth-child(4){animation-delay:.09s;}
.tarjeta:nth-child(5),.publicacion:nth-child(5),.conversacion-item:nth-child(5){animation-delay:.12s;}
.tarjeta:nth-child(n+6),.publicacion:nth-child(n+6),.conversacion-item:nth-child(n+6){animation-delay:.14s;}

.publicacion-accion.activo svg{ animation: enlacePop .35s cubic-bezier(.3,1.4,.4,1); }
.vista-perfil.activo .perfil-avatar-wrap{ animation: enlaceApareceEscala .4s cubic-bezier(.2,.8,.2,1) both .05s; }
.btn:active, .mini-btn:active{ transform:scale(0.95); }
.btn, .mini-btn{ transition: transform .15s cubic-bezier(.3,1.2,.4,1), background .2s ease, box-shadow .2s ease; }
.fila-ajustes:active{ background:var(--morado-100); }
.fila-ajustes{ transition: background .15s ease; }

/* =========================================================
   BADGE DE VERIFICADO (solo lo activa un administrador)
   ========================================================= */
.badge-verificado{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:15px; height:15px; margin-left:3px; vertical-align:middle;
  animation: enlaceBrilloVerificado 3.2s ease-in-out infinite;
}
.badge-verificado svg{ width:100%; height:100%; display:block; }
.nombre-con-badge{ display:inline-flex; align-items:center; gap:2px; }

/* =========================================================
   CHIP DE NIVEL DE REPUTACIÓN
   ========================================================= */
.chip-reputacion{
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700;
  padding:5px 11px; border-radius:var(--radio-chip); white-space:nowrap;
}
.chip-reputacion .punto{width:6px; height:6px; border-radius:50%; flex:0 0 auto;}
.chip-reputacion.gris{background:var(--linea); color:var(--texto-500);}
.chip-reputacion.gris .punto{background:var(--texto-400);}
.chip-reputacion.verde{background:#e6f8ef; color:#15803d;}
.chip-reputacion.verde .punto{background:var(--exito);}
.chip-reputacion.morado{background:var(--morado-100); color:var(--morado-700);}
.chip-reputacion.morado .punto{background:var(--morado-600);}
.chip-reputacion.oro{background:#fef3c7; color:#92400e;}
.chip-reputacion.oro .punto{background:#f59e0b;}
.chip-reputacion.rojo{background:#fee2e2; color:#b91c1c;}
.chip-reputacion.rojo .punto{background:var(--peligro);}
html[data-tema="oscuro"] .chip-reputacion.verde{background:rgba(34,197,94,0.15); color:#4ade80;}
html[data-tema="oscuro"] .chip-reputacion.oro{background:rgba(245,158,11,0.15); color:#fbbf24;}
html[data-tema="oscuro"] .chip-reputacion.rojo{background:rgba(239,68,68,0.15); color:#f87171;}

/* ---- Botones pequeños de acción sobre una publicación (dueño/admin) ---- */
.publicacion-mod{display:flex; gap:6px; padding:0 14px 8px; justify-content:flex-end;}
.publicacion-mod .mini-btn{padding:6px 11px; font-size:11.5px;}
.publicacion-mod .mini-btn.peligro{background:#fee2e2; color:var(--peligro);}
.etiqueta-editado{font-size:11px; color:var(--texto-400); font-style:italic; padding:0 14px 8px;}

/* =========================================================
   PANEL DE ADMINISTRADOR
   ========================================================= */
.vista-admin{position:fixed; inset:0; z-index:80; background:var(--hueso); transform:translateX(100%); transition:transform .4s cubic-bezier(.2,.85,.2,1); overflow-y:auto;}
.vista-admin.activo{transform:translateX(0);}
.admin-header{display:flex; align-items:center; gap:12px; padding:calc(env(safe-area-inset-top) + 14px) 16px 12px; background:var(--blanco); border-bottom:1px solid var(--linea); position:sticky; top:0; z-index:2;}
.admin-header .titulo{font-size:18px; font-weight:800;}
.admin-body{padding:14px 16px 90px;}
.admin-fila{background:var(--blanco); border-radius:16px; box-shadow:var(--sombra-tarjeta); padding:12px 14px; margin-bottom:10px; display:flex; align-items:center; gap:11px;}
.admin-fila img{width:42px; height:42px; border-radius:50%; object-fit:cover; flex:0 0 auto;}
.admin-fila .info{flex:1; min-width:0;}
.admin-fila .info .n{font-weight:700; font-size:14px; display:flex; align-items:center; gap:4px;}
.admin-fila .info .s{font-size:11.5px; color:var(--texto-500);}
.admin-acciones{display:flex; gap:6px; flex-wrap:wrap; flex:0 0 auto;}
.admin-btn{padding:7px 11px; border-radius:11px; font-size:11.5px; font-weight:700; white-space:nowrap;}
.admin-btn.verificar{background:#e9f1ff; color:#2563eb;}
.admin-btn.verificar.activo{background:#2563eb; color:#fff;}
.admin-btn.banear{background:#fee2e2; color:var(--peligro);}
.admin-btn.banear.activo{background:var(--peligro); color:#fff;}
.etiqueta-baneado{background:var(--peligro); color:#fff; font-size:10px; font-weight:800; padding:2px 8px; border-radius:8px; margin-left:6px;}
.admin-reporte-detalle{font-size:12.5px; color:var(--texto-500); margin-top:4px; line-height:1.4;}
.admin-reporte-motivo{display:inline-block; background:var(--morado-100); color:var(--morado-700); font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:8px; margin-top:4px;}

/* =========================================================
   RECOMENDACIONES: botón "¿por qué?" + explicación estilo iOS
   ========================================================= */
.boton-porque-wrap{padding:0 20px 6px;}
.boton-porque{
  display:flex; align-items:center; gap:8px; justify-content:center;
  background:linear-gradient(135deg, var(--morado-100), #fbeffe);
  color:var(--morado-700); font-size:13px; font-weight:700;
  border:1px solid var(--morado-300); border-radius:999px; padding:10px 14px;
}
.boton-porque:active{transform:scale(0.97);}
.boton-porque-icono{font-size:14px;}
.boton-porque svg{margin-left:auto; flex:0 0 auto;}

.hoja-porque .hoja-grupo{padding:18px 16px 6px;}
.porque-cabecera{display:flex; flex-direction:column; align-items:center; text-align:center; padding:4px 6px 10px;}
.anillo-puntaje{position:relative; width:104px; height:104px; margin-bottom:10px;}
.anillo-puntaje svg{display:block;}
#porque-anillo-relleno{transition: stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1), stroke .4s ease;}
.anillo-puntaje-texto{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.anillo-puntaje-texto .n{font-size:15px; font-weight:800; text-transform:capitalize;}
.anillo-puntaje-texto .l{font-size:9.5px; font-weight:700; color:var(--texto-500); text-transform:uppercase; letter-spacing:0.5px;}
.porque-resumen{margin:0; font-size:13.5px; color:var(--texto-500); line-height:1.5; max-width:300px;}

.porque-lista{display:flex; flex-direction:column; gap:9px; padding:6px 2px 14px; max-height:44vh; overflow-y:auto;}
.factor-fila{background:var(--hueso); border:1px solid var(--linea); border-radius:14px; padding:10px 12px;}
.factor-fila-top{display:flex; align-items:center; gap:8px;}
.factor-etiqueta{flex:1; min-width:0; font-size:13px; font-weight:700;}
.factor-detalle{font-size:11.5px; color:var(--texto-500); margin-top:2px; text-transform:lowercase;}
.factor-punto{flex:0 0 auto; font-size:12px; font-weight:800; padding:3px 9px; border-radius:999px;}
.factor-punto.positivo{background:#e6f8ef; color:#15803d;}
.factor-punto.negativo{background:#fee2e2; color:#b91c1c;}
.factor-barra-fondo{margin-top:8px; height:6px; border-radius:999px; background:var(--linea); overflow:hidden;}
.factor-barra{height:100%; width:0%; border-radius:999px; transition:width .7s cubic-bezier(.2,.8,.2,1);}
.factor-barra.positivo{background:linear-gradient(90deg,#22c55e,#16a34a);}
.factor-barra.negativo{background:linear-gradient(90deg,#f87171,#ef4444);}
.porque-nota{font-size:11.5px; color:var(--texto-400); line-height:1.5; padding:2px 4px 4px; border-top:1px solid var(--linea); margin-top:2px; padding-top:12px;}
.porque-aviso-no-algoritmo{font-size:12.5px; line-height:1.5; font-weight:600; background:#fef3c7; color:#92400e; border-radius:12px; padding:10px 12px; margin:2px 4px 10px;}
html[data-tema="oscuro"] .porque-aviso-no-algoritmo{background:rgba(245,158,11,0.15); color:#fbbf24;}
.porque-aviso-no-algoritmo b{display:block; margin-bottom:3px;}

/* ---- Etiqueta de origen en las tarjetas del feed "Descubrir" ---- */
.tarjeta-origen{font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:8px; display:inline-block; margin-top:3px;}
.tarjeta-origen.local{background:var(--morado-100); color:var(--morado-700);}
.tarjeta-origen.afinidad_otra_localidad{background:#e6f8ef; color:#15803d;}
.tarjeta-origen.exploracion_aleatoria{background:var(--linea); color:var(--texto-500);}
.tarjeta-origen.cuenta_nueva{background:#fef3c7; color:#92400e;}
html[data-tema="oscuro"] .tarjeta-origen.afinidad_otra_localidad{background:rgba(34,197,94,0.15); color:#4ade80;}
html[data-tema="oscuro"] .tarjeta-origen.cuenta_nueva{background:rgba(245,158,11,0.15); color:#fbbf24;}

html[data-tema="oscuro"] .boton-porque{background:linear-gradient(135deg,#241a3d,#2c2140); border-color:var(--morado-500);}
html[data-tema="oscuro"] .factor-fila{background:#1d1626;}
html[data-tema="oscuro"] .factor-punto.positivo{background:rgba(34,197,94,0.15); color:#4ade80;}
html[data-tema="oscuro"] .factor-punto.negativo{background:rgba(239,68,68,0.15); color:#f87171;}

/* ---- Chips de Intereses Onboarding ---- */
.chip-interes {
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--borde, #e2e8f0);
  background: var(--fondo-tarjeta, #f8fafc);
  color: var(--texto-800, #1e293b);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.chip-interes:hover, .chip-interes.activo {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.25);
}

/* ---- Selector de chips (encuesta de intereses/hobbies) ---- */
.chips-selector{display:flex; flex-wrap:wrap; gap:8px;}
.chip-toggle{
  font-size:12.5px; font-weight:700; padding:8px 13px; border-radius:999px;
  background:var(--hueso); border:1.5px solid var(--linea); color:var(--texto-500);
}
.chip-toggle:active{transform:scale(0.96);}
.chip-toggle.seleccionado{background:linear-gradient(135deg,var(--morado-600),var(--morado-700)); border-color:transparent; color:#fff;}

/* ---- Tarjeta de Contacto / Perfil con Animación de Pulso y Latido ---- */
.tarjeta-contacto-pulsante {
  margin-top: 8px;
  padding: 14px;
  background: var(--blanco, #ffffff);
  border: 1.5px solid var(--morado-500, #8b5cf6);
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2);
  max-width: 290px;
  color: var(--texto-900, #111827);
  position: relative;
  overflow: hidden;
  animation: pulsoLatidoCard 2s infinite ease-in-out;
}

@keyframes pulsoLatidoCard {
  0% { transform: scale(1); box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2); }
  14% { transform: scale(1.02); box-shadow: 0 8px 22px rgba(139, 92, 246, 0.38); }
  28% { transform: scale(1); box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2); }
  42% { transform: scale(1.025); box-shadow: 0 8px 24px rgba(139, 92, 246, 0.42); }
  70% { transform: scale(1); box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2); }
}

.tarjeta-cita-interactive {
  margin-top: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1.5px solid rgba(139, 92, 246, 0.4);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(91, 33, 182, 0.15);
  max-width: 300px;
}

/* ---- Contenedor de Emojis/Iconos Flotantes Ascendentes (Estilo Live Stream) ---- */
#contenedorEmojisFlotantes {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99999;
  overflow: hidden;
}

.emoji-flotante-item {
  position: absolute;
  bottom: -40px;
  width: 32px;
  height: 32px;
  object-fit: contain;
  animation: flotarHaciaArriba 3.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes flotarHaciaArriba {
  0% {
    transform: translateY(0) scale(0.6) rotate(0deg);
    opacity: 0;
  }
  15% {
    opacity: 1;
    transform: translateY(-80px) scale(1.1) rotate(-8deg);
  }
  50% {
    transform: translateY(-300px) scale(1) rotate(10deg);
  }
  85% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(-650px) scale(0.7) rotate(-15deg);
    opacity: 0;
  }
}

/* ---- Pantalla Mareada por Sacudida (Shake Effect) ---- */
body.pantalla-mareada {
  filter: none !important;
  transition: none !important;
}

/* Regla para asegurar que las tarjetas, fotos y elementos no se difuminen ni cambien de tono al interactuar */
.tarjeta,
.cuadrado-persona,
.tarjeta-par-cuadrados,
.tool-card-square,
.burbuja,
.perfil-header .cover,
img,
.avatar-circulo {
  filter: none !important;
}

.tarjeta:active,
.cuadrado-persona:active,
.tool-card-square:active,
.tarjeta:hover,
.cuadrado-persona:hover,
img:active,
img:hover {
  filter: none !important;
  opacity: 1 !important;
}

/* Pausar/Reanudar animaciones en interacción (Solo para animaciones pesadas o de fondo decorativo) */
body.animaciones-pausadas .constelacion-login-bg,
body.animaciones-pausadas .splash-mascot {
  animation-play-state: paused !important;
}

/* ---- Modo Latido Lento en Elementos de la App ---- */
@keyframes latidoLento {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.12);
  }
  50% {
    transform: scale(1.025);
    box-shadow: 0 8px 22px rgba(236, 72, 153, 0.25);
  }
}

body.latido-activo .tarjeta,
body.latido-activo .cuadrado-persona,
body.latido-activo .burbuja,
body.latido-activo .tool-card-square,
body.latido-activo .fila-contacto,
body.latido-activo .fila-ajustes,
body.latido-activo .avatar-circulo,
body.latido-activo .perfil-header .cover {
  animation: latidoLento 3.2s ease-in-out infinite !important;
  will-change: transform, box-shadow;
}

/* ---- Efectos Visuales de Emoción de la IA en Mensajes ---- */
.msg-emocion-happy {
  border: 2px solid #3b82f6 !important;
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.4) !important;
  animation: ondaBordeAzul 2.5s infinite ease-in-out !important;
}
@keyframes ondaBordeAzul {
  0%, 100% { box-shadow: 0 0 8px rgba(59, 130, 246, 0.3); }
  50% { box-shadow: 0 0 18px rgba(59, 130, 246, 0.6); }
}

.msg-emocion-angry {
  border: 2px solid #ef4444 !important;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.5) !important;
  animation: choqueRojo 0.5s ease-in-out infinite alternate !important;
}
@keyframes choqueRojo {
  0% { transform: translateX(-2px); box-shadow: 0 0 10px rgba(239, 68, 68, 0.4); }
  100% { transform: translateX(2px); box-shadow: 0 0 20px rgba(239, 68, 68, 0.8); }
}

.msg-emocion-love {
  border: 2px solid #ec4899 !important;
  box-shadow: 0 0 16px rgba(236, 72, 153, 0.5) !important;
  animation: palpitacionRosada 1.5s infinite ease-in-out !important;
}
@keyframes palpitacionRosada {
  0%, 100% { transform: scale(1); box-shadow: 0 0 10px rgba(236, 72, 153, 0.3); }
  50% { transform: scale(1.02); box-shadow: 0 0 22px rgba(236, 72, 153, 0.7); }
}

.msg-emocion-excited {
  border: 2px solid #eab308 !important;
  box-shadow: 0 0 16px rgba(234, 179, 8, 0.5) !important;
  animation: destelloAmarillo 1.2s infinite ease-in-out !important;
}
@keyframes destelloAmarillo {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.15); box-shadow: 0 0 24px rgba(234, 179, 8, 0.8); }
}

.msg-emocion-cool {
  border: 2px solid #8b5cf6 !important;
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.5) !important;
}

/* ---- Reacciones privadas del feed "Descubrir" (doble toque) ---- */
.chip-reaccion.negativa.seleccionado{background:linear-gradient(135deg,#ef4444,#b91c1c);}
.tarjeta{position:relative; overflow:hidden;}
.corazon-doble-toque{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.4);
  font-size:44px; opacity:0; pointer-events:none; z-index:2;
  animation:enlaceCorazonToque .72s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes enlaceCorazonToque{
  0%{opacity:0; transform:translate(-50%,-50%) scale(0.3);}
  22%{opacity:1; transform:translate(-50%,-50%) scale(1.15);}
  40%{transform:translate(-50%,-50%) scale(0.95);}
  75%{opacity:1;}
  100%{opacity:0; transform:translate(-50%,-50%) scale(0.9);}
}
.tarjeta-reaccionada{
  position:absolute; top:8px; right:10px; font-size:13px; opacity:0.85; z-index:1;
}

/* Animación para barras de carga y progreso en IA y herramientas */
@keyframes animCargaBarra {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

.burbuja-loading-ai {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--morado-600, #7c3aed);
  font-weight: 600;
  padding: 8px 12px;
}

.burbuja-loading-dots span {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--morado-600, #7c3aed);
  border-radius: 50%;
  margin: 0 1px;
  animation: pulseLoading 1.4s infinite ease-in-out both;
}

.burbuja-loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.burbuja-loading-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes pulseLoading {
  0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
  40% { transform: scale(1); opacity: 1; }
}

/* ---- Capacidades de Link (Widgets Interactivos) ---- */
.capabilities-container {
  animation: capabilitiesEntrada 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes capabilitiesEntrada {
  0% { transform: scale(0.92) translateY(10px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.capability-category-card:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(139, 92, 246, 0.6) !important;
  background: rgba(139, 92, 246, 0.12) !important;
  box-shadow: 0 6px 18px rgba(139, 92, 246, 0.2);
}

.capability-category-card:active {
  transform: scale(0.96);
}

.capability-tool-card {
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.capability-tool-card:hover {
  border-color: rgba(139, 92, 246, 0.4) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.capability-action-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.capability-action-btn:active {
  transform: scale(0.95);
}

.capabilities-fade-in {
  animation: capabilitiesFadeIn 0.25s ease-in-out forwards;
}

@keyframes capabilitiesFadeIn {
  0% { opacity: 0; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}

@media (max-width: 360px) {
  .capabilities-body-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---- Panel de Herramientas Independientes ---- */
.panel-herramientas-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.panel-herramientas-overlay.activo {
  opacity: 1;
  pointer-events: auto;
}

.panel-herramientas {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 82vh;
  z-index: 2010;
  background: var(--blanco, #ffffff);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.2, 0.85, 0.2, 1);
  overflow: hidden;
}

.panel-herramientas.activo {
  transform: translateY(0);
}

.panel-herramientas-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--borde, #e5e7eb);
  background: var(--fondo-tarjeta, #ffffff);
}

.panel-herramientas-header .titulo {
  font-weight: 800;
  font-size: 17px;
  color: var(--morado-700, #6d28d9);
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-herramientas-header .cerrar {
  cursor: pointer;
  padding: 6px 12px;
  font-weight: 800;
  font-size: 18px;
  color: var(--texto-500, #6b7280);
  border-radius: 50%;
}

.panel-herramientas-categorias {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  overflow-x: auto;
  border-bottom: 1px solid var(--borde, #e5e7eb);
  background: var(--hueso, #f9fafb);
  scrollbar-width: none;
}

.panel-herramientas-categorias::-webkit-scrollbar {
  display: none;
}

.cat-chip {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  background: var(--blanco, #ffffff);
  color: var(--texto-700, #374151);
  border: 1px solid var(--borde, #e5e7eb);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cat-chip.activo {
  background: var(--morado-600, #7c3aed);
  color: #ffffff;
  border-color: var(--morado-600, #7c3aed);
  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.3);
}

.panel-herramientas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
  padding: 16px;
  overflow-y: auto;
  max-height: 58vh;
}

.tool-card-square {
  aspect-ratio: 1 / 1;
  background: var(--blanco, #ffffff);
  border: 1.5px solid var(--borde, #e5e7eb);
  border-radius: 20px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, border-color 0.25s ease;
  user-select: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.tool-card-square:hover {
  transform: translateY(-4px) scale(1.03) rotate(0.8deg);
  border-color: var(--morado-500, #8b5cf6);
  box-shadow: 0 12px 28px -6px rgba(139, 92, 246, 0.3);
}

.tool-card-square:active {
  transform: scale(0.94) rotate(-1deg);
}

.tool-card-square.anim-pulse {
  animation: cardWigglePulse 3s infinite ease-in-out;
}

@keyframes cardWigglePulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.02) rotate(0.5deg); }
  75% { transform: scale(1.02) rotate(-0.5deg); border-color: var(--morado-500, #8b5cf6); }
}

.tool-card-square .tool-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(139, 92, 246, 0.08);
  color: var(--morado-600, #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.tool-card-square:hover .tool-icon {
  transform: scale(1.1) rotate(-3deg);
  background: rgba(139, 92, 246, 0.16);
}

.tool-card-square .tool-name {
  font-weight: 800;
  font-size: 11.5px;
  color: var(--texto-900, #111827);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tool-card-square .tool-status-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981; /* disponible */
}

.tool-card-square.cargando .tool-status-badge {
  background: #f59e0b;
  animation: blink 0.8s infinite;
}

/* Constelación de Nodos en Login / Auth */
#authScreen {
  position: relative;
  overflow: hidden;
}
.constelacion-login-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: auto;
}
.auth-caja {
  position: relative;
  z-index: 2;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
}
body[data-theme="dark"] .auth-caja,
.dark-mode .auth-caja {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}

/* Glassmorphism estilo iOS / iPhone para contenedores y tarjetas */
.auth-caja,
.compositor,
.publicacion,
.tarjeta,
.caja-busqueda,
.conversacion-item,
.tarjeta-ajustes,
.cuadrado-persona {
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.08) !important;
}

html[data-tema="oscuro"] .auth-caja,
html[data-tema="oscuro"] .compositor,
html[data-tema="oscuro"] .publicacion,
html[data-tema="oscuro"] .tarjeta,
html[data-tema="oscuro"] .caja-busqueda,
html[data-tema="oscuro"] .conversacion-item,
html[data-tema="oscuro"] .tarjeta-ajustes,
html[data-tema="oscuro"] .cuadrado-persona {
  background: rgba(18, 18, 23, 0.75) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37) !important;
}

/* Tarjetas Holográficas 3D con Tilt, Reflejo Especular e Iridiscencia */
.cuadrado-persona,
.tarjeta,
.tarjeta-contacto-cuadrada,
.tarjeta-chat-cuadrada,
.tarjeta-ajustes {
  --rotate-x: 0deg;
  --rotate-y: 0deg;
  --translate-x: 0px;
  --translate-y: 0px;
  --glow-x: 50%;
  --glow-y: 50%;
  --glow-opacity: 0;

  transform: perspective(800px)
             rotateX(var(--rotate-x))
             rotateY(var(--rotate-y))
             translate3d(var(--translate-x), var(--translate-y), 0);
  transition: transform 0.35s cubic-bezier(0.2, 0.85, 0.2, 1), box-shadow 0.35s ease;
  will-change: transform;
  position: relative;
  transform-style: preserve-3d;
}

.cuadrado-persona::after,
.tarjeta::after,
.tarjeta-contacto-cuadrada::after,
.tarjeta-chat-cuadrada::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--glow-x, 50%) var(--glow-y, 50%),
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.12) 35%,
    transparent 70%
  );
  opacity: var(--glow-opacity, 0);
  transition: opacity 0.3s ease;
  z-index: 10;
}

@media (hover: hover) {
  .cuadrado-persona:hover::after,
  .tarjeta:hover::after {
    opacity: var(--glow-opacity, 1);
  }
}

.cuadrado-persona:active::after,
.tarjeta:active::after {
  opacity: 0 !important;
}

/* Bordes iridiscentes para usuarios verificados / creadores */
.tarjeta-verificado,
.cuadrado-persona.verificado {
  border: 2px solid transparent !important;
  background-image: linear-gradient(var(--blanco), var(--blanco)),
                    linear-gradient(135deg, #a855f7, #ec4899, #3b82f6, #10b981, #a855f7) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.25) !important;
  animation: iridescenceShift 6s linear infinite;
}

@keyframes iridescenceShift {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* Canvas de Partículas Físicas con Gravedad */
#canvasParticulasReacciones {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 999999;
}

/* Aros de Historias (Stories) limpios sin bordes de colores */
.anillo-estado {
  border: none !important;
  background: transparent !important;
}

@keyframes rotateGradientRing {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* Visor de Historias en Cubo 3D */
.modal-historias-3d {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  background: #000;
  display: flex;
  flex-direction: column;
  perspective: 1200px;
  overflow: hidden;
}

.historias-progress-bar {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 30;
  display: flex;
  gap: 6px;
}

.story-progress-segment {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  overflow: hidden;
}

.story-progress-fill {
  height: 100%;
  width: 0%;
  background: #fff;
  transition: width 0.1s linear;
}

.historias-header {
  position: absolute;
  top: 24px;
  left: 16px;
  right: 16px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.historias-header img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #a855f7;
  object-fit: cover;
}

.historias-cube-stage {
  flex: 1;
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.cube-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(circle at center, #1e1b4b 0%, #020617 100%);
}

.cube-face img {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 16px;
  object-fit: contain;
  box-shadow: 0 12px 32px rgba(0,0,0,0.6);
}

.cube-face p {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  margin-top: 16px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
  max-width: 90%;
  line-height: 1.4;
}

.historias-nav-left, .historias-nav-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 35%;
  z-index: 25;
}
.historias-nav-left { left: 0; }
.historias-nav-right { right: 0; }

/* Burbujas de Pensamiento / Notas de Estado sobre Avatares */
.pensamiento-bubble-wrap {
  position: relative;
  display: inline-block;
}

.burbuja-pensamiento {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--texto-900);
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  z-index: 12;
  animation: floatBubble 3s ease-in-out infinite;
  pointer-events: none;
}

body[data-theme="dark"] .burbuja-pensamiento,
.dark-mode .burbuja-pensamiento {
  background: rgba(30, 27, 75, 0.95);
  color: #f3e8ff;
  border: 1px solid rgba(168, 85, 247, 0.4);
}

@keyframes floatBubble {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-4px); }
}

/* Burbuja Flotante Picture-in-Picture (PiP) */
.pip-floating-bubble {
  position: fixed;
  bottom: 80px;
  right: 16px;
  width: 180px;
  height: 110px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--blanco);
  border: 1.5px solid var(--morado-500, #8b5cf6);
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  z-index: 99999;
  display: flex;
  flex-direction: column;
}

body[data-tema="oscuro"] .pip-floating-bubble {
  background: #09090b;
  box-shadow: 0 12px 32px rgba(0,0,0,0.7);
}

.pip-floating-bubble video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pip-controls {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 6px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  padding: 4px 8px;
  border-radius: 12px;
  color: #fff;
}

/* Glassmorphism & OLED Black Dark Mode */
body[data-theme="dark"],
.dark-mode {
  background-color: #000000 !important;
  color: #f8fafc !important;
}

body[data-theme="dark"] nav.tabbar,
.dark-mode nav.tabbar {
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(25px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(200%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.8) !important;
}

nav.tabbar .tab.activo::after {
  content: '';
  position: absolute;
  bottom: -6px;
  width: 16px;
  height: 4px;
  background: #a855f7;
  border-radius: 4px;
  box-shadow: 0 0 12px #a855f7;
}

/* Skeleton Loading Cards con Shimmer Animation */
.skeleton-card-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0.05) 100%
  );
  background-size: 200% 100%;
  animation: shimmerSweep 1.8s infinite;
  border-radius: 16px;
}

@keyframes shimmerSweep {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Visualizador de Audio 3D */
.audio-visualizer-3d-wrap {
  width: 100%;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #0f172a, #1e1b4b);
  border: 1px solid rgba(139, 92, 246, 0.3);
  margin: 6px 0;
  position: relative;
}

.audio-visualizer-3d-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Globo Terráqueo 3D de "Conexiones en Vivo" */
.globo-conexiones-card {
  margin: 12px 16px;
  background: linear-gradient(135deg, #090d16, #111827);
  border-radius: 20px;
  padding: 14px;
  border: 1px solid rgba(139, 92, 246, 0.3);
  box-shadow: 0 12px 28px rgba(0,0,0,0.3);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.globo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.globo-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #f3e8ff;
  letter-spacing: 0.3px;
}
.punto-live-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a855f7;
  box-shadow: 0 0 10px #a855f7;
  animation: blink 1.2s infinite;
}
.globo-region-tag {
  font-size: 11px;
  font-weight: 700;
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.4);
  padding: 3px 10px;
  border-radius: 12px;
}
.globo-canvas-wrap {
  width: 100%;
  height: 210px;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: radial-gradient(circle at center, #13122b 0%, #080812 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.globo-canvas-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}
.globo-canvas-wrap canvas:active {
  cursor: grabbing;
}
.globo-footer {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #9ca3af;
  font-weight: 600;
}
.mini-btn-reset-globo {
  background: #8b5cf6;
  color: #fff;
  border: none;
  padding: 3px 10px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 11px;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}
.mini-btn-reset-globo:hover {
  background: #7c3aed;
  transform: scale(1.05);
}

.tool-card-square.completado .tool-status-badge {
  background: #10b981;
}

.tool-card-square.error .tool-status-badge {
  background: #ef4444;
}

/* Hoja Detalle Herramienta */
.hoja-detalle-tool {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2020;
  background: var(--blanco, #ffffff);
  border-radius: 24px 24px 0 0;
  padding: 24px 20px;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.2, 0.85, 0.2, 1);
}

.hoja-detalle-tool.activo {
  transform: translateY(0);
}

/* =========================================================
   ESTRUCTURA DE TARJETAS EN PAREJA DE CUADRADOS (DESCUBRIR)
   ========================================================= */
.tarjeta-par-cuadrados {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
  width: 100%;
  max-width: 100%;
  position: relative;
  box-sizing: border-box;
}

@media (max-width: 380px) {
  .tarjeta-par-cuadrados {
    gap: 6px;
  }
}

.cuadrado-persona {
  aspect-ratio: 1 / 1;
  width: 100%;
  min-width: 0;
  background: var(--blanco, #ffffff);
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(91, 33, 182, 0.08);
  border: 1.5px solid rgba(139, 92, 246, 0.12);
  padding: 8px 9px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  user-select: none;
  touch-action: pan-y;
  cursor: pointer;
}

html[data-tema="oscuro"] .cuadrado-persona {
  background: var(--fondo-tarjeta, #181824);
  border-color: rgba(139, 92, 246, 0.22);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}

.cuadrado-persona:active {
  transform: scale(0.98);
}

/* Transición fluida y rápida sin parpadeos ni congelamientos */
@keyframes subvistaEntradaSuave {
  0% { opacity: 0.4; }
  100% { opacity: 1; }
}

.cuadrado-subvista {
  animation: subvistaEntradaSuave 0.18s ease-out forwards;
}

/* Puntos indicadores de etapa en las tarjetas */
.cuadrado-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  position: absolute;
  top: 7px;
  right: 8px;
  z-index: 5;
}

.cuadrado-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--linea, #e2e8f0);
  transition: all 0.2s ease;
}

.cuadrado-dot.activo {
  width: 14px;
  border-radius: 4px;
  background: var(--morado-600, #7c3aed);
}

/* Subvistas contenidas dentro de un cuadrado */
.cuadrado-subvista {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* Subvista Foto Completa */
.subvista-foto-full {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: 18px;
  cursor: pointer;
}

.cuadrado-foto-full {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cuadrado-foto-badge-online {
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #94a3b8;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.cuadrado-foto-badge-online.en-linea {
  background: #10b981;
}

/* Encabezado e Info básica en tarjeta derecha */
.cuadrado-perfil-top {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.cuadrado-similitud-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(236, 72, 153, 0.15));
  border: 1px solid rgba(124, 58, 237, 0.25);
  color: var(--morado-700, #6d28d9);
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 800;
  width: fit-content;
}

html[data-tema="oscuro"] .cuadrado-similitud-badge {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.2), rgba(244, 114, 182, 0.2));
  color: #ddd6fe;
  border-color: rgba(167, 139, 250, 0.35);
}

.cuadrado-info-basica {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.cuadrado-redes-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  margin-bottom: 4px;
  max-height: 52px;
  overflow: hidden;
}

.badge-red-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--hueso, #f1f5f9);
  color: var(--texto-800, #1e293b);
  border: 1px solid var(--borde, #cbd5e1);
  white-space: nowrap;
}

html[data-tema="oscuro"] .badge-red-chip {
  background: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
  border-color: rgba(255, 255, 255, 0.15);
}

.cuadrado-redes-vacio {
  font-size: 10.5px;
  color: var(--texto-500, #64748b);
  font-style: italic;
  margin: 4px 0;
}

.cuadrado-nombre {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--texto-900, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.cuadrado-ubicacion {
  font-size: 11px;
  color: var(--texto-500, #64748b);
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Subvista 2 (Izq): Acciones de perfil */
.cuadrado-acciones-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
  margin-top: auto;
}

.cuadrado-btn-accion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  background: var(--morado-100, #f3e8ff);
  color: var(--morado-700, #6d28d9);
  transition: all 0.15s ease;
}

.cuadrado-btn-accion.primario {
  background: linear-gradient(135deg, var(--morado-600, #7c3aed), var(--morado-700, #6d28d9));
  color: #ffffff;
}

/* Subvista 1 (Der): Gustos, Nacionalidad, Detalles */
.cuadrado-detalles-box {
  display: flex;
  flex-direction: column;
  gap: 5px;
  height: 100%;
  justify-content: space-between;
}

.cuadrado-titulo-sec {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--morado-600, #7c3aed);
}

.cuadrado-tags-gustos {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 75px;
  overflow-y: auto;
  scrollbar-width: none;
}

.cuadrado-tags-gustos::-webkit-scrollbar {
  display: none;
}

.cuadrado-tag-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 8px;
  background: var(--hueso, #f8fafc);
  color: var(--texto-700, #334155);
  border: 1px solid var(--linea, #e2e8f0);
}

html[data-tema="oscuro"] .cuadrado-tag-chip {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  color: #cbd5e1;
}

/* Subvista 2 (Der): Chat con la persona */
.cuadrado-chat-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.cuadrado-chat-burbuja {
  background: var(--morado-100, #f3e8ff);
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 11px;
  color: var(--texto-800, #1e293b);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}

html[data-tema="oscuro"] .cuadrado-chat-burbuja {
  background: rgba(124, 58, 237, 0.18);
  color: #e2e8f0;
}

.cuadrado-chat-vacio {
  font-size: 10.5px;
  color: var(--texto-500, #64748b);
  font-style: italic;
  text-align: center;
  padding: 10px 4px;
}

.cuadrado-chat-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--linea, #e2e8f0);
}

.cuadrado-chat-nav-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--morado-200, #ddd6fe);
  color: var(--morado-800, #5b21b6);
  font-weight: 800;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.cuadrado-chat-nav-btn:active {
  transform: scale(0.9);
}

.cuadrado-chat-pag {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--texto-500, #64748b);
}

/* Subvista 3 (Der): Llamada, Videollamada y Redes */
.cuadrado-contacto-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  height: 100%;
}

.cuadrado-contacto-row {
  display: flex;
  gap: 6px;
}

.cuadrado-btn-contacto {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  border: none;
  cursor: pointer;
}

.cuadrado-btn-contacto.audio {
  background: #e6f8ef;
  color: #15803d;
}

.cuadrado-btn-contacto.video {
  background: #e9f1ff;
  color: #1d4ed8;
}

.cuadrado-btn-contacto.social {
  background: var(--morado-100, #f3e8ff);
  color: var(--morado-700, #6d28d9);
}

/* ---- Animaciones dinámicas para Clima ---- */
@keyframes cloudMove {
  0% { transform: translateX(-15%); }
  50% { transform: translateX(15%); }
  100% { transform: translateX(-15%); }
}

@keyframes rainFall {
  0% { transform: translateY(-10px); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(24px); opacity: 0; }
}

.weather-cloud-anim {
  animation: cloudMove 8s ease-in-out infinite;
}

.weather-rain-drop {
  animation: rainFall 1.2s linear infinite;
}

/* ================= PERFIL DE RENDIMIENTO Y FLUIDEZ ================= */
.vista-app,
.lista-mensajes {
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.tarjeta-par-cuadrados, .cuadrado-persona {
  will-change: transform;
}

/* ================= EFECTO BORDES GIRATORIOS CON DESENFOQUE 3D ================= */
.aurora-glow-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none !important;
  z-index: 999999;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  box-sizing: border-box;
}

.aurora-glow-overlay.activo {
  opacity: 1;
  visibility: visible;
}

.aurora-glow-overlay::before {
  content: '';
  position: absolute;
  inset: -4px;
  border: 4px solid transparent;
  border-radius: 0px;
  background: conic-gradient(from var(--aurora-angle, 0deg), transparent 0deg, transparent 270deg, rgba(255, 255, 255, 0.95) 305deg, rgba(167, 139, 250, 0.85) 330deg, transparent 360deg) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: blur(8px) saturate(200%);
  animation: spinAuroraSegment 3.5s linear infinite;
}

/* ================= LINK VIDEO GRID DE COLECCIONES / TARJETAS CUADRADAS ================= */
@property --aurora-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes spinAuroraSegment {
  0% { --aurora-angle: 0deg; }
  100% { --aurora-angle: 360deg; }
}

.grid-cuadrados-linkvideo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 20px;
}

@media (max-width: 380px) {
  .grid-cuadrados-linkvideo {
    gap: 8px;
  }
}

.linkvideo-square-card {
  aspect-ratio: 1 / 1;
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(91, 33, 182, 0.12);
  border: 2px solid transparent;
  background: linear-gradient(var(--blanco), var(--blanco)) padding-box,
              conic-gradient(from var(--aurora-angle, 0deg), transparent 0deg, transparent 270deg, rgba(255, 255, 255, 0.95) 305deg, rgba(167, 139, 250, 0.85) 330deg, transparent 360deg) border-box;
  animation: spinAuroraSegment 4s linear infinite;
  transition: transform 0.22s cubic-bezier(0.2, 0.85, 0.2, 1), box-shadow 0.22s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  user-select: none;
}

html[data-tema="oscuro"] .linkvideo-square-card {
  background: linear-gradient(var(--fondo-tarjeta, #181824), var(--fondo-tarjeta, #181824)) padding-box,
              conic-gradient(from var(--aurora-angle, 0deg), transparent 0deg, transparent 270deg, rgba(255, 255, 255, 0.9) 305deg, rgba(192, 132, 252, 0.85) 330deg, transparent 360deg) border-box;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.linkvideo-square-card:active {
  transform: scale(0.96);
}

.linkvideo-card-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.linkvideo-square-card:hover .linkvideo-card-thumb-img {
  transform: scale(1.06);
}

.linkvideo-card-overlay-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.02) 20%, rgba(0,0,0,0.85) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px;
  color: #ffffff;
  z-index: 2;
}

.linkvideo-card-title {
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.25;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.linkvideo-card-badge-count {
  font-size: 10px;
  font-weight: 800;
  background: rgba(139, 92, 246, 0.85);
  backdrop-filter: blur(8px);
  color: #ffffff;
  padding: 3px 8px;
  border-radius: 10px;
  width: fit-content;
  margin-top: 4px;
}

.linkvideo-video-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.linkvideo-album-desc-truncated {
  font-size: 12px;
  color: var(--texto-700);
  line-height: 1.35;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
  max-width: 100%;
}

.linkvideo-album-desc-truncated.expandido {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.linkvideo-video-title-below {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--texto-900);
  margin-top: 6px;
  padding: 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: center;
}

/* ================= REPRODUCTOR ESTILO iOS GLASS / LINK VIDEO ================= */
.hitv-player-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: radial-gradient(circle at 50% 0%, rgba(237, 231, 255, 0.9) 0%, rgba(245, 243, 255, 0.95) 50%, rgba(250, 248, 255, 0.98) 100%);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: calc(env(safe-area-inset-top) + 8px) 16px calc(env(safe-area-inset-bottom) + 16px);
  color: var(--texto-900);
  overflow-y: auto;
  box-sizing: border-box;
}

html[data-tema="oscuro"] .hitv-player-modal,
body[data-tema="oscuro"] .hitv-player-modal {
  background: radial-gradient(circle at 50% 0%, rgba(46, 26, 82, 0.85) 0%, rgba(20, 14, 38, 0.95) 55%, rgba(10, 7, 20, 0.98) 100%);
  color: #f3f0ff;
}

.hitv-close-btn {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 12px);
  right: 16px;
  z-index: 40;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  color: var(--morado-950, #241539);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(91, 33, 182, 0.15);
  transition: transform 0.18s ease, background 0.18s ease;
}

html[data-tema="oscuro"] .hitv-close-btn,
body[data-tema="oscuro"] .hitv-close-btn {
  background: rgba(36, 26, 61, 0.65);
  border-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.hitv-close-btn:active {
  transform: scale(0.92);
}

.hitv-player-wrapper {
  width: 100%;
  max-width: 840px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-top: 4px;
}

.hitv-video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  background: #000000;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 18px 40px -10px rgba(91, 33, 182, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.6);
}

html[data-tema="oscuro"] .hitv-video-container,
body[data-tema="oscuro"] .hitv-video-container {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.hitv-video-container iframe,
.hitv-video-container #linkVideoIframePlayer {
  width: 100%;
  height: 100%;
  border: none;
  position: absolute;
  inset: 0;
}

/* Área Flotante de Subtítulos Karaoke / Ondas Aurora (Bajo el video, NUNCA sobre el iframe) */
.hitv-subtitle-area {
  width: 100%;
  padding: 12px 16px;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 24px -6px rgba(91, 33, 182, 0.1);
  box-sizing: border-box;
}

html[data-tema="oscuro"] .hitv-subtitle-area,
body[data-tema="oscuro"] .hitv-subtitle-area {
  background: rgba(26, 18, 48, 0.65);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
}

.hitv-subtitle-line {
  font-size: clamp(15px, 4vw, 22px);
  font-weight: 800;
  color: var(--texto-900, #1e1338);
  text-align: center;
  line-height: 1.35;
  letter-spacing: -0.01em;
  padding: 6px 14px;
  border-radius: 14px;
  max-width: 96%;
  transition: opacity 0.22s ease, transform 0.22s ease;
  word-wrap: break-word;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

html[data-tema="oscuro"] .hitv-subtitle-line,
body[data-tema="oscuro"] .hitv-subtitle-line {
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 14px rgba(167, 139, 250, 0.5);
}

.hitv-subtitle-line.hitv-subtitle-hidden {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  display: none !important;
}

/* Desplegable de Vídeos de Carpeta en Reproductor */
.hitv-folder-toggle-btn {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: var(--morado-700, #6d28d9);
  width: 38px;
  height: 38px;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(91, 33, 182, 0.12);
  transition: transform 0.18s ease, background 0.18s ease;
}

html[data-tema="oscuro"] .hitv-folder-toggle-btn,
body[data-tema="oscuro"] .hitv-folder-toggle-btn {
  background: rgba(36, 26, 61, 0.7);
  border-color: rgba(167, 139, 250, 0.3);
  color: #ddd6fe;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.hitv-folder-toggle-btn:hover {
  transform: scale(1.05);
}

.hitv-folder-videos-container {
  width: 100%;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
}

.hitv-folder-video-card-item {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 6px 20px rgba(91, 33, 182, 0.08);
  box-sizing: border-box;
}

html[data-tema="oscuro"] .hitv-folder-video-card-item,
body[data-tema="oscuro"] .hitv-folder-video-card-item {
  background: rgba(24, 18, 44, 0.75);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
}

.hitv-folder-video-card-item:hover, .hitv-folder-video-card-item.active {
  border-color: var(--morado-600, #7c3aed);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(124, 58, 237, 0.25);
}

.hitv-folder-card-thumb-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  background: #000;
  overflow: hidden;
}

.hitv-folder-card-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hitv-folder-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 60%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hitv-folder-card-play-icon {
  width: 48px;
  height: 48px;
  background: rgba(124, 58, 237, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.hitv-folder-card-info {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hitv-folder-card-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--texto-900, #1e1338);
  line-height: 1.3;
}

html[data-tema="oscuro"] .hitv-folder-card-title,
body[data-tema="oscuro"] .hitv-folder-card-title {
  color: #ffffff;
}

/* Animación Esfera Luminosa Link + Ondas Aurora */
.hitv-aurora-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.hitv-aurora-container.hitv-aurora-hidden {
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
  display: none !important;
}

.hitv-aurora-sphere {
  position: relative;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hitv-aurora-core {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #c084fc 60%, #7c3aed 100%);
  box-shadow: 0 0 12px #a855f7, 0 0 24px #ec4899;
  z-index: 2;
  animation: auroraCorePulse 2s infinite ease-in-out;
}

.hitv-aurora-wave {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(192, 132, 252, 0.6);
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.4);
  animation: auroraExpand 2.8s infinite ease-out;
  pointer-events: none;
}

.hitv-aurora-wave.wave-1 {
  width: 16px;
  height: 16px;
  animation-delay: 0s;
}

.hitv-aurora-wave.wave-2 {
  width: 16px;
  height: 16px;
  animation-delay: 0.9s;
}

.hitv-aurora-wave.wave-3 {
  width: 16px;
  height: 16px;
  animation-delay: 1.8s;
}

@keyframes auroraExpand {
  0% {
    width: 14px;
    height: 14px;
    opacity: 0.9;
    border-color: rgba(236, 72, 153, 0.8);
    transform: scale(1);
  }
  100% {
    width: 60px;
    height: 60px;
    opacity: 0;
    border-color: rgba(124, 58, 237, 0.2);
    transform: scale(1.6);
  }
}

@keyframes auroraCorePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 10px #a855f7, 0 0 20px #ec4899;
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 0 16px #c084fc, 0 0 30px #3b82f6;
  }
}

.hitv-aurora-notice {
  font-size: 11px;
  font-weight: 700;
  color: var(--texto-500, #7a6f92);
  letter-spacing: 0.3px;
}

html[data-tema="oscuro"] .hitv-aurora-notice,
body[data-tema="oscuro"] .hitv-aurora-notice {
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

/* =========================================================
   ESTILOS DE PROTECCIÓN EXTREMA / MODO SEGURO
   ========================================================= */
.elemento-protegido-difuminado {
  filter: blur(14px) grayscale(40%) !important;
  pointer-events: none !important;
  user-select: none !important;
  transition: filter 0.3s ease !important;
}

.contenido-privado-oculto-temporal {
  visibility: hidden !important;
  opacity: 0 !important;
  transition: opacity 0.25s ease, visibility 0.25s ease !important;
}

.icono-candado-candadito {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 3px;
  vertical-align: middle;
  color: var(--morado-600, #8b5cf6);
}

.alerta-seguridad-banner {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000000;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.4);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  animation: pulseBlinkAlert 1.5s infinite;
}

@keyframes pulseBlinkAlert {
  0%, 100% { transform: translateX(-50%) scale(1); box-shadow: 0 8px 24px rgba(220, 38, 38, 0.4); }
  50% { transform: translateX(-50%) scale(1.03); box-shadow: 0 12px 28px rgba(220, 38, 38, 0.7); }
}