/* ==========================================================================
   Comunidad Dreomar (24-oct-2026) · Dre UI (Apple UI / iOS)
   Solo usa las variables del tema (--suelo, --widget, --widget-2, --linea, --sombra, --texto, --texto-2, --texto-3,
   --acento, --acento-suave, --ok, --urgente, --estrella, --letra, --curva, --curva-muelle, --radio-*, --hueco, --margen):
   la paleta la pone el agente de tema. Claro y oscuro salen solos de esas variables.
   Celular primero. En la PC: el muro en una columna central y el panel al lado.
   ========================================================================== */
.cc { --cc-alto-cab: 104px; --cc-acento-tinte: color-mix(in srgb, var(--acento) 12%, var(--widget)); min-height: calc(100vh - var(--alto-cinta, 0px)); background: var(--suelo); color: var(--texto); font-family: var(--letra); overflow-x: clip; }
.cc button { font: inherit; color: inherit; }
/* 24-oct: los botones de la marca dentro de la comunidad conservan su color (el «Publicar» del muro vacío salía gris sobre azul) */
.cc .btn { color: #fff; } .cc .btn-sec { color: var(--texto); } .cc .btn-claro { color: #0B0B0F; }
.cc .widget { --radio-widget: 20px; }
@media (min-width: 768px) { .cc .widget { --radio-widget: 22px; --relleno-widget: 20px; } }
.cc-mini-rotulo { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); }
.cc .num, .cc-pop .num { font-variant-numeric: tabular-nums; }
.cc a { -webkit-tap-highlight-color: transparent; }
.cc .fila > .cuerpo, .cc-adm .fila > .cuerpo { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }

/* ── Cabecera (cristal) ─────────────────────────────────────────────────── */
.cc-cabeza { position: sticky; top: var(--alto-cinta, 0px); z-index: 40; background: color-mix(in srgb, var(--suelo) 78%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: inset 0 -1px 0 var(--linea); }
.cc-fila1 { display: flex; align-items: center; gap: 10px; height: 56px; }
.cc-marca { display: inline-flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto; color: var(--texto); text-decoration: none; }
.cc-logo { position: relative; flex-shrink: 0; width: 34px; height: 34px; border-radius: 28%; display: grid; place-items: center; color: #fff; background: var(--acento); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 14px -8px var(--acento); overflow: hidden; }
.cc-logo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.28), transparent 55%); }
.cc-logo svg { position: relative; width: 18px; height: 18px; }
.cc-nombre { font-weight: 700; font-size: 17px; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-buscador { position: relative; display: flex; align-items: center; flex: 1; max-width: 460px; margin-inline: auto; }
.cc-buscador > svg { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--texto-3); pointer-events: none; }
.cc-buscador input[type="search"] { width: 100%; height: 38px; padding: 0 14px 0 36px; border: 0; border-radius: 12px; background: color-mix(in srgb, var(--texto) 6%, transparent); outline: none; font: inherit; font-size: 15px; color: var(--texto); }
.cc-buscador input[type="search"]::placeholder { color: var(--texto-3); }
.cc-buscador input[type="search"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 30%, transparent); background: var(--widget); }
.cc-buscador.lleno { max-width: none; margin: 0; }
.cc-buscador.lleno input[type="search"] { height: 42px; background: var(--widget); box-shadow: 0 0 0 1px var(--linea); }
.cc-iconos { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0; }
.cc-iconos .redondo { width: 38px; height: 38px; background: transparent; box-shadow: none; color: var(--texto); }
.cc-iconos .redondo:hover { background: color-mix(in srgb, var(--texto) 7%, transparent); }
.cc-iconos .redondo > svg { width: 20px; height: 20px; }
.cc-iconos .redondo .punto { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 18px; color: #fff; background: var(--urgente); box-shadow: 0 0 0 2px var(--suelo); }
.cc-como-liz { cursor: pointer; border: 0; }
.cc-como-liz svg { width: 12px; height: 12px; }
.cc-yo { margin-left: 4px; }
.cc-av-boton { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 999px; display: inline-flex; -webkit-tap-highlight-color: transparent; }
.cc-av-boton:active { transform: scale(.95); }
@media (max-width: 380px) { .cc-nombre { font-size: 16px; } .cc-iconos { gap: 0; } .cc-iconos .redondo { width: 34px; height: 34px; } .cc-logo { width: 30px; height: 30px; } }

.cc-pestanas { display: flex; gap: 4px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cc-pestanas::-webkit-scrollbar { display: none; }
.cc-pestanas a { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; height: 44px; padding: 0 12px; font-size: 15px; font-weight: 500; color: var(--texto-2); white-space: nowrap; text-decoration: none; }
.cc-pestanas a:hover { color: var(--texto); }
.cc-pestanas a[aria-current="page"] { color: var(--texto); font-weight: 600; }
.cc-pestanas a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--acento); }
.cc-pestanas a:first-child { padding-left: 2px; }
.cc-pestanas a:first-child[aria-current="page"]::after { left: 2px; }
@media (max-width: 767px) {
  .cc-pestanas { justify-content: space-between; gap: 0; }
  .cc-pestanas a, .cc-pestanas a:first-child { padding: 0 2px; font-size: 14.5px; }
  .cc-pestanas a[aria-current="page"]::after, .cc-pestanas a:first-child[aria-current="page"]::after { left: 0; right: 0; }
}

/* ── Avatares (con nivel) ──────────────────────────────────────────────── */
.cc-av { --t: 42px; position: relative; flex-shrink: 0; width: var(--t); height: var(--t); border-radius: 999px; display: inline-grid; place-items: center; background: var(--c, var(--acento)); color: #fff; font-weight: 600; font-size: calc(var(--t) * .38); }
.cc-av img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border-radius: inherit; object-fit: cover; object-position: center 22%; }
.cc-av .ini { line-height: 1; letter-spacing: -.02em; }
.cc-av.xs { --t: 24px; } .cc-av.sm { --t: 36px; } .cc-av.lg { --t: 52px; } .cc-av.xl { --t: 84px; }
.cc-nv { position: absolute; right: -4px; bottom: -3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--acento); box-shadow: 0 0 0 2px var(--widget); font-variant-numeric: tabular-nums; }
.cc-av.xl .cc-nv { min-width: 26px; height: 26px; font-size: 13px; right: 0; bottom: 0; box-shadow: 0 0 0 3px var(--widget); }
.cc-punto-linea { position: absolute; left: 0; bottom: 0; width: 11px; height: 11px; border-radius: 999px; background: var(--ok); box-shadow: 0 0 0 2px var(--widget); }
.cc-av.xl .cc-punto-linea { width: 15px; height: 15px; left: 4px; bottom: 4px; }

/* ── Estructura: muro + lateral ────────────────────────────────────────── */
.cc-cuerpo { padding-top: 16px; padding-bottom: 96px; }
.cc-rejilla { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.cc-principal { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cc-lateral { display: none; }
@media (min-width: 1024px) {
  .cc-cuerpo { padding-top: 24px; }
  .cc-rejilla { grid-template-columns: minmax(0, 640px) 320px; justify-content: center; gap: 28px; }
  .cc-lateral { display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--alto-cinta, 0px) + var(--cc-alto-cab) + 16px); }
  .g-aviso-muro { display: none; } /* en la PC ya está en el panel de al lado */
}
.cc-tit-h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.cc-tit-pag { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 2px; }
.cc-tit-pag h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
@media (min-width: 768px) { .cc-tit-h1, .cc-tit-pag h1 { font-size: 32px; } }
.atras { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 500; color: var(--acento); text-decoration: none; }
.atras svg { width: 18px; height: 18px; }

