:root { --bg:#f7f7fb; --fg:#1a1a1a; --muted:#6b7280; --accent:#2563eb; --ok:#16a34a; --err:#dc2626; }
*{ box-sizing:border-box; }
body{ margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--fg); background:var(--bg); }
.container{ max-width:1100px; margin:0 auto; padding:16px; }
.header{ background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.06); }
.header .brand{ text-decoration:none; color:#111; font-weight:600; }
.header .container{ display:flex; align-items:center; justify-content:space-between; }
.nav a{ color:#111; text-decoration:none; }
h2{ margin:18px 0; }
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:12px; }
.grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin:16px 0; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:16px 0; }
.grid-1{ display:grid; grid-template-columns:1fr; gap:16px; margin:16px 0; }
@media (max-width: 800px){ .grid,.grid-3,.grid-2{ grid-template-columns:1fr; } }
label{ display:block; font-size:14px; color:var(--muted); margin-bottom:6px; }
input[type=text],input[type=date],input[type=email],input[type=number],select{
  width:100%; padding:10px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; font-size:14px;
}
.actions{ display:flex; gap:10px; margin-top:12px; }
button,.btn-secondary,.button{ padding:10px 14px; border-radius:8px; border:none; cursor:pointer; text-decoration:none; display:inline-block; }
button{ background:var(--accent); color:#fff; }
.button{ background:#e5e7eb; color:#111; }
.button.primary, button.primary{ background: var(--accent); color:#fff; }
.button.disabled{ background:#e5e7eb; color:#6b7280; cursor:not-allowed; }
.btn-secondary{ background:#e5e7eb; color:#111; }
.alert{ padding:10px 12px; border-radius:8px; margin:8px 0; }
.alert-error{ background:#fee2e2; color:#7f1d1d; }
.alert-ok{ background:#dcfce7; color:#14532d; }
.summary,.table{ width:100%; background:#fff; border:1px solid #e5e7eb; border-radius:8px; overflow:hidden; }
.summary th,.summary td,.table th,.table td{ padding:10px; border-bottom:1px solid #f1f5f9; text-align:left; font-size:14px; }
.cards{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width: 800px){ .cards{ grid-template-columns:1fr; } }
.card{ background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:14px; }
.card-header{ display:flex; justify-content:space-between; align-items:center; }
.badge{ padding:4px 8px; border-radius:999px; font-size:12px; }
.badge.active{ background:#dcfce7; color:#065f46; }
.badge.pending{ background:#fef9c3; color:#854d0e; }
.badge.done{ background:#fee2e2; color:#7f1d1d; }
.muted{ color:var(--muted); }
.hidden{ display:none; }
.fieldset{ border:1px dashed #d1d5db; padding:12px; border-radius:8px; margin:12px 0; background:#fff; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.chip{ background:#f1f5f9; padding:6px 10px; border-radius:999px; }

/* --- Dashboard cards & charts --- */
.dashboard-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
.chart-card, .stat-card{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:12px; display:flex; flex-direction:column; }
.chart-card header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.chart-card header h4{ margin:0; font-size:14px; color:#374151; }
.chart-card .canvas-wrap{ position:relative; width:100%; height:240px; }
.chart-card.expanded .canvas-wrap{ height:460px; }
.chart-card button.expand{ background:#eef2ff; color:#312e81; border:none; padding:6px 10px; border-radius:8px; cursor:pointer; font-size:12px; }
.stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:12px 0; }
.stat-card h3{ margin:0; font-size:13px; color:#6b7280; }
.stat-card .value{ font-size:22px; font-weight:700; margin-top:4px; }


/* Normalización de mayúsculas/minúsculas en inputs */
input:not([type="email"]):not([type="date"]):not([type="number"]):not([type="password"]), textarea { text-transform: uppercase; }
input[type="email"] { text-transform: lowercase; }