/* ═══════════════════════════════════════════════════════════════════════════
   Aspecto «Titanio claro» (02-10). Cristian: «el mismo, pero con el fondo en
   blanco, aunque tenga los recuadros en gris… y poder seleccionarlo fácil».

   Usa TODAS las reglas de aspecto-titanio.css (que valen para los dos) y aquí
   solo se cambian los colores:
   - página blanca, recuadros grises con el mismo relieve (filo de luz arriba y
     sombra suave debajo), botones-tecla claros;
   - «islas» de grafito: la cabecera del jugador (con el retrato 3D, que tiene
     fondo negro), la de entreno y las barras de título de las capas. Con esas
     variables locales todo lo de dentro se pinta como en Titanio oscuro;
   - el lima, en relleno; para TEXTO sobre blanco, un lima oliva que se lee.
   Va DESPUÉS de aspecto-titanio.css.
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="titanio-claro"] {
  --bg: #FFFFFF; --bg-2: #EDF0F3; --sup: #F2F4F7; --sup-2: #EAEDF1;
  --tinta: #15171C; --tinta-2: #4B515E; --tinta-3: #7A808D; --linea: rgba(20,24,32,.09); --linea-2: rgba(20,24,32,.16);
  --oscuro: #16181D; --oscuro-2: #1E2127;
  --acento: #6A8C00; --acento-2: #8FB31A; --acento-tinta: #10130A; --acento-suave: rgba(150,190,20,.16); --brillo: rgba(160,200,30,.35);
  --naranja: #C46A2E; --amarillo: #B8901F; --cian: #2C7DB5; --rosa: #C2507A;
  --ok: #2E9E5E; --mal: #D0493A; --aviso: #C46A2E;
  --c-fue: #C46A2E; --c-vel: #2C7DB5; --c-nuc: #B8901F; --c-men: #2E9E5E;
  --s-prog: #6A8C00; --s-soc: #2C7DB5; --s-avn: #C46A2E; --s-app: #6B5CC9; --s-oscuro: #16181D;
  --placa: linear-gradient(180deg, #F5F7F9 0%, #E9ECF0 100%);
  --placa-alta: linear-gradient(180deg, #F8F9FB 0%, #ECEFF3 100%);
  --relieve: inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(20,24,32,.05), 0 1px 2px rgba(20,24,32,.10), 0 14px 26px -14px rgba(20,24,32,.30);
  --relieve-alto: inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(20,24,32,.06), 0 2px 4px rgba(20,24,32,.10), 0 22px 38px -18px rgba(20,24,32,.36);
  --hundido: inset 0 2px 4px rgba(20,24,32,.13), inset 0 -1px 0 rgba(255,255,255,.9);
  color-scheme: light;
}

/* ── Islas de grafito: cabeceras y barras de título ─────────────────────── */
:root[data-theme="titanio-claro"] :is(.banda, .ent-cab, #capa-extra > .barra-sup, .p2-barra, .m-cab, .pase-cab, .fit-nv) {
  --tinta: #ECEEF2; --tinta-2: #A9AEB9; --tinta-3: #8A8F9B; --linea: rgba(255,255,255,.08); --linea-2: rgba(255,255,255,.14);
  --acento: #CFF04F; --acento-suave: rgba(207,240,79,.14); --brillo: rgba(207,240,79,.35);
  --naranja: #E39A62; --amarillo: #E8C66E; --sup: #181A1F; --sup-2: #1E2127; --bg-2: #14161A;
  --s-prog: #CFF04F; --s-soc: #7FB9E3; --s-avn: #E39A62; --s-app: #ABA2E6;
  --placa: linear-gradient(180deg, #1F2228 0%, #17191E 100%); --placa-alta: linear-gradient(180deg, #262A31 0%, #1B1E23 100%);
  --hundido: inset 0 2px 5px rgba(0,0,0,.6), inset 0 -1px 0 rgba(255,255,255,.04);
  color: var(--tinta); }
:root[data-theme="titanio-claro"] .fit-nv { background: linear-gradient(180deg, #23262D, #16181D) !important; border: 0; box-shadow: 0 2px 4px rgba(20,24,32,.12), 0 22px 40px -18px rgba(20,24,32,.45); }
:root[data-theme="titanio-claro"] .fit-vista { border: 0; border-radius: 14px; padding: 4px; gap: 4px; background: #E7EAEE; }
:root[data-theme="titanio-claro"] .fit-vista button { border-radius: 10px; color: var(--tinta-3); }
:root[data-theme="titanio-claro"] .fit-vista button.sel { background: linear-gradient(180deg, #FFFFFF, #F1F3F6); color: var(--tinta); box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -2px 0 #B5D92E, 0 4px 10px -4px rgba(20,24,32,.35); }
:root[data-theme="titanio-claro"] .ent-cab { box-shadow: 0 2px 4px rgba(20,24,32,.12), 0 22px 40px -18px rgba(20,24,32,.45); }
:root[data-theme="titanio-claro"] .banda { box-shadow: 0 22px 40px -22px rgba(20,24,32,.45); }
:root[data-theme="titanio-claro"] :is(#capa-extra > .barra-sup, .p2-barra, .m-cab) { box-shadow: 0 16px 30px -18px rgba(20,24,32,.5); }

/* ── Fondo blanco ───────────────────────────────────────────────────────── */
:root[data-theme="titanio-claro"] body { background: #E6E9ED; }
:root[data-theme="titanio-claro"] .app { background: radial-gradient(120% 40% at 50% -8%, #F1F3F6 0%, transparent 70%), #FFFFFF; }
@media (min-width: 600px) { :root[data-theme="titanio-claro"] .app { border-color: rgba(20,24,32,.10); box-shadow: 0 40px 80px rgba(20,24,32,.25); } }
:root[data-theme="titanio-claro"] .capa:not(.combate) { background: color-mix(in srgb, #FFFFFF 94%, transparent); }   /* el combate sigue de noche (02-10) */

/* ── Bordes finos que en oscuro eran blancos ────────────────────────────── */
:root[data-theme="titanio-claro"] :is(.sistema, .pase, .mapa, .banda-jefe, .p2 .sistema:not(.azul):not(.especial), .m-t, .accesos button, .forjar,
  .kpis > div, .p2 .kpis > div, .menu-item, .p2 .menu-item, .aspecto-op, .ent-kpis > div, .fit-kpis > div) { border-color: rgba(20,24,32,.07); }
:root[data-theme="titanio-claro"] .sistema.azul { border-color: rgba(20,24,32,.08); box-shadow: var(--relieve-alto), 0 0 0 1px rgba(150,190,20,.10);
  --tinta-2: #4B515E; --tinta-3: #7A808D; --sup-2: #EAEDF1; --linea: rgba(20,24,32,.09); }
:root[data-theme="titanio-claro"] .sistema.especial { border-color: rgba(150,190,20,.35);
  background: radial-gradient(120% 140% at 0% 0%, rgba(207,240,79,.35), transparent 60%), var(--placa-alta); }
:root[data-theme="titanio-claro"] :is(.forjar) { border-color: color-mix(in srgb, var(--rc) 35%, transparent); }

/* etiquetas: pastilla lima clara con tinta oliva, recortada en blanco */
:root[data-theme="titanio-claro"] :is(.sistema > .etiqueta, .p2 .sistema > .etiqueta) { background: #E6F4AE; color: #3E5300; box-shadow: 0 0 0 4px #FFFFFF; }
:root[data-theme="titanio-claro"] .p2 .sistema > .etiqueta { background: color-mix(in srgb, var(--sc) 16%, #FFFFFF); color: var(--sc); }
:root[data-theme="titanio-claro"] .sistema.especial > .etiqueta { background: var(--tecla-lima); color: var(--acento-tinta); }

/* ── Teclas claras ──────────────────────────────────────────────────────── */
:root[data-theme="titanio-claro"] .btn { color: var(--tinta); background: linear-gradient(180deg, #FFFFFF, #E8EBEF);
  box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -2px 0 rgba(20,24,32,.09), 0 0 0 1px rgba(20,24,32,.08), 0 8px 16px -10px rgba(20,24,32,.45); }
:root[data-theme="titanio-claro"] .btn:active { box-shadow: inset 0 1px 3px rgba(20,24,32,.18), 0 0 0 1px rgba(20,24,32,.08); }
:root[data-theme="titanio-claro"] :is(.btn.azul, .p2 .btn.azul) { color: var(--acento-tinta);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(60,80,0,.30), 0 10px 20px -10px rgba(120,160,20,.6), 0 0 0 1px rgba(90,120,0,.25); }
:root[data-theme="titanio-claro"] .btn.linea { background: transparent; box-shadow: inset 0 0 0 1px rgba(20,24,32,.18); }
:root[data-theme="titanio-claro"] .cerrar { background: linear-gradient(180deg, #FFFFFF, #E8EBEF); color: var(--tinta);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 0 0 1px rgba(20,24,32,.08), 0 6px 14px -6px rgba(20,24,32,.45); }
:root[data-theme="titanio-claro"] :is(#capa-extra > .barra-sup, .p2-barra, .m-cab) .cerrar { background: linear-gradient(180deg, #2C3038, #1D2025); color: #ECEEF2; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }

/* ── Chips, filtros, interruptor ────────────────────────────────────────── */
:root[data-theme="titanio-claro"] .chip { background: rgba(20,24,32,.05); box-shadow: inset 0 0 0 1px rgba(20,24,32,.07); }
:root[data-theme="titanio-claro"] .banda .chip { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); color: #ECEEF2; }
:root[data-theme="titanio-claro"] :is(.chip.sel, .insignia.ok) { background: var(--tecla-lima); color: var(--acento-tinta); }
:root[data-theme="titanio-claro"] .filtros button { background: rgba(20,24,32,.04); color: var(--tinta-2); box-shadow: inset 0 0 0 1px rgba(20,24,32,.09); }
:root[data-theme="titanio-claro"] .interruptor { background: #E7EAEE; }
:root[data-theme="titanio-claro"] .interruptor button.sel { color: var(--tinta); background: linear-gradient(180deg, #FFFFFF, #F1F3F6);
  box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -2px 0 #B5D92E, 0 4px 10px -4px rgba(20,24,32,.35); }

/* ── Barras de progreso ─────────────────────────────────────────────────── */
:root[data-theme="titanio-claro"] .barra { background: #E3E6EA; }
:root[data-theme="titanio-claro"] .barra > i { box-shadow: 0 0 8px rgba(160,200,30,.35), inset 0 -1px 0 rgba(60,80,0,.25); }
:root[data-theme="titanio-claro"] .banda .barra { background: #0A0B0D; }

/* ── Opciones ───────────────────────────────────────────────────────────── */
:root[data-theme="titanio-claro"] .opcion { background: linear-gradient(180deg, #FFFFFF, #EEF1F4);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 0 0 1px rgba(20,24,32,.07), 0 6px 12px -8px rgba(20,24,32,.35); }
:root[data-theme="titanio-claro"] .opcion.sel { background: linear-gradient(180deg, #F7FBE6, #EAF4C4); box-shadow: inset 0 0 0 1.5px #9DC31F, 0 6px 16px -8px rgba(120,160,20,.55); }
:root[data-theme="titanio-claro"] .ej.hecho .ico { background: rgba(150,190,20,.12); box-shadow: inset 0 0 0 1px rgba(120,160,20,.3); }

/* ── Dock claro de cristal ──────────────────────────────────────────────── */
:root[data-theme="titanio-claro"] .nav { border-color: rgba(20,24,32,.08); background: rgba(255,255,255,.84);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 0 0 1px rgba(20,24,32,.04), 0 18px 36px -14px rgba(20,24,32,.35); }
:root[data-theme="titanio-claro"] .nav button { color: #8A909C; }
:root[data-theme="titanio-claro"] .nav button.activa { color: var(--tinta); }
:root[data-theme="titanio-claro"] .nav button.activa svg { color: #7FA400; filter: none; }
:root[data-theme="titanio-claro"] .nav button.centro span.bola { box-shadow: 0 0 0 5px #FFFFFF, 0 0 0 6px rgba(20,24,32,.07), 0 14px 24px -8px rgba(120,160,20,.6), inset 0 -4px 8px rgba(60,80,0,.3); }

/* ── Cartas sobre blanco: sombra de mesa más suave ──────────────────────── */
:root[data-theme="titanio-claro"] .rejilla .carta.carta-tcg { box-shadow: 0 1px 2px rgba(20,24,32,.25), 0 14px 22px -12px rgba(20,24,32,.55); }

/* ── Menú y pantallas ───────────────────────────────────────────────────── */
:root[data-theme="titanio-claro"] .que-es summary { background: rgba(20,24,32,.06); color: var(--tinta); }
:root[data-theme="titanio-claro"] .vacio { border-color: rgba(20,24,32,.16); background: rgba(20,24,32,.02); }
:root[data-theme="titanio-claro"] .m-buscar { background: #EEF1F4; }
:root[data-theme="titanio-claro"] .m-modo { border-color: rgba(20,24,32,.16); }
:root[data-theme="titanio-claro"] .m-t.grande { background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--sc) 18%, transparent), transparent 60%), var(--placa-alta);
  border-color: color-mix(in srgb, var(--sc) 30%, transparent); }
:root[data-theme="titanio-claro"] .sistema :is(.ent-kpis > div, .fit-kpis > div) { background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px rgba(20,24,32,.06); }
:root[data-theme="titanio-claro"] :is(.mascota, .pase-celda, .calendario div, .hueco, .oferta, .marcos button, .emotes button, .objeto, .herm-prev, .selector, .elige, .red-codigo) {
  border-color: rgba(20,24,32,.08); }
:root[data-theme="titanio-claro"] .huecos-mini > div { background: #EEF1F4; }
:root[data-theme="titanio-claro"] .radar { border-color: rgba(20,24,32,.08); background: radial-gradient(circle, rgba(150,190,20,.10), transparent 70%), #F3F5F8; }
:root[data-theme="titanio-claro"] .calendario .hecho { background: #EAF4C4; color: #3E5300; }
:root[data-theme="titanio-claro"] :is(.rpg-rev-caja, .rpg-ayuda-caja, .rev2-caja) { border-color: rgba(20,24,32,.08); }
:root[data-theme="titanio-claro"] .vc-x { color: #fff; }

/* ── Versión de deporte ─────────────────────────────────────────────────── */
:root[data-theme="titanio-claro"] .ent-d { background: #EEF1F4; }
:root[data-theme="titanio-claro"] .ent-d.hecho { background: linear-gradient(180deg, #F3F9DC, #E5F0BC); box-shadow: inset 0 0 0 1px rgba(120,160,20,.25); }
:root[data-theme="titanio-claro"] .ent-d.hecho :is(small, b) { color: #3E5300; }
:root[data-theme="titanio-claro"] .ent-d.ok { background: linear-gradient(180deg, #F3F9DC, #E5F0BC); color: #3E5300; }
:root[data-theme="titanio-claro"] :is(.cal-calor i, .ent-calor i) { box-shadow: inset 0 1px 2px rgba(20,24,32,.15); }

/* muestra en Ajustes y en la bienvenida */
.a-titanio-claro i { background: radial-gradient(60% 120% at 30% 0%, #FFFFFF, transparent 70%), linear-gradient(90deg, #FFFFFF 0 34%, #E3E6EA 34% 62%, #CFF04F 62% 74%, #1B1E23 74%) !important;
  border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(20,24,32,.12), 0 4px 10px rgba(20,24,32,.18); }