html.sin-verificar body { visibility: hidden; }

:root {

  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --blue-soft: #dbeafe;
  --green: #16a34a;
  --green-soft: #dcfce7;
  --red: #dc2626;
  --red-soft: #fee2e2;
  --amber: #d97706;
  --amber-soft: #fef3c7;

  --amber-ink: #92400e;
  --green-ink: #14532d;
  --red-ink: #991b1b;
  --violet: #7c3aed;
  --violet-soft: #ede9fe;

  --gray-900: #0f172a;
  --gray-800: #1e293b;
  --gray-700: #334155;
  --gray-600: #475569;
  --gray-500: #5b6472;
  --gray-400: #94a3b8;
  --gray-300: #cbd5e1;
  --gray-200: #e2e8f0;
  --gray-100: #f1f5f9;
  --gray-50: #f8fafc;
  --white: #ffffff;

  --bg: #f1f5f9;
  --sidebar-bg: #0c2733;
  --sidebar-text: #cbd5e1;
  --sidebar-active: #0090B1;
  --sidebar-active-strong: #57b6cb;
  --sidebar-active-fg: #04252e;

  --radius: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.14);
  --shadow-focus: 0 0 0 3px var(--blue-soft);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--gray-800);
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: 6px; }
.btn:focus-visible { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.45); }

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eef2f5 0%, #e3e9ee 100%);
  padding: 24px;
}

.auth-shell {
  display: flex;
  width: 100%;
  max-width: 940px;
  min-height: 600px;
  background: var(--white);
  border-radius: 28px;
  box-shadow: 0 30px 60px -12px rgba(15, 23, 42, 0.4);
  overflow: hidden;
  animation: card-in 420ms var(--ease-out) both;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-visual {
  flex: 0 0 52%;
  order: 2;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 44px;
  justify-content: center;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(150deg, #0aa6c9 0%, #0692B2 44%, #05708b 100%);
}

.auth-visual::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(75% 55% at 88% 6%, rgba(150, 240, 255, .38), transparent 60%),
    radial-gradient(70% 60% at 4% 106%, rgba(3, 55, 74, .55), transparent 60%);
}
.auth-visual > * { position: relative; z-index: 1; }

.showcase-copy { max-width: 24ch; }
.showcase-copy h2 {
  margin: 0 0 8px; font-size: 26px; line-height: 1.22; font-weight: 700; letter-spacing: -.015em; color: #fff;
}
.showcase-copy p { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .82); line-height: 1.5; }
.accent-serif {
  font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 500; color: #c9f8ff;
}

.app-preview {
  margin: 28px auto 0; width: 100%; max-width: 400px;
  background: #fff; color: #0f2129;
  border-radius: 16px;
  box-shadow: 0 30px 70px -24px rgba(1, 30, 40, .55);
  padding: 16px 18px 18px;
}
.app-preview-head { display: flex; align-items: center; gap: 6px; margin-bottom: 15px; }
.ap-dot { width: 8px; height: 8px; border-radius: 50%; background: #e0e6ea; }
.ap-title { margin-left: 8px; font-size: 12px; font-weight: 600; color: #64748b; }
.app-preview-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.ap-stat { background: #f4f7f9; border-radius: 10px; padding: 10px 6px; text-align: center; }
.ap-num { display: block; font-size: 18px; font-weight: 700; color: #0f2129; }
.ap-lbl { font-size: 10.5px; color: #64748b; }
.ap-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 2px; border-top: 1px solid #eef2f5; font-size: 12px; }
.ap-file { display: flex; align-items: center; gap: 9px; color: #33424d; min-width: 0; }
.ap-file .fic { width: 22px; height: 22px; border-radius: 6px; background: #e2f4f8; color: #0692B2; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ap-file .fic.ok { background: #dcfce7; color: #16a34a; }
.ap-file .fic svg { width: 13px; height: 13px; }
.ap-approve { background: #0692B2; color: #fff; font-size: 11px; font-weight: 600; padding: 5px 13px; border-radius: 999px; flex-shrink: 0; }
.ap-approved { color: #16a34a; font-size: 11px; font-weight: 600; flex-shrink: 0; }

.showcase-chip {
  position: absolute; z-index: 3; left: 258px; top: 214px;
  display: flex; align-items: center; gap: 10px;
  background: #fff; color: #0f2129; border-radius: 13px; padding: 10px 14px;
  box-shadow: 0 18px 38px -14px rgba(1, 30, 40, .5);
  animation: chip-float 4s ease-in-out infinite;
}
.showcase-chip .chip-ic { width: 24px; height: 24px; border-radius: 50%; background: #dcfce7; color: #16a34a; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.showcase-chip .chip-ic svg { width: 14px; height: 14px; }
.showcase-chip .chip-tx { display: flex; flex-direction: column; line-height: 1.25; }
.showcase-chip .chip-tx b { font-size: 12.5px; font-weight: 600; }
.showcase-chip .chip-tx small { font-size: 10.5px; color: #64748b; }
@keyframes chip-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.auth-panel {
  flex: 1; order: 1; position: relative; min-width: 0;
  display: flex; justify-content: center;

  align-items: center;
  align-items: safe center;

  padding: 94px 44px;
}
.auth-panel-inner { width: 100%; max-width: 340px; }

.auth-brand { position: absolute; top: 30px; left: 44px; display: flex; align-items: center; gap: 10px; }
.auth-brand .logo {
  width: 34px; height: 34px; border-radius: 9px; background: var(--blue);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; flex-shrink: 0;
}
.auth-brand span { font-size: 14px; font-weight: 600; color: var(--gray-800); }

.auth-head { text-align: left; margin-bottom: 24px; }
.auth-head h1 { margin: 0 0 6px; font-size: 29px; font-weight: 800; color: var(--gray-900); letter-spacing: -.02em; }
.auth-head-sm h1 { font-size: 23px; }
.auth-sub { margin: 0; color: var(--gray-500); font-size: 14px; }
.auth-sub span { color: var(--gray-700); font-weight: 600; }

.auth-panel input[type="text"],
.auth-panel input[type="email"],
.auth-panel input[type="password"] {
  border: none; border-bottom: 1.5px solid var(--gray-200); border-radius: 0;
  padding: 10px 2px; background: transparent;
}
.auth-panel input:focus { border-bottom-color: var(--blue); background: transparent; box-shadow: none; }
.auth-panel input:focus-visible { box-shadow: none; }
.auth-panel .auth-code-input { text-align: center; font-size: 20px; font-weight: 700; letter-spacing: 6px; }

.auth-panel .btn-block {
  border-radius: 10px; padding: 14px 20px; font-size: 15px; font-weight: 600;
  background: var(--blue); border: none; box-shadow: 0 8px 18px -8px rgba(6, 146, 178, .55);
}
.auth-panel .btn-block:hover { filter: brightness(1.05); box-shadow: 0 10px 22px -8px rgba(6, 146, 178, .65); }

.auth-step-hint { font-size: 13.5px; color: var(--gray-600); margin: 0 0 16px; text-align: center; }

.forgot-link-row { text-align: right; margin: -6px 0 18px; }
.forgot-link-row a { font-size: 12.5px; color: var(--blue); font-weight: 600; }
.forgot-link-row a:hover { text-decoration: underline; }

.login-options {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 2px 0 18px; font-size: 12.5px; flex-wrap: wrap;
}
.remember-check {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  color: var(--gray-600); user-select: none;
}
.remember-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--blue); cursor: pointer; }
.login-options a { color: var(--blue); font-weight: 600; }
.login-options a:hover { text-decoration: underline; }

.auth-link-row { display: flex; justify-content: space-between; margin-top: 14px; font-size: 13px; }
.auth-link-row-center { justify-content: center; }
.auth-link-row a { color: var(--gray-500); }
.auth-link-row a:hover { color: var(--blue); }

.login-hint {
  margin-top: 22px; font-size: 12.5px; color: var(--gray-500);
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: 16px; padding: 12px 16px;
}
.login-hint b { color: var(--gray-700); }

.btn-ic { display: inline-flex; align-items: center; }
.btn-ic svg { width: 17px; height: 17px; }

.hp-field {
  position: absolute !important; left: -9999px !important; top: -9999px !important;
  width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none;
}
.verify-block { animation: rise-in 280ms var(--ease-out) backwards; }

@media (max-width: 860px) {
  .auth-visual { display: none; }
  .auth-shell { max-width: 440px; min-height: 0; }

  .auth-panel { flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 34px 40px; }
  .auth-brand { position: static; margin-bottom: 26px; }
  .auth-panel-inner { margin: 0 auto; }
  }
@media (max-width: 480px) {
  .auth-shell { border-radius: 20px; }
  .auth-panel { padding: 32px 22px; }

  .login-options { flex-direction: column; align-items: flex-start; gap: 12px; }
}

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 240px;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar .brand {
  padding: 20px 20px 16px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar .brand .logo {
  width: 36px; height: 36px; border-radius: 11px; background: var(--blue);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0;
}
.sidebar .brand-text { display: flex; flex-direction: column; min-width: 0; }
.sidebar .brand-text #sideCompany { color: #fff; font-weight: 600; font-size: 15px; line-height: 1.3; }
.sidebar .brand-text small { color: #94a3b8; font-weight: 400; font-size: 12px; line-height: 1.3; }

.sidebar .brand.brand-stacked {
  flex-direction: column; align-items: flex-start; gap: 10px;
}
.sidebar .brand.brand-stacked .logo { max-width: 100%; }
.sidebar nav { padding: 12px 10px; flex: 1; overflow-y: auto; }
.sidebar nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--radius-pill);
  color: var(--sidebar-text); font-size: 14px; margin-bottom: 2px;
  text-decoration: none; position: relative;
  transition: background .18s var(--ease-out), color .18s var(--ease-out), transform .18s var(--ease-out);
}
.sidebar nav a:hover { background: var(--sidebar-hover, rgba(255,255,255,0.06)); color: #fff; text-decoration: none; transform: translateX(2px); }
.sidebar nav a:active { transform: translateX(2px) scale(0.98); }
.sidebar nav a.active { background: var(--sidebar-active); color: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); }
.sidebar nav a.active::after {
  content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: #fff;
}
.sidebar nav a .ic { width: 18px; text-align: center; }

.main-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: 62px; background: var(--white); border-bottom: 1px solid var(--gray-200);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; position: sticky; top: 0; z-index: 20;
}
.topbar .page-title { font-size: 17px; font-weight: 600; color: var(--gray-900); }
.topbar .page-title-sep { color: var(--gray-400); font-weight: 400; margin: 0 2px; font-size: 15px; }
.topbar .page-title-company { color: var(--gray-500); font-weight: 500; font-size: 12px; }
.topbar .user-box { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }

.topbar { gap: 12px; }
.topbar > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.topbar .clock {
  display: flex; align-items: center; gap: 9px;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #fff; padding: 7px 16px; border-radius: var(--radius-pill);
  box-shadow: var(--shadow); white-space: nowrap;
}

.topbar .clock .clock-dot {
  position: relative;
  width: 8px; height: 8px; border-radius: 50%; background: #34d399;
}
.topbar .clock .clock-dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: rgba(52, 211, 153, 0.55);
  animation: live-pulse 2s var(--ease-out) infinite;
}
@keyframes live-pulse {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(2.75); opacity: 0; }
  100% { transform: scale(2.75); opacity: 0; }
}
.topbar .clock-stack { display: flex; flex-direction: column; line-height: 1.15; }
.topbar .clock-time {
  font-size: 15px; font-weight: 700; letter-spacing: .5px;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.topbar .clock-date { font-size: 10.5px; color: #94a3b8; font-weight: 500; }

@media (max-width: 900px) { .topbar .clock { display: none; } }

.topbar .avatar {
  background-size: cover; background-position: center; overflow: hidden;
  text-decoration: none; transition: transform .18s var(--ease-out);
  border: 2px solid var(--white); box-shadow: 0 0 0 1px var(--gray-200);
}
.topbar .avatar.has-color { color: #fff; }
.topbar .avatar:hover { transform: scale(1.06); text-decoration: none; }
.topbar .user-meta { text-decoration: none; }
.topbar .user-meta:hover .name { text-decoration: underline; }
.topbar .avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--blue-soft);
  color: var(--blue-dark); font-weight: 700; display: flex; align-items: center;
  justify-content: center; font-size: 14px;
}
.topbar .user-meta { text-align: right; line-height: 1.2; }
.topbar .user-meta .name { font-size: 13.5px; font-weight: 600; color: var(--gray-800); }
.topbar .user-meta .role { font-size: 11.5px; color: var(--gray-500); }
.menu-toggle {
  display: none; background: none; border: none; font-size: 22px; cursor: pointer;
  color: var(--gray-700);
}
.menu-toggle .ic-svg { display: block; }

.dropzone.dropzone-sm { padding: 14px 16px; }
.dropzone.dropzone-sm .dropzone-text { margin: 0 0 4px; font-size: 13.5px; }

.file-tag {
  display: inline-block; margin-left: 8px; padding: 1px 8px;
  border-radius: var(--radius-pill); font-size: 11px; font-weight: 600;
  background: var(--gray-100); color: var(--gray-600); vertical-align: middle;
}
.file-tag.primary { background: var(--blue-soft); color: var(--blue-dark); }

.role-checks { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 6px 0; }
.role-checks label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; color: var(--gray-700); cursor: pointer;
  user-select: none;
}
.role-checks input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--sidebar-active); cursor: pointer; }

.module-access {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  padding: 6px 0;
}
.module-card {
  border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
  background: var(--gray-50); padding: 12px 14px;
}
.module-card-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--gray-500); margin-bottom: 10px;
}
.module-card-head .ic-svg { color: var(--sidebar-active); }
.module-opt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 6px 2px; cursor: pointer; user-select: none;
}
.module-opt input[type="checkbox"] {
  width: 16px; height: 16px; min-width: 0; margin-top: 2px; flex: 0 0 auto;
  accent-color: var(--sidebar-active); cursor: pointer;
}
.module-opt-text { display: flex; flex-direction: column; line-height: 1.35; }
.module-opt-text b { font-weight: 600; font-size: 14px; color: var(--gray-800); }
.module-opt-text small { color: var(--gray-500); font-size: 12px; }
.module-param {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 2px 0 8px 28px; padding: 8px 12px;
  border-left: 2px solid var(--sidebar-active);
  background: var(--white); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.module-param.is-hidden { display: none; }
.module-param-label { font-size: 12.5px; font-weight: 600; color: var(--gray-600); flex: 1 0 100%; }
.module-param select { width: 100%; min-width: 0; }

.inline-edit-form.user-edit { flex-direction: column; align-items: stretch; gap: 16px; }
.inline-edit-form.user-edit .edit-fields-row {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end;
}

.users-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
}
.users-head .section-title { margin: 0; }
.users-counts { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.count-chip {
  font-size: 12px; font-weight: 500; padding: 3px 11px; border-radius: var(--radius-pill);
  background: var(--gray-100); color: var(--gray-600);
}
.count-chip.ok { background: var(--green-soft); color: var(--green-ink); }
.count-chip.warn { background: var(--amber-soft); color: var(--amber-ink); }

.users-toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.users-toolbar .users-search { flex: 1 1 200px; min-width: 180px; }
.users-toolbar .users-search input { width: 100%; }
.users-toolbar select { width: auto; min-width: 150px; }
.users-toolbar #reloadUsers { flex: 0 0 auto; }

.u-name { font-weight: 600; font-size: 14px; color: var(--gray-800); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.u-email { font-size: 12.5px; color: var(--gray-500); margin-top: 2px; }
.u-roles-text { font-size: 13px; color: var(--gray-600); }
.mini-tag { font-size: 10.5px; font-weight: 600; padding: 1px 8px; border-radius: var(--radius-pill); }

.mini-tag.warn { background: var(--amber-soft); color: var(--amber-ink); }
.status-cell { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--gray-700); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.status-dot.on { background: var(--green); }
.status-dot.off { background: var(--gray-400); }

.cap-access { padding: 2px 0; }
.cap-group + .cap-group { margin-top: 14px; }
.cap-group-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--gray-500); margin-bottom: 2px;
}
.cap-group-title .ic-svg { color: var(--sidebar-active); }
.cap-opt {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  padding: 9px 2px; border-bottom: 1px solid var(--gray-100);
}
.cap-group .cap-opt:last-child { border-bottom: none; }
.cap-opt input[type="checkbox"] {
  width: 17px; height: 17px; min-width: 0; flex: 0 0 auto;
  accent-color: var(--sidebar-active); cursor: pointer;
}
.cap-text { flex: 1; font-size: 14px; color: var(--gray-800); line-height: 1.35; }
.cap-role {
  font-size: 11px; color: var(--gray-500); background: var(--gray-100);
  padding: 2px 9px; border-radius: var(--radius-pill); white-space: nowrap; flex: 0 0 auto;
}

#modulesOverview { display: flex; flex-direction: column; gap: 14px; }
.mov-card { border: 1px solid var(--gray-200); border-radius: 12px; background: var(--white); padding: 14px 16px; }
.mov-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
.mov-head .ic-svg { color: var(--sidebar-active); flex: 0 0 auto; margin-top: 2px; }
.mov-head b { font-weight: 600; font-size: 15px; color: var(--gray-900); display: block; }
.mov-head small { font-size: 12.5px; color: var(--gray-500); }
.mov-rolegrp { padding: 11px 0; border-top: 1px solid var(--gray-100); }
.mov-rg-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mov-rg-name { font-size: 13px; font-weight: 600; color: var(--gray-800); }
.mov-rg-count { font-size: 12px; color: var(--gray-400); }
.mov-rg-desc { font-size: 12px; color: var(--gray-500); flex-basis: 100%; margin-top: 1px; }
.mov-rg-users { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.mov-chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 12.5px; font-weight: 500; color: var(--gray-700);
  background: var(--gray-100); border: 1px solid transparent; border-radius: var(--radius-pill);
  padding: 3px 12px 3px 9px; transition: background .15s, border-color .15s, color .15s;
}
.mov-chip:hover { background: var(--blue-soft); border-color: var(--sidebar-active); color: var(--gray-900); }
.mov-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.mov-more { font-size: 12px; color: var(--gray-400); padding: 0 4px; }
.mov-ver {
  font-size: 12.5px; color: var(--sidebar-active); background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 7px;
}
.mov-ver:hover { background: var(--blue-soft); }
.mov-ver .ic-svg { color: currentColor; }
.mov-foot { border-top: 1px solid var(--gray-100); padding-top: 12px; margin-top: 4px; }
.mov-assign { width: auto; min-width: 150px; font-size: 12.5px; padding: 6px 10px; }

.access-toolbar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.access-toolbar .users-search { flex: 1 1 200px; min-width: 180px; }
.access-toolbar .users-search input { width: 100%; }
.access-toolbar select { width: auto; min-width: 160px; }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.pager-info { font-size: 12.5px; color: var(--gray-500); }
.pager-btns { display: flex; align-items: center; gap: 10px; }
.pager-btns .pg-num { font-size: 12.5px; color: var(--gray-600); }

.pager-solo-cuenta { justify-content: flex-end; }

.chip-num {
  margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--gray-100); color: var(--gray-600);
  font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.chip-btn.active .chip-num { background: var(--white); color: var(--blue-dark); }

.chip-num.cero { opacity: .55; font-weight: 500; }

.rf-sep { width: 1px; align-self: stretch; background: var(--gray-200); margin: 0 4px; }

.rf-rango-campos { display: flex; align-items: center; gap: 6px; }
.rf-rango-campos input[type="date"] { min-width: 0; flex: 1 1 0; }
.rf-rango-guion { color: var(--gray-500); flex: none; }

table.data.access-list { min-width: 600px; }
.access-list .am-uname { min-width: 190px; }
.am-n { display: block; font-weight: 600; font-size: 13.5px; color: var(--gray-800); }
.am-e { display: block; font-size: 12px; color: var(--gray-500); }
.am-lock .ic-svg { display: inline; color: var(--gray-400); vertical-align: -1px; }

.acc-perfil { white-space: normal; }

.perfil-tag {
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--blue-soft); color: var(--blue-dark);
}
.perfil-tag.is-medida { background: var(--violet-soft); color: var(--violet); }

