/* ══════════════════════════════════════════════════════════════════
   GANTT AREA PAGE — Materio redesign
   Variables vienen de materio-theme.css (var(--mt-*))
   ══════════════════════════════════════════════════════════════════ */

.ga-shell {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1rem 1.25rem 2rem;
    font-family: var(--mt-font);
    color: var(--mt-body-color);
    --ga-fixed:     610px;   /* col fijas en modo semana */
    --ga-fixed-dia: 470px;   /* col fijas en modo día    */
}

/* ── Breadcrumb ──────────────────────────────────────────── */
.ga-bread {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mt-muted-color);
}
.ga-bread__sep {
    width: 12px;
    height: 12px;
    color: var(--mt-muted-color);
    opacity: 0.7;
}
.ga-bread__crumb--current {
    color: var(--mt-primary);
}

/* ── Title ───────────────────────────────────────────────── */
.ga-header { margin-bottom: 0.25rem; }
.ga-title {
    font-family: var(--mt-font);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--mt-heading-color);
    line-height: 1.2;
    margin: 0 0 0.25rem;
    letter-spacing: -0.01em;
}
.ga-subtitle {
    font-size: 0.875rem;
    color: var(--mt-body-color);
    margin: 0;
}

/* ── Toolbar ─────────────────────────────────────────────── */
.ga-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ga-toolbar__left,
.ga-toolbar__right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Mode toggle */
.ga-mode {
    display: inline-flex;
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius);
    padding: 3px;
    box-shadow: var(--mt-shadow-xs);
}
.ga-mode__btn {
    background: transparent;
    border: none;
    color: var(--mt-body-color);
    font-family: var(--mt-font);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.45rem 1rem;
    border-radius: calc(var(--mt-radius) - 2px);
    cursor: pointer;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    box-shadow: none;
}
.ga-mode__btn:hover:not(.is-active) {
    color: var(--mt-heading-color);
    background: var(--mt-primary-subtle);
}
.ga-mode__btn.is-active {
    background: var(--mt-primary);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(var(--mt-primary-rgb), 0.32);
}

/* Icon button */
.ga-iconbtn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--mt-body-color);
    border-radius: var(--mt-radius);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.ga-iconbtn--bordered {
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    box-shadow: var(--mt-shadow-xs);
}
.ga-iconbtn svg { width: 16px; height: 16px; }
.ga-iconbtn:hover:not(:disabled) {
    color: var(--mt-primary);
    background: var(--mt-primary-subtle);
    border-color: var(--mt-primary);
}
.ga-iconbtn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Buttons */
.ga-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    font-family: var(--mt-font);
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: var(--mt-radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    line-height: 1;
}
.ga-btn svg { width: 14px; height: 14px; }
.ga-btn__caret { width: 11px !important; height: 11px !important; opacity: 0.7; }
.ga-btn--ghost {
    background: var(--mt-paper-bg);
    border-color: var(--mt-border-color);
    color: var(--mt-heading-color);
    box-shadow: var(--mt-shadow-xs);
}
.ga-btn--ghost:hover:not(:disabled) {
    border-color: var(--mt-primary);
    color: var(--mt-primary);
    background: var(--mt-primary-subtle);
}
.ga-btn--primary {
    background: var(--mt-primary);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(var(--mt-primary-rgb), 0.32);
}
.ga-btn--primary:hover:not(:disabled) {
    background: var(--mt-primary-hover);
    box-shadow: 0 4px 10px rgba(var(--mt-primary-rgb), 0.42);
}
.ga-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ── Stats ───────────────────────────────────────────────── */
.ga-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.ga-stat {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius);
    padding: 1.1rem 1.15rem;
    box-shadow: var(--mt-shadow-xs);
    transition: box-shadow 0.2s, border-color 0.2s;
}
.ga-stat:hover {
    box-shadow: var(--mt-shadow-sm);
    border-color: var(--mt-border-color-translucent);
}
.ga-stat__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--mt-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ga-stat__icon svg { width: 22px; height: 22px; }
.ga-stat__icon--blue   { background: rgba(var(--mt-info-rgb),    0.16); color: var(--mt-info); }
.ga-stat__icon--green  { background: rgba(var(--mt-success-rgb), 0.16); color: var(--mt-success); }
.ga-stat__icon--orange { background: rgba(var(--mt-warning-rgb), 0.18); color: var(--mt-warning); }
.ga-stat__icon--purple { background: rgba(var(--mt-primary-rgb), 0.16); color: var(--mt-primary); }
.ga-stat__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ga-stat__val {
    font-family: var(--mt-font);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--mt-heading-color);
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.ga-stat__lbl {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mt-heading-color);
    margin-top: 2px;
}
.ga-stat__hint {
    font-size: 0.7rem;
    color: var(--mt-muted-color);
    margin-top: 1px;
}

