/* ============================================================
   RINOTRACK - AJUSTES POR PANTALLA (ESTILO CLICKUP)
   Depende de clickup-tokens.css y clickup-theme.css.

   Muchas vistas declaran su CSS en bloques <style> dentro del
   <body>, es decir DESPUÉS de las hojas del <head>. Para ganar
   sin recurrir a !important se antepone html[data-theme] a cada
   selector: eso sube la especificidad a (0,1,2) y supera a las
   reglas de clase simples (0,1,0) sin importar el orden de carga.

   Solo se ajusta presentación. No se tocan literales de color
   usados por JavaScript (Chart.js y similares), porque esas
   librerías no resuelven variables CSS.
   ============================================================ */

/* ------------------------------------------------------------
   KANBAN - ALINEACIÓN DE COLUMNAS
   monday-theme.css usa justify-content:center en .kanban-wrapper,
   que además tiene overflow-x:auto. Con "center" puro, cuando las
   columnas no caben el desbordamiento queda a ambos lados y la
   primera columna queda INALCANZABLE por scroll.

   "safe center" centra cuando caben y cae a start cuando
   desbordan, así se ve centrado en pantallas amplias sin
   reintroducir el recorte.
   ------------------------------------------------------------ */
/* Fondo degradado del lienzo.
   theme.css declara `body { background: var(--bg-primary) }` (blanco) con la
   forma abreviada, que además borra background-image. Se gana con
   html[data-theme] body para no depender del orden de carga. */
html[data-theme] body {
    background-color: var(--cu-bg) !important;
    background-image: var(--cu-bg-gradient) !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-size: cover !important;
}

html[data-theme] .kanban-wrapper {
    justify-content: center;
    justify-content: safe center;
    height: auto;
    max-height: calc(100vh - 240px);
    padding: 20px 24px;
    gap: 18px;
}

html[data-theme] .kanban-column {
    min-height: 280px;
}

/* Headers Kanban: refuerzo de color sólido por tipo (todos los perfiles) */
html[data-theme] .column-header,
html[data-theme] .equipo-column-header,
html[data-theme] .team-column-header {
    color: #fff !important;
    border-bottom: none !important;
}

html[data-theme] .column-header.stuck,
html[data-theme] .column-header.vencidas,
html[data-theme] .equipo-column-header.vencidas,
html[data-theme] .team-column-header.team-vencidas {
    background: #C41F33 !important;
}

html[data-theme] .column-header.working,
html[data-theme] .column-header.hoy,
html[data-theme] .equipo-column-header.hoy,
html[data-theme] .team-column-header.team-hoy {
    background: #B45309 !important;
}

html[data-theme] .column-header.todo,
html[data-theme] .column-header.semana,
html[data-theme] .equipo-column-header.semana,
html[data-theme] .team-column-header.team-semana {
    background: #1D4ED8 !important;
}

html[data-theme] .column-header.done,
html[data-theme] .column-header.futuras,
html[data-theme] .equipo-column-header.futuras,
html[data-theme] .team-column-header.team-futuras {
    background: #0B7541 !important;
}

html[data-theme] .column-header.empty,
html[data-theme] .column-header.sinfecha {
    background: #142B43 !important;
}

html[data-theme] .column-header .count,
html[data-theme] .column-header .task-count,
html[data-theme] .equipo-column-header .task-count,
html[data-theme] .team-column-header .task-count {
    background: rgba(255, 255, 255, 0.28) !important;
    color: #fff !important;
}

/* ------------------------------------------------------------
   DASHBOARD (líder / miembro) — área de contenido tema blanco Rino
   ------------------------------------------------------------ */
html[data-theme] .monday-layout,
html[data-theme] .monday-main {
    background: transparent;
    color: var(--cu-text);
}

html[data-theme] .filters-stats-row {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    gap: 12px !important;
    flex-wrap: wrap;
}

html[data-theme] .filters-stats-row .filter-group label {
    color: var(--cu-text-3) !important;
    letter-spacing: 0.04em;
}

html[data-theme] .filters-stats-row select {
    background: var(--cu-surface) !important;
    color: var(--cu-text) !important;
    border: 1px solid var(--cu-border) !important;
    border-radius: var(--cu-radius) !important;
    box-shadow: var(--cu-shadow-xs);
}

/* Separador vertical heredado: sobra en el diseño de tarjetas */
html[data-theme] .filters-stats-row > div[style*="width: 1px"] {
    background: transparent !important;
}

/* Tarjetas de resumen: número + etiqueta y chip de icono a la derecha */
html[data-theme] .stat-card-mini {
    background: var(--cu-surface) !important;
    border: 1px solid var(--cu-border) !important;
    border-radius: var(--cu-radius-lg) !important;
    box-shadow: var(--cu-shadow-xs);
    justify-content: space-between;
}

html[data-theme] .stat-mini-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--cu-radius);
    font-size: 15px;
    flex-shrink: 0;
    background: var(--cu-accent-soft);
    color: var(--cu-accent);
}

html[data-theme] .stat-mini-icon.is-overdue { background: var(--cu-danger-soft); color: var(--cu-danger); }
html[data-theme] .stat-mini-icon.is-today { background: var(--cu-warning-soft); color: var(--cu-warning); }
html[data-theme] .stat-mini-icon.is-week { background: var(--cu-accent-soft); color: var(--cu-accent); }
html[data-theme] .stat-mini-icon.is-future { background: var(--cu-success-soft); color: var(--cu-success); }
html[data-theme] .stat-mini-icon.is-nodate { background: var(--cu-info-soft); color: var(--cu-info); }

