/* Wisdom Academy — estilos de las páginas personales (Mis horas, Mi cuenta, Permisos) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=JetBrains+Mono:wght@400;700&display=swap');
:root { --bg:#F5F6F4; --white:#FFFFFF; --primary:#0B2239; --accent:#19B6B9; --text:#5F6E7A; --line:#D8E2E8; --yellow:#E6FF00; --danger:#C23434; --ok:#257a36; --warn:#B8620B; --font-sans:'Inter', Arial, sans-serif; --font-mono:'JetBrains Mono', monospace; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--primary); font-family:var(--font-sans); line-height:1.5; }
.wrap { max-width:1100px; margin:0 auto; padding:32px 20px 60px; }
.top { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.crumb, .meta { font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text); }
.crumb a { color:var(--text); }
h1 { font-size:2rem; font-weight:900; margin:6px 0 4px; text-transform:uppercase; }
h2 { font-size:1rem; font-weight:900; text-transform:uppercase; margin:28px 0 10px; }
.sub { color:var(--text); margin:0; max-width:65ch; }
.filters { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
select, input, textarea { font:inherit; font-size:.9rem; border:1px solid var(--line); padding:8px 10px; background:var(--white); color:var(--primary); }
button { font:inherit; font-weight:800; font-size:.8rem; text-transform:uppercase; padding:10px 16px; border:0; background:var(--accent); color:var(--primary); cursor:pointer; }
button.secondary { background:var(--white); color:var(--primary); border:1px solid var(--primary); }
button:focus-visible, select:focus-visible, a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
.kpi { background:var(--white); border:1px solid var(--line); padding:16px; }
.kpi span { display:block; font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text); }
.kpi b { display:block; font-size:1.6rem; font-weight:900; font-variant-numeric:tabular-nums; margin-top:4px; }
.kpi.alert b { color:var(--danger); }
.note { margin-top:12px; font-size:.85rem; color:var(--text); border-left:3px solid var(--accent); padding:6px 12px; background:var(--white); }
.table-wrap { overflow-x:auto; background:var(--white); border:1px solid var(--line); }
table { width:100%; border-collapse:collapse; font-size:.9rem; min-width:520px; }
th, td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text); }
tr:last-child td { border-bottom:0; }
.num { text-align:right; font-variant-numeric:tabular-nums; }
.empty { color:var(--text); text-align:center; padding:24px; }
.card { background:var(--white); border:1px solid var(--line); padding:18px; margin-bottom:12px; }
.card h3 { margin:0 0 4px; font-size:1.05rem; }
.bar { height:8px; background:var(--line); margin:10px 0 6px; }
.bar i { display:block; height:100%; background:var(--accent); }
.pill { display:inline-block; font-family:var(--font-mono); font-size:.66rem; font-weight:700; text-transform:uppercase; padding:3px 8px; border:1px solid var(--line); }
.pill.ok { color:var(--ok); border-color:var(--ok); } .pill.warn { color:var(--warn); border-color:var(--warn); } .pill.bad { color:var(--danger); border-color:var(--danger); }
.toast { position:fixed; bottom:20px; right:20px; background:var(--primary); color:#fff; padding:10px 14px; font-weight:700; font-size:.85rem; display:none; }
@media (max-width:640px) { h1 { font-size:1.5rem; } }