/* CCL Herramientas API — estilos. Hereda tipografía y colores del tema; los bordes y fondos
   se derivan de currentColor, así que funcionan en modo claro y oscuro sin tocar nada. */

.cclh {
	--cclh-acento: #d9480f;
	--cclh-borde: color-mix(in srgb, currentColor 14%, transparent);
	--cclh-suave: color-mix(in srgb, currentColor 5%, transparent);
	--cclh-tenue: color-mix(in srgb, currentColor 62%, transparent);
	--cclh-barato: #2f9e44;
	--cclh-medio: #e8a317;
	--cclh-caro: #e03131;
	--cclh-radio: 12px;
	margin: 1.5em 0;
	font-variant-numeric: tabular-nums;
}
.cclh *, .cclh *::before, .cclh *::after { box-sizing: border-box; }
.cclh h3 { margin: 1.6em 0 .6em; font-size: 1.2em; line-height: 1.3; }
.cclh p { margin: 0 0 .75em; }
.cclh-intro { font-size: 1.05em; }
.cclh-nota, .cclh-fuente, .cclh-leyenda { color: var(--cclh-tenue); font-size: .85em; }
.cclh-fuente { margin-top: 1.25em; padding-top: .75em; border-top: 1px solid var(--cclh-borde); }
.cclh-fuente a { color: inherit; }
.cclh-grande { font-size: 1.6em; font-weight: 700; line-height: 1.2; margin: 0 0 .3em; }

/* Respuesta destacada */
.cclh-respuesta, .cclh-destacado {
	padding: 1em 1.2em; border-radius: var(--cclh-radio);
	background: var(--cclh-suave); border-left: 4px solid var(--cclh-acento); margin: 1em 0;
}
.cclh-respuesta > :last-child, .cclh-destacado > :last-child { margin-bottom: 0; }
.cclh-destacado ul { margin: .4em 0 0 1.2em; padding: 0; }

/* Tarjetas */
.cclh-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 1em 0; }
.cclh-tarjeta {
	display: flex; flex-direction: column; gap: 2px; padding: .85em 1em;
	border: 1px solid var(--cclh-borde); border-radius: var(--cclh-radio);
}
.cclh-tarjeta-t { font-size: .82em; color: var(--cclh-tenue); }
.cclh-tarjeta-v { font-size: 1.3em; line-height: 1.2; }
.cclh-tarjeta-n { font-size: .82em; color: var(--cclh-tenue); }

/* Selector */
.cclh-selector { display: inline-flex; align-items: center; gap: .6em; margin: 0 0 1em; flex-wrap: wrap; }
.cclh-selector span { font-size: .9em; color: var(--cclh-tenue); }
.cclh-selector select {
	font: inherit; color: inherit; background: transparent; padding: .45em 2em .45em .7em;
	border: 1px solid var(--cclh-borde); border-radius: 8px; max-width: 100%;
}
.cclh-selector option { color: #111; background: #fff; }

/* Tablas */
.cclh-tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: .5em 0 1em; }
.cclh-tabla { width: 100%; border-collapse: collapse; font-size: .95em; }
.cclh-tabla th, .cclh-tabla td { padding: .5em .7em; text-align: left; border-bottom: 1px solid var(--cclh-borde); vertical-align: top; }
.cclh-tabla th { font-weight: 600; font-size: .85em; color: var(--cclh-tenue); white-space: nowrap; }
.cclh-ordenable th { cursor: pointer; user-select: none; }
.cclh-ordenable th[aria-sort="ascending"]::after { content: " ↑"; }
.cclh-ordenable th[aria-sort="descending"]::after { content: " ↓"; }
.cclh-fila-hoy td { background: color-mix(in srgb, var(--cclh-acento) 12%, transparent); font-weight: 600; }
.cclh-pasado, tr.cclh-pasado td { color: var(--cclh-tenue); }
.cclh-partidos td:not(:first-child), .cclh-partidos th:not(:first-child) { text-align: center; white-space: nowrap; }
.cclh-en-juego { color: var(--cclh-caro); font-weight: 600; font-size: .85em; }

