﻿/* =====================================================================
   Tema VOLEIBOL — Federación Navarra de Voleibol / Nafarroako Boleibol Federazioa
   Piel: colores, tipografías y fondo gráfico. Se carga después de temas/comun/css/tema.css.

   Dirección "Pista": el rojo del emblema y los colores de una pista de competición (zona de juego
   naranja y zona libre azul) sobre azul noche. Rasgos del deporte, discretos y de fondo:
     * la red (cinta blanca y malla) sobre el pie;
     * las líneas de la pista vistas desde arriba en las cabeceras de las páginas interiores;
     * la pista con la red y el balón en los contenidos sin foto.
   Las hojas de resultados de Google se pintan con el diseño de la web (temas/comun/HojaCalculo.cs).
   ===================================================================== */

:root {
    --mt-ink: #14203a;
    --mt-ink-soft: #55607a;
    --mt-bg: #f4f5f8;
    --mt-surface: #ffffff;
    --mt-line: #dde1ea;
    --mt-night: #14203a;
    --mt-night-2: #1f3666;
    --mt-accent: #d01818;
    --mt-accent-dark: #a80f0f;
    --mt-accent-soft: #ff8f86;
    --mt-brand: #d01818;
    --mt-radius: 10px;
    --mt-max: 1240px;
    --mt-font-display: "Rubik", "Segoe UI", system-ui, sans-serif;
    --mt-font-body: "Karla", system-ui, sans-serif;
    /* colores derivados (sobre fondo oscuro, pie, etiquetas...) */
    --mt-on-night: #d3d9e6;
    --mt-on-night-strong: #f2f5fb;
    --mt-on-night-soft: #c2cadb;
    --mt-on-night-mute: #93a0ba;
    --mt-on-night-faint: #56637f;
    --mt-night-line: #304468;
    --mt-night-divider: #26385a;
    --mt-footer-bg: #101a30;
    --mt-footer-ink: #bcc5d8;
    --mt-footer-line: #22314f;
    --mt-accent-tint: #fdeceb;
    --mt-accent-tint-line: #f6c4c1;
    --mt-tag-bg: #e8edf6;
    --mt-tag-club-bg: #fdf0e3;
    --mt-tag-club-ink: #9a4a08;
    --mt-date-past: #d9dee9;
    --mt-zebra: #f7f8fb;
    --mt-shadow-rgb: 20, 32, 58;
    --voley-pista: #f08a24;
    --voley-zona: #1f56a8;
}

/* ---------- Cabecera: emblema y el nombre en los dos idiomas, como el logo ---------- */
.mt-marca { display: flex; align-items: center; gap: 16px; min-width: 0; color: var(--mt-ink); }
.mt-marca:hover, .mt-marca:focus { color: var(--mt-ink); }
.mt-voley .mt-header .mt-marca img { height: 72px; width: auto; }
.mt-marca__texto { display: flex; flex-direction: column; gap: 4px; }
.mt-marca__nombre { font: 700 23px/1.1 var(--mt-font-display); color: var(--mt-brand); }
.mt-marca__sub { font: 500 15px/1.1 var(--mt-font-display); color: var(--mt-ink-soft); }
.mt-voley .mt-header__brand { min-height: 100px; }

/* ---------- Menú: azul noche, el activo subrayado en naranja de pista ---------- */
.mt-voley .mt-nav > ul > li > a { font: 600 16px/1 var(--mt-font-display); letter-spacing: .02em; }
.mt-voley .mt-nav > ul > li:hover > a, .mt-voley .mt-nav > ul > li:focus-within > a,
.mt-voley .mt-nav > ul > li.is-active > a { border-bottom-color: var(--voley-pista); }
.mt-voley .mt-mega { border-top-color: var(--mt-accent); border-radius: 0 0 var(--mt-radius) var(--mt-radius); }
.mt-voley .mt-mega .mt-has-sub > a { color: var(--mt-accent-dark); }

