/* Login layout */
.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, 0.6), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(237, 215, 8, 0.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, 0.03) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 28px);
  pointer-events: none;
}

.cc-login-form {
  min-height: 100vh;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  padding: 56px 64px;
  position: relative;
}

.login-form-body {
  max-width: 400px;
  width: 100%;
  align-self: center;
}

/* Login checkbox (only used in login views) */
.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;
}

.cc-check--lg input {
  width: 16px;
  height: 16px;
}

.login-badge-wrap,
.login-claim-wrap,
.login-hero-meta {
  position: relative;
  z-index: 1;
}

.login-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

.login-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cc-yellow);
  box-shadow: 0 0 8px var(--cc-yellow);
}

.login-claim {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  max-width: 520px;
  letter-spacing: -0.02em;
}

.login-claim-accent {
  color: var(--cc-yellow);
}

.login-description {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 480px;
  margin-top: 18px;
}

.login-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 36px;
  max-width: 480px;
}

.login-stat-value {
  font-size: 28px;
  font-weight: 700;
}

.login-stat-value--yellow {
  color: var(--cc-yellow);
}

.login-stat-value--green {
  color: var(--cc-green);
}

.login-stat-value--white {
  color: #fff;
}

.login-stat-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.login-hero-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  gap: 14px;
}

.login-logo-wrap {
  text-align: center;
}

.login-logo-img {
  height: 72px;
  width: auto;
  object-fit: contain;
}

/* Input refinement in login panel */
.cc-login-form .form-label {
  font-weight: 500;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 6px;
}

.cc-login-form .input-group-text {
  width: 44px;
  justify-content: center;
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text-soft);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.cc-login-form .form-control {
  border-color: var(--border-strong);
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 14px;
  transition: border-color 0.15s;
}

.cc-login-form .input-group:focus-within .input-group-text:not(:last-child) {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.cc-login-form .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(29, 112, 183, 0.12);
}

/* Grupo contraseña: un solo halo de foco y un trazo entre campo y botón (evita “doble borde”). */
.cc-login-form .cc-password-group:focus-within {
  border-radius: var(--r-2);
  box-shadow: 0 0 0 3px rgba(29, 112, 183, 0.12);
}

.cc-login-form .cc-password-group:focus-within>.form-control {
  box-shadow: none;
  z-index: 3;
}

.cc-login-form .cc-password-group:focus-within>.btn.cc-password-toggle {
  box-shadow: none;
}

/* Ver contraseña: misma altura que el campo (el .btn global fija 32px; el input del login lleva más padding). */
.cc-login-form .cc-password-group>.btn.cc-password-toggle {
  height: auto;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-color: var(--border-strong);
  color: var(--text-soft);
  z-index: 2;
}

.cc-login-form .cc-password-group>.btn.cc-password-toggle:hover {
  border-color: var(--text-soft);
  color: var(--text);
  background: var(--surface-2);
}

/* Role selector tabs */
.login-role-tabs {
  display: flex;
  background: var(--bg);
  border-radius: var(--r-3);
  padding: 4px;
  gap: 2px;
  margin-bottom: 20px;
}

.login-role-tab {
  flex: 1;
  padding: 8px 6px;
  border: none;
  background: transparent;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-soft);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.login-role-tab:hover {
  color: var(--text);
}

.login-role-tab.active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-1);
  font-weight: 600;
}

.login-remember {
  margin-bottom: 18px;
}

.login-submit-btn {
  justify-content: center;
  padding: 12px 20px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 8px rgba(29, 112, 183, 0.28);
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}

.login-submit-btn:hover {
  box-shadow: 0 4px 16px rgba(29, 112, 183, 0.38);
  transform: translateY(-1px);
}

.login-submit-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(29, 112, 183, 0.22);
}

.login-submit-icon {
  margin-left: 4px;
}

/* Footer support link */
.login-footer-support {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--primary) !important;
  font-weight: 500;
}

.login-footer-support:hover {
  color: var(--primary-hover) !important;
}

.login-footer {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-soft);
  border-top: 1px solid var(--border);
}

.login-footer-links {
  display: flex;
  gap: 14px;
}

.cc-login-hero__content {
  position: relative;
  z-index: 1;
}

/* Suppress browser autofill/action icons in WebKit browsers */
input::-webkit-credentials-auto-fill-button,
input::-webkit-contacts-auto-fill-button,
input::-webkit-strong-password-auto-fill-button {
  display: none !important;
  visibility: hidden;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none;
}

@media (max-width: 767.98px) {
  .cc-login {
    grid-template-columns: 1fr;
  }

  .cc-login-hero {
    display: none;
  }

  /* Footer is position:fixed; logo + body stay grouped with gap; padding-bottom clears fixed bar */
  .cc-login-form {
    min-height: 100vh;
    justify-content: center;
    gap: 40px;
    padding: 40px 24px;
    padding-bottom: 80px;
  }

  .login-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: 0;
    padding: 12px 24px;
    background: var(--surface);
    border-top: 1px solid var(--border);
  }
}

/* ── Header: estado activo en nav-link Bootstrap ── */
.cc-header .nav-link.active {
  color: var(--primary);
}

.cc-header .nav-link.active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
}

/* ── Header: dropdown-menu con estilos cc-dropdown ── */
.cc-header .dropdown-menu {
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-3);
  padding: 6px;
  font-size: var(--fs-md);
  animation: dropdown-in .14s ease;
}

.cc-header .dropdown-menu .dropdown-item {
  border-radius: var(--r-1);
  font-size: var(--fs-md);
  color: var(--text);
  padding: 7px 10px;
}

.cc-header .dropdown-menu .dropdown-item:hover,
.cc-header .dropdown-menu .dropdown-item:focus {
  background: var(--primary-soft);
  color: var(--primary);
}

.cc-header .dropdown-menu .dropdown-item.active,
.cc-header .dropdown-menu .dropdown-item:active {
  background: var(--primary-soft);
  color: var(--primary);
}

.cc-form-section-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--primary);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--primary-soft);
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  gap: 8px;
}

.cc-form-section-title::before {
  content: "";
  width: 3px;
  height: 14px;
  background: var(--primary);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── cc-form-row: colapso automático en móvil ── */
/* ── cc-page-header: wrap en móvil ── */
@media (max-width: 575.98px) {
  .cc-form-row {
    grid-template-columns: 1fr;
  }

  .cc-form-row>label {
    text-align: left;
    padding-top: 0;
  }

  .cc-page-header {
    flex-wrap: wrap;
    padding: 10px var(--sp-4);
  }

  .cc-page-header .actions {
    width: 100%;
    margin-left: 0;
    margin-top: var(--sp-2);
  }
}

/* Cabecera standalone + tarjeta: un solo bloque (anula .standalone + * de core.css) */
.cc-main>.cc-page-header.standalone:has(+ .cc-card) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.cc-main>.cc-page-header.standalone+.cc-card {
  margin-top: 0;
  border-top: 0;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.cc-main>.cc-page-header.standalone+.alert+.cc-card {
  margin-top: 0;
  border-top: 0;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* Cabecera standalone → cuerpo de dashboard (no es .cc-card, necesita su propio margen) */
.cc-main>.cc-page-header.standalone+.dashboard-body {
  margin-top: var(--sp-5);
}

/* ── DataTables 3: integración con cc-table ── */

/* Avatar en celdas de listados persona / talento humano (sin style="" inline) */
.cc-dt-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.cc-dt-avatar--sm {
  width: 36px;
  height: 36px;
}

/* Toolbar: length + filter (clases dt-* de DT2/3) */
.cc-table-toolbar .dt-length,
.cc-table-toolbar .dt-search {
  display: flex;
  align-items: center;
}

.cc-table-toolbar .dt-search {
  margin-left: auto;
}

.cc-table-toolbar .dt-length label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.cc-table-toolbar .dt-search label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0;
  white-space: nowrap;
}

.cc-table-toolbar .dt-length select,
.cc-table-toolbar .dt-search input {
  height: 26px;
  padding: 0 8px;
  font-size: var(--fs-sm);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-1);
  background: var(--surface);
  color: var(--text);
  outline: none;
}

.cc-table-toolbar .dt-search input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* Footer: info + paginador */
.cc-card-footer .dt-info {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ── Paginador DataTables (Bootstrap pagination) ── */
div.dt-container .cc-card-footer .dt-paging {
  display: flex;
  align-items: center;
  margin-left: auto;
}

div.dt-container .cc-card-footer .pagination {
  margin: 0;
  gap: 0;
}

div.dt-container .cc-card-footer .page-item .page-link {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted) !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-1) !important;
  line-height: 1;
}

div.dt-container .cc-card-footer .page-item .page-link:hover {
  color: var(--primary) !important;
  background: var(--surface-2) !important;
  border-color: var(--border-strong) !important;
}

div.dt-container .cc-card-footer .page-item.active .page-link {
  color: #fff !important;
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  font-weight: 600;
}

div.dt-container .cc-card-footer .page-item.disabled .page-link {
  opacity: 0.35;
  cursor: not-allowed;
  color: var(--text-soft) !important;
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

/* Ancho correcto de tabla */
table.cc-table {
  width: 100% !important;
}

/* Tooltip cc-tip: evitar scroll horizontal en columna de acciones */
.col-actions .cc-tip[data-tip]:hover::after {
  left: auto;
  right: 0;
  transform: none;
}

/* Tooltip cc-tip en cabeceras de tabla: desplegar hacia ABAJO.
   core.css ancla el tooltip con bottom:calc(100% + 6px) — hacia arriba.
   En un <th> eso lo dibuja fuera del área visible de .cc-table-wrap
   (que es scroll container por su overflow-x:auto y clipea en ambos
   ejes) o solapado con la cabecera sticky. Sobre el tbody sí hay
   espacio. Hay que anular bottom explícitamente: con bottom y top
   ambos definidos en un absolute de altura auto, bottom gana. */
.cc-table thead th.cc-tip[data-tip]:hover::after,
.cc-table thead th .cc-tip[data-tip]:hover::after {
  bottom: auto;
  top: calc(100% + 6px);
}

/* Evitar subrayado en botones tipo enlace (<a class="btn">) */
a.btn:hover {
  text-decoration: none;
}

/* Alertas con tokens cc-* */
.alert-success {
  background: rgba(16, 166, 92, .10);
  border-color: rgba(16, 166, 92, .25);
  color: var(--success);
}

.alert-danger {
  background: rgba(220, 53, 69, .10);
  border-color: rgba(220, 53, 69, .25);
  color: var(--danger);
}

/* ── Toast notifications (bootstrap-notify) ── */
.cc-toast {
  position: fixed;
  min-width: 280px;
  max-width: 380px;
  padding: 12px 40px 12px 14px;
  border-radius: var(--r-2);
  box-shadow: var(--shadow-3);
  font-size: var(--fs-md);
  font-family: inherit;
  line-height: 1.5;
  pointer-events: all;
}

.cc-toast-success {
  background: var(--success);
  color: #fff;
  border: none;
}

.cc-toast-danger {
  background: var(--danger);
  color: #fff;
  border: none;
}

.cc-toast-warning {
  background: var(--warning);
  color: #fff;
  border: none;
}

.cc-toast-info {
  background: var(--primary);
  color: #fff;
  border: none;
}

.cc-toast-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, .7);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.cc-toast-close:hover {
  color: #fff;
}

.cc-toast [data-notify="title"] {
  display: block;
  font-weight: 600;
  font-size: var(--fs-sm);
  opacity: .85;
  margin-bottom: 2px;
}

/* cc-brand: ajustar al tamaño real del logo sin espacio sobrante */
.cc-brand {
  min-width: auto;
  padding: 0 16px;
}

.cc-brand img {
  height: 32px;
  width: auto;
}

/* Header: limitar ancho máximo igual que cc-main
   evita desconexión visual en monitores grandes */
.cc-header>.cc-brand,
.cc-header {
  max-width: 100%;
}

/* Sin overflow:hidden en .cc-header/.cc-nav: recorta .cc-dropdown y dropdowns Bootstrap.
   min-width:0 permite que el ítem flex del nav se comprima (core: flex:1). */
.cc-nav {
  flex-wrap: nowrap;
  min-width: 0;
}

/* .cc-header .cc-nav, .cc-header .cc-header-actions: sin cambio — flex ya los distribuye bien */

@media (min-width: 1600px) {
  .cc-header {
    padding: 0 calc((100vw - 1600px) / 2);
  }
}

/* ── Header: responsividad en rango tablet-landscape (992px–1199px) ── */
@media (min-width: 992px) and (max-width: 1199.98px) {

  /* Reducir padding del brand */
  .cc-brand {
    padding: 0 10px;
  }

  /* Reducir padding de cada nav-link */
  .cc-nav-link {
    padding: 0 8px;
    font-size: var(--fs-sm);
  }

  /* Reducir buscador */
  .cc-header-search {
    width: 160px;
  }

  .cc-avatar {
    padding: 4px;
    border-radius: 50%;
  }

  /* Reducir gap en header-actions */
  .cc-header-actions {
    gap: 4px;
    padding-left: 6px;
    padding-right: 8px;
  }
}

