/* ============================================================
   Wiñay · UMF HNGAI — sistema visual
   Paleta tomada del logo de la Unidad (azules #2C8AE2 → cian #93E7F2)
   ============================================================ */
:root {
  --navy-950: #061A33; --navy-900: #0A2A52; --navy-800: #0E3A70;
  --brand-700: #1561B8; --brand-600: #1E78D8; --brand-500: #3C9CE6; --brand-400: #56B5EE; --brand-300: #8DCDF6; --cyan-300: #93E7F2;
  --brand-100: #DCEDFB; --brand-50: #EEF6FD;
  --bg: #F1F5F9; --surface: #FFFFFF; --surface-2: #F6F9FC; --surface-3: #EBF1F7;
  --ink: #0E1C2B; --ink-2: #475A6E; --ink-3: #7A8B9C; --line: #D9E3EC; --line-2: #E8EEF4;
  --primary: var(--brand-600); --primary-ink: #fff; --primary-soft: var(--brand-50); --accent: var(--brand-600);
  --ok: #157A43; --ok-soft: #DDF4E6; --warn: #9A5B05; --warn-soft: #FDF0D3; --bad: #BE2631; --bad-soft: #FCE4E4; --na: #66768A; --na-soft: #EDF1F5;
  --nav-bg: #EAF1F8; --backdrop: rgba(6, 26, 51, .5);
  --shadow-sm: 0 1px 2px rgba(10, 42, 82, .06), 0 1px 1px rgba(10, 42, 82, .04);
  --shadow: 0 6px 18px -6px rgba(10, 42, 82, .16), 0 2px 6px rgba(10, 42, 82, .06);
  --shadow-lg: 0 24px 48px -16px rgba(10, 42, 82, .28);
  --radius: 12px; --radius-sm: 8px;
  --f-head: 'Plus Jakarta Sans', 'IBM Plex Sans', system-ui, sans-serif;
  --f-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-logo: 'Montserrat', 'Plus Jakarta Sans', sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #08131F; --surface: #0F1D2C; --surface-2: #132436; --surface-3: #182C42; --ink: #E3ECF4; --ink-2: #A5B6C7; --ink-3: #7A8DA1; --line: #22384F; --line-2: #1A2E43;
    --primary: #4DA8F6; --primary-ink: #04121F; --primary-soft: #102B45; --accent: #6FBBF8; --brand-50: #102B45; --brand-100: #15385A;
    --ok: #5FD394; --ok-soft: #10301F; --warn: #F0B456; --warn-soft: #362710; --bad: #F48A8E; --bad-soft: #3B1719; --na: #9AA9BA; --na-soft: #1A2A3B;
    --nav-bg: #0C1926; --backdrop: rgba(0, 0, 0, .62); --shadow: 0 6px 18px -6px rgba(0, 0, 0, .5); --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #08131F; --surface: #0F1D2C; --surface-2: #132436; --surface-3: #182C42; --ink: #E3ECF4; --ink-2: #A5B6C7; --ink-3: #7A8DA1; --line: #22384F; --line-2: #1A2E43;
  --primary: #4DA8F6; --primary-ink: #04121F; --primary-soft: #102B45; --accent: #6FBBF8; --brand-50: #102B45; --brand-100: #15385A;
  --ok: #5FD394; --ok-soft: #10301F; --warn: #F0B456; --warn-soft: #362710; --bad: #F48A8E; --bad-soft: #3B1719; --na: #9AA9BA; --na-soft: #1A2A3B;
  --nav-bg: #0C1926; --backdrop: rgba(0, 0, 0, .62); --shadow: 0 6px 18px -6px rgba(0, 0, 0, .5); --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, .6);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box }
html { height: 100%; background: var(--navy-900) }
body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 14px/1.5 var(--f-body); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased }
button, input, select, textarea { font: inherit; color: inherit }
button { cursor: pointer }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-head); font-weight: 700; line-height: 1.2; letter-spacing: -.01em }
h2 { font-size: 22px } h3 { font-size: 15.5px }
.ic { width: 18px; height: 18px; flex: none }
.muted { color: var(--ink-2) } .small { font-size: 12.5px } .nowrap { white-space: nowrap }
#app { height: 100%; display: flex; flex-direction: column }
.main { flex: 1; min-height: 0; overflow: auto }
.umf-mark { display: block }

/* ---------- splash ---------- */
#splash { position: fixed; inset: 0; z-index: 200; background: radial-gradient(circle at 50% 45%, #fff 0%, #F3F9FE 45%, #E3F0FB 100%); display: grid; place-items: center; transition: opacity .45s ease }
#splash video { width: 100%; height: 100%; object-fit: cover }
#splash.out { opacity: 0; pointer-events: none }
#splash .skip { position: absolute; right: 18px; bottom: 16px; border: 1px solid rgba(30, 120, 216, .25); background: rgba(255, 255, 255, .7); color: #1561B8; border-radius: 99px; padding: 6px 14px; font-size: 12.5px }
#splash .fallback { width: min(52vmin, 420px); animation: pop .9s cubic-bezier(.16, 1, .3, 1) both }
@keyframes pop { from { opacity: 0; transform: scale(.7) rotate(-8deg) } to { opacity: 1; transform: none } }