/* ---------- Títulos, botones, tarjetas ---------- */
.mt-voley .mt-btn { border-radius: 999px; }
.mt-voley .mt-section__head h2 { font-weight: 800; letter-spacing: -.005em; }
.mt-voley .mt-page-head h1, .mt-voley .mt-article__head h1 { font-weight: 800; letter-spacing: -.01em; }
.mt-voley .mt-card time, .mt-voley .mt-kicker { color: var(--mt-accent-dark); }
.mt-voley .mt-quick i { color: var(--mt-accent); }
.mt-voley .mt-date { background: var(--voley-zona); }
.mt-voley .mt-date span, .mt-voley .mt-date small { color: #ffd2a6; }
.mt-voley .mt-results li { border-left-color: var(--voley-pista); }

/* ---------- Partidos y clasificaciones (hojas de Google): el ganador, en naranja de pista ---------- */
.mt-voley .mt-partido__equipo.es-ganador .mt-partido__tanteo { background: var(--voley-pista); }
.mt-voley .mt-hoja-tabla thead th { background: var(--voley-zona); }

/* ---------- Pie: la red ---------- */
.mt-voley .mt-footer { position: relative; }
.mt-voley .mt-footer::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: 54px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='54' viewBox='0 0 24 54'%3E%3Cg stroke='%2314203a' stroke-opacity='.55' stroke-width='1' fill='none'%3E%3Cpath d='M0 16.5 H24'/%3E%3Cpath d='M0 28.5 H24'/%3E%3Cpath d='M0 40.5 H24'/%3E%3Cpath d='M0 52.5 H24'/%3E%3Cpath d='M.5 10 V54 M12.5 10 V54'/%3E%3C/g%3E%3Crect x='0' y='2' width='24' height='8' fill='%23ffffff'/%3E%3Cpath d='M0 2.5 H24 M0 9.5 H24' stroke='%2314203a' stroke-opacity='.6'/%3E%3C/svg%3E") 0 100% / 24px 54px repeat-x; pointer-events: none; }
.mt-voley .mt-sponsors { padding-bottom: 84px; }
.mt-voley .mt-footer .fa-solid { color: var(--mt-accent-soft); }

/* ---------- Páginas interiores: azul de la zona libre con las líneas de la pista ---------- */
.mt-voley .mt-page-head:not(.mt-page-head--slim) {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='360' viewBox='0 0 720 360'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.13' stroke-width='3'%3E%3Crect x='0' y='0' width='720' height='360'/%3E%3Cpath d='M240 0 V360 M480 0 V360'/%3E%3C/g%3E%3Cpath d='M360 -20 V380' stroke='%23ffffff' stroke-opacity='.22' stroke-width='6'/%3E%3Cpath d='M240 360 V376 M480 360 V376' stroke='%23ffffff' stroke-opacity='.13' stroke-width='3' stroke-dasharray='6 6'/%3E%3C/svg%3E") right -120px center / auto 180% no-repeat, linear-gradient(160deg, var(--mt-night-2), var(--mt-night) 70%);
}

/* ---------- Contenido sin imagen (Vista.Visual): la pista con la red y el balón ---------- */
.mt-sinfoto { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='250' viewBox='0 0 400 250'%3E%3Crect width='400' height='250' fill='%231f56a8'/%3E%3Crect x='65' y='50' width='270' height='150' fill='%23f08a24'/%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='3'%3E%3Crect x='65' y='50' width='270' height='150'/%3E%3Cpath d='M155 50 V200 M245 50 V200'/%3E%3C/g%3E%3Cpath d='M200 38 V212' stroke='%2314203a' stroke-width='5'/%3E%3Cpath d='M200 38 V212' stroke='%23ffffff' stroke-width='2' stroke-dasharray='4 4'/%3E%3Ccircle cx='280' cy='95' r='11' fill='%23ffffff'/%3E%3Cpath d='M270 92 Q280 88 290 96 M275 104 Q279 94 286 85' stroke='%231f56a8' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") center / cover no-repeat, var(--voley-zona); }
.mt-card:nth-child(2n) .mt-sinfoto { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='250' viewBox='0 0 400 250'%3E%3Crect width='400' height='250' fill='%231f56a8'/%3E%3Crect x='65' y='50' width='270' height='150' fill='%23f08a24'/%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='3'%3E%3Crect x='65' y='50' width='270' height='150'/%3E%3Cpath d='M155 50 V200 M245 50 V200'/%3E%3C/g%3E%3Cpath d='M200 38 V212' stroke='%2314203a' stroke-width='5'/%3E%3Cpath d='M200 38 V212' stroke='%23ffffff' stroke-width='2' stroke-dasharray='4 4'/%3E%3Ccircle cx='280' cy='95' r='11' fill='%23ffffff'/%3E%3Cpath d='M270 92 Q280 88 290 96 M275 104 Q279 94 286 85' stroke='%231f56a8' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") center / cover no-repeat, var(--voley-zona); transform: scaleX(-1); }

@media (max-width: 980px) {
    .mt-voley .mt-header .mt-marca img { height: 58px; }
    .mt-marca__nombre { font-size: 19px; }
    .mt-marca__sub { font-size: 13px; }
    .mt-voley .mt-header__brand { min-height: 84px; }
}
@media (max-width: 640px) {
    .mt-voley .mt-header .mt-marca img { height: 46px; }
    .mt-marca { gap: 10px; }
    .mt-marca__nombre { font-size: 16px; }
    .mt-marca__sub { font-size: 11.5px; }
}

/* Resultados del script de la federación (AppsScript): se pintan con la hoja de estilos del propio script
   (AppsScript.Estilos), así que lo que cambie la federación allí se ve igual aquí; no hace falta nada propio. */
