:root {
  --fondo: #f5efe5;
  --panel: #fffdfa;
  --texto: #133a36;
  --muted: #5f766f;
  --borde: #d9ccb3;
  --acento: #106b61;
  --acento-2: #0b5a52;
  --acento-3: #fcc65a;
  --acento-4: #f5d995;
  --acento-suave: #e6f0ec;
  --ok: #1f6b44;
  --error: #8a2f2f;
  --sidebar: #142329;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(252, 198, 90, 0.22), transparent 26%),
    radial-gradient(circle at bottom right, rgba(16, 107, 97, 0.16), transparent 24%),
    linear-gradient(180deg, #fcf7ee 0%, var(--fondo) 100%);
  color: var(--texto);
}

.body-login {
  min-height: 100vh;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) minmax(300px, 0.76fr);
}

.login-hero {
  padding: 56px 58px;
  background:
    radial-gradient(circle at 12% 18%, rgba(252, 198, 90, 0.34), transparent 18%),
    radial-gradient(circle at 82% 14%, rgba(252, 198, 90, 0.24), transparent 16%),
    linear-gradient(145deg, #eff7f3 0%, #dcece5 52%, #f7e7bf 100%);
  color: var(--texto);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.login-hero::after {
  content: "";
  position: absolute;
  inset: auto -90px -120px auto;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 107, 97, 0.15) 0%, rgba(16, 107, 97, 0) 70%);
}

.login-hero__logo-wrap {
  width: 100%;
  margin-bottom: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-hero__logo {
  width: min(100%, 360px);
  height: auto;
  aspect-ratio: 51 / 38;
  object-fit: contain;
  filter: drop-shadow(0 20px 28px rgba(16, 107, 97, 0.14));
}

.login-hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  color: rgba(16, 107, 97, 0.78);
  font-weight: 700;
}

.login-hero h1 {
  margin: 16px 0 14px;
  font-size: 48px;
  line-height: 1.05;
}

.login-hero p {
  max-width: 620px;
  color: rgba(19, 58, 54, 0.84);
  line-height: 1.6;
  font-size: 17px;
}

.login-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
  justify-content: center;
}

.login-hero__chips span {
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(255, 253, 250, 0.7);
  border: 1px solid rgba(16, 107, 97, 0.14);
  color: var(--acento-2);
  font-weight: 700;
}

.login-card-wrap {
  padding: 44px 18px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 18px;
  position: relative;
}

.login-card {
  width: min(100%, 340px);
  background:
    linear-gradient(180deg, rgba(255, 253, 250, 0.96), rgba(255, 250, 242, 0.96));
  border: 1px solid rgba(16, 107, 97, 0.12);
  border-radius: 26px;
  padding: 24px 22px 22px;
  box-shadow: 0 18px 46px rgba(16, 107, 97, 0.08);
}

.login-card--amplia {
  width: min(100%, 420px);
}

.alertas--login {
  width: min(100%, 340px);
}

.login-card h2 {
  margin: 0 0 16px;
  font-size: 24px;
  color: var(--acento-2);
}

.formulario--login {
  max-width: 100%;
}

.formulario--amplio {
  width: 100%;
}

.formulario--login label {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.formulario--login span {
  color: var(--acento-2);
  font-weight: 700;
}

.formulario--login input {
  width: 100%;
  padding: 10px 12px;
  min-height: 40px;
  font-size: 14px;
  border-radius: 16px;
  border: 1px solid rgba(16, 107, 97, 0.22);
  background: rgba(255, 255, 255, 0.88);
  color: var(--texto);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.formulario--login input:focus {
  border-color: rgba(16, 107, 97, 0.58);
  box-shadow: 0 0 0 4px rgba(16, 107, 97, 0.10);
  transform: translateY(-1px);
}

.formulario--login button {
  width: fit-content;
  min-width: 104px;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--acento) 0%, var(--acento-2) 100%);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 12px 24px rgba(16, 107, 97, 0.18);
  cursor: pointer;
}

.formulario--login button:hover {
  background: linear-gradient(135deg, #0e7568 0%, #0c4f48 100%);
}

.formulario--login .boton-secundario--suave {
  background: rgba(255, 255, 255, 0.78);
  color: var(--acento-2);
  border: 1px solid rgba(16, 107, 97, 0.22);
  box-shadow: none;
}

.formulario--login .boton-secundario--suave:hover {
  background: rgba(230, 240, 236, 0.95);
}

.acciones-login {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.boton-secundario--link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 126px;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
  border: 0;
  background: linear-gradient(135deg, var(--acento) 0%, var(--acento-2) 100%);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 12px 24px rgba(16, 107, 97, 0.18);
}

.boton-secundario--link:hover {
  background: linear-gradient(135deg, #0e7568 0%, #0c4f48 100%);
}

.login-ayuda {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.resumen--login {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(230, 240, 236, 0.9), rgba(255, 247, 228, 0.9));
  border: 1px solid rgba(16, 107, 97, 0.10);
  color: var(--acento-2);
}

@media (max-width: 960px) {
  .login-shell {
    grid-template-columns: 1fr;
  }

  .login-hero {
    padding: 40px 28px 26px;
  }

  .login-hero__logo {
    width: min(100%, 280px);
  }

  .login-hero h1 {
    font-size: 36px;
  }

  .login-card {
    width: 100%;
  }

  .alertas--login {
    width: 100%;
  }

  .login-card-wrap {
    padding: 22px 20px 32px;
  }
}

.shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px 1fr;
}

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background:
    radial-gradient(circle at top left, rgba(252, 198, 90, 0.22), transparent 26%),
    linear-gradient(180deg, #f3f8f4 0%, #e3efe8 58%, #f7ead0 100%);
  color: var(--texto);
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  border-right: 1px solid rgba(16, 107, 97, 0.10);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.45);
}

.sidebar__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
  color: rgba(16, 107, 97, 0.74);
}

.sidebar__title {
  margin-top: 8px;
  font-size: 28px;
  font-weight: 800;
  color: var(--acento-2);
}

.sidebar__subtitle {
  margin-top: 4px;
  color: rgba(19, 58, 54, 0.72);
}

.sidebar__nav {
  display: grid;
  gap: 8px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 16px;
  padding: 12px 14px;
  color: var(--acento-2);
  text-decoration: none;
  background: rgba(255, 253, 250, 0.55);
  border: 1px solid rgba(16, 107, 97, 0.08);
}

.nav-link__icon {
  width: 26px;
  text-align: center;
}

.nav-link--activo {
  background: linear-gradient(135deg, rgba(16, 107, 97, 0.16), rgba(252, 198, 90, 0.24));
  color: var(--acento-2);
  border: 1px solid rgba(16, 107, 97, 0.18);
  box-shadow: 0 10px 22px rgba(16, 107, 97, 0.08);
}

.nav-link--disabled {
  opacity: 0.6;
  cursor: default;
}

.sidebar__foot {
  margin-top: auto;
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 253, 250, 0.74), rgba(243, 248, 244, 0.86));
  color: rgba(19, 58, 54, 0.78);
  border: 1px solid rgba(16, 107, 97, 0.10);
}

.sidebar__foot small {
  display: block;
  margin-top: 6px;
}