/* ---------- botones y controles ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); white-space: nowrap; font-weight: 500; transition: border-color .15s, background .15s, box-shadow .15s }
.btn:hover { border-color: var(--ink-3) }
.btn.pri { background: linear-gradient(180deg, var(--brand-500), var(--brand-600)); border-color: var(--brand-600); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 4px 10px -4px rgba(30, 120, 216, .6) }
:root[data-theme="dark"] .btn.pri { color: #fff }
.btn.pri:hover { background: linear-gradient(180deg, var(--brand-600), var(--brand-700)) }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2) }
.btn.ghost:hover { background: var(--surface-3); color: var(--ink) }
.btn.sm { height: 30px; padding: 0 10px; font-size: 13px; border-radius: 8px }
.btn.xs { height: 26px; padding: 0 8px; font-size: 12px; border-radius: 7px }
.btn.danger { color: var(--bad) }
.btn.icon { width: 36px; padding: 0 } .btn.sm.icon { width: 30px }
.btn[disabled] { opacity: .5; cursor: not-allowed }
.link { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 2px }
.kbd { font: 600 10.5px/1 var(--f-body); padding: 3px 6px; border-radius: 5px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-3) }
input[type=text], input[type=date], input[type=time], input[type=password], input[type=number], input[type=tel], input[type=email], input:not([type]), select, textarea { width: 100%; height: 36px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 0 10px; transition: border-color .15s, box-shadow .15s }
textarea { height: auto; min-height: 80px; padding: 9px 10px; resize: vertical; line-height: 1.5 }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(60, 156, 230, .2) }
input::placeholder, textarea::placeholder { color: var(--ink-3) }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; padding: 2px 9px; border-radius: 99px; background: var(--surface-3); color: var(--ink-2); white-space: nowrap; line-height: 1.6 }
.chip.ok { background: var(--ok-soft); color: var(--ok) } .chip.bad { background: var(--bad-soft); color: var(--bad) } .chip.warn { background: var(--warn-soft); color: var(--warn) } .chip.na { background: var(--na-soft); color: var(--na) }
.chip.brand { background: var(--brand-50); color: var(--brand-700) }
:root[data-theme="dark"] .chip.brand { color: var(--accent) }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none }
.badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: #E8A33D; color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-weight: 600 }
.note { background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--brand-500); padding: 10px 12px; border-radius: 8px; color: var(--ink-2); max-width: 860px; margin: 0 0 16px; font-size: 13.5px }
.note.shell { border-left-color: #8A7CF0; background: linear-gradient(90deg, rgba(116, 87, 232, .07), transparent 60%), var(--surface-2) }
.empty { padding: 30px; text-align: center; color: var(--ink-2); border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface) }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm) }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm) }
table.list { border-collapse: collapse; width: 100%; min-width: 620px }
table.list th { font-weight: 600; color: var(--ink-2); text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap }
table.list th[data-sort] { cursor: pointer } table.list th[data-sort]:hover { color: var(--ink) }
table.list th .ar { opacity: .6; margin-left: 4px }
table.list td { padding: 11px 14px; border-bottom: 1px solid var(--line-2) }
table.list tr:last-child td { border-bottom: 0 }
table.list tr.click { cursor: pointer } table.list tr.click:hover td { background: var(--primary-soft) }

/* ---------- barra superior ---------- */
.top { flex: none; display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 0 16px; background: linear-gradient(90deg, var(--navy-950), var(--navy-900) 40%, var(--navy-800)); color: #E8F2FC; position: relative; z-index: 20 }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, #2C8AE2, #56B5EE 55%, #93E7F2); opacity: .9 }
.brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; background: none; border: 0; color: inherit; padding: 0 }
.brand .umf-mark { width: 34px; height: 34px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .3)) }
.brand b { font-family: var(--f-head); font-weight: 700; font-size: 16px; letter-spacing: .005em }
.brand span { font-size: 14px; font-weight: 600; opacity: .85; border-left: 1px solid rgba(255, 255, 255, .3); padding-left: 10px; line-height: 1.25; text-align: left }
.tnav { display: flex; gap: 2px; overflow-x: auto; flex: 1; scrollbar-width: none }
.tnav button { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; padding: 8px 12px; border-radius: 8px; color: rgba(232, 242, 252, .78); white-space: nowrap; font-weight: 500 }
.tnav button .ic { width: 17px; height: 17px; opacity: .85 }
.tnav button:hover { color: #fff; background: rgba(255, 255, 255, .07) }
.tnav button.cur { color: #fff; background: rgba(86, 181, 238, .2); box-shadow: inset 0 0 0 1px rgba(147, 231, 242, .25) }
.tnav .rec { border: 1px dashed rgba(147, 231, 242, .4) }
.tuser { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 13px }
.tuser .saved { opacity: 0; font-size: 12px; color: #93E7F2; transition: opacity .3s }
.tuser .saved.on { opacity: .9 }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 700 12.5px var(--f-head); color: #fff; background: linear-gradient(135deg, #2C8AE2, #56B5EE); border: 2px solid rgba(255, 255, 255, .35); flex: none }
.avatar.lg { width: 64px; height: 64px; font-size: 22px; border: 3px solid #fff; box-shadow: var(--shadow) }
.tuser .who { display: flex; flex-direction: column; line-height: 1.2 } .tuser .who small { opacity: .6; font-size: 11px }
.tuser .out { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px; padding: 5px 9px; display: inline-flex; gap: 6px; align-items: center; color: #E8F2FC }
.tuser .out:hover { background: rgba(255, 255, 255, .15) }

/* ---------- login ---------- */
.login { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--surface) }
.lart { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 20% 10%, #2C8AE2 0%, #0E3A70 55%, #061A33 100%); color: #E8F2FC; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px; text-align: center }
.lart img { width: min(440px, 82%); position: relative; filter: drop-shadow(0 20px 40px rgba(2, 12, 28, .45)) }
.lart h1 { position: relative; font-size: 40px; font-weight: 800; margin-top: 6px; letter-spacing: -.02em }
.lart .lsub { position: relative; margin: 10px 0 0; font: 600 15px var(--f-head); opacity: .85 }
.lart p { position: relative; margin: 6px 0 0; opacity: .78; max-width: 420px }
.lform { display: flex; align-items: center; justify-content: center; padding: 40px 28px }
.lcard { width: 100%; max-width: 380px }
.lcard h2 { font-size: 28px; font-weight: 800 }
.lcard .sub { margin: 6px 0 26px; color: var(--ink-2) }
.lcard .fld { margin-bottom: 14px }
.lcard .fld input { height: 44px; font-size: 15px; border-radius: 10px }
.lcard .btn.pri { width: 100%; height: 46px; font-size: 15px; border-radius: 10px; margin-top: 6px }
.lerr { color: var(--bad); background: var(--bad-soft); padding: 8px 11px; border-radius: 8px; font-size: 13px; margin-bottom: 12px }
.lfoot { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3) }

/* ---------- home ---------- */
.home { max-width: 1200px; margin: 0 auto; padding: 26px 24px 56px }
.hero { position: relative; overflow: hidden; border-radius: 20px; padding: 28px 30px; color: #EAF4FE; background: radial-gradient(90% 140% at 100% 0%, rgba(147, 231, 242, .38), transparent 55%), linear-gradient(120deg, #0A2A52 0%, #1561B8 60%, #2C8AE2 100%); box-shadow: var(--shadow-lg); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center }
.hero::after { content: ""; position: absolute; right: -120px; top: 50%; translate: 0 -50%; width: 520px; height: 520px; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(255, 255, 255, .09) 0 1px, transparent 1px 34px); pointer-events: none }
.hero h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em }
.hero .date { opacity: .82; margin-top: 4px }
.hero .kpis { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; position: relative; z-index: 1 }
.kpi { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; padding: 9px 14px; backdrop-filter: blur(4px) }
.kpi b { display: block; font: 800 22px/1.1 var(--f-head) } .kpi span { font-size: 12px; opacity: .8 }
.hero .umf-mark { width: 120px; height: 120px; position: relative; z-index: 1; filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .35)) }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 22px }
.tile { position: relative; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 18px; padding: 20px 18px 18px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 10px; min-height: 196px; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s }
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--tc) 45%, var(--line)) }
.tile::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--tc) }
.tile .ti { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--tc) 70%, #fff), var(--tc)); box-shadow: 0 8px 18px -8px var(--tc) }
.tile .ti .ic { width: 26px; height: 26px }
.tile h3 { font-size: 19px; font-weight: 800 }
.tile p { margin: 0; color: var(--ink-2); font-size: 13px }
.tile .meta { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); border-top: 1px solid var(--line-2); padding-top: 10px }
.tile .meta b { color: var(--ink); font-weight: 600 }
.hsec { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 320px; gap: 16px }
.hsec h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px }
.today-room { padding: 14px 14px 10px }
.trow { display: grid; grid-template-columns: 50px 1fr auto; gap: 10px; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line-2); padding: 9px 2px }
.trow:first-of-type { border-top: 0 }
.trow:hover .tp { color: var(--accent) }
.trow .th { font-weight: 600; font-family: var(--f-head) }
.trow .tp { font-weight: 500 } .trow .tt { font-size: 12px; color: var(--ink-2); display: flex; align-items: center; gap: 6px }
.sb { padding: 14px }
.sres { margin-top: 8px; display: flex; flex-direction: column }
.sres button { display: flex; justify-content: space-between; gap: 10px; text-align: left; background: none; border: 0; border-top: 1px solid var(--line-2); padding: 9px 2px }
.sres button:hover { color: var(--accent) }

