@import url('../bandejas/bandejas.css');
/* Fonts loaded globally via App.razor (Inter) */

/* ================================================================
   TAREAS — MATERIO THEME  ·  Orbis Mentor
   JetBrains Mono + Space Grotesk  ·  Primary var(--mt-primary) accent
   Shell: var(--mt-body-bg) background  ·  Cards: white  ·  Headers: dark floating
================================================================ */

/* ── Neutralize .ml-content padding when hosting a tareas shell ── */
.ml-content:has(:is(.mt-shell, .pl-shell, .pr-shell, .ta-shell, .te-shell)) {
    padding: 0 !important;
    background: var(--mt-body-bg) !important;
}

/* ── SHELL — background ── */
:is(.mt-shell, .pl-shell, .pr-shell, .ta-shell, .te-shell) {
    min-height: 100% !important;
    background: var(--mt-body-bg) !important;
    color: var(--mt-heading-color) !important;
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
    padding: 1.25rem !important;
}

:is(.mt-shell, .pl-shell, .pr-shell, .ta-shell, .te-shell) * {
    box-sizing: border-box;
}

/* ── HEADER — Materio: clean, white, no dark gradient ── */
:is(.mt-header, .pl-header, .pr-header, .ta-header, .te-header) {
    max-width: 1440px !important;
    margin: 0 auto 1.25rem !important;
    padding: 1.25rem 1.5rem 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--mt-heading-color) !important;
    position: relative !important;
    overflow: visible !important;
}

.mt-header,
.ta-header {
    overflow: visible !important;
}

/* Remove decorative pseudo-elements */
:is(.mt-header, .pl-header, .pr-header, .ta-header, .te-header)::before,
:is(.mt-header, .pl-header, .pr-header, .ta-header, .te-header)::after {
    display: none !important;
}

/* ── PAGE TITLES — Materio: solid dark text ── */
:is(.mt-title, .pl-title, .pr-title, .ta-title, .te-title) {
    margin: 0 !important;
    font-size: clamp(1.25rem, 3vw, 1.5rem) !important;
    font-weight: var(--mt-font-weight-sb) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.25 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--mt-heading-color) !important;
    background-clip: unset !important;
    color: var(--mt-heading-color) !important;
}

/* ── LABELS — Materio: subtle muted label ── */
:is(.mt-label, .pl-label, .pr-label, .ta-label, .te-label) {
    display: block !important;
    margin: 0 0 .15rem !important;
    color: var(--mt-muted-color) !important;
    font-size: var(--mt-font-size-xs) !important;
    font-weight: 500 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    font-family: var(--mt-font) !important;
}

/* ── HEADER INTERIOR — z-index above pseudo-elements ── */
:is(.mt-header__grid, .pl-header__top, .ta-header__top, .te-header__top) {
    position: relative !important;
    z-index: 1 !important;
}

/* ── KPI STATS — Materio card style ── */
:is(.mt-stats, .ta-stats, .te-kpis) {
    position: relative !important;
    z-index: 1 !important;
}

:is(.mt-stat, .ta-stat, .te-kpi) {
    background: var(--mt-paper-bg) !important;
    backdrop-filter: none !important;
    border: 0 !important;
    border-radius: var(--mt-radius) !important;
    box-shadow: var(--mt-shadow-xs) !important;
    transition: box-shadow .2s !important;
    overflow: visible !important;
}

:is(.mt-stat, .ta-stat, .te-kpi):hover {
    box-shadow: var(--mt-shadow-sm) !important;
    transform: none !important;
}

:is(.mt-stat__val, .ta-stat__val, .te-kpi__val) {
    color: var(--mt-heading-color) !important;
    font-family: var(--mt-font) !important;
    font-size: 1.375rem !important;
    font-weight: var(--mt-font-weight-sb) !important;
    line-height: 1.1 !important;
}

:is(.mt-stat__lbl, .ta-stat__lbl, .te-kpi__lbl) {
    color: var(--mt-muted-color) !important;
    font-size: var(--mt-font-size-xs) !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    font-family: var(--mt-font) !important;
    margin-top: .2rem !important;
}

/* Semantic stat color overrides (on dark bg) */
.mt-stat--ok .mt-stat__val,
.ta-stat--ok .ta-stat__val,
.te-kpi--ok .te-kpi__val   { color: var(--mt-success) !important; }

.mt-stat--warn .mt-stat__val,
.ta-stat--warn .ta-stat__val,
.te-kpi--warn .te-kpi__val  { color: var(--mt-warning) !important; }

.mt-stat--accent .mt-stat__val,
.mt-stat--info .mt-stat__val,
.ta-stat--review .ta-stat__val,
.te-kpi--time .te-kpi__val,
.te-kpi--extra .te-kpi__val { color: var(--mt-primary) !important; }

