/* 𐤌𐤀𐤓𐤕 — estilo base v0.2 */

:root {
    --bg: #0a0a0f;
    --bg-secondary: #14141c;
    --bg-tertiary: #1e1e28;
    --fg: #e5e7eb;
    --fg-dim: #94a3b8;
    --fg-faint: #475569;
    --wheel-bg: #14141c;   /* cara del reloj — cielo nocturno, oscuro en ambos temas */
    --hover-bg: #2a2a36;   /* fondo de hover de items (eventos próximos) */

    --sol: #f59e0b;
    --luna: #cbd5e1;
    --ot-rojo: #dc2626;
    --moed: #fbbf24;
    --moed-major: #f97316;
    --canonico: #92400e;

    --font-serif: "Source Serif Pro", "Crimson Text", Georgia, serif;
    --font-sans: "Inter", "Source Sans Pro", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", "Source Code Pro", monospace;
}

/* Tema claro — alta legibilidad tipo papel (para baja visión / mama).
   La cara del reloj (--wheel-bg) se mantiene oscura a propósito: es el cielo
   nocturno donde se ven las lumbreras. Solo el cromo (texto, paneles,
   controles) pasa a claro de alto contraste. */
:root[data-theme="light"] {
    --bg: #faf8f3;
    --bg-secondary: #ffffff;
    --bg-tertiary: #ece9e1;
    --fg: #1a1a1f;
    --fg-dim: #44474e;
    --fg-faint: #6b6f78;
    --moed: #b45309;
    --moed-major: #c2410c;
    --canonico: #7c3a0c;
    --wheel-bg: #f2efe6;   /* mama pidió la cara del reloj también clara */
    --hover-bg: #e3ded2;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    min-height: 100vh;
    overflow-x: hidden;
}

header {
    padding: 2rem 2rem 1rem;
    text-align: center;
    border-bottom: 1px solid var(--fg-faint);
}

header h1 {
    font-family: var(--font-serif);
    font-size: 4rem;
    color: var(--moed);
    line-height: 1;
    letter-spacing: 0.05em;
}

header .subtitle {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--fg-dim);
    margin-top: 0.5rem;
    font-size: 1.1rem;
}

header .scripture {
    font-family: var(--font-serif);
    color: var(--canonico);
    margin-top: 1rem;
    font-size: 0.95rem;
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

header .scripture .ref {
    color: var(--fg-faint);
    font-size: 0.85rem;
    font-style: normal;
}

/* Barra de navegación temporal */
#nav-bar {
    max-width: 1400px;
    margin: 1rem auto 0;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

#nav-bar .nav-section {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

#nav-bar button {
    background: var(--bg-tertiary);
    color: var(--fg);
    border: 1px solid var(--fg-faint);
    padding: 0.4rem 0.7rem;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    transition: all 0.15s;
    min-width: 2.5rem;
}

#nav-bar button:hover {
    background: var(--canonico);
    color: #ffffff;
}

#nav-bar button.is-today {
    background: var(--moed);
    color: var(--bg);
    border-color: var(--moed);
}

#nav-bar button.is-active {
    background: var(--canonico);
    color: #ffffff;
    border-color: var(--moed);
}

#nav-bar .nav-view-toggle,
#nav-bar .nav-spiral-controls {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

#nav-bar .nav-label {
    color: var(--fg-dim);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    margin: 0 0.2rem 0 0.4rem;
}

#nav-bar input[type="number"]#spiral-years {
    background: var(--bg-tertiary);
    color: var(--fg);
    border: 1px solid var(--fg-faint);
    padding: 0.4rem 0.5rem;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    width: 4rem;
    text-align: center;
}

.spiral-meta {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--fg-dim);
    background: var(--bg-tertiary);
    padding: 0.6rem 0.8rem;
    border-radius: 4px;
    line-height: 1.5;
}

.spiral-meta strong {
    color: var(--moed);
}

.cycle-summary.is-current {
    background: rgba(220, 38, 38, 0.07);
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    border-radius: 0 4px 4px 0;
}

