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

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

:root {
  --co-yellow: #FFD700;
  --co-blue:   #003087;
  --co-red:    #CE1126;
  --gold:      #C8960C;
  --bg:        #FFFDF5;
  --bg2:       #FFF8E1;
  --bg3:       #FFF3CD;
  --white:     #ffffff;
  --text:      #1a1a2e;
  --text2:     #4a4a6a;
  --border:    #E8D97A;
  --shadow:    0 2px 12px rgba(0,48,135,0.10);
  --shadow-lg: 0 6px 32px rgba(0,48,135,0.13);
  --radius:    12px;
  --sidebar:   220px;
}

body {
  font-family: 'Nunito', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

/* OVERLAY */
.overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.45); z-index: 100;
  align-items: center; justify-content: center;
}
.overlay.active { display: flex; }

.modal {
  background: var(--white); border-radius: 18px;
  padding: 36px 32px; width: 100%; max-width: 480px;
  box-shadow: var(--shadow-lg); position: relative;
  animation: popIn .22s ease; border-top: 5px solid var(--co-yellow);
  max-height: 90vh; overflow-y: auto;
}
@keyframes popIn {
  from { transform: scale(.93) translateY(10px); opacity:0; }
  to   { transform: scale(1)   translateY(0);    opacity:1; }
}
.modal h2 { font-family:'Pirata One',cursive; font-size:1.7rem; color:var(--co-blue); margin-bottom:6px; }
.modal p.sub { color:var(--text2); font-size:.9rem; margin-bottom:20px; }
.modal .close-btn { position:absolute; top:14px; right:16px; background:none; border:none; font-size:1.4rem; cursor:pointer; color:var(--text2); }
.modal label { display:block; font-weight:700; font-size:.85rem; margin-bottom:4px; color:var(--co-blue); }
.modal input, .modal textarea, .modal select {
  width:100%; padding:10px 14px; border:2px solid var(--border); border-radius:8px;
  font-family:'Nunito',sans-serif; font-size:.95rem; background:var(--bg);
  color:var(--text); margin-bottom:14px; transition:border-color .2s;
}
.modal input:focus, .modal textarea:focus, .modal select:focus { outline:none; border-color:var(--co-blue); }
.modal textarea { resize:vertical; min-height:90px; }

