/* Importar una fuente más agresiva para títulos */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;400&display=swap');

:root {
    --primary-red: #ff0033;
    --toxic-green: #39ff14;
    --dark-bg: #0a0a0a;
    --glass-bg: rgba(255, 255, 255, 0.05);
}

body {
    background-color: var(--dark-bg);
    background-image:
        radial-gradient(circle at 50% 50%, #1a0000 0%, #0a0a0a 100%);
    color: #e0e0e0;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    min-height: 100vh;
}

/* Efecto de parpadeo para el título */
@keyframes flicker {

    0%,
    18%,
    22%,
    25%,
    53%,
    57%,
    100% {
        opacity: 1;
        text-shadow: 0 0 10px var(--primary-red);
    }

    20%,
    24%,
    55% {
        opacity: 0.3;
        text-shadow: none;
    }
}

header {
    padding: 3rem 1rem;
    text-align: center;
}

h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: 3rem;
    color: var(--primary-red);
    text-transform: uppercase;
    animation: flicker 3s infinite;
}

/* Navegación Moderna */
nav {
    margin-top: 20px;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
    background: rgba(0, 0, 0, 0.7);
    border-bottom: 1px solid #333;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 20px 30px;
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    transition: all 0.4s ease;
    border-bottom: 2px solid transparent;
}

nav ul li a:hover {
    color: var(--toxic-green);
    background: rgba(57, 255, 20, 0.1);
    border-bottom: 2px solid var(--toxic-green);
    text-shadow: 0 0 10px var(--toxic-green);
}

/* Contenedor con efecto Glassmorphism */
main {
    max-width: 900px;
    margin: 50px auto;
    padding: 40px;
    background: var(--glass-bg);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

h2 {
    font-family: 'Orbitron', sans-serif;
    color: var(--toxic-green);
    margin-bottom: 20px;
}

p {
    font-size: 1.1rem;
    color: #ccc;
    line-height: 1.8;
}

/* Pie de página */
footer {
    text-align: center;
    padding: 40px;
    color: #555;
    font-size: 0.8rem;
    letter-spacing: 2px;
}

/*ESTILO EQUIPO.html */
/* Estilos de Tabla de Suministros */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
    background: rgba(0, 0, 0, 0.3);
}

th,
td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid rgba(57, 255, 20, 0.2);
}

th {
    color: var(--toxic-green);
    text-transform: uppercase;
    letter-spacing: 1px;
}

tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* Colores de Prioridad */
.high {
    color: #ff4444;
    font-weight: bold;
    text-shadow: 0 0 5px #ff0000;
}

.medium {
    color: #ffcc00;
}

/* Grid de Tarjetas */
.grid-equipo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 30px;
}

.card {
    background: rgba(255, 255, 255, 0.03);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(57, 255, 20, 0.3);
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    border-color: var(--toxic-green);
    box-shadow: 0 5px 15px rgba(57, 255, 20, 0.2);
}

.card h3 {
    margin-top: 0;
    color: var(--primary-red);
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
}

/* Responsive para móviles */
@media (max-width: 600px) {
    .grid-equipo {
        grid-template-columns: 1fr;
    }

    h1 {
        font-size: 1.8rem;
    }

    nav ul {
        flex-direction: column;
        align-items: center;
    }
}

/* =========================================
   SECCIÓN DE ARMAS (CARDS MODERNAS)
   ========================================= */

.armas-seccion {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 0, 51, 0.3);
    /* Línea roja sutil */
}

.encabezado-armas {
    text-align: center;
    margin-bottom: 40px;
    padding: 0 20px;
    /* Pequeño padding para el texto en móvil */
}

/* NUEVO: Contenedor Principal con Márgenes Laterales */
.contenedor-armas {
    max-width: 1200px;
    /* Ancho máximo de la galería */
    margin: 0 auto;
    /* Centra el contenedor */
    padding: 0 40px;
    /* !!! ESTA ES LA SEPARACIÓN DE LOS LATERALES !!! */
}

/* Grid de Tarjetas */
.grid-armas {
    display: grid;
    /* Columnas adaptables: mínimo 300px, máximo 1fr */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    /* Separación ENTRE tarjetas */
}