/* ── Header: si aún no cabe en 992px–1050px, activar hamburguesa antes ── */
@media (max-width: 1050px) {
  .cc-nav {
    display: none;
  }

  .cc-hamburger {
    display: inline-flex;
  }

  .cc-header-search {
    display: none;
  }
}

/* Menú nestable (parametro/menu): icono sin inline style */
.icono {
  font-size: 1.25rem;
}

/* Toggle con checkbox nativo: track 36×20px, knob 14×14px */
.cc-switch-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: var(--fs-md);
  color: var(--text);
  user-select: none;
  position: relative;
}

.cc-switch-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 20px;
  box-sizing: border-box;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  transition: background 0.2s, border-color 0.2s;
  pointer-events: none;
  z-index: 0;
}

.cc-switch-wrap::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  margin-top: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s, box-shadow 0.2s;
  pointer-events: none;
  z-index: 1;
}

.cc-switch-wrap:has(input:checked)::before {
  background: var(--primary);
  border-color: var(--primary);
}

.cc-switch-wrap:has(input:checked)::after {
  transform: translateX(16px);
}

.cc-switch-wrap input[type="checkbox"] {
  appearance: none;
  width: 36px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
  opacity: 0;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.cc-switch-wrap:has(input:focus-visible)::before {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* bootstrap-fileinput (Krajee): plantilla BS4 con .input-group-append / .input-group-btn
   envolviendo el botón. En BS5 el ajuste de bordes aplica al wrapper (sin borde visible),
   no al .btn — el “Examinar” queda visualmente separado del caption. */
.file-input .input-group>.input-group-append,
.file-input .input-group>.input-group-btn {
  display: flex;
  align-items: stretch;
}

.file-input .input-group>.input-group-append .btn:not(.dropdown-toggle),
.file-input .input-group>.input-group-btn .btn:not(.dropdown-toggle) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  /* .form-control del caption = 34px; .btn en core = 32px — stretch no pisa height fijo */
  height: 34px;
  min-height: 34px;
  box-sizing: border-box;
  align-self: stretch;
  position: relative;
  z-index: 2;
}

/* ── bootstrap-fileinput (Krajee) dentro de .cc-form-row ──────────────
   El widget Krajee reemplaza el <input type="file"> original con su
   propio markup (.file-input > .input-group > .file-caption + botón).
   Las reglas base de .file-input fijan el botón en 34px (altura del
   .form-control anterior al estándar cc-form-row). Dentro de una fila
   cc-form-row los demás campos miden 40px (ver core.css), así que el
   widget queda visualmente más bajo y descuadrado.
   Este bloque iguala la altura a 40px solo cuando el widget vive
   dentro de .cc-form-row, sin afectar usos de Krajee fuera de este
   patrón. */
.cc-form-row .file-input .input-group {
  height: 40px;
}

.cc-form-row .file-input .file-caption {
  height: 40px;
  min-height: 40px;
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 1rem;
}

.cc-form-row .file-input .input-group>.input-group-append .btn:not(.dropdown-toggle),
.cc-form-row .file-input .input-group>.input-group-btn .btn:not(.dropdown-toggle) {
  height: 40px;
  min-height: 40px;
}

/* elErrorContainer (#kartik-file-errors) no debe expandir la fila:
   mismo tratamiento que .invalid-feedback — fuera del flujo del grid. */
.cc-form-row .file-input+#kartik-file-errors,
.cc-form-row #kartik-file-errors {
  position: absolute;
  left: 25%;
  right: 0;
  bottom: 0;
  transform: translateY(100%);
  font-size: var(--fs-xs);
  color: var(--danger);
  z-index: 1;
}

@media (max-width: 991.98px) {

  .cc-form-row .file-input+#kartik-file-errors,
  .cc-form-row #kartik-file-errors {
    left: 0;
    position: static;
    transform: none;
  }
}

/* Ocultar botón global Remove del fileinput toolbar.
   showRemove:false no funciona en BS5 — el plugin genera .close en lugar
   de .btn-close. El único remove permitido es el kv-file-remove por thumbnail. */
.fileinput-remove-button {
  display: none !important;
}

/* Sin sobreescritura — el tema fas define el botón correctamente. */
/* Solo se oculta el duplicado si existiera: */
.file-preview-frame .file-actions .fileinput-remove {
  display: none !important;
}

/* ── Tom Select: evitar recorte del dropdown dentro de .cc-card ──
   .cc-card tiene overflow:hidden (core.css) para border-radius;
   cuando contiene un .ts-wrapper en el header, el desplegable queda
   cortado. Se permite overflow visible solo en ese contexto. */
.cc-card:has(.ts-wrapper),
.cc-page-header:has(.ts-wrapper) {
  overflow: visible;
}

.cc-card:has(.ts-wrapper) .cc-card-header,
.cc-page-header:has(.ts-wrapper) {
  overflow: visible;
}

/* ── TomSelect en filtros de cc-card-header: altura estable ──────────
   TomSelect recalcula el padding del .ts-control al hacer focus,
   lo que cambia la altura del wrapper y descoordina los selects vecinos.
   Se fija height y align-items en el .ts-control para que el
   comportamiento activo e inactivo sean idénticos.
   Acotado a .cc-card-header para no afectar formularios del sistema. */
.cc-card-header .ts-wrapper.form-select {
  height: 34px;
  min-height: 34px;
  max-height: 34px;
  box-sizing: border-box;
}

.cc-card-header .ts-wrapper.form-select .ts-control {
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  padding-top: 0;
  padding-bottom: 0;
  align-items: center;
  flex-wrap: nowrap;
  box-sizing: border-box;
}

.cc-card-header .ts-wrapper.form-select .ts-control input {
  height: 100%;
  min-height: 0;
  padding: 0;
  line-height: 1;
}

/* ── TomSelect en .cc-page-header .actions (ej. Planeación: boton-p) ──
   Mismo problema que en .cc-card-header: TomSelect recalcula el padding
   de .ts-control al hacer focus, lo que altera su altura y estira el
   .cc-page-header contenedor (que no tiene height fijo). Se aplica el
   mismo tratamiento de altura estable ya usado en .cc-card-header. */
.cc-page-header .actions .ts-wrapper.form-select {
  height: 34px;
  min-height: 34px;
  max-height: 34px;
  box-sizing: border-box;
}

.cc-page-header .actions .ts-wrapper.form-select .ts-control {
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  padding-top: 0;
  padding-bottom: 0;
  align-items: center;
  flex-wrap: nowrap;
  box-sizing: border-box;
}

.cc-page-header .actions .ts-wrapper.form-select .ts-control input {
  height: 100%;
  min-height: 0;
  padding: 0;
  line-height: 1;
}

.cc-page-header .actions .ts-control .cc-asig-v2-ciclo,
.cc-page-header .actions .ts-dropdown .cc-asig-v2-ciclo {
  vertical-align: middle;
  margin-right: 2px;
}

/* ════════════════════════════════════════════
   ASIGNACIÓN ACADÉMICA
   ════════════════════════════════════════════ */

/* Acordeón */
.cc-asig-grupo {
  border-bottom: 1px solid var(--border);
}

.cc-asig-grupo:last-child {
  border-bottom: 0;
}

/* grupo-body: card sin radio superior — se une visualmente al head */
.cc-asig-grupo-body.cc-card {
  border-top: 1px solid var(--border);
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  margin-top: 0 !important;
}

.cc-asig-grupo-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  background: var(--surface);
  transition: background .12s;
  user-select: none;
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}

.cc-asig-grupo-head:hover {
  background: var(--surface-2);
}

.cc-asig-avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: .03em;
}

.cc-asig-grupo-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cc-asig-grupo-nombre {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.cc-asig-grupo-meta {
  font-size: 12px;
  color: var(--text-soft);
}

/* Alertas en cabecera de grupo */
.cc-asig-alert {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
}

.cc-asig-alert--choque {
  background: rgba(220, 53, 69, .1);
  color: var(--danger);
}

.cc-asig-alert--docente {
  background: rgba(229, 154, 10, .12);
  color: var(--warning);
}

/* Ocupación en cabecera de grupo */
.cc-asig-ocupacion {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.cc-asig-ocupacion-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--text-soft);
  text-transform: uppercase;
}

.cc-asig-ocupacion-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* Separador de semestre — ahora es acordeón */
.cc-asig-semestre-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text-soft);
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  transition: background .12s;
}

.cc-asig-semestre-head:hover {
  background: var(--border);
}

.cc-asig-sem-chevron {
  font-size: 10px;
  color: var(--text-soft);
  transition: transform .18s;
  flex-shrink: 0;
  transform: rotate(0deg);
}

.cc-asig-sem-chevron--open {
  transform: rotate(90deg);
}

.cc-asig-semestre-meta {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}

.cc-asig-semestre-nombre {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0;
  text-transform: none;
}

.cc-asig-fila-nombre {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cc-asig-fila-desc {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cc-asig-tag {
  font-size: 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 1px 6px;
  border-radius: 4px;
}

.cc-asig-tag--malla {
  color: var(--primary);
  border-color: var(--primary-soft);
  background: var(--primary-soft);
  cursor: default;
}

/* Docente */
.cc-asig-fila-docente {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.cc-asig-docente-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.cc-asig-docente-nombre {
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Horario */
.cc-asig-fila-horario {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cc-asig-horario-texto {
  font-size: 12px;
  color: var(--text);
}

.cc-asig-choque-texto {
  font-size: 11px;
  color: var(--danger);
  font-weight: 500;
}

/* Ciclo */
.cc-asig-fila-ciclo {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
}

/* Barra de ocupación */
.cc-asig-barra-wrap {
  flex: 1;
  height: 5px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
  min-width: 50px;
}

.cc-asig-barra {
  height: 100%;
  border-radius: 3px;
  transition: width .3s;
}

.cc-asig-barra--llena {
  background: var(--primary);
}

.cc-asig-barra--media {
  background: var(--cc-yellow);
}

.cc-asig-barra--baja {
  background: var(--border-strong);
}

/* Acciones */
.cc-asig-fila-acciones {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}

/* Malla item (en form editar) */
.cc-asig-malla-item {
  font-size: 13px;
  color: var(--text);
  padding: 4px 0;
  border-bottom: 1px dashed var(--border);
}

/* Selector de período en cabecera */
.cc-asig-periodo-wrap {
  width: 180px;
  flex-shrink: 0;
}

/* Notas — planilla: agrupación por Tipo de evidencia.
   Tinte de grupo en cabecera (más marcado) y columna completa (8% tenue).
   Zebra/hover de core.css se anulan abajo para no tapar el tinte. */

/* Footer sticky reutilizado por inasistencia (planilla de notas ya no lo usa) */
.cc-nota-footer-sticky {
  position: sticky;
  bottom: 0;
  z-index: 5;
  justify-content: flex-start;
}

/* Planilla con un único scroll en ambos ejes. Las alturas reales de la cabecera
   y de la primera fila del thead se publican en estas variables desde el JS. */
#form-guardar .cc-table-wrap {
  --cc-nota-hdr-h: 0px;
  --cc-nota-thead-row-1-h: 0px;
  /* --cc-nota-wrap-max lo fija el JS a partir de la posición real del wrap
       en el viewport (navbar + título + pestañas), no solo del navbar. Sin él
       el contenedor sobresale por debajo del viewport y fuerza scroll de la
       ventana, deslizando la tarjeta bajo el navbar. Fallback conservador. */
  max-height: var(--cc-nota-wrap-max, calc(100dvh - var(--header-h) - var(--sp-5)));
  overflow: auto;
}

/* Cabecera de la planilla ("Notas" + chip + Guardar): vive DENTRO del
   scrollport para no desmarcarse de la tabla al scrollear. Primera capa de la
   cadena sticky; el redondeo lo pone el card, no esta caja.
   Se desplaza en horizontal con la tabla — no añadir left fijo: deformaría
   el ancho. */
.cc-nota-hdr {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 13;
  background: var(--surface);
  border-radius: 0;
}

/* Barra de stats: vive en el footer del card, debajo del scrollport. Se aplica
   junto a .cc-card-footer, que aporta padding, fondo, borde y tipografía; aquí
   solo el reparto horizontal. No es sticky: fuera del scroll no compite con la
   cabecera ni con el thead. */
.cc-nota-stats {
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: flex-start;
}

.cc-nota-stat strong {
  color: var(--text);
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
}

.cc-nota-stat-hint {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-soft);
  max-width: 42ch;
  line-height: 1.35;
}

.cc-nota-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-soft);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}

.cc-nota-chip.is-pendiente {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border-strong));
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
  color: var(--danger);
}

.cc-nota-chip.is-ok {
  border-color: color-mix(in srgb, var(--success) 40%, var(--border-strong));
  background: color-mix(in srgb, var(--success) 12%, var(--surface));
  color: var(--success);
  cursor: default;
}

.cc-nota-chip.is-ok .cc-nota-chip-pend,
.cc-nota-chip:not(.is-ok) .cc-nota-chip-ok {
  display: none;
}

.cc-nota-chip:hover,
.cc-nota-chip.is-activo {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}

.cc-nota-chip.is-pendiente:hover,
.cc-nota-chip.is-pendiente.is-activo {
  border-color: var(--danger);
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 18%, var(--surface));
}

.cc-nota-chip.is-ok:hover {
  border-color: color-mix(in srgb, var(--success) 40%, var(--border-strong));
  background: color-mix(in srgb, var(--success) 12%, var(--surface));
  color: var(--success);
}