/* ---------- páginas ---------- */
.page { max-width: 1240px; margin: 0 auto; padding: 24px 24px 56px }
.phead { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 18px }
.phead .tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
.phead h2 { display: flex; align-items: center; gap: 10px }
.crumb { font-size: 12.5px; color: var(--ink-3); margin-bottom: 4px }
.search { position: relative; min-width: 300px } .search .ic { position: absolute; left: 10px; top: 9px; color: var(--ink-3) } .search input { padding-left: 34px }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--surface) }
.seg button { border: 0; background: none; padding: 0 12px; height: 34px; border-right: 1px solid var(--line); color: var(--ink-2); white-space: nowrap }
.seg button:last-child { border-right: 0 }
.seg button[aria-pressed=true] { background: var(--primary-soft); color: var(--accent); font-weight: 600 }

/* ---------- ficha de paciente (historia) ---------- */
.pcard { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 18px 20px; margin-bottom: 18px }
.pcard .pa { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; font: 800 20px var(--f-head); color: #fff; background: linear-gradient(135deg, #56B5EE, #1561B8) }
.pcard h2 { font-size: 21px }
.pcard .pm { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--ink-2); font-size: 13px; margin-top: 4px }
.pcard .pm i { font-style: normal; color: var(--ink-3); margin-right: 4px }
.pcard .acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end }
.preg { margin-bottom: 18px; overflow: hidden }
.preg-h { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--surface-2); border-bottom: 1px solid var(--line) }
.preg-h b { font-family: var(--f-head); font-size: 15px }
.preg-h .pm { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--ink-2) }
.tl { list-style: none; margin: 0; padding: 6px 18px 12px }
.tl li { display: grid; grid-template-columns: 96px 70px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-2); position: relative }
.tl li:first-child { border-top: 0 }
.tl .tdate { font-weight: 600 } .tl .tga { color: var(--ink-2); font-size: 13px }
.tl .ttypes { display: flex; flex-wrap: wrap; gap: 5px; align-items: center } .tl .tops { font-size: 12.5px; color: var(--ink-2) }
.tchip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 2px 9px 2px 7px; border-radius: 99px; background: color-mix(in srgb, var(--tc) 12%, transparent); color: color-mix(in srgb, var(--tc) 85%, var(--ink)) }
.tchip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tc) }