/* BUTTONS */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 20px; border-radius:8px; border:none;
  font-family:'Nunito',sans-serif; font-weight:700;
  font-size:.9rem; cursor:pointer; transition:all .2s; text-decoration:none;
}
.btn-primary { background:var(--co-blue); color:var(--white); }
.btn-primary:hover { background:#002060; transform:translateY(-1px); }
.btn-yellow  { background:var(--co-yellow); color:var(--text); }
.btn-yellow:hover { background:var(--gold); }
.btn-red     { background:var(--co-red); color:var(--white); }
.btn-red:hover { background:#a30e1e; }
.btn-outline { background:transparent; border:2px solid var(--co-blue); color:var(--co-blue); }
.btn-outline:hover { background:var(--co-blue); color:var(--white); }
.btn-full    { width:100%; justify-content:center; }
.btn-sm      { padding:6px 14px; font-size:.8rem; }
.btn-ghost   { background:transparent; color:var(--text2); border:none; }
.btn-ghost:hover { color:var(--co-blue); background:var(--bg2); border-radius:8px; }

/* HEADER */
header {
  position:fixed; top:0; left:0; right:0; z-index:50; height:64px;
  background:var(--white); border-bottom:3px solid var(--co-yellow);
  display:flex; align-items:center; padding:0 20px;
  box-shadow:0 2px 8px rgba(0,48,135,0.08); gap:16px;
}
.header-logo { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.header-logo svg { width:44px; height:44px; }
.logo-text { font-family:'Pirata One',cursive; font-size:1.4rem; color:var(--co-blue); }
.logo-text span { color:var(--co-red); }
.header-search { flex:1; max-width:400px; position:relative; }
.header-search input {
  width:100%; padding:8px 16px 8px 36px; border:2px solid var(--border);
  border-radius:30px; font-family:'Nunito',sans-serif; font-size:.9rem;
  background:var(--bg2); color:var(--text);
}
.header-search input:focus { outline:none; border-color:var(--co-blue); }
.search-icon { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--text2); }
.header-right { margin-left:auto; display:flex; align-items:center; gap:10px; }

/* LAYOUT */
.layout { display:flex; margin-top:64px; min-height:calc(100vh - 64px); }

/* SIDEBAR */
aside {
  width:var(--sidebar); flex-shrink:0; position:fixed;
  top:64px; left:0; bottom:0; overflow-y:auto;
  background:var(--white); border-right:2px solid var(--border);
  padding:20px 12px; display:flex; flex-direction:column; gap:4px;
}
.nav-label { font-size:.72rem; font-weight:800; color:var(--co-blue); letter-spacing:.08em; padding:12px 10px 4px; text-transform:uppercase; }
.nav-item {
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px;
  cursor:pointer; font-weight:600; font-size:.9rem; color:var(--text2);
  border:none; background:none; width:100%; text-align:left; transition:all .18s;
}
.nav-item:hover, .nav-item.active { background:var(--bg3); color:var(--co-blue); }
.nav-item.active { font-weight:800; }
.nav-icon { font-size:1.1rem; width:22px; text-align:center; }
.sidebar-footer { margin-top:auto; padding-top:16px; border-top:2px solid var(--border); }

/* MAIN */
main { margin-left:var(--sidebar); flex:1; padding:28px 24px; max-width:860px; }

/* PAGE HEADER */
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.page-title { font-family:'Pirata One',cursive; font-size:1.8rem; color:var(--co-blue); }
.page-title span { color:var(--co-red); }

/* TABS */
.tabs { display:flex; gap:6px; background:var(--bg2); border-radius:10px; padding:4px; margin-bottom:20px; border:2px solid var(--border); }
.tab { flex:1; padding:8px 12px; border-radius:7px; font-weight:700; font-size:.85rem; cursor:pointer; border:none; background:none; color:var(--text2); transition:all .2s; }
.tab.active { background:var(--white); color:var(--co-blue); box-shadow:var(--shadow); }

/* CARDS */
.card { background:var(--white); border-radius:var(--radius); border:2px solid var(--border); box-shadow:var(--shadow); overflow:hidden; margin-bottom:16px; transition:box-shadow .2s; }
.card:hover { box-shadow:var(--shadow-lg); }

/* POST CARD */
.post-card { padding:20px 22px; }
.post-meta { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.post-avatar { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.95rem; color:white; flex-shrink:0; }
.post-author { font-weight:700; color:var(--co-blue); font-size:.9rem; }
.post-date   { font-size:.78rem; color:var(--text2); }
.post-category { margin-left:auto; font-size:.75rem; font-weight:700; padding:3px 10px; border-radius:20px; background:var(--bg3); color:var(--gold); border:1px solid var(--border); }
.post-title  { font-size:1.05rem; font-weight:800; color:var(--text); margin-bottom:8px; }
.post-body   { color:var(--text2); font-size:.9rem; line-height:1.6; margin-bottom:14px; }
.post-img    { width:100%; max-height:260px; object-fit:cover; border-radius:8px; margin-bottom:14px; border:2px solid var(--border); }
.post-footer { display:flex; align-items:center; gap:10px; padding-top:12px; border-top:1px solid var(--border); }
.post-action {
  display:flex; align-items:center; gap:5px; color:var(--text2);
  font-size:.85rem; font-weight:600; cursor:pointer; padding:5px 10px;
  border-radius:8px; border:none; background:none; transition:all .18s;
}
.post-action:hover { background:var(--bg2); color:var(--co-blue); }
.post-action.liked { color:var(--co-red); }

/* LINK BOX */
.link-box {
  background:var(--bg2); border:2px solid var(--border); border-radius:10px;
  padding:14px; margin-bottom:14px; display:flex; align-items:center; gap:12px;
}

/* COMPOSE */
.compose-box { background:var(--white); border:2px solid var(--border); border-radius:var(--radius); padding:18px 20px; margin-bottom:20px; box-shadow:var(--shadow); }
.compose-row { display:flex; align-items:center; gap:12px; }
.compose-input { flex:1; padding:11px 16px; border:2px solid var(--border); border-radius:30px; font-family:'Nunito',sans-serif; font-size:.9rem; background:var(--bg2); color:var(--text); cursor:pointer; }
.compose-input:focus { outline:none; border-color:var(--co-blue); }
.compose-actions { display:flex; gap:6px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
.compose-apodo { font-size:.8rem; color:var(--text2); font-weight:700; padding:6px 12px; background:var(--bg3); border-radius:20px; border:1px solid var(--border); }

/* APODO BADGE */
.apodo-badge {
  display:flex; align-items:center; gap:8px; padding:8px 14px;
  background:var(--bg3); border:2px solid var(--border); border-radius:30px;
  font-size:.85rem; font-weight:700; color:var(--co-blue); cursor:pointer;
  transition:all .2s;
}
.apodo-badge:hover { background:var(--co-yellow); border-color:var(--gold); color:var(--text); }

/* DONATIONS */
.donation-hero {
  background:linear-gradient(135deg,var(--co-blue) 0%,#001850 100%);
  border-radius:var(--radius); padding:36px 32px; text-align:center;
  margin-bottom:20px; border:3px solid var(--co-yellow); position:relative; overflow:hidden;
}
.donation-hero::before { content:'⚓'; position:absolute; font-size:8rem; opacity:.06; right:-20px; bottom:-20px; }
.donation-hero h2 { font-family:'Pirata One',cursive; font-size:2rem; color:var(--co-yellow); margin-bottom:10px; }
.donation-hero p  { color:#c8d8ff; font-size:1rem; margin-bottom:24px; max-width:420px; margin-left:auto; margin-right:auto; }
.donation-progress { background:rgba(255,255,255,.15); border-radius:30px; height:12px; margin-bottom:8px; overflow:hidden; }
.donation-bar { height:100%; background:var(--co-yellow); border-radius:30px; width:63%; }
.donation-stats { color:#c8d8ff; font-size:.85rem; }

/* ALERTS */
.alert { padding:12px 16px; border-radius:10px; margin-bottom:14px; font-size:.88rem; font-weight:600; display:flex; gap:8px; align-items:center; }
.alert-info    { background:#e8f0ff; color:var(--co-blue); border:1px solid #b3c6f5; }
.alert-warning { background:#fff8e1; color:#856404; border:1px solid var(--border); }

/* NOTIFICATIONS */
.notif-item { display:flex; gap:12px; padding:14px 18px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .15s; }
.notif-item:hover  { background:var(--bg2); }
.notif-item.unread { background:#f0f4ff; }
.notif-icon { font-size:1.2rem; width:36px; height:36px; border-radius:50%; background:var(--bg2); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.notif-text { font-size:.87rem; color:var(--text); flex:1; }
.notif-time { font-size:.75rem; color:var(--text2); }

/* DIVIDER */
.section-divider { display:flex; align-items:center; gap:12px; margin:22px 0; }
.section-divider::before, .section-divider::after { content:''; flex:1; height:2px; background:var(--border); }
.section-divider span { font-family:'Pirata One',cursive; font-size:.95rem; color:var(--gold); }

/* TOAST */
#toast {
  position:fixed; bottom:24px; right:24px; z-index:999;
  background:var(--co-blue); color:white; padding:12px 20px; border-radius:10px;
  font-weight:700; font-size:.9rem; box-shadow:var(--shadow-lg);
  transform:translateY(60px); opacity:0; transition:all .3s;
  border-left:4px solid var(--co-yellow);
}
#toast.show { transform:translateY(0); opacity:1; }

/* SCROLLBAR */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg2); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }

/* EMPTY STATE */
.empty-state { text-align:center; padding:60px 20px; color:var(--text2); }
.empty-state .empty-icon { font-size:3.5rem; margin-bottom:12px; }
.empty-state h3 { font-family:'Pirata One',cursive; color:var(--co-blue); font-size:1.4rem; margin-bottom:8px; }

/* DONOR CARDS */
.donor-card { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border); }
.donor-card:last-child { border-bottom:none; }
.donor-rank { font-family:'Pirata One',cursive; font-size:1.1rem; color:var(--gold); width:28px; text-align:center; }
.donor-info { flex:1; }
.donor-name { font-weight:700; font-size:.9rem; }
.donor-amount { font-size:.82rem; color:var(--co-blue); font-weight:700; }

/* RESPONSIVE */
@media (max-width:680px) {
  aside { width:54px; padding:16px 6px; }
  .nav-item span:not(.nav-icon) { display:none; }
  .nav-label { display:none; }
  main { margin-left:54px; padding:16px 12px; }
  .logo-text { display:none; }
  .header-search { display:none; }
  .donation-hero { padding:24px 16px; }
}