/* =========================================================
   CDS Project Control — components.css
   ========================================================= */

/* ---------- Sidebar (desktop) ---------- */

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--color-sidebar);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 20;
}

@media (max-width: 991.98px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
    z-index: 40; /* por encima del header mobile (30) y del overlay (35) */
  }
  .sidebar.is-open {
    transform: translateX(0);
  }
}

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 8px 20px;
}

.sidebar-brand-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sidebar-close-btn {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  border-radius: var(--radius-button);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.sidebar-close-btn:hover {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.sidebar-brand-logo {
  width: 180px;
  height: auto;
  display: block;
}

[data-mode="dark"] .sidebar-brand-logo {
  filter: invert(1) brightness(1.15);
}

.sidebar-brand-sub {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-button);
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 500;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.sidebar-link i {
  font-size: 16px;
  width: 18px;
  text-align: center;
  transition: transform var(--transition-fast);
}

.sidebar-link:hover i {
  transform: scale(1.15);
}

.sidebar-link.is-active i {
  transform: scale(1.1);
}

.sidebar-link:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-text);
}

.sidebar-link:focus {
  outline: none;
}

.sidebar-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 45%, transparent);
}

.sidebar-link.is-active {
  background: color-mix(in srgb, var(--color-primary) 16%, transparent);
  color: var(--color-primary);
}

/* Tema CDS: el ítem activo del menú se ve mucho más fuerte — fondo
   sólido del color primario en vez del tinte suave, texto e ícono en
   blanco. El hover NO se toca acá, sigue igual que en el resto de los
   temas (así se pidió explícitamente). */
[data-theme="cds"] .sidebar-link.is-active {
  background: var(--color-primary);
  color: #ffffff;
}

/* El badge de abajo (ej. el numerito de Notificaciones) por defecto es
   texto color-primary sobre un tinte muy suave de color-primary — se lee
   bien sobre el fondo claro normal del sidebar. Pero acá arriba, en CDS,
   el ítem activo tiene fondo SÓLIDO color-primary, así que ese mismo
   badge quedaba prácticamente invisible (azul sobre azul). Sobre ese
   fondo sólido pasa a blanco translúcido con texto blanco, como
   corresponde a un badge sobre un fondo de color fuerte. */
[data-theme="cds"] .sidebar-link.is-active .status-badge {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}

.sidebar-footer {
  border-top: 1px solid var(--color-border);
  padding-top: 16px;
  margin-top: 12px;
}

.sidebar-user-card {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 12px 14px;
  margin-bottom: 8px;
}

.sidebar-user-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.sidebar-user-name {
  font-weight: 700;
  font-size: 14px;
}

.sidebar-user-role {
  font-size: 12px;
  color: var(--color-primary);
}

.sidebar-logout {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-button);
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 500;
}

.sidebar-logout:hover {
  color: var(--color-danger);
}

/* ---------- Header mobile ---------- */

.mobile-header {
  display: none;
}

@media (max-width: 991.98px) {
  .mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-mobile-height);
    padding: 0 16px;
    background: var(--color-sidebar);
    border-bottom: 1px solid var(--color-border);
    z-index: 30;
  }
}

.mobile-header-btn {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: var(--radius-button);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.mobile-header-brand {
  font-family: var(--font-heading-active);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.mobile-notif-badge {
  position: relative;
}

.mobile-notif-badge .badge-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-danger);
}

.browser-notif-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-panel));
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  border-radius: var(--radius-card);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--color-text);
}

.browser-notif-banner i.bi-bell {
  color: var(--color-primary);
  font-size: 16px;
  flex-shrink: 0;
}

.browser-notif-banner span {
  flex: 1;
}

.browser-notif-dismiss {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 2px;
  line-height: 1;
  flex-shrink: 0;
}

.browser-notif-dismiss:hover {
  color: var(--color-text);
}

.sidebar-overlay {
  display: none;
}

@media (max-width: 991.98px) {
  .sidebar-overlay.is-open {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 35; /* por encima del header (30), por debajo del drawer (40) */
  }
}

/* ---------- Panels & cards ---------- */

.panel-card {
  background: var(--color-panel);
  backdrop-filter: var(--color-card-blur);
  -webkit-backdrop-filter: var(--color-card-blur);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 20px 22px;
}

.metric-card {
  background: var(--color-card);
  backdrop-filter: var(--color-card-blur);
  -webkit-backdrop-filter: var(--color-card-blur);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

a.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card), var(--glow-primary);
  border-color: var(--color-primary);
}