/* ---------- agenda ---------- */
.agbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 14px }
.agbar .agnav { display: flex; gap: 4px; align-items: center }
.agbar h2 { font-size: 20px; min-width: 260px }
.agbar .date-in { width: 150px }
.agday { display: grid; grid-template-columns: 62px repeat(var(--rooms, 2), minmax(260px, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); overflow: auto; max-height: calc(100vh - 210px); position: relative }
.agday .rh { position: sticky; top: 0; z-index: 4; background: var(--surface); border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); padding: 12px 14px; display: flex; align-items: center; gap: 12px }
.agday .rh.corner { border-left: 0 }
.agday .rh .ri { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: var(--rc); flex: none }
.agday .rh b { font-family: var(--f-head); font-size: 16px; display: block } .agday .rh small { color: var(--ink-2); font-size: 12.5px }
.agday .rh .duty { margin-left: auto; width: auto; height: 30px; font-size: 12.5px; max-width: 170px }
.agday .rh .cnt { font-size: 12px; color: var(--ink-2); white-space: nowrap }
.tcol { position: relative; border-right: 1px solid var(--line) }
.tcol div { height: var(--slot-h); font-size: 11.5px; color: var(--ink-3); text-align: right; padding: 0 8px; translate: 0 -8px }
.tcol div:first-child { translate: 0 2px }
.rcol { position: relative; border-left: 1px solid var(--line-2) }
.rcol .slot { height: var(--slot-h); border-top: 1px solid var(--line-2) }
.rcol .slot.hour { border-top-color: var(--line) }
.rcol .slot:hover { background: var(--primary-soft); cursor: copy }
.rcol .slot.drop { background: color-mix(in srgb, var(--brand-500) 18%, transparent) }
.appt { position: absolute; left: 6px; right: 6px; border-radius: 9px; padding: 5px 9px 5px 11px; border: 1px solid color-mix(in srgb, var(--tc) 30%, var(--line)); background: color-mix(in srgb, var(--tc) 9%, var(--surface)); text-align: left; overflow: hidden; display: flex; flex-direction: column; gap: 1px; box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s; cursor: grab }
.appt::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tc) }
.appt:hover { box-shadow: var(--shadow); z-index: 3 }
.appt .ah { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-2); min-width: 0 }
.appt .ah b { color: var(--ink); font-family: var(--f-head); font-size: 12.5px }
.appt .an { flex: 1; min-width: 0; font-weight: 600; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.appt .ax { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.appt .callb { flex: none; display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #E0612F; color: #fff }
.appt .callb .ic { width: 11px; height: 11px }
.appt .st { flex: none; font-size: 10.5px; font-weight: 600; padding: 0 7px; border-radius: 99px; line-height: 17px }
.appt.s2 { background: color-mix(in srgb, var(--tc) 20%, var(--surface)) } .appt.s2 .st { background: var(--brand-600); color: #fff }
.appt.s3 { opacity: .62 } .appt.s3 .st { background: var(--ok-soft); color: var(--ok) }
.appt.s4 { opacity: .55; border-style: dashed } .appt.s4 .st { background: var(--bad-soft); color: var(--bad) } .appt.s4 .an { text-decoration: line-through }
.appt.dragging { opacity: .4 }
.nowline { position: absolute; left: 0; right: 0; height: 2px; background: #E5484D; z-index: 2; pointer-events: none }
.nowline::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #E5484D }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12.5px; color: var(--ink-2) }
.legend span { display: inline-flex; align-items: center; gap: 6px }
.week { display: grid; grid-template-columns: repeat(6, minmax(170px, 1fr)); gap: 10px; overflow-x: auto }
.wday { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-height: 280px; display: flex; flex-direction: column }
.wday.is-today { border-color: var(--brand-500); box-shadow: inset 0 3px 0 var(--brand-500) }
.wday .dh { padding: 10px 12px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline }
.wday .dh b { font-family: var(--f-head) } .wday .dh span { color: var(--ink-2); font-size: 12px }
.wday .dl { padding: 8px; display: flex; flex-direction: column; gap: 6px; flex: 1 }
.wa { text-align: left; width: 100%; background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--tc); border-radius: 8px; padding: 7px 9px; font-size: 13px }
.wa b { font-weight: 600; margin-right: 6px } .wa .t { display: block; color: var(--ink-2); font-size: 11.5px }
.wa:hover { border-color: var(--ink-3); border-left-color: var(--tc) }
.wa.s4 { opacity: .55 } .wa.s3 { opacity: .7 }
.dadd { border: 0; background: none; color: var(--ink-3); font-size: 12.5px; padding: 4px; margin-top: auto; text-align: left }
.dadd:hover { color: var(--accent) }

/* ---------- ficha (registro clínico) ---------- */
.record { height: 100%; display: flex; flex-direction: column }
.patbar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 10px 18px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm); position: relative; z-index: 2 }
.pname { font-weight: 700; font-size: 17px; font-family: var(--f-head) }
.pmeta { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--ink-2); font-size: 13px }
.pmeta i { font-style: normal; color: var(--ink-3); margin-right: 4px }
.pmeta .eg { color: var(--ink); font-weight: 600 }
.pact { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap }
.navtoggle { display: none }
.rbody { flex: 1; min-height: 0; display: grid; grid-template-columns: 272px minmax(0, 1fr) }
.nav { background: var(--nav-bg); border-right: 1px solid var(--line); overflow: auto; padding: 10px 0 24px }
.nexam { padding: 4px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 8px }
.nexam label { font-size: 11.5px; color: var(--ink-2); display: block; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600 }
.nexam .row { display: flex; gap: 6px } .nexam select { flex: 1; height: 32px; font-size: 13px }
.nv { display: flex; align-items: center; width: 100%; border: 0; background: none; text-align: left; padding: 5px 12px 5px calc(12px + var(--l, 0) * 15px); color: var(--ink-3); border-left: 3px solid transparent; font-size: 13.5px; line-height: 1.35 }
.nv:hover { color: var(--ink); background: rgba(60, 156, 230, .08) }
.nv.has { color: var(--ink); font-weight: 600 }
.nv.cur { background: var(--surface); border-left-color: var(--brand-600); color: var(--accent) }
.nv.off { opacity: .45 }
.nv .car { width: 16px; flex: none; display: inline-flex; justify-content: center; color: var(--ink-3); font-size: 9px; transition: transform .15s }
.nv .car.open { transform: rotate(90deg) }
.nv .tdot { width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; background: var(--tc); flex: none }
.nlegend { padding: 14px 15px 0; font-size: 12px; color: var(--ink-3); line-height: 1.6 }
.scr { overflow: auto; padding: 22px 28px 70px }
.shead { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 14px }
.shead .ctx { color: var(--ink-2); font-size: 13px }
.fetos { display: inline-flex; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; background: var(--surface) }
.fetos button { border: 0; background: none; padding: 4px 14px; color: var(--ink-2) }
.fetos button.cur { background: var(--brand-600); color: #fff; font-weight: 600 }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; scrollbar-width: thin }
.tab { border: 0; background: none; padding: 9px 14px; border-bottom: 2px solid transparent; color: var(--ink-2); white-space: nowrap }
.tab:hover { color: var(--ink) } .tab.has { color: var(--ink); font-weight: 600 }
.tab.cur { border-bottom-color: var(--brand-600); color: var(--accent) }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 18px; max-width: 1060px }
.fld label { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 4px; font-weight: 500 }
.fld.wide { grid-column: 1/-1 }
.fh { grid-column: 1/-1; font: 700 13px var(--f-head); color: var(--ink); padding-top: 8px; border-top: 1px solid var(--line); margin-top: 4px; text-transform: uppercase; letter-spacing: .05em }
.u { display: flex; align-items: stretch }
.u input { border-top-right-radius: 0; border-bottom-right-radius: 0; text-align: right }
.u span { display: flex; align-items: center; padding: 0 9px; border: 1px solid var(--line); border-left: 0; border-radius: 0 8px 8px 0; background: var(--surface-2); color: var(--ink-2); font-size: 12.5px; white-space: nowrap }
.fld .ev { margin-top: 5px; min-height: 0 }
.fld .ev:empty { display: none }
.zrow { display: flex; gap: 8px; align-items: center } .zrow .u { flex: 1 }
.zb { font-size: 12px; color: var(--ink-3); border: 1px dashed #B9AEF5; border-radius: 7px; padding: 7px 9px; white-space: nowrap; background: rgba(116, 87, 232, .05) }
output { display: flex; align-items: center; min-height: 36px; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink); font-weight: 500 }
output.strong { background: var(--primary-soft); border-color: transparent; color: var(--accent); font-weight: 700 }
output.dis { color: var(--ink-3); font-style: italic; font-weight: 400 }
.chk { display: flex; align-items: center }
.chk label { display: flex; gap: 9px; align-items: center; margin: 0; color: var(--ink); font-size: 14px; cursor: pointer }
.chk input { width: 17px; height: 17px; accent-color: var(--brand-600) }
.risk { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px; padding: 12px 14px; border-radius: 10px; border: 1px dashed #B9AEF5; background: rgba(116, 87, 232, .05); max-width: 1060px }
.stagebox { max-width: 1060px; margin-bottom: 18px; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm) }
.stagebox h4 { font-family: var(--f-head); margin: 0 0 6px; display: flex; gap: 10px; align-items: center }
.stagebox ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink-2) }
.atabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; max-width: 1060px }
.at { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 6px 11px; color: var(--ink-3); font-size: 13px }
.at.n { color: var(--ok); font-weight: 600 } .at.x { color: var(--ink); font-weight: 600 }
.at.a { color: var(--bad); font-weight: 600; background: var(--bad-soft); border-color: transparent }
.at.cur { border-color: var(--brand-500); box-shadow: inset 0 -2px 0 var(--brand-500) }
.apanel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; max-width: 1060px }
.apanel h3 { margin-bottom: 12px }
.apanel .seg button[data-st=n][aria-pressed=true] { background: var(--ok-soft); color: var(--ok) }
.apanel .seg button[data-st=a][aria-pressed=true] { background: var(--bad-soft); color: var(--bad) }
.apanel .seg button[data-st=x][aria-pressed=true] { background: var(--surface-3); color: var(--ink) }
.apanel textarea { margin-top: 12px }
.apanel .allnorm { margin-left: 8px }
.alegend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 12.5px; color: var(--ink-2) }
.alegend b.n { color: var(--ok) } .alegend b.a { color: var(--bad) } .alegend b.x { color: var(--ink) }

