/* ════════════════════════════════════════════════════════════
   TOULOUSE PILATES — Design System v3
   Paleta tomada directamente de los logos de la marca
   ════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap');

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* ── Paleta de la marca ───────────────────────────── */
  --magenta:     #CE2E87;
  --magenta-lt:  rgba(206, 46, 135, 0.10);
  --violet:      #7B5EA7;
  --violet-dk:   #624a8a;
  --violet-lt:   rgba(123, 94, 167, 0.12);
  --blue:        #3D6199;
  --blue-lt:     rgba(61, 97, 153, 0.10);
  --cyan:        #29B5D5;
  --cyan-lt:     rgba(41, 181, 213, 0.12);
  --gold:        #F0A800;
  --gold-lt:     rgba(240, 168, 0, 0.12);
  --rose:        #C78BBF;
  --rose-lt:     rgba(199, 139, 191, 0.12);

  /* ── Color primario de la app (violet del logo) ───── */
  --primary:     var(--violet);
  --primary-dk:  var(--violet-dk);
  --primary-lt:  var(--violet-lt);

  /* ── Color de acento (magenta del logo) ───────────── */
  --accent:      var(--magenta);
  --accent-lt:   var(--magenta-lt);

  /* ── Neutros ──────────────────────────────────────── */
  --bg:          #faf8fc;
  --bg2:         #f3f0f7;
  --linen:       #e4dded;
  --linen-lt:    #eeeaf4;
  --white:       #ffffff;
  --dark:        #1e1a2e;
  --mid:         #5c5670;
  --muted:       #9993aa;

  /* ── Feedback ─────────────────────────────────────── */
  --danger:      #c0392b;
  --danger-lt:   #fde8e8;
  --success:     #2e7d52;
  --success-lt:  #e3f5ec;
  --warn:        #b45309;
  --warn-lt:     #fef3c7;

  /* ── Tipografía ───────────────────────────────────── */
  --font-sans:   'Nunito', -apple-system, 'Segoe UI', system-ui, sans-serif;

  /* ── Radios ───────────────────────────────────────── */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   20px;
  --r-xl:   26px;
  --r-full: 99px;

  /* ── Sombras ──────────────────────────────────────── */
  --shadow-xs: 0 1px 4px rgba(30,26,46,0.07);
  --shadow-sm: 0 2px 10px rgba(30,26,46,0.09);
  --shadow-md: 0 4px 20px rgba(30,26,46,0.11);
  --shadow-lg: 0 8px 32px rgba(30,26,46,0.14);
}

/* ── Base ──────────────────────────────────────────────────── */
html, body {
  background: var(--bg);
  color: var(--dark);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

body {
  padding-bottom: 76px;
}

h1, h2, h3, h4, h5 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--dark);
}

h1 { font-size: 26px; }
h2 { font-size: 21px; }
h3 { font-size: 16px; }

a {
  color: inherit;
  text-decoration: none;
}

/* ── Layout ────────────────────────────────────────────────── */
.max {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 18px;
}

main {
  padding-top: 22px;
  padding-bottom: 44px;
}

