/* ==================================
            GENERAL
================================== */

html {
    background-image: url(https://i.imgur.com/TY5PtP5.jpeg);
    background-position: center;
    background-size: cover;
    background-color: black;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* =========================
        HEADER MENU
========================= */

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 1px 20px;
    background-color: #2a0f3d; /* podés cambiarlo */
    border-bottom: 2px solid #FFD1DC;

    position: sticky;
    top: 0;
    z-index: 1000;
}

/* LOGO */
.logo img {
    height: 45px;
    width: auto;
    /*image-rendering: pixelated;*/
}

.logo{
    margin-right: 30px;
}

.header > a{
    margin-left: 30px;
}

/* NAV */
.nav {
    display: flex;
    gap: 18px;
    align-items: center;
}

/* LINKS */
.nav a {
    color: #fff;
    text-decoration: none;
    font-family: "Courier New", monospace;
    font-size: 14px;
    letter-spacing: 1px;

    padding: 6px 10px;
    border: 1px solid transparent;
    transition: 0.2s ease;
}

/* HOVER estilo retro menú */
.nav a:hover {
    background-color: #FFD1DC;
    color: #111;
    border: 1px solid #FFD1DC;
}

/* ACTIVE (página actual) */
.nav a.active {
    background-color: #FFD1DC;
    color: #111;
    border: 1px solid #FFD1DC;
}

/* BOTÓN / IMAGEN FINAL */
.header a img {
    display: block;
    transition: transform 0.2s ease;
}

.header a img:hover {
    transform: scale(1.05);
}


/* ==================================
            IMAGEN
================================== */

img {
    max-width: 100%;
    height: auto;
    margin: 20px 0;
}

/* ==================================
Vistas y "letrero subte"
================================== */

.ticker {
  width: 100%;
  background: #32cfd4;
  color: rgb(0, 0, 0);
  padding: 4px 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: "Courier New", monospace;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
}

.ticker-img {
  height: 18px;       /* controla que no “suba” */
  vertical-align: middle; /* esto lo baja a la línea del texto */
  margin: 0 10px;
}


/* ==================================
            COLUMNAS
================================== */

.container {
    width: 100%;
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

.left-panel {
    width: 220px;
}

.center-panel {
    flex: 1;
}

.right-panel {
    width: 220px;
}

.left-panel,
.center-panel,
.right-panel {
    border: 1px solid #bb5dc4;
    padding: 15px;
}

nav {
    text-align: left;
}

nav a {
    display: block;
    margin-bottom: 12px;
}


/* ==================================
            CAJAS
================================== */

.panel-box {
    border: 1px solid #6d3b72;
    padding: 15px;
    margin-bottom: 25px;
}


/* ==================================
            LISTAS
================================== */

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    margin-bottom: 10px;
}


/* ==================================
        REGISTRO / SECCIONES
================================== */

.content-box {
    border: 1px solid #6d3b72;
    padding: 20px;
    margin-bottom: 30px;
}


/* ==================================
            FOOTER
================================== */

.footer-links {
    margin-top: 15px;
}

.footer-links a {
    margin: 0 8px;
}


/* =========================
MENU
========================= */

.header{
    width: fit-content;
    margin: 0 auto 25px auto;

    background:#85cddb;
    border:3px solid white;
    outline:3px solid #8a78ff;

    padding:15px 25px;

    box-shadow:
    0 0 10px #8a78ff,
    0 0 25px rgba(138,120,255,.5);
}

.nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
}

.nav a{
    background:#53d0f0;

    border-top:2px solid #fff;
    border-left:2px solid #fff;

    border-right:2px solid #000000;
    border-bottom:2px solid #42255a;

    color:black;
}