/* importación del ecógrafo */
.txbar { display: flex; gap: 12px; align-items: center; max-width: 1060px; margin-bottom: 16px; padding: 11px 14px; border-radius: 12px; border: 1px solid #C9BEF7; background: linear-gradient(90deg, rgba(116, 87, 232, .08), transparent 70%), var(--surface) }
.txbar > .ic { color: #7457E8; width: 22px; height: 22px } .txbar > div { flex: 1; min-width: 0 } .txbar .small { margin-top: 2px }
input.tx { background: #F3EFFE; border-color: #B9AEF5 }
:root[data-theme="dark"] input.tx { background: #241d3d; border-color: #5b4bb0 }
/* conclusiones con textos predefinidos */
.concl { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; max-width: 1240px }
.concl .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.stamps { position: sticky; top: 0; padding: 14px; max-height: calc(100vh - 170px); overflow: auto }
.stamps h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px }
.stamps .hint { font-size: 12px; color: var(--ink-3); margin: 0 0 10px }
.stamps .cat { font: 700 11px var(--f-head); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 12px 0 6px }
.stamp { display: block; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--surface-2); border-radius: 9px; padding: 8px 10px; margin-bottom: 6px; font-size: 13px; user-select: none; transition: border-color .15s, background .15s }
.stamp b { display: block; font-weight: 600; font-size: 13px }
.stamp span { display: block; color: var(--ink-2); font-size: 12px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
.stamp:hover { border-color: var(--brand-400); background: var(--primary-soft) }
.stamp.hit { animation: hit .5s ease }
@keyframes hit { 0% { background: var(--ok-soft) } 100% { background: var(--surface-2) } }
.suggest { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px }

/* resumen */
.pinfo { display: flex; flex-wrap: wrap; gap: 8px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 18px; margin-bottom: 16px; max-width: 1180px; box-shadow: var(--shadow-sm) }
.pinfo div { font-size: 12.5px; color: var(--ink-2) }
.pinfo b { display: block; color: var(--ink); font-size: 15px; font-weight: 700; font-family: var(--f-head) }
table.sum { border-collapse: collapse; min-width: 100% }
table.sum th, table.sum td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line-2); padding: 8px 12px; vertical-align: top; font-size: 13px; text-align: left }
table.sum th:first-child, table.sum td:first-child { position: sticky; left: 0; background: var(--surface-2); font-weight: 600; color: var(--ink-2); min-width: 160px; z-index: 1 }
table.sum thead th { background: var(--surface-2); font-weight: 500; cursor: pointer; min-width: 200px }
table.sum thead th b { display: block; color: var(--ink); font-size: 14px; font-family: var(--f-head) }
table.sum td { background: var(--surface-2); color: var(--ink-2); cursor: pointer }
table.sum .cur { background: var(--surface); color: var(--ink) }
table.sum thead th.cur { box-shadow: inset 0 3px 0 var(--brand-600) }
table.sum td .ab { color: var(--bad); font-weight: 600 }
.vst { display: inline-block; font-size: 12px; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface) }
.vst.v { background: var(--ok-soft); color: var(--ok); border-color: transparent }
.vst.m { background: var(--warn-soft); color: var(--warn); border-color: transparent }
.alist { display: flex; flex-direction: column; gap: 8px; max-width: 880px }
.al { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px }
.flagb { width: 32px; height: 32px; border-radius: 8px; border: 0; display: grid; place-items: center; background: var(--warn-soft); color: var(--warn) }
.al.res .flagb { background: var(--ok-soft); color: var(--ok) } .al.res .tx { color: var(--ink-2) }
.al .wh { font-size: 12.5px; color: var(--ink-3) }

