/* public/css/app.css */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --blue:#185FA5;--blue-mid:#378ADD;--blue-light:#E6F1FB;--blue-dark:#0C447C;
  --teal:#0F6E56;--teal-mid:#1D9E75;--teal-light:#E1F5EE;
  --amber:#854F0B;--amber-mid:#BA7517;--amber-light:#FAEEDA;
  --coral:#993C1D;--coral-mid:#D85A30;--coral-light:#FAECE7;
  --green-mid:#639922;--green-light:#EAF3DE;
  --red-light:#FCEBEB;--red-dark:#A32D2D;
  --gray-50:#F8F9FA;--gray-100:#F1EFE8;--gray-200:#D3D1C7;--gray-600:#5F5E5A;
  --text:#1a1a1a;--sub:#6b6b6b;--border:rgba(0,0,0,0.1);--radius:8px;--radius-lg:12px;
}
body { font-family:-apple-system,'Segoe UI',sans-serif; background:var(--gray-100); color:var(--text); font-size:14px; line-height:1.5; }

/* Layout */
.app { display:flex; height:100vh; overflow:hidden; }
.sidebar { width:220px;min-width:220px;background:#fff;border-right:0.5px solid var(--border);display:flex;flex-direction:column; }
.logo-area { padding:20px 16px 14px;border-bottom:0.5px solid var(--border); }
.logo { font-size:15px;font-weight:600;color:var(--blue); }
.logo small { display:block;font-size:11px;color:var(--sub);font-weight:400;margin-top:2px; }
.role-area { padding:10px 12px;border-bottom:0.5px solid var(--border); }
.role-label { font-size:10px;color:var(--sub);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px; }
.role-select { width:100%;padding:6px 8px;font-size:12px;border:0.5px solid var(--border);border-radius:var(--radius);background:var(--gray-50);cursor:pointer;color:var(--text); }
.nav { flex:1;padding:10px 8px;display:flex;flex-direction:column;gap:2px; }
.nav-item { display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--radius);cursor:pointer;font-size:13px;color:var(--sub);background:none;border:none;width:100%;text-align:left;transition:background .12s,color .12s; }
.nav-item:hover { background:var(--gray-50);color:var(--text); }
.nav-item.active { background:var(--blue-light);color:var(--blue);font-weight:500; }
.main { flex:1;display:flex;flex-direction:column;overflow:hidden; }
.topbar { padding:13px 24px;background:#fff;border-bottom:0.5px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px; }
.topbar-left { display:flex;align-items:center;gap:12px; }
.topbar-title { font-size:16px;font-weight:500; }
.content { flex:1;overflow-y:auto;padding:20px 24px; }

/* Metrics */
.metrics { display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px; }
.metric { background:#fff;border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px; }
.metric-label { font-size:11px;color:var(--sub);margin-bottom:6px; }
.metric-val { font-size:22px;font-weight:500; }

/* Panel */
.panel { background:#fff;border:0.5px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:16px; }
.panel-head { padding:13px 16px;border-bottom:0.5px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px; }
.panel-title { font-size:13px;font-weight:500; }

/* Table */
.tbl-wrap { overflow-x:auto; }
table { width:100%;border-collapse:collapse;font-size:13px; }
th { padding:10px 14px;text-align:left;color:var(--sub);font-weight:400;font-size:11px;border-bottom:0.5px solid var(--border);white-space:nowrap; }
td { padding:11px 14px;border-bottom:0.5px solid var(--border);vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:var(--gray-50); }
.tbl-empty { text-align:center;color:var(--sub);padding:32px;font-size:13px; }

/* Avatar */
.av { width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:500;flex-shrink:0; }
.av-blue  { background:var(--blue-light);color:var(--blue); }
.av-teal  { background:var(--teal-light);color:var(--teal); }
.av-coral { background:var(--coral-light);color:var(--coral); }
.av-amber { background:var(--amber-light);color:var(--amber); }
.flex-row { display:flex;align-items:center;gap:8px; }

/* Badges */
.badge { display:inline-flex;align-items:center;padding:3px 8px;border-radius:99px;font-size:10px;font-weight:500;white-space:nowrap; }
.badge-blue   { background:var(--blue-light);color:var(--blue); }
.badge-teal   { background:var(--teal-light);color:var(--teal); }
.badge-amber  { background:var(--amber-light);color:var(--amber); }
.badge-coral  { background:var(--coral-light);color:var(--coral); }
.badge-red    { background:var(--red-light);color:var(--red-dark); }
.badge-green  { background:var(--green-light);color:#3B6D11; }

/* Buttons */
.btn { padding:7px 14px;border-radius:var(--radius);font-size:12px;font-weight:500;cursor:pointer;border:0.5px solid var(--border);background:#fff;color:var(--text);transition:background .12s;white-space:nowrap;display:inline-flex;align-items:center;gap:5px; }
.btn:hover { background:var(--gray-50); }
.btn-primary { background:var(--blue);color:#fff;border-color:var(--blue); }
.btn-primary:hover { background:var(--blue-mid); }
.btn-danger { background:var(--coral-light);color:var(--coral);border-color:transparent; }
.btn-danger:hover { background:#f5c4b3; }
.btn-sm { padding:5px 10px;font-size:11px; }

/* Inputs */
.search-input { padding:7px 10px;border:0.5px solid var(--border);border-radius:var(--radius);font-size:12px;background:var(--gray-50);color:var(--text);width:220px; }
.search-input:focus { outline:none;border-color:var(--blue-mid);background:#fff; }
select.filter-sel { padding:7px 10px;border:0.5px solid var(--border);border-radius:var(--radius);font-size:12px;background:var(--gray-50);color:var(--text);cursor:pointer; }

/* Modal */
.modal-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,0.35);z-index:100;align-items:center;justify-content:center;padding:20px; }
.modal-overlay.open { display:flex; }
.modal { background:#fff;border-radius:var(--radius-lg);width:100%;max-width:680px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 8px 32px rgba(0,0,0,0.16); }
.modal-head { padding:16px 20px;border-bottom:0.5px solid var(--border);display:flex;align-items:center;justify-content:space-between; }
.modal-title { font-size:14px;font-weight:500; }
.modal-body { padding:20px;overflow-y:auto;flex:1; }
.modal-foot { padding:14px 20px;border-top:0.5px solid var(--border);display:flex;align-items:center;justify-content:flex-end;gap:8px; }

/* Form */
.form-section { margin-bottom:20px; }
.form-section-title { font-size:11px;font-weight:500;color:var(--sub);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;padding-bottom:8px;border-bottom:0.5px solid var(--border); }
.form-grid { display:grid;gap:12px; }
.form-grid-2 { grid-template-columns:1fr 1fr; }
.form-grid-3 { grid-template-columns:1fr 1fr 1fr; }
.form-group { display:flex;flex-direction:column;gap:5px; }
.form-group.span2 { grid-column:span 2; }
.form-group.span3 { grid-column:span 3; }
label { font-size:11px;color:var(--sub);font-weight:500; }
label .req { color:var(--coral-mid); }
input[type=text],input[type=date],input[type=time],input[type=email],input[type=tel],input[type=number],input[type=color],select.form-select,textarea { padding:8px 10px;border:0.5px solid var(--border);border-radius:var(--radius);font-size:13px;color:var(--text);background:var(--gray-50);width:100%;transition:border-color .12s,background .12s; }
input:focus,select.form-select:focus,textarea:focus { outline:none;border-color:var(--blue-mid);background:#fff; }
.field-error { font-size:10px;color:var(--coral-mid); }
textarea { resize:vertical;min-height:60px; }

/* Toast */
#toast-container { position:fixed;bottom:20px;right:20px;z-index:999;display:flex;flex-direction:column;gap:8px; }
.toast { padding:10px 16px;border-radius:var(--radius);font-size:13px;color:#fff;animation:slideIn .2s ease; }
.toast-success { background:var(--teal); }
.toast-error   { background:var(--coral); }
@keyframes slideIn { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }

/* Spinner */
.spinner { width:18px;height:18px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* Sections */
.section { display:none; }
.section.active { display:block; }
.coming-soon { display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;gap:12px;color:var(--sub); }
.coming-soon svg { opacity:.3; }

/* ── AGENDA ─────────────────────────────────── */
.agenda-nav { display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap; }
.agenda-date-wrap { display:flex;align-items:center;gap:8px;flex:1; }
.agenda-date-inp { padding:6px 10px;border:0.5px solid var(--border);border-radius:var(--radius);font-size:12px;background:var(--gray-50);color:var(--text);width:150px; }

.agenda-cols { display:flex;gap:12px;overflow-x:auto;align-items:flex-start;padding-bottom:12px; }

.agenda-col { min-width:260px;max-width:320px;flex:1;background:#fff;border:0.5px solid var(--border);border-radius:var(--radius-lg);overflow:hidden; }
.agenda-col-header { padding:12px 14px;border-bottom:0.5px solid var(--border);display:flex;align-items:center;gap:8px;background:#fff; }

.agenda-slots { max-height:calc(100vh - 260px);overflow-y:auto; }
.agenda-row { display:grid;grid-template-columns:48px 1fr;border-bottom:0.5px solid var(--border); }
.agenda-row:last-child { border-bottom:none; }
.agenda-hora { font-size:10px;color:var(--sub);padding:8px 8px;border-right:0.5px solid var(--border);display:flex;align-items:flex-start;padding-top:10px;background:var(--gray-50); }
.agenda-slot { padding:5px 8px;min-height:44px;display:flex;align-items:stretch; }

.slot-card { background:var(--blue-light);border-left:3px solid var(--blue-mid);border-radius:4px;padding:6px 8px;font-size:11px;flex:1;display:flex;flex-direction:column;gap:3px;cursor:default; }
.slot-name { font-weight:500;font-size:11px;color:var(--text); }
.slot-info { font-size:10px;color:var(--sub); }
.slot-footer { display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:2px; }
.slot-badge { font-size:9px;padding:1px 5px;border-radius:99px;font-weight:500; }
.slot-actions { display:flex;gap:4px;margin-top:3px; }

.slot-empty { flex:1;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--gray-200);cursor:pointer;border-radius:4px;transition:all .15s;min-height:36px; }
.slot-empty:hover { background:var(--blue-light);color:var(--blue); }

@media (max-width:700px) {
  .metrics { grid-template-columns:1fr 1fr; }
  .form-grid-2,.form-grid-3 { grid-template-columns:1fr; }
  .form-group.span2,.form-group.span3 { grid-column:span 1; }
  .sidebar { width:52px;min-width:52px; }
  .logo small,.role-area,.nav-item span { display:none; }
  .agenda-col { min-width:220px; }
}