/* ================================================================
   RESET & VARIABLES BÁSICAS
================================================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

html,
body {
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
}

body {
  display: flex;
  flex-direction: column
}

main {
  flex: 1
}

/* Contenedor reutilizable */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem
}

/* ================================================================
   NAVBAR
================================================================ */
.navbar {
  background: #c00;
  color: #fff
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0
}

/* Logo */
.logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  line-height: 1.2
}

.logo small {
  display: block;
  font-size: .8rem;
  margin-top: .1rem
}

/* Enlaces */
.nav-links {
  list-style: none;
  display: flex
}

.nav-links li {
  margin-left: 1.5rem
}

.nav-links a {
  color: #fff;
  text-decoration: none;
  font-weight: 500
}

.nav-links a:hover {
  text-decoration: underline
}

/* Botón hamburguesa (oculto por defecto) */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 2rem;
  color: #fff;
  cursor: pointer
}

/* ──  MOBILE NAV  ≤768 px ───────────────────────────────────── */
/* ════════════════════════════════════════
   MENÚ LATERAL (≤ 768 px)
   ─ Se desliza desde la derecha
   ─ Cubre el alto completo (overlay)
════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Botón ☰ (ya lo tenías)  */
  .menu-toggle {
    display: block;
    /* visible en móvil */
    background: none;
    border: none;
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
    z-index: 1001;
    /* por encima del menú */
  }

  /* Panel cerrado (= “escondido” a la derecha) */
  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    /* cubre toda la altura */
    width: 260px;
    background: #c00;
    flex-direction: column;
    padding-top: 4.5rem;
    /* deja espacio al navbar */
    gap: 0;
    /* cada enlace ocupa todo el ancho */
    transform: translateX(100%);
    /* fuera de pantalla */
    transition: transform .3s ease;
    box-shadow: -4px 0 10px rgba(0, 0, 0, .25);
    z-index: 1000;
  }

  /* Panel abierto */
  .nav-links.open {
    transform: translateX(0);
  }

  /* Estilo de cada item  */
  .nav-links a {
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .25);
  }

  /* dentro del bloque @media (max-width: 768px) … */
  .menu-toggle.open {
    /* icono cuando el menú está abierto  */
    content: '';
  }

  .menu-toggle.open::before {
    /* cambia ☰ ➜ ✕ con pseudo-elemento   */
    content: '✕';
  }

}

/* ================================================================
   HERO
================================================================ */
.hero {
  position: relative;
  background: url('../images/local.png') center/cover no-repeat;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .4)
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  padding: 0 1rem
}

.hero-content img {
  max-width: 100px;
  margin: 0 auto 1rem
}

.hero-content h1 {
  font-size: 2.5rem;
  margin-bottom: .5rem
}

.hero-content p {
  font-size: 1.2rem
}

@media(max-width:600px) {
  .hero-content h1 {
    font-size: 1.8rem
  }

  .hero-content p {
    font-size: 1rem
  }
}

/* ================================================================
   SECCIONES GENERALES
================================================================ */
main section {
  padding: 3rem 0
}

main section h2 {
  margin-bottom: 1rem;
  color: #c00;
  font-size: 2rem
}

/* ================================================================
   HISTORIA & ÚNETE (layout flexible + responsive)
================================================================ */
.historia-content,
.unete-content {
  display: flex;
  gap: 20px
}

.video-contenedor {
  flex: 0 0 320px
}

.video-contenedor video,
.imagen-unete img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block
}

.video-contenedor video {
  border: 2px solid #ccc
}

.imagen-unete {
  flex: 1
}

.imagen-unete img {
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1)
}

@media(max-width:768px) {

  .historia-content,
  .unete-content {
    flex-direction: column;
    gap: 1rem
  }

  .video-contenedor,
  .imagen-unete,
  .texto-historia,
  .texto-unete,
  .imagen-logo,
  .imagen-resolucion {
    flex: 1 1 100%;
    width: 100%
  }
}

/* ================================================================
   CARRUSEL DE NOTICIAS  –  scroll-snap 100 % / 50 % / 33 %
================================================================ */
.carousel {
  position: relative;
  margin-top: 1.5rem
}

/* --- PISTA ---------------------------------------------------- */
.slides-wrapper {
  overflow-x: auto;
  /* se mueve en X                    */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* “anclaje”                        */
  scroll-behavior: smooth;
  /* animación nativa                 */
  padding: 0 2.75rem;
  /* hueco flechas (desktop)          */
  width: 100%;
}

