/* ==========================================================================
   ESTILOS BASE Y ESQUELETO DE LA PÁGINA (base.css)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Delius+Swash+Caps&display=swap');

body {
    background-image: url('img/fondoclaromode.jpg') !important;
    background-repeat: repeat !important; 
    background-size: 500px auto !important; 
    background-attachment: fixed !important;

    font-family: 'Courier New', Courier, monospace;
    line-height: 1.4;
    margin: 0;
    padding: 20px;
}

/* Contenedor Principal en forma de Grid */
.grid-container {
    max-width: 1000px;
    margin: 0 auto;
    background-color: #e2f0cb; 
    border: 3px double #b5cf8c;
    border-radius: 12px;
    padding: 15px;
    display: grid;
    grid-template-columns: 1fr 2fr 1.5fr; 
    gap: 15px;
}

/* ==========================================================================
   ESTRUCTURA DEL BANNER DIVIDIDO 
   ========================================================================== */

.header-banner {
    grid-column: 1 / span 3; 
    background-color: #fce4ec !important;
    border: none;
    border-radius: 12px;
    height: 250px;
    display: flex; /* Mantiene izquierda y derecha lado a lado */
    position: relative;
    overflow: hidden;
}

/* Puntillas superior e inferior */
.puntilla-superior, .puntilla-inferior {
    position: absolute;
    left: 0;
    width: 100%;
    height: 20px;
    background-image: url('img/puntilla.png') !important;
    background-repeat: repeat-x;
    background-size: auto 20px;
    z-index: 25;
}

.puntilla-superior { 
    top: 0; 
}

.puntilla-inferior { 
    bottom: 0; 
    transform: scaleY(-1); 
}
/* --------------------------------------------------------------------------
   MITAD IZQUIERDA: :v
   -------------------------------------------------------------------------- */
.banner-izquierda {
    width: 35%; 
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 2px dashed #ffb3ba;
}
/* Contenedor principal de tu nueva ventana */
.contenedor-ventana-windows {
    position: relative;
    width: 100%; 
}

.fondo-ventana {
    width: 100%;
    display: block;
}

/* El contenido que flota dentro del hueco transparente */
.contenido-interno {
    position: absolute;
    top: 50px; 
    left: 20px;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribuye el espacio mas o menos equivalente */
    gap: 10px;
}

.mensaje-scroll {
    background: white;
    border: 1px solid #808080;
    padding: 3px;
    font-size: 12px;
    color: black;
}

.grid-stamps {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 por fila */
    gap: 5px;
}

.grid-stamps img {
    width: 100%;
    height: auto;
    image-rendering: pixelated;
}

/* Estilo para las tiritas de estampillas */
.columna-stamps {
    display: flex;
    flex-direction: column;
    gap: 8px; /* El espacio vertical entre stamp y stamp */
    z-index: 15;
}

.columna-stamps img {
    width: 88px; 
    height: 31px;
    border: 1px solid #ffb3ba; /* Un bordecito sutil rosa para que resalten */
    image-rendering: pixelated; /* Mantiene ese toque retro sin que se vea borroso */
}


.pantalla-mensajes {
    position: absolute;
    top: 14%;
    left: 11%;
    width: 78%;
    height: 35%;
    background-color: #f7f7f7; 
    z-index: 2; 
    display: flex;
    align-items: center;
    overflow: hidden;
}

.pantalla-mensajes marquee {
    font-family: monospace;
    font-size: 12px;
    color: #ff6b8b;
    font-weight: bold;
    width: 100%;
}

/* --------------------------------------------------------------------------
   MITAD DERECHA: yoyoyoy i made it 
   -------------------------------------------------------------------------- */
.banner-derecha {
    width: 65%; 
    background-image: url('img/banner1.png') !important; 
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat;
    position: relative;
}

/* boton de la luna acomodado arriba */
#btn-modo {
    position: absolute;
    top: 25px;
    right: 20px;
    width: auto !important;
    padding: 5px 10px;
    z-index: 30; 
    margin: 0;
}

/* ==========================================================================
   COMPONENTES Y CAJAS 
   ========================================================================== */

.box {
    background: #ffffff;
    border: 2px solid #ffb3ba;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 3px 3px 0px #ffb3ba;
}

.box h2 {
    margin-top: 0;
    font-size: 16px;
    background: #ffb3ba;
    color: white;
    padding: 5px;
    border-radius: 4px;
    text-align: center;
}

/* Inputs y Botones  */
input, button, textarea {
    width: 100%;
    box-sizing: border-box;
    margin-top: 5px;
    border: 2px solid #ffb3ba;
    border-radius: 4px;
    padding: 5px;
    font-family: inherit;
}

button {
    background: #ffb3ba;
    color: white;
    cursor: pointer;
    font-weight: bold;
}

button:hover {
    background: #ff6b8b;
}

/* MODO OSCURO */
body.modo-oscuro {
    background-color: #1a1a1a !important;
    background-image: url('img/fondodarkmode.jpg') !important;
    background-repeat: repeat !important; 
}