#nav-bar input[type="date"] {
    background: var(--bg-tertiary);
    color: var(--fg);
    border: 1px solid var(--fg-faint);
    padding: 0.4rem 0.7rem;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    margin: 0 0.3rem;
}

#nav-bar input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
}

#nav-bar input[type="text"]#date-picker {
    background: var(--bg-tertiary);
    color: var(--fg);
    border: 1px solid var(--fg-faint);
    padding: 0.4rem 0.7rem;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    margin: 0 0.3rem;
    width: 12rem;
    text-align: center;
    transition: border-color 0.2s;
}

#nav-bar input[type="text"]#date-picker:focus {
    outline: none;
    border-color: var(--moed);
}

#nav-bar input[type="text"]#date-picker.invalid {
    border-color: var(--ot-rojo);
    background: rgba(220, 38, 38, 0.1);
}

#nav-bar .nav-display {
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

#nav-bar .viewport-label {
    color: var(--fg-dim);
}

#nav-bar .viewport-label strong {
    color: var(--moed);
    font-size: 1rem;
    margin-left: 0.3rem;
}

#nav-bar .relative-label {
    color: var(--fg-faint);
    text-align: right;
    margin-top: 0.2rem;
}

main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1rem;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 2rem;
}

@media (max-width: 1000px) {
    main { grid-template-columns: 1fr; }
}

#wheel-container {
    background: var(--wheel-bg);
    border-radius: 8px;
    padding: 1rem;
    aspect-ratio: 1;
    max-width: 900px;
}

/* Cinta de eventos — siempre visible, independiente de la vista del reloj */
#ribbon-wrap {
    max-width: 1400px;
    margin: 0.4rem auto 0;
    padding: 0 1rem;
}
#ribbon {
    display: block;
    width: 100%;
    height: 56px;
    background: var(--wheel-bg);
    border-radius: 6px;
    cursor: crosshair;
}
.ribbon-dot { transition: r 0.12s; }
.ribbon-dot:hover { r: 6; }

.zodiac-label {
    pointer-events: none;
    user-select: none;
}

.sky-body { transition: r 0.2s; }

#wheel {
    width: 100%;
    height: 100%;
    display: block;
}

#detail-panel {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1.5rem;
    height: fit-content;
    position: sticky;
    top: 1rem;
}

#detail-panel h2 {
    font-family: var(--font-serif);
    color: var(--moed);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

#detail-panel .placeholder {
    color: var(--fg-faint);
    text-align: center;
    font-style: italic;
    padding: 2rem 0;
}

#detail-panel .now-label {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--fg-dim);
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--fg-faint);
}

.cycle-summary {
    border-left: 3px solid var(--fg-faint);
    padding-left: 0.8rem;
    margin-bottom: 1rem;
}

.cycle-year {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--fg);
    font-weight: 600;
}

.cycle-anchor, .cycle-progress {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--fg-dim);
    margin-top: 0.2rem;
}

.next-moed {
    font-size: 0.9rem;
    color: var(--fg);
    margin-top: 0.3rem;
}

.next-moed strong {
    color: var(--moed-major);
}

#detail-panel .hebrew-name-en {
    color: var(--fg-dim);
    font-style: italic;
    margin-bottom: 1rem;
}

#detail-panel .date-line {
    font-family: var(--font-mono);
    color: var(--moed);
    font-size: 1.1rem;
}

#detail-panel .hebrew-pos {
    margin-top: 0.5rem;
    font-family: var(--font-mono);
    color: var(--fg-dim);
    font-size: 0.85rem;
}

#detail-panel .time-from-now {
    margin-top: 1rem;
    color: var(--moed-major);
    font-weight: 500;
}

#detail-panel .back-btn {
    margin-top: 1.5rem;
    background: var(--bg-tertiary);
    color: var(--fg);
    border: 1px solid var(--fg-faint);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.85rem;
}

#detail-panel .back-btn:hover {
    background: var(--canonico);
    color: var(--bg);
}

