/* ============================================================
   edoo · ui/components.css — componentes compartidos.
   Un solo lenguaje para toda la plataforma: botones de 36 px,
   campos de 36 px, bordes finos (--border), radios de 3–4 px,
   un solo color de acción (--primary). Sin degradados ni sombras
   de color. Referencias: Canvas (botones, campos, modales, avisos),
   Blackboard (tarjetas y filas de herramientas), Brightspace
   (aviso de IA, pasos, tablas con casilla), D2L (pestañas).
   Las hojas de página no redefinen estas clases; si necesitan una
   variante la escriben con el selector de su página delante.
   ============================================================ */

/* ============ 1. Botones ============ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 36px; padding: 0 14px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--text);
    font-family: var(--font-body); font-size: 14px; font-weight: 700; line-height: 1.2;
    text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
    transition: background-color .12s, border-color .12s, color .12s;
}
.btn i { font-size: 13px; }
.btn:hover { background: var(--surface-2); border-color: var(--border-strong); text-decoration: none; }
.btn:active { background: var(--border-light); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn.primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn.secondary, .btn.ghost { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn.ghost { background: transparent; }
.btn.secondary:hover, .btn.ghost:hover { background: var(--surface-2); }
.btn.danger { background: var(--surface); border-color: var(--danger); color: var(--danger); }
.btn.danger:hover { background: var(--danger); color: var(--on-primary); }
.btn.link { border-color: transparent; background: transparent; color: var(--primary); padding: 0 6px; min-height: 32px; }
.btn.link:hover { text-decoration: underline; background: transparent; }
.btn.small { min-height: 30px; padding: 0 10px; font-size: 13px; }
.btn.large { min-height: 42px; padding: 0 20px; font-size: 15px; }
.btn.pill { border-radius: 999px; padding: 0 18px; }
.btn.w-full, .btn.full-width { width: 100%; }
.btn.icon, .icon-button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0; border-radius: var(--radius);
    border: 1px solid transparent; background: transparent; color: var(--muted); font-size: 15px;
}
.icon-button:hover, .btn.icon:hover { background: var(--surface-2); color: var(--text); }
.btn-group { display: inline-flex; gap: 8px; flex-wrap: wrap; }
/* botón en carga (loader.js) */
.is-loading { position: relative; pointer-events: none; color: transparent !important; }
.is-loading > * { visibility: hidden; }
.is-loading::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
    border: 2px solid var(--text); border-right-color: transparent; border-radius: 50%;
    animation: ui-spin .7s linear infinite;
}
.btn.primary.is-loading::after { border-color: var(--on-primary); border-right-color: transparent; }
.is-loading-text { color: var(--muted); }
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* ============ 2. Campos ============ */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"],
input[type="url"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"],
select, textarea, .input {
    display: block; width: 100%; min-height: 36px; padding: 6px 10px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--text); font-size: 14px; line-height: 1.4;
    transition: border-color .12s, box-shadow .12s;
}
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
select {
    appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer;
    background-image: var(--select-arrow);
    background-repeat: no-repeat; background-position: right 10px center;
}
input:focus, select:focus, textarea:focus, .input:focus-within {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-tint-strong);
}
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
input[aria-invalid="true"], .field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--danger); }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; accent-color: var(--primary); margin: 0; vertical-align: -3px; cursor: pointer; }
input[type="range"] { accent-color: var(--primary); width: 100%; }
input[type="file"] { font-size: 13px; }
.field, .form-group, .org-field, .session-field { display: flex; flex-direction: column; gap: 6px; }
.field + .field, .form-group + .form-group, .org-field + .org-field, .session-field + .session-field { margin-top: 16px; }
.label, .field > label, .form-group > label, .org-field__label, .session-field > label {
    font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3;
}
.label i, .field > label i, .org-field__label i, .session-field > label i { display: none; }
.hint, .field-hint, .picker-help-text, .config-hint { font-size: 12px; color: var(--muted); line-height: 1.4; }
.picker-help-text i { margin-right: 4px; }
.field-required { color: var(--danger); font-weight: 700; margin-left: 2px; }
.field-optional { color: var(--muted); font-weight: 400; margin-left: 4px; font-size: 12px; }
.field-error, .error-text { font-size: 12px; color: var(--danger); }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.password-input-wrapper { position: relative; }
.password-input-wrapper input { padding-right: 40px; }
.password-toggle {
    position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    color: var(--muted); border-radius: var(--radius-sm);
}
.password-toggle:hover { color: var(--text); background: var(--surface-2); }
.input-group { display: flex; align-items: stretch; }
.input-group > input { border-radius: var(--radius) 0 0 var(--radius); }
.input-group > .btn { border-radius: 0 var(--radius) var(--radius) 0; margin-left: -1px; }
.search-input { position: relative; }
.search-input > i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px; pointer-events: none; }
.search-input > input { padding-left: 32px; }
/* interruptor */
.config-toggle, .switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.config-toggle input, .switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.config-toggle-track, .switch__track {
    width: 36px; height: 20px; border-radius: 20px; background: var(--border-strong); position: relative; transition: background .15s;
}
.config-toggle-track::after, .switch__track::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--on-primary); transition: transform .15s;
}
.config-toggle input:checked + .config-toggle-track, .switch input:checked + .switch__track { background: var(--primary); }
.config-toggle input:checked + .config-toggle-track::after, .switch input:checked + .switch__track::after { transform: translateX(16px); }
.config-toggle input:focus-visible + .config-toggle-track, .switch input:focus-visible + .switch__track { outline: 2px solid var(--primary); outline-offset: 2px; }
/* pastillas segmentadas y chips de opción (config-pill / config-chip) */
.config-pill-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.config-pill { min-height: 32px; padding: 0 14px; font-size: 13px; font-weight: 700; color: var(--muted); background: var(--surface); border-right: 1px solid var(--border); }
.config-pill:last-child { border-right: 0; }
.config-pill:hover { background: var(--surface-2); color: var(--text); }
.config-pill.active { background: var(--primary); color: var(--on-primary); }
.config-time-chips, .chip-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.config-chip, .chip-option {
    min-height: 30px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--text); font-size: 13px; font-weight: 700;
}
.config-chip:hover, .chip-option:hover { border-color: var(--border-strong); background: var(--surface-2); }
.config-chip.active, .chip-option.active, .chip-option[aria-pressed="true"] { background: var(--primary-tint); border-color: var(--primary); color: var(--primary-dark); }
.config-time-custom { display: inline-flex; align-items: center; gap: 6px; }
.config-time-custom input { width: 72px; min-height: 30px; }
.config-select { max-width: 320px; }
/* filas de configuración (estudio, sesión, grupo) */
.config-sections-wrap { display: flex; flex-direction: column; gap: 12px; }
.config-section { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.config-section-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; cursor: pointer; font-weight: 700; font-size: 14px; user-select: none;
}
.config-section-header:hover { background: var(--surface-2); }
.config-section-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.config-section-header-left i { color: var(--muted); width: 16px; text-align: center; }
.config-section-chevron { color: var(--muted); font-size: 12px; transition: transform .15s; }
.config-section.collapsed .config-section-chevron { transform: rotate(-90deg); }
.config-section-body { padding: 4px 16px 16px; border-top: 1px solid var(--border-light); }
.config-section.collapsed .config-section-body { display: none; }
.config-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border-light); }
.config-row:last-child { border-bottom: 0; }
.config-row-col { flex-direction: column; align-items: stretch; gap: 8px; }
.config-row-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; font-weight: 700; }
.config-row-label .config-hint { font-weight: 400; }
/* panel plegable con línea de resumen (editor: Disponibilidad · "Siempre disponible") */
.side-panel { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.side-panel + .side-panel { margin-top: 12px; }
.side-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; cursor: pointer; }
.side-panel__head h3 { font-size: 16px; font-weight: 700; }
.side-panel__head i { color: var(--muted); font-size: 12px; transition: transform .15s; }
.side-panel.open .side-panel__head i { transform: rotate(90deg); }
.side-panel__summary { padding: 0 18px 14px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--border-light); padding-top: 10px; }
.side-panel__body { display: none; padding: 4px 18px 16px; border-top: 1px solid var(--border-light); }
.side-panel.open .side-panel__body { display: block; }
.side-panel.open .side-panel__summary { display: none; }
/* selector múltiple (sessions.js, groups.js) */
.multiselect-wrapper { position: relative; }
.multiselect-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 36px; padding: 6px 10px;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: 14px; text-align: left;
}
.multiselect-wrapper.open .multiselect-btn { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-tint-strong); }
.multiselect-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multiselect-label.placeholder { color: var(--muted-light); }
.multiselect-chevron { color: var(--muted); font-size: 12px; }
.multiselect-dropdown {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; max-height: 240px; overflow: auto;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 4px 0;
}
.multiselect-wrapper.open .multiselect-dropdown { display: block; }
.multiselect-dropdown label { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 14px; cursor: pointer; }
.multiselect-dropdown label:hover { background: var(--surface-2); }
.multiselect-empty { padding: 10px 12px; font-size: 13px; color: var(--muted); }
/* selector de color (grupos, carpetas) */
.color-picker-enhanced { display: flex; flex-direction: column; gap: 10px; }
.color-picker-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.color-dot {
    width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); transition: transform .1s;
}
.color-dot:hover { transform: scale(1.08); }
.color-dot.selected { border-color: var(--text); box-shadow: 0 0 0 2px var(--on-primary) inset; }
.color-picker-custom-row { display: flex; align-items: center; gap: 10px; }
/* "Más colores": punto arcoíris + etiqueta; el <input type=color> invisible cubre todo el botón */
.color-picker-custom-trigger { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px 0 2px; border-radius: 15px; cursor: pointer; }
.color-picker-custom-trigger:hover { background: var(--surface-2); }
.color-picker-custom-trigger input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.color-rainbow-dot { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); pointer-events: none; }
.color-rainbow-dot.selected { border-color: var(--text); box-shadow: 0 0 0 2px var(--on-primary) inset; }
.color-picker-custom-label { font-size: 13px; font-weight: 700; color: var(--text-secondary); }

