/* ============================================================
   CEDECÁMARA — Theme tokens & base
   ============================================================ */

:root {
  /* Brand */
  --cc-blue:   #1D70B7;
  --cc-blue-700: #155A95;
  --cc-blue-900: #0E3A60;
  --cc-green:  #95C11E;
  --cc-green-700: #75981A;
  --cc-yellow: #EDD708;
  --cc-yellow-700: #C7B606;
  --cc-indigo:     #5B4BC4;
  --cc-indigo-700: #473A9E;
  --cc-orange:     #A35C05;   /* naranja de badge / cabecera conocimiento */
  --cc-orange-alt: #B45309;   /* naranja de urgencia LMS */
  --cc-violet:     #7C5CBF;   /* tipo cuestionario */
  --cc-olive:      #5E7D12;   /* nota aprobatoria en grades */

  /* Primary -> Brand blue (overridable via tweaks) */
  --primary:        var(--cc-blue);
  --primary-hover:  var(--cc-blue-700);
  --primary-dark:   var(--cc-blue-900);
  --primary-soft:   #E7F1FA;
  --accent:         var(--cc-green);
  --accent-soft:    #F1F8DF;

  /* Bootstrap 5.3 — alinear utilidades nativas de color (bg-primary,
     text-primary, bg-primary-subtle, text-bg-primary, btn-primary
     nativo, etc.) con el azul de marca en vez del azul genérico
     #0d6efd por defecto. Auditado: ningún uso existente en el proyecto
     depende del azul de Bootstrap por defecto para diferenciarse del
     azul de marca — cambio seguro, mejora consistencia visual. */
  --bs-primary: var(--cc-blue);
  --bs-primary-rgb: 29, 112, 183;
  --bs-primary-text-emphasis: var(--cc-blue-900);
  --bs-primary-bg-subtle: var(--primary-soft);
  --bs-primary-border-subtle: #B5D4F4;

  /* Neutrals (light mode) */
  --bg:           #F4F6F9;
  --surface:      #FFFFFF;
  --surface-2:    #FAFBFC;
  --border:       #E5E9EF;
  --border-strong:#CBD2DC;
  --text:         #1B2330;
  --text-muted:   #5A6373;
  --text-soft:    #8590A2;
  --text-faint:   #C4CAD4;   /* cuarto nivel de atenuación, bajo --text-soft:
                               solo para valor ausente / sin dato */

  /* States */
  --success: #10A65C;
  --warning: #E59A0A;
  --danger:  #DC3545;
  --info:    #1D70B7;

  /* Spacing scale (compact ERP) */
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 16px;
  --sp-6: 20px;
  --sp-7: 28px;

  /* Radii */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 10px;
  --radius-md: 10px;

  /* Type scale (compact) */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-base: 13.5px;
  --fs-lg: 15px;
  --fs-xl: 18px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;

  /* Header */
  --header-h: 52px;
  --topbar-h: 36px;

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(20, 35, 60, .06), 0 1px 1px rgba(20, 35, 60, .04);
  --shadow-2: 0 4px 14px rgba(20, 35, 60, .08), 0 2px 4px rgba(20, 35, 60, .04);
  --shadow-3: 0 12px 32px rgba(20, 35, 60, .14), 0 4px 8px rgba(20, 35, 60, .06);

  /* Ciclo académico — compartidos: hi.js emite el chip .cc-asig-v2-ciclo
     globalmente (Tom Select), y asignación / calendario los reutilizan.
     -bd trazo, -bg fondo, -fg texto. El ámbar de ciclo 3 es #C7980A, no
     --cc-yellow-700 (#C7B606). */
  --ciclo-1-bd: #1D70B7;
  --ciclo-1-bg: #EBF4FF;
  --ciclo-1-fg: #0E3A60;
  --ciclo-2-bd: #10A65C;
  --ciclo-2-bg: #EDFBF3;
  --ciclo-2-fg: #075C34;
  --ciclo-3-bd: #C7980A;
  --ciclo-3-bg: #FDF8E7;
  --ciclo-3-fg: #6B5000;
  --ciclo-4-bd: #7C5CBF;
  --ciclo-4-bg: #F3EEFF;
  --ciclo-4-fg: #3D2070;
}

/* Dark mode */
[data-theme="dark"] {
  --bg:           #0E141C;
  --surface:      #161D27;
  --surface-2:    #1B2230;
  --border:       #242C39;
  --border-strong:#33405A;
  --text:         #E5E9EF;
  --text-muted:   #94A0B3;
  --text-soft:    #6B7689;
  --primary-soft: rgba(29,112,183,.18);
  --accent-soft:  rgba(149,193,30,.18);
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 4px 14px rgba(0,0,0,.4);
  --shadow-3: 0 12px 32px rgba(0,0,0,.55);

  /* Ciclo: -bd no se toca; -bg/-fg se derivan de él sobre --surface/--text. */
  --ciclo-1-bg: color-mix(in srgb, var(--ciclo-1-bd) 20%, var(--surface));
  --ciclo-1-fg: color-mix(in srgb, var(--ciclo-1-bd) 45%, var(--text));
  --ciclo-2-bg: color-mix(in srgb, var(--ciclo-2-bd) 20%, var(--surface));
  --ciclo-2-fg: color-mix(in srgb, var(--ciclo-2-bd) 45%, var(--text));
  --ciclo-3-bg: color-mix(in srgb, var(--ciclo-3-bd) 20%, var(--surface));
  --ciclo-3-fg: color-mix(in srgb, var(--ciclo-3-bd) 45%, var(--text));
  --ciclo-4-bg: color-mix(in srgb, var(--ciclo-4-bd) 20%, var(--surface));
  --ciclo-4-fg: color-mix(in srgb, var(--ciclo-4-bd) 45%, var(--text));
}

/* Density: comfortable */
[data-density="comfortable"] {
  --sp-1: 6px; --sp-2: 8px; --sp-3: 10px; --sp-4: 14px;
  --sp-5: 18px; --sp-6: 24px; --sp-7: 34px;
  --fs-md: 14px; --fs-base: 14px; --fs-lg: 16px;
  --header-h: 60px;
}

/* ============================================================ Base */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: 'cv02','cv03','cv04','cv11';
  font-size: var(--fs-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: underline; }

::selection { background: var(--primary); color: #fff; }

/* Headings */
h1,h2,h3,h4,h5,h6 { font-weight: 600; color: var(--text); margin: 0; letter-spacing: -.01em; }
h1 { font-size: var(--fs-3xl); letter-spacing: -.02em; }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

small, .small { font-size: var(--fs-sm); }
.text-muted { color: var(--text-muted) !important; }
.text-soft  { color: var(--text-soft) !important; }
.text-mono  { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-feature-settings: 'tnum'; }

/* ============================================================ Topbar (thin yellow strip) */

.cc-topbar {
  height: var(--topbar-h);
  background: linear-gradient(90deg, var(--cc-blue) 0%, var(--cc-green) 65%, var(--cc-yellow) 100%);
  color: #fff;
  font-size: var(--fs-xs);
  display: flex;
  align-items: center;
  padding: 0 18px;
  letter-spacing: .04em;
}
.cc-topbar .topbar-tagline {
  font-style: italic;
  font-weight: 500;
  flex: 1;
}
.cc-topbar .topbar-meta {
  display: flex; gap: 18px; align-items: center;
  font-weight: 500;
}
.cc-topbar .topbar-meta a { color: #fff; opacity: .85; }
.cc-topbar .topbar-meta a:hover { opacity: 1; text-decoration: none; }

[data-theme="dark"] .cc-topbar { filter: brightness(.85); }

/* ============================================================ Header / Navbar */

.cc-header {
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: stretch;
  position: sticky;
  top: 0;
  z-index: 1020;
  box-shadow: var(--shadow-1);
  overflow: visible;
}

.cc-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 0 18px;
  border-right: 1px solid var(--border);
  min-width: 230px;
  text-decoration: none;
}
.cc-brand:hover { text-decoration: none; }
.cc-brand img { height: 30px; width: auto; display: block; }
[data-theme="dark"] .cc-brand img { filter: brightness(0) invert(1) sepia(.2); }

.cc-nav {
  display: flex;
  align-items: stretch;
  flex: 1;
  padding: 0 8px;
  /* IMPORTANT: no overflow here — would clip dropdowns */
}

.cc-nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.cc-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  height: 100%;
  color: var(--text-muted);
  font-size: var(--fs-md);
  font-weight: 500;
  border: 0;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: color .15s ease;
}
.cc-nav-link i, .cc-nav-link svg { font-size: 14px; opacity: .9; }
.cc-nav-link .caret {
  width: 8px; height: 8px;
  margin-left: 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .6;
}
.cc-nav-link:hover { color: var(--primary); text-decoration: none; }
.cc-nav-link.active {
  color: var(--primary);
}
.cc-nav-link.active::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
}