/* ── Header ────────────────────────────────────────────────── */
header.app-header {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linen);
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 8px 16px;
}
.hdr-inner {
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.hdr-logo {
  display: flex;
  align-items: center;
}
.hdr-logo-mark {
  height: 26px;
  width: auto;
  display: block;
}
.hdr-right {
  display: flex;
  align-items: center;
  gap: 4px;
}
.btn-salir {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid var(--linen);
  background: transparent;
  border-radius: var(--r-sm);
  padding: 5px 10px;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: all 0.18s;
}
.btn-salir:hover {
  color: var(--magenta);
  border-color: var(--magenta);
  background: var(--magenta-lt);
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--linen);
  border-radius: var(--r-xl);
  padding: 22px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s, transform 0.2s;
}
.card:hover {
  box-shadow: var(--shadow-md);
}
.card-sm {
  background: var(--white);
  border: 1px solid var(--linen);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--shadow-xs);
}
.card-violet {
  background: var(--violet-lt);
  border: 1px solid rgba(123,94,167,0.2);
  border-radius: var(--r-xl);
  padding: 22px;
  margin-bottom: 14px;
}
.card-warm {
  background: var(--bg2);
  border: 1px solid var(--linen);
  border-radius: var(--r-xl);
  padding: 22px;
  margin-bottom: 14px;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all 0.18s;
  padding: 11px 20px;
  text-decoration: none;
  letter-spacing: 0.2px;
}
.btn:hover { filter: brightness(0.92); transform: translateY(-1px); }
.btn:active { transform: scale(0.97); filter: none; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn-sage {
  background: var(--violet);
  color: #fff;
  box-shadow: 0 2px 10px rgba(123,94,167,0.28);
}
.btn-sage:hover {
  background: var(--violet-dk);
  filter: none;
  box-shadow: 0 4px 16px rgba(123,94,167,0.35);
}
.btn-terra {
  background: var(--magenta);
  color: #fff;
  box-shadow: 0 2px 10px rgba(206,46,135,0.25);
}
.btn-terra:hover {
  filter: brightness(0.9);
  box-shadow: 0 4px 16px rgba(206,46,135,0.30);
}
.btn-outline {
  background: transparent;
  border: 1.5px solid var(--linen);
  color: var(--dark);
}
.btn-outline:hover {
  border-color: var(--violet);
  filter: none;
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  color: var(--violet);
}
.btn-ghost:hover {
  background: var(--violet-lt);
  filter: none;
}
.btn-sm {
  font-size: 11px;
  padding: 6px 12px;
  border-radius: var(--r-sm);
}
.btn-lg {
  font-size: 15px;
  padding: 14px 28px;
  border-radius: var(--r-lg);
}
.btn-block { width: 100%; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-success { background: var(--success); color: #fff; }

/* ── Forms ─────────────────────────────────────────────────── */
.field {
  margin-bottom: 14px;
}
.field label,
.field-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 5px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--linen);
  border-radius: var(--r-md);
  font-size: 14px;
  font-family: var(--font-sans);
  color: var(--dark);
  background: var(--white);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px var(--violet-lt);
}
.field textarea {
  resize: none;
  line-height: 1.6;
  min-height: 86px;
}
.field-error {
  color: var(--danger);
  font-size: 11px;
  margin-top: 5px;
  font-weight: 600;
}
.field-hint {
  color: var(--muted);
  font-size: 11px;
  margin-top: 5px;
}
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.grid3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

/* ── Sliders (evaluación) ──────────────────────────────────── */
input[type='range'].slider-eval {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 7px;
  border-radius: var(--r-full);
  outline: none;
  cursor: pointer;
  background: linear-gradient(
    to right,
    var(--violet) 0%,
    var(--violet) calc((var(--val, 3) - 1) / 4 * 100%),
    var(--linen) calc((var(--val, 3) - 1) / 4 * 100%),
    var(--linen) 100%
  );
}
input[type='range'].slider-eval::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--magenta);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(206,46,135,0.35);
  cursor: pointer;
}
input[type='range'].slider-eval::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--magenta);
  border: none;
  box-shadow: 0 2px 8px rgba(206,46,135,0.35);
  cursor: pointer;
}

/* ── Badges ────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.badge-activo      { background: var(--success-lt); color: var(--success); }
.badge-inactivo    { background: #f0eef4; color: var(--muted); }
.badge-prueba-pend { background: var(--warn-lt); color: var(--warn); }
.badge-prueba-fail { background: var(--danger-lt); color: var(--danger); }
.badge-terra       { background: var(--magenta-lt); color: var(--magenta); }
.badge-sage        { background: var(--violet-lt); color: var(--violet); }

/* ── Alertas médicas ───────────────────────────────────────── */
.alerta-medica {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--danger-lt);
  color: var(--danger);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--r-full);
  margin: 2px 4px 2px 0;
}

/* ── Bottom Nav ────────────────────────────────────────────── */
nav.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--linen);
  display: flex;
  justify-content: space-around;
  padding: 8px 0 14px;
  z-index: 20;
  box-shadow: 0 -4px 20px rgba(30,26,46,0.07);
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  text-decoration: none;
  font-family: var(--font-sans);
  transition: color 0.18s;
  border-radius: var(--r-sm);
}
.nav-item span {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.nav-item.active {
  color: var(--violet);
}
.nav-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Section titles ────────────────────────────────────────── */
.sec-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 22px 0 10px;
}

