/* ============================
   VARIABLES DE DISEÑO
   ============================ */
:root {
    /* Colores - Fusión */
    --paper: #f0ead8;          /* Papel envejecido */
    --paper-dark: #e0d8c0;     /* Papel más oscuro */
    --ink: #0a0a0a;            /* Tinta negra */
    --ink-soft: #2a2a2a;       /* Tinta suave */
    --green: #6ab04c;          /* Verde ácido */
    --green-bright: #8ce65a;   /* Verde más brillante */
    --green-dark: #3a6b28;     /* Verde oscuro */
    --purple: #9b7fb8;         /* Púrpura lavanda */
    --purple-bright: #b8a0d0;  /* Púrpura claro */
    --purple-dark: #5a3f7a;    /* Púrpura profundo */
    --brown: #8b7355;          /* Marrón tinta */
    --white: #ffffff;

    /* Tipografías */
    --font-display: 'Anton', 'Impact', sans-serif;
    --font-body: 'EB Garamond', 'Crimson Text', serif;
    --font-hand: 'Caveat', 'Shadows Into Light', cursive;
    --font-mono: 'Special Elite', 'Courier New', monospace;

    /* Efectos */
    --halftone: radial-gradient(circle, rgba(10,10,10,0.15) 1px, transparent 1px);
    --halftone-green: radial-gradient(circle, rgba(58,107,40,0.25) 1px, transparent 1px);
}

/* ============================
   RESET Y BASE
   ============================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--paper);
    /* Capa 1: textura de papel (ruido) */
    /* Capa 2: semitono sutil */
    background-image: 
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><filter id="paper"><feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="5" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="300" height="300" filter="url(%23paper)" opacity="0.12"/></svg>'),
        radial-gradient(circle, rgba(10,10,10,0.08) 1px, transparent 1px);
    background-size: 300px 300px, 4px 4px;
    font-family: var(--font-body);
    color: var(--ink);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    overflow-x: hidden;
    position: relative;
}