/* Header utilities right side */
.cc-header-actions {
  display: flex; align-items: center;
  gap: 6px;
  padding-right: 12px;
  border-left: 1px solid var(--border);
  padding-left: 8px;
}
.cc-header-search {
  position: relative;
  width: 240px;
}
.cc-header-search input {
  width: 100%;
  height: 32px;
  padding: 0 10px 0 30px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: var(--r-2);
  color: var(--text);
  font-size: var(--fs-sm);
  outline: none;
  transition: border-color .15s, background .15s;
}
.cc-header-search input::placeholder { color: var(--text-soft); }
.cc-header-search input:focus { border-color: var(--primary); background: var(--surface); }
.cc-header-search .icon {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  color: var(--text-soft); pointer-events: none;
}

.cc-icon-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  color: var(--text-muted);
  cursor: pointer;
  position: relative;
}
.cc-icon-btn:hover { background: var(--surface-2); color: var(--primary); border-color: var(--border); }
.cc-icon-btn .badge-dot {
  position: absolute; top: 5px; right: 6px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cc-green);
  border: 1.5px solid var(--surface);
}

.cc-avatar {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 8px 4px 4px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--text);
}
.cc-avatar:hover { border-color: var(--primary); }
.cc-avatar .avatar-img {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cc-blue), var(--cc-green));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 11px;
  letter-spacing: .04em;
}
.cc-avatar .avatar-name { font-weight: 500; }
.cc-avatar .avatar-role { color: var(--text-soft); font-size: var(--fs-xs); display: block; line-height: 1; }

/* ============================================================ Dropdowns (multi-level) */

.cc-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-3);
  padding: 6px;
  z-index: 1030;
  display: none;
  animation: dropdown-in .14s ease;
}
.cc-dropdown.right-aligned { left: auto; right: 0; }
.cc-nav-item:hover > .cc-dropdown,
.cc-nav-item.open > .cc-dropdown,
.cc-dropdown-item:hover > .cc-dropdown,
.cc-dropdown-item.open > .cc-dropdown,
.cc-dropdown.show { display: block; }

@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cc-dropdown-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  font-size: var(--fs-md);
  color: var(--text);
  border-radius: var(--r-1);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.cc-dropdown-item:hover { background: var(--primary-soft); color: var(--primary); text-decoration: none; }
.cc-dropdown-item.active { background: var(--primary-soft); color: var(--primary); }
.cc-dropdown-item i, .cc-dropdown-item svg {
  width: 16px; text-align: center; opacity: .8; flex-shrink: 0;
}
.cc-dropdown-item .submenu-caret {
  margin-left: auto;
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .5;
}
.cc-dropdown-item.has-submenu > .cc-dropdown {
  top: -7px;
  left: 100%;
  margin-left: 2px;
}
.cc-dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }
.cc-dropdown-label {
  padding: 6px 10px 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* ============================================================ Layout */

.cc-app { min-height: 100vh; display: flex; flex-direction: column; }
.cc-main { flex: 1; padding: var(--sp-5) var(--sp-6); max-width: 1600px; margin: 0 auto; width: 100%; }

/* Page header — integrated bar, no breadcrumb */
.cc-page-header {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2) var(--r-2) 0 0;
  border-bottom: 0;
  padding: 12px var(--sp-5);
  margin-bottom: 0;
  position: relative;
}
.cc-page-header + * { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
.cc-page-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--border);
}
.cc-page-header .page-icon {
  width: 30px; height: 30px;
  border-radius: var(--r-1);
  background: transparent;
  color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.cc-page-header h1 {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
}
.cc-page-header .subtitle {
  font-size: var(--fs-xs);
  color: var(--text-soft);
}
.cc-page-header .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.cc-page-header.standalone { border-radius: var(--r-2); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-5); }
.cc-page-header.standalone::after { display: none; }
.cc-page-header.standalone + * { border-top-left-radius: var(--r-2) !important; border-top-right-radius: var(--r-2) !important; }

/* ============================================================ Cards */

.cc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.cc-card-header {
  display: flex; align-items: center;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
  gap: 10px;
}
.cc-card-header .title {
  font-size: var(--fs-md);
  font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
/* Título con subtítulo dentro del header. El bloque toma el espacio
   disponible para que .actions siga alineándose a la derecha por su
   margin-left:auto. Mismo rol que .subtitle de .cc-page-header.
   Tamaño: --fs-sm (no --fs-xs del page-header) porque el título de card
   es --fs-md y el subtítulo debe quedar un escalón por debajo, no dos. */
.cc-card-header .title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.cc-card-header .subtitle {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  line-height: 1.35;
}
.cc-card-header .subtitle strong {
  color: var(--text);
  font-weight: 600;
}
.cc-card-header .title .ico {
  color: var(--primary);
}
.cc-card-header .actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.cc-card-body { padding: var(--sp-5); }
.cc-card-body.flush { padding: 0; }
.cc-card-footer {
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  display: flex; align-items: center; gap: 10px;
  justify-content: flex-end;
}

/* Stat cards */
.cc-stat {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-1);
  position: relative;
  overflow: hidden;
}
.cc-stat::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--primary);
}
.cc-stat.stat-green::before  { background: var(--cc-green); }
.cc-stat.stat-yellow::before { background: var(--cc-yellow); }
.cc-stat.stat-blue::before   { background: var(--cc-blue); }
.cc-stat .stat-ico {
  width: 36px; height: 36px;
  border-radius: var(--r-2);
  background: var(--primary-soft);
  color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.cc-stat.stat-green .stat-ico { background: var(--accent-soft); color: var(--cc-green-700); }
.cc-stat.stat-yellow .stat-ico { background: rgba(237,215,8,.16); color: var(--cc-yellow-700); }
.cc-stat .stat-label { font-size: var(--fs-xs); color: var(--text-soft); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.cc-stat .stat-value { font-size: 22px; font-weight: 700; line-height: 1.1; margin-top: 2px; font-feature-settings: 'tnum'; }
.cc-stat .stat-delta { font-size: var(--fs-xs); margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; }
.cc-stat .stat-delta.up   { color: var(--success); }
.cc-stat .stat-delta.down { color: var(--danger); }

/* ============================================================ Buttons */

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px;
  padding: 0 12px;
  font-size: var(--fs-md);
  font-weight: 500;
  border-radius: var(--r-2);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .05s;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
}
.btn:active { transform: translateY(1px); }
.btn-sm { height: 26px; padding: 0 8px; font-size: var(--fs-sm); }
.btn-lg { height: 40px; padding: 0 18px; font-size: var(--fs-lg); }

.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; text-decoration: none; }