/* ── Card (table container) ──────────────────────────────── */
.ga-card {
    position: relative;
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius);
    overflow: hidden;
    box-shadow: var(--mt-shadow-xs);
}

/* ── Grid head ───────────────────────────────────────────── */
.ga-grid-head {
    display: flex;
    align-items: stretch;
    background: var(--mt-gray-50);
    border-bottom: 1px solid var(--mt-border-color);
    position: sticky;
    top: 0;
    z-index: 6;
}

/* ── Cells ───────────────────────────────────────────────── */
.ga-cell {
    display: flex;
    align-items: center;
    padding: 0.6rem 0.85rem;
    font-size: 0.685rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mt-muted-color);
    border-right: 1px solid var(--mt-border-color);
    flex-shrink: 0;
}
.ga-grid-head .ga-cell { min-height: 56px; }

.ga-cell--task     { width: 220px; }
.ga-cell--asig     { width: 140px; }
.ga-cell--date     { width:  70px; justify-content: flex-start; }
.ga-cell--estado   { width: 110px; }
.ga-cell--timeline {
    flex: 1;
    min-width: 0;
    padding: 0;
    border-right: none;
    flex-direction: column;
    align-items: stretch;
    text-transform: none;
    letter-spacing: 0;
}

/* Timeline header */
.ga-tl-month {
    flex: 0 0 auto;
    padding: 0.5rem 0.75rem 0.25rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--mt-muted-color);
    text-align: center;
    text-transform: uppercase;
}
.ga-tl-days {
    display: flex;
    flex: 1;
    border-top: 1px dashed var(--mt-border-color-translucent);
}
.ga-day-head {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.25rem;
    border-right: 1px dashed var(--mt-border-color-translucent);
    transition: background 0.15s;
}
.ga-day-head:last-child { border-right: none; }
.ga-day-head__name {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mt-muted-color);
    line-height: 1;
}
.ga-day-head__num {
    font-family: var(--mt-font);
    font-size: 1rem;
    font-weight: 700;
    color: var(--mt-body-color);
    line-height: 1.2;
    margin-top: 1px;
}
.ga-day-head.is-today .ga-day-head__name,
.ga-day-head.is-today .ga-day-head__num {
    color: var(--mt-primary);
}
.ga-day-head.is-today { background: var(--mt-primary-subtle); }

/* Timeline header — modo día */
.ga-tl-hours {
    display: flex;
    flex: 1;
    border-top: 1px dashed var(--mt-border-color-translucent);
}
.ga-hour-head {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0;
    border-right: 1px dashed var(--mt-border-color-translucent);
}
.ga-hour-head:last-child { border-right: none; }
.ga-hour-head__num {
    font-family: var(--mt-font);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--mt-body-color);
}

/* ── Grid body ───────────────────────────────────────────── */
.ga-grid-body { position: relative; }

/* Project (group) header row */
.ga-proj-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    background: var(--mt-gray-50);
    border-bottom: 1px solid var(--mt-border-color);
    padding: 0.65rem 0.95rem;
    font-family: var(--mt-font);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mt-heading-color);
    text-align: left;
    cursor: pointer;
    border-top: none;
    border-left: none;
    border-right: none;
    transition: background 0.15s;
}
.ga-proj-row:hover { background: var(--mt-primary-subtle); }
.ga-proj-row__caret {
    width: 14px;
    height: 14px;
    color: var(--mt-body-color);
    transition: transform 0.18s ease;
    flex-shrink: 0;
}
.ga-proj-row__caret.is-collapsed { transform: rotate(-90deg); }
.ga-proj-row__name {
    flex: 0 1 auto;
    color: var(--mt-heading-color);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}