.cc-nota-chip[hidden],
.cc-nota-chip-x {
  display: none;
}

.cc-nota-chip.is-activo .cc-nota-chip-x {
  display: inline;
}

.cc-nota-chip-n {
  font-weight: 700;
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
}

.cc-tab-count--danger {
  background: color-mix(in srgb, var(--danger) 14%, var(--surface)) !important;
  color: var(--danger) !important;
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border)) !important;
}

.cc-tab.active .cc-tab-count--danger {
  background: color-mix(in srgb, var(--danger) 18%, var(--surface)) !important;
  color: var(--danger) !important;
}

.cc-nota-stats-guardar {
  margin-left: auto;
}

#guardar-nota:disabled {
  opacity: 1;
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-soft);
  cursor: not-allowed;
}

/*
 * Apilamiento (Chrome/tablas sticky en dos ejes):
 * sin contexto en thead, las celdas left-sticky del tbody se pintan encima
 * del encabezado aunque su z-index sea menor (orden DOM).
 * Orden: celdas normales < sticky tbody < thead < esquina thead < stats < header
 */
#tabla-calificacion thead {
  position: relative;
  z-index: 5;
}

#tabla-calificacion tbody {
  position: relative;
  z-index: 1;
}

#tabla-calificacion tbody td {
  padding-top: 5px;
  padding-bottom: 5px;
}

/* editableTableWidget inyecta el <input> de edición como hermano de la tabla
   dentro de .cc-table-wrap, en position:absolute y sin z-index. El tbody tiene
   z-index:1 (apilamiento sticky), así que sin esto el editor queda DETRÁS de
   las celdas: invisible y sin recibir clics ("no editable"). Debe superar al
   tbody y a la barra de stats sticky (z-index:12). */
.cc-table-wrap:has(#tabla-calificacion) input.table-edit {
  z-index: 15;
}

/* Cada fila del thead tiene un offset propio bajo la cabecera. Con thead de 1
   fila, --cc-nota-thead-row-1-h queda en 0 (JS).
   --cc-nota-hdr-h cae a 0 donde no hay cabecera dentro del scroll
   (calificacion/habilitacion reusa #form-guardar y #tabla-calificacion). */
#tabla-calificacion thead tr:first-child th {
  top: var(--cc-nota-hdr-h, 0px);
  z-index: 10;
}

#tabla-calificacion thead tr:nth-child(2) th {
  top: calc(var(--cc-nota-hdr-h, 0px) + var(--cc-nota-thead-row-1-h));
  z-index: 10;
}

/* Anchos fijos — colgroup + sticky left (un solo origen de verdad).
   Cambiar solo las variables; los left se recalculan con calc(). */
#tabla-calificacion {
  --cc-nota-w-nombre: 240px;
  --cc-nota-w-prom: 48px;
  --cc-nota-w-def: 62px;
  --cc-nota-w-act: 118px;
}

#tabla-calificacion col.cc-nota-col-nombre {
  width: var(--cc-nota-w-nombre);
  min-width: var(--cc-nota-w-nombre);
}

#tabla-calificacion col.cc-nota-col-parcial {
  width: var(--cc-nota-w-prom);
  min-width: var(--cc-nota-w-prom);
}

#tabla-calificacion col.cc-nota-col-def {
  width: var(--cc-nota-w-def);
  min-width: var(--cc-nota-w-def);
}

#tabla-calificacion col.cc-nota-col-act {
  width: var(--cc-nota-w-act);
  min-width: var(--cc-nota-w-act);
}

#tabla-calificacion .cc-nota-sticky-nombre {
  position: sticky;
  left: 0;
  z-index: 1;
}

#tabla-calificacion .cc-nota-sticky-parcial {
  position: sticky;
  left: var(--cc-nota-w-nombre);
  z-index: 1;
  border-left: 1px solid var(--border);
}

#tabla-calificacion .cc-nota-sticky-def {
  position: sticky;
  left: calc(var(--cc-nota-w-nombre) + var(--cc-nota-w-prom));
  z-index: 1;
}

/* Esquina thead: especificidad deliberadamente mayor que
   `thead tr:*-child th` (z-index:10). Misma especificidad + orden
   del archivo hacía que el 11 quedara en 10 y las cabeceras de
   actividad se dibujaran sobre PARCIAL/DEF al desplazar. */
#tabla-calificacion thead tr th.cc-nota-sticky-nombre,
#tabla-calificacion thead tr th.cc-nota-sticky-parcial,
#tabla-calificacion thead tr th.cc-nota-sticky-def {
  z-index: 11;
}

/* Anular zebra/hover/selected de core.css: transparent deja pasar el tinte
   de columna. Sticky abajo reimpone fondo opaco (misma especificidad + clase). */
#tabla-calificacion tbody tr:nth-child(even) td,
#tabla-calificacion tbody tr:hover td,
#tabla-calificacion tbody tr.selected td {
  background: transparent;
}

/* Fondos opacos en sticky (sin zebra ni hover de fila). */
#tabla-calificacion tbody td.cc-nota-sticky-nombre,
#tabla-calificacion tbody td.cc-nota-sticky-parcial,
#tabla-calificacion tbody td.cc-nota-sticky-def,
#tabla-calificacion tbody tr:nth-child(even) td.cc-nota-sticky-nombre,
#tabla-calificacion tbody tr:nth-child(even) td.cc-nota-sticky-parcial,
#tabla-calificacion tbody tr:nth-child(even) td.cc-nota-sticky-def,
#tabla-calificacion tbody tr:hover td.cc-nota-sticky-nombre,
#tabla-calificacion tbody tr:hover td.cc-nota-sticky-parcial,
#tabla-calificacion tbody tr:hover td.cc-nota-sticky-def,
#tabla-calificacion tbody tr.selected td.cc-nota-sticky-nombre,
#tabla-calificacion tbody tr.selected td.cc-nota-sticky-parcial,
#tabla-calificacion tbody tr.selected td.cc-nota-sticky-def {
  background: var(--surface);
}

/* DEF: azul uniforme y opaco para que el contenido desplazado no se transparente. */
#tabla-calificacion tbody td.cc-nota-sticky-def,
#tabla-calificacion tbody tr:nth-child(even) td.cc-nota-sticky-def,
#tabla-calificacion tbody tr:hover td.cc-nota-sticky-def,
#tabla-calificacion tbody tr.selected td.cc-nota-sticky-def {
  background: var(--primary-soft);
}

[data-theme="dark"] #tabla-calificacion tbody td.cc-nota-sticky-def,
[data-theme="dark"] #tabla-calificacion tbody tr:nth-child(even) td.cc-nota-sticky-def,
[data-theme="dark"] #tabla-calificacion tbody tr:hover td.cc-nota-sticky-def,
[data-theme="dark"] #tabla-calificacion tbody tr.selected td.cc-nota-sticky-def {
  background: color-mix(in srgb, var(--primary) 18%, var(--surface));
}

#tabla-calificacion thead th.cc-nota-sticky-def {
  background: var(--primary-soft);
}

[data-theme="dark"] #tabla-calificacion thead th.cc-nota-sticky-def {
  background: color-mix(in srgb, var(--primary) 18%, var(--surface));
}

/* Sombra al borde derecho de la última columna sticky */
#tabla-calificacion .cc-nota-sticky-def {
  box-shadow: 2px 0 0 var(--border);
}

/* core.css fija .cc-table thead th { text-align:left } con especificidad
   0-1-1, que le gana a .text-center de Bootstrap (0-1-0). */
#tabla-calificacion thead th {
  text-align: center;
}

#tabla-calificacion thead th.cc-nota-sticky-nombre,
#tabla-calificacion tbody td.cc-nota-nombre {
  text-align: left;
  vertical-align: middle;
}

#tabla-calificacion .cc-nota-nombre-txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#tabla-calificacion tbody tr.is-editing td.cc-nota-sticky-nombre {
  box-shadow: inset 3px 0 0 var(--primary);
}

#tabla-calificacion tbody tr.is-editing .cc-nota-nombre-txt {
  color: var(--primary);
  font-weight: 500;
}

/* Tipo de evidencia: variante de píldora */
.cc-badge.cc-eval-conocimiento {
  background: #FDEEDD;
  color: #A35C05;
  border-color: transparent;
}

.cc-badge.cc-eval-desempeno {
  background: rgba(237, 215, 8, .18);
  color: var(--cc-yellow-700);
  border-color: transparent;
}

.cc-badge.cc-eval-producto {
  background: var(--accent-soft);
  color: var(--cc-green-700);
  border-color: transparent;
}

.cc-badge.cc-eval-institucional {
  background: #f0ebfa;
  color: #6d28d9;
}

[data-theme="dark"] .cc-badge.cc-eval-conocimiento {
  background: rgba(163, 92, 5, .20);
  color: #E8A25E;
}

[data-theme="dark"] .cc-badge.cc-eval-desempeno {
  background: rgba(237, 215, 8, .16);
  color: #ECD645;
}

/* Cabecera de grupo: tintes propios (contraste vs --surface-2 del thead) */
/* IMPORTANTE: estas celdas son sticky (thead fijo). Un fondo con alfa deja
   ver las notas del tbody desplazándose por debajo. Los fondos deben ser
   SÓLIDOS: usar color-mix(... , var(--surface)) para aplanar la
   transparencia, nunca rgba/hsla ni los valores translúcidos de badge-*. */
#tabla-calificacion thead tr:first-child th[colspan] {
  border-bottom: 2px solid var(--border-strong);
  text-transform: none;
  letter-spacing: normal;
}

#tabla-calificacion thead th.cc-eval-conocimiento {
  background: #FDEEDD;
  color: #A35C05;
}

#tabla-calificacion thead th.cc-eval-desempeno {
  background: color-mix(in srgb, var(--cc-yellow) 18%, var(--surface));
  color: var(--cc-yellow-700);
}

#tabla-calificacion thead th.cc-eval-producto {
  background: var(--accent-soft);
  color: var(--cc-green-700);
}

#tabla-calificacion thead th.cc-eval-institucional {
  background: color-mix(in srgb, var(--text-muted) 18%, var(--surface));
  color: var(--text-muted);
}

[data-theme="dark"] #tabla-calificacion thead th.cc-eval-conocimiento {
  background: color-mix(in srgb, #A35C05 20%, var(--surface));
  color: #E8A25E;
}

[data-theme="dark"] #tabla-calificacion thead th.cc-eval-desempeno {
  background: color-mix(in srgb, var(--cc-yellow) 16%, var(--surface));
  color: #ECD645;
}

/* En claro var(--accent-soft) es sólido (#F1F8DF); en oscuro es rgba(.18)
   translúcido y esta cabecera es sticky. Se aplana contra var(--surface). */
[data-theme="dark"] #tabla-calificacion thead th.cc-eval-producto {
  background: color-mix(in srgb, var(--cc-green) 18%, var(--surface));
  color: var(--cc-green-700);
}

[data-theme="dark"] #tabla-calificacion thead th.cc-eval-institucional {
  background: color-mix(in srgb, var(--text-muted) 28%, var(--surface));
  color: var(--text-muted);
}

/* Trama diagonal sobre el tinte de columna (solo celdas sin nota).
   background-image no reemplaza el background-color del tinte. */
#tabla-calificacion.mostrar-pendientes td.cc-nota-vacia {
  background-image: repeating-linear-gradient(-45deg,
      transparent,
      transparent 3px,
      color-mix(in srgb, var(--text-muted) 10%, transparent) 3px,
      color-mix(in srgb, var(--text-muted) 10%, transparent) 4px);
}

[data-theme="dark"] #tabla-calificacion.mostrar-pendientes td.cc-nota-vacia {
  background-image: repeating-linear-gradient(-45deg,
      transparent,
      transparent 3px,
      color-mix(in srgb, var(--text-muted) 16%, transparent) 3px,
      color-mix(in srgb, var(--text-muted) 16%, transparent) 4px);
}

/* Límite de grupo: línea vertical que recorre toda la tabla */
#tabla-calificacion .cc-nota-grupo-ini {
  border-left: 2px solid var(--border);
}

/* Separador entre actividades del mismo grupo (más fino/claro que el de grupo).
   No alcanza sticky: solo th.cc-nota-th y td.nota. */
#tabla-calificacion th.cc-nota-th:not(.cc-nota-grupo-ini),
#tabla-calificacion td.nota:not(.cc-nota-grupo-ini) {
  border-left: 1px solid color-mix(in srgb, var(--border) 70%, var(--surface));
}

/* Fila única: nombre de actividad + chip de evidencia.
   Anula uppercase del thead global. */
#tabla-calificacion thead th.cc-nota-th {
  white-space: normal;
  vertical-align: bottom;
  text-transform: none;
  letter-spacing: normal;
  overflow: hidden;
  text-align: center;
}

#tabla-calificacion .cc-nota-act {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  line-height: 1.25;
  max-width: 100px;
  margin: 0 auto 4px;
  font-size: var(--fs-sm);
  letter-spacing: normal;
  font-weight: 500;
  color: var(--text);
}

#tabla-calificacion .cc-nota-th-chip {
  display: inline-flex;
  max-width: 100%;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#tabla-calificacion tbody td,