.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-2); border-color: var(--text-soft); color: var(--text); text-decoration: none; }

.btn-success { background: var(--cc-green); border-color: var(--cc-green); color: #fff; }
.btn-success:hover { background: var(--cc-green-700); border-color: var(--cc-green-700); color: #fff; text-decoration: none; }

.btn-warning { background: var(--cc-yellow); border-color: var(--cc-yellow); color: #4a3f00; }
.btn-warning:hover { background: var(--cc-yellow-700); border-color: var(--cc-yellow-700); color: #4a3f00; text-decoration: none; }

.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #b62a37; border-color: #b62a37; color: #fff; text-decoration: none; }

.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--primary); }

.btn-icon { width: 32px; padding: 0; justify-content: center; }
.btn-icon.btn-sm { width: 26px; }

.btn-link { background: transparent; color: var(--primary); border: 0; padding: 0; height: auto; }
.btn-link:hover { text-decoration: underline; }

/* ============================================================ Forms */

/* Asterisco automático para labels requeridos (patrón celpro/Bootstrap):
   la clase 'required' va en el propio <label>, sin <span> manual. */
label.required::after {
  content: " *";
  color: var(--danger);
}

.form-label, .cc-form-row label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
}
.form-label .required, .cc-form-row label .required { color: var(--danger); margin-left: 2px; }

.form-control, .form-select {
  display: block;
  width: 100%;
  height: 34px;
  padding: 0 10px;
  font-size: var(--fs-md);
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-2);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.form-control::placeholder { color: var(--text-soft); }
textarea.form-control { height: auto; min-height: 80px; padding: 8px 10px; resize: vertical; }
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%235A6373' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
  padding-right: 28px;
}
[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2394A0B3' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
}

/* ── input-group: Bootstrap 5 gestiona border-radius posicionalmente.
   core.css solo define tokens de color y altura mínima. ── */
.input-group > .form-control,
.input-group > .form-select {
  min-height: 34px;
  flex: 1 1 auto;
  width: 1%;
}

.input-group > .input-group-text {
  min-height: 34px;
  padding: 0 10px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.input-group:focus-within > .input-group-text {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

/* Horizontal form row — ESTÁNDAR ÚNICO Uniweb.
   Usa .row/.col-lg-* y .col-form-label nativos de Bootstrap 5. Solo
   aporta espaciado vertical, altura de campo y alineación; el grid
   y las columnas los resuelve Bootstrap. Reemplaza al patrón CSS
   Grid 200px/1fr anterior en todo el proyecto. */
.cc-form-row {
  margin-bottom: var(--sp-4);
  align-items: start;
}
.cc-form-row:last-child {
  margin-bottom: 0;
}
.cc-form-row .form-control,
.cc-form-row .form-select {
  height: 40px;
  padding-top: .5rem;
  padding-bottom: .5rem;
  font-size: 1rem;
}
.cc-form-row label {
  font-size: 1rem;
}
/* align-items: start (no center) evita que un campo con contenido extra
   (texto de ayuda .form-text, o un widget como TomSelect que inyecta su
   propio wrapper) empuje visualmente el label de esa fila hacia abajo,
   o desalinee el label respecto al campo de filas adyacentes de distinta
   altura. Este padding-top compensa esa alineación 'start', centrando el
   texto del label con la altura de 40px del campo (no con la altura
   total de la fila, que puede variar si el campo tiene contenido extra). */
.cc-form-row .col-form-label {
  padding-top: .6875rem; /* (40px campo - ~1.5rem línea de texto) / 2, redondeado */
  padding-bottom: 0;
}
/* Tom Select no usa ::placeholder nativo — su placeholder es el texto
   dentro de .ts-control cuando no hay selección (input[placeholder]
   interno). Sin esta regla hereda var(--text), se ve muy oscuro. */
.cc-form-row .ts-control > input::placeholder {
  color: var(--text-soft);
  opacity: 1;
}
/* Caso adicional: select con <option value="">Seleccione</option> como
   opción real (no placeholder de Tom Select). Tom Select la renderiza
   como .item con data-value="" y hereda var(--text) por defecto. */
.cc-form-row .ts-control > .item[data-value=""] {
  color: var(--text-soft);
}

/* Tom Select en wraps de ancho fijo (cabeceras sede/periodo, etc.):
   el .ts-wrapper no hereda el width del contenedor y crece con el texto
   del ítem; el input del plugin trae min-width:7rem. Aplicar .cc-ts-fixed
   al wrap que ya declara width. */
.cc-ts-fixed {
  min-width: 0;
}
.cc-ts-fixed .ts-wrapper {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.cc-ts-fixed .ts-control {
  overflow: hidden;
  flex-wrap: nowrap;
}
.cc-ts-fixed .ts-control > .item {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.cc-ts-fixed .ts-control > input {
  min-width: 0 !important;
}

.cc-form-row .help { font-size: var(--fs-xs); color: var(--text-soft); margin-top: 4px; }
.cc-form-row.error .form-control { border-color: var(--danger); }
.cc-form-row.error .help { color: var(--danger); }
.cc-form-row.full > label { grid-column: 1 / 2; }
.cc-form-row.full > div  { grid-column: 2 / 3; }

[data-form-layout="vertical"] .cc-form-row {
  grid-template-columns: 1fr;
}
[data-form-layout="vertical"] .cc-form-row > label { text-align: left; padding-top: 0; }

/* Section */
.cc-form-section {
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--border);
}
.cc-form-section:last-child { border-bottom: 0; }
.cc-form-section h4 {
  font-size: var(--fs-md);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--primary);
  margin-bottom: var(--sp-3);
  font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.cc-form-section h4::before {
  content: "";
  width: 3px; height: 14px;
  background: var(--primary);
  border-radius: 2px;
}

/* Checkbox / radio */
.cc-check {
  display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer;
  font-size: var(--fs-md);
  color: var(--text);
  user-select: none;
}
.cc-check input { accent-color: var(--primary); width: 14px; height: 14px; }

/* ============================================================ Badges & Pills
   Fondos con color-mix contra --surface (técnica de .cc-estado): produce
   color opaco estable sobre --surface-2 y bajo hover --primary-soft.
   Porcentajes alineados con cc-estado / cc-stat-tile__box. */

.cc-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  font-size: var(--fs-xs);
  font-weight: 500;
  border-radius: 999px;
  line-height: 1.4;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.cc-badge.badge-blue   { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); border-color: transparent; }
.cc-badge.badge-green  { background: color-mix(in srgb, var(--cc-green) 16%, var(--surface)); color: var(--cc-green-700); border-color: transparent; }
.cc-badge.badge-yellow { background: color-mix(in srgb, var(--cc-yellow) 22%, var(--surface)); color: var(--cc-yellow-700); border-color: transparent; }
.cc-badge.badge-orange { background: color-mix(in srgb, var(--cc-orange) 20%, var(--surface)); color: var(--cc-orange); border-color: transparent; }
.cc-badge.badge-red    { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); border-color: transparent; }
.cc-badge.badge-success{ background: color-mix(in srgb, var(--success) 12%, var(--surface)); color: var(--success); border-color: transparent; }
/* badge-soft: el gris neutro no deriva de un color de marca; color-mix
   no aporta aquí. Se conserva --surface-2; la diferencia con el base
   es solo el color del texto (--text vs --text-muted). */
.cc-badge.badge-soft   { background: var(--surface-2); color: var(--text); }
.cc-badge.badge-outline {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-muted);
}
.cc-badge .dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}

/* Dark: los fondos los recalcula color-mix contra --surface (#161D27).
   El texto NO: --cc-yellow-700 (#C7B606) y #A35C05 son oscuros sobre
   fondo oscuro. Valores alineados con los overrides dark de .cc-eval-*
   en custom.css — no borrar por parecer redundantes con los fondos. */
