/* Wisdom Academy — Estilo de la marca para todo el portal (aprobado por el CEO el 2026-10-13).
   Se carga AL FINAL del <head> de cada página del portal, después de style.css, portal-lite.css, sidebar.css y los
   estilos propios de la página, para que mande sobre ellos. Reglas:
   · Azul del logo #0D2B45 para texto, títulos y secciones oscuras.
   · Turquesa #19B6B9 solo como fondo, forma o ícono (nunca letra sobre blanco: no se lee).
   · Turquesa oscuro #0E7C7E para botones principales (letra blanca), enlaces y textos turquesa.
   · Verde lima #E6FF00 solo como resaltador. Turquesa muy claro #E8F7F7 para paneles suaves.
   · Letra Outfit en títulos, botones y etiquetas; Inter en el texto. Sin MAYÚSCULAS forzadas ni letra de máquina.
   · Botones en píldora de 44 px o más; tarjetas redondeadas con sombra suave.
   La página pública (index.html, wisdom_*_page.html) no usa este archivo. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --primary: #0D2B45; --navy: #0D2B45; --accent: #19B6B9; --accent-ink: #0E7C7E; --teal-soft: #E8F7F7; --yellow: #E6FF00;
  --bg: #F5F6F4; --white: #FFFFFF; --text: #5F6E7A; --gray: #5F6E7A; --line: #E3E8EC; --border: #E3E8EC;
  --ok: #257a36; --danger: #C23434; --warn: #B8620B;
  --font-sans: 'Inter', system-ui, sans-serif; --font-title: 'Outfit', 'Inter', system-ui, sans-serif; --font-mono: 'Outfit', 'Inter', system-ui, sans-serif;
  --r-card: 18px; --r-field: 12px; --shadow: 0 8px 24px rgba(13, 43, 69, .07); --shadow-btn: 0 8px 18px rgba(14, 124, 126, .25);
}

/* ---------- Base ---------- */
body { background-color: var(--bg) !important; background-image: none !important; color: var(--navy); font-family: var(--font-sans) !important; }
body * { font-family: inherit !important; text-transform: none !important; letter-spacing: normal !important; }
h1, h2, h3, h4, h5, button, .btn, label, th, legend, summary, .menu-title, .side-link, .pill, .tag, .badge, .role-pill,
.section-eyebrow, .metric span, .kpi span, .eyebrow, .kicker, .crumb, .breadcrumb, .user-box strong, .modal-section-title,
.ca-card h3, .rs-card h3, .rs-dlg h3, .package-kpi-card small, .wisdom-ux-chip small, .dash-kpi span, .fold-title {
  font-family: var(--font-title) !important;
}
h1 { font-weight: 800 !important; letter-spacing: -0.015em !important; line-height: 1.12 !important; }
h2, h3 { font-weight: 700 !important; letter-spacing: -0.01em !important; }
a { color: var(--accent-ink); }
::selection { background: var(--teal-soft); }

/* Etiquetas pequeñas: legibles (antes 10–11 px, letra de máquina y mayúsculas) */
label { font-weight: 600 !important; color: var(--navy); font-size: .86rem !important; }
.metric span, .kpi span, .dash-kpi span, .package-kpi-card small, .wisdom-ux-chip small, .eyebrow { font-size: .8rem !important; font-weight: 600 !important; }
.pill, .tag, .badge { font-size: .78rem !important; font-weight: 600 !important; }
th { font-weight: 600 !important; color: var(--text); font-size: .85rem !important; }
.section-eyebrow { background: none !important; border: 0 !important; padding: 0 !important; color: var(--text) !important; font-size: .95rem !important; font-weight: 600 !important; box-shadow: none !important; }
.crumb, .breadcrumb { font-size: .82rem !important; color: var(--text) !important; }
.kicker { color: var(--accent-ink) !important; font-weight: 600 !important; font-size: .85rem !important; }

/* Lo decorativo que solo ocupa espacio */
.wisdom-ux-strip, .loop-badge { display: none !important; }
.panel::before, .panel::after, .card::before, .card::after, .metric::before, .metric::after, .modal-box::before, .modal-box::after { display: none !important; }