#tabla-calificacion thead th {
  padding-left: 8px;
  padding-right: 8px;
}

.cc-nota-pct {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-soft);
  text-transform: none;
  letter-spacing: normal;
  margin-top: 1px;
}

/* Guión visual en celdas vacías (el texto sigue vacío para el JS). */
#tabla-calificacion tbody td.nota.cc-nota-vacia {
  color: var(--text-soft);
}
#tabla-calificacion tbody td.nota.cc-nota-vacia::before {
  content: '—';
}
#tabla-calificacion tbody td.promedio:empty::before,
#tabla-calificacion tbody td.definitiva:not(.cc-nota-definitiva):empty::before {
  content: '—';
  color: var(--text-soft);
  font-weight: 500;
}

#tabla-calificacion td.definitiva {
  white-space: nowrap;
}

/* PROM: solo señal de reprobado. Aprobado va sin fondo (queda el --surface
   del bloque sticky). Fondo sólido (color-mix vs --surface) porque la celda
   es sticky; las variantes even/hover/selected superan la regla que reimpone
   --surface en sticky. */
#tabla-calificacion tbody td.promedio.is-reprobada,
#tabla-calificacion tbody tr:nth-child(even) td.promedio.is-reprobada,
#tabla-calificacion tbody tr:hover td.promedio.is-reprobada,
#tabla-calificacion tbody tr.selected td.promedio.is-reprobada {
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
  color: var(--danger);
}

[data-theme="dark"] #tabla-calificacion tbody td.promedio.is-reprobada,
[data-theme="dark"] #tabla-calificacion tbody tr:nth-child(even) td.promedio.is-reprobada,
[data-theme="dark"] #tabla-calificacion tbody tr:hover td.promedio.is-reprobada,
[data-theme="dark"] #tabla-calificacion tbody tr.selected td.promedio.is-reprobada {
  background: color-mix(in srgb, var(--danger) 20%, var(--surface));
  color: #F4A0AB;
}

/* DEF: pill azul uniforme, sin variante de aprobado/reprobado.
   Anula de .cc-badge: --fs-xs (hereda tipografía de celda) y padding
   3px 10px → 3px 7px. La celda DEF tiene --cc-nota-w-def 62px fijos;
   el padding horizontal reducido evita presión de ancho junto al
   icono info. min-width: 44px domina el ancho final en la práctica. */
#tabla-calificacion .cc-nota-def-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 44px;
  padding: 3px 7px;
  border-radius: 999px;
  line-height: 1.2;
  font-size: inherit;
  font-weight: inherit;
}

#tabla-calificacion .cc-nota-def-info {
  font-size: 10px;
  font-weight: 400;
  color: inherit;
  opacity: .72;
  vertical-align: middle;
}

.cc-table td.nota,
.cc-table td.promedio,
.cc-table td.definitiva {
  text-align: center;
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
}

#tabla-calificacion td.nota {
  font-weight: 400;
}

.cc-table:not(.cc-nota-solo-lectura) td.nota {
  cursor: text;
}

.cc-table td.definitiva {
  cursor: pointer;
}

/* Rediseño de la planilla de Notas. El id también existe en Habilitaciones:
   toda regla de esta variante debe conservar el scope .cc-nota-planilla. */
#tabla-calificacion.cc-nota-planilla {
  --cc-nota-w-numero: 42px;
}

#tabla-calificacion.cc-nota-planilla col.cc-nota-col-numero {
  width: var(--cc-nota-w-numero);
  min-width: var(--cc-nota-w-numero);
}

/* Retícula completa: core.css solo trae border-bottom, las verticales son de
   aquí. Los selectores repiten .nota y .cc-nota-th porque las reglas de borde
   previas (sin la clase de variante) llegan a 1-2-1 y ganarían por conteo de
   clases; subir especificidad con la clase, no con !important. */
#tabla-calificacion.cc-nota-planilla tbody td,
#tabla-calificacion.cc-nota-planilla tbody td.nota,
#tabla-calificacion.cc-nota-planilla tfoot th,
#tabla-calificacion.cc-nota-planilla tfoot td {
  border-left: 1px solid #d4dce8;
  border-bottom-color: #d4dce8;
}

#tabla-calificacion.cc-nota-planilla thead th,
#tabla-calificacion.cc-nota-planilla thead th.cc-nota-th {
  border-left: 1px solid #c6d0de;
  border-bottom-color: #c6d0de;
}

/* La primera columna no lleva vertical: quedaría pegada al borde del card. */
#tabla-calificacion.cc-nota-planilla thead th:first-child,
#tabla-calificacion.cc-nota-planilla tbody td:first-child,
#tabla-calificacion.cc-nota-planilla tfoot th:first-child {
  border-left: 0;
}

#tabla-calificacion.cc-nota-planilla thead tr.cc-nota-grupos-row th {
  border-bottom: 1px solid #c6d0de;
}

/* Fila de grupos: etiqueta del tipo. */
#tabla-calificacion.cc-nota-planilla thead tr.cc-nota-grupos-row th[colspan] {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
}

/* Separadores estructurales de 2px: van encima de la retícula de 1px, no la
   reemplazan. Zona fija vs actividades, base del thead y tope del tfoot. */
#tabla-calificacion.cc-nota-planilla thead tr:nth-child(2) th {
  border-bottom: 2px solid #cbd5e1;
}

#tabla-calificacion.cc-nota-planilla thead th.cc-nota-grupos-fijos,
#tabla-calificacion.cc-nota-planilla thead th.cc-nota-sticky-def,
#tabla-calificacion.cc-nota-planilla tbody td.cc-nota-sticky-def,
#tabla-calificacion.cc-nota-planilla tfoot th.cc-nota-sticky-def {
  border-right: 2px solid #cbd5e1;
}

/* Los seam de # y de DEF los dibuja la celda de la izquierda con border-right.
   Sin quitar el border-left de la celda vecina se suman los dos y el separador
   sale al doble de grosor (border-collapse: separate en .cc-table). Se repiten
   clases para superar la retícula genérica y el límite de grupo, ambos 1-2-2. */
#tabla-calificacion.cc-nota-planilla thead th.cc-nota-grupos-fijos+th,
#tabla-calificacion.cc-nota-planilla .cc-nota-sticky-numero+th.cc-nota-sticky-nombre,
#tabla-calificacion.cc-nota-planilla .cc-nota-sticky-numero+td.cc-nota-sticky-nombre,
#tabla-calificacion.cc-nota-planilla .cc-nota-sticky-def+th.cc-nota-th,
#tabla-calificacion.cc-nota-planilla .cc-nota-sticky-def+td.nota,
#tabla-calificacion.cc-nota-planilla .cc-nota-sticky-def+td.cc-nota-grupo-ini {
  border-left: 0;
}

#tabla-calificacion.cc-nota-planilla .cc-nota-sticky-numero {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: center;
}

#tabla-calificacion.cc-nota-planilla .cc-nota-sticky-nombre {
  left: var(--cc-nota-w-numero);
}

#tabla-calificacion.cc-nota-planilla .cc-nota-sticky-parcial {
  left: calc(var(--cc-nota-w-numero) + var(--cc-nota-w-nombre));
}

#tabla-calificacion.cc-nota-planilla .cc-nota-sticky-def {
  left: calc(var(--cc-nota-w-numero) + var(--cc-nota-w-nombre) + var(--cc-nota-w-prom));
  box-shadow: none;
}

#tabla-calificacion.cc-nota-planilla thead tr th.cc-nota-sticky-numero,
#tabla-calificacion.cc-nota-planilla thead tr th.cc-nota-sticky-nombre,
#tabla-calificacion.cc-nota-planilla thead tr th.cc-nota-sticky-parcial,
#tabla-calificacion.cc-nota-planilla thead tr th.cc-nota-sticky-def {
  z-index: 11;
}

#tabla-calificacion.cc-nota-planilla thead tr th.cc-nota-sticky-nombre,
#tabla-calificacion.cc-nota-planilla thead tr th.cc-nota-sticky-parcial {
  background: var(--surface);
}

/* Columna # — canal propio, más apagado que la zona fija. */
#tabla-calificacion.cc-nota-planilla thead th.cc-nota-sticky-numero,
#tabla-calificacion.cc-nota-planilla tbody td.cc-nota-sticky-numero,
#tabla-calificacion.cc-nota-planilla tbody tr:nth-child(even) td.cc-nota-sticky-numero,
#tabla-calificacion.cc-nota-planilla tbody tr:hover td.cc-nota-sticky-numero,
#tabla-calificacion.cc-nota-planilla tbody tr.selected td.cc-nota-sticky-numero,
#tabla-calificacion.cc-nota-planilla tfoot th.cc-nota-sticky-numero {
  background: #fafbfd;
  border-right: 1px solid #d4dce8;
}

#tabla-calificacion.cc-nota-planilla .cc-nota-grupos-fijos {
  position: sticky;
  left: 0;
  z-index: 11;
  background: var(--surface);
}

#tabla-calificacion.cc-nota-planilla thead th.cc-eval-conocimiento {
  background: #f9ddc0;
  color: #a35c05;
}

#tabla-calificacion.cc-nota-planilla thead th.cc-eval-desempeno {
  background: #f6ecbe;
  color: var(--cc-yellow-700);
}

#tabla-calificacion.cc-nota-planilla thead th.cc-eval-producto {
  background: #cdebd7;
  color: var(--cc-green-700);
}

#tabla-calificacion.cc-nota-planilla thead th.cc-eval-institucional {
  background: #ded3f6;
  color: #6d28d9;
}

/* Fila de actividades: el tono claro del cuerpo, no un tercer nivel. La escala
   es de DOS tonos — fila de grupos oscura (arriba), fila de actividades y
   cuerpo en el mismo claro. Solo se pisa el fondo: el color de texto sigue
   viniendo de las reglas de arriba, que es de donde .cc-nota-pct lo hereda.
   Hex literal y no color-mix porque estas celdas son sticky y CLAUDE.md exige
   fondos SÓLIDOS en las cabeceras de esta planilla; el color-mix al 8% que
   había aquí era residuo de la técnica general de cc-badge, que no aplica.
   Se repite .cc-nota-th para ganarle por especificidad (1-3-2 vs 1-2-2) a las
   reglas de la fila de grupos, sin !important. */
#tabla-calificacion.cc-nota-planilla thead th.cc-nota-th.cc-eval-conocimiento {
  background: #fcefdf;
}

#tabla-calificacion.cc-nota-planilla thead th.cc-nota-th.cc-eval-desempeno {
  background: #fbf6e0;
}

#tabla-calificacion.cc-nota-planilla thead th.cc-nota-th.cc-eval-producto {
  background: #e9f7ee;
}

#tabla-calificacion.cc-nota-planilla thead th.cc-nota-th.cc-eval-institucional {
  background: #f0ebfa;
}

#tabla-calificacion.cc-nota-planilla tbody td.cc-eval-conocimiento,
#tabla-calificacion.cc-nota-planilla tbody tr:nth-child(even) td.cc-eval-conocimiento,
#tabla-calificacion.cc-nota-planilla tbody tr:hover td.cc-eval-conocimiento,
#tabla-calificacion.cc-nota-planilla tbody tr.selected td.cc-eval-conocimiento,
#tabla-calificacion.cc-nota-planilla tfoot td.cc-eval-conocimiento {
  background: #fcefdf;
}

#tabla-calificacion.cc-nota-planilla tbody td.cc-eval-desempeno,
#tabla-calificacion.cc-nota-planilla tbody tr:nth-child(even) td.cc-eval-desempeno,
#tabla-calificacion.cc-nota-planilla tbody tr:hover td.cc-eval-desempeno,
#tabla-calificacion.cc-nota-planilla tbody tr.selected td.cc-eval-desempeno,
#tabla-calificacion.cc-nota-planilla tfoot td.cc-eval-desempeno {
  background: #fbf6e0;
}

#tabla-calificacion.cc-nota-planilla tbody td.cc-eval-producto,
#tabla-calificacion.cc-nota-planilla tbody tr:nth-child(even) td.cc-eval-producto,
#tabla-calificacion.cc-nota-planilla tbody tr:hover td.cc-eval-producto,
#tabla-calificacion.cc-nota-planilla tbody tr.selected td.cc-eval-producto,
#tabla-calificacion.cc-nota-planilla tfoot td.cc-eval-producto {
  background: #e9f7ee;
}

#tabla-calificacion.cc-nota-planilla tbody td.cc-eval-institucional,
#tabla-calificacion.cc-nota-planilla tbody tr:nth-child(even) td.cc-eval-institucional,
#tabla-calificacion.cc-nota-planilla tbody tr:hover td.cc-eval-institucional,
#tabla-calificacion.cc-nota-planilla tbody tr.selected td.cc-eval-institucional,
#tabla-calificacion.cc-nota-planilla tfoot td.cc-eval-institucional {
  background: #f0ebfa;
}

/* Límite de grupo: gana a la retícula genérica por orden, con la misma
   especificidad (1-2-2). No mover por encima de las reglas de retícula. */
#tabla-calificacion.cc-nota-planilla thead th.cc-nota-grupo-ini,
#tabla-calificacion.cc-nota-planilla tbody td.cc-nota-grupo-ini,
#tabla-calificacion.cc-nota-planilla tfoot td.cc-nota-grupo-ini {
  border-left: 2px solid #c6d0de;
}