/* Listas */
.cclh-lista { list-style: none; margin: .5em 0 1em; padding: 0; }
.cclh-lista li { padding: .65em 0; border-bottom: 1px solid var(--cclh-borde); }
.cclh-lista li span { color: var(--cclh-tenue); font-size: .9em; }
.cclh-cuentas li { display: flex; gap: 1em; align-items: center; }
.cclh-cuentas li > span:last-child { color: inherit; font-size: 1em; }
.cclh-dias-faltan {
	flex: 0 0 4.6em; text-align: center; padding: .35em .2em; border-radius: 8px;
	background: var(--cclh-suave); line-height: 1.15;
}
.cclh-dias-faltan strong { display: block; font-size: 1.35em; color: var(--cclh-acento); }

/* Línea de tiempo (efemérides) */
.cclh-linea-tiempo { list-style: none; margin: .5em 0 1em; padding: 0; }
.cclh-linea-tiempo li { display: grid; grid-template-columns: 4.2em 1fr; gap: .8em; padding: .55em 0; border-bottom: 1px solid var(--cclh-borde); }
.cclh-linea-tiempo p { margin: 0; }
.cclh-ano { font-weight: 700; color: var(--cclh-acento); }
.cclh-mas { font-size: .85em; white-space: nowrap; }

/* Gráfico solar */
.cclh-grafico { margin: .5em 0 1em; }
.cclh-grafico svg { width: 100%; height: auto; display: block; overflow: visible; }
.cclh-grafico figcaption { font-size: .82em; color: var(--cclh-tenue); margin-top: .4em; }
.cclh-rejilla { stroke: currentColor; stroke-opacity: .1; }
.cclh-eje { fill: currentColor; fill-opacity: .6; font-size: 11px; }
.cclh-eje-marca { fill-opacity: .8; }
.cclh-area-luz { fill: var(--cclh-acento); fill-opacity: .16; }
.cclh-linea { fill: none; stroke: var(--cclh-acento); stroke-width: 2; stroke-linejoin: round; }
.cclh-marca { stroke: currentColor; stroke-opacity: .45; stroke-dasharray: 4 4; }
.cclh-hoy { stroke: currentColor; stroke-width: 1.5; }