#detail-panel .hint {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--fg-faint);
    color: var(--fg-faint);
    font-size: 0.8rem;
    text-align: center;
    font-style: italic;
}

#legend, #philosophy {
    grid-column: 1 / -1;
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1rem;
}

#legend h3, #philosophy h3 {
    font-family: var(--font-serif);
    margin-bottom: 0.8rem;
    color: var(--moed);
}

#legend .explanation {
    color: var(--fg-dim);
    margin-bottom: 1rem;
    line-height: 1.6;
    font-size: 0.92rem;
}

#legend .explanation p {
    margin-bottom: 0.5rem;
}

#legend .items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--fg-dim);
}

#legend .item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

#legend .marker {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid var(--fg-faint);
}

#legend .marker.pesaj      { background: #dc2626; }
#legend .marker.shavuot    { background: #f97316; }
#legend .marker.yom_teruah { background: #fbbf24; }
#legend .marker.yom_kippur { background: #ffffff; }
#legend .marker.sukkot     { background: #fbbf24; }
#legend .marker.shemini    { background: #a855f7; }
#legend .marker.solar      { background: #f59e0b; }
#legend .marker.now        { background: transparent; border-color: #ef4444; }
#legend .marker.realnow    { background: #10b981; border-color: #ffffff; }
#legend .marker.eclipse-solar { background: #000; box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.35); }
#legend .marker.eclipse-lunar { background: #fbbf24; box-shadow: 0 0 0 3px rgba(127, 29, 29, 0.45); }
#legend .marker.sun-body     { background: #fef3c7; border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25); }
#legend .marker.mercury-body { background: #1e1e28; border-color: #a78bfa; }
#legend .marker.venus-body   { background: #1e1e28; border-color: #fbbf24; }
#legend .marker.mars-body    { background: #1e1e28; border-color: #dc2626; }
#legend .marker.jupiter-body { background: #1e1e28; border-color: #f97316; }
#legend .marker.saturn-body  { background: #1e1e28; border-color: #06b6d4; }

#philosophy .text {
    color: var(--fg-dim);
    line-height: 1.6;
    font-size: 0.92rem;
}

#philosophy .text p {
    margin-bottom: 0.8rem;
}

#philosophy strong {
    color: var(--fg);
}

footer {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--fg-faint);
    font-size: 0.8rem;
    border-top: 1px solid var(--fg-faint);
}