/* Chips (categorías y filtros) */
.cc-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin-inline: -2px; -webkit-overflow-scrolling: touch; }
.cc-chips::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .cc-principal > .cc-chips { flex-wrap: wrap; overflow: visible; } }
.cc-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--texto); background: var(--widget); box-shadow: 0 0 0 1px var(--linea); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background .15s, color .15s, transform .12s; }
.cc-chip:hover { background: var(--widget-2); }
.cc-chip:active { transform: scale(.96); }
.cc-chip.activo { color: #fff; background: var(--acento); box-shadow: 0 6px 14px -8px var(--acento); }
.cc-chip .emoji { font-size: 14px; }
.cc-chip > span:not(.emoji) { font-size: 12px; font-weight: 600; opacity: .7; }
.cc-chip:disabled { opacity: .45; cursor: default; }

/* La lista del muro deja sitio debajo de los filtros: al filtrar, nada salta */
.cc-feed-lista { display: flex; flex-direction: column; gap: 12px; min-height: calc(100svh - var(--alto-cinta, 0px) - var(--cc-alto-cab) - 64px); }
.cc-resultado { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 4px 0; font-size: 14px; color: var(--texto-2); }
.cc-resultado .enlace { display: inline-flex; align-items: center; gap: 4px; }
.cc-resultado svg { width: 14px; height: 14px; }

/* Estados: vacío, cargando, error, fin */
.cc-vacio { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 20px; text-align: center; color: var(--texto-2); }
.cc-vacio > svg { width: 28px; height: 28px; color: var(--texto-3); }
.cc-vacio b { color: var(--texto); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.cc-vacio .btn { margin-top: 4px; }
.cc-vacio-emo { font-size: 40px; line-height: 1; }
.cc-vacio.chico { padding: 24px 12px; }
.cc-vacio.chico .emoji { font-size: 28px; }
.cc-error > svg { color: var(--urgente); }
.cc-error b { max-width: 34ch; }
.cc-estado { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 100px; font-size: 14px; font-weight: 500; color: var(--texto-3); }
.cc-giro { width: 18px; height: 18px; border-radius: 999px; border: 2px solid color-mix(in srgb, var(--acento) 22%, transparent); border-top-color: var(--acento); animation: cc-gira .8s linear infinite; flex-shrink: 0; }
.cc-giro.chico { width: 13px; height: 13px; border-width: 1.5px; }
@keyframes cc-gira { to { transform: rotate(360deg); } }
.cc-fin { text-align: center; padding: 12px; font-size: 13px; color: var(--texto-3); }
.cc-sin-com { padding: 18px 4px; font-size: 14px; color: var(--texto-3); text-align: center; }
.cc-prog-aviso { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; font-size: 14px; color: var(--texto); background: var(--widget); box-shadow: 0 0 0 1px var(--linea); text-decoration: none; }
.cc-prog-aviso > svg { width: 18px; height: 18px; color: var(--acento); flex-shrink: 0; }
.cc-prog-aviso > span { flex: 1; min-width: 0; }
.cc-nuevas { position: sticky; top: calc(var(--alto-cinta, 0px) + var(--cc-alto-cab) + 10px); z-index: 5; align-self: center; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 600; color: #fff; background: var(--acento); box-shadow: 0 10px 22px -10px var(--acento); animation: g-sube .25s var(--curva-muelle) both; }
.cc-nuevas svg { width: 15px; height: 15px; }

/* Esqueletos mientras carga (la forma de un post: nada salta cuando llega) */
.g-esqueletos { display: flex; flex-direction: column; gap: 12px; }
.g-esq { display: flex; flex-direction: column; gap: 10px; }
.g-esq i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--widget-2) 0%, color-mix(in srgb, var(--widget-2) 45%, var(--widget)) 50%, var(--widget-2) 100%); background-size: 200% 100%; animation: g-brillo 1.4s ease-in-out infinite; }
.g-esq-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.g-esq-cab > div { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.g-esq i.g-esq-av { width: 42px; height: 42px; border-radius: 999px; flex-shrink: 0; }
.g-esq i.g-esq-foto { height: 180px; border-radius: 14px; margin-top: 2px; }
.g-esq-perfil { min-height: 240px; }
@keyframes g-brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ── «¿Qué quieres compartir?» ─────────────────────────────────────────── */
.g-compartir { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; }
.g-compartir-in { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0; border: 0; background: none; cursor: text; text-align: left; }
.g-compartir-in > span:last-child { flex: 1; min-width: 0; height: 40px; line-height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; color: var(--texto-3); background: var(--widget-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: box-shadow .2s; }
.g-compartir-in:hover > span:last-child { box-shadow: inset 0 0 0 1px var(--linea); }
.g-compartir-acc { display: flex; gap: 2px; padding-top: 8px; border-top: 1px solid var(--linea); }
.g-compartir-acc button { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 4px; border: 0; border-radius: 10px; background: none; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--texto-2); }
.g-compartir-acc button:hover { color: var(--texto); background: var(--widget-2); }
.g-compartir-acc button:active { transform: scale(.97); }
.g-compartir-acc svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--acento); }
@media (max-width: 359px) { .g-compartir-acc button > span:not(.g-gif-ic) { display: none; } }
.solo-pc { display: none !important; }
@media (hover: hover) and (pointer: fine) { .g-compartir-acc button.solo-pc { display: inline-flex !important; } .g-herr.solo-pc { display: grid !important; } }
.g-gif-ic { display: inline-grid; place-items: center; height: 18px; padding: 0 4px; border-radius: 5px; font-size: 10px; font-weight: 700; letter-spacing: .04em; line-height: 1; color: #fff; background: var(--acento); }

/* Aviso amable «Completa tu perfil» */
.g-aviso-perfil { display: flex; align-items: center; gap: 12px; padding: 12px 10px 12px 14px; }
.g-aviso-perfil-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.g-aviso-perfil-t b { font-size: 15px; font-weight: 600; }
.g-aviso-perfil-t span { font-size: 13.5px; line-height: 1.4; color: var(--texto-2); }
.g-aviso-perfil .btn-sec { flex-shrink: 0; }
.g-aviso-x { width: 32px; height: 32px; background: transparent; box-shadow: none; color: var(--texto-3); }
@media (max-width: 440px) {
  .g-aviso-perfil { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; grid-template-areas: "ic tx x" ". bt bt"; align-items: start; column-gap: 12px; row-gap: 10px; }
  .g-aviso-perfil > .icono { grid-area: ic; }
  .g-aviso-perfil-t { grid-area: tx; }
  .g-aviso-perfil .g-aviso-x { grid-area: x; margin-top: -4px; }
  .g-aviso-perfil .btn-sec { grid-area: bt; justify-self: start; }
}

/* ── La tarjeta del post ────────────────────────────────────────────────── */
.cc-post { display: flex; flex-direction: column; gap: 10px; }
.cc-post.cc-oculto { opacity: .6; }
.cc-post-cabeza { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cc-meta { min-width: 0; flex: 1; }
.cc-meta-1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cc-autor { padding: 0; border: 0; background: none; cursor: pointer; font-weight: 600; font-size: 15px; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.cc-autor:hover { text-decoration: underline; }
.cc-meta-2 { margin-top: 1px; font-size: 13px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-meta-2 a { color: inherit; text-decoration: none; }
.cc-meta-2 a:hover { color: var(--texto); text-decoration: underline; }
.cc-cat-et { font-weight: 500; color: var(--texto-2) !important; }
.cc-et-admin { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--acento); background: color-mix(in srgb, var(--acento) 14%, transparent); flex-shrink: 0; }
.cc-fijado { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--acento); background: color-mix(in srgb, var(--acento) 12%, transparent); }
.cc-fijado svg { width: 13px; height: 13px; }
@media (max-width: 420px) { .cc-fijado span { display: none; } .cc-fijado { width: 26px; padding: 0; justify-content: center; } }
.cc-mas { width: 34px; height: 34px; margin-right: -6px; background: transparent; box-shadow: none; color: var(--texto-2); }
.cc-mas:hover { background: var(--widget-2); }
.g-post-tit { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; }
.g-post-tit a { color: var(--texto); text-decoration: none; }
.g-post-texto { font-size: 15px; line-height: 1.55; color: var(--texto); overflow-wrap: anywhere; }
.g-post-texto p { margin: 0; }
.g-post-texto p + p { margin-top: 10px; }
.g-post-texto.recortado { max-height: calc(1.55em * 7); overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent); mask-image: linear-gradient(180deg, #000 62%, transparent); }
.g-ver-mas { align-self: flex-start; margin-top: -6px; padding: 2px 0; border: 0; background: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--acento); }
.g-solo-emoji { font-size: 38px; line-height: 1.2; }
.cc-com-texto.g-solo-emoji { font-size: 30px; }
.cc-burbuja.g-burbuja-emoji { background: transparent; padding-left: 4px; }
.cc-op-linea { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-op-linea svg { width: 13px; height: 13px; }
.g-meta-enlace { color: inherit; }

/* Enlaces, @ de redes, menciones y # dentro del texto */
.cc-enlace { color: var(--acento); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.cc-enlace:hover { text-decoration: underline; }
.cc-mencion { font-weight: 600; color: var(--acento); text-decoration: none; }
a.cc-mencion:hover, a.cc-hash:hover { text-decoration: underline; }
.cc-hash { font-weight: 500; color: var(--acento); text-decoration: none; }
.g-red { display: inline-flex; align-items: center; gap: 3px; padding: 0 8px 0 6px; border-radius: 999px; font-weight: 600; font-size: .94em; line-height: 1.55; color: var(--texto); background: var(--widget-2); box-shadow: inset 0 0 0 1px var(--linea); white-space: nowrap; text-decoration: none; vertical-align: baseline; }
.g-red svg { width: 13px; height: 13px; flex-shrink: 0; }
.g-red:hover { background: color-mix(in srgb, var(--texto) 8%, var(--widget-2)); }
.g-redes { display: flex; flex-wrap: wrap; gap: 6px; }
.g-redes .g-red { font-size: 13.5px; padding: 3px 11px 3px 8px; }

/* Fotos en cuadrícula (1 · 2 · 3 · 4 · «+N») */
.g-fotos-post { display: grid; gap: 3px; border-radius: 16px; overflow: hidden; background: var(--widget-2); }
.g-fotos-post.n1 { display: block; background: none; }
.g-fotos-post.n2 { grid-template-columns: 1fr 1fr; aspect-ratio: 8 / 5; }
.g-fotos-post.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 4 / 3; }
.g-fotos-post.n3 .g-img:first-child { grid-row: span 2; }
.g-fotos-post.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 1; }
.g-img { position: relative; display: block; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; overflow: hidden; cursor: zoom-in; background: var(--widget-2); -webkit-tap-highlight-color: transparent; }
.g-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter .2s; }
@media (hover: hover) { .g-img:hover img { filter: brightness(.95); } }
.g-img-sola { height: auto; aspect-ratio: var(--ar, 1.25); max-height: 560px; border-radius: 16px; }
.g-img-mas { position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, .45); }
.g-gif-et { position: absolute; left: 8px; bottom: 8px; padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #fff; background: rgba(0, 0, 0, .6); pointer-events: none; }

/* Tarjeta del enlace (la arma el servidor) */
.g-vista { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; color: var(--texto); background: var(--widget-2); text-decoration: none; transition: box-shadow .2s; }
a.g-vista:hover { box-shadow: inset 0 0 0 1px var(--linea); }
.g-vista-enlace { color: inherit; text-decoration: none; display: block; }
.g-vista-enlace:hover .g-vista-txt b { text-decoration: underline; }
.g-vista-img { position: relative; display: block; width: 100%; aspect-ratio: 1.91 / 1; padding: 0; border: 0; overflow: hidden; background: var(--linea); }
.g-vista-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
button.g-vista-img { cursor: pointer; }
.g-vista-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 14px 12px; }
.g-vista-sitio { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; font-weight: 500; color: var(--texto-3); }
.g-vista-sitio > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-vista-sitio svg { width: 14px; height: 14px; flex-shrink: 0; }
.g-vista-txt b { font-size: 15px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.g-vista-desc { font-size: 13.5px; line-height: 1.45; color: var(--texto-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.g-vista.vertical, .g-vista.chica { flex-direction: row; align-items: stretch; }
.g-vista.vertical .g-vista-img { width: 112px; aspect-ratio: 9 / 14; flex-shrink: 0; }
.g-vista.vertical .g-vista-txt, .g-vista.chica .g-vista-txt { justify-content: center; }
.g-vista.chica .g-vista-img { width: 104px; aspect-ratio: auto; min-height: 78px; flex-shrink: 0; }
.g-vista.chica .g-vista-txt { padding: 8px 12px; }
.g-vista.chica .g-vista-txt b { font-size: 14px; }
.g-vista.simple { flex-direction: row; align-items: center; gap: 12px; padding: 11px 14px; }
.g-vista.simple .g-vista-txt { flex: 1; padding: 0; gap: 1px; }
.g-vista.simple .g-vista-txt b { font-size: 14.5px; -webkit-line-clamp: 1; }
.g-vista-sitio-s { font-size: 12.5px; color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-vista.simple > svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--texto-3); }
.g-vista-ic { flex-shrink: 0; width: 38px; height: 38px; border-radius: 28%; display: grid; place-items: center; color: var(--texto-2); background: var(--widget); }
.g-vista-ic svg { width: 18px; height: 18px; }
/* Las redes conservan sus colores (como el ícono de su app) */
.g-vista.instagram .g-vista-ic { color: #fff; background: linear-gradient(135deg, #F9B163, #E1306C 55%, #833AB4); }
.g-vista.tiktok .g-vista-ic { color: #fff; background: #111; }
.g-vista.youtube .g-vista-ic { color: #fff; background: #FF0000; }
.g-play { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center; color: #111; background: rgba(255, 255, 255, .92); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6); pointer-events: none; }
.g-play svg { width: 20px; height: 20px; margin-left: 3px; }
.g-yt-marco { aspect-ratio: 16 / 9; background: #000; }
.g-yt-marco iframe { width: 100%; height: 100%; border: 0; display: block; }
.g-vista-media { display: flex; flex-direction: column; gap: 4px; }
.g-vista-media .g-img-sola { max-height: 420px; }
.g-vista-fuente { align-self: flex-start; font-size: 12px; color: var(--texto-3); }
.cc-com .g-vista, .cc-com .g-vista-media { margin-top: 6px; max-width: 420px; }

/* Video subido y video por enlace */
.cc-video-archivo { border-radius: 16px; overflow: hidden; background: #000; }
.cc-video-archivo video { display: block; width: 100%; max-height: 72vh; background: #000; }
.g-video-muro { aspect-ratio: 16 / 10; }
.g-video-muro video { width: 100%; height: 100%; object-fit: contain; }
.cc-video-enlace { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--widget-2); color: var(--texto); text-decoration: none; }
.cc-video-enlace > svg { width: 16px; height: 16px; color: var(--texto-3); flex-shrink: 0; margin-left: auto; }
.cc-video-t { display: flex; flex-direction: column; min-width: 0; }
.cc-video-t b { font-size: 14.5px; font-weight: 600; }
.cc-video-t span { font-size: 12.5px; color: var(--texto-3); }

/* Encuesta */
.cc-encuesta { display: flex; flex-direction: column; gap: 8px; }
.cc-opcion { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--widget-2); cursor: pointer; overflow: hidden; text-align: left; font-weight: 500; font-size: 15px; }
.cc-opcion:hover { box-shadow: inset 0 0 0 1.5px var(--acento); }
.cc-opcion-barra { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--texto) 9%, transparent); transition: width .6s var(--curva); }
.cc-opcion.elegida .cc-opcion-barra { background: color-mix(in srgb, var(--acento) 22%, transparent); }
.cc-opcion-t, .cc-opcion b { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.cc-opcion-t svg { width: 15px; height: 15px; color: var(--acento); }
.cc-encuesta-pie { font-size: 12.5px; color: var(--texto-3); }

/* Oportunidad (trabajo o colaboración con «Aplicar») */
.cc-op { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 16px; background: var(--widget-2); }
.cc-op-cab { display: flex; align-items: center; gap: 12px; }
.cc-op-cab > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cc-op-cab b { font-size: 16px; font-weight: 600; }
.cc-op-cab span { font-size: 13.5px; color: var(--texto-2); }
.cc-op-logo { flex-shrink: 0; width: 44px; height: 44px; border-radius: 28%; display: grid; place-items: center; font-weight: 700; font-size: 15px; color: #fff; background: var(--acento); }
.cc-op-datos { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .cc-op-datos { grid-template-columns: 1.4fr 1fr .5fr; } }
.cc-op-datos > div { padding: 10px 12px; border-radius: 12px; background: var(--widget); display: flex; flex-direction: column; gap: 2px; }
.cc-op-datos span, .cc-op-req > span { font-size: 12px; font-weight: 500; color: var(--texto-3); }
.cc-op-datos b { font-size: 15px; font-weight: 600; }
.cc-op-req ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.cc-op-req li { display: flex; gap: 8px; font-size: 14px; line-height: 1.4; }
.cc-op-req li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--ok); }
.cc-op-estado { display: flex; align-items: center; gap: 10px; font-size: 13px; }

/* Reto dentro de un post */
.cc-reto-caja { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: 16px; background: var(--widget-2); }
.cc-reto-fila { display: flex; align-items: center; gap: 12px; }
.cc-reto-fila > div { display: flex; flex-direction: column; min-width: 0; }
.cc-reto-fila span { font-size: 13px; color: var(--texto-2); }
.cc-reto-icono, .cc-racha-icono { flex-shrink: 0; width: 40px; height: 40px; border-radius: 28%; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #FFB340, #FF7A00 55%, #FF3B30); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 18px -10px #FF7A00; }
.cc-reto-icono svg, .cc-racha-icono svg { width: 20px; height: 20px; fill: rgba(255,255,255,.3); }
.cc-racha-icono.chico { width: 32px; height: 32px; }
.cc-racha-icono.chico svg { width: 16px; height: 16px; }

/* «Preséntate»: el botón de dar la bienvenida */
.g-bienvenida { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px 0 12px; border: 0; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--acento); background: color-mix(in srgb, var(--acento) 12%, transparent); transition: transform .15s var(--curva-muelle), background .2s; }
.g-bienvenida:hover { background: color-mix(in srgb, var(--acento) 18%, transparent); }
.g-bienvenida:active { transform: scale(.96); }
.g-bienvenida .emoji { font-size: 16px; }

/* Números y acciones */
.g-post-numeros { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 22px; font-size: 13.5px; color: var(--texto-3); }
.g-reac-res { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
button.g-reac-res { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
button.g-reac-res:hover .num { text-decoration: underline; }
.g-reac-caras { display: inline-flex; }
.g-reac-caras .emoji { width: 21px; height: 21px; display: grid; place-items: center; font-size: 13px; border-radius: 999px; background: var(--widget-2); box-shadow: 0 0 0 2px var(--widget); }
.g-reac-caras .emoji + .emoji { margin-left: -5px; }
.g-ncom { margin-left: auto; color: var(--texto-3); text-decoration: none; }
.g-ncom:hover { color: var(--texto); text-decoration: underline; }
.g-post-acc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding-top: 6px; border-top: 1px solid var(--linea); }
.g-acc { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 40px; padding: 0; border: 0; border-radius: 10px; background: none; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--texto-2); text-decoration: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: background .15s, transform .12s; }
.cc .g-acc { font-size: 14px; font-weight: 500; }
.g-acc > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-acc:hover { color: var(--texto); background: var(--widget-2); }
.g-acc:active { transform: scale(.96); }
.g-acc svg { width: 18px; height: 18px; flex-shrink: 0; }
@media (max-width: 359px) { .cc .g-acc { font-size: 13px; gap: 4px; } .g-acc svg { width: 16px; height: 16px; } }
.g-like.activo { color: var(--acento); }
.g-like.activo svg { fill: color-mix(in srgb, var(--acento) 22%, transparent); stroke: var(--acento); animation: g-pop .35s var(--curva-muelle); }
.g-like.con-reac { color: var(--texto); }
.g-reac-cara { font-size: 18px; line-height: 1; animation: g-pop .35s var(--curva-muelle); }
@keyframes g-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: none; } }

/* La barrita de reacciones (sale encima del botón) */
.g-reac-barra { position: fixed; z-index: 95; display: flex; gap: 2px; padding: 5px; border-radius: 999px; background: var(--widget); box-shadow: 0 0 0 1px var(--linea), 0 18px 38px -14px var(--sombra); animation: g-sube .18s var(--curva-muelle) both; }
.g-reac-op { width: 44px; height: 44px; border: 0; border-radius: 999px; background: none; cursor: pointer; display: grid; place-items: center; font-size: 26px; line-height: 1; transition: transform .15s var(--curva-muelle), background .15s; -webkit-tap-highlight-color: transparent; }
.g-reac-op:hover, .g-reac-op:focus-visible { transform: scale(1.28) translateY(-3px); outline: none; }
.g-reac-op.activa { background: color-mix(in srgb, var(--acento) 16%, transparent); }
@media (max-width: 380px) { .g-reac-op { width: 40px; height: 40px; font-size: 24px; } }
@keyframes g-sube { from { opacity: 0; transform: translateY(6px) scale(.94); } to { opacity: 1; transform: none; } }
.g-quienes-res { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.g-quienes-res > span { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border-radius: 999px; font-size: 13px; background: var(--widget-2); }
.g-quien { gap: 12px; cursor: pointer; }
.g-quien .cuerpo { flex: 1; min-width: 0; }
.g-quien-e { font-size: 20px; }

/* ── Post completo y comentarios ───────────────────────────────────────── */
.cc-completo { cursor: default; }
.cc-titulo-post { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
@media (min-width: 768px) { .cc-titulo-post { font-size: 26px; } }
.cc-texto { font-size: 16px; line-height: 1.6; }
.cc-hilo { display: flex; flex-direction: column; gap: 18px; }
.cc-form-com { display: flex; align-items: flex-start; gap: 10px; }
.cc-form-com .btn { flex-shrink: 0; margin-top: 2px; }
.cc-form-com.respuesta { margin-top: 8px; }
.cc-campo-men { position: relative; flex: 1; min-width: 0; }
.cc-form-com textarea.entrada { min-height: 44px; height: 44px; line-height: 1.45; padding: 10px 14px; border-radius: 22px; font-size: 15px; resize: none; field-sizing: content; max-height: 200px; }
@media (max-width: 480px) { .cc-form-com { flex-wrap: wrap; } .cc-form-com > .cc-av { display: none; } .cc-form-com .btn { margin-left: auto; } .cc-campo-men { flex-basis: 100%; } }
.g-com-campo textarea.entrada { padding-right: 14px; }
.g-emoji-btn { position: absolute; right: 5px; top: 5px; width: 34px; height: 34px; border: 0; border-radius: 999px; padding: 0; background: none; cursor: pointer; color: var(--texto-3); display: none; place-items: center; }
.g-emoji-btn:hover { color: var(--texto); background: var(--widget-2); }
.g-emoji-btn svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .g-emoji-btn { display: grid; } .g-com-campo textarea.entrada { padding-right: 44px; } }

/* Sugerencias de @menciones */
.cc-sugerencias { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; padding: 6px; border-radius: 16px; background: var(--widget); box-shadow: 0 0 0 1px var(--linea), 0 20px 40px -16px var(--sombra); max-height: 280px; overflow-y: auto; }
.g-comp .cc-sugerencias, .cc-pub .cc-sugerencias { position: static; margin-top: 6px; }
.cc-sugerencias button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 10px; background: none; cursor: pointer; text-align: left; }
.cc-sugerencias button:hover, .cc-sugerencias button.activa { background: color-mix(in srgb, var(--acento) 10%, transparent); }
.cc-sugerencias button > span:last-child { display: flex; flex-direction: column; min-width: 0; font-size: 14px; }
.cc-sugerencias b { font-weight: 600; color: var(--texto); }
.cc-sugerencias button > span:last-child > span { font-size: 12.5px; color: var(--texto-3); }

.cc-lista-com { display: flex; flex-direction: column; gap: 16px; }
.cc-com { display: flex; gap: 10px; border-radius: 14px; transition: background .6s; }
.cc-com.g-resaltado { background: color-mix(in srgb, var(--acento) 10%, transparent); }
.cc-com-cuerpo { flex: 1; min-width: 0; }
.cc-burbuja { position: relative; padding: 9px 14px 11px; border-radius: 18px; background: var(--widget-2); }
.cc-burbuja:has(> .g-reac-res) { margin-bottom: 8px; }
.cc-com.destacado > .cc-com-cuerpo > .cc-burbuja { background: color-mix(in srgb, var(--acento) 9%, var(--widget-2)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--acento) 35%, transparent); }
.cc-dest-et { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--acento); }
.cc-dest-et svg { width: 13px; height: 13px; fill: currentColor; }
.cc-com-cab { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cc-com-cab .cc-autor { font-size: 14px; }
.cc-cuando { font-size: 12.5px; color: var(--texto-3); }
.cc-com-texto { margin-top: 2px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.cc-com-texto p { margin: 0; }
.cc-com-texto p + p { margin-top: 8px; }
.cc-com-acc { display: flex; align-items: center; gap: 2px; margin-top: 2px; padding-left: 6px; flex-wrap: wrap; }
.cc-acc { height: 30px; padding: 0 8px; border: 0; border-radius: 999px; background: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--texto-2); display: inline-flex; align-items: center; gap: 4px; }
.cc .cc-acc { font-size: 13px; font-weight: 600; }
.cc-acc:hover { background: var(--widget-2); color: var(--texto); }
.cc-acc svg { width: 13px; height: 13px; }
.cc-acc.activo { color: var(--acento); }
.cc-acc.g-like-chico { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; margin-left: -6px; }
.cc-acc.g-like-chico > svg { display: none; }
.cc-acc.g-like-chico .g-reac-cara { font-size: 14px; }
.cc-acc.g-like-chico.activo { color: var(--acento); }
.cc-acc.g-like-chico.con-reac { color: var(--texto); }
.g-reac-res.chico { position: absolute; right: -4px; bottom: -11px; gap: 3px; padding: 1px 7px 1px 3px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--texto-2); background: var(--widget); box-shadow: 0 0 0 1px var(--linea), 0 4px 10px -4px var(--sombra); }
.g-reac-res.chico .emoji { width: 17px; height: 17px; font-size: 11px; box-shadow: none; background: none; }
.g-reac-res.chico .emoji + .emoji { margin-left: -3px; }
.cc-respuestas { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; padding-left: 4px; border-left: 2px solid var(--linea); }
.cc-respuestas .cc-com { padding-left: 10px; }

/* ── Visor de fotos a pantalla completa ────────────────────────────────── */
body.g-con-visor { overflow: hidden; }
.g-visor { position: fixed; inset: 0; z-index: 100; background: #000; animation: fundido .18s ease both; }
.g-visor-pista { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; outline: none; }
.g-visor-pista::-webkit-scrollbar { display: none; }
.g-visor-foto { position: relative; flex: 0 0 100%; height: 100%; margin: 0; display: grid; place-items: center; padding: calc(60px + env(safe-area-inset-top)) 0 calc(56px + env(safe-area-inset-bottom)); scroll-snap-align: center; scroll-snap-stop: always; }
.g-visor-foto img { max-width: 100%; max-height: 100%; object-fit: contain; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.g-visor-x, .g-visor-flecha { position: absolute; display: grid; place-items: center; border: 0; border-radius: 999px; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .2s, opacity .2s; }
.g-visor-x:hover, .g-visor-flecha:hover { background: rgba(255, 255, 255, .28); }
.g-visor-x { top: calc(10px + env(safe-area-inset-top)); right: 10px; width: 44px; height: 44px; }
.g-visor-flecha { top: 50%; width: 48px; height: 48px; margin-top: -24px; }
.g-visor-flecha.ant { left: 14px; } .g-visor-flecha.sig { right: 14px; }
.g-visor-x svg, .g-visor-flecha svg { width: 22px; height: 22px; }
.g-visor.primero .ant, .g-visor.ultimo .sig { opacity: 0; pointer-events: none; }
@media (pointer: coarse) { .g-visor-flecha { display: none; } }
.g-visor-n { position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #fff; background: rgba(255, 255, 255, .16); font-variant-numeric: tabular-nums; }

/* ── El compositor (en una hoja) ───────────────────────────────────────── */
.g-comp { display: flex; flex-direction: column; gap: 12px; }
.g-comp-quien { display: flex; align-items: center; gap: 10px; }
.g-comp-quien > div { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.g-comp-quien b { font-size: 15px; font-weight: 600; }
.g-comp-cat { position: relative; display: inline-flex; align-items: center; height: 28px; padding: 0 28px 0 11px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--acento); background: color-mix(in srgb, var(--acento) 12%, transparent); cursor: pointer; }
.g-comp-cat:focus-within { box-shadow: 0 0 0 2px var(--acento); }
.g-comp-cat select { -webkit-appearance: none; appearance: none; border: 0; padding: 0; background: none; font: inherit; color: inherit; cursor: pointer; outline: none; }
.g-comp-cat select option { color: var(--texto); background: var(--widget); }
.g-comp-cat svg { position: absolute; right: 8px; width: 14px; height: 14px; pointer-events: none; }
.g-comp-tit { width: 100%; border: 0; padding: 2px 0; background: none; outline: none; font: inherit; font-size: 18px; font-weight: 600; color: var(--texto); }
.g-comp-tit::placeholder { font-weight: 500; color: var(--texto-3); }
.g-comp-texto { display: block; width: 100%; min-height: 104px; max-height: 360px; padding: 0; border: 0; background: none; outline: none; resize: none; font: inherit; font-size: 16px; line-height: 1.5; color: var(--texto); }
.g-comp-texto::placeholder { color: var(--texto-3); }
.g-comp .cc-campo-men { position: relative; }
.g-comp-vista:empty, .g-comp-vista[hidden], .g-comp-fotos[hidden], .g-comp-video[hidden], .g-comp-enlace[hidden], .g-comp-encuesta[hidden], .g-comp-op[hidden], .cc-vid-enlace[hidden] { display: none; }
.g-comp-vista.cargando .g-vista { opacity: .7; }
.g-comp-video { display: flex; flex-direction: column; gap: 8px; }
.g-comp-enlace { display: flex; gap: 8px; align-items: center; }
.g-comp-enlace .entrada { flex: 1; min-width: 0; }
.g-comp-op { padding: 14px; border-radius: 16px; background: var(--widget-2); }
.g-comp-sub { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.g-comp-barra { display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 14px; background: var(--widget-2); }
.g-herr { position: relative; flex: 1 1 0; height: 42px; display: grid; place-items: center; border: 0; border-radius: 10px; background: none; cursor: pointer; color: var(--acento); -webkit-tap-highlight-color: transparent; }
.g-herr:hover, .g-herr:focus-within { background: var(--widget); }
.g-herr input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.g-herr svg { width: 21px; height: 21px; }
.g-comp-liz { gap: 10px; }
.cc-si-prog { display: none; }
form:has(input[name="cuando"][value="programar"]:checked) .cc-si-ahora { display: none; }
form:has(input[name="cuando"][value="programar"]:checked) .cc-si-prog { display: inline-flex; align-items: center; gap: 6px; }
.cc-cuando { display: flex; flex-direction: column; gap: 10px; }
.cc-cuando-fecha { display: none; }
form:has(input[name="cuando"][value="programar"]:checked) .cc-cuando-fecha { display: flex; }
.cc-seg-radio label { position: relative; flex: 1; cursor: pointer; }
.cc-seg-radio input { position: absolute; opacity: 0; pointer-events: none; }
.cc-seg-radio span { display: flex; align-items: center; justify-content: center; gap: 6px; height: 100%; min-height: 32px; padding: 0 10px; border-radius: 9px; font-size: 13.5px; font-weight: 500; }
.cc-seg-radio span svg { width: 14px; height: 14px; }
.cc-seg-radio input:checked + span { background: var(--widget); box-shadow: 0 1px 3px rgba(0,0,0,.12); font-weight: 600; }
.cc-check, .cc-radio { display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; }
.cc-check input, .cc-radio input { width: 20px; height: 20px; accent-color: var(--acento); flex-shrink: 0; }
.cc-radio { padding: 12px 14px; border-radius: 14px; background: var(--widget-2); }
.cc-radio:has(input:checked) { box-shadow: inset 0 0 0 2px var(--acento); }
.cc-hoja-nota { margin: 0; font-size: 14px; color: var(--texto-2); }

/* Video que se sube desde el celular (estados: preparando · subiendo · sin red · procesando · listo · error con Reintentar) */
.cc-vid-elegir { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; border-radius: 14px; cursor: pointer; color: var(--texto); background: var(--widget-2); }
.cc-vid-elegir:hover, .cc-vid-elegir:focus-within { box-shadow: inset 0 0 0 1.5px var(--acento); }
.cc-vid-elegir input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.cc-vid-caja { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; border-radius: 14px; background: var(--widget-2); }
.cc-vid-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cc-vid-nombre { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-vid-estado { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.cc-vid-estado.mal { color: var(--urgente); }
.cc-vid-barra { height: 6px; margin: 4px 0 2px; border-radius: 99px; overflow: hidden; background: var(--linea); }
.cc-vid-barra span { display: block; height: 100%; border-radius: inherit; background: var(--acento); transition: width .3s; }
.cc-vid-botones { display: flex; gap: 6px; flex-shrink: 0; }
@media (max-width: 560px) { .cc-vid-caja { flex-wrap: wrap; } .cc-vid-botones { width: 100%; } .cc-vid-botones > * { flex: 1; } }

/* Fotos del compositor (subiendo · lista · error con Reintentar) */
.g-fotos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.g-foto, .g-foto-mas { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; }
.g-foto { background: var(--widget-2); }
.g-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .2s; }
.g-foto.cola img, .g-foto.espera img, .g-foto.subiendo img { opacity: .55; }
.g-foto.error img { opacity: .35; filter: grayscale(1); }
.g-foto .g-gif-et { left: 6px; top: 6px; bottom: auto; font-size: 10px; }
.g-foto-carga { position: absolute; left: 8px; right: 8px; bottom: 8px; }
.g-foto-barra { display: block; height: 5px; border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, .8); }
.g-foto-barra i { display: block; height: 100%; border-radius: inherit; background: var(--acento); transition: width .2s; }
.g-foto.cola .g-foto-barra i { width: 0 !important; }
.g-foto-x { position: absolute; top: 5px; right: 5px; width: 26px; height: 26px; border: 0; border-radius: 999px; display: grid; place-items: center; padding: 0; cursor: pointer; color: #fff; background: rgba(0, 0, 0, .6); }
.g-foto-x svg { width: 13px; height: 13px; }
.g-foto-reint { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--urgente); background: color-mix(in srgb, var(--widget) 60%, transparent); }
.g-foto-reint svg { width: 18px; height: 18px; }
.g-foto-mas { display: grid; place-items: center; cursor: pointer; color: var(--acento); background: var(--widget-2); }
.g-foto-mas svg { width: 22px; height: 22px; }
.g-foto-mas input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.g-fotos-error { margin: 6px 0 0; font-size: 13px; color: var(--urgente); }
/* Imágenes del panel (publicar como admin) */
.cc-adj { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-adj-it, .cc-adj-mas { position: relative; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; flex-shrink: 0; }
.cc-adj-it { background: var(--widget-2); }
.cc-adj-it img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-adj-carga { display: grid; place-items: center; }
.cc-adj-quitar { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border: 0; border-radius: 999px; display: grid; place-items: center; padding: 0; cursor: pointer; color: #fff; background: rgba(0,0,0,.6); }
.cc-adj-quitar svg { width: 13px; height: 13px; }
.cc-adj-mas { display: grid; place-items: center; cursor: pointer; color: var(--acento); background: var(--widget-2); }
.cc-adj-mas svg { width: 22px; height: 22px; }
.cc-adj-mas input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* Emojis (PC) */
.g-emojis { position: fixed; z-index: 95; width: 332px; max-width: calc(100vw - 16px); height: 320px; display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: var(--widget); box-shadow: 0 0 0 1px var(--linea), 0 26px 50px -20px var(--sombra); animation: g-sube .16s var(--curva) both; }
.g-emojis-tabs { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--linea); }
.g-emojis-tabs button { flex: 1; height: 34px; border: 0; border-radius: 8px; background: none; cursor: pointer; font-size: 18px; }
.g-emojis-tabs button:hover { background: var(--widget-2); }
.g-emojis-cuerpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 10px; }
.g-emojis-sec h4 { position: sticky; top: 0; z-index: 1; margin: 0; padding: 9px 4px 6px; font-size: 12px; font-weight: 600; color: var(--texto-3); background: var(--widget); }
.g-emojis-rej { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.g-emojis.en-linea { position: static; width: 100%; max-width: none; height: 248px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--linea); animation: none; }
.g-emo { height: 36px; border: 0; border-radius: 8px; background: none; cursor: pointer; display: grid; place-items: center; font-size: 22px; transition: transform .12s var(--curva-muelle), background .12s; }
.g-emo:hover, .g-emo:focus-visible { background: var(--widget-2); transform: scale(1.15); outline: none; }

/* ── Retos con racha ───────────────────────────────────────────────────── */
.cc-racha { display: flex; flex-direction: column; gap: 14px; }
.cc-racha-cab { display: flex; align-items: center; gap: 12px; }
.cc-racha-cab b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.cc-racha-cab span { font-size: 13px; color: var(--texto-2); }
.cc-racha-dias { display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); gap: 6px 4px; justify-items: center; }
.cc-rd { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--texto-2); background: var(--widget-2); font-variant-numeric: tabular-nums; }
.cc-rd svg { width: 15px; height: 15px; }
.cc-rd.hecho { color: #fff; background: linear-gradient(160deg, #FFB340, #FF7A00); }
.cc-rd.hoy { background: var(--widget); color: #FF7A00; box-shadow: inset 0 0 0 2px #FF9500; }
.cc-rd.perdido { background: transparent; color: var(--texto-3); box-shadow: inset 0 0 0 1px var(--linea); }
@media (max-width: 420px) { .cc-rd { width: 30px; height: 30px; } }
.cc-racha-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cc-racha-pie > span { font-size: 13.5px; color: var(--texto-2); min-width: 0; }
.cc-racha-acc { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cc-racha-acc .enlace { font-size: 14px; font-weight: 600; }
.cc-racha.compacta { gap: 12px; padding: 16px; }
.cc-racha.compacta .cc-racha-cab b { font-size: 18px; }
.cc-racha.compacta .cc-rd { width: 28px; height: 28px; font-size: 11.5px; }
.cc-racha.compacta .cc-racha-pie, .cc-racha.compacta .cc-racha-acc { flex-direction: column; align-items: stretch; gap: 10px; text-align: center; }
.cc-racha.compacta .cc-racha-btn { width: 100%; }
.g-resp { display: flex; flex-direction: column; gap: 14px; }
.g-resp-cab { display: flex; align-items: center; gap: 12px; }
.g-resp-cab > div { display: flex; flex-direction: column; min-width: 0; }
.g-resp-cab span:not(.cc-racha-icono) { font-size: 13px; color: var(--texto-2); }
.g-resp-tarea { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--widget-2); font-size: 14.5px; line-height: 1.5; }
.g-resp-lista { display: flex; flex-direction: column; }
.g-resp-fila { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linea); }
.g-resp-fila:first-child { border-top: 0; padding-top: 2px; }
.g-resp-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.g-resp-txt .cc-meta-1 { align-items: baseline; gap: 8px; flex-wrap: wrap; }
.g-resp-txt .enlace { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; }
.g-resp-vacio { margin: 0; font-size: 14px; color: var(--texto-2); }
.g-resp-coms { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; padding-left: 12px; border-left: 2px solid var(--linea); }
.g-resp-com { display: flex; gap: 8px; min-width: 0; }
.g-resp-com > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.g-resp-abrir, .g-resp-borrar { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--texto-2); cursor: pointer; }
.g-resp-abrir svg { width: 15px; height: 15px; }
.g-resp-borrar { font-weight: 500; font-size: 12px; }
.g-resp-form { display: flex; gap: 8px; align-items: flex-end; margin-top: 6px; }
.g-resp-form textarea { flex: 1; min-height: 40px; resize: vertical; font-size: 15px; }

/* ── Barra lateral ─────────────────────────────────────────────────────── */
.g-lat-yo { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.g-lat-yo-cab { display: flex; align-items: center; gap: 12px; color: var(--texto); text-decoration: none; }
.g-lat-yo-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.g-lat-yo-t b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-lat-yo-t > span { font-size: 13px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-lat-yo-cab > svg { width: 18px; height: 18px; color: var(--texto-3); flex-shrink: 0; }
.g-lat-nivel { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; background: var(--widget-2); color: var(--texto); text-decoration: none; }
.g-lat-nivel-t { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.g-lat-nivel-t b { font-weight: 600; }
.g-lat-nivel-t span { color: var(--texto-2); }
.g-lat-falta { font-size: 12.5px; color: var(--texto-2); }
.cc-barra-nivel { display: block; height: 6px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--texto) 10%, transparent); }
.cc-barra-nivel i { display: block; height: 100%; border-radius: inherit; background: var(--acento); transition: width .6s var(--curva); }
.cc-barra-nivel.grande { height: 8px; }
.cc-lat-com { display: flex; flex-direction: column; gap: 12px; }
.cc-lat-com h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.cc-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); padding: 10px 0; border-block: 1px solid var(--linea); text-align: center; }
.cc-numeros > div { display: flex; flex-direction: column; }
.cc-numeros > div + div { border-left: 1px solid var(--linea); }
.cc-numeros b { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.cc-numeros span { font-size: 12px; color: var(--texto-3); }
.g-lat-caras { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.cc-caras-fila { display: inline-flex; }
.g-lat-caras .cc-av { box-shadow: 0 0 0 2px var(--widget); }
.g-lat-caras .cc-av + .cc-av { margin-left: -9px; }
.g-lat-about { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; }
.g-lat-about svg { width: 14px; height: 14px; }
.cc-lat-evento { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; text-align: left; cursor: pointer; padding: 14px; }
.cc-lat-ev-txt { display: flex; flex-direction: column; min-width: 0; gap: 1px; font-size: 13px; color: var(--texto-2); }
.cc-lat-ev-txt b { font-size: 14.5px; font-weight: 600; color: var(--texto); line-height: 1.3; }
.cc-cal-hoja { flex-shrink: 0; width: 50px; height: 54px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--widget); color: var(--texto); line-height: 1; box-shadow: 0 0 0 1px var(--linea); overflow: hidden; }
.cc-cal-hoja span { order: -1; width: 100%; padding: 3px 0; margin-bottom: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: center; color: #fff; background: var(--urgente); }
.cc-cal-hoja b { font-size: 21px; font-weight: 600; }
.cc-cal-hoja.grande { width: 64px; height: 70px; } .cc-cal-hoja.grande b { font-size: 27px; }
.cc-lat-tit { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 15px; }
.cc-lat-tit b { font-weight: 600; }
.cc-lat-tit a { font-size: 14px; font-weight: 500; text-decoration: none; }
.cc-lider-fila { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 6px; border: 0; border-radius: 12px; background: none; cursor: pointer; text-align: left; font-size: 14.5px; color: var(--texto); }
.cc-lider-fila:hover { background: var(--widget-2); }
.cc-lider-fila.yo { background: color-mix(in srgb, var(--acento) 10%, transparent); }
.cc-pos { flex-shrink: 0; width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.cc-pos.p1 { color: #fff; background: linear-gradient(160deg, #FFD60A, #FF9F0A); }
.cc-pos.p2 { color: #fff; background: linear-gradient(160deg, #D1D1D6, #8E8E93); }
.cc-pos.p3 { color: #fff; background: linear-gradient(160deg, #E8A87C, #B5651D); }
.cc-lider-n { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-lider-s { font-size: 12.5px; font-weight: 400; color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; }
.cc-lider-p { font-weight: 600; font-size: 14px; color: var(--ok); }

/* ── Ranking ───────────────────────────────────────────────────────────── */
.cc-mi-nivel { display: flex; align-items: center; gap: 16px; }
.cc-mi-nivel-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cc-mi-nivel-t h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.cc-mi-nivel-t > span.num { font-size: 14px; color: var(--texto-2); }
@media (max-width: 420px) { .cc-mi-nivel { flex-direction: column; text-align: center; } .cc-mi-nivel-t { align-items: stretch; width: 100%; } }
.cc-lb-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 6px 2px 0; }
.cc-lb-cab .seg { min-width: 200px; }
.cc-podio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; }
.cc-podio.n1 { grid-template-columns: minmax(0, 1fr); max-width: 200px; margin-inline: auto; width: 100%; }
.cc-podio.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cc-podio-it { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 16px 8px 14px; border: 0; border-radius: 20px; background: var(--widget); box-shadow: 0 0 0 1px var(--linea), 0 10px 30px -22px var(--sombra); cursor: pointer; text-align: center; transition: transform .15s var(--curva); }
.cc-podio-it:hover { transform: translateY(-2px); }
.cc-podio-it.p1 { padding-top: 24px; padding-bottom: 20px; }
.cc-podio-it b { max-width: 100%; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-podio-it > span.num { font-size: 15px; font-weight: 700; color: var(--ok); }
.cc-podio-pos { margin-top: -18px; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; box-shadow: 0 0 0 3px var(--widget); background: var(--texto-3); }
.cc-podio-it.p1 .cc-podio-pos { background: linear-gradient(160deg, #FFD60A, #FF9F0A); }
.cc-podio-it.p2 .cc-podio-pos { background: linear-gradient(160deg, #D1D1D6, #8E8E93); }
.cc-podio-it.p3 .cc-podio-pos { background: linear-gradient(160deg, #E8A87C, #B5651D); }
.cc-podio-it.p1 .cc-av { --t: 64px; }
.cc-tabla { display: flex; flex-direction: column; gap: 2px; padding: 8px; }
.cc-lb-dos { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .cc-lb-dos { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: start; } }
.cc-reglas-pts h3, .cc-niveles h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.cc-regla-pt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--linea); font-size: 14.5px; }
.cc-regla-pt:first-of-type { border-top: 0; }
.cc-regla-pt b { color: var(--ok); font-weight: 600; }
.cc-nivel { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--linea); }
.cc-niveles h3 + .cc-nivel { border-top: 0; }
.cc-nivel-n { flex-shrink: 0; width: 30px; height: 30px; border-radius: 28%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--texto-2); background: var(--widget-2); }
.cc-nivel.actual .cc-nivel-n { color: #fff; background: var(--acento); }
.cc-nivel.bloq { opacity: .55; }
.cc-nivel-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cc-nivel-t b { font-size: 14.5px; font-weight: 600; }
.cc-nivel-t span { font-size: 12.5px; color: var(--texto-3); }
.cc-nivel-pct { font-size: 13px; color: var(--texto-2); }

/* ── Calendario ────────────────────────────────────────────────────────── */
.cc-cal-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 6px 2px 0; }
.cc-zona { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; background: var(--widget); box-shadow: 0 0 0 1px var(--linea); color: var(--texto-2); }
.cc-zona svg { width: 15px; height: 15px; }
.cc-zona select { border: 0; background: none; font: inherit; font-size: 14px; font-weight: 500; color: var(--texto); outline: none; cursor: pointer; }
.cc-ev-fila { display: flex; align-items: center; gap: 14px; width: 100%; border: 0; text-align: left; cursor: pointer; padding: 14px; }
.cc-ev-fila > svg { width: 18px; height: 18px; color: var(--texto-3); flex-shrink: 0; }
.cc-ev-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cc-ev-txt b { font-size: 15.5px; font-weight: 600; color: var(--texto); }
.cc-ev-txt > span { font-size: 13.5px; color: var(--texto-2); }
.cc-ev-pasados .cc-ev-fila { opacity: .62; }
.cc-ev-det { display: flex; align-items: center; gap: 14px; }
.cc-ev-titulo { margin: 0 0 4px; font-size: 19px; font-weight: 700; letter-spacing: -.015em; }
.cc-otras-zonas { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-otras-zonas span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; font-size: 13px; background: var(--widget-2); }
.g-sec-tit { margin: 8px 2px -2px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }

/* ── Miembros ──────────────────────────────────────────────────────────── */
.cc-miembros-barra { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
@media (min-width: 768px) { .cc-miembros-barra { flex-direction: row; align-items: center; } .cc-miembros-barra .cc-buscador { max-width: 360px; } }
.cc-miembros { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .cc-miembros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cc-miembros { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cc-miembro { display: flex; flex-direction: column; gap: 10px; }
.cc-miembro-top { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; min-width: 0; }
.cc-miembro-id { display: flex; flex-direction: column; min-width: 0; }
.cc-miembro-id b { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-miembro-id > span { font-size: 13.5px; color: var(--texto-3); }
.cc-miembro p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--texto-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cc-miembro-datos { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--texto-3); }

/* Insignias de los cursos */
.g-cursos { display: flex; flex-wrap: wrap; gap: 6px; }
.g-curso { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 8px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--acento); background: color-mix(in srgb, var(--acento) 11%, transparent); }
.g-curso svg { width: 13px; height: 13px; }
.g-cursos.chica .g-curso { height: 22px; font-size: 11.5px; padding: 0 8px 0 6px; }

/* ── Perfil de cada miembro ────────────────────────────────────────────── */
.g-perfil { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding-top: 24px; padding-bottom: 20px; }
.g-perfil-cab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.g-perfil-cab .btn-sec { position: absolute; right: 0; top: -8px; }
@media (max-width: 480px) { .g-perfil-cab .btn-sec { position: static; } }
.g-perfil-nombre { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.g-perfil-arroba { margin-top: -6px; font-size: 15px; color: var(--texto-3); }
.g-perfil-bio { margin: 0; max-width: 34rem; font-size: 15px; line-height: 1.5; color: var(--texto-2); overflow-wrap: anywhere; }
.g-perfil .g-cursos, .g-perfil .g-redes { justify-content: center; }
.g-perfil-nivel { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 360px; margin-top: 4px; padding: 12px 14px; border-radius: 16px; background: var(--widget-2); text-align: left; }
.g-perfil-nivel > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.g-perfil-nivel b { font-size: 15px; font-weight: 600; }
.g-perfil-nivel > div > span.num { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--texto-2); }
.g-perfil-nivel > div > span.num svg { width: 13px; height: 13px; color: #FF7A00; }
.g-perfil-nivel-n { flex-shrink: 0; width: 40px; height: 40px; border-radius: 28%; display: grid; place-items: center; font-size: 17px; font-weight: 700; color: #fff; background: var(--acento); }
.g-perfil-num { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--linea); }
.g-perfil-num > div + div { border-left: 1px solid var(--linea); }
.g-perfil-num b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.g-perfil-num span { font-size: 12px; color: var(--texto-3); }
.cc-perfil-datos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: 13px; color: var(--texto-2); }
.cc-perfil-datos svg { width: 14px; height: 14px; vertical-align: -2px; }
@media (min-width: 768px) { .g-perfil-nombre { font-size: 28px; } }
/* Editar perfil */
.cc-perfil-foto { display: flex; flex-direction: column; align-items: center; gap: 10px; }
[data-cc-foto].cargando { opacity: .5; }
.g-form-perfil .g-p-redes { gap: 12px; }
.g-p-redes label { display: inline-flex; align-items: center; gap: 6px; }
.g-p-redes label svg { width: 15px; height: 15px; }
.g-arroba { position: relative; }
.g-arroba > span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-weight: 600; color: var(--texto-3); pointer-events: none; }
.g-arroba .entrada { padding-left: 30px; }
.entrada[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--urgente); }
.g-red-error { margin: 4px 0 0; font-size: 13px; color: var(--urgente); }
.g-interruptor-fila { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: 14px; background: var(--widget-2); cursor: pointer; }
.g-interruptor-fila > span { display: flex; flex-direction: column; min-width: 0; }
.g-interruptor-fila b { font-size: 15px; font-weight: 600; }
.g-interruptor-fila > span > span { font-size: 13px; color: var(--texto-2); }
.g-interruptor-fila input[type="checkbox"] { -webkit-appearance: none; appearance: none; position: relative; flex-shrink: 0; width: 51px; height: 31px; border-radius: 999px; background: color-mix(in srgb, var(--texto) 16%, transparent); cursor: pointer; transition: background .2s; }
.g-interruptor-fila input[type="checkbox"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 999px; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.16); transition: transform .25s var(--curva-muelle); }
.g-interruptor-fila input[type="checkbox"]:checked { background: var(--ok); }
.g-interruptor-fila input[type="checkbox"]:checked::after { transform: translateX(20px); }

/* ── About ─────────────────────────────────────────────────────────────── */
.cc-about { display: flex; flex-direction: column; gap: 12px; }
.cc-about h1 { margin: 2px 0 0; font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.cc-about h2 { margin: 14px 0 0; font-size: 17px; font-weight: 600; }
@media (min-width: 768px) { .cc-about h1 { font-size: 34px; } }
.cc-about-lead { margin: 0; font-size: 16px; line-height: 1.5; color: var(--texto-2); }
.cc-about-datos { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--texto-2); }
.cc-about-datos > span { display: inline-flex; align-items: center; gap: 6px; }
.cc-about-datos svg { width: 15px; height: 15px; }
.cc-about-admin { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 0; border-radius: 16px; background: var(--widget-2); cursor: pointer; text-align: left; }
.cc-about-admin > span:not(.cc-av) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cc-about-admin b { font-size: 15.5px; font-weight: 600; }
.cc-about-admin > span:not(.cc-av) > span { font-size: 13.5px; color: var(--texto-2); }
.cc-about-admin > svg { width: 18px; height: 18px; color: var(--texto-3); }
.cc-about-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-reglas { margin: 0; padding: 0; list-style: none; counter-reset: regla; display: flex; flex-direction: column; }
.cc-reglas li { counter-increment: regla; display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--linea); font-size: 15px; line-height: 1.45; }
.cc-reglas li:first-child { border-top: 0; }
.cc-reglas li::before { content: counter(regla); flex-shrink: 0; width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: var(--acento); background: color-mix(in srgb, var(--acento) 12%, transparent); }
.cc-chip-et { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--texto-2); background: var(--widget); box-shadow: 0 0 0 1px var(--linea); }
.cc-chip-et .emoji { font-size: 14px; }

/* ── Portada (quien no tiene acceso) ───────────────────────────────────── */
.cc-portada { display: flex; flex-direction: column; gap: 14px; max-width: 560px; padding-top: 28px; padding-bottom: 64px; }
.cc-portada-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 8px 4px 6px; }
.cc-portada-hero .cc-chip-et { align-self: center; }
.cc-portada-hero h1 { margin: 4px 0 0; font-size: 34px; font-weight: 700; letter-spacing: -.035em; line-height: 1.05; }
.cc-portada-hero p { margin: 0; max-width: 28rem; font-size: 16px; line-height: 1.45; color: var(--texto-2); }
@media (min-width: 768px) { .cc-portada { padding-top: 56px; } .cc-portada-hero h1 { font-size: 52px; } .cc-portada-hero p { font-size: 18px; } }
.cc-portada-num { display: flex; justify-content: center; gap: 0; margin-top: 8px; }
.cc-portada-num > div { display: flex; flex-direction: column; align-items: center; padding: 0 18px; }
.cc-portada-num > div + div { border-left: 1px solid var(--linea); }
.cc-portada-num b { font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
.cc-portada-num span { font-size: 12.5px; color: var(--texto-3); }
.cc-portada-num.cargando { opacity: .4; }
.cc-portada-lista .fila { gap: 14px; }
.cc-emo-ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: 28%; display: grid; place-items: center; font-size: 20px; background: var(--widget-2); }
.cc-portada-aviso { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 14px; }
.cc-portada-aviso > div { display: flex; flex-direction: column; }
.cc-portada-aviso b { font-size: 16px; font-weight: 600; }
.cc-portada-aviso > div > span { font-size: 14px; color: var(--texto-2); }
.cc-portada-aviso .btn, .cc-portada-aviso .btn-sec { grid-column: 1 / -1; }
.cc-portada-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.cc-portada-pag .cc-cabeza { box-shadow: none; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ── Desplegables de la cabecera (avisos y cuenta) ─────────────────────── */
.cc-pop { position: fixed; z-index: 70; width: 380px; max-height: min(560px, calc(100vh - 140px)); display: flex; flex-direction: column; border-radius: 20px; background: var(--widget); color: var(--texto); box-shadow: 0 0 0 1px var(--linea), 0 30px 60px -24px var(--sombra); animation: g-sube .18s var(--curva) both; overflow: hidden; }
.cc-pop-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 8px; font-size: 17px; }
.cc-pop-cab b { font-weight: 700; letter-spacing: -.01em; }
.cc-pop-cuerpo { overflow-y: auto; padding: 0 8px 8px; }
.cc-pop-acc { display: flex; justify-content: flex-end; margin: -6px 0 8px; }
.cc-notis { display: flex; flex-direction: column; gap: 2px; }
.cc-notis-pag { padding: 6px; }
.cc-noti { position: relative; display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 14px; background: none; cursor: pointer; text-align: left; color: var(--texto-2); font-size: 14px; line-height: 1.4; }
.cc-noti:hover { background: var(--widget-2); }
.cc-noti.nueva { background: color-mix(in srgb, var(--acento) 7%, transparent); }
.cc-noti b { color: var(--texto); font-weight: 600; }
.cc-noti-av { position: relative; flex-shrink: 0; }
.cc-noti-marca { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; color: #fff; background: var(--acento); box-shadow: 0 0 0 2px var(--widget); }
.cc-noti-marca svg { width: 11px; height: 11px; }
.cc-noti-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.cc-punto-nuevo { flex-shrink: 0; width: 9px; height: 9px; margin-top: 6px; border-radius: 999px; background: var(--acento); }
.cc-notis-todo { display: block; padding: 10px; text-align: center; font-size: 14px; font-weight: 600; text-decoration: none; }
.cc-menu-yo { display: flex; flex-direction: column; gap: 2px; padding-bottom: 4px; }
.cc-menu-it { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 10px; border: 0; border-radius: 12px; background: none; cursor: pointer; text-align: left; font-size: 15px; font-weight: 500; color: var(--texto); text-decoration: none; }
.cc-menu-it:hover { background: var(--widget-2); }
.cc-menu-it svg { width: 19px; height: 19px; color: var(--acento); }

/* ── Panel: moderación (/admin/grupo) ──────────────────────────────────── */
.cc-adm { display: flex; flex-direction: column; gap: var(--hueco, 12px); }
.cc-adm-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: 0 -2px 4px; }
.cc-adm-tabs::-webkit-scrollbar { display: none; }
.cc-adm-tabs a { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--texto); background: var(--widget); box-shadow: 0 0 0 1px var(--linea); text-decoration: none; }
.cc-adm-tabs a[aria-current="page"] { color: #fff; background: var(--acento); box-shadow: none; }
.cc-adm-tabs a > span { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; background: var(--urgente); }
.cc-adm-dos { display: grid; gap: var(--hueco, 12px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .cc-adm-dos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.cc-adm-h { margin: 0 0 8px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.cc-adm .fila > .cuerpo { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.cc-adm .fila > .cuerpo .s { font-size: 12.5px; color: var(--texto-3); }
.cc-adm-fila { flex-wrap: wrap; gap: 10px 12px; }
.cc-adm-fila.bloqueado { opacity: .75; }
.cc-adm-btns { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.cc-adm-btns .redondo { width: 34px; height: 34px; }
.cc-adm-btns .redondo.activo { color: #fff; background: var(--acento); }
.cc-adm-btns .redondo[disabled] { opacity: .35; pointer-events: none; }
.cc-adm-av { flex-shrink: 0; }
.cc-borrar { color: var(--urgente) !important; }
.cc-prog-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.cc-prog-n { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--acento); }
.cc-prog-hoja { flex-shrink: 0; width: 44px; height: 46px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; background: var(--widget-2); }
.cc-prog-hoja b { font-size: 17px; font-weight: 700; }
.cc-prog-hoja span { margin-top: 3px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; color: var(--urgente); }
.cc-prog-pie { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: var(--texto-3); }
.cc-prog-pie svg { width: 14px; height: 14px; }
.cc-pts-in { width: 76px; min-height: 38px; text-align: center; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.cc-nivel-cfg { align-items: center; gap: 12px; }
.cc-nivel-cfg .cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cc-nivel-cfg .cuerpo input { min-height: 38px; font-size: 14px; width: 100%; }
.cc-clase-pts { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--texto-3); }
.cc-clase-pts input { width: 84px; min-height: 38px; font-size: 14px; text-align: center; }
.cc-cat-fila .derecha .redondo { width: 34px; height: 34px; }
.cc-apps { display: grid; gap: var(--hueco, 12px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .cc-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cc-app { display: flex; flex-direction: column; gap: 10px; }
.cc-app-cab { display: flex; align-items: center; gap: 10px; }
.cc-app-cab > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cc-app-cab b { font-size: 15px; font-weight: 600; }
.cc-app-cab > div > span { font-size: 12.5px; color: var(--texto-3); }
.cc-app p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--texto-2); }
.cc-app-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.cc-barras { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding-top: 18px; }
.cc-barra-col { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.cc-barra { width: 100%; max-width: 22px; border-radius: 6px 6px 3px 3px; background: var(--acento); }
.cc-barra-n { font-size: 11px; font-weight: 600; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.cc-barra-et { font-size: 11px; color: var(--texto-3); }
.cc-pub textarea.entrada { min-height: 110px; }

/* ── Oscuro (el mismo modo del aula: F.estado.temaAula) ────────────────── */
:root[data-theme="dark"] .cc-buscador input[type="search"] { background: color-mix(in srgb, var(--texto) 10%, transparent); }
:root[data-theme="dark"] .cc-seg-radio input:checked + span { background: var(--widget-2); }
:root[data-theme="dark"] .g-foto-barra { background: rgba(0, 0, 0, .45); }

/* Menos movimiento: sin saltitos ni brillos */
@media (prefers-reduced-motion: reduce) {
  .g-like.activo svg, .g-reac-cara, .g-reac-barra, .g-emojis, .g-visor, .cc-pop, .cc-nuevas, .g-esq i { animation: none; }
  .g-reac-op, .g-emo, .g-img img, .g-bienvenida, .cc-chip, .g-acc, .cc-podio-it, .cc-barra-nivel i, .cc-com { transition: none; }
  .g-reac-op:hover, .g-reac-op:focus-visible, .g-emo:hover, .cc-podio-it:hover { transform: none; }
  .cc-giro { animation-duration: 2.4s; }
}

/* ── Lo usan el aula y el panel (tareas con imágenes): viven aquí desde el 17-oct ── */
.cc-imgs { display: grid; gap: 6px; grid-template-columns: 1fr 1fr; border-radius: 16px; overflow: hidden; }
.cc-imgs.n1 { grid-template-columns: 1fr; }
.cc-imgs.n3 .cc-img:first-child { grid-row: span 2; aspect-ratio: auto; }
.cc-img { display: block; padding: 0; border: 0; background: var(--widget-2); cursor: zoom-in; aspect-ratio: 1; overflow: hidden; }
.cc-imgs.n1 .cc-img { aspect-ratio: auto; max-height: 520px; }
.cc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-imgs.n1 .cc-img img { max-height: 520px; object-fit: contain; }
.au-tarea-hist { display: flex; flex-direction: column; gap: 10px; }
.au-tarea-v { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 16px; background: var(--widget); box-shadow: inset 0 0 0 1px var(--linea); }
.au-tarea-v-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--texto-3); }
.au-tarea-v-cab b { color: var(--texto); font-size: 14px; }
.au-tarea-v p { font-size: 14px; line-height: 1.5; white-space: pre-line; color: var(--texto-2); }
.au-tarea-v .cc-imgs { max-width: 360px; }
.au-feedback { padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--acento) 9%, var(--widget)); font-size: 14px; line-height: 1.55; white-space: pre-line; color: var(--texto); }
.au-feedback b { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--acento); }
.au-tarea-enlaces { display: flex; flex-wrap: wrap; gap: 6px; }
.au-tarea-enlaces a { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══ 25-oct: la red social (Clases · Mapa · Mensajes · Seguir), como The Content Casa de Liz pero con la paleta Dre UI azul ══ */
/* Clases */
.cc-cursos { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .cc-cursos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cc-curso { display: flex; flex-direction: column; overflow: hidden; color: var(--texto); text-decoration: none; }
.cc-curso-portada { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--widget-2); }
.cc-curso-portada img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--curva); }
@media (hover: hover) { .cc-curso:hover .cc-curso-portada img { transform: scale(1.04); } }
.cc-curso.bloqueado .cc-curso-portada img { filter: saturate(.55) brightness(.82); }
.cc-curso-et { position: absolute; left: 12px; top: 12px; gap: 4px; }
.cc-curso-et svg { width: 12px; height: 12px; }
.cc-curso-et.neutro { color: #fff; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cc-curso-cuerpo { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.cc-curso-t { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.cc-curso-s { font-size: 13px; color: var(--texto-3); }
.cc-curso-prog { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.cc-curso-prog .barra-progreso { flex: 1; }
.cc-curso-prog b { font-size: 13px; }
.cc-curso-ir { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--acento); }
.cc-curso-ir svg { width: 15px; height: 15px; }
.cc-clases-mas .fila { color: var(--texto); text-decoration: none; }
.cc-clases-mas .fila > svg { width: 16px; height: 16px; color: var(--texto-3); }

/* Mapa (puntos de tierra y marcas en azul) */
.cc-mapa-pag { display: flex; flex-direction: column; gap: 16px; min-width: 0; max-width: 1100px; margin-inline: auto; }
.cc-mapa { overflow: hidden; background: linear-gradient(180deg, var(--widget) 0%, color-mix(in srgb, var(--acento) 5%, var(--widget)) 100%); }
.cc-mapa-carga { min-height: 340px; }
.cc-mapa-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cc-mapa-cifra { display: flex; align-items: baseline; gap: 8px; }
.cc-mapa-cifra b { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--texto); }
.cc-mapa-cifra span { font-size: 14px; color: var(--texto-2); }
.cc-mapa-svg { display: block; width: 100%; height: auto; overflow: visible; }
.cc-mapa-tierra { fill: none; stroke: color-mix(in srgb, var(--luz) 34%, var(--widget)); stroke-linecap: round; }
.cc-mapa-marca { cursor: pointer; outline: none; }
.cc-mapa-pin { fill: var(--luz); stroke: var(--widget); transition: fill .2s var(--curva); }
.cc-mapa-marca:hover .cc-mapa-pin, .cc-mapa-marca:focus-visible .cc-mapa-pin { fill: var(--acento-boton); }
.cc-mapa-marca.sel .cc-mapa-pin { fill: var(--acento-boton); }
.cc-mapa-halo { fill: var(--luz); opacity: .22; transform-box: fill-box; transform-origin: center; }
.cc-mapa-marca.sel .cc-mapa-halo { animation: cc-latido-azul 2.2s var(--curva) infinite; opacity: .35; }
@keyframes cc-latido-azul { 0%, 100% { transform: scale(.85); opacity: .35; } 50% { transform: scale(1.12); opacity: .12; } }
.cc-mapa-n { fill: #fff; font-family: var(--letra); font-weight: 800; text-anchor: middle; pointer-events: none; }
.cc-mapa-abajo { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .cc-mapa-abajo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.cc-paises { display: flex; flex-direction: column; }
.cc-pais { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; color: var(--texto); text-decoration: none; }
.cc-pais:hover { background: var(--widget-2); }
.cc-pais.activo { background: var(--acento-suave); }
.cc-pais-bandera .emoji { font-size: 24px; line-height: 1; }
.cc-pais-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cc-pais-n { font-size: 14.5px; font-weight: 600; }
.cc-pais-tu { margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff; background: var(--acento-boton); vertical-align: 1px; }
.cc-pais-barra { height: 6px; border-radius: 999px; background: var(--widget-2); overflow: hidden; }
.cc-pais-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--luz), var(--acento-boton)); }
.cc-pais-cuenta { font-size: 20px; font-weight: 800; min-width: 28px; text-align: right; }
.cc-pais-gente h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 17px; font-weight: 700; }
.cc-pais-gente h3 .emoji { font-size: 22px; }
.cc-pais-gente h3 > span:last-child { margin-left: auto; min-width: 28px; height: 28px; padding: 0 9px; border-radius: 999px; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--acento); background: var(--acento-suave); }
.cc-ciudades { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.cc-ciudad { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 11px; border-radius: 999px; font-size: 13px; color: var(--texto-2); background: var(--widget-2); }
.cc-ciudad svg { width: 13px; height: 13px; color: var(--acento); }
.cc-ciudad b { font-weight: 700; color: var(--texto); }
.cc-pais-caras { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 14px 8px; }
.cc-pais-cara { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 4px 0; border: 0; background: none; cursor: pointer; color: var(--texto); font: inherit; }
.cc-pais-cara > span { max-width: 100%; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-pais-cara > .cc-pais-cara-c { font-size: 11.5px; font-weight: 400; color: var(--texto-3); }
@media (max-width: 640px) { .cc-mapa-svg { width: calc(100% + 20px); margin-inline: -10px; } }
@media (prefers-reduced-motion: reduce) { .cc-mapa-marca.sel .cc-mapa-halo { animation: none; } }

/* Perfil: Mensaje · Seguir, seguidores y la ciudad */
.g-perfil-acc { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.g-perfil-cab .g-perfil-acc .btn-sec { position: static; }
.g-siguiendo { color: var(--acento); }
.g-perfil-red { display: flex; justify-content: center; gap: 18px; font-size: 14px; }
.g-perfil-red .enlace { color: var(--texto-2); }
.g-perfil-red b { color: var(--texto); font-weight: 700; }
.g-p-nota { display: flex; align-items: center; gap: 6px; margin: -6px 0 0; font-size: 12.5px; color: var(--texto-3); }
.g-p-nota svg { width: 14px; height: 14px; flex-shrink: 0; }
.cc-miembro-acc { display: flex; gap: 8px; margin-top: auto; }
.cc-miembro-acc .btn-sec { flex: 1; justify-content: center; }
.g-lista-seguir { max-height: 60vh; overflow-y: auto; }
.g-lista-seguir .fila { text-align: left; }

/* Mensajes directos: lista + conversación (en la PC, las dos a la vez) */
.g-mensajes { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); max-width: 1040px; margin-inline: auto; }
@media (min-width: 768px) { .g-mensajes { grid-template-columns: 320px minmax(0, 1fr); align-items: stretch; height: calc(100vh - var(--alto-cinta, 0px) - var(--cc-alto-cab, 110px) - 64px); min-height: 460px; } }
@media (max-width: 767px) { .g-mensajes.con-chat .g-chats { display: none; } }
.g-chats { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.g-chats-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 16px 8px; }
.g-chats-cab h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.g-chats-lista { display: flex; flex-direction: column; padding: 4px 6px 8px; overflow-y: auto; min-height: 0; }
.g-chats-pop { padding: 0; max-height: 420px; }
.g-chat-fila { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; color: var(--texto); text-decoration: none; }
.g-chat-fila:hover { background: var(--widget-2); }
.g-chat-fila.activa { background: var(--acento-suave); }
.g-chat-fila-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.g-chat-fila-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.g-chat-fila-cab b { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-chat-fila-cab .cc-cuando { flex-shrink: 0; font-size: 12px; color: var(--texto-3); }
.g-chat-ult { font-size: 13.5px; color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-chat-fila.nueva .g-chat-ult { color: var(--texto); font-weight: 600; }
.g-chat-n { flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--acento-boton); }
.g-chat { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
@media (max-width: 767px) { .g-chat { height: calc(100vh - var(--alto-cinta, 0px) - var(--cc-alto-cab, 110px) - 40px); height: calc(100dvh - var(--alto-cinta, 0px) - var(--cc-alto-cab, 110px) - 40px); min-height: 380px; } }
.g-chat-nada { justify-content: center; }
.g-chat-cab { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--linea); }
@media (min-width: 768px) { .g-chat-atras { display: none; } }
.g-chat-quien { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--texto); text-decoration: none; }
.g-chat-quien > span { display: flex; flex-direction: column; min-width: 0; }
.g-chat-quien b { font-size: 15px; font-weight: 600; }
.g-chat-quien > span > span { font-size: 12.5px; color: var(--texto-3); }
.g-chat-msgs { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 10px; overscroll-behavior: contain; }
.g-chat-vacio { margin: auto; text-align: center; }
.g-chat-antes { align-self: center; font-size: 13px; }
.g-chat-dia { align-self: center; margin: 8px 0 4px; font-size: 12px; font-weight: 600; color: var(--texto-3); }
.g-msg { align-self: flex-start; max-width: min(78%, 520px); display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.g-msg.mio { align-self: flex-end; align-items: flex-end; }
.g-msg-burbuja { padding: 9px 13px; border-radius: 18px 18px 18px 6px; background: var(--widget-2); color: var(--texto); font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.g-msg.mio .g-msg-burbuja { border-radius: 18px 18px 6px 18px; color: #fff; background: var(--acento-boton); }
.g-msg.mio .g-msg-burbuja a { color: #fff; text-decoration: underline; }
.g-msg.enviando .g-msg-burbuja { opacity: .6; }
.g-msg-pie { display: inline-flex; align-items: center; gap: 2px; padding: 0 4px; font-size: 11px; color: var(--texto-3); }
.g-msg-acc { width: 24px; height: 20px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--texto-3); cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity .15s; }
.g-msg-acc svg { width: 15px; height: 15px; }
.g-msg:hover .g-msg-acc, .g-msg-acc:focus-visible { opacity: 1; }
@media (hover: none) { .g-msg-acc { opacity: .7; } }
.g-chat-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--linea); }
.g-chat-form textarea { flex: 1; min-height: 44px; max-height: 120px; resize: none; padding-top: 11px; line-height: 1.4; }
.g-chat-enviar { flex-shrink: 0; width: 44px; height: 44px; color: #fff; background: var(--acento-boton); }
.g-chat-enviar:hover { background: var(--acento); }
.g-chat-cerrado { padding: 14px; border-top: 1px solid var(--linea); text-align: center; font-size: 13.5px; color: var(--texto-3); }
:root[data-theme="dark"] .cc-curso-et.neutro { background: rgba(0, 0, 0, .7); }
/* 25-oct: con 7 pestañas, en el celular la barra se desliza (como en la Casa) en vez de apretarlas */
@media (max-width: 767px) { .cc-pestanas { justify-content: flex-start; gap: 18px; } }
.g-curso.g-miembro { color: var(--texto-2); background: var(--widget-2); } /* 26-oct: los de la comunidad gratis */

/* ── 26-oct: vender a la comunidad gratis (solo a quien no tiene curso) ── */
.cc-curso .cc-curso-t { color: var(--texto); text-decoration: none; }
.cc-curso-compra { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.cc-curso-compra .cc-curso-ir { margin-top: 0; padding-top: 0; text-decoration: none; }
.cc-venta { position: relative; display: flex; flex-direction: column; gap: 6px; }
.cc-venta-fotos { position: relative; display: block; height: 70px; margin-bottom: 4px; }
.cc-venta-fotos img { position: absolute; top: 50%; width: 46%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: 10px; border: 2px solid var(--widget); box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .5); }
.cc-venta-fotos img:nth-child(1) { left: 0; transform: translateY(-46%) rotate(-6deg); }
.cc-venta-fotos img:nth-child(2) { left: 27%; z-index: 2; transform: translateY(-56%); }
.cc-venta-fotos img:nth-child(3) { right: 0; transform: translateY(-46%) rotate(6deg); }
.cc-venta-t { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; }
.cc-venta-s { font-size: 13px; color: var(--texto-2); }
.cc-venta .btn { margin-top: 6px; justify-content: center; }
.cc-venta-x { position: absolute; top: 8px; right: 8px; z-index: 3; width: 32px; height: 32px; }
/* 31-oct · el pop-up de ofertas (miembros gratis y alumnos de solo CapCut Móvil) */
.cc-venta-pop .cc-venta-fotos { width: 100%; height: 110px; margin: 4px 0 10px; }
.cc-venta-pop .cc-venta-fotos.una img { left: 50%; width: 62%; transform: translate(-50%, -50%); }
.cc-venta-pop .btn { justify-content: center; margin-top: 4px; }
.cc-venta-movil { margin-bottom: 4px; }
.cc-venta-movil .cc-venta-fotos { width: 220px; max-width: 70%; }
@media (min-width: 1024px) { .cc-venta-movil { display: none; } }

/* ── 26-oct (Omar): la insignia junto al nombre (✓ Dreomar · ✓ Alumno · PRO · MASTER · Miembro) y el chip de nivel «Nv X» ── */
.g-ets { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; white-space: nowrap; vertical-align: middle; line-height: 1; }
.g-ins, .g-nv { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 6px; border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  font-family: inherit; font-variant-numeric: tabular-nums; cursor: default; -webkit-tap-highlight-color: transparent; }
.g-ins-ok { width: 13px; height: 13px; flex-shrink: 0; }
.g-ins-ok .g-ins-sello { fill: var(--acento); }
.g-ins-ok .g-ins-palomita { stroke: #fff; }
.g-ins-dreomar { color: #fff; background: var(--acento); padding-left: 4px; }
.g-ins-dreomar .g-ins-sello { fill: #fff; }
.g-ins-dreomar .g-ins-palomita { stroke: var(--acento); }
.g-ins-alumno { color: var(--texto); background: color-mix(in srgb, var(--acento) 10%, transparent); padding-left: 4px; }
.g-ins-pro { color: #fff; background: linear-gradient(135deg, #8B5CF6, #6D28D9); letter-spacing: .06em; }
.g-ins-master { color: #3D2A00; background: linear-gradient(135deg, #FDE68A, #F5B70A 55%, #D99A06); letter-spacing: .06em; box-shadow: inset 0 0 0 1px rgba(150, 100, 0, .25); }
.g-ins-miembro { color: var(--texto-2); background: var(--widget-2); font-weight: 600; }
/* Un color por nivel (los 9: Primer corte → Leyenda); el nombre sale al pasar o tocar */
.g-nv { --nv: #6B7280; color: var(--nv); background: color-mix(in srgb, var(--nv) 13%, transparent); }
.g-nv-1 { --nv: #64748B; } .g-nv-2 { --nv: #0284C7; } .g-nv-3 { --nv: #0D9488; } .g-nv-4 { --nv: #16A34A; } .g-nv-5 { --nv: #4F46E5; }
.g-nv-6 { --nv: #B45309; } .g-nv-7 { --nv: #EA580C; } .g-nv-8 { --nv: #DB2777; } .g-nv-9 { --nv: #7C3AED; }
:root[data-theme="dark"] .g-nv-1 { --nv: #A3B1C6; } :root[data-theme="dark"] .g-nv-2 { --nv: #5CC2F7; } :root[data-theme="dark"] .g-nv-3 { --nv: #3FD1C1; }
:root[data-theme="dark"] .g-nv-4 { --nv: #4ADE80; } :root[data-theme="dark"] .g-nv-5 { --nv: #A5A8FF; } :root[data-theme="dark"] .g-nv-6 { --nv: #FBBF24; }
:root[data-theme="dark"] .g-nv-7 { --nv: #FB923C; } :root[data-theme="dark"] .g-nv-8 { --nv: #F472B6; } :root[data-theme="dark"] .g-nv-9 { --nv: #C4A5FF; }
:root[data-theme="dark"] .g-nv { background: color-mix(in srgb, var(--nv) 18%, transparent); }
:root[data-theme="dark"] .g-ins-alumno { background: color-mix(in srgb, var(--acento) 18%, transparent); }
:root[data-theme="dark"] .g-ins-pro { background: linear-gradient(135deg, #9F7AEA, #7C3AED); }
/* Si el nombre es largo, la insignia baja debajo del nombre (no se aprieta ni rompe la fila) */
.cc-meta-1 { flex-wrap: wrap; row-gap: 3px; }
.cc-meta-1 .cc-autor { max-width: 100%; }
.cc-miembro-id .g-ets { margin: 3px 0 1px; }
.g-perfil-ets { display: flex; justify-content: center; margin-top: 6px; }
.g-perfil-ets .g-ins, .g-perfil-ets .g-nv { height: 22px; font-size: 12px; padding: 0 8px; }
.g-perfil-ets .g-ins-ok { width: 15px; height: 15px; }
.g-perfil-cursos { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: var(--texto-2); }
.g-perfil-cursos svg { width: 14px; height: 14px; flex-shrink: 0; }
.cc-lider-n { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; row-gap: 2px; }
.cc-lider-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-podio-it .g-ets { margin-top: 2px; }

/* ── 26-oct: «Completa tu perfil para entrar» ── */
.cc-pe { max-width: 560px; }
.cc-pe-cab { text-align: center; margin: 8px 0 18px; }
.cc-pe-cab h1 { font-size: clamp(24px, 6vw, 32px); letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 6px; }
.cc-pe-cab p { color: var(--texto-2); margin: 0; font-size: 15px; }
.cc-pe-form { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.cc-pe-foto { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 16px; background: color-mix(in srgb, var(--acento) 8%, var(--widget)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acento) 22%, transparent); }
.cc-pe-foto > div { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.cc-pe-foto b { font-size: 15px; }
.cc-pe-foto > div > span { font-size: 13px; color: var(--texto-2); margin-bottom: 4px; }
.cc-pe-form .entrada[disabled] { opacity: 1; color: var(--texto-2); background: var(--widget-2); }
.cc-pe-redes { gap: 12px; }
@media (max-width: 520px) { .cc-pe-form { padding: 16px; } .cc-pe-redes { grid-template-columns: 1fr; } }
.cc-foto-pub { align-items: stretch; }
.cc-foto-pub .cc-perfil-foto { display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* ── 26-oct: Miembros del admin: quién ya entró y quién no ── */
.cc-entrada-res { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 18px; margin-bottom: 12px; }
.cc-entrada-res > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cc-entrada-res b { font-size: 26px; letter-spacing: -0.02em; line-height: 1; }
.cc-entrada-res b span { font-size: 14px; font-weight: 600; color: var(--texto-2); letter-spacing: 0; }
@media (max-width: 420px) { .cc-entrada-res { gap: 12px; padding: 14px; } .cc-entrada-res b { font-size: 22px; } }
.cc-sin-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.cc-sin-lista .fila { align-items: center; gap: 10px; }
.cc-sin-lista .cuerpo { min-width: 0; }
.cc-sin-lista .t { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cc-sin-lista .s { overflow: hidden; text-overflow: ellipsis; }
.cc-sin-desde { font-size: 12px; white-space: nowrap; flex-shrink: 0; }
.cc-sin-mas { margin: 10px 2px; font-size: 13px; }
.cc-pe-redes label { display: inline-flex; align-items: center; gap: 6px; }
.cc-pe-redes label svg { width: 16px; height: 16px; flex-shrink: 0; }
.cc-sin-lista .fila { padding: 12px 16px; }