/* ============ 3. Tarjetas, cifras y cabeceras de sección ============ */
.card, .panel-card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--card-pad);
}
.card--flush { padding: 0; overflow: hidden; }
.card--clickable { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.card--clickable:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.card__head, .card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card__head h2, .card__head h3, .card-header h2, .card-header h3 { font-size: var(--fs-h3); font-weight: 700; }
/* baldosa de icono (28 px, teñida) delante del título de una tarjeta o sección (Moodle, Canvas) */
.hd-ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 6px; background: var(--primary-tint); color: var(--primary); }
.hd-ico i { font-size: 12px; line-height: 1; }
/* iniciales del grupo en su color, sobre un tinte del mismo color */
.g-ini { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--radius-lg); background: var(--primary-tint); color: var(--group-color, var(--primary)); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
@supports (background: color-mix(in srgb, red 10%, white)) { .g-ini { background: color-mix(in srgb, var(--group-color, var(--primary)) 14%, var(--surface)); } }
.card__foot, .card-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-light); }
/* tarjeta de catálogo (Blackboard/Canvas): banda o imagen, título azul, meta gris, acciones */
.tile { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.tile__band { height: 8px; background: var(--primary); }
.tile__media { aspect-ratio: 16 / 7; background: var(--surface-2); object-fit: cover; }
.tile__body { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.tile__title { font-size: 16px; font-weight: 700; color: var(--primary); line-height: 1.3; }
.tile__title:hover { text-decoration: underline; cursor: pointer; }
.tile__meta { font-size: 13px; color: var(--muted); }
.tile__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border-light); }
.tile__foot a { font-size: 13px; font-weight: 700; }
.tile__actions { display: flex; gap: 2px; }
.tile__actions .icon-button { width: 30px; height: 30px; font-size: 13px; }
/* banda de título (Learning Hub, portada de lección, Ayuda) */
.hero-band { background: var(--band); color: var(--on-primary); border-radius: var(--radius-lg); padding: 32px var(--card-pad); }
.hero-band h1, .hero-band h2 { color: var(--on-primary); }
.hero-band p { color: rgba(255, 255, 255, .82); }
/* cifras */
.stats-row, .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.stat-value { font-family: var(--font-title); font-size: 28px; font-weight: 300; line-height: 1.1; color: var(--text); }
.stat-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
/* cabeceras de sección dentro de una página */
.section-header, .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.section-header h2, .section-head h2, h2.section-title, .section-title { font-size: var(--fs-h2); font-weight: 400; }
.section-header h3, .section-head h3 { font-size: var(--fs-h3); font-weight: 700; }
.section-number { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--text); color: var(--on-primary); font-size: 12px; font-weight: 700; margin-right: 8px; }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--primary); }
.back-link i { font-size: 12px; }
.divider { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
/* fila de herramientas (Blackboard): buscador + filtros + acciones */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar__spacer { flex: 1; }
.toolbar .search-input { min-width: 220px; }
.view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.view-toggle button { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); border-right: 1px solid var(--border); }
.view-toggle button:last-child { border-right: 0; }
.view-toggle button.active { background: var(--text); color: var(--on-primary); }
/* pasos de un asistente (Brightspace): ✓ hecho · ● actual · ○ siguiente */
.steps { display: flex; align-items: flex-start; justify-content: center; gap: 0; list-style: none; padding: 0; margin: 0; }
.steps li { position: relative; flex: 1; max-width: 200px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); text-align: center; }
.steps li::before { content: ""; position: absolute; top: 13px; left: 50%; width: 100%; height: 2px; background: var(--border); z-index: 0; }
.steps li:last-child::before { display: none; }
.steps__dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--muted); }
.steps li.done .steps__dot { border-color: var(--accent); color: var(--accent); }
.steps li.done::before { background: var(--accent); }
.steps li.current { color: var(--primary); font-weight: 700; }
.steps li.current .steps__dot { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
/* aviso de IA (Brightspace): banda tenue con ✦ */
.ai-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--primary-tint); color: var(--text); font-size: 14px; line-height: 1.5; }
.ai-note > i { color: var(--primary); margin-top: 3px; }
.ai-note strong { font-weight: 700; }
.ai-note a { font-weight: 700; }
/* barra inferior de acciones de un asistente */
.action-bar { display: flex; align-items: center; gap: 8px; padding: 14px 0 0; border-top: 1px solid var(--border); }
.action-bar .btn.primary { order: -1; }

