/* Paleta y formas de /herramientas (v2.tokens + _index.scss): estas páginas son
   HTML estático, así que el sistema se replica a mano en vez de importarse. */
:root{--tinta:#0F172A;--prosa:#475569;--tenue:#64748B;--acento:#1D4ED8;--punto:#255FDE;
 --lienzo:#fff;--suave:#F8FAFC;--borde:#E2E8F0;--navy:#1e3a8a;
 --sombra:0 .125rem .5rem -.25rem rgba(15,23,42,.14);
 --sombra-alta:0 .75rem 1.75rem -.75rem rgba(37,95,222,.35)}
*{box-sizing:border-box}
body{margin:0;background:var(--lienzo);color:var(--tinta);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
main{max-width:980px;margin:0 auto;padding:0 20px 56px}
a{color:var(--acento)}

/* ── Cabecera: la misma barra del sitio (ChromeV2 · CabeceraPublica) ────── */
.cab{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--borde)}
.cab-int{max-width:1180px;margin:0 auto;height:66px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.cab .logo{font-size:1.35rem;font-weight:700;letter-spacing:-.03em;color:var(--tinta);text-decoration:none}
.cab .logo span{color:var(--acento)}
.cab-nav{display:flex;align-items:center;gap:26px}
.cab-nav a{font-size:.94rem;font-weight:500;color:var(--prosa);text-decoration:none}
.cab-nav a:hover{color:var(--tinta)}
.cab-acc{display:flex;align-items:center;gap:10px}
.cab-entrar{font-size:.94rem;font-weight:500;color:var(--prosa);text-decoration:none}
.cab-cta{background:var(--acento);color:#fff;padding:.55rem 1.05rem;border-radius:62.5rem;font-weight:600;font-size:.94rem;text-decoration:none}

/* ── Hero: la banda clara con glow de /herramientas ─────────────────────── */
.hero{position:relative;overflow:hidden;margin:1.5rem 0 1.25rem;padding:1.375rem 1.5rem;border:1px solid rgba(37,95,222,.14);background:linear-gradient(120deg,#f7faff 0%,#eaf1ff 45%,#f9fbff 100%);border-radius:1.25rem}
.hero::after{content:'';position:absolute;top:-7rem;right:-4rem;width:19rem;height:19rem;background:radial-gradient(circle,rgba(37,95,222,.16) 0%,transparent 70%);pointer-events:none}
.hero-fila{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:1rem}
.hero-icono{display:inline-flex;width:3.25rem;height:3.25rem;flex-shrink:0;align-items:center;justify-content:center;background:linear-gradient(135deg,#60a5fa 0%,#255fde 55%,#1e3a8a 100%);border-radius:1rem;box-shadow:0 .625rem 1.5rem -.625rem rgba(37,95,222,.75);color:#fff}
.hero-texto{flex:1 1 0;min-width:320px}
.miga{color:#1e40af;font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin:0 0 .3rem}
.miga a{color:inherit;opacity:.7;text-decoration:none}
.miga a:hover{opacity:1;text-decoration:underline}
h1{color:var(--tinta);font-size:clamp(1.55rem,2.5vw,2rem);font-weight:800;letter-spacing:-.02em;line-height:1.12;margin:0 0 .35rem}
h1 span{background:linear-gradient(100deg,#2b6bf0 0%,#1e3a8a 100%);background-clip:text;-webkit-background-clip:text;color:#255fde;-webkit-text-fill-color:transparent}
.hero-lead{max-width:64ch;color:var(--prosa);font-size:.94rem;line-height:1.55;margin:0}
.hero-lead strong{color:var(--tinta)}
.hero-cifras{display:flex;gap:.6rem;flex-shrink:0;flex-wrap:wrap}
.cifra{background:#fff;border:1px solid rgba(37,95,222,.16);border-radius:.9rem;padding:.55rem .85rem;box-shadow:var(--sombra);min-width:88px}
.cifra b{display:block;font-size:1.5rem;font-weight:800;line-height:1.05;letter-spacing:-.03em;color:var(--tinta)}
.cifra span{display:block;font-size:.72rem;color:var(--tenue);font-weight:600}
.cifra-acento b{color:var(--acento)}

h2{font-size:1.3rem;font-weight:800;letter-spacing:-.015em;margin:2.4rem 0 .2rem;color:var(--tinta)}
h3{font-size:1rem;font-weight:700;margin:0 0 .55rem}
.subtitulo{color:var(--prosa);font-size:.92rem;margin:.25rem 0 1rem;max-width:66ch}
.meta{font-size:.84rem;color:var(--tenue)}
.aviso{border-radius:1rem;padding:.9rem 1.1rem;margin:1rem 0;font-size:.92rem}
.aviso-warn{background:#fff7ed;border:1px solid #fed7aa;color:#7c2d12}

/* ── Las dos vías ───────────────────────────────────────────────────────── */
.via-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.via{position:relative;overflow:hidden;background:#fff;border:1px solid var(--borde);border-radius:1rem;padding:1.15rem 1.25rem 1rem;box-shadow:var(--sombra)}
.via::before{content:'';position:absolute;inset:0 0 auto;height:3px}
.via-procesal::before{background:linear-gradient(90deg,#2b6bf0,#93c5fd)}
.via-admin::before{background:linear-gradient(90deg,#d97706,#fcd34d)}
.via .rotulo{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#94a3b8;margin:0 0 .15rem}
.via ul{margin:0;padding-left:1.1rem}
.via li{margin-bottom:.45rem;font-size:.9rem;color:var(--prosa)}
.via li strong{color:var(--tinta)}
.via li::marker{color:#cbd5e1}
.nota{font-size:.85rem;color:var(--prosa);margin:.9rem 0 0}

/* ── Calendario ─────────────────────────────────────────────────────────── */
.leyenda{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-size:.78rem;margin:0 0 .9rem}
.pill{border-radius:62.5rem;padding:.2rem .7rem;font-weight:600}
.pill-nacional{background:#dbeafe;color:#1e3a8a}
.pill-autonomico{background:#e0e7ff;color:#3730a3}
.pill-local{background:#fef3c7;color:#92400e}
.pill-finde{background:#f1f5f9;color:#475569}
.pill-nota{color:var(--tenue)}
.meses{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:.85rem}
.cal-mes{background:#fff;border:1px solid var(--borde);border-radius:1rem;border-collapse:separate;border-spacing:0;padding:.75rem;width:100%;box-shadow:var(--sombra);transition:box-shadow .18s ease,transform .18s cubic-bezier(.16,1,.3,1)}
.cal-mes:hover{box-shadow:var(--sombra-alta);transform:translateY(-1px)}
.cal-mes caption{font-weight:700;padding:0 0 .5rem .15rem;text-align:left;font-size:.92rem;letter-spacing:-.01em}
.cal-mes th{font-size:.68rem;color:#94a3b8;font-weight:700;padding:2px;text-transform:uppercase;letter-spacing:.04em}
.cal-mes td{text-align:center;padding:4px 3px;font-size:.81rem;border-radius:7px;position:relative}
/* El sombreado de los días inhábiles NO se redondea: las celdas se tocan sin
   separación, así que cuatro esquinas redondeadas dejan un rombo blanco en cada
   cruce — en agosto, inhábil entero, la cuadrícula quedaba plagada de ellos.
   Plano, el sombreado se lee como una región continua, que es lo que significa.
   El redondeo se lo queda el festivo, que sí es una píldora suelta. La
   especificidad de .cal-mes td.x es necesaria para ganarle a .cal-mes td. */
.cal-inhabil{background:#f1f5f9;color:#94a3b8}
.cal-mes td.cal-inhabil{border-radius:0}
.cal-mes td.cal-festivo{border-radius:7px}
.cal-festivo{font-weight:700}
.cal-nacional{background:#dbeafe;color:#1e3a8a}
.cal-autonomico{background:#e0e7ff;color:#3730a3}
.cal-local{background:#fef3c7;color:#92400e}
.cal-nombre{display:none}

/* ── Tabla de festivos ──────────────────────────────────────────────────── */
.tabla-festivos{width:100%;background:#fff;border:1px solid var(--borde);border-radius:1rem;border-collapse:collapse;overflow:hidden;box-shadow:var(--sombra)}
.tabla-festivos caption{text-align:left;padding:.9rem 1rem .75rem;font-weight:600;font-size:.84rem;color:var(--tenue)}
.tabla-festivos th,.tabla-festivos td{padding:.65rem 1rem;border-top:1px solid var(--borde);text-align:left;font-size:.89rem}
.tabla-festivos th{background:var(--suave);font-size:.72rem;color:var(--tenue);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.tabla-festivos tbody tr:hover{background:#fbfdff}
.tabla-festivos td:first-child{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--prosa)}

.procedencia ul{font-size:.9rem;padding-left:1.1rem;color:var(--prosa)}
.procedencia li{margin-bottom:.4rem}

/* ── Llamada a la acción ────────────────────────────────────────────────── */
.cta{position:relative;overflow:hidden;background:linear-gradient(120deg,#f7faff 0%,#eaf1ff 45%,#f9fbff 100%);border:1px solid rgba(37,95,222,.14);border-radius:1.25rem;padding:1.5rem 1.6rem;margin-top:2.4rem}
.cta::after{content:'';position:absolute;top:-7rem;right:-4rem;width:19rem;height:19rem;background:radial-gradient(circle,rgba(37,95,222,.16) 0%,transparent 70%);pointer-events:none}
.cta h2{margin:0 0 .35rem;position:relative}
.cta p{color:var(--prosa);font-size:.94rem;max-width:62ch;position:relative}
.btn{display:inline-block;background:var(--acento);color:#fff;text-decoration:none;padding:.6rem 1.35rem;border-radius:62.5rem;font-weight:700;font-size:.9rem;margin:.6rem .5rem 0 0;position:relative;box-shadow:0 .5rem 1.25rem -.5rem rgba(37,95,222,.6);transition:transform .15s cubic-bezier(.16,1,.3,1)}
.btn:hover{transform:translateY(-1px)}
.btn-sec{background:#fff;color:var(--acento);border:1px solid rgba(37,95,222,.28);box-shadow:var(--sombra)}
.volver{margin-top:1.9rem;font-size:.9rem}

/* ── Índice de partidos ─────────────────────────────────────────────────── */
.grupo{margin-top:1.6rem}
.lista-partidos{columns:4;column-gap:1.5rem;list-style:none;padding:0;font-size:.91rem}
.lista-partidos li{margin-bottom:.35rem;break-inside:avoid}

/* ── Condiciones de uso (las mismas de ToolShell) ──────────────────────── */
.condiciones{background:var(--suave);border:1px solid var(--borde);border-radius:.75rem;padding:1rem 1.15rem;margin-top:2.4rem;font-size:.82rem;color:var(--tenue);line-height:1.55}
.condiciones-tit{font-weight:700;color:var(--tinta);margin:0 0 .3rem}
.condiciones p{margin:0}
.condiciones strong{color:var(--prosa)}

/* ── Pie: el del sitio (ChromeV2 · PiePublico) ─────────────────────────── */
.pie{background:#fff;border-top:1px solid var(--borde);padding:3rem 20px 2rem;margin-top:2.5rem}
.pie-int{max-width:1180px;margin:0 auto}
.pie-cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:1.5rem}
.pie-logo{font-size:1.3rem;font-weight:700;letter-spacing:-.03em;color:var(--tinta)}
.pie-logo span{color:var(--acento)}
.pie-marca p{font-size:.85rem;line-height:1.6;color:var(--tenue);margin-top:12px;max-width:26em}
.pie-col h3{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta);margin:0 0 12px}
.pie-col ul{list-style:none;padding:0;margin:0}
.pie-col li{margin-bottom:8px}
.pie-col a{font-size:.85rem;color:var(--prosa);text-decoration:none}
.pie-col a:hover{color:var(--tinta)}
.pie-barra{margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid var(--borde);font-size:.8rem;color:var(--tenue);display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.pie-redes{display:inline-flex;gap:10px}
.pie-redes a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;color:var(--tenue);border:1px solid var(--borde);transition:color .15s ease,border-color .15s ease}
.pie-redes a:hover{color:var(--acento);border-color:var(--acento)}
.pie-nota{margin:1.2rem 0 0;font-size:.76rem;color:var(--tenue)}

/* ── Buscador del índice (combobox) ────────────────────────────────────── */
.buscador{position:relative;background:#fff;border:1px solid var(--borde);border-radius:1rem;padding:1.1rem 1.25rem;margin:1.5rem 0 1.2rem;box-shadow:var(--sombra)}
.buscador label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#1e40af;margin-bottom:.5rem}
.buscador-caja{position:relative;display:flex;align-items:center}
.buscador-lupa{position:absolute;left:1rem;color:#94a3b8;pointer-events:none}
.buscador input{width:100%;padding:.75rem 2.5rem;font-size:1rem;font-family:inherit;color:var(--tinta);border:1px solid var(--borde);border-radius:62.5rem;background:var(--suave);outline:none}
.buscador input:focus{border-color:var(--acento);background:#fff;box-shadow:0 0 0 3px rgba(37,95,222,.14)}
.buscador-x{position:absolute;right:.7rem;width:26px;height:26px;border:0;border-radius:50%;background:#e2e8f0;color:var(--prosa);font-size:1.05rem;line-height:1;cursor:pointer}
.buscador-x:hover{background:#cbd5e1}
.buscador-lista{position:absolute;left:1.25rem;right:1.25rem;z-index:20;list-style:none;margin:.4rem 0 0;padding:.35rem;background:#fff;border:1px solid var(--borde);border-radius:.9rem;box-shadow:0 1rem 2.5rem -1rem rgba(15,23,42,.35);max-height:22rem;overflow-y:auto}
.buscador-lista li{display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;border-radius:.6rem;cursor:pointer}
.buscador-lista li.q-activo,.buscador-lista li:hover{background:#eff4ff}
.q-n{font-weight:600;color:var(--tinta)}
.q-c{font-size:.82rem;color:var(--tenue)}
.q-ch{margin-left:auto;color:var(--acento);font-size:1.15rem;line-height:1}
.buscador-lista li.q-vacio{display:block;cursor:default;font-size:.88rem;color:var(--prosa)}
.buscador-lista li.q-vacio:hover{background:none}
.q-ayuda{font-size:.8rem;color:var(--tenue);margin:.7rem 0 0}
.q-o{text-align:center;font-size:.8rem;color:var(--tenue);margin:0 0 .4rem}

/* ── Globo de los días festivos ────────────────────────────────────────── */
.cal-dia{position:relative}
.cal-festivo{cursor:help}
.cal-doble::after{content:'';position:absolute;top:2px;right:2px;width:5px;height:5px;border-radius:50%;background:#dc2626}
.cal-tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);z-index:40;width:max-content;max-width:15rem;text-align:left;background:#0F172A;color:#fff;border-radius:.7rem;padding:.6rem .75rem;font-size:.78rem;line-height:1.45;box-shadow:0 .75rem 2rem -.75rem rgba(15,23,42,.6);opacity:0;visibility:hidden;transition:opacity .13s ease,transform .13s ease;pointer-events:none}
.cal-tip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#0F172A}
.cal-dia:hover .cal-tip,.cal-dia:focus .cal-tip,.cal-dia:focus-within .cal-tip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.cal-dia:focus{outline:2px solid var(--acento);outline-offset:1px}
.cal-tip b{display:block;font-size:.72rem;font-weight:600;color:#94A3B8;margin-bottom:.3rem}
.cal-tip-f{display:flex;align-items:baseline;gap:.35rem;font-weight:600}
.cal-tip-f+.cal-tip-f{margin-top:.25rem}
.cal-tip-f em{font-style:normal;font-weight:400;color:#94A3B8;font-size:.72rem;margin-left:auto;padding-left:.4rem;white-space:nowrap}
.pt{width:7px;height:7px;border-radius:50%;flex-shrink:0;display:inline-block;transform:translateY(-1px)}
.pt-nacional{background:#93c5fd}
.pt-autonomico{background:#a5b4fc}
.pt-local{background:#fcd34d}
.cal-tip-av{display:block;margin-top:.4rem;padding-top:.35rem;border-top:1px solid rgba(148,163,184,.25);color:#FCA5A5;font-size:.72rem;font-weight:600}
.pill-doble{color:#dc2626;font-size:.7rem;vertical-align:middle}
/* Cerca de los bordes el globo se saldría del mes: se ancla al lado. */
.cal-mes td:nth-child(-n+2) .cal-tip{left:0;transform:translateX(0) translateY(4px)}
.cal-mes td:nth-child(-n+2) .cal-tip::after{left:1.1rem}
.cal-mes td:nth-child(-n+2):hover .cal-tip,.cal-mes td:nth-child(-n+2):focus-within .cal-tip{transform:translateX(0) translateY(0)}
.cal-mes td:nth-child(n+6) .cal-tip{left:auto;right:0;transform:translateX(0) translateY(4px)}
.cal-mes td:nth-child(n+6) .cal-tip::after{left:auto;right:1.1rem}
.cal-mes td:nth-child(n+6):hover .cal-tip,.cal-mes td:nth-child(n+6):focus-within .cal-tip{transform:translateX(0) translateY(0)}

/* ── Más herramientas ──────────────────────────────────────────────────── */
.mas-herr{margin-top:2.6rem}
.mas-herr-cab{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.85rem}
.mas-herr-cab h2{margin:0}
.mas-herr-cab a{font-size:.86rem;font-weight:600;text-decoration:none}
.mas-herr-grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.herr-card{display:block;background:#fff;border:1px solid var(--borde);border-radius:1rem;padding:1rem 1.15rem;text-decoration:none;box-shadow:var(--sombra);transition:box-shadow .18s ease,transform .18s cubic-bezier(.16,1,.3,1)}
.herr-card:hover{box-shadow:var(--sombra-alta);transform:translateY(-1px)}
.herr-card b{display:block;color:var(--tinta);font-size:.95rem;margin-bottom:.2rem}
.herr-card span{display:block;color:var(--prosa);font-size:.84rem;line-height:1.5}

@media(max-width:760px){
 .via-grid{grid-template-columns:1fr}
 .lista-partidos{columns:2}
 .mas-herr-grid{grid-template-columns:1fr}
 .cab-nav,.cab-entrar{display:none}
 .pie-cols{grid-template-columns:1fr 1fr}
 .pie-marca{grid-column:1/-1}
 .mas-herr-grid{grid-template-columns:1fr}
 .cab nav a:not(.cab-cta){display:none}
 .hero{padding:1.15rem 1.15rem}
 .hero-cifras{width:100%}
 .cifra{flex:1 1 0;min-width:0}
 .tabla-festivos th,.tabla-festivos td{padding:.6rem .75rem}
}