/* El aspecto de la web actual (Fernando, 05-10-2026): cabecera negra, fondos oscuros, títulos en recuadro y fichas
   negras con la foto de cada estación. Los textos que se bajaron de la web vieja llevan sus colores pensados para fondo oscuro. */

:root {
    --fondo: #12261b;
    --fondo-caixa: #1d3a2a;
    --ficha: #000;
    --texto: #e9eef0;
    --texto-suave: #a9b8b0;
    --acento: #dd9933;
    --borde: #8ecae6;
    --ganador: #f2c14e;
    --linea: #2f5440;
    --borde-ficha: #222;
    --numero: #d0508a;
    --radio: 8px;
}

* { box-sizing: border-box; }

html { background: var(--fondo); }

body {
    margin: 0;
    color: var(--texto);
    background: var(--fondo);
    font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

a { color: var(--acento); }
img { max-width: 100%; height: auto; }

/* Los bloques de la página (D38): título, menú, zona central y pie. El diseño de cada tipo de página los ajusta. */
.disposicion { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; grid-template-areas: "titulo" "menu" "central" "pie"; min-height: 100vh; }
.zona-titulo { grid-area: titulo; background: #000; color: #fff; padding: 14px 16px 6px; text-align: center; }
.marca { color: inherit; text-decoration: none; display: inline-block; }
.zona-titulo .nome { display: block; font-size: clamp(28px, 6vw, 46px); font-weight: 700; letter-spacing: 3px; line-height: 1.1; }
.zona-titulo .lema { display: block; font-size: 13px; letter-spacing: 1px; color: var(--texto-suave); }
.zona-menu { grid-area: menu; background: #000; padding: 4px 16px 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.zona-menu a {
    color: #fff; text-decoration: none; font-size: 13px; font-weight: 600;
    border: 1px solid #555; border-radius: var(--radio); padding: 3px 12px;
}
.zona-menu a:hover, .zona-menu a.activo { border-color: var(--acento); color: var(--acento); }

.zona-central { grid-area: central; width: 100%; max-width: 1100px; margin: 0 auto; padding: 20px 16px 40px; }
.zona-pie { grid-area: pie; text-align: center; color: var(--texto-suave); font-size: 12px; padding: 16px; }
.zona-pie .publicado { display: block; }

.titulo {
    margin: 0 0 18px; padding: 8px 16px; text-align: center;
    background: #2b2b2b; border: 3px solid var(--borde); border-radius: var(--radio);
    color: var(--borde); font-size: clamp(22px, 4vw, 34px); line-height: 1.2;
}
.titulo small { display: block; font-size: 15px; color: var(--texto); font-weight: 400; margin-top: 4px; }

h2 { color: var(--borde); font-size: 22px; margin: 22px 0 10px; }
h3 { color: var(--acento); font-size: 17px; margin: 0 0 8px; }

.botons { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.boton {
    display: inline-block; padding: 6px 14px; border-radius: var(--radio);
    background: var(--ficha); color: var(--texto); text-decoration: none; font-weight: 600; font-size: 14px; border: 1px solid var(--borde-ficha);
}
.boton:hover { border-color: var(--acento); color: var(--acento); }

.aviso { background: var(--fondo-caixa); border-left: 4px solid var(--acento); padding: 10px 14px; border-radius: var(--radio); }
.nota { color: var(--texto-suave); font-size: 13px; }
.aviso.erro { border-left-color: var(--numero); }

/* El formulario de las apuestas (D42). Cómo se colocan los campos lo dice el diseño (D45); sin diseño, en una columna. */
.aposta { display: grid; gap: 12px; }
.aposta .quen, .aposta .valores { display: grid; gap: 12px; }
.aposta label { display: grid; gap: 4px; font-size: 14px; color: var(--texto-suave); }
.aposta input { width: 100%; padding: 8px 10px; font-size: 16px; color: var(--texto); background: var(--ficha); border: 1px solid var(--borde-ficha); border-radius: var(--radio); }
.aposta input:focus { outline: none; border-color: var(--acento); }
.aposta button { cursor: pointer; padding: 9px 16px; justify-self: start; }

/* Fichas: ligas en el inicio, jornadas del calendario, estaciones. */
.fichas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.ficha {
    display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
    background: var(--ficha); color: var(--texto); text-decoration: none;
    border-radius: 14px; padding: 10px 10px 12px; border: 1px solid var(--borde-ficha);
}
.ficha:hover { border-color: var(--acento); }
.ficha strong { color: var(--borde); font-size: 17px; }
.ficha span { font-size: 14px; color: var(--texto-suave); }
.ficha .numero { color: var(--numero); font-size: 20px; font-weight: 700; }
.ficha .tipo { color: var(--acento); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; }
.ficha .estado { margin-top: 4px; }
.ficha img, .ficha .sen-foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio); margin: 4px 0; background: var(--borde-ficha); }
.ficha .ganador { color: var(--ganador); }
.ficha.liga strong { font-size: 18px; }

/* Cajas de contenido */
.caixa { background: var(--fondo-caixa); border-radius: var(--radio); padding: 14px 16px; margin: 0 0 16px; }
.caixa h2 { margin-top: 0; }
/* Un título con un dato fijo a la derecha (la altitud de la estación en sus estadísticas). */
h2.con-dato { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; }
h2.con-dato .dato { font-size: 15px; font-weight: 400; color: var(--texto-suave); }
.texto img { display: inline-block; }
.texto table { border-collapse: collapse; }
.texto td, .texto th { border: 1px solid var(--linea); padding: 4px 8px; }

.estacion h2 { display: flex; align-items: center; gap: 12px; }
.estacion h2 a { color: var(--borde); text-decoration: none; }
.escudo { height: 64px; width: auto; }
.datos .foto { float: right; max-width: min(320px, 45%); margin: 0 0 10px 14px; border-radius: var(--radio); }
.datos::after { content: ""; display: block; clear: both; }
.mapa { max-height: 360px; width: auto; }
.lista { margin: 0; padding-left: 20px; }

/* Estadísticas de una estación: las cifras en tarjetas, como el cuadro de la web actual. */
.cifras { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.cifra { background: var(--ficha); border-radius: var(--radio); padding: 10px; text-align: center; display: flex; flex-direction: column; }
.cifra strong { font-size: 28px; color: var(--ganador); line-height: 1.2; }
.cifra span { font-size: 13px; color: var(--texto); }
.cifra small { font-size: 12px; color: var(--texto-suave); }
tr.actual td { background: var(--linea); }

/* El buscador de estaciones */
.busca { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.busca input {
    flex: 1 1 260px; max-width: 460px; padding: 8px 12px; font-size: 16px; color: var(--texto);
    background: var(--ficha); border: 1px solid var(--borde-ficha); border-radius: var(--radio);
}
.busca input:focus { outline: none; border-color: var(--acento); }
#cantas { color: var(--texto-suave); font-size: 14px; }
.ficha[hidden] { display: none; }

/* Blog */
.artigo-resumo h2 { margin-bottom: 2px; }
.artigo-resumo h2 a { color: var(--borde); text-decoration: none; }
.artigo-resumo .nota { margin-top: 0; }
/* El menú lateral del blog (D36): las ligas y las áreas, cada una desplegable con sus artículos. */
.con-lateral { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 18px; align-items: start; }
.lateral { background: var(--fondo-caixa); border-radius: var(--radio); padding: 10px 12px; font-size: 14px;
           position: sticky; top: 10px; max-height: calc(100vh - 20px); overflow-y: auto; }
.lateral h3 { margin: 6px 0 6px; }
.lateral details { border-bottom: 1px solid var(--linea); padding: 4px 0; }
.lateral summary { cursor: pointer; }
.lateral summary a { color: var(--borde); text-decoration: none; font-weight: 600; }
.lateral summary small { color: var(--texto-suave); }
.lateral ul { margin: 4px 0 6px; padding-left: 16px; }
.lateral li { margin: 2px 0; }
.lateral li a { color: var(--texto); text-decoration: none; }
.lateral li a:hover, .lateral li.actual a { color: var(--acento); }
@media (max-width: 800px) {
    .con-lateral { grid-template-columns: 1fr; }
    .lateral { position: static; max-height: none; order: 2; }
}

/* Tablas */
.taboa { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 6px 8px; text-align: center; border-bottom: 1px solid var(--linea); white-space: nowrap; }
th { color: var(--borde); font-weight: 600; }
th a { color: var(--borde); }
.nome { text-align: left; }
.total { font-weight: 700; color: var(--texto); }
td small { color: var(--texto-suave); }
tr.ganador td { color: var(--ganador); }
.clasificacion tbody tr:nth-child(-n+3) td:first-child { color: var(--ganador); font-weight: 700; }
.clasificacion .x { font-size: 13px; color: var(--texto-suave); }

.regulamento { background: transparent; padding: 0; }


@media (max-width: 600px) {
    .datos .foto { float: none; max-width: 100%; margin: 0 0 10px; }
    .fichas { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}