.ga-proj-row__cli {
    font-size: 0.75rem;
    color: var(--mt-muted-color);
    font-weight: 500;
    flex-shrink: 0;
}
.ga-proj-row__cli::before {
    content: "•";
    margin-right: 0.5rem;
    color: var(--mt-border-color);
}
.ga-proj-row__count {
    font-size: 0.72rem;
    color: var(--mt-muted-color);
    font-weight: 600;
    background: var(--mt-body-bg);
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--mt-border-color);
    margin-left: 0.6rem;
}

/* Row separator between groups */
.ga-row-sep { height: 6px; background: transparent; }

/* Task row */
.ga-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--mt-border-color);
    min-height: 52px;
    transition: background 0.15s;
}
.ga-row:last-child { border-bottom: 1px solid var(--mt-border-color); }
.ga-row:hover { background: var(--mt-primary-subtle); }
.ga-row--active { background: rgba(var(--mt-warning-rgb), 0.04); }
.ga-row .ga-cell {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: 0.82rem;
    color: var(--mt-body-color);
}
.ga-row .ga-cell--task {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
}
.ga-task-name {
    font-family: var(--mt-font);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mt-heading-color);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
.ga-task-proj {
    font-size: 0.7rem;
    color: var(--mt-muted-color);
    font-weight: 500;
    line-height: 1.2;
}

/* Asignado A */
.ga-row .ga-cell--asig {
    gap: 0.55rem;
}
.ga-asig__name {
    font-size: 0.81rem;
    font-weight: 500;
    color: var(--mt-body-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.ga-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--mt-border-color);
    background: var(--mt-gray-100);
}
.ga-avatar--sm { width: 24px; height: 24px; border-width: 1px; }
.ga-avatar--init {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mt-primary-light);
    color: var(--mt-primary);
    font-family: var(--mt-font);
    font-size: 0.66rem;
    font-weight: 700;
    border-color: transparent;
}

/* Date cell */
.ga-row .ga-cell--date {
    color: var(--mt-body-color);
    font-size: 0.78rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* Status pill */
.ga-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.6rem;
    font-family: var(--mt-font);
    font-size: 0.68rem;
    font-weight: 600;
    border-radius: var(--mt-radius-pill);
    text-transform: capitalize;
    letter-spacing: 0.01em;
    line-height: 1.2;
    white-space: nowrap;
}
.ga-pill--completada           { background: rgba(var(--mt-success-rgb), 0.16); color: var(--mt-success); }
.ga-pill--en-progreso          { background: rgba(var(--mt-warning-rgb), 0.18); color: #b27600; }
.ga-pill--pendiente            { background: rgba(var(--mt-primary-rgb), 0.16); color: var(--mt-primary); }
.ga-pill--pausada              { background: rgba(var(--mt-secondary-rgb), 0.20); color: var(--mt-secondary); }
.ga-pill--rechazada            { background: rgba(var(--mt-danger-rgb), 0.16); color: var(--mt-danger); }
.ga-pill--pendiente-revision   { background: rgba(var(--mt-info-rgb), 0.16); color: var(--mt-info); }

/* Timeline cell */
.ga-row .ga-cell--timeline {
    position: relative;
    padding: 0;
    border-right: none;
    overflow: hidden;
}
.ga-row .ga-cell--timeline::before {
    /* Day stripes en modo semana */
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        to right,
        transparent 0,
        transparent calc(100% / 7 - 1px),
        var(--mt-border-color-translucent) calc(100% / 7 - 1px),
        var(--mt-border-color-translucent) calc(100% / 7)
    );
    pointer-events: none;
    opacity: 0.6;
}
.ga-grid--dia .ga-row .ga-cell--timeline::before {
    /* Hour stripes en modo día (12 marcas cada 2h) */
    background-image: repeating-linear-gradient(
        to right,
        transparent 0,
        transparent calc(100% / 12 - 1px),
        var(--mt-border-color-translucent) calc(100% / 12 - 1px),
        var(--mt-border-color-translucent) calc(100% / 12)
    );
}

/* Bar */
.ga-bar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 26px;
    min-width: 36px;
    border-radius: 999px;
    padding: 0 0.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    overflow: hidden;
    color: #ffffff;
    font-family: var(--mt-font);
    font-size: 0.66rem;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    z-index: 2;
    transition: filter 0.15s, transform 0.15s;
}
.ga-bar:hover { filter: brightness(1.08); }
.ga-bar__date {
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.18);
    white-space: nowrap;
    flex-shrink: 0;
}
.ga-bar__date--start { margin-right: auto; }
.ga-bar__date--end   { margin-left: auto; opacity: 0.92; }

