/* ============================================================
   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 - CORRECCIÓN DE RECORTE
   monday-theme.css usa justify-content:center en .kanban-wrapper,
   que además tiene overflow-x:auto. Cuando las columnas no caben,
   el centrado reparte el desbordamiento a ambos lados y la parte
   izquierda queda INALCANZABLE por scroll: la primera columna
   ("Vencidas") aparecía cortada de forma permanente.
   ------------------------------------------------------------ */
html[data-theme] .kanban-wrapper {
    justify-content: flex-start;
}

/* ------------------------------------------------------------
   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: 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] .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] .tasks-table-wrapper {
    background: var(--cu-surface);
    border: 1px solid var(--cu-border);
    border-radius: var(--cu-radius-lg);
    box-shadow: var(--cu-shadow-xs);
    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: 1200;
    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);
}

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] .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
   El encabezado y los acentos usaban azul y naranja heredados.
   Se alinean con el acento del sistema manteniendo el verde y el
   rojo solo donde comunican resultado.
   ------------------------------------------------------------ */
html[data-theme] .kpi-hero {
    background: linear-gradient(135deg, var(--cu-accent-active) 0%, var(--cu-accent) 55%, var(--cu-indigo) 100%);
    border-radius: var(--cu-radius-xl);
    color: #fff;
}

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 {
    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] .kpi-card 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] .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: var(--cu-surface-2);
    color: var(--cu-text-2);
    border-bottom: 1px solid var(--cu-border);
}

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] .search-input-monday,
html[data-theme] .search-container-monday input,
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);
}

/* 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-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;
}

/* 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);
}
