/* Paleta visual tomada de 11.jpg: verde, ámbar, negro verdoso y blanco cálido. */
.penca-tb {
	--penca-orange: #FFA827;
	/* Ámbar oscuro para texto sobre blanco y fondos claros. */
	--penca-orange-text: #C66A00;
	--penca-dark: #121711;
	--penca-line: #384235;
	--penca-soft: #1A2119;
	--penca-ok: #78BB6B;
	--penca-error: #D75A4A;
	color: var(--penca-dark);
	font-size: 16px;
	line-height: 1.4;
}
.penca-tb h3 { margin: 0 0 .25em; }
.penca-tb button { font: inherit; cursor: pointer; }
.penca-tb button:disabled { cursor: not-allowed; opacity: .45; }
.penca-tb-link { display: inline-block; margin: 0 0 .6em; padding: .55em 1em; border: 1px solid var(--penca-orange); border-radius: 8px; background: var(--penca-orange); color: #121711 !important; font-weight: 700; text-decoration: none; transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; }
.penca-tb-link:hover, .penca-tb-link:focus-visible { background: #FFD37A; border-color: #FFD37A; color: #121711 !important; transform: translateY(-1px); }
.penca-tb-header { margin-bottom: 1em; }
.penca-tb-badge { display: inline-block; font-size: .7em; font-weight: 600; padding: .15em .6em; border-radius: 5px; background: var(--penca-line); vertical-align: middle; margin-left: .3em; }
.penca-tb-badge-ok { background: #dcf3e2; color: var(--penca-ok); }
.penca-tb-badge-warn { background: var(--penca-soft); color: #9a4b0b; }
.penca-tb-msg { padding: .75em 1em; border-radius: 8px; background: #f4f4f4; margin: 0 0 1em; }
.penca-tb-ok { background: #dcf3e2; color: #0f5223; }
.penca-tb-error { background: #fbe6e6; color: #7a1b1c; }
.penca-tb-msg ul { margin: 0; padding-left: 1.2em; }
.penca-tb-races { display: grid; gap: .6em; }
.penca-tb-race { display: flex; flex-direction: column; align-items: flex-start; gap: .2em; text-align: left; padding: .9em 1em; border: 1px solid var(--penca-line); border-left: 4px solid var(--penca-orange); border-radius: 8px; background: #fff; color: inherit; }
.penca-tb-layout { display: grid; gap: 1em; }
.penca-tb-filters { display: flex; flex-wrap: wrap; gap: .5em; margin-bottom: .75em; align-items: center; }
.penca-tb-filters input[type="search"] { flex: 1 1 100%; }
.penca-tb-filters input, .penca-tb-filters select { padding: .45em .5em; border: 1px solid #c9c9c9; border-radius: 6px; font: inherit; max-width: 100%; }
.penca-tb-filters input[type="number"] { width: 4.5em; }
.penca-tb-list { list-style: none; margin: 0 !important; padding: 0 !important; border-top: 1px solid var(--penca-line); }
.penca-tb-empty { padding: 1em 0; }
.penca-tb-rider { display: grid; grid-template-columns: auto 1fr auto auto; gap: .6em; align-items: center; padding: .6em .25em; border-bottom: 1px solid var(--penca-line); }
/* Tarjeta de corredor (P7.2): iniciales en el color propio del equipo, sin fotos. */
.penca-tb-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.4em; height: 2.4em; border-radius: 50%; color: #fff; font-size: .85em; font-weight: 700; letter-spacing: .02em; flex-shrink: 0; }
.penca-tb-jersey { object-fit: contain; border-radius: 6px; background: transparent; }
.penca-tb-rider.is-chosen .penca-tb-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--penca-orange); }
.penca-tb-rider.is-chosen .penca-tb-jersey { box-shadow: none; background: #fff; outline: 2px solid var(--penca-orange); outline-offset: 1px; }
.penca-tb-rider.is-blocked .penca-tb-avatar, .penca-tb-rider.is-gone .penca-tb-avatar { filter: grayscale(1); opacity: .55; }
.penca-tb-rider.is-blocked .penca-tb-price { color: #767676; }
.penca-tb-reason { font-size: .78em !important; color: #9a4b0b !important; font-weight: 600; }
.penca-tb-rider.is-chosen { background: var(--penca-soft); }
.penca-tb-rider.is-gone strong { text-decoration: line-through; }
.penca-tb-rider-main { display: flex; flex-direction: column; min-width: 0; }
.penca-tb-rider-main > span { font-size: .85em; color: #5c5c5c; overflow-wrap: anywhere; }
.penca-tb-price { font-weight: 700; min-width: 2em; text-align: right; }
.penca-tb-add, .penca-tb-remove { min-width: 5.5em; padding: .45em .6em; border-radius: 6px; border: 1px solid var(--penca-orange); }
.penca-tb-add { background: var(--penca-orange-text); border-color: var(--penca-orange-text); color: #fff; }
.penca-tb-remove { background: #fff; color: var(--penca-orange-text); }
.penca-tb-summary { background: #fff; border: 1px solid var(--penca-line); border-radius: 10px; padding: 1em; position: sticky; bottom: 0; box-shadow: 0 -2px 10px rgba(0,0,0,.06); }
.penca-tb-summary h4 { margin: 0 0 .5em; }
/* Presupuesto (P7.1): un tramo por corredor; suplentes más claros; rojo si se pasa. */
.penca-tb-meter { display: flex; height: 14px; background: var(--penca-line); border-radius: 999px; overflow: hidden; }
.penca-tb-meter span { display: block; height: 100%; background: var(--penca-orange); box-shadow: inset -2px 0 0 #fff; transition: width .2s; }
.penca-tb-meter span.is-sub { background: #f2b47f; }
.penca-tb-meter.is-over span { background: var(--penca-error); }
.penca-tb-meter.is-stuck { outline: 2px solid #9a4b0b; outline-offset: 1px; }
.penca-tb-budget p { margin: .35em 0 0; }
.penca-tb-budget-warn { padding: .35em .6em; border-radius: 6px; background: var(--penca-soft); color: #9a4b0b; font-size: .85em; }
.penca-tb-budget-legend { font-size: .75em; color: #5c5c5c; }
.penca-tb-budget-legend i { display: inline-block; width: .8em; height: .8em; margin: 0 .3em 0 0; border-radius: 2px; background: var(--penca-orange); vertical-align: -1px; }
.penca-tb-budget-legend i.is-sub { margin-left: .8em; background: #f2b47f; }
.penca-tb-checks { list-style: none; padding: 0; margin: .5em 0; font-size: .9em; }
.penca-tb-checks li::before { content: "○ "; color: #8a8a8a; }
.penca-tb-checks li.is-ok::before { content: "✓ "; color: var(--penca-ok); font-weight: 700; }
.penca-tb-chosen { margin: .5em 0; padding-left: 1.4em; font-size: .9em; }
.penca-tb-flag { display: inline-block !important; width: 20px; height: 14px; object-fit: cover; margin: 0 .4em 0 0 !important; vertical-align: -1px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.penca-tb-status { margin: 0 0 .5em; }
.penca-tb-status .penca-tb-badge { margin-left: 0; margin-right: .3em; }
.penca-tb-summary .penca-tb-msg { padding: .5em .7em; font-size: .9em; margin-bottom: .6em; }
.penca-tb-window { margin: 0 0 1em; padding: .8em 1em; border-radius: 8px; border-left: 4px solid var(--penca-orange); background: var(--penca-soft); }
.penca-tb-window p { margin: .3em 0 0; font-size: .95em; }
.penca-tb-badge-done { background: var(--penca-dark); color: #fff; }
.penca-tb-badge-window { background: var(--penca-orange-text); color: #fff; }

.penca-tb-out { color: var(--penca-error); font-size: .85em; }
.penca-tb-role { white-space: nowrap; display: inline-block; font-size: .7em; font-weight: 600; margin-left: .5em; padding: .15em .6em; border: 1px solid var(--penca-orange-text); border-radius: 5px; background: var(--penca-orange-text); color: #fff; vertical-align: middle; }
/* Titular: naranja lleno. Suplente: borde naranja. Fuera de carrera: rojo. */
.penca-tb-role-sub { background: #fff; color: var(--penca-orange-text); }
.penca-tb-role-out { background: var(--penca-error); border-color: var(--penca-error); color: #fff; }
.penca-tb-lineup h5 { margin: .8em 0 .2em; font-size: .95em; }
.penca-tb-lineup h5 small { font-weight: 400; color: #5c5c5c; }
.penca-tb-lineup .penca-tb-chosen li { display: flex; justify-content: space-between; align-items: center; gap: .4em; padding: .15em 0; }
.penca-tb-lineup .penca-tb-chosen li.is-swap { background: var(--penca-soft); outline: 2px solid var(--penca-orange); border-radius: 4px; }
.penca-tb-mini-group { display: inline-flex; gap: .25em; flex-shrink: 0; }
.penca-tb-mini { font-size: .8em; padding: .2em .45em; border: 1px solid #c9c9c9; border-radius: 5px; background: #fff; color: var(--penca-dark); white-space: nowrap; }
.penca-tb-hint { margin: .4em 0; padding: .4em .6em; border-radius: 6px; background: var(--penca-soft); font-size: .9em; }
.penca-tb-actions { display: flex; gap: .5em; flex-wrap: wrap; }
.penca-tb-actions button { flex: 1 1 auto; padding: .65em .8em; border-radius: 8px; font-weight: 600; }
.penca-tb-primary { background: var(--penca-dark); color: #fff; border: 1px solid var(--penca-dark); }
.penca-tb-secondary { background: #fff; color: var(--penca-dark); border: 1px solid var(--penca-dark); }

/* En el celular el resumen queda fijo abajo: compacto para no tapar la lista. */
@media (max-width: 899px) {
	.penca-tb-summary { padding: .6em .8em; }
	.penca-tb-summary h4, .penca-tb-summary .penca-tb-chosen, .penca-tb-summary .penca-tb-lineup, .penca-tb-budget-legend { display: none; }
	.penca-tb-lineup-mobile { margin-top: 1em; padding: .8em; border: 1px solid var(--penca-line); border-radius: 10px; }
	.penca-tb-lineup-mobile h4 { margin: 0; }
	.penca-tb-summary p { margin: .35em 0 0; font-size: .9em; }
	.penca-tb-summary .penca-tb-status { margin: 0 0 .3em; font-size: 1em; }
	.penca-tb-checks { display: flex; flex-wrap: wrap; gap: 0 .8em; margin: .2em 0 .5em; font-size: .8em; }
	.penca-tb-actions { flex-wrap: nowrap; }
	.penca-tb-actions button { flex: 1 1 0; padding: .5em .4em; }
}

@media (min-width: 900px) {
	.penca-tb-lineup-mobile { display: none; }
	.penca-tb-layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
	/* Si el tablero no entra en la pantalla, el panel se desplaza solo: los botones siempre a mano. */
	.penca-tb-summary { top: 1em; bottom: auto; box-shadow: none; max-height: calc(100vh - 2em); overflow-y: auto; }
	.penca-tb-filters input[type="search"] { flex: 1 1 200px; }
}

/* «Entraste como X · Salir» (fuera del contenedor del armado). */
.penca-tb-user { font-size: .9em; color: #5c5c5c; text-align: right; margin: 0 0 .5em; }
.penca-tb-user a { color: var(--penca-orange-text, #C66A00); font-weight: 600; }

/* Bandera y nombre juntos en la alineación: el nombre se parte a la derecha de la bandera. */
.penca-tb-lineup .penca-tb-chosen li > span:first-child { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: .4em; min-width: 0; }
.penca-tb-lineup .penca-tb-flag { flex-shrink: 0; margin: 0 .4em 0 0 !important; vertical-align: -2px; }

/* Tu carrera (P6.4 y P6.6). */
.penca-tb-history { margin-top: 1em; }
.penca-tb-standing { margin: 0 0 1em; }
.penca-tb-standing h3 { margin: 0; }
.penca-tb-standing p { margin: .2em 0 0; color: #5c5c5c; }
.penca-tb-stage { border: 1px solid var(--penca-line); border-radius: 8px; margin: 0 0 .5em; padding: 0 .8em; }
.penca-tb-stage[open] { padding-bottom: .8em; }
.penca-tb-stage summary { display: flex; justify-content: space-between; gap: 1em; padding: .6em 0; cursor: pointer; font-weight: 600; }
.penca-tb-stage-pts { color: var(--penca-orange-text); white-space: nowrap; }
.penca-tb-points { width: 100%; border-collapse: collapse; font-size: .92em; }
.penca-tb-points th, .penca-tb-points td { padding: .35em .4em; border-bottom: 1px solid var(--penca-line); text-align: left; }
.penca-tb-points .num { text-align: right; white-space: nowrap; }
.penca-tb-points tr.total td { font-weight: 700; border-bottom: 0; }
.penca-tb-muted { color: #5c5c5c; font-size: .9em; }
.penca-tb-changes { padding-left: 1.2em; font-size: .92em; }

/* Botón de enlace entre «Mi equipo» y la página de armado. */
.penca-tb-button { display: inline-block; padding: .55em 1em; border: 1px solid var(--penca-orange); border-radius: 8px; background: var(--penca-orange); color: #121711 !important; font-weight: 700; text-decoration: none; transition: background-color .16s ease, border-color .16s ease, transform .16s ease; }
.penca-tb-button:hover, .penca-tb-button:focus-visible { background: #FFD37A; border-color: #FFD37A; color: #121711 !important; transform: translateY(-1px); }

/* Equipo actual en «Mi equipo». */
.penca-tb-card { margin: 0 0 1em; padding: .8em 1em; border: 1px solid var(--penca-line); border-radius: 10px; background: #fff; }
.penca-tb-card h4 { margin: 0 0 .6em; }
.penca-tb-card h5 { margin: .4em 0 .2em; font-size: .9em; color: #5c5c5c; }
.penca-tb-card > :last-child { margin-bottom: 0; }
/* Etapas dentro del recuadro: renglones desplegables separados por una línea. */
.penca-tb-card .penca-tb-stage { border: 0; border-top: 1px solid var(--penca-line); border-radius: 0; margin: 0; padding: 0; }
.penca-tb-card .penca-tb-stage[open] { padding-bottom: .8em; }
.penca-tb-card .penca-tb-changes { margin: 0; }
.penca-tb-current-cols { display: grid; gap: .5em 1.5em; }
@media (min-width: 640px) { .penca-tb-current-cols { grid-template-columns: 1fr 1fr; } }

/* Equipo ciclista después del nombre: en letra normal aunque el nombre vaya en negrita. */
.penca-tb-team { font-weight: 400; color: #5c5c5c; }

/* Panel blanco que envuelve las pantallas de la Penca, sea cual sea el fondo del tema. */
/* Superficie principal inspirada en el fondo negro verdoso de 11.jpg. */
.penca-tb-wrap { background: #121711; color: #E1E9DE; padding: 1em 1.2em; border-radius: 12px; border: 1px solid #384235; box-shadow: 0 1px 3px rgba(0,0,0,.24); }
.penca-tb-wrap .penca-tb-user { margin-bottom: .2em; }
@media (max-width: 600px) { .penca-tb-wrap { padding: .8em .7em; border-radius: 10px; } }

/* Enlaces de la Penca siempre en ámbar: algunos temas los pintan del color del fondo. */
.penca-tb-wrap a { color: var(--penca-orange-text, #C66A00); }
.penca-tb-wrap a.penca-tb-link, .penca-tb-wrap a.penca-tb-button { color: #fff; }

/* Tablero de alineación (P7.3): un casillero por lugar; libres punteados; fuera en rojo. */
.penca-tb-board { list-style: none; margin: .3em 0 .6em !important; padding: 0 !important; display: grid; gap: .35em; font-size: .9em; }
.penca-tb-slot { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .5em; padding: .3em .45em; border: 1px solid var(--penca-line); border-left: 4px solid var(--penca-orange); border-radius: 8px; background: #fff; min-height: 2.6em; }
.penca-tb-board-bench .penca-tb-slot { border-left-color: #f2b47f; }
.penca-tb-slot-main { display: flex; flex-direction: column; flex: 1 1 7em; min-width: 0; line-height: 1.25; }
.penca-tb-slot-main strong { font-weight: 600; overflow-wrap: anywhere; }
.penca-tb-slot-main small { color: #5c5c5c; }
.penca-tb-slot-main .penca-tb-role { align-self: flex-start; margin: .15em 0 0; }
.penca-tb-slot-num { flex-shrink: 0; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--penca-soft); color: #9a4b0b; font-size: .8em; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.penca-tb-slot.is-empty { border: 1px dashed #bdbdbd; border-left: 4px dashed #bdbdbd; background: transparent; color: #767676; font-style: italic; }
.penca-tb-slot.is-out { border-left-color: var(--penca-error); background: #fdf1f1; }
.penca-tb-slot.is-out strong { text-decoration: line-through; }
.penca-tb-slot.is-swap { outline: 2px solid var(--penca-orange); background: var(--penca-soft); }
.penca-tb-slot .penca-tb-mini-group, .penca-tb-slot > .penca-tb-mini { flex-shrink: 0; margin-left: auto; }
/* Etapas corridas de la vuelta. */
.penca-tb-progress { margin: 0 0 .6em; }
.penca-tb-progress-bar { display: flex; gap: 2px; }
.penca-tb-progress-bar span { flex: 1 1 0; height: 8px; border-radius: 2px; background: var(--penca-line); }
.penca-tb-progress-bar span.is-done { background: var(--penca-orange); }
.penca-tb-progress-bar span.is-annulled { background: repeating-linear-gradient(45deg, #c9c9c9 0 3px, #eee 3px 6px); }
.penca-tb-progress-bar span.is-next { background: #fff; box-shadow: inset 0 0 0 2px var(--penca-orange); }
.penca-tb-progress p { margin: .3em 0 0; font-size: .85em; }

/* Remera chica en «Mi equipo» (pedido del usuario). */
.penca-tb-avatar.penca-tb-avatar-sm { width: 1.9em; height: 1.9em; font-size: .7em; margin-right: .4em; vertical-align: middle; }
.penca-tb-jersey.penca-tb-avatar-sm { width: 26px; height: 26px; font-size: inherit; }

/* Desglose de puntaje (P7.6): podio, top 10, abandonos y bonificación remarcada. */
.penca-tb-tag { display: inline-block; margin: 0 .3em; padding: .05em .5em; border-radius: 5px; font-size: .75em; font-weight: 700; vertical-align: middle; white-space: nowrap; }
.penca-tb-tag-out { background: var(--penca-error); color: #fff; margin-left: 0; }
.penca-tb-tag-top { background: var(--penca-soft); color: #9a4b0b; }
.penca-tb-tag-bonus { background: #dcf3e2; color: #0f5223; border: 1px solid #9fd8ae; }
.penca-tb-points tr.is-podium td { background: #fff8ec; }
.penca-tb-points tr.is-abandon td.num { color: var(--penca-error); font-weight: 700; }
.penca-tb-points tr.sum td { color: #5c5c5c; }
.penca-tb-points tr.is-gc-bonus td.num { color: var(--penca-ok); font-weight: 700; }
.penca-tb-bonus { display: flex; align-items: center; gap: .6em; margin: .6em 0 0; padding: .55em .8em; border-radius: 8px; background: #dcf3e2; border-left: 5px solid var(--penca-ok); color: #0f5223; font-weight: 600; }
.penca-tb-bonus strong { font-size: 1.35em; line-height: 1; }
.penca-tb-bonus.is-none { background: #f4f4f4; border-left-color: #c9c9c9; color: #5c5c5c; font-weight: 400; }
.penca-tb-breakdown-total { display: flex; justify-content: space-between; margin: .5em 0 0; padding: .4em .4em 0; border-top: 2px solid var(--penca-dark); font-weight: 700; }
.penca-tb-total-breakdown { margin: .3em 0 0; font-size: .9em; color: #5c5c5c; }
.penca-tb-total-breakdown .penca-tb-tag { font-size: .85em; }
/* En el celular la remera ya dice el equipo: la tabla de puntos no repite su nombre. */
@media (max-width: 599px) {
	.penca-tb-points .penca-tb-team { display: none; }
	.penca-tb-points th, .penca-tb-points td { padding: .35em .25em; }
	.penca-tb-points td:first-child { width: 58%; }
	.penca-tb-points .penca-tb-tag-top { display: table; margin: .15em 0 0; }
}

/* Puntaje total al lado del puesto. */
.penca-tb-standing-pts { display: inline-block; margin-left: .5em; padding: .05em .55em; border-radius: 8px; background: var(--penca-orange-text); color: #fff; font-size: .85em; vertical-align: middle; white-space: nowrap; }

/* Evolución del puesto (P7.7): una sola línea; grilla y ejes en segundo plano. */
.penca-tb-evo-chart { position: relative; overflow: hidden; }
.penca-tb-evo-chart svg { display: block; width: 100%; height: auto; touch-action: manipulation; }
.penca-tb-evo-chart .grid { stroke: #ececec; stroke-width: 1; }
.penca-tb-evo-chart .axis { fill: #6b6b6b; font-size: 12px; }
.penca-tb-evo-chart .line { fill: none; stroke: #c9661a; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.penca-tb-evo-chart .dot { fill: #c9661a; stroke: #fff; stroke-width: 2; }
.penca-tb-evo-chart .dot.is-last, .penca-tb-evo-chart .dot.is-active { r: 6; }
.penca-tb-evo-chart .value { fill: var(--penca-dark); font-size: 13px; font-weight: 700; }
.penca-tb-evo-chart .hit { fill: transparent; cursor: pointer; }
.penca-tb-evo-tip { position: absolute; width: 170px; padding: .35em .55em; border-radius: 6px; background: var(--penca-dark); color: #fff; font-size: .8em; line-height: 1.3; pointer-events: none; }
.penca-tb-evo-tip strong, .penca-tb-evo-tip span { display: block; }
.penca-tb-evo-table summary { cursor: pointer; font-size: .9em; color: #9a4b0b; }

/* Ranking (P7.8): podio escalonado y barras de puntos detrás del líder. */
.penca-tb-podium { list-style: none; margin: .4em 0 .8em !important; padding: 0 !important; display: flex; align-items: flex-end; justify-content: center; gap: .4em; }
.penca-tb-podium-step { flex: 1 1 0; max-width: 11em; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .1em; padding: .5em .3em; border-radius: 8px 8px 0 0; background: var(--penca-soft); border-bottom: 4px solid var(--penca-orange); text-align: center; font-size: .9em; }
.penca-tb-podium-step strong { overflow-wrap: anywhere; }
.penca-tb-podium-step.is-p1 { min-height: 7.2em; }
.penca-tb-podium-step.is-p2 { min-height: 6em; }
.penca-tb-podium-step.is-p3 { min-height: 5.2em; }
.penca-tb-podium-step.is-me { background: var(--penca-orange-text); color: #fff; }
.penca-tb-podium-medal { font-size: 1.5em; line-height: 1; }
.penca-tb-rank { list-style: none; margin: .3em 0 0 !important; padding: 0 !important; font-size: .9em; }
.penca-tb-rank-row { display: grid; grid-template-columns: 2.6em minmax(5em, 9em) 1fr 3.5em; gap: .5em; align-items: center; padding: .3em .2em; border-bottom: 1px solid var(--penca-line); }
.penca-tb-rank-row.is-me { background: var(--penca-soft); font-weight: 700; }
.penca-tb-rank-pos { font-weight: 700; }
.penca-tb-rank-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.penca-tb-rank-track { display: flex; align-items: center; gap: .35em; min-width: 0; }
.penca-tb-rank-bar { display: block; height: 10px; border-radius: 0 4px 4px 0; background: #b9b9b9; flex-shrink: 1; }
.penca-tb-rank-row.is-me .penca-tb-rank-bar { background: #c9661a; }
.penca-tb-rank-gap { font-size: .85em; color: #5c5c5c; white-space: nowrap; }
.penca-tb-rank-pts { text-align: right; font-variant-numeric: tabular-nums; }
.penca-tb-rank-more { text-align: center; color: #767676; padding: .1em 0; }
@media (max-width: 599px) {
	.penca-tb-rank-row { grid-template-columns: 2.3em minmax(4em, 6.5em) 1fr 3em; gap: .35em; }
}

/* Página «Rankings». */
.penca-tb-rankings-title { margin: 0 0 .5em; }
.penca-tb-rank-current h3 { margin: 0; }
.penca-tb-rankings .penca-tb-stage summary { flex-wrap: wrap; }
.penca-tb-rankings .penca-tb-stage summary .penca-tb-muted { font-weight: 400; }
.penca-tb-rank-others p { margin: .3em 0; }
.penca-tb-login p { margin: .5em 0; }

/* Accesibilidad (P7.9): foco visible con teclado, botones táctiles de al menos 36 px y
   sin animaciones para quien pidió reducir el movimiento. */
penca-tb a:focus-visible, .penca-tb button:focus-visible, .penca-tb input:focus-visible, .penca-tb select:focus-visible, .penca-tb summary:focus-visible, .penca-tb-wrap a:focus-visible { outline: 3px solid #121711 !important; outline-offset: 2px; box-shadow: 0 0 0 5px #fff; }
@media (pointer: coarse) {
	.penca-tb-mini { min-height: 36px; min-width: 36px; padding: .3em .55em; font-size: .85em; }
	.penca-tb-add, .penca-tb-remove { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
	.penca-tb * { transition: none !important; }
}
.penca-tb-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Celular (P7.9): el resumen fijo de abajo no debe tapar media pantalla. Solo quedan los
   controles que faltan cumplir (explican por qué «Confirmar» está apagado). */
@media (max-width: 899px) {
	.penca-tb-summary .penca-tb-checks li.is-ok { display: none; }
}
@media (max-width: 399px) {
	.penca-tb-rider { gap: .4em; padding: .55em .1em; }
	.penca-tb-rider > .penca-tb-avatar { width: 2em; height: 2em; font-size: .75em; }
	.penca-tb-add, .penca-tb-remove { min-width: 4.6em; padding: .4em .45em; }
}

/* Contraste transversal para todas las vistas sobre fondo oscuro. */
.penca-tb { color: #E1E9DE; }
.penca-tb strong, .penca-tb-price, .penca-tb-rider-main strong, .penca-tb-slot-main strong,
.penca-tb-rank-name, .penca-tb-rank-pos, .penca-tb-history-main strong,
.penca-tb-history-pos strong, .penca-tb-agenda-name, .penca-tb-agenda-num,
.penca-tb-standing h3, .penca-tb-points th, .penca-tb-points td,
.penca-tb-card, .penca-tb-summary { color: #E1E9DE; }
.penca-tb-team, .penca-tb-rider-main > span, .penca-tb-slot-main small,
.penca-tb-lineup h5 small, .penca-tb-budget-legend, .penca-tb-history-main > span,
.penca-tb-history-pos span, .penca-tb-history-list h4, .penca-tb-rank-gap,
.penca-tb-rank-more, .penca-tb-agenda-name small, .penca-tb-agenda-date,
.penca-tb-points tr.sum td, .penca-tb-standing p, .penca-tb-total-breakdown { color: #A8B4A6 !important; }
.penca-tb-filters input, .penca-tb-filters select, .penca-tb-name-form input {
	background: #121711; border-color: #384235; color: #E1E9DE;
}
.penca-tb-filters input::placeholder, .penca-tb-name-form input::placeholder { color: #A8B4A6; }
.penca-tb-msg:not(.penca-tb-error):not(.penca-tb-ok) { background: #1A2119; border: 1px solid #384235; color: #E1E9DE; }
.penca-tb-badge:not(.penca-tb-badge-ok):not(.penca-tb-badge-warn):not(.penca-tb-badge-window):not(.penca-tb-badge-done) { background: #384235; color: #E1E9DE; }
.penca-tb-tag-top { background: #384235; color: #A0D293; }
.penca-tb-evo-table summary, .penca-tb-stage-pts, .penca-tb-agenda-mark { color: #FFA827; }
.penca-tb-points tr.is-podium td { background: #121711; }
.penca-tb-podium-step { background: #1A2119; color: #E1E9DE; }
.penca-tb-podium-step.is-me { background: #FFA827; color: #121711; }
.penca-tb-rank-row.is-me { background: #384235; }
.penca-tb-rank-row.is-me .penca-tb-rank-bar { background: #FFA827; }
.penca-tb-history-summary { background: #1A2119; border: 1px solid #384235; color: #E1E9DE; }
.penca-tb-link, .penca-tb-add, .penca-tb-wrap a.penca-tb-button { color: #121711 !important; }
.penca-tb-link { background: #FFA827; }

/* Superficies secundarias y controles sobre fondo oscuro. */
.penca-tb-card, .penca-tb-summary, .penca-tb-slot, .penca-tb-stage, .penca-tb-race { background: #1A2119; border-color: #384235; color: #E1E9DE; }
.penca-tb-card h3, .penca-tb-card h4, .penca-tb-card h5, .penca-tb-summary h4, .penca-tb-standing h3, .penca-tb-stage summary { color: #E1E9DE; }
.penca-tb-muted, .penca-tb-card h5, .penca-tb-slot-main small, .penca-tb-rider-main > span, .penca-tb-standing p, .penca-tb-total-breakdown { color: #A8B4A6 !important; }
.penca-tb-primary { background: #FFA827; border-color: #FFA827; color: #121711 !important; }
.penca-tb-primary:hover, .penca-tb-primary:focus-visible { background: #FFD37A; border-color: #FFD37A; color: #121711 !important; }
.penca-tb-secondary, .penca-tb-mini, .penca-tb-remove { background: #1A2119; border-color: #78BB6B; color: #78BB6B; }
.penca-tb-wrap a { color: #FFA827; }
.penca-tb-wrap .penca-tb-user { color: #A8B4A6; }

/* Inicio (P8.1): carrera abierta destacada con cuenta regresiva y botón principal. */
.penca-tb-hero { margin: 0 0 1em; padding: 1.1em 1.2em; border-radius: 12px; background: var(--penca-dark); color: #fff; border-left: 6px solid var(--penca-orange); }
.penca-tb-hero h2 { margin: .1em 0 .3em; color: #fff; }
.penca-tb-hero p { margin: .3em 0; }
.penca-tb-hero .penca-tb-muted { color: #d6d6d6; }
.penca-tb-hero-kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .8em; font-weight: 700; color: #f2b47f; }
.penca-tb-hero-countdown { font-size: 1.25em; }
.penca-tb-hero-countdown strong { color: #f2b47f; }
.penca-tb-hero-warn { padding: .4em .6em; border-radius: 6px; background: #fdf3ea; color: #7a3b08 !important; font-size: .9em; }
.penca-tb-hero.is-empty { border-left-color: #8a8a8a; }
.penca-tb-wrap a.penca-tb-cta, .penca-tb-cta { display: inline-block; margin: .6em 0 .2em; padding: .65em 1.2em; border: 1px solid var(--penca-orange); border-radius: 8px; background: var(--penca-orange); color: #121711 !important; font-weight: 700; font-size: 1.05em; text-decoration: none; transition: background-color .16s ease, border-color .16s ease, transform .16s ease; }
.penca-tb-wrap a.penca-tb-cta:hover, .penca-tb-wrap a.penca-tb-cta:focus-visible { background: #FFD37A; border-color: #FFD37A; color: #121711 !important; transform: translateY(-1px); }
.penca-tb-wrap a.penca-tb-cta.is-done { background: #78BB6B; border-color: #78BB6B; color: #121711 !important; }
.penca-tb-wrap a.penca-tb-cta.is-done:hover, .penca-tb-wrap a.penca-tb-cta.is-done:focus-visible { background: #FFD37A; border-color: #FFD37A; color: #121711 !important; }
.penca-tb-wrap a.penca-tb-cta.is-warn { background: #1A2119; border-color: var(--penca-orange); color: #FFA827 !important; box-shadow: none; }
.penca-tb-wrap a.penca-tb-cta.is-warn:hover, .penca-tb-wrap a.penca-tb-cta.is-warn:focus-visible { background: var(--penca-orange); color: #121711 !important; }
.penca-tb-card .penca-tb-cta { font-size: .9em; padding: .45em .8em; margin: .2em 0; }
.penca-tb-home-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5em; }
.penca-tb-home-top { list-style: none; margin: .4em 0 .6em !important; padding: 0 !important; }
.penca-tb-home-top li { display: flex; justify-content: space-between; gap: 1em; padding: .3em .2em; border-bottom: 1px solid var(--penca-line); }
.penca-tb-home-top li.is-me { background: var(--penca-soft); font-weight: 700; }
.penca-tb-home-links { display: flex; flex-wrap: wrap; gap: .5em; }

/* Agenda de carreras (P8.3): una ficha por carrera y sus etapas. */
.penca-tb-agenda-title { margin: 1em 0 .4em; font-size: 1.1em; }
.penca-tb-agenda-card { border-left: 4px solid var(--penca-orange); }
.penca-tb-agenda-card.is-finished { border-left-color: var(--penca-dark); }
.penca-tb-agenda-card.is-locked { border-left-color: #8a8a8a; }
.penca-tb-agenda-card h3 { margin: 0 0 .2em; }
.penca-tb-agenda-card p { margin: .3em 0; }
.penca-tb-agenda-actions { display: flex; flex-wrap: wrap; gap: .5em; align-items: center; }
.penca-tb-agenda-actions .penca-tb-cta { margin: .2em 0; font-size: .95em; padding: .5em .9em; }
.penca-tb-agenda-stages summary { cursor: pointer; font-weight: 600; color: var(--penca-orange-text); margin-top: .3em; }
.penca-tb-agenda-stages ol { list-style: none; margin: .4em 0 0 !important; padding: 0 !important; font-size: .9em; }
.penca-tb-agenda-stages li { display: grid; grid-template-columns: 2em 1fr auto 4.5em; gap: .5em; align-items: center; padding: .3em .2em; border-bottom: 1px solid var(--penca-line); }
.penca-tb-agenda-stages li.is-done { color: #5c5c5c; }
.penca-tb-agenda-stages li.is-annulled { color: #767676; text-decoration: line-through; }
.penca-tb-agenda-stages li.is-next { background: var(--penca-soft); font-weight: 700; }
.penca-tb-agenda-num { font-weight: 700; text-align: center; }
.penca-tb-agenda-name small { color: #5c5c5c; font-weight: 400; }
.penca-tb-agenda-date { white-space: nowrap; font-size: .9em; }
.penca-tb-agenda-mark { text-align: right; font-size: .8em; font-weight: 700; color: var(--penca-orange-text); }
.penca-tb-agenda-stages li.is-done .penca-tb-agenda-mark { color: var(--penca-ok); }
@media (max-width: 599px) {
	.penca-tb-agenda-stages li { grid-template-columns: 1.6em 1fr 4em; }
	.penca-tb-agenda-date { grid-column: 2; font-size: .8em; color: #5c5c5c; }
	.penca-tb-agenda-mark { grid-column: 3; grid-row: 1; }
}

/* Desempate a la vista (P8.4). */
.penca-tb-tag-tie { background: #eef2f7; color: #2d3748; font-weight: 600; }
.penca-tb-rank-track .penca-tb-tag-tie { margin: 0; font-size: .72em; }
.penca-tb-tie-note { font-size: .8em; margin-top: .5em; }

/* Historial personal (P8.5). */
.penca-tb-history-summary { display: flex; flex-wrap: wrap; gap: .4em 1.2em; margin: 0 0 .6em; padding: .6em .8em; border-radius: 8px; background: var(--penca-soft); }
.penca-tb-history-list h4 { margin: .6em 0 .1em; font-size: .95em; color: #5c5c5c; }
.penca-tb .penca-tb-history-row { flex-direction: row; align-items: center; justify-content: space-between; gap: .8em; width: 100%; cursor: pointer; }
.penca-tb-history-row.is-urgent { border-left-color: var(--penca-error); }
.penca-tb-history-main { display: flex; flex-direction: column; gap: .15em; min-width: 0; }
.penca-tb-history-main > span { font-size: .85em; color: #5c5c5c; }
.penca-tb-history-pos { display: flex; flex-direction: column; align-items: flex-end; text-align: right; white-space: nowrap; }
.penca-tb-history-pos strong { font-size: 1.15em; }
.penca-tb-history-pos span { font-size: .8em; color: #5c5c5c; }

/* Nombre de tu equipo (P8.6). */
.penca-tb-name-form { max-width: 34em; border-left: 4px solid var(--penca-orange); }
.penca-tb-name-form h3 { margin: 0 0 .4em; }
.penca-tb-name-form label { display: block; font-weight: 700; margin: .6em 0 .2em; }
.penca-tb-name-form input { width: 100%; max-width: 22em; padding: .55em .6em; border: 1px solid #8a8a8a; border-radius: 6px; font: inherit; font-size: 1.1em; }
.penca-tb-name-form .penca-tb-primary { margin-top: .4em; padding: .65em 1.2em; border-radius: 8px; font-weight: 700; }

/* Premios y patrocinadores (P8.7). */
.penca-tb-prizes h3 { margin: 0 0 .4em; }
.penca-tb-prize-list { list-style: none; margin: 0 !important; padding: 0 !important; }
.penca-tb-prize-list li { display: grid; grid-template-columns: 4.2em 1fr; gap: .6em; align-items: start; padding: .55em .65em; margin: .35em 0; border: 1px solid #384235; border-left: 3px solid var(--penca-orange); border-radius: 6px; background: #121711; color: #E1E9DE; }
.penca-tb-prize-pos { font-weight: 700; white-space: nowrap; color: #FFA827; }
.penca-tb-prize-desc { color: #E1E9DE; }
.penca-tb-prize-desc strong { display: block; color: #E1E9DE; }
.penca-tb-prize-desc small { color: #A8B4A6; }
.penca-tb-prize-desc small a, .penca-tb-prize-desc a { color: #FFA827; }
.penca-tb-prize-winner { display: block; color: #78BB6B; font-weight: 700; }
.penca-tb-sponsors li { background: #121711; border-color: #384235; color: #E1E9DE; }
.penca-tb-sponsors a { color: #FFA827; }
.penca-tb-prize-winner { display: block; margin-top: .15em; font-size: .85em; font-weight: 700; color: var(--penca-ok); }
.penca-tb-sponsors { list-style: none; margin: .4em 0 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: .8em; align-items: center; }
.penca-tb-sponsors li { padding: .6em .9em; border: 1px solid var(--penca-line); border-radius: 8px; font-weight: 700; }
.penca-tb-sponsor-logo { display: block; max-height: 56px; max-width: 160px; width: auto; height: auto; }
.penca-tb-hero-prizes { color: #f2b47f; font-weight: 600; }
.penca-tb-name-form label.penca-tb-accept { display: flex; gap: .5em; align-items: flex-start; font-weight: 400; margin: .8em 0 .4em; }
.penca-tb-accept input { margin-top: .25em; width: 1.2em; height: 1.2em; flex-shrink: 0; }

/* Botones rellenos: un solo amarillo #F5BF24 con texto negro; al pasar el mouse, apenas más
   oscuro y texto blanco. Va al final para ganarle a las reglas anteriores. */
.penca-tb-wrap a.penca-tb-link, .penca-tb-link,
.penca-tb-wrap a.penca-tb-button, .penca-tb-button,
.penca-tb-primary, .penca-tb-add,
.penca-tb-wrap a.penca-tb-cta, .penca-tb-cta {
	background: #F5BF24; border: 1px solid #F5BF24; border-radius: 8px; color: #121711 !important;
	transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.penca-tb-wrap a.penca-tb-link:hover, .penca-tb-link:hover, .penca-tb-link:focus-visible,
.penca-tb-wrap a.penca-tb-button:hover, .penca-tb-button:hover, .penca-tb-button:focus-visible,
.penca-tb-primary:hover, .penca-tb-primary:focus-visible,
.penca-tb-add:hover, .penca-tb-add:focus-visible,
.penca-tb-wrap a.penca-tb-cta:hover, .penca-tb-wrap a.penca-tb-cta:focus-visible,
.penca-tb-wrap a.penca-tb-cta.is-done:hover, .penca-tb-wrap a.penca-tb-cta.is-done:focus-visible,
.penca-tb-wrap a.penca-tb-cta.is-warn:hover, .penca-tb-wrap a.penca-tb-cta.is-warn:focus-visible {
	background: #E0A90F; border-color: #E0A90F; color: #fff !important;
}
/* Variantes que no son el botón amarillo: Listo (verde) y Falta algo (contorno). */
.penca-tb-wrap a.penca-tb-cta.is-done { background: #78BB6B; border-color: #78BB6B; }
.penca-tb-wrap a.penca-tb-cta.is-warn { background: #1A2119; border-color: #F5BF24; color: #F5BF24 !important; }