/* ============ 4. Pestañas (D2L: subrayado de 2 px) ============ */
.tabs, .create-tabs, .content-tabs, .tab-bar {
    display: flex; gap: 2px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; position: relative;
}
.tabs::-webkit-scrollbar, .create-tabs::-webkit-scrollbar { display: none; }
.create-tabs-container { margin: 0; }
.create-tabs__slider { display: none; }
.tab, .content-tab, .tab-btn {
    display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; margin-bottom: -1px;
    border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted);
    font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: color .12s, border-color .12s;
}
.tab i, .content-tab i, .tab-btn i { font-size: 13px; }
.tab:hover, .content-tab:hover, .tab-btn:hover { color: var(--text); }
.tab.active, .content-tab.active, .tab-btn.active, .tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--primary); }
.tab-badge, .tab .count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--primary); color: var(--on-primary); font-size: 11px; font-weight: 700; }
/* pestañas en píldora (dentro de modales y tarjetas) */
.tabs--pills { border: 0; gap: 6px; }
.tabs--pills .tab { min-height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; margin: 0; }
.tabs--pills .tab.active { background: var(--text); border-color: var(--text); color: var(--on-primary); }

/* ============ 5. Chips, insignias y estados ============ */
.chip, .badge, .pill, .tag, .meta-tag, .optional-tag, .activity-type-badge, .session-type-badge, .status-badge {
    display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 0 8px; border-radius: var(--radius-sm);
    background: var(--surface-2); color: var(--text-secondary); font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap;
}
.chip i, .badge i, .pill i, .tag i { font-size: 11px; }
.pill { border-radius: 999px; }
.optional-tag { background: transparent; border: 1px dashed var(--border-strong); color: var(--muted); font-weight: 400; }
.chip.primary, .badge.primary, .tag.primary, .badge.info, .chip.info { background: var(--primary-tint); color: var(--primary-dark); }
.chip.success, .badge.success, .tag.success, .status-badge.success, .status-badge.active, .status-badge.completed { background: var(--success-bg); color: var(--success); }
.chip.warning, .badge.warning, .tag.warning, .status-badge.warning, .status-badge.pending { background: var(--warning-bg); color: var(--warning); }
.chip.danger, .badge.danger, .tag.danger, .chip.error, .badge.error, .status-badge.danger, .status-badge.error { background: var(--danger-bg); color: var(--danger); }
.chip.muted, .badge.muted, .tag.muted { background: var(--surface-2); color: var(--muted); }
.chip.outline, .badge.outline { background: transparent; border: 1px solid var(--border); }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted-light); }
.status-dot.success, .status-dot.live { background: var(--success); }
.status-dot.warning { background: var(--warning); }
.status-dot.danger { background: var(--danger); }
.chip--removable .chip__x { margin-left: 2px; color: var(--muted); cursor: pointer; }
.avatar {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 32px; height: 32px; border-radius: 50%; background: var(--primary-tint-strong); color: var(--primary-deep);
    font-size: 13px; font-weight: 700; text-transform: uppercase; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--lg { width: 48px; height: 48px; font-size: 18px; }
.avatar--sm { width: 24px; height: 24px; font-size: 11px; }
/* filtros en chips desplegables (activities.js, groups.js) */
.filter-chips-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filter-group { position: relative; }
.filter-chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 13px; font-weight: 700;
}
.filter-chip:hover { background: var(--surface-2); border-color: var(--border-strong); }
.filter-chip.active, .filter-chip[aria-expanded="true"] { border-color: var(--primary); background: var(--primary-tint); color: var(--primary-dark); }
.filter-chip i:first-child { color: var(--muted); font-size: 12px; }
.filter-chip.active i:first-child { color: inherit; }
.trigger-arrow { font-size: 10px; color: var(--muted); margin-left: 2px; }
.filter-count { display: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--primary); color: var(--on-primary); font-size: 11px; align-items: center; justify-content: center; }
.filter-count.visible, .filter-count:not(:empty) { display: inline-flex; }
.filter-chip-dropdown { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; display: none; }
.filter-chip-dropdown.open, .filter-group.open .filter-chip-dropdown { display: block; }
.filter-dropdown {
    min-width: 240px; max-height: 320px; overflow: auto; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-md); display: none;
}
.filter-dropdown.open, .filter-chip-dropdown.open .filter-dropdown { display: block; }
.filter-dropdown-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border-light); font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.filter-clear-btn { font-size: 12px; font-weight: 700; color: var(--primary); text-transform: none; letter-spacing: 0; }
.filter-dropdown-options { padding: 4px 0; }
.filter-option { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 14px; cursor: pointer; position: relative; }
.filter-option:hover { background: var(--surface-2); }
.filter-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.filter-checkbox { width: 16px; height: 16px; border: 1px solid var(--border-strong); border-radius: 3px; background: var(--surface); flex: 0 0 auto; position: relative; }
.filter-option input:checked + .filter-checkbox { background: var(--primary); border-color: var(--primary); }
.filter-option input:checked + .filter-checkbox::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid var(--on-primary); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.filter-option-text { flex: 1; min-width: 0; }
.filter-clear-all, .clear-all-filters { font-size: 13px; }