.mod-slots { display: inline-flex; gap: 6px; }
.mod-slot {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 28px; border-radius: var(--radius-sm);
  background: var(--gray-100); color: var(--gray-300);
  border: 1px solid transparent;
}
.mod-slot.is-on { background: var(--blue-soft); color: var(--blue-dark); border-color: var(--blue); }

.mod-slot.is-head { background: transparent; color: var(--gray-500); height: 20px; }
.mod-head-lbl { display: block; margin-bottom: 3px; }
.access-list thead th.acc-mods { padding-bottom: 6px; }
.mod-slot .ic-svg { display: block; }

.mod-slot em {
  position: absolute; right: -4px; bottom: -4px;
  font-style: normal; font-size: 9px; font-weight: 700; line-height: 1;
  background: var(--white); color: var(--blue-dark);
  border: 1px solid var(--blue); border-radius: var(--radius-pill); padding: 1px 3px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mini-tag.tag-rank { background: var(--blue-soft); color: var(--blue-dark); }

.rank-select { font-size: 12.5px; padding: 5px 26px 5px 10px; min-width: 168px; }
.rank-select:disabled { opacity: .6; cursor: not-allowed; }

.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 14px;
}
.empty-state .ic-svg { color: var(--gray-300); margin-bottom: 3px; }
.empty-state strong { color: var(--gray-700); font-size: 14.5px; font-weight: 600; }
.empty-state span { color: var(--gray-500); font-size: 13px; }

.advanced-actions { padding: 0; }
.advanced-actions > summary {
  cursor: pointer; list-style: none; padding: 18px 22px;
  display: flex; align-items: center; gap: 12px;
}
.advanced-actions > summary::-webkit-details-marker { display: none; }
.advanced-actions > summary .adv-title {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--gray-800);
}
.advanced-actions > summary .adv-title .ic-svg { color: var(--amber); }
.advanced-actions > summary small { color: var(--gray-500); }
.advanced-actions[open] > summary { border-bottom: 1px solid var(--gray-200); }
.advanced-actions > *:not(summary) { margin-left: 22px; margin-right: 22px; }
.advanced-actions > .danger-row:last-child { margin-bottom: 22px; }

.modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0; transition: opacity .14s var(--ease-out);
}
.modal-backdrop.open, .modal-backdrop.open .modal { transition-duration: .2s; }
.modal-backdrop[hidden] { display: none; }
.modal-backdrop.open { opacity: 1; }
.modal {
  width: 480px; max-width: 100%; max-height: 88vh;
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(10px) scale(0.98); transition: transform .14s var(--ease-out);
}
.modal-backdrop.open .modal { transform: translateY(0) scale(1); }

.modal-backdrop .modal-ancho { width: 660px; max-width: 100%; }

.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-bottom: 1px solid var(--gray-200); flex: 0 0 auto;
}
.modal-head h3 { margin: 0; font-size: 16px; color: var(--gray-900); }

.modal-titulo { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0; }
.modal-titulo h3 { flex: 0 0 auto; }
.modal-titulo-sub {
  margin: 0; min-width: 0; font-size: 13px; font-weight: 400;
  color: var(--gray-500); line-height: 1.4;
}

.modal-titulo-sub::before {
  content: ''; display: inline-block; width: 1px; height: 12px; margin-right: 12px;
  background: var(--gray-300); vertical-align: -1px;
}

@media (max-width: 560px) {
  .modal-titulo { flex-direction: column; align-items: flex-start; gap: 3px; }
  .modal-titulo-sub::before { display: none; }
}
.modal-close {
  background: none; border: none; cursor: pointer; color: var(--gray-500);
  padding: 5px; border-radius: 8px; display: flex; line-height: 0;
}
.modal-close:hover { background: var(--gray-100); color: var(--gray-800); }

.modal-body { flex: 1 1 auto; overflow-y: auto; padding: 20px 22px; container-type: inline-size; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 22px; border-top: 1px solid var(--gray-200); background: var(--gray-50); flex: 0 0 auto;
}
body.modal-open { overflow: hidden; }
@media (max-width: 520px) { .modal { max-height: 92vh; } }

.ic-svg { display: block; flex: 0 0 auto; }

.sidebar nav a .ic {
  width: 18px; height: 18px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}

.content { padding: 24px 28px; max-width: 1500px; width: 100%; margin: 0 auto; }
.content h2.section-title { font-size: 22px; font-weight: 800; margin: 0 0 7px; color: var(--gray-900); letter-spacing: -.01em; }

.section-sub { color: var(--gray-500); margin: 0 0 22px; font-size: 14px; line-height: 1.5; }

.page-head { margin-bottom: 22px; }

.page-head-accion { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.page-head-accion > div { min-width: 240px; flex: 1; }
.page-head .section-title { margin-bottom: 7px; }
.page-head .section-sub { margin-bottom: 0; }

.cards-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px; margin-bottom: 24px;
}
.stat-card {
  background: var(--white); border-radius: var(--radius); padding: 18px 18px;
  box-shadow: var(--shadow); border: 1px solid var(--gray-200);
  display: flex; flex-direction: column; gap: 6px;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s var(--ease-out);
  animation: rise-in 360ms var(--ease-out) backwards;
}

.stat-card:nth-child(1) { animation-delay: 0ms; }
.stat-card:nth-child(2) { animation-delay: 45ms; }
.stat-card:nth-child(3) { animation-delay: 90ms; }
.stat-card:nth-child(4) { animation-delay: 135ms; }
.stat-card:nth-child(5) { animation-delay: 180ms; }
.stat-card .label { font-size: 13px; color: var(--gray-500); font-weight: 500; }
.stat-card .value { font-size: 28px; font-weight: 700; color: var(--gray-900); line-height: 1; }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (hover: hover) and (pointer: fine) {
  .stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
}

.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px; margin-bottom: 24px;
}
.stats-grid .stat-card {
  flex-direction: row; align-items: center; gap: 14px; padding: 18px 20px;
}
.stat-ic {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--gray-100); color: var(--gray-600);
}
.stat-ic svg { width: 22px; height: 22px; }
.stat-card.amber .stat-ic { background: var(--amber-soft); color: var(--amber); }
.stat-card.green .stat-ic { background: var(--green-soft); color: var(--green); }
.stat-card.red .stat-ic { background: var(--red-soft); color: var(--red); }
.stat-card.violet .stat-ic { background: var(--violet-soft); color: var(--violet); }
.stat-card.gray .stat-ic { background: var(--gray-100); color: var(--gray-600); }
.stat-body { display: flex; flex-direction: column; gap: 2px; }
.stats-grid .stat-card .value { font-size: 26px; }
.stats-grid .stat-card .label { font-size: 12.5px; }

@media (max-width: 560px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
  .stats-grid .stat-card { padding: 14px 12px; gap: 10px; }
  .stats-grid .stat-card .value { font-size: 21px; }
  .stats-grid .stat-card .label { font-size: 11.5px; }
  .stats-grid .stat-ic { width: 36px; height: 36px; flex: 0 0 auto; }
}
.stat-card.amber .value { color: var(--amber); }
.stat-card.green .value { color: var(--green); }
.stat-card.red .value { color: var(--red); }
.stat-card.violet .value { color: var(--violet); }

@media (hover: hover) and (pointer: fine) {
  .stat-card.amber:hover { border-color: var(--amber); box-shadow: 0 8px 20px -6px rgba(217, 119, 6, .35); }
  .stat-card.green:hover { border-color: var(--green); box-shadow: 0 8px 20px -6px rgba(22, 163, 74, .35); }
  .stat-card.red:hover { border-color: var(--red); box-shadow: 0 8px 20px -6px rgba(220, 38, 38, .35); }
  .stat-card.violet:hover { border-color: var(--violet); box-shadow: 0 8px 20px -6px rgba(124, 58, 237, .35); }
  .stat-card.gray:hover { border-color: var(--gray-400); }
}

.panel {
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px; margin-bottom: 22px;
  animation: rise-in 380ms var(--ease-out) backwards;
}
.panel h3 { margin: 0 0 16px; font-size: 16px; color: var(--gray-900); }
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 16px;
}
.panel-head h3 { margin: 0; }

