/*
Sin nombre
Leigh Garrett
*/

/* importo la fuente de google fonts */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* reseteo los margenes y paddings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* estilos del body para movil primero */
body {
    font-family: 'Press Start 2P', cursive;
    background: linear-gradient(180deg, #1a0033 0%, #330066 100%);
    color: #e6d5ff;
    line-height: 1.8;
    overflow-x: hidden;
    font-size: 12px;
}

/* contenedor principal */
#contenedor {
    width: 100%;
    margin: 0;
    background: linear-gradient(135deg, #2d1b4e 0%, #1a0033 100%);
    border: 3px solid #ff6ec7;
    box-shadow: 0 0 20px rgba(255, 110, 199, 0.6);
}

/* seccion de introduccion */
#intro {
    background: linear-gradient(90deg, #4a0e78, #6b1fa0, #4a0e78);
    padding: 15px;
    color: #b8e6ff;
    border-bottom: 4px solid #00d4ff;
}

/* titulo */
#titulo {
    text-align: center;
    margin-bottom: 20px;
    animation: aparecer 1s ease-in;
}

@keyframes aparecer {
    from { 
        opacity: 0; 
        transform: translateY(-20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

#titulo h1 {
    font-size: 0.9em;
    margin-bottom: 15px;
    color: #ffec59;
    text-shadow: 3px 3px #ff6ec7, -3px -3px #00d4ff;
}

#titulo h2 {
    font-size: 0.45em;
    color: #7dffb3;
    animation: parpadeo 2s infinite;
}

@keyframes parpadeo {
    0%, 50%, 100% { 
        opacity: 1; 
    }
    25%, 75% { 
        opacity: 0.6; 
    }
}

/* cajas de resumen y comentario */
#resumen, #comentario {
    background: rgba(255, 110, 199, 0.15);
    padding: 15px;
    margin-top: 15px;
    border: 3px solid #ff6ec7;
    font-size: 0.65em;
    transition: transform 0.3s;
}

#resumen:hover, #comentario:hover {
    transform: translateX(5px);
}

#resumen p, #comentario p {
    margin-bottom: 12px;
    color: #e6d5ff;
}

/* listas del resumen */
#resumen ul {
    list-style: none;
    margin-left: 15px;
}

#resumen ul li {
    margin-bottom: 8px;
    color: #b8e6ff;
}

#resumen ul li:before {
    content: "> ";
    color: #ffec59;
    margin-right: 5px;
    display: inline-block;
    animation: flechita 1s infinite;
}

@keyframes flechita {
    0%, 100% { 
        transform: translateX(0); 
    }
    50% { 
        transform: translateX(5px); 
    }
}

/* enlaces del resumen */
#resumen a, #comentario a {
    color: #ff6ec7;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s;
}

#resumen a:hover, #comentario a:hover {
    color: #ffec59;
    text-shadow: 0 0 10px rgba(255, 236, 89, 0.8);
}

/* menu de navegacion interna */
#enlacesintra {
    background: #1a0033;
    padding: 15px;
    border-bottom: 4px solid #b388ff;
}

#enlacesintra h3 {
    color: #ff6ec7;
    margin-bottom: 12px;
    font-size: 0.7em;
}

#enlacesintra ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* botones del menu */
#enlacesintra li a {
    color: #1a0033;
    text-decoration: none;
    padding: 10px;
    background: #7dffb3;
    border: 3px solid #00d4ff;
    box-shadow: 3px 3px 0 #ff6ec7;
    display: block;
    text-align: center;
    font-size: 0.65em;
    transition: all 0.2s;
}

#enlacesintra li a:hover {
    background: #ffec59;
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 #ff6ec7;
}

#enlacesintra li a:active {
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 #ff6ec7;
}

/* seccion de apartados */
#apartados {
    padding: 15px;
    background: linear-gradient(180deg, #2d1b4e 0%, #4a0e78 100%);
}

#apartados > div {
    margin-bottom: 25px;
    padding: 15px;
    border: 3px solid #00d4ff;
    background: rgba(0, 212, 255, 0.1);
    transition: border-color 0.3s;
}

#apartados > div:hover {
    border-color: #ffec59;
}

/* titulos de apartados */
#apartados h3 {
    color: #ffec59;
    font-size: 0.9em;
    margin-bottom: 15px;
    border-bottom: 3px solid #ffec59;
    padding-bottom: 8px;
}

/* parrafos */
#apartados p {
    margin-bottom: 12px;
    font-size: 0.6em;
    color: #b8e6ff;
    text-align: left;
}

/* listas */
#apartados ul {
    margin-left: 15px;
    margin-bottom: 12px;
    font-size: 0.6em;
    color: #7dffb3;
}

#apartados ul li {
    margin-bottom: 8px;
}

#apartados ul li:before {
    content: "> ";
    color: #ffec59;
}

#apartados ul ul {
    margin-top: 8px;
    margin-left: 15px;
}

/* definiciones */
#apartados dl {
    margin: 15px 0;
    font-size: 0.6em;
}

#apartados dt {
    font-weight: bold;
    color: #ff6ec7;
    margin-top: 12px;
}

#apartados dt a {
    color: #ff6ec7;
    text-decoration: none;
    transition: color 0.3s;
}

#apartados dt a:hover {
    color: #ffec59;
    text-shadow: 0 0 8px rgba(255, 236, 89, 0.7);
}

#apartados dd {
    margin-left: 15px;
    margin-top: 6px;
    color: #b8e6ff;
}

/* clases especiales */
.autores {
    color: #7dffb3;
}

.editorial {
    color: #b388ff;
}

.isbn {
    color: #9575cd;
}

