/* ==========================================================================
   L2Vanguard — design system "Brasa"
   Se carga DESPUES de public.css / auth.css / lin2web.css (ver layouts).
   1) Tokens de color  2) Base y accesibilidad  3) Botones  4) Superficies
   5) Formularios  6) Estadisticas del home (--hs-*)

   Referencia de ambiente: l2name.com (negro calido, ambar, lava). Identidad propia:
   brasa naranja como accion, ambar para valores, magma para peligro y un
   violeta "arcano" como contraste frio (foco, selecciones, botones secundarios).
   ========================================================================== */

:root {
    /* --- Superficies (negro calido, nunca azul) --- */
    --vg-void:   #0b0706;   /* fondo de pagina */
    --vg-ash:    #140d0b;   /* paneles */
    --vg-forge:  #1d1210;   /* tarjetas elevadas */
    --vg-line:   #3b2018;   /* bordes */

    /* --- Acentos --- */
    --vg-amber:  #ffb52e;   /* valores, enlaces, titulos */
    --vg-sand:   #f0cf9d;   /* etiquetas y texto secundario */
    --vg-ember:  #ff6a1a;   /* accion principal */
    --vg-magma:  #e5362a;   /* peligro / pvp */
    --vg-arcane: #8b5cff;   /* foco, seleccion, boton secundario */
    --vg-aqua:   #22d3c5;   /* online / ok */

    /* --- Texto --- */
    --vg-text:   #fff0dc;
    --vg-muted:  #bfae98;

    /* --- Gradientes y brillos reutilizables --- */
    --vg-lava: linear-gradient(180deg, #f4601c 0%, #d03512 55%, #9c180a 100%);
    --vg-lava-hot: linear-gradient(180deg, #ff7a2a 0%, #e8431a 55%, #b3200f 100%);
    --vg-gold: linear-gradient(180deg, #ffd36b 0%, #ffb52e 55%, #e08a12 100%);
    --vg-glow-ember: 0 0 0 1px rgba(255, 106, 26, .35), 0 6px 22px rgba(255, 106, 26, .28);
    --vg-glow-arcane: 0 0 0 3px rgba(139, 92, 255, .35);

    /* --- Tokens heredados por public.css / auth.css / lin2web.css --- */
    --color-primary: var(--vg-amber);
    --color-secondary: var(--vg-sand);
    --color-background: var(--vg-void);
    --color-dark: #000000;
    --color-light: var(--vg-text);
    --color-accent: #ff4d2e;
    --accent-bg-color: rgb(255 106 26 / 90%);
    --color-gray: #a39280;
    --brand-color: #ff7a1a;
    --bgc-color: rgb(20 13 11 / 92%);
    --bg-form-head: rgb(255 106 26 / 32%);
    --bg-form-table: rgb(20 13 11 / 92%);
    --bg-dark: var(--vg-void);
    --bg-color: var(--vg-void);
    --color-teal: var(--vg-aqua);
    --color-blue: var(--vg-arcane);
    --color-red-muted: var(--vg-magma);
}

/* --- Base y accesibilidad --------------------------------------------- */
::selection { background: rgba(139, 92, 255, .55); color: #fff; }

:focus-visible {
    outline: 2px solid var(--vg-arcane);
    outline-offset: 2px;
    border-radius: 4px;
}

html { scrollbar-color: #5a2a16 var(--vg-void); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--vg-void); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #a8350f, #5a1a0a);
    border: 2px solid var(--vg-void);
    border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #ff6a1a, #a8350f); }

h1, .block_title, .subtitle {
    text-shadow: 0 0 28px rgba(255, 106, 26, .28);
}

/* --- Botones ---------------------------------------------------------- */
.btn-main {
    background: var(--vg-lava);
    box-shadow: 0 4px 18px rgba(255, 106, 26, .32), inset 0 1px 0 rgba(255, 255, 255, .22);
    transition: transform .2s ease, box-shadow .2s ease;
}
.btn-main::after { background: var(--vg-lava-hot); }
.btn-main:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(255, 106, 26, .5), inset 0 1px 0 rgba(255, 255, 255, .3); }
.btn-main:active { transform: translateY(0); }

.btn-golden {
    background: var(--vg-gold);
    color: #1a0b04;
    box-shadow: 0 3px 14px rgba(255, 181, 46, .3);
    transition: transform .2s ease, box-shadow .2s ease;
}
.btn-golden:hover { background: var(--vg-lava-hot); color: #fff; transform: translateY(-1px); }

.btn-red {
    background: linear-gradient(180deg, #ef3b2c 0%, #b5200f 100%);
    box-shadow: 0 3px 14px rgba(229, 54, 42, .35);
}
.btn-red:hover { background: linear-gradient(180deg, #ff4f3f 0%, #cc2a18 100%); }

.btn-primary {
    background: linear-gradient(180deg, #8758f5 0%, #5a2ed4 100%);
    box-shadow: 0 3px 14px rgba(139, 92, 255, .35);
}
.btn-primary:hover { box-shadow: 0 0 0 3px rgba(139, 92, 255, .35), 0 6px 20px rgba(139, 92, 255, .45); }
.login_button button { box-shadow: 0 4px 40px rgba(255, 106, 26, .35); }

/* --- Superficies ------------------------------------------------------ */
.s_about_item {
    background: linear-gradient(180deg, rgba(29, 18, 16, .78) 0%, rgba(11, 7, 6, .85) 100%);
    border-color: rgba(255, 106, 26, .28);
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.s_about_item:hover {
    border-color: rgba(255, 140, 50, .65);
    box-shadow: 0 10px 30px rgba(255, 106, 26, .18);
}

.main-server-stats-shell {
    background: linear-gradient(135deg, rgba(20, 13, 11, .95) 0%, rgba(11, 7, 6, .96) 100%);
    border-color: rgba(255, 106, 26, .22);
    box-shadow: 0 0 60px rgba(255, 106, 26, .06) inset;
}

.footer-divider span { background: linear-gradient(90deg, transparent, rgba(255, 106, 26, .55)); }
.footer-divider span:last-child { background: linear-gradient(90deg, rgba(255, 106, 26, .55), transparent); }
.footer-divider i, .l2m-flourish i { border-color: var(--vg-ember); background: rgba(255, 106, 26, .35); }
.l2m-flourish span { background: linear-gradient(90deg, transparent, rgba(255, 106, 26, .8)); }
.l2m-flourish span:last-child { background: linear-gradient(90deg, rgba(255, 106, 26, .8), transparent); }
.footer-social:hover { background: var(--vg-ember); border-color: var(--vg-ember); color: #fff; }

/* --- Formularios ------------------------------------------------------ */
input:focus-visible, select:focus-visible, textarea:focus-visible,
.form-control:focus {
    outline: none;
    border-color: #ff8a3d;
    box-shadow: 0 0 0 3px rgba(255, 106, 26, .28);
}
select.form-control:focus { border-color: #a78bfa; box-shadow: var(--vg-glow-arcane); }

/* --- Estadisticas del home (componente <x-home-server-stats>) ---------- */
.main-server-stats-shell {
    --hs-card-bg: linear-gradient(135deg, rgba(29, 18, 16, .85) 0%, rgba(11, 7, 6, .9) 100%);
    --hs-radius: 10px;
    --hs-border: rgba(255, 106, 26, .2);
    --hs-icon-bg: linear-gradient(135deg, rgba(255, 106, 26, .28) 0%, rgba(255, 181, 46, .14) 100%);
    --hs-icon-border: rgba(255, 140, 50, .5);
    --hs-line-stroke: var(--vg-amber);
    --hs-value-shadow: rgba(255, 106, 26, .45);
    --hs-gender-bg: rgba(255, 106, 26, .06);
    --hs-gender-border: rgba(255, 106, 26, .18);
}
.hss-tone-gold { --hs-top-color: rgba(255, 181, 46, .8); }
.hss-tone-blue {
    --hs-top-color: rgba(139, 92, 255, .85);
    --hs-ic-bg: linear-gradient(135deg, rgba(139, 92, 255, .3) 0%, rgba(139, 92, 255, .1) 100%);
    --hs-ic-border: rgba(167, 139, 250, .55);
    --hs-ic-stroke: #b9a2ff;
}
.hss-tone-red {
    --hs-top-color: rgba(229, 54, 42, .85);
    --hs-ic-bg: linear-gradient(135deg, rgba(229, 54, 42, .3) 0%, rgba(229, 54, 42, .1) 100%);
    --hs-ic-border: rgba(255, 90, 60, .55);
    --hs-ic-stroke: #ff6a52;
}
.hss-status-up          { --hs-s-color: #22d3c5; --hs-s-bg: rgba(34, 211, 197, .2); --hs-s-border: rgba(34, 211, 197, .4); }
.hss-status-down        { --hs-s-color: #ff4d3a; --hs-s-bg: rgba(255, 77, 58, .2);  --hs-s-border: rgba(255, 77, 58, .4); }
.hss-status-maintenance { --hs-s-color: #ffb52e; --hs-s-bg: rgba(255, 181, 46, .2); --hs-s-border: rgba(255, 181, 46, .4); }
.hss-status-restarting  { --hs-s-color: #a78bfa; --hs-s-bg: rgba(139, 92, 255, .22); --hs-s-border: rgba(139, 92, 255, .45); }
.server-stats-item:hover {
    box-shadow: 0 6px 22px rgba(255, 106, 26, .22);
    border-color: rgba(255, 140, 50, .5);
}

@media (prefers-reduced-motion: reduce) {
    .btn-main, .btn-golden, .s_about_item { transition: none; }
    .btn-main:hover, .btn-golden:hover { transform: none; }
}