/* ── Fade animations ───────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.fade  { animation: fadeUp 0.38s ease both; }
.fade2 { animation: fadeUp 0.38s ease 0.07s both; }
.fade3 { animation: fadeUp 0.38s ease 0.14s both; }

/* ── Profe home ────────────────────────────────────────────── */
.profe-option {
  background: var(--white);
  border: 1.5px solid var(--linen);
  border-radius: var(--r-xl);
  padding: 22px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  margin-bottom: 14px;
  box-shadow: var(--shadow-xs);
}
.profe-option:hover {
  border-color: var(--violet);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.profe-option.terra:hover {
  border-color: var(--magenta);
  box-shadow: 0 4px 20px rgba(206,46,135,0.12);
}
.profe-option-icon {
  width: 52px;
  height: 52px;
  border-radius: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}
.profe-option-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 3px;
  color: var(--dark);
}
.profe-option-sub {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.profe-option-arrow {
  margin-left: auto;
  font-size: 20px;
  color: var(--linen);
  flex-shrink: 0;
}

/* ── Kanban ────────────────────────────────────────────────── */
.kanban {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.kanban-col {
  background: var(--white);
  border: 1px solid var(--linen);
  border-radius: var(--r-lg);
  padding: 14px;
  box-shadow: var(--shadow-xs);
}
.kanban-col-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.kanban-col-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--muted);
}
.kanban-count {
  font-size: 26px;
  font-weight: 700;
  color: var(--violet);
  line-height: 1;
}

/* ── List items ────────────────────────────────────────────── */
.list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: var(--white);
  border: 1px solid var(--linen);
  border-radius: var(--r-lg);
  margin-bottom: 8px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: all 0.18s;
  box-shadow: var(--shadow-xs);
}
.list-item:hover {
  border-color: var(--violet);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.list-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--violet-lt);
  color: var(--violet);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  border: 1.5px solid rgba(123,94,167,0.2);
}
.list-content {
  flex: 1;
  min-width: 0;
}
.list-name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--dark);
}
.list-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.list-chev {
  color: var(--linen);
  font-size: 18px;
  flex-shrink: 0;
}

/* ── Stats ─────────────────────────────────────────────────── */
.stat-card {
  background: var(--white);
  border: 1px solid var(--linen);
  border-radius: var(--r-lg);
  padding: 18px 14px;
  text-align: center;
  box-shadow: var(--shadow-xs);
}
.stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--violet);
  line-height: 1;
}
.stat-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 6px;
}

/* ── Flash / toast ─────────────────────────────────────────── */
.flash {
  padding: 12px 16px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 14px;
}
.flash-error   { background: var(--danger-lt); color: var(--danger); }
.flash-success { background: var(--success-lt); color: var(--success); }
.flash-info    { background: var(--violet-lt); color: var(--violet); }

/* ── Empty state ───────────────────────────────────────────── */
.empty {
  text-align: center;
  padding: 44px 20px;
  color: var(--muted);
}
.empty-icon {
  font-size: 42px;
  margin-bottom: 14px;
  opacity: 0.7;
}
.empty-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 6px;
}
.empty-sub {
  font-size: 13px;
  line-height: 1.5;
}

/* ── Login ─────────────────────────────────────────────────── */
.login-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  background: var(--bg);
}

/* ── Divider ───────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--linen);
  margin: 18px 0;
}

/* ── Animaciones de movimiento ─────────────────────────────── */

/* Campana sacude cuando hay notificaciones */
@keyframes bellShake {
  0%, 100% { transform: rotate(0); }
  15%       { transform: rotate(14deg); }
  30%       { transform: rotate(-11deg); }
  45%       { transform: rotate(8deg); }
  60%       { transform: rotate(-5deg); }
  75%       { transform: rotate(3deg); }
}
.bell-shake {
  animation: bellShake 0.7s cubic-bezier(.36,.07,.19,.97);
  transform-origin: top center;
}

/* Nav icon bounce al activarse */
@keyframes navBounce {
  0%   { transform: scale(0.65); }
  60%  { transform: scale(1.15); }
  80%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
.nav-item.active .nav-icon {
  animation: navBounce 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Punto indicador bajo el icono activo */
.nav-item.active::after {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--violet);
  margin: 2px auto 0;
  animation: fadeUp 0.3s ease both;
}

/* Heptágono: polígono de valor anima al entrar */
@keyframes heptaIn {
  from {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(0.2);
  }
  to {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1);
  }
}
.hepta-poly {
  animation: heptaIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}