.panel-aviso { border-left: 3px solid var(--amber); }
.panel-aviso .pend-lista { margin-top: 14px; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  white-space: nowrap;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.badge.pending { background: var(--amber-soft); color: var(--amber-ink); }
.badge.approved { background: var(--green-soft); color: var(--green-ink); }
.badge.rejected { background: var(--red-soft); color: var(--red-ink); }
.badge.neutral { background: var(--gray-100); color: var(--gray-600); }

.role-chip {
  display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: 11.5px;
  font-weight: 600; background: var(--gray-100); color: var(--gray-600);
}
.user-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 7px; vertical-align: middle;
}

.role-chip.SUPERADMIN { background: var(--gray-900); color: #fff; }
.role-chip.ADMIN { background: var(--violet-soft); color: var(--violet); }
.role-chip.APPROVER { background: var(--blue-soft); color: var(--blue-dark); }
.role-chip.REQUESTER { background: var(--gray-100); color: var(--gray-600); }

.locked-note {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--gray-500);
  padding: 6px 2px; white-space: nowrap;
}

.role-chip-list { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }

.row-menu { position: relative; display: inline-flex; }
.row-menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border-radius: 50%;
  border: 1px solid transparent; background: transparent; color: var(--gray-500);
  cursor: pointer;
  transition: background .15s var(--ease-out), color .15s var(--ease-out),
              transform .12s var(--ease-out);
}
.row-menu-btn:hover, .row-menu-btn:focus-visible { background: var(--gray-100); color: var(--gray-800); }

.row-menu-btn:active { transform: scale(0.92); }
.row-menu-btn .ic-svg { transform: rotate(90deg); }
.row-menu-list {

  display: none; position: fixed; z-index: 300;
  min-width: 190px; padding: 6px; background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  animation: menu-in 140ms var(--ease-out);
}
.row-menu.open .row-menu-list { display: block; }
.row-menu-list button {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  font-size: 13.5px; font-weight: 500; color: var(--gray-700); font-family: inherit;
}
.row-menu-list button:hover:not(:disabled) { background: var(--gray-100); }
.row-menu-list button:disabled { opacity: .5; cursor: not-allowed; }
.row-menu-list button.danger { color: var(--red); }
.row-menu-list button.danger:hover:not(:disabled) { background: var(--red-soft); }