[data-theme="dark"] .cc-badge.badge-yellow { color: #ECD645; }
[data-theme="dark"] .cc-badge.badge-orange { color: #E8A25E; }
[data-theme="dark"] .cc-badge.badge-red    { color: #F4A0AB; }

/* ============================================================ Tables */

.cc-table-wrap {
  overflow-x: auto;
  background: var(--surface);
}
.cc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-md);
}
.cc-table thead th {
  position: sticky; top: 0;
  background: var(--surface-2);
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-soft);
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.cc-table thead th .sortable {
  display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer;
  color: inherit;
}
.cc-table thead th .sortable .arrow {
  display: inline-flex; flex-direction: column; gap: 1px;
}
.cc-table thead th .sortable .arrow i { font-size: 7px; opacity: .4; }
.cc-table thead th.is-sorted .sortable .arrow .down { opacity: 1; color: var(--primary); }

.cc-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text);
}
.cc-table tbody tr:nth-child(even) td { background: var(--surface-2); }
.cc-table tbody tr:hover td { background: var(--primary-soft); }
[data-theme="dark"] .cc-table tbody tr:hover td { background: rgba(29,112,183,.18); }

.cc-table tbody tr.selected td { background: var(--primary-soft); }
.cc-table tbody td.num { text-align: right; font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; }
.cc-table tbody td.muted { color: var(--text-muted); }
.cc-table .col-id { width: 56px; color: var(--text-soft); font-size: var(--fs-sm); font-feature-settings: 'tnum'; }
.cc-table .col-actions { width: 110px; text-align: right; white-space: nowrap; }
.cc-table .col-check { width: 32px; padding-right: 0; }

.cc-table-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
}
.cc-table-toolbar .spacer { flex: 1; }

.cc-table-pager {
  display: flex; align-items: center; gap: 4px;
  margin-left: auto;
}
.cc-pager-btn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--r-1);
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-feature-settings: 'tnum';
}
.cc-pager-btn:hover { background: var(--surface-2); color: var(--primary); border-color: var(--primary); }
.cc-pager-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.cc-pager-btn:disabled { opacity: .4; cursor: not-allowed; }

/* User cell */
.cc-cell-user {
  display: inline-flex; align-items: center; gap: 8px;
}
.cc-cell-user .avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 11px;
  flex-shrink: 0;
}
.cc-cell-user .name { font-weight: 500; line-height: 1.2; }
.cc-cell-user .meta { font-size: var(--fs-xs); color: var(--text-soft); }

/* ============================================================ Tabs */

.cc-tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--border);
  padding: 0 var(--sp-5);
  background: var(--surface);
  overflow-x: auto;
}
.cc-tabs::-webkit-scrollbar { display: none; }
.cc-tab {
  padding: 10px 14px;
  font-size: var(--fs-md);
  color: var(--text-muted);
  cursor: pointer;
  border: 0;
  background: transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 500;
}
.cc-tab:hover { color: var(--primary); }
.cc-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.cc-tab .count {
  background: var(--surface-2); color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
}
.cc-tab.active .count { background: var(--primary-soft); color: var(--primary); border-color: transparent; }

.cc-tab-panel { display: none; }
.cc-tab-panel.active { display: block; }

/* ============================================================ Unified Context Header
   A single connected card that holds: breadcrumb + title block + filter chips + tabs.
   Designed so the body/panels below feel like one continuous surface. */

.cc-context-header {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border-bottom: 0;
  margin-bottom: 0;
  overflow: hidden;
  position: relative;
}

/* Tier 1 — breadcrumb row */
.cc-ch-crumbrow {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.cc-ch-crumbrow-actions { margin-left: auto; }

/* Tier 3 — Resolved identity block (derived from context chips) */
.cc-ch-identity {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  transition: background .25s;
}
.cc-ch-identity--flash {
  background: linear-gradient(90deg, var(--primary-soft) 0%, var(--surface) 60%);
}
.cc-ch-identity-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.cc-ch-identity-text { flex: 1; min-width: 0; }

.cc-ch-top {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px 20px 14px;
}
.cc-ch-titleblock { flex: 1; min-width: 0; }

.cc-ch-crumbs {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px;
  color: var(--text-soft);
  margin-bottom: 6px;
}
.cc-ch-crumbs a { color: var(--text-soft); text-decoration: none; }
.cc-ch-crumbs a:hover { color: var(--primary); }
.cc-ch-crumbs span:last-child { color: var(--text-muted); font-weight: 500; }
.cc-ch-sep { font-size: 8px; opacity: .5; }

.cc-ch-title {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.cc-ch-title h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.01em;
}

.cc-ch-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
  color: var(--text-soft);
}
.cc-ch-meta i { margin-right: 4px; }
.cc-ch-meta-sep { opacity: .5; }

.cc-ch-actions {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}

/* Filter chips strip — Tier 2: source of truth */
.cc-ch-filters {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 20px;
  background: var(--surface);
  flex-wrap: wrap;
}
.cc-ch-filters-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 4px;
}
.cc-ch-arrow {
  font-size: 9px;
  color: var(--text-soft);
  opacity: .5;
  margin: 0 -2px;
}
.cc-context-chip--primary {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.cc-context-chip--primary .cc-cc-key { color: var(--primary); }
.cc-context-chip--primary .cc-cc-val { color: var(--primary); font-weight: 600; }

.cc-context-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.cc-context-chip:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.cc-context-chip:hover .cc-cc-key { color: var(--primary); }
.cc-context-chip .cc-cc-key {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cc-context-chip .cc-cc-val {
  font-weight: 500;
  color: var(--text);
}
.cc-context-chip i.fa-chevron-down {
  font-size: 9px;
  color: var(--text-soft);
  margin-left: 2px;
}
.cc-context-chip--ghost {
  width: 32px; padding: 0;
  justify-content: center;
  color: var(--text-soft);
}
.cc-context-chip--ghost:hover { color: var(--primary); background: var(--primary-soft); }

/* Tabs attached to the bottom of the context header */
.cc-tabs--attached {
  border-bottom: 1px solid var(--border);
  background: linear-gradient(to bottom, var(--surface) 0%, var(--surface-2) 100%);
  padding: 0 12px;
  margin: 0;
}
.cc-tabs--attached .cc-tab {
  padding: 12px 16px;
  position: relative;
}
.cc-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px;
  padding: 0 6px;
  margin-left: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
}
.cc-tab.active .cc-tab-count {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: transparent;
}
.cc-tab-count--accent {
  background: var(--warning) !important;
  color: #6b4d00 !important;
  border-color: transparent !important;
}

/* Body panels attached: continuous surface below the header */
.cc-tab-panels--attached {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: 16px;
  margin-bottom: 16px;
}
.cc-tab-panels--attached > .cc-tab-panel.active > .cc-grid:first-child,
.cc-tab-panels--attached > .cc-tab-panel.active > .cc-card:first-child {
  margin-top: 0;
}

/* ============================================================ Filters bar */

.cc-filters {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.cc-filters .filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px;
  border: 1px dashed var(--border-strong);
  border-radius: 14px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  background: var(--surface);
  cursor: pointer;
}
.cc-filters .filter-chip:hover { border-style: solid; border-color: var(--primary); color: var(--primary); }
.cc-filters .filter-chip.active {
  border-style: solid; border-color: var(--primary); background: var(--primary-soft); color: var(--primary);
}
.cc-filters .filter-chip strong { font-weight: 600; color: var(--text); }
.cc-filters .filter-chip.active strong { color: var(--primary); }

/* ============================================================ Section list (Planeación) */

.cc-section-list { padding: 6px; max-height: 720px; overflow-y: auto; }

/* Lateral tabs — sections function as vertical tabs that swap the right pane.
   Grid: número | cuerpo | dot de completitud. */
.cc-section-tab {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px;
  padding: 12px 12px;
  border-radius: var(--r-1);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s, border-color .12s;
  align-items: start;
  position: relative;
  margin-bottom: 2px;
}
.cc-section-list .cc-section-tab + .cc-section-tab {
  border-top: 0.5px solid var(--border);
}
.cc-section-tab::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  background: transparent;
  border-radius: 0 2px 2px 0;
  transition: background .12s;
}
.cc-section-tab:hover { background: var(--surface-2); }
.cc-section-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