#tabla-calificacion.cc-nota-planilla tbody td.cc-nota-sticky-def,
#tabla-calificacion.cc-nota-planilla tbody tr:nth-child(even) td.cc-nota-sticky-def,
#tabla-calificacion.cc-nota-planilla tbody tr:hover td.cc-nota-sticky-def,
#tabla-calificacion.cc-nota-planilla tbody tr.selected td.cc-nota-sticky-def,
#tabla-calificacion.cc-nota-planilla thead th.cc-nota-sticky-def,
#tabla-calificacion.cc-nota-planilla tfoot th.cc-nota-sticky-def {
  background: #eff4fb;
}

#tabla-calificacion.cc-nota-planilla tbody td.promedio.is-reprobada,
#tabla-calificacion.cc-nota-planilla tbody tr:nth-child(even) td.promedio.is-reprobada,
#tabla-calificacion.cc-nota-planilla tbody tr:hover td.promedio.is-reprobada,
#tabla-calificacion.cc-nota-planilla tbody tr.selected td.promedio.is-reprobada {
  background: #fdeaea;
  color: var(--danger);
}

/* Celda sin nota: el punto es pseudo-elemento, el DOM se queda vacío porque
   actualizarStatsPlanilla() y el chip de pendientes cuentan por
   text().trim() === ''. Repite .nota para superar el '—' de la regla sin la
   clase de variante (1-2-3). */
#tabla-calificacion.cc-nota-planilla tbody td.nota.cc-nota-vacia::before {
  content: '·';
  color: var(--text-muted);
}

/* El peso toma el color del tipo, igual que la etiqueta de la fila de grupos:
   lo hereda del th, que ya lo lleva por la clase cc-eval-*. */
#tabla-calificacion.cc-nota-planilla thead th .cc-nota-pct {
  color: inherit;
}

#tabla-calificacion.cc-nota-planilla .cc-nota-ordenar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

#tabla-calificacion.cc-nota-planilla .cc-nota-ordenar:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

#tabla-calificacion.cc-nota-planilla tfoot {
  position: relative;
  z-index: 4;
}

#tabla-calificacion.cc-nota-planilla tfoot th,
#tabla-calificacion.cc-nota-planilla tfoot td {
  border-top: 2px solid #cbd5e1;
  text-align: center;
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
}

#tabla-calificacion.cc-nota-planilla tfoot th.cc-nota-sticky-nombre,
#tabla-calificacion.cc-nota-planilla tfoot th.cc-nota-sticky-parcial {
  background: var(--surface);
}

#tabla-calificacion.cc-nota-planilla tfoot th.cc-nota-sticky-nombre {
  text-align: left;
  white-space: nowrap;
}

#tabla-calificacion.cc-nota-planilla tfoot td strong,
#tabla-calificacion.cc-nota-planilla tfoot td span {
  display: block;
}

#tabla-calificacion.cc-nota-planilla tfoot td span {
  margin-top: 2px;
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 500;
}

/* Popover desglose DEF */
.cc-nota-popover {
  position: absolute;
  z-index: 1080;
  min-width: 260px;
  max-width: 340px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-3);
  font-size: var(--fs-sm);
  color: var(--text);
}

.cc-nota-popover-title {
  font-weight: 600;
  font-size: var(--fs-md);
  margin-bottom: 8px;
}

.cc-nota-popover-head,
.cc-nota-popover-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: baseline;
  padding: 3px 0;
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
}

.cc-nota-popover-head {
  font-size: 10px;
  color: var(--text-soft);
  padding-bottom: 4px;
}

.cc-nota-popover-group+.cc-nota-popover-group {
  margin-top: 8px;
}

.cc-nota-popover-group-head.cc-badge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  width: 100%;
  margin-bottom: 2px;
  padding: 4px 6px;
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
  white-space: normal;
}

.cc-nota-popover-group-head span:last-child {
  font-weight: 500;
  text-align: right;
}

.cc-nota-popover-row {
  border-bottom: 1px solid var(--border);
}

.cc-nota-popover-row:last-of-type {
  border-bottom: 0;
}

.cc-nota-popover-row.is-pendiente {
  color: var(--text-soft);
}

.cc-nota-popover-act {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.cc-nota-popover-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 2px solid var(--border-strong);
  font-weight: 600;
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
}

.cc-nota-popover-hint {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.35;
}

/* Buscador */
.cc-asig-search-wrap {
  position: relative;
  flex-shrink: 0;
}

.cc-asig-search-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--text-soft);
  pointer-events: none;
}

.cc-asig-search {
  height: 30px;
  padding: 0 10px 0 28px;
  font-size: 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-1);
  background: var(--bg);
  color: var(--text);
  outline: none;
  width: 200px;
  transition: border-color .15s, box-shadow .15s;
}

.cc-asig-search:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* Selects de filtro */
.cc-asig-filter-select {
  height: 30px;
  padding: 0 24px 0 8px;
  font-size: 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-1);
  background: var(--bg);
  color: var(--text);
  outline: none;
  cursor: pointer;
  appearance: auto;
  transition: border-color .15s;
}

.cc-asig-filter-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* ══ FILA V2 ══ */
.cc-asig-fila-v2 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  transition: background .1s;
}

.cc-asig-fila-v2:hover {
  background: var(--primary-soft);
}

.cc-asig-fila-v2.cc-asig-fila--choque {
  border-left-color: var(--danger);
}

.cc-asig-fila-v2:last-child {
  border-bottom: 0;
}

.cc-asig-v2-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cc-asig-v2-titulo {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.cc-asig-v2-ciclo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1.5px solid;
  flex-shrink: 0;
  letter-spacing: .02em;
  line-height: 1.6;
}

.cc-asig-v2-ciclo[data-ciclo="1"] {
  color: var(--ciclo-1-bd);
  border-color: var(--ciclo-1-bd);
  background: var(--ciclo-1-bg);
}

.cc-asig-v2-ciclo[data-ciclo="2"] {
  color: var(--ciclo-2-bd);
  border-color: var(--ciclo-2-bd);
  background: var(--ciclo-2-bg);
}

.cc-asig-v2-ciclo[data-ciclo="3"] {
  color: var(--ciclo-3-bd);
  border-color: var(--ciclo-3-bd);
  background: var(--ciclo-3-bg);
}

.cc-asig-v2-ciclo[data-ciclo="4"] {
  color: var(--ciclo-4-bd);
  border-color: var(--ciclo-4-bd);
  background: var(--ciclo-4-bg);
}

.cc-asig-v2-nombre {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.cc-asig-v2-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-soft);
}

.cc-asig-v2-sep {
  color: var(--border-strong);
  font-size: 10px;
  display: flex;
  align-items: center;
  opacity: .7;
}

.cc-asig-v2-hora,
.cc-asig-v2-aula,
.cc-asig-v2-docente {
  font-size: 11px;
  color: var(--text-soft);
  white-space: nowrap;
}

.cc-asig-v2-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cc-asig-v2-ocupacion {
  display: flex;
  align-items: baseline;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 72px;
}

.cc-asig-v2-ocup-num {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.cc-asig-v2-barra {
  flex-basis: 100%;
  min-width: 72px;
}

/* Tabla compacta: filas de menor altura (usada en tabs AJAX sin paginador) */
.cc-table--compact tbody td {
  padding: 5px 12px;
}

/* Liquidaciones unificadas: sin zebra — la fila de período agrupador
   necesita destacarse con gris y el stripe par/impar la camuflaba */
.cc-table--compact tbody tr:nth-child(even) td {
  background: var(--surface);
}

/* ── bootstrap-fileinput v5.1.0: BS4 → BS5 ──────────────────────────────
   .input-group-append y .input-group-btn fueron eliminados en BS5.
   El caption y el botón Examinar quedan desalineados (caption ocupa 100%
   y el botón cae debajo). Restauramos flex inline solo para .file-input.
   No afecta al resto de .input-group del sistema. */
.file-input .input-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
}

.file-input .input-group-append,
.file-input .input-group-btn {
  display: flex;
  flex-shrink: 0;
}

.file-input .input-group-append .btn,
.file-input .input-group-btn .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  height: auto;
  align-self: stretch;
}

.file-input .file-caption {
  flex: 1 1 auto;
  min-width: 0;
}

/* Ocultar botón global Remove de la toolbar.
   El plugin genera <button class="close fileinput-remove-button">.
   En BS5 .close no existe → aparece como × con borde anticuado.
   showRemove:false no lo suprime en BS5. Ocultar con CSS es la
   única solución fiable sin modificar el plugin. */
.fileinput-remove-button {
  display: none !important;
}

/* Neutralizar cualquier .close residual de BS4 dentro del fileinput
   por si el plugin lo usa en otros subcomponentes del widget. */
.file-input .close {
  display: none !important;
}

/* Ocultar el segundo botón remove duplicado dentro de thumbnails
   (el correcto es .kv-file-remove; este es el duplicado). */
.file-preview-frame .file-actions .fileinput-remove {
  display: none !important;
}

/* ── Matrícula — listado: ancho filtro programa (Tom Select) ── */
.cc-card-header #programa_id+.ts-wrapper,
.cc-card-header .ts-wrapper:has(#programa_id) {
  width: 380px !important;
  flex-shrink: 0;
}

/* ── Matrícula — listado: badges renovación sobre DataTables ── */
.cc-badge-estado.cc-badge-activo {
  background: #d1e7dd !important;
  color: #0a3622 !important;
}

.cc-badge-estado.cc-badge-retirado {
  background: #fff3cd !important;
  color: #664d03 !important;
}

/* Fix: bootstrap-datetimepicker-widget inyectado como hijo del cc-form-row
   no debe participar en el grid — forzar posicionamiento absoluto */
.cc-form-row .bootstrap-datetimepicker-widget {
  position: absolute !important;
  z-index: 1060;
}

/* Fix histórico (obsoleto, documentado por trazabilidad): con el grid CSS
   de 2 columnas fijas (label 200px / campo 1fr) usado antes de fusionar
   .cc-form-row al estándar Bootstrap .row/.col-lg-*, jQuery Validate
   insertaba div.invalid-feedback como 3er ítem del grid. Al mostrarse
   creaba una fila implícita que desplazaba todos los campos siguientes
   (layout shift). Se resolvía sacando el div del flujo con
   position:absolute + left:calc(200px + 14px) (ancho de la columna de
   label + gap).

   Con el estándar actual (.cc-form-row.row > label.col-lg-3 + div.col-lg-8)
   ya no aplica: errorPlacement en hi.js hace error.insertAfter(element),
   así que el .invalid-feedback cae como hermano del input DENTRO de
   .col-lg-8, no como hijo directo de .cc-form-row — el selector de arriba
   (child combinator >) nunca matcheaba ahí. Bootstrap flexbox no genera
   fila implícita como el grid antiguo: el mensaje puede fluir en el flujo
   normal del documento dentro de col-lg-8, que es el comportamiento nativo
   de .invalid-feedback en Bootstrap 5 (empuja el contenido siguiente,
   igual que cualquier formulario Bootstrap estándar). Sin position hack. */
.cc-form-row {
  position: relative;
}

.cc-form-row .col-lg-8>.invalid-feedback {
  font-size: var(--fs-xs);
}

/* Evita que align-items:center desplace el campo hacia arriba cuando
   hay un error de validación visible (Tom Select principalmente) */
.cc-form-row.row:has(.is-invalid) {
  align-items: start;
}

/* Tom Select inserta .ts-wrapper como hermano DESPUÉS del <select>.
   jQuery Validate hace insertAfter(select) porque closest('.ts-wrapper')
   no matchea (el select no es hijo del wrapper) → el .invalid-feedback
   queda ENTRE el select oculto y el control visible (arriba).
   Reordenar con flex para que el error quede debajo del .ts-wrapper.

   Importante: cualquier hermano con order por defecto (0) — p.ej. .form-text
   de ayuda — quedaría ANTES del .ts-wrapper (order:1) y empujaría el
   control hacia abajo (el label de la fila se alinearía con el texto de
   ayuda, no con el campo). Por eso .form-text/.help también llevan order. */
.cc-form-row .col-lg-8:has(> .ts-wrapper) {
  display: flex;
  flex-direction: column;
}

.cc-form-row .col-lg-8:has(> .ts-wrapper)>.ts-wrapper {
  order: 1;
}

.cc-form-row .col-lg-8:has(> .ts-wrapper)>.invalid-feedback {
  order: 2;
}

.cc-form-row .col-lg-8:has(> .ts-wrapper)>.form-text,
.cc-form-row .col-lg-8:has(> .ts-wrapper)>.help {
  order: 3;
}

/* ════════════════════════════════════════════
   ENCUESTA DE SATISFACCIÓN — Star Rating
   ════════════════════════════════════════════ */

/* Wrapper del grupo de estrellas */
.cc-rating {
  display: inline-flex;
  flex-direction: row-reverse;
  /* truco CSS: hover izquierda */
  gap: 4px;
  align-items: center;
}

/* Radio oculto */
.cc-rating input[type="radio"] {
  display: none;
}

