/* ---------------------------------------------------------------------------
   Tema militar: camuflaje mitad jungla, mitad volcán
   ---------------------------------------------------------------------------
   Fondo partido en diagonal: a la izquierda camuflaje de jungla (verdes,
   tierra), a la derecha camuflaje de volcán (negro, rojo lava, ceniza), con
   una grieta de lava encendida en el corte. Paneles de metal oscuro con
   esquinas verdes de un lado y rojas del otro; botones de lava (principal)
   y verde oliva (secundario); títulos en letra de plantilla militar.

   Se carga DESPUÉS del <style> de cada página de cuenta (login.html,
   /login, /register), así que pisa sus colores sin tocar su maquetación.
*/

@import url("https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Saira+Condensed:wght@500;600;700&display=swap");

:root {
    --lava: #e2401c;
    --lava-hi: #ff7a3d;
    --lava-deep: #9a1d12;
    --lava-dark: #5e0f07;
    --ash: #efe9dd;
    --ash-dim: #b9b2a5;
    --olive: #6b7d2f;
    --olive-hi: #8a9a4a;
    --olive-dark: #3d4a22;
    --metal: #1b1a18;
    --metal-2: #26241f;
    --metal-edge: #4a4740;
    --camo-jungle: url("../img/camo-jungle.svg");
    --camo-volcano: url("../img/camo-volcano.svg");
}

/* === Fondo partido ======================================================= */
html {
    background: #1c1818 var(--camo-volcano) 0 0 / 420px 420px repeat fixed;
}

html body {
    background: transparent !important;
    color: var(--ash);
    font-family: "Saira Condensed", "Trebuchet MS", "Segoe UI", Arial, sans-serif;
}

/* Jungla: la mitad izquierda, cortada en diagonal. */
html body::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: -2 !important;
    background: #3d4a22 var(--camo-jungle) 0 0 / 420px 420px repeat !important;
    filter: none !important;
    -webkit-mask-image: linear-gradient(100deg, #000 50%, transparent 50%);
            mask-image: linear-gradient(100deg, #000 50%, transparent 50%);
}

/* Grieta de lava en el corte + viñeta para leer mejor el centro. */
html body::after {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: -1 !important;
    pointer-events: none;
    background:
        linear-gradient(100deg,
            transparent calc(50% - 3px), #ffb36b calc(50% - 1px),
            #fff3d6 50%, #ffb36b calc(50% + 1px), transparent calc(50% + 3px)),
        linear-gradient(100deg,
            transparent calc(50% - 26px), rgba(226, 64, 28, .55) calc(50% - 4px),
            rgba(226, 64, 28, .55) calc(50% + 4px), transparent calc(50% + 26px)),
        radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .38) 60%, rgba(0, 0, 0, .68) 100%) !important;
}

/* === Marca ============================================================== */
.brand img {
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .8)) !important;
}

.brand .tag {
    font-family: "Black Ops One", Impact, sans-serif !important;
    letter-spacing: 4px !important;
    color: var(--ash) !important;
    text-shadow: 0 2px 0 #000, 0 0 12px rgba(226, 64, 28, .6) !important;
}