/* Tablero: todas las columnas dentro de una tarjeta blanca */
html[data-theme] .board-container {
    background: var(--cu-surface);
    border: 1px solid var(--cu-border);
    border-radius: var(--cu-radius-xl);
    box-shadow: var(--cu-shadow-sm);
    overflow: hidden;
}

html[data-theme] .column-body {
    background: var(--cu-surface-2);
}

/* Estado vacío con icono, como en el diseño de referencia */
html[data-theme] .column-empty {
    text-align: center;
    padding: 36px 16px;
    color: var(--cu-text-3);
    font-size: var(--cu-fs-sm);
}

html[data-theme] .column-empty::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    display: block;
    margin-bottom: 12px;
    font-size: 30px;
    color: var(--cu-border-strong);
    opacity: 0.55;
    content: '\f15c';
}

html[data-theme] .column-empty.is-today::before { content: '\f133'; }
html[data-theme] .column-empty.is-week::before { content: '\f073'; }
html[data-theme] .column-empty.is-future::before { content: '\f271'; }
html[data-theme] .column-empty.is-nodate::before { content: '\f01c'; }

/* ------------------------------------------------------------
   DASHBOARDS - MODALES DE ERROR
   Compartidos por clan_leader/dashboard.php y clan_member/dashboard.php
   ------------------------------------------------------------ */
html[data-theme] .error-modal-overlay {
    background: var(--cu-overlay);
    backdrop-filter: blur(2px);
}

html[data-theme] .error-modal-content {
    background: var(--cu-surface);
    border: 1px solid var(--cu-border);
    border-radius: var(--cu-radius-xl);
    box-shadow: var(--cu-shadow-lg);
    color: var(--cu-text);
}

html[data-theme] .error-modal-header {
    background: var(--cu-surface);
    background-image: none;
    border-bottom: 1px solid var(--cu-border);
    color: var(--cu-text);
}

html[data-theme] .error-modal-body {
    background: var(--cu-surface);
    color: var(--cu-text);
}

html[data-theme] .error-modal-footer {
    background: var(--cu-surface-2);
    border-top: 1px solid var(--cu-border);
}

html[data-theme] .error-modal-close {
    background: transparent;
    border: none;
    color: var(--cu-text-2);
    border-radius: var(--cu-radius-sm);
}

html[data-theme] .error-modal-close:hover {
    background: var(--cu-surface-3);
    color: var(--cu-text);
}

html[data-theme] .error-icon {
    color: var(--cu-danger);
    background: var(--cu-danger-soft);
}

html[data-theme] .error-message {
    color: var(--cu-text-2);
}

html[data-theme] .error-btn-primary {
    background: var(--cu-accent);
    background-image: none;
    border: 1px solid var(--cu-accent);
    color: var(--cu-accent-contrast);
    border-radius: var(--cu-radius-sm);
    box-shadow: none;
}

html[data-theme] .error-btn-primary:hover {
    background: var(--cu-accent-hover);
    border-color: var(--cu-accent-hover);
}

/* ------------------------------------------------------------
   DASHBOARD LÍDER - BOTONES DE ACCIÓN EN TARJETAS
   ------------------------------------------------------------ */
html[data-theme] .clone-btn,
html[data-theme] .tracking-btn {
    background: var(--cu-surface);
    background-image: none;
    border: 1px solid var(--cu-border-strong);
    color: var(--cu-text-2);
    border-radius: var(--cu-radius-sm);
    box-shadow: none;
}

html[data-theme] .clone-btn:hover,
html[data-theme] .tracking-btn:hover {
    background: var(--cu-surface-hover);
    border-color: var(--cu-accent-border);
    color: var(--cu-accent);
    transform: none;
}

html[data-theme] .tracking-btn.active {
    background: var(--cu-accent-soft);
    border-color: var(--cu-accent-border);
    color: var(--cu-accent);
}

/* ------------------------------------------------------------
   DASHBOARD ADMIN
   ------------------------------------------------------------ */
html[data-theme] .welcome-header {
    background: var(--cu-surface);
    background-image: none;
    border: 1px solid var(--cu-border);
    border-radius: var(--cu-radius-lg);
    box-shadow: var(--cu-shadow-xs);
}

html[data-theme] .welcome-title {
    color: var(--cu-text);
    font-weight: var(--cu-fw-semibold);
    letter-spacing: -0.02em;
}

html[data-theme] .welcome-subtitle {
    color: var(--cu-text-2);
}

html[data-theme] .content-card,
html[data-theme] .chart-wrap {
    background: var(--cu-surface);
    border: 1px solid var(--cu-border);
    border-radius: var(--cu-radius-lg);
    box-shadow: var(--cu-shadow-xs);
}

html[data-theme] .card-header {
    background: var(--cu-surface);
    border-bottom: 1px solid var(--cu-border);
    color: var(--cu-text);
}

html[data-theme] .card-body {
    background: var(--cu-surface);
    color: var(--cu-text);
}

html[data-theme] .stat-trend {
    color: var(--cu-text-2);
    font-size: var(--cu-fs-sm);
}

html[data-theme] .period-chip,
html[data-theme] .quick-btn {
    background: var(--cu-surface);
    background-image: none;
    border: 1px solid var(--cu-border-strong);
    border-radius: var(--cu-radius-pill);
    color: var(--cu-text-2);
    box-shadow: none;
}

html[data-theme] .period-chip:hover,
html[data-theme] .quick-btn:hover {
    background: var(--cu-surface-hover);
    color: var(--cu-text);
    transform: none;
}

html[data-theme] .period-chip.active {
    background: var(--cu-accent);
    border-color: var(--cu-accent);
    color: var(--cu-accent-contrast);
}

html[data-theme] .quick-btn {
    border-radius: var(--cu-radius);
}