/* Estrella base */
.cc-rating label {
  font-size: 1.6rem;
  color: var(--border-strong);
  cursor: pointer;
  transition: color .15s, transform .1s;
  line-height: 1;
  margin: 0;
  padding: 0;
  user-select: none;
}

/* Hover: ilumina la estrella y todas las de su izquierda (que en DOM son "anteriores") */
.cc-rating label:hover,
.cc-rating label:hover~label {
  color: var(--warning);
  transform: scale(1.15);
}

/* Seleccionado: ilumina desde el radio checked hacia la izquierda */
.cc-rating input[type="radio"]:checked~label {
  color: var(--warning);
}

/* Tooltip de valor al pasar el ratón */
.cc-rating label::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1B2330;
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .1s;
  z-index: 10;
}

.cc-rating label {
  position: relative;
}

.cc-rating label:hover::after {
  opacity: 1;
}

/* Celda que contiene el rating: alineación vertical */
.cc-rating-cell {
  min-width: 160px;
}

/* Fila de encuesta: separación entre criterio y rating */
.cc-encuesta-table td {
  vertical-align: middle;
}

/* Estado vacío: cuando no hay criterios */
.cc-encuesta-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-soft);
}

.cc-encuesta-empty i {
  font-size: 2.5rem;
  color: var(--border-strong);
  display: block;
  margin-bottom: 12px;
}

.cc-encuesta-empty p {
  font-size: var(--fs-md);
  margin: 0;
}

/* Banner contextual — Opción A */
.cc-encuesta-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--primary-soft);
  border: 1px solid #B5D4F4;
  border-top: 0;
  padding: 12px 16px;
}

.cc-encuesta-banner__ico {
  width: 36px;
  height: 36px;
  border-radius: var(--r-2);
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.cc-encuesta-banner__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cc-encuesta-banner__body strong {
  font-size: var(--fs-md);
  font-weight: 600;
  color: #0C447C;
}

.cc-encuesta-banner__body span {
  font-size: var(--fs-sm);
  color: #185FA5;
  line-height: 1.4;
}

[data-theme="dark"] .cc-encuesta-banner {
  background: rgba(29, 112, 183, .12);
  border-color: rgba(29, 112, 183, .3);
}

[data-theme="dark"] .cc-encuesta-banner__body strong {
  color: #85B7EB;
}

[data-theme="dark"] .cc-encuesta-banner__body span {
  color: #378ADD;
}

/* Evaluación docente — criterio-rol */
.cc-table .criterio-rol-nombre {
  font-size: var(--fs-sm);
}

.cc-badge.cc-badge-success {
  background: rgba(16, 166, 92, .12);
  color: var(--success);
  border-color: transparent;
}

.cc-badge.cc-badge-danger {
  background: rgba(220, 53, 69, .12);
  color: var(--danger);
  border-color: transparent;
}

.cc-badge.cc-badge-warning {
  background: rgba(237, 215, 8, .18);
  color: var(--cc-yellow-700);
  border-color: transparent;
}

.cc-switch-label {
  font-size: var(--fs-md);
  color: var(--text);
}

/* ════════════════════════════════════════════
   EVALUACIÓN DOCENTE
   ════════════════════════════════════════════ */

/* Foto circular del docente en cabecera */
.cc-eval-docente-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.cc-eval-docente-foto {
  width: 48px;
  height: 48px;
  object-fit: cover;
  display: block;
}

/* Badge modulo */
.cc-eval-modulo-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 2px;
}

/* Nombre docente — sobreescribe h1 del layout que puede tener margen */
.cc-eval-docente-nombre {
  margin: 0;
  line-height: 1.2;
}

/* Subtítulo asignatura */
.cc-eval-docente-desc {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  margin-bottom: 0;
}

/* Contador de progreso */
.cc-eval-progreso {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  white-space: nowrap;
  align-self: center;
}

/* Ancho fijo columna criterio */
.cc-eval-th-criterio {
  width: 55%;
}

/* Leyenda de escala bajo el header de evaluación */
.cc-eval-leyenda {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-soft);
  letter-spacing: 0;
  text-transform: none;
}

/* Separador de categoría */
.cc-encuesta-table tr.cc-eval-categoria-head td {
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text-soft);
  text-transform: uppercase;
  padding: 6px 16px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Wrapper estrellas + "Sin calificar" en columna */
.cc-eval-rating-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

/* Columna rating: sin wrap de texto */
.cc-rating-cell {
  white-space: nowrap;
  min-width: 160px;
  vertical-align: middle;
}

/* Texto "Sin calificar" */
.cc-eval-sin-calificar {
  font-size: 10px;
  color: var(--text-soft);
  padding-left: 2px;
  line-height: 1;
}

/* Fila comentario: padding interno */
.cc-eval-comentario-fila td {
  padding: 16px 20px;
}

/* Footer sticky */
.cc-eval-footer-sticky {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, .06);
}

/* Aviso de validación en footer */
.cc-eval-aviso {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  margin-left: 12px;
  display: none;
}

/* Fila sin responder — resaltado de validación */
.cc-encuesta-table tr.cc-eval-fila-error td {
  background: rgba(220, 53, 69, .06);
  transition: background .3s;
}

.cc-encuesta-table tr.cc-eval-fila-error .cc-rating label {
  color: var(--danger);
}

/* ── Evaluación docente — flujo paso a paso (cc-evalq) ───────────────── */
.cc-evalq {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 20px 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cc-evalq__top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cc-evalq__top .cc-evalq__progress {
  flex: 1 1 auto;
}

.cc-evalq__progress {
  height: 4px;
  background: var(--border);
  border-radius: var(--r-1);
  overflow: hidden;
}

.cc-evalq__progress-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--primary);
  transition: width .25s ease;
}

.cc-evalq__step {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cc-evalq__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cc-evalq__head-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cc-evalq__docente {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}

.cc-evalq__modulo {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.3;
}

.cc-evalq__close {
  margin-left: 4px;
}

.cc-evalq__eyebrow {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.cc-evalq__eyebrow-sep,
.cc-evalq__paso {
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-soft);
  font-weight: 600;
}

.cc-evalq__pregunta {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

.cc-evalq__opts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.cc-evalq__opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 4px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  text-align: center;
  margin: 0;
  min-width: 0;
  transition: border-color .15s ease, background .15s ease;
}

.cc-evalq__opt:hover {
  border-color: var(--primary);
}

.cc-evalq__opt:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.cc-evalq__opt-stars {
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--text-soft);
  line-height: 1;
}

.cc-evalq__opt:has(input:checked) .cc-evalq__opt-stars {
  color: var(--cc-yellow);
}

.cc-evalq__opt-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.cc-evalq__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  min-height: 36px;
}

.cc-evalq__prev.is-disabled,
.cc-evalq__prev:disabled {
  opacity: .4;
  pointer-events: none;
}

.cc-evalq__hint {
  margin-left: auto;
  font-size: var(--fs-sm);
  color: var(--text-soft);
}

.cc-evalq__submit {
  margin-left: auto;
}

.cc-evalq__comentario .form-control {
  min-height: 110px;
}

.cc-evalq__done {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 28px 12px 16px;
}

.cc-evalq__done-ico {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--success) 16%, var(--surface));
  color: var(--success);
  font-size: 1.4rem;
}

.cc-evalq__done-text {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--text-muted);
  max-width: 28ch;
}

.cc-evalq__nota {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text-soft);
}

.cc-evalq__nota i {
  font-size: 11px;
}

@media (max-width: 575px) {
  .cc-evalq {
    padding: 16px 14px 12px;
  }

  .cc-evalq__opts {
    grid-template-columns: repeat(2, 1fr);
  }

  .cc-evalq__opt {
    padding: 12px 6px;
  }

  .cc-evalq__opt-label {
    font-size: var(--fs-xs);
  }

  .cc-evalq__hint {
    display: none;
  }
}

/* criterio-rol: tamaño de texto */
.cc-table .criterio-rol-nombre {
  font-size: var(--fs-sm);
}

/* Toggle de 3 estados — gestión de roles de persona.
   Reutiliza los tokens y el patrón .cc-badge-* ya definidos en este archivo
   (ver bloque "Evaluación docente — criterio-rol"), en vez de colores propios. */
.cc-rol-toggle {
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.cc-rol-toggle[data-estado="null"] {
  background-color: var(--surface-2);
  color: var(--text-muted);
}

.cc-rol-toggle[data-estado="1"] {
  background-color: var(--primary-soft);
  color: var(--primary);
}

.cc-rol-toggle[data-estado="0"] {
  background-color: rgba(220, 53, 69, .12);
  color: var(--danger);
}

.cc-rol-toggle[data-estado="0"][disabled],
.cc-rol-toggle.cc-rol-toggle--bloqueado {
  cursor: not-allowed;
  opacity: .7;
}


/* bootstrap-fileinput (Krajee) — Bootstrap 5 aplica max-width:100%/height:auto
   a img/iframe globalmente, lo que anula el tamaño fijo de thumbnail del plugin.
   Restauramos el tamaño compacto original (213x160, 400px para PDF). */
.krajee-default.file-preview-frame .kv-file-content {
  width: 213px;
  height: 160px;
  max-width: 213px;
}

.krajee-default.file-preview-frame .kv-file-content.kv-pdf-rendered {
  width: 400px;
  max-width: 400px;
}

.krajee-default.file-preview-frame .kv-file-content img,
.krajee-default.file-preview-frame .kv-file-content iframe,
.krajee-default.file-preview-frame .kv-file-content object {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

/* Modo avatar (cuestionario, etc.): caja ~40px junto al campo.
   Vivía en assets/pages/css/custom.css (solo layout Metronic); layout-new no lo carga.
   Crítico: fileinput v5 define .file-drop-zone { min-height: 260px } — sin anularlo
   el widget se estira en vertical dentro de col-lg-1 (tall strip dashed). */
.kv-avatar {
  display: inline-block;
  max-width: 56px;
}

.kv-avatar .file-input {
  display: block;
  width: auto;
}

.kv-avatar .krajee-default.file-preview-frame,
.kv-avatar .krajee-default.file-preview-frame:hover {
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  float: none;
  text-align: center;
}

.kv-avatar .file-drop-zone {
  margin: 0;
  padding: 2px;
  min-height: 0 !important;
  border: 1px solid var(--border, #E5E9EF);
  border-radius: var(--r-1, 4px);
}

.kv-avatar .file-drop-zone.clickable:hover {
  border: 1px solid var(--border-strong, #CBD2DC);
}

.kv-avatar .file-drop-zone-title {
  padding: 0;
  font-size: inherit;
}

.kv-avatar .kv-file-content {
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
}

.kv-avatar .file-preview {
  padding: 0;
  margin: 0;
  border: none;
}

.kv-avatar .file-preview img,
.kv-avatar .kv-file-content img {
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  object-fit: contain;
}

.kv-avatar .file-footer-buttons,
.kv-avatar .file-thumbnail-footer {
  display: none;
}

.kv-avatar .fileinput-remove-button {
  cursor: pointer;
  border: none;
  background: 0;
  padding: 0 0 0 5px;
  font-size: 1.3rem !important;
}

/* Sede — badges de tipo (TipoSede::badgeClass) */
.cc-sede-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: var(--fs-xs);
  font-weight: 500;
  border-radius: 999px;
  line-height: 1.4;
  border: 1px solid transparent;
}

.cc-sede-badge--principal {
  background: var(--primary-soft);
  color: var(--primary);
}

.cc-sede-badge--anexa {
  background: var(--accent-soft);
  color: var(--cc-green-700);
}

.cc-sede-badge--virtual {
  background: var(--surface-2);
  color: var(--text-muted);
}

/* ============================================================ Programa — editor de color (swatches) */
.cc-prog-color-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  border: 0;
  background: color-mix(in srgb, var(--prog-color, var(--primary)) 14%, var(--surface));
  color: var(--prog-color, var(--primary));
  border-color: transparent;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  padding: 0.25rem 0.55rem;
}

.cc-prog-color-badge:hover,
.cc-prog-color-badge:focus {
  background: color-mix(in srgb, var(--prog-color, var(--primary)) 22%, var(--surface));
  color: var(--prog-color, var(--primary));
}

.cc-prog-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--prog-color, var(--primary));
  flex-shrink: 0;
}

.cc-prog-color-swatches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 2px;
  width: 300px;
}

.cc-prog-color-swatch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  width: 100%;
  padding: 6px 8px;
  border-radius: var(--r-1);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: left;
  transition: transform .1s ease, border-color .12s ease;
}

.cc-prog-color-swatch:hover:not(:disabled) {
  transform: scale(1.03);
}

.cc-prog-color-swatch.is-selected {
  border-color: currentColor;
}

.cc-prog-color-swatch:disabled,
.cc-prog-color-swatch.is-en-uso {
  cursor: not-allowed;
  opacity: .5;
}

.cc-prog-color-nombre {
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.cc-prog-color-uso {
  font-size: 9px;
  color: var(--text-muted);
  line-height: 1.2;
}

/* Bootstrap .popover default max-width:276px recorta la 3ª columna */
.popover:has(.cc-prog-color-swatches) {
  max-width: 340px;
}

.popover:has(.cc-prog-color-swatches) .popover-body {
  overflow: visible;
}

.cc-tiptap-shell {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-2);
  background: var(--surface);
  overflow: hidden;
}