.cc-section-tab.active {
  background: var(--primary-soft);
  border-color: transparent;
}
.cc-section-tab.active::before { background: var(--primary); }
.cc-section-tab.active .cc-section-num {
  background: var(--primary);
  color: #fff;
}
.cc-section-tab.active .cc-section-title { color: var(--primary); }

.cc-section-num {
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--surface-2); color: var(--text-soft);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.cc-section-title {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; line-height: 1.35; margin-bottom: 4px;
  color: var(--text);
}
.cc-section-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 11px; color: var(--text-soft);
}
.cc-section-meta i { width: 10px; }
.cc-section-meta-dot { opacity: .5; }
.cc-section-dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: transparent;
  align-self: center;
  flex: 0 0 auto;
}
.cc-section-tab.is-iniciada .cc-section-dot {
  background: var(--warning);
  border-color: var(--warning);
}
.cc-section-tab.is-completa .cc-section-dot {
  background: var(--success);
  border-color: var(--success);
}

/* Section pane (right column of Actividades tab) */
.cc-section-pane-card { overflow: hidden; }
.cc-section-pane-head {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.cc-section-pane-eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.cc-section-pane-titlerow {
  display: flex; align-items: flex-start; gap: 16px;
  margin-bottom: 14px;
}
.cc-section-pane-title {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--text);
  margin: 0;
}
.cc-section-pane-actions {
  display: flex; gap: 6px; flex-shrink: 0;
}
.cc-section-pane-stats {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  gap: 24px;
  align-items: center;
}
.cc-spstat {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 70px;
}
.cc-spstat .k {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cc-spstat .v {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.cc-spstat--bar { min-width: 0; }
.cc-spstat--bar .k { margin-bottom: 6px; }
.cc-progress-thin {
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
}
.cc-progress-thin > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--cc-green));
  border-radius: 3px;
  transition: width .3s;
}

/* Sticky rail on the left for long pages */
.cc-sections-rail {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cc-sections-rail .cc-section-list {
  flex: 1;
  max-height: none;
}

/* Planeación docente: comentarios y datos básicos viven bajo el rail en
   .col-lg-4. El sticky solapaba esos cards y el max-height cortaba la lista.
   top:auto — cc-card-soft pone position:relative y reactivaría el top:16px
   del rail genérico, bajando Sesiones 16px respecto al panel derecho. */
.cc-plan-split .cc-sections-rail {
  position: static;
  top: auto;
  max-height: none;
  overflow: visible;
}
.cc-plan-split .cc-sections-rail .cc-section-list {
  max-height: 60vh;
  overflow-y: auto;
  flex: 0 1 auto;
}

/* Estado vacío del panel de sesión — altura de contenido, no estirar la columna */
.cc-plan-split > [class*="col-"] > .cc-empty-seccion {
  min-height: 0;
}
.cc-plan-split > [class*="col-"] > .cc-empty-seccion .cc-card-body.flush {
  display: flex;
  flex-direction: column;
}
.cc-empty-seccion .cc-empty-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  gap: 4px;
}
.cc-empty-ico {
  width: 52px;
  height: 52px;
  border-radius: var(--r-3);
  background: var(--primary-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-size: 20px;
  margin-bottom: 8px;
}
.cc-empty-title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text);
}
.cc-empty-text {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--text-soft);
  max-width: 320px;
}
.cc-empty-progreso {
  width: 220px;
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
  margin-top: 12px;
}
.cc-empty-progreso-barra {
  height: 100%;
  background: var(--success);
  transition: width .3s ease;
}

/* Card colapsable (p. ej. Datos básicos en planeación) */
.cc-card-toggle { cursor: pointer; }
.cc-card-chevron { transition: transform .2s ease; font-size: 12px; }
.cc-card-toggle[aria-expanded="true"] .cc-card-chevron { transform: rotate(180deg); }

/* Tooltip abajo: .cc-card con overflow:hidden recorta el tip superior */
.agregar-comentario.cc-tip[data-tip-pos="bottom"]:hover::after {
  bottom: auto;
  top: calc(100% + 6px);
}

/* Context chip — feedback flash when value changes */
.cc-context-chip--changed {
  animation: cc-chip-flash .6s ease-out;
}
@keyframes cc-chip-flash {
  0%   { box-shadow: 0 0 0 0 rgba(29,112,183,.3); }
  100% { box-shadow: 0 0 0 8px transparent; }
}

/* Context chip dropdown menu styling */
.cc-cc-menu { min-width: 240px; padding: 6px; }
.cc-cc-menu--wide { min-width: 280px; }
.cc-cc-menu .dropdown-header {
  font-size: 10px; font-weight: 700;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
}
.cc-cc-menu .dropdown-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  border-radius: 4px;
  padding: 8px 10px;
}
.cc-cc-menu .dropdown-item.active {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 500;
}
.cc-cc-menu .dropdown-item .fa-check {
  color: var(--primary);
  font-size: 11px;
}
.cc-cc-menu .dropdown-item:not(.active) .fa-check { display: none; }
.cc-cc-code {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-soft);
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 3px;
}

