/*
 * =================================================================
 * STYLE.CSS UNIFICADO
 *
 * Incluye y unifica estilos de todos los ficheros PHP,
 * priorizando los estilos del header.php al final.
 * =================================================================
 */

/* === A. Variables Globales (Root) === */
:root {
    --color-primary: #1e88e5;       /* Azul principal (busqueda_parada) */
    --color-secondary: #004d9c;     /* Azul oscuro (busqueda_parada, h2) */
    --color-background: #f0f2f5;    /* Fondo claro (general) */
    --color-text: #333;             /* Texto principal */
    --color-card-background: #fff;  /* Fondo de tarjeta */
    --color-error: #d32f2f;         /* Rojo error */
    --color-success: #4CAF50;       /* Verde éxito */
    --color-tab-inactive: #e0e0e0;  /* Borde de pestaña inactiva */
    --color-line-number: #d32f2f;   /* Color por defecto para nº de línea (consulta_parada) */
    --color-border-subtle: #eee;
}

/* === B. Base y Layout General === */
a {
    text-decoration: inherit;
    font-size: 15px;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--color-background);
    color: var(--color-text);
    margin: 0;
    padding: 0;
    //display: flex;
    flex-direction: column;
    align-items: center; /* Centra el container */
    min-height: 100vh;
}

.container, main {
    //width: 100%;
    //max-width: 900px; /* Ancho máximo para el contenido principal */
    box-sizing: border-box; /* Asegura que el padding no desborde el ancho */
}

h1, h2, h3 {
    color: var(--color-secondary);
    font-weight: 700;
}
h2 {
    text-align: left;
    margin-bottom: 25px;
    margin-top: 5px !important;
    font-size: 21px;
}

hr {
    width:100%;
    margin: 10px 0;
}
img.info-image {
    max-width: 100%;
}
/* Tarjetas (Unificado .card y .section-card) */
.card, .section-card {
    background-color: var(--color-card-background);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin: 20px;
    margin-bottom: 20px;
}