.cc-tiptap-shell:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.cc-tiptap-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.cc-tiptap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--r-1);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
}

.cc-tiptap-btn:hover:not(:disabled) {
  background: var(--primary-soft);
  color: var(--primary);
}

.cc-tiptap-btn.is-active {
  background: var(--primary-soft);
  color: var(--primary);
}

.cc-tiptap-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.cc-tiptap {
  min-height: 100px;
  padding: 8px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.cc-tiptap:focus-within {
  border-color: transparent;
  box-shadow: none;
}

.cc-tiptap .ProseMirror,
.cc-tiptap-content {
  outline: none;
}

.cc-tiptap .ProseMirror {
  min-height: 84px;
}

.cc-tiptap .ProseMirror p,
.cc-tiptap-content p {
  margin: 0 0 .5em;
}

.cc-tiptap .ProseMirror p:last-child,
.cc-tiptap-content p:last-child {
  margin-bottom: 0;
}

.cc-tiptap .ProseMirror ul,
.cc-tiptap .ProseMirror ol,
.cc-tiptap-content ul,
.cc-tiptap-content ol {
  padding-left: 1.4em;
  margin: 0 0 .5em;
}

.cc-tiptap .ProseMirror blockquote,
.cc-tiptap-content blockquote {
  margin: 0 0 .5em;
  padding-left: .8em;
  border-left: 3px solid var(--border-strong);
  color: var(--text-muted);
}

.cc-tiptap .ProseMirror code,
.cc-tiptap-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .92em;
  padding: .1em .35em;
  border-radius: var(--r-1);
  background: var(--surface-2);
}

/* Tom Select: opción deshabilitada en selectAgrupadoCiclo (asignación sin planeación en LMS) */
.ts-dropdown .option.disabled .opt-disabled,
.ts-dropdown .option[aria-disabled="true"] .opt-disabled,
.ts-dropdown [data-disabled] .opt-disabled {
  opacity: .5;
  pointer-events: none;
}

/* cc-cell-user img.avatar: foto real de perfil (no iniciales de texto).
   core.css define .avatar como contenedor flex de 26x26px para iniciales;
   una <img class="avatar"> no hereda ese tamaño porque width/height:100%
   no tiene una altura de referencia del padre (.cc-cell-user es inline-flex
   sin height fijo) — se necesitan dimensiones explícitas en píxeles. */
.cc-cell-user img.avatar {
  width: 26px;
  height: 26px;
  min-width: 26px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
}

.cc-alert-soft {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 1rem;
  padding: 10px 14px;
  border-radius: var(--r-2);
}

.cc-alert-soft i {
  margin-top: 2px;
  font-size: 14px;
}

.cc-alert-warning {
  background: #FDF6E3;
  color: #7A5B00;
}

.cc-alert-warning i {
  color: var(--warning);
}

.cc-alert-title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
}

.cc-alert-text {
  margin: 2px 0 0;
  font-size: var(--fs-sm);
  color: var(--text);
}

.cc-badge-muted {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border-radius: var(--r-1);
  padding: 4px 10px;
  color: #888780;
  font-size: var(--fs-sm);
}

.cc-badge-muted i {
  font-size: 11px;
}

.cc-page-header.standalone+#estudiantes .cc-card {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: 0;
}

/* ════════════════════════════════════════════
   TABLERO — Modal de detalle de anuncio
   ════════════════════════════════════════════ */

/* Franja de audiencia: fondo diferenciado, borde superior/inferior, en línea con separadores */
.cc-anuncio-audiencia {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 9px 0;
  margin: 0 calc(var(--sp-5) * -1) 1rem;
  padding-left: var(--sp-5);
  padding-right: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.cc-anuncio-audiencia strong {
  color: var(--text);
  font-weight: 600;
}

.cc-anuncio-audiencia .cc-anuncio-sep {
  color: var(--border-strong);
}

/* Caja de adjunto: borde propio, ícono cuadrado por extensión */
.cc-anuncio-adjuntos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 1rem;
}

.cc-anuncio-adjunto {
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: 10px 13px;
  text-decoration: none;
  color: var(--text);
  transition: border-color .12s, background .12s;
}

.cc-anuncio-adjunto:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  text-decoration: none;
  color: var(--text);
}

.cc-anuncio-adjunto-ico {
  width: 32px;
  height: 32px;
  border-radius: var(--r-1);
  display: grid;
  place-items: center;
  font-size: 9.5px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: .02em;
  text-transform: uppercase;
  background: var(--surface-2);
  color: var(--text-muted);
}

.cc-anuncio-adjunto-ico--pdf {
  background: rgba(220, 53, 69, .1);
  color: var(--danger);
}

.cc-anuncio-adjunto-ico--doc {
  background: var(--primary-soft);
  color: var(--primary);
}

.cc-anuncio-adjunto-ico--xls {
  background: rgba(16, 166, 92, .1);
  color: var(--success);
}

.cc-anuncio-adjunto-ico--img {
  background: var(--accent-soft);
  color: var(--cc-green-700);
}

.cc-anuncio-adjunto-nm {
  font-size: var(--fs-md);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Cabecera compacta: chips + título + acciones en el mismo bloque */
.cc-anuncio-cabecera {
  align-items: flex-start;
  gap: 8px;
}

.cc-anuncio-cabecera .fs-4 {
  line-height: 1.3;
}

/* Espaciado progresivo entre secciones heterogéneas del detalle */
.cc-anuncio-header {
  margin-bottom: 6px;
}

.cc-anuncio-cuerpo {
  margin-bottom: 22px;
}

.cc-anuncio-seccion-sep {
  margin-bottom: 22px;
}

/* Zona de comentarios: encabezado + lista + composer agrupados */
.cc-anuncio-comentarios {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  margin: 0 calc(var(--sp-5) * -1) calc(var(--sp-5) * -1);
  padding: 14px var(--sp-5) 16px;
}

.cc-anuncio-comentarios__title {
  margin-bottom: 12px;
}

.cc-anuncio-comentarios__vacio {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.cc-anuncio-detalle>.cc-anuncio-comentarios-footer {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
}

/* Comentarios: burbuja por mensaje (sobre fondo --surface-2 de la zona) */
.cc-anuncio-comentario {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.cc-anuncio-comentario:last-child {
  margin-bottom: 0;
}

.cc-anuncio-comentario-bd {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: 8px 12px;
  flex: 1;
  min-width: 0;
}

.cc-anuncio-comentario-bd--docente {
  background: var(--primary-soft);
  border-color: #CFE2F6;
}


/* Input de emoji en configuracion/programa */
.cc-input-emoji {
  max-width: 100px;
  font-size: 1.3rem;
  text-align: center;
}

/* Mis estudios — Documentos: sin acento lateral; ghost con borde; Record alineado */
#mis-estudios-documentos .cc-seg-act {
  border-left-color: transparent;
}

#mis-estudios-documentos .cc-seg-act__accion {
  justify-content: flex-end;
}

#mis-estudios-documentos .cc-seg-act__accion .btn-ghost {
  border-color: var(--border-strong);
}

/* ════════════════════════════════════════════
   MI CUENTA
   ════════════════════════════════════════════ */

/* ── Layout: sidebar + contenido; en móvil se apilan ──
   gap: var(--sp-5) = 16px ≡ Bootstrap gap-3, sin cambio visual. */
.cc-mi-cuenta-layout {
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
}

.cc-mi-cuenta-layout>.flex-grow-1 {
  min-width: 0;
}

.cc-mi-cuenta-aside {
  width: 260px;
  flex-shrink: 0;
}

@media (max-width: 767.98px) {
  .cc-mi-cuenta-layout {
    flex-direction: column;
  }

  .cc-mi-cuenta-aside {
    width: 100%;
  }
}

/* ── Sidebar Mi cuenta: identidad centrada (avatar · nombre · rol) ──
   Email y celular salen de aquí: viven en el formulario (Card 2) y
   duplicarlos obliga a mantener dos vistas del mismo dato. */
.cc-mi-cuenta-perfil {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-4);
  text-align: center;
}

.cc-mi-cuenta-avatar {
  width: 104px;
  height: 104px;
  object-fit: cover;
}

.cc-mi-cuenta-nombre {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.cc-badge.cc-mi-cuenta-rol {
  background: var(--surface-2);
  color: var(--text-muted);
}

/* ── Nav vertical: activo con fondo suave (mismo patrón que .cc-mnav-link.active) ── */
a.cc-mi-cuenta-nav.active {
  background: var(--primary-soft);
  color: var(--primary);
}

/* Labels de Datos institucionales: eyebrow en mayúsculas (mock aspiracional).
   Acotado a esta vista para no alterar .cc-info-label en modales. */
.cc-mi-cuenta-institucional .cc-info-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-soft);
}

/* ── Campos de formulario en columna, ancho acotado ──
   El estándar .cc-form-row (label a la izquierda, col-lg-3/col-lg-8)
   no aplica aquí: esta vista usa labels arriba. Se replica de
   .cc-form-row la altura de 40px y el font-size de 1rem para que los
   campos NO encojan a los 34px/13px del .form-control base de core.css
   (sería regresión visual respecto al layout actual). */
.cc-field {
  margin-bottom: var(--sp-4);
}

.cc-field .form-control,
.cc-field .form-select {
  height: 40px;
  padding-top: .5rem;
  padding-bottom: .5rem;
  font-size: 1rem;
}

.cc-field label {
  font-size: 1rem;
}

/* Asterisco de obligatorio en naranja (mock aspiracional). Local a
   .cc-field: label.required::after de core.css sigue en --danger para
   el resto de formularios del sistema. */
.cc-field label.required::after {
  color: var(--warning);
}

/* Tom Select: mismas tres reglas que .cc-form-row (placeholder,
   "Seleccione" atenuado, invalid-feedback debajo del control). */
.cc-field .ts-control>input::placeholder {
  color: var(--text-soft);
  opacity: 1;
}

.cc-field .ts-control>.item[data-value=""] {
  color: var(--text-soft);
}

.cc-field:has(> .ts-wrapper) {
  display: flex;
  flex-direction: column;
}

.cc-field:has(> .ts-wrapper)>.ts-wrapper {
  order: 1;
}

.cc-field:has(> .ts-wrapper)>.invalid-feedback,
.cc-field:has(> .ts-wrapper)>.cc-field-pendiente {
  order: 2;
}

.cc-field:has(> .ts-wrapper)>.form-text,
.cc-field:has(> .ts-wrapper)>.help {
  order: 3;
}

/* ── Campo obligatorio pendiente de diligenciar ──
   NO es .is-invalid: el rojo de Bootstrap comunica "lo escribiste mal",
   y aquí el campo no está mal, está vacío. Se usa --warning (el token
   de estado del sistema), no --cc-orange (que está reservado a badges
   de Tipo de evidencia / cabecera conocimiento). */
.cc-field .form-control.is-pendiente,
.cc-field .form-select.is-pendiente {
  border-color: var(--warning);
}

.cc-field .form-control.is-pendiente:focus,
.cc-field .form-select.is-pendiente:focus {
  border-color: var(--warning);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 20%, transparent);
}

/* Tom Select oculta el <select>; el borde visible vive en .ts-control. */
.cc-field select.is-pendiente+.ts-wrapper .ts-control {
  border-color: var(--warning);
}

.cc-field select.is-pendiente+.ts-wrapper.focus .ts-control {
  border-color: var(--warning);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 20%, transparent);
}

.cc-field select.is-invalid+.ts-wrapper .ts-control {
  border-color: var(--danger);
}

.cc-field select.is-invalid+.ts-wrapper.focus .ts-control {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 20%, transparent);
}

.cc-field-pendiente {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--warning);
}

/* Destino del canal de notificación: el usuario debe ver a qué dirección
   o número se enviarán los avisos antes de activarlo. */
.cc-privacidad-destino {
  margin: 4px 0 0 21px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ── Modal confirma tus datos (verificación semestral) ── */
.cc-confirm-dialog {
  max-width: 640px;
  width: calc(100% - 1.5rem);
}

.cc-confirm-header {
  align-items: flex-start;
}

.cc-confirm-header-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.cc-confirm-ico {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-2);
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 14%, var(--surface));
  font-size: 16px;
}

.cc-confirm-sub {
  margin: 2px 0 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.4;
}

.cc-confirm-table {
  width: 100%;
  border-collapse: collapse;
}

.cc-confirm-table tr+tr td {
  border-top: 1px solid var(--border);
}

.cc-confirm-table td {
  padding: 10px 0;
  vertical-align: middle;
  font-size: var(--fs-md);
}

.cc-confirm-label {
  color: var(--text-muted);
  padding-right: 16px;
  width: 42%;
}

.cc-confirm-valor {
  text-align: right;
  color: var(--text);
}

.cc-confirm-valor .fw-semibold {
  color: var(--text);
}

.cc-confirm-vacio {
  color: var(--text-soft);
}

.cc-badge.cc-confirm-falta {
  margin-left: 8px;
  background: color-mix(in srgb, var(--warning) 16%, var(--surface));
  color: var(--warning);
  border-color: transparent;
  vertical-align: middle;
}

