/* ================================================================
   YBT · Pacientes — "Expediente" v3.0
   Georgia serif · IBM Plex Mono
================================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --bg:         #0a0a0e;
  --bg-mid:     #0d0d12;
  --bg-row:     #111118;
  --bg-field:   #0a0a0e;
  --line:       #1c1c24;
  --line-soft:  #141420;

  --text-hi:    #e8f0d4;
  --text:       #9090b0;
  --text-dim:   #4a4a62;
  --text: #2a2a3e;

  --green:      #6db33f;
  --green-bg:   rgba(109,179,63,.07);

  --chip-id-bg: #111118; --chip-id-bd: #1a2a12; --chip-id-tx: #6db33f;
  --chip-g-bg:  #111118; --chip-g-bd:  #121a22; --chip-g-tx:  #5080a0;
  --chip-a-bg:  #111118; --chip-a-bd:  #22180a; --chip-a-tx:  #a08060;

  --mono:   'IBM Plex Mono', 'Courier New', monospace;
  --serif:  Georgia, 'Times New Roman', serif;
  --radius: 6px;
  --t:      .14s;
}

.light-theme {
  --bg:         #f4f3ef;
  --bg-mid:     #efede9;
  --bg-row:     #eae8e3;
  --bg-field:   #f4f3ef;
  --line:       #d8d6cf;
  --line-soft:  #e2e0da;

  --text-hi:    #1a200a;
  --text:       #4a5030;
  --text-dim:   #8a8a70;
  --text: #b0ae9e;

  --green:      #4a8a1a;
  --green-bg:   rgba(74,138,26,.07);

  --chip-id-bg: #e4ecd8; --chip-id-bd: #b8d898; --chip-id-tx: #2e6a06;
  --chip-g-bg:  #dce4ee; --chip-g-bd:  #9ab8d0; --chip-g-tx:  #1e4870;
  --chip-a-bg:  #eee4d6; --chip-a-bd:  #c8a870; --chip-a-tx:  #6a4010;
}

*, *::before, *::after { box-sizing: border-box; padding: 0; margin: 0; scrollbar-width: thin; scrollbar-color: var(--line) transparent; list-style: none; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: var(--mono); }

.body-style {
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  min-height: 100vh;
}

/* ================================================================
   HEADER
================================================================ */
.site-header {
  position: sticky; top: 0; z-index: 80;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.site-header .header-inner {
  max-width: 100%; padding: 0 24px; height: 48px;
  display: flex; align-items: center; gap: 20px;
}
.brand {
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  color: var(--green); letter-spacing: 2px; text-transform: uppercase; flex-shrink: 0;
}
.primary-nav { display: flex; align-items: center; gap: 2px; flex: 1; }
.primary-nav > a {
  font-size: 11px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--text-dim); padding: 5px 10px; border-radius: var(--radius);
  transition: color var(--t), background var(--t);
}
.primary-nav > a:hover  { color: var(--text); background: var(--bg-row); }
.primary-nav > a.active { color: var(--green); }

.menu-more { position: relative; }
.more-btn {
  appearance: none; background: transparent; border: 1px solid var(--line);
  color: var(--text-dim); padding: 5px 10px; border-radius: var(--radius);
  font-family: var(--mono); font-size: 11px; letter-spacing: .8px; text-transform: uppercase;
}
.more-btn:hover { border-color: var(--text-dim); color: var(--text); }

.menu-more .dropdown {
  display: none; position: absolute; top: calc(100% + 6px); left: 0;
  background: var(--bg-mid); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; min-width: 540px; z-index: 99;
  grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.menu-more[data-open="true"] .dropdown { display: grid; }
.dropdown h4 { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text); font-weight: 500; margin-bottom: 6px; }
.dropdown a { display: block; font-size: 11px; color: var(--text-dim); padding: 5px 7px; border-radius: 4px; }
.dropdown a:hover { background: var(--bg-row); color: var(--text); }

.hamburger { display: none; appearance: none; background: transparent; border: 1px solid var(--line); color: var(--text-dim); padding: 6px 10px; border-radius: var(--radius); font-size: 13px; }