/* Alertas y Mensajes de Estado */
.alert {
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 20px;
    border: 1px solid transparent;
}
.status-error {
    background-color: #fce4e4;
    color: var(--color-error);
    border-color: #f44336;
}
.status-success {
    background-color: #e8f5e9;
    color: var(--color-success);
    border-color: #4CAF50;
}
.loader-overlay {
    display: flex; justify-content: center; align-items: center; padding: 30px 0;
}
.loader {
    border: 4px solid #f3f3f3; border-top: 4px solid var(--color-primary);
    border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Listas (index.php) */
ul { list-style: none; padding-left: 0; }
ul li { margin: 1rem 0; }

/* Footer (index.php) */
footer { text-align: center; padding: 1rem; background: #ccc; color: grey; }


/* === C. Estilos de Líneas y Recientes === */

/* Etiquetas de Líneas (index.php) */
.linea-label {
    display: inline-block; padding: 0.2rem 0.6rem; margin-right: 0.5rem;
    color: white; font-weight: bold; border-radius: 4px;
    min-width: 2rem; text-align: center;
    box-sizing: border-box;
}
.urbano { background-color: #d60000; float: inline-start; min-width: 40px; }
.interurbano { background-color: #1e7e34; float: inline-start; min-width: 60px; }
.especial { background-color: #800080; float: inline-start; min-width: 60px; }
.nocturno { background-color: #000000; color: #90ee90; float: inline-start; min-width: 60px; }

/* Líneas de Bus en Consulta (consulta_parada.php) */
.line-number { /* Número de línea individual */
    background-color: var(--color-line-number);
    color: white; font-weight: 700; padding: 8px 12px; border-radius: 6px;
    min-width: 40px; text-align: center; font-size: 1.2em; margin-right: 15px;
}
/* Lógica de colores más específicos (consulta_parada.php) */
.line-number.night { background-color: #333 !important; color: #90ee90 !important; }
.line-number.interurban { background-color: #4CAF50 !important; color: white !important; }
.line-number.rapid { background-color: #9C27B0 !important; color: white !important; }

/* Paradas Recientes (index.php) */
.recent-wrap { margin-top: 0rem; }
.recent-list { display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 0; padding:0; }
.recent-list a {
    display:inline-block; text-decoration:none; color:#00528c; border:1px solid #d0d7de;
    padding:.25rem .5rem; border-radius:9px; background:#f8fafc; font-weight:600;
}
.recent-actions { margin-top:.5rem; }
.muted { color:#666; font-size:.9rem; }


/* === D. Búsqueda de Paradas (busqueda_parada.php) === */

/* Pestañas (Tabs) */
.tab-controls {
    display: flex;
    justify-content: space-around;
    margin-bottom: 15px;
    position: relative; 
}
.tab-controls::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 15px;
    width: calc(100% - 30px); 
    height: 2px;
    background-color: #ccc;
    z-index: 1;
}
.tab-button {
    flex-grow: 1;
    padding: 10px 0;
    cursor: pointer;
    background: none;
    border: none;
	font-size: 1.1em; 
    font-weight: 500;
    color: #555;
    transition: all 0.3s;
    z-index: 2; /* Para que el texto esté encima */
    position: relative; 
}

.tab-button.active {
    color: var(--color-primary); font-weight: 700;
}
.tab-button.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 15px; 
    right: 15px; 
    height: 2px; 
    background-color: var(--color-primary); 
    z-index: 3; /* Para que esté encima de la línea gris */
}
.tab-button:hover:not(.active) { color: var(--color-secondary); }
.tab-content {
    padding-top: 10px;
}
/* Input de Búsqueda */
.input-wrapper { position: relative; margin-bottom: 20px; }
.input-wrapper::before {
    content: "🔍"; position: absolute; left: 18px; top: 50%;
    transform: translateY(-50%); color: var(--color-primary); font-size: 1.2em;
    pointer-events: none; z-index: 2;
}
#navigation-loader {
	display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255, 255, 255, 0.85);
    z-index: 1000;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    color: #00528c);
}
#search-input {
    width: 100%; padding: 15px 20px 15px 50px; border: none; border-radius: 12px;
    font-size: 0.9em; transition: box-shadow 0.3s, background-color 0.3s;
    box-sizing: border-box; background-color: var(--color-background);
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.05), inset -2px -2px 5px rgba(255, 255, 255, 0.9);
}
#search-input:focus {
    background-color: white; outline: 2px solid var(--color-primary); outline-offset: -2px;
    color: var(--color-secondary);
}
.button-index {
    width: 100%;
    margin: 10px 0;
    padding: 0.25rem;
    background: #00528c;
    color: white;
    border-radius: 5px;
    font-weight: 600;
    font-size: 15px;
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    height: 35px;
}
.button-index2 {
    /*margin: 10px 1px;
    padding: 0.25rem;
    background: #7b9986;
    color: white;
    border-radius: 5px;
    border: 1px solid grey;
    font-weight: 600;
    font-size: 13px;
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    height: 35px;*/
display: block;           /* pasa de inline a bloque */
  width: fit-content;       /* ancho al contenido */
  margin: 10px auto;        /* auto a los lados = centrado */
  padding: 0.25rem;
  background: #7b9986;
  color: #fff;
  border-radius: 5px;
  border: 1px solid grey;
  font-weight: 600;
  font-size: 13px;
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
  height: 35px;
}

.button-retry {
	display: flex; /* CAMBIO CLAVE: Usa Flexbox */
	align-items: center; /* Centra verticalmente el contenido (icono + texto) */
	justify-content: center; /* Centra horizontalmente el contenido (icono + texto) */
	width: 100%;
	margin: 10px 0;
	/* Ajustamos el padding para mantener el alto deseado */
	padding: 0;
	background: #00528c;
	color: white;
	border-radius: 5px;
	font-weight: 600;
	font-size: 15px;
	font-family: 'Roboto', sans-serif;
	text-align: center;
	text-decoration: none;
	height: 35px;
	box-sizing: border-box;
	transition: background-color 0.3s;
}

.search-stopID {
    width: 100%;
    padding: 8px 0;
    border-radius: 5px;
    border: 1px solid grey;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
}

/* Nuevo estilo para alinear el título H3 y el botón de recarga */
.card-header-with-button {
    display: flex;
    justify-content: space-between; 
    align-items: center; /* CLAVE: Alinea verticalmente el botón y el H3 */
    margin-bottom: 0; 
    padding-bottom: 10px; 
}

.card-header-with-button h3 {
    margin: 0; /* CLAVE: Elimina márgenes extra del H3 que lo empujan */
    font-size: 1.1em; 
    color: var(--color-secondary);
}

.button-refresh {
    background: none; 
    color: var(--color-primary); 
    border: none;
    padding: 0;
    width: 30px; 
    height: 30px;
    font-size: 1.7em; 
    line-height: 1; 
    cursor: pointer;
    
    display: flex; 
    justify-content: center;
    align-items: center;
    
    transition: color 0.2s, transform 0.2s;
}

.button-refresh:hover {
    color: var(--color-secondary); 
    transform: rotate(30deg); 
}

/* Control de Radio */
.radius-control { margin-bottom: 20px; padding: 10px 0; border-bottom: 1px solid var(--color-border-subtle); }
.radius-control label { display: block; font-weight: 500; margin-bottom: 10px; color: var(--color-secondary); }
.radius-control input[type="range"] {
    width: 100%; -webkit-appearance: none; height: 8px; background: #ddd;
    border-radius: 5px; outline: none; transition: opacity .2s;
}
.radius-control input[type="range"]::-webkit-slider-thumb, .radius-control input[type="range"]::-moz-range-thumb {
    -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
    background: var(--color-primary); cursor: pointer; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
#radius-value { font-weight: 700; color: var(--color-primary); margin-left: 5px; }

/* Mapa y Resultados Cercanos */
#nearby-map { height: 300px; border-radius: 8px; margin-top: 15px; border: 1px solid #ccc; }
.nearby-result-item {
    background-color: #e3f2fd; border: 1px solid #bbdefb; margin-bottom: 8px;
    padding: 10px; border-radius: 6px; display: flex; justify-content: space-between;
    align-items: center; cursor: pointer;
}
.nearby-result-item:hover { background-color: #bbdefb; }
.nearby-result-info { font-size: 0.95em; }
.nearby-distance { font-weight: 700; color: var(--color-secondary); }

/* Lista de Resultados Generales */
#search-results-list {
    list-style: none; padding: 0; margin-top: 10px; border-top: 1px solid var(--color-border-subtle);
    max-height: 450px; overflow-y: auto;
}
.search-result-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 10px; border-bottom: 1px solid #f0f0f0; cursor: pointer;
    transition: background-color 0.2s;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background-color: #e3f2fd; }
.result-name { font-weight: 400; color: var(--color-text); flex-grow: 1; }
.result-code {
    font-weight: 700; color: var(--color-primary); background-color: #e6f7ff;
    padding: 4px 8px; border-radius: 4px; font-size: 0.9em;
    min-width: 55px; text-align: center;
}


/* === E. Consulta de Parada (consulta_parada.php) === */
.bus-line { /* Tarjeta individual de línea */
    background-color: #f9f9f9; border: 1px solid var(--color-border-subtle);
    border-radius: 8px; padding: 15px; margin-bottom: 15px;
}
.bus-line-header {
    display: flex; align-items: center; margin-bottom: 10px;
}
.line-info h3 { margin: 0; font-size: 1.1em; color: var(--color-text); }
.departure-times {
    display: flex; flex-wrap: wrap; gap: 10px;
    list-style: none; padding: 0; margin: 0;
}
.departure-times li {
    background-color: #e3f2fd; color: var(--color-primary);
    font-weight: 700; padding: 8px 12px; border-radius: 4px;
}
.info-card { /* Tarjeta de información/ayuda */
    background-color: #e6f7ff; border: 1px solid #91d5ff;
    padding: 15px; border-radius: 8px; margin-bottom: 20px;
}

#modal-codigo-parada {
        background-color: var(--color-background);
}

/* === F. Visor de PDF (embededpdf.php) === */
.pdf-viewer {
    width: 100%;
    height: 800px;
    border: none;
    margin-top: 15px;
}


/* === G. Tarifas (tarifas.php) === */
table { border-collapse: collapse; width: 100%; /*margin-top: 1rem;*/ }
th, td { border: 1px solid #ccc; padding: 0.5rem; text-align: left; }
th { background: #eee; }


/* === H. Horarios Urbanos/Interurbanos (urbanos.php, interurbano.php) === */
.wrap {
  padding: 1.2rem;
  max-width: 100%;
  box-sizing: border-box;
}

.wrap2 {
    //margin-bottom: -3em;
    background-color: #7b9986;
    text-align: center;
    padding: 1.2rem;
}

.legend {
  margin-bottom: 1rem;
  font-size: 0.95em;
  color: #666;
  text-align: center;
}
.table-scroll {
  overflow-x: auto;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}
.timetable { /* Aplica a la tabla en urbanos.php */
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}
.timetable thead th {
  background: var(--color-secondary);
  color: white;
  padding: 10px 5px;
  font-weight: 500;
  text-align: center;
  border: 1px solid #004080;
}
.timetable tbody td {
  border: 1px solid #eee;
  padding: 8px 5px;
  text-align: center;
  font-size: 0.9em;
  white-space: nowrap;
}
.tt-header {
    //position: sticky;
    top: 71px;
    z-index: 6;
    background: #fff;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    background-color: #FEDC98;
    justify-content: center;
}
.tt-header span a {
    text-align: center;
    width: 100%;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}
.timetable tbody tr:nth-child(even) { background-color: #f7f7f7; }

.es_navidad {
    background-color:#f8d7da;
    border:1px solid #f5c2c7;
    color:#842029;
    padding:10px 15px;
    margin:10px;
    border-radius:4px;
    font-size:0.8rem;
    text-align: justify;
   }

.info_alert {
    background-color: #ebd2c2;
    border: 1px solid #f5c2c7;
    color: #842029;
    padding: 10px 15px;
    margin: 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    text-align: center;
}

.info_alert a {
  text-decoration: underline;
  font-size: 0.75rem;
}

.legales a {
    font-size: 12px !important;
    text-decoration: inherit;
    color: grey;
    margin: 59px 0;
}

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: rgb(254, 220, 152, 0.9);
  color: black;
  padding: 0.9rem 0.8rem;
  font-size: 0.85rem;
}

.cookie-banner__inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  text-align: justify;
}

.cookie-banner__text a {
  color: #00528c;;
  text-decoration: underline;
  text-align: justify;
}

.cookie-banner__buttons {
  display: flex;
  justify-content: flex-end;
}

/* Si no tienes .btn/.btn-primary definidos, algo sencillo: */
.cookie-banner .btn {
  font-size: 0.85rem;
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  border: 1px solid transparent;
  cursor: pointer;
}

.cookie-banner .btn-primary {
  background: #fbbf24;
  color: #1f2933;
  border-color: #f59e0b;
  font-weight: 600;
}

@media (min-width: 720px) {
  .cookie-banner__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .cookie-banner__text {
    max-width: 70%;
  }
}


/* Sticky elements for Timetable (urbanos.php) */
.sticky-top {
  position: sticky;
  top: 0;
  z-index: 10;
}
.sticky-left {
  position: sticky;
  left: 0;
  z-index: 20;
  background: white;
  box-shadow: 2px 0 3px rgba(0,0,0,0.1);
}
.timetable thead .sticky-left {
  z-index: 30;
}
.stop .rot { /* Rotated stop names */
  display: block;
  overflow: hidden;
  transform-origin: 0 100%;
}

/* Estilos básicos para la tabla de interurbanos (si se imprime directamente) */
body > table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px auto;
    max-width: 900px;
}
body > table th, body > table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}
body > table th {
    background-color: var(--color-secondary);
    color: white;
}


/*
 * =================================================================
 * I. ESTILOS DEL HEADER (PRIORIDAD AL FINAL)
 * Estos estilos prevalecen sobre el resto.
 * (Copiado de header.php)
 * =================================================================
 */

/* ====== Header base (móvil) ====== */
.site-header{
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .75rem;
  background: #00528c;
  /*background: #033F63;*/
  color: #fff;
  min-height: 56px;
  z-index: 2000;
}

/* Botón menú (móvil) */
.menu-toggle{
  background:#00528c;
  color:#fff;
  padding:.4rem .6rem;
  border:none;
  cursor:pointer;
  line-height:1;
  font-size:1.25rem;    /* tamaño icono ☰ */
  border-radius:.35rem;
  width:auto;           /* importante para no ocupar 100% */
  text-align:center;
}
.menu-toggle:focus{ outline:2px solid #9dd1ff; outline-offset:2px; }

/* Contenedor del logo */
.logo-wrap{
  margin:0;
  position: absolute; /* centrado real en móvil */
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}

/* Imagen del logo */
.logo{
  display:block;
  width:auto;
  max-width: 170px;
}

.logo-footer {
  width:auto;
  max-width: 170px;
  margin-bottom: -10px;
  opacity: 50%;
}

/* Fantasma para separar el botón del logo en móvil (no visible) */
.menu-spacer{
  flex-grow:1;
  visibility:hidden;
}

/* Nav/Menú desplegable (móvil) */
.dropdown{
  position: absolute;
  top: 70px; /* debajo del header */
  left:0;
  right:0;
  background:#fff;
  z-index:999;
  box-shadow:0 8px 10px rgba(0,0,0,0.2);
  display:flex;
  flex-direction:column;
  padding:.5rem 0;
  border-bottom-left-radius:.5rem;
  border-bottom-right-radius:.5rem;
  /* Oculto por defecto, se muestra con la clase .open */
  transform:translateY(-100%) scaleY(0);
  transform-origin:top;
  transition:transform .3s ease-out;
  visibility:hidden;
}
.dropdown.open{
  transform:translateY(0) scaleY(1);
  visibility:visible;
}

/* Enlaces del menú (móvil) */
.dropdown a{
  color:#00528c;
  text-decoration:none;
  padding:.75rem 1rem;
  font-weight:600;
  border-left:5px solid transparent;
  transition:background-color .2s, border-left-color .2s;
}
.dropdown a:hover{
  background-color:#f0f2f5;
  border-left-color:#00528c;
}

/* Enlaces del menú (móvil) - Resaltar el activo (si aplica) */
.dropdown a[aria-current='page'] {
  background-color: #e3f2fd;
  border-left-color: #1e88e5;
  color: #1e88e5;
}


/* =====================================
 * Estilos para pantallas grandes (Desktop)
 * ===================================== */
@media (min-width: 900px) {
  /* Header - Centrado y con más espacio */
  .site-header{
    padding: .75rem 1.25rem;
    gap: 1.5rem;
  }
  /* Ocultar el botón del menú en desktop */
  .menu-toggle{
    display:none;
  }
  /* El logo vuelve a su posición normal */
  .logo-wrap{
    position: static;
    translate: none;
  }
  /* Ocultar el elemento fantasma */
  .menu-spacer{
    display:none;
  }

  /* Menú de Navegación (visible en desktop) */
  .dropdown{
    /* Vuelve a su estado por defecto, no absoluto ni transformado */
    position: static;
    transform:none;
    box-shadow:none;
    padding:0;
    flex-direction:row; /* Horizontal */
    gap: 1rem;
    flex-grow:1; /* Ocupa el espacio restante */
    background:transparent;
    visibility:visible;
    margin-left: auto; /* Empuja el menú a la derecha */
  }
  .dropdown a{
    color:#fff;
    padding:.5rem .75rem;
    border-left:none;
    border-bottom:3px solid transparent;
    transition:border-bottom-color .2s, background-color .2s;
  }
  .dropdown a:hover,
  .dropdown a[aria-current='page'] {
    background-color: transparent;
    color: #fff;
    border-left:none;
    border-bottom-color: #9dd1ff;
  }
}


/***************************************/
/*   AJUSTE ESPECIAL PARA MARCADORES   */
/***************************************/

/* === Offset por header fijo (Opción A) === */
:root{ --header-h: 72px; }

/* 1) Global: todos los #ancla respetan el header */
html{
  scroll-padding-top: var(--header-h);
  scroll-behavior: auto; /* opcional */
}

/* 2) Desactiva otras compensaciones */
h1[id], h2[id], h3[id], section[id], .card[id]{ scroll-margin-top: 0 !important; }
:target::before{ content: none !important; }

/* 3) Mantén estos ajustes dependientes del header */
.dropdown{ top: var(--header-h); }
.tt-header{ top: var(--header-h); }

/* === [PATCH] Sticky tt-header aligned under fixed header === */
.tt-header{
  /*position: sticky;*/
  top: var(--header-h);
  z-index: 6;
  border-bottom: 1px solid var(--color-border-subtle);
}

/* === [PATCH] Ensure mobile dropdown opens right under header === */
@media (max-width: 899px){
  .dropdown{ top: var(--header-h); }
}

/* === [PATCH] Anchor offset: Option A (global) === */
:root{ --header-h: 72px; }

html{
  scroll-padding-top: var(--header-h);
  scroll-behavior: auto;
}

/* Disable alternate offsets to avoid double-compensation */
h1[id], h2[id], h3[id], section[id], .card[id]{ scroll-margin-top: 0 !important; }
:target::before{ content: none !important; }

/* Elements that depend on header height */
.dropdown{ top: var(--header-h); }
.tt-header{ top: var(--header-h); }