.slides-wrapper::-webkit-scrollbar {
  display: none
}

/* oculta barra */

.slides {
  display: flex;
  gap: 1rem;
  /* separación tarjetas              */
}

/* --- TARJETA -------------------------------------------------- */
.slide {
  scroll-snap-align: start;
  /* se alinea al borde izquierdo     */
  flex: 0 0 100%;
  /* MOBILE → 1 por vista             */
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
  padding: 1rem;
  display: flex;
  flex-direction: column
}

@media(min-width:601px) and (max-width:900px) {
  .slide {
    flex: 0 0 50%
  }

  /* TABLET → 2 por vista             */
}

@media(min-width:901px) {
  .slide {
    flex: 0 0 33.333%
  }

  /* DESKTOP → 3 por vista            */
}

.slide img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: .75rem
}

.slide h3 {
  margin: .5rem 0;
  font-size: 1.1rem;
  color: #c00
}

.slide p {
  flex-grow: 1;
  font-size: .9rem;
  margin-bottom: .75rem
}

.slide .btn {
  align-self: flex-start;
  padding: .5rem 1rem;
  background: #c00;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: .85rem
}

.slide .btn:hover {
  background: #900
}

/* --- FLECHAS -------------------------------------------------- */
.control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 50%;
  background: #c00;
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  transition: background .25s
}

.control:hover {
  background: #900
}

.control.prev {
  left: .25rem
}

.control.next {
  right: .25rem
}

/* --- GRADIENTES LATERALES ------------------------------------ */
.slides-wrapper::before,
.slides-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50px;
  pointer-events: none
}

.slides-wrapper::before {
  left: 0;
  background: linear-gradient(90deg, #fff, transparent)
}

.slides-wrapper::after {
  right: 0;
  background: linear-gradient(-90deg, #fff, transparent)
}

/* en móvil la sangría lateral se reduce para no perder ancho */
@media(max-width:600px) {
  .slides-wrapper {
    padding: 0 2.25rem
  }
}


/* ================================================================
   DOCUMENTOS – tabla, filtros, paginación
================================================================ */
.doc-section .filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  align-items: center
}

.doc-section .filters input,
.doc-section .filters select {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px
}

.doc-section .filters label {
  font-weight: bold;
  margin-right: 8px
}

.doc-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px
}

.doc-table thead {
  background: #f0f8ff
}

.doc-table th,
.doc-table td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: left
}

.doc-table tbody tr:nth-child(even) {
  background: #fafafa
}

.doc-table tbody tr:hover {
  background: #f5f5f5
}

.btn-download {
  background: #ff9800;
  color: #fff;
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: .9em;
  text-decoration: none
}

.btn-download:hover {
  background: #fb8c00
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px
}

.pagination button {
  padding: 6px 10px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
  border-radius: 4px;
  font-size: .9em
}

.pagination button.active,
.pagination button:hover {
  background: #e0f0ff;
  border-color: #80c0ff
}

.pagination button:disabled {
  opacity: .5;
  cursor: not-allowed
}

.results-count {
  margin-bottom: 8px;
  font-size: .9em;
  color: #555
}

@media(max-width:768px) {
  .doc-section .filters {
    flex-direction: column;
    align-items: stretch
  }

  .doc-section .filters label,
  .doc-section .filters input,
  .doc-section .filters select {
    width: 100%
  }
}

/* ================================================================
   CONOCE MÁS (features)
================================================================ */
.features-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))
}

.feature-item {
  background: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
  text-decoration: none;
  color: inherit;
  transition: transform .15s
}

.feature-item:hover {
  transform: translateY(-4px)
}

.feature-item img {
  width: 48px;
  margin-bottom: 1rem
}

.feature-item h3 {
  color: #c00;
  margin-bottom: .5rem;
  font-size: 1.1rem
}

.feature-item p {
  font-size: .9rem;
  color: #555
}

/* Encabezados secundarios */
.section-pretitle {
  color: #555;
  font-size: .85rem;
  letter-spacing: .12em;
  text-align: center
}

.section-title {
  color: #c00;
  font-size: 2rem;
  text-decoration: underline;
  margin: .25rem 0 2rem;
  text-align: center
}

/* ================================================================
   FOOTER (versión oscura simple; el personalizado lo pones inline)
================================================================ */
footer {
  background: #222;
  color: #eee;
  text-align: center;
  padding: 1rem 0
}