/* ============ 6. Tablas (Brightspace: casilla, título azul, "Total: N", paginación) ============ */
.table, .data-table, table.ui-table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--card); }
.table th, .data-table th, .ui-table th {
    text-align: left; padding: 10px 12px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
    border-bottom: 1px solid var(--border); background: var(--surface); white-space: nowrap;
}
.table td, .data-table td, .ui-table td { padding: 12px; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.table tbody tr:hover, .data-table tbody tr:hover, .ui-table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table td a.title, .table .row-title { font-weight: 700; color: var(--primary); }
.table td.check, .table th.check { width: 36px; padding-right: 0; }
.table .btn { min-height: 32px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.table-wrap .table { border: 0; }
.table-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.table-foot select { width: auto; min-height: 32px; }
.row-actions { display: flex; gap: 2px; justify-content: flex-end; }
.row-actions .icon-button { width: 30px; height: 30px; font-size: 13px; }
/* mini barras y barra de avance (progreso de la clase) */
.spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.spark i { display: block; width: 6px; background: var(--primary); border-radius: 1px; }
.spark i.low { background: var(--warning); }
.spark i.bad { background: var(--danger); }
.meter { display: flex; align-items: center; gap: 10px; min-width: 160px; }
.meter .progress { flex: 1; height: 8px; border-radius: 4px; }
.meter__label { font-size: 13px; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ============ 7. Listas, menús y paginación ============ */
.list { display: flex; flex-direction: column; }
.list-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-light); }
.list-item:last-child { border-bottom: 0; }
.list-item__body { flex: 1; min-width: 0; }
.list-item__title { font-weight: 700; color: var(--text); }
.list-item__meta { font-size: 13px; color: var(--muted); }
/* lista de unidades (Brightspace): tarjeta con barra de acento a la izquierda */
.unit-list { display: flex; flex-direction: column; gap: 10px; }
.unit { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.unit::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: var(--radius) 0 0 var(--radius); background: var(--text); }
.unit:hover { border-color: var(--border-strong); }
.unit.active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.unit.active::before { background: var(--primary); }
.unit__title { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; }
.unit__meta { font-size: 12px; color: var(--muted); }
.menu, .dropdown-menu {
    position: absolute; z-index: 40; min-width: 200px; padding: 6px 0; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md);
}
.menu-item, .dropdown-item {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 14px; font-size: 14px; color: var(--text); text-align: left; background: transparent;
}
.menu-item i, .dropdown-item i { width: 16px; text-align: center; color: var(--muted); font-size: 13px; }
.menu-item:hover, .dropdown-item:hover { background: var(--surface-2); text-decoration: none; }
.menu-item.danger, .dropdown-item.danger { color: var(--danger); }
.menu-item.danger i, .dropdown-item.danger i { color: var(--danger); }
.dropdown-divider, .menu-divider { height: 1px; background: var(--border-light); margin: 6px 0; }
.pager { display: flex; align-items: center; gap: 4px; }
.pager__btn { min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--radius); font-size: 13px; font-weight: 700; color: var(--text); }
.pager__btn:hover { background: var(--surface-2); }
.pager__btn.active { border-color: var(--border); background: var(--surface); color: var(--primary); }
.progress, .progress-bar { height: 6px; border-radius: 3px; background: var(--border-light); overflow: hidden; }
.progress__fill, .progress-bar__fill, .progress-fill { height: 100%; background: var(--primary); border-radius: 3px; transition: width .3s; }
.progress.success .progress__fill { background: var(--accent); }