/* Estilo Base de la Tarjeta (como enlace) */
.arma-card {
    background: rgba(0, 0, 0, 0.5);
    /* Fondo oscuro semi-transparente */
    border: 1px solid rgba(255, 255, 255, 0.08);
    /* Borde muy sutil */
    border-radius: 12px;
    overflow: hidden;
    /* Corta todo lo que salga del borde redondeado */
    text-decoration: none;
    /* Quita el subrayado de enlace */
    color: inherit;
    /* Usa el color de texto del body */
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Efecto suave */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* Efecto Hover (al pasar el ratón) */
.arma-card:hover {
    transform: translateY(-10px) scale(1.02);
    /* Se eleva y agranda un poco */
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    z-index: 10;
    /* Se superpone a las demás */
}

/* Contenedor de la Foto */
.foto-contenedor {
    width: 100%;
    height: 180px;
    /* Altura fija de la foto en la tarjeta */
    overflow: hidden;
    background: #000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.foto-contenedor img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Ajusta la foto sin deformar */
    opacity: 0.6;
    /* Foto oscurecida por defecto */
    transition: opacity 0.4s, transform 0.4s;
}

/* Efecto de foto al hover */
.arma-card:hover .foto-contenedor img {
    opacity: 1;
    /* Foto a todo color */
    transform: scale(1.1);
    /* Zoom suave en la foto */
}

/* Información dentro de la tarjeta */
.card-info {
    padding: 20px;
    flex-grow: 1;
    /* Ocupa el espacio restante */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Separa título de specs */
}

.arma-card h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    margin: 0 0 10px 0;
    color: #fff;
    letter-spacing: 1px;
    transition: color 0.3s;
}

.arma-card:hover h3 {
    color: var(--toxic-green);
    /* El título brilla en verde */
}

.arma-card p {
    font-size: 0.9rem;
    color: #aaa;
    line-height: 1.5;
    margin: 0;
}

/* Badges (Etiquetas superiores) */
.badge-craft,
.badge-mil {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 0.65rem;
    font-family: 'Orbitron', sans-serif;
    padding: 5px 10px;
    border-radius: 4px;
    letter-spacing: 1px;
    z-index: 5;
    font-weight: bold;
}

.badge-craft {
    background: rgba(139, 69, 19, 0.8);
    /* Marrón madera */
    color: #ffcc00;
    border: 1px solid #8b4513;
}

.badge-mil {
    background: rgba(255, 0, 51, 0.2);
    /* Rojo neón sutil */
    color: var(--primary-red);
    border: 1px solid var(--primary-red);
    text-shadow: 0 0 5px var(--primary-red);
}

/* Mini Specs (Militar) */
.specs-mini {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.8rem;
    color: #ccc;
}

.specs-mini span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icono {
    font-style: normal;
    opacity: 0.7;
}

/* =========================================
   RESPONSIVE (MÓVVIL)
   ========================================= */
@media (max-width: 768px) {
    .contenedor-armas {
        padding: 0 20px;
        /* Reducimos el margen lateral en móviles */
    }

    .grid-armas {
        gap: 20px;
        /* Menor separación entre tarjetas */
    }

    .foto-contenedor {
        height: 150px;
        /* Fotos más bajas en móvil */
    }
}


/* CSS REFUGIOS.HTML */
.contenedor-refugios {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 40px;
}

.info-mapa {
    text-align: center;
    margin-bottom: 20px;
}

/* ESTILO DEL MAPA */
#map {
    width: 100%;
    height: 500px;
    /* Altura del mapa */
    border-radius: 15px;
    border: 2px solid var(--primary-red);
    box-shadow: 0 0 20px rgba(255, 0, 51, 0.2);
}

/* Leyenda del mapa */
.leyenda {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
    background: rgba(0, 0, 0, 0.4);
    padding: 15px;
    border-radius: 8px;
}

.item-leyenda {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}