@media (max-width: 980px) {
  .hamburger { display: inline-flex; }
  .primary-nav { position: fixed; top: 48px; left: 0; right: 0; z-index: 99; flex-direction: column; align-items: stretch; padding: 8px 16px; background: var(--bg-mid); border-bottom: 1px solid var(--line); display: none; gap: 2px; }
  .primary-nav.open { display: flex; }
  .menu-more { position: static; }
  .menu-more .dropdown { position: static; min-width: unset; grid-template-columns: 1fr 1fr; box-shadow: none; margin-top: 4px; display: none; }
  .menu-more[data-open="true"] .dropdown { display: grid; }
}

/* ================================================================
   LAYOUT PRINCIPAL
================================================================ */
main.pacientes {
  display: grid;
  grid-template-columns: 340px 1fr;
  grid-template-rows: auto 1fr;
  height: calc(100vh - 48px);
  overflow: hidden;
}

/* ── Controls bar ──────────────────────────────────────────────── */
section.controls {
  grid-column: 1 / -1;
  display: flex; align-items: center;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  height: 44px;
}

.controls-left {
  display: flex; align-items: center;
  width: 340px; border-right: 1px solid var(--line);
  height: 100%; flex-shrink: 0;
}

.search-wrap { flex: 1; position: relative; height: 100%; }
.search-wrap svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text); pointer-events: none; }
.search-wrap input {
  width: 100%; height: 100%; background: transparent; border: none;
  color: var(--text); font-family: var(--mono); font-size: 12px;
  padding: 0 12px 0 36px; outline: none; letter-spacing: .2px;
}
.search-wrap input::placeholder { color: var(--text); }

.controls-right {
  display: flex; align-items: center; height: 100%;
  flex: 1; padding: 0 16px; gap: 10px;
}

/* ── Buttons ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  appearance: none; background: transparent; border: 1px solid var(--line);
  color: var(--text-dim); padding: 5px 12px; border-radius: var(--radius);
  font-family: var(--mono); font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
  white-space: nowrap; transition: border-color var(--t), color var(--t), background var(--t);
}
.btn:hover  { border-color: var(--text-dim); color: var(--text); }
.btn:active { opacity: .7; }
.btn:disabled { opacity: .3; pointer-events: none; }
.btn.primary { background: var(--green-bg); border-color: var(--green); color: var(--green); }
.btn.primary:hover { background: rgba(109,179,63,.14); }
.btn.ghost { border-color: transparent; }
.btn.ghost:hover { border-color: var(--line); background: var(--bg-row); }

select.ctrl-select {
  appearance: none; background: transparent; border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--text-dim); font-family: var(--mono);
  font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
  padding: 5px 10px; outline: none; cursor: pointer;
  transition: border-color var(--t), color var(--t);
}
select.ctrl-select:hover { border-color: var(--text-dim); color: var(--text); }
select.ctrl-select option { background: var(--bg-mid); text-transform: none; }

/* ================================================================
   LIST PANEL
================================================================ */
.list-panel {
  grid-row: 2; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; overflow: hidden; background: var(--bg);
}

.list-tbl-head {
  display: grid; grid-template-columns: 32px 1fr 44px 16px;
  padding: 7px 16px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.list-tbl-head span { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text); }
.list-tbl-head .th-age { text-align: right; }

.pacientes-grid { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }

/* ── Fila paciente ─────────────────────────────────────────────── */
.card.paciente {
  display: grid; grid-template-columns: 32px 1fr 44px 16px;
  align-items: center; padding: 10px 16px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer; transition: background var(--t); position: relative;
}
.card.paciente:hover { background: var(--bg-row); }
.card.paciente.is-active { background: var(--green-bg); }

.card.paciente::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 2px; background: var(--green); opacity: 0; transition: opacity var(--t);
}
.card.paciente.is-active::before { opacity: 1; }

.p-idx { font-size: 10px; color: var(--text); font-family: var(--mono); }
.card.paciente.is-active .p-idx { color: var(--green); }

.p-name {
  font-size: 12.5px; color: var(--text); letter-spacing: .1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px;
  transition: color var(--t);
}
.card.paciente:hover .p-name    { color: var(--text-hi); }
.card.paciente.is-active .p-name { color: var(--text-hi); }

.p-age { font-size: 11px; color: var(--text-dim); text-align: right; font-family: var(--mono); }
.card.paciente.is-active .p-age { color: var(--green); }

.p-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--line); margin: 0 auto; transition: background var(--t); }
.card.paciente.is-active .p-dot { background: var(--green); }

.footer-actions { border-top: 1px solid var(--line); padding: 10px 16px; flex-shrink: 0; display: flex; justify-content: center; }