/* ============ 8. Avisos y estados vacíos ============ */
.alert, .notice, .banner {
    display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
    border: 1px solid var(--border); border-left: 4px solid var(--muted); border-radius: var(--radius); background: var(--surface); font-size: 14px;
}
.alert i, .notice i { margin-top: 2px; color: var(--muted); }
.alert.info, .notice.info { border-left-color: var(--info); background: var(--info-bg); }
.alert.info i { color: var(--info); }
.alert.success, .notice.success { border-left-color: var(--success); background: var(--success-bg); }
.alert.success i { color: var(--success); }
.alert.warning, .notice.warning { border-left-color: var(--warning); background: var(--warning-bg); }
.alert.warning i { color: var(--warning); }
.alert.danger, .alert.error, .notice.danger { border-left-color: var(--danger); background: var(--danger-bg); }
.alert.danger i, .alert.error i { color: var(--danger); }
.empty-state, .error-state, .org-empty, .sp-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
    padding: 40px 24px; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--bg); color: var(--muted);
}
/* el icono como pequeña ilustración: círculo teñido con un halo, en el color de acción */
.empty-state > i, .error-state > i, .org-empty > i, .sp-empty > i, .empty-state-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 4px 0 10px; border-radius: 50%;
    background: var(--primary-tint); color: var(--primary); font-size: 22px; box-shadow: 0 0 0 8px rgba(var(--primary-rgb), .06);
}
.empty-state-icon i { font-size: 22px; color: var(--primary); }
.empty-state.compact > i, .empty-state.compact .empty-state-icon { width: 40px; height: 40px; font-size: 16px; box-shadow: 0 0 0 6px rgba(var(--primary-rgb), .06); margin-bottom: 6px; }
.empty-state h3, .empty-state h4, .error-state h3, .org-empty h4, .empty-state-content h3, .empty-state-content h4 { font-size: var(--fs-h3); font-weight: 700; color: var(--text); margin: 4px 0 0; }
.empty-state p, .error-state p, .empty-hint { font-size: 14px; color: var(--muted); max-width: 440px; }
.empty-state .btn, .error-state .btn { margin-top: 12px; }
.empty-state-content { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.error-state > i { color: var(--danger); background: var(--danger-bg); box-shadow: 0 0 0 8px rgba(var(--primary-rgb), .04); }
.empty-state.compact { padding: 20px 16px; }
/* globo del recorrido guiado (Brightspace): borde, texto, Atrás/Siguiente */
.coach { position: absolute; z-index: 1200; width: 300px; padding: 16px; background: var(--surface); border: 1px solid var(--primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); font-size: 14px; line-height: 1.5; }
.coach__actions { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }

/* ============ 9. Modales (Canvas: cabecera con título, pie gris con acciones a la derecha) ============ */
.modal, .org-modal, .modal-overlay {
    position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 16px;
    background: rgba(var(--primary-deep-rgb), .55);
}
.modal.show, .org-modal.show, .org-modal.active, .modal-overlay.show, .modal-overlay.active, .modal.open { display: flex; }
.modal__content, .modal-content, .org-modal__content {
    position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
    animation: ui-modal-in .16s ease-out;
}
@keyframes ui-modal-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.modal__content.small { max-width: 440px; }
.modal__content.medium { max-width: 680px; }
.modal__content.large { max-width: 900px; }
.modal__content.extra-large { max-width: 1140px; }
.modal__content.fullscreen { max-width: none; width: calc(100vw - 32px); height: calc(100vh - 32px); max-height: none; }
.modal-header, .org-modal__header, .modal__header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--border);
}
.modal-header.compact { padding: 12px 16px; }
/* título + subtítulo como hijos directos: uno debajo del otro */
.modal-header:has(> h2 + p), .modal-header:has(> h3 + p) { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.modal-header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.modal-header h2, .modal-header h3, .org-modal__header h2, .org-modal__header h3, .modal__header h2, .modal__header h3,
.modal__content > h2, .modal__content > h3 { font-size: 20px; font-weight: 400; line-height: 1.25; }
.modal-header h2 i, .modal-header h3 i, .org-modal__header h2 i { display: none; }
.modal-header p, .modal__subtitle { font-size: 13px; color: var(--muted); margin-top: 2px; }
.modal-close, .org-modal__close, .modal__close {
    flex: 0 0 auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius); color: var(--muted); font-size: 16px;
}
.modal-close:hover, .org-modal__close:hover, .modal__close:hover { background: var(--surface-2); color: var(--text); }
.modal-body, .org-modal__body, .modal__body { padding: 20px 24px; overflow: auto; flex: 1 1 auto; min-height: 0; }
.modal__content > :not(.modal-header):not(.modal-body):not(.modal-footer):not(.modal__header):not(.modal__body):not(.modal__footer):not(.modal-actions):not(.close) { padding-left: 24px; padding-right: 24px; }
.modal__content > :first-child:not(.modal-header):not(.modal__header):not(.close),
.modal__content > .icon-button.close:first-child + :not(.modal-header):not(.modal__header):not(.modal-body):not(.modal__body) { padding-top: 22px; }
/* botón cerrar suelto (hijo directo de .modal__content): esquina superior derecha */
.modal__content > .icon-button.close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 32px; height: 32px; }
.modal__content > .icon-button.close ~ .modal-header, .modal__content > .icon-button.close ~ .modal__header { padding-right: 56px; }
.modal__content > :last-child:not(.modal-footer):not(.modal__footer):not(.modal-actions) { padding-bottom: 22px; }
.modal-footer, .org-modal__footer, .modal__footer, .modal-actions {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
    padding: 14px 24px; border-top: 1px solid var(--border); background: var(--surface-2);
}
.modal-actions { margin-top: 20px; margin-left: -24px; margin-right: -24px; margin-bottom: -22px; }
.modal__content > .modal-actions { margin: 20px 0 0; }
.modal-footer .left, .modal-footer__left { margin-right: auto; }
/* confirmación */
.confirm-modal-content { text-align: center; padding: 28px 24px 22px !important; }
.confirm-modal-icon { width: 48px; height: 48px; margin: 0 auto 12px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--danger-bg); color: var(--danger); font-size: 20px; }
.confirm-modal-title { font-size: 20px; font-weight: 400; margin-bottom: 6px; }
.confirm-modal-message { color: var(--muted); font-size: 14px; }
.confirm-modal-actions { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
/* cajón lateral (procedencia, ajustes) */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1100; width: min(520px, 100vw); background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .18s ease-out; }
.drawer.show { transform: none; }
.drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.drawer__body { flex: 1; min-height: 0; overflow: auto; padding: 16px 20px; }
.drawer__foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface-2); }
@media (max-width: 600px) {
    .modal, .org-modal, .modal-overlay { padding: 0; align-items: flex-end; }
    .modal__content, .modal-content, .org-modal__content { max-height: 94vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0; }
    .modal__content.fullscreen { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
    .modal-header, .org-modal__header, .modal__header { padding: 14px 16px; }
    .modal-body, .org-modal__body, .modal__body { padding: 16px; }
    .modal-footer, .org-modal__footer, .modal__footer, .modal-actions { padding: 12px 16px; }
    .modal__content > :not(.modal-header):not(.modal-body):not(.modal-footer):not(.modal__header):not(.modal__body):not(.modal__footer):not(.modal-actions):not(.close) { padding-left: 16px; padding-right: 16px; }
    .modal-actions { margin-left: -16px; margin-right: -16px; }
}

/* ============ 10. Aviso flotante (toast) ============ */
.toast {
    position: fixed; left: 50%; top: 16px; z-index: 2000; transform: translate(-50%, -20px); opacity: 0; pointer-events: none;
    max-width: min(92vw, 520px); padding: 12px 16px; display: flex; align-items: center; gap: 10px;
    background: var(--surface); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--info);
    border-radius: var(--radius); box-shadow: var(--shadow-md); font-size: 14px; font-weight: 700;
    transition: opacity .18s, transform .18s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast i { font-size: 15px; color: var(--info); }
.toast.success { border-left-color: var(--success); } .toast.success i { color: var(--success); }
.toast.error { border-left-color: var(--danger); } .toast.error i { color: var(--danger); }
.toast.info { border-left-color: var(--info); }
.toast .toast-link { color: var(--primary); font-weight: 700; text-decoration: underline; margin-left: 4px; }

/* ============ 11. Cargando (loader.js) y esqueletos ============ */
.ld { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; color: var(--muted); font-size: 14px; text-align: center; }
.ld__ring { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; border: 3px solid var(--border-light); border-top-color: var(--primary); animation: ui-spin .8s linear infinite; }
.ld__ring--xs { display: inline-block; width: 12px; height: 12px; border-width: 2px; vertical-align: -2px; margin-right: 4px; }
.ld__ring--block { display: block; margin: 0 auto 12px; }
.ld__text { font-weight: 700; color: var(--text); }
.ld__sub { font-size: 12px; color: var(--muted); line-height: 1.4; }
.ld__logo { font-family: var(--font-title); font-weight: 700; font-size: 26px; color: var(--text); letter-spacing: -0.01em; }
.ld--sm { flex-direction: row; justify-content: flex-start; text-align: left; gap: 9px; padding: 8px 0; }
.ld--sm .ld__ring { width: 18px; height: 18px; border-width: 2px; }
.ld--sm .ld__text { font-size: 13px; font-weight: 400; color: var(--muted); }
.ld--sm.ld--center { justify-content: center; text-align: center; }
.ld--tight { padding: 4px 0; }
.ld--overlay { position: absolute; inset: 0; z-index: 5; background: rgba(255, 255, 255, .85); border-radius: inherit; }
.ld--page { position: fixed; inset: 0; z-index: 5000; background: rgba(255, 255, 255, .96); }
.ld--page .ld__ring { width: 44px; height: 44px; }
.ld--page .ld__text { font-size: 15px; }
.ld--page.ld--in-modal { position: absolute; z-index: 20; }
.empty-state.list-error .btn { margin-top: 12px; }
.skeleton { position: relative; overflow: hidden; background: var(--border-light); border-radius: var(--radius); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); animation: ui-shimmer 1.3s infinite; }
@keyframes ui-shimmer { to { transform: translateX(100%); } }
.skeleton-card { height: 120px; }
.skeleton-row { height: 14px; margin: 8px 0; width: 100%; }
.skeleton-row.short { width: 55%; }
.skeleton-chip { display: inline-block; width: 90px; height: 30px; border-radius: 999px; margin-right: 8px; }
.skeleton-stat { height: 76px; }
.skeleton-circle { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; }
.skeleton-group { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.skeleton-group-lines { flex: 1; }
.skeleton-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.skeleton-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.skeleton-inline { display: inline-block; width: 80px; height: 12px; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } }

/* ============ 12. Pie de página compartido (app y portal) ============ */
.app-footer, .site-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 16px 0 0; margin-top: var(--section-gap); border-top: 1px solid var(--border); font-size: 12px; color: var(--muted);
}
.app-footer__links { display: flex; align-items: center; gap: 8px; }
.app-footer__links a { color: var(--muted); }
.app-footer__links a:hover { color: var(--primary); }
.app-footer__dot { color: var(--border-strong); }