/* Laboratorio E/R — Liquid Glass design layer. Version 2.2. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;650;700;750;800&display=swap");
:root {
  --paper: #f3f5fa;
  --surface: rgba(255,255,255,.68);
  --ink: #182033;
  --muted: #657087;
  --rule: rgba(116,130,158,.22);
  --grid: rgba(124,142,174,.17);
  --ent: #3478f6; --ent-hl: rgba(73,133,255,.16);
  --att: #159b70; --att-hl: rgba(25,174,126,.15);
  --rel: #e18a28; --rel-hl: rgba(255,171,66,.18);
  --gen: #9561e8; --gen-hl: rgba(156,111,242,.16);
  --focus: #3478f6; --warn: #a35d08; --ok: #159b70;
  --f-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Helvetica Neue", Arial, sans-serif;
  --f-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Helvetica Neue", Arial, sans-serif;
  --glass-shadow: 0 18px 50px rgba(42,56,86,.09), inset 0 1px 0 rgba(255,255,255,.72);
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#090d16;--surface:rgba(24,31,46,.72);--ink:#edf2ff;--muted:#a1acc3;--rule:rgba(158,174,207,.19);--grid:rgba(158,174,207,.11);--ent:#8bb6ff;--ent-hl:rgba(69,124,222,.24);--att:#6ce0b0;--att-hl:rgba(35,159,111,.2);--rel:#ffc17d;--rel-hl:rgba(191,113,34,.22);--gen:#c5a1ff;--gen-hl:rgba(136,86,207,.22);--focus:#8bb6ff;--warn:#ffd08b;--ok:#6ce0b0;--glass-shadow:0 18px 55px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.07)}}
:root[data-theme="dark"]{--paper:#090d16;--surface:rgba(24,31,46,.72);--ink:#edf2ff;--muted:#a1acc3;--rule:rgba(158,174,207,.19);--grid:rgba(158,174,207,.11);--ent:#8bb6ff;--ent-hl:rgba(69,124,222,.24);--att:#6ce0b0;--att-hl:rgba(35,159,111,.2);--rel:#ffc17d;--rel-hl:rgba(191,113,34,.22);--gen:#c5a1ff;--gen-hl:rgba(136,86,207,.22);--focus:#8bb6ff;--warn:#ffd08b;--ok:#6ce0b0;--glass-shadow:0 18px 55px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.07)}
:root[data-theme="light"]{color-scheme:light}
html{min-height:100%;background:var(--paper);color-scheme:light dark}
body{min-height:100vh;background:radial-gradient(ellipse at 8% 0%,rgba(117,166,255,.17),transparent 34%),radial-gradient(ellipse at 94% 14%,rgba(186,145,255,.15),transparent 32%),var(--paper);color:var(--ink);letter-spacing:-.012em}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) body{background:radial-gradient(ellipse at 8% 0%,rgba(52,105,213,.17),transparent 34%),radial-gradient(ellipse at 94% 14%,rgba(128,79,195,.15),transparent 32%),var(--paper)}}
:root[data-theme="dark"] body{background:radial-gradient(ellipse at 8% 0%,rgba(52,105,213,.17),transparent 34%),radial-gradient(ellipse at 94% 14%,rgba(128,79,195,.15),transparent 32%),var(--paper)}
button,input,select,textarea{font-family:var(--f-body);letter-spacing:inherit}
button{transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease,opacity .18s ease}
button:not(:disabled):active{transform:scale(.975)}
:focus-visible{outline:3px solid color-mix(in srgb,var(--focus) 75%,transparent);outline-offset:3px}
.app{max-width:1720px;padding:22px clamp(14px,2.2vw,34px) 48px;gap:20px}
.top,.dash-header{position:relative;z-index:2;border:1px solid var(--rule);border-radius:24px;padding:18px 22px;background:var(--surface);backdrop-filter:blur(28px) saturate(155%);-webkit-backdrop-filter:blur(28px) saturate(155%);box-shadow:var(--glass-shadow)}
.brand h1{font-size:clamp(1.65rem,2.6vw,2.3rem);letter-spacing:-.065em;font-weight:760}
.brand .eyebrow,.eyebrow{letter-spacing:.13em;font-size:.68rem}
.brand .slash{color:#5b8fff}
.ex-bar{gap:8px}
.user-status,.history-top{border-color:var(--rule)}
.btn{border:1px solid var(--rule);border-radius:999px;padding:.55rem .9rem;background:rgba(255,255,255,.46);font-size:.84rem;font-weight:650;box-shadow:0 2px 7px rgba(28,44,75,.035);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
:root[data-theme="dark"] .btn{background:rgba(255,255,255,.055)}
.btn:hover{border-color:color-mix(in srgb,var(--focus) 50%,var(--rule));box-shadow:0 5px 16px rgba(47,85,160,.1);transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,#4d8cff,#3267e8);color:#fff;border-color:transparent;box-shadow:0 7px 18px rgba(58,111,233,.23)}
.btn.success{background:linear-gradient(135deg,#20b786,#0d9469);border-color:transparent;color:white}
.btn.danger{color:#dc5360;border-color:rgba(220,83,96,.26);background:rgba(220,83,96,.07)}
.grid{grid-template-columns:minmax(330px, .88fr) minmax(0,1.32fr);gap:20px;align-items:start}
@media(max-width:1050px){.grid{grid-template-columns:minmax(0,1fr)}}
.col{gap:20px}
.panel,.exercise-card,.auth-card,.modal-box,.manager-section{border:1px solid var(--rule);border-radius:22px;background:var(--surface);backdrop-filter:blur(26px) saturate(145%);-webkit-backdrop-filter:blur(26px) saturate(145%);box-shadow:var(--glass-shadow)}
.panel{padding:21px 22px}
.panel h2{font-size:1.2rem;letter-spacing:-.035em;font-weight:730}
.hint{line-height:1.65}
input[type=text],input[type=password],input[type=number],select,textarea,.custom-card-input{border:1px solid var(--rule);border-radius:12px;padding:.65rem .8rem;background:color-mix(in srgb,var(--surface) 76%,var(--paper));transition:border-color .18s,box-shadow .18s}
input:focus,select:focus,textarea:focus{border-color:var(--focus);box-shadow:0 0 0 4px color-mix(in srgb,var(--focus) 13%,transparent);outline:none}
.tool{border:1px solid var(--rule);border-radius:15px;padding:.55rem .85rem;background:color-mix(in srgb,var(--surface) 75%,var(--paper));font-weight:650}
.tool[aria-pressed="true"]{box-shadow:0 4px 15px rgba(42,65,105,.08)}
#text{border:1px solid var(--rule);border-radius:17px;background:color-mix(in srgb,var(--surface) 65%,var(--paper));line-height:2.05;padding:18px}
.item-drop,.row,.reading-card{border:1px solid var(--rule);border-radius:15px;background:color-mix(in srgb,var(--surface) 76%,var(--paper))}
.item-drop summary{padding:11px 13px}
.item-drop .drop-body{border-color:var(--rule);padding:4px 13px 13px}
.manager-summary{background:transparent;padding:13px 15px}
.manager-content{padding:12px 15px 15px}
.board{border:1px solid var(--rule);border-radius:19px;background:color-mix(in srgb,var(--surface) 65%,var(--paper));box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.board-scroll{overscroll-behavior:contain}
#dg{min-height:440px}
.cards{border:1px solid var(--rule);border-radius:16px;background:color-mix(in srgb,var(--surface) 72%,var(--paper));padding:10px 12px;gap:7px}
.chip{border:1px solid var(--rule);border-radius:999px;padding:.42rem .72rem;background:var(--surface);font-size:.82rem}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:transparent}
.zoom-controls{border:1px solid var(--rule)!important;border-radius:999px!important;background:color-mix(in srgb,var(--surface) 76%,var(--paper))!important;padding:4px!important;gap:3px!important}
.zoom-controls .btn{box-shadow:none;border-color:transparent;background:transparent;padding:.4rem .65rem}
.progress{padding:7px 10px;border:1px solid var(--rule);border-radius:999px;background:color-mix(in srgb,var(--surface) 72%,var(--paper));}
.progress .bar{width:85px;height:7px}
.dg-head{align-items:center}
#pop{border:1px solid var(--rule);border-radius:14px;background:var(--surface);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 14px 35px rgba(0,0,0,.16);padding:7px}
#pop button{border-radius:9px;border-color:var(--rule);background:color-mix(in srgb,var(--surface) 75%,var(--paper))}
.modal{background:rgba(10,16,29,.38);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:18px}
.modal-box{padding:26px;max-width:min(650px,100%);}
#toast{border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(23,31,49,.9);color:#fff;box-shadow:0 12px 35px rgba(0,0,0,.22);backdrop-filter:blur(20px);padding:.75rem 1.15rem;max-width:calc(100vw - 28px)}
/* Login screen */
body:has(.auth-card){display:flex;align-items:center;justify-content:center;padding:24px;min-height:100vh}
.auth-card{padding:clamp(26px,4vw,42px);max-width:440px!important;border-radius:28px}
.auth-header h1{font-size:2.25rem;letter-spacing:-.07em}
.auth-header{margin-bottom:28px}
.auth-actions .btn{padding:.75rem}
/* Dashboard */
.dash-container{max-width:1450px!important;margin:28px auto!important;padding:0 clamp(14px,2.2vw,34px)!important}
.dash-header{border-bottom:1px solid var(--rule)!important;margin-bottom:24px!important;padding:18px 22px!important}
.dash-header h1{font-size:clamp(1.8rem,3vw,2.4rem);letter-spacing:-.06em}
.exercise-grid{gap:18px!important}
.exercise-card{padding:20px!important;min-height:205px;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.exercise-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--focus) 38%,var(--rule));box-shadow:0 22px 55px rgba(42,56,86,.13),inset 0 1px 0 rgba(255,255,255,.65)}
.card-title-row h3{font-size:1.18rem;letter-spacing:-.03em}
.card-actions{border-color:var(--rule)!important;gap:7px!important}
.empty-state{border:1px dashed var(--rule);border-radius:22px;background:var(--surface);padding:56px 20px;backdrop-filter:blur(20px)}
/* Fullscreen editor remains useful on laptop and tablet */
#diagramPanel:fullscreen{background:var(--paper);backdrop-filter:none;border-radius:0;padding:clamp(12px,2vw,28px)}
#diagramPanel:fullscreen .board{min-height:65vh}
#diagramPanel:fullscreen .board-scroll{max-height:calc(100vh - 245px)}
@media(max-width:700px){.app{padding:10px 10px 28px;gap:12px}.top,.dash-header{border-radius:18px;padding:15px!important}.ex-bar{justify-content:flex-start}.panel{padding:16px;border-radius:18px}.dg-head>div{max-width:100%}.progress{font-size:.72rem}.progress .bar{width:48px}.cards{align-items:center}.dash-header{align-items:flex-start!important}.dash-header>div:last-child{justify-content:flex-start!important;flex-wrap:wrap}.exercise-grid{grid-template-columns:1fr!important}.auth-card{border-radius:22px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Floating macOS-inspired editor controls and contextual inspector */
.glass-dock{position:fixed;z-index:30;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid rgba(255,255,255,.42);border-radius:24px;background:color-mix(in srgb,var(--surface) 76%,transparent);backdrop-filter:blur(34px) saturate(180%);-webkit-backdrop-filter:blur(34px) saturate(180%);box-shadow:0 18px 48px rgba(18,31,58,.2),inset 0 1px 0 rgba(255,255,255,.55)}
.dock-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:42px;height:43px;padding:4px 9px;border:1px solid transparent;border-radius:15px;background:transparent;color:var(--ink);font-size:1.1rem;line-height:1;cursor:pointer;transition:transform .18s,background .18s,box-shadow .18s}
.dock-btn span{font-size:.59rem;font-weight:650;white-space:nowrap}.dock-btn:hover,.dock-btn.active{background:color-mix(in srgb,var(--focus) 15%,var(--surface));border-color:color-mix(in srgb,var(--focus) 20%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}.dock-btn:active{transform:scale(.94)}
.dock-separator{height:27px;width:1px;background:var(--rule);margin:0 2px}
.glass-inspector{position:fixed;z-index:25;right:22px;top:50%;transform:translateY(-50%) translateX(0);width:min(270px,calc(100vw - 28px));padding:18px;border:1px solid rgba(255,255,255,.38);border-radius:22px;background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(32px) saturate(165%);-webkit-backdrop-filter:blur(32px) saturate(165%);box-shadow:0 20px 55px rgba(17,29,52,.18),inset 0 1px 0 rgba(255,255,255,.45);opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;}
.glass-inspector.inspector-visible{opacity:1;pointer-events:auto}.glass-inspector.inspector-collapsed{opacity:0;pointer-events:none;transform:translateY(-50%) translateX(18px)}.inspector-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.inspector-top h3{margin:3px 0 0;font-size:1.1rem;letter-spacing:-.035em;overflow-wrap:anywhere}.inspector-dot{width:10px;height:10px;flex:0 0 auto;border-radius:50%;background:var(--focus);box-shadow:0 0 0 5px color-mix(in srgb,var(--focus) 14%,transparent)}.inspector-subtitle{margin:9px 0;color:var(--muted);font-size:.8rem}.inspector-rule{height:1px;background:var(--rule);margin:13px 0}.inspector-detail{font-size:.84rem;line-height:1.6;color:var(--ink);margin-bottom:15px}.inspector-action{width:100%;justify-content:center}.inspector-action:disabled{opacity:.45;cursor:not-allowed}.inspector-close{position:absolute;top:8px;right:9px;width:25px;height:25px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:1.2rem;cursor:pointer}
body:has(.glass-dock){padding-bottom:70px}.glass-dock button:focus-visible,.glass-inspector button:focus-visible{outline-offset:2px}
@media(max-width:700px){.glass-dock{bottom:10px;gap:3px;padding:7px;border-radius:20px;max-width:calc(100vw - 16px)}.dock-btn{min-width:35px;height:39px;padding:3px 6px}.dock-btn span{font-size:.53rem}.glass-inspector{right:10px;top:auto;bottom:75px;transform:none;width:min(270px,calc(100vw - 20px))}.glass-inspector.inspector-collapsed{transform:translateY(10px)}}
@media(prefers-reduced-motion:reduce){.glass-dock,.glass-inspector,.dock-btn{transition:none}}

/* Refined Cupertino typography */
.brand { position: relative; }
.brand::after { content: none; }
.top .brand h1 { letter-spacing: -.055em; }
.top .eyebrow, .panel > .eyebrow, .dg-head .eyebrow { letter-spacing: .16em; }
.btn, .tool, .dock-btn, .chip { letter-spacing: -.015em; }

/* Typography consistency across Apple, Windows, Android and Linux. */
html, body, button, input, select, textarea { font-family: var(--f-body); }
h1, h2, h3, h4, .brand, .manager-title { font-family: var(--f-display); }

/* App identity: compact E/R mark and consistent product name */
.brand-lockup,.dash-brand-lockup{display:flex;align-items:center;gap:15px;min-width:0}
.brand-copy{min-width:0}
.er-logo{width:54px;height:54px;flex:0 0 54px;display:flex;align-items:center;justify-content:center;gap:0;border-radius:17px;color:#fff;background:linear-gradient(145deg,#5c9cff 0%,#4778ee 48%,#805fe8 100%);box-shadow:0 8px 22px rgba(73,112,230,.28),inset 0 1px 0 rgba(255,255,255,.45);font-family:var(--f-display);font-size:1.15rem;font-weight:800;letter-spacing:-.09em;transform:translateZ(0)}
.er-logo i{font-style:normal;font-size:1.35rem;font-weight:500;opacity:.78;margin:0 .015em;transform:translateY(-1px)}
.brand-lockup .brand-copy h1{margin:0}
.dash-brand-lockup .er-logo{width:48px;height:48px;flex-basis:48px;border-radius:15px;font-size:1.05rem}
.auth-logo-lockup{display:flex;justify-content:center;margin:0 0 16px}
.auth-logo-lockup .er-logo{width:62px;height:62px;flex-basis:62px;border-radius:20px;font-size:1.35rem}
.auth-header .eyebrow{margin-top:0}
@media(max-width:700px){.brand-lockup,.dash-brand-lockup{gap:11px}.er-logo{width:44px;height:44px;flex-basis:44px;border-radius:14px;font-size:1rem}.dash-brand-lockup .er-logo{width:42px;height:42px;flex-basis:42px}.brand-lockup .brand-copy h1{font-size:1.45rem}.dash-header{gap:14px}}


/* Responsive refinement — iPadOS, tablets and large phones */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-width: 320px; }
button, .btn, .tool, input, select, textarea { touch-action: manipulation; }
button, .btn, .tool { min-height: 40px; }
input, select, textarea { max-width: 100%; }
.app, .panel, .grid, .top, .brand, .board, .board-scroll { min-width: 0; }
.board-scroll { max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.canvas { max-width: 100%; }
#dg { touch-action: pan-x pan-y; }
@media (max-width: 1100px) {
  .app { padding: 14px 12px calc(28px + env(safe-area-inset-bottom)); gap: 14px; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .panel { padding: 14px; }
  .canvas { min-width: 640px; }
  .board-scroll { width: 100%; }
  .top { align-items: flex-start; }
}
@media (max-width: 820px) {
  .brand h1 { font-size: clamp(1.25rem, 4vw, 1.75rem); }
  .top { gap: 10px; }
  .top .actions, .top .header-actions { display:flex; flex-wrap:wrap; gap:8px; }
  .tools, .dg-tools { gap: 7px; }
  .tool { padding: .45rem .75rem; }
  .history-top { margin-left: 0; padding-left: 0; border-left: 0; }
  .board { min-height: 300px; }
  .board-scroll { max-height: 65vh; }
  .exercise-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
  .dash-container { margin: 18px auto; padding-inline: 12px; }
}
@media (max-width: 600px) {
  .app { padding: 10px 9px calc(22px + env(safe-area-inset-bottom)); gap: 10px; }
  .top { display:flex; flex-direction:column; align-items:stretch; }
  .top > * { max-width:100%; }
  .brand { gap:10px; }
  .brand-copy { min-width:0; }
  .top .actions, .top .header-actions { width:100%; }
  .top button, .top .btn { flex: 1 1 auto; }
  .panel { border-radius: 14px; padding: 12px; }
  .panel h2 { font-size: 1.05rem; }
  .canvas { min-width: 560px; }
  .board-scroll { max-height: 58vh; }
  .zoom-controls { flex-wrap:wrap; }
  .dg-tools > *, .tools > * { max-width:100%; }
  .field-stack input, .field-stack select, .field-stack textarea { width:100%; }
  .dash-container { margin: 12px auto; padding-inline: 10px; }
  .dash-header { align-items:stretch; }
  .dash-header > * { max-width:100%; }
  .exercise-grid { grid-template-columns: minmax(0, 1fr); }
  .exercise-card { padding: 14px; }
  .auth-card { width:calc(100% - 24px); padding:24px 18px; }
  table { display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}
@media (pointer: coarse) {
  button, .btn, .tool, input[type=checkbox], input[type=radio], select { min-height:44px; }
  input, select, textarea { font-size:16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}