footer .quote {
    font-family: var(--font-serif);
    color: var(--canonico);
    font-style: italic;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

/* botón de switch idioma — esquina superior derecha del header */
.lang-toggle {
    position: absolute;
    top: 1.2rem;
    right: 1.5rem;
    background: var(--bg-tertiary);
    color: var(--moed-major);
    border: 1px solid var(--moed-major);
    padding: 0.35rem 0.7rem;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    transition: background 0.15s, color 0.15s, transform 0.1s;
    z-index: 100;
}

.lang-toggle:hover {
    background: var(--moed-major);
    color: var(--bg);
}

.lang-toggle:active { transform: scale(0.95); }

/* botón de tema claro/oscuro — a la izquierda del de idioma */
.theme-toggle {
    position: absolute;
    top: 1.2rem;
    right: 4.2rem;
    background: var(--bg-tertiary);
    color: var(--moed-major);
    border: 1px solid var(--moed-major);
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    transition: background 0.15s, color 0.15s, transform 0.1s;
    z-index: 100;
}

.theme-toggle:hover {
    background: var(--moed-major);
    color: var(--bg);
}

.theme-toggle:active { transform: scale(0.95); }

header { position: relative; }

/* próximos eventos canónicos */
.upcoming-events {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.upcoming-item {
    background: var(--bg-tertiary);
    border-left: 3px solid var(--moed-major);
    padding: 0.55rem 0.7rem;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.upcoming-item:hover {
    background: var(--hover-bg);
    border-left-color: var(--sol);
    transform: translateX(2px);
}

.upcoming-label {
    font-family: var(--font-serif);
    font-size: 0.85rem;
    color: var(--moed-major);
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.upcoming-date {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--fg);
    margin-bottom: 0.1rem;
}

.upcoming-countdown {
    font-size: 0.7rem;
    color: var(--fg-dim);
    font-style: italic;
}

.upcoming-countdown.is-now {
    color: var(--sol);
    font-style: normal;
}

.upcoming-countdown.is-now strong {
    color: var(--ot-rojo);
    letter-spacing: 0.05em;
}

.upcoming-sub {
    font-size: 0.68rem;
    color: var(--fg-faint);
    margin-top: 0.15rem;
}

/* SVG */
.moed-marker { transition: r 0.2s; }
.moed-marker:hover { r: 8; }
.year-label { font-family: var(--font-serif); font-size: 14px; font-weight: 600; }
.tiny-label { fill: var(--fg-faint); font-size: 9px; font-family: var(--font-sans); }
.connector { pointer-events: none; }
.now-indicator { pointer-events: none; }
.solar-marker { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════════════
   mart v2 — layout reloj-primero (a sangre, contextual). Rama v2-ui.
   Solo aplica bajo body.v2; el resto del CSS queda de referencia.
   ═══════════════════════════════════════════════════════════════════════ */

body.v2 {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* Barra superior mínima */
body.v2 #topbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.5rem 0.9rem;
    border-bottom: 1px solid var(--fg-faint);
    position: relative;
}
body.v2 #topbar .brand { display: flex; align-items: baseline; gap: 0.8rem; min-width: 0; }
body.v2 #topbar .mark {
    font-family: var(--font-serif);
    color: var(--moed);
    font-size: 1.4rem;
    letter-spacing: 0.05em;
    line-height: 1;
}
body.v2 #topbar .hud {
    font-size: 0.82rem;
    color: var(--fg-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.v2 #topbar .hud-k { color: var(--fg-faint); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.06em; }
body.v2 #topbar .hud-moed { color: var(--moed-major); margin: 0 0.35rem; font-family: var(--font-serif); }
body.v2 .topbar-actions { display: flex; gap: 0.4rem; flex: 0 0 auto; }
body.v2 .tb-btn {
    background: var(--bg-tertiary);
    color: var(--fg-dim);
    border: 1px solid var(--fg-faint);
    border-radius: 7px;
    min-width: 36px;
    height: 34px;
    cursor: pointer;
    font-size: 0.9rem;
    font-family: var(--font-mono);
    transition: all 0.15s;
}
body.v2 .tb-btn:hover { background: var(--canonico); color: #fff; }

/* Cinta: integral, franja fina */
body.v2 #ribbon-wrap { flex: 0 0 auto; max-width: none; width: auto; margin: 0.35rem 0.6rem 0; padding: 0; }

/* El reloj llena el escenario, siempre cuadrado y centrado.
   display:flex (no grid) para escapar del grid-template-columns viejo de <main>
   (la columna fantasma de 380px que empujaba el reloj a la izquierda). */
body.v2 #stage {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    grid-template-columns: none;
    max-width: none;
    padding: 0.4rem;
}
body.v2 #wheel-container {
    aspect-ratio: 1 / 1;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    width: auto;
    margin: 0;
    padding: 0.4rem;
    background: var(--wheel-bg);
    border-radius: 12px;
}

/* Controles: franja horizontal desplazable (Fase 4 → menú radial) */
body.v2 #nav-bar {
    flex: 0 0 auto;
    max-width: none;
    margin: 0;
    border-radius: 0;
    border-top: 1px solid var(--fg-faint);
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    gap: 0.5rem;
    scrollbar-width: thin;
}

/* El panel de detalle se reintroduce contextual en una fase posterior */
body.v2 #detail-panel { display: none; }

/* Cajones deslizantes (info; luego calculadora, detalle) */
body.v2 .drawer {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    max-height: 82vh;
    background: var(--bg-secondary);
    border-top: 1px solid var(--fg-faint);
    border-radius: 16px 16px 0 0;
    transform: translateY(101%);
    transition: transform 0.28s ease;
    z-index: 200;
    box-shadow: 0 -8px 28px rgba(0,0,0,0.45);
}
body.v2 .drawer.open { transform: translateY(0); }
body.v2 .drawer-body { overflow-y: auto; max-height: 82vh; padding: 1.4rem 1.2rem 2rem; }
body.v2 .drawer-close {
    position: absolute; top: 0.5rem; right: 0.8rem;
    background: none; border: none; color: var(--fg-dim);
    font-size: 1.7rem; line-height: 1; cursor: pointer; z-index: 1;
}
/* En v2 la leyenda/frame viven dentro del cajón, no en grid */
body.v2 #legend, body.v2 #philosophy { grid-column: auto; margin: 0 0 1.2rem; }
body.v2 #info-drawer footer { border: none; padding: 0.5rem 0 0; }

/* ═══════════════════════════════════════════════════════════════════════
   mart v2 · Fase 4 — carátula con pétalos (cockpit)
   Reloj 1:1 a máximo tamaño; controles en las 4 esquinas del cuadrado como
   núcleos-pétalo que florecen en abanico. La cinta es lo único fuera.
   ═══════════════════════════════════════════════════════════════════════ */

/* Sin header ni nav-bar en modo carátula */
body.v2.cockpit #topbar,
body.v2.cockpit #nav-bar { display: none; }

/* El panel de detalle y el HUD viven dentro del cajón de eventos (📋) */
body.v2.cockpit #events-drawer #detail-panel { display: block; }
body.v2.cockpit #events-drawer .hud {
    display: block; font-size: 1rem; color: var(--fg-dim);
    margin-bottom: 1rem; padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--fg-faint);
}
body.v2.cockpit #events-drawer .hud-k {
    color: var(--fg-faint); text-transform: uppercase;
    font-size: 0.72rem; letter-spacing: 0.06em;
}
body.v2.cockpit #events-drawer .hud-moed {
    color: var(--moed-major); font-family: var(--font-serif);
    margin: 0 0.45rem; font-size: 1.15rem;
}