html[data-theme] .badge-count {
    background: var(--cu-accent-soft);
    color: var(--cu-accent);
    border-radius: var(--cu-radius-pill);
    font-weight: var(--cu-fw-semibold);
}

html[data-theme] .activity-item,
html[data-theme] .list-row {
    border-bottom: 1px solid var(--cu-border);
    background: transparent;
}

html[data-theme] .activity-item:hover,
html[data-theme] .list-row:hover {
    background: var(--cu-surface-hover);
}

html[data-theme] .activity-icon {
    background: var(--cu-accent-soft);
    color: var(--cu-accent);
    border-radius: var(--cu-radius-sm);
}

html[data-theme] .activity-time {
    color: var(--cu-text-3);
    font-size: var(--cu-fs-sm);
}

html[data-theme] .activity-content {
    color: var(--cu-text);
}

html[data-theme] .user-avatar {
    border: 1px solid var(--cu-border);
    background: var(--cu-accent-soft);
    color: var(--cu-accent);
}

html[data-theme] .user-meta {
    color: var(--cu-text-2);
}

html[data-theme] .rank-table th {
    background: var(--cu-surface-2);
    color: var(--cu-text-2);
    border-bottom: 1px solid var(--cu-border);
}

html[data-theme] .rank-table td {
    border-bottom: 1px solid var(--cu-border);
    color: var(--cu-text);
}

/* ------------------------------------------------------------
   TAREAS - CABECERAS Y FILTROS
   ------------------------------------------------------------ */
html[data-theme] .task-card-header {
    border-bottom: 1px solid var(--cu-border);
}

html[data-theme] .filters-bar,
html[data-theme] .filters-container,
html[data-theme] .tasks-filters {
    background: var(--cu-surface);
    border: 1px solid var(--cu-border);
    border-radius: var(--cu-radius-lg);
    box-shadow: var(--cu-shadow-xs);
}

/* ------------------------------------------------------------
   TAREAS - LISTADO DEL LÍDER (clan_leader/tasks.php)
   ------------------------------------------------------------ */
html[data-theme] .tasks-container {
    background: transparent;
}

