/* Karma Tune — modo claro y adaptación a iPad / computadora.
   Se carga después de index.html y screens.css. */

/* =================== MODO CLARO =================== */
html[data-theme="light"]{
  --bg:#f5f5f7; --card:#ffffff; --card-2:rgba(0,0,0,.06); --line:rgba(0,0,0,.10);
  --gold:#a8822f; --gold-hi:#94701f; --ink:#1d1d1f; --muted:#6e6e73; --muted-2:#a1a1a6;
  --panel:#121212; --wood:#fff;
  --shadow:0 1px 2px rgba(0,0,0,.06),0 1px 1px rgba(0,0,0,.04);
  color-scheme:light;
}
html[data-theme="light"] .bg{background:var(--bg)}
html[data-theme="light"] .bg.tuned{background:radial-gradient(ellipse at 50% 30%,rgba(201,164,92,.18),transparent 65%),var(--bg)}

/* tarjetas blancas con sombra suave, como en iOS */
html[data-theme="light"] :is(.pill,.list,.k-who,.k-streak,.k-card,.k-lvl,.k-opt,.k-plan,.k-node,.k-badges button,.hud div,.rhythms button,.roots button,.chordbox,.rnd){box-shadow:var(--shadow)}
html[data-theme="light"] .pill{background:#fff}
html[data-theme="light"] .pill:active{background:#ececf0}

/* afinador */
html[data-theme="light"] .meter .t{stroke:rgba(0,0,0,.18)}
html[data-theme="light"] .meter .t.mj{stroke:rgba(0,0,0,.38)}
html[data-theme="light"] .micbig{background:#fff;box-shadow:var(--shadow)}
html[data-theme="light"] .head .str{stroke:rgba(60,50,40,.35)}
html[data-theme="light"] .head .lab{fill:#fff;stroke:rgba(0,0,0,.12)}
html[data-theme="light"] .head .peg.on .lab{fill:#fff0f3}
html[data-theme="light"] .head .peg.sel .lab,html[data-theme="light"] .head .peg.ok .lab{fill:#f8f1e2}
html[data-theme="light"] .head .nut{stroke:rgba(0,0,0,.18);stroke-width:2}
html[data-theme="light"] .sp{background:#fff;border-color:rgba(0,0,0,.12)}
html[data-theme="light"] .sp.on{background:#fff0f3}
html[data-theme="light"] .k-flash,html[data-theme="light"] .k-splash video{mix-blend-mode:multiply;filter:invert(1) hue-rotate(180deg)}

/* hojas, barras y avisos */
html[data-theme="light"] .scrim{background:rgba(0,0,0,.25)}
html[data-theme="light"] .sheet{background:rgba(242,242,247,.96)}
html[data-theme="light"] .sheet .grab{background:rgba(0,0,0,.2)}
html[data-theme="light"] nav.tabs{background:rgba(255,255,255,.86)}
html[data-theme="light"] .install,html[data-theme="light"] .k-toast{background:rgba(255,255,255,.96);box-shadow:0 8px 30px rgba(0,0,0,.15)}
html[data-theme="light"] .seg button[aria-pressed="true"]{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12)}
html[data-theme="light"] .tg{background:rgba(120,120,128,.18)}

/* herramientas */
html[data-theme="light"] .chordbox .str{stroke:rgba(0,0,0,.55)}
html[data-theme="light"] .chordbox .fret{stroke:rgba(0,0,0,.18)}
html[data-theme="light"] .chordbox .nutl{stroke:#1d1d1f}
html[data-theme="light"] .roots button[aria-checked="true"]{color:#fff}

/* las fotos llevan texto blanco sobre degradado oscuro: se queda igual */
html[data-theme="light"] .card b,html[data-theme="light"] .k-week{color:#fff}
html[data-theme="light"] .card{background:#ddd}

/* pantallas completas */
html[data-theme="light"] .k-ov{background:var(--bg)}
html[data-theme="light"] .k-pay-hero,html[data-theme="light"] .k-how-vid{background:#000}
html[data-theme="light"] .k-pay-hero::after,html[data-theme="light"] .k-how-vid::after{background:linear-gradient(transparent 45%,var(--bg))}
html[data-theme="light"] .k-x{background:rgba(255,255,255,.85);color:#1d1d1f}
html[data-theme="light"] .k-stage{background:#000;color:#f5f5f7;--ink:#f5f5f7;--muted:#8e8e93;--card-2:rgba(255,255,255,.11);--gold-hi:#e2c27f;--gold:#c9a45c}
/* la pista de la lección es un "escenario": se queda oscura en los dos modos */
html[data-theme="light"] .stagebox{background:#121212;border-color:transparent}

/* =================== COMPUTADORA Y iPAD =================== */
/* Pantalla ancha: pestañas arriba (como Fender), contenido centrado con ancho fijo. */
@media (min-width:760px){
  :root{--tabbar:0px}
  nav.tabs{top:calc(env(safe-area-inset-top,0px) + 12px);bottom:auto;left:50%;right:auto;transform:translateX(-50%);
    height:44px;padding:4px;gap:2px;border:1px solid var(--line);border-radius:999px;box-shadow:0 2px 12px rgba(0,0,0,.12)}
  nav.tabs button{flex:none;max-width:none;flex-direction:row;gap:7px;padding:0 16px;border-radius:999px;font:600 15px var(--ui);color:var(--muted)}
  nav.tabs svg{width:17px;height:17px}
  nav.tabs button[aria-selected="true"]{background:var(--card-2);color:var(--ink)}
  nav.tabs button[aria-selected="true"] svg{color:var(--gold)}
  .app{top:calc(env(safe-area-inset-top,0px) + 66px);bottom:0}
  .view{padding-top:6px;padding-left:28px;padding-right:28px}
  .view.scroll .inner{max-width:760px}
  .install{bottom:16px}
  .k-toast{bottom:28px}

  /* hojas: ventana centrada en lugar de subir desde abajo */
  .sheet{left:50%;right:auto;top:50%;bottom:auto;width:min(560px,92vw);max-height:min(80vh,760px);border-radius:22px;
    padding:14px 20px 22px;transform:translate(-50%,-46%) scale(.98);opacity:0;pointer-events:none;
    transition:transform .3s var(--ease),opacity .2s;box-shadow:0 24px 80px rgba(0,0,0,.45)}
  .sheet.open{transform:translate(-50%,-50%);opacity:1;pointer-events:auto}
  .sheet .grab{display:none}
  .sheet .cards{grid-template-columns:repeat(3,1fr)}

  /* bienvenida, Premium, Cómo afinar, editor: ventana centrada */
  .k-ov:not(.k-stage){inset:0;margin:auto;width:min(720px,94vw);height:min(860px,92vh);border-radius:24px;overflow:hidden auto;
    box-shadow:0 0 0 100vmax rgba(0,0,0,.55),0 30px 90px rgba(0,0,0,.5)}
  .k-x{top:14px}
  .k-pay-hero{height:300px}
  .k-how-vid{height:360px}
  .k-st-body{max-width:860px;margin:0 auto;width:100%}

  .tools{max-width:760px}
  .rhythms{grid-template-columns:repeat(4,1fr)}
  .k-path{margin:0;padding:4px 0 6px}
  .roots{margin:0;padding:0}
  .soonrow{margin:0;padding:0 0 4px}
}

/* Horizontal (computadora, iPad acostado): lectura a la izquierda, clavijero grande a la derecha */
@media (min-width:900px) and (min-aspect-ratio:1/1){
  #view-tune .inner{max-width:1040px;display:grid!important;grid-template-columns:minmax(320px,400px) 1fr;
    grid-template-rows:auto auto minmax(0,1fr);column-gap:40px;align-items:start;height:100%;min-height:0;padding-bottom:16px}
  #view-tune .topbar{grid-column:1/-1}
  #view-tune .modes{grid-column:1;grid-row:2;margin-top:18px}
  #view-tune .readout{grid-column:1;grid-row:3;align-self:center;margin:0 0 8vh}
  #view-tune .headwrap{grid-column:2;grid-row:2/4;height:100%;min-height:0;margin:8px 0 0;align-items:flex-end}
  #view-tune .head{max-width:none}
  #view-tune .headwrap.gridmode .strings{max-width:520px}
  .note{font-size:clamp(96px,14vh,132px)}
  .notewrap{height:clamp(110px,16vh,150px)}

}

/* Ratón y trackpad: estados al pasar el cursor */
@media (hover:hover) and (pointer:fine){
  .pill:hover,.opt:hover,.k-opt:hover,.rhythms button:hover,.roots button:hover,.k-node:hover{filter:brightness(1.08)}
  nav.tabs button:hover{color:var(--ink)}
  .head .peg:hover .lab{stroke:var(--gold)}
  .card:hover{box-shadow:inset 0 0 0 1.5px var(--gold)}
  html[data-theme="light"] :is(.pill,.opt,.k-opt,.rhythms button,.roots button,.k-node):hover{filter:brightness(.97)}
}