/* ================================================================
   UTILITARIOS: BOTONES, ALERTAS, ETC.
================================================================ */
.btn {
  display: inline-block;
  padding: .55rem 1.2rem;
  background: #c00;
  color: #fff;
  border-radius: 4px;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .25s
}

.btn:hover {
  background: #900
}

.btn.secondary {
  background: #555
}

.btn.secondary:hover {
  background: #333
}

.btn.danger {
  background: #a10000
}

.btn.danger:hover {
  background: #750000
}

.alert {
  max-width: 600px;
  margin: 1rem auto;
  padding: .8rem 1rem;
  border-radius: 4px;
  font-weight: 600;
  text-align: center
}

.alert.success {
  background: #d7f5d1;
  color: #15630a
}

.alert.error {
  background: #ffd6d6;
  color: #a10000
}

/* GRID PARA GALERÍAS */
.gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom: 4rem; /* deja espacio antes del footer */
}

.gallery img,
.gallery video {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  display: block;
}

@media(max-width:600px){
  .gallery img,
  .gallery video{height:180px;}
}

/* Encabezados de sección */
main h1 {
  margin: 2rem 0 1rem;
  text-align: center;
  color: #c00;
}

main section h2 {
  margin-bottom: 1rem;
  color: #c00;
  font-size: 1.75rem;
  text-align: center;
}

/* ───────────────── CONTACTO ───────────────── */

.contacto {
  background: #fafafa;
  /* fondo suave */
  padding: 3rem 0;
  text-align: center;
}

.contacto-box h2 {
  color: #c00;
  font-size: 2rem;
  margin-bottom: .5rem;
}

.contacto-box p {
  color: #555;
  margin-bottom: 1.5rem;
}

.redes {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 0;
}

.redes a {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .65rem 1.25rem;
  border-radius: 30px;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}

/* Colores por red */
.redes a.fb {
  background: #1778f2;
}

/* Facebook */
.redes a.ig {
  background: #e1306c;
}

/* Instagram */
.redes a.tt {
  background: #000;
}

/* TikTok   */

.redes a:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
}

.redes i {
  font-size: 1.1rem;
}

/* Responsive: botones a 100 % en móviles muy estrechos */
@media(max-width:420px) {
  .redes {
    flex-direction: column;
    align-items: center;
  }

  .redes a {
    width: 220px;
    justify-content: center;
  }
}

/* ────────────────────────────
   LOGIN PAGE
──────────────────────────────*/
.login-page {
  background: #f5f5f5 url('../imgs/bg-fire.svg') center/cover no-repeat;
  /* opcional */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.login-wrapper {
  width: 100%;
  max-width: 420px;
  padding: 1rem;
}

.login-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
  padding: 2rem 2.5rem;
  text-align: center;
}

.login-card h2 {
  margin-bottom: 1.5rem;
  color: #c00;
}

/* mensaje de error */
.login-card .error {
  background: #ffd6d6;
  color: #a10000;
  padding: .65rem 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
  font-size: .9rem;
}

/* formulario */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.login-form label {
  text-align: left;
  font-weight: 600;
  font-size: .9rem;
  color: #333;
}

.login-form input {
  padding: .55rem .75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

.login-form input:focus {
  outline: none;
  border-color: #c00;
  box-shadow: 0 0 0 2px rgba(204, 0, 0, .2);
}

.login-form button {
  padding: .65rem 1rem;
  background: #c00;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .25s;
}

.login-form button:hover {
  background: #900;
}

/* ────────────────────────────
   DASHBOARD / ADMIN
──────────────────────────────*/
.admin-title {
  margin-top: 1rem;
}

.admin-actions {
  margin: 1.5rem 0 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.btn {
  display: inline-block;
  padding: .55rem 1.2rem;
  background: #c00;
  color: #fff;
  border-radius: 4px;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .25s;
}

.btn:hover {
  background: #900;
}

.btn.secondary {
  background: #555;
}

.btn.secondary:hover {
  background: #333;
}

.btn.danger {
  background: #a10000;
}

.btn.danger:hover {
  background: #750000;
}

/* pestañas */
.tabs {
  display: flex;
  border-bottom: 2px solid #ddd;
  margin-bottom: 1rem;
}

.tab-btn {
  background: none;
  border: none;
  padding: .75rem 1.25rem;
  cursor: pointer;
  font-weight: 600;
  color: #555;
  transition: color .2s, border-color .2s;
  border-bottom: 3px solid transparent;
}

.tab-btn.active {
  color: #c00;
  border-color: #c00;
}

.tab-btn:hover {
  color: #c00;
}

/* tablas */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}

.admin-table thead {
  background: #c00;
  color: #fff;
}

.admin-table th,
.admin-table td {
  padding: .6rem .8rem;
  border: 1px solid #eee;
  text-align: left;
}

.admin-table tbody tr:nth-child(odd) {
  background: #fafafa;
}

.tab-content {
  display: none;
}

.tab-content.show {
  display: block;
}

/* ────────────────────────────
   FORMULARIOS ADMIN
──────────────────────────────*/
.form-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
  padding: 2rem 2.5rem;
  max-width: 600px;
  margin: 0 auto 3rem;
}