html[data-theme] .tasks-header {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

html[data-theme] .tasks-title {
    color: var(--cu-text);
    font-weight: var(--cu-fw-semibold);
    letter-spacing: -0.02em;
}

html[data-theme] .tasks-subtitle {
    color: var(--cu-text-2);
}

html[data-theme] .dept-container-filters,
html[data-theme] .filters-bar {
    background: var(--cu-surface) !important;
    border: 1px solid var(--cu-border) !important;
    border-radius: var(--cu-radius-xl) !important;
    box-shadow: var(--cu-shadow-xs);
}

html[data-theme] .tabs-wrapper {
    background: var(--cu-surface) !important;
    border: 1px solid var(--cu-border) !important;
    border-radius: var(--cu-radius-pill) !important;
    box-shadow: var(--cu-shadow-xs);
    padding: 4px !important;
}

html[data-theme] .tab-btn {
    border-radius: var(--cu-radius-pill) !important;
    color: var(--cu-text-2) !important;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-theme] .tab-btn.active {
    background: var(--cu-accent-soft) !important;
    color: var(--cu-accent) !important;
}

html[data-theme] .stat-box {
    background: var(--cu-surface) !important;
    border: 1px solid var(--cu-border) !important;
    border-radius: var(--cu-radius-lg) !important;
    box-shadow: var(--cu-shadow-xs);
}

html[data-theme] .tasks-table-wrapper {
    background: var(--cu-surface);
    border: 1px solid var(--cu-border);
    border-radius: var(--cu-radius-xl);
    box-shadow: var(--cu-shadow-sm);
    overflow: auto;
    max-height: min(72vh, 820px);
    -webkit-overflow-scrolling: touch;
}

html[data-theme] .tasks-table thead th {
    background: var(--cu-surface-2);
    color: var(--cu-text-2);
    border-bottom: 1px solid var(--cu-border);
    font-size: var(--cu-fs-sm);
    font-weight: var(--cu-fw-semibold);
    position: sticky;
    top: 0;
    z-index: 2;
}

html[data-theme] .tasks-table tbody td {
    border-bottom: 1px solid var(--cu-border);
    color: var(--cu-text);
}

html[data-theme] .tasks-table tbody tr:hover {
    background: var(--cu-surface-hover);
}

html[data-theme] .task-name {
    color: var(--cu-text);
    font-weight: var(--cu-fw-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
}

html[data-theme] .cell-ellipsis {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

html[data-theme] .task-project,
html[data-theme] .due-date,
html[data-theme] .assigned-user {
    color: var(--cu-text-2);
}

html[data-theme] .stat-box {
    background: var(--cu-surface);
    border: 1px solid var(--cu-border);
    border-radius: var(--cu-radius-lg);
    box-shadow: var(--cu-shadow-xs);
}

html[data-theme] .tab-btn {
    background: transparent;
    border-color: transparent;
    color: var(--cu-text-2);
    border-radius: var(--cu-radius-sm);
}

html[data-theme] .tab-btn:hover {
    background: var(--cu-surface-3);
    color: var(--cu-text);
}

html[data-theme] .tab-btn.active {
    background: var(--cu-accent-soft);
    color: var(--cu-accent);
    border-color: transparent;
}

html[data-theme] .custom-select,
html[data-theme] .custom-select-wrapper,
html[data-theme] .inline-status-select,
html[data-theme] .inline-priority-select,
html[data-theme] .filter-select,
html[data-theme] .search-input {
    background: var(--cu-surface);
    border: 1px solid var(--cu-border-strong);
    border-radius: var(--cu-radius-sm);
    color: var(--cu-text);
}

html[data-theme] .custom-select-dropdown,
html[data-theme] .external-users-dropdown {
    background: var(--cu-surface);
    border: 1px solid var(--cu-border);
    border-radius: var(--cu-radius);
    box-shadow: var(--cu-shadow-md);
}

html[data-theme] .custom-option:hover,
html[data-theme] .external-user-item:hover,
html[data-theme] .user-option:hover {
    background: var(--cu-accent-soft);
    color: var(--cu-accent);
}

html[data-theme] .selected-user-tag,
html[data-theme] .company-indicator,
html[data-theme] .ck-tag,
html[data-theme] .collaborator-chip {
    background: var(--cu-accent-soft);
    color: var(--cu-accent);
    border: 1px solid transparent;
    border-radius: var(--cu-radius-pill);
    font-weight: var(--cu-fw-medium);
}

html[data-theme] .member-avatar,
html[data-theme] .modern-avatar,
html[data-theme] .task-collaborator-avatar,
html[data-theme] .collaborator-modal-avatar {
    border: 1px solid var(--cu-border);
}

/* Modal de edición rápida (etm-*) y de clonado (clone-modal-*) */
html[data-theme] .edit-task-overlay,
html[data-theme] .clone-modal-overlay {
    background: var(--cu-overlay);
    backdrop-filter: blur(2px);
}

html[data-theme] .edit-task-modal,
html[data-theme] .clone-modal-content {
    background: var(--cu-surface);
    border: 1px solid var(--cu-border);
    border-radius: var(--cu-radius-xl);
    box-shadow: var(--cu-shadow-lg);
    color: var(--cu-text);
}

html[data-theme] .etm-header,
html[data-theme] .clone-modal-header {
    background: var(--cu-surface);
    background-image: none;
    border-bottom: 1px solid var(--cu-border);
    color: var(--cu-text);
}

html[data-theme] .etm-body,
html[data-theme] .clone-modal-body {
    background: var(--cu-surface);
    color: var(--cu-text);
}

html[data-theme] .etm-footer,
html[data-theme] .clone-modal-footer {
    background: var(--cu-surface-2);
    border-top: 1px solid var(--cu-border);
}

html[data-theme] .etm-close,
html[data-theme] .clone-modal-close {
    background: transparent;
    border: none;
    color: var(--cu-text-2);
    border-radius: var(--cu-radius-sm);
}

html[data-theme] .etm-close:hover,
html[data-theme] .clone-modal-close:hover {
    background: var(--cu-surface-3);
    color: var(--cu-text);
}

html[data-theme] .etm-btn-save,
html[data-theme] .clone-btn-primary {
    background: var(--cu-accent);
    background-image: none;
    border: 1px solid var(--cu-accent);
    color: var(--cu-accent-contrast);
    border-radius: var(--cu-radius-sm);
}

html[data-theme] .etm-btn-cancel,
html[data-theme] .clone-btn-secondary {
    background: var(--cu-surface);
    border: 1px solid var(--cu-border-strong);
    color: var(--cu-text);
    border-radius: var(--cu-radius-sm);
}

html[data-theme] .etm-progress-bar {
    background: var(--cu-surface-3);
    border-radius: var(--cu-radius-pill);
}

html[data-theme] .etm-progress-fill {
    background: var(--cu-accent);
    border-radius: var(--cu-radius-pill);
}

/* ------------------------------------------------------------
   ACCIONES DE FILA (estilo ClickUp)
   Antes cada fila mostraba cinco botones con fondo de color propio.
   Ahora quedan dos acciones primarias neutras y un menú "···" con
   editar, clonar y eliminar. Los iconos se atenúan hasta que el
   cursor entra en la fila, para que la tabla se lea sin ruido.
   ------------------------------------------------------------ */
html[data-theme] .task-actions {
    gap: 2px;
    align-items: center;
}

html[data-theme] .task-actions .btn-action {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--cu-radius-sm);
    color: var(--cu-text-3);
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    box-shadow: none;
    transition: background var(--cu-transition), color var(--cu-transition),
                opacity var(--cu-transition);
}

/* Ligeramente atenuadas en reposo, nunca hasta perderse de vista;
   plenamente visibles al recorrer la fila o al enfocar con teclado */
html[data-theme] .tasks-table tbody tr .task-actions .btn-action {
    opacity: 0.9;
    color: var(--cu-text-2);
}

html[data-theme] .tasks-table tbody tr:hover .task-actions .btn-action,
html[data-theme] .task-actions .btn-action:focus-visible,
html[data-theme] .task-actions .btn-action.active {
    opacity: 1;
}

html[data-theme] .task-actions .btn-action:hover {
    background: var(--cu-surface-3);
    color: var(--cu-text);
}

/* Seguimiento activo: único color permanente, porque comunica estado */
html[data-theme] .task-actions .btn-tracking.active {
    background: var(--cu-accent-soft);
    color: var(--cu-accent);
}

html[data-theme] .task-actions .btn-tracking.active:hover {
    background: var(--cu-accent-soft);
    color: var(--cu-accent);
}

/* Menú desplegable de la fila */
html[data-theme] .row-menu {
    position: relative;
    display: inline-flex;
}

html[data-theme] .row-menu-list {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 9999;
    min-width: 180px;
    padding: 6px;
    background: var(--cu-surface);
    border: 1px solid var(--cu-border);
    border-radius: var(--cu-radius);
    box-shadow: var(--cu-shadow-lg);
    isolation: isolate;
}

html[data-theme] .row-menu-list.hacia-arriba {
    top: auto;
    bottom: calc(100% + 6px);
}

html[data-theme] .row-menu-list.open {
    display: block;
}

/* El contenedor de la tabla recorta por overflow; se libera solo mientras
   hay un menú abierto para que no se corte. */
html[data-theme] .tasks-table-wrapper.menu-abierto {
    overflow: visible;
}

html[data-theme] .tasks-table tbody tr.menu-row-open {
    position: relative;
    z-index: 80;
}

html[data-theme] .tasks-table tbody tr.menu-row-open td.col-actions {
    z-index: 90;
    overflow: visible;
}

html[data-theme] tr.menu-row-open .row-menu {
    z-index: 100;
}

html[data-theme] .row-menu-list button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: var(--cu-radius-xs);
    color: var(--cu-text);
    font-family: var(--cu-font);
    font-size: var(--cu-fs-md);
    text-align: left;
    cursor: pointer;
}

html[data-theme] .row-menu-list button i {
    width: 14px;
    color: var(--cu-text-3);
}

html[data-theme] .row-menu-list button:hover {
    background: var(--cu-surface-3);
}

html[data-theme] .row-menu-list button.row-menu-danger,
html[data-theme] .row-menu-list button.row-menu-danger i {
    color: var(--cu-danger);
}

html[data-theme] .row-menu-list button.row-menu-danger:hover {
    background: var(--cu-danger-soft);
}

/* ------------------------------------------------------------
   GESTIÓN DE TAREAS - UNIFICACIÓN DE COLOR
   La tabla competía por atención: KPI en dorado, clan en verde,
   prioridad y estado en cajas con borde. Ahora la fila es neutra
   y el color queda reservado para estado y urgencia.
   ------------------------------------------------------------ */

/* Puntos KPI: pasa de dorado a acento discreto */
html[data-theme] .tasks-table td span[title*="KPI"] {
    background: var(--cu-accent-soft) !important;
    color: var(--cu-accent) !important;
    border-radius: var(--cu-radius-pill) !important;
    font-weight: var(--cu-fw-semibold) !important;
}

html[data-theme] .tasks-table td span[title*="KPI"] i {
    color: var(--cu-accent) !important;
}

/* Nombre del clan: dato de contexto, no un aviso */
html[data-theme] .tasks-table td .clan-name,
html[data-theme] .tasks-table td a[href*="clan"] {
    color: var(--cu-text-2);
    font-weight: var(--cu-fw-medium);
}

/* Prioridad y estado: píldoras suaves en lugar de cajas con borde */
html[data-theme] .tasks-table .priority-badge,
html[data-theme] .tasks-table .status-badge,
html[data-theme] .tasks-table .inline-status-select,
html[data-theme] .tasks-table .inline-priority-select {
    border-radius: var(--cu-radius-pill);
    border: 1px solid transparent;
    font-size: var(--cu-fs-sm);
    font-weight: var(--cu-fw-medium);
    box-shadow: none;
}

/* Descripción bajo el título: menos peso para marcar jerarquía */
html[data-theme] .task-project,
html[data-theme] .tasks-table .task-name + div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--cu-text-3);
    font-size: var(--cu-fs-sm);
}