/* Bar colors — usan colores del theme con tonos vivos */
.ga-bar--green  { background: linear-gradient(135deg, #56ca00, #4db800); }
.ga-bar--orange { background: linear-gradient(135deg, #ffb400, #ff9b00); color: #4a2e00; }
.ga-bar--purple { background: linear-gradient(135deg, #a78bfa, #8b6df0); }
.ga-bar--gray   { background: linear-gradient(135deg, #94a3b8, #64748b); }
.ga-bar--red    { background: linear-gradient(135deg, #ff4c51, #e64449); }
.ga-bar--info   { background: linear-gradient(135deg, #16b1ff, #0e9ee6); }

.ga-bar--orange .ga-bar__date { text-shadow: 0 1px 1px rgba(255,255,255,0.4); }

/* Día — barras delgadas */
.ga-cell--timeline-dia .ga-bar {
    height: 18px;
    padding: 0;
}
.ga-bar--pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.25);
    border-radius: inherit;
    animation: ga-pulse 1.6s ease-in-out infinite;
}
@keyframes ga-pulse {
    0%, 100% { opacity: 0; }
    50%      { opacity: 0.6; }
}

/* ── Today line ──────────────────────────────────────────── */
.ga-today-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--mt-danger) 0%, var(--mt-danger) 100%);
    transform: translateX(-1px);
    pointer-events: none;
    z-index: 4;
    box-shadow: 0 0 8px rgba(var(--mt-danger-rgb), 0.45);
}
.ga-today-line::before,
.ga-today-line::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: var(--mt-danger);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(var(--mt-danger-rgb), 0.6);
}
.ga-today-line::before { top: -4px; }
.ga-today-line::after  { bottom: -4px; }

.ga-today-label {
    position: absolute;
    bottom: -10px;
    transform: translate(-50%, 100%);
    background: var(--mt-danger);
    color: #ffffff;
    padding: 0.26rem 0.65rem;
    border-radius: var(--mt-radius);
    font-family: var(--mt-font);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(var(--mt-danger-rgb), 0.4);
    pointer-events: none;
}

/* ── Empty state ─────────────────────────────────────────── */
.ga-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius);
    box-shadow: var(--mt-shadow-xs);
    gap: 0.5rem;
    color: var(--mt-muted-color);
}
.ga-empty__ico { color: var(--mt-muted-color); opacity: 0.6; }
.ga-empty p {
    margin: 0.5rem 0 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--mt-heading-color);
}
.ga-empty span { font-size: 0.85rem; color: var(--mt-muted-color); }

/* ── Footer (legend + pagination) ────────────────────────── */
.ga-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius);
    box-shadow: var(--mt-shadow-xs);
}
.ga-legend {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-wrap: wrap;
}
.ga-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--mt-body-color);
}
.ga-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ga-dot--green  { background: var(--mt-success); }
.ga-dot--orange { background: var(--mt-warning); }
.ga-dot--purple { background: var(--mt-primary); }
.ga-dot--gray   { background: var(--mt-secondary); }
.ga-line {
    width: 18px;
    height: 2px;
    border-radius: 1px;
    flex-shrink: 0;
}
.ga-line--red { background: var(--mt-danger); }