/* Accesos rápidos (Web/Panel del cliente en el detalle de tarea): mismo
   look que .metric-card pero con un acento permanente (no solo al hover)
   para que se noten como acción, no como un dato de solo lectura. */
.metric-card-link {
  cursor: pointer;
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  text-decoration: none;
  color: inherit;
}

.metric-card-link .metric-card-icon {
  color: var(--color-primary);
}

.metric-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.metric-card-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.metric-card-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-primary);
  font-size: 14px;
}

.metric-card-value {
  font-family: var(--font-heading-active);
  font-size: 30px;
  font-weight: 700;
}

/* =========================================================
   Tema CDS — rediseño de las tarjetas de métrica (aplica a
   las 11 pantallas que usan .metric-card, no solo Dashboard,
   para que el tema sea consistente en toda la app).
   ========================================================= */

/* Ícono a la izquierda, pegado al label (antes: label...ícono a los
   extremos). Se logra con "order" — sin tocar ningún archivo PHP,
   el ícono sigue siendo el segundo elemento en el HTML. */
[data-theme="cds"] .metric-card-top {
  justify-content: flex-start;
  gap: 10px;
}
[data-theme="cds"] .metric-card-icon {
  order: -1;
  flex-shrink: 0;
}

/* Colores semánticos por ícono — mismo criterio que ya se usa en el
   resto de la app (rojo = urgente, naranja = necesita atención, verde =
   resuelto/positivo, gris = a la espera de otro). El resto de los
   íconos queda con el azul primario de siempre, sin cambios. */
[data-theme="cds"] .metric-card-icon:has(.bi-exclamation-triangle),
[data-theme="cds"] .metric-card-icon:has(.bi-slash-circle) {
  background: color-mix(in srgb, var(--color-danger) 15%, transparent);
  color: var(--color-danger);
}
[data-theme="cds"] .metric-card-icon:has(.bi-exclamation-circle),
[data-theme="cds"] .metric-card-icon:has(.bi-pause-circle) {
  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
  color: var(--color-warning);
}
[data-theme="cds"] .metric-card-icon:has(.bi-check-circle) {
  background: color-mix(in srgb, var(--color-success) 15%, transparent);
  color: var(--color-success);
}
[data-theme="cds"] .metric-card-icon:has(.bi-people),
[data-theme="cds"] .metric-card-icon:has(.bi-eye) {
  background: color-mix(in srgb, var(--color-neutral) 20%, transparent);
  color: var(--color-neutral);
}

/* Rayita de color debajo del número — toma el mismo color semántico
   del ícono de esa misma tarjeta (vía :has(), sin JS ni tocar PHP). */
[data-theme="cds"] .metric-card-value {
  position: relative;
  padding-bottom: 12px;
}
[data-theme="cds"] .metric-card-value::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-primary);
}
[data-theme="cds"] .metric-card:has(.bi-exclamation-triangle) .metric-card-value::after,
[data-theme="cds"] .metric-card:has(.bi-slash-circle) .metric-card-value::after {
  background: var(--color-danger);
}
[data-theme="cds"] .metric-card:has(.bi-exclamation-circle) .metric-card-value::after,
[data-theme="cds"] .metric-card:has(.bi-pause-circle) .metric-card-value::after {
  background: var(--color-warning);
}
[data-theme="cds"] .metric-card:has(.bi-check-circle) .metric-card-value::after {
  background: var(--color-success);
}
[data-theme="cds"] .metric-card:has(.bi-people) .metric-card-value::after,
[data-theme="cds"] .metric-card:has(.bi-eye) .metric-card-value::after {
  background: var(--color-neutral);
}

/* "Necesitan decisión" destacada como alerta ejecutiva: mismo ícono
   (bi-exclamation-circle) que ya la distingue de las demás, más un
   borde y fondo tenues para que salte a la vista sin ser agresivo. */
[data-theme="cds"] .metric-card:has(.bi-exclamation-circle) {
  border-color: color-mix(in srgb, var(--color-warning) 45%, var(--color-border));
  background: color-mix(in srgb, var(--color-warning) 5%, var(--color-card));
}

/* ---------- Badges ---------- */

.status-badge,
.priority-badge,
.role-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-badge);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
}

.badge-primary {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
}

.badge-success {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 14%, transparent);
  border-color: color-mix(in srgb, var(--color-success) 35%, transparent);
}