.upload-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-group label {
  font-weight: 600;
  margin-bottom: .35rem;
  display: block;
}

.form-group input[type="text"],
.form-group input[type="file"],
.form-group textarea {
  width: 100%;
  padding: .55rem .75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

.form-group textarea {
  resize: vertical;
  min-height: 90px;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #c00;
  box-shadow: 0 0 0 2px rgba(204, 0, 0, .2);
}

/* alertas */
.alert {
  max-width: 600px;
  margin: 1rem auto;
  padding: .8rem 1rem;
  border-radius: 4px;
  font-weight: 600;
  text-align: center;
}

.alert.success {
  background: #d7f5d1;
  color: #15630a;
}

.alert.error {
  background: #ffd6d6;
  color: #a10000;
}

/* reutilizado: .form-card, .upload-form, .form-group, .alert, .btn ... */

/* check‑box alineado */
.form-group.checkbox {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: -.25rem;
}

.doc-section .filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  align-items: center;
}

.doc-section .filters input[type="text"],
.doc-section .filters select {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.doc-section .filters label {
  font-weight: bold;
  margin-right: 8px;
}

.doc-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
}

.doc-table thead {
  background-color: #f0f8ff;
}

.doc-table th,
.doc-table td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: left;
}

.doc-table th {
  font-size: 0.95em;
  color: #333;
}

.doc-table tbody tr:nth-child(even) {
  background-color: #fafafa;
}

.doc-table tbody tr:hover {
  background-color: #f5f5f5;
}

.doc-table .btn-download {
  background-color: #ff9800;
  color: white;
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
  text-decoration: none;
}

.doc-table .btn-download:hover {
  background-color: #fb8c00;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.pagination button {
  padding: 6px 10px;
  border: 1px solid #ccc;
  background-color: white;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.9em;
}

.pagination button.active,
.pagination button:hover {
  background-color: #e0f0ff;
  border-color: #80c0ff;
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.results-count {
  margin-bottom: 8px;
  font-size: 0.9em;
  color: #555;
}

.agradecimientos {
  background: #f7f7f7;
  padding: 3rem 0;
}

.agradecimientos-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  align-items: center;
}

.agradecimiento-item {
  flex: 1 1 260px;
  max-width: 320px;
  text-align: center;
  background: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}

.agradecimiento-item img {
  width: 120px;
  height: auto;
  object-fit: contain;
  margin-bottom: 1rem;
}

.agradecimiento-item h3 {
  margin: .5rem 0;
  color: #c00;
  font-size: 1.1rem;
  line-height: 1.3;
}

.agradecimiento-item p {
  font-size: .9rem;
  color: #555;
}

/* ─────────  GALERÍA JEFES 100 % RESPONSIVE ───────── */

/* ① Regla general – desktop / tablet */
.gallery-jefes{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  justify-items:center;
}

/* ② Fotos: ocupan todo el ancho de su celda y se recortan bien */
.gallery-jefes img{
  width:100%;
  height:220px;            /* alto “estándar”          */
  object-fit:cover;        /* recorta sin deformar     */
  border-radius:6px;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}

/* ③ Foto de Guillermo Crosby (título) */
#primeros-jefes .crosby{
  max-width:400px;         /* límite grande en desktop */
  width:100%;
  height:auto;
  margin-inline:auto;
  display:block;
}

/* ④ Breakpoint 600 px  ─  tablet ↓  */
@media(max-width:600px){
  .gallery-jefes{
    grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
    gap:.75rem;
  }

  .gallery-jefes img{
    height:160px;          /* un poco más bajo         */
  }

  #primeros-jefes .crosby{
    max-width:70%;         /* se achica suavemente     */
  }
}

/* ⑤ Breakpoint 400 px  ─  móviles muy angostos (≤ iPhone SE) */
@media(max-width:400px){
  .gallery-jefes{
    grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
    gap:.6rem;
  }

  .gallery-jefes img{
    height:130px;
  }
}