/* ---------- informe (A4) ---------- */
.rtool { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px }
.rtool label.chk2 { display: inline-flex; gap: 7px; align-items: center; font-size: 13px; color: var(--ink-2) }
.paper { background: #fff; color: #142233; width: 210mm; max-width: 100%; min-height: 297mm; padding: 14mm 15mm 16mm; border-radius: 4px; box-shadow: var(--shadow-lg); font: 10.4pt/1.42 var(--f-body); position: relative; display: flex; flex-direction: column }
.paper .rhead { display: grid; grid-template-columns: 62px 1fr auto; gap: 14px; align-items: center; padding-bottom: 10px; border-bottom: 2.5px solid #1E78D8 }
.paper .rhead .umf-mark { width: 62px; height: 62px }
.paper .rhead .org b { display: block; font: 800 11.5pt var(--f-logo); color: #0E3A70; letter-spacing: .01em; text-transform: uppercase }
.paper .rhead .org span { display: block; font-size: 9pt; color: #47607A }
.paper .rhead .org .unit { font: 700 10.5pt var(--f-head); color: #1E78D8; text-transform: none }
.paper .rhead .tt { text-align: right; font-size: 9pt; color: #47607A }
.paper .rhead .tt b { display: block; font: 800 12.5pt var(--f-head); color: #0E1C2B; text-transform: uppercase; letter-spacing: .02em }
.paper .prelim { display: inline-block; margin-top: 4px; font-size: 8pt; font-weight: 700; color: #9A5B05; background: #FDF0D3; border-radius: 4px; padding: 1px 6px; text-transform: uppercase; letter-spacing: .05em }
.paper .pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 12px 0 4px; border: 1px solid #D5E2EE; border-radius: 6px; overflow: hidden }
.paper .pgrid div { padding: 5px 9px; border-right: 1px solid #E3EBF3; border-bottom: 1px solid #E3EBF3; font-size: 9.6pt }
.paper .pgrid div:nth-child(4n) { border-right: 0 }
.paper .pgrid i { font-style: normal; display: block; font-size: 7.6pt; color: #6A7F94; text-transform: uppercase; letter-spacing: .05em; font-weight: 600 }
.paper .pgrid .w2 { grid-column: span 2 }
.paper h3 { font: 800 9.6pt var(--f-head); color: #1561B8; text-transform: uppercase; letter-spacing: .07em; margin: 14px 0 6px; display: flex; align-items: center; gap: 8px }
.paper h3::after { content: ""; flex: 1; height: 1px; background: #D5E2EE }
.paper h4 { font: 700 10pt var(--f-head); margin: 10px 0 4px; color: #0E3A70 }
.paper table.rt { width: 100%; border-collapse: collapse; font-size: 9.6pt; margin: 2px 0 4px }
.paper table.rt th { text-align: left; font-size: 7.8pt; text-transform: uppercase; letter-spacing: .05em; color: #6A7F94; font-weight: 700; padding: 4px 8px; background: #F2F7FC; border-bottom: 1px solid #D5E2EE }
.paper table.rt td { padding: 4px 8px; border-bottom: 1px solid #EDF2F7; vertical-align: top }
.paper table.rt td.v { font-weight: 600; white-space: nowrap }
.paper table.rt td.ref { color: #6A7F94; font-size: 8.8pt; white-space: nowrap }
.paper .rs { font-weight: 600; background: none; padding: 0; margin: 0; border-radius: 0; font-size: inherit } .paper .rs.ok { color: #157A43 } .paper .rs.bad { color: #BE2631 } .paper .rs.warn { color: #9A5B05 } .paper .rs.na { color: #6A7F94 }
.paper .kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 26px }
.paper .kv div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dotted #D5E2EE; padding: 2px 0; font-size: 9.6pt }
.paper .kv dt { color: #47607A } .paper .kv dd { margin: 0; font-weight: 600; text-align: right }
.paper p { margin: 3px 0 }
.paper .ab { color: #BE2631; font-weight: 600 }
.paper .anat { font-size: 9.6pt }
.paper .concbox { margin-top: 6px; border: 1.5px solid #1E78D8; border-radius: 7px; padding: 9px 12px; background: #F4F9FE }
.paper .concbox p { margin: 3px 0 }
.paper .disc { margin-top: 12px; font-size: 7.9pt; color: #6A7F94; line-height: 1.45; border-top: 1px solid #E3EBF3; padding-top: 6px }
.paper .rsign { margin-top: auto; padding-top: 26px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px }
.paper .rsign .val { font-size: 8.4pt; color: #6A7F94 }
.paper .rsign .sig { border-top: 1px solid #142233; padding-top: 5px; min-width: 250px; text-align: center; font-size: 9.4pt }
.paper .rsign .sig b { display: block; font-family: var(--f-head) }
.paper .rfoot { margin-top: 10px; display: flex; justify-content: space-between; font-size: 7.6pt; color: #8A9BAD; border-top: 1px solid #E3EBF3; padding-top: 5px }
.paper .riskt td.v { font-family: var(--f-head) }
/* imágenes del examen */
.imggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; max-width: 1100px }
.imgc { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm) }
.imgc img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #000 }
.imgc figcaption { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px; align-items: center }
.imgc figcaption input[type=text] { grid-column: 1 / -1; grid-row: 2; height: 32px; font-size: 13px }
.rtool .rbtns { display: flex; gap: 6px }
.rtool .rbtns .btn.icon { width: 40px; height: 40px; border-radius: 10px }
.rtool .rbtns .btn.icon .ic { width: 20px; height: 20px }
.paper .rimgs { margin-top: 18px }
.paper .rimggrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm }
.paper .rimggrid figure { margin: 0; break-inside: avoid }
.paper .rimggrid img { display: block; width: 100%; max-height: 95mm; object-fit: contain; background: #000; border-radius: 2mm }
.paper .rimggrid figcaption { font-size: 8.6pt; color: #47607A; margin-top: 1.5mm; text-align: center }
.paper.pdf { width: 182mm; padding: 0; min-height: 0; box-shadow: none; border-radius: 0; display: block; margin: 0 }
.paper.pdf .rsign { margin-top: 26px }
/* informe minimalista */
.paper.min .rhead .org b { text-transform: none; font: 800 12.5pt var(--f-head); color: #0E3A70 }
.paper.min .rhead .org span { font-size: 9pt }
.paper .rgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px 20px; margin: 12px 0 4px; font-size: 9.8pt }
.paper .rgrid i { font-style: normal; display: block; font-size: 7.6pt; color: #6A7F94; text-transform: uppercase; letter-spacing: .05em; font-weight: 600 }
.paper .st { font-size: 8.4pt; font-weight: 700; margin-left: 5px; background: none; padding: 0; border-radius: 0; margin-top: 0 }
.paper .st.ok { color: #157A43; font-weight: 600 } .paper .st.bad { color: #BE2631 } .paper .st.warn { color: #9A5B05 }
.paper.min .kv { margin-bottom: 4px } .paper.min .anat { margin: 4px 0 2px }

/* ---------- usuario ---------- */
.uhead { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 20px 22px; margin-bottom: 18px; background: linear-gradient(120deg, var(--brand-50), var(--surface) 60%) }
.uhead h2 { font-size: 22px } .uhead .um { color: var(--ink-2); font-size: 13px; margin-top: 4px; display: flex; gap: 6px 16px; flex-wrap: wrap }
.utabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto }
.utabs button { display: inline-flex; gap: 7px; align-items: center; border: 0; background: none; padding: 10px 14px; border-bottom: 2px solid transparent; color: var(--ink-2); white-space: nowrap; font-weight: 500 }
.utabs button.cur { border-bottom-color: var(--brand-600); color: var(--accent) }
.kpis4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px }
.kcard { padding: 14px 16px } .kcard span { font-size: 12.5px; color: var(--ink-2) } .kcard b { display: block; font: 800 28px/1.15 var(--f-head); margin-top: 2px } .kcard small { color: var(--ink-3); font-size: 12px }
.charts { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; margin-bottom: 16px }
.chart { padding: 16px }
.chart h3 { margin-bottom: 12px }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding-top: 14px }
.bars .bc { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; min-width: 0 }
.bars .bv { font-size: 11px; color: var(--ink-2); font-weight: 600 }
.bars .b { width: 100%; max-width: 30px; border-radius: 4px 4px 2px 2px; background: var(--brand-500); min-height: 2px }
.bars .b.cur { background: var(--brand-700) }
.bars .bl { font-size: 11px; color: var(--ink-3) }
.hbars { display: flex; flex-direction: column; gap: 9px }
.hbars .hr { display: grid; grid-template-columns: 130px 1fr 34px; gap: 10px; align-items: center; font-size: 13px }
.hbars .tr { height: 10px; border-radius: 99px; background: var(--surface-3); overflow: hidden }
.hbars .tr i { display: block; height: 100%; border-radius: 99px; background: var(--tc, var(--brand-500)) }
.hbars .hv { text-align: right; font-weight: 600 }
.osec { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 18px; box-shadow: var(--shadow-sm) }
.osec h3 { margin-bottom: 4px } .osec > .small { margin: 0 0 14px }
.lrow { display: grid; grid-template-columns: 62px 1fr auto; gap: 10px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line-2) }
.lrow .id { color: var(--ink-3); font-size: 12.5px }
.lrow.hid input[type=text] { opacity: .5 }
.links { display: flex; flex-direction: column; gap: 6px }
.links .lk { display: grid; grid-template-columns: 230px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface-2) }
.links .lkl { font-weight: 600; font-size: 13px }
.links code { font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
details.refs > summary { cursor: pointer; list-style: none; display: flex; gap: 10px; align-items: baseline }
details.refs > summary::-webkit-details-marker { display: none }
details.refs > summary::before { content: '▸'; color: var(--ink-3); transition: transform .15s; display: inline-block }
details.refs[open] > summary::before { transform: rotate(90deg) }
@media (max-width: 860px) { .links .lk { grid-template-columns: 1fr auto auto } .links code { grid-column: 1 / -1; grid-row: 2 } }
.log { font-size: 13px; max-height: 300px; overflow: auto }
.log div { padding: 5px 0; border-bottom: 1px solid var(--line-2); color: var(--ink-2) }
.log b { color: var(--ink); font-weight: 500 }
.txl { display: flex; flex-direction: column; gap: 8px }
.txi { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2) }
.txi b { display: block } .txi .c2 { font-size: 11.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 600 } .txi p { margin: 4px 0 0; color: var(--ink-2); font-size: 13px; white-space: pre-wrap }
.vars { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0 }
.vars button { font: 500 11.5px var(--f-body); border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 2px 7px; color: var(--ink-2) }
.vars button:hover { border-color: var(--brand-500); color: var(--accent) }
.ok-msg { color: var(--ok); background: var(--ok-soft); padding: 8px 11px; border-radius: 8px; font-size: 13px; margin-top: 10px }
.banner { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); margin-bottom: 16px; font-size: 13.5px }
.banner .btn { margin-left: auto }

/* ---------- modal y cajón ---------- */
.mback { position: fixed; inset: 0; background: var(--backdrop); display: grid; place-items: center; z-index: 60; padding: 16px; animation: fade .15s ease }
@keyframes fade { from { opacity: 0 } }
.modal { background: var(--surface); border-radius: 16px; width: 100%; max-width: 580px; max-height: calc(100% - 20px); overflow: auto; padding: 22px; border: 1px solid var(--line); box-shadow: var(--shadow-lg); animation: rise .2s cubic-bezier(.16, 1, .3, 1) }
.modal.wide { max-width: 760px }
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.98) } }
.modal h2 { font-size: 19px; margin-bottom: 4px }
.modal .fgrid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin: 14px 0 }
.mact { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 18px }
.mact .grow { margin-right: auto }
.opt { display: flex; gap: 10px; align-items: flex-start; padding: 11px; border: 1px solid var(--line); border-radius: 10px; margin-top: 8px; cursor: pointer }
.opt:hover { border-color: var(--ink-3) }
.opt input { margin-top: 3px; accent-color: var(--brand-600) }
.opt span { display: block; font-size: 12.5px; color: var(--ink-2) }
.warn { color: var(--warn); background: var(--warn-soft); padding: 8px 10px; border-radius: 8px; font-size: 13px; margin-top: 8px }
.mhead { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 6px }
.mhead .tbar { width: 6px; align-self: stretch; border-radius: 4px; background: var(--tc) }
.stseg { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 }
.stseg button { border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 5px 12px; font-size: 13px; color: var(--ink-2) }
.stseg button[aria-pressed=true] { background: var(--brand-600); border-color: var(--brand-600); color: #fff; font-weight: 600 }
.pick { position: relative }
.pick .pl { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); max-height: 220px; overflow: auto; margin-top: 4px }
.pick .pl button { display: flex; justify-content: space-between; gap: 8px; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-bottom: 1px solid var(--line-2) }
.pick .pl button:hover { background: var(--primary-soft) }
.scrim { display: none }
.toast { position: fixed; left: 50%; bottom: 22px; translate: -50% 0; background: var(--navy-900); color: #fff; padding: 10px 16px; border-radius: 10px; box-shadow: var(--shadow-lg); z-index: 90; font-size: 13.5px; animation: rise .2s ease }

/* ---------- responsivo ---------- */
@media (max-width: 1100px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .hsec { grid-template-columns: 1fr 1fr } .hsec .sb { grid-column: 1/-1 }
  .charts { grid-template-columns: 1fr }
  .brand span { font-size: 12.5px }
}
@media (max-width: 860px) {
  .login { grid-template-columns: 1fr } .lart { padding: 34px 20px 28px } .lart img { width: 180px } .lart h1 { font-size: 30px; margin-top: 14px }
  .tnav button span { display: none }
  .tuser .who, .tuser .saved { display: none }
  .hero { grid-template-columns: 1fr; padding: 22px } .hero .umf-mark { display: none } .hero h1 { font-size: 24px }
  .hsec { grid-template-columns: 1fr }
  .navtoggle { display: inline-flex }
  .rbody { grid-template-columns: 1fr }
  .nav { position: fixed; top: 0; bottom: 0; left: 0; width: min(86vw, 310px); z-index: 40; transform: translateX(-102%); transition: transform .2s ease }
  .nav.open { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .25) }
  .scrim.open { display: block; position: fixed; inset: 0; z-index: 39; background: var(--backdrop) }
  .scr { padding: 16px 14px 60px }
  .pact { margin-left: 0 }
  .week { grid-template-columns: 1fr } .wday { min-height: 0 }
  .agday { grid-template-columns: 52px repeat(var(--rooms, 2), minmax(220px, 1fr)) }
  .page, .home { padding: 18px 14px 40px }
  .pcard { grid-template-columns: auto 1fr } .pcard .acts { grid-column: 1/-1; justify-content: flex-start }
  .tl li { grid-template-columns: 84px 1fr; } .tl .tops { grid-column: 1/-1 }
  .kpis4 { grid-template-columns: 1fr 1fr }
  .uhead { grid-template-columns: auto 1fr } .uhead > :last-child { grid-column: 1/-1 }
  .search { min-width: 0; width: 100% }
  .concl { grid-template-columns: 1fr } .stamps { position: static; max-height: none } .concl .fgrid { grid-template-columns: 1fr }
}
@media screen and (max-width: 860px) { .paper .rgrid { grid-template-columns: repeat(2, 1fr) } .paper { padding: 18px 16px; min-height: 0 } .paper .pgrid { grid-template-columns: repeat(2, 1fr) } .paper .kv { grid-template-columns: 1fr } }
@media (max-width: 560px) { .tiles { grid-template-columns: 1fr } .tile { min-height: 0 } .brand b, .tuser .avatar, .tuser .out span { display: none } .top { gap: 8px; padding: 0 10px } .tnav button { padding: 8px 9px } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important } }

/* ---------- impresión ---------- */
@page { size: A4; margin: 12mm 14mm 13mm }
@media print {
  html, body { background: #fff !important; height: auto }
  .top, .patbar, .nav, .noprint, .scrim, #splash, .toast { display: none !important }
  #app, .record, .rbody, .main, .scr { display: block !important; height: auto !important; overflow: visible !important; padding: 0 !important }
  .paper { box-shadow: none; border-radius: 0; width: auto; min-height: 0; margin: 0; padding: 0; display: block }
  .paper .rsign { margin-top: 26px }
  .paper table.rt tr, .paper .concbox, .paper .rsign { break-inside: avoid }
  .paper h3 { break-after: avoid }
  .paper .rimgs { break-before: page }
  .paper .rsec { break-inside: avoid }
  .paper .pgrid { grid-template-columns: repeat(4, 1fr) } .paper .kv { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .paper * { -webkit-print-color-adjust: exact; print-color-adjust: exact }
}