.badge-warning {
  color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 16%, transparent);
  border-color: color-mix(in srgb, var(--color-warning) 35%, transparent);
}

.badge-danger {
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 14%, transparent);
  border-color: color-mix(in srgb, var(--color-danger) 35%, transparent);
}

.badge-neutral {
  color: var(--color-text-muted);
  background: color-mix(in srgb, var(--color-neutral) 20%, transparent);
  border-color: color-mix(in srgb, var(--color-neutral) 40%, transparent);
}

.badge-review {
  color: var(--color-review);
  background: color-mix(in srgb, var(--color-review) 14%, transparent);
  border-color: color-mix(in srgb, var(--color-review) 35%, transparent);
}

/* ---------- Barra de progreso ---------- */

.progressbar-custom {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-neutral) 25%, transparent);
  overflow: hidden;
}

.progressbar-custom-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 999px;
  transition: width var(--transition-base);
}

/* ---------- Botones ---------- */

.btn-cds-primary {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border: none;
  border-radius: var(--radius-button);
  padding: 11px 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: var(--glow-primary);
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-cds-primary:hover {
  background: var(--color-primary-hover);
  color: var(--color-primary-contrast);
}

.btn-cds-secondary {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  padding: 10px 16px;
  font-weight: 600;
}

.btn-cds-secondary:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ---------- Formularios ---------- */

.form-label-cds {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.form-control-cds {
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  color: var(--color-text);
  padding: 12px 14px;
  font-size: 14px;
  font-family: var(--font-body);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

[data-theme="saas"][data-mode="light"] .form-control-cds,
[data-theme="futurista"][data-mode="light"] .form-control-cds {
  background: #ffffff;
}

.form-control-cds:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.form-control-cds::placeholder {
  color: var(--color-text-muted);
}

/* ---------- Login ---------- */

.login-split {
  position: relative;
  min-height: 100vh;
  display: flex;
  overflow: hidden;
}

/* Fondo a pantalla completa — atrás de TODO (tanto del texto de la
   izquierda como de la card de la derecha), no solo de la mitad
   izquierda. La card flota encima con vidrio esmerilado (ver .login-card
   más abajo) para que la foto se siga viendo, borrosa, detrás suyo. */
.login-bg-slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
}

.login-bg-slide.is-active {
  opacity: 1;
}

.login-shell-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(6, 12, 20, 0.5) 0%, rgba(6, 12, 20, 0.25) 45%, rgba(6, 12, 20, 0.6) 100%);
}

.login-visual-content {
  position: relative;
  z-index: 1;
  flex: 1.15;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px;
  color: #fff;
  box-sizing: border-box;
}

.login-visual-logo {
  width: 220px;
  height: auto;
  display: block;
}

.login-visual-sub {
  font-size: 13px;
  letter-spacing: 0.06em;
  margin-top: 6px;
  color: var(--color-primary);
  font-weight: 600;
}

.login-visual-tagline {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.35;
  margin-bottom: 18px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.login-bg-dots {
  display: flex;
  gap: 8px;
}

.login-bg-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transition: background var(--transition-fast);
}

.login-bg-dot.is-active {
  background: var(--color-primary);
}

.login-panel {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* La card: vidrio esmerilado real — fondo oscuro semitransparente +
   blur fuerte, así se ve la foto de fondo pasando borrosa detrás, pero
   el contenido (usuario/contraseña) se sigue leyendo con contraste de
   sobra. */
.login-card {
  width: 100%;
  max-width: 400px;
  background: rgba(8, 14, 22, 0.55);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  padding: 40px 36px;
  text-align: center;
  box-sizing: border-box;
  color: #fff;
}

.login-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-primary) 16%, transparent);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  font-size: 22px;
}

.login-title {
  font-family: var(--font-heading-active);
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 6px;
}

.login-subtitle {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 26px;
}

.login-form {
  text-align: left;
}

.login-field {
  margin-bottom: 16px;
}

.login-card .form-label-cds {
  margin-bottom: 6px;
  line-height: 1.2;
}

.login-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.login-input-wrap > i:first-child {
  position: absolute;
  left: 16px;
  color: var(--color-text-muted);
  font-size: 15px;
  pointer-events: none;
}

.login-card .form-control-cds {
  background: color-mix(in srgb, var(--color-bg) 85%, transparent);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  height: 48px;
  padding: 0 44px;
  box-sizing: border-box;
  width: 100%;
}