/* seccion de enlaces */
#enlaces {
    background: #1a0033;
    padding: 15px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    border-top: 4px solid #ff6ec7;
}

#enlaces > div {
    background: linear-gradient(135deg, #4a0e78 0%, #2d1b4e 100%);
    padding: 15px;
    border: 3px solid #00d4ff;
    box-shadow: 5px 5px 0 rgba(0, 212, 255, 0.3);
    transition: transform 0.3s;
}

#enlaces > div:hover {
    transform: translateY(-5px);
    box-shadow: 8px 8px 0 rgba(0, 212, 255, 0.5);
}

/* titulos de enlaces */
#enlaces h3 {
    color: #ffec59;
    font-size: 0.65em;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #ffec59;
}

#enlaces ul {
    list-style: none;
    font-size: 0.6em;
}

#enlaces li {
    margin-bottom: 10px;
    padding-left: 12px;
    position: relative;
}

#enlaces li:before {
    content: "* ";
    position: absolute;
    left: 0;
    color: #ff6ec7;
    animation: brillo 1.5s infinite;
}

@keyframes brillo {
    0%, 100% { 
        opacity: 1; 
    }
    50% { 
        opacity: 0.5; 
    }
}

/* enlaces */
#enlaces a {
    color: #b8e6ff;
    text-decoration: none;
    transition: color 0.3s;
}

#enlaces a:hover {
    color: #7dffb3;
}

#enlaces a.c {
    color: #b388ff;
    font-size: 0.9em;
}

/* pie de pagina */
#enlacesversiones {
    background: #1a0033;
    padding: 15px;
    border-top: 4px solid #b388ff;
}

#enlacesversiones h3 {
    color: #ff6ec7;
    margin-bottom: 12px;
    font-size: 0.7em;
}

#enlacesversiones ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* botones de versiones */
#enlacesversiones li a {
    color: #1a0033;
    text-decoration: none;
    padding: 10px;
    background: #b388ff;
    border: 3px solid #ff6ec7;
    box-shadow: 3px 3px 0 #00d4ff;
    display: block;
    text-align: center;
    font-size: 0.65em;
    transition: all 0.3s;
}

#enlacesversiones li a:hover {
    background: #00d4ff;
    transform: scale(1.05);
    box-shadow: 5px 5px 0 #ff6ec7;
}

/* oculto los divs extra */
#extraDiv1, #extraDiv2, #extraDiv3,
#extraDiv4, #extraDiv5, #extraDiv6 {
    display: none;
}

/* tablets pequeñas */
@media (min-width: 641px) {
    body {
        font-size: 13px;
    }
    
    #contenedor {
        width: 98%;
        margin: 10px auto;
        border-width: 4px;
    }
    
    #intro, #apartados, #enlaces, #enlacesintra, #enlacesversiones {
        padding: 20px;
    }
    
    #titulo h1 {
        font-size: 1em;
    }
    
    #titulo h2 {
        font-size: 0.5em;
    }
    
    #resumen, #comentario {
        font-size: 0.6em;
        padding: 20px;
    }
    
    #apartados p {
        text-align: justify;
    }
}

/* tablets grandes */
@media (min-width: 769px) {
    body {
        font-size: 14px;
    }
    
    #contenedor {
        width: 95%;
        margin: 15px auto;
        border-width: 6px;
    }
    
    #enlacesintra ul {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    #enlacesintra li a {
        display: inline-block;
    }
    
    #enlaces {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
    }
    
    #enlacesversiones ul {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    #enlacesversiones li a {
        display: inline-block;
    }
}

/* portatiles */
@media (min-width: 1025px) {
    body {
        font-size: 16px;
    }
    
    #contenedor {
        max-width: 1200px;
        width: 95%;
        margin: 20px auto;
        border-width: 8px;
    }
    
    #intro, #apartados, #enlaces {
        padding: 30px;
    }
    
    #enlacesintra, #enlacesversiones {
        padding: 25px 30px;
    }
    
    #titulo h1 {
        font-size: 1.5em;
    }
    
    #titulo h2 {
        font-size: 0.7em;
    }
    
    #titulo {
        margin-bottom: 30px;
    }
    
    #enlacesintra h3 {
        font-size: 0.8em;
    }
    
    #apartados h3 {
        font-size: 1em;
    }
    
    #apartados > div {
        padding: 20px;
        margin-bottom: 40px;
    }
    
    #enlaces {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
    
    #enlaces > div {
        padding: 20px;
    }
    
    #enlaces h3 {
        font-size: 0.7em;
    }
    
    #enlacesversiones h3 {
        font-size: 0.8em;
    }
}

/* pantallas grandes */
@media (min-width: 1441px) {
    #contenedor {
        max-width: 1400px;
    }
    
    #intro, #apartados, #enlaces {
        padding: 35px;
    }
    
    #titulo h1 {
        font-size: 1.6em;
    }
    
    #titulo h2 {
        font-size: 0.8em;
    }
}

/* pantallas muy grandes */
@media (min-width: 1920px) {
    #contenedor {
        max-width: 1600px;
    }
    
    #intro, #apartados, #enlaces {
        padding: 40px;
    }
    
    #titulo h1 {
        font-size: 1.8em;
    }
    
    #titulo h2 {
        font-size: 0.9em;
    }
}

/* para imprimir */
@media print {
    body {
        background: #fff;
        color: #000;
    }
    
    #contenedor {
        border-color: #000;
        box-shadow: none;
    }
    
    #enlacesintra, #enlaces, #enlacesversiones {
        display: none;
    }
    
    * {
        animation: none !important;
        transition: none !important;
    }
}