:root {
  --bg:#0f172a;
  --card:#111827;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --accent:#38bdf8;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background:#0b1220;
  color:var(--text);
}

a { color: var(--accent); text-decoration: none; }

.topbar {
  display:flex; gap:1rem; align-items:center; justify-content:space-between;
  padding:12px 16px;
  background: linear-gradient(90deg,#0ea5e9,#22d3ee);
  color:#0b1220; font-weight:700;
}
.topbar nav a { color:#0b1220; margin-left:12px; font-weight:600; }
.topbar nav a:hover { text-decoration: underline; }

.container { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
.container.narrow { max-width: 520px; }

h1,h2,h3 { color:#e2e8f0; }

.cards {
  display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap:16px; margin:16px 0;
}
.card {
  background:#0b1220; border:1px solid #1f2937; border-radius:12px;
  padding:16px; display:block; transition: border-color .15s ease, transform .15s ease;
}
.card:hover { border-color:#0ea5e9; transform: translateY(-1px); }

.info {
  background:#0b1220; border:1px solid #1f2937; border-radius:12px; padding:16px;
}

.grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:12px; }

label { display:flex; flex-direction:column; font-size:.95rem; color:var(--muted); }

input, select, textarea {
  background:#0b1220; color:var(--text);
  border:1px solid #1f2937; border-radius:10px; padding:10px;
}
input::placeholder, textarea::placeholder { color:#64748b; }

table { width:100%; border-collapse:collapse; margin-top:12px; }
th, td { border-bottom:1px solid #1f2937; text-align:left; padding:8px; }

.btn {
  display:inline-block; background:var(--accent); color:#0b1220;
  padding:10px 14px; border-radius:10px; font-weight:700; border:none; cursor:pointer;
}
.btn:hover { filter: brightness(1.05); }

.alert {
  padding:10px 12px; border-radius:10px; background:#0b1220;
  border:1px solid #1f2937; margin:10px 0;
}
.alert.success { border-color:#16a34a; }

/* --- Tabs (pestañas) --- */
.tabs { margin-top: 8px; }
.tabs > input[type="radio"] { display:none; }
.tabs > label {
  padding:10px 12px; margin-right:6px; background:#0b1220;
  border:1px solid #1f2937; border-radius:10px 10px 0 0; cursor:pointer;
}

/* Ocultar contenidos por defecto */
.tabs > #content1, .tabs > #content2, .tabs > #content3, .tabs > #content4 {
  display:none; padding:16px; border:1px solid #1f2937;
  border-radius:0 10px 10px 10px; margin-top:-1px;
}

/* Mostrar contenido según pestaña activa (compatibilidad tab1..tab4 y t1..t4) */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#t1:checked   ~ #content1,
#t2:checked   ~ #content2,
#t3:checked   ~ #content3,
#t4:checked   ~ #content4 { display:block; }

/* Estilo del label activo (input inmediatamente anterior al label) */
#tab1:checked + label, #t1:checked + label,
#tab2:checked + label, #t2:checked + label,
#tab3:checked + label, #t3:checked + label,
#tab4:checked + label, #t4:checked + label {
  background:#0b1220; border-bottom-color:transparent; color:#e2e8f0;
}

/* Dialogs y calendario */
dialog {
  border:1px solid #1f2937; border-radius:12px;
  background:#0b1220; color:var(--text); padding:16px;
}
#calendar {
  background:#0b1220; border:1px solid #1f2937;
  border-radius:12px; padding:8px; margin-top:12px;
}

/* Utilidades */
.muted { color: var(--muted); font-size:.9rem; }

/* Responsive móvil */
@media (max-width: 640px){
  .filters { flex-direction: column; align-items: stretch; gap: .5rem; }
  dialog form { min-width: auto; width: 95vw; }
  dialog .grid { grid-template-columns: 1fr !important; }
  .fc .fc-toolbar.fc-header-toolbar { flex-wrap: wrap; row-gap: .25rem; }
  .fc .fc-toolbar-title { font-size: 1rem; }
}