.mt-stat--accent .mt-stat__val { color: #C084FC !important; }

.ta-stat--danger .ta-stat__val,
.te-kpi--danger .te-kpi__val { color: var(--mt-danger) !important; }

.te-kpi--muted .te-kpi__val { color: var(--mt-muted-color) !important; }

/* ── STAT STRIP (mt-stats horizontal row inside header) ── */
.mt-stat {
    border-radius: 0 !important;
}
.mt-stat:first-child { border-radius: 0 0 0 0 !important; }

/* ── CONTENT BODY CONSTRAINT ── */
:is(.mt-body, .pl-body, .ta-body, .te-body, .pr-section, .mt-live-timer) {
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

:is(.pr-tabs) {
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ── LIVE TIMER — stays dark (active session) ── */
.mt-live-timer {
    background: linear-gradient(135deg, #050E1E 0%, #081524 100%) !important;
    border: 1px solid rgba(var(--mt-warning-rgb, 245,158,11),.35) !important;
    border-left: 5px solid var(--mt-warning) !important;
    border-radius: var(--mt-radius) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.25) !important;
    color: var(--mt-gray-200) !important;
    animation: t-pulse-border 2.5s ease-in-out infinite !important;
    margin-bottom: 1.5rem !important;
}

.mt-live-timer--paused {
    background: linear-gradient(135deg, #050E1E 0%, #081524 100%) !important;
    border-color: rgba(168,85,247,.35) !important;
    border-left-color: #A855F7 !important;
    animation: none !important;
}

.mt-live-timer__label {
    color: var(--mt-warning) !important;
    font-family: var(--mt-font) !important;
    font-size: .65rem !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
}

.mt-live-timer__label--paused { color: #C084FC !important; }

.mt-live-timer__name {
    color: var(--mt-gray-200) !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
}

.mt-live-timer__project { color: var(--mt-gray-700) !important; font-size: .75rem !important; }

.mt-live-timer__time {
    color: var(--mt-warning) !important;
    font-family: var(--mt-font) !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    text-shadow: 0 0 20px rgba(245,158,11,.5) !important;
}

.mt-live-timer__time--paused {
    color: #C084FC !important;
    font-size: 1.4rem !important;
    text-shadow: none !important;
}

.mt-live-timer__est {
    color: var(--mt-gray-700) !important;
    font-family: var(--mt-font) !important;
    font-size: .7rem !important;
}

.mt-live-timer__pulse {
    background: var(--mt-warning) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 8px rgba(245,158,11,.6) !important;
    animation: t-blink 1s ease-in-out infinite !important;
}

.mt-live-timer__pulse--paused {
    background: #A855F7 !important;
    box-shadow: none !important;
    animation: none !important;
}

/* ── TABS ── */
:is(.pr-tabs, .ta-tabs, .te-tabs) {
    padding: .35rem !important;
    background: var(--mt-paper-bg) !important;
    border: 1px solid var(--mt-border-color) !important;
    border-radius: var(--mt-radius) !important;
    box-shadow: 0 1px 3px rgba(var(--mt-dark-rgb),.07) !important;
    margin-bottom: 1rem !important;
}

:is(.pr-tab, .ta-tab, .te-tab) {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--mt-radius) !important;
    color: var(--mt-muted-color) !important;
    font-family: var(--mt-font) !important;
    font-size: var(--mt-font-size-sm) !important;
    font-weight: var(--mt-font-weight-md) !important;
    padding: .45rem 1.1rem !important;
    cursor: pointer !important;
    transition: all .18s !important;
}

:is(.pr-tab, .ta-tab, .te-tab):hover:not(.is-active) {
    background: rgba(var(--mt-primary-rgb),.08) !important;
    border-color: rgba(var(--mt-primary-rgb),.2) !important;
    color: var(--mt-primary) !important;
    transform: none !important;
}

:is(.pr-tab, .ta-tab, .te-tab).is-active {
    background: var(--mt-primary) !important;
    border-color: var(--mt-primary) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    box-shadow: 0 0 16px rgba(var(--mt-primary-rgb),.35) !important;
    transform: none !important;
}

/* ── DATE NAV (header date navigator) ── */
.mt-date-nav {
    background: var(--mt-paper-bg) !important;
    border: 1px solid var(--mt-border-color) !important;
    border-radius: var(--mt-radius) !important;
    padding: 6px 10px !important;
}

.mt-date-nav,
.gt-date-nav,
.mt-header__grid,
.ta-header__top,
.gt-controls {
    position: relative !important;
    z-index: 30 !important;
    overflow: visible !important;
}

.mt-date-label {
    color: var(--mt-heading-color) !important;
    font-size: .85rem !important;
    font-weight: var(--mt-font-weight-md) !important;
    text-transform: capitalize !important;
    font-family: var(--mt-font) !important;
}

.mt-dbn {
    background: none !important;
    border: none !important;
    color: rgba(255,255,255,.45) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    padding: 4px 6px !important;
    transition: color .18s, background .18s !important;
    box-shadow: none !important;
}

.mt-dbn:hover:not(:disabled) {
    color: var(--mt-primary) !important;
    background: rgba(var(--mt-primary-rgb),.1) !important;
    transform: none !important;
}

.mt-dbn--today {
    background: var(--mt-primary) !important;
    color: #fff !important;
    font-size: .65rem !important;
    font-weight: 700 !important;
    font-family: var(--mt-font) !important;
    border-radius: 6px !important;
    border: none !important;
    box-shadow: 0 0 12px rgba(var(--mt-primary-rgb),.3) !important;
}

/* ── DEPENDENCY TREE ── */
.mt-task-slot--dependent::before {
    background: linear-gradient(to bottom, rgba(var(--mt-primary-rgb),.35), rgba(var(--mt-primary-rgb),.1)) !important;
}

.mt-dep-chain::before {
    background: rgba(var(--mt-primary-rgb),.35) !important;
}

.mt-dep-chain__icon { color: var(--mt-primary) !important; }

.mt-dep-chain__label {
    color: var(--mt-muted-color) !important;
}

/* Chip base */
.mt-dep-chip {
    transition: box-shadow .15s !important;
}

/* By dependency status */
.mt-dep-chip--pendiente {
    background: rgba(148,163,184,.08) !important;
    color: var(--mt-gray-700) !important;
    border-color: rgba(148,163,184,.25) !important;
}
.mt-dep-chip--en_progreso {
    background: rgba(245,158,11,.08) !important;
    color: #D97706 !important;
    border-color: rgba(245,158,11,.3) !important;
}
.mt-dep-chip--pausada {
    background: rgba(168,85,247,.08) !important;
    color: #9333EA !important;
    border-color: rgba(168,85,247,.25) !important;
}
.mt-dep-chip--pendiente_revision {
    background: rgba(var(--mt-primary-rgb),.08) !important;
    color: #0891B2 !important;
    border-color: rgba(var(--mt-primary-rgb),.3) !important;
}
.mt-dep-chip--completada {
    background: rgba(16,185,129,.08) !important;
    color: #059669 !important;
    border-color: rgba(16,185,129,.25) !important;
}
.mt-dep-chip--rechazada {
    background: rgba(239,68,68,.08) !important;
    color: #DC2626 !important;
    border-color: rgba(239,68,68,.25) !important;
}

.mt-dep-chip__check { font-weight: 800 !important; }

.mt-dep-obs__avatar {
    background: linear-gradient(135deg, var(--mt-primary), #A855F7) !important;
    color: var(--mt-sidebar-bg2) !important;
}

.mt-dep-obs__name   { color: #D97706 !important; font-weight: 600 !important; }
.mt-dep-obs__text   { color: #D97706 !important; }
.mt-dep-obs__text strong { color: #B45309 !important; }

/* Dependent card: subtle left shadow to reinforce connection */
.mt-card--dependent {
    border-left-color: rgba(var(--mt-primary-rgb),.4) !important;
}

/* ── TASK CARDS (mt-card — white on light bg) ── */
.mt-card {
    background: var(--mt-paper-bg) !important;
    border: 1px solid var(--mt-border-color) !important;
    border-radius: var(--mt-radius) !important;
    box-shadow: 0 1px 3px rgba(var(--mt-dark-rgb),.06), 0 4px 16px rgba(var(--mt-dark-rgb),.08) !important;
    transition: transform .18s, box-shadow .18s, border-color .18s !important;
}

.mt-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 20px rgba(var(--mt-dark-rgb),.12), 0 0 0 1px rgba(var(--mt-primary-rgb),.25) !important;
    border-color: rgba(var(--mt-primary-rgb),.35) !important;
}

/* Name bar */
.mt-card__name  {
    color: var(--mt-heading-color) !important;
    font-size: .97rem !important;
    font-weight: 700 !important;
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
}
.mt-card__codigo {
    color: var(--mt-primary) !important;
    background: rgba(var(--mt-primary-rgb),.1) !important;
    border-color: rgba(var(--mt-primary-rgb),.25) !important;
}

/* Info bar / time block */
.mt-card__timeused      { color: var(--mt-primary) !important; }
.mt-card__timeused--over { color: var(--mt-danger) !important; }
.mt-card__timesep       { color: var(--mt-gray-300) !important; }
.mt-card__timeest       { color: var(--mt-muted-color) !important; }
.mt-card__timebar       { background: rgba(var(--mt-primary-rgb),.08) !important; }

/* Footer bar */
.mt-card__footbar {
    border-top: 1px solid var(--mt-gray-50) !important;
    padding-top: 7px !important;
    margin-top: 1px !important;
}
.mt-card__meta    { color: var(--mt-muted-color) !important; font-size: .72rem !important; }
.mt-card__meta em { color: var(--mt-primary) !important; font-style: normal !important; }
.mt-card__timerange {
    color: var(--mt-body-color) !important;
    background: var(--mt-body-bg) !important;
    border: 1px solid var(--mt-border-color) !important;
    font-family: var(--mt-font) !important;
    font-size: .65rem !important;
    font-weight: 600 !important;
}

/* Alerts */
.mt-card__obs {
    border-radius: 6px !important;
    padding: 4px 8px !important;
    font-size: .75rem !important;
}
.mt-card__obs--rejected {
    background: rgba(239,68,68,.07) !important;
    color: #DC2626 !important;
    border: 1px solid rgba(239,68,68,.2) !important;
}
.mt-card__obs--blocked {
    background: rgba(245,158,11,.08) !important;
    color: #D97706 !important;
    border: 1px solid rgba(245,158,11,.2) !important;
}

/* Task card left color strips */
.mt-card__strip--pendiente          { background: #BACDE8 !important; }
.mt-card__strip--en_progreso        { background: var(--mt-warning) !important; box-shadow: 0 0 8px rgba(245,158,11,.4) !important; }
.mt-card__strip--pausada            { background: #A855F7 !important; }
.mt-card__strip--pendiente_revision { background: var(--mt-primary) !important; box-shadow: 0 0 8px rgba(var(--mt-primary-rgb),.35) !important; }
.mt-card__strip--completada         { background: #10B981 !important; }
.mt-card__strip--rechazada          { background: #EF4444 !important; }

/* ok/over time indicators */
.mt-ok   { color: #059669 !important; }
.mt-over { color: #DC2626 !important; }

/* ── BADGES ── */
:is(.mt-badge, .pl-badge, .pr-badge, .ta-badge, .te-badge) {
    font-family: var(--mt-font) !important;
    font-size: .62rem !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
}

/* Pendiente */
:is(.mt-badge--pendiente, .pl-badge--off, .pr-badge--off,
    .ta-badge--pendiente, .te-badge--pendiente) {
    background: rgba(120,140,180,.12) !important;
    color: var(--mt-body-color) !important;
    border-color: rgba(120,140,180,.3) !important;
}

/* En progreso */
:is(.mt-badge--en_progreso, .ta-badge--en_progreso, .te-badge--en_progreso) {
    background: rgba(245,158,11,.1) !important;
    color: #D97706 !important;
    border-color: rgba(245,158,11,.3) !important;
}

/* Pausada */
:is(.mt-badge--pausada, .ta-badge--pausada) {
    background: rgba(168,85,247,.1) !important;
    color: #7C3AED !important;
    border-color: rgba(168,85,247,.3) !important;
}

/* En revision */
:is(.mt-badge--pendiente_revision, .ta-badge--pendiente_revision) {
    background: rgba(var(--mt-primary-rgb),.1) !important;
    color: var(--mt-primary) !important;
    border-color: rgba(var(--mt-primary-rgb),.3) !important;
}

/* Completada */
:is(.mt-badge--completada, .ta-badge--completada, .te-badge--completada, .pl-badge--ok, .pr-badge--ok) {
    background: rgba(16,185,129,.1) !important;
    color: #059669 !important;
    border-color: rgba(16,185,129,.3) !important;
}

/* Rechazada */
:is(.mt-badge--rechazada, .ta-badge--rechazada, .te-badge--rechazada) {
    background: rgba(239,68,68,.08) !important;
    color: #DC2626 !important;
    border-color: rgba(239,68,68,.25) !important;
}

/* Extra */
.mt-badge--extra {
    background: rgba(245,158,11,.1) !important;
    color: #D97706 !important;
    border-color: rgba(245,158,11,.3) !important;
}

/* Priority badges */
.mt-badge--prio-alta  {
    background: rgba(239,68,68,.08) !important;
    color: #DC2626 !important;
    border-color: rgba(239,68,68,.25) !important;
}
.mt-badge--prio-media {
    background: rgba(245,158,11,.1) !important;
    color: #D97706 !important;
    border-color: rgba(245,158,11,.25) !important;
}
.mt-badge--prio-baja  {
    background: rgba(16,185,129,.1) !important;
    color: #059669 !important;
    border-color: rgba(16,185,129,.25) !important;
}

/* SLA / type badge */
.pr-badge--type, .pl-badge--type {
    background: rgba(var(--mt-primary-rgb),.1) !important;
    color: #0284C7 !important;
    border-color: rgba(var(--mt-primary-rgb),.3) !important;
}

/* ── CHIPS (ta-chip) ── */
.ta-chip {
    font-family: var(--mt-font) !important;
    font-size: .65rem !important;
    font-weight: 600 !important;
    letter-spacing: .06em !important;
    border-radius: 4px !important;
    border: 1px solid transparent !important;
}
.ta-chip--ok     { background: rgba(16,185,129,.1) !important; color: #059669 !important; border-color: rgba(16,185,129,.3) !important; }
.ta-chip--warn   { background: rgba(245,158,11,.1) !important; color: #D97706 !important; border-color: rgba(245,158,11,.3) !important; }
.ta-chip--muted  { background: rgba(120,140,180,.1) !important; color: var(--mt-body-color) !important; border-color: rgba(120,140,180,.25) !important; }
.ta-chip--review { background: rgba(var(--mt-primary-rgb),.1) !important; color: var(--mt-primary) !important; border-color: rgba(var(--mt-primary-rgb),.3) !important; }

/* ── ALERT BANNER (TAR-015) ── */
.ta-alert-banner {
    max-width: 1440px !important;
    margin: 0 auto 1rem !important;
}
.ta-alert-banner--warn {
    background: rgba(245,158,11,.1) !important;
    border: 1px solid rgba(245,158,11,.35) !important;
    color: var(--mt-warning) !important;
}

/* ── VACATION LIST (TAR-013) ── */
.ta-vac-item {
    background: var(--mt-gray-50) !important;
    border: 1px solid var(--mt-border-color) !important;
}
.ta-vac-item__name  { color: var(--mt-heading-color) !important; }
.ta-vac-item__range { color: var(--mt-body-color) !important; font-family: var(--mt-font) !important; }
.ta-vac-item__obs   { color: var(--mt-muted-color) !important; }

/* ── PRIORITY DOTS (ta-prio-dot) ── */
.ta-prio-dot { border-radius: 50% !important; }
.ta-prio-dot--alta  { background: #EF4444 !important; box-shadow: 0 0 4px rgba(239,68,68,.4) !important; }
.ta-prio-dot--media { background: var(--mt-warning) !important; }
.ta-prio-dot--baja  { background: #10B981 !important; opacity: .7 !important; }

/* ── WORKER CARD (ta-worker-card) ── */
.ta-worker-card {
    background: var(--mt-paper-bg) !important;
    border: 1px solid var(--mt-border-color) !important;
    border-radius: var(--mt-radius) !important;
    box-shadow: 0 1px 3px rgba(var(--mt-dark-rgb),.06), 0 4px 16px rgba(var(--mt-dark-rgb),.08) !important;
    transition: transform .18s, box-shadow .18s, border-color .18s !important;
}

.ta-worker-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 20px rgba(var(--mt-dark-rgb),.12), 0 0 0 1px rgba(var(--mt-primary-rgb),.25) !important;
    border-color: rgba(var(--mt-primary-rgb),.35) !important;
}

.ta-worker-avatar {
    background: linear-gradient(135deg, var(--mt-primary), #A855F7) !important;
    color: var(--mt-sidebar-bg2) !important;
    font-family: var(--mt-font) !important;
    font-weight: 700 !important;
}

.ta-worker-name { color: var(--mt-heading-color) !important; font-weight: 600 !important; }
.ta-worker-times__est  { color: var(--mt-muted-color) !important; font-family: var(--mt-font) !important; }
.ta-worker-times__real { color: var(--mt-heading-color) !important; font-family: var(--mt-font) !important; font-weight: 600 !important; }
.ta-worker-times__real.is-over { color: #DC2626 !important; }

/* ── PROGRESS BAR ── */
.ta-progress {
    background: var(--mt-border-color) !important;
}
.ta-progress__bar {
    background: linear-gradient(90deg, var(--mt-primary), #10B981) !important;
    box-shadow: 0 0 8px rgba(var(--mt-primary-rgb),.3) !important;
}

.te-prog-track {
    background: var(--mt-border-color) !important;
    border-radius: 4px !important;
    height: 8px !important;
}
.te-prog-fill {
    background: linear-gradient(90deg, var(--mt-primary) 0%, #10B981 100%) !important;
    box-shadow: 0 0 10px rgba(var(--mt-primary-rgb),.35) !important;
    border-radius: 4px !important;
    height: 100% !important;
}

/* ── TASK ROWS (ta-task-row) ── */
.ta-task-row {
    background: var(--mt-paper-bg) !important;
    border: 1px solid var(--mt-border-color) !important;
    border-left: 4px solid transparent !important;
    border-radius: 10px !important;
    font-size: .875rem !important;
    transition: background .15s, box-shadow .15s !important;
}

.ta-task-row:hover {
    background: var(--mt-gray-50) !important;
    box-shadow: 0 1px 3px rgba(var(--mt-dark-rgb),.07) !important;
    transform: none !important;
}

.ta-task-row--en_progreso        { border-left-color: var(--mt-warning) !important; }
.ta-task-row--pausada            { border-left-color: #A855F7 !important; }
.ta-task-row--completada         { border-left-color: #10B981 !important; }
.ta-task-row--pendiente          { border-left-color: #BACDE8 !important; }
.ta-task-row--pendiente_revision { border-left-color: var(--mt-primary) !important; background: rgba(var(--mt-primary-rgb),.03) !important; }
.ta-task-row--rechazada          { border-left-color: #EF4444 !important; }

.ta-task-row__name { color: var(--mt-heading-color) !important; font-weight: 500 !important; }
.ta-task-row__proj { color: var(--mt-muted-color) !important; font-size: .75rem !important; }
.ta-task-row__time { color: var(--mt-muted-color) !important; font-family: var(--mt-font) !important; font-size: .78rem !important; }
.ta-task-row__time.is-over { color: #DC2626 !important; }

/* ── SECTION (te-section, pr-section — white card) ── */
:is(.te-section, .pr-section) {
    background: var(--mt-paper-bg) !important;
    border: 0 !important;
    border-radius: var(--mt-radius) !important;
    box-shadow: var(--mt-shadow-xs) !important;
    overflow: hidden !important;
    padding: 0 !important;
}

/* ── SECTION HEADER ── */
:is(.te-section__head, .pr-section__head) {
    background: transparent !important;
    border-bottom: 1px solid var(--mt-border-color) !important;
    padding: 1rem 1.5rem !important;
}

.te-section__title {
    color: var(--mt-heading-color) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: 0 !important;
}
.te-section__head .te-section__title { padding: 0 !important; }

/* Section title as standalone header (no te-section__head wrapper) */
.te-section > .te-section__title {
    background: transparent !important;
    border-bottom: 1px solid var(--mt-border-color) !important;
    padding: .75rem 1.25rem !important;
    margin: 0 !important;
    font-family: var(--mt-font) !important;
    font-size: var(--mt-font-size-xs) !important;
    font-weight: var(--mt-font-weight-sb) !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    color: var(--mt-muted-color) !important;
}

.pr-section__title { color: var(--mt-heading-color) !important; font-size: 1rem !important; font-weight: 600 !important; }

/* ── COUNT BADGE ── */
.te-count-badge, .pr-count {
    background: rgba(168,85,247,.1) !important;
    color: #7C3AED !important;
    border: 1px solid rgba(168,85,247,.25) !important;
    font-family: var(--mt-font) !important;
    font-size: .68rem !important;
    font-weight: 700 !important;
    border-radius: var(--mt-radius-sm) !important;
    padding: .2rem .6rem !important;
}

/* ── FILTER BAR ── */
.te-filter-bar {
    background: var(--mt-paper-bg) !important;
    border: 1px solid var(--mt-border-color) !important;
    border-radius: var(--mt-radius) !important;
    padding: .4rem !important;
    box-shadow: 0 1px 3px rgba(var(--mt-dark-rgb),.07) !important;
}

/* ── PERF GRID ── */
.te-perf-grid {
    background: transparent !important;
    border-top: none !important;
    gap: .75rem !important;
    padding: .75rem 1.25rem 1.25rem !important;
}

.te-perf-card {
    background: var(--mt-gray-25) !important;
    border: 1px solid var(--mt-border-color) !important;
    border-left: 4px solid var(--mt-primary) !important;
    border-radius: var(--mt-radius) !important;
    transition: background .15s, box-shadow .15s, transform .15s !important;
}
.te-perf-card:hover {
    background: var(--mt-gray-100, #363a50) !important;
    box-shadow: 0 4px 16px rgba(var(--mt-dark-rgb),.1) !important;
    transform: translateY(-1px) !important;
}

.te-perf-card__head { margin-bottom: .75rem !important; }

.te-avatar {
    background: linear-gradient(135deg, var(--mt-primary), #A855F7) !important;
    color: var(--mt-sidebar-bg2) !important;
    font-family: var(--mt-font) !important;
    font-weight: 700 !important;
    box-shadow: 0 0 0 2px rgba(var(--mt-primary-rgb),.2) !important;
}

.te-perf-name {
    color: var(--mt-heading-color) !important;
    font-weight: 600 !important;
    font-size: .9rem !important;
}
.te-perf-sub { color: var(--mt-muted-color) !important; font-size: .72rem !important; }
.te-perf-times { font-family: var(--mt-font) !important; color: var(--mt-muted-color) !important; font-size: .72rem !important; }
.te-perf-times strong { color: var(--mt-heading-color) !important; }
.te-over { color: #DC2626 !important; }

.te-exc-badge {
    background: rgba(239,68,68,.07) !important;
    color: #DC2626 !important;
    border: 1px solid rgba(239,68,68,.2) !important;
    font-family: var(--mt-font) !important;
    font-size: .65rem !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
}

/* ── TABLES ── */
:is(.pr-table, .te-table) {
    border-collapse: collapse !important;
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
    font-size: .875rem !important;
    width: 100% !important;
}

:is(.pr-table thead, .te-table thead) {
    background: var(--mt-gray-50) !important;
}

:is(.pr-table th, .te-table th) {
    color: var(--mt-muted-color) !important;
    font-family: var(--mt-font) !important;
    font-size: .68rem !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    padding: .85rem 1rem !important;
    border-bottom: 1px solid var(--mt-border-color) !important;
}

:is(.pr-table td, .te-table td) {
    color: var(--mt-heading-color) !important;
    border-top: 1px solid rgba(221,230,255,.7) !important;
    padding: .8rem 1rem !important;
    vertical-align: middle !important;
}

:is(.pr-tr, .te-tr):hover { background: rgba(236,241,255,.7) !important; }
.te-tr--en_progreso { background: rgba(245,158,11,.03) !important; }

/* ── MOBILE TASK CARDS (te-empresa) ── */
.te-mcard {
    background: var(--mt-paper-bg) !important;
    border: 1px solid var(--mt-border-color) !important;
    box-shadow: 0 2px 8px rgba(var(--mt-dark-rgb),.06) !important;
}
.te-mcard--en_progreso { border-left-color: var(--mt-warning) !important; background: rgba(245,158,11,.03) !important; }
.te-mcard--completada  { border-left-color: #10B981 !important; }
.te-mcard--pendiente   { border-left-color: var(--mt-muted-color) !important; }
.te-mcard--rechazada   { border-left-color: #EF4444 !important; }

.te-mcard__date   { color: var(--mt-muted-color) !important; font-family: var(--mt-font) !important; }
.te-mcard__name   { color: var(--mt-heading-color) !important; }
.te-mcard__worker { color: var(--mt-heading-color) !important; }
.te-mcard__proj   { color: var(--mt-muted-color) !important; }
.te-mcard__times  { color: var(--mt-body-color) !important; font-family: var(--mt-font) !important; }
.te-mcard__times strong { color: var(--mt-heading-color) !important; }
.te-mcard__extra  { color: #D97706 !important; }

.pr-td--name, .te-td--name  { color: var(--mt-heading-color) !important; font-weight: 500 !important; }
.pr-td--dim, .te-td--dim    { color: var(--mt-muted-color) !important; }
.pr-td--mono, .te-td--mono  { font-family: var(--mt-font) !important; font-size: .8rem !important; color: var(--mt-body-color) !important; }
.pr-td--ok                  { color: #059669 !important; }
.pr-td--danger              { color: #DC2626 !important; }
.te-td--center              { color: #D97706 !important; }

/* Table overflow wrap */
:is(.pr-table-wrap, .te-table-wrap) {
    overflow-x: auto !important;
    background: var(--mt-paper-bg) !important;
    border-radius: var(--mt-radius) !important;
}

/* ── SLA GRID ── */
.pr-sla-grid { padding: 1.25rem !important; }

.pr-sla-card {
    background: var(--mt-gray-50) !important;
    border: 1px solid var(--mt-border-color) !important;
    border-radius: var(--mt-radius) !important;
    transition: border-color .2s, transform .2s, box-shadow .2s !important;
}
.pr-sla-card:hover {
    border-color: rgba(var(--mt-primary-rgb),.35) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(var(--mt-dark-rgb),.09) !important;
}

.pr-sla-card__name { color: var(--mt-heading-color) !important; font-weight: 600 !important; font-size: .95rem !important; }

.pr-sla-badge {
    font-family: var(--mt-font) !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    border: 1px solid transparent !important;
}
.pr-sla-badge--ok     { background: rgba(16,185,129,.1) !important; color: #059669 !important; border-color: rgba(16,185,129,.3) !important; }
.pr-sla-badge--warn   { background: rgba(245,158,11,.1) !important; color: #D97706 !important; border-color: rgba(245,158,11,.3) !important; }
.pr-sla-badge--danger { background: rgba(239,68,68,.08) !important; color: #DC2626 !important; border-color: rgba(239,68,68,.25) !important; }

.pr-sla-bar {
    background: var(--mt-border-color) !important;
    border-radius: 3px !important;
    overflow: hidden !important;
}
.pr-sla-bar__fill { border-radius: 3px !important; transition: width .5s ease !important; }
.pr-sla-bar__fill--ok     { background: linear-gradient(90deg, var(--mt-primary), #10B981) !important; box-shadow: 0 0 8px rgba(16,185,129,.25) !important; }
.pr-sla-bar__fill--warn   { background: linear-gradient(90deg, #F59E0B, #FBBF24) !important; box-shadow: 0 0 8px rgba(245,158,11,.25) !important; }
.pr-sla-bar__fill--danger { background: linear-gradient(90deg, #EF4444, #F87171) !important; box-shadow: 0 0 8px rgba(239,68,68,.25) !important; }

.pr-sla-nums { color: var(--mt-muted-color) !important; font-family: var(--mt-font) !important; font-size: .72rem !important; }

/* ── PLANTILLA CARD (pl-card) ── */
.pl-card {
    background: var(--mt-paper-bg) !important;
    border: 1px solid var(--mt-border-color) !important;
    border-radius: var(--mt-radius) !important;
    box-shadow: 0 1px 3px rgba(var(--mt-dark-rgb),.06), 0 4px 16px rgba(var(--mt-dark-rgb),.08) !important;
    transition: transform .18s, box-shadow .18s, border-color .18s !important;
    overflow: hidden !important;
}

.pl-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 20px rgba(var(--mt-dark-rgb),.12), 0 0 0 1px rgba(var(--mt-primary-rgb),.25) !important;
    border-color: rgba(var(--mt-primary-rgb),.35) !important;
}

.pl-card.is-selected {
    border-color: var(--mt-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--mt-primary-rgb),.3), 0 4px 20px rgba(var(--mt-dark-rgb),.12) !important;
}

.pl-card__name { color: var(--mt-heading-color) !important; font-weight: 600 !important; font-size: .95rem !important; }
.pl-card__proj { color: var(--mt-primary) !important; font-size: .75rem !important; }
.pl-card__desc { color: var(--mt-muted-color) !important; font-size: .75rem !important; }
.pl-count      { color: var(--mt-muted-color) !important; font-family: var(--mt-font) !important; font-size: .68rem !important; }

.pl-card__actions {
    background: var(--mt-gray-50) !important;
    border-top: 1px solid var(--mt-border-color) !important;
}

/* ── ITEMS SECTION (pl-items-section — modal inner block) ── */
.pl-items-section {
    background: var(--mt-gray-50) !important;
    border: 1px solid var(--mt-border-color) !important;
    border-radius: 10px !important;
}

.pl-items-empty { color: var(--mt-muted-color) !important; font-size: .82rem !important; }

/* ── APPLY MODAL ── */
.pl-apply-name { color: var(--mt-primary) !important; font-weight: 600 !important; font-size: .92rem !important; }

.pl-emp-list {
    background: var(--mt-gray-50) !important;
    border: 1px solid var(--mt-border-color) !important;
    border-radius: 8px !important;
}
.pl-emp-item { color: var(--mt-heading-color) !important; border-radius: 5px !important; transition: background .15s !important; }
.pl-emp-item:hover { background: rgba(var(--mt-primary-rgb),.06) !important; }
.pl-emp-item input { accent-color: var(--mt-primary) !important; }

/* ── INPUTS ── */
:is(.mt-shell, .pl-shell, .pr-shell, .ta-shell, .te-shell) :is(input, select, textarea),
:is(.mt-finp, .mt-fsel, .ta-finp, .ta-fsel, .te-finp, .te-fsel,
    .pr-finp, .pr-fsel, .pl-finp, .pl-fsel) {
    background: var(--mt-paper-bg) !important;
    color: var(--mt-heading-color) !important;
    border: 1px solid var(--mt-border-color) !important;
    border-radius: 8px !important;
    padding: .6rem .9rem !important;
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
    font-size: .875rem !important;
    transition: border-color .18s, box-shadow .18s !important;
    box-shadow: none !important;
}

:is(.mt-shell, .pl-shell, .pr-shell, .ta-shell, .te-shell) :is(input, select, textarea):focus,
:is(.mt-finp, .mt-fsel, .ta-finp, .ta-fsel, .te-finp, .te-fsel,
    .pr-finp, .pr-fsel, .pl-finp, .pl-fsel):focus {
    outline: none !important;
    border-color: var(--mt-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--mt-primary-rgb),.12) !important;
}

:is(.mt-shell, .pl-shell, .pr-shell, .ta-shell, .te-shell) :is(input, textarea)::placeholder,
:is(.mt-finp, .ta-finp, .te-finp, .pr-finp, .pl-finp)::placeholder {
    color: var(--mt-muted-color) !important;
}

.mt-finp--ta,
.ta-finp--ta, .ta-finp--sm-ta {
    background: var(--mt-paper-bg) !important;
    color: var(--mt-heading-color) !important;
    border: 1px solid var(--mt-border-color) !important;
    border-radius: 8px !important;
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
    font-size: .875rem !important;
    transition: border-color .18s, box-shadow .18s !important;
    resize: vertical !important;
}
.mt-finp--ta:focus, .ta-finp--ta:focus, .ta-finp--sm-ta:focus {
    outline: none !important;
    border-color: var(--mt-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--mt-primary-rgb),.12) !important;
}
.mt-finp--ta::placeholder, .ta-finp--ta::placeholder, .ta-finp--sm-ta::placeholder {
    color: var(--mt-muted-color) !important;
}

/* ── FORM LABELS ── */
:is(.mt-flbl, .ta-flbl, .te-flbl, .pr-flbl, .pl-flbl) {
    color: var(--mt-primary) !important;
    font-family: var(--mt-font) !important;
    font-size: .62rem !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
}

/* ── CHECK LABEL ── */
.pr-check-label {
    color: var(--mt-body-color) !important;
    font-size: .82rem !important;
    cursor: pointer !important;
}
.pr-check-label input { accent-color: var(--mt-primary) !important; }

/* ── RANGE SEP ── */
:is(.ta-range-sep, .te-range-sep) {
    color: var(--mt-muted-color) !important;
    font-family: var(--mt-font) !important;
}

/* ── CUSTOM RANGE ── */
:is(.ta-custom-range, .te-custom-range) {
    background: var(--mt-paper-bg) !important;
    border: 1px solid var(--mt-border-color) !important;
    border-radius: var(--mt-radius) !important;
    box-shadow: 0 1px 4px rgba(var(--mt-dark-rgb),.06) !important;
    padding: .55rem .9rem !important;
    margin-bottom: .85rem !important;
}

/* ── PROJECT MOBILE CARDS ── */
.pr-mcard {
    background: var(--mt-paper-bg) !important;
    border: 1px solid var(--mt-border-color) !important;
    border-left: 4px solid var(--mt-primary) !important;
    box-shadow: 0 1px 4px rgba(var(--mt-dark-rgb),.06) !important;
}
.pr-mcard:hover {
    box-shadow: 0 3px 12px rgba(var(--mt-dark-rgb),.1) !important;
    border-left-color: var(--mt-primary) !important;
}
.pr-mcard__name    { color: var(--mt-heading-color) !important; font-family: 'Space Grotesk', system-ui, sans-serif !important; }
.pr-mcard__client,
.pr-mcard__contact,
.pr-mcard__email   { color: var(--mt-body-color) !important; }
.pr-mcard__budget  { color: var(--mt-heading-color) !important; font-family: var(--mt-font) !important; }
.pr-mcard__ruc     { color: var(--mt-body-color) !important; font-family: var(--mt-font) !important; }
.pr-mcard__sla     { color: var(--mt-primary) !important; background: rgba(var(--mt-primary-rgb),.1) !important; border-color: rgba(var(--mt-primary-rgb),.25) !important; }

/* ── PROJECT FILTER BAR ── */
.ta-proj-filter {
    background: var(--mt-paper-bg) !important;
    border: 1px solid var(--mt-border-color) !important;
    border-radius: var(--mt-radius) !important;
    box-shadow: 0 1px 4px rgba(var(--mt-dark-rgb),.06) !important;
}

.ta-filter-label {
    color: var(--mt-primary) !important;
    font-family: var(--mt-font) !important;
    font-size: .6rem !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    border-right: 1px solid var(--mt-border-color) !important;
}

.ta-filter-clear {
    background: rgba(var(--mt-dark-rgb),.05) !important;
    border: 1px solid rgba(var(--mt-dark-rgb),.1) !important;
    color: var(--mt-muted-color) !important;
}
.ta-filter-clear:hover {
    background: rgba(239,68,68,.1) !important;
    border-color: rgba(239,68,68,.3) !important;
    color: #EF4444 !important;
    transform: none !important;
}

/* ── BUTTONS (base reset in light shells) ── */
:is(.mt-shell, .pl-shell, .pr-shell, .ta-shell, .te-shell) button {
    font-family: var(--mt-font) !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all .18s !important;
}

:is(.mt-shell, .pl-shell, .pr-shell, .ta-shell, .te-shell) button:disabled {
    opacity: .5 !important;
    cursor: not-allowed !important;
}

:is(.mt-shell, .pl-shell, .pr-shell, .ta-shell, .te-shell)
    button:hover:not(:disabled):not(.dpb__btn):not(.dpb__nav):not(.dpb__day):not(.pr-tab):not(.ta-tab):not(.te-tab) {
    transform: translateY(-1px) !important;
}

/* Ghost / default button base */
:is(.mt-shell, .pl-shell, .pr-shell, .ta-shell, .te-shell)
    button:not(.dpb__btn):not(.dpb__nav):not(.dpb__day):not(.pr-tab):not(.ta-tab):not(.te-tab):not([class*="--primary"]):not([class*="--assign"]):not([class*="--save"]):not([class*="--start"]):not([class*="--resume"]):not([class*="--export"]):not([class*="--approve"]):not([class*="--close"]):not([class*="--pause"]):not([class*="--reject"]):not([class*="--danger"]):not([class*="--add"]):not([class*="--approve"]) {
    background: var(--mt-gray-50) !important;
    color: var(--mt-body-color) !important;
    border: 1px solid var(--mt-border-color) !important;
    box-shadow: 0 1px 2px rgba(var(--mt-dark-rgb),.05) !important;
}

/* ── PRIMARY BUTTONS ── */
:is(.mt-btn--start, .mt-btn--resume, .mt-btn--save, .mt-btn--close-confirm,
    .pl-btn--primary, .pr-btn--primary,
    .ta-btn--assign, .ta-btn--primary,
    .te-btn--export) {
    background: var(--mt-primary) !important;
    color: #fff !important;
    border: none !important;
    border-color: var(--mt-primary) !important;
    box-shadow: 0 0 16px rgba(var(--mt-primary-rgb),.3) !important;
}

:is(.mt-btn--start, .mt-btn--resume, .mt-btn--save, .mt-btn--close-confirm,
    .pl-btn--primary, .pr-btn--primary,
    .ta-btn--assign, .ta-btn--primary,
    .te-btn--export):hover:not(:disabled) {
    background: var(--mt-primary-hover) !important;
    border-color: var(--mt-primary-hover) !important;
    box-shadow: 0 4px 20px rgba(var(--mt-primary-rgb),.45) !important;
}

/* Export variant */
.mt-btn--export, .ta-btn--export, .pl-btn--add {
    background: var(--mt-primary) !important;
    color: #fff !important;
    border-color: var(--mt-primary) !important;
    box-shadow: 0 0 14px rgba(var(--mt-primary-rgb),.25) !important;
}
.mt-btn--export:hover:not(:disabled),
.ta-btn--export:hover:not(:disabled),
.pl-btn--add:hover:not(:disabled) {
    background: var(--mt-primary-hover) !important;
    box-shadow: 0 4px 16px rgba(var(--mt-primary-rgb),.4) !important;
}

/* ── CLOSE MODAL (amber) ── */
.mt-btn--close {
    background: rgba(245,158,11,.1) !important;
    color: #D97706 !important;
    border: 1px solid rgba(245,158,11,.3) !important;
}
.mt-btn--close:hover:not(:disabled) {
    background: rgba(245,158,11,.18) !important;
    box-shadow: 0 0 12px rgba(245,158,11,.2) !important;
}

/* ── PAUSE / WARN ── */
.mt-btn--pause {
    background: rgba(245,158,11,.1) !important;
    color: #D97706 !important;
    border: 1px solid rgba(245,158,11,.3) !important;
}
.mt-btn--pause:hover:not(:disabled) {
    background: rgba(245,158,11,.18) !important;
}

/* ── GHOST BUTTONS ── */
:is(.mt-btn--ghost, .mt-btn--detail,
    .pl-btn--ghost, .pr-btn--ghost,
    .ta-btn--ghost, .ta-btn--detail, .ta-btn--reassign,
    .ta-close-btn, .pr-close, .pl-close,
    .mt-close-btn) {
    background: var(--mt-gray-50) !important;
    color: var(--mt-body-color) !important;
    border: 1px solid var(--mt-border-color) !important;
    box-shadow: none !important;
}

:is(.mt-btn--ghost, .mt-btn--detail,
    .pl-btn--ghost, .pr-btn--ghost,
    .ta-btn--ghost, .ta-btn--detail, .ta-btn--reassign):hover:not(:disabled) {
    color: var(--mt-primary) !important;
    border-color: rgba(var(--mt-primary-rgb),.4) !important;
    background: rgba(var(--mt-primary-rgb),.06) !important;
}

.mt-btn--detail.is-active,
.ta-btn--detail.is-active {
    color: var(--mt-primary) !important;
    border-color: rgba(var(--mt-primary-rgb),.4) !important;
    background: rgba(var(--mt-primary-rgb),.06) !important;
}

/* ── CLOSE BUTTONS ── */
:is(.ta-close-btn, .pr-close, .pl-close, .mt-close-btn) {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}
:is(.ta-close-btn, .pr-close, .pl-close, .mt-close-btn):hover {
    color: #DC2626 !important;
    transform: none !important;
}

/* ── APPROVE ── */
.ta-btn--approve {
    background: rgba(16,185,129,.1) !important;
    color: #059669 !important;
    border: 1px solid rgba(16,185,129,.3) !important;
}
.ta-btn--approve:hover:not(:disabled) {
    background: rgba(16,185,129,.18) !important;
    box-shadow: 0 0 10px rgba(16,185,129,.2) !important;
}

/* ── REJECT / DANGER ── */
:is(.ta-btn--reject, .ta-btn--danger,
    .pl-btn--danger, .pr-btn--danger,
    .mt-btn--danger) {
    background: rgba(239,68,68,.08) !important;
    color: #DC2626 !important;
    border: 1px solid rgba(239,68,68,.25) !important;
}
:is(.ta-btn--reject, .ta-btn--danger,
    .pl-btn--danger, .pr-btn--danger,
    .mt-btn--danger):hover:not(:disabled) {
    background: rgba(239,68,68,.15) !important;
    box-shadow: 0 0 10px rgba(239,68,68,.15) !important;
}

/* ── DATE NAV BUTTONS ── */
.mt-dbn { transform: none !important; }

/* ── EXTRA PANEL (mt) ── */
.mt-extra-panel {
    background: var(--mt-paper-bg) !important;
    border: 1px dashed #BACDE8 !important;
    border-radius: var(--mt-radius) !important;
    overflow: hidden !important;
}

.mt-extra-toggle {
    background: none !important;
    border: none !important;
    color: var(--mt-body-color) !important;
    font-family: var(--mt-font) !important;
    font-size: .85rem !important;
    font-weight: 700 !important;
    transition: color .18s !important;
    box-shadow: none !important;
}
.mt-extra-toggle:hover { color: var(--mt-primary) !important; transform: none !important; }

/* ── MODE TOGGLE (TAR-014) ── */
.mt-mode-toggle {
    background: var(--mt-body-bg) !important;
    border: 1px solid var(--mt-border-color) !important;
}
.mt-mode-btn {
    color: var(--mt-body-color) !important;
    background: transparent !important;
    border: none !important;
    font-family: var(--mt-font) !important;
    box-shadow: none !important;
}
.mt-mode-btn.is-active {
    background: var(--mt-paper-bg) !important;
    color: var(--mt-primary) !important;
    box-shadow: 0 1px 3px rgba(var(--mt-dark-rgb),.1) !important;
}
.mt-mode-btn:hover:not(.is-active) { color: var(--mt-heading-color) !important; }

/* ── EXPORT ROW ── */
.mt-export-row,
.ta-export-row {
    border-top: 1px solid var(--mt-border-color) !important;
    padding-top: 1.25rem !important;
}

/* ── DETAIL PANEL ── */
:is(.mt-detail-panel, .ta-detail-panel) {
    background: var(--mt-paper-bg) !important;
    border: 1px solid var(--mt-border-color) !important;
    border-top: none !important;
    border-radius: 0 0 14px 14px !important;
    padding: 1rem 1.5rem !important;
}

:is(.mt-detail-title, .ta-detail-title) {
    color: var(--mt-primary) !important;
    font-family: var(--mt-font) !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .1em !important;
}

:is(.mt-detail-loading, .ta-detail-loading, .ta-detail-empty) {
    color: var(--mt-muted-color) !important;
    font-size: .85rem !important;
}

/* ── COMMENTS ── */
:is(.mt-comment, .ta-comment) {
    background: var(--mt-gray-50) !important;
    border: 1px solid var(--mt-border-color) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
}

:is(.mt-comment__author, .ta-comment__author) {
    color: var(--mt-primary) !important;
    font-family: var(--mt-font) !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
}

:is(.mt-comment__date, .ta-comment__date) {
    color: var(--mt-muted-color) !important;
    font-family: var(--mt-font) !important;
    font-size: .65rem !important;
}

:is(.mt-comment__text, .ta-comment__text) {
    color: var(--mt-body-color) !important;
    font-size: .85rem !important;
    line-height: 1.5 !important;
}

/* ── ATTACHMENTS ── */
:is(.mt-attachment, .ta-attachment) {
    background: var(--mt-gray-50) !important;
    border: 1px solid var(--mt-border-color) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: .82rem !important;
}

:is(.mt-attachment__name, .ta-attachment__name) {
    color: var(--mt-body-color) !important;
}

:is(.mt-attachment__size, .ta-attachment__size) {
    color: var(--mt-muted-color) !important;
    font-family: var(--mt-font) !important;
    font-size: .7rem !important;
}

/* ── UPLOAD LABEL ── */
:is(.mt-upload-label, .ta-upload-label, .pl-upload-label) {
    background: var(--mt-gray-50) !important;
    border: 1px dashed #BACDE8 !important;
    color: var(--mt-muted-color) !important;
    border-radius: 8px !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background .18s, border-color .18s, color .18s !important;
}
:is(.mt-upload-label, .ta-upload-label, .pl-upload-label):hover:not(.is-loading) {
    background: rgba(var(--mt-primary-rgb),.05) !important;
    border-color: rgba(var(--mt-primary-rgb),.35) !important;
    color: var(--mt-primary) !important;
}
:is(.mt-upload-label, .ta-upload-label, .pl-upload-label).is-loading {
    opacity: .7 !important;
    cursor: not-allowed !important;
}

/* ── MODALS ── */
:is(.mt-overlay, .pl-overlay, .pr-overlay, .ta-assign-overlay) {
    background: rgba(10,20,50,.65) !important;
    backdrop-filter: blur(8px) !important;
}

:is(.mt-modal, .pl-modal, .pr-modal, .ta-assign-modal) {
    background: var(--mt-paper-bg) !important;
    border: 1px solid var(--mt-border-color) !important;
    border-radius: 16px !important;
    box-shadow: 0 32px 80px rgba(10,20,50,.25) !important;
    color: var(--mt-heading-color) !important;
}

.mt-modal__title, .pl-modal__title, .pr-modal__title, .ta-assign-modal__title {
    color: var(--mt-heading-color) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
}

.mt-modal__sub { color: var(--mt-muted-color) !important; font-size: .83rem !important; }

:is(.pl-modal__footer, .pr-modal__footer) {
    background: var(--mt-gray-50) !important;
    border-top: 1px solid var(--mt-border-color) !important;
}

/* ── EMPTY STATE ── */
:is(.mt-empty, .ta-empty, .te-empty, .pr-empty, .pl-empty) {
    color: var(--mt-muted-color) !important;
    text-align: center !important;
}

:is(.mt-empty__ico, .ta-empty__ico, .te-empty__ico) {
    color: var(--mt-border-color) !important;
}

:is(.mt-empty p, .ta-empty p, .te-empty p, .pr-empty p, .pl-empty p) {
    color: var(--mt-body-color) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
}

/* ── SPINNERS ── */
:is(.mt-spinner, .ta-spinner, .te-spinner, .pr-spinner, .pl-spinner) {
    border-color: var(--mt-border-color) !important;
    border-top-color: var(--mt-primary) !important;
    border-radius: 50% !important;
    animation: t-spin .8s linear infinite !important;
}

:is(.mt-spin, .ta-spin, .te-spin, .pr-spin, .pl-spin) {
    border-color: currentColor !important;
    border-top-color: transparent !important;
    border-radius: 50% !important;
    display: inline-block !important;
    animation: t-spin .8s linear infinite !important;
}

/* ── LOAD MORE ── */
.te-load-more {
    background: transparent !important;
    border: none !important;
    border-top: 1px solid var(--mt-border-color) !important;
    color: var(--mt-primary) !important;
    font-family: var(--mt-font) !important;
    font-size: .8rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background .18s !important;
}
.te-load-more:hover { background: rgba(var(--mt-primary-rgb),.04) !important; transform: none !important; }

/* ── GLOBAL KEYFRAMES ── */
@keyframes t-spin {
    to { transform: rotate(360deg); }
}

@keyframes t-pulse-border {
    0%, 100% { border-left-color: #F59E0B; box-shadow: 0 4px 20px rgba(0,0,0,.25); }
    50%       { border-left-color: #FBBF24; box-shadow: 0 4px 24px rgba(245,158,11,.25), 0 0 0 1px rgba(245,158,11,.2); }
}

@keyframes t-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: .25; }
}

@keyframes t-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes t-modal-in {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes t-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

/* ── SKELETON BASE ── */
:is(.ta-shell, .te-shell) .t-skel {
    background: linear-gradient(90deg,
        rgba(221,230,255,.7) 25%,
        rgba(200,215,255,.9) 50%,
        rgba(221,230,255,.7) 75%) !important;
    background-size: 200% 100% !important;
    animation: t-shimmer 1.4s ease-in-out infinite !important;
    border-radius: 6px !important;
    border: none !important;
    color: transparent !important;
    box-shadow: none !important;
}

/* ── GANTT PAGE (TAR-016) ── */
.gt-container { background: transparent !important; }

.gt-employee-section {
    background: var(--mt-paper-bg) !important;
    border: 1px solid var(--mt-border-color) !important;
    box-shadow: 0 1px 3px rgba(var(--mt-dark-rgb),.06) !important;
}

.gt-emp-header {
    background: var(--mt-gray-50) !important;
    border-bottom: 1px solid var(--mt-border-color) !important;
}

.gt-emp-name { color: var(--mt-heading-color) !important; }

.gt-row { border-bottom: 1px solid rgba(221,230,255,.5) !important; }
.gt-row:last-child { border-bottom: none !important; }

.gt-task-name { color: var(--mt-heading-color) !important; }
.gt-task-proj { color: var(--mt-muted-color) !important; }

.gt-track-area {
    background: rgba(237,242,255,.5) !important;
}

.gt-hour-mark span { color: var(--mt-muted-color) !important; }

.gt-gridline { background: rgba(189,210,240,.4) !important; }

.gt-axis-row .gt-track-area { background: transparent !important; }

/* Bar colors by estado */
.gt-bar--en_progreso  { background: linear-gradient(90deg, var(--mt-primary), #06B6D4) !important; color: #fff !important; }
.gt-bar--completada   { background: linear-gradient(90deg, #10B981, #059669) !important; color: #fff !important; }
.gt-bar--pausada      { background: linear-gradient(90deg, #F59E0B, #D97706) !important; color: #fff !important; }
.gt-bar--pendiente_revision { background: linear-gradient(90deg, #818CF8, #6366F1) !important; color: #fff !important; }
.gt-bar--pendiente    { background: linear-gradient(90deg, var(--mt-muted-color), var(--mt-gray-700)) !important; color: #fff !important; }
.gt-bar--rechazada    { background: linear-gradient(90deg, #EF4444, #DC2626) !important; color: #fff !important; }

.gt-date-label { color: #FFFFFF !important; }

/* ══════════════════════════════════════════
   MOBILE RESPONSIVE
══════════════════════════════════════════ */

/* Tablet */
@media (max-width: 900px) {
    :is(.mt-header, .pl-header, .pr-header, .ta-header, .te-header) {
        padding: .85rem 1rem 0 !important;
    }
}

/* Mobile */
@media (max-width: 700px) {
    :is(.mt-shell, .pl-shell, .pr-shell, .ta-shell, .te-shell) {
        padding: .75rem !important;
    }

    :is(.mt-header, .pl-header, .pr-header, .ta-header, .te-header) {
        padding: .75rem .85rem 0 !important;
        border-radius: var(--mt-radius) !important;
        margin-bottom: 1rem !important;
    }

    :is(.mt-title, .pl-title, .pr-title, .ta-title, .te-title) {
        font-size: clamp(1.25rem, 5vw, 1.75rem) !important;
    }

    /* KPI icon size on small screens */
    .te-kpi__ico {
        font-size: 1.1rem !important;
    }

    /* Export ctrl: wrap date inputs on mobile */
    .te-export-ctrl {
        flex-wrap: wrap !important;
        gap: .4rem !important;
    }
    .te-export-ctrl .te-finp--sm {
        flex: 1 !important;
        min-width: 120px !important;
    }
    .te-export-ctrl .te-btn--export {
        flex: 1 !important;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    :is(.mt-shell, .pl-shell, .pr-shell, .ta-shell, .te-shell) {
        padding: .5rem !important;
    }

    :is(.mt-header, .pl-header, .pr-header, .ta-header, .te-header) {
        padding: .65rem .75rem 0 !important;
        border-radius: var(--mt-radius) !important;
        margin-bottom: .75rem !important;
    }

    :is(.mt-title, .pl-title, .pr-title, .ta-title, .te-title) {
        font-size: 1.25rem !important;
        letter-spacing: -0.02em !important;
    }

    /* Stats strip: horizontal scroll on very small screens */
    :is(.mt-stats, .ta-stats) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: .65rem !important;
    }
    :is(.mt-stats, .ta-stats)::-webkit-scrollbar { display: none; }

    /* Tabs: ensure they don't wrap badly */
    :is(.pr-tabs, .ta-tabs, .te-tabs) {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none !important;
    }
    :is(.pr-tabs, .ta-tabs, .te-tabs)::-webkit-scrollbar { display: none; }
    :is(.pr-tab, .ta-tab, .te-tab) {
        flex-shrink: 0 !important;
        padding: .4rem .85rem !important;
        font-size: .68rem !important;
    }

    /* Date nav: allow text to shrink */
    .mt-date-label {
        font-size: .78rem !important;
        min-width: 0 !important;
    }
    .mt-date-nav {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
}