/* Reset básico y variables del tema */
:root {
  --bg-color: #f4f6f9;
  --text-color: #333;
  --header-bg: #fff;
  --topbar-bg: #f5f5f5;
  --article-bg: #fff;
  --primary-color: #1a237e; /* Azul oscuro del header h1 original */
  --link-color: #1a73e8; /* Azul de botones y enlaces original */
  --article-title: #0d47a1; /* Azul de títulos de artículos original */
  --text-secondary: #555;
  --border-color: #eee;
  --shadow: 0 2px 8px rgba(0,0,0,0.1);
  --input-border: #ccc;
  --launches-bg: #fff;
}

[data-theme="dark"] {
  --bg-color: #0b0f19; /* Azul cosmos profundo */
  --text-color: #e2e8f0; /* Blanco suave */
  --header-bg: #111827; /* Gris oscuro */
  --topbar-bg: #1f2937;
  --article-bg: #1e293b; /* Tarjetas glassmorphic */
  --primary-color: #3b82f6; /* Azul neón brillante */
  --link-color: #60a5fa;
  --article-title: #3b82f6;
  --text-secondary: #94a3b8; /* Gris plateado */
  --border-color: #334155;
  --shadow: 0 4px 20px rgba(0,0,0,0.4);
  --input-border: #475569;
  --launches-bg: #1e293b;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:Segoe UI,Roboto,Helvetica,Arial,sans-serif; background:var(--bg-color); color:var(--text-color); line-height:1.6; padding:20px; transition:background 0.3s, color 0.3s; }

header { text-align:center; margin-bottom:20px; }
header h1 { font-size:2rem; color:var(--primary-color); }

form { display:flex; justify-content:center; margin:10px 0; gap:10px; }
.searchbox { padding:10px; border-radius:8px; border:1px solid var(--input-border); background:var(--header-bg); color:var(--text-color); flex:1; max-width:300px; }
.btn { padding:5px 7px; border:none; border-radius:8px; background:var(--link-color); color:white; cursor:pointer; transition:background 0.3s ease; }
.btn:hover { background:var(--primary-color); }
.btn-red { background:#e53935; }
.btn-red:hover { background:#b71c1c; }

.article { background:var(--article-bg); margin:15px auto; padding:15px; border-radius:10px; box-shadow:var(--shadow); max-width:800px; transition:background 0.3s, box-shadow 0.3s; }
.article h3 { margin-bottom:10px; font-size:1.2rem; color:var(--article-title); }
.article p { margin-bottom:10px; color:var(--text-secondary); }
.article a { text-decoration:none; color:var(--link-color); font-weight:bold; }
.article small { color:var(--text-secondary); }

#launches { margin:30px auto; max-width:1032px; background:var(--launches-bg); padding:20px; border-radius:12px; box-shadow:var(--shadow); transition:background 0.3s, box-shadow 0.3s; }
#launches h2 { margin-bottom:15px; color:#b71c1c; font-size:1.5rem; }
.launch { border-bottom:1px solid #eee; padding:10px 0; }
.launch:last-child { border-bottom:none; }
.launch strong { color:#333; }
.launch span { display:block; color:#666; font-size:0.9rem; }

@media (max-width:600px) {
  .article, #launches { padding:15px; }
  header h1 { font-size:1.5rem; }
  .article h3 { font-size:1rem; }
}
/* Selector de idioma */
.lang-switch {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.lang-switch a img {
  width: 32px;
  height: auto;
  border: 2px solid transparent;
  border-radius: 4px;
  transition: transform 0.2s, border-color 0.2s;
}

.lang-switch a img:hover {
  transform: scale(1.1);
  border-color: #007bff; /* resalta al pasar el ratón */
}

/* Responsive: en móviles las banderas se centran */
@media (max-width: 600px) {
  .lang-switch {
    justify-content: center;
  }

  .lang-switch a img {
    width: 28px;
  }
}
/* --- Header estilo Joomla --- */
.site-header {
  border-bottom: 2px solid #ddd;
  margin-bottom: 20px;
  font-family: Arial, sans-serif;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f5f5f5;
  padding: 8px 15px;
  border-bottom: 1px solid #ccc;
}

.lang-switcher img {
  width: 24px;
  margin-right: 6px;
  cursor: pointer;
  transition: transform 0.2s;
}

.lang-switcher img:hover {
  transform: scale(1.1);
}

.search-actions {
  display: flex;
  gap: 10px;
}

.search-form input.searchbox {
  padding: 5px 8px;
  border: 1px solid #aaa;
  border-radius: 4px;
}

.search-form button,
.update-form button {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  background: #0073e6;
  color: white;
  cursor: pointer;
}

.update-form button.btn-red {
  background: #e63946;
}

.main-bar {
  background: #fff;
  text-align: center;
  padding: 20px 10px;
	position:right;
	
}

.main-bar h1 {
  margin: 0;
  font-size: 2rem;
  color: #333;
}




header .logo img {
    height: 200px;   /* ajusta el tamaño según necesites */
    width: auto;
position:left;
}
.main-bar {
    display: flex;
    align-items: center;
    justify-content: space-between; /* logo izquierda, título derecha */
    padding: 10px 20px;
    background: #fff;
    border-bottom: 2px solid #eee;
    
}
.main-bar {
    display: flex;
    align-items: center;
    justify-content: center; /* centra el h1 */
    gap: 20px;
}
.main-bar h1 {
    text-align: center;
}


/* Menú de navegación */
.site-nav {
  background: #000; /* franja negra bajo header */
  padding: 0.5rem 1rem;
}
.site-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 1.5rem;
}
.site-nav a {
  color: #fff;
  font-family: 'Orbitron', sans-serif; /* parecida al logo */
  font-size: 1.1rem;
  text-transform: uppercase;
  transition: color 0.3s;
}
.login{
	  font-family: 'Orbitron', sans-serif; /* parecida al logo */
	  color: black;
	  transition: color 0.3s;
	  
}
.login a:hover{
	  	color: #ff9800; /* naranja al pasar ratón */
	  	transition: color 0.3s;
}
.login a:visited{
		color:black;
		transition: color 0.3s;
}
.site-nav a:hover {
  color: #ff9800; /* naranja al pasar ratón */
}
.btn-instagram {
  display: inline-flex;
  align-items: center;
  background: #E1306C;
  color: #fff;
  text-decoration: none;
  padding: 8px 15px;
  border-radius: 30px;
  font-weight: bold;
  transition: 0.3s;
  margin-top: 10px;
}

.btn-instagram:hover {
  background: #c72c61;
}

.btn-instagram .icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}



.fc-scrollgrid{
	 min-width: calc((100% / 7) + 380px); /* 20px más ancho que el original */
	margin-left: -10px;
}





.marquesina {
    width: 100%;
    overflow: hidden;
    background: #111;
    color: #fff;
    font-size: 1rem;
    font-family: sans-serif;
    padding: 10px 0;
    border-top: 3px solid #2980b9;
    border-bottom: 3px solid #2980b9;
}
/* 🛑 Se detiene al pasar el cursor */
.marquesina:hover .marquee,
.marquesina .marquee:hover {
    animation-play-state: paused;
}
.marquesina .marquee {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    animation: scroll-left 25s linear infinite; /* ⏳ Más lento */
}

.marquesina span {
    margin-right: 50px;
}

.marquesina a {
    color: #00c3ff;
    text-decoration: none;
    font-weight: bold;
}

.marquesina a:hover {
    color: #ffcc00;
}

@keyframes scroll-left {
    0%   { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}

/* --- Modo Oscuro Quirúrgico (solo aplica cuando data-theme="dark" está activo) --- */
[data-theme="dark"] .site-header {
    border-bottom: 2px solid var(--border-color);
}
[data-theme="dark"] .top-bar {
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
}
[data-theme="dark"] .main-bar {
    background: var(--header-bg);
    border-bottom: 2px solid var(--border-color);
}
[data-theme="dark"] .main-bar h1 {
    color: var(--text-color);
}
[data-theme="dark"] .site-nav {
    border-bottom: 1px solid var(--border-color);
}
[data-theme="dark"] .login {
    color: var(--text-color);
}
[data-theme="dark"] .login a {
    color: var(--link-color);
}
[data-theme="dark"] .login a:visited {
    color: var(--text-color);
}
[data-theme="dark"] .launch strong {
    color: var(--text-color);
}
[data-theme="dark"] .launch span {
    color: var(--text-secondary);
}
[data-theme="dark"] #calendar {
    background: var(--article-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}
[data-theme="dark"] .fc-theme-standard td, 
[data-theme="dark"] .fc-theme-standard th,
[data-theme="dark"] .fc-theme-standard .fc-scrollgrid {
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .fc-daygrid-day-number,
[data-theme="dark"] .fc-col-header-cell-cushion {
    color: var(--text-color) !important;
}
[data-theme="dark"] .fc-h-event,
[data-theme="dark"] .fc-event-main {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Estilo del botón toggle de tema */
.dark-mode-btn {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background-color 0.2s;
    margin-left: 15px;
    color: var(--text-color);
}
.dark-mode-btn:hover {
    background-color: rgba(128, 128, 128, 0.15);
    transform: scale(1.1);
}