/* Manchas de acuarela verde y púrpura */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: 
        radial-gradient(ellipse at 15% 25%, rgba(106, 176, 76, 0.10) 0%, transparent 45%),
        radial-gradient(ellipse at 85% 75%, rgba(155, 127, 184, 0.10) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 50%, rgba(139, 115, 85, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* ============================
   CONTENEDOR PRINCIPAL
   ============================ */
.app-window {
    display: flex;
    gap: 30px;
    max-width: 950px;
    width: 100%;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

/* ============================
   SIDEBAR - Botones estilo cómic-grimorio
   ============================ */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 210px;
    flex-shrink: 0;
}

.site-nav {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.site-nav a {
    display: block;
    text-align: center;
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    background-color: var(--paper);
    /* Borde grueso + irregular (fusión) */
    border: 3px solid var(--ink);
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    padding: 14px 10px;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    /* Sombra dura estilo cómic */
    box-shadow: 5px 5px 0 var(--ink);
    /* Semitono sutil en el botón */
    background-image: var(--halftone);
    background-size: 4px 4px;
    transform: rotate(-0.5deg);
    overflow: hidden;
}

.site-nav a:nth-child(2) { transform: rotate(0.5deg); }
.site-nav a:nth-child(3) { transform: rotate(-0.3deg); }
.site-nav a:nth-child(4) { transform: rotate(0.7deg); }

.site-nav a:hover,
.site-nav a.active {
    background-color: var(--green);
    color: var(--ink);
    border-color: var(--ink);
    transform: rotate(0deg) translate(2px, 2px);
    box-shadow: 3px 3px 0 var(--ink);
}

.site-nav a:nth-child(2):hover,
.site-nav a:nth-child(2).active { background-color: var(--purple-bright); }

.site-nav a:nth-child(3):hover,
.site-nav a:nth-child(3).active { background-color: var(--green-bright); }

.site-nav a:nth-child(4):hover,
.site-nav a:nth-child(4).active { background-color: var(--purple); color: var(--paper); }

.site-nav a:active {
    transform: rotate(0deg) translate(5px, 5px);
    box-shadow: 0 0 0 var(--ink);
}

/* ============================
   VENTANA PRINCIPAL - Grimorio Ácido
   ============================ */
.wizard-window {
    flex: 1;
    background-color: var(--paper);
    /* Borde grueso + irregular */
    border: 4px solid var(--ink);
    border-radius: 8px;
    box-shadow: 
        8px 8px 0 var(--ink),
        12px 12px 0 var(--green-dark);
    display: flex;
    flex-direction: column;
    min-height: 480px;
    overflow: hidden;
    position: relative;
    /* Semitono verde sutil sobre el papel */
    background-image: var(--halftone-green);
    background-size: 5px 5px;
}

/* Marco interior punteado */
.wizard-window::before {
    content: '';
    position: absolute;
    top: 8px; left: 8px; right: 8px; bottom: 8px;
    border: 1px dashed var(--purple);
    border-radius: 4px;
    pointer-events: none;
    opacity: 0.5;
    z-index: 1;
}

/* ============================
   BARRA DE TÍTULO
   ============================ */
.title-bar {
    background-color: var(--ink);
    color: var(--paper);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    position: relative;
    z-index: 3;
    border-bottom: 3px solid var(--ink);
}

.title-text {
    color: var(--green-bright);
    /* Sombra dura púrpura + verde */
    text-shadow: 2px 2px 0 var(--purple-dark), 4px 4px 0 var(--green-dark);
    display: flex;
    align-items: center;
    gap: 10px;
}

.title-text::before {
    content: '☽';
    color: var(--purple-bright);
    font-size: 1.2rem;
    text-shadow: none;
}

.title-text::after {
    content: '☾';
    color: var(--purple-bright);
    font-size: 1.2rem;
    text-shadow: none;
}

.title-buttons {
    display: flex;
    gap: 6px;
}

.title-btn {
    width: 26px;
    height: 26px;
    background-color: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 50%;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 2px 2px 0 var(--green-dark);
    transition: all 0.15s ease;
}

.title-btn:hover {
    background-color: var(--green);
    transform: rotate(15deg) translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--green-dark);
}

/* ============================
   CUERPO DEL WIZARD
   ============================ */
.wizard-body {
    flex: 1;
    padding: 40px 45px;
    display: flex;
    align-items: flex-start;
    position: relative;
    z-index: 2;
    /* Líneas de cuaderno + semitono */
    background-image: 
        repeating-linear-gradient(
            transparent,
            transparent 27px,
            rgba(139, 115, 85, 0.15) 27px,
            rgba(139, 115, 85, 0.15) 28px
        ),
        var(--halftone);
    background-size: 100% 28px, 4px 4px;
    background-position: 0 20px, 0 0;
}

.wizard-content {
    width: 100%;
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--ink-soft);
}

.wizard-content h2 {
    font-family: var(--font-display);
    font-size: 2.4rem;
    letter-spacing: 2px;
    margin-bottom: 22px;
    color: var(--ink);
    text-transform: uppercase;
    line-height: 1.1;
    /* Sombra dura verde + púrpura */
    text-shadow: 3px 3px 0 var(--green), 5px 5px 0 var(--purple);
    position: relative;
    display: inline-block;
}

/* Subrayado dibujado a mano en verde */
.wizard-content h2::after {
    content: '';
    position: absolute;
    left: -5px;
    right: -10px;
    bottom: -8px;
    height: 8px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 8"><path d="M2,5 Q50,1 100,4 T198,3" stroke="%236ab04c" stroke-width="3" fill="none"/></svg>');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.wizard-content p {
    margin-bottom: 14px;
    color: var(--ink-soft);
}

/* Notas manuscritas al margen */
.wizard-content .note {
    font-family: var(--font-hand);
    font-size: 1.4rem;
    color: var(--purple-dark);
    transform: rotate(-2deg);
    display: inline-block;
    margin-top: 20px;
    padding: 5px 15px;
    border-bottom: 2px dashed var(--green);
}

/* ============================
   FOOTER CON BOTONES
   ============================ */
.wizard-footer {
    padding: 20px 30px 25px;
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    background-color: var(--paper-dark);
    border-top: 3px solid var(--ink);
    position: relative;
    z-index: 3;
    /* Semitono sutil */
    background-image: var(--halftone);
    background-size: 4px 4px;
}

.wizard-btn {
    min-width: 95px;
    padding: 10px 20px;
    background-color: var(--paper);
    /* Borde irregular dibujado a mano */
    border: 3px solid var(--ink);
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 4px 4px 0 var(--ink);
    transform: rotate(-0.5deg);
}

.wizard-btn:nth-child(2) { transform: rotate(0.5deg); }
.wizard-btn:nth-child(3) { transform: rotate(-0.3deg); }

.wizard-btn:hover {
    background-color: var(--green);
    color: var(--ink);
    transform: rotate(0deg) translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--ink);
}

.wizard-btn:active {
    transform: rotate(0deg) translate(4px, 4px);
    box-shadow: 0 0 0 var(--ink);
}

#btn-cancel {
    background-color: var(--ink);
    color: var(--green-bright);
    border-color: var(--ink);
    box-shadow: 4px 4px 0 var(--purple-dark);
}

#btn-cancel:hover {
    background-color: var(--purple-dark);
    color: var(--paper);
    box-shadow: 2px 2px 0 var(--purple-dark);
}

/* ============================
   DECORACIÓN DEL SIDEBAR
   ============================ */
.sidebar-decor {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    opacity: 0.8;
}

/* Calavera con contorno grueso */
.skull {
    width: 50px;
    height: 50px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50,10 C30,10 20,25 20,45 C20,60 28,68 35,72 L35,85 L45,85 L45,78 L55,78 L55,85 L65,85 L65,72 C72,68 80,60 80,45 C80,25 70,10 50,10 Z M35,45 A8,8 0 1,1 35,44.9 M65,45 A8,8 0 1,1 65,44.9" fill="%23f0ead8" stroke="%230a0a0a" stroke-width="4"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(-5deg);
    filter: drop-shadow(4px 4px 0 var(--green-dark));
}

/* Línea de tinta gruesa */
.ink-line {
    width: 100%;
    height: 4px;
    background-color: var(--ink);
    border-radius: 2px;
    transform: rotate(-0.5deg);
    box-shadow: 2px 2px 0 var(--purple);
}

/* Estrella de 5 puntas estilo cómic */
.star-hand {
    width: 50px;
    height: 50px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50,10 L58,38 L88,38 L64,56 L72,85 L50,68 L28,85 L36,56 L12,38 L42,38 Z" fill="%238ce65a" stroke="%230a0a0a" stroke-width="4"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(10deg);
    filter: drop-shadow(4px 4px 0 var(--ink));
}