.row-menu.hacia-arriba .row-menu-list { animation-name: menu-in-arriba; }
@keyframes menu-in-arriba {
  from { opacity: 0; transform: translateY(4px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 600px) {
  .row-menu-list {
    position: fixed; top: auto; right: 16px; left: 16px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    width: auto; min-width: 0;
  }
}

.btn {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  padding: 9px 18px; font-size: 14px; font-weight: 600; cursor: pointer;
  font-family: inherit;
  transition: background .16s var(--ease-out), box-shadow .16s var(--ease-out),
              transform .12s var(--ease-out), opacity .16s var(--ease-out);
  text-decoration: none; line-height: 1.2; user-select: none;

  white-space: nowrap;
}

.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 1px 2px rgba(37, 99, 235, 0.3); }
.btn-primary:hover { background: var(--blue-dark); text-decoration: none; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.32); }
.btn-success { background: var(--green); color: #fff; box-shadow: 0 1px 2px rgba(22, 163, 74, 0.3); }
.btn-success:hover { background: #15803d; box-shadow: 0 4px 12px rgba(22, 163, 74, 0.32); }
.btn-danger { background: var(--red); color: #fff; box-shadow: 0 1px 2px rgba(220, 38, 38, 0.3); }
.btn-danger:hover { background: #b91c1c; box-shadow: 0 4px 12px rgba(220, 38, 38, 0.32); }
.btn-violet { background: var(--violet); color: #fff; box-shadow: 0 1px 2px rgba(124, 58, 237, 0.3); }
.btn-violet:hover { background: #6d28d9; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.32); }
.btn-ghost { background: var(--white); color: var(--gray-700); border-color: var(--gray-300); }
.btn-ghost:hover { background: var(--gray-50); text-decoration: none; border-color: var(--gray-400); }
.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn-block { width: 100%; }

.form-group { margin-bottom: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

@container (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }
label.field-label {
  display: block; font-size: 13px; font-weight: 600; color: var(--gray-700);
  margin-bottom: 6px;
}
label.field-label .req { color: var(--red); }

.field-hint { display: block; margin-top: 5px; font-size: 12px; color: var(--gray-500); line-height: 1.35; }

.field-help-caja { position: relative; display: inline-flex; vertical-align: middle; }

.field-help { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; margin: 0; border: 0; border-radius: 50%;
  background: none; color: var(--gray-500); cursor: pointer; line-height: 0; }
.field-help::after { content: ""; position: absolute; top: 50%; left: 50%;
  width: 40px; height: 40px; transform: translate(-50%, -50%); }
.field-help:hover, .field-help[aria-expanded="true"] { background: var(--blue-soft); color: var(--primary); }
.field-help:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

.field-help-globo { position: fixed; top: 0; left: 0; z-index: 300;
  width: max-content; max-width: min(280px, 70vw); padding: 9px 12px; border-radius: 9px;
  background: var(--gray-800, #1f2937); color: #fff; font-size: 12.5px; font-weight: 400;
  line-height: 1.45; text-transform: none; letter-spacing: normal; white-space: normal;
  box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.field-help-globo[hidden] { display: none; }

html.dark body:not(.login-page) .field-help-globo {
  background: var(--gray-200); color: var(--gray-900);
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
}

.field-label .lbl-lock { display: inline-flex; vertical-align: middle; margin-left: 5px; color: var(--gray-500); }

input.field-invalid, select.field-invalid, textarea.field-invalid { border-color: var(--red); }
input.field-invalid:focus, select.field-invalid:focus, textarea.field-invalid:focus {
  box-shadow: 0 0 0 3px var(--red-soft);
}

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  position: relative; width: 42px; height: 24px; border-radius: 999px; flex: none;
  background: var(--gray-300); transition: background .18s var(--ease-out);
}
.switch-thumb {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .18s var(--ease-out);
}
.switch input:checked + .switch-track { background: var(--sidebar-active); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px var(--blue-soft); }
.switch-text { font-size: 14px; font-weight: 600; color: var(--gray-700); }

.switch-sm { gap: 8px; }
.switch-sm .switch-track { width: 34px; height: 20px; }
.switch-sm .switch-thumb { width: 14px; height: 14px; top: 3px; left: 3px; }
.switch-sm input:checked + .switch-track .switch-thumb { transform: translateX(14px); }
.switch-state { font-size: 12.5px; font-weight: 600; color: var(--gray-600); }
.switch input:checked ~ .switch-state { color: var(--green); }
.switch.is-disabled { cursor: not-allowed; opacity: .6; }

.mini-tag.tag-contractor { background: var(--amber-soft); color: #92400e; }

.mini-tag.tag-vigente { background: var(--green-soft); color: #14532d; }
.mini-tag.tag-prog { background: var(--blue-soft); color: var(--blue-dark); }
.mini-tag.tag-vencido { background: var(--gray-200); color: var(--gray-600); }

.autorizador-pick { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 7px; padding: 7px 11px; border-radius: 9px; font-size: 13px;
  background: var(--green-soft); color: #14532d; line-height: 1.35; }
.autorizador-pick .ic-svg { flex: none; }
.autorizador-pick small { color: #3f6b4c; }

.autoriza-nombre { font-weight: 600; }

.scan-info { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px;
  padding: 9px 12px; border-radius: 10px; margin: 6px 0 12px; line-height: 1.4; }
.scan-info .ic-svg { flex: none; }
.scan-info.ok { background: var(--green-soft); color: #14532d; }
.scan-info.warn { background: var(--amber-soft); color: #92400e; }
.scan-info a { color: inherit; font-weight: 700; text-decoration: underline; }

.verified-chk { display: inline-flex; vertical-align: middle; color: var(--green); margin-left: 3px; }

input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="search"], input[type="url"] {
  width: 100%; padding: 11px 16px; border: 1px solid var(--gray-300);
  border-radius: var(--radius-pill); font-size: 14px; font-family: inherit;
  background: var(--white); color: var(--gray-800); transition: border-color .15s, box-shadow .15s;
}

select, textarea, input[type="file"],
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"] {
  width: 100%; padding: 11px 14px; border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm); font-size: 14px; font-family: inherit;
  background: var(--white); color: var(--gray-800); transition: border-color .15s, box-shadow .15s;
}

input[readonly], textarea[readonly] {
  background: var(--gray-100); color: var(--gray-600); cursor: default;
  border-style: dashed;
}
input[readonly]:focus, textarea[readonly]:focus { box-shadow: none; border-color: var(--gray-300); }

select:not([multiple]) {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 40px;
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px 18px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%235b6472'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='6%209%2012%2015%2018%209'/%3E%3C/svg%3E");
}
select:not([multiple])::-ms-expand { display: none; }

input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"] {
  -webkit-appearance: none; appearance: none;

  padding-top: 10px; padding-bottom: 10px;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
  cursor: pointer; margin-left: 4px; padding: 1px 5px; border-radius: 6px;
  width: 26px; height: 16px; box-sizing: border-box; opacity: 1;
  background-repeat: no-repeat; background-position: center; background-size: 16px 16px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%235b6472'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='18'%20rx='2'%20ry='2'/%3E%3Cline%20x1='16'%20y1='2'%20x2='16'%20y2='6'/%3E%3Cline%20x1='8'%20y1='2'%20x2='8'%20y2='6'/%3E%3Cline%20x1='3'%20y1='10'%20x2='21'%20y2='10'/%3E%3C/svg%3E");
  transition: background-color .15s;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
input[type="month"]:hover::-webkit-calendar-picker-indicator {
  background-color: var(--blue-soft);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%230090B1'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='18'%20rx='2'%20ry='2'/%3E%3Cline%20x1='16'%20y1='2'%20x2='16'%20y2='6'/%3E%3Cline%20x1='8'%20y1='2'%20x2='8'%20y2='6'/%3E%3Cline%20x1='3'%20y1='10'%20x2='21'%20y2='10'/%3E%3C/svg%3E");
}
input[type="date"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="month"]::-webkit-datetime-edit { color: var(--gray-800); padding: 0; }

input[type="color"] {
  width: 56px; height: 40px; padding: 0; border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm); background: var(--white); cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: calc(var(--radius-sm) - 1px); }
input[type="color"]::-moz-color-swatch { border: none; border-radius: calc(var(--radius-sm) - 1px); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
}
textarea { resize: vertical; min-height: 80px; }
input[type="file"] { padding: 9px 14px; background: var(--gray-50); cursor: pointer; }

.pw-field { position: relative; display: block; width: 100%; }
.pw-field input[type="password"],
.pw-field input[type="text"] { padding-right: 46px; }
.pw-toggle {
  position: absolute; top: 0; right: 8px; height: 100%; width: 30px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--gray-500); transition: color .15s;
}
.pw-toggle:hover { color: var(--gray-700); }
.pw-toggle svg { display: block; }

.file-list { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; }
.file-list li {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
  font-size: 13px;
}
.file-list li.invalid { background: var(--red-soft); border-color: #fecaca; }
.file-list .file-ext {
  text-transform: uppercase; font-weight: 700; font-size: 10.5px; color: #fff;
  background: var(--blue); padding: 3px 7px; border-radius: 5px; min-width: 42px; text-align: center;
}

.file-list .file-name {
  flex: 1; min-width: 0; font-weight: 500; color: var(--gray-800);
  overflow-wrap: anywhere;
}
.file-list .file-size { color: var(--gray-500); font-size: 12px; white-space: nowrap; }
.file-list .file-bad { color: var(--red); font-size: 11.5px; font-weight: 600; }
.file-list .file-remove {
  flex: none; width: 26px; height: 26px; border: 0; background: transparent; cursor: pointer;
  color: var(--gray-500); font-size: 20px; line-height: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s;
}
.file-list .file-remove:hover { background: var(--red-soft); color: var(--red); }

@media (max-width: 560px) {
  .file-list li { flex-wrap: wrap; }
  .file-list li .attach-actions { flex: 1 1 100%; }
}

.dropzone {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; padding: 28px 20px; border: 2px dashed var(--gray-300); border-radius: var(--radius-sm);
  background: var(--gray-50); cursor: pointer; transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--blue); background: var(--blue-soft); outline: none; }
.dropzone.dragover { border-color: var(--blue); background: var(--blue-soft); }
.dropzone-icon { color: var(--blue); }
.dropzone-text { margin: 0; font-size: 14px; color: var(--gray-700); }

.upload-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.upload-progress-track {
  flex: 1 1 auto; height: 8px; border-radius: var(--radius-pill);
  background: var(--gray-200); overflow: hidden;
}
.upload-progress-fill {
  height: 100%; width: 0%; border-radius: var(--radius-pill);
  background: var(--blue); transition: width .15s var(--ease-out);
}
.upload-progress-label { flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--gray-600); min-width: 80px; text-align: right; }

.upload-progress-pie { margin-bottom: 0; flex: 1 1 200px; min-width: 0; margin-right: auto; }
.upload-progress-pie[hidden] { display: none; }

@keyframes barra-indeterminada {
  from { transform: translateX(-105%); }
  to   { transform: translateX(320%); }
}
.upload-progress-fill[data-indeterminado] {
  animation: barra-indeterminada 1.15s var(--ease-out) infinite;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .upload-progress-fill[data-indeterminado] { animation: none; width: 100% !important; opacity: .55; }
}
.dropzone-btn {
  background: none; border: 0; padding: 0; color: var(--blue); font-weight: 600;
  font-size: inherit; cursor: pointer; text-decoration: underline;
}
.dropzone-hint { color: var(--gray-500); font-size: 12px; }

.file-ext.ext-pdf { background: #dc2626; }
.file-ext.ext-doc, .file-ext.ext-docx { background: #2563eb; }
.file-ext.ext-xls, .file-ext.ext-xlsx, .file-ext.ext-csv { background: #16a34a; }
.file-ext.ext-ppt, .file-ext.ext-pptx { background: #ea580c; }
.file-ext.ext-jpg, .file-ext.ext-jpeg, .file-ext.ext-png { background: #7c3aed; }
.file-ext.ext-txt { background: var(--gray-500); }

.attach-actions { display: flex; gap: 6px; flex-wrap: nowrap; align-items: center; }

table.data th.col-fit, table.data td.col-fit { width: 1%; white-space: nowrap; }

table.data td.nowrap { white-space: nowrap; }

.cat-edit-row { display: flex; gap: 6px; align-items: center; }
.cat-edit-input {
  width: auto; min-width: 160px; padding: 6px 12px; font-size: 13px;
  border: 1px solid var(--blue); border-radius: var(--radius-pill);
}

tr.edit-row { background: var(--blue-soft); }
tr.edit-row td { padding: 14px 12px; }
.inline-edit-form { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.inline-edit-form input, .inline-edit-form select { width: auto; min-width: 140px; }
.inline-edit-actions { display: flex; gap: 8px; }

.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-sm);
  background:
    linear-gradient(to right, var(--white) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(255, 255, 255, 0), var(--white) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 16px 100%, 16px 100%;
  background-attachment: local, local, scroll, scroll;
}
table.data {
  width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 720px;
}
table.data thead th {
  text-align: left; padding: 11px 12px; background: var(--gray-50);
  color: var(--gray-500); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .03em;
  border-bottom: 1px solid var(--gray-200); white-space: nowrap;
}
table.data tbody td { padding: 11px 12px; border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
table.data tbody tr { transition: background .15s var(--ease-out); }
table.data tbody tr:hover { background: var(--blue-soft); }

table.data tbody tr[data-status="PENDING_APPROVAL"] { background: var(--amber-soft); }
table.data tbody tr[data-status="PENDING_APPROVAL"]:hover { background: #fde8a8; }
table.data .muted { color: var(--gray-500); }
table.data .doc-name { font-weight: 600; color: var(--gray-800); }

.empty-row {
  text-align: center; color: var(--gray-500); padding: 36px 20px !important;
  font-size: 13.5px; position: sticky; left: 0;
}

input[type="file"] { font-size: 13px; color: var(--gray-600); max-width: 100%; }
input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 9px 16px;
  border: 1px solid var(--gray-300); border-radius: var(--radius-pill);
  background: var(--white); color: var(--gray-700);
  font-weight: 600; font-size: 13px; cursor: pointer;
  transition: background .15s var(--ease-out), border-color .15s var(--ease-out);
}
input[type="file"]::file-selector-button:hover { background: var(--gray-50); border-color: var(--gray-400); }

.comment-text {
  display: inline-block; max-width: 220px; vertical-align: bottom;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 600px) {
  .comment-text { max-width: 60vw; }
}

.toolbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px;
}
.toolbar input, .toolbar select { width: auto; min-width: 160px; }
.toolbar .grow { flex: 1; min-width: 200px; }

.tabs { display: flex; gap: 6px; border-bottom: 1.5px solid var(--gray-200); margin: 2px 0 24px; flex-wrap: wrap; }
.tab-btn {
  background: none; border: none; padding: 11px 18px; font-size: 14.5px; font-weight: 600;
  color: var(--gray-500); cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1.5px;
  border-radius: 8px 8px 0 0; font-family: inherit;
  transition: color .18s var(--ease-out), border-color .18s var(--ease-out), background .18s var(--ease-out);
}
.tab-btn:hover { color: var(--gray-800); background: var(--gray-50); }
.tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 700; }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: rise-in 320ms var(--ease-out) backwards; }

.logo-preview {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 120px; max-width: 280px; height: 110px; padding: 10px;
  border-radius: var(--radius); border: 1px dashed var(--gray-300);
  background: var(--gray-50); color: var(--gray-400); font-size: 13px; overflow: hidden;
  flex-shrink: 0;
}
.logo-preview img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

.role-edit {
  border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom: 14px; background: var(--gray-50);
}
.role-edit-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.role-edit .form-row { margin: 0; }

.profile-avatar {
  width: 120px; height: 120px; border-radius: 50%; margin: 6px auto 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 42px; font-weight: 700; color: #fff;
  background-size: cover; background-position: center;
  box-shadow: var(--shadow-md); border: 3px solid var(--white);
}

.signature-preview {
  width: 100%; max-width: 260px; height: 110px; margin: 6px auto 0;
  border-radius: var(--radius-sm); border: 1px solid var(--gray-200);
  background-color: #fff;
  background-image:
    linear-gradient(45deg, var(--gray-100) 25%, transparent 25%),
    linear-gradient(-45deg, var(--gray-100) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--gray-100) 75%),
    linear-gradient(-45deg, transparent 75%, var(--gray-100) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.signature-preview img { max-width: 92%; max-height: 92%; object-fit: contain; }
.signature-preview .muted { font-size: 12.5px; color: var(--gray-500); }

.color-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.color-swatches .swatch {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--white);
  box-shadow: 0 0 0 1px var(--gray-300); cursor: pointer; padding: 0;
  transition: transform .15s var(--ease-out);
}
.color-swatches .swatch:hover { transform: scale(1.12); }
.color-swatches .swatch.active { box-shadow: 0 0 0 3px var(--gray-800); }

.bg-preview {
  width: 160px; height: 90px; border-radius: var(--radius-sm); border: 1px solid var(--gray-300);
  background: var(--gray-50); display: flex; align-items: center; justify-content: center;
  color: var(--gray-400); font-size: 12px; overflow: hidden;
}
.bg-preview img { width: 100%; height: 100%; object-fit: cover; }
.bg-live-preview {
  margin-top: 14px; height: 120px; border-radius: var(--radius);
  border: 1px solid var(--gray-200); box-shadow: var(--shadow) inset;
}

.spam-tips { background: var(--gray-50); border: 1px solid var(--gray-200); }
.spam-tips-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.spam-tips-list li { font-size: 13px; color: var(--gray-600); line-height: 1.55; }
.spam-tips-list code {
  background: var(--gray-200); padding: 1px 6px; border-radius: 6px; font-size: 12px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

.about-card { text-align: center; }

.about-logo-img {
  max-width: 240px; max-height: 64px; width: auto; height: auto;
  object-fit: contain; display: block; margin: 0 auto;
  background: var(--sidebar-bg); padding: 18px 26px; border-radius: var(--radius);
  box-sizing: content-box;
}
.about-contact {
  display: inline-flex; flex-direction: column; gap: 8px; text-align: left;
  font-size: 14px; color: var(--gray-700);
}
.about-contact .about-ic { display: inline-block; width: 20px; }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55);
  display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px;
  backdrop-filter: blur(2px);
}
.modal-overlay.open { display: flex; animation: backdrop-in 200ms var(--ease-out); }
.modal {
  background: var(--white); border-radius: var(--radius); width: 100%; max-width: 480px;
  box-shadow: var(--shadow-lg); overflow: hidden;
}

.modal-overlay.open .modal { animation: modal-in 220ms var(--ease-out); }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-head { padding: 18px 22px; border-bottom: 1px solid var(--gray-200); font-weight: 600; font-size: 16px; }
.modal-body { padding: 20px 22px; }

.modal-foot { flex-wrap: wrap; }
.modal-foot .tf-pie-nota { margin-right: auto; text-align: left; flex: 1 1 200px; min-width: 0; }
.modal-foot { padding: 16px 22px; border-top: 1px solid var(--gray-200); display: flex; gap: 10px; justify-content: flex-end; }

.tf-buscar-persona {
  width: 100%; padding: 9px 12px; border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm); font-size: 14px; font-family: inherit;
}
.tf-buscar-persona:focus { outline: none; border-color: var(--blue); box-shadow: var(--shadow-focus); }

.tf-persona-elegida {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; margin-bottom: 8px;
  background: var(--blue-soft); border: 1px solid var(--blue);
  border-radius: var(--radius-sm);
}

.g-svg { width: 100%; height: 190px; display: block; overflow: visible; }

.g-grid { stroke: var(--gray-200); stroke-width: 1; }
.g-axis { fill: var(--gray-500); font-size: 11px; font-family: inherit; }
.g-hit { cursor: crosshair; }

.g-leyenda { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; color: var(--gray-700); }
.g-leyenda i, .g-tt-fila i {
  display: inline-block; width: 9px; height: 9px; border-radius: 3px;
  margin-right: 6px; vertical-align: 0;
}

.g-tooltip {
  position: fixed; z-index: 400; pointer-events: none;
  background: var(--gray-900); color: var(--white);
  padding: 8px 10px; border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.5;
  box-shadow: var(--shadow-lg); max-width: 240px;
}
.g-tooltip[hidden] { display: none; }
.g-tt-tit { font-weight: 700; margin-bottom: 3px; }
.g-tt-fila { display: block; white-space: nowrap; }

.g-barras { display: flex; flex-direction: column; gap: 9px; }
.g-barra-fila { display: grid; grid-template-columns: minmax(90px, 34%) 1fr auto; gap: 10px; align-items: center; }
.g-barra-nombre {
  font-size: 13px; color: var(--gray-700);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.g-barra-pista { background: var(--gray-100); border-radius: var(--radius-pill); height: 10px; overflow: hidden; }

.g-barra-fill { display: block; height: 100%; background: #2563eb; border-radius: 0 4px 4px 0; }
.g-barra-valor { font-size: 13px; font-weight: 700; color: var(--gray-900); min-width: 26px; text-align: right; }

.inicio-graficos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .inicio-graficos { grid-template-columns: 1fr; } }
.inicio-vacio { color: var(--gray-500); font-size: 13px; padding: 10px 0; }

.inicio-franja {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px; margin-bottom: 20px;
}
.franja-card {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 15px 17px; text-decoration: none; color: inherit;
  transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .franja-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
}
.franja-card:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.franja-cab {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--gray-600);
  text-transform: uppercase; letter-spacing: .04em;
}
.franja-cab svg { flex: none; color: var(--gray-500); }

.franja-cifras { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.franja-cifra { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.franja-val { font-size: 23px; font-weight: 700; color: var(--gray-900); line-height: 1; }
.franja-lbl { font-size: 12px; color: var(--gray-500); }

.inicio-tendencias {
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius); margin-bottom: 20px;
}
.inicio-tendencias > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; cursor: pointer; list-style: none;
  font-size: 13.5px; font-weight: 600; color: var(--gray-900);
  border-radius: var(--radius);
}
.inicio-tendencias > summary::-webkit-details-marker { display: none; }
.inicio-tendencias > summary::before {
  content: ''; flex: none; width: 7px; height: 7px;
  border-right: 2px solid var(--gray-500); border-bottom: 2px solid var(--gray-500);
  transform: rotate(-45deg); margin-left: 2px;
  transition: transform 160ms var(--ease-out);
}
.inicio-tendencias[open] > summary::before { transform: rotate(45deg); }
.inicio-tendencias > summary:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
@media (hover: hover) and (pointer: fine) {
  .inicio-tendencias > summary:hover { background: var(--gray-100); }
}

.tend-num { font-weight: 500; color: var(--gray-500); font-size: 12.5px; }
.inicio-tendencias > .inicio-graficos { padding: 0 18px 18px; }
.inicio-tendencias .panel { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .franja-card { transition: none; }
  .franja-card:hover { transform: none; }
  .inicio-tendencias > summary::before { transition: none; }
}

.inicio-cab-acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.page-head-accion > .inicio-cab-acciones { flex: 0 1 auto; min-width: 0; }

.inicio-cab-acciones select {
  width: auto; min-width: 170px;
  padding-top: 9px; padding-bottom: 9px;
}

.inicio-sello { color: var(--gray-500); }
.inicio-sello:not(:empty)::before { content: ' · '; }

.inicio-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin: 18px 0; align-items: start; }
@media (max-width: 900px) { .inicio-cols { grid-template-columns: 1fr; } }

.kpi-link { text-decoration: none; color: inherit; transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .kpi-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
}
.kpi-link:active { transform: scale(.99); }
.kpi-link:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.kpi-sub { display: block; font-size: 11.5px; color: var(--gray-500); margin-top: 2px; }
.kpi-tend { font-size: 12px; font-weight: 700; margin-left: 7px; vertical-align: 2px; }
.kpi-tend.bueno { color: var(--green); }
.kpi-tend.malo  { color: var(--red); }

.pend-fila {
  display: flex; align-items: center; gap: 11px; padding: 11px 4px;
  border-bottom: 1px solid var(--gray-100); text-decoration: none; color: inherit;
}
.pend-fila:last-child { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) { .pend-fila:hover { background: var(--gray-50); } }
.pend-fila:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }
.pend-ic { color: var(--gray-500); display: flex; flex: 0 0 auto; }
.pend-txt { flex: 1; min-width: 0; }
.pend-tit { display: block; font-size: 13.5px; color: var(--gray-900); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pend-meta { display: block; font-size: 12px; color: var(--gray-500); }
.pend-accion { flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--blue); }

.linea-tiempo { list-style: none; margin: 0; padding: 0; }
.linea-tiempo li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--gray-100); }
.linea-tiempo li:last-child { border-bottom: 0; }
.lt-ic { color: var(--gray-400); display: flex; flex: 0 0 auto; margin-top: 2px; }
.lt-txt { flex: 1; font-size: 13px; color: var(--gray-700); line-height: 1.45; min-width: 0; }
.linea-tiempo time { font-size: 11.5px; color: var(--gray-500); white-space: nowrap; flex: 0 0 auto; }

.inicio-rapidos { display: flex; gap: 10px; flex-wrap: wrap; }

@keyframes skeleton-latido { 0%, 100% { opacity: .55; } 50% { opacity: .9; } }
.skeleton-card, .skeleton-fila, .skeleton-linea {
  background: var(--gray-100); border-radius: var(--radius-sm);
  animation: skeleton-latido 1.3s var(--ease-in-out) infinite;
}
.skeleton-card { height: 84px; border: 0; }
.skeleton-fila { height: 44px; margin-bottom: 8px; }

.skeleton-linea { display: block; height: 11px; border-radius: var(--radius-pill); }
tr.skeleton-tr td { padding: 14px 16px; border-bottom: 1px solid var(--gray-100); }
tr.skeleton-tr td:nth-child(1) .skeleton-linea { width: 62%; }
tr.skeleton-tr td:nth-child(2) .skeleton-linea { width: 84%; }
tr.skeleton-tr td:nth-child(3) .skeleton-linea { width: 48%; }
tr.skeleton-tr td:nth-child(4) .skeleton-linea { width: 70%; }
tr.skeleton-tr td:nth-child(5) .skeleton-linea { width: 40%; }
tr.skeleton-tr td:nth-child(n+6) .skeleton-linea { width: 55%; }

tr.skeleton-tr:nth-child(2) { opacity: .82; }
tr.skeleton-tr:nth-child(3) { opacity: .64; }
tr.skeleton-tr:nth-child(4) { opacity: .46; }
tr.skeleton-tr:nth-child(5) { opacity: .3; }

@media (prefers-reduced-motion: reduce) {
  .skeleton-card, .skeleton-fila, .skeleton-linea { animation: none; }
}

@media (max-width: 600px) {
  .inicio-cab-acciones { width: 100%; }
  .inicio-cab-acciones select, .inicio-cab-acciones .btn { flex: 1; }
  .pend-accion { display: none; }
}

.toast-wrap {
  position: fixed; top: 18px; right: 18px; z-index: 400;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
.toast {
  position: relative; display: flex; align-items: flex-start; gap: 11px; overflow: hidden;
  background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: 12px 12px 14px 15px;
  min-width: 280px; max-width: 400px; color: var(--gray-800);
  cursor: pointer; pointer-events: auto;

  opacity: 0; transform: translateX(115%) scale(0.98);
  transition: opacity .32s var(--ease-out), transform .32s var(--ease-out);
}
.toast.toast-show { opacity: 1; transform: translateX(0) scale(1); }

.toast.toast-hide {
  opacity: 0; transform: translateX(115%) scale(0.98);
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
}

.toast:active { transform: translateX(0) scale(0.97); }

.toast::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.toast.success::before { background: var(--green); }
.toast.error::before   { background: var(--red); }
.toast.info::before    { background: var(--blue); }
.toast.warning::before { background: var(--amber); }

.toast-ic {
  flex: none; width: 26px; height: 26px; border-radius: 50%; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
}

.toast-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.toast-titulo { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--gray-900); }
.toast-detalle { font-size: 12.5px; font-weight: 400; line-height: 1.4; color: var(--gray-600); }

.toast-accion {
  flex: none; align-self: center; border: 1px solid var(--gray-300); background: var(--white);
  color: var(--gray-800); font-family: inherit; font-size: 12.5px; font-weight: 600;
  padding: 5px 11px; border-radius: var(--radius-pill); cursor: pointer;
  transition: background .16s var(--ease-out), border-color .16s var(--ease-out), transform .16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .toast-accion:hover { background: var(--gray-50); border-color: var(--gray-400); }
}
.toast-accion:active { transform: scale(0.96); }
.toast-accion:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.toast-cerrar {
  flex: none; align-self: flex-start; border: none; background: none; cursor: pointer;
  color: var(--gray-400); padding: 3px; margin: -2px -2px 0 0; border-radius: 6px;
  display: flex; line-height: 0;
  transition: color .16s var(--ease-out), background .16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .toast-cerrar:hover { color: var(--gray-700); background: var(--gray-100); }
}
.toast-cerrar:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.toast.success .toast-ic { background: var(--green-soft); color: var(--green); }
.toast.error   .toast-ic { background: var(--red-soft);   color: var(--red); }
.toast.info    .toast-ic { background: var(--blue-soft);  color: var(--blue); }
.toast.warning .toast-ic { background: var(--amber-soft); color: var(--amber); }

@keyframes toast-empujon {
  0%   { transform: translateX(0) scale(1); }
  35%  { transform: translateX(-5px) scale(1.015); }
  100% { transform: translateX(0) scale(1); }
}
.toast.toast-empujon { animation: toast-empujon 320ms var(--ease-out); }

.toast-bar {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  transform-origin: left; transform: scaleX(1); opacity: .85;
  animation: toast-bar-deplete var(--toast-dur, 4.5s) linear forwards;
}
.toast.success .toast-bar { background: var(--green); }
.toast.error   .toast-bar { background: var(--red); }
.toast.info    .toast-bar { background: var(--blue); }
.toast.warning .toast-bar { background: var(--amber); }

.toast:hover .toast-bar { animation-play-state: paused; }

.toast-wrap.toast-pausa .toast-bar { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .toast, .toast.toast-hide { transform: none; transition: opacity .2s var(--ease-out); }
  .toast.toast-show { transform: none; }
  .toast:active { transform: none; }
  .toast.toast-empujon { animation: none; }
}

@media (max-width: 560px) {
  .toast-wrap { left: 12px; right: 12px; top: 12px; }
  .toast { min-width: 0; max-width: none; }
}

@keyframes toast-bar-deplete { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  .toast, .toast.toast-show, .toast.toast-hide { transform: none; transition: opacity .2s var(--ease-out); }
}

.inline-alert {
  padding: 11px 14px; border-radius: var(--radius-sm); font-size: 13.5px; margin-bottom: 14px;
  display: none;
}
.inline-alert.show { display: block; }
.inline-alert.error { background: var(--red-soft); color: #991b1b; }
.inline-alert.success { background: var(--green-soft); color: #166534; }
.inline-alert.info { background: var(--blue-soft); color: var(--blue-dark); }

.inline-alert.warning { background: var(--amber-soft); color: #92400e; }

.danger-zone { border: 1px solid #fecaca; background: #fef6f6; }
.danger-zone h3 { color: #991b1b; }
.danger-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding: 14px 0; border-top: 1px solid #fadcdc;
}
.danger-row > div { flex: 1; min-width: 220px; }
.danger-row strong { color: var(--gray-800); font-size: 14px; }
.danger-row p { margin: 4px 0 0; font-size: 12.5px; color: var(--gray-600); }
.danger-row .btn { flex: none; }

.detail-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; }
.detail-grid .full { grid-column: 1 / -1; }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px 14px; font-size: 14px; }
.kv dt { color: var(--gray-500); font-weight: 500; }
.kv dd { margin: 0; color: var(--gray-800); font-weight: 500; }
.pdf-frame { width: 100%; height: 520px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); }

.signed-banner {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 24px; margin-bottom: 22px;
  background: linear-gradient(180deg, var(--green-soft), #f0fdf4);
  border: 1px solid var(--green);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(22, 163, 74, 0.14);
  animation: rise-in 320ms var(--ease-out) backwards;
}
.signed-banner-icon {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--green); color: #fff;
}
.signed-banner-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.signed-banner-text strong { font-size: 16px; font-weight: 700; color: var(--gray-900); }
.signed-banner-text span { font-size: 13.5px; color: var(--gray-600); }
.signed-banner .btn { flex: 0 0 auto; }

.signed-banner.generating {
  background: linear-gradient(180deg, var(--amber-soft), #fffbeb);
  border-color: var(--amber);
  box-shadow: 0 4px 16px rgba(217, 119, 6, 0.14);
}
.signed-banner.generating .signed-banner-icon { background: var(--amber); }

.signed-banner.failed {
  background: linear-gradient(180deg, var(--red-soft), #fef2f2);
  border-color: var(--red);
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.14);
}
.signed-banner.failed .signed-banner-icon { background: var(--red); }
@media (max-width: 560px) {

  .signed-banner { flex-wrap: wrap; padding: 16px 18px; gap: 14px; }
  .signed-banner .btn { width: 100%; }
}

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 16px 22px; border-left: 2px solid var(--gray-200); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -7px; top: 2px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--blue); border: 2px solid var(--white);
}
.timeline li.approved::before { background: var(--green); }
.timeline li.rejected::before { background: var(--red); }
.timeline li.reminder::before { background: var(--violet); }
.timeline .t-action { font-weight: 600; font-size: 13.5px; color: var(--gray-800); }
.timeline .t-meta { font-size: 12px; color: var(--gray-500); }
.timeline .t-comment { font-size: 13px; color: var(--gray-600); margin-top: 3px; }

@media (max-width: 900px) {
  .detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {

  .sidebar {
    position: fixed; left: 0; top: 0; z-index: 60; transform: translateX(-100%);
    visibility: hidden;
    transition: transform .3s var(--ease-drawer), visibility 0s linear .3s;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open {
    transform: translateX(0); visibility: visible;
    transition: transform .3s var(--ease-drawer), visibility 0s;
  }
  .menu-toggle { display: block; }
  .form-row { grid-template-columns: 1fr; }
  .content { padding: 16px; }
  .sidebar-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 55;
  }
  .sidebar-backdrop.open { display: block; animation: backdrop-in 200ms var(--ease-out); }

  .topbar { padding: 0 14px; gap: 10px; }
  .topbar > div:first-child { min-width: 0; flex: 1 1 auto; }
  .topbar .menu-toggle { flex: 0 0 auto; }
  .topbar .page-title {
    min-width: 0; flex: 1 1 auto;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 16px;
  }
  .topbar .page-title-sep,
  .topbar .page-title-company { display: none; }
  .topbar .user-box { gap: 8px; flex: 0 0 auto; }
  .topbar .user-meta { display: none; }
}

.spinner {
  display: inline-block; width: 16px; height: 16px; vertical-align: -3px;
  border: 2px solid var(--gray-200); border-top-color: var(--blue);
  border-radius: 50%; animation: spin .6s linear infinite; margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-cell { color: var(--gray-500); }

.timeline li {
  animation: rise-in 360ms var(--ease-out) backwards;
}
.timeline li:nth-child(1) { animation-delay: 0ms; }
.timeline li:nth-child(2) { animation-delay: 50ms; }
.timeline li:nth-child(3) { animation-delay: 100ms; }
.timeline li:nth-child(4) { animation-delay: 150ms; }
.timeline li:nth-child(5) { animation-delay: 200ms; }

.topbar .avatar { transition: transform .18s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .btn:active { transform: none; filter: brightness(.93); }
  .stat-card:hover { transform: none; }
  .spinner { animation: spin .8s linear infinite; }
}

.bottom-nav { display: none; }

@media (max-width: 760px) {
  .bottom-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.08);

    padding-bottom: env(safe-area-inset-bottom);
  }
  .bn-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    padding: 8px 2px 6px;
    background: none;
    border: 0;
    color: var(--gray-500);
    text-decoration: none;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s var(--ease-out);
  }
  .bn-item .bn-ic {
    width: 22px; height: 22px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
  }
  .bn-item .bn-label { font-size: 11px; font-weight: 600; letter-spacing: .2px; }
  .bn-item.active { color: var(--sidebar-active); }
  .bn-item:active { color: var(--sidebar-active); }

  .bn-item.bn-profile .bn-ic.avatar {
    width: 24px; height: 24px; font-size: 11px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background-size: cover; background-position: center;
    color: #fff;
  }
  .bn-item.bn-profile.active .bn-ic.avatar { box-shadow: 0 0 0 2px var(--sidebar-active); }

  .content { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  input, select, textarea { font-size: 16px; }
  .btn { min-height: 44px; }
  .btn.btn-sm { min-height: 36px; }

  .topbar .menu-toggle { font-size: 22px; padding: 6px 10px; }
}

@media (display-mode: standalone) {
  .topbar { padding-top: calc(env(safe-area-inset-top)); }
}

@media (max-width: 600px) {
  table.data.table-cards thead { display: none; }
  table.data.table-cards,
  table.data.table-cards tbody,
  table.data.table-cards tr,
  table.data.table-cards td { display: block; width: 100%; }

  table.data.table-cards { min-width: 0; }
  table.data.table-cards tr {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    background: var(--white);
    margin-bottom: 10px;
    padding: 6px 14px;
    box-shadow: var(--shadow);
  }
  table.data.table-cards td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    text-align: right;
    border: 0;
    border-bottom: 1px solid var(--gray-100);
    padding: 9px 0;
  }
  table.data.table-cards tr td:last-child { border-bottom: 0; }
  table.data.table-cards td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 12px;
    color: var(--gray-500);
    text-align: left;
    flex: 0 0 auto;
  }

  table.data.table-cards td.empty-row { justify-content: center; text-align: center; }
  table.data.table-cards td.empty-row::before { content: none; }

  table.data.table-cards td.attach-actions { flex-wrap: wrap; justify-content: flex-start; }
  table.data.table-cards td.attach-actions::before { flex-basis: 100%; }
}

.install-fab { display: none; }
body.can-install .install-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 8px 16px 4px;
  color: var(--sidebar-text);
  border: 1px solid var(--sidebar-border);
  background: rgba(255, 255, 255, 0.04);
}
body.can-install .install-fab:hover { background: rgba(255, 255, 255, 0.1); }

.scanner-overlay {
  position: fixed; inset: 0; z-index: 200; background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-bottom: env(safe-area-inset-bottom);
}
.scanner-frame { position: relative; width: 100%; flex: 1; overflow: hidden; }
.scanner-frame video { width: 100%; height: 100%; object-fit: cover; }
.scanner-guide {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 86%; aspect-ratio: 85.6 / 54;
  border-radius: 10px;

}
.scanner-guide .c { position: absolute; width: 26px; height: 26px; border: 3px solid var(--blue); }
.scanner-guide .tl { top: -2px; left: -2px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.scanner-guide .tr { top: -2px; right: -2px; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.scanner-guide .bl { bottom: -2px; left: -2px; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.scanner-guide .br { bottom: -2px; right: -2px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }

.scanner-guide.mrz { width: 90%; aspect-ratio: 30 / 5; top: 60%; }
.scanner-hint, .scanner-status {
  position: absolute; left: 0; right: 0; text-align: center; color: #fff;
  text-shadow: 0 1px 6px #000; margin: 0; padding: 0 16px;
}
.scanner-hint { top: 8%; font-size: 16px; }
.scanner-status { bottom: 10%; font-size: 13.5px; color: #cfe6ee; }
.scanner-actions {
  display: flex; gap: 10px; padding: 14px 16px; width: 100%;
  justify-content: center; flex-wrap: wrap; background: #000;
}
.scanner-help {
  position: absolute; left: 16px; right: 16px; top: 50%; transform: translateY(-50%);
  background: var(--white); border-radius: var(--radius); padding: 22px;
  max-width: 420px; margin: 0 auto; box-shadow: var(--shadow-lg);
}
.scanner-help strong { display: block; font-size: 16px; margin-bottom: 8px; }
.scanner-help p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--gray-600); }
.scanner-help code {
  background: var(--gray-100); padding: 1px 5px; border-radius: 4px; font-size: 12.5px;
}

.sidebar nav { display: flex; flex-direction: column; gap: 3px; padding: 14px 12px; }
.sidebar .nav-group + .nav-group { margin-top: 20px; }
.sidebar .nav-group-title {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px 9px; margin: 0;
  font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.sidebar .nav-group-title svg { width: 14px; height: 14px; flex: none; opacity: .65; }
.sidebar .nav-group-title span { white-space: nowrap; }

.sidebar nav a { border-radius: 13px; font-weight: 500; }
.sidebar nav a .ic { color: rgba(255, 255, 255, 0.5); transition: color .18s var(--ease-out); }
.sidebar nav a:hover { transform: none; background: rgba(255, 255, 255, 0.05); }
.sidebar nav a:hover .ic { color: rgba(255, 255, 255, 0.8); }

.sidebar nav a.active {
  background: var(--sidebar-active-strong, #1aa9c7);
  color: var(--sidebar-active-fg, #06232b);
  box-shadow: none;
  font-weight: 600;
}
.sidebar nav a.active .ic,
.sidebar nav a.active .ic svg { color: var(--sidebar-active-fg, #06232b); }
.sidebar nav a.active:hover { background: var(--sidebar-active-strong, #1aa9c7); }
.sidebar nav a.active::after { display: none; }

html.dark body:not(.login-page) {
  --bg: #0e1621;
  --white: #18212d;
  --gray-50:  #202b38;
  --gray-100: #26333f;
  --gray-200: #2e3c4a;
  --gray-300: #3b4b5b;
  --gray-400: #6b7a8b;
  --gray-500: #9aa6b4;
  --gray-600: #b4bfca;
  --gray-700: #cdd5de;
  --gray-800: #e4e9ef;
  --gray-900: #f2f5f9;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 14px 32px rgba(0, 0, 0, 0.6);
  background: var(--bg);
  color: var(--gray-800);

  color-scheme: dark;
}

html.dark body:not(.login-page) input::placeholder,
html.dark body:not(.login-page) textarea::placeholder { color: var(--gray-400); opacity: 1; }

html.dark body:not(.login-page) input[type="date"]::-webkit-calendar-picker-indicator,
html.dark body:not(.login-page) input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html.dark body:not(.login-page) input[type="month"]::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%239aa6b4'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='18'%20rx='2'%20ry='2'/%3E%3Cline%20x1='16'%20y1='2'%20x2='16'%20y2='6'/%3E%3Cline%20x1='8'%20y1='2'%20x2='8'%20y2='6'/%3E%3Cline%20x1='3'%20y1='10'%20x2='21'%20y2='10'/%3E%3C/svg%3E");
}
html.dark body:not(.login-page) input[type="date"]:hover::-webkit-calendar-picker-indicator,
html.dark body:not(.login-page) input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
html.dark body:not(.login-page) input[type="month"]:hover::-webkit-calendar-picker-indicator {
  background-color: rgba(88, 182, 204, 0.16);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2357b6cb'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='18'%20rx='2'%20ry='2'/%3E%3Cline%20x1='16'%20y1='2'%20x2='16'%20y2='6'/%3E%3Cline%20x1='8'%20y1='2'%20x2='8'%20y2='6'/%3E%3Cline%20x1='3'%20y1='10'%20x2='21'%20y2='10'/%3E%3C/svg%3E");
}

html.dark body:not(.login-page) select:not([multiple]) {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%239aa6b4'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='6%209%2012%2015%2018%209'/%3E%3C/svg%3E");
}

html.dark body:not(.login-page) table.data tbody tr:hover { background: rgba(88, 182, 204, 0.12); }
html.dark body:not(.login-page) tr.edit-row { background: rgba(88, 182, 204, 0.10); }
html.dark body:not(.login-page) table.data tbody tr[data-status="PENDING_APPROVAL"] { background: rgba(217, 119, 6, 0.16); }
html.dark body:not(.login-page) table.data tbody tr[data-status="PENDING_APPROVAL"]:hover { background: rgba(217, 119, 6, 0.24); }

.topbar .theme-toggle { padding: 8px; line-height: 0; }

.panel-search { flex: 0 1 330px; min-width: 190px; }
.panel-search input { width: 100%; }

.panel-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 0 0 auto; max-width: 100%; }
.panel-actions > * { flex: 0 0 auto; }

.panel-actions > select { width: 200px; }

@media (max-width: 560px) {
  .panel-search { flex-basis: 100%; }
  .panel-actions { flex: 1 1 100%; }

  .panel-actions > select { flex: 1 1 120px; width: auto; min-width: 0; }
}

.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 26px 16px; text-align: center;
}
.empty-state .es-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-bottom: 4px; border-radius: 50%;
  background: var(--gray-100); color: var(--gray-400);
}
.empty-state .es-title { font-size: 14.5px; font-weight: 600; color: var(--gray-700); }
.empty-state .es-hint { font-size: 12.5px; color: var(--gray-500); max-width: 380px; line-height: 1.45; }

.empty-state.es-error .es-title { color: var(--gray-800); }
.empty-state .es-ic-error { background: var(--red-soft); color: var(--red-ink); }
.empty-state.es-error .es-retry { margin-top: 10px; }

.scan-cta[hidden], .verdict[hidden] { display: none; }

.validate-stage {
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 22px; margin-bottom: 18px;
}

.scan-cta {
  display: flex; align-items: center; gap: 16px; width: 100%; padding: 20px 22px;
  border: 0; border-radius: 14px; cursor: pointer; text-align: left; font-family: inherit;

  color: #fff; background: linear-gradient(135deg, var(--blue-dark), #1e3a8a);
  box-shadow: 0 6px 18px rgba(37, 99, 235, .28);
  transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out);
}
.scan-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(37, 99, 235, .34); }
.scan-cta:active { transform: translateY(1px); }
.scan-cta-ic {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, .18);
}
.scan-cta-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.scan-cta-txt strong { font-size: 20px; font-weight: 700; letter-spacing: .2px; }
.scan-cta-txt small { font-size: 13px; opacity: .95; }

.scan-cta.is-static { cursor: default; }
.scan-cta.is-static:hover, .scan-cta.is-static:active {
  transform: none; box-shadow: 0 6px 18px rgba(37, 99, 235, .28);
}

.scan-pulse {
  position: relative;
  width: 14px; height: 14px; border-radius: 50%; background: #fff;
}
.scan-pulse::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .65);
  animation: scan-pulse 1.9s var(--ease-out) infinite;
}
@keyframes scan-pulse {
  0%   { transform: scale(1);    opacity: .65; }
  70%  { transform: scale(3.15); opacity: 0; }
  100% { transform: scale(3.15); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .scan-pulse { animation: none; } }

.scan-alt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.scan-alt .reader-hint { margin: 0; flex: 1 1 240px; }

.reader-hint {
  display: flex; align-items: center; gap: 7px; margin: 14px 0 0;
  font-size: 12.5px; color: var(--gray-500); line-height: 1.4;
}
.reader-hint .ic-svg { flex: 0 0 auto; }

.manual-row { display: flex; align-items: flex-end; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.manual-field { flex: 1 1 220px; min-width: 0; }
.manual-field input { width: 100%; font-size: 17px; letter-spacing: .4px; }
.btn.btn-validate { padding: 12px 26px; font-size: 15.5px; flex: 0 0 auto; }

.verdict {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  padding: 24px; animation: verdict-in 160ms var(--ease-out);
}
.verdict.is-ok { background: var(--green); }
.verdict.is-denied { background: var(--red); }
@keyframes verdict-in { from { opacity: 0; } to { opacity: 1; } }
body.verdict-open { overflow: hidden; }

.verdict-card {
  position: relative; width: 100%; max-width: 620px; text-align: center; color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.verdict-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 108px; height: 108px; border-radius: 50%; margin-bottom: 6px;
  background: rgba(255, 255, 255, .18); animation: verdict-pop 260ms var(--ease-out);
}
@keyframes verdict-pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.verdict-title { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: 1px; line-height: 1.1; }
.verdict-name { margin: 10px 0 0; font-size: 27px; font-weight: 700; line-height: 1.2; }
.verdict-rut { margin: 2px 0 0; font-size: 19px; font-weight: 600; opacity: .92; letter-spacing: .5px; }
.verdict-meta { margin: 6px 0 0; font-size: 15.5px; opacity: .9; }
.verdict-reason {
  margin: 14px 0 0; font-size: 15.5px; line-height: 1.45; max-width: 480px;
  background: rgba(0, 0, 0, .17); border-radius: 12px; padding: 12px 16px;
}
.verdict-badge {
  display: inline-block; margin-right: 6px; padding: 2px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .22); font-weight: 700; font-size: 13.5px;
}
.verdict-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.v-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; background: rgba(255, 255, 255, .2);
}

.v-chip.warn { background: var(--amber); color: #fff; }

.verdict-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }

.verdict-next {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 16px 0 0; font-size: 14.5px; font-weight: 600; opacity: .9;
}

.btn.btn-verdict {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; font-size: 16px;
  font-weight: 700; border-radius: 12px; border: 0; cursor: pointer;
  background: #fff; color: #111827;
}
.btn.btn-verdict:hover { background: rgba(255, 255, 255, .88); }

.btn.btn-verdict.btn-verdict-plain {
  background: rgba(0, 0, 0, .28); color: #fff; border: 1.5px solid rgba(255, 255, 255, .45);
}
.btn.btn-verdict.btn-verdict-plain:hover { background: rgba(0, 0, 0, .38); }

.verdict-timer {
  position: absolute; left: 0; right: 0; bottom: -22px; height: 4px;
  background: rgba(255, 255, 255, .22); border-radius: 2px; overflow: hidden;
}
.verdict-timer span { display: block; height: 100%; background: rgba(255, 255, 255, .75); transition: width .1s linear; }

@media (max-width: 640px) {
  .verdict { padding: 18px; align-items: flex-start; padding-top: 8vh; }
  .verdict-title { font-size: 27px; }
  .verdict-name { font-size: 22px; }
  .verdict-mark { width: 88px; height: 88px; }
  .verdict-actions { flex-direction: column; width: 100%; }
  .btn.btn-verdict { width: 100%; justify-content: center; }
  .scan-cta-txt strong { font-size: 18px; }

  .manual-row { flex-direction: column; align-items: stretch; }
  .manual-field { flex: 0 0 auto; }
  .btn.btn-validate { width: 100%; }
}

.log-reason { margin-top: 3px; font-size: 11.5px; line-height: 1.35; color: var(--gray-500); max-width: min(230px, 100%); }

@media (max-width: 600px) {
  table.data.table-cards td { flex-wrap: wrap; }
  table.data.table-cards .log-reason { flex: 1 0 100%; max-width: 100%; }
}

.ac-panel {

  position: fixed; z-index: 300; max-height: 300px; overflow-y: auto;
  padding: 5px; background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);

  transform-origin: top left;
  animation: menu-in 130ms var(--ease-out);
}
.ac-item {
  display: flex; align-items: baseline; gap: 8px; justify-content: space-between;
  padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px;
}
.ac-item:hover, .ac-item.is-active { background: var(--gray-100); }
.ac-title { color: var(--gray-800); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-meta { color: var(--gray-500); font-size: 12px; flex: 0 0 auto; }
.ac-item mark { background: transparent; color: var(--blue); font-weight: 700; padding: 0; }
.ac-empty { padding: 10px; color: var(--gray-500); font-size: 13px; text-align: center; }

.report-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 14px; align-items: end; }
.rf-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rf-field > span, .rf-field > label { font-size: 11.5px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .3px; }
.rf-field > input, .rf-field > select { width: 100%; }

.rf-period { grid-column: span 2; }
.rf-dates { display: flex; align-items: center; gap: 7px; }
.rf-dates > input { flex: 1 1 0; min-width: 0; }
.rf-sep { color: var(--gray-400); font-size: 13px; flex: 0 0 auto; }
.rf-grow { grid-column: span 2; }

.rf-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rf-head-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 720px) { .rf-period, .rf-grow { grid-column: 1 / -1; } }

