/* =====================================================
   MediFlow · CSS principal · Día 1
   Fuentes: Sora (UI) + Lora (marca)
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600&family=Lora:ital,wght@0,400;1,400&display=swap');

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

:root {
  --bg:      #F4F2EC;
  --s:       #FFFFFF;
  --s2:      #F9F8F4;
  --b:       #E2DFD6;
  --b2:      #CCCAC0;
  --t:       #1A1916;
  --t2:      #6B6960;
  --t3:      #9E9C93;
  --sid:     #0A1F18;
  --acc:     #1D9E75;
  --acc-dk:  #0F6E56;
  --acc-lt:  #E1F5EE;
  --acc-md:  #9FE1CB;
  --amb:     #BA7517;
  --amb-lt:  #FAEEDA;
  --dan:     #A32D2D;
  --dan-lt:  #FCEBEB;
  --inf:     #185FA5;
  --inf-lt:  #E6F1FB;
  --pur-lt:  #EEEDFE;
  --pur:     #3C3489;
  --r:       8px;
  --rl:      12px;
}

html { font-size: 14px; }
body { font-family: 'Sora', sans-serif; background: var(--bg); color: var(--t); line-height: 1.55; }
a    { text-decoration: none; color: inherit; }
textarea { font-family: inherit; }
button   { font-family: inherit; }

/* ── Shell layout ────────────────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
  background: var(--sid);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto;
  transition: transform .25s ease;
}
.logo {
  display: flex; align-items: center; gap: 10px;
  padding: 22px 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.logo-cross {
  width: 30px; height: 30px; border-radius: 7px;
  background: var(--acc); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 300; flex-shrink: 0;
}
.logo-name { font-family: 'Lora', serif; font-size: 16px; color: var(--acc-md); }
.logo-sub  { font-size: 9px; color: rgba(255,255,255,0.28); text-transform: uppercase; letter-spacing: .1em; margin-top: 2px; }

.nav { display: flex; flex-direction: column; flex: 1; padding: 12px 8px; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: var(--r);
  color: rgba(255,255,255,0.45); font-size: 13px;
  transition: all .13s;
}
.nav-item:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85); }
.nav-item.active { background: rgba(29,158,117,0.18); color: var(--acc-md); }
.nav-item svg { flex-shrink: 0; }
.nav-soon { opacity: .5; cursor: default; pointer-events: none; }
.soon-badge {
  margin-left: auto; font-size: 9px; background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.4); padding: 2px 6px; border-radius: 10px;
  text-transform: uppercase; letter-spacing: .06em;
}
.nav-bottom {
  margin-top: auto; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex; flex-direction: column; gap: 4px;
}
.user-chip {
  display: flex; align-items: center; gap: 9px;
  padding: 10px; margin-bottom: 4px;
}
.user-av {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--acc-dk); color: var(--acc-md);
  font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.user-name { font-size: 12px; color: rgba(255,255,255,0.7); font-weight: 500; }
.user-role { font-size: 10px; color: rgba(255,255,255,0.3); text-transform: capitalize; }
.nav-logout { color: rgba(220,80,60,0.55) !important; }
.nav-logout:hover { background: rgba(220,80,60,0.08) !important; color: rgba(220,80,60,0.85) !important; }

/* ── Main ────────────────────────────────────────────────────────────────── */
.main { display: flex; flex-direction: column; min-height: 100vh; }

.topbar {
  background: var(--s); border-bottom: 0.5px solid var(--b);
  padding: 0 24px; height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 100;
}
.topbar-l { display: flex; align-items: center; gap: 10px; }
.topbar-r { display: flex; align-items: center; gap: 8px; }
.topbar-title { font-size: 14px; font-weight: 500; }
.topbar-date  { font-size: 12px; color: var(--t2); }
.burger { display: none; background: none; border: none; cursor: pointer; color: var(--t2); padding: 5px; border-radius: 6px; }
.burger:hover { background: var(--bg); }

.page { padding: 22px 24px; flex: 1; display: flex; flex-direction: column; gap: 18px; }

