/* ============================================
ESTILOS PARA PÁGINAS DE APRENDIZAJE
============================================ */

.learn-page {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
padding-top: 100px;
}
.page-header {
text-align: center;
margin-bottom: 3rem;
padding: 2rem;
background: var(--gris-oscuro);
border: 2px solid var(--verde-neon);
}
.page-title {
color: var(--verde-neon);
font-size: 2.5rem;
margin-bottom: 1rem;
text-shadow: 0 0 10px var(--verde-neon);
}
.page-title i {
margin-right: 0.5rem;
}
.page-subtitle {
color: var(--dorado);
font-size: 1.2rem;
}
/* Contenido principal */
.learn-content {
display: flex;
flex-direction: column;
gap: 3rem;
}
/* Secciones de reglas */
.rule-section,
.lore-section,
.example-section,
.tips-category,
.faq-category {
background: var(--gris-oscuro);
padding: 2rem;
border: 2px solid var(--dorado);
}
.rule-section h2,
.lore-section h2,
.example-section h2,
.tips-category h2,
.faq-category h2 {
color: var(--dorado);
font-size: 1.8rem;
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--dorado);
}
.rule-section h2 i,
.lore-section h2 i,
.example-section h2 i,
.tips-category h2 i,
.faq-category h2 i {
margin-right: 0.5rem;
}
/* Cajas de contenido */
.rule-box,
.lore-box,
.example-box {
background: var(--negro);
padding: 1.5rem;
margin-bottom: 1.5rem;
border-left: 4px solid var(--verde-neon);
}
.rule-box p,
.lore-box p,
.example-box p {
color: var(--texto);
line-height: 1.8;
margin-bottom: 1rem;
}
/* Ejemplos y citas */
.example,
blockquote {
background: var(--gris-medio);
padding: 1rem;
margin: 1rem 0;
border-left: 3px solid var(--dorado);
font-style: italic;
}
.example strong,
blockquote strong {
color: var(--dorado);
display: block;
margin-bottom: 0.5rem;
}
/* Cajas de advertencia y consejos */
.warning-box,
.tip-box {
padding: 1rem;
margin: 1rem 0;
border: 2px solid;
display: flex;
gap: 1rem;
align-items: flex-start;
}
.warning-box {
border-color: var(--rojo-alerta);
background: rgba(255, 0, 60, 0.1);
}
.warning-box i {
color: var(--rojo-alerta);
font-size: 1.5rem;
}
.tip-box {
border-color: var(--verde-neon);
background: rgba(0, 255, 65, 0.1);
}
.tip-box i {
color: var(--verde-neon);
font-size: 1.5rem;
}
.warning-box p,
.tip-box p {
margin: 0;
color: var(--texto);
}
/* Listas */
.rule-list,
.services-list,
.sectors-grid {
margin: 1rem 0;
}
.rule-list li {
padding: 0.5rem 0;
padding-left: 1.5rem;
position: relative;
color: var(--texto);
}
.rule-list li:before {
content: "▶";
position: absolute;
left: 0;
color: var(--verde-neon);
}
/* Códigos de seguridad */
.security-codes {
display: grid;
gap: 1rem;
margin: 1.5rem 0;
}
.code-item {
display: flex;
gap: 1rem;
padding: 1rem;
background: var(--negro);
border: 2px solid;
align-items: center;
}
.code-item.infrared { border-color: #ff0000; }
.code-item.orange { border-color: #ff8c00; }
.code-item.yellow { border-color: #ffd700; }
.code-item.green { border-color: #00ff00; }
.code-item.blue { border-color: #0080ff; }
.code-item.indigo { border-color: #4b0082; }
.code-item.ultraviolet { border-color: #9400d3; }
.code-badge {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: bold;
color: white;
flex-shrink: 0;
}
.code-item.infrared .code-badge { background: #ff0000; }
.code-item.orange .code-badge { background: #ff8c00; }
.code-item.yellow .code-badge { background: #ffd700; color: black; }
.code-item.green .code-badge { background: #00ff00; color: black; }
.code-item.blue .code-badge { background: #0080ff; }
.code-item.indigo .code-badge { background: #4b0082; }
.code-item.ultraviolet .code-badge { background: #9400d3; }
.code-info h3 {
color: var(--dorado);
margin-bottom: 0.5rem;
}
.code-info p {
color: var(--texto);
margin: 0;
}
/* Grids */
.sectors-grid,
.societies-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.sector-card,
.society-card {
background: var(--gris-medio);
padding: 1.5rem;
border: 2px solid var(--dorado);
transition: all 0.3s;
}
.sector-card:hover,
.society-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(255, 215, 0, 0.3);
}
.sector-card h3,
.society-card h3 {
color: var(--verde-neon);
margin-bottom: 0.5rem;
}
.society-card i {
font-size: 2rem;
color: var(--verde-neon);
margin-bottom: 0.5rem;
}
/* Servicios */
.services-list {
list-style: none;
}
.services-list li {
display: flex;
gap: 1rem;
padding: 1rem;
margin: 0.5rem 0;
background: var(--gris-medio);
border-left: 3px solid var(--verde-neon);
}
.services-list li i {
font-size: 1.5rem;
color: var(--verde-neon);
min-width: 40px;
}
.services-list li strong {
color: var(--dorado);
display: block;
margin-bottom: 0.3rem;
}
.services-list li p {
margin: 0;
color: var(--texto);
}
/* Referencia rápida */
.quick-reference {
background: var(--gris-oscuro);
padding: 2rem;
border: 2px solid var(--verde-neon);
margin-top: 2rem;
}
.reference-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-top: 1.5rem;
}
.reference-item {
background: var(--negro);
padding: 1.5rem;
border: 2px solid var(--dorado);
text-align: center;
}
.reference-item h3 {
color: var(--verde-neon);
margin-bottom: 0.5rem;
}
.reference-item p {
color: var(--texto);
font-size: 0.9rem;
}
/* Ejemplos de juego */
.example-context,
.example-dialogue,
.example-resolution,
.example-lesson {
margin: 1.5rem 0;
}
.example-context h3,
.example-dialogue h3,
.example-resolution h3,
.example-lesson h3 {
color: var(--dorado);
margin-bottom: 0.5rem;
}
.dialogue-line {
background: var(--gris-medio);
padding: 1rem;
margin: 0.5rem 0;
border-left: 3px solid var(--verde-neon);
}
.dialogue-line strong {
color: var(--verde-neon);
display: block;
margin-bottom: 0.3rem;
}
.dialogue-line p {
margin: 0;
color: var(--texto);
}
/* Tips */
.tip-card {
background: var(--negro);
padding: 1.5rem;
margin: 1rem 0;
border-left: 4px solid var(--verde-neon);
}
.tip-card h3 {
color: var(--verde-neon);
margin-bottom: 1rem;
}
.tip-card h3 i {
margin-right: 0.5rem;
}
.tip-card p {
color: var(--texto);
line-height: 1.8;
}
.tip-example {
background: var(--gris-medio);
padding: 1rem;
margin-top: 1rem;
border-left: 3px solid var(--dorado);
}
.tip-example strong {
color: var(--dorado);
display: block;
margin-bottom: 0.5rem;
}
.tip-card.advanced {
border-left-color: var(--dorado);
}
.tip-card.advanced h3 {
color: var(--dorado);
}
/* Errores */
.error-card {
background: var(--negro);
padding: 1.5rem;
margin: 1rem 0;
border-left: 4px solid var(--rojo-alerta);
}
.error-card h3 {
color: var(--rojo-alerta);
margin-bottom: 1rem;
}
.error-card h3 i {
margin-right: 0.5rem;
}
.error-card p {
color: var(--texto);
line-height: 1.8;
}
/* FAQ */
.faq-item {
background: var(--negro);
margin: 1rem 0;
border: 2px solid var(--dorado);
overflow: hidden;
}
.faq-item h3 {
padding: 1rem;
margin: 0;
background: var(--gris-medio);
color: var(--dorado);
cursor: pointer;
transition: all 0.3s;
}
.faq-item h3:hover {
background: var(--gris-oscuro);
color: var(--verde-neon);
}
.faq-answer {
padding: 0;
max-height: 0;
overflow: hidden;
transition: all 0.3s;
}
.faq-answer.active {
padding: 1rem;
max-height: 500px;
}
.faq-answer p {
color: var(--texto);
line-height: 1.8;
margin: 0;
}
/* Footer de página */
.page-footer {
display: flex;
justify-content: space-between;
gap: 1rem;
margin-top: 3rem;
padding-top: 2rem;
border-top: 2px solid var(--dorado);
}
.page-footer .btn {
flex: 1;
max-width: 300px;
}
/* Responsive */
@media (max-width: 768px) {
.learn-page {
padding: 1rem;
padding-top: 80px;
}
.page-title {
    font-size: 1.8rem;
}

.rule-section,
.lore-section,
.example-section,
.tips-category,
.faq-category {
    padding: 1rem;
}

.sectors-grid,
.societies-grid,
.reference-grid {
    grid-template-columns: 1fr;
}

.code-item {
    flex-direction: column;
    text-align: center;
}

.page-footer {
    flex-direction: column;
}

.page-footer .btn {
    max-width: 100%;
}
}