.punto {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.verde {
    background: #39ff14;
    box-shadow: 0 0 5px #39ff14;
}

.rojo {
    background: #ff0033;
    box-shadow: 0 0 5px #ff0033;
}

/* Ajuste para las ventanas de información de Google (InfoWindows) */
.gm-style-iw {
    background-color: #1a1a1a !important;
    color: white !important;
    font-family: 'Arial', sans-serif;
    border-radius: 8px;
}


/* CSS TECNICAS.HTML */
.contenedor-tecnicas {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 40px;
}

.titulo-seccion {
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 30px;
    padding-bottom: 10px;
}

.titulo-seccion.survival {
    color: var(--toxic-green);
    border-bottom: 2px solid var(--toxic-green);
}

.titulo-seccion.combate {
    color: var(--primary-red);
    border-bottom: 2px solid var(--primary-red);
}

/* Grid y Tarjetas */
.grid-tecnicas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-bottom: 60px;
}

.tarjeta-tecnica {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: 15px;
    transition: all 0.3s ease;
}

.tarjeta-tecnica:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-5px);
}

/* Estilo de la tarjeta de combate (alerta) */
.tarjeta-tecnica.alerta:hover {
    border-color: var(--primary-red);
    box-shadow: 0 0 15px rgba(255, 0, 51, 0.2);
}

.icono-tecnica {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.tarjeta-tecnica h3 {
    font-family: 'Orbitron', sans-serif;
    margin-top: 0;
    font-size: 1.3rem;
}

.tarjeta-tecnica ul {
    padding-left: 20px;
    margin-top: 15px;
}

.tarjeta-tecnica li {
    margin-bottom: 8px;
    color: #bbb;
}

/* Divisor visual */
.divisor-caos {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #333, transparent);
    margin: 40px 0;
}


/* Estilos ARMAS */
.contenedor-detalle-arma {
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 40px;
}

.header-arma {
    margin-bottom: 30px;
}

.header-arma .categoria {
    color: #8b4513;
    /* Marrón madera */
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 2px;
}

/* Sección visual y estadísticas */
.seccion-visual {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    margin-bottom: 50px;
}

.foto-grande img {
    width: 100%;
    border-radius: 10px;
    border: 1px solid #444;
}

.stats-box {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat {
    margin-bottom: 15px;
}

.stat span {
    display: block;
    font-size: 0.8rem;
    margin-bottom: 5px;
    color: #ccc;
}

.bar {
    height: 8px;
    background: #222;
    border-radius: 4px;
    overflow: hidden;
}

.fill {
    height: 100%;
    background: var(--primary-red);
    box-shadow: 0 0 10px var(--primary-red);
}

/* Sección de Crafteo */
.crafteo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    background: rgba(0, 0, 0, 0.3);
    padding: 30px;
    border-radius: 15px;
    border-left: 4px solid #8b4513;
}

.crafteo h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    color: #ffcc00;
}

.crafteo ul,
.crafteo ol {
    color: #ccc;
    line-height: 1.6;
}

.crafteo li {
    margin-bottom: 10px;
}

/* Bloque de consejo */
.consejo-pro {
    margin-top: 40px;
    border-left: 4px solid var(--toxic-green);
    background: rgba(57, 255, 20, 0.05);
    padding: 20px;
    font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {

    .seccion-visual,
    .crafteo {
        grid-template-columns: 1fr;
    }
}

/* Estilo para la categoría MILITAR */
.categoria-mil {
    color: var(--primary-red);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 2px;
    font-weight: bold;
}

/* Ficha técnica tipo tabla */
.tabla-specs {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.tabla-specs td {
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.9rem;
}

.tabla-specs td:first-child {
    color: #888;
    font-weight: bold;
}

/* Alerta de ruido */
.alerta-ruido {
    background: rgba(255, 0, 51, 0.1);
    border: 1px solid var(--primary-red);
    padding: 15px;
    border-radius: 5px;
    color: #ffcccc;
    font-size: 0.85rem;
    margin-top: 20px;
}

/* Grid de mantenimiento */
.grid-mantenimiento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.paso {
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 5px;
    font-size: 0.8rem;
    border: 1px solid #333;
}

/* Responsive */
@media (max-width: 768px) {
    .grid-mantenimiento {
        grid-template-columns: 1fr;
    }
}