/* ============================================================
   Cristal — vidrio luminoso (post-flat / visionOS)
   Estructura: la del Moderno. Piel: `data-piel="cristal"`.
   Reglas de la casa de este estilo:
   - un lienzo con orbes de luz difuminados detrás, quietos;
   - paneles de cristal: fondo translúcido, borde especular (arriba claro,
     lados tenues) y sombra profunda y suave;
   - los botones emiten luz: degradé índigo → cian, brillo interno y halo;
   - esquinas muy redondeadas: 20-24 px los bloques, píldora los controles;
   - cifras en monoespaciada;
   - al pasar el mouse sube 2 px y se ilumina el borde; al tocar se comprime.
   Nace de noche y tiene versión de día: `data-tema="claro"` cambia solo las
   variables de abajo. Por eso **ningún color va fijo en las reglas**: lo que
   cambia entre día y noche es una variable.
   El desenfoque (`backdrop-filter`) va solo en lo que flota sobre el contenido
   (menús y barras): detrás de las tarjetas hay un fondo quieto y ya difuso,
   así que desenfocarlo no se ve y cuesta en cada cuadro del scroll.
   ============================================================ */

html[data-piel="cristal"],
html[data-piel="cristal"][data-tema="oscuro"] {
  color-scheme: dark;

  /* lienzo y luces */
  --papel: #090A0F;
  --papel-2: #0B0D14;
  --orbe-1: rgba(99, 102, 241, .62);
  --orbe-2: rgba(6, 182, 212, .48);
  --orbe-3: rgba(168, 85, 247, .46);
  --orbe-4: rgba(6, 182, 212, .32);
  --velo: rgba(5, 6, 10, .62);

  /* `--luz` tiñe los velos y las líneas: blanco de noche, pizarra de día. */
  --luz: 255, 255, 255;

  /* vidrios: base, elevado, hundido (campos), menús flotantes y barras */
  --vidrio: rgba(18, 22, 36, .55);
  --vidrio-alto: rgba(28, 34, 54, .65);
  --vidrio-hondo: rgba(9, 11, 20, .5);
  --vidrio-menu: rgba(24, 29, 48, .84);
  --vidrio-barra: rgba(9, 11, 20, .72);
  --desenfoque: blur(20px) saturate(160%);
  --reflejo: rgba(255, 255, 255, .07);
  --brillo-borde: rgba(255, 255, 255, .22);
  --brillo-fino: rgba(255, 255, 255, .16);
  --borde-suave: rgba(255, 255, 255, .08);
  --borde-fuerte: rgba(255, 255, 255, .35);
  --brillo-interno: inset 0 1px 1px rgba(255, 255, 255, .1);
  --hundido: inset 0 1px 2px rgba(0, 0, 0, .35);
  --sombra-cristal: 0 16px 40px rgba(0, 0, 0, .5);
  --sombra-barra: 0 -12px 30px rgba(0, 0, 0, .45);
  --curva: cubic-bezier(.16, 1, .3, 1);

  --blanco: var(--vidrio);
  --blanco-2: rgba(28, 34, 54, .38);

  /* tintas */
  --tinta: #F8FAFC;
  --tinta-2: #CBD5E1;
  --tinta-3: #94A3B8;
  --tenue: #7C8798;

  /* acentos. `--cian-claro` es el acento que se lee como texto. */
  --indigo: #6366F1;
  --cian: #06B6D4;
  --cian-claro: #67E8F9;
  --violeta: #A855F7;
  --rosa: #FDA4AF;
  --lila: #E9D5FF;
  --verde: #A7F3D0;
  --ambar: #FDE68A;

  /* lo que emite luz: el texto de adentro va siempre en blanco */
  --boton-fondo: linear-gradient(135deg, #6366F1, #0891B2);
  --boton-luz: inset 0 1px 1px rgba(255, 255, 255, .45), 0 0 20px rgba(99, 102, 241, .4), 0 10px 24px rgba(0, 0, 0, .35);
  --boton-luz-alta: inset 0 1px 1px rgba(255, 255, 255, .5), 0 0 30px rgba(99, 102, 241, .55), 0 14px 30px rgba(0, 0, 0, .4);
  --peligro-fondo: linear-gradient(135deg, #E11D48, #9333EA);
  --peligro-luz: inset 0 1px 1px rgba(255, 255, 255, .4), 0 0 18px rgba(244, 63, 94, .35), 0 10px 22px rgba(0, 0, 0, .3);

  /* lo activo: la pestaña, el filtro o el destino en el que estás */
  --activo-fondo: linear-gradient(135deg, rgba(99, 102, 241, .45), rgba(6, 182, 212, .3));
  --activo-texto: #FFFFFF;
  --activo-borde: rgba(255, 255, 255, .22);
  --activo-luz: inset 0 1px 1px rgba(255, 255, 255, .28), 0 0 18px rgba(99, 102, 241, .32);

  --titulo-degrade: linear-gradient(120deg, #FFFFFF, #C7D2FE 45%, #67E8F9);
  --marca-degrade: linear-gradient(135deg, #818CF8, #22D3EE);

  --azul: #6366F1;
  --azul-2: #4F46E5;
  --azul-suave: rgba(99, 102, 241, .16);
  --boton-texto: #FFFFFF;
  --smf: rgba(var(--luz), .06);
  --smf-2: rgba(var(--luz), .14);
  --smf-3: rgba(var(--luz), .04);
  --link: var(--cian-claro);

  --chispa: #22D3EE;
  --chispa-texto: var(--cian-claro);

  --borde: var(--borde-suave);
  --linea: rgba(255, 255, 255, .06);
  --ok: #34D399;
  --aviso: #FBBF24;

  --barra: var(--papel);
  --barra-texto: var(--tinta);

  --radio: 20px;
  --sombra: var(--sombra-cristal);
  --sombra-alta: 0 24px 60px rgba(0, 0, 0, .6);

  --fuente: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titular: "Figtree", system-ui, sans-serif;
  --mono: ui-monospace, "Liberation Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  --mano: var(--titular);
  accent-color: #22D3EE;
}

/* De día: el mismo vidrio, esmerilado en blanco sobre un cielo claro. */
html[data-piel="cristal"][data-tema="claro"] {
  color-scheme: light;

  --papel: #EEF1F8;
  --papel-2: #E4E8F2;
  --orbe-1: rgba(99, 102, 241, .34);
  --orbe-2: rgba(6, 182, 212, .28);
  --orbe-3: rgba(168, 85, 247, .26);
  --orbe-4: rgba(6, 182, 212, .2);
  --velo: transparent;

  --luz: 30, 41, 59;

  --vidrio: rgba(255, 255, 255, .62);
  --vidrio-alto: rgba(255, 255, 255, .84);
  --vidrio-hondo: rgba(255, 255, 255, .58);
  --vidrio-menu: rgba(255, 255, 255, .9);
  --vidrio-barra: rgba(244, 246, 252, .8);
  --reflejo: rgba(255, 255, 255, .6);
  --brillo-borde: rgba(255, 255, 255, .95);
  --brillo-fino: rgba(255, 255, 255, .9);
  --borde-suave: rgba(30, 41, 59, .1);
  --borde-fuerte: rgba(79, 70, 229, .45);
  --brillo-interno: inset 0 1px 1px rgba(255, 255, 255, .8);
  --hundido: inset 0 1px 2px rgba(30, 41, 59, .08);
  --sombra-cristal: 0 12px 32px rgba(49, 46, 129, .12);
  --sombra-barra: 0 -10px 28px rgba(49, 46, 129, .1);
  --blanco-2: rgba(255, 255, 255, .45);

  --tinta: #0F172A;
  --tinta-2: #334155;
  --tinta-3: #566275;
  --tenue: #64748B;

  --cian-claro: #0E7490;
  --rosa: #BE123C;
  --lila: #7E22CE;
  --verde: #047857;
  --ambar: #92400E;

  --boton-fondo: linear-gradient(135deg, #4F46E5, #0E7490);
  --boton-luz: inset 0 1px 1px rgba(255, 255, 255, .45), 0 8px 20px rgba(79, 70, 229, .28);
  --boton-luz-alta: inset 0 1px 1px rgba(255, 255, 255, .5), 0 12px 26px rgba(79, 70, 229, .38);
  --peligro-luz: inset 0 1px 1px rgba(255, 255, 255, .4), 0 8px 20px rgba(225, 29, 72, .26);

  --activo-fondo: linear-gradient(135deg, rgba(99, 102, 241, .2), rgba(6, 182, 212, .18));
  --activo-texto: #3730A3;
  --activo-borde: rgba(79, 70, 229, .35);
  --activo-luz: inset 0 1px 1px rgba(255, 255, 255, .7), 0 4px 14px rgba(79, 70, 229, .14);

  --titulo-degrade: linear-gradient(120deg, #1E1B4B, #4338CA 45%, #0E7490);
  --marca-degrade: linear-gradient(135deg, #4F46E5, #0891B2);

  --azul: #4F46E5;
  --azul-2: #4338CA;
  --azul-suave: rgba(99, 102, 241, .12);
  --chispa: #0891B2;
  --linea: rgba(30, 41, 59, .09);
  --ok: #059669;
  --aviso: #B45309;
  --sombra-alta: 0 20px 48px rgba(49, 46, 129, .18);
  accent-color: #4F46E5;
}

/* ---------- el lienzo y las luces ambientales ---------- */

html[data-piel="cristal"] { background: var(--papel); }

html[data-piel="cristal"] body {
  background: transparent;
  color: var(--tinta);
  caret-color: var(--cian-claro);
}

/* Los orbes: focos de color difuminados que el vidrio refracta. */
html[data-piel="cristal"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(44vmax 44vmax at 14% 10%, var(--orbe-1), transparent 68%),
    radial-gradient(38vmax 38vmax at 86% 6%, var(--orbe-2), transparent 68%),
    radial-gradient(52vmax 52vmax at 92% 74%, var(--orbe-3), transparent 70%),
    radial-gradient(34vmax 34vmax at 6% 88%, var(--orbe-4), transparent 70%);
}
/* Un velo apenas más oscuro abajo, para que el pie no compita con las luces. */
html[data-piel="cristal"] body::after {
  content: "";
  position: fixed;
  inset: auto 0 0;
  height: 30vh;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--velo));
}

html[data-piel="cristal"] ::selection { background: rgba(99, 102, 241, .4); color: var(--tinta); }
html[data-piel="cristal"] :focus-visible { outline: 2px solid var(--cian-claro); outline-offset: 2px; }
html[data-piel="cristal"] { scrollbar-color: rgba(99, 102, 241, .7) var(--papel); scrollbar-width: thin; }
html[data-piel="cristal"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-piel="cristal"] ::-webkit-scrollbar-track { background: var(--papel); }
html[data-piel="cristal"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6366F1, #06B6D4);
  border: 2px solid var(--papel);
  border-radius: 999px;
}

/* ---------- letras ---------- */

html[data-piel="cristal"] h1,
html[data-piel="cristal"] h2,
html[data-piel="cristal"] h3,
html[data-piel="cristal"] .titulo-pagina,
html[data-piel="cristal"] .hilo-titulo,
html[data-piel="cristal"] .caja-auth h1 {
  font-family: var(--titular);
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--tinta);
}
html[data-piel="cristal"] .titulo-pagina {
  font-size: clamp(26px, 3.2vw, 36px);
  background: var(--titulo-degrade);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html[data-piel="cristal"] .bajada { color: var(--tinta-3); }

/* Cifras, fechas y etiquetas técnicas en monoespaciada. */
html[data-piel="cristal"] time,
html[data-piel="cristal"] .meta,
html[data-piel="cristal"] .hora,
html[data-piel="cristal"] .post-cab time,
html[data-piel="cristal"] .hilo-meta,
html[data-piel="cristal"] .foro-ultimo .cuando,
html[data-piel="cristal"] .tarjeta-ultima,
html[data-piel="cristal"] .perfil-nums b,
html[data-piel="cristal"] .perfil-nums span,
html[data-piel="cristal"] .post-rango,
html[data-piel="cristal"] .cuenta-nombre .meta,
html[data-piel="cristal"] .migas,
html[data-piel="cristal"] .tabla-simple th {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  letter-spacing: 0;
}
html[data-piel="cristal"] .perfil-nums b,
html[data-piel="cristal"] .parte-nums b { color: var(--cian-claro); font-weight: 600; }

/* ---------- barra y menú lateral ---------- */

html[data-piel="cristal"] .tira { color: var(--tinta-3); }

html[data-piel="cristal"] .menu .menu-marca {
  align-self: flex-start;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(var(--luz), .04);
  border: 1px solid var(--borde-suave);
  border-top-color: var(--brillo-borde);
  box-shadow: var(--brillo-interno);
  color: var(--tinta);
  font-size: 29px;
  font-weight: 700;
}
html[data-piel="cristal"] .menu .menu-marca:hover { border-color: var(--borde-fuerte); }
html[data-piel="cristal"] .menu .menu-marca .marca-ap {
  background: var(--marca-degrade);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

html[data-piel="cristal"] .menu ul { gap: 5px; }

/* La barra lateral, como un panel flotante más. */
html[data-piel="cristal"] .columna-lateral .menu {
  padding: 12px;
  border-radius: 26px;
  background: var(--vidrio);
  border: 1px solid var(--borde-suave);
  border-top-color: var(--brillo-borde);
  box-shadow: var(--sombra-cristal), var(--brillo-interno);
}
html[data-piel="cristal"] .menu ul a {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--tinta-2);
  font-weight: 500;
  transition: background .2s var(--curva), border-color .2s var(--curva), color .2s var(--curva), transform .2s var(--curva);
}
html[data-piel="cristal"] .menu ul a:hover {
  background: rgba(var(--luz), .06);
  border-color: var(--borde-suave);
  color: var(--tinta);
  transform: translateY(-1px);
}
html[data-piel="cristal"] .menu ul a[aria-current="page"] {
  background: var(--activo-fondo);
  border-color: var(--activo-borde);
  box-shadow: var(--activo-luz);
  color: var(--activo-texto);
  font-weight: 600;
}
html[data-piel="cristal"] .menu ul a[aria-current="page"] .ic { stroke-width: 2.2; color: var(--cian-claro); }

html[data-piel="cristal"] .menu .menu-publicar a,
html[data-piel="cristal"] .menu ul .menu-publicar a[aria-current="page"] {
  background: var(--boton-fondo);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  box-shadow: var(--boton-luz);
  color: #FFFFFF;
  font-weight: 600;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .22);
  transition: transform .2s var(--curva), box-shadow .2s var(--curva), filter .2s var(--curva);
}
html[data-piel="cristal"] .menu .menu-publicar a:hover,
html[data-piel="cristal"] .menu ul .menu-publicar a[aria-current="page"]:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: var(--boton-luz-alta);
}
html[data-piel="cristal"] .menu .menu-publicar a:active { transform: scale(.98); }
html[data-piel="cristal"] .menu ul .menu-publicar a[aria-current="page"] .ic { color: #FFFFFF; }

/* La cuenta, abajo del menú. */
html[data-piel="cristal"] .cuenta-menu summary { border: 1px solid transparent; border-radius: 999px; }
html[data-piel="cristal"] .cuenta-menu summary:hover,
html[data-piel="cristal"] .cuenta-menu[open] summary {
  background: rgba(var(--luz), .06);
  border-color: var(--borde-suave);
}
html[data-piel="cristal"] .cuenta-opciones {
  border: 1px solid var(--borde-suave);
  border-top-color: var(--brillo-borde);
  border-radius: 18px;
  background: var(--vidrio-menu);
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
  box-shadow: var(--sombra-alta), var(--brillo-interno);
}
html[data-piel="cristal"] .cuenta-opciones > a,
html[data-piel="cristal"] .cuenta-opciones button { border-radius: 999px; }
html[data-piel="cristal"] .cuenta-opciones > a:hover,
html[data-piel="cristal"] .cuenta-opciones button:hover { background: rgba(var(--luz), .08); }

/* ---------- superficies de cristal ---------- */

html[data-piel="cristal"] :is(
  .tarjeta, .caja, .hilo-cab, .foro-card, .tema-fila, .post, .chat, .chat-caja,
  .tabla-simple, .caja-auth, .aviso-fila, .al-dia, .compositor, .editor-caja,
  .reporte, .privados-lista, .alcahuete, .incrustado-portada, .perfil-cab,
  .bar-juego, .parte-nums div
) {
  background: var(--vidrio);
  background-image: linear-gradient(180deg, var(--reflejo), transparent 140px);
  border: 1px solid var(--borde-suave);
  border-top-color: var(--brillo-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-cristal), var(--brillo-interno);
  transition: transform .2s var(--curva), border-color .2s var(--curva), background .2s var(--curva), box-shadow .2s var(--curva);
}
html[data-piel="cristal"] .tarjeta:hover,
html[data-piel="cristal"] .foro-card:hover,
html[data-piel="cristal"] .tema-fila:hover,
html[data-piel="cristal"] .bar-juego:hover {
  background: var(--vidrio-alto);
  border-color: var(--borde-fuerte);
  border-top-color: var(--brillo-borde);
  transform: translateY(-2px);
  box-shadow: var(--sombra-alta), var(--brillo-interno);
}

html[data-piel="cristal"] .caja-titulo {
  padding: 11px 16px;
  background: rgba(var(--luz), .03);
  border-bottom: 1px solid var(--linea);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
html[data-piel="cristal"] .caja-cuerpo { padding: 16px; }

html[data-piel="cristal"] .aviso-caja {
  background: rgba(99, 102, 241, .14);
  border: 1px solid rgba(129, 140, 248, .3);
  border-radius: 16px;
  color: var(--tinta);
  box-shadow: var(--brillo-interno);
}
html[data-piel="cristal"] .aviso-caja.error {
  background: rgba(244, 63, 94, .14);
  border-color: rgba(251, 113, 133, .35);
  color: var(--rosa);
}
html[data-piel="cristal"] .vacio {
  background: rgba(var(--luz), .03);
  border: 1px dashed rgba(var(--luz), .16);
  border-radius: 18px;
  color: var(--tinta-3);
}

/* ---------- botones, chips y controles ---------- */

html[data-piel="cristal"] .boton {
  background: var(--boton-fondo);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  box-shadow: var(--boton-luz);
  color: #FFFFFF;
  font-weight: 600;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .22);
  transition: transform .2s var(--curva), box-shadow .2s var(--curva), filter .2s var(--curva);
}
html[data-piel="cristal"] .boton:hover {
  background: var(--boton-fondo);
  border-color: rgba(255, 255, 255, .3);
  color: #FFFFFF;
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow: var(--boton-luz-alta);
}
html[data-piel="cristal"] .boton:active { transform: scale(.98); filter: brightness(.98); }

html[data-piel="cristal"] .boton.secundario {
  background: rgba(var(--luz), .06);
  border: 1px solid rgba(var(--luz), .14);
  border-top-color: var(--brillo-borde);
  box-shadow: var(--brillo-interno);
  color: var(--tinta);
  text-shadow: none;
}
html[data-piel="cristal"] .boton.secundario:hover {
  background: rgba(var(--luz), .1);
  border-color: var(--borde-fuerte);
  color: var(--tinta);
  box-shadow: var(--brillo-interno);
}
html[data-piel="cristal"] .boton.peligro,
html[data-piel="cristal"] .boton.peligro:hover {
  background: var(--peligro-fondo);
  border-color: rgba(255, 255, 255, .18);
  box-shadow: var(--peligro-luz);
  color: #FFFFFF;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .22);
}
html[data-piel="cristal"] .enlace-boton { color: var(--cian-claro); }

html[data-piel="cristal"] .chip {
  background: rgba(var(--luz), .05);
  border: 1px solid var(--borde-suave);
  border-top-color: var(--brillo-fino);
  border-radius: 999px;
  color: var(--tinta-2);
  font-weight: 500;
  transition: background .2s var(--curva), border-color .2s var(--curva), transform .2s var(--curva);
}
html[data-piel="cristal"] .chip:hover {
  background: rgba(var(--luz), .09);
  border-color: var(--borde-fuerte);
  color: var(--tinta);
  transform: translateY(-1px);
}
html[data-piel="cristal"] .chip:active { transform: scale(.98); }
html[data-piel="cristal"] .chip[aria-current="true"] {
  background: var(--activo-fondo);
  border-color: var(--activo-borde);
  box-shadow: var(--activo-luz);
  color: var(--activo-texto);
  font-weight: 600;
}
html[data-piel="cristal"] .chip-parte {
  background: rgba(34, 211, 238, .14);
  border-color: rgba(103, 232, 249, .35);
  color: var(--cian-claro);
}
html[data-piel="cristal"] .chip-parte:hover { background: rgba(34, 211, 238, .22); }

html[data-piel="cristal"] .campo input,
html[data-piel="cristal"] .campo select,
html[data-piel="cristal"] .campo textarea,
html[data-piel="cristal"] .editor-cuerpo textarea,
html[data-piel="cristal"] .chat-form input,
html[data-piel="cristal"] .buscador-grande input,
html[data-piel="cristal"] .login input,
html[data-piel="cristal"] .link-invita {
  background: var(--vidrio-hondo);
  border: 1px solid var(--borde-suave);
  border-top-color: var(--brillo-fino);
  border-radius: 14px;
  box-shadow: var(--hundido);
  color: var(--tinta);
  font-family: var(--fuente);
  transition: border-color .2s var(--curva), box-shadow .2s var(--curva), background .2s var(--curva);
}
html[data-piel="cristal"] .campo input:focus,
html[data-piel="cristal"] .campo select:focus,
html[data-piel="cristal"] .campo textarea:focus,
html[data-piel="cristal"] .editor-lienzo:focus-within,
html[data-piel="cristal"] .chat-form input:focus {
  outline: none;
  border-color: rgba(103, 232, 249, .55);
  background: var(--vidrio-alto);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, .18), 0 0 22px rgba(6, 182, 212, .18);
}
html[data-piel="cristal"] .chat-form input,
html[data-piel="cristal"] .buscador-grande input { border-radius: 999px; }
html[data-piel="cristal"] .derecha-buscar {
  background: var(--vidrio-hondo);
  border: 1px solid var(--borde-suave);
  border-top-color: var(--brillo-fino);
  border-radius: 999px;
  box-shadow: var(--hundido);
}
html[data-piel="cristal"] .derecha-buscar input { background: none; border: none; box-shadow: none; }
html[data-piel="cristal"] .derecha-buscar:focus-within {
  border-color: rgba(103, 232, 249, .55);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, .16);
}
html[data-piel="cristal"] input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 7px 14px;
  background: rgba(var(--luz), .08);
  border: 1px solid var(--borde-suave);
  border-radius: 999px;
  color: var(--tinta);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
html[data-piel="cristal"] :is(input, textarea)::placeholder { color: var(--tenue); }

/* ---------- inicio ---------- */

html[data-piel="cristal"] .tarjeta-titulo,
html[data-piel="cristal"] .tarjeta-titulo a { font-weight: 700; letter-spacing: -.02em; color: var(--tinta); }
html[data-piel="cristal"] .tarjeta-titulo a:hover { color: var(--cian-claro); }
html[data-piel="cristal"] .tarjeta .nick { font-weight: 600; color: var(--tinta); }
html[data-piel="cristal"] .tarjeta .meta a { color: var(--cian-claro); }

html[data-piel="cristal"] .punto-nuevo {
  background: linear-gradient(135deg, #22D3EE, #6366F1);
  border-radius: 999px;
  color: #04121A;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 1px 8px;
}
html[data-piel="cristal"] .etiqueta {
  background: rgba(168, 85, 247, .2);
  border: 1px solid rgba(192, 132, 252, .35);
  border-radius: 999px;
  color: var(--lila);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 1px 8px;
}
/* Las #etiquetas con el color de los enlaces: el índigo solo queda apagado sobre el vidrio. */
html[data-piel="cristal"] .hash { background: rgba(var(--luz), .08); color: var(--link); }
html[data-piel="cristal"] .hash:hover { background: var(--azul); color: #FFFFFF; }
html[data-piel="cristal"] .etiqueta.ok { background: rgba(52, 211, 153, .16); border-color: rgba(52, 211, 153, .35); color: var(--verde); }
html[data-piel="cristal"] .punto {
  background: var(--peligro-fondo);
  border-radius: 999px;
  color: #FFFFFF;
  font-family: var(--mono);
  font-weight: 700;
}

html[data-piel="cristal"] .estas-al-dia strong {
  display: inline-block;
  padding: 3px 12px;
  background: rgba(34, 211, 238, .14);
  border: 1px solid rgba(103, 232, 249, .35);
  border-radius: 999px;
  color: var(--cian-claro);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 0 18px rgba(34, 211, 238, .18);
}
html[data-piel="cristal"] .estas-al-dia::before,
html[data-piel="cristal"] .estas-al-dia::after { background: rgba(var(--luz), .12); }
html[data-piel="cristal"] .estas-al-dia span { color: var(--tinta-3); }

html[data-piel="cristal"] .feed-mas {
  border: 1px solid var(--borde-suave);
  border-radius: 999px;
  color: var(--tinta-3);
  background: rgba(var(--luz), .03);
}
html[data-piel="cristal"] .sugeridos h2 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
html[data-piel="cristal"] .sugeridos li { border-bottom: 1px solid var(--linea); }

/* ---------- pestañas y filtros ---------- */

html[data-piel="cristal"] .pestanas:not(.pestanas-sub) {
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  background: rgba(var(--luz), .04);
  border: 1px solid var(--borde-suave);
  border-top-color: var(--brillo-fino);
  border-radius: 999px;
}
html[data-piel="cristal"] .pestanas:not(.pestanas-sub) a {
  margin: 0;
  border: none;
  border-radius: 999px;
  padding: 0 18px;
  color: var(--tinta-3);
  font-weight: 500;
  transition: background .2s var(--curva), color .2s var(--curva);
}
html[data-piel="cristal"] .pestanas:not(.pestanas-sub) a:hover { background: rgba(var(--luz), .06); color: var(--tinta); }
html[data-piel="cristal"] .pestanas:not(.pestanas-sub) a[aria-current="page"] {
  background: var(--activo-fondo);
  border-color: var(--activo-borde);
  box-shadow: var(--activo-luz);
  color: var(--activo-texto);
  font-weight: 600;
}
html[data-piel="cristal"] .pestanas:not(.pestanas-sub) a[aria-current="page"]::after { content: none; }
html[data-piel="cristal"] .pestanas-sub { border-bottom: 1px solid var(--linea); }
html[data-piel="cristal"] .pestanas-sub a[aria-current="page"] {
  border-bottom-color: var(--cian-claro);
  color: var(--tinta);
}
html[data-piel="cristal"] .filtros { gap: 8px; }

/* ---------- foros ---------- */

html[data-piel="cristal"] .cat-titulo {
  padding: 16px 2px 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
html[data-piel="cristal"] .foro-icono {
  background: linear-gradient(135deg, #6366F1, #9333EA);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 14px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .3), 0 6px 16px rgba(99, 102, 241, .25);
  color: #FFFFFF;
}
html[data-piel="cristal"] .foro-card:nth-child(3n + 2) .foro-icono,
html[data-piel="cristal"] .tema-fila:nth-child(3n + 2) .foro-icono {
  background: linear-gradient(135deg, #0891B2, #4F46E5);
}
html[data-piel="cristal"] .foro-card:nth-child(3n + 3) .foro-icono,
html[data-piel="cristal"] .tema-fila:nth-child(3n + 3) .foro-icono {
  background: linear-gradient(135deg, #9333EA, #E11D48);
}
html[data-piel="cristal"] .tema-titulo { font-weight: 600; letter-spacing: -.01em; color: var(--tinta); }
html[data-piel="cristal"] .tema-titulo:hover { color: var(--cian-claro); }

/* ---------- tema y mensajes ---------- */

html[data-piel="cristal"] .hilo-cab { padding: 20px; border-radius: 24px; }
html[data-piel="cristal"] .hilo-titulo { font-size: clamp(24px, 2.5vw, 30px); line-height: 1.15; }
html[data-piel="cristal"] .hilo-meta { border-top: 1px solid var(--linea); color: var(--tinta-3); }
html[data-piel="cristal"] .mod-acciones { border-top: 1px solid var(--linea); }
html[data-piel="cristal"] .post-cab { top: 22px; right: 18px; }
html[data-piel="cristal"] .post-nick a { color: var(--tinta); font-weight: 600; }
html[data-piel="cristal"] .post-rango {
  padding: 2px 9px;
  border: 1px solid rgba(var(--luz), .14);
  border-radius: 999px;
  background: rgba(var(--luz), .05);
  color: var(--tinta-2);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
html[data-piel="cristal"] .post-rango.admin {
  background: linear-gradient(135deg, rgba(244, 63, 94, .22), rgba(168, 85, 247, .16));
  color: var(--rosa);
  border-color: rgba(251, 113, 133, .3);
}
html[data-piel="cristal"] .post-rango.mod {
  background: rgba(168, 85, 247, .22);
  color: var(--lila);
  border-color: rgba(192, 132, 252, .3);
}
html[data-piel="cristal"] .post-imagen,
html[data-piel="cristal"] .tarjeta-media,
html[data-piel="cristal"] .post-adjuntos img {
  border: 1px solid rgba(var(--luz), .1);
  border-radius: 16px;
}
html[data-piel="cristal"] .firma { border-top: 1px solid var(--linea); color: var(--tinta-3); }

html[data-piel="cristal"] .accion {
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--tinta-3);
  font-weight: 500;
  transition: background .2s var(--curva), border-color .2s var(--curva), color .2s var(--curva), transform .2s var(--curva);
}
html[data-piel="cristal"] .accion:hover {
  background: rgba(var(--luz), .07);
  border-color: var(--borde-suave);
  color: var(--tinta);
}
html[data-piel="cristal"] .reaccion {
  border: 1px solid var(--borde-suave);
  border-top-color: var(--brillo-fino);
  border-radius: 999px;
  background: rgba(var(--luz), .04);
  color: var(--tinta-2);
  font-weight: 500;
  transition: background .2s var(--curva), border-color .2s var(--curva), transform .2s var(--curva), box-shadow .2s var(--curva);
}
html[data-piel="cristal"] .reaccion:hover {
  background: rgba(var(--luz), .08);
  border-color: var(--borde-fuerte);
  transform: translateY(-1px);
}
html[data-piel="cristal"] .reaccion:active { transform: scale(.98); }
html[data-piel="cristal"] .reaccion[aria-pressed="true"] {
  background: rgba(34, 211, 238, .16);
  border-color: rgba(103, 232, 249, .45);
  color: var(--cian-claro);
  box-shadow: 0 0 16px rgba(34, 211, 238, .22);
}
html[data-piel="cristal"] .reaccion-corazon[aria-pressed="true"] {
  background: rgba(244, 63, 94, .18);
  border-color: rgba(251, 113, 133, .45);
  color: var(--rosa);
  box-shadow: 0 0 16px rgba(244, 63, 94, .22);
}
html[data-piel="cristal"] .accion.favorito[aria-pressed="true"] {
  background: rgba(250, 204, 21, .16);
  border-color: rgba(250, 204, 21, .4);
  color: var(--ambar);
}

html[data-piel="cristal"] .mas-menu {
  border: 1px solid var(--borde-suave);
  border-top-color: var(--brillo-borde);
  border-radius: 18px;
  background: var(--vidrio-menu);
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
  box-shadow: var(--sombra-alta), var(--brillo-interno);
}
html[data-piel="cristal"] .mas-menu a,
html[data-piel="cristal"] .mas-menu button { border-radius: 999px; }
html[data-piel="cristal"] .mas-menu a:hover,
html[data-piel="cristal"] .mas-menu button:hover { background: rgba(var(--luz), .08); }

/* ---------- editor ---------- */

html[data-piel="cristal"] .compositor { padding: 16px; }
html[data-piel="cristal"] .compositor textarea { background: none; border: none; box-shadow: none; }
html[data-piel="cristal"] .editor-cab {
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(99, 102, 241, .22), rgba(6, 182, 212, .12));
  border-bottom: 1px solid var(--linea);
  font-size: 17px;
  font-weight: 600;
  color: var(--tinta);
}
html[data-piel="cristal"] .editor-lienzo {
  background: var(--vidrio-hondo);
  border: 1px solid var(--borde-suave);
  border-top-color: var(--brillo-fino);
  border-radius: 16px;
  box-shadow: var(--hundido);
}
html[data-piel="cristal"] .editor-caja .editor-lienzo textarea { background: transparent; border: none; box-shadow: none; }
html[data-piel="cristal"] .editor-pie { background: rgba(var(--luz), .02); border-top: 1px solid var(--linea); }
html[data-piel="cristal"] .editor-lienzo .barra-editor,
html[data-piel="cristal"] .editor-lienzo .editor-barra { border-bottom: 1px solid var(--linea); }
html[data-piel="cristal"] .editor-lienzo .barra-editor button,
html[data-piel="cristal"] .editor-lienzo .editor-barra button { border-radius: 999px; }
html[data-piel="cristal"] .editor-lienzo .barra-editor button:hover,
html[data-piel="cristal"] .editor-lienzo .editor-barra button:hover { background: rgba(var(--luz), .08); }
html[data-piel="cristal"] .grabadora {
  background: rgba(var(--luz), .03);
  border: 1px solid var(--borde-suave);
  border-radius: 16px;
}
html[data-piel="cristal"] .micro {
  background: var(--peligro-fondo);
  color: #FFFFFF;
  box-shadow: var(--peligro-luz);
}
html[data-piel="cristal"] .gifs-grilla,
html[data-piel="cristal"] .menciones {
  border: 1px solid var(--borde-suave);
  border-top-color: var(--brillo-borde);
  border-radius: 18px;
  background: var(--vidrio-menu);
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
  box-shadow: var(--sombra-alta), var(--brillo-interno);
}

/* ---------- chat: Alcahuete y privados ---------- */

html[data-piel="cristal"] .chat { border-radius: 24px; overflow: hidden; }
html[data-piel="cristal"] .chat-cabecera { border-bottom: 1px solid var(--linea); }
html[data-piel="cristal"] .chat-lista { background: var(--vidrio-hondo); padding: 14px; }
html[data-piel="cristal"] .chat-msg { margin-bottom: 10px; }
html[data-piel="cristal"] .chat-cuerpo {
  padding: 9px 14px;
  background: rgba(var(--luz), .05);
  border: 1px solid var(--borde-suave);
  border-top-color: var(--brillo-fino);
  border-radius: 6px 18px 18px 18px;
  box-shadow: var(--brillo-interno);
}
html[data-piel="cristal"] .chat-cab .nick { color: var(--tinta); font-weight: 600; }
html[data-piel="cristal"] .chat-form { background: rgba(var(--luz), .03); border-top: 1px solid var(--linea); }
html[data-piel="cristal"] .punto-vivo { box-shadow: 0 0 0 4px rgba(52, 211, 153, .18); }
html[data-piel="cristal"] .privados-lista li { border-bottom: 1px solid var(--linea); }

/* ---------- tablas y admin ---------- */

html[data-piel="cristal"] .tabla-simple { overflow: hidden; }
html[data-piel="cristal"] .tabla-simple th {
  background: rgba(var(--luz), .05);
  color: var(--tinta-3);
  border-bottom: 1px solid var(--linea);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
html[data-piel="cristal"] .tabla-simple td { border-bottom: 1px solid var(--linea); }
html[data-piel="cristal"] .tabla-simple tr:last-child td { border-bottom: none; }
html[data-piel="cristal"] .tabla-simple .icono-boton {
  background: rgba(var(--luz), .05);
  border: 1px solid var(--borde-suave);
  border-radius: 999px;
  color: var(--tinta-2);
}
html[data-piel="cristal"] .lista-limpia li { border-bottom: 1px solid var(--linea); }

/* En el admin, los formularios van pegados a su título: la esquina la decide el tema,
   no el `style` inline de la plantilla. */
html[data-piel="cristal"] .bloque > form.editor-caja { border-radius: 18px !important; }

/* ---------- pie y barra del teléfono ---------- */

html[data-piel="cristal"] .nav-movil {
  background: var(--vidrio-barra);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-top: 1px solid var(--borde-suave);
  box-shadow: var(--sombra-barra);
}
html[data-piel="cristal"] .nav-movil a { color: var(--tinta-3); }
html[data-piel="cristal"] .nav-movil a[aria-current="page"] { color: var(--activo-texto); }
html[data-piel="cristal"] .nav-movil li:not(.nav-publicar) a[aria-current="page"] .ic {
  background: var(--activo-fondo);
  box-shadow: var(--activo-luz);
}
html[data-piel="cristal"] .nav-publicar a .ic {
  background: var(--boton-fondo);
  border-radius: 999px;
  color: #FFFFFF;
  box-shadow: var(--boton-luz);
}

html[data-piel="cristal"] .pie {
  background: transparent;
  border-top: 1px solid var(--linea);
  color: var(--tinta-3);
}
html[data-piel="cristal"] .pie .lema { color: var(--tinta-2); font-weight: 600; }
html[data-piel="cristal"] .pie a { color: var(--tinta-3); }
html[data-piel="cristal"] .pie a:hover { color: var(--cian-claro); }

/* ---------- detalles ---------- */

html[data-piel="cristal"] .migas { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); }
html[data-piel="cristal"] .migas a { color: var(--tinta-3); }
html[data-piel="cristal"] .migas a:hover { color: var(--cian-claro); }
html[data-piel="cristal"] .link-invita { color: var(--cian-claro); }
html[data-piel="cristal"] .incrustado-marco,
html[data-piel="cristal"] .incrustado-archivo {
  border: 1px solid var(--borde-suave);
  border-radius: 16px;
}
html[data-piel="cristal"] .incrustado-play {
  background: var(--boton-fondo);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #FFFFFF;
  box-shadow: var(--boton-luz);
}
/* La línea de las respuestas anidadas: la de siempre es casi invisible sobre el vidrio. */
html[data-piel="cristal"] .ramas { border-left-color: rgba(var(--luz), .18); }
html[data-piel="cristal"] .hilo-pliegue { background: var(--vidrio, transparent); }
html[data-piel="cristal"] .barras li {
  background: linear-gradient(180deg, #22D3EE, #6366F1);
  border-radius: 6px 6px 2px 2px;
}
html[data-piel="cristal"] .barras li.cero { background: rgba(var(--luz), .08); }
html[data-piel="cristal"] .con-barra::after {
  background: linear-gradient(90deg, #06B6D4, #6366F1);
  border-radius: 999px;
  opacity: 1;
}
html[data-piel="cristal"] .parte-nums div { border-radius: 18px; }
html[data-piel="cristal"] .parte-nums span { color: var(--tinta-3); font-family: var(--mono); font-weight: 600; }
html[data-piel="cristal"] .bar-icono {
  background: var(--boton-fondo);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 16px;
  color: #FFFFFF;
}
html[data-piel="cristal"] .reglas {
  background: rgba(99, 102, 241, .12);
  border: 1px solid rgba(129, 140, 248, .28);
  border-radius: 18px;
}
html[data-piel="cristal"] .reglas h2 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

/* ---------- celular ---------- */

@media (max-width: 760px) {
  html[data-piel="cristal"] { --desenfoque: blur(12px) saturate(150%); }
  /* En el teléfono el menú es la cabecera de arriba: plana, sin marco propio. */
  html[data-piel="cristal"] .columna-lateral .menu {
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  html[data-piel="cristal"] .columna-lateral { border-bottom: 1px solid var(--borde-suave); }
  html[data-piel="cristal"] .menu .menu-marca { align-self: center; padding: 2px 12px; font-size: 24px; }
  html[data-piel="cristal"] .tarjeta,
  html[data-piel="cristal"] .caja,
  html[data-piel="cristal"] .post { border-radius: 18px; }
  html[data-piel="cristal"] .hilo-cab,
  html[data-piel="cristal"] .chat { border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-piel="cristal"] *,
  html[data-piel="cristal"] *::after { transition: none; }
}
/* Sin mouse, el «hover» queda pegado después de tocar: ahí nada se levanta. */
@media (prefers-reduced-motion: reduce), (hover: none) {
  html[data-piel="cristal"] :is(.tarjeta, .chip, .boton, .reaccion, .foro-card, .tema-fila, .bar-juego):hover:not(:active),
  html[data-piel="cristal"] .menu ul a:hover:not(:active) { transform: none; }
}

/* Quien pide menos transparencia en su sistema: paneles llenos y sin desenfoque. */
@media (prefers-reduced-transparency: reduce) {
  html[data-piel="cristal"][data-tema] { --vidrio: #141826; --vidrio-alto: #1C2236; --vidrio-hondo: #0D1019; --vidrio-menu: #1C2236; --vidrio-barra: #0D1019; }
  html[data-piel="cristal"][data-tema="claro"] { --vidrio: #FFFFFF; --vidrio-alto: #FFFFFF; --vidrio-hondo: #F8FAFC; --vidrio-menu: #FFFFFF; --vidrio-barra: #F4F6FC; }
  html[data-piel="cristal"] * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

@media print {
  html[data-piel="cristal"] { background: #FFFFFF; }
  html[data-piel="cristal"] body::before,
  html[data-piel="cristal"] body::after { display: none; }
  html[data-piel="cristal"] :is(.tarjeta, .caja, .post) {
    background: #FFFFFF; color: #111111; box-shadow: none;
  }
}