/* Fecha vencida: el único rojo de la fila */
html[data-theme] .tasks-table .due-date .vencida,
html[data-theme] .tasks-table .due-date small {
    color: var(--cu-danger);
    font-weight: var(--cu-fw-medium);
}

/* ------------------------------------------------------------
   DASHBOARD KPI / OKRs
   ------------------------------------------------------------ */
html[data-theme] .kpi-page {
    background: transparent;
    max-width: 1400px;
    margin: 0 auto;
    padding: 8px 12px 32px;
}

html[data-theme] .kpi-hero {
    background: linear-gradient(135deg, var(--cu-accent-active) 0%, var(--cu-accent) 55%, #3b82f6 100%);
    border-radius: var(--cu-radius-xl);
    color: #fff;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.18);
}

html[data-theme] .kpi-hero h1,
html[data-theme] .kpi-hero .sub {
    color: #fff;
}

html[data-theme] .kpi-hero-stat {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--cu-radius-lg);
    backdrop-filter: none;
}

html[data-theme] .kpi-card,
html[data-theme] .assign-section {
    background: var(--cu-surface);
    border: 1px solid var(--cu-border);
    border-radius: var(--cu-radius-xl);
    box-shadow: var(--cu-shadow-sm);
}

html[data-theme] .kpi-card h2,
html[data-theme] .assign-section h2 {
    color: var(--cu-text);
    font-size: var(--cu-fs-lg);
    font-weight: var(--cu-fw-semibold);
}

html[data-theme] .kpi-card h2 i {
    color: var(--cu-accent);
}

/* Tarjeta de miembro OKR: el amarillo crema no encaja con la paleta */
html[data-theme] .okr-member-card {
    background: var(--cu-surface-2);
    border: 1px solid var(--cu-border);
    border-radius: var(--cu-radius-lg);
}

html[data-theme] .okr-av {
    border: 2px solid var(--cu-accent-border);
}

html[data-theme] .okr-remaining {
    color: var(--cu-text-2);
}

/* Chips de la carrera anual: se apoyan en el acento, no en un arcoíris */
html[data-theme] .racer-chip {
    border-radius: var(--cu-radius-pill);
    box-shadow: var(--cu-shadow-xs);
}

/* ------------------------------------------------------------
   DETALLE DE TAREA
   ------------------------------------------------------------ */
html[data-theme] .task-detail-container,
html[data-theme] .task-detail-card,
html[data-theme] .detail-section,
html[data-theme] .comment-item,
html[data-theme] .subtask-item,
html[data-theme] .attachment-item,
html[data-theme] .project-info-card,
html[data-theme] .ck-card,
html[data-theme] .motivational-card {
    background: var(--cu-surface);
    border-color: var(--cu-border);
    color: var(--cu-text);
}