/* El cuadrado del reloj = marco de posicionamiento de las esquinas */
body.v2.cockpit #wheel-container { position: relative; overflow: visible; }
#cockpit { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.ck-core, .ck-chevron, .ck-dots { pointer-events: auto; }

/* --- Núcleos-pétalo en las 4 esquinas ---
   Cada esquina cubre TODO el cuadrado (para que los items se posicionen en
   coordenadas del cuadrado) pero es transparente a clics; solo el núcleo y los
   items abiertos reciben eventos. */
.ck-corner { position: absolute; inset: 0; pointer-events: none; }
/* La esquina abierta (y todos sus tooltips) se pinta por encima de las demás
   esquinas — si no, la esquina siguiente en el DOM tapa este tooltip. */
.ck-corner.open { z-index: 30; }

.ck-core {
    position: absolute; width: 42px; height: 42px; padding: 6px;
    border-radius: 50%; display: grid; place-items: center;
    border: 1px solid color-mix(in srgb, var(--gc) 55%, transparent);
    background: rgba(10,10,15,0.5); cursor: pointer;
    transition: transform 0.15s, background 0.15s;
}
.ck-tl .ck-core { top: 8px;    left: 8px; }
.ck-tr .ck-core { top: 8px;    right: 8px; }
.ck-bl .ck-core { bottom: 8px; left: 8px; }
.ck-br .ck-core { bottom: 8px; right: 8px; }
.ck-core:hover { background: rgba(10,10,15,0.9); transform: scale(1.08); }
.ck-corner.open .ck-core {
    background: color-mix(in srgb, var(--gc) 30%, rgba(10,10,15,0.9));
    transform: scale(0.92);
}