.cc-cell-strong { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.cc-mat-ico {
  width: 22px; height: 22px; border-radius: 5px;
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ============================================================ Épicas */

.cc-epics {
  display: grid;
  grid-template-columns: 240px 1fr 280px;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  overflow: hidden;
  min-height: calc(100vh - 220px);
  position: relative;
}
.cc-epics-list { border-right: 1px solid var(--border); background: var(--surface-2); }
.cc-epic-items { display: flex; flex-direction: column; gap: 4px; padding: 0 8px 12px; }
.cc-epic-item {
  padding: 10px 10px; border-radius: var(--r-1); cursor: pointer;
  border: 1px solid transparent; background: var(--surface);
}
.cc-epic-item:hover { border-color: var(--border); }
.cc-epic-item.active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.cc-epic-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.cc-epic-code {
  font-family: ui-monospace, monospace; font-size: 10px; font-weight: 700;
  background: var(--surface-2); color: var(--text-muted);
  padding: 2px 6px; border-radius: 4px;
  border: 1px solid var(--border);
}
.cc-epic-code.lg { font-size: 12px; padding: 4px 8px; }
.cc-epic-prio { font-size: 10px; color: var(--text-soft); font-weight: 700; }
.cc-epic-title { font-size: 13px; font-weight: 600; line-height: 1.3; margin-bottom: 2px; }
.cc-epic-meta { font-size: 11px; color: var(--text-soft); margin-bottom: 6px; }
.cc-epic-progress { display: flex; gap: 4px; font-size: 10.5px; color: var(--text-muted); }

.cc-epics-main { padding: 18px 22px; overflow-y: auto; }
.cc-epic-topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.cc-epic-topbar h1 { font-size: 17px; font-weight: 600; margin: 0; }
.cc-epic-meta-row { display: flex; gap: 18px; font-size: 12px; color: var(--text-soft); padding-bottom: 14px; border-bottom: 2px solid var(--cc-green); margin-bottom: 18px; flex-wrap: wrap; }
.cc-epic-meta-row strong { color: var(--text); font-weight: 600; }

.cc-epic-section { margin-bottom: 22px; }
.cc-epic-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cc-epic-section-head h3 { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin: 0; }

.cc-task-list { display: flex; flex-direction: column; gap: 4px; }
.cc-task {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); font-size: 13px;
}
.cc-task.blocked { background: rgba(220,53,69,.04); border-color: rgba(220,53,69,.2); }
.cc-task-code { font-family: ui-monospace, monospace; font-size: 11px; font-weight: 700; color: var(--primary); min-width: 70px; }
.cc-task-name { flex: 1; }
.cc-task-who { width: 24px; height: 24px; border-radius: 50%; background: var(--info); color: #fff; font-size: 9.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.cc-task-state { font-family: ui-monospace, monospace; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 3px; color: #fff; }
.cc-task-state--dev { background: #5E3CC9; }
.cc-task-state--qa { background: #1D70B7; }
.cc-task-state--backlog { background: #6c7378; }
.cc-task-state--deploy { background: #10A65C; }
.cc-task-state--warning { background: var(--cc-yellow); color: #000; }
.cc-task-state--empty { background: transparent; color: var(--text-soft); border: 1px dashed var(--border); }
.cc-task-add {
  border: 1px dashed var(--border); background: transparent;
  padding: 8px 12px; border-radius: 6px; font-size: 12px;
  color: var(--text-soft); cursor: pointer; text-align: left;
}
.cc-task-add:hover { color: var(--primary); border-color: var(--primary); }

.cc-doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cc-doc { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.cc-doc-icon { width: 44px; height: 52px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; }
.cc-doc-icon--docx { background: #2b579a; }
.cc-doc-icon--pdf { background: #d24a2d; }
.cc-doc-title { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-soft); font-weight: 700; }
.cc-doc-name { font-size: 13px; font-weight: 500; margin: 2px 0; }
.cc-doc-meta { font-size: 11px; color: var(--text-soft); margin-bottom: 6px; }
.cc-doc-actions { display: flex; gap: 12px; font-size: 11px; }
.cc-doc-actions a { color: var(--primary); text-decoration: none; }
.cc-doc-actions a.danger { color: var(--danger); }

.cc-ref-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.cc-ref { aspect-ratio: 1; border-radius: 6px; position: relative; overflow: hidden; display: flex; align-items: end; justify-content: center; padding: 6px; }
.cc-ref.empty { background: var(--surface-2); border: 1px dashed var(--border); align-items: center; }
.cc-ref-label { font-size: 10px; color: rgba(0,0,0,.6); background: rgba(255,255,255,.65); padding: 1px 5px; border-radius: 3px; backdrop-filter: blur(2px); }
.cc-ref.empty .cc-ref-label { background: transparent; color: var(--text-soft); }
.cc-ref-pdf { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--danger); }
.cc-ref-pdf span { font-size: 9px; color: var(--text-soft); font-weight: 400; margin-top: 2px; }

.cc-collapse { display: flex; align-items: center; gap: 10px; padding: 10px 0; cursor: pointer; user-select: none; border-top: 1px solid var(--border); }
.cc-collapse h3 { font-size: 13px; font-weight: 600; }
.cc-collapse i { color: var(--text-soft); font-size: 11px; transition: transform .15s; }
.cc-callout { padding: 10px 14px; border-radius: 6px; font-size: 12px; line-height: 1.55; margin: 8px 0 12px; }
.cc-callout--warning { background: rgba(237,215,8,.08); border-left: 3px solid var(--cc-yellow); }
.cc-link-sm { font-size: 11px; color: var(--primary); text-decoration: none; }

.cc-epics-meta { border-left: 1px solid var(--border); padding: 18px 16px; background: var(--surface-2); overflow-y: auto; }
.cc-meta-block { padding: 14px 0; border-bottom: 1px solid var(--border); }
.cc-meta-block:first-child { padding-top: 0; }
.cc-meta-block:last-child { border-bottom: 0; }
.cc-meta-block h4 { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); font-weight: 700; margin-bottom: 8px; }

.cc-health-row { display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 8px; font-size: 11px; margin-bottom: 6px; color: var(--text-muted); }
.cc-bar { height: 6px; background: var(--surface); border-radius: 3px; overflow: hidden; border: 1px solid var(--border); }
.cc-bar-fill { height: 100%; }
.cc-health-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 10px; }
.cc-health-grid > div { padding: 8px 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; text-align: center; }
.cc-health-grid strong { display: block; font-size: 18px; font-weight: 700; line-height: 1; }
.cc-health-grid span { font-size: 9px; color: var(--text-soft); letter-spacing: .04em; }

.cc-op-task { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); font-size: 12px; margin-bottom: 4px; }
.cc-op-task > span:first-child { flex: 1; }

.cc-comment { margin-bottom: 10px; }
.cc-comment-head { display: flex; align-items: center; gap: 6px; font-size: 11px; margin-bottom: 4px; }
.cc-comment-head .text-soft { margin-left: auto; }
.cc-comment-body { font-size: 11.5px; line-height: 1.5; color: var(--text-muted); padding-left: 24px; }
.cc-comment-body a { color: var(--primary); text-decoration: none; }

.cc-epics-new { position: absolute; top: 16px; right: 296px; z-index: 5; }

/* ============================================================ Modales / Drawers */

.cc-modal, .cc-drawer {
  position: fixed; inset: 0; z-index: 1080;
  display: none;
}
.cc-modal.show, .cc-drawer.show { display: block; }
.cc-modal-backdrop, .cc-drawer-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  animation: cc-fade-in .15s ease;
}
.cc-modal-dialog {
  position: relative;
  margin: 8vh auto 0;
  background: var(--surface);
  border-radius: var(--r-2);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  width: calc(100% - 32px);
  max-width: 480px;
  animation: cc-modal-pop .18s ease;
  overflow: hidden;
}
@keyframes cc-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cc-modal-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes cc-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }

.cc-modal-header, .cc-drawer-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.cc-modal-header h3, .cc-drawer-header h3 {
  font-size: 16px; font-weight: 600; margin: 0; flex: 1;
}
.cc-modal-x {
  background: transparent; border: 0; cursor: pointer;
  width: 30px; height: 30px; border-radius: var(--r-1);
  color: var(--text-soft); font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.cc-modal-x:hover { background: var(--surface-2); color: var(--text); }

.cc-modal-body, .cc-drawer-body {
  padding: 18px; max-height: 70vh; overflow-y: auto;
}
.cc-modal-footer, .cc-drawer-footer {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-top: 1px solid var(--border);
  background: var(--surface-2);
  justify-content: flex-end;
}

/* Clean centered modal style: subtle gray toolbar, white body, action footer */
.cc-modal--clean .cc-modal-dialog {
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0,0,0,.32);
  background: var(--surface);
}
.cc-modal-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.cc-modal-eyebrow {
  font-size: 13px;
  color: var(--text-muted);
  display: flex; align-items: center; gap: 4px;
  flex: 1;
  min-width: 0;
}
.cc-modal-footer--center { justify-content: center; gap: 12px; padding: 18px; background: transparent; border-top: 0; }
.cc-modal-footer--right { justify-content: flex-end; }
.cc-modal-footer--center .btn { min-width: 110px; border-radius: 999px; }

/* Modal-form: horizontal labels, like the desktop form view */
.cc-mform { display: flex; flex-direction: column; gap: 14px; }
.cc-mform-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  align-items: start;
}
.cc-mform-row > label {
  text-align: right;
  padding-top: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}
.cc-mform-row .required { color: var(--danger); margin-left: 2px; }

/* Info blocks (read-only modal) */
.cc-info-block { margin-bottom: 14px; }
.cc-info-block:last-child { margin-bottom: 0; }
.cc-info-label {
  font-size: 12px;
  color: var(--text-soft);
  margin-bottom: 4px;
}
.cc-info-value {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
}

/* Mini accordion (file picker / link picker rows) */
.cc-mini-accordion {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 12px;
}
.cc-mini-acc-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}
.cc-mini-acc-item:hover { background: var(--surface-2); }
.cc-mini-acc-item:last-child { border-bottom: 0; }
.cc-mini-acc-item.open { background: var(--primary-soft); border-bottom: 1px solid var(--primary-soft); }
.cc-mini-acc-item > span { flex: 1; }
.cc-mini-acc-chev { color: var(--text-soft); font-size: 11px; }

/* Thread (planning · comentarios) */
.cc-thread { padding: 8px 18px; }
.cc-thread-msg {
  display: flex; gap: 10px;
  align-items: flex-start;
  padding: 0;
}
.cc-thread-msg + .cc-thread-msg { margin-top: 10px; }
.cc-thread-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600; flex: 0 0 auto;
}
.cc-thread-body {
  flex: 1; min-width: 0;
  background: var(--surface-2);
  border: 0.5px solid var(--border);
  border-radius: var(--r-2);
  padding: 10px 12px;
}
.cc-thread-body p { margin: 4px 0 0; white-space: pre-wrap; }
.cc-thread-head { display: flex; align-items: center; gap: 6px; }
.cc-thread-fecha {
  font-size: 12px;
  color: var(--text-soft);
  margin-left: 8px;
}
.cc-thread-msg .cc-thread-body {
  max-width: 85%;
  flex: 0 1 auto;
}
.cc-thread-msg.mine {
  flex-direction: row-reverse;
}
.cc-thread-msg.mine .cc-thread-body {
  background: var(--primary-soft);
  border-color: transparent;
}
.cc-thread-msg.mine .form-eliminar {
  margin-left: auto;
}

