@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root {
  --bg: #0f1117;
  --surface: #181c27;
  --surface2: #1e2334;
  --border: #2a3045;
  --accent: #4f8ef7;
  --accent2: #7c5cfc;
  --green: #22c55e;
  --green-bg: #0f2a1a;
  --red: #ef4444;
  --red-bg: #2a0f0f;
  --amber: #f59e0b;
  --amber-bg: #2a1f0a;
  --text: #e8eaf0;
  --text2: #9099b0;
  --radius: 10px;
  --shadow: 0 4px 24px rgba(0,0,0,0.4);
}
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:'DM Sans',sans-serif; background:var(--bg); color:var(--text); font-size:14px; }

.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:var(--radius); font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; border:none; transition:all 0.15s; white-space:nowrap; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:#3b7ce8; }
.btn-ghost { background:var(--surface2); color:var(--text); border:1px solid var(--border); }
.btn-ghost:hover { background:var(--border); }
.btn-danger { background:var(--red-bg); color:var(--red); border:1px solid #4a1515; }
.btn-danger:hover { background:#3a1010; }
.btn-green { background:var(--green-bg); color:var(--green); border:1px solid #0f3a1a; }
.btn-green:hover { background:#0a2015; }
.btn-amber { background:var(--amber-bg); color:var(--amber); border:1px solid #3a2a0a; }
.btn-sm { padding:5px 10px; font-size:12px; }

.form-group { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
label { font-size:12px; color:var(--text2); font-weight:500; }
input, select, textarea { background:var(--surface2); border:1px solid var(--border); border-radius:7px; padding:8px 10px; color:var(--text); font-family:inherit; font-size:13px; outline:none; transition:border 0.15s; width:100%; }
input:focus, select:focus { border-color:var(--accent); }

.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:100; align-items:center; justify-content:center; }
.modal-overlay.open { display:flex; }
.modal { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:28px; width:540px; max-width:95vw; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow); }
.modal h3 { font-size:18px; font-weight:700; margin-bottom:20px; }

.toast { position:fixed; bottom:24px; right:24px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 18px; font-size:13px; font-weight:500; box-shadow:var(--shadow); z-index:200; transform:translateY(80px); opacity:0; transition:all 0.3s; pointer-events:none; }
.toast.show { transform:translateY(0); opacity:1; }
.toast.success { border-color:var(--green); color:var(--green); }
.toast.info { border-color:var(--accent); color:var(--accent); }
.toast.error { border-color:var(--red); color:var(--red); }

.scroll-area { max-height:260px; overflow-y:auto; padding-right:4px; }
.scroll-area::-webkit-scrollbar { width:4px; }
.scroll-area::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

.tag { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; background:var(--surface2); color:var(--text2); }
.type-nacional { background:var(--red-bg); color:var(--red); }
.type-autonomico { background:var(--amber-bg); color:var(--amber); }
.type-local { background:#1a1f3a; color:#7c9fff; }
.type-vacaciones { background:#1a2a1a; color:var(--green); }

.empty-state { text-align:center; padding:60px 20px; color:var(--text2); }
.empty-state .icon { font-size:48px; margin-bottom:12px; }
.empty-state h3 { font-size:16px; font-weight:600; color:var(--text); margin-bottom:6px; }

.festivo-checkbox-row { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:7px; cursor:pointer; }
.festivo-checkbox-row:hover { background:var(--surface2); }
.festivo-checkbox-row input[type=checkbox] { width:15px; height:15px; accent-color:var(--green); cursor:pointer; padding:0; flex-shrink:0; }
.fcheck-date { font-family:'DM Mono',monospace; font-size:12px; color:var(--accent); min-width:88px; }