/* ====== Base / Paleta ====== */
:root{
  --bg: #f5f6f7;
  --surface: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --border: #e5e7eb;
  --primary: #1f5cff;
  --teal: #66c2c9;
  --accent: #50C7C7;
  --ok: #27ae60;
  --radius: 16px;
  --shadow: 0 20px 50px rgba(0,0,0,.12);

  --footer-bg: #78cfd4;
  --footer-bottom: #66c2c9;
}

*{box-sizing:border-box}
html,body{margin:0}
body{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color:var(--text); background:var(--bg)}

.wrap{width:min(1120px, 92%); margin-inline:auto}

/* Header */
.fa-header{position:sticky; top:0; background:#f7f8fb; border-bottom:1px solid var(--border); z-index:10}
.fa-header .wrap{display:grid; grid-template-columns:1fr minmax(280px, 520px) 1fr; align-items:center; gap:1rem; padding:.6rem 0}
.brand{display:inline-flex; align-items:center; gap:.6rem; color:inherit; text-decoration:none; padding:.2rem 0}
.brand .logo{display:block; height:44px; max-width:220px; width:auto; object-fit:contain; filter:drop-shadow(0 2px 3px rgba(0,0,0,.1))}
.search{display:flex; align-items:center; gap:.4rem; padding:.35rem; border:1px solid #dfe3ea; border-radius:999px; background:#fff}
.search input{flex:1; border:0; outline:0; padding:.4rem .6rem; border-radius:999px}
.search .icon{border:0; background:transparent; padding:.3rem .6rem; cursor:pointer}
.right{display:flex; justify-content:flex-end; align-items:center; gap:1rem; color:#374151}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border:1px solid #dfe3ea; background:#fff; padding:.7rem 1rem; border-radius:10px; cursor:pointer; text-decoration:none; color:#111; font-weight:600}
.btn.primary{background:var(--primary); color:#fff; border-color:transparent; box-shadow:0 8px 20px rgba(31,92,255,.25)}

/* Blobs decorativos */
.blobs{position:relative; height:0}
.blob{position:absolute; border-radius:50%; opacity:.25; z-index:0}
.blob.coral{width:360px; height:360px; background:#ff8c8c; top:420px; left:10%}
.blob.teal{width:420px; height:420px; background:#aee8e6; top:120px; right:8%}
.blob.yellow{width:180px; height:180px; background:#f6e58d; top:520px; right:20%}
.blob.blue{width:200px; height:200px; background:#7da0ff; top:640px; left:38%}

/* Page title */
.page-title{font-size:2.2rem; font-weight:800; margin:1.2rem 0}
.page-title .teals{color:var(--teal)}

/* Grid */
.calendar-page .grid{position:relative; z-index:1; display:grid; grid-template-columns: 320px 1fr; gap:1.2rem}

/* Sidebar */
.sidebar{align-self:start}
.profile{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:.6rem; display:flex; align-items:center; gap:.6rem; box-shadow:0 8px 24px rgba(0,0,0,.08)}
.avatar{width:42px; height:42px; border-radius:999px; background:linear-gradient(135deg, #7da0ff, #50C7C7)}
.name{font-weight:700}
.role{font-size:.85rem; color:var(--muted)}
.sub{margin:1rem 0 .6rem}
.cards{display:flex; flex-direction:column; gap:.8rem}
.act-card{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:1rem; box-shadow:0 10px 28px rgba(0,0,0,.08)}
.act-title{font-weight:700}
.act-date{color:var(--muted); font-size:.95rem}
.badge{display:inline-block; padding:.2rem .55rem; border-radius:999px; font-size:.8rem; border:1px solid #dfe3ea; color:#1f5132; background:#e9f5ee; margin-right:.4rem}
.badge.warn{color:#6b4e00; background:#fff6db}
.join{float:right}

/* Calendar card */
.cal-card{background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow); padding:1rem}
.cal-head{display:flex; align-items:center; justify-content:center; gap:1rem; padding:.4rem 0}
.cal-head .month{font-weight:700}
.nav{border:0; background:#f3f4f6; padding:.3rem .7rem; border-radius:8px; cursor:pointer}
.cal-grid{display:grid; grid-template-columns:repeat(7, 1fr); gap:.6rem; padding:.6rem}
.dow,.day{aspect-ratio:1/1; display:grid; place-items:center; border-radius:12px}
.dow{color:var(--muted)}
.day{background:#fafafa; border:1px solid #f0f0f0}
.day.event{background:#d0edf0; border-color:#b8e3e7; font-weight:700}
.day.today{outline:2px solid var(--primary)}

/* Footer */
.fa-footer{background:var(--footer-bg); color:#fff; border-top:1px solid rgba(255,255,255,.4); margin-top:2rem}
.fa-footer .foot-top{display:grid; grid-template-columns: 1fr 2fr; gap:1rem; padding:2rem 0}
.foot-brand{display:flex; align-items:center; gap:.6rem}
.foot-brand .logo{display:block; height:40px; width:auto}
.foot-links{display:grid; grid-template-columns: 1fr 1fr 1fr; gap:1rem}
.foot-links a{color:#fff; opacity:.95; text-decoration:none}
.fa-footer .foot-bottom{display:flex; align-items:center; justify-content:space-between; border-top:1px solid rgba(255,255,255,.35); padding:.6rem 0; background:var(--footer-bottom)}
.fa-footer .legal{display:flex; gap:1rem}
.fa-footer .legal a{color:#fff; opacity:.95; text-decoration:none}

@media (max-width: 980px){
  .calendar-page .grid{grid-template-columns:1fr}
  .blobs{display:none}
}