.empty {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; color: var(--text); font-size: 11px;
  letter-spacing: 1px; text-transform: uppercase; padding: 40px; text-align: center;
}
.empty-rule { width: 80px; height: 1px; background: var(--line); }

/* ── Skeleton ──────────────────────────────────────────────────── */
.skeleton {
  position: relative; overflow: hidden; border-radius: 3px;
  background: var(--bg-row); color: transparent !important;
}
.skeleton::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.04) 45%, rgba(255,255,255,.07) 50%, rgba(255,255,255,.04) 55%, transparent 100%);
  background-size: 300% 100%; animation: skel 1.6s linear infinite;
}
@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } }

.skel-w-40{width:40%} .skel-w-50{width:50%} .skel-w-55{width:55%}
.skel-w-60{width:60%} .skel-w-65{width:65%} .skel-w-70{width:70%} .skel-w-80{width:80%}

/* ================================================================
   DETAIL PANEL — dossier
================================================================ */
.detail-panel {
  grid-row: 2; background: var(--bg-mid);
  display: flex; flex-direction: column; overflow: hidden;
}

.detail-placeholder {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; color: var(--text);
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
}
.detail-placeholder .ph-rule { width: 100px; height: 1px; background: var(--line); }

.dossier { display: flex; flex-direction: column; flex: 1; overflow: hidden; }

/* Dossier top */
.dossier-top {
  padding: 28px 36px 22px; border-bottom: 1px solid var(--line);
  flex-shrink: 0; background: var(--bg);
}
.dos-eyebrow { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text); margin-bottom: 10px; }
.dos-name {
  font-family: var(--serif); font-size: 36px; color: var(--text-hi);
  line-height: 1.1; letter-spacing: -.3px; margin-bottom: 14px; font-weight: normal;
}
.dos-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip {
  font-family: var(--mono); font-size: 10px; letter-spacing: .5px;
  padding: 4px 10px; border-radius: 3px; text-transform: uppercase;
}
.chip-id  { background: var(--chip-id-bg); color: var(--chip-id-tx); border: 1px solid var(--chip-id-bd); }
.chip-gen { background: var(--chip-g-bg);  color: var(--chip-g-tx);  border: 1px solid var(--chip-g-bd); }
.chip-age { background: var(--chip-a-bg);  color: var(--chip-a-tx);  border: 1px solid var(--chip-a-bd); }

/* Dossier body */
.dossier-body { flex: 1; overflow-y: auto; padding: 0 36px 36px; background-color: var(--bg);}

.d-section { border-bottom: 1px solid var(--line); padding: 22px 0; }
.d-section:last-child { border-bottom: none; }
.d-sec-title { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text); margin-bottom: 16px; }

/* Dot-leader */
.d-field { display: flex; align-items: baseline; margin-bottom: 10px; line-height: 1; }
.d-field:last-child { margin-bottom: 0; }
.d-label { font-size: 11px; color: var(--text); white-space: nowrap; flex-shrink: 0; letter-spacing: .3px; }
.d-dots  { flex: 1; border-bottom: 1px dotted var(--line); margin: 0 8px; position: relative; top: -3px; min-width: 20px; }
.d-value { font-size: 11.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 58%; letter-spacing: .2px; }
.d-value.accent { color: var(--green); }

/* Textblock */
.d-textblock {
  background: var(--bg-field); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; font-size: 11.5px; color: var(--text-dim); font-family: var(--mono);
  line-height: 1.85; white-space: pre-wrap; letter-spacing: .1px;
}
.d-textblock.populated { color: var(--text); }

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width: 1050px) {
  main.pacientes { grid-template-columns: 280px 1fr; }
  .controls-left { width: 280px; }
}

@media (max-width: 780px) {
  main.pacientes { grid-template-columns: 1fr; grid-template-rows: auto auto auto; height: auto; overflow: visible; }
  section.controls { height: auto; flex-direction: column; align-items: stretch; }
  .controls-left { width: 100%; border-right: none; border-bottom: 1px solid var(--line); height: 44px; }
  .controls-right { flex-wrap: wrap; gap: 8px; padding: 10px 16px; height: auto; }
  .list-panel { height: 320px; border-right: none; border-bottom: 1px solid var(--line); grid-row: auto; }
  .detail-panel { grid-row: auto; min-height: 60vh; }
  .dossier-top { padding: 20px 20px 16px; }
  .dos-name { font-size: 28px; }
  .dossier-body { padding: 0 20px 28px; }
}