.hepta-dot {
  animation: fadeUp 0.4s ease calc(var(--i, 0) * 0.05s + 0.5s) both;
}

/* Stat value cuenta desde abajo */
@keyframes statIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.stat-value {
  animation: statIn 0.5s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}

/* List item: slide desde la derecha al entrar */
@keyframes listIn {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: none; }
}
.list-item {
  animation: listIn 0.3s ease both;
}

/* Botón sage: shimmer al hover */
.btn-sage {
  position: relative;
  overflow: hidden;
}
.btn-sage::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform 0s;
}
.btn-sage:hover::after {
  transform: translateX(100%);
  transition: transform 0.4s ease;
}

/* Badge pulse cuando es warning */
@keyframes badgePulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}
.badge-prueba-pend {
  animation: badgePulse 2.5s ease infinite;
}

/* ── Nuevas clases para el rediseño v4 ────────────────────────── */

/* Hero header con gradiente de la marca */
.hero-header {
  background: linear-gradient(135deg, #7B5EA7 0%, #CE2E87 100%);
  border-radius: var(--r-xl);
  padding: 24px 20px;
  color: white;
  margin-bottom: 18px;
}
.hero-header h2, .hero-header h3 {
  color: white;
}

/* Section header con número resaltado */
.section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
  background: var(--violet-lt);
  color: var(--violet);
  margin-left: 6px;
}
.section-count.warn {
  background: var(--warn-lt);
  color: var(--warn);
}
.section-count.success {
  background: var(--success-lt);
  color: var(--success);
}

/* Progress bar */
.progress-wrap {
  background: var(--linen);
  border-radius: var(--r-full);
  height: 6px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, #7B5EA7, #CE2E87);
  transition: width 0.5s ease;
}

/* Info row dentro de cards */
.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--linen-lt);
  font-size: 13px;
}
.info-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.info-row-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.info-row-value {
  color: var(--dark);
  font-weight: 600;
  text-align: right;
}

/* Trimestre pill activo */
.trim-pill {
  padding: 6px 14px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 700;
  border: 1.5px solid var(--linen);
  background: white;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
}
.trim-pill.active {
  background: var(--violet);
  color: white;
  border-color: var(--violet);
}

/* Page intro */
.page-intro {
  margin-top: 8px;
  margin-bottom: 22px;
}
.page-intro h2 {
  margin-bottom: 4px;
}
.page-intro p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

/* Two-col stats mini */
.mini-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 20px;
}
.mini-stat {
  background: var(--bg2);
  border-radius: var(--r-lg);
  padding: 14px 12px;
  text-align: center;
}
.mini-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--violet);
  line-height: 1;
  margin-bottom: 4px;
}
.mini-stat-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Profe option cards rediseñadas */
.profe-card {
  border-radius: var(--r-xl);
  padding: 22px;
  margin-bottom: 14px;
  text-decoration: none;
  display: block;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
.profe-card-primary {
  background: linear-gradient(135deg, #7B5EA7 0%, #9B6EC7 100%);
  color: white;
  box-shadow: 0 6px 20px rgba(123,94,167,0.3);
}
.profe-card-secondary {
  background: white;
  border: 1.5px solid var(--linen);
  color: var(--dark);
  box-shadow: var(--shadow-sm);
}
.profe-card:hover {
  transform: translateY(-2px);
}
.profe-card-primary:hover {
  box-shadow: 0 8px 28px rgba(123,94,167,0.4);
}
.profe-card-secondary:hover {
  border-color: var(--violet);
  box-shadow: var(--shadow-md);
}
.profe-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.2);
  color: white;
  font-size: 22px;
  font-weight: 700;
  min-width: 44px;
  height: 44px;
  border-radius: 14px;
  padding: 0 10px;
  margin-bottom: 14px;
}
.profe-card-secondary .profe-card-badge {
  background: var(--violet-lt);
  color: var(--violet);
}
.profe-card-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.2;
}
.profe-card-primary .profe-card-title {
  color: white;
}
.profe-card-sub {
  font-size: 12px;
  opacity: 0.8;
  line-height: 1.4;
}
.profe-card-secondary .profe-card-sub {
  color: var(--muted);
  opacity: 1;
}
.profe-card-arrow {
  position: absolute;
  right: 20px;
  bottom: 20px;
  font-size: 22px;
  opacity: 0.5;
}