html[data-theme] .subtask-item:hover,
html[data-theme] .comment-item:hover,
html[data-theme] .attachment-item:hover {
    background: var(--cu-surface-hover);
}

html[data-theme] .detail-label,
html[data-theme] .subtask-meta,
html[data-theme] .comment-date,
html[data-theme] .attachment-meta,
html[data-theme] .attachment-date,
html[data-theme] .project-subtitle,
html[data-theme] .task-collaborator-email,
html[data-theme] .collaborator-modal-email {
    color: var(--cu-text-2);
    font-size: var(--cu-fs-sm);
}

html[data-theme] .detail-value,
html[data-theme] .subtask-title,
html[data-theme] .attachment-name,
html[data-theme] .project-title,
html[data-theme] .task-collaborator-name {
    color: var(--cu-text);
}

html[data-theme] .subtasks-list {
    border-color: var(--cu-border);
}

html[data-theme] .cbm-filter-chip {
    background: var(--cu-surface);
    border: 1px solid var(--cu-border-strong);
    border-radius: var(--cu-radius-pill);
    color: var(--cu-text-2);
}

html[data-theme] .cbm-filter-chip.active {
    background: var(--cu-accent-soft);
    border-color: var(--cu-accent-border);
    color: var(--cu-accent);
}

html[data-theme] .cbm-loader-overlay {
    background: var(--cu-overlay);
}

html[data-theme] .task-progress-bar,
html[data-theme] .task-progress-container,
html[data-theme] .progress-container {
    background: var(--cu-surface-3);
    border-radius: var(--cu-radius-pill);
}

html[data-theme] .task-progress-fill {
    background: var(--cu-accent);
    border-radius: var(--cu-radius-pill);
}

html[data-theme] .task-progress-text,
html[data-theme] .progress-percentage {
    color: var(--cu-text-2);
    font-size: var(--cu-fs-sm);
}

/* Editor enriquecido (Quill) */
html[data-theme] .rich-editor-container,
html[data-theme] .ql-container,
html[data-theme] .ql-toolbar {
    background: var(--cu-surface);
    border-color: var(--cu-border-strong);
    color: var(--cu-text);
}

html[data-theme] .ql-editor {
    color: var(--cu-text);
}

html[data-theme] .ql-editor.ql-blank::before {
    color: var(--cu-text-3);
}

html[data-theme="dark"] .ql-toolbar .ql-stroke {
    stroke: var(--cu-text-2);
}

html[data-theme="dark"] .ql-toolbar .ql-fill {
    fill: var(--cu-text-2);
}

html[data-theme="dark"] .ql-toolbar .ql-picker-label {
    color: var(--cu-text-2);
}

html[data-theme] .emoji-picker-container {
    background: var(--cu-surface);
    border: 1px solid var(--cu-border);
    border-radius: var(--cu-radius);
    box-shadow: var(--cu-shadow-md);
}

html[data-theme] .emoji-item:hover {
    background: var(--cu-surface-3);
    border-radius: var(--cu-radius-xs);
}

/* ------------------------------------------------------------
   PROYECTOS
   ------------------------------------------------------------ */
html[data-theme] .project-card,
html[data-theme] .proyecto-card {
    background: var(--cu-surface);
    border: 1px solid var(--cu-border);
    border-radius: var(--cu-radius-lg);
    box-shadow: var(--cu-shadow-xs);
}

html[data-theme] .project-card:hover,
html[data-theme] .proyecto-card:hover {
    border-color: var(--cu-accent-border);
    box-shadow: var(--cu-shadow-sm);
    transform: none;
}

html[data-theme] .project-title,
html[data-theme] .project-name {
    color: var(--cu-text);
    font-weight: var(--cu-fw-semibold);
}

html[data-theme] .project-description,
html[data-theme] .project-meta {
    color: var(--cu-text-2);
}

/* --- clan_leader/projects.php: vistas de lista, tabla y tarjetas --- */
html[data-theme] .projects-page .board-container {
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
}

html[data-theme] .minimal-header,
html[data-theme] .table-header-minimal {
    background: var(--cu-surface);
    background-image: none;
    border-bottom: 1px solid var(--cu-border);
    color: var(--cu-text);
}

html[data-theme] .projects-table-minimal,
html[data-theme] .projects-list-view,
html[data-theme] .projects-grid-minimal {
    background: transparent;
}

html[data-theme] .table-row-minimal,
html[data-theme] .project-item-enhanced {
    background: var(--cu-surface);
    border: 1px solid var(--cu-border);
    border-radius: var(--cu-radius-lg);
    box-shadow: var(--cu-shadow-xs);
}

html[data-theme] .table-row-minimal:hover,
html[data-theme] .project-item-enhanced:hover {
    background: var(--cu-surface-hover);
    border-color: var(--cu-accent-border);
    box-shadow: var(--cu-shadow-sm);
    transform: none;
}

html[data-theme] .header-cell {
    background: transparent;
    color: var(--cu-text-2);
    border-bottom: none;
}

html[data-theme] .project-name-minimal,
html[data-theme] .project-name-list,
html[data-theme] .task-title {
    color: var(--cu-text);
    font-weight: var(--cu-fw-medium);
}

html[data-theme] .project-description-minimal,
html[data-theme] .project-description-list,
html[data-theme] .project-meta-minimal,
html[data-theme] .task-meta,
html[data-theme] .task-description,
html[data-theme] .cell-position,
html[data-theme] .stat-label-minimal,
html[data-theme] .pagination-info-monday {
    color: var(--cu-text-2);
}