/* Drawer specifics */
.cc-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  background: var(--surface);
  box-shadow: -8px 0 32px rgba(0,0,0,.18);
  display: flex; flex-direction: column;
  animation: cc-drawer-in .22s ease;
  max-width: 100vw;
}
.cc-drawer-body { flex: 1; max-height: none; }

/* Detail rows for drawers */
.cc-detail-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px dashed var(--border);
  font-size: 13px;
}
.cc-detail-row:last-child { border-bottom: 0; }
.cc-detail-row span { color: var(--text-soft); }

.cc-timeline { padding-left: 4px; }
.cc-tl-item { display: flex; gap: 10px; padding: 6px 0; align-items: start; font-size: 12px; }
.cc-tl-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }

/* ============================================================ Misc */

.cc-divider { height: 1px; background: var(--border); margin: var(--sp-5) 0; }
.cc-spacer { flex: 1; }
.cc-skeleton {
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--border) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--r-1);
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Tooltip */
.cc-tip { position: relative; }
.cc-tip[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: #1B2330; color: #fff;
  padding: 4px 8px; border-radius: var(--r-1);
  font-size: var(--fs-xs);
  max-width: 200px;
  white-space: normal;
  text-align: center;
  overflow-wrap: break-word;
  z-index: 1050;
  pointer-events: none;
}

/* Sidebar (used in detail view) */
.cc-side {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--sp-5);
}
@media (max-width: 1199.98px) { .cc-side { grid-template-columns: 1fr; } }

/* Footer */
.cc-footer {
  padding: 12px 24px;
  font-size: var(--fs-xs);
  color: var(--text-soft);
  border-top: 1px solid var(--border);
  background: var(--surface);
  display: flex; align-items: center; gap: 14px;
}
.cc-footer a { color: var(--text-muted); }

/* Login */
.cc-login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 480px;
  background: var(--bg);
}
.cc-login-hero {
  position: relative;
  background:
    radial-gradient(circle at 20% 30%, rgba(149,193,30,.6), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(237,215,8,.5), transparent 55%),
    linear-gradient(135deg, var(--cc-blue-900) 0%, var(--cc-blue) 60%, var(--cc-blue-700) 100%);
  color: #fff;
  padding: 56px 64px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.cc-login-hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 28px);
  pointer-events: none;
}
.cc-login-form {
  background: var(--surface);
  display: flex; flex-direction: column;
  justify-content: center;
  padding: 56px 64px;
  position: relative;
}
@media (max-width: 767.98px) {
  .cc-login { grid-template-columns: 1fr; }
  .cc-login-hero { display: none; }
}

/* Chart placeholder bars */
.cc-chart-bars { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding: 12px 4px 0; }
.cc-chart-bars .bar {
  flex: 1; background: var(--primary-soft);
  border-radius: 3px 3px 0 0;
  position: relative;
  transition: background .2s;
}
.cc-chart-bars .bar.accent { background: var(--accent-soft); }
.cc-chart-bars .bar:hover { background: var(--primary); }
.cc-chart-bars .bar.accent:hover { background: var(--cc-green); }
.cc-chart-bars .bar::after {
  content: attr(data-label);
  position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%);
  font-size: 10px; color: var(--text-soft);
}

/* Donut placeholder */
.cc-donut {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: conic-gradient(var(--cc-blue) 0 45%, var(--cc-green) 45% 75%, var(--cc-yellow) 75% 90%, var(--border) 90% 100%);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
}
.cc-donut::before {
  content: ""; position: absolute; inset: 16px;
  background: var(--surface); border-radius: 50%;
}
.cc-donut .donut-label {
  position: relative; text-align: center;
}
.cc-donut .donut-label .v { font-size: 20px; font-weight: 700; line-height: 1; }
.cc-donut .donut-label .l { font-size: 10px; color: var(--text-soft); text-transform: uppercase; letter-spacing: .08em; }

/* Activity feed */
.cc-feed { display: flex; flex-direction: column; gap: 12px; }
.cc-feed-item {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  font-size: var(--fs-md);
}
.cc-feed-item .ico {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--primary-soft); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
}
.cc-feed-item.green .ico { background: var(--accent-soft); color: var(--cc-green-700); }
.cc-feed-item.yellow .ico { background: rgba(237,215,8,.18); color: var(--cc-yellow-700); }
.cc-feed-item .body { padding-top: 4px; }
.cc-feed-item .when { font-size: var(--fs-xs); color: var(--text-soft); margin-top: 2px; }

/* Switch */
.cc-switch {
  position: relative; width: 32px; height: 18px;
  background: var(--border-strong); border-radius: 999px;
  cursor: pointer; transition: background .15s; flex-shrink: 0;
}
.cc-switch::after {
  content: ""; position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: left .15s;
}
.cc-switch.on { background: var(--primary); }
.cc-switch.on::after { left: 16px; }

/* Tweaks panel */
.cc-tweaks {
  position: fixed; bottom: 16px; right: 16px;
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-3);
  z-index: 1100;
  font-size: var(--fs-md);
  display: none;
  overflow: hidden;
}
.cc-tweaks.show { display: block; }
.cc-tweaks-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  font-size: var(--fs-md);
}
.cc-tweaks-header .close {
  margin-left: auto; cursor: pointer; opacity: .8;
  background: transparent; border: 0; color: #fff;
}
.cc-tweaks-body { padding: 12px 14px; max-height: 60vh; overflow: auto; }
.cc-tweak-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border);
}
.cc-tweak-row:last-child { border-bottom: 0; }
.cc-tweak-row label { font-size: var(--fs-sm); color: var(--text); margin: 0; }
.cc-tweak-swatch {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .1s;
}
.cc-tweak-swatch:hover { transform: scale(1.15); }
.cc-tweak-swatch.active { border-color: var(--text); }
.cc-tweak-swatches { display: flex; gap: 6px; }

