/* Duelos Troll MLBB - base: colores (claro / oscuro), tipografía y controles sueltos
   (botones, chips, selector segmentado, etiquetas, retratos). */

/* ---------- colores ----------
   Todo texto llega a 4,5:1 sobre su fondo en los dos temas (medido sobre los fondos reales, también
   los teñidos uno encima de otro). Para que siga así:
     --fg2          texto secundario (el gris más claro que se puede usar para texto)
     --fg3          solo adorno: flechas, iconos, bordes y fondo de círculos con cifra blanca. No es para texto.
     --accent       aros, bordes y barras          --accent-fill   fondo de botones y chips con texto blanco
     --link         texto azul                     --giro-ink      texto naranja del "giro troll"
     --r-*          colores de rol: son fondos, y llevan texto blanco encima */
:root{
  color-scheme:light;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
  --bg:#F2F2F7;
  --card:#FFFFFF;
  --fg:#000000;
  --fg2:#616165;
  --fg3:#747479;
  --sep:#C6C6C8;
  --fill:rgba(118,118,128,.12);
  --accent:#0071EB;
  --accent-fill:#0071EB;
  --link:#0060C8;
  --accent-tint:rgba(0,122,255,.12);
  --seg-sel:#FFFFFF;
  --seg-shadow:0 1px 3px rgba(0,0,0,.14),0 0 0 .5px rgba(0,0,0,.04);
  --sheet-bg:#F2F2F7;
  --sheet-card:#FFFFFF;
  --scrim:rgba(0,0,0,.4);
  --lock-bg:#919194;        /* --bg visto a través de --scrim */
  --bad-ink:#BA241A;
  --bad-bg:rgba(255,59,48,.12);
  --good-ink:#1C7236;
  --good-bg:rgba(52,199,89,.16);
  --neutral-ink:#636366;
  --giro-ink:#B35F0B;
  --r-tanque:#5856D6;
  --r-luchador:#B35F0B;
  --r-asesino:#DA362D;
  --r-mago:#A44DD0;
  --r-tirador:#23863B;
  --r-apoyo:#187F94;
  --toast-bg:rgba(60,60,67,.92);
  --toast-fg:#FFFFFF;
  --shadow:0 1px 2px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.06);
  --top-h:0px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#000000;
    --card:#1C1C1E;
    --fg:#FFFFFF;
    --fg2:#BDBDC1;
    --fg3:#747479;
    --sep:#38383A;
    --fill:rgba(118,118,128,.24);
    --accent:#0A84FF;
    --accent-fill:#0974DF;
    --link:#61ADFF;
    --accent-tint:rgba(10,132,255,.22);
    --seg-sel:#636366;
    --seg-shadow:0 1px 3px rgba(0,0,0,.4);
    --sheet-bg:#1C1C1E;
    --sheet-card:#2C2C2E;
    --scrim:rgba(0,0,0,.6);
    --lock-bg:#000000;
    --bad-ink:#FFA19C;
    --bad-bg:rgba(255,69,58,.2);
    --good-ink:#79DF90;
    --good-bg:rgba(48,209,88,.2);
    --neutral-ink:#BDBDC1;
    --giro-ink:#E0902A;
    --r-tanque:#5E5CE6;
    --r-luchador:#A96500;
    --r-asesino:#D93A32;
    --r-mago:#9B4BC4;
    --r-tirador:#1F8638;
    --r-apoyo:#188092;
    --toast-bg:rgba(99,99,102,.95);
    --shadow:0 1px 2px rgba(0,0,0,.5),0 6px 18px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#000000;
  --card:#1C1C1E;
  --fg:#FFFFFF;
  --fg2:#BDBDC1;
  --fg3:#747479;
  --sep:#38383A;
  --fill:rgba(118,118,128,.24);
  --accent:#0A84FF;
  --accent-fill:#0974DF;
  --link:#61ADFF;
  --accent-tint:rgba(10,132,255,.22);
  --seg-sel:#636366;
  --seg-shadow:0 1px 3px rgba(0,0,0,.4);
  --sheet-bg:#1C1C1E;
  --sheet-card:#2C2C2E;
  --scrim:rgba(0,0,0,.6);
  --lock-bg:#000000;
  --bad-ink:#FFA19C;
  --bad-bg:rgba(255,69,58,.2);
  --good-ink:#79DF90;
  --good-bg:rgba(48,209,88,.2);
  --neutral-ink:#BDBDC1;
  --giro-ink:#E0902A;
  --r-tanque:#5E5CE6;
  --r-luchador:#A96500;
  --r-asesino:#D93A32;
  --r-mago:#9B4BC4;
  --r-tirador:#1F8638;
  --r-apoyo:#188092;
  --toast-bg:rgba(99,99,102,.95);
  --shadow:0 1px 2px rgba(0,0,0,.5),0 6px 18px rgba(0,0,0,.5);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--top-h) + env(safe-area-inset-top,0px))}