/* === Paneles de metal ==================================================== */
.panel,
.follow {
    background:
        linear-gradient(180deg, rgba(38, 36, 31, .96) 0%, rgba(20, 19, 17, .97) 100%) !important;
    border: 2px solid var(--metal-edge) !important;
    border-radius: 10px !important;
    box-shadow:
        0 0 0 1px #000,
        0 22px 50px rgba(0, 0, 0, .7),
        inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

/* Franja de advertencia arriba del panel: jungla | lava. */
.panel {
    border-top: 0 !important;
}

.panel::before {
    content: "";
    display: block;
    height: 8px;
    background:
        linear-gradient(90deg, var(--olive) 0 50%, var(--lava) 50% 100%);
    box-shadow: 0 2px 0 rgba(0, 0, 0, .6);
}

/* Esquinas: verdes a la izquierda, lava a la derecha. */
.panel .corner {
    opacity: 1 !important;
    border-width: 4px !important;
    border-radius: 0 !important;
}

.panel .corner.tl,
.panel .corner.bl {
    border-color: var(--olive-hi) !important;
}

.panel .corner.tr,
.panel .corner.br {
    border-color: var(--lava) !important;
}

.panel .corner.tl,
.panel .corner.tr {
    top: 14px !important;
}

.panel .head h1,
.follow h2 {
    font-family: "Black Ops One", Impact, sans-serif !important;
    font-weight: normal !important;
    letter-spacing: 1.5px !important;
    color: var(--ash) !important;
    text-shadow: 0 2px 0 #000, 0 0 16px rgba(226, 64, 28, .45) !important;
}

.panel .head .rule {
    width: 110px !important;
    height: 4px !important;
    border-radius: 0 !important;
    background: linear-gradient(90deg, var(--olive-hi) 0 50%, var(--lava) 50% 100%) !important;
}

.panel .body p,
.foot,
.follow .sub {
    color: var(--ash-dim) !important;
}

.foot {
    border-top-color: rgba(255, 255, 255, .1) !important;
}

.foot a,
.hint a,
.hint.guide a {
    color: var(--lava-hi) !important;
}

.foot .sub a {
    color: var(--ash-dim) !important;
}

.hint {
    color: var(--ash) !important;
    text-shadow: 0 1px 3px #000 !important;
}

/* === Formularios ======================================================== */
label {
    color: var(--ash-dim) !important;
    font-weight: 600;
}

input[type=text],
input[type=password],
input[type=email] {
    color: var(--ash) !important;
    background: rgba(10, 10, 8, .88) !important;
    border: 1px solid var(--metal-edge) !important;
    border-radius: 6px !important;
    font-family: inherit !important;
}

input::placeholder {
    color: #7d776d !important;
}

input:focus {
    border-color: var(--lava) !important;
    box-shadow: 0 0 0 3px rgba(226, 64, 28, .28) !important;
}

/* === Botones ============================================================ */
.btn {
    font-family: "Black Ops One", Impact, sans-serif !important;
    font-weight: normal !important;
    letter-spacing: 2px !important;
    color: #fff !important;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .55) !important;
    border: 1px solid #ff9a63 !important;
    border-radius: 6px !important;
    background: linear-gradient(180deg, var(--lava-hi) 0%, var(--lava) 50%, var(--lava-deep) 100%) !important;
    box-shadow: 0 5px 0 var(--lava-dark), 0 10px 22px rgba(0, 0, 0, .55),
                inset 0 1px 0 rgba(255, 255, 255, .35) !important;
}

.btn:active {
    box-shadow: 0 1px 0 var(--lava-dark), 0 4px 10px rgba(0, 0, 0, .5) !important;
}

.btn.alt {
    border-color: #a8b86a !important;
    background: linear-gradient(180deg, var(--olive-hi) 0%, var(--olive) 55%, var(--olive-dark) 100%) !important;
    box-shadow: 0 5px 0 #262e15, 0 10px 22px rgba(0, 0, 0, .55),
                inset 0 1px 0 rgba(255, 255, 255, .25) !important;
}

.btn.alt:active {
    box-shadow: 0 1px 0 #262e15, 0 4px 10px rgba(0, 0, 0, .5) !important;
}

/* === Avisos ============================================================= */
.banner.err {
    background: rgba(154, 29, 18, .4) !important;
    border-color: var(--lava) !important;
}

.banner.ok {
    background: rgba(61, 74, 34, .55) !important;
    border-color: var(--olive-hi) !important;
}

/* === Síguenos =========================================================== */
.follow a.tile .lbl {
    color: var(--ash) !important;
}

.follow a.tile:hover .badge {
    border-color: var(--lava) !important;
}