.login-card .form-control-cds:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.login-card .form-control-cds:-webkit-autofill,
.login-card .form-control-cds:-webkit-autofill:hover,
.login-card .form-control-cds:-webkit-autofill:focus,
.login-card .form-control-cds:-webkit-autofill:active {
  -webkit-text-fill-color: var(--color-text) !important;
  caret-color: var(--color-text);
  box-shadow: 0 0 0 1000px var(--color-bg) inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

.login-card .form-control-cds:autofill {
  -webkit-text-fill-color: var(--color-text) !important;
  caret-color: var(--color-text);
  box-shadow: 0 0 0 1000px var(--color-bg) inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

.login-toggle-password {
  position: absolute;
  right: 14px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 15px;
  padding: 4px;
  line-height: 1;
}

.login-toggle-password:hover {
  color: var(--color-text);
}

.login-row-forgot {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.login-forgot-text {
  font-size: 12px;
  color: var(--color-text-muted);
}

.login-error {
  background: color-mix(in srgb, var(--color-danger) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-danger) 40%, transparent);
  color: var(--color-danger);
  border-radius: var(--radius-button);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 18px;
}

.login-submit-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--color-primary);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.login-submit-btn:hover {
  transform: scale(1.01);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.login-submit-btn:active {
  transform: scale(0.99);
}

.login-footer {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

@media (max-width: 900px) {
  .login-visual-content {
    display: none;
  }

  .login-panel {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .login-card {
    padding: 32px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-bg-slide {
    transition: none;
  }
}

/* ---------- Personalización (theme cards) ---------- */

.theme-card {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 20px;
}

.theme-card.is-active-theme {
  box-shadow: var(--glow-primary);
  border-color: var(--color-primary);
}

.theme-preview {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  gap: 8px;
  height: 130px;
}

.theme-preview-sidebar {
  width: 28%;
  border-radius: 6px;
}

.theme-preview-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.theme-preview-bar {
  height: 14px;
  border-radius: 4px;
}

.theme-mode-option {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.theme-mode-option.is-selected {
  border-color: var(--color-primary);
  box-shadow: var(--glow-primary);
}

/* ---------- Tabla de datos ---------- */

.table-cds-wrapper {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-card);
}

.active-work-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-card));
  border: 1px solid var(--color-primary);
  color: var(--color-text);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  text-decoration: none;
  transition: background var(--transition-fast);
}

.active-work-chip:hover {
  background: color-mix(in srgb, var(--color-primary) 22%, var(--color-card));
  color: var(--color-text);
}

/* ---------- Accesos directos ---------- */

.resource-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.resource-link-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.resource-link-open {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resource-link-open:hover {
  color: var(--color-primary);
}

.resource-link-url {
  font-size: 12px;
  color: var(--color-text-muted);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resource-link-url:hover {
  color: var(--color-primary);
}

.resource-link-star {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 15px;
  padding: 0;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.resource-link-star.is-favorite {
  color: var(--color-warning);
}

.resource-link-actions {
  display: flex;
  gap: 2px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--color-border);
}

.resource-link-add-card {
  background: none;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-card);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--color-text-muted);
  font-size: 12px;
  min-height: 72px;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.resource-link-add-card:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.resource-link-add-card i {
  font-size: 18px;
}

.table-cds {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.table-cds thead th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
}

.table-cds tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
}

.table-cds tbody tr:last-child td {
  border-bottom: none;
}

/* ---------- Estado vacío ---------- */

.empty-state {
  text-align: center;
  padding: 32px 16px;
  color: var(--color-text-muted);
  font-size: 14px;
}

/* ---------- Módulo "en construcción" (stub) ---------- */

.stub-panel {
  text-align: center;
  padding: 64px 24px;
}

.stub-panel i {
  font-size: 34px;
  color: var(--color-primary);
  margin-bottom: 14px;
  display: inline-block;
}

/* ---------- Modales (Bootstrap) themeados ---------- */

.modal-content {
  background: var(--color-panel);
  backdrop-filter: var(--color-card-blur);
  -webkit-backdrop-filter: var(--color-card-blur);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  color: var(--color-text);
}

/* HOTFIX v2: la v1 de este fix tenía un bug de especificidad CSS real —
   este modal usa la clase modal-dialog-scrollable, y Bootstrap define
   ".modal-dialog-scrollable .modal-content" / ".modal-dialog-scrollable
   .modal-body" (2 clases), que le gana en especificidad a mis reglas
   ".modal-content" / ".modal-body" (1 clase) de la v1, sin importar el
   orden en que se cargan las hojas de estilo. La v1 nunca llegó a
   aplicarse en ningún modal que tuviera esa clase — exactamente el caso
   de "Editar tarea". Ahora se cubren EXPLÍCITAMENTE ambas variantes de
   selector (con y sin modal-dialog-scrollable) y se agrega !important
   como garantía adicional, para que nada más pueda volver a ganarle.

   Causa raíz de fondo (sin cambios respecto a la v1): Bootstrap define
   .modal-body como flex:1 1 auto pero sin min-height:0 — un ítem flex sin
   esa propiedad nunca se achica por debajo de la altura de su propio
   contenido (bug clásico de flexbox + overflow), así que aunque
   .modal-body tenga overflow-y:auto, nunca llega a activarse. En una
   pantalla alta el problema nunca se dispara; en una más baja, sí. */
.modal-dialog,
.modal-dialog-scrollable {
  max-height: calc(100vh - 3.5rem) !important;
}

.modal-content,
.modal-dialog-scrollable .modal-content {
  max-height: calc(100vh - 3.5rem) !important;
  overflow: hidden !important;
}

.modal-body,
.modal-dialog-scrollable .modal-body {
  overflow-y: auto !important;
  min-height: 0 !important;
}

/* HOTFIX v3 — esta es la causa real, confirmada mirando el DOM real en
   el inspector (las v1 y v2 corregían un problema real pero secundario;
   este es el que efectivamente lo estaba rompiendo).

   Casi todos los modales de "crear/editar" del sistema envuelven
   TODO su contenido (header + body + footer) en un único <form>, que a su
   vez es HIJO DIRECTO de .modal-content:

     .modal-content > form > (.modal-header, .modal-body, .modal-footer)

   .modal-content es flex (flex-direction: column), pero sus "hijos flex"
   son sus hijos DIRECTOS — y el único hijo directo acá es el <form>, no
   el header/body/footer. Todo el CSS de flex que Bootstrap (y las reglas
   de arriba) le ponen a .modal-body — flex:1 1 auto, min-height:0,
   overflow-y:auto — no tiene ningún efecto, porque .modal-body nunca fue
   un hijo flex de nada: es un <div> común y corriente adentro de un
   <form> normal (display:block). El <form>, al no tener su propia altura
   acotada, simplemente crece a la altura de su contenido — y como
   .modal-content sí tiene overflow:hidden, todo lo que no entra
   (típicamente el footer con el botón de Guardar) queda directamente
   invisible, sin ningún scroll posible.

   La solución: darle al <form> el mismo tratamiento flex, para que el
   recorte de altura se transmita correctamente hacia adentro. */
.modal-content > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.modal-header,
.modal-footer {
  flex-shrink: 0;
}

.modal-header,
.modal-footer {
  border-color: var(--color-border);
}

.modal-title {
  font-family: var(--font-heading-active);
  font-weight: 700;
}

[data-mode="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.modal-backdrop.show {
  opacity: 0.65;
}

/* ---------- Filtros tipo "pill" (Activos / Todos / Inactivos) ---------- */

.filter-pills {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

.filter-pill {
  padding: 8px 16px;
  border-radius: var(--radius-badge);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
  background: transparent;
}

.filter-pill.is-active {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border-color: var(--color-primary);
}

/* ---------- Iconos de acción en tablas ---------- */

.table-action-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--color-text-muted);
  border: 1px solid transparent;
  background: transparent;
}

.table-action-icon:hover {
  color: var(--color-primary);
  border-color: var(--color-border);
}

.table-action-icon.action-danger:hover {
  color: var(--color-danger);
}

.table-action-icon.action-success {
  color: var(--color-success);
}

.table-action-icon.action-warning {
  color: var(--color-warning);
}

/* ---------- ClientPicker (autocompletar) ---------- */

.client-picker {
  position: relative;
}

.client-picker-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  box-shadow: var(--shadow-card);
  max-height: 220px;
  overflow-y: auto;
  z-index: 50;
  display: none;
}

