:root { --navy:#12344d; --blue:#176b87; --cyan:#44a7b8; --ink:#18303f; --muted:#657985; --line:#dce7eb; --bg:#f4f8fa; --white:#fff; --danger:#b42318; --ok:#18794e; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
.training-banner { position:sticky; top:0; z-index:1000; padding:9px 16px; color:#fff; background:#8a3ffc; font-weight:850; letter-spacing:.06em; text-align:center; box-shadow:0 2px 10px rgba(50,20,90,.25); }
.training-mode { --navy:#45207a; --blue:#7040a8; --cyan:#a36cdf; --bg:#f8f3ff; }
.training-mode .sidebar { border-right-color:#bda1dd; }
a { color:var(--blue); }
.topbar { min-height:74px; padding:12px clamp(20px,4vw,64px); display:flex; align-items:center; justify-content:space-between; gap:24px; color:white; background:linear-gradient(110deg,var(--navy),#18516b); }
.brand { display:flex; align-items:center; gap:12px; color:white; text-decoration:none; font-weight:700; line-height:1.15; }
.brand small { font-weight:500; opacity:.8; }
.brand-mark { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:#fff; color:var(--navy); }
nav { display:flex; gap:20px; flex-wrap:wrap; } nav a { color:white; text-decoration:none; }
.container { width:min(1180px,calc(100% - 40px)); margin:36px auto 70px; }
footer { padding:24px; color:var(--muted); text-align:center; border-top:1px solid var(--line); }
h1,h2 { margin:.2em 0 .45em; line-height:1.18; color:var(--navy); } h1 { font-size:clamp(28px,3vw,40px); } h2 { font-size:22px; }
.eyebrow { margin:0; color:var(--blue); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.subtle { color:var(--muted); }
.page-heading { margin-bottom:24px; display:flex; justify-content:space-between; align-items:end; gap:24px; }
.status { padding:10px 14px; border:1px solid #bce2d1; border-radius:999px; background:#effaf5; color:var(--ok); font-weight:650; }
.status span { display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; background:#29a36a; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.card,.form-card,.auth-card { padding:28px; border:1px solid var(--line); border-radius:16px; background:var(--white); box-shadow:0 12px 35px rgba(23,55,72,.06); }
.muted-card { background:#eef4f6; box-shadow:none; }
.auth-shell { min-height:60vh; display:grid; place-items:center; }
.auth-card { width:min(440px,100%); } .auth-card.wide { width:min(620px,100%); }
form { margin-top:22px; } .field { margin-bottom:17px; } .field label { display:block; margin-bottom:6px; font-weight:700; }
input,select { width:100%; padding:11px 12px; border:1px solid #aec2cb; border-radius:8px; background:white; color:var(--ink); font:inherit; }
input:focus,select:focus { outline:3px solid rgba(68,167,184,.25); border-color:var(--blue); }
button,.button { display:inline-block; padding:11px 17px; border:0; border-radius:8px; background:var(--blue); color:white; font:inherit; font-weight:750; text-decoration:none; cursor:pointer; }
button:hover,.button:hover { background:var(--navy); }
.errorlist { margin:6px 0 0; padding-left:20px; color:var(--danger); }
.alert { margin-bottom:15px; padding:12px 15px; border-radius:9px; background:#e9f5f8; border:1px solid #b9dfe7; }
.alert-error { color:var(--danger); background:#fff1f0; border-color:#ffc9c5; }
.alert-success { color:var(--ok); background:#effaf5; border-color:#bce2d1; }
.secret { margin:18px 0; padding:16px; overflow-wrap:anywhere; border:1px dashed var(--cyan); border-radius:9px; background:#eff8fa; font:700 18px/1.4 ui-monospace,monospace; letter-spacing:.09em; text-align:center; }
.wrap { display:block; margin-top:10px; overflow-wrap:anywhere; }
.form-card { max-width:820px; margin:auto; } .form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 22px; }
.full-width { grid-column:1/-1; }
.checkbox { display:flex; align-items:center; gap:9px; } .checkbox input { width:auto; order:-1; } .checkbox label { margin:0; }
.actions { display:flex; align-items:center; gap:18px; }
.table-shell { overflow:auto; border:1px solid var(--line); border-radius:13px; background:white; }
table { width:100%; border-collapse:collapse; } th,td { padding:13px 15px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; } th { background:#edf4f6; color:var(--navy); font-size:13px; } tbody tr:last-child td { border-bottom:0; }
.pill { padding:4px 8px; border-radius:999px; font-size:12px; font-weight:750; } .pill.ok { background:#e2f4eb; color:var(--ok); } .pill.warn { background:#fff3d6; color:#8a5a00; }
.filters { margin:0 0 18px; display:flex; align-items:end; gap:12px; } .filters label { min-width:190px; font-weight:700; } .filters label input,.filters label select { margin-top:5px; }
.filters .grow { flex:1; }
.pagination { margin-top:15px; color:var(--muted); }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.details { display:grid; grid-template-columns:minmax(120px,.8fr) 1.4fr; gap:9px 18px; margin:18px 0 0; } .details dt { color:var(--muted); } .details dd { margin:0; font-weight:650; }
.action-bar { display:flex; gap:10px; flex-wrap:wrap; margin:22px 0; } .button.secondary { color:var(--navy); background:#e5f0f3; }
.section-block { margin-top:32px; } .section-title { display:flex; justify-content:space-between; align-items:end; }
.warning-panel { margin:18px 0; padding:18px; border:1px solid #f0c26d; border-radius:10px; background:#fff8e8; }
.danger-button { background:#a7352e; } .danger-button:hover { background:#7d2722; }
.danger-zone { margin-top:36px; padding:22px; border:1px solid #e7aaa6; border-radius:12px; background:#fff6f5; } .danger-zone form { display:flex; gap:10px; } .danger-zone input { flex:1; }
textarea { width:100%; padding:11px 12px; border:1px solid #aec2cb; border-radius:8px; color:var(--ink); font:inherit; resize:vertical; }
.wrap-cell { white-space:normal; min-width:220px; }
.compact { margin-bottom:15px; }
.inline-form { margin:0; }
.checkbox-list ul { margin:8px 0 0; padding:12px 16px; max-height:260px; overflow:auto; list-style:none; border:1px solid var(--line); border-radius:8px; background:#f9fbfc; }
.checkbox-list li { margin:7px 0; } .checkbox-list li label { display:flex; align-items:center; gap:8px; font-weight:500; } .checkbox-list input { width:auto; }
.result-entry-card { max-width:1180px; }
.result-entry-layout { display:grid; grid-template-columns:minmax(230px,.72fr) minmax(0,2fr); gap:24px; align-items:start; }
.result-entry-layout.without-options { grid-template-columns:minmax(0,1fr); }
.optional-parameter-panel { padding:20px; position:sticky; top:92px; border:1px solid var(--line); border-radius:12px; background:var(--surface-soft); }
.optional-parameter-panel h2 { margin:.25rem 0 .5rem; font-size:18px; }
.optional-parameter-panel .subtle { margin:0 0 14px; font-size:13px; }
.optional-parameter-list { display:flex; flex-direction:column; gap:7px; }
.optional-parameter-choice { padding:9px 10px; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:9px; border:1px solid var(--border); border-radius:8px; background:var(--surface-raised); }
.optional-parameter-choice input { width:auto; margin:0; }
.optional-parameter-choice label { margin:0; font-weight:700; cursor:pointer; }
.optional-parameter-choice .errorlist { grid-column:1/-1; }
.result-parameter-panel { min-width:0; }
.result-parameter-card,.result-observation-card { margin-bottom:16px; padding:20px; border:1px solid var(--border); border-radius:12px; background:var(--surface-raised); }
.result-parameter-name { margin:0 0 16px; padding-bottom:10px; border-bottom:2px solid color-mix(in srgb,var(--primary-2) 35%,var(--border)); color:var(--primary); font-size:18px; }
.reference-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.result-parameter-card .field:last-child,.result-observation-card .field:last-child { margin-bottom:0; }
.result-entry-card>.actions { margin-top:22px; padding-top:20px; border-top:1px solid var(--border); }
@media (max-width:760px) { .topbar,.page-heading { align-items:flex-start; flex-direction:column; } .grid,.form-grid,.detail-grid { grid-template-columns:1fr; } .filters { align-items:stretch; flex-direction:column; } .filters label { width:100%; } .danger-zone form { flex-direction:column; } }
@media (max-width:900px) { .result-entry-layout { grid-template-columns:1fr; } .optional-parameter-panel { position:static; } }
@media (max-width:650px) { .reference-fields { grid-template-columns:1fr; gap:0; } }

/* Entrega 9 · Interfaz operativa por rol */
:root {
  --sidebar-width:248px; --sidebar-collapsed:76px; --topbar-height:72px;
  --surface:#ffffff; --surface-soft:#f6f8fb; --surface-raised:#ffffff;
  --text:#233746; --text-soft:#71808e; --border:#e1e8ee;
  --primary:#133d5b; --primary-2:#176b87; --accent:#00a99d;
  --shadow:0 8px 26px rgba(20,54,75,.07);
}
[data-theme="dark"] {
  --bg:#111b23; --surface:#18252f; --surface-soft:#14212a; --surface-raised:#1d2c37;
  --text:#e7eef3; --text-soft:#9eb0bc; --border:#31424e; --navy:#dcebf4; --ink:#e7eef3; --muted:#9eb0bc; --white:#18252f;
  --line:#31424e; --shadow:0 10px 30px rgba(0,0,0,.24);
}
[data-theme="dark"] .theme-light{display:none}.theme-dark{display:none}[data-theme="dark"] .theme-dark{display:inline}
body { background:var(--bg); color:var(--text); }
.app-shell { min-height:100vh; display:grid; grid-template-columns:var(--sidebar-width) minmax(0,1fr); transition:grid-template-columns .2s ease; }
.sidebar { position:sticky; top:0; height:100vh; z-index:30; display:flex; flex-direction:column; border-right:1px solid var(--border); background:var(--surface); overflow:hidden; }
.sidebar-brand { min-height:var(--topbar-height); padding:12px 18px; display:flex; align-items:center; gap:12px; color:var(--primary); text-decoration:none; border-bottom:1px solid var(--border); }
.sidebar-logo { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:12px; color:#fff; background:linear-gradient(145deg,var(--primary),var(--primary-2)); font-weight:850; letter-spacing:.04em; box-shadow:0 5px 14px rgba(19,61,91,.2); }
.sidebar-brand-copy { min-width:0; display:flex; flex-direction:column; line-height:1.15; white-space:nowrap; }
.sidebar-brand-copy strong { font-size:14px; }.sidebar-brand-copy small { margin-top:4px; color:var(--text-soft); font-size:10px; }
.sidebar-nav { padding:18px 12px; display:flex; flex:1; flex-direction:column; gap:5px; overflow-y:auto; }
.sidebar-nav a,.sidebar-toggle { min-height:44px; padding:9px 11px; display:flex; align-items:center; gap:12px; border:0; border-radius:10px; background:transparent; color:var(--text-soft); text-decoration:none; font-weight:650; white-space:nowrap; }
.sidebar-nav a:hover,.sidebar-nav a.active,.sidebar-toggle:hover { color:var(--primary-2); background:rgba(23,107,135,.09); }
[data-theme="dark"] .sidebar-nav a.active { color:#75d9e1; background:rgba(68,167,184,.13); }
.nav-icon { width:26px; height:26px; flex:0 0 26px; display:grid; place-items:center; border:1px solid currentColor; border-radius:8px; font-size:12px; font-weight:800; }
.nav-section { margin:18px 12px 5px; color:var(--text-soft); font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.sidebar-toggle { margin:10px 12px 18px; cursor:pointer; text-align:left; }
.app-workspace { min-width:0; display:flex; flex-direction:column; min-height:100vh; }
.app-topbar { min-height:var(--topbar-height); padding:0 28px; position:sticky; top:0; z-index:25; display:flex; align-items:center; gap:16px; border-bottom:1px solid var(--border); background:color-mix(in srgb,var(--surface) 94%,transparent); backdrop-filter:blur(12px); }
.topbar-spacer { flex:1; }.topbar-tools { display:flex; align-items:center; gap:10px; }
.icon-button { width:42px; height:42px; padding:0; position:relative; display:grid; place-items:center; border:1px solid var(--border); border-radius:11px; color:var(--primary-2); background:var(--surface); font-size:20px; cursor:pointer; }
.icon-button:hover { color:var(--accent); background:var(--surface-soft); }
.topbar-menu { position:relative; }.topbar-menu summary { list-style:none; }.topbar-menu summary::-webkit-details-marker{display:none}
.notification-badge { position:absolute; top:-5px; right:-5px; min-width:19px; height:19px; padding:0 5px; display:grid; place-items:center; border:2px solid var(--surface); border-radius:999px; color:#fff; background:#e45858; font-size:10px; font-weight:800; }
.menu-panel { width:340px; padding:10px; position:absolute; top:calc(100% + 12px); right:0; z-index:50; border:1px solid var(--border); border-radius:14px; background:var(--surface-raised); box-shadow:0 18px 55px rgba(16,47,66,.2); }
.menu-heading { padding:6px 8px 10px; display:flex; justify-content:space-between; border-bottom:1px solid var(--border); }.menu-heading a{font-size:12px}
.notification-item { padding:11px 9px; display:flex; flex-direction:column; gap:3px; border-bottom:1px solid var(--border); color:var(--text); text-decoration:none; }.notification-item:last-child{border-bottom:0}.notification-item:hover{background:var(--surface-soft)}.notification-item span{color:var(--text-soft);font-size:12px}
.user-summary { min-width:230px; display:flex; align-items:center; gap:10px; color:var(--text); cursor:pointer; list-style:none; }.user-summary::-webkit-details-marker{display:none}
.user-avatar { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(145deg,#d49a24,#9a6320); font-weight:800; }
.user-copy { flex:1; display:flex; flex-direction:column; line-height:1.25; }.user-copy strong{font-size:13px}.user-copy small{color:var(--text-soft);font-size:11px}.user-panel{width:240px;padding:16px}.user-panel p{margin:0 0 13px}.user-panel a{display:block;padding-top:12px;border-top:1px solid var(--border)}
.mobile-menu { display:none; width:42px; height:42px; padding:0; }
.app-workspace>.container { width:min(1440px,calc(100% - 48px)); margin:30px auto 60px; flex:1; }
.app-workspace>footer { background:var(--surface); }
.sidebar-is-collapsed .app-shell { grid-template-columns:var(--sidebar-collapsed) minmax(0,1fr); }
.sidebar-is-collapsed .nav-label,.sidebar-is-collapsed .sidebar-brand-copy { display:none; }
.sidebar-is-collapsed .sidebar-brand { padding-inline:17px; }.sidebar-is-collapsed .sidebar-nav{padding-inline:12px}.sidebar-is-collapsed .sidebar-toggle{padding:9px 11px}.sidebar-is-collapsed .sidebar-toggle .nav-icon{transform:rotate(180deg)}
.dashboard-heading { margin-bottom:24px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }.dashboard-heading h1{font-size:30px}.dashboard-heading p{margin-bottom:0}.quick-actions{display:flex;flex-wrap:wrap;gap:9px}
.metric-section { margin:0 0 22px; }.section-heading h2{margin:0 0 10px;font-size:15px;color:var(--text-soft)}
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.metric-card { min-height:122px; padding:18px; display:flex; align-items:center; justify-content:space-between; gap:14px; border:1px solid var(--border); border-radius:12px; color:var(--text); background:var(--surface-raised); box-shadow:var(--shadow); text-decoration:none; transition:transform .15s ease,border-color .15s ease; }
.metric-card:hover { transform:translateY(-2px); border-color:var(--metric-color,var(--accent)); }.metric-card p{margin:0 0 12px;color:var(--text-soft);font-size:12px;font-weight:750;text-transform:uppercase;letter-spacing:.03em}.metric-card strong{color:var(--text);font-size:28px;line-height:1}.metric-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:10px;color:var(--metric-color);background:var(--metric-bg);font-size:12px;font-weight:850}
.tone-blue{--metric-color:#1686c8;--metric-bg:#e5f4fc}.tone-cyan{--metric-color:#009f98;--metric-bg:#e1f7f5}.tone-amber{--metric-color:#d78a13;--metric-bg:#fff2db}.tone-green{--metric-color:#23875d;--metric-bg:#e4f5ed}.tone-purple{--metric-color:#7558c5;--metric-bg:#eee9fb}.tone-red{--metric-color:#c34747;--metric-bg:#fce8e8}.tone-slate{--metric-color:#607487;--metric-bg:#eaf0f4}
[data-theme="dark"] .metric-icon{background:color-mix(in srgb,var(--metric-color) 18%,var(--surface))}
.dashboard-table-card { margin-top:28px; border:1px solid var(--border); border-radius:14px; background:var(--surface-raised); box-shadow:var(--shadow); overflow:hidden; }
.dashboard-toolbar { padding:16px; display:flex; align-items:flex-end; gap:14px; justify-content:space-between; border-bottom:1px solid var(--border); }.dashboard-search{margin:0;display:flex;align-items:flex-end;gap:10px;flex:1}.search-field{min-width:300px;max-width:580px;flex:1;position:relative}.search-field>span{position:absolute;left:13px;top:9px;color:var(--text-soft);font-size:20px}.search-field input{padding-left:39px}.date-field{width:175px}.date-field>span{display:block;margin-bottom:4px;color:var(--text-soft);font-size:11px;font-weight:700}.export-actions{display:flex;gap:8px}.refresh-button{height:43px}
.phase-tabs { padding:0 12px; display:flex; align-items:center; gap:4px; overflow-x:auto; border-bottom:1px solid var(--border); }.phase-tabs a{padding:14px 10px 12px;display:flex;align-items:center;gap:6px;border-bottom:2px solid transparent;color:var(--text-soft);font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap}.phase-tabs a:hover,.phase-tabs a.active{color:var(--accent);border-bottom-color:var(--accent)}.phase-tabs span{min-width:20px;padding:2px 6px;border-radius:999px;background:var(--surface-soft);text-align:center;font-size:10px}
.dashboard-table { border:0; border-radius:0; box-shadow:none; }.dashboard-table th{padding:12px 14px;background:var(--surface-soft);color:var(--text-soft);font-size:11px;text-transform:uppercase;letter-spacing:.03em}.dashboard-table td{padding:14px;color:var(--text);font-size:13px}.dashboard-table tbody tr:hover{background:color-mix(in srgb,var(--accent) 4%,var(--surface))}.code-link{color:#1195db;font-weight:800;text-decoration:none}.table-action{display:inline-block;padding:7px 10px;border-radius:7px;color:var(--primary-2);background:rgba(23,107,135,.09);font-weight:750;text-decoration:none}.table-action:hover{color:#fff;background:var(--primary-2)}
.sortable-heading{display:flex;align-items:center;gap:6px}.sortable-heading>span{display:inline-flex;gap:1px}.sortable-heading a{width:16px;height:18px;display:grid;place-items:center;border-radius:4px;color:var(--text-soft);font-size:12px;text-decoration:none}.sortable-heading a:hover{color:#fff;background:var(--primary-2)}
.progress-copy{min-width:145px;display:flex;justify-content:space-between;gap:15px;margin-bottom:6px;font-size:11px}.progress-copy strong{color:var(--accent)}.progress-track{height:6px;border-radius:999px;background:var(--border);overflow:hidden}.progress-track span{height:100%;display:block;border-radius:999px;background:linear-gradient(90deg,var(--primary-2),var(--accent))}
.phase-pill{display:inline-block;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:750}.phase-warning{color:#8a5a00;background:#fff1cf}.phase-info{color:#176b87;background:#e3f3f8}.phase-purple{color:#6343b3;background:#eee9fb}.phase-success{color:#18794e;background:#e2f4eb}.phase-danger{color:#a93232;background:#fce7e7}.phase-neutral{color:#5d6f7d;background:#eaf0f4}
[data-theme="dark"] .phase-pill{filter:saturate(.8) brightness(.9)}
.dashboard-table-card .pagination { margin:0; padding:14px 16px; display:flex; justify-content:flex-end; align-items:center; gap:14px; border-top:1px solid var(--border); }.dashboard-table-card .pagination a{padding:6px 9px;border:1px solid var(--border);border-radius:7px;text-decoration:none}
.empty-state { min-height:100px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:var(--text-soft); text-align:center; }.empty-state.compact{min-height:80px;margin:0}.empty-state strong{color:var(--text)}
.history-list{max-height:550px;overflow:auto}.history-item{padding:12px 0;display:flex;gap:11px;border-bottom:1px solid var(--border)}.history-dot{width:9px;height:9px;margin-top:6px;flex:0 0 9px;border-radius:50%;background:var(--accent)}.history-item p{margin:3px 0 0;color:var(--text-soft);font-size:12px}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{color:var(--text);background:var(--surface-soft);border-color:var(--border)}[data-theme="dark"] th{background:var(--surface-soft)}[data-theme="dark"] .muted-card{background:var(--surface-soft)}
@media(max-width:1150px){.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-toolbar{align-items:stretch;flex-direction:column}.export-actions{justify-content:flex-end}}
@media(max-width:900px){.app-shell,.sidebar-is-collapsed .app-shell{display:block}.sidebar{position:fixed;left:0;transform:translateX(-105%);width:248px;box-shadow:0 0 60px rgba(0,0,0,.25);transition:transform .2s ease}.sidebar-open .sidebar{transform:translateX(0)}.sidebar-is-collapsed .nav-label,.sidebar-is-collapsed .sidebar-brand-copy{display:initial}.mobile-menu{display:grid}.app-topbar{padding:0 16px}.app-workspace>.container{width:min(100% - 28px,1440px)}.user-summary{min-width:0}.user-copy{display:none}.dashboard-search{align-items:stretch;flex-wrap:wrap}.search-field{min-width:100%}}
@media(max-width:650px){.metric-grid{grid-template-columns:1fr}.dashboard-heading{align-items:flex-start;flex-direction:column}.dashboard-search{flex-direction:column}.date-field,.search-field{width:100%;max-width:none}.export-actions{justify-content:flex-start}.notification-panel{right:-70px;width:min(340px,calc(100vw - 24px))}.app-workspace>.container{margin-top:20px}.quick-actions{width:100%}.quick-actions .button{flex:1;text-align:center}}