/* Precio de la luz */
.cclh-pestanas { display: flex; gap: 6px; margin: 1em 0 .5em; flex-wrap: wrap; }
.cclh-pestanas button {
	font: inherit; font-size: .9em; color: inherit; background: transparent; cursor: pointer;
	padding: .45em .9em; border: 1px solid var(--cclh-borde); border-radius: 999px;
}
.cclh-pestanas button[aria-selected="true"] { background: var(--cclh-acento); border-color: var(--cclh-acento); color: #fff; }
.cclh-pestanas button:disabled { opacity: .5; cursor: default; }
.cclh-barras { display: flex; align-items: flex-end; gap: 2px; height: 160px; margin: 1em 0 .3em; }
.cclh-barra { flex: 1 1 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; }
.cclh-barra span { display: block; width: 100%; border-radius: 3px 3px 0 0; background: currentColor; }
.cclh-barra small { font-size: 10px; color: var(--cclh-tenue); margin-top: 3px; }
.cclh-barra.cclh-barato span { background: var(--cclh-barato); }
.cclh-barra.cclh-medio span { background: var(--cclh-medio); }
.cclh-barra.cclh-caro span { background: var(--cclh-caro); }
.cclh-barra-ahora span { outline: 2px solid currentColor; outline-offset: 1px; }
.cclh-barra-ahora small { color: inherit; font-weight: 700; }
.cclh-punto { display: inline-block; width: .7em; height: .7em; border-radius: 50%; margin: 0 .35em 0 .8em; vertical-align: baseline; }
.cclh-tabla .cclh-punto { margin-left: 0; }
.cclh-punto.cclh-barato { background: var(--cclh-barato); }
.cclh-punto.cclh-medio { background: var(--cclh-medio); }
.cclh-punto.cclh-caro { background: var(--cclh-caro); }
.cclh-leyenda .cclh-punto:first-child { margin-left: 0; }

/* Calendario de festivos */
.cclh-calendario { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; margin: 1em 0; }
.cclh-mes p { font-weight: 600; margin: 0 0 .3em; }
.cclh-mes-dias, .cclh-luna-mes { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: .8em; }
.cclh-mes-dias span { padding: .25em 0; border-radius: 4px; }
.cclh-cab { color: var(--cclh-tenue); font-weight: 600; }
.cclh-finde { color: var(--cclh-tenue); }
.cclh-festivo { background: var(--cclh-acento); color: #fff !important; font-weight: 700; cursor: help; }
.cclh-dia-hoy { outline: 2px solid currentColor; outline-offset: -2px; border-radius: 4px; }

/* Luna */
.cclh-luna-hoy { display: flex; gap: 1.2em; align-items: center; flex-wrap: wrap; }
.cclh-luna-oscura { fill: currentColor; fill-opacity: .14; }
.cclh-luna-clara { fill: #f1e6c2; stroke: color-mix(in srgb, currentColor 20%, transparent); stroke-width: .5; }
.cclh-luna-mes { gap: 6px 2px; }
.cclh-luna-mes > span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; }
.cclh-luna-mes small { font-size: .9em; }

/* Tiempo */
.cclh-tiempo-ahora { display: flex; gap: 1em; align-items: center; }
.cclh-tiempo-icono { font-size: 3.2em; line-height: 1; }
.cclh-tiempo-ahora p { margin: 0; }

/* Cuenta atrás */
.cclh-contador { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 460px; margin: 1em 0; }
.cclh-contador div { text-align: center; padding: .7em .2em; border-radius: var(--cclh-radio); background: var(--cclh-suave); }
.cclh-contador strong { display: block; font-size: 1.9em; line-height: 1.1; color: var(--cclh-acento); }
.cclh-contador span { font-size: .78em; color: var(--cclh-tenue); }

.cclh-hoy-se-celebra { list-style: none; margin: 0; padding: 0; }
.cclh-hoy-se-celebra .cclh-grande { font-size: 1.3em; }

@media (max-width: 520px) {
	.cclh-grande { font-size: 1.35em; }
	.cclh-barras { height: 120px; }
	.cclh-barra small { font-size: 8px; }
	.cclh-tarjetas { grid-template-columns: repeat(2, 1fr); }
	.cclh-tarjeta-v { font-size: 1.1em; }
	.cclh-calendario { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* Índice de herramientas */
.cclh-hub-dest { text-decoration: none; color: inherit; transition: border-color .12s; }
.cclh-hub-dest:hover { border-color: var(--cclh-acento); }
.cclh-hub-dest .cclh-tarjeta-v { font-size: .98em; }
.cclh-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin: .5em 0 1.2em; }
.cclh-hub-item {
	display: flex; flex-direction: column; gap: 2px; padding: .8em 1em; text-decoration: none; color: inherit;
	border: 1px solid var(--cclh-borde); border-radius: var(--cclh-radio); transition: border-color .12s, background .12s;
}
.cclh-hub-item:hover { border-color: var(--cclh-acento); background: var(--cclh-suave); }
.cclh-hub-item span { font-size: .85em; color: var(--cclh-tenue); }

/* Que el tema no subraye ni recoloree las tarjetas enlazadas. */
.cclh a.cclh-hub-item, .cclh a.cclh-hub-dest, .cclh a.cclh-hub-item *, .cclh a.cclh-hub-dest * {
	text-decoration: none !important; color: inherit !important; box-shadow: none;
}
.cclh a.cclh-hub-item span, .cclh a.cclh-hub-dest .cclh-tarjeta-t, .cclh a.cclh-hub-dest .cclh-tarjeta-n { color: var(--cclh-tenue) !important; }
.cclh a.cclh-hub-dest .cclh-tarjeta-n { color: var(--cclh-acento) !important; font-weight: 600; }