/* ── Ajustes para Nunito ──────────────────────────────────────── */
body { letter-spacing: -0.1px; }
h1 { font-size: 28px; font-weight: 800; }
h2 { font-size: 23px; font-weight: 800; }
h3 { font-size: 17px; font-weight: 700; }
.btn { font-weight: 800; letter-spacing: 0.1px; }
.btn-sage { font-weight: 800; }
.page-intro h2 { font-weight: 800; }
.stat-value { font-weight: 800; }
.list-name { font-weight: 700; }
.profe-card-title { font-weight: 800; }
.mini-stat-value { font-weight: 800; }
.kpi-num { font-weight: 800; }
.hero-header { font-weight: 800; }
.nav-item span { font-size: 9px; font-weight: 800; letter-spacing: 0.3px; }
.sec-title { font-weight: 800; letter-spacing: 0.6px; }

/* ── Header mejorado ──────────────────────────────────────────── */
header.app-header {
    padding: 10px 16px;
    box-shadow: 0 1px 0 var(--linen);
}
.hdr-logo-mark { height: 22px; }

/* ── Login mejorado ───────────────────────────────────────────── */
.login-wrap {
    background: linear-gradient(160deg, #faf8fc 0%, #f0ebf8 100%);
}

/* ── Cards con hover más suave ────────────────────────────────── */
.card { transition: box-shadow 0.2s, transform 0.15s; }
.card:active { transform: scale(0.985); }
.list-item { transition: all 0.15s; }
.list-item:active { transform: scale(0.985); background: #faf8fc; }
.profe-card:active { transform: scale(0.985) translateY(0); }

/* ── Sliders más bonitos con Nunito ───────────────────────────── */
.slider-val { font-weight: 800; font-size: 17px; }

/* ── Progress bars ────────────────────────────────────────────── */
.progress-wrap { border-radius: 99px; }
.progress-bar { border-radius: 99px; }

/* ── Avatars ──────────────────────────────────────────────────── */
.list-avatar { font-weight: 800; }

/* ── Refinamientos estéticos ──────────────────────────────────── */

/* Hero header más impactante */
.hero-header {
    background: linear-gradient(135deg, #7B5EA7 0%, #CE2E87 100%);
    border-radius: 24px;
    padding: 26px 22px;
    box-shadow: 0 8px 32px rgba(123,94,167,0.28);
}

/* Cards con bordes más suaves */
.card {
    border-radius: 20px;
    border: 1px solid var(--linen);
}
.card-sm {
    border-radius: 14px;
}
.list-item {
    border-radius: 16px;
}

/* Profe cards más refinadas */
.profe-card-primary {
    border-radius: 22px;
    box-shadow: 0 8px 24px rgba(123,94,167,0.28);
}
.profe-card-secondary {
    border-radius: 22px;
}

/* Avatar en header más bonito */
.hdr-logo-mark {
    height: 20px;
}

/* Bottom nav labels más pequeños */
.nav-item span {
    font-size: 8px;
    letter-spacing: 0.4px;
}

/* Input focus más suave */
.field input:focus,
.field select:focus,
.field textarea:focus {
    box-shadow: 0 0 0 4px rgba(123,94,167,0.12);
    border-color: var(--violet);
}

/* Btn sage con sombra */
.btn-sage {
    box-shadow: 0 4px 14px rgba(123,94,167,0.3);
}
.btn-sage:active {
    box-shadow: 0 2px 6px rgba(123,94,167,0.2);
    transform: translateY(1px);
}

/* Mini stats más bonitas */
.mini-stat {
    border-radius: 18px;
    border: 1px solid var(--linen);
}

/* Empty state mejorado */
.empty {
    padding: 56px 20px;
}

/* Scrollbar invisible en mobile */
::-webkit-scrollbar { display: none; }
* { -ms-overflow-style: none; scrollbar-width: none; }