.sidebar__account { margin-top:auto; padding-top:12px; border-top:1px solid rgba(16,107,97,.14); }
.sidebar__account-user { display:flex; align-items:center; gap:8px; padding:5px 7px; color:#244d48; }
.sidebar__account-user>span:last-child { min-width:0; }
.sidebar__account-user small,.sidebar__account-user strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar__account-user small { margin-bottom:1px; color:#68817d; font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.sidebar__account-user strong { font-size:11px; }
.sidebar__account-icon { color:#159277; font-size:8px; }
.sidebar__logout { display:flex; align-items:center; gap:7px; width:100%; margin-top:3px; padding:6px 8px; border:0; border-radius:7px; color:#9a302b; background:transparent; font-family:inherit; font-size:11px; font-weight:600; cursor:pointer; }
.sidebar__logout:hover { background:rgba(185,71,63,.09); }
.sidebar__logout span { font-size:15px; line-height:1; }

.contenido {
  padding: 30px 26px 44px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
}

.topbar__acciones {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.topbar__acciones form {
  margin: 0;
}

.topbar__opcion {
  color: var(--acento-2);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.topbar__opcion:hover {
  color: var(--acento);
  text-decoration: underline;
}

.topbar__opcion--activa {
  color: var(--muted);
  cursor: default;
  text-decoration: none;
}

.boton-secundario {
  border: 1px solid rgba(16, 107, 97, 0.14);
  background: linear-gradient(180deg, rgba(255, 253, 250, 0.96), rgba(243, 248, 244, 0.96));
  color: var(--acento-2);
  box-shadow: 0 10px 22px rgba(16, 107, 97, 0.08);
}

.hero {
  background:
    radial-gradient(circle at top right, rgba(252, 198, 90, 0.28), transparent 24%),
    linear-gradient(145deg, #eff7f3 0%, #dcece5 56%, #f7e7bf 100%);
  color: var(--texto);
  border-radius: 26px;
  padding: 30px 30px 26px;
  box-shadow: 0 18px 45px rgba(16, 107, 97, 0.10);
  border: 1px solid rgba(16, 107, 97, 0.10);
}

.hero--dashboard,
.hero--roles {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.hero__chip,
.hero__volver {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 10px 14px;
  color: var(--acento-2);
  text-decoration: none;
  background: rgba(255, 253, 250, 0.74);
  border: 1px solid rgba(16, 107, 97, 0.12);
}

.hero__marca {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  color: rgba(16, 107, 97, 0.78);
}

.hero h1 {
  margin: 10px 0 8px;
  font-size: 34px;
}

.hero p {
  margin: 0;
  max-width: 760px;
  color: rgba(19, 58, 54, 0.84);
}

.modulos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.perfil-dashboard {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

.perfil-dashboard__foto-wrap,
.perfil-dashboard__card {
  border-radius: 24px;
  background: var(--panel);
  border: 1px solid var(--borde);
  box-shadow: 0 12px 28px rgba(16, 107, 97, 0.08);
}

.perfil-dashboard__foto-wrap {
  padding: 18px;
  display: grid;
  align-content: start;
  gap: 12px;
  justify-items: center;
}

.perfil-dashboard__foto {
  width: 128px;
  height: 160px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at top left, rgba(252, 198, 90, 0.32), transparent 35%),
    linear-gradient(160deg, #e8f2ee 0%, #d7e6df 52%, #f8e3b2 100%);
  border: 1px dashed rgba(16, 107, 97, 0.24);
  color: var(--acento-2);
  font-size: 44px;
  font-weight: 800;
}

.perfil-dashboard__foto--imagen {
  object-fit: cover;
  border: 1px solid rgba(16, 107, 97, 0.18);
  display: block;
}

.perfil-dashboard__foto-label {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
  color: rgba(16, 107, 97, 0.78);
  font-weight: 700;
}

.perfil-dashboard__foto-form {
  width: 100%;
  display: flex;
  justify-content: center;
}

.perfil-dashboard__foto-boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--acento) 0%, var(--acento-2) 100%);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(16, 107, 97, 0.14);
}

.perfil-dashboard__foto-boton:hover {
  filter: brightness(1.05);
}

.perfil-dashboard__foto-boton input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.perfil-dashboard__card {
  padding: 24px 26px;
}

.perfil-dashboard__card h1 {
  margin: 0 0 16px;
  font-size: 32px;
}

.perfil-dashboard__datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(230, 240, 236, 0.9), rgba(255, 247, 228, 0.9));
  border: 1px solid rgba(16, 107, 97, 0.10);
  border-radius: 18px;
}

.perfil-dashboard__datos strong {
  color: var(--acento-2);
}

.perfil-dashboard__acciones {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

.password-change-layout {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

.password-change-login-wrap {
  display: grid;
  justify-items: center;
  margin-top: 8px;
}

.password-change-login-wrap .login-card {
  width: min(100%, 520px);
}

.password-change-panel {
  width: min(100%, 760px);
}

.password-change-panel__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.modulo-card {
  display: flex;
  gap: 16px;
  border-radius: 22px;
  padding: 24px;
  background: var(--panel);
  border: 1px solid var(--borde);
  box-shadow: 0 12px 28px rgba(16, 107, 97, 0.08);
  text-decoration: none;
  color: inherit;
}

.modulo-card__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(16, 107, 97, 0.12), rgba(252, 198, 90, 0.24));
  font-size: 24px;
  color: var(--acento-2);
}

.modulo-card__contenido h2 {
  margin: 0 0 8px;
}

.modulo-card__contenido p {
  margin: 0;
  color: var(--muted);
}

.modulo-card__cta,
.modulo-card__estado {
  margin-top: 14px;
  font-weight: 700;
  color: var(--acento-2);
}

.modulo-card--destacado {
  background: linear-gradient(180deg, #fffdfa 0%, #eef7f2 100%);
  border-color: rgba(16, 107, 97, 0.14);
}

.modulo-card--bloqueado {
  opacity: 0.84;
}
.nav-submenu { display:grid; gap:3px; margin:-3px 0 3px 25px; padding-left:16px; border-left:2px solid rgba(16,107,97,.16); }
.nav-admin-group { display:grid; gap:8px; }
.nav-admin-group>summary { list-style:none; cursor:pointer; user-select:none; }
.nav-admin-group>summary::-webkit-details-marker { display:none; }
.nav-link__chevron { margin-left:auto; font-size:15px; transition:transform .18s ease; }
.nav-admin-group[open] .nav-link__chevron { transform:rotate(180deg); }
.nav-sublink { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 9px; border-radius:9px; color:#35625d; text-decoration:none; font-size:12px; }
.nav-sublink:hover,.nav-sublink--activo { color:var(--acento-2); background:rgba(255,253,250,.72); font-weight:700; }
.nav-count,.mov-pending-badge { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; border-radius:999px; color:#fff; background:#b9473f; font-size:11px; }

.portal-inicio { margin-top:4px; border:1px solid var(--borde); background:var(--panel); }
.perfil-compacto { display:flex; align-items:center; gap:16px; min-height:112px; padding:13px 16px; border-bottom:1px solid var(--borde); background:#fafbf9; }
.perfil-compacto__foto-wrap { position:relative; flex:0 0 72px; width:72px; height:82px; }
.perfil-compacto__foto { width:72px; height:82px; display:grid; place-items:center; overflow:hidden; border:1px solid #bdcec9; border-radius:5px; background:#eaf2ef; color:var(--acento-2); font-size:25px; font-weight:800; }
.perfil-compacto__foto--imagen { display:block; object-fit:cover; }
.perfil-compacto__foto-form { position:absolute; right:-5px; bottom:-5px; }
.perfil-compacto__foto-boton { position:relative; display:grid; width:25px; height:25px; place-items:center; overflow:hidden; border:1px solid #aac1bc; border-radius:50%; background:var(--acento-2); color:#fff; cursor:pointer; }
.perfil-compacto__foto-boton span { color:#fff; font-size:11px; }
.perfil-compacto__foto-boton input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.perfil-compacto__contenido { flex:1 1 auto; min-width:0; }
.perfil-compacto__contenido h1 { margin:0 0 10px; overflow:hidden; color:var(--ink); font-size:20px; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; }
.perfil-compacto__datos { display:flex; flex-wrap:wrap; gap:7px 0; color:var(--ink); font-size:11px; }
.perfil-compacto__datos span { padding:0 13px; border-left:1px solid #d3dfdc; white-space:nowrap; }
.perfil-compacto__datos span:first-child { padding-left:0; border-left:0; }
.perfil-compacto__datos strong { margin-right:4px; color:var(--muted); font-size:9px; text-transform:uppercase; }
.accesos-app__titulo { padding:10px 14px 7px; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.accesos-app { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid #dce5e2; }
.acceso-app { min-height:52px; display:grid; grid-template-columns:30px 1fr 16px; align-items:center; gap:9px; padding:7px 13px; border:0 solid #dce5e2; border-width:0 1px 1px 0; color:var(--ink); text-decoration:none; transition:background .12s ease; }
.acceso-app:nth-child(even) { border-right:0; }
.acceso-app:hover { background:#eef5f2; }
.acceso-app__icono { width:28px; height:28px; display:grid; place-items:center; border-radius:4px; background:#e9f1ee; color:var(--acento-2); font-size:14px; }
.acceso-app>span:nth-child(2) { display:grid; gap:1px; min-width:0; }
.acceso-app strong { font-size:12px; }
.acceso-app small { color:var(--muted); font-size:10px; }
.acceso-app b { color:var(--acento-2); font-size:20px; font-weight:500; }
.acceso-app--inactivo { opacity:.55; cursor:not-allowed; }
.perfil-dashboard--compacto { grid-template-columns:120px minmax(0,1fr); gap:12px; }
.perfil-dashboard--compacto .perfil-dashboard__foto-wrap,.perfil-dashboard--compacto .perfil-dashboard__card { border-radius:14px; box-shadow:0 5px 14px rgba(16,107,97,.06); }
.perfil-dashboard--compacto .perfil-dashboard__foto-wrap { padding:10px; gap:7px; }
.perfil-dashboard--compacto .perfil-dashboard__foto { width:86px; height:92px; border-radius:10px; font-size:28px; }
.perfil-dashboard--compacto .perfil-dashboard__foto-boton { min-width:86px; padding:6px 9px; border-radius:6px; box-shadow:none; font-size:10px; }
.perfil-dashboard--compacto .perfil-dashboard__card { padding:13px 15px; }
.perfil-dashboard--compacto .perfil-dashboard__card .panel__eyebrow { margin-bottom:4px; font-size:9px; }
.perfil-dashboard--compacto .perfil-dashboard__card h1 { margin:0 0 9px; font-size:22px; line-height:1.1; }
.perfil-dashboard--compacto .perfil-dashboard__datos { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px 14px; padding:9px 11px; border-radius:9px; font-size:11px; }
.perfil-dashboard--compacto .perfil-dashboard__antiguedad { grid-column:span 2; }
.modulos-grid--compacto { gap:11px; margin-top:12px; }
.modulos-grid--compacto .modulo-card { min-height:96px; gap:11px; padding:13px; border-radius:14px; box-shadow:0 5px 14px rgba(16,107,97,.06); }
.modulos-grid--compacto .modulo-card__icon { flex:0 0 36px; width:36px; height:36px; border-radius:8px; font-size:17px; }
.modulos-grid--compacto .modulo-card__contenido h2 { margin:0 0 3px; font-size:15px; line-height:1.15; }
.modulos-grid--compacto .modulo-card__contenido p { font-size:11px; line-height:1.2; }
.modulos-grid--compacto .modulo-card__cta,.modulos-grid--compacto .modulo-card__estado { margin-top:6px; font-size:11px; }
@media (max-width:700px) {
  .perfil-compacto { align-items:flex-start; }
  .perfil-compacto__contenido h1 { white-space:normal; }
  .perfil-compacto__datos { display:grid; }
  .perfil-compacto__datos span { padding:0; border:0; white-space:normal; }
  .accesos-app { grid-template-columns:1fr; }
  .acceso-app { border-right:0; }
  .perfil-dashboard--compacto { grid-template-columns:1fr; }
  .perfil-dashboard--compacto .perfil-dashboard__datos { grid-template-columns:1fr; }
  .perfil-dashboard--compacto .perfil-dashboard__antiguedad { grid-column:auto; }
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 12px 28px rgba(16, 107, 97, 0.08);
}

.panel h2 {
  margin: 0 0 16px;
  font-size: 20px;
}

.panel__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  color: var(--acento-2);
  margin-bottom: 8px;
  font-weight: 700;
}

.panel--info {
  margin-top: 18px;
}

.panel--roles-info {
  margin-top: 20px;
}

.formulario {
  display: grid;
  gap: 14px;
}

.formulario__fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

label {
  display: grid;
  gap: 8px;
}

label span {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}

input, select, button {
  font: inherit;
}

input, select {
  width: 100%;
  border: 1px solid rgba(16, 107, 97, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  padding: 12px 14px;
}

button {
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--acento), var(--acento-2));
  cursor: pointer;
}

button:hover {
  filter: brightness(1.05);
}

.resumen {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(230, 240, 236, 0.9), rgba(255, 247, 228, 0.9));
  border: 1px solid rgba(16, 107, 97, 0.10);
  border-radius: 14px;
  margin-bottom: 16px;
}

.codigo-demo {
  margin-top: 6px;
  color: var(--acento-2);
}

.resumen--login {
  max-width: 420px;
}

.ayuda {
  color: var(--muted);
  margin: 0;
}

.panel__vacio {
  min-height: 220px;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--muted);
  background: linear-gradient(180deg, #fffdfa, #eef7f2);
  border: 1px dashed rgba(16, 107, 97, 0.18);
  border-radius: 18px;
  padding: 22px;
}

.panel__vacio--compacto {
  min-height: 160px;
}

.panel__vacio-icono {
  font-size: 28px;
  margin-bottom: 8px;
  color: var(--acento);
}

.alertas {
  display: grid;
  gap: 10px;
  position: fixed;
  z-index: 10000;
  top: 18px;
  right: 18px;
  width: min(420px, calc(100vw - 36px));
  margin: 0;
  pointer-events: none;
}

.alerta {
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 600;
  max-height: 140px;
  overflow: hidden;
  box-shadow: 0 14px 38px rgba(19, 58, 54, 0.18);
  pointer-events: auto;
  animation: alerta-temporal 6.5s ease forwards;
}

.alerta--ok {
  background: linear-gradient(180deg, #eaf6ef, #f2fbf5);
  color: var(--ok);
  border: 1px solid #b7ddc8;
}

.alerta--error {
  background: linear-gradient(180deg, #fdeeee, #fff5f5);
  color: var(--error);
  border: 1px solid #efc0c0;
}

@keyframes alerta-temporal {
  0%,
  78% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .alerta {
    animation: none;
  }
}

ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.step {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 253, 250, 0.98), rgba(243, 248, 244, 0.92));
  border: 1px solid rgba(16, 107, 97, 0.12);
}

.step strong {
  color: var(--acento);
}

.roles-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.roles-grid--principal {
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
}

.panel--selector-roles,
.panel--resumen-rol,
.panel--analisis-economico,
.panel--rubros-clave {
  background: linear-gradient(180deg, rgba(255, 253, 250, 0.98), rgba(243, 248, 244, 0.94));
}

.roles-generate-form {
  margin-top: 12px;
}

.roles-note {
  margin: 14px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.roles-grid--busqueda {
  align-items: start;
}

.panel--roles-busqueda,
.panel--roles-listado,
.panel--roles-viewer {
  background: linear-gradient(180deg, rgba(255, 253, 250, 0.98), rgba(243, 248, 244, 0.94));
}

.roles-listado__head,
.roles-viewer__head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: end;
}

.roles-listado__head--stacked {
  display: grid;
  gap: 8px;
}

.roles-listado__filtro {
  min-width: 220px;
}

.roles-listado__filtro span {
  display: block;
  margin-bottom: 8px;
  color: var(--acento-2);
  font-weight: 700;
}

.roles-listado__filtro input {
  width: 100%;
  padding: 10px 12px;
  min-height: 40px;
  font-size: 14px;
  border-radius: 16px;
  border: 1px solid rgba(16, 107, 97, 0.22);
  background: rgba(255, 255, 255, 0.88);
  color: var(--texto);
  outline: none;
}

.roles-period-list {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.roles-period-card {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(16, 107, 97, 0.10);
}

.roles-period-card--activo {
  border-color: rgba(16, 107, 97, 0.28);
  box-shadow: 0 10px 24px rgba(16, 107, 97, 0.08);
}

.roles-period-card__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  color: rgba(16, 107, 97, 0.74);
  font-weight: 700;
}

.roles-period-card h3,
.roles-viewer__head h2 {
  margin: 8px 0 6px;
  color: var(--acento-2);
}

.roles-period-card p {
  margin: 0;
  color: var(--muted);
}

.roles-compacto__hero { min-height:76px; padding:13px 18px; border-radius:15px; box-shadow:0 5px 14px rgba(16,107,97,.06); align-items:center; }
.roles-compacto__hero .hero__marca { font-size:9px; }
.roles-compacto__hero h1 { margin:4px 0 0; font-size:24px; line-height:1.1; }
.roles-compacto__hero .hero__meta { gap:7px; }
.roles-compacto__hero .hero__chip,.roles-compacto__hero .hero__volver { padding:7px 10px; border-radius:8px; font-size:11px; }
.roles-grid--compacto { grid-template-columns:280px minmax(0,1fr); gap:12px; margin-top:12px; }
.roles-grid--compacto .panel { padding:13px 15px; border-radius:14px; box-shadow:0 5px 14px rgba(16,107,97,.06); }
.roles-grid--compacto .panel__eyebrow { margin-bottom:4px; font-size:9px; }
.roles-grid--compacto .panel h2 { margin-bottom:10px; font-size:16px; }
.roles-grid--compacto .formulario { gap:8px; }
.roles-grid--compacto .formulario label { gap:4px; }
.roles-grid--compacto .formulario label span { font-size:11px; }
.roles-grid--compacto .formulario select { min-height:35px; padding:6px 9px; border-radius:6px; font-size:11px; }
.roles-grid--compacto .formulario button { min-height:35px; padding:6px 12px; border-radius:6px; font-size:11px; }
.roles-grid--compacto .roles-note { margin-top:9px; font-size:11px; line-height:1.3; }
.roles-grid--compacto .roles-listado__head--stacked { gap:2px; }
.roles-grid--compacto .roles-listado__head .ayuda { margin:0; font-size:10px; }
.roles-grid--compacto .roles-period-list { gap:7px; margin-top:8px; }
.roles-grid--compacto .roles-period-card { min-height:60px; gap:12px; padding:8px 11px; border-radius:10px; }
.roles-grid--compacto .roles-period-card--activo { box-shadow:0 4px 10px rgba(16,107,97,.06); }
.roles-grid--compacto .roles-period-card__eyebrow { font-size:8px; }
.roles-grid--compacto .roles-period-card h3 { margin:3px 0 2px; font-size:14px; }
.roles-grid--compacto .roles-period-card p { font-size:10px; }
.roles-grid--compacto .roles-period-card .boton-secundario--link { min-width:84px; padding:6px 10px; border-radius:6px; font-size:11px; text-align:center; }
@media (max-width:800px) {
  .roles-grid--compacto { grid-template-columns:1fr; }
  .roles-compacto__hero { align-items:flex-start; }
}

.roles-viewer-shell {
  margin-top: 22px;
}

.roles-viewer__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.roles-firma-panel {
  display: grid;
  gap: 16px;
  max-width: 680px;
}

.roles-firma-panel h2 {
  margin: 8px 0 6px;
  color: var(--acento-2);
}

.roles-firma-panel p,
.roles-firma-resumen {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.roles-firma-form {
  display: grid;
  gap: 12px;
  max-width: 560px;
}

.roles-firma-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--texto);
  font-weight: 700;
  line-height: 1.35;
}

.roles-firma-check input {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--acento);
}

.roles-viewer__frame {
  width: 100%;
  min-height: 78vh;
  margin-top: 18px;
  border: 1px solid rgba(16, 107, 97, 0.10);
  border-radius: 18px;
  background: #fff;
}

.actualizacion-grid {
  align-items: start;
  display: block;
}

.panel--actualizacion-datos {
  background: linear-gradient(180deg, rgba(255, 253, 250, 0.98), rgba(243, 248, 244, 0.94));
}

.panel--actualizacion-datos-compacto {
  padding: 18px 20px;
}

.panel--actualizacion-datos-compacto h2 {
  margin-bottom: 12px;
}

.actualizacion-personal-lista {
  display: grid;
  gap: 8px;
}

.actualizacion-bloques {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1fr);
  gap: 28px;
  align-items: start;
}

.actualizacion-bloque-contacto {
  min-width: 0;
}

.actualizacion-dato-texto {
  display: grid;
  gap: 2px;
}

.actualizacion-dato-texto__etiqueta {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.actualizacion-dato-texto__valor {
  color: var(--acento-2);
  font-size: 15px;
  font-weight: 600;
}

.actualizacion-resumen {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(230, 240, 236, 0.9), rgba(255, 247, 228, 0.9));
  border: 1px solid rgba(16, 107, 97, 0.10);
}

.actualizacion-resumen strong {
  color: var(--acento-2);
}

.actualizacion-formulario {
  justify-items: start;
  gap: 6px;
}

.actualizacion-campo {
  width: min(100%, 320px);
}

.actualizacion-campo--contacto {
  width: min(100%, 320px);
  display: grid;
  gap: 3px;
}

.actualizacion-campo--full {
  width: min(100%, 430px);
}

.actualizacion-campo--nombre {
  width: min(100%, 420px);
}

.actualizacion-campo--archivo {
  width: min(100%, 374px);
}

.actualizacion-subnivel {
  margin-top: 0;
}

.actualizacion-campo span {
  font-size: 12px;
}

.actualizacion-profesion-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.actualizacion-profesion-row input[type="search"] {
  flex: 1;
}

.actualizacion-formulario select,
.actualizacion-formulario input[type="email"],
.actualizacion-formulario input[type="tel"],
.actualizacion-formulario input[type="text"],
.actualizacion-formulario input[type="file"],
.actualizacion-formulario input[type="search"] {
  padding: 8px 10px;
  min-height: 34px;
}

.actualizacion-contacto-form {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

.actualizacion-contacto-form span {
  color: var(--acento-2);
  font-size: 11px;
  font-weight: 700;
}

.actualizacion-contacto-form input:disabled,
.actualizacion-contacto-form select:disabled {
  color: var(--acento-2);
  opacity: 1;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding-left: 0;
  cursor: default;
}

.actualizacion-contacto-form[data-editando="true"] {
  padding: 0;
  border: 0;
  background: transparent;
}

.actualizacion-contacto-form[data-editando="true"] input,
.actualizacion-contacto-form[data-editando="true"] select {
  padding-left: 10px;
}

.actualizacion-contacto-accion {
  margin-top: 12px;
}

.actualizacion-direccion-row,
.actualizacion-archivo-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.actualizacion-direccion-row input {
  flex: 1;
}

.actualizacion-direccion-coordenadas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.actualizacion-maps-link,
.actualizacion-archivo-estado,
.actualizacion-mini-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(16, 107, 97, 0.18);
  color: var(--acento-2);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.actualizacion-mini-boton {
  background: rgba(255, 255, 255, 0.72);
  cursor: pointer;
}

.actualizacion-ubicacion-aviso {
  margin-top: 6px;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid rgba(16, 107, 97, 0.16);
  background: rgba(16, 107, 97, 0.07);
  color: var(--acento-2);
  font-size: 11px;
  line-height: 1.35;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.actualizacion-ubicacion-aviso[data-tipo="error"] {
  border-color: rgba(170, 60, 54, 0.22);
  background: rgba(170, 60, 54, 0.08);
  color: #7d2d28;
}

.actualizacion-ubicacion-aviso[data-tipo="ok"] {
  border-color: rgba(16, 107, 97, 0.2);
  background: rgba(16, 107, 97, 0.1);
}

.actualizacion-ubicacion-aviso--salida {
  opacity: 0;
  transform: translateY(-3px);
}

.actualizacion-separador {
  margin-top: 8px;
  color: var(--acento-2);
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 860px) {
  .actualizacion-bloques {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

.actualizacion-upload-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--acento) 0%, var(--acento-2) 100%);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(16, 107, 97, 0.12);
}

.actualizacion-upload-trigger:hover {
  filter: brightness(1.05);
}

@media (max-width: 800px) {
  .actualizacion-personal-grid {
    grid-template-columns: 1fr;
  }

  .actualizacion-campo {
    width: 100%;
  }

  .actualizacion-campo--archivo {
    width: 100%;
  }

  .actualizacion-profesion-row {
    width: 100%;
  }
}

.roles-resumen-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(230, 240, 236, 0.9), rgba(255, 247, 228, 0.9));
  border: 1px solid rgba(16, 107, 97, 0.10);
}

.roles-resumen-grid strong {
  color: var(--acento-2);
}

.roles-metricas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.roles-metrica-card {
  display: grid;
  gap: 10px;
  padding: 18px 20px;
  border-radius: 20px;
  background: linear-gradient(180deg, #fffdfa 0%, #eef7f2 100%);
  border: 1px solid rgba(16, 107, 97, 0.12);
  box-shadow: 0 12px 28px rgba(16, 107, 97, 0.08);
}

.roles-metrica-card span {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  color: rgba(16, 107, 97, 0.74);
  font-weight: 700;
}

.roles-metrica-card strong {
  font-size: 28px;
  color: var(--acento-2);
}

.roles-metrica-card--alerta {
  background: linear-gradient(180deg, #fff7ea 0%, #fffdfa 100%);
}

.roles-metrica-card--destacada {
  background: linear-gradient(140deg, rgba(16, 107, 97, 0.10), rgba(252, 198, 90, 0.20));
}

.roles-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 800;
  margin-bottom: 14px;
}

.roles-badge--estable {
  color: #175d45;
  background: rgba(31, 107, 68, 0.12);
}

.roles-badge--ajustada {
  color: #875300;
  background: rgba(252, 198, 90, 0.28);
}

.roles-badge--comprometida {
  color: #8a2f2f;
  background: rgba(138, 47, 47, 0.12);
}

.roles-indicadores-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.roles-indicador {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(16, 107, 97, 0.10);
}

.roles-indicador span {
  color: var(--muted);
  font-size: 13px;
}

.roles-indicador strong {
  color: var(--acento-2);
  font-size: 22px;
}

.roles-detalles-lista {
  display: grid;
  gap: 12px;
}

.roles-detalle-item {
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(16, 107, 97, 0.10);
}

.roles-detalle-item h3 {
  margin: 0 0 10px;
  font-size: 17px;
  color: var(--acento-2);
}

.roles-detalle-montos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.roles-detalle-montos span {
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(230, 240, 236, 0.9), rgba(255, 247, 228, 0.9));
  color: var(--acento-2);
  font-weight: 700;
}

@media (max-width: 800px) {
  .login-shell,
  .shell,
  .modulos-grid,
  .grid,
  .formulario__fila,
  .steps,
  .roles-grid,
  .roles-metricas,
  .roles-indicadores-grid,
  .roles-resumen-grid,
  .perfil-dashboard {
    grid-template-columns: 1fr;
  }

  .login-hero,
  .login-card-wrap {
    padding: 28px 20px;
  }

  .sidebar {
    position: static;
    height: auto;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  .roles-grid--principal {
    grid-template-columns: 1fr;
  }

  .roles-period-card,
  .roles-listado__head,
  .roles-viewer__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .perfil-dashboard__foto-wrap {
    justify-items: start;
  }

  .perfil-dashboard__datos {
    grid-template-columns: 1fr;
  }

  .hero--dashboard,
  .hero--roles {
    flex-direction: column;
  }

  .topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .topbar__acciones {
    align-items: flex-start;
  }

  .hero h1 {
    font-size: 28px;
  }
}

.panel--analytics-controls,
.panel--analytics-header,
.panel--diagnostico,
.panel--snapshots,
.panel--causas,
.panel--ingresos-irregulares,
.panel--historial,
.panel--insights,
.panel--alertas-financieras,
.panel--recomendaciones {
  background: linear-gradient(180deg, rgba(255, 253, 250, 0.98), rgba(242, 248, 244, 0.96));
}

.roles-analytics-top,
.roles-analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.roles-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.roles-analytics-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}

.roles-analytics-header__identity {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  color: rgba(16, 107, 97, 0.78);
  font-weight: 700;
}

.roles-analytics-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.roles-analytics-header__meta span,
.roles-chip,
.roles-tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(16, 107, 97, 0.10);
  color: var(--acento-2);
  font-weight: 700;
}

.panel--estado-estable {
  border-color: rgba(31, 107, 68, 0.18);
}

.panel--estado-comprometida {
  border-color: rgba(252, 198, 90, 0.28);
}

.panel--estado-riesgosa {
  border-color: rgba(138, 47, 47, 0.24);
}

.roles-semaforo {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 18px;
  margin-top: 18px;
}

.roles-semaforo--estable {
  background: linear-gradient(180deg, rgba(234, 246, 239, 0.96), rgba(243, 252, 246, 0.96));
}

.roles-semaforo--comprometida {
  background: linear-gradient(180deg, rgba(255, 245, 216, 0.98), rgba(255, 251, 239, 0.98));
}

.roles-semaforo--riesgosa {
  background: linear-gradient(180deg, rgba(253, 238, 238, 0.98), rgba(255, 247, 247, 0.98));
}

.roles-semaforo__estado {
  min-width: 92px;
  min-height: 92px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 16px 30px rgba(16, 107, 97, 0.12);
}

.roles-semaforo--estable .roles-semaforo__estado {
  background: linear-gradient(135deg, #1f6b44, #2f8a5a);
}

.roles-semaforo--comprometida .roles-semaforo__estado {
  background: linear-gradient(135deg, #d18d16, #b97200);
}

.roles-semaforo--riesgosa .roles-semaforo__estado {
  background: linear-gradient(135deg, #b94747, #8a2f2f);
}

.roles-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.roles-chip-list,
.roles-guidance-list,
.roles-insight-list,
.roles-alertas-lista,
.roles-insumos-lista,
.roles-causas-lista,
.roles-history-list {
  display: grid;
  gap: 12px;
}

.roles-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.roles-snapshot-item,
.roles-insumo-item,
.roles-guidance-item,
.roles-insight-item,
.roles-alerta-card,
.roles-causa-item,
.roles-history-row {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(16, 107, 97, 0.10);
  padding: 16px 18px;
}

.roles-snapshot-item span,
.roles-kpi-card__head span,
.roles-history-row__bars span {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  color: rgba(16, 107, 97, 0.72);
  font-weight: 700;
}

.roles-snapshot-item strong {
  display: block;
  margin-top: 8px;
  font-size: 28px;
  color: var(--acento-2);
}

.roles-kpi-card {
  border-radius: 22px;
  padding: 20px;
  border: 1px solid rgba(16, 107, 97, 0.12);
  box-shadow: 0 12px 28px rgba(16, 107, 97, 0.08);
  background: linear-gradient(180deg, #fffdfa 0%, #eef7f2 100%);
}

.roles-kpi-card--alto {
  background: linear-gradient(180deg, #fff4f4 0%, #fffafa 100%);
}

.roles-kpi-card--medio {
  background: linear-gradient(180deg, #fff8ea 0%, #fffdf8 100%);
}

.roles-kpi-card--bajo {
  background: linear-gradient(180deg, #f5fbf8 0%, #fffdfa 100%);
}

.roles-kpi-card__head {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.roles-kpi-card__head strong {
  font-size: 30px;
  color: var(--acento-2);
}

.roles-kpi-card p,
.roles-causa-item p,
.roles-insumo-item p,
.roles-alerta-card p,
.roles-insight-item,
.roles-guidance-item,
.roles-copy-block p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.roles-kpi-card small,
.roles-causa-item__impacto small,
.roles-history-row__values small {
  color: rgba(19, 58, 54, 0.70);
}

.roles-kpi-card__support,
.roles-causa-item__saldo {
  margin-top: 12px;
  color: var(--acento-2);
  font-weight: 700;
}

.roles-meter {
  width: 100%;
  height: 10px;
  background: rgba(16, 107, 97, 0.10);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 14px;
}

.roles-meter--compacto {
  height: 8px;
  margin: 8px 0 0;
}

.roles-meter__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--acento), var(--acento-2));
}

.roles-meter--warning .roles-meter__fill {
  background: linear-gradient(90deg, #f0a400, #d17d00);
}

.roles-meter--success .roles-meter__fill {
  background: linear-gradient(90deg, #1f6b44, #2f8a5a);
}

.roles-causa-item__top,
.roles-history-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.roles-causa-item h3,
.roles-insumo-item h3,
.roles-alerta-card h3 {
  margin: 0 0 10px;
  color: var(--acento-2);
}

.roles-causa-item__impacto {
  text-align: right;
  min-width: 160px;
}

.roles-causa-item__impacto strong {
  display: block;
  font-size: 22px;
  color: var(--acento-2);
}

.roles-alerta-card--alto {
  border-color: rgba(138, 47, 47, 0.20);
  background: linear-gradient(180deg, #fff2f2 0%, #fff8f8 100%);
}

.roles-alerta-card--medio {
  border-color: rgba(252, 198, 90, 0.28);
  background: linear-gradient(180deg, #fff8e8 0%, #fffdf6 100%);
}

.roles-history-row {
  align-items: center;
}

.roles-history-row--alto {
  border-color: rgba(252, 198, 90, 0.26);
}

.roles-history-row__periodo {
  min-width: 88px;
  font-weight: 800;
  color: var(--acento-2);
}

.roles-history-row__bars {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.roles-history-row__values {
  min-width: 160px;
  text-align: right;
}

.roles-history-row__values strong {
  display: block;
  color: var(--acento-2);
  font-size: 22px;
}

.roles-copy-block {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

@media (max-width: 1100px) {
  .roles-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .roles-analytics-top,
  .roles-analytics-grid,
  .roles-snapshot-grid,
  .roles-history-row__bars {
    grid-template-columns: 1fr;
  }

  .roles-analytics-header,
  .roles-causa-item__top,
  .roles-history-row {
    flex-direction: column;
  }

  .roles-analytics-header__meta,
  .roles-history-row__values,
  .roles-causa-item__impacto {
    justify-content: flex-start;
    text-align: left;
    min-width: 0;
  }
}

@media (max-width: 800px) {
  .roles-kpi-grid {
    grid-template-columns: 1fr;
  }

  .roles-semaforo {
    flex-direction: column;
    align-items: flex-start;
  }
}

.admin-mov-app { margin-top:4px; border:1px solid var(--borde); background:#fffdfa; }
.admin-mov-toolbar { padding:14px 18px 12px; border-bottom:1px solid var(--borde); background:#f8faf8; }
.admin-mov-toolbar h1 { margin:1px 0 0; color:var(--ink); font-size:21px; line-height:1.2; }
.admin-mov-toolbar .panel__eyebrow { margin-bottom:3px; font-size:9px; }
.admin-mov-editor { padding:14px 18px 16px; border-bottom:1px solid var(--borde); }
.admin-mov-editor h2,.admin-mov-lista__head h2 { margin:0; color:var(--ink); font-size:14px; }
.admin-mov-editor h2 { margin-bottom:11px; }
.mov-audit-filtros { display:flex; align-items:end; gap:10px; flex-wrap:wrap; }
.mov-audit-filtros label { display:grid; gap:4px; min-width:230px; color:var(--muted); font-size:11px; font-weight:700; }
.mov-audit-filtros input,.mov-audit-filtros select,.mov-validacion-form select { min-height:34px; padding:5px 9px; border:1px solid #bfd0cc; border-radius:5px; background:#fff; }
.mov-validacion-form { display:flex; align-items:center; gap:6px; min-width:600px; }
.mov-validacion-form button { min-height:34px; white-space:nowrap; }
.ride-link { display:block; margin-top:5px; color:var(--acento-2); font-size:11px; font-weight:700; }
.admin-mov-app { height:calc(100vh - 78px); display:flex; flex-direction:column; overflow:hidden; }
.admin-mov-toolbar { flex:0 0 auto; padding:9px 14px 8px; }
.admin-mov-toolbar h1 { font-size:17px; }
.admin-mov-editor { flex:0 0 auto; padding:8px 14px; }
.admin-mov-lista { min-height:0; flex:1 1 auto; display:flex; flex-direction:column; padding:0 14px 10px; overflow:hidden; }
.admin-mov-lista__head { flex:0 0 auto; padding:8px 0 6px; }
.mov-admin-table-scroll { min-height:0; flex:1 1 auto; overflow:auto; border:1px solid #dce5e2; }
.mov-admin-table { min-width:1100px; table-layout:auto; }
.mov-admin-table thead { position:sticky; top:0; z-index:2; }
.mov-admin-table th,.mov-admin-table td { height:auto; padding:4px 6px; font-size:10px; line-height:1.15; vertical-align:middle; }
.mov-admin-table th { padding-top:5px; padding-bottom:5px; font-size:8px; white-space:nowrap; }
.mov-admin-table small { margin-top:2px; font-size:9px; }
.mov-admin-table .boton-detalle,.mov-admin-table .ride-link { padding:3px 6px; font-size:9px; }
.mov-validacion-form { min-width:560px; gap:4px; }
.mov-validacion-form select { min-height:27px; max-width:150px; padding:2px 5px; font-size:9px; }
.mov-validacion-form button { min-height:27px; padding:3px 7px; font-size:9px; }
.mov-audit-filtros label { min-width:210px; }
.mov-audit-filtros input,.mov-audit-filtros select { min-height:31px; }
.mov-audit-filtros button { min-height:31px; padding:5px 13px; }
@media (max-width:700px) {
  .admin-mov-app { height:calc(100vh - 32px); }
}
.movilizaciones-form { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:9px 12px; align-items:end; }
.movilizaciones-form .mov-campo { grid-column:span 3; display:grid; gap:4px; color:var(--muted); font-weight:700; }
.movilizaciones-form .mov-campo--tipo { grid-column:span 2; }
.movilizaciones-form .mov-campo--empleado { grid-column:span 4; }
.movilizaciones-form .mov-campo--nombre { grid-column:span 4; }
.movilizaciones-form .mov-campo--correo { grid-column:span 4; }
.movilizaciones-form .mov-campo[hidden] { display:none; }
.movilizaciones-form .mov-campo>span { font-size:11px; }
.movilizaciones-form input,.movilizaciones-form select { min-height:34px; padding:0 9px; border:1px solid #bfd0cc; border-radius:4px; background:#fff; font-size:12px; }
.movilizaciones-form input:focus,.movilizaciones-form select:focus { outline:2px solid rgba(16,107,97,.14); border-color:var(--acento-2); }
.movilizaciones-form input[readonly] { color:#435d5a; background:#f2f5f3; }
.movilizaciones-form__footer { grid-column:1/-1; display:flex; align-items:center; justify-content:flex-end; gap:14px; padding-top:2px; }
.movilizaciones-opciones { display:flex; align-items:center; gap:12px; min-height:34px; }
.mov-check { display:flex !important; grid-template-columns:none !important; flex-direction:row; align-items:center; gap:5px !important; color:var(--ink) !important; font-size:11px; cursor:pointer; white-space:nowrap; }
.mov-check input { width:15px !important; min-height:15px !important; height:15px; padding:0; margin:0; accent-color:var(--acento-2); }
.mov-check span { color:var(--ink); font-size:11px; font-weight:600; }
.movilizaciones-form__guardar { width:auto; min-width:92px; min-height:34px; padding:5px 14px; border-radius:4px; font-size:12px; }

.roles-audit { display:grid; gap:10px; }
.roles-audit__hero {
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:15px 20px; border-radius:15px; color:#fff;
  background:linear-gradient(125deg,#063f3a 0%,#087568 58%,#0d9488 100%);
  box-shadow:0 14px 35px rgba(6,78,70,.18);
}
.roles-audit__hero h1 { margin:3px 0; font-size:23px; color:#fff; }
.roles-audit__hero p { margin:0; color:rgba(255,255,255,.82); }
.roles-audit__hero .panel__eyebrow { color:#a7f3d0; }
.roles-audit__hero-mark { min-width:120px; padding:9px 14px; border:1px solid rgba(255,255,255,.24); border-radius:12px; text-align:center; background:rgba(255,255,255,.1); }
.roles-audit__hero-mark span { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.roles-audit__hero-mark strong { display:block; margin-top:2px; font-size:25px; }
.roles-audit__kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.roles-audit-kpi { min-height:78px; padding:10px 14px; border:1px solid #dbe8e5; border-radius:12px; background:#fff; box-shadow:0 5px 14px rgba(15,80,70,.05); }
.roles-audit-kpi span,.roles-audit-kpi small { display:block; color:#657a76; }
.roles-audit-kpi span { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.roles-audit-kpi strong { display:block; margin:2px 0; font-size:24px; color:#183c37; }
.roles-audit-kpi small { font-size:11px; }
.roles-audit-kpi--ok { border-top:4px solid #16a34a; }
.roles-audit-kpi--pending { border-top:4px solid #e6a11a; }
.roles-audit-kpi--total { border-top:4px solid #0f766e; }
.roles-audit-kpi--progress { border-top:4px solid #2563eb; }
.roles-audit-progress { height:6px; margin-top:5px; overflow:hidden; border-radius:10px; background:#e7eeec; }
.roles-audit-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#0f766e,#22c55e); }
.roles-audit__panel { padding:12px 14px; }
.roles-audit__filters { display:grid; grid-template-columns:1.2fr .7fr .65fr auto; gap:8px; align-items:end; padding:10px; border-radius:10px; background:#f4f8f7; }
.roles-audit__filters label { display:grid; gap:5px; }
.roles-audit__filters label span { font-size:11px; font-weight:700; color:#49645f; }
.roles-audit__filters input,.roles-audit__filters select { width:100%; min-height:34px; padding:5px 9px; border:1px solid #cddbd8; border-radius:7px; background:#fff; }
.roles-audit__filter-actions { display:flex; align-items:center; gap:8px; }
.roles-audit__filter-actions button { min-height:34px; padding:6px 13px; white-space:nowrap; }
.roles-audit__filter-actions a { color:#536b67; font-size:12px; }
.roles-audit__table-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 2px 6px; }
.roles-audit__table-head h2 { margin:0; font-size:18px; }
.roles-audit__table-head p { margin:3px 0 0; color:#72837f; font-size:11px; }
.roles-audit__legend { display:flex; gap:12px; color:#64736f; font-size:11px; }
.roles-audit__legend i,.roles-audit-status i { display:inline-block; width:8px; height:8px; margin-right:5px; border-radius:50%; }
.roles-audit__legend .is-ok,.roles-audit-status--ok i { background:#16a34a; }
.roles-audit__legend .is-pending,.roles-audit-status--pending i { background:#e6a11a; }
.roles-audit-table { width:100%; border-collapse:collapse; font-size:12px; }
.roles-audit-table th { padding:7px 9px; text-align:left; color:#4e625e; background:#edf4f2; border-bottom:1px solid #d6e2df; font-size:9px; text-transform:uppercase; letter-spacing:.04em; }
.roles-audit-table td { padding:7px 9px; border-bottom:1px solid #e6eeec; vertical-align:middle; }
.roles-audit-table th:nth-child(1),.roles-audit-table td:nth-child(1) { width:145px; }
.roles-audit-table th:nth-child(3),.roles-audit-table td:nth-child(3) { width:125px; }
.roles-audit-table th:nth-child(4),.roles-audit-table td:nth-child(4) { width:190px; }
.roles-audit-table tr:hover td { background:#f8fbfa; }
.roles-audit-table td strong,.roles-audit-table td small { display:block; }
.roles-audit-table td small { margin-top:3px; color:#71827e; font-size:10px; }
.roles-audit-table code { font-size:10px; color:#38534e; }
.roles-audit-status { display:inline-flex; align-items:center; padding:5px 9px; border-radius:999px; font-size:10px; font-weight:800; }
.roles-audit-status--ok { color:#166534; background:#dcfce7; }
.roles-audit-status--pending { color:#92400e; background:#fef3c7; }
.roles-audit-file { color:#7b8683; font-size:10px; }
.roles-audit-file--ready { color:#166534; font-weight:700; }
.roles-audit__pagination { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:9px; }
.roles-audit__pagination a,.roles-audit__pagination span { padding:7px 12px; border:1px solid #d3e0dd; border-radius:8px; font-size:11px; }
.roles-audit__pagination a { color:#0f766e; background:#fff; font-weight:700; }
@media (max-width:1000px) {
  .roles-audit__kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .roles-audit__filters { grid-template-columns:1fr 1fr; }
}
@media (max-width:650px) {
  .roles-audit__hero { align-items:flex-start; flex-direction:column; }
  .roles-audit__hero-mark { width:100%; }
  .roles-audit__kpis,.roles-audit__filters { grid-template-columns:1fr; }
  .roles-audit__table-head { align-items:flex-start; flex-direction:column; }
}
.admin-mov-lista { padding:0 18px 16px; }
.admin-mov-lista__head { padding:12px 0 9px; }
.admin-mov-lista__head h2 span { margin-left:5px; color:var(--muted); font-size:11px; font-weight:600; }
.tabla-responsive { overflow-x:auto; }
.movilizaciones-tabla { width:100%; border-collapse:collapse; min-width:900px; }
.movilizaciones-tabla th,.movilizaciones-tabla td { padding:8px 7px; text-align:left; border:1px solid #dce5e2; border-width:0 0 1px; vertical-align:middle; }
.movilizaciones-tabla tbody tr:hover { background:#f2f7f5; }
.movilizaciones-tabla th { border-top:1px solid #dce5e2; background:#f7f9f8; color:#47615d; font-size:9px; text-transform:uppercase; letter-spacing:.05em; }
.movilizaciones-tabla small { display:block; margin-top:5px; color:var(--muted); }
.movilizaciones-tabla--usuarios td { font-size:12px; }
.movilizaciones-tabla--usuarios td:first-child { min-width:210px; }
.movilizaciones-tabla--usuarios td:nth-child(2) { overflow-wrap:anywhere; }
.mov-tipo { color:var(--acento-2); font-size:10px; font-weight:800; }
.mov-estado { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; white-space:nowrap; }
.mov-estado i { width:7px; height:7px; border-radius:50%; }
.mov-estado--activo { color:#087a4b; }
.mov-estado--activo i { background:#20a66a; box-shadow:0 0 0 3px rgba(32,166,106,.12); }
.mov-estado--inactivo { color:#8a4b45; }
.mov-estado--inactivo i { background:#b66a61; box-shadow:0 0 0 3px rgba(182,106,97,.12); }
.mov-clave-nomina { color:var(--muted); font-size:11px; }
.mov-clave-form { display:flex; align-items:center; gap:6px; min-width:220px; }
.mov-clave-form input { min-height:28px; padding:4px 7px; border:1px solid #bfd0cc; border-radius:3px; font-size:11px; }
.mov-clave-form .boton-secundario { min-height:28px; padding:4px 8px; border-radius:3px; font-size:10px; }
.clave-acceso { width:150px; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
.movilizaciones-tabla--compacta th,.movilizaciones-tabla--compacta td { padding:7px 8px; vertical-align:middle; }
.movilizaciones-tabla--compacta small { margin-top:2px; }
.factura-fila { transition:background .15s ease; }
.factura-fila:hover { background:rgba(16,107,97,.06); }
.col-visto { width:42px; text-align:center !important; }
.factura-visto { width:16px; height:16px; margin:0; vertical-align:middle; cursor:pointer; }
.factura-estado { display:inline-block; width:7px; height:7px; margin-left:4px; border-radius:50%; background:#9aaba7; color:transparent; font-size:0; vertical-align:middle; }
.factura-estado--aceptada,.factura-estado--aceptada_existente { color:#087a4b; font-weight:800; }
.factura-estado--aceptada,.factura-estado--aceptada_existente { background:#20a66a; }
.factura-estado--rechazada { background:#c74438; }
.factura-estado--pendiente { background:#d89b1d; }
.movilizaciones-acciones { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.movilizaciones-acciones span { color:var(--muted); font-size:13px; }
.boton-detalle { border:1px solid rgba(16,107,97,.25); border-radius:9px; background:#fff; color:var(--acento-2); padding:5px 9px; cursor:pointer; white-space:nowrap; }
.factura-detalle-fila>td { padding:0 8px 10px !important; background:rgba(16,107,97,.025); }
.factura-detalle-contenido { padding:12px 14px; border:1px solid rgba(16,107,97,.12); border-radius:10px; background:#fff; }
.factura-detalle-contenido h3 { margin:0 0 10px; }
.factura-productos-tabla { width:100%; border-collapse:collapse; min-width:760px; }
.factura-productos-tabla th,.factura-productos-tabla td { padding:6px 8px; border-bottom:1px solid rgba(16,107,97,.1); }
.mov-app { margin-top:4px; border:1px solid var(--borde); background:var(--panel); }
.mov-app__toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:54px; padding:8px 14px; border-bottom:1px solid var(--borde); background:#f8faf8; }
.mov-app__toolbar h1 { margin:1px 0 0; color:var(--ink); font-size:20px; line-height:1.15; }
.mov-app__toolbar .panel__eyebrow { margin:0 0 2px; font-size:8px; }
.mov-app .tabla-responsive { max-height:calc(100vh - 150px); overflow:auto; }
.mov-app .movilizaciones-tabla { min-width:1080px; table-layout:auto; }
.mov-app .movilizaciones-tabla thead { position:sticky; top:0; z-index:2; }
.mov-app .movilizaciones-tabla th,.mov-app .movilizaciones-tabla td { height:30px; padding:3px 6px; font-size:10px; line-height:1.1; white-space:nowrap; }
.mov-app .movilizaciones-tabla th { font-size:8px; }
.mov-app .movilizaciones-tabla small { display:none; }
.mov-app .movilizaciones-tabla td:nth-child(4) { max-width:230px; overflow:hidden; text-overflow:ellipsis; }
.mov-app .movilizaciones-acciones { margin:0; }
.mov-app .movilizaciones-acciones span { font-size:11px; }
.mov-app .movilizaciones-acciones .boton-principal { min-height:34px; padding:6px 13px; border-radius:4px; font-size:11px; }
.mov-app .boton-detalle { padding:4px 7px; border-radius:4px; font-size:10px; }
.mov-flujo { display:grid; gap:8px; padding:10px; background:#f2f5f3; }
.mov-etapa { overflow:hidden; border:1px solid #cfdbd8; border-radius:6px; background:#fff; }
.mov-etapa>summary { display:flex; align-items:center; gap:10px; min-height:52px; padding:7px 12px; cursor:pointer; list-style:none; user-select:none; }
.mov-etapa>summary::-webkit-details-marker { display:none; }
.mov-etapa>summary::after { content:'›'; margin-left:2px; color:#617773; font-size:21px; line-height:1; transform:rotate(90deg); transition:transform .15s ease; }
.mov-etapa[open]>summary::after { transform:rotate(-90deg); }
.mov-etapa__indicador { width:9px; height:9px; flex:0 0 auto; border-radius:50%; background:#81918e; }
.mov-etapa--por_enviar .mov-etapa__indicador { background:#d89b1d; }
.mov-etapa--revision .mov-etapa__indicador { background:#377db6; }
.mov-etapa--finalizadas .mov-etapa__indicador { background:#20a66a; }
.mov-etapa__texto { display:grid; flex:1; gap:2px; }
.mov-etapa__texto strong { color:var(--ink); font-size:13px; }
.mov-etapa__texto small { color:var(--muted); font-size:10px; font-weight:500; }
.mov-etapa__contador { display:inline-grid; min-width:28px; height:24px; padding:0 7px; place-items:center; border-radius:12px; background:#e8efed; color:#34504b; font-size:11px; font-weight:800; }
.mov-etapa[open]>summary { border-bottom:1px solid #dce5e2; background:#f9fbfa; }
.mov-etapa .tabla-responsive { max-height:calc(100vh - 260px); }
.mov-etapa__vacia { padding:18px 14px; color:var(--muted); font-size:12px; text-align:center; }
.factura-visto:disabled { cursor:not-allowed; opacity:.55; }
.mov-flujo-estado { display:inline-flex; align-items:center; min-height:21px; padding:3px 8px; border-radius:11px; font-size:9px; font-weight:800; letter-spacing:.02em; white-space:nowrap; }
.mov-flujo-estado--nueva { background:#e8efed; color:#526762; }
.mov-flujo-estado--pendiente { background:#fff1cc; color:#805700; }
.mov-flujo-estado--revision { background:#e2f0fb; color:#1f6094; }
.mov-flujo-estado--aprobada,.mov-flujo-estado--reembolsada { background:#dff5e9; color:#087a4b; }
.mov-flujo-estado--rechazada { background:#fde5e2; color:#a62f26; }
.mov-flujo-motivo { display:block !important; max-width:170px; overflow:hidden; color:#a62f26 !important; text-overflow:ellipsis; white-space:nowrap; }
.factura-modal { width:min(1050px,calc(100vw - 40px)); max-width:none; max-height:calc(100vh - 40px); padding:0; border:1px solid #afc4bf; border-radius:7px; background:#fff; color:var(--ink); box-shadow:0 18px 55px rgba(10,31,29,.28); }
.factura-modal::backdrop { background:rgba(12,27,26,.48); }
.factura-modal__header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 16px; border-bottom:1px solid #d8e3e0; background:#f6f9f8; }
.factura-modal__header h2 { margin:0; font-size:16px; }
.factura-modal__cerrar { width:30px; height:30px; padding:0; border:1px solid #b9cbc7; border-radius:4px; background:#fff; color:var(--ink); font-size:22px; line-height:1; cursor:pointer; }
.factura-modal__body { max-height:calc(100vh - 110px); padding:14px 16px 18px; overflow:auto; }
.factura-modal__body h3 { margin:0 0 12px; font-size:14px; }
.factura-modal .factura-productos-tabla th { position:sticky; top:0; background:#f3f7f5; color:#47615d; font-size:9px; text-transform:uppercase; }
.factura-modal .factura-productos-tabla td { font-size:11px; }
.archivos { display:flex; gap:8px; flex-wrap:wrap; }
.archivos a,.paginacion a { padding:7px 10px; border-radius:10px; background:var(--acento-2); color:#fff; text-decoration:none; }
.archivos span { color:var(--muted); font-size:12px; }
.paginacion { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:14px; margin-top:20px; }
.estado-vacio { text-align:center; padding:42px 20px; color:var(--muted); }
@media (max-width:1050px) {
  .movilizaciones-form .mov-campo,.movilizaciones-form .mov-campo--tipo,.movilizaciones-form .mov-campo--empleado,.movilizaciones-form .mov-campo--nombre,.movilizaciones-form .mov-campo--correo { grid-column:span 6; }
}
@media (max-width:800px) {
  .movilizaciones-form { grid-template-columns:1fr; }
  .movilizaciones-form .mov-campo,.movilizaciones-form .mov-campo--tipo,.movilizaciones-form .mov-campo--empleado,.movilizaciones-form .mov-campo--nombre,.movilizaciones-form .mov-campo--correo { grid-column:1; }
  .movilizaciones-form__footer { grid-column:1; align-items:stretch; flex-direction:column; }
  .movilizaciones-opciones { justify-content:flex-start; }
  .movilizaciones-form__guardar { width:100%; }
}

/* Editor administrativo: distribución densa de aplicativo, no de dashboard. */
.admin-mov-app .movilizaciones-form { display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 10px; }
.admin-mov-app .movilizaciones-form .mov-campo { flex:1 1 160px; min-width:130px; }
.admin-mov-app .movilizaciones-form .mov-campo--tipo { flex:0 1 150px; }
.admin-mov-app .movilizaciones-form .mov-campo--empleado { flex:1 1 280px; }
.admin-mov-app .movilizaciones-form .mov-campo--nombre { flex:1 1 220px; }
.admin-mov-app .movilizaciones-form .mov-campo--correo { flex:1 1 230px; }
.admin-mov-app .movilizaciones-form .mov-campo[hidden] { display:none !important; }
.admin-mov-app .movilizaciones-form__footer { flex:0 1 auto; min-height:34px; padding:0; }
.admin-mov-app .mov-check input[type="checkbox"] { display:inline-block; flex:0 0 15px; width:15px !important; height:15px !important; min-height:15px !important; margin:0; padding:0; }

/* Validaciones: tabla operativa densa para mantener más registros visibles. */
.mov-validaciones-app .admin-mov-lista { padding:0 7px 7px; }
.mov-validaciones-app .mov-admin-table { min-width:980px; }
.mov-validaciones-app .mov-admin-table th,
.mov-validaciones-app .mov-admin-table td { height:36px; padding:2px 5px; font-size:9px; line-height:1.05; }
.mov-validaciones-app .mov-admin-table th { height:24px; padding-top:3px; padding-bottom:3px; font-size:8px; }
.mov-validaciones-app .ride-link { margin-top:2px; padding:0; font-size:8px; line-height:1; }
.mov-validaciones-app .mov-proveedor { width:210px; max-width:210px; }
.mov-validaciones-app .mov-proveedor strong,
.mov-validaciones-app .mov-proveedor small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mov-validaciones-app .mov-proveedor small { margin-top:2px; font-size:8px; line-height:1; }
.mov-validaciones-app .mov-validacion-form { min-width:0; gap:3px; white-space:nowrap; }
.mov-validaciones-app .mov-validacion-form select { width:auto; min-width:0; max-width:none; min-height:24px; height:24px; padding:1px 20px 1px 4px; font-size:8px; }
.mov-validaciones-app .mov-validacion-form .mov-select-categoria { width:105px; }
.mov-validaciones-app .mov-validacion-form .mov-select-alcance { width:88px; }
.mov-validaciones-app .mov-validacion-form .mov-select-motivo { width:118px; }
.mov-validaciones-app .mov-validacion-form button { min-height:24px; height:24px; padding:2px 6px; font-size:8px; }
@media (max-width:700px) {
  .admin-mov-app .movilizaciones-form .mov-campo { flex-basis:100%; }
  .admin-mov-app .movilizaciones-form__footer { flex:1 1 100%; align-items:stretch; }
}

.certificados-operativo { width:min(680px,100%); margin:34px auto 0; }
.certificados-operativo__encabezado { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:22px; }
.certificados-operativo__encabezado h1 { margin:6px 0 7px; color:var(--ink); font-size:clamp(28px,4vw,38px); line-height:1.08; }
.certificados-operativo__encabezado p { margin:0; color:var(--muted); }
.certificados-operativo__volver { color:var(--acento-2); font-weight:800; text-decoration:none; padding:8px 0; }
.certificados-operativo__volver:hover { text-decoration:underline; }
.certificado-generador { display:grid; gap:20px; padding:28px; }
.certificado-generador__campo { display:grid; gap:8px; color:var(--ink); font-weight:800; }
.certificado-generador__campo select { width:100%; min-height:48px; border:1px solid rgba(16,107,97,.24); border-radius:10px; background:#fff; color:var(--ink); padding:0 42px 0 14px; font:inherit; font-weight:650; cursor:pointer; }
.certificado-generador__campo select:focus { outline:3px solid rgba(16,107,97,.12); border-color:var(--acento-2); }
.certificado-generador__opcion { display:flex; gap:12px; align-items:flex-start; padding:15px 0; border-top:1px solid rgba(16,107,97,.12); border-bottom:1px solid rgba(16,107,97,.12); cursor:pointer; }
.certificado-generador__opcion input { width:19px; height:19px; margin-top:2px; accent-color:var(--acento-2); }
.certificado-generador__opcion span { display:grid; gap:4px; }
.certificado-generador__opcion small { color:var(--muted); font-weight:500; line-height:1.4; }
.certificado-generador__boton { width:100%; min-height:48px; border-radius:10px; }
.certificado-generador__nota { margin:-8px 0 0; color:var(--muted); font-size:12px; text-align:center; }
@media (max-width:700px) {
  .certificados-operativo { margin-top:20px; }
  .certificados-operativo__encabezado { gap:14px; }
  .certificado-generador { padding:21px; }
}

.verificacion-certificado { width:min(720px,calc(100% - 32px)); margin:34px auto; }
.verificacion-certificado__marca { display:flex; justify-content:center; margin-bottom:22px; }
.verificacion-certificado__marca img { width:min(220px,60vw); max-height:86px; object-fit:contain; }
.verificacion-certificado__resultado { padding:34px; border:1px solid rgba(16,107,97,.16); border-radius:18px; background:#fff; box-shadow:0 18px 50px rgba(20,45,42,.08); text-align:center; }
.verificacion-certificado__resultado h1 { margin:8px 0 10px; color:var(--ink); }
.verificacion-certificado__resultado>p { color:var(--muted); }
.verificacion-certificado__icono { display:grid; place-items:center; width:54px; height:54px; margin:0 auto 15px; border-radius:50%; color:#fff; font-size:28px; font-weight:900; }
.verificacion-certificado__resultado--valido .verificacion-certificado__icono { background:#16803b; }
.verificacion-certificado__resultado--invalido .verificacion-certificado__icono { background:#b42318; }
.verificacion-certificado__datos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin:26px 0 18px; overflow:hidden; border:1px solid rgba(16,107,97,.12); border-radius:12px; background:rgba(16,107,97,.12); text-align:left; }
.verificacion-certificado__datos div { padding:13px 15px; background:#fff; }
.verificacion-certificado__datos dt { color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.verificacion-certificado__datos dd { margin:4px 0 0; color:var(--ink); font-weight:800; overflow-wrap:anywhere; }
.verificacion-certificado__codigo { font-family:Consolas,monospace; letter-spacing:.05em; }
.verificacion-certificado__huella { display:grid; gap:7px; padding:13px 15px; border-radius:10px; background:#f6f8f7; text-align:left; }
.verificacion-certificado__huella span { color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; }
.verificacion-certificado__huella code { color:var(--ink); font-size:11px; overflow-wrap:anywhere; }
.verificacion-certificado__aviso { margin:16px 0 0; font-size:12px; }
@media (max-width:600px) { .verificacion-certificado__resultado { padding:24px 19px; } .verificacion-certificado__datos { grid-template-columns:1fr; } }

.auditoria-resumen { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:20px; }
.auditoria-resumen article { display:grid; gap:6px; padding:18px; border:1px solid rgba(16,107,97,.14); border-radius:14px; background:#fff; }
.auditoria-resumen span { color:var(--muted); font-size:12px; font-weight:800; text-transform:uppercase; }
.auditoria-resumen strong { color:var(--ink); font-size:28px; }
.auditoria-filtros { display:grid; grid-template-columns:minmax(220px,1fr) 210px auto; gap:12px; margin-bottom:20px; }
.auditoria-filtros input,.auditoria-filtros select,.auditoria-form textarea,.auditoria-form input[type=file] { min-height:44px; padding:10px 12px; border:1px solid rgba(16,107,97,.2); border-radius:10px; background:#fff; font:inherit; }
.auditoria-tabla { width:100%; border-collapse:collapse; min-width:850px; }
.auditoria-tabla th,.auditoria-tabla td { padding:12px 10px; border-bottom:1px solid rgba(16,107,97,.1); text-align:left; vertical-align:top; }
.auditoria-tabla th { color:var(--muted); font-size:11px; text-transform:uppercase; }
.auditoria-tabla small { display:block; margin-top:4px; color:var(--muted); }
.auditoria-tabla a { color:var(--acento-2); font-weight:800; }
.auditoria-estado { display:inline-flex; padding:5px 9px; border-radius:999px; font-size:11px; font-weight:900; }
.auditoria-estado--vigente { color:#087a4b; background:#e8f7ef; }
.auditoria-estado--revocado { color:#b42318; background:#fff0ee; }
.auditoria-certificado-detalle { display:grid; gap:20px; }
.auditoria-certificado__titulo { display:flex; justify-content:space-between; gap:20px; align-items:center; }
.auditoria-hash { font-family:Consolas,monospace; font-size:10px; overflow-wrap:anywhere; }
.auditoria-certificado-acciones { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.auditoria-form { display:grid; gap:12px; }
.auditoria-form h3,.auditoria-form p { margin:0; }
.auditoria-form--peligro button { background:#b42318; }
.auditoria-revocacion { padding:12px; border-radius:10px; color:#8a1c13; background:#fff0ee; }
.auditoria-compacta__hero { min-height:76px; margin-bottom:10px; padding:13px 18px; border-radius:15px; box-shadow:0 5px 14px rgba(16,107,97,.06); align-items:center; }
.auditoria-compacta__hero .hero__marca { font-size:9px; }
.auditoria-compacta__hero h1 { margin:4px 0 0; font-size:24px; line-height:1.1; }
.auditoria-compacta__hero .hero__volver { padding:7px 10px; border-radius:8px; font-size:11px; }
.auditoria-resumen--compacto { gap:9px; margin-bottom:10px; }
.auditoria-resumen--compacto article { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:48px; padding:8px 12px; border-radius:9px; }
.auditoria-resumen--compacto span { font-size:9px; }
.auditoria-resumen--compacto strong { font-size:20px; }
.auditoria-listado--compacto { padding:11px 14px; border-radius:14px; box-shadow:0 5px 14px rgba(16,107,97,.06); }
.auditoria-listado--compacto .auditoria-filtros { grid-template-columns:minmax(220px,1fr) 180px 88px; gap:8px; margin-bottom:10px; }
.auditoria-listado--compacto .auditoria-filtros input,.auditoria-listado--compacto .auditoria-filtros select { min-height:34px; height:34px; padding:5px 9px; border-radius:6px; font-size:11px; }
.auditoria-listado--compacto .auditoria-filtros button { min-height:34px; padding:5px 10px; border-radius:6px; font-size:11px; }
.auditoria-listado--compacto .auditoria-tabla th,.auditoria-listado--compacto .auditoria-tabla td { height:31px; padding:4px 7px; vertical-align:middle; white-space:nowrap; font-size:10px; }
.auditoria-listado--compacto .auditoria-tabla th { font-size:8px; }
.auditoria-listado--compacto .auditoria-tabla small { display:none; }
.auditoria-listado--compacto .auditoria-estado { padding:3px 6px; border-radius:5px; font-size:8px; }
.auditoria-listado--compacto .auditoria-tabla a { font-size:10px; }
.cert-audit-app { height:calc(100vh - 78px); display:flex; flex-direction:column; gap:6px; overflow:hidden; }
.cert-audit-metrics { flex:0 0 auto; display:flex; align-items:center; gap:6px; min-height:30px; padding:4px 7px; border:1px solid #d8e3e0; border-radius:6px; background:#f7faf9; }
.cert-audit-metrics span { padding:3px 9px; border-right:1px solid #d8e3e0; color:#60736f; font-size:9px; text-transform:uppercase; }
.cert-audit-metrics span:last-child { border-right:0; }
.cert-audit-metrics strong { margin-left:5px; color:#183c37; font-size:13px; }
.cert-audit-list { min-height:0; flex:1 1 auto; display:flex; flex-direction:column; overflow:hidden; padding:8px 10px; border-radius:7px; }
.cert-audit-list .auditoria-filtros { flex:0 0 auto; margin-bottom:6px; }
.cert-audit-scroll { min-height:0; flex:1 1 auto; overflow:auto; border:1px solid #dce5e2; }
.cert-audit-scroll .auditoria-tabla { min-width:920px; }
.cert-audit-scroll .auditoria-tabla thead { position:sticky; top:0; z-index:2; background:#fff; }
.cert-audit-back { display:inline-block; margin-bottom:6px; color:var(--acento-2); font-size:10px; font-weight:700; }
.auditoria-estado--expirado { color:#6b4e16; background:#fef3c7; }
.auditoria-estado--reemplazado { color:#4b5563; background:#e5e7eb; }
.roles-audit { height:calc(100vh - 78px); display:flex; flex-direction:column; gap:6px; overflow:hidden; }
.roles-audit__metrics { flex:0 0 auto; display:flex; align-items:center; gap:0; min-height:30px; padding:4px 7px; border:1px solid #d8e3e0; border-radius:6px; background:#f7faf9; }
.roles-audit__metrics span { padding:3px 9px; border-right:1px solid #d8e3e0; color:#60736f; font-size:9px; text-transform:uppercase; }
.roles-audit__metrics span:last-child { border-right:0; }
.roles-audit__metrics strong { margin-left:4px; color:#183c37; font-size:13px; }
.roles-audit__panel { min-height:0; flex:1 1 auto; display:flex; flex-direction:column; overflow:hidden; padding:8px 10px; border-radius:7px; }
.roles-audit__panel--pdf { padding:4px 7px 6px; }
.roles-audit__filters { flex:0 0 auto; grid-template-columns:minmax(190px,1fr) 180px 185px auto; padding:6px; }
.roles-audit__panel--pdf .roles-audit__filters { grid-template-columns:minmax(260px,1fr) 190px auto; gap:7px; padding:4px; margin-bottom:1px; align-items:end; }
.roles-audit__filters input,.roles-audit__filters select { min-height:30px; height:30px; padding:3px 7px; font-size:10px; }
.roles-audit__filter-actions button { min-height:30px; padding:4px 9px; font-size:10px; }
.roles-audit__filter-actions { display:flex; align-items:center; gap:7px; flex-wrap:nowrap; white-space:nowrap; }
.roles-audit__transfer-link { display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:4px 9px; border:1px solid #bed7d2; border-radius:15px; background:#fff; color:#0c6f64; font-size:10px; font-weight:700; text-decoration:none; cursor:pointer; }
.roles-audit__transfer-link:disabled { opacity:.65; cursor:wait; }
.roles-audit__table-head { flex:0 0 auto; min-height:24px; margin:3px 2px; }
.roles-audit__table-head--pdf { min-height:18px; margin:0 2px 3px; }
.roles-audit__pdf { flex:1 1 auto; min-height:0; overflow:hidden; border:1px solid #dce5e2; border-radius:6px; background:#eef4f2; }
.roles-audit__pdf iframe { width:100%; height:100%; border:0; display:block; }
.roles-audit__scroll { min-height:0; flex:1 1 auto; overflow:auto; border:1px solid #dce5e2; }
.roles-audit-table { min-width:760px; }
.roles-audit-table thead { position:sticky; top:0; z-index:2; }
.roles-audit-table th,.roles-audit-table td { height:auto; padding:4px 7px; font-size:10px; line-height:1.15; }
.roles-audit-table th { padding-top:5px; padding-bottom:5px; font-size:8px; }
.roles-audit-status { padding:3px 6px; font-size:8px; }
.roles-audit__legend .is-historical,.roles-audit-status--historico i { background:#87938f; }
.roles-audit-status--historico { color:#4b5563; background:#e5e7eb; }
.roles-audit__pagination { flex:0 0 auto; margin-top:5px; }
.roles-audit__panel--pdf .roles-audit__pagination { margin-top:6px; }
.roles-audit__pagination a,.roles-audit__pagination span { padding:4px 9px; font-size:9px; }
.cert-med-app,.cert-med-admin { height:calc(100vh - 78px); display:flex; flex-direction:column; gap:8px; overflow:hidden; }
.cert-med-panel,.cert-med-admin__panel { padding:10px 12px; border-radius:7px; }
.cert-med-panel h1 { margin:2px 0 8px; font-size:18px; }
.cert-med-form,.cert-med-admin__filters { display:grid; grid-template-columns:160px minmax(220px,1fr) auto; gap:8px; align-items:end; }
.cert-med-admin__filters { grid-template-columns:70px 90px 130px minmax(160px,1fr) auto; }
.cert-med-form input,.cert-med-admin__filters input,.cert-med-admin__filters select { min-height:31px; height:31px; padding:4px 8px; font-size:10px; border:1px solid #cbded9; border-radius:6px; }
.cert-med-form button,.cert-med-admin__filters button,.cert-med-actions button { min-height:31px; padding:5px 10px; border:1px solid #0c6f64; border-radius:15px; background:#0c6f64; color:#fff; font-size:10px; font-weight:700; }
.cert-med-panel--list,.cert-med-admin__panel { min-height:0; flex:1 1 auto; display:flex; flex-direction:column; overflow:hidden; }
.cert-med-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.cert-med-head h2 { margin:0; font-size:14px; }
.cert-med-scroll,.cert-med-admin__scroll { min-height:0; flex:1 1 auto; overflow:auto; border:1px solid #dce5e2; }
.cert-med-scroll .auditoria-tabla th,.cert-med-scroll .auditoria-tabla td,.cert-med-admin__scroll .auditoria-tabla th,.cert-med-admin__scroll .auditoria-tabla td { padding:5px 7px; font-size:10px; line-height:1.15; }
.cert-med-actions { display:inline-flex; gap:4px; margin:1px 3px 1px 0; }
.cert-med-actions input { width:120px; min-height:29px; padding:3px 7px; border:1px solid #cbded9; border-radius:6px; font-size:10px; }
@media(max-width:900px){.auditoria-resumen{grid-template-columns:repeat(2,1fr)}.auditoria-certificado-acciones{grid-template-columns:1fr}.auditoria-filtros{grid-template-columns:1fr}}
