/* ═══════════════════════════════════════════════════════════════════════════
   Aspecto «Titanio» (01-10). Lo pidió Cristian: «otro diseño utilizando 3D,
   pero sin que se vea muy IA, ni forzado, ni muy colorido; que sea chulo para
   una aplicación de deporte, y que valga para la versión de deporte y para la
   de cartas».

   La idea: objetos de verdad bajo una luz cenital.
   - Grafito mate (nada de negro puro ni rejilla), con un foco suave arriba.
   - Cada bloque es una placa con RELIEVE: filo de luz arriba, sombra larga y
     difusa debajo. Los botones son teclas que se hunden al pulsar.
   - UN solo color fuerte (lima, el de la marca) y solo en lo que se pulsa o
     en el dato importante. Las secciones llevan su color, pero apagado.
   - Nada de rayas de color en un solo lado ni sombras desplazadas (ver la
     regla «sin raya de un lado»): borde fino + halo alrededor.
   - Los números grandes, en Space Grotesk, como en un reloj deportivo.
   Va lo ÚLTIMO en index.html: aquí solo se pisa lo que el aspecto cambia.
   ═══════════════════════════════════════════════════════════════════════════ */
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) {
  --bg: #0E0F12; --bg-2: #14161A; --sup: #181A1F; --sup-2: #1E2127;
  --tinta: #ECEEF2; --tinta-2: #A9AEB9; --tinta-3: #737885; --linea: rgba(255,255,255,.08); --linea-2: rgba(255,255,255,.14);
  --oscuro: #0B0C0F; --oscuro-2: #15171C;
  --acento: #CFF04F; --acento-2: #E3FA8E; --acento-tinta: #10130A; --acento-suave: rgba(207,240,79,.14); --brillo: rgba(207,240,79,.35);
  --naranja: #E39A62; --amarillo: #E8C66E; --cian: #7FB9E3; --rosa: #E08AA5;
  --ok: #67D193; --mal: #F0705F; --aviso: #E39A62;
  --c-fue: #E39A62; --c-vel: #74B7E0; --c-nuc: #E2C164; --c-men: #72CB92;
  --s-prog: #CFF04F; --s-soc: #7FB9E3; --s-avn: #E39A62; --s-app: #ABA2E6; --s-oscuro: #0B0C0F;
  --radio: 18px; --f-titulo: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  /* materiales */
  --placa: linear-gradient(180deg, #1F2228 0%, #17191E 100%);
  --placa-alta: linear-gradient(180deg, #262A31 0%, #1B1E23 100%);
  --relieve: inset 0 1px 0 rgba(255,255,255,.075), inset 0 -1px 0 rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.5), 0 16px 32px -14px rgba(0,0,0,.85);
  --relieve-alto: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.45), 0 24px 44px -16px rgba(0,0,0,.9);
  --hundido: inset 0 2px 5px rgba(0,0,0,.6), inset 0 -1px 0 rgba(255,255,255,.04);
  --tecla-lima: linear-gradient(180deg, #E1F98C 0%, #C6EA42 55%, #ABD02C 100%);
  --sombra: var(--relieve);
  color-scheme: dark;
}

/* ── Fondo: foco de luz arriba, sin rejilla ─────────────────────────────── */
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) body { background: #050607; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .app { background: radial-gradient(130% 55% at 50% -12%, #262A32 0%, #14161A 45%, var(--bg) 75%); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .app::before { opacity: 0; }
@media (min-width: 600px) { :root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .app { border: 1px solid rgba(255,255,255,.08); border-radius: 34px; box-shadow: 0 40px 80px rgba(0,0,0,.6); } }

/* ── Reinicio: fuera los bordes gruesos y las sombras duras de «Cañero» ───
   (no se toca la carta, el visor, el combate pixel ni la cámara) */
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .app :where(*:not(.carta, .carta *, .visor *, .combate *, .camara *, .escenario *, .entrada *)) {
  border-color: var(--linea); }
/* :where() deja el reinicio con poco peso (0,3,0): todo lo de abajo lo pisa */
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .app :where(*:not(.carta, .carta *, .visor, .visor *, .combate, .combate *, .camara *, .escenario *, .entrada *, .nav .bola, .ficha-yo, .rpg-revelado *)) {
  box-shadow: none; text-shadow: none; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .app :where(.sistema, .opcion, .btn, .chip, .cerrar, .filtros button, .interruptor, .m-t, .m-buscar, .accesos button, .accesos span, .forjar, .forjar span,
  .p2-intro, .vacio, .kpis > div, .menu-item, .mascota, .pase, .pase-celda, .calendario div, .mapa, .banda-jefe, .insignia, .check, .ej .ico, .barra,
  .fit-op, .fit-dia, .fit-vista, .fit-ins, .fit-quitar, .fit-nivel, .fit-nv, .ent-cab, .ent-kpis > div, .ent-d, .ent-avatar, .ent-iconos span, .ent-cl, .ent-tec-video,
  .rpg-bloque, .rpg-fam, .rpg-clase, .rpg-hab, .rpg-rama, .rpg-jefe, .rpg-stat, .rpg-clase-el, .rpg-acc, .rpg-anillo-caja, .rpg-cab, .rpg-heroe, .rpg-c4, .rpg-raza-op,
  .rpg-guia-btn, .rpg-atq, .rpg-porhacer, .rpg-rev-caja, .rpg-ayuda-caja, .rev2-caja, .hueco, .oferta, .marcos button, .emotes button, .objeto, .herm-prev, .que-es summary,
  .aspecto-op, .selector, .elige, .radar, .huecos-mini > div, .red-codigo, .p2-ico, .m-ico, .vacio-ico, .avatar) {
  border-width: 1px; }

/* ── Tipografía: números de reloj deportivo ─────────────────────────────── */
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .h1 { font: 700 30px/1.05 var(--f-titulo); letter-spacing: -.01em; text-transform: none; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .h2 { letter-spacing: -.005em; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .titulo { color: var(--tinta-2); letter-spacing: .14em; font-weight: 600; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .num { font-family: var(--f-titulo); letter-spacing: -.01em; }

/* ── Placas (los bloques de siempre, con relieve) ───────────────────────── */
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) :is(.sistema, .pase, .mapa, .banda-jefe, .p2 .sistema:not(.azul):not(.especial)) {
  background: var(--placa); border: 1px solid rgba(255,255,255,.055); border-radius: 22px; box-shadow: var(--relieve); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .mapa, :root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .banda-jefe { overflow: hidden; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .sistema.azul { background: var(--placa-alta); color: var(--tinta); border: 1px solid rgba(255,255,255,.07); border-radius: 24px;
  box-shadow: var(--relieve-alto), 0 0 0 1px rgba(207,240,79,.06);
  --tinta-2: #A9AEB9; --tinta-3: #7A7F8B; --sup-2: #22252C; --linea: rgba(255,255,255,.08); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .sistema.azul .titulo { color: var(--tinta); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .sistema.especial { color: var(--tinta); border: 1px solid rgba(207,240,79,.22); border-radius: 24px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(207,240,79,.16), transparent 55%), var(--placa-alta);
  box-shadow: var(--relieve-alto), 0 0 28px -6px rgba(207,240,79,.18); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .sistema.especial :is(.mut, .mut-3) { color: var(--tinta-2); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .sistema > .etiqueta, :root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .p2 .sistema > .etiqueta { background-clip: padding-box; top: -10px; left: 16px; padding: 4px 10px; border: 0; border-radius: 99px;
  box-shadow: 0 0 0 4px #101215;
  background: #2A3118; color: var(--acento); font: 700 10px/1.2 var(--f-titulo); letter-spacing: .16em; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .p2 .sistema > .etiqueta { background: color-mix(in srgb, var(--sc) 18%, #16181D); color: var(--sc); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .sistema:has(> .etiqueta) { margin-top: 24px; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .sistema.especial > .etiqueta { background: var(--acento); color: var(--acento-tinta); }

/* ── Teclas ─────────────────────────────────────────────────────────────── */
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .btn { border: 0; border-radius: 16px; letter-spacing: .06em; color: var(--tinta);
  background: linear-gradient(180deg, #30343C, #22252B); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 0 rgba(0,0,0,.35), 0 8px 18px -8px rgba(0,0,0,.8);
  transition: transform .08s, box-shadow .08s, filter .08s; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .btn:active { transform: translateY(2px); filter: brightness(.95); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 1px 4px rgba(0,0,0,.4), 0 2px 6px -2px rgba(0,0,0,.8); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) :is(.btn.azul, .p2 .btn.azul) { background: var(--tecla-lima); color: var(--acento-tinta);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(60,80,0,.35), 0 10px 22px -8px rgba(190,230,60,.55), 0 2px 4px rgba(0,0,0,.5); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .btn.linea { background: rgba(255,255,255,.03); color: var(--tinta); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .cerrar { border: 0; border-radius: 50%; background: linear-gradient(180deg, #2C3038, #1D2025); color: var(--tinta);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 14px -4px rgba(0,0,0,.8); }

/* ── Chips, filtros, interruptor (control segmentado hundido) ───────────── */
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .chip { border: 0; border-radius: 99px; background: rgba(255,255,255,.06); color: var(--tinta); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .chip.sel { background: var(--acento); color: var(--acento-tinta); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .filtros button { border: 0; border-radius: 99px; background: rgba(255,255,255,.05); color: var(--tinta-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); letter-spacing: .06em; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) :is(.filtros button.sel, .p2 .filtros button.sel, .p2 .chip.sel) { background: var(--tecla-lima); color: var(--acento-tinta); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 6px 14px -6px rgba(190,230,60,.6); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .interruptor { border: 0; border-radius: 16px; padding: 4px; gap: 4px; background: #0A0B0D; box-shadow: var(--hundido); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .interruptor button { border-radius: 12px; background: transparent; color: var(--tinta-3); letter-spacing: .08em; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .interruptor button.sel { background: var(--placa-alta); color: var(--acento); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 4px 10px -2px rgba(0,0,0,.8); }

/* ── Barras de progreso: canal hundido y relleno con brillo ─────────────── */
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .barra { border: 0; border-radius: 99px; background: #0A0B0D; box-shadow: var(--hundido); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .barra > i { border: 0; border-radius: 99px; background: linear-gradient(180deg, #E6FB9A, #C2E63E 60%, #A5CB28); box-shadow: 0 0 10px rgba(207,240,79,.35); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .banda .barra { background: #0A0B0D; }

/* ── Opciones (misión diaria, cuestionarios) ────────────────────────────── */
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .opcion { border: 0; border-radius: 16px; background: linear-gradient(180deg, #23262D, #1B1E23);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 14px -8px rgba(0,0,0,.9); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .opcion:active { transform: translateY(1px); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .opcion.sel { background: linear-gradient(180deg, #2A2F22, #20241A); box-shadow: inset 0 0 0 1.5px var(--acento), 0 0 22px -6px rgba(207,240,79,.45); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .opcion .cam, :root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .sistema:not(.azul) .opcion .cam { color: var(--acento); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .ej .ico { border: 0; border-radius: 14px; background: var(--tecla-lima); color: var(--acento-tinta); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 6px 14px -6px rgba(190,230,60,.5); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .ej.hecho .ico { background: rgba(207,240,79,.1); color: var(--acento); box-shadow: inset 0 0 0 1px rgba(207,240,79,.25); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .ej + .ej { border-top: 1px solid var(--linea); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .check { border-radius: 50%; } :root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .check.si { background: var(--ok); }

/* ── Cabecera del jugador (aventura): placa alta con el retrato 3D ───────── */
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .banda { margin: -14px -16px 16px; padding: 18px 16px 14px; border: 0; border-radius: 0 0 30px 30px;
  background: radial-gradient(90% 120% at 100% 0%, rgba(207,240,79,.08), transparent 55%), linear-gradient(180deg, #1C1F25, #131519);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.06), 0 20px 40px -20px rgba(0,0,0,.9); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .avatar { width: 58px; height: 58px; border: 0; border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 10px 22px -8px rgba(0,0,0,.9), 0 0 0 3px #101215, 0 0 0 4px rgba(207,240,79,.35); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .rango { color: #14161A; background: linear-gradient(160deg, #F4F6F9 0%, #B9C0CB 45%, #6E7581 100%);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .banda .chip { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .banda .chip.naranja { color: var(--naranja); } :root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .banda .chip.amarillo { color: var(--amarillo); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .banda .chip.lima { color: var(--acento); }

/* ── Barra de abajo: dock flotante de cristal ───────────────────────────── */
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .nav { left: 12px; right: 12px; bottom: calc(10px + max(env(safe-area-inset-bottom), var(--safe-area-inset-bottom, 0px))); height: 66px; padding-bottom: 0;
  border: 1px solid rgba(255,255,255,.08); border-radius: 26px; background: rgba(24,26,31,.82); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 40px -12px rgba(0,0,0,.9); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .nav button { color: #6F7480; letter-spacing: .08em; font-weight: 600; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .nav button.activa { color: var(--tinta); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .nav button.activa svg { color: var(--acento); filter: drop-shadow(0 0 6px rgba(207,240,79,.45)); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .nav button.centro span.bola { transform: none; border: 0; border-radius: 50%; width: 58px; height: 58px; margin-top: -34px;
  background: radial-gradient(circle at 34% 28%, #F6FFD0 0%, #D6F35E 32%, #A9CF2C 72%, #7E9E1A 100%); color: #12150A;
  box-shadow: 0 0 0 5px #0E0F12, 0 0 0 6px rgba(255,255,255,.06), 0 14px 26px -6px rgba(170,210,50,.55), inset 0 -4px 8px rgba(60,80,0,.35); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .nav button.centro span.bola svg { transform: none; color: #12150A; filter: none; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .cerrar svg { width: 20px; height: 20px; }

/* ── Cartas en la colección: que se vean como objetos sobre la mesa ─────── */
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .rejilla { gap: 12px; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .rejilla .carta.carta-tcg { box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 14px 22px -10px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.04); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .insignia { border: 0; border-radius: 99px; box-shadow: 0 4px 10px rgba(0,0,0,.6); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .insignia.ok { background: var(--acento); color: var(--acento-tinta); }

/* ── Capas, cabeceras de pantalla y menú ────────────────────────────────── */
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .capa:not(.combate) { background: color-mix(in srgb, #0E0F12 92%, transparent); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) :is(#capa-extra > .barra-sup, .p2-barra) { border-bottom: 0; border-radius: 0 0 26px 26px; background-image: none; background-color: #16181D;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.06), 0 16px 30px -18px rgba(0,0,0,.95); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) :is(#capa-extra > .barra-sup, .p2-barra, .m-cab) .cerrar { background: linear-gradient(180deg, #2C3038, #1D2025); border: 0; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) :is(.p2-ico, .m-ico, .vacio-ico, .accesos span, .forjar span) { clip-path: none; border: 0; border-radius: 14px; transform: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sc, var(--rc, var(--acento))) 100%, #fff 18%), color-mix(in srgb, var(--sc, var(--rc, var(--acento))) 82%, #000));
  color: #101215; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.25), 0 8px 16px -8px color-mix(in srgb, var(--sc, var(--rc, var(--acento))) 70%, transparent); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .vacio-ico svg { transform: none; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .p2-intro { border: 1px solid color-mix(in srgb, var(--sc) 22%, transparent); border-radius: 20px; background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--sc) 10%, transparent), transparent 60%), var(--placa); box-shadow: var(--relieve); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .que-es summary { border-radius: 99px; background: rgba(255,255,255,.06); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .que-es summary::before { border-radius: 50%; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .vacio { border: 1px dashed rgba(255,255,255,.14); border-radius: 22px; background: rgba(255,255,255,.015); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .m-cab { border-bottom: 0; border-radius: 0 0 30px 30px; background-image: none; background-color: #16181D; box-shadow: inset 0 -1px 0 rgba(255,255,255,.06), 0 16px 30px -18px rgba(0,0,0,.95); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .m-buscar { border: 0; border-radius: 16px; background: #0A0B0D; box-shadow: var(--hundido); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .m-t { border: 1px solid rgba(255,255,255,.055); border-radius: 22px; background: var(--placa); box-shadow: var(--relieve); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .m-t:active { transform: translateY(2px); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .m-t.grande { color: var(--tinta); background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--sc) 20%, transparent), transparent 60%), var(--placa-alta);
  border-color: color-mix(in srgb, var(--sc) 25%, transparent); box-shadow: var(--relieve-alto); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .m-t.grande small { color: var(--tinta-2); font-weight: 500; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .m-t.grande .m-ico { width: 48px; height: 48px; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .m-sec-tit span { clip-path: none; border-radius: 99px; background: color-mix(in srgb, var(--sc) 14%, transparent); color: var(--sc); padding: 6px 14px; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .m-sec-tit::after { height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--sc) 40%, transparent), transparent); opacity: 1; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .m-modo { border-radius: 18px; border: 1px dashed rgba(255,255,255,.14); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .accesos button, :root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .forjar { border: 1px solid rgba(255,255,255,.055); border-radius: 20px; background: var(--placa); box-shadow: var(--relieve); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .forjar { border-color: color-mix(in srgb, var(--rc) 30%, transparent); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) :is(.kpis > div, .p2 .kpis > div) { border: 1px solid rgba(255,255,255,.055); border-radius: 18px; background: var(--placa); box-shadow: var(--relieve); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .menu-item, :root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .p2 .menu-item { border: 1px solid rgba(255,255,255,.055); border-radius: 18px; background: var(--placa); box-shadow: var(--relieve); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .p2 .menu-item span { border-radius: 12px; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .titulo.sub-tit::before, :root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .sub-tit > .titulo::before { border: 0; border-radius: 50%; width: 8px; height: 8px; box-shadow: 0 0 8px var(--sc); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .aspecto-op { border: 1px solid rgba(255,255,255,.07); border-radius: 18px; background: var(--placa); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .aspecto-op i { border: 0; border-radius: 10px; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .aspecto-op.sel { outline: 2px solid var(--acento); outline-offset: 2px; }
.a-titanio i { background: radial-gradient(60% 120% at 30% 0%, #3A3F49, transparent 70%), linear-gradient(90deg, #1E2127 0 62%, #CFF04F 62% 74%, #0E0F12 74%) !important; border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 4px 10px rgba(0,0,0,.35); }

/* listas, huecos y piezas varias */
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) :is(.mascota, .pase-celda, .calendario div, .hueco, .oferta, .marcos button, .emotes button, .objeto, .herm-prev, .selector, .elige, .huecos-mini > div, .red-codigo) {
  border-radius: 14px; border-color: rgba(255,255,255,.07); background-color: var(--sup-2); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) :is(.mascota.eq, .pase-celda.lista) { background: var(--tecla-lima); color: var(--acento-tinta); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .calendario .hecho { background: rgba(207,240,79,.12); color: var(--acento); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .calendario .gordo { background: linear-gradient(180deg, #F0D58E, #D3AE4C); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .pase-cab { background: #0A0B0D; color: var(--acento); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .nodo i { border: 0; border-radius: 12px; transform: none; background: linear-gradient(180deg, #2C3038, #16181C); box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 8px 14px -4px rgba(0,0,0,.9); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .nodo i svg { transform: none; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .nodo span { border-radius: 6px; background: rgba(12,13,16,.85); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .toast { border: 0; border-radius: 16px; background: rgba(32,35,42,.94); color: var(--tinta); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 16px 32px -10px rgba(0,0,0,.9), 0 0 0 1px rgba(207,240,79,.18); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .radar { border-color: rgba(255,255,255,.08); background: radial-gradient(circle, rgba(207,240,79,.08), transparent 70%), #121418; }

/* ── VERSIÓN DE DEPORTE (entreno normal) ────────────────────────────────── */
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .ent-cab { border: 1px solid rgba(255,255,255,.06); border-radius: 28px; background: radial-gradient(100% 120% at 100% 0%, rgba(207,240,79,.1), transparent 55%), var(--placa-alta); box-shadow: var(--relieve-alto); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .ent-avatar { border: 0; border-radius: 18px; background: var(--tecla-lima); color: var(--acento-tinta); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 18px -6px rgba(190,230,60,.5); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .ent-avatar.peq { border-radius: 50%; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) :is(.ent-kpis > div, .fit-kpis > div) { border: 1px solid rgba(255,255,255,.055); border-radius: 18px; background: var(--placa); box-shadow: var(--relieve); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .sistema :is(.ent-kpis > div, .fit-kpis > div) { background: rgba(255,255,255,.03); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .ent-d { border: 0; border-radius: 14px; background: #121418; box-shadow: var(--hundido); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .ent-d.hecho { background: linear-gradient(180deg, #263019, #1B2014); box-shadow: inset 0 0 0 1px rgba(207,240,79,.18); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .ent-d.hecho :is(small, b) { color: #DDEFA0; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .ent-d.hoy { box-shadow: inset 0 0 0 1.5px var(--acento), 0 0 16px -4px rgba(207,240,79,.5); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .ent-d.ok { background: linear-gradient(180deg, #2C3320, #20251A); color: var(--acento); box-shadow: inset 0 0 0 1px rgba(207,240,79,.3); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .ent-iconos span { border: 0; border-radius: 12px; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) :is(.ent-cl, .ent-tec-video, .fit-op, .fit-dia, .fit-vista, .fit-ins, .fit-quitar, .fit-nivel) { border-radius: 16px; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .fit-nv { border-radius: 24px; background: var(--placa-alta); box-shadow: var(--relieve-alto); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) :is(.ent-tabla-cab) { border-bottom-width: 1px; border-color: var(--linea-2); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) :is(.ent-fila-ej + .ent-fila-ej, .ent-hoy-ej + .ent-hoy-ej) { border-top-style: solid; border-color: var(--linea); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .fit-op.sel { box-shadow: inset 0 0 0 1.5px var(--acento), 0 0 18px -6px rgba(207,240,79,.45); }

/* ── VERSIÓN DE CARTAS (rol): placas con el color de su raza o clase, apagado ── */
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) :is(.rpg-bloque, .rpg-fam, .rpg-clase, .rpg-hab, .rpg-rama, .rpg-jefe, .rpg-stat, .rpg-clase-el, .rpg-acc, .rpg-anillo-caja, .rpg-c4, .rpg-raza-op, .rpg-guia-btn, .rpg-atq) {
  border: 1px solid color-mix(in srgb, var(--c, #fff) 16%, transparent); border-radius: 18px; background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--c, transparent) 10%, transparent), transparent 60%), var(--placa); box-shadow: var(--relieve); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) :is(.rpg-bloque.tuya, .rpg-fam.tuya, .rpg-clase.tuya, .rpg-rama.sel, .rpg-hab.puesto, .rpg-c4.tuya) { box-shadow: inset 0 0 0 1.5px var(--c, var(--acento)), var(--relieve), 0 0 24px -8px var(--c, var(--acento)); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) :is(.rpg-cab, .rpg-heroe) { border: 1px solid rgba(255,255,255,.06); border-radius: 26px; background: radial-gradient(100% 120% at 100% 0%, color-mix(in srgb, var(--c, var(--acento)) 16%, transparent), transparent 60%), var(--placa-alta); box-shadow: var(--relieve-alto); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .rpg-cab::after { display: none; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) :is(.rpg-cab-ico, .rpg-cab-foto, .rpg-retrato) { border-radius: 18px; border: 0; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) :is(.rpg-acc .ico, .rpg-atq i, .rpg-stat .sig, .rpg-hab .ico, .rpg-rama .ico, .rpg-stat .ctrl button, .rpg-previa div, .rpg-mult div, .rpg-imbuir button, .rpg-clase img, .rpg-jefe img, .rpg-huecos div) {
  border-radius: 12px; border-width: 0; transform: none; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) :is(.rpg-etq, .rpg-tag, .rpg-que, .rpg-acc em, .rpg-ej em) { border-radius: 99px; border: 0; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .rpg-porhacer { border: 1px solid rgba(207,240,79,.25); border-radius: 22px; color: var(--tinta); background: radial-gradient(120% 140% at 0% 0%, rgba(207,240,79,.16), transparent 55%), var(--placa-alta); box-shadow: var(--relieve-alto); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) :is(.rpg-prog, .rpg-prog i) { border-radius: 99px; border: 0; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) :is(.rpg-rev-caja, .rpg-ayuda-caja, .rev2-caja) { border: 1px solid rgba(255,255,255,.08); border-radius: 26px; background: var(--placa-alta); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .rpg-rama li { border-radius: 99px; border: 0; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .huecos-mini > div { background: #121418; box-shadow: var(--hundido); }

/* en titanio, también fuera la raya de color de un solo lado */
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) :is(.fit-aviso, .fit-dia.hoy, .herm, .conjunto, .sistema.conjunto, .fila-liga.sube, .fila-liga.baja, .rpg-habs button, .rpg-ciclo li, .rpg-hab, .rpg-rev-caja p.sirve) {
  --halo: var(--c, var(--sc, var(--hc, var(--cj, var(--acento)))));
  border-left-width: 1px !important; border-left-style: solid !important; border-color: color-mix(in srgb, var(--halo) 30%, transparent) !important;
  border-radius: 16px !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--halo) 10%, transparent), 0 8px 22px -10px color-mix(in srgb, var(--halo) 45%, transparent) !important; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .fit-aviso.sube, :root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .fila-liga.sube { --halo: var(--ok); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .fit-aviso.baja { --halo: var(--naranja); } :root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .fila-liga.baja { --halo: var(--mal); }

@media (prefers-reduced-motion: reduce) { :root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .btn, :root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .m-t { transition: none; } }

/* ── Cabecera de aventura con el RETRATO 3D grande (portada de juego) ─────
   El retrato de tu raza (render 3D sobre negro) ocupa la derecha de la franja
   y se funde con el grafito; el nombre, el nivel y la barra quedan delante.
   Solo cuando hay retrato 3D; si no, se queda el avatar pequeño de siempre. */
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .banda:has(.avatar .retrato-3d) { position: relative; overflow: hidden; min-height: 178px; padding-top: 22px; isolation: isolate; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .banda:has(.avatar .retrato-3d) .avatar { position: absolute; z-index: -1; right: 0; top: 0; bottom: 0; width: 56%; height: auto; border-radius: 0; box-shadow: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(0deg, transparent 0%, #000 38%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(0deg, transparent 0%, #000 38%); mask-composite: intersect; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .banda:has(.avatar .retrato-3d) .avatar img { object-fit: cover; object-position: 50% 8%; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .banda:has(.avatar .retrato-3d) .cabecera { align-items: flex-start; padding-right: 34%; min-height: 104px; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .banda:has(.avatar .retrato-3d) .cabecera > div:not(.avatar):not(.rango) .fila.entre { flex-direction: column; align-items: flex-start; gap: 2px; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .banda:has(.avatar .retrato-3d) .h2 { font-size: 24px; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .banda:has(.avatar .retrato-3d) .rango { position: absolute; right: 14px; top: 16px; width: 36px; height: 40px; font-size: 17px; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .banda:has(.avatar .retrato-3d) .chips .chip { background: rgba(14,15,18,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .ico-correr { background: var(--tecla-lima) !important; color: var(--acento-tinta) !important; border: 0 !important; }
/* calendario de calor: huecos hundidos en vez de cuadrados negros */
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) :is(.cal-calor i, .ent-calor i) { border-radius: 6px; border-color: transparent; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) :is(.cal-calor i, .ent-calor i) { box-shadow: inset 0 1px 3px rgba(0,0,0,.5); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .barras-sem i { border-radius: 8px 8px 3px 3px; }
/* botón sol/luna del menú (02-10) */
.m-luz svg { width: 20px; height: 20px; }
/* pestañas «esta semana / la pasada» como control segmentado (02-10) */
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .fit-vista { border: 0; border-radius: 14px; padding: 4px; gap: 4px; background: #0A0B0D; box-shadow: var(--hundido); }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .fit-vista button { border-radius: 10px; color: var(--tinta-3); }
:root[data-theme="titanio"] .fit-vista button.sel { background: var(--placa-alta); color: var(--acento); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 4px 10px -2px rgba(0,0,0,.8); }
/* forja/tienda: cifras sobre la escena = cristal oscuro en los dos titanios (02-10) */
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .escena-fondo .kpis > div { background: rgba(14,15,18,.72) !important; color: #fff; border: 1px solid rgba(255,255,255,.12) !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 10px 22px -10px rgba(0,0,0,.8) !important; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .escena-fondo .kpis :is(b, small, span) { color: #fff; }
:root:is([data-theme="titanio"], [data-theme="titanio-claro"]) .escena-fondo { border-radius: 0 0 26px 26px; }