@media (max-width: 560px) {
  .rf-dates { gap: 5px; }
  .rf-dates > input { padding-left: 10px; padding-right: 4px; font-size: 14px; }
}

.report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 16px; margin-bottom: 16px; }
.report-grid .table-wrap { max-height: 340px; overflow-y: auto; overflow-x: auto; }

.report-grid table.data { min-width: 0; }
@media (max-width: 520px) { .report-grid { grid-template-columns: 1fr; } }

.rep-num { font-variant-numeric: tabular-nums; font-weight: 600; }
.rep-bar { height: 5px; margin-top: 3px; background: var(--gray-100); border-radius: 3px; overflow: hidden; }
.rep-bar > span { display: block; height: 100%; background: var(--blue); border-radius: 3px; }

.modal.modal-wide { max-width: 660px; width: 100%; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.qv-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px; margin-bottom: 10px;
}
.qv-head.is-ok { background: var(--green-soft); border: 1px solid var(--green); }
.qv-head.is-denied { background: var(--red-soft); border: 1px solid var(--red); }
.qv-head-ic {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.qv-head.is-ok .qv-head-ic { background: var(--green); }
.qv-head.is-denied .qv-head-ic { background: var(--red); }
.qv-head-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.qv-head-txt strong { font-size: 14px; color: var(--gray-900); line-height: 1.25; }
.qv-head-txt span { font-size: 12.5px; color: var(--gray-700); line-height: 1.3; }

.qv-meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 14px;
  font-size: 12.5px; color: var(--gray-600);
}
.qv-meta span { display: inline-flex; align-items: center; gap: 5px; }
.qv-meta span + span::before { content: '·'; margin-right: 9px; color: var(--gray-300); }