.ga-pag {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.ga-pag__info {
    font-size: 0.78rem;
    color: var(--mt-muted-color);
    font-weight: 500;
}

/* ── Tooltip ─────────────────────────────────────────────── */
/* Posición fixed para escapar del overflow:hidden del .ga-card.
   Las coords left/top vienen como inline style desde el componente
   (capturadas en @onmouseenter para seguir el cursor). */
.ga-tooltip {
    position: fixed;
    top: 80px;
    left: 50%;
    width: 320px;
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius);
    box-shadow: var(--mt-shadow-lg);
    padding: 0.95rem 1.05rem;
    pointer-events: none;
    animation: ga-fade-in 0.15s ease-out;
    color: var(--mt-heading-color);
    z-index: 200;
}
.ga-tt__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
}
.ga-tt__code {
    font-family: var(--mt-font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--mt-primary);
    background: var(--mt-primary-subtle);
    border: 1px solid rgba(var(--mt-primary-rgb), 0.25);
    padding: 1px 7px;
    border-radius: 4px;
    letter-spacing: 0.04em;
}
.ga-tt__title {
    font-family: var(--mt-font);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--mt-heading-color);
    line-height: 1.35;
    word-break: break-word;
}
.ga-tt__hr {
    border: none;
    border-top: 1px solid var(--mt-border-color);
    margin: 0.55rem 0 0.4rem;
}
.ga-tt__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 3px 0;
    font-size: 0.78rem;
}
.ga-tt__row > span:first-child {
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--mt-muted-color);
    flex-shrink: 0;
}
.ga-tt__row > span:last-child {
    color: var(--mt-heading-color);
    font-weight: 500;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.ga-tt__hrs {
    color: var(--mt-primary) !important;
    font-family: var(--mt-font-mono) !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
}

@media (max-width: 800px) {
    .ga-tooltip {
        top: auto;
        bottom: 16px;
        right: 16px;
        left: 16px;
        width: auto;
    }
}

/* ── Skeleton ────────────────────────────────────────────── */
.ga-skel {
    background: linear-gradient(90deg,
        var(--mt-gray-50) 0%,
        var(--mt-gray-100) 50%,
        var(--mt-gray-50) 100%);
    background-size: 200% 100%;
    animation: ga-skel-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--mt-radius-sm);
}
@keyframes ga-skel-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.ga-skel-wrap { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.ga-skel-row { display: flex; gap: 0.75rem; align-items: center; height: 44px; }
.ga-skel-label { width: 200px; height: 22px; }
.ga-skel-track { flex: 1; height: 28px; position: relative; }
.ga-skel-bar { position: absolute; top: 0; height: 100%; }
.ga-skel--val { width: 60px; height: 26px; }

/* ── Animations ──────────────────────────────────────────── */
@keyframes ga-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .ga-shell { --ga-fixed: 460px; }
    .ga-cell--task { width: 180px; }
    .ga-cell--asig { width: 110px; }
    .ga-cell--date { width: 60px; }
    .ga-cell--estado { width: 100px; }

    .ga-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
    .ga-shell { padding: 0.75rem; --ga-fixed: 290px; --ga-fixed-dia: 290px; }
    .ga-toolbar__left, .ga-toolbar__right { width: 100%; justify-content: flex-start; }
    .ga-toolbar__right { justify-content: flex-end; }

    .ga-cell--asig, .ga-cell--date { display: none; }
    .ga-cell--task { width: 180px; }
    .ga-cell--estado { width: 110px; }

    .ga-title { font-size: 1.3rem; }
    .ga-stat__val { font-size: 1.3rem; }
    .ga-stat__icon { width: 38px; height: 38px; }
}
@media (max-width: 540px) {
    .ga-shell { --ga-fixed: 200px; --ga-fixed-dia: 200px; }
    .ga-stats { grid-template-columns: 1fr; }
    .ga-cell--estado { display: none; }
    .ga-cell--task { width: 200px; }
    .ga-tl-month { font-size: 0.6rem; }
    .ga-day-head__num { font-size: 0.85rem; }
}

/* ══════════════════════════════════════════════════════════
   DatePickerButton — popup styles (compatibilidad)
   Se duplica desde DatePickerButton.razor.css para producción
   ══════════════════════════════════════════════════════════ */

.dpb {
    position: relative;
    display: inline-flex;
    font-family: var(--mt-font);
}

.dpb__trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    color: var(--mt-heading-color);
    padding: 7px 12px 7px 10px;
    border-radius: var(--mt-radius);
    font-family: var(--mt-font);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    white-space: nowrap;
    user-select: none;
    box-shadow: var(--mt-shadow-xs);
}

.dpb__trigger:hover {
    border-color: var(--mt-primary);
    box-shadow: 0 0 0 3px var(--mt-primary-subtle), var(--mt-shadow-xs);
    background: var(--mt-paper-bg);
}

.dpb__trigger:active { transform: translateY(1px); }

.dpb__icon {
    width: 15px;
    height: 15px;
    color: var(--mt-primary);
    flex-shrink: 0;
    opacity: 0.85;
    transition: opacity 0.15s;
}

.dpb__trigger:hover .dpb__icon { opacity: 1; }

.dpb__label {
    flex: 1;
    text-transform: capitalize;
    letter-spacing: 0.02em;
}