html[data-theme] .project-icon-minimal,
html[data-theme] .project-icon-list,
html[data-theme] .stat-icon-minimal,
html[data-theme] .clan-icon-large,
html[data-theme] .modal-icon {
    background: var(--cu-accent-soft);
    background-image: none;
    color: var(--cu-accent);
    border-radius: var(--cu-radius);
}

html[data-theme] .project-kpi-minimal,
html[data-theme] .project-kpi-list,
html[data-theme] .task-badges .badge,
html[data-theme] .status-badge-list,
html[data-theme] .task-status,
html[data-theme] .task-priority {
    border-radius: var(--cu-radius-pill);
    font-size: var(--cu-fs-xs);
    font-weight: var(--cu-fw-semibold);
    box-shadow: none;
}

html[data-theme] .progress-bar-minimal,
html[data-theme] .progress-bar-list,
html[data-theme] .progress-container-list {
    background: var(--cu-surface-3);
    border-radius: var(--cu-radius-pill);
}

html[data-theme] .progress-fill-minimal,
html[data-theme] .progress-fill-list {
    background: var(--cu-accent);
    border-radius: var(--cu-radius-pill);
}

html[data-theme] .progress-text-list,
html[data-theme] .stat-number-minimal {
    color: var(--cu-text);
}

html[data-theme] .search-minimal,
html[data-theme] .member-search {
    background: var(--cu-surface);
    border: 1px solid var(--cu-border-strong);
    border-radius: var(--cu-radius-sm);
    color: var(--cu-text);
}

/* Una sola caja: el borde vive en el wrapper, no en el <input> interno */
html[data-theme] .search-input-monday {
    background: var(--cu-surface);
    border: 1px solid var(--cu-border);
    border-radius: 12px;
    color: var(--cu-text);
    box-shadow: var(--cu-shadow-xs);
    gap: 10px;
    padding: 0 14px;
    min-height: 44px;
}