.qv-sec { margin-bottom: 14px; }
.qv-sec:last-child { margin-bottom: 0; }
.qv-sec h4 {
  margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--gray-500);
}
.qv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.qv-row {
  display: flex; gap: 10px; padding: 5px 0; min-width: 0;
  border-bottom: 1px solid var(--gray-100); font-size: 13px;
}
.qv-k { flex: 0 0 42%; color: var(--gray-600); }
.qv-v { flex: 1 1 auto; min-width: 0; color: var(--gray-900); word-break: break-word; }
.qv-v .badge, .qv-v .mini-tag { vertical-align: middle; }

.qv-row:has(.qv-k:only-child) { grid-column: 1 / -1; }

@media (max-width: 620px) {

  .qv-grid { grid-template-columns: 1fr; }
  .qv-row { flex-direction: column; gap: 1px; padding: 6px 0; }
  .qv-k { flex: none; font-size: 11.5px; }
}

.rf-panel { padding: 14px 16px; margin-bottom: 14px; }
.rf-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.rf-bar .rf-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rf-bar .rf-field > span, .rf-field > label {
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; color: var(--gray-500);
}
.rf-bar .rf-grow { flex: 1 1 220px; }
.rf-bar .rf-grow input { width: 100%; }
.rf-bar-actions { display: flex; gap: 8px; margin-left: auto; align-items: center; }
.rf-dates { display: flex; align-items: center; gap: 6px; }
.rf-dates input { min-width: 0; }
.rf-sep { color: var(--gray-400); }