/* ---------- Botones en píldora ---------- */
.btn, .logout-btn, .ca-btn, .rs-btn {
  border-radius: 999px !important; min-height: 44px; padding-left: 20px; padding-right: 20px;
  font-weight: 600 !important; font-size: .92rem !important; box-shadow: none; transform: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s, box-shadow .15s, transform .15s;
}
.btn:hover, .ca-btn:hover, .rs-btn:hover { transform: translateY(-1px) !important; }
.btn-primary, .btn.primary { background: var(--accent-ink) !important; color: #fff !important; border-color: var(--accent-ink) !important; box-shadow: var(--shadow-btn) !important; }
.btn-primary:hover { background: #0B6B6D !important; color: #fff !important; }
.btn-secondary, .btn.secondary { background: #fff !important; color: var(--navy) !important; border: 1.5px solid var(--line) !important; box-shadow: none !important; }
.btn-secondary:hover { border-color: var(--navy) !important; background: #fff !important; }
.btn-danger, .btn.danger { background: #fff !important; color: var(--danger) !important; border: 1.5px solid #F1C7C7 !important; }
.btn-small { min-height: 40px; padding: 0 16px !important; font-size: .86rem !important; }
.ca-btn { min-height: 40px; }
.ca-btn.go { background: var(--accent-ink) !important; color: #fff !important; }
.ca-btn.small, .rs-btn { min-height: 38px; }
/* Páginas de diseño simple: el botón sin clase es el principal */
.wrap button:not(.secondary):not(.link):not(.item):not(.tabs button):not([role="tab"]):not(.rs-slot):not(.chip):not(.icon):not(.fix) {
  border-radius: 999px; min-height: 44px; background: var(--accent-ink); color: #fff; font-weight: 600; padding: 0 20px; box-shadow: var(--shadow-btn);
}
.wrap button.secondary { border-radius: 999px; min-height: 44px; background: #fff; color: var(--navy); border: 1.5px solid var(--line); font-weight: 600; padding: 0 20px; }
.wrap button.secondary:hover { border-color: var(--navy); }
.wrap button:disabled { opacity: .55; box-shadow: none; }
.logout-btn { width: 100%; background: #fff !important; color: var(--danger) !important; border: 1.5px solid #F1C7C7 !important; font-size: .9rem !important; }
.logout-btn:hover { background: #FDF2F2 !important; color: var(--danger) !important; }
.quick-action-card { border-radius: var(--r-card) !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow) !important; background: #fff !important; }
.quick-action-card strong { font-family: var(--font-title) !important; font-weight: 700 !important; font-size: 1.02rem !important; }

/* ---------- Tarjetas, paneles, avisos ---------- */
.panel, .card, .metric, .kpi, .modal-box, .ca-card, .rs-card, .package-kpi-card, .dash-kpi, .table-wrap, .notice, details.how,
.package-operational-box, .detail-box, .review-item, .module-hero, .eval-metric, .kpi-box, .dossier-kpi {
  border-radius: var(--r-card) !important;
}
.panel, .card, .metric, .kpi, .ca-card, .rs-card, .dash-kpi, .table-wrap, .package-kpi-card { border: 1px solid var(--line) !important; box-shadow: var(--shadow) !important; }
.module-hero { overflow: hidden; }
.modal-box { box-shadow: 0 20px 60px rgba(13, 43, 69, .25) !important; border: 0 !important; }
.pill, .tag, .badge, .role-pill, .fold-count, .rs-chip, .ca-now { border-radius: 999px !important; }
.role-pill { background: var(--teal-soft) !important; color: var(--accent-ink) !important; border: 0 !important; font-weight: 600 !important; padding: 4px 12px !important; }

/* Sin sombras "duras" desplazadas del estilo anterior */
.btn-primary:hover, .btn-secondary:hover, .btn-danger:hover, .btn-solid, .field, .form-field, .search, .item, .metric, .module-hero, .modal-box,
.wisdom-ux-chip, .message-card, .lane-card, .decision-card, .cta-band, .ux-summary-card, .ux-priority-card, .user-kpi, .teacher-kpi, .request-card, .session {
  box-shadow: var(--shadow) !important;
}
.field, .form-field, .search { box-shadow: none !important; }
.ux-priority-card, .ux-summary-card, .message-card, .lane-card, .decision-card, .request-card, .user-kpi, .teacher-kpi { border-radius: var(--r-card) !important; }
.btn-primary:hover { box-shadow: var(--shadow-btn) !important; }
.btn-secondary:hover, .btn-danger:hover { box-shadow: none !important; }

/* ---------- Campos ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea {
  border-radius: var(--r-field) !important; border: 1.5px solid var(--line) !important; min-height: 44px; background-color: #fff;
}
textarea { min-height: 88px; }
input:focus, select:focus, textarea:focus { outline: none !important; border-color: var(--accent) !important; box-shadow: 0 0 0 4px rgba(25, 182, 185, .18) !important; }

/* ---------- Menú lateral ---------- */
.sidebar { background: #fff !important; border-right: 1px solid var(--line) !important; }
.sidebar .logo img, aside .logo img { width: 150px !important; max-width: 100%; height: auto !important; filter: none !important; }
.sidebar .menu-title { font-weight: 600 !important; font-size: .82rem !important; color: var(--text) !important; min-height: 40px; display: flex; align-items: center; cursor: pointer; }
.sidebar .side-link { border-radius: 10px !important; font-size: .95rem !important; font-weight: 500 !important; min-height: 40px; display: flex; align-items: center; color: var(--navy) !important; }
.sidebar .side-link:hover { background: var(--bg) !important; }
.sidebar .side-link.active, .sidebar .side-link[aria-current="page"] { background: var(--teal-soft) !important; color: var(--accent-ink) !important; font-weight: 600 !important; }
.sidebar .user-box strong { font-weight: 700 !important; }
.sidebar .user-box small { font-size: .82rem !important; }
.menu-toggle-btn { border-radius: 12px !important; min-width: 44px; min-height: 44px; background: #fff !important; color: var(--navy) !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow) !important; }

/* ---------- Títulos grandes de las páginas antiguas ---------- */
main.main h1, .wrap h1, .topbar h1 { font-size: clamp(1.6rem, 3vw, 2.2rem) !important; }
@media (max-width: 700px) { main.main h1, .wrap h1 { font-size: 1.6rem !important; } }

/* ---------- Vista del estudiante: primero lo suyo (diseño etapa 2) ---------- */
html[data-role="student"] .staff-only { display: none !important; }

/* Un nombre o correo largo no debe estirar las tarjetas más que el título (celular) */
main.main [class*="grid"] > *, main.main .metrics > *, main.main .package-kpi-dashboard > * { min-width: 0; }
.card, .panel, .metric, .package-kpi-card, .module-hero, .ca-card { overflow-wrap: break-word; }

/* Menú lateral más legible en computador (pedido del CEO 2026-10-13: se veía muy pequeño) */
@media (min-width: 1024px) {
  .sidebar .side-link { font-size: 1.05rem !important; min-height: 44px; }
  .sidebar .menu-title { font-size: .92rem !important; }
  .sidebar .user-box strong { font-size: 1rem !important; }
  .sidebar .user-box small { font-size: .88rem !important; }
  .logout-btn { font-size: .98rem !important; }
}