/* --- Items del abanico: ocultos hasta florecer --- */
.ck-item {
    position: absolute; width: 38px; height: 38px; margin: -19px 0 0 -19px;
    border-radius: 50%; display: grid; place-items: center;
    border: 1.4px solid var(--gc); background: var(--bg-secondary); color: var(--gc);
    font-size: 0.95rem; font-family: var(--font-mono); cursor: pointer;
    opacity: 0; transform: translate(0, 0) scale(0.2); pointer-events: none;
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.25);
    z-index: 6;
}
/* Fly-out: nace en el núcleo (translate 0) y se despliega a --dx/--dy, escalonado */
.ck-corner.open .ck-item {
    opacity: 1; pointer-events: auto;
    transform: translate(var(--dx, 0), var(--dy, 0)) scale(1);
    transition-delay: calc(var(--i, 0) * 22ms);
}
.ck-item svg { display: block; }
.ck-item:hover { background: var(--gc); color: #0a0a0f; }
.ck-item.on {
    background: var(--gc); color: #0a0a0f;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--gc) 40%, transparent);
}

/* --- Chevrons de vista (flotan translúcidos en el espacio muerto lateral bajo).
   A media altura el círculo toca el borde (tangente); más abajo ya se curvó
   hacia adentro y deja hueco libre de anillos. --- */
.ck-chevron {
    position: absolute; top: 74%; transform: translateY(-50%);
    width: 34px; height: 48px; border-radius: 8px;
    background: rgba(10,10,15,0.4); border: 1px solid var(--fg-faint);
    color: var(--fg-dim); font-size: 1.5rem; cursor: pointer;
    display: grid; place-items: center; opacity: 0.55; transition: opacity 0.15s;
}
.ck-chevron:hover { opacity: 1; }
.ck-chevron-left  { left: 2px; }
.ck-chevron-right { right: 2px; }

/* --- Dots de vista --- */
.ck-dots {
    position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
    display: flex; gap: 8px;
}
.ck-dot {
    width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%;
    background: var(--fg-faint); cursor: pointer; opacity: 0.5; transition: all 0.15s;
}
.ck-dot.active { background: var(--canonico); opacity: 1; width: 10px; height: 10px; }

/* --- Zoom sobre la cinta --- */
body.v2.cockpit #ribbon-wrap { position: relative; }
#ck-ribbon-zoom {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    display: flex; gap: 5px;
}
.ck-zoom {
    width: 26px; height: 26px; border-radius: 6px;
    border: 1px solid var(--fg-faint); background: var(--bg-tertiary);
    color: var(--fg-dim); cursor: pointer; font-size: 1rem; line-height: 1;
}
.ck-zoom:hover { background: var(--canonico); color: #fff; }

/* --- Tooltip del cockpit: UN solo elemento, hijo de #wheel-container (fuera de
   cualquier transform), posicionado por JS. Escapa del contexto de apilamiento
   de los pétalos y contiene siempre su texto. --- */
#ck-tip {
    position: absolute; z-index: 100; pointer-events: none;
    background: var(--bg-secondary); color: var(--fg, #e5e7eb);
    border: 1px solid var(--fg-faint); border-radius: 6px;
    padding: 5px 9px; font-size: 0.72rem; line-height: 1.35;
    font-family: 'Inter', system-ui, sans-serif;
    max-width: 200px; text-align: center;
    box-shadow: 0 3px 12px rgba(0,0,0,0.5);
    opacity: 0; transition: opacity 0.12s ease;
}
#ck-tip.show { opacity: 1; }

/* --- Apaisado: el ribbon pasa a franja vertical al lado (el reloj no se reduce);
   la cinta sigue siendo lo único fuera del cuadrado, ahora a la derecha. --- */
@media (min-aspect-ratio: 1/1) {
    body.v2.cockpit { flex-direction: row; }
    body.v2.cockpit #stage { flex: 1 1 auto; min-width: 0; }
    body.v2.cockpit #ribbon-wrap {
        flex: 0 0 auto; width: 66px; height: auto;
        margin: 0.6rem 0.6rem 0.6rem 0; padding: 0;
        display: flex; align-items: stretch;
    }
    body.v2.cockpit #ribbon { width: 66px; height: 100%; }
    body.v2.cockpit #ck-ribbon-zoom {
        top: auto; bottom: 8px; right: 50%; transform: translateX(50%);
        flex-direction: column; gap: 5px;
    }
}