.cc-tweak-seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  overflow: hidden;
}
.cc-tweak-seg button {
  background: transparent; border: 0; padding: 4px 8px; font-size: var(--fs-xs);
  cursor: pointer; color: var(--text-muted);
}
.cc-tweak-seg button.active { background: var(--primary); color: #fff; }

/* Helpers */
.flex-1 { flex: 1; }
.text-primary { color: var(--primary) !important; }
.text-success { color: var(--success) !important; }
.text-danger  { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }

/* Grid utilities */
.cc-grid { display: grid; gap: var(--sp-5); }
.cc-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cc-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cc-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1199.98px) { .cc-grid.cols-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 767.98px)  { .cc-grid.cols-3, .cc-grid.cols-2, .cc-grid.cols-4 { grid-template-columns: 1fr; } }

/* Page sub-nav (sample page navigation) */
.cc-pages-nav {
  display: flex; gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: 4px;
  box-shadow: var(--shadow-1);
}
.cc-pages-nav button {
  background: transparent; border: 0;
  padding: 6px 12px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  border-radius: var(--r-1);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.cc-pages-nav button:hover { background: var(--surface-2); color: var(--primary); }
.cc-pages-nav button.active { background: var(--primary); color: #fff; }
.cc-pages-nav button.active:hover { background: var(--primary-hover); }

/* ============================================================ Mobile header & offcanvas nav */

@media (max-width: 991.98px) {
  .cc-topbar { display: none; }
}

@media (max-width: 991.98px) {
  .cc-header {
    overflow: visible;
  }
  .cc-nav {
    display: none;
  }
  .cc-header-search {
    display: none;
  }
  .cc-header-actions {
    border-left: 0;
    gap: 4px;
    padding-left: 4px;
    padding-right: 8px;
    order: 3;
  }
  .cc-header-actions .cc-icon-btn:not(#cc-theme-toggle):not(#cc-mobile-menu-toggle) {
    display: none;
  }
  .cc-header-mobile-spacer {
    min-width: 0;
  }
  .cc-hamburger {
    order: 4;
  }
}

.cc-hamburger {
  display: none;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  flex-shrink: 0;
}
@media (max-width: 991.98px) {
  .cc-hamburger { display: inline-flex; }
}

.cc-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: none;
}
.cc-mobile-nav.show { display: block; }
.cc-mobile-nav-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  animation: cc-fade-in .15s ease;
}
.cc-mobile-nav-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  background: var(--surface);
  box-shadow: 4px 0 24px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  animation: cc-mobile-nav-in .22s ease;
  overflow: hidden;
}
@keyframes cc-mobile-nav-in {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
.cc-mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.cc-mobile-nav-header img { height: 28px; }
.cc-mobile-nav-close {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--r-1);
}
.cc-mobile-nav-close:hover { background: var(--surface); color: var(--text); }
.cc-mobile-nav-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.cc-mnav-item {
  border-radius: var(--r-1);
  margin-bottom: 2px;
  overflow: hidden;
}
.cc-mnav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-radius: var(--r-1);
  transition: background .12s, color .12s;
}
.cc-mnav-link i.cc-mnav-icon { width: 18px; text-align: center; color: var(--text-soft); flex-shrink: 0; }
.cc-mnav-link span { flex: 1; }
.cc-mnav-link .cc-mnav-caret {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--text-soft);
  transition: transform .15s;
}
.cc-mnav-link:hover { background: var(--surface-2); color: var(--primary); }
.cc-mnav-link.active { background: var(--primary-soft); color: var(--primary); }
.cc-mnav-link.open .cc-mnav-caret { transform: rotate(90deg); }

.cc-mnav-sub {
  display: none;
  padding: 2px 0 4px 16px;
  border-left: 2px solid var(--border);
  margin: 0 0 4px 24px;
}
.cc-mnav-sub.show { display: block; }
.cc-mnav-sub a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  border-radius: var(--r-1);
  text-decoration: none;
}
.cc-mnav-sub a:hover { background: var(--surface-2); color: var(--primary); }
.cc-mnav-sub-divider { height: 1px; background: var(--border); margin: 4px 8px; }

.cc-mnav-sub2 {
  display: none;
  padding: 2px 0 2px 12px;
  border-left: 2px solid var(--border);
  margin: 0 0 2px 16px;
}
.cc-mnav-sub2.show { display: block; }
.cc-mnav-sub2 a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  border-radius: var(--r-1);
  text-decoration: none;
}
.cc-mnav-sub2 a:hover { background: var(--surface-2); color: var(--primary); }

/* ============================================================
   HARDENING — estados disabled / focus / motion / responsive
   ============================================================ */

/* ── Disabled: botones ── */
.btn:disabled,
.btn.disabled {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

/* ── Disabled / readonly: campos ── */
.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  background: var(--surface-2);
  color: var(--text-soft);
  cursor: not-allowed;
  border-color: var(--border);
  box-shadow: none;
}
.form-control:disabled::placeholder { color: var(--text-soft); }

/* ── Focus visible con marca (teclado) ──
   Reemplaza el outline del navegador por un anillo coherente.
   Solo aplica al foco por teclado, no al click (no molesta a mouse). */
.btn:focus-visible,
.cc-nav-link:focus-visible,
.cc-tab:focus-visible,
.cc-dropdown-item:focus-visible,
.cc-pager-btn:focus-visible,
.cc-icon-btn:focus-visible,
.filter-chip:focus-visible,
.cc-context-chip:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-2);
}

/* Dentro de dropdowns el offset positivo se corta: usar inset */
.cc-dropdown-item:focus-visible {
  outline-offset: -2px;
}

/* ── Movimiento reducido: respeta prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Responsive: rejillas complejas sin breakpoint ── */
@media (max-width: 991.98px) {
  /* Épicas: master/detalle/meta de 3 col → apiladas */
  .cc-epics {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .cc-epics-list,
  .cc-epics-meta {
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid var(--border);
  }
  .cc-epics-new {
    position: static;
    width: 100%;
    margin-top: 12px;
  }

  /* Planeación: Bootstrap col-lg-* ya apila bajo 992px; no usar CSS grid.
     Solo desactivar sticky del rail genérico y acotar la lista en móvil. */
  .cc-sections-rail {
    position: static;
    max-height: none;
  }
  .cc-plan-split .cc-sections-rail .cc-section-list,
  .cc-section-list {
    max-height: 320px;
  }
}

@media (max-width: 767.98px) {
  /* Stats de sección: 4 col → 2x2 */
  .cc-section-pane-stats {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .cc-section-pane-titlerow {
    flex-direction: column;
    gap: 10px;
  }
  .cc-section-pane-actions {
    width: 100%;
    flex-wrap: wrap;
  }
}

/* ============================================================
   PRINT — vista limpia al imprimir
   ============================================================ */
@media print {
  html  { background: #fff !important; }
  body  { background: #fff !important; color: #000 !important; }

  .cc-topbar,
  .cc-header,
  .cc-mobile-nav,
  .cc-footer,
  .cc-hamburger,
  .cc-tweaks,
  .cc-page-header .actions,
  .cc-card-header .actions,
  .col-actions,
  .cc-table .col-check {
    display: none !important;
  }

  .cc-app { display: block; }
  .cc-main {
    padding: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .cc-card,
  .cc-context-header,
  .cc-tab-panels--attached {
    box-shadow: none !important;
    border-color: #ccc !important;
    break-inside: avoid;
  }

  .cc-table tbody tr { break-inside: avoid; }
  .cc-table thead    { display: table-header-group; }
  .cc-table-wrap     { overflow: visible !important; }

  .cc-table tbody tr:nth-child(even) td,
  .cc-table tbody tr:hover td { background: #fff !important; }

  a { color: #000 !important; text-decoration: none !important; }

  .cc-page-header,
  .cc-card-header { break-after: avoid; }
}