.rf-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; align-items: center; }

.rf-mes input[type="month"] { width: auto; min-width: 148px; padding: 6px 10px;
  border-radius: var(--radius-pill); font-size: 13px; }

.persona-ficha { padding: 16px 18px; }
.pf-cab { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pf-cab h3 { margin: 0 0 2px; }
.pf-rut { font-size: 13px; color: var(--gray-500); }
.pf-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.pf-dato { display: flex; flex-direction: column; gap: 2px; }
.pf-dato span { font-size: 12px; color: var(--gray-500); }
.pf-dato strong { font-size: 14px; font-weight: 600; color: var(--gray-800); }
.chip-btn {
  border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-700);
  border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-family: inherit;
  cursor: pointer; transition: background .12s var(--ease-out), border-color .12s var(--ease-out);
}
.chip-btn:hover { background: var(--gray-50); }
.chip-btn.active { background: var(--blue-soft); border-color: var(--blue); color: var(--blue-dark); font-weight: 600; }

.rf-more {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--gray-200);
}
.rf-more[hidden] { display: none; }
.rf-more .rf-field { display: flex; flex-direction: column; gap: 4px; }
.rf-more .rf-field > span, .rf-field > label {
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; color: var(--gray-500);
}
.btn.active { background: var(--blue-soft); color: var(--blue-dark); }

.rf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rf-chips[hidden] { display: none; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--gray-100); border-radius: 999px; padding: 4px 6px 4px 11px;
  font-size: 12.5px; color: var(--gray-700);
}
.filter-chip strong { color: var(--gray-900); font-weight: 600; }
.filter-chip-x {
  border: 0; background: transparent; cursor: pointer; color: var(--gray-500);
  font-size: 16px; line-height: 1; padding: 0 4px; border-radius: 50%;
}
.filter-chip-x:hover { background: var(--gray-200); color: var(--gray-800); }

.kpi-band {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px;
  background: var(--gray-200); border: 1px solid var(--gray-200);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 18px;
}
.kpi-item {
  background: var(--white); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.kpi-val { font-size: 22px; font-weight: 800; color: var(--gray-900); line-height: 1.1; }
.kpi-lbl { font-size: 11.5px; color: var(--gray-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-item.ok .kpi-val { color: var(--green); }
.kpi-item.bad .kpi-val { color: var(--red); }
.kpi-item.warn .kpi-val { color: var(--amber); }

@media (max-width: 900px) {

  .kpi-band { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .kpi-band { grid-template-columns: repeat(2, 1fr); }
  .kpi-val { font-size: 19px; }
  .rf-bar-actions { margin-left: 0; width: 100%; }
  .rf-bar .rf-field, .rf-bar .rf-grow { flex: 1 1 100%; }
}

.btn[hidden] { display: none; }

.modal.modal-lg { max-width: 720px; }
.modal.modal-lg .modal-body { max-height: min(64vh, 560px); overflow-y: auto; }
.perms-sub { display: block; font-size: 12px; color: var(--gray-500); font-weight: 400; margin-top: 2px; }
.perms-foot { align-items: center; }
.perms-foot-gap { flex: 1 1 auto; }

.perms-origin {
  font-size: 12.5px; color: var(--gray-600); line-height: 1.5;
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm); padding: 9px 12px; margin-bottom: 14px;
}
.mini-tag.tag-custom { background: var(--violet-soft); color: var(--violet); }

.perfil-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.perfil-plantillas { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.perfil-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--gray-500); }
.perfil-btn { font-size: 11.5px; padding: 4px 11px; }
.perfil-btn.is-clear { color: var(--gray-500); }
.perfil-actual { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.perfil-actual small { font-size: 11px; color: var(--gray-500); max-width: 260px; line-height: 1.3; }
@media (max-width: 620px) {
  .perfil-actual { margin-left: 0; }
  .perfil-actual small { max-width: none; }
}

.perm-mod { margin-bottom: 16px; }
.perm-mod:last-child { margin-bottom: 0; }

.perm-mod-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--gray-500); padding: 8px 0 7px; margin-bottom: 2px;
  background: var(--white); border-bottom: 1px solid var(--gray-200);
}
.perm-mod-count { margin-left: auto; font-style: normal; font-weight: 600; color: var(--gray-400); text-transform: none; letter-spacing: 0; }

.perm-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 7px 0; border-bottom: 1px solid var(--gray-100);
}
.perm-row:last-child { border-bottom: 0; }
.perm-what { min-width: 0; display: flex; align-items: center; gap: 10px; cursor: pointer; flex: 1 1 auto; }
.perm-txt { min-width: 0; display: flex; flex-direction: column; }
.perm-what strong { font-size: 13px; color: var(--gray-900); font-weight: 600; line-height: 1.35; }
.perm-what small { font-size: 11px; color: var(--gray-500); line-height: 1.3; }
.perm-cb, .perm-mod-cb { flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--blue); cursor: pointer; margin: 0; }
.perm-cb:disabled, .perm-mod-cb:disabled { cursor: default; }

.perm-row:not(.is-on) .perm-what strong { color: var(--gray-500); font-weight: 500; }

.perm-row:not(.is-on) .lvl-group { opacity: .35; }
.perm-row:not(.is-on) .lvl-group .lvl-btn { border-color: transparent; }

.lvl-cell { flex: 0 0 auto; display: flex; justify-content: flex-end; min-width: 312px; }

.lvl-solo { font-size: 11.5px; color: var(--gray-400); font-weight: 500; }
.perm-row.is-on .lvl-solo { color: var(--gray-600); }

.lvl-group { display: inline-flex; border: 1px solid var(--gray-300); border-radius: var(--radius-pill); overflow: hidden; }
.lvl-btn {
  border: 0; background: var(--white); color: var(--gray-600); cursor: pointer;

  min-width: 86px; text-align: center;
  font-size: 11.5px; font-weight: 600; padding: 5px 8px; white-space: nowrap;
  border-right: 1px solid var(--gray-200); transition: background 120ms, color 120ms;
}
.lvl-btn:last-child { border-right: 0; }
.lvl-btn:hover:not(:disabled):not(.active) { background: var(--gray-50); color: var(--gray-900); }
.lvl-btn:disabled { cursor: default; color: var(--gray-400); }

.lvl-btn.active { color: var(--white); background: var(--blue); }
.lvl-btn.lvl-delete.active, .lvl-btn.lvl-full.active { background: #ea580c; }

@media (max-width: 620px) {

  .perm-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .perm-row.is-simple { gap: 2px; }
  .lvl-cell { min-width: 0; margin-left: 26px; }
  .lvl-group { width: 100%; }
  .lvl-btn { flex: 1 1 0; min-width: 0; padding: 6px 4px; }
  .lvl-solo { margin-left: 0; }
  .perms-foot { flex-wrap: wrap; }
}

.access-intro { margin: 0 0 14px; }
@media (max-width: 600px) { .access-intro { margin-bottom: 12px; } }

.usage-bar { position: relative; display: flex; align-items: center; gap: 8px; min-width: 128px; }
.usage-bar span {
  display: block; height: 7px; border-radius: var(--radius-pill);
  background: var(--blue); min-width: 4px; flex: 0 0 auto;
  max-width: 88px;
}
.usage-bar em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--gray-800); }
.usage-table .am-n { display: block; font-weight: 600; font-size: 13.5px; color: var(--gray-800); }
.usage-table .am-e { display: block; font-size: 12px; color: var(--gray-500); }

.usage-note {
  margin: 12px 0 0; font-size: 11.5px; color: var(--gray-500); line-height: 1.45;
  display: flex; align-items: flex-start; gap: 6px;
}
.usage-note .ic-svg { flex: 0 0 auto; margin-top: 2px; color: var(--gray-400); }

#usageDays { width: auto; flex: 0 0 auto; font-size: 12.5px; padding: 5px 26px 5px 10px; }
@media (max-width: 600px) {
  .usage-bar { justify-content: flex-end; min-width: 0; }
}

.verdict-doc {
  margin: 14px auto 0; max-width: 420px; width: 100%;
  background: rgba(255, 255, 255, 0.14); border-radius: var(--radius-sm); padding: 12px 14px;
}
.verdict-doc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  font-size: 13.5px; padding: 4px 0;
}
.verdict-doc-row span { opacity: 0.85; }
.verdict-doc-row strong { font-variant-numeric: tabular-nums; font-size: 15px; }
.verdict-doc-hint { margin: 8px 0 0; font-size: 12.5px; opacity: 0.85; line-height: 1.4; }
.verdict-doc-fix { margin-top: 10px; width: 100%; }

.mini-tag.tag-mismatch { background: var(--red-soft); color: var(--red-ink); }

.solape-aviso { display: flex; align-items: flex-start; gap: 8px; text-align: left; }
.solape-aviso ul { margin: 6px 0; padding-left: 18px; }
.solape-aviso li { margin: 2px 0; }

.smtp-pass-nota {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12.5px; line-height: 1.45; padding: 9px 12px;
  border-radius: var(--radius-sm); border: 1px solid var(--gray-200); background: var(--gray-50);
}
.smtp-pass-nota.ok { border-color: var(--green); background: var(--green-soft); color: #14532d; }
.smtp-pass-nota.warn { border-color: var(--amber); background: var(--amber-soft); color: #92400e; }
.smtp-pass-nota code { font-size: 11.5px; background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; }

.codigo-recuperacion { text-align: center; padding: 18px 12px; }
.codigo-recuperacion span {
  display: block; font-size: 38px; font-weight: 800; letter-spacing: .22em;
  font-variant-numeric: tabular-nums; color: var(--gray-900); user-select: all;
}
.codigo-recuperacion small { display: block; margin-top: 10px; font-size: 12px; color: var(--gray-500); line-height: 1.45; }

.tab-btn.tiene-cambios { position: relative; }
.tab-btn.tiene-cambios::after {
  content: ''; position: absolute; top: 6px; right: -2px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--amber);
}

.ticket-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

@keyframes ticket-form-in {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.tf-bloque { margin-bottom: 20px; }
.tf-bloque:last-of-type { margin-bottom: 0; }

.tf-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 7px;
}
.tf-ayuda {
  font-size: 12.5px;
  color: var(--gray-500);
  margin: 0 0 9px;
  line-height: 1.45;
}

.tf-asunto {
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 14px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--gray-900);
  transition: border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.tf-asunto::placeholder { font-weight: 400; color: var(--gray-400); }
.tf-asunto:focus { outline: none; border-color: var(--sidebar-active); box-shadow: var(--shadow-focus); }

.tf-textarea {
  width: 100%;
  min-height: 108px;
  resize: vertical;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--gray-900);
  transition: border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.tf-textarea:focus { outline: none; border-color: var(--sidebar-active); box-shadow: var(--shadow-focus); }

.tf-contador {
  font-size: 12px;
  color: var(--gray-400);
  text-align: right;
  margin-top: 5px;
  opacity: 0;
  transition: opacity .2s var(--ease-out), color .2s var(--ease-out);
}
.tf-contador[data-cerca] { opacity: 1; }
.tf-contador[data-limite] { opacity: 1; color: var(--red); font-weight: 600; }

.tf-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.tf-chip {
  border: 1px solid var(--gray-300);
  background: var(--white);
  color: var(--gray-700);
  border-radius: var(--radius-pill);
  padding: 8px 15px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .16s var(--ease-out), border-color .16s var(--ease-out),
              background .16s var(--ease-out), color .16s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .tf-chip:hover { border-color: var(--gray-400); background: var(--gray-50); }
}
.tf-chip:active { transform: scale(.97); }
.tf-chip[aria-pressed="true"] {
  background: var(--sidebar-bg);
  border-color: var(--sidebar-bg);
  color: var(--white);
}
.tf-chip:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.tf-prioridades {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@container (min-width: 720px) { .tf-prioridades { grid-template-columns: repeat(4, 1fr); } }
@container (max-width: 400px) { .tf-prioridades { grid-template-columns: 1fr; } }

.tf-prio {
  position: relative;
  border: 1px solid var(--gray-300);
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 11px 10px 10px;
  cursor: pointer;
  text-align: left;
  transition: transform .16s var(--ease-out), border-color .16s var(--ease-out),
              background .16s var(--ease-out), box-shadow .16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .tf-prio:hover { border-color: var(--gray-400); }
}
.tf-prio:active { transform: scale(.98); }
.tf-prio:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.tf-prio-punto {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block; margin-right: 7px; vertical-align: 1px;
}
.tf-prio-nombre { font-size: 13.5px; font-weight: 700; color: var(--gray-800); }

.tf-prio-impacto { display: block; font-size: 12px; color: var(--gray-700); margin-top: 4px; }
.tf-prio-plazo  { display: block; font-size: 11.5px; color: var(--gray-500); margin-top: 2px; }

.tf-prio[aria-pressed="true"] { border-width: 2px; padding: 10px 9px 9px; }
.tf-prio[aria-pressed="true"] .tf-prio-nombre { color: var(--gray-900); }
.tf-prio[data-p="BAJA"][aria-pressed="true"]    { border-color: var(--gray-400);  background: var(--gray-50); }
.tf-prio[data-p="MEDIA"][aria-pressed="true"]   { border-color: var(--blue);      background: var(--blue-soft); }
.tf-prio[data-p="ALTA"][aria-pressed="true"]    { border-color: var(--amber);     background: var(--amber-soft); }
.tf-prio[data-p="CRITICA"][aria-pressed="true"] { border-color: var(--red);       background: var(--red-soft); }

.tf-prio[data-p="BAJA"]    .tf-prio-punto { background: var(--gray-400); }
.tf-prio[data-p="MEDIA"]   .tf-prio-punto { background: var(--blue); }
.tf-prio[data-p="ALTA"]    .tf-prio-punto { background: var(--amber); }
.tf-prio[data-p="CRITICA"] .tf-prio-punto { background: var(--red); }

.tf-drop {
  border: 1.5px dashed var(--gray-300);
  border-radius: var(--radius-sm);
  padding: 20px 16px;
  text-align: center;
  cursor: pointer;
  background: var(--gray-50);
  transition: border-color .18s var(--ease-out), background .18s var(--ease-out),
              transform .18s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .tf-drop:hover { border-color: var(--sidebar-active); background: var(--white); }
}
.tf-drop:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.tf-drop[data-encima] {
  border-color: var(--sidebar-active);
  background: var(--white);
  transform: scale(1.01);
}
.tf-drop-titulo { font-size: 13.5px; font-weight: 600; color: var(--gray-700); }
.tf-drop-sub    { font-size: 12px; color: var(--gray-500); margin-top: 4px; }
.tf-drop kbd {
  font-family: inherit; font-size: 11px; font-weight: 700;
  background: var(--white); border: 1px solid var(--gray-300);
  border-bottom-width: 2px; border-radius: 5px; padding: 1px 5px;
}

.tf-adjuntos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

.tf-adj {
  position: relative;
  width: 88px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  padding: 6px;
  animation: ticket-form-in 180ms var(--ease-out) both;
}
.tf-adj-img {
  width: 100%; height: 58px; object-fit: cover;
  border-radius: 8px; background: var(--gray-100); display: block;
}
.tf-adj-doc {
  height: 58px; border-radius: 8px; background: var(--gray-100);
  display: flex; align-items: center; justify-content: center; color: var(--gray-500);
}
.tf-adj-nombre {
  font-size: 10.5px; color: var(--gray-600); margin-top: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tf-adj-quitar {
  position: absolute; top: -7px; right: -7px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--gray-300); background: var(--white); color: var(--gray-600);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--shadow);
  transition: transform .16s var(--ease-out), background .16s var(--ease-out), color .16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .tf-adj-quitar:hover { background: var(--red); border-color: var(--red); color: var(--white); }
}
.tf-adj-quitar:active { transform: scale(.9); }

.tf-pie {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--gray-200);
}
.tf-pie-nota { font-size: 12.5px; color: var(--gray-500); flex: 1; min-width: 180px; }

