/* Estilo colorido / anime para las páginas web (perfil, guild, ajustes, contraseña...).
   Se carga después de DragonBook.min.css. */

@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(/static/fonts/fredoka-latin.woff2) format('woff2');
}

:root {
    --ink: #1d0f3a;
    --violet: #7b3cff;
    --magenta: #ff3fa4;
    --orange: #ff8a1f;
    --yellow: #ffd23f;
    --cyan: #29d3ff;
    --text: #2a1c4d;
    --muted: #6d6290;
    --sticker: 0 5px 0 var(--ink), 0 14px 30px rgba(20, 0, 50, .35);
    --font: 'Fredoka', 'Trebuchet MS', Verdana, sans-serif;
}

html { background: #1d0a46; }

body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .22) 0 2px, transparent 3px) 0 0 / 110px 110px,
        radial-gradient(circle at 70% 60%, rgba(255, 210, 63, .25) 0 2px, transparent 3px) 0 0 / 150px 150px,
        radial-gradient(ellipse at 15% 0%, rgba(255, 63, 164, .45) 0, transparent 45%),
        radial-gradient(ellipse at 95% 10%, rgba(41, 211, 255, .35) 0, transparent 40%),
        linear-gradient(170deg, #5a24c4 0%, #3b1585 45%, #1d0a46 100%) fixed !important;
    font-family: var(--font) !important;
    color: #fff;
}

input, select, textarea, button { font-family: var(--font); }

/* Barra superior */
#titleTable {
    background: linear-gradient(90deg, #7b3cff, #c43ad8 55%, #ff4f9a) !important;
    border-bottom: 4px solid var(--ink);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
    font-family: var(--font) !important;
    font-weight: 700;
    text-shadow: 0 2px 0 var(--ink);
}

#titleTable a { border-radius: 12px; transition: background .12s; }
#titleTable a:hover { background: rgba(255, 255, 255, .2) !important; text-decoration: none !important; }

a { color: var(--violet); text-decoration: none; }
a:hover { background: none !important; color: var(--magenta); text-decoration: underline; }

/* Portada del perfil / guild */
#topBar {
    background: linear-gradient(120deg, #ffd23f 0%, #ff8a1f 35%, #ff3fa4 70%, #7b3cff 100%) !important;
    border: 3px solid var(--ink) !important;
    border-radius: 20px !important;
    box-shadow: var(--sticker);
    overflow: hidden;
}

#topBar::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .35) 0 2px, transparent 3px) 0 0 / 50px 50px;
}

#profileName, #profileName a, .pageCoverTitle, .pageCoverTitle a { color: #fff !important; }

.boxTitle a, .boxtitle a { color: #fff !important; }
.boxTitle a:hover, .boxtitle a:hover { color: var(--yellow) !important; }

#profileName {
    font-family: var(--font) !important;
    font-size: 34px !important;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 3px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink) !important;
}

.PhotoDiv, #photoDiv img, .profilePhotoImg {
    border: 3px solid var(--ink);
    border-radius: 16px;
    box-shadow: 0 4px 0 var(--ink) !important;
}

/* Tarjetas */
.Box, .box {
    background: #fff !important;
    border: 3px solid var(--ink) !important;
    border-radius: 18px !important;
    box-shadow: var(--sticker);
    color: var(--text) !important;
    overflow: hidden;
    margin-bottom: 20px;
}

.BoxSecret { background: #e9fbff !important; }

.boxTitle, .boxtitle {
    height: auto !important;
    padding: 10px 16px !important;
    background: linear-gradient(90deg, #7b3cff, #b93fe0) !important;
    border-bottom: 3px solid var(--ink) !important;
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 700;
    font-style: normal !important;
    line-height: 1.3 !important;
    text-align: left;
    text-shadow: 0 2px 0 var(--ink);
}

.box .boxtitle { margin: -15px -15px 15px; }

.boxBody { color: var(--text); }
.boxTable, .infoLineData { color: var(--text) !important; }
.infoLineField { color: var(--muted); font-weight: 500; }
.sec { color: var(--muted) !important; }

/* Formularios */
input:not([type]), input[type=text], input[type=password], input[type=email], input[type=number], input[type=url], textarea, select {
    box-sizing: border-box;
    border: 2px solid var(--ink);
    border-radius: 10px;
    padding: 7px 10px;
    background: #faf8ff;
    color: var(--text);
    font-size: 15px;
    outline: none;
}

input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px var(--yellow); }

/* Formularios sueltos (cambio y reseteo de contraseña) */
#body > h1, #body > h2 { text-shadow: 0 3px 0 var(--ink); }

fieldset {
    max-width: 520px;
    margin: 16px 0;
    padding: 18px 20px;
    background: #fff;
    border: 3px solid var(--ink);
    border-radius: 18px;
    box-shadow: var(--sticker);
    color: var(--text);
}

fieldset input:not([type=submit]):not([type=checkbox]):not([type=radio]) { margin: 4px 0 10px; width: 100%; }

input[type=submit], button, .button, .Box input[type=button] {
    border: 2px solid var(--ink);
    border-radius: 10px;
    padding: 6px 16px;
    background: linear-gradient(180deg, #fff3a6 0%, var(--yellow) 45%, var(--orange) 100%);
    box-shadow: 0 3px 0 var(--ink);
    color: var(--ink);
    font-weight: 700;
    cursor: pointer;
    transition: transform .08s, box-shadow .08s;
}

input[type=submit]:hover, button:hover, .Box input[type=button]:hover { filter: brightness(1.06); }
input[type=submit]:active, button:active, .Box input[type=button]:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }

.errorlist, .errornote { color: #e0245e !important; font-weight: 600; }

.glow_button:hover, .glow_button_anim:hover { box-shadow: 0 0 0 4px var(--yellow) !important; }
.glow_button:active, .glow_button_anim:active { box-shadow: 0 0 0 4px var(--cyan) !important; }

/* Pantallas pequeñas */
@media (max-width: 880px) {
    #mainBox { width: auto !important; padding: 0 12px; }
    #leftBar, #rightBar { float: none !important; width: auto !important; }
    .box { width: auto !important; }
}