.client-picker-results.is-open {
  display: block;
}

.client-picker-item {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 14px;
}

.client-picker-item:hover,
.client-picker-item.is-highlighted {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.client-picker-empty {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* ---------- Timeline ---------- */

.timeline-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.timeline-item {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}

.timeline-item:last-child {
  border-bottom: none;
}

.timeline-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-primary);
  font-size: 14px;
}

.timeline-title {
  font-weight: 600;
  font-size: 14px;
}

.timeline-meta {
  font-size: 12px;
  color: var(--color-text-muted);
}

.timeline-description {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 2px;
  white-space: pre-line;
}

/* ---------- Historial completo por cliente (página dedicada) ---------- */

.timeline-year-divider {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 5px 16px;
  border-radius: 999px;
  margin: 20px 0 14px;
}

.timeline-entry-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-card);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.timeline-entry-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}

.timeline-entry-header .timeline-dot {
  width: 26px;
  height: 26px;
  font-size: 12px;
}

.timeline-entry-header strong {
  font-size: 14px;
}

.timeline-entry-area-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.timeline-entry-description {
  font-size: 13px;
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-bg) 60%, transparent);
  border-left: 2px solid var(--color-border);
  padding: 8px 12px;
  border-radius: 6px;
  margin: 8px 0;
  white-space: pre-line;
}