@media (prefers-reduced-motion: reduce) {
  .tf-adj { animation: none; }
  .tf-chip:active, .tf-prio:active, .tf-adj-quitar:active { transform: none; }
  .tf-drop[data-encima] { transform: none; }
}

.con-fab .content { padding-bottom: 88px; }

.soporte-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 17px;
  border-radius: var(--radius-pill);

  background: linear-gradient(135deg, #0C2833 0%, #16414F 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.24);
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out),
              background 160ms var(--ease-out);
}
.soporte-fab svg { flex: none; }

@media (hover: hover) and (pointer: fine) {
  .soporte-fab:hover {

    background: linear-gradient(135deg, #16414F 0%, #1E5566 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.22);
  }

  html.dark .soporte-fab:hover { background: linear-gradient(135deg, #7FCADB 0%, #9BD8E5 100%); }
}

html.dark .soporte-fab {
  background: linear-gradient(135deg, #57B6CC 0%, #7FCADB 100%);
  color: #0F172A;
  border-color: rgba(15, 23, 42, .12);
}

.soporte-fab:active { transform: scale(.96); }
.soporte-fab:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.soporte-fab::after {
  content: attr(data-tip);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap;
  background: var(--gray-900, #0F172A);
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  padding: 7px 11px;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .soporte-fab:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
}
.soporte-fab:focus-visible::after { opacity: 1; transform: translateY(-50%) translateX(0); }

@media (max-width: 760px) {
  .soporte-fab {

    bottom: calc(56px + env(safe-area-inset-bottom) + 14px);
    right: 14px;
    width: 48px;
    height: 48px;
    padding: 0;
    justify-content: center;
  }
  .soporte-fab-txt { display: none; }

  .con-fab .content { padding-bottom: calc(48px + 56px + env(safe-area-inset-bottom) + 28px); }

}

@media (prefers-reduced-motion: reduce) {
  .soporte-fab { transition: background 160ms; }
  .soporte-fab:hover, .soporte-fab:active { transform: none; }
  .soporte-fab::after { transition: opacity 140ms; }
  .soporte-fab:hover::after,
  .soporte-fab:focus-visible::after { transform: translateY(-50%); }
}

.switch-interna {
  min-height: 44px;
  padding: 4px 10px 4px 4px;
  border-radius: var(--radius-pill);
  transition: background 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .switch-interna:hover { background: var(--gray-50); }
}
.switch-interna.es-interna .switch-text { color: var(--amber, #b45309); }
.switch-interna.es-interna { background: var(--amber-soft); }

.ficha-grid { display: grid; gap: 22px; }
@media (min-width: 1080px) {
  .ficha-grid { grid-template-columns: minmax(0, 1fr) clamp(300px, 24%, 400px); align-items: start; }
  .ficha-main { order: 1; min-width: 0; }
  .ficha-rail {
    order: 2;
    position: sticky;

    top: 78px;
  }
}

@media (min-width: 1080px) {
  .ficha-rail .ficha-datos { grid-template-columns: 1fr; gap: 12px; }
}

.hilo { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }

.hilo-msg { display: flex; gap: 12px; align-items: flex-start; }
.hilo-avatar {
  width: 32px; height: 32px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .3px;
  background: var(--gray-400);
}
.hilo-cuerpo {
  flex: 1; min-width: 0;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 10px 14px;
}
.hilo-cab {
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  margin-bottom: 4px;
}
.hilo-cab strong { font-size: 13.5px; }
.hilo-rol {
  font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--gray-500);
}
.hilo-fecha { font-size: 12px; color: var(--gray-500); }
.hilo-texto { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.hilo-adjuntos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

.hilo-msg[data-interna] .hilo-cuerpo {
  background: var(--amber-soft);
  border-color: rgba(180, 83, 9, .25);
}

.ficha-bloque {
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: var(--blue-soft);
}
.ficha-bloque-titulo { font-size: 12.5px; color: var(--gray-500); margin-bottom: 6px; }
.ficha-bloque-texto { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.ficha-bloque.es-resolucion { background: var(--green-soft); }

.ficha-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 220px));
  gap: 14px 24px;
  margin-bottom: 16px;
}
.ficha-dato .muted { font-size: 12.5px; }

tr.fila-abre { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  tr.fila-abre:hover { background: var(--gray-50); }
}
tr.fila-abre:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--sidebar-active);
}

.ficha-asignar { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; }
.ficha-asignar > span {
  font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; color: var(--gray-500);
}
.ficha-asignar select { max-width: 190px; }

#fichaAcciones[aria-busy="true"] { opacity: .6; pointer-events: none; }

.barra-sin-conexion {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  background: #fef3c7; color: #92400e;
  border-top: 3px solid #d97706;
  padding: 11px 18px; text-align: center;
  font-family: var(--font); font-size: 13.5px; font-weight: 600;
}

.eq-ficha {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 20px;
  background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
}
.eq-ficha-codigo { font-weight: 700; font-size: 15px; color: var(--gray-900); letter-spacing: .01em; }
.eq-ficha-que { color: var(--gray-600); font-size: 13.5px; }

.eq-ficha-quien { flex: 1 1 100%; font-size: 13px; color: var(--gray-600); }
.eq-ficha-quien strong { color: var(--gray-800); font-weight: 600; }

.eq-sin-cuenta { display: block; margin-top: 7px; font-size: 12.5px; color: var(--gray-600); line-height: 1.4; }
.eq-sin-cuenta strong { color: var(--gray-800); }

.eq-acciones {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--gray-200);
}

.eq-acciones-hueco { flex: 1 1 0; min-width: 0; }
@media (max-width: 560px) { .eq-acciones-hueco { display: none; } }

.eq-datos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 26px;
  margin: 0 0 18px;
}
@container (max-width: 520px) { .eq-datos { grid-template-columns: 1fr; } }
.eq-dato { min-width: 0; }
.eq-dato dt {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--gray-500); margin-bottom: 4px;
}
.eq-dato dd { margin: 0; font-size: 14px; color: var(--gray-800); line-height: 1.45; overflow-wrap: anywhere; }

.eq-dato-ancho { margin-bottom: 18px; }

.eq-hist-titulo {
  margin: 22px 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--gray-500);
}

.eq-hist { list-style: none; padding: 0; margin: 0; }
.eq-hito {
  position: relative; padding: 0 0 18px 20px;
  border-left: 2px solid var(--gray-200);
}

.eq-hist .eq-hito:last-child { border-left-color: transparent; padding-bottom: 0; }
.eq-hito::before {
  content: ''; position: absolute; left: -6px; top: 5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--gray-300);
}

.eq-hito-entrega::before { border-color: var(--blue); }
.eq-hito-devolucion::before, .eq-hito-de_reparacion::before { border-color: var(--green); }
.eq-hito-a_reparacion::before { border-color: var(--amber); }
.eq-hito-baja::before { border-color: var(--red); }

.eq-hito-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.eq-hito-cab strong { font-size: 14px; color: var(--gray-900); }
.eq-hito-quien { font-size: 13.5px; color: var(--gray-800); margin-top: 2px; }
.eq-hito-nota { font-size: 13px; color: var(--gray-600); margin-top: 3px; line-height: 1.45; }

.eq-tecnicos { margin-bottom: 16px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); }
.eq-tecnicos > summary {
  cursor: pointer; padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--gray-700);
  list-style: none; display: flex; align-items: center; gap: 8px; border-radius: var(--radius-sm);
}
.eq-tecnicos > summary::-webkit-details-marker { display: none; }

.eq-tecnicos > summary::before {
  content: ''; width: 0; height: 0; flex: 0 0 auto;
  border-left: 5px solid var(--gray-500); border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform .18s var(--ease-out);
}
.eq-tecnicos[open] > summary::before { transform: rotate(90deg); }
.eq-tecnicos > summary:hover { background: var(--gray-50); }
.eq-tecnicos > summary:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.eq-tecnicos-nota { font-weight: 400; font-size: 12px; color: var(--gray-500); }
.eq-tecnicos[open] > summary { border-bottom: 1px solid var(--gray-200); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.eq-tecnicos > *:not(summary) { padding: 0 14px; }
.eq-tecnicos > *:not(summary):first-of-type { padding-top: 14px; }
.eq-tecnicos > .form-group:last-child { padding-bottom: 2px; }

.eq-hito-acciones { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.eq-hito-acciones .btn { padding: 3px 10px; font-size: 12px; }
@media (max-width: 560px) { .eq-hito-acciones { margin-left: 0; width: 100%; } }

.mif-resumen {
  display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px;
}
.fr-card {
  display: flex; align-items: center; gap: 12px;
  flex: 1 1 200px; max-width: 320px; min-width: 0;
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
  padding: 14px 16px; text-decoration: none; color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  a.fr-card:hover { border-color: var(--blue); box-shadow: var(--shadow-md); transform: translateY(-1px); }
}
a.fr-card:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.fr-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%;
  background: var(--blue-soft); color: var(--blue);
}
.fr-ic.fr-amber { background: var(--amber-soft); color: var(--amber-ink); }
.fr-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.fr-txt strong { font-size: 20px; font-weight: 700; color: var(--gray-900); }
.fr-txt span { font-size: 12.5px; color: var(--gray-600); }

.mif-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px;
  grid-auto-flow: row dense; align-items: start; margin-bottom: 22px;
}
@media (max-width: 900px) { .mif-grid { grid-template-columns: 1fr; } }
.mif-sub { margin: -6px 0 14px; font-size: 12.5px; }

.eq-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-top: 1px solid var(--gray-100);
}
.eq-item:first-child { border-top: 0; padding-top: 0; }
.eq-item-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: var(--radius-sm);
  background: var(--gray-100); color: var(--gray-600);
}
.eq-item-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.eq-item-txt strong { font-size: 14px; color: var(--gray-800); font-weight: 600; }
.eq-item-meta { font-size: 12.5px; color: var(--gray-500); line-height: 1.4; }
.eq-item-meta code {
  font-size: 12px; background: var(--gray-100); padding: 1px 5px;
  border-radius: 4px; color: var(--gray-700);
}
.eq-item .mini-tag, .eq-item .btn { flex: 0 0 auto; align-self: center; }

.acc-mod { padding: 10px 0; border-top: 1px solid var(--gray-100); }
.acc-mod:first-child { border-top: 0; padding-top: 0; }
.acc-mod-tit {
  display: flex; align-items: center; gap: 7px; margin-bottom: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--gray-500);
}
.acc-mod-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.acc-mod-lista li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13.5px; color: var(--gray-700);
}

.mif-datos { display: flex; flex-direction: column; gap: 9px; margin: 0; }
.mif-datos > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.mif-datos dt { font-size: 12.5px; color: var(--gray-500); margin: 0; }
.mif-datos dd { font-size: 13.5px; color: var(--gray-800); font-weight: 500; margin: 0; text-align: right; }

.mif-skeleton { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.mif-skeleton span {
  height: 66px; border-radius: var(--radius-sm); background: var(--gray-100);
  animation: skeleton-latido 1.3s var(--ease-in-out) infinite;
}
@media (prefers-reduced-motion: reduce) { .mif-skeleton span { animation: none; } }

@media (max-width: 620px) {
  .fr-txt strong { font-size: 18px; }
  .eq-item { flex-wrap: wrap; }
  .eq-item .mini-tag, .eq-item .btn { align-self: flex-start; margin-left: 46px; }
  .mif-datos > div { flex-direction: column; gap: 1px; }
  .mif-datos dd { text-align: left; }
}