.dpb__chevron {
    width: 11px;
    height: 8px;
    color: var(--mt-muted-color);
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.15s;
}

.dpb__chevron--up { transform: rotate(180deg); color: var(--mt-primary); }

.dpb__trigger:hover .dpb__chevron { color: var(--mt-primary); }

.dpb__overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: transparent;
}

.dpb__popup {
    position: fixed;
    z-index: 9999;
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius);
    padding: 16px;
    width: 292px;
    box-shadow: var(--mt-shadow-xl);
    animation: dpb-pop 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    color: var(--mt-heading-color);
}

@keyframes dpb-pop {
    from { opacity: 0; transform: translateY(-6px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.dpb__cal-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
}

.dpb__month-label {
    flex: 1;
    text-align: center;
    font-family: var(--mt-font);
    font-size: 0.93rem;
    font-weight: 600;
    color: var(--mt-heading-color);
    letter-spacing: 0.02em;
}

.dpb__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--mt-border-color);
    background: var(--mt-primary-subtle);
    color: var(--mt-primary);
    border-radius: var(--mt-radius);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.dpb__nav:hover {
    background: var(--mt-primary-light);
    border-color: var(--mt-primary);
}

.dpb__nav:active { transform: scale(0.92); }

.dpb__nav svg { width: 13px; height: 13px; }

.dpb__dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 4px;
}

.dpb__dow span {
    font-family: var(--mt-font);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.07em;
    color: var(--mt-muted-color);
    text-align: center;
    padding: 3px 0 5px;
    text-transform: uppercase;
}

.dpb__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
}

.dpb__day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    border: none;
    background: transparent;
    color: var(--mt-body-color);
    font-family: var(--mt-font);
    font-size: 0.78rem;
    border-radius: var(--mt-radius-sm);
    cursor: pointer;
    transition: background 0.1s ease, color 0.1s ease;
    user-select: none;
}

.dpb__day:hover:not(.dpb__day--sel):not(.dpb__day--in-week):not(.dpb__day--hw) {
    background: var(--mt-primary-subtle);
    color: var(--mt-primary);
}

.dpb__day--other { color: var(--mt-muted-color); opacity: 0.45; }

.dpb__day--other:hover {
    color: var(--mt-primary) !important;
    background: var(--mt-primary-subtle) !important;
    opacity: 0.7;
}

.dpb__day--today::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 3.5px;
    height: 3.5px;
    border-radius: 50%;
    background: var(--mt-danger);
}

.dpb__day--wknd:not(.dpb__day--sel):not(.dpb__day--in-week):not(.dpb__day--hw) {
    color: var(--mt-danger);
    opacity: 0.7;
}

.dpb__day--sel {
    background: var(--mt-primary) !important;
    color: #ffffff !important;
    font-weight: 700;
    box-shadow: 0 0 14px rgba(var(--mt-primary-rgb), 0.4);
}

.dpb__day--in-week {
    background: var(--mt-primary-light);
    color: var(--mt-primary);
    border-radius: 0;
}

.dpb__day--sel.dpb__day--strip-l { border-radius: var(--mt-radius-sm) 0 0 var(--mt-radius-sm); }

.dpb__day--in-week.dpb__day--strip-r {
    border-radius: 0 var(--mt-radius-sm) var(--mt-radius-sm) 0;
    background: var(--mt-primary-subtle);
}

.dpb__day--hw {
    background: var(--mt-primary-subtle);
    color: var(--mt-primary);
    opacity: 0.75;
    border-radius: 0;
}

.dpb__day--hw.dpb__day--strip-l {
    border-radius: var(--mt-radius-sm) 0 0 var(--mt-radius-sm);
    background: var(--mt-primary-light);
    opacity: 1;
}

.dpb__day--hw.dpb__day--strip-r { border-radius: 0 var(--mt-radius-sm) var(--mt-radius-sm) 0; }

.dpb__week-hint {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--mt-border-color);
    font-family: var(--mt-font);
    font-size: 0.65rem;
    color: var(--mt-muted-color);
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
}

@media (max-width: 480px) {
    .dpb__popup {
        width: calc(100vw - 24px) !important;
        left: 12px !important;
    }
    .dpb__day { height: 38px; font-size: 0.82rem; }
    .dpb__trigger { font-size: 0.78rem; padding: 6px 10px 6px 8px; }
}