.timeline-entry-comment {
  border-left-color: var(--color-success);
}

.timeline-entry-label {
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  margin-right: 4px;
}

.timeline-entry-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.timeline-entry-footer a {
  margin-left: auto;
}

/* ---------- Centro de recursos (búsqueda de texto completo, cruza todos los clientes) ---------- */

.resource-search-grid {
  columns: 420px 3;
  column-gap: 14px;
}

.resource-search-grid > .timeline-entry-card {
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 14px;
}

.timeline-entry-client-line {
  font-size: 12px;
  color: var(--color-primary);
  margin-bottom: 2px;
}

/* ---------- Comentarios ---------- */

.comment-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  padding: 12px 14px;
  margin-bottom: 10px;
}

.comment-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.comment-author {
  font-weight: 700;
  font-size: 13px;
}

.comment-meta {
  font-size: 11px;
  color: var(--color-text-muted);
}

.comment-text {
  font-size: 14px;
  white-space: pre-wrap;
}

/* =========================================================
   Datos operativos en tablas/listados — clases específicas
   (corrección de contraste: no reusar .text-muted de Bootstrap,
   que trae su propio color fijo con !important y pisa cualquier
   variable de tema sin importar el orden de los <link>).
   Todas resuelven al mismo color de alto contraste del tema activo.
   ========================================================= */
.table-secondary-text,
.table-related-link,
.table-date,
.table-meta,
.table-client-link,
.table-project-link,
.table-area-link {
  color: var(--color-text-readable-secondary) !important;
  opacity: 1 !important;
}

.table-related-link,
.table-client-link,
.table-project-link,
.table-area-link {
  text-decoration: none;
}

.table-related-link:hover,
.table-client-link:hover,
.table-project-link:hover,
.table-area-link:hover {
  color: var(--color-primary) !important;
  text-decoration: underline;
}

/* ---------- Priorizar (drag and drop) ---------- */

.priorizar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  background: var(--color-card);
  margin-bottom: 6px;
  cursor: grab;
  transition: box-shadow var(--transition-fast), opacity var(--transition-fast);
}

.priorizar-row:active {
  cursor: grabbing;
}

.priorizar-row.is-dragging {
  opacity: 0.4;
}

.priorizar-drag-handle {
  color: var(--color-text-muted);
  font-size: 16px;
  flex-shrink: 0;
}

.priorizar-row-main {
  flex: 1;
  min-width: 0;
}

.priorizar-row-title {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.priorizar-row-sub {
  font-size: 12px;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-sort-link {
  color: inherit;
  text-decoration: none;
}

.table-sort-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ---------- "Tu resumen" (Dashboard) ---------- */

.my-summary-card {
  background: color-mix(in srgb, var(--color-review) 10%, var(--color-card));
  border: 1px solid color-mix(in srgb, var(--color-review) 30%, var(--color-border));
  border-radius: var(--radius-card);
  padding: 16px 20px;
  margin-bottom: 20px;
}

.my-summary-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}

.my-summary-header i {
  color: var(--color-review);
  font-size: 17px;
}

.my-summary-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.my-summary-stat-value {
  font-family: var(--font-heading-active);
  font-size: 22px;
  font-weight: 700;
}

.my-summary-stat-label {
  font-size: 12px;
  color: var(--color-text-muted);
}

.recognition-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.recognition-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.recognition-body {
  min-width: 0;
}

.recognition-line {
  margin: 0;
  font-size: 12px;
}

.recognition-message {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--color-text-muted);
  font-style: italic;
}

.recognition-meta {
  margin: 2px 0 0;
  font-size: 10px;
  color: var(--color-text-muted);
}