/* ── Alertas ─────────────────────────────────────────────────────────────── */
.alert { padding: 10px 14px; border-radius: var(--r); font-size: 13px; }
.alert-ok  { background: var(--acc-lt); color: var(--acc-dk); border: 0.5px solid #9FE1CB; }
.alert-err { background: var(--dan-lt); color: var(--dan);    border: 0.5px solid #F09595; }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card       { background: var(--s); border: 0.5px solid var(--b); border-radius: var(--rl); overflow: hidden; }
.card-head  { padding: 13px 16px; border-bottom: 0.5px solid var(--b); display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; }
.card-title { font-size: 13px; font-weight: 500; }
.card-body  { padding: 16px; }
.card-soon  { opacity: .75; }

/* ── Stats ───────────────────────────────────────────────────────────────── */
.stats-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.stat-card { background: var(--s); border: 0.5px solid var(--b); border-radius: var(--r); padding: 14px 16px; display: flex; align-items: flex-start; gap: 12px; }
.stat-card--soon { opacity: .6; }
.stat-ico  { width: 34px; height: 34px; border-radius: var(--r); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ico-teal   { background: var(--acc-lt); color: var(--acc-dk); }
.ico-blue   { background: var(--inf-lt); color: var(--inf); }
.ico-amber  { background: var(--amb-lt); color: var(--amb); }
.ico-purple { background: var(--pur-lt); color: var(--pur); }
.stat-lbl   { font-size: 10px; color: var(--t2); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; }
.stat-val   { font-size: 26px; font-weight: 300; line-height: 1; }
.stat-val--muted { color: var(--t3); }
.stat-soon  { font-size: 10px; color: var(--t3); margin-top: 2px; }

/* ── Dashboard ───────────────────────────────────────────────────────────── */
.dash-cols  { display: grid; grid-template-columns: 1fr 360px; gap: 16px; align-items: start; }
.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qa-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-radius: var(--r);
  font-size: 13px; border: 0.5px solid var(--b);
  background: var(--s); color: var(--t); transition: all .13s; cursor: pointer;
}
.qa-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.07); }
.qa-green  { border-color: #9FE1CB; color: var(--acc-dk); background: var(--acc-lt); }
.qa-green:hover  { background: #C5EDE0; }
.qa-blue   { border-color: #85B7EB; color: var(--inf); background: var(--inf-lt); }
.qa-blue:hover   { background: #C5DAF2; }
.qa-disabled { opacity: .45; cursor: default; pointer-events: none; }

.patient-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 0.5px solid var(--b);
  transition: background .12s;
}
.patient-row:last-child { border-bottom: none; }
.patient-row:hover { background: var(--s2); }
.p-av {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--acc-lt); color: var(--acc-dk);
  font-size: 10px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.p-name { font-size: 13px; font-weight: 500; }
.p-meta { font-size: 11px; color: var(--t2); }
.p-info { flex: 1; }

/* ── Toolbar + búsqueda ──────────────────────────────────────────────────── */
.toolbar     { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.search-form { display: flex; gap: 7px; flex: 1; max-width: 500px; }
.s-wrap      { position: relative; flex: 1; }
.s-icon      { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--t3); pointer-events: none; }
.s-input     { width: 100%; padding: 8px 12px 8px 32px; border: 0.5px solid var(--b); border-radius: var(--r); font-size: 13px; font-family: 'Sora', sans-serif; background: var(--s); color: var(--t); outline: none; }
.s-input:focus { border-color: var(--acc); }

/* ── Tabla ───────────────────────────────────────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { background: var(--s2); font-size: 10px; font-weight: 600; color: var(--t2); text-transform: uppercase; letter-spacing: .07em; padding: 9px 14px; text-align: left; border-bottom: 0.5px solid var(--b); white-space: nowrap; }
.tbl td { padding: 10px 14px; border-bottom: 0.5px solid var(--b); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: var(--s2); }
.td-m  { color: var(--t2); }
.td-sm { font-size: 12px; }
.p-cell { display: flex; align-items: center; gap: 9px; }
.p-sub  { font-size: 11px; color: var(--t2); }
.row-acts { display: flex; gap: 5px; }
.pag { display: flex; gap: 4px; padding: 12px 16px; border-top: 0.5px solid var(--b); }
.pag-btn { padding: 4px 9px; border-radius: 6px; border: 0.5px solid var(--b); font-size: 12px; background: var(--s); color: var(--t2); }
.pag-btn.active { background: var(--acc-dk); color: #fff; border-color: var(--acc-dk); }

/* ── Tags ────────────────────────────────────────────────────────────────── */
.tag       { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: 20px; white-space: nowrap; }
.tag-teal  { background: var(--acc-lt); color: #085041; }
.tag-blue  { background: var(--inf-lt); color: #0C447C; }
.tag-amber { background: var(--amb-lt); color: #633806; }
.tag-red   { background: var(--dan-lt); color: #791F1F; }
.tag-gray  { background: #F1EFE8; color: #5F5E5A; }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 14px; border-radius: var(--r);
  font-size: 13px; font-family: inherit; font-weight: 500;
  cursor: pointer; border: 0.5px solid var(--b);
  background: var(--s); color: var(--t); transition: all .13s; white-space: nowrap;
}
.btn:hover      { background: var(--bg); }
.btn-primary    { background: var(--acc-dk); color: #fff; border-color: var(--acc-dk); }
.btn-primary:hover { background: #0A5540; }
.btn-secondary  { background: var(--s); color: var(--t2); }
.btn-secondary:hover { background: var(--bg); }
.btn-ghost      { background: transparent; border-color: transparent; color: var(--t2); }
.btn-ghost:hover { background: var(--s2); }
.btn-disabled   { opacity: .4; cursor: default; pointer-events: none; }
.btn-sm         { padding: 5px 10px; font-size: 12px; }
.link-sm        { font-size: 12px; color: var(--t2); }
.link-sm:hover  { color: var(--acc-dk); }

/* ── Formularios ─────────────────────────────────────────────────────────── */
.form-wrap  { max-width: 860px; }
.form-hd    { margin-bottom: 20px; }
.back       { font-size: 12px; color: var(--t2); }
.back:hover { color: var(--acc-dk); }
.form-title { font-family: 'Lora', serif; font-size: 22px; font-weight: 400; color: var(--t); margin-top: 6px; }

.fsect        { background: var(--s); border: 0.5px solid var(--b); border-radius: var(--rl); padding: 18px; margin-bottom: 14px; }
.fsect-title  { font-size: 11px; font-weight: 600; color: var(--t2); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; }
.fg           { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.ff           { display: flex; flex-direction: column; gap: 4px; }
.ff-full      { grid-column: 1 / -1; }
.fl           { font-size: 10px; font-weight: 600; color: var(--t2); text-transform: uppercase; letter-spacing: .06em; }
.fl-hint      { font-weight: 400; text-transform: none; color: var(--t3); }
.fi, .fta     { width: 100%; padding: 8px 11px; border: 0.5px solid var(--b); border-radius: var(--r); font-size: 13px; font-family: 'Sora', sans-serif; background: var(--s); color: var(--t); outline: none; transition: border-color .13s; }
.fi:focus, .fta:focus { border-color: var(--acc); }
.fta          { resize: vertical; min-height: 72px; }
select.fi     { cursor: pointer; }
.form-acts    { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }

/* ── Perfil paciente ─────────────────────────────────────────────────────── */
.profile-wrap { display: flex; flex-direction: column; gap: 16px; }
.profile-head { }
.ph-main      { display: flex; align-items: flex-start; gap: 14px; padding: 18px; flex-wrap: wrap; }
.ph-av        { width: 52px; height: 52px; border-radius: 50%; background: var(--acc-lt); color: var(--acc-dk); font-size: 18px; font-weight: 500; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ph-info      { flex: 1; min-width: 200px; }
.ph-name      { font-family: 'Lora', serif; font-size: 22px; font-weight: 400; margin-bottom: 6px; }
.ph-meta      { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--t2); margin-bottom: 8px; }
.ph-actions   { display: flex; gap: 8px; flex-wrap: wrap; }
.allergy-alert { display: flex; align-items: center; gap: 6px; background: var(--dan-lt); color: var(--dan); padding: 7px 12px; border-radius: 6px; font-size: 12px; border: 0.5px solid #F09595; margin-top: 6px; }
.profile-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.info-list    { }
.il-row       { display: flex; align-items: baseline; gap: 10px; padding: 9px 16px; border-bottom: 0.5px solid var(--b); }
.il-row:last-child { border-bottom: none; }
.il-block     { flex-direction: column; gap: 4px; }
.il-lbl       { font-size: 10px; font-weight: 600; color: var(--t2); text-transform: uppercase; letter-spacing: .06em; min-width: 110px; flex-shrink: 0; }
.il-val       { font-size: 13px; flex: 1; }
.il-text      { white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
.soon-list    { padding: 4px 0; }
.soon-item    { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 0.5px solid var(--b); font-size: 13px; color: var(--t2); }
.soon-item:last-child { border-bottom: none; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 20px; color: var(--t3); text-align: center; }
.empty p { font-size: 13px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1060px) {
  .dash-cols    { grid-template-columns: 1fr; }
  .profile-cols { grid-template-columns: 1fr; }
  .stats-row    { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 760px) {
  .shell  { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 240px; z-index: 900;
    transform: translateX(-100%);
  }
  .sidebar.open { transform: translateX(0); box-shadow: 4px 0 20px rgba(0,0,0,0.3); }
  .burger  { display: flex; }
  .fg      { grid-template-columns: 1fr; }
  .ff-full { grid-column: 1; }
  .quick-actions { grid-template-columns: 1fr; }
  .tbl th:nth-child(n+4), .tbl td:nth-child(n+4) { display: none; }
}
@media (max-width: 480px) {
  .stats-row { grid-template-columns: 1fr; }
  .page      { padding: 14px 16px; }
  .topbar    { padding: 0 16px; }
  .topbar-date { display: none; }
}

/* ── Print ────────────────────────────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .btn, .form-acts, .toolbar { display: none !important; }
  .shell { grid-template-columns: 1fr; }
  .page  { padding: 0; }
}