:root {
  --paper: #f3f8fd;
  --surface: #fff;
  --ink: #13324f;
  --muted: #5f7690;
  --line: #dfeaf5;
  --accent: #29c5ee;
  --accent-hover: #57d5f6;
  --sidebar: #062459;
  --shadow: 0 8px 28px #06245906;
}
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible { outline-color: #1788c5; }
input, select, textarea { border-color: #d5e3f0; }
input:focus, select:focus, textarea:focus { border-color: #1788c5; }
input[type=checkbox] { accent-color: #157bb9; }
.brand { letter-spacing: -.8px; font-size: 27px; gap: 10px; }
.brand-name { white-space: nowrap; }
.brand-it { font-size: .67em; font-weight: 600; color: #65d9ff; }
.brand-mark { background: #29c5ee; color: #062459; width: 39px; height: 41px; }
.brand-mark svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 2; }
.brand-mark circle { fill: #062459; stroke: #29c5ee; stroke-width: 1; }
.brand-large { font-size: 34px; }
.login-brand { background: radial-gradient(ellipse at 0 70%, #0b438a 0, transparent 55%), #062459; }
.login-story h1 { color: #fff; }
.login-story p { color: #b8d1ed; }
.login-story .light { color: #82dcf7; }
.login-footer { color: #a4c3e7; }
.network-map { width: 100%; height: auto; margin-top: 32px; overflow: visible; }
.network-map path { stroke: #29c5ee; stroke-width: 1.1; opacity: .7; }
.network-map circle { fill: #65d9ff; stroke: #65d9ff; filter: drop-shadow(0 0 5px #29c5ee); }
.sidebar { color: #c0d5ee; }
.sidebar>.brand { margin-left: 7px; margin-right: 0; }
.sidebar-section-label { color: #7ea6d4; }
.nav-link { color: #bed3ed; font-size: 13px; }
.nav-link:hover { background: #123c78; color: #fff; }
.nav-link.active { background: #29c5ee; color: #062459; }
.nav-link.active .nav-count { background: #06245916; }
.account-button { color: #fff; }
.account-button small, .team-note, .logout-button { color: #96b8df; }
.account-button:hover { background: #123c78; }
.account-button .avatar { background: #174984; color: #d9f4ff; }
.avatar { background: #e6f3fc; color: #17659c; }
.topbar { background: #f8fbfe; }
.breadcrumb strong { color: #305474; }
.breadcrumb span { color: #9ab6d0; }
.button:hover { background: #eef7fd; }
.button.primary { color: #062459; }
.text-link { color: #176ca4; font-size: 11px; }
.stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
.stat-label { color: #44617e; font-size: 12px; }
.stat-icon { background: #edf6fd; color: #267caf; }
.stat.emphasis { background: #e2f5fd; border-color: #c0e9f9; }
.stat.emphasis .stat-icon { background: #bfeaf8; }
.panel-header, .task-row, .project-summary { border-color: #e7eff7; }
.panel-header h2 { font-size: 16px; }
.panel-header p { font-size: 11px; }
.task-title { font-size: 14px; line-height: 1.5; }
.task-description { font-size: 12px; line-height: 1.6; color: #647c95; margin: 6px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.task-meta { font-size: 11px; }
.meta-separator { color: #acc1d4; }
.task-control { border-color: #bed3e7; color: #1679b2; }
.task-control:hover { background: #ddf5ff; border-color: #37acdf; }
.task-control.completed { background: #e5f5fc; border-color: #90cbe5; color: #176fa2; }
.task-read-indicator { border-color: #d9e7f3; }
.task-trailing { max-width: 170px; }
.owner { font-size: 11px; color: #466786; }
.owner .avatar { width: 23px; height: 23px; font-size: 8px; }
.badge { background: #eff5fb; color: #55799a; font-size: 10px; }
.badge.pendiente { background: #edf6fc; color: #316d9e; }
.badge.en_curso { background: #ddf4fc; color: #0b739b; }
.badge.media, .badge.baja { background: #eef6fc; color: #527794; }
.overdue-date { color: #b44937; }
.work-type { display: inline-block; color: #1d78af; font-size: 10px; font-weight: 700; background: #edf7fd; padding: 5px 8px; border-radius: 5px; margin-bottom: 10px; }
.project-card-top .work-type { margin-bottom: 0; }
.project-summary h3 { font-size: 14px; margin-bottom: 7px; }
.project-summary p.work-description, .work-description { font-size: 12px; line-height: 1.65; color: #5f7690; margin-bottom: 16px; overflow-wrap: anywhere; }
.team-members { margin-top: 13px; }
.team-members-label { display: block; font-size: 10px; font-weight: 600; color: #5e7a95; margin-bottom: 7px; }
.team-avatars { flex-wrap: wrap; gap: 3px; }
.team-avatars span:last-child { font-size: 11px; line-height: 1.6; }
.task-personnel { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin-top: 9px; color: #557995; font-size: 10px; }
.task-personnel strong { font-weight: 600; }
.personnel-chip { background: #edf6fd; color: #2d6590; border-radius: 5px; padding: 3px 6px; }
.dashboard-projects .project-summary:nth-child(odd), .project-card .project-bottom { border-color: #e7eff7; }
.dashboard-note { background: #eaf6fd; border-color: #d7eaf8; }
.dashboard-note p { color: #587996; }
.dashboard-note strong, .dashboard-note>svg { color: #1b659c; }
.toolbar input, .toolbar select, .users-table th, .dialog-actions { background: #f8fbfe; border-color: #dfeaf5; }
.scope-toggle { background: #e7f1fa; }
.scope-toggle button { color: #526f8f; }
.scope-toggle button.active { color: #155d98; }
.users-table th { color: #5e7a97; }
.users-table td { border-color: #e7eff7; }
.status-inactive { color: #7c8b9d; }
.workspace-footer, .workspace-footer span { color: #8ca3ba; }
.empty .empty-icon, .project-icon, .close-button { background: #ecf6fd; color: #5487ad; }
.empty strong { color: #365e80; }
.toast { background: #0d4d87; }
dialog::backdrop { background: #031c4180; }
.more-details { padding: 14px 15px; border: 1px solid #dfeaf5; border-radius: 9px; background: #f9fcff; }
.more-details summary { cursor: pointer; color: #25658f; font-size: 12px; font-weight: 650; }
.more-details summary span { display: block; color: #7b93ac; font-size: 10px; font-weight: 400; margin-top: 5px; }
.more-details>.dialog-grid { margin-top: 20px; }
.personnel-picker .checkbox-list { background: #fff; margin-top: 14px; }
.field label { font-size: 12px; }
.field input, .field textarea, .field select { font-size: 13px; }
.field textarea { min-height: 86px; }
.check-label input { accent-color: #1788c5; }
.check-label { font-size: 12px; }
.back-link { margin-bottom: 18px; }
.work-heading-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); margin: -10px 0 22px; }
.work-heading-meta>.button { margin-left: auto; }
.work-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 24px; overflow-x: auto; }
.work-tabs button { border: 0; border-radius: 8px 8px 0 0; background: transparent; color: #547794; font-size: 12px; font-weight: 650; padding: 13px 16px; white-space: nowrap; }
.work-tabs button.active { color: #155d98; background: #e2f4fd; box-shadow: inset 0 -3px #29c5ee; }
.work-summary-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; margin-bottom: 22px; }
.work-info { padding: 24px; }
.work-info h2 { font-size: 17px; margin-bottom: 14px; }
.work-info .muted, .work-info .location { font-size: 12px; line-height: 1.7; }
.full-description { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.75; color: #526e88; }
.work-progress-number { font-size: 39px; font-weight: 650; color: #1769a0; margin-bottom: 5px; }
.work-progress-number small { font-size: 24px; color: #94aec5; }
.work-quick-links { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; border-top: 1px solid var(--line); padding-top: 17px; margin-top: 18px; }
.work-days, .work-file-list, .material-list { padding: 0 24px; }
.day-row, .file-row, .material-row { display: flex; align-items: flex-start; gap: 15px; padding: 21px 0; border-bottom: 1px solid #e7eff7; }
.day-row:last-child, .file-row:last-child, .material-row:last-child { border-bottom: 0; }
.day-marker { background: #edf5fc; color: #7299b9; border: 1px solid #dce9f5; width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; font-weight: 700; }
.day-marker.done { color: #1684b3; background: #def6ff; border-color: #a8e4f6; }
.day-body { flex: 1; min-width: 0; }
.day-body h3, .material-main h3 { margin: 0 0 6px; font-size: 14px; }
.day-status { font-size: 11px; color: #6788a6; }
.day-body .full-description { margin: 12px 0 8px; }
.day-body small { color: #87a0b6; font-size: 10px; }
.upload-panel { margin-bottom: 22px; }
#work-upload-form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
#work-upload-form label { flex-basis: 100%; margin: 2px 0 -4px; font-size: 12px; }
#work-upload-form input { flex: 1; min-width: 180px; padding: 9px; font-size: 12px; background: #f8fcff; }
#work-upload-form [role=alert] { flex-basis: 100%; margin: 0; }
.file-symbol { width: 42px; min-width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center; background: #e9f6fc; color: #2b7ba6; font-size: 10px; font-weight: 750; }
.file-info { flex: 1; min-width: 0; }
.file-info strong { display: block; font-size: 13px; margin-bottom: 7px; overflow-wrap: anywhere; }
.file-info small { color: #7891a9; font-size: 10px; }
.material-main { flex: 1; min-width: 0; }
.material-main p { font-size: 12px; color: var(--muted); margin: 10px 0 0; line-height: 1.6; }
.material-quantity { font-size: 12px; color: #2b739f; font-weight: 600; }
.material-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.material-actions select { font-size: 11px; padding: 8px; min-width: 120px; }
.material-state { font-size: 12px; color: #28668f; }
.progress-track::-webkit-progress-bar { background: #e7f1fa; }
.progress-track::-webkit-progress-value { background: #2aaccf; }
.progress-track::-moz-progress-bar { background: #2aaccf; }
.history-list { padding: 0 24px; }
.history-row { display: flex; align-items: flex-start; gap: 14px; padding: 24px 0; border-bottom: 1px solid #e7eff7; }
.history-row:last-child { border-bottom: 0; }
.history-mark { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; background: #def6ff; color: #1684b3; margin-top: 3px; }
.history-mark svg { width: 18px; height: 18px; }
.history-main { flex: 1; min-width: 0; }
.history-kind { display: block; color: #176ca4; font-size: 10px; font-weight: 650; margin-bottom: 6px; }
.history-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: #67829a; font-size: 11px; line-height: 1.7; margin-top: 10px; }
.history-reopen { font-size: 11px; margin-top: 15px; }
@media(max-width:950px) {
  .brand { font-size: 24px; gap: 8px; }
  .brand-mark { width: 32px; height: 36px; }
  .brand-mark svg { width: 28px; height: 28px; }
  .stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .stat-icon { display: none; }
  .stat-label { font-size: 11px; }
}
@media(max-width:700px) {
  .login-brand { min-height: 190px; }
  .network-map { display: none; }
  .login-story h1 { font-size: 31px; }
  .mobile-brand { font-size: 17px; letter-spacing: -.4px; }
  .mobile-brand span { color: #197daf; font-size: .75em; }
  .nav-link { font-size: 10px; }
  .stats { gap: 8px; }
  .stat { padding: 16px 12px; }
  .stat-label { font-size: 10px; }
  .stat-note { font-size: 9px; }
  .stat-value { font-size: 29px; }
  .page-heading h1 { font-size: 25px; }
  .task-row { position: relative; flex-wrap: wrap; }
  .task-main { width: calc(100% - 31px); flex: 1; }
  .task-title { font-size: 13px; }
  .task-description { font-size: 11px; }
  .task-meta { font-size: 10px; }
  .task-trailing { flex-basis: 100%; max-width: none; flex-direction: row; align-items: center; flex-wrap: wrap; text-align: left; padding-left: 28px; }
  .owner { font-size: 10px; }
  .project-summary h3 { font-size: 14px; }
  .project-summary p.work-description { font-size: 11px; }
  .project-card .work-description { font-size: 12px; }
  .dashboard-projects .project-summary { border-color: #e7eff7; }
  .team-avatars span:last-child { font-size: 11px; }
  .dialog-grid { gap: 17px 12px; }
  .dialog-body { padding: 20px; }
  .checkbox-list { grid-template-columns: 1fr; }
  .more-details { padding: 12px; }
  .work-tabs { gap: 0; }
  .work-tabs button { font-size: 10px; padding: 13px 11px; }
  .work-summary-grid { grid-template-columns: 1fr; }
  .work-info { padding: 20px; }
  .work-days, .work-file-list, .material-list { padding: 0 17px; }
  .day-row, .file-row, .material-row { gap: 10px; }
  .day-row>.button, .file-row>.button { font-size: 10px; padding: 8px; }
  .day-marker { width: 29px; height: 29px; }
  .full-description { font-size: 12px; }
  .material-actions select { min-width: 108px; font-size: 10px; }
  .work-heading-meta>.button { margin-left: 0; }
  .history-list { padding: 0 17px; }
  .history-row { flex-wrap: wrap; gap: 10px; }
  .history-main { width: calc(100% - 40px); }
  .history-meta { gap: 4px 10px; font-size: 10px; }
  .history-reopen { margin: 0 0 0 40px; padding: 8px 11px; }
}
.mfa-enrollment { margin: 12px 0; padding: 16px; border: 1px solid #c9e5f4; border-radius: 12px; background: #f4fbff; }
@media (min-width: 701px) { .sidebar { overflow-y: auto; } .sidebar > .brand, .sidebar nav, .sidebar-bottom { flex-shrink: 0; } }
.mfa-enrollment ol { padding-left: 20px; margin: 0 0 16px; line-height: 1.6; }
.mfa-secret { display: block; padding: 12px; background: white; border-radius: 8px; overflow-wrap: anywhere; font-size: 16px; letter-spacing: 1px; user-select: all; }
.mfa-recovery-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; }
.mfa-recovery-codes code { padding: 10px 6px; border: 1px solid #c9e5f4; border-radius: 8px; background: #f4fbff; text-align: center; font-size: 13px; user-select: all; }
@media (max-width: 420px) { .mfa-recovery-codes { grid-template-columns: 1fr; } }