/* El hueco de la barra de desplazamiento se reserva siempre: al bloquear el scroll (ficha abierta)
   la barra desaparece y, sin esto, la página saltaría unos 15 px a la derecha. Ese hueco queda fuera
   del velo oscuro, así que mientras dura el bloqueo se pinta del color que tiene la página bajo el velo. */
html{scrollbar-gutter:stable}
html.lock{overflow:hidden;background:var(--lock-bg)}
html.lock body{min-height:100vh}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  font-size:17px;
  line-height:1.3;
  -webkit-font-smoothing:antialiased;
}
[hidden]{display:none!important}
img{max-width:100%}
button,input,textarea{font-family:inherit}
button{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1,h2,h3,h4{text-wrap:balance}

/* texto solo para lectores de pantalla */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* textarea temporal para copiar: fuera de la vista y sin mover el scroll */
.offscr{position:fixed;top:0;left:0;width:1px;height:1px;padding:0;border:0;opacity:0;pointer-events:none}
.mut{color:var(--fg2)}
.small{font-size:13px;line-height:18px}

/* ---------- títulos de sección ---------- */
.cap{
  margin:16px 0 6px 16px;font-size:13px;line-height:18px;font-weight:400;
  letter-spacing:.06em;text-transform:uppercase;color:var(--fg2);
}
.cap.fav{color:var(--good-ink)}
.cap.con{color:var(--bad-ink)}

/* ---------- botones ---------- */
.btn{
  min-height:50px;border:0;border-radius:12px;cursor:pointer;
  font-size:17px;font-weight:600;letter-spacing:-.2px;padding:6px 12px;
}
.btn:active{opacity:.7}
.btn.primary{background:var(--accent-fill);color:#fff}
.btn.tinted{background:var(--accent-tint);color:var(--link)}
.btn.sm{min-height:44px;font-size:15px}
.link{border:0;background:none;color:var(--link);font-size:15px;cursor:pointer;padding:4px 0;min-height:44px}

/* ---------- buscador ---------- */
.search{position:relative}
.search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--fg3);pointer-events:none}
.search input{
  width:100%;height:44px;border:0;border-radius:10px;
  background:var(--fill);color:var(--fg);
  font-size:17px;padding:0 12px 0 34px;
  -webkit-appearance:none;appearance:none;
}
.search input::placeholder{color:var(--fg2)}
.search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

/* ---------- selector segmentado ---------- */
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:2px;border-radius:9px;background:var(--fill)}
.seg.seg3{grid-template-columns:repeat(3,1fr)}
.seg button{
  position:relative;height:36px;border:0;border-radius:7px;background:transparent;color:var(--fg);
  font-size:13px;font-weight:500;cursor:pointer;padding:0 4px;white-space:nowrap;
}
.seg button::after{content:"";position:absolute;inset:-4px 0}   /* zona táctil de 44 px */
.seg button[aria-pressed="true"]{background:var(--seg-sel);box-shadow:var(--seg-shadow);font-weight:600}