html[data-theme] .search-input-monday:focus-within {
    border-color: var(--cu-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

html[data-theme] .search-container-monday input,
html[data-theme] .search-input-monday input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
    color: var(--cu-text);
    padding: 12px 0 !important;
}

/* Conmutador lista/tarjetas de Proyectos.
   Se excluye .action-btn: en Archivo el botón "Ver tareas" también usa
   .view-btn, pero es un botón sólido con texto blanco y esta regla lo
   dejaba blanco sobre blanco. */
html[data-theme] .view-btn:not(.action-btn),
html[data-theme] .view-toggle-minimal,
html[data-theme] .view-toggle-monday {
    background: var(--cu-surface);
    border: 1px solid var(--cu-border-strong);
    border-radius: var(--cu-radius-sm);
    color: var(--cu-text-2);
}

html[data-theme] .view-btn:not(.action-btn).active {
    background: var(--cu-accent-soft);
    border-color: var(--cu-accent-border);
    color: var(--cu-accent);
}

/* Botones sólidos de acción en Archivo: conservan texto blanco, así que
   necesitan un fondo con contraste suficiente. */
html[data-theme] .action-btn.view-btn {
    background: var(--cu-accent);
    border: 1px solid var(--cu-accent);
    color: #fff;
}

html[data-theme] .action-btn.view-btn:hover {
    background: var(--cu-accent-hover);
    border-color: var(--cu-accent-hover);
}

html[data-theme] .dropdown-menu-minimal,
html[data-theme] .dropdown-menu-list,
html[data-theme] .project-menu-minimal,
html[data-theme] .project-menu {
    background: var(--cu-surface);
    border: 1px solid var(--cu-border);
    border-radius: var(--cu-radius);
    box-shadow: var(--cu-shadow-md);
}

html[data-theme] .menu-item,
html[data-theme] .menu-item-minimal,
html[data-theme] .menu-item-list {
    color: var(--cu-text);
}

html[data-theme] .menu-item:hover,
html[data-theme] .menu-item-minimal:hover,
html[data-theme] .menu-item-list:hover {
    background: var(--cu-accent-soft);
    color: var(--cu-accent);
}

html[data-theme] .member-card {
    background: var(--cu-surface);
    border: 1px solid var(--cu-border);
    border-radius: var(--cu-radius);
}

html[data-theme] .member-card:hover {
    background: var(--cu-surface-hover);
    border-color: var(--cu-accent-border);
}

html[data-theme] .member-name {
    color: var(--cu-text);
}

html[data-theme] .task-item-mini,
html[data-theme] .tasks-list,
html[data-theme] .project-tasks-section {
    background: var(--cu-surface);
    border-color: var(--cu-border);
}

html[data-theme] .task-item-mini:hover {
    background: var(--cu-surface-hover);
}

html[data-theme] .tasks-separator {
    background: var(--cu-border);
}

html[data-theme] .empty-minimal,
html[data-theme] .no-results,
html[data-theme] .no-tasks,
html[data-theme] .loading-tasks {
    color: var(--cu-text-3);
}

html[data-theme] .empty-icon-minimal {
    color: var(--cu-border-strong);
}

/* Modales de confirmación y clonado de proyecto */
html[data-theme] .confirmation-modal-overlay {
    background: var(--cu-overlay);
    backdrop-filter: blur(2px);
}

html[data-theme] .confirmation-modal,
html[data-theme] .clone-project-modal {
    background: var(--cu-surface);
    border: 1px solid var(--cu-border);
    border-radius: var(--cu-radius-xl);
    box-shadow: var(--cu-shadow-lg);
    color: var(--cu-text);
}

html[data-theme] .confirmation-modal-header {
    background: var(--cu-surface);
    background-image: none;
    border-bottom: 1px solid var(--cu-border);
}

html[data-theme] .confirmation-modal-header-warning {
    background: linear-gradient(135deg, var(--cu-accent) 0%, var(--cu-accent-active, #1e40af) 100%);
    border-bottom: none;
}

html[data-theme] .confirmation-modal-header-warning .confirmation-modal-title,
html[data-theme] .confirmation-modal-header-warning .confirmation-modal-title i {
    color: #fff;
}

html[data-theme] .confirmation-modal-header-info {
    background: linear-gradient(135deg, var(--cu-info, #0891B2) 0%, #0e7490 100%);
    border-bottom: none;
}

html[data-theme] .confirmation-modal-header-info .confirmation-modal-title,
html[data-theme] .confirmation-modal-header-info .confirmation-modal-title i {
    color: #fff;
}

html[data-theme] .confirmation-modal-header-danger {
    background: var(--cu-danger, #ef4444);
    border-bottom: none;
}

html[data-theme] .confirmation-modal-header-danger .confirmation-modal-title,
html[data-theme] .confirmation-modal-header-danger .confirmation-modal-title i {
    color: #fff;
}

html[data-theme] .confirmation-modal-title {
    color: var(--cu-text);
}

html[data-theme] .confirmation-modal-message {
    color: var(--cu-text-2);
}

html[data-theme] .confirmation-modal-btn {
    border-radius: var(--cu-radius-sm);
    box-shadow: none;
}

html[data-theme] .confirmation-modal-header-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-bottom: none;
}

html[data-theme] .confirmation-modal-header-success .confirmation-modal-title,
html[data-theme] .confirmation-modal-header-success .confirmation-modal-title i {
    color: #fff;
}

html[data-theme] .confirmation-modal-btn-success,
html[data-theme] .confirmation-modal-btn.confirm.success {
    background: #10b981 !important;
    color: #fff !important;
}

html[data-theme] .confirmation-modal-btn-success:hover,
html[data-theme] .confirmation-modal-btn.confirm.success:hover {
    background: #059669 !important;
}

html[data-theme] .confirmation-modal-actions:has(.confirm):not(:has(.cancel)) {
    justify-content: center;
}

/* Paginación */
html[data-theme] .pagination-container-monday,
html[data-theme] .pagination-controls-monday {
    background: transparent;
}

html[data-theme] .btn-page-monday,
html[data-theme] .btn-pagination-monday {
    background: var(--cu-surface);
    border: 1px solid var(--cu-border-strong);
    border-radius: var(--cu-radius-sm);
    color: var(--cu-text-2);
    box-shadow: none;
}

html[data-theme] .btn-page-monday:hover,
html[data-theme] .btn-pagination-monday:hover {
    background: var(--cu-surface-hover);
    color: var(--cu-text);
}

html[data-theme] .btn-page-monday.active {
    background: var(--cu-accent);
    border-color: var(--cu-accent);
    color: var(--cu-accent-contrast);
}

html[data-theme] .pagination-ellipsis {
    color: var(--cu-text-3);
}

/* Avisos flotantes */
html[data-theme] .toast {
    background: var(--cu-surface);
    border: 1px solid var(--cu-border);
    border-radius: var(--cu-radius);
    box-shadow: var(--cu-shadow-md);
    color: var(--cu-text);
}

html[data-theme] .toast-success { border-left: 3px solid var(--cu-success); }
html[data-theme] .toast-error { border-left: 3px solid var(--cu-danger); }
html[data-theme] .toast-info { border-left: 3px solid var(--cu-info); }

/* ------------------------------------------------------------
   CHAT INTERNO Y BURBUJAS FLOTANTES
   ------------------------------------------------------------ */
html[data-theme] .chat-bubble-button,
html[data-theme] .search-bubble-button {
    background: var(--cu-accent);
    background-image: none;
    color: var(--cu-accent-contrast);
    box-shadow: var(--cu-shadow-md);
}

html[data-theme] .chat-window,
html[data-theme] .search-window {
    background: var(--cu-surface);
    border: 1px solid var(--cu-border);
    border-radius: var(--cu-radius-lg);
    box-shadow: var(--cu-shadow-lg);
    color: var(--cu-text);
}

/* ------------------------------------------------------------
   PANELES INTERNOS CON GRIS FIJO

   Varias vistas pintan sus cabeceras de tabla y sus paneles con
   #f8f9fa o #f9fafb escritos a mano. Sobre una tarjeta blanca eso
   da 1.03:1: el bloque existe pero no se ve. Al reapuntarlos a los
   tokens recuperan borde y separación, y de paso dejan de aparecer
   como recuadros blancos en modo oscuro.
   ------------------------------------------------------------ */
html[data-theme] .table-header,
html[data-theme] .data-table th,
html[data-theme] .reprimands-table th {
    background: var(--cu-surface-2);
    border-bottom: 1px solid var(--cu-border);
    color: var(--cu-text-2);
}

html[data-theme] .table-row:hover,
html[data-theme] .reprimands-table tr:hover,
html[data-theme] .menu-item:hover,
html[data-theme] .menu-item-list:hover,
html[data-theme] .user-option:hover,
html[data-theme] .user-result-item:hover {
    background: var(--cu-surface-hover);
}

html[data-theme] .project-description-box,
html[data-theme] .comment-item-detail,
html[data-theme] .status-row,
html[data-theme] .view-toggle,
html[data-theme] .gantt-sidebar {
    background: var(--cu-surface-2);
    border-color: var(--cu-border);
    color: var(--cu-text);
}

/* Estas dos llevan el color en el atributo style de la vista, así que
   solo se alcanzan con !important. */
html[data-theme] .subtask-card,
html[data-theme] .add-comment-section,
html[data-theme] .add-attachment-section {
    background: var(--cu-surface-2) !important;
    border-color: var(--cu-border) !important;
    color: var(--cu-text);
}