.cc-confirm-hint {
  margin: 12px 0 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.cc-confirm-hint a {
  font-weight: 600;
}

.cc-confirm-footer {
  flex-wrap: wrap;
  gap: 8px;
}

.cc-confirm-faltantes-msg {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--warning);
}

/* ════════════════════════════════════════════
   ENTREGABLES (seguimiento + revisión admin)
   ════════════════════════════════════════════ */

.btn-outline-success {
  color: var(--cc-green-700);
  border-color: var(--cc-green);
  background: transparent;
}
.btn-outline-success:hover,
.btn-outline-success:focus {
  color: #fff;
  border-color: var(--cc-green-700);
  background: var(--cc-green);
}

.btn-outline-danger {
  color: var(--danger);
  border-color: var(--danger);
  background: transparent;
}
.btn-outline-danger:hover,
.btn-outline-danger:focus {
  color: #fff;
  border-color: var(--danger);
  background: var(--danger);
}

.cc-entregable-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cc-entregable-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cc-entregable-ico {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-2);
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  color: var(--danger);
  font-size: 14px;
}

.cc-entregable-meta {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-soft, var(--text-muted));
}

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

.cc-entregable-rechazo {
  margin: 0 0 0 42px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--border));
  border-radius: var(--r-2);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  color: var(--text);
  font-size: var(--fs-sm);
}

.cc-entregable-rechazo strong {
  display: block;
  margin-bottom: 4px;
  color: var(--danger);
}

.cc-entregable-rechazo p {
  margin: 0 0 6px;
}

.cc-entregable-rechazo-meta {
  color: var(--text-soft, var(--text-muted));
  font-size: var(--fs-sm);
}

.cc-entregable-footnote {
  font-size: var(--fs-sm);
  color: var(--text-soft, var(--text-muted));
}

/* —— Modal revisión admin —— */
.cc-revisar-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cc-revisar-hdr-text {
  min-width: 0;
}

.cc-revisar-vence {
  flex-shrink: 0;
  margin-top: 2px;
}

.cc-revisar-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.cc-revisar-pendientes {
  font-size: var(--fs-sm);
  color: var(--text-soft, var(--text-muted));
}

#cc-revisar-entregables-card .cc-entregable-item {
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--surface);
}

#cc-revisar-entregables-card .cc-entregable-item.is-rechazando {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}

#cc-revisar-entregables-card .cc-entregable-item.is-rechazando .cc-entregable-item-actions {
  display: none;
}

.cc-entregable-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cc-entregable-item-info {
  min-width: 0;
  flex: 1 1 auto;
}

.cc-entregable-item-name {
  display: block;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

#cc-revisar-entregables-card .cc-entregable-meta {
  margin-top: 2px;
}

.cc-entregable-item-side {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.cc-entregable-thumb {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 108px;
  height: 74px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-2);
  background: var(--surface-2);
  color: var(--danger);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 550;
}

.cc-entregable-thumb:hover {
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  color: var(--danger);
  text-decoration: none;
}

.cc-entregable-thumb > i {
  font-size: 22px;
}

.cc-entregable-item-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.cc-entregable-rechazo-motivo {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--border));
  border-radius: var(--r-2);
  background: color-mix(in srgb, var(--danger) 6%, var(--surface));
  font-size: var(--fs-sm);
}

.cc-entregable-rechazo-motivo strong {
  display: block;
  margin-bottom: 4px;
  color: var(--danger);
}

.cc-entregable-rechazo-motivo p {
  margin: 0;
}

.cc-entregable-sin-cargar {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0 0;
  font-size: var(--fs-sm);
  color: var(--text-soft, var(--text-muted));
}

.cc-entregable-sin-cargar > i {
  margin-top: 2px;
  opacity: 0.7;
}

/* Equivalente a cc-coord-pl__badge--* sin cargar dashboard-coordinador.css */
.cc-badge.cc-badge-pl-incompleta {
  background: color-mix(in srgb, var(--warning) 18%, var(--surface));
  color: var(--warning);
  border-color: transparent;
}

.cc-badge.cc-badge-pl-por-revisar {
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  color: var(--primary);
  border-color: transparent;
}

.cc-badge.cc-badge-pl-devuelta {
  background: color-mix(in srgb, var(--cc-orange) 16%, var(--surface));
  color: var(--cc-orange);
  border-color: transparent;
}

.cc-badge.cc-badge-pl-aprobada {
  background: color-mix(in srgb, var(--success, #198754) 14%, var(--surface));
  color: var(--success, #198754);
  border-color: transparent;
}

.cc-entregable-historial {
  margin-top: 6px;
  font-size: var(--fs-sm);
}

.cc-entregable-tab .cc-entregable-historial {
  margin: 0 0 0 42px;
}

.cc-entregable-historial summary {
  cursor: pointer;
  color: var(--primary);
  font-weight: 550;
  list-style: none;
}

.cc-entregable-historial summary::-webkit-details-marker {
  display: none;
}

.cc-entregable-historial summary::before {
  content: '▸ ';
}

.cc-entregable-historial[open] summary::before {
  content: '▾ ';
}

.cc-entregable-historial-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cc-entregable-historial-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--surface-2);
}

.cc-entregable-historial-motivo {
  flex: 1 1 100%;
  color: var(--danger);
  font-size: var(--fs-sm);
}

.cc-entregable-rechazo-form {
  padding: 0;
  border: 0;
  background: transparent;
}

.cc-entregable-rechazo-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.cc-entregable-motivo-count {
  font-size: var(--fs-sm);
  color: var(--text-soft, var(--text-muted));
  margin-right: auto;
}

.cc-entregable-rechazo-btns {
  display: inline-flex;
  gap: 8px;
}

.cc-entregables-docente-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cc-entregables-docente-btn:hover {
  text-decoration: underline;
}

.cc-entregables-docente-btn > i {
  font-size: 11px;
  opacity: 0.7;
}

.cc-entregables-sin-docente {
  font-style: italic;
  color: var(--text-soft, var(--text-muted));
}

.cc-entregables-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  vertical-align: middle;
}

.cc-entregables-dot--ok {
  background: var(--cc-green);
}

.cc-entregables-dot--pendiente {
  background: var(--warning, #E8A317);
}

.cc-entregables-dot--rechazo {
  background: var(--danger);
}

.cc-entregables-dot--vacio {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: var(--text-soft, var(--text-muted));
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
}

a.cc-entregables-dot-link {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}

a.cc-entregables-dot-link:hover {
  transform: scale(1.25);
  opacity: 0.9;
}

.cc-entregables-file-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  vertical-align: middle;
  line-height: 1;
}

.cc-entregables-file-link .cc-entregables-dot {
  flex: 0 0 auto;
}

.cc-entregables-file-link .bi-download {
  font-size: 14px;
}

.cc-entregables-file-link.is-ok {
  color: var(--cc-green);
}
.cc-entregables-file-link.is-ok .cc-entregables-dot {
  background: var(--cc-green);
}

.cc-entregables-file-link.is-pendiente {
  color: var(--warning, #E8A317);
}
.cc-entregables-file-link.is-pendiente .cc-entregables-dot {
  background: var(--warning, #E8A317);
}

.cc-entregables-file-link.is-rechazo {
  color: var(--danger);
}
.cc-entregables-file-link.is-rechazo .cc-entregables-dot {
  background: var(--danger);
}

.cc-entregables-file-link:hover {
  opacity: 0.85;
  text-decoration: none;
}

.cc-badge.cc-badge-pl-pendiente {
  background: color-mix(in srgb, var(--warning, #E8A317) 18%, var(--surface));
  color: var(--warning, #C47F00);
  border-color: transparent;
}

.cc-entregables-pct {
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cc-entregables-pct--ok {
  color: var(--success);
}

.cc-entregables-pct--ambar {
  color: var(--warning, #E8A317);
}

.cc-entregables-pct--alto {
  color: var(--danger);
}

.cc-entregables-avance {
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--text-soft, var(--text-muted));
}

.cc-entregables-avance--pendiente,
.cc-entregables-avance--rechazo {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
}

.cc-entregables-avance--pendiente {
  background: color-mix(in srgb, var(--warning, #E8A317) 18%, var(--surface));
  color: var(--warning, #C47F00);
}

.cc-entregables-avance--rechazo {
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
  color: var(--danger);
}

.cc-entregables-matriz .cc-card-header {
  flex-wrap: wrap;
  align-items: flex-start;
}

.cc-entregables-matriz .cc-lc-filtro {
  margin-left: auto;
}

.cc-entr-grupo > td,
tr.dtrg-group > th,
tr.dtrg-group > td {
  background: var(--surface-2);
  border-top: 1px solid var(--border-strong);
  padding: 10px 14px;
  white-space: normal;
  vertical-align: middle;
  text-align: left;
  font-weight: 400;
}

.cc-entr-grupo-nombre {
  font-weight: 700;
  color: var(--text);
}

.cc-entr-grupo-sin {
  font-style: italic;
  color: var(--text-soft, var(--text-muted));
  font-weight: 500;
}

.cc-entr-grupo-meta {
  font-size: var(--fs-sm);
  color: var(--text-soft, var(--text-muted));
  font-weight: 400;
}

.cc-entr-grupo-estado {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.cc-entr-grupo-estado.is-full {
  color: var(--cc-green-700, var(--success));
}

.cc-entr-grupo-estado.is-incompleto {
  color: var(--warning, #C47F00);
}

@media (max-width: 767.98px) {
  .cc-entr-grupo > td {
    white-space: normal;
    line-height: 1.35;
  }
}

.cc-entregables-pct-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.cc-entregables-pct-btn:hover .cc-entregables-pct {
  text-decoration: underline;
}

/* —— Modal llamados a lista —— */
.cc-llamados-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.cc-llamados-hdr-text {
  min-width: 0;
}

.cc-llamados-kpis {
  display: inline-flex;
  gap: 20px;
  flex-shrink: 0;
}

.cc-llamados-kpi {
  text-align: right;
}

.cc-llamados-kpi-value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.cc-llamados-kpi-value.is-ok { color: var(--success); }
.cc-llamados-kpi-value.is-ambar { color: var(--warning, #E8A317); }
.cc-llamados-kpi-value.is-alto,
.cc-llamados-kpi-value .is-alto { color: var(--danger); }

.cc-llamados-kpi-muted {
  color: var(--text-soft, var(--text-muted));
  font-weight: 500;
  font-size: 16px;
}

.cc-llamados-kpi-label {
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--text-soft, var(--text-muted));
}

.cc-llamados-table-wrap {
  overflow-x: auto;
}

.cc-llamados-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.cc-llamados-table th,
.cc-llamados-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.cc-llamados-table thead th {
  font-weight: 600;
  color: var(--text-soft, var(--text-muted));
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.cc-llamados-table tbody tr.is-pendiente {
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
}

.cc-llamados-table tbody tr.is-sin-clase {
  background: var(--surface-2);
  color: var(--text-soft, var(--text-muted));
}

.cc-llamados-sesion {
  font-weight: 600;
  color: var(--text);
}

.cc-llamados-sesion-fecha {
  margin-left: 6px;
  font-weight: 400;
  color: var(--text-soft, var(--text-muted));
}

.cc-llamados-alerta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--danger);
  font-weight: 550;
}

.cc-llamados-sin-clase {
  color: var(--text-soft, var(--text-muted));
}

.cc-llamados-num-aus {
  color: var(--danger);
  font-weight: 700;
}

.cc-llamados-bar-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 110px;
}

.cc-llamados-progress {
  -webkit-appearance: none;
  appearance: none;
  width: 72px;
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
  vertical-align: middle;
}

.cc-llamados-progress::-webkit-progress-bar {
  background: var(--border);
  border-radius: 999px;
}

.cc-llamados-progress::-webkit-progress-value {
  background: var(--text-soft, #9AA3B2);
  border-radius: 999px;
}

.cc-llamados-progress::-moz-progress-bar {
  background: var(--text-soft, #9AA3B2);
  border-radius: 999px;
}

.cc-llamados-progress.is-ok::-webkit-progress-value { background: var(--success); }
.cc-llamados-progress.is-ok::-moz-progress-bar { background: var(--success); }
.cc-llamados-progress.is-ambar::-webkit-progress-value { background: var(--warning, #E8A317); }
.cc-llamados-progress.is-ambar::-moz-progress-bar { background: var(--warning, #E8A317); }
.cc-llamados-progress.is-alto::-webkit-progress-value { background: var(--danger); }
.cc-llamados-progress.is-alto::-moz-progress-bar { background: var(--danger); }

.cc-llamados-bar-pct {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-soft, var(--text-muted));
}

.cc-llamados-bar-pct.is-ok { color: var(--success); }
.cc-llamados-bar-pct.is-ambar { color: var(--warning, #E8A317); }
.cc-llamados-bar-pct.is-alto { color: var(--danger); }

.cc-llamados-reg {
  color: var(--text-soft, var(--text-muted));
}

.cc-llamados-reg.is-tarde {
  color: var(--cc-orange, #A35C05);
  font-weight: 550;
}

.cc-llamados-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.cc-llamados-foot-stats {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: var(--fs-sm);
  color: var(--text-soft, var(--text-muted));
}

.cc-llamados-foot-stats .is-tarde {
  color: var(--cc-orange, #A35C05);
}

.cc-llamados-foot-stats .is-alto {
  color: var(--danger);
}