/* ---------- chips de filtro ---------- */
.chips{
  display:flex;gap:8px;overflow-x:auto;margin-inline:-16px;padding:5px 16px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.chips::-webkit-scrollbar{display:none}
.chip{
  position:relative;flex:none;height:36px;padding:0 14px;border:0;border-radius:18px;cursor:pointer;
  background:var(--fill);color:var(--fg);font-size:15px;font-weight:500;white-space:nowrap;
}
.chip::after{content:"";position:absolute;inset:-4px 0}   /* zona táctil de 44 px */
.chip[aria-pressed="true"]{background:var(--accent-fill);color:#fff}

/* ---------- etiquetas ---------- */
.tag{flex:none;display:inline-block;font-size:12px;line-height:16px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap}
.tag.bad{background:var(--bad-bg);color:var(--bad-ink)}
.tag.good{background:var(--good-bg);color:var(--good-ink)}
.tag.neutral{background:var(--fill);color:var(--neutral-ink)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tags span{font-size:13px;line-height:18px;padding:3px 10px;border-radius:999px;background:var(--fill);color:var(--fg2)}
.tags.nomt{margin-top:0}

/* ---------- retratos e iconos ----------
   El contenedor reserva el espacio (--s) y pone el color del rol o de la categoría;
   si la imagen falla, app.js la quita y deja la inicial (.noimg). */
.av{
  flex:none;width:var(--s,40px);height:var(--s,40px);border-radius:50%;
  display:grid;place-items:center;overflow:hidden;
  background:var(--c,var(--fg3));color:#fff;
  font-size:calc(var(--s,40px) * .45);line-height:1;font-weight:600;
}
.av img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.av.noimg{text-transform:uppercase}
.ic{box-shadow:0 0 0 1px var(--fill)}   /* iconos de ítem: aro fino para que no se pierdan sobre fondos oscuros */
.role-tanque{--c:var(--r-tanque)}
.role-luchador{--c:var(--r-luchador)}
.role-asesino{--c:var(--r-asesino)}
.role-mago{--c:var(--r-mago)}
.role-tirador{--c:var(--r-tirador)}
.role-apoyo{--c:var(--r-apoyo)}

/* ---------- aviso flotante ----------
   Ocupa el ancho que necesite el texto, centrado y con 16 px de margen a cada lado. En teléfono va por
   encima de la barra de pestañas (unos 61 px de alto); desde tablet baja (ver layout.css). */
.toast{
  position:fixed;left:16px;right:16px;bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:40;
  width:-moz-fit-content;width:fit-content;margin-inline:auto;
  padding:10px 18px;border-radius:22px;
  background:var(--toast-bg);color:var(--toast-fg);font-size:15px;line-height:20px;font-weight:500;text-align:center;
}

/* ---------- tintas de texto ----------
   components.css pinta los contadores (.n) con --fg3 y el texto del giro con --r-luchador, que son
   colores de adorno y de fondo y no llegan a 4,5:1 como texto. Aquí se les pone tinta de texto.
   (Si en components.css pasan a usar --fg2 y --giro-ink, este bloque sobra.) */
.app .n{color:var(--fg2)}
.app .giro,.app .mot.giro{color:var(--giro-ink)}

/* ---------- puntero fino: estados hover ---------- */
@media (hover:hover){
  .btn:hover{filter:brightness(.94)}   /* se oscurece: aclararlo bajaría el contraste del texto blanco */
  .link:hover{text-decoration:underline}
  .chip:hover,.seg button:hover{background:var(--accent-tint)}
  .chip[aria-pressed="true"]:hover{background:var(--accent-fill);filter:brightness(.92)}
  .seg button[aria-pressed="true"]:hover{background:var(--seg-sel)}
}