/* css/main/evolution-chart-and-calendar.css — part 9/30 of the app styles (was css/main.css; loaded in this order by index.html). */
      /* ⛔ `.empty`, `.empty-icon` and `.empty-txt` WERE RETIRED on 2026-08-20.
         They were the fourth family of empty state: `.empty-icon` was sized
         for a 40 px EMOJI (🛡️ 🔍 🛒 📝 📋 💳), which is drawn differently on each
         system and which rule §3 forbids as an interface icon. Its 18 uses
         are migrated to `.empty-state`. No compatibility layer: if the
         class reappears it paints nothing and `unit-clases-css-existen` catches it. */
      canvas#evoChart {
        display: block;
        width: 100%;
        max-width: 100%;
      }
      .evo-canvas-wrap {
        padding: 16px;
        position: relative;
      }
      .no-chart {
        text-align: center;
        padding: 40px 16px;
        color: var(--muted);
        font-size: 13px;
      }
      .evo-line-btns {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        padding: 0 16px 8px;
      }
      .evo-nav-pair {
        display: flex;
        gap: 10px;
        margin-top: 6px;
      }
      .evo-nav-btn {
        flex: 1;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 10px;
        color: var(--text);
        padding: 10px 12px;
        font-family: "Inter", sans-serif;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.15s;
      }
      .evo-nav-btn:active { background: var(--hover-strong); }
      .evo-nav-btn:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }
      .evo-mod-title {
        font-family: "Oswald", sans-serif;
        font-size: 18px;
        color: var(--text);
        letter-spacing: 1px;
        margin-bottom: 6px;
        text-align: center;
      }
      .evo-subtitle {
        text-align: center;
        padding: 4px 16px 2px;
        font-size: 12px;
        color: var(--muted);
      }
      .chart-legend {
        display: flex;
        gap: 12px;
        justify-content: center;
        margin-top: 6px;
        flex-wrap: wrap;
      }
      .chart-legend-item {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        color: var(--muted);
      }
      .chart-legend-dot {
        width: 10px;
        height: 10px;
        border-radius: 6px;
        display: inline-block;
        flex-shrink: 0;
      }
      .chart-legend-dot.is-train { background: var(--success); }
      .chart-legend-dot.is-comp { background: var(--danger); }
      .chart-legend-dot.is-partial-prec { background: var(--filter-prec-fg); }
      .chart-legend-dot.is-partial-plato { background: var(--accent); }
      .evo-section-divider {
        border-top: 1px solid var(--border);
        margin: 2px 16px 0;
      }
      .evo-line-btn {
        padding: 5px 12px;
        border-radius: 14px;
        border: 2px solid;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        background: transparent;
        transition: all 0.15s;
        white-space: nowrap;
      }
      .cal-nav {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
      }
      .cal-nav-arrow {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 10px;
        color: var(--text);
        cursor: pointer;
        transition: background 0.15s, border-color 0.15s;
      }
      .cal-nav-arrow svg { width: 22px; height: 22px; }
      .cal-nav-arrow:active { background: var(--hover-strong); }
      .cal-nav-arrow:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }
      .cal-nav-arrow[disabled],
      .cal-nav-arrow:disabled {
        opacity: 0.3;
        cursor: not-allowed;
      }
      .cal-today-btn {
        flex: 0 0 auto;
        height: 44px;
        padding: 0 16px;
        background: var(--accent);
        color: var(--accent-fg);
        border: none;
        border-radius: 10px;
        font-family: "Oswald", sans-serif;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        cursor: pointer;
        transition: opacity 0.15s;
      }
      .cal-today-btn:active { opacity: 0.85; }
      .cal-today-btn:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }
      .cal-month-label {
        flex: 1;
        text-align: center;
        font-family: "Oswald", sans-serif;
        font-size: 20px;
        color: var(--accent);
        letter-spacing: 1px;
      }
      .cal-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        padding: 14px 12px 16px;
      }
      .cal-stat-box {
        background: var(--card);
        border-radius: 10px;
        padding: 14px 6px 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
      }
      .cal-stat-num {
        font-family: "Oswald", sans-serif;
        font-size: 28px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.5px;
      }
      .cal-stat-num.is-comp { color: #e87b6e; }
      .cal-stat-num.is-train { color: #6dcc8e; }
      .cal-stat-num.is-partial { color: #e0e0e0; }
      .cal-stat-label {
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.6px;
        color: var(--muted);
        text-transform: uppercase;
        text-align: center;
        line-height: 1.2;
      }
      .cal-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 3px;
        padding: 0 12px 12px;
      }
      .cal-dow {
        font-size: 10px;
        font-weight: 600;
        text-align: center;
        color: var(--muted);
        padding: 4px 0;
        text-transform: uppercase;
      }
      .cal-day {
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        cursor: default;
      }
      .cal-day.has-entry {
        background: rgba(192, 57, 43, 0.25);
        color: #e87b6e;
        font-weight: 700;
        cursor: pointer;
        border: 1px solid rgba(192, 57, 43, 0.4);
      }
      .cal-day.has-entry:active {
        background: rgba(192, 57, 43, 0.45);
      }
      .cal-day.train-only {
        background: rgba(39, 174, 96, 0.2);
        color: #6dcc8e;
        font-weight: 700;
        cursor: pointer;
        border: 1px solid rgba(39, 174, 96, 0.4);
      }
      .cal-day.train-only:active {
        background: rgba(39, 174, 96, 0.4);
      }
      .cal-day.today {
        border: 1.5px solid var(--accent);
        color: var(--accent);
      }
      .cal-day.other-month {
        opacity: 0.25;
      }
      .cal-day.partial-only {
        background: rgba(224, 224, 224, 0.12);
        color: #e0e0e0;
        font-weight: 700;
        cursor: pointer;
        border: 1px solid rgba(224, 224, 224, 0.25);
      }
      .cal-day.partial-only:active {
        background: rgba(224, 224, 224, 0.3);
      }
      .cal-day:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 1px;
      }
      .log-entry.is-partial {
        border-left: 4px solid #e0e0e0 !important;
      }
      .log-entry.is-partial::after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: #e0e0e0;
      }
      .log-entry.is-partial-plato {
        border-left: 4px solid #c8a84b !important;
      }
      .log-entry.is-partial-plato::after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: #c8a84b;
      }
      .chip:disabled {
        opacity: 0.35;
        cursor: not-allowed;
        pointer-events: none;
      }