/* ============================================
ESTILOS PARA PÁGINAS DE GM (DIRIGIR)
============================================ */

.gm-page {
max-width: 1400px;
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;
}
/* Introducción */
.gm-intro,
.adventures-intro,
.forms-intro {
background: var(--gris-oscuro);
padding: 2rem;
margin-bottom: 3rem;
border-left: 4px solid var(--dorado);
}
.gm-intro p,
.adventures-intro p,
.forms-intro p {
color: var(--texto);
line-height: 1.8;
margin-bottom: 1rem;
}
.warning-text {
color: var(--rojo-alerta);
font-weight: bold;
margin-top: 1rem;
}
/* Grid de Herramientas GM */
.gm-tools-grid {
display: flex;
flex-direction: column;
gap: 3rem;
}
.gm-category {
background: var(--gris-oscuro);
padding: 2rem;
border: 2px solid var(--dorado);
}
.gm-category h2 {
color: var(--dorado);
font-size: 1.8rem;
margin-bottom: 0.5rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--dorado);
}
.gm-category h2 i {
margin-right: 0.5rem;
}
.category-description {
color: var(--texto);
margin-bottom: 2rem;
opacity: 0.8;
}
/* Tarjetas de Herramientas GM */
.gm-tool-card {
display: flex;
gap: 2rem;
background: var(--negro);
padding: 2rem;
margin-bottom: 1.5rem;
border-left: 4px solid var(--verde-neon);
transition: all 0.3s;
}
.gm-tool-card:hover {
transform: translateX(10px);
box-shadow: 0 5px 20px rgba(0, 255, 65, 0.2);
}
.tool-icon {
font-size: 3rem;
color: var(--verde-neon);
min-width: 80px;
text-align: center;
text-shadow: 0 0 10px var(--verde-neon);
}
.tool-content {
flex: 1;
}
.tool-content h3 {
color: var(--dorado);
font-size: 1.5rem;
margin-bottom: 1rem;
}
.tool-content p {
color: var(--texto);
line-height: 1.6;
margin-bottom: 1rem;
}
.tool-features {
list-style: none;
margin: 1rem 0;
}
.tool-features li {
padding: 0.3rem 0;
padding-left: 1.5rem;
position: relative;
color: var(--texto);
}
.tool-features li:before {
content: "▶";
position: absolute;
left: 0;
color: var(--verde-neon);
}
.file-info {
display: flex;
gap: 1.5rem;
margin: 1rem 0;
color: var(--texto);
opacity: 0.8;
}
.file-info i {
margin-right: 0.3rem;
color: var(--dorado);
}
.download-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-top: 1rem;
}
/* Banco de Aventuras */
.adventures-filters {
background: var(--gris-oscuro);
padding: 2rem;
margin-bottom: 2rem;
border: 2px solid var(--verde-neon);
}
.adventures-filters h3 {
color: var(--dorado);
margin-bottom: 1rem;
}
.filter-group {
margin: 1rem 0;
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.filter-group label {
color: var(--dorado);
font-weight: bold;
min-width: 100px;
}
.filter-btn {
padding: 0.5rem 1rem;
background: transparent;
border: 2px solid var(--verde-neon);
color: var(--verde-neon);
cursor: pointer;
transition: all 0.3s;
font-family: 'Courier New', monospace;
}
.filter-btn:hover,
.filter-btn.active {
background: var(--verde-neon);
color: var(--negro);
}
/* Tarjetas de Aventuras */
.adventures-list {
display: flex;
flex-direction: column;
gap: 2rem;
}
.adventure-card {
background: var(--gris-oscuro);
border: 2px solid var(--dorado);
padding: 2rem;
transition: all 0.3s;
}
.adventure-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(255, 215, 0, 0.3);
}
.adventure-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 2px solid var(--dorado);
}
.adventure-badge {
padding: 0.3rem 1rem;
border-radius: 3px;
font-size: 0.8rem;
font-weight: bold;
text-transform: uppercase;
}
.adventure-badge.oficial {
background: var(--verde-neon);
color: var(--negro);
}
.adventure-badge.comunidad {
background: var(--dorado);
color: var(--negro);
}
.adventure-meta {
display: flex;
gap: 1.5rem;
color: var(--texto);
}
.adventure-meta i {
margin-right: 0.3rem;
color: var(--dorado);
}
.adventure-title {
color: var(--verde-neon);
font-size: 1.8rem;
margin-bottom: 1rem;
}
.adventure-synopsis {
color: var(--texto);
line-height: 1.8;
margin-bottom: 1.5rem;
}
.adventure-details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin: 1.5rem 0;
padding: 1.5rem;
background: var(--negro);
border-left: 4px solid var(--verde-neon);
}
.detail-item h4 {
color: var(--dorado);
margin-bottom: 0.5rem;
}
.detail-item h4 i {
margin-right: 0.3rem;
}
.detail-item p {
color: var(--texto);
line-height: 1.6;
}
.adventure-actions {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
}
/* Sección Contribuir */
.contribute-section {
background: var(--gris-oscuro);
padding: 2rem;
margin: 3rem 0;
border: 2px solid var(--dorado);
text-align: center;
}
.contribute-section h2 {
color: var(--dorado);
margin-bottom: 1rem;
}
.contribute-section p {
color: var(--texto);
margin-bottom: 1.5rem;
}
/* Formularios */
.forms-categories {
display: flex;
flex-direction: column;
gap: 3rem;
}
.form-category {
background: var(--gris-oscuro);
padding: 2rem;
border: 2px solid var(--dorado);
}
.form-category h2 {
color: var(--dorado);
font-size: 1.8rem;
margin-bottom: 2rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--dorado);
}
.form-category h2 i {
margin-right: 0.5rem;
}
.form-card {
display: flex;
gap: 2rem;
background: var(--negro);
padding: 2rem;
margin-bottom: 1.5rem;
border-left: 4px solid var(--verde-neon);
transition: all 0.3s;
}
.form-card:hover {
transform: translateX(10px);
box-shadow: 0 5px 20px rgba(0, 255, 65, 0.2);
}
.form-icon {
font-size: 3rem;
color: var(--verde-neon);
min-width: 80px;
text-align: center;
}
.form-content {
flex: 1;
}
.form-content h3 {
color: var(--dorado);
font-size: 1.3rem;
margin-bottom: 1rem;
}
.form-content p {
color: var(--texto);
line-height: 1.6;
margin-bottom: 1rem;
}
/* Pack Completo */
.complete-pack {
background: var(--gris-oscuro);
padding: 3rem;
margin: 3rem 0;
border: 2px solid var(--verde-neon);
text-align: center;
}
.complete-pack h2 {
color: var(--verde-neon);
margin-bottom: 1rem;
}
.complete-pack p {
color: var(--texto);
margin-bottom: 1.5rem;
}
.pack-info {
display: flex;
justify-content: center;
gap: 2rem;
margin: 1.5rem 0;
color: var(--texto);
}
.pack-info i {
margin-right: 0.3rem;
color: var(--dorado);
}
/* Acceso Restringido */
.restricted-page {
max-width: 900px;
}
.restricted-header {
border-color: var(--rojo-alerta);
}
.restricted-header .page-title {
color: var(--rojo-alerta);
text-shadow: 0 0 10px var(--rojo-alerta);
}
.access-screen {
background: var(--gris-oscuro);
padding: 3rem;
border: 2px solid var(--rojo-alerta);
text-align: center;
}
.access-warning {
margin-bottom: 2rem;
}
.access-warning i {
font-size: 4rem;
color: var(--rojo-alerta);
margin-bottom: 1rem;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.access-warning h2 {
color: var(--rojo-alerta);
font-size: 2rem;
margin-bottom: 1rem;
}
.access-warning p {
color: var(--texto);
line-height: 1.6;
}
.access-form {
background: var(--negro);
padding: 2rem;
margin: 2rem 0;
}
.access-form h3 {
color: var(--dorado);
margin-bottom: 1rem;
}
.access-note {
color: var(--texto);
margin-bottom: 2rem;
font-size: 0.9rem;
}
.input-group {
margin-bottom: 1.5rem;
}
.input-group label {
display: block;
color: var(--dorado);
margin-bottom: 0.5rem;
font-weight: bold;
}
.input-group input {
width: 100%;
padding: 1rem;
background: var(--gris-medio);
border: 2px solid var(--verde-neon);
color: var(--verde-neon);
font-family: 'Courier New', monospace;
font-size: 1.2rem;
text-align: center;
letter-spacing: 2px;
}
.input-group input:focus {
outline: none;
border-color: var(--dorado);
box-shadow: 0 0 10px var(--dorado);
}
.access-error {
margin-top: 1.5rem;
padding: 1rem;
background: rgba(255, 0, 60, 0.2);
border: 2px solid var(--rojo-alerta);
color: var(--rojo-alerta);
}
.access-error i {
font-size: 2rem;
margin-bottom: 0.5rem;
}
.access-error p {
margin: 0.5rem 0;
}
.access-footer {
margin-top: 2rem;
}
/* Contenido Restringido */
.restricted-content {
margin-top: 2rem;
}
.access-granted {
background: rgba(0, 255, 65, 0.1);
border: 2px solid var(--verde-neon);
padding: 2rem;
text-align: center;
margin-bottom: 2rem;
}
.access-granted i {
font-size: 3rem;
color: var(--verde-neon);
margin-bottom: 1rem;
}
.access-granted h2 {
color: var(--verde-neon);
margin-bottom: 0.5rem;
}
.access-granted p {
color: var(--texto);
}
.restricted-sections {
display: flex;
flex-direction: column;
gap: 2rem;
}
.restricted-section {
background: var(--gris-oscuro);
padding: 2rem;
border: 2px solid var(--dorado);
}
.restricted-section h3 {
color: var(--dorado);
font-size: 1.5rem;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--dorado);
}
.restricted-section h3 i {
margin-right: 0.5rem;
}
.restricted-section p {
color: var(--texto);
line-height: 1.6;
margin-bottom: 1rem;
}
.restricted-list {
list-style: none;
}
.restricted-list li {
background: var(--negro);
padding: 1.5rem;
margin: 1rem 0;
border-left: 4px solid var(--verde-neon);
}
.restricted-list li strong {
color: var(--verde-neon);
display: block;
margin-bottom: 0.5rem;
}
.restricted-list li p {
color: var(--texto);
margin-bottom: 1rem;
}
.btn-small {
padding: 0.5rem 1rem;
font-size: 0.9rem;
}
/* Contenido Próximo */
.upcoming-content {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 1rem;
}
.upcoming-item {
background: var(--negro);
padding: 1.5rem;
border-left: 4px solid var(--dorado);
}
.badge {
display: inline-block;
padding: 0.3rem 0.8rem;
background: var(--dorado);
color: var(--negro);
font-size: 0.8rem;
font-weight: bold;
margin-bottom: 0.5rem;
}
.upcoming-item h4 {
color: var(--verde-neon);
margin: 0.5rem 0;
}
.upcoming-item p {
color: var(--texto);
margin: 0;
}
/* Footer de página GM */
.gm-footer {
display: flex;
justify-content: space-between;
gap: 1rem;
margin-top: 3rem;
padding-top: 2rem;
border-top: 2px solid var(--dorado);
}
.gm-footer .btn {
flex: 1;
max-width: 300px;
}
.restricted-footer {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 2rem;
}
/* Utilidades */
.hidden {
display: none !important;
}
.btn-large {
padding: 1.2rem 2.5rem;
font-size: 1.1rem;
}
/* Responsive */
@media (max-width: 768px) {
.gm-page {
padding: 1rem;
padding-top: 80px;
}

.page-title {
    font-size: 1.8rem;
}

.gm-tool-card,
.form-card {
    flex-direction: column;
    gap: 1rem;
}

.tool-icon,
.form-icon {
    font-size: 2rem;
    min-width: auto;
}

.adventure-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

.adventure-meta {
    flex-direction: column;
    gap: 0.5rem;
}

.adventure-details {
    grid-template-columns: 1fr;
}

.filter-group {
    flex-direction: column;
    align-items: flex-start;
}

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

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

.pack-info {
    flex-direction: column;
    gap: 0.5rem;
}

}