/*
 * Cooperativa Cimientos — Beta Apple 2026
 * Capa exclusivamente visual. No modifica rutas, datos ni comportamiento.
 */

:root {
  --green: #66971f;
  --ios-tint: #66971f;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --bg: #f4f5f2;
  --card: #ffffff;
  --sidebar: rgba(249, 250, 248, .92);
  --line: rgba(29, 29, 31, .085);
  --line-strong: rgba(29, 29, 31, .13);
  --fill: rgba(118, 118, 128, .075);
  --fill-hover: rgba(118, 118, 128, .11);
  --surface-raised: rgba(255, 255, 255, .96);
  --shadow: 0 24px 70px rgba(30, 38, 25, .12), 0 2px 10px rgba(30, 38, 25, .04);
  --radius: 28px;
  --radius-card: 28px;
  --radius-control: 18px;
  --radius-small: 15px;
}

html { color-scheme: light; }

body {
  background:
    radial-gradient(circle at 92% 2%, rgba(102, 151, 31, .10), transparent 27rem),
    linear-gradient(180deg, #f7f8f5 0, var(--bg) 36rem);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
a,
input,
select,
textarea { -webkit-tap-highlight-color: transparent; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(102, 151, 31, .25);
  outline-offset: 2px;
}

.app { grid-template-columns: 252px minmax(0, 1fr); }

.sidebar {
  padding: 20px 14px;
  background: var(--sidebar);
  border-right-color: rgba(29, 29, 31, .07);
  backdrop-filter: blur(30px) saturate(140%);
  -webkit-backdrop-filter: blur(30px) saturate(140%);
}

.brand { gap: 13px; padding: 5px 9px 21px; }
.brandmark { width: 48px; height: 48px; flex:0 0 48px; }
.brand strong { font-size: 14px; line-height: 1.15; letter-spacing: -.01em; }
.brand span { display: block; margin-top: 3px; font-size: 10.5px; }

.nav { gap: 7px; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; }
.nav-group{padding:5px;border:1px solid rgba(39,69,44,.08);border-radius:19px;background:rgba(255,255,255,.52)}
.nav-label { margin: 2px 9px 3px; font-size: 9px; letter-spacing: .02em; text-transform:none; }
.nav button {
  min-height: 34px;
  padding: 5px 9px;
  gap: 9px;
  border-radius: var(--radius-small);
  font-size: 12.5px;
  transition: color .16s ease, background .16s ease, transform .16s ease;
}
.nav button:hover { background: var(--fill); }
.nav button:active { transform: scale(.985); }
.nav button.active {
  background: #fff;
  color: var(--green);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .025), 0 5px 18px rgba(30, 38, 25, .05);
}
.nav .ico,
.nav button[data-go] .ico {
  width: 23px;
  height: 23px;
  color: #74777a;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.nav button.active .ico,
.nav button:hover .ico { color: var(--green); }
.nav .ico svg { width: 16px; height: 16px; stroke-width: 1.9; }

.profile {
  min-height: 54px;
  padding: 9px 10px;
  border-radius: 19px;
  background: rgba(255, 255, 255, .9);
  border-color: var(--line);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .02);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.profile:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(30, 38, 25, .07); }
.profile:active { transform: scale(.985); }
.avatar, .profile-photo { width: 35px; height: 35px; }
.avatar-person svg{width:58%;height:58%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

main { padding: 20px 28px 72px; }
.topbar { gap: 10px; padding: 2px 0 16px; }
.search { max-width: 560px; }
.search input,
.field,
.formfield input,
.formfield select,
.formfield textarea,
textarea {
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: var(--fill);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
.search input { min-height: 44px; padding: 10px 42px 10px 40px; }
.field,
.formfield input,
.formfield select { min-height: 42px; }
.search input:hover,
.field:hover,
.formfield input:hover,
.formfield select:hover,
.formfield textarea:hover,
textarea:hover { background: var(--fill-hover); }
.search input:focus,
.field:focus,
.formfield input:focus,
.formfield select:focus,
.formfield textarea:focus,
textarea:focus {
  background: #fff;
  border-color: rgba(102, 151, 31, .42);
  box-shadow: 0 0 0 4px rgba(102, 151, 31, .10);
}
.search:before { top: 9px; color: #818187; }
.search-clear { border-radius: 50%; }

.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 17px;
  background: rgba(255, 255, 255, .88);
  border-color: var(--line);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .02);
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.icon-btn:hover { background: #fff; box-shadow: 0 7px 22px rgba(30, 38, 25, .07); }
.icon-btn:active { transform: scale(.94); }

.pagehead { margin: 14px 0 20px; }
.pagehead-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.pagehead-actions .btn,
.pagehead > .btn { display:inline-flex; align-items:center; justify-content:center; min-height:42px; line-height:1; white-space:nowrap; }
.eyebrow { font-size: 10px; letter-spacing: .11em; }
.pagehead h1 { margin: 3px 0; font-size: clamp(28px, 3vw, 36px); line-height: 1.05; letter-spacing: -.045em; }
.pagehead p { font-size: 12.5px; }

.btn {
  min-height: 40px;
  padding: 9px 15px;
  border-radius: var(--radius-control);
  font-weight: 720;
  letter-spacing: -.005em;
  transition: transform .15s ease, filter .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover { filter: brightness(.985); }
.btn:active { transform: scale(.975); }
.btn-primary {
  background: var(--green);
  box-shadow: 0 7px 18px rgba(102, 151, 31, .18);
}
.btn-secondary { background: rgba(255, 255, 255, .9); border-color: var(--line-strong); }
.btn-sm { min-height: 32px; padding: 6px 11px; border-radius: var(--radius-small); }
.btn-whatsapp { background: #25d366 !important; box-shadow: 0 8px 20px rgba(37, 211, 102, .20) !important; }

.hero {
  min-height: 104px;
  padding: 22px 24px;
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, rgba(102, 151, 31, .105), rgba(255, 255, 255, .92) 64%);
  border-color: rgba(102, 151, 31, .15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}
.hero h2 { font-size: 18px; letter-spacing: -.02em; }

.card {
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, .94);
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(30, 38, 25, .025), 0 10px 32px rgba(30, 38, 25, .035);
}
.kpis { gap: 12px; }
.kpi {
  min-height: 142px;
  padding: 19px 20px;
  border-radius: var(--radius-card);
}
.kpi:before { display: none; }
.kpi:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(30, 38, 25, .07); }
.kpi:active { transform: scale(.985); }
.kpi span { font-size: 11px; }
.kpi strong { margin: 10px 0 8px; font-size: 30px; line-height: 1; }
.kpi small { display: block; line-height: 1.3; }

.grid2 { gap: 14px; }
.panel { padding: 20px; }
.panel-head { margin-bottom: 14px; }
.panel h2 { font-size: 16px; letter-spacing: -.02em; }
.linkbtn { min-height: 30px; padding: 5px 10px; border-radius: var(--radius-small); }
.linkbtn:hover { background: rgba(102, 151, 31, .08); }

.item { padding: 12px 13px; border-radius: var(--radius-control); background: rgba(118, 118, 128, .055); }
.empty { padding: 38px 20px; font-size: 12px; }
.quick { gap: 9px; }
.quick button {
  min-height: 82px;
  padding: 13px 9px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .86);
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.quick button:hover { transform: translateY(-1px); background: #fff; box-shadow: 0 8px 22px rgba(30, 38, 25, .06); }
.quick button:active { transform: scale(.985); }
.quick b,
.quick button:nth-child(n) b {
  width: 35px;
  height: 35px;
  margin-bottom: 7px;
  border-radius: 13px;
  background: rgba(102, 151, 31, .10);
  color: var(--green);
}

.toolbar { gap: 8px; }
.segmented { padding: 3px; border-radius: var(--radius-control); background: var(--fill); }
.segmented button { min-height: 34px; border-radius: var(--radius-small); }
.segmented button.active { box-shadow: 0 2px 8px rgba(0, 0, 0, .055); }

.tablewrap { border-radius: 20px; }
.table th { padding: 12px; font-size: 9.5px; }
.table td { padding: 14px 12px; }
.table tbody tr { transition: background .14s ease; }
.table tbody tr:hover { background: rgba(102, 151, 31, .04); }
.badge { padding: 5px 10px; border-radius: 999px; }

.settings-layout { grid-template-columns: 206px minmax(0, 1fr); gap: 14px; }
.settings-nav { padding: 8px; border-radius: 24px; }
.settings-nav button { min-height: 39px; padding: 9px 11px; border-radius: var(--radius-small); }
.settings-panel { padding: 24px; border-radius: var(--radius-card); }
.colorbox { border-radius: 20px; }

.modalback,
.overlayback {
  background: rgba(15, 16, 18, .30);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}
.modal {
  width: min(640px, 100%);
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 28px;
  background: rgba(252, 252, 251, .98);
  box-shadow: var(--shadow);
}
.modal-head { min-height: 44px; }
.modal h2 { font-size: 21px; letter-spacing: -.025em; }
.detail { padding: 13px; border-radius: var(--radius-control); }
.profile-avatar-large { border-radius: 50%; }
.profile-action { min-height: 43px; border-radius: var(--radius-small); }

.overlaywin {
  width: min(92vw, 1240px);
  height: 92vh;
  max-width: none;
  max-height: 980px;
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 36px 110px rgba(20, 25, 18, .22), 0 3px 15px rgba(20, 25, 18, .08);
}
.overlaywin-head {
  min-height: 58px;
  padding: 8px 10px 8px 21px;
  background: rgba(250, 250, 249, .94);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.overlaywin-head h2 { font-size: 15px; letter-spacing: -.015em; }

.toast { padding: 12px 16px; border-radius: var(--radius-control); box-shadow: 0 16px 40px rgba(0, 0, 0, .18); }

#loginScreen {
  background:
    radial-gradient(circle at 18% 18%, rgba(229, 105, 21, .10), transparent 22rem),
    radial-gradient(circle at 82% 76%, rgba(102, 151, 31, .15), transparent 26rem),
    linear-gradient(145deg, rgba(255,255,255,.82), rgba(238,244,227,.72)),
    #f4f5f2 !important;
}
#loginScreen > .card {
  border-radius: 28px;
  border-color: rgba(29, 29, 31, .08);
  box-shadow: 0 24px 70px rgba(30, 38, 25, .10);
}
#loginScreen > .card::before {
  content:""; display:block; width:54px; height:4px; border-radius:999px;
  margin:0 auto 24px; background:linear-gradient(90deg,var(--green),var(--orange));
}
#loginScreen .login-brand { padding:0 0 28px; align-items:center; justify-content:center; text-align:left; gap:16px; }
#loginScreen .login-brand .brandmark { width:66px; height:66px; flex:0 0 66px; }
#loginScreen .login-brand .brandmark img { width:100%; height:100%; object-fit:contain; }
#loginScreen .login-brand strong { font-size:21px; letter-spacing:-.025em; }
#loginScreen .login-brand span { font-size:13px; margin-top:3px; }

/* Acceso institucional: composición fotográfica aprobada para Cimientos. */
#loginScreen {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  z-index: 200;
  padding: clamp(22px, 6vh, 60px) clamp(22px, 4.5vw, 70px);
  overflow: hidden;
  place-items: center;
  background:
    linear-gradient(90deg, rgba(4,36,26,.2), rgba(13,45,32,.05)),
    url("assets/login-office-cimientos-v1.jpg") center / cover no-repeat !important;
}
.login-shell {
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1650px, 100%);
  height: min(735px, calc(100vh - clamp(44px, 9vw, 140px)));
  min-height: 650px;
  display: grid;
  grid-template-columns: minmax(0, 1.56fr) minmax(500px, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 32px;
  box-shadow: 0 34px 95px rgba(8,27,19,.34);
  transform: translate(-50%, -50%) scale(.8);
  transform-origin: center;
}
.login-welcome {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 50px 64px 58px;
  color: #fff;
  background: linear-gradient(110deg, rgba(2,46,33,.96), rgba(3,48,34,.82) 60%, rgba(3,45,32,.48));
  isolation: isolate;
}
.login-welcome::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 50%, rgba(2,25,18,.28));
}
.login-logo { width: min(335px, 66%); }
.login-logo img { display:block; width:100%; height:auto; }
.login-welcome-copy { margin-top: 50px; }
.login-accent { display: block; width: 57px; height: 4px; margin-bottom: 27px; border-radius: 999px; background: linear-gradient(90deg,#76b82a 55%,#eb741e 55%); }
.login-welcome h1 { margin: 0; font-size: clamp(58px, 4.5vw, 76px); line-height: .9; letter-spacing: -.055em; color: #fff; }
.login-welcome h1 strong { color: #79bf2c; font-weight: 900; }
.login-welcome-copy p { margin: 24px 0 0; color: rgba(255,255,255,.96); font-size: clamp(22px, 1.75vw, 29px); line-height: 1.18; }
.login-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; width: min(520px, 100%); margin-top: 52px; }
.login-values div { display: grid; justify-items: center; gap: 8px; color: #fff; }
.login-values span { width: 80px; height: 80px; display: grid; place-items: center; border: 1.5px solid rgba(255,255,255,.62); border-radius: 20px; background: rgba(3,33,24,.3); backdrop-filter: blur(12px); }
.login-values img { width: 48px; height: 48px; object-fit: contain; }
.login-values .login-value-progress span { border-color: rgba(240,123,45,.85); }
.login-values small { font-size: 13px; color: rgba(255,255,255,.9); }
.login-card {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 68px 64px 54px;
  overflow: hidden;
  background: rgba(255,255,255,.97);
  color: #082b20;
}
.login-watermark { position: absolute; top: 0; right: 0; width: 205px; height: 245px; border-left: 3px solid rgba(111,174,49,.34); border-bottom: 3px solid rgba(111,174,49,.34); border-radius: 0 0 0 108px; pointer-events: none; }
.login-watermark img { position:absolute; top:52px; right:12px; width:170px; height:150px; object-fit:contain; opacity:.18; filter:brightness(0) saturate(100%) invert(73%) sepia(31%) saturate(748%) hue-rotate(42deg) brightness(97%); }
.login-card > header,
.login-card > form,
.login-card > footer { transform: translateY(25px); }
.login-card header { position: relative; margin-bottom: 67px; }
.login-card header h1 { margin: 0 0 8px; color: #061f17; font-size: clamp(38px, 2.6vw, 44px); line-height: 1; letter-spacing: -.045em; }
.login-card header p { margin: 0; color: #7a7f7c; font-size: 18px; }
.login-mobile-brand { display: none; }
.login-card form,
.login-options,
.login-control,
.login-control input { box-sizing: border-box; min-width: 0; max-width: 100%; }
.login-card form { width: 100%; }
.login-field { margin-bottom: 20px; }
.login-field label { display: block; margin-bottom: 9px; color: #0b2d22; font-size: 14px; font-weight: 800; }
.login-control { position: relative; display: flex; align-items: center; min-height: 58px; border: 1px solid #d8dedb; border-radius: 15px; background: rgba(255,255,255,.9); transition: border-color .18s, box-shadow .18s, background .18s; }
.login-control:focus-within { border-color: #6da52b; background: #fff; box-shadow: 0 0 0 4px rgba(109,165,43,.14); }
.login-control > svg { position: absolute; left: 18px; width: 22px; height: 22px; fill: none; stroke: #113e30; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.login-control input { width: 100%; min-width: 0; min-height: 56px; padding: 0 54px; border: 0; outline: 0; background: transparent; color: #13221d; font-size: 16px; }
.login-control input::placeholder { color: #929795; }
.login-password-toggle { position: absolute; right: 10px; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: #164936; }
.login-password-toggle:hover { background: rgba(39,69,44,.07); }
.login-password-toggle:focus-visible { outline: 3px solid rgba(109,165,43,.4); outline-offset: 1px; }
.login-password-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.login-options { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 2px 0 27px; }
.login-remember { display: inline-flex; align-items: center; color: #243b32; font-size: 13px; cursor: pointer; }
.login-remember input { width: 19px; height: 19px; margin: 0 7px 0 0; accent-color: #6da92c; }
#recoverAccessBtn { padding: 7px 0; border: 0; background: transparent; color: #236313; font-size: 13px; font-weight: 800; }
#recoverAccessBtn:hover { text-decoration: underline; }
.login-submit { width: 100%; min-height: 60px; display: flex; align-items: center; justify-content: center; gap: 24px; border: 0; border-radius: 15px; background: linear-gradient(100deg,#67a91f,#78bf2d); color: #fff; font-size: 17px; font-weight: 900; box-shadow: 0 13px 28px rgba(102,169,31,.22); transition: transform .18s, box-shadow .18s, filter .18s; }
.login-submit:hover { transform: translateY(-1px); filter: saturate(1.08); box-shadow: 0 17px 34px rgba(102,169,31,.3); }
.login-submit:disabled { opacity: .68; cursor: wait; transform: none; }
.login-error { margin-bottom: 18px; padding: 12px 14px; border: 1px solid rgba(194,59,43,.15); border-radius: 14px; background: #fbeae7; color: #a72e21; font-size: 13px; }
.login-card footer { margin-top: 34px; padding-top: 24px; border-top: 1px solid #dfe4e1; text-align: center; color: #7a817d; font-size: 13px; }

@media (max-width: 900px) {
  #loginScreen { padding: 0; overflow-y: auto; background-position: 62% center !important; }
  .login-shell { position: relative; top: auto; left: auto; width: 100%; min-height: 100%; grid-template-columns: 1fr; border: 0; border-radius: 0; box-shadow: none; transform: none; }
  .login-welcome { display: none; }
  .login-card { min-height: 100vh; justify-content: center; padding: max(34px, env(safe-area-inset-top)) clamp(24px, 7vw, 54px) max(30px, env(safe-area-inset-bottom)); background: linear-gradient(180deg,rgba(255,255,255,.96),rgba(250,252,248,.98)); }
  .login-card > header,
  .login-card > form,
  .login-card > footer { transform: none; }
  .login-card::before { content:""; position:absolute; inset:0; z-index:-1; background:url("assets/login-office-cimientos-v1.jpg") center / cover; opacity:.08; }
  .login-mobile-brand { display: block; width: min(270px, 72%); margin: 0 0 44px; }
  .login-mobile-brand img { display:block; width:100%; height:auto; }
  .login-watermark { width: 180px; height: 180px; opacity: .12; }
  .login-card header { margin-bottom: 34px; }
  .login-card header h1 { font-size: clamp(38px, 10vw, 48px); }
}

@media (max-width: 430px) {
  .login-card { padding-inline: 21px; }
  .login-mobile-brand { margin-bottom: 36px; }
  .login-card header p { font-size: 17px; }
  .login-options { align-items: flex-start; gap: 12px; }
  .login-remember { min-width:0; flex:1 1 50%; line-height: 1.25; }
  #recoverAccessBtn { min-width:0; flex:1 1 46%; white-space:normal; text-align: right; line-height: 1.25; }
  .login-card footer { margin-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

@media (max-width: 980px) {
  .app { grid-template-columns: 82px minmax(0, 1fr); }
  main { padding-inline: 22px; }
}

@media (max-width: 700px) {
  main { padding: 14px 13px 92px; }
  .topbar { gap: 8px; }
  .search input { min-height: 42px; }
  .icon-btn { width: 42px; height: 42px; border-radius: 16px; }
  .pagehead { gap: 12px; margin-top: 10px; }
  .pagehead h1 { font-size: 28px; }
  .hero { min-height: auto; padding: 20px; }
  .kpis { gap: 10px; }
  .kpi { min-height: 126px; padding: 16px; }
  .kpi strong { font-size: 27px; }
  .panel { padding: 17px; }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav { border-radius: 22px; }
  .mobilebar { border-radius: 25px; }
  .modal { padding: 19px; border-radius: 26px; }
  .overlayback { padding: 8px; }
  .overlaywin { width: 100%; height: calc(100dvh - 16px); border-radius: 25px; }
}

@media (max-width: 430px) {
  .topbar .search { min-width: 0; }
  .topbar .icon-btn:nth-of-type(2) { display: none; }
  .pagehead { align-items: stretch; flex-direction: column; }
  .pagehead > div:last-child,
  .pagehead > .btn { align-self: flex-start; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi { min-height: 116px; }
  .kpi span { font-size: 10px; }
  .kpi strong { margin-block: 8px 6px; font-size: 25px; }
  .kpi small { font-size: 9px; }
  .quick button { min-height: 78px; }
}

/* Operación multiárea ---------------------------------------------------- */
.action-row{display:flex;gap:8px;flex-wrap:wrap}
.op-notice{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px;padding:13px 15px;border:1px solid color-mix(in srgb,var(--orange),transparent 74%);background:color-mix(in srgb,var(--orange),#fff 92%);border-radius:18px}
.op-notice strong{font-size:12px;white-space:nowrap}.op-notice span{font-size:11px;color:var(--muted);line-height:1.45}.op-notice code{font:inherit;font-weight:750}
.op-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}.op-kpis-four{grid-template-columns:repeat(4,1fr)}
.op-kpi{padding:17px 18px}.op-kpi span{display:block;color:var(--muted);font-size:10px}.op-kpi strong{display:block;margin-top:6px;font-size:21px;letter-spacing:-.025em}
.op-list{display:flex;flex-direction:column;gap:7px}.op-row{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center;border:0;background:rgba(246,247,244,.78);padding:11px 12px;border-radius:18px;text-align:left;color:var(--ink)}
.op-row:hover{background:color-mix(in srgb,var(--green),#fff 94%)}.op-row.static{cursor:default}.op-row strong{display:block;font-size:12px}.op-row small{display:block;color:var(--muted);font-size:10px;margin-top:2px}.op-row-end{text-align:right}.op-row-end .badge{margin-top:4px}
.op-priority{width:9px;height:9px;border-radius:50%;background:#aeb2ad}.op-priority.alta{background:var(--orange)}.op-priority.urgente{background:var(--danger)}
.op-empty{display:flex;flex-direction:column;gap:4px}.op-empty strong{color:var(--ink);font-size:13px}.op-empty span{font-size:11px}.op-section-gap{margin-top:14px}
.op-form{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:17px}.op-form label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:10px;font-weight:750}.op-form input,.op-form select,.op-form textarea{width:100%;border:1px solid transparent;border-radius:16px;padding:10px 12px;background:rgba(32,33,36,.05);outline:none;color:var(--ink);resize:vertical}.op-form input:focus,.op-form select:focus,.op-form textarea:focus{background:#fff;border-color:color-mix(in srgb,var(--green),transparent 55%)}.op-form input[readonly]{color:var(--muted);font-weight:800}.op-wide{grid-column:1/-1}.op-form-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;margin-top:5px}.op-help{margin:0;color:var(--muted);font-size:10px;line-height:1.45}.op-field-help{font-size:9px;font-weight:500;line-height:1.35;color:var(--muted)}.op-block{display:block;color:var(--muted);font-size:9px;margin-top:2px}.op-danger{color:var(--danger)}
.op-report-toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:14px}.op-report-toolbar label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:10px;font-weight:750;min-width:220px}.op-report-period{font-size:10px;font-weight:800;color:var(--green);text-transform:capitalize;margin-bottom:12px}
.op-report-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.op-report-grid>div{padding:14px;border-radius:18px;background:rgba(246,247,244,.78)}.op-report-grid span,.op-report-grid small{display:block;color:var(--muted);font-size:10px}.op-report-grid strong{display:block;font-size:20px;margin:4px 0}
.op-contribution-toolbar{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin-bottom:14px}.op-contribution-toolbar label{display:grid;gap:6px;color:var(--muted);font-size:10px;font-weight:750}.op-contribution-toolbar .op-search-label{flex:1;min-width:260px}.op-contribution-toolbar .field{width:100%}.op-member-results{display:grid;gap:7px;margin-bottom:16px}.op-member-result{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;border:1px solid var(--line);background:#fff;border-radius:17px;padding:11px 13px;color:var(--ink)}.op-member-result:hover{border-color:color-mix(in srgb,var(--green),transparent 55%);background:color-mix(in srgb,var(--green),#fff 96%)}.op-member-result strong,.op-member-result small{display:block}.op-member-result small{color:var(--muted);font-size:10px;margin-top:2px}.op-member-link{border:0;background:transparent;color:var(--ink);padding:0;font-weight:700;text-align:left}.op-member-link:hover{color:var(--green)}.op-account-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:14px 0 18px}.op-account-head span,.op-account-head small{color:var(--muted);font-size:10px}.op-account-head h3{margin:3px 0;font-size:20px}.op-account-head label{display:grid;gap:5px;color:var(--muted);font-size:10px}.op-account-head select{border:1px solid var(--line);border-radius:14px;background:#fff;padding:8px 30px 8px 11px}.op-account-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px}.op-account-summary>div{background:rgba(118,118,128,.06);border-radius:16px;padding:12px}.op-account-summary span{display:block;color:var(--muted);font-size:9px}.op-account-summary strong{display:block;margin-top:5px;font-size:14px}.op-month-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.op-month{border:1px solid var(--line);border-radius:15px;padding:10px 7px;text-align:center}.op-month span,.op-month strong,.op-month small{display:block}.op-month span{font-size:9px;color:var(--muted)}.op-month strong{font-size:10px;margin-top:4px}.op-month small{font-size:8px;color:var(--muted);margin-top:3px}.op-month.paid{background:#eff6e6;border-color:#cfe2b6;color:#56851d}.op-month.pending{background:#faf5ec;color:#a86518}.op-account-table{margin-top:16px}
.op-modal{width:min(680px,100%)}
.mobile-op-nav{display:none}

@media(max-width:900px){.op-kpis-four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.op-kpis,.op-kpis-four,.op-report-grid,.op-form{grid-template-columns:1fr}.op-wide,.op-form-actions{grid-column:1}.op-row{grid-template-columns:auto minmax(0,1fr)}.op-row-end{grid-column:2;text-align:left}.op-notice,.op-report-toolbar{flex-direction:column;align-items:stretch}.op-notice strong{white-space:normal}.op-report-toolbar label{min-width:0}.mobile-op-nav{display:flex;overflow:auto;gap:6px;margin:-4px 0 13px;padding-bottom:2px;scrollbar-width:none}.mobile-op-nav button{white-space:nowrap;border:0;border-radius:15px;padding:8px 11px;background:rgba(32,33,36,.05);color:var(--muted);font-size:10px}.mobile-op-nav button.active{background:color-mix(in srgb,var(--green),#fff 87%);color:var(--green);font-weight:800}.op-account-summary{grid-template-columns:1fr}.op-month-grid{grid-template-columns:repeat(3,1fr)}.op-account-head{align-items:flex-start}.op-contribution-toolbar{align-items:stretch}.op-contribution-toolbar .op-search-label{min-width:100%}}
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.profile-session{display:flex;flex-direction:column;gap:2px;padding:13px 16px;border-radius:17px;background:var(--soft,#F6F6F6);margin-bottom:8px}
.profile-session span{font-size:12px;color:var(--muted)}
.staff-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.staff-actions select{min-width:170px}
@media(max-width:720px){.profile-grid{grid-template-columns:1fr}.staff-actions{width:100%;justify-content:stretch}.staff-actions select,.staff-actions button{flex:1}}

/* Dark appearance: scoped to the panel; printed documents and iframe pages
   retain their own white paper styles. Layout and light palette are unchanged. */
html[data-theme="dark"] {
  color-scheme: dark;
  /* Important only for tokens that the appearance editor sets inline. */
  --bg: #171918 !important;
  --green: #a6d568 !important;
  --orange: #ffb567 !important;
  --ink: #f1f3ef;
  --muted: #b2b9b2;
  --card: #232723;
  --sidebar: #1c201d;
  --surface-raised: #2d332e;
  --fill: #2d332e;
  --fill-hover: #363e37;
  --soft: #2d332e;
  --line: #3b443c;
  --line-strong: #59655a;
  --danger: #ffab9f;
  --ios-tint: var(--green);
  --shadow: 0 24px 70px rgba(0,0,0,.28);
}
html[data-theme="dark"] body { background: var(--bg); }
html[data-theme="dark"] :is(.card,.modal,.overlaywin,.colorbox,.detail) {
  background: var(--card); color: var(--ink); border-color: var(--line);
}
html[data-theme="dark"] :is(.main,.tablewrap,.table,.table tbody,.table tr,.settings-panel,.settings-nav) {
  background: transparent; color: var(--ink); border-color: var(--line);
}
html[data-theme="dark"] .table :is(th,td) { color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .table th { color: var(--muted); }
html[data-theme="dark"] .table tbody tr:hover { background: var(--fill-hover); }
html[data-theme="dark"] .nav-group { background: rgba(255,255,255,.035); border-color: var(--line); }
html[data-theme="dark"] :is(.profile,.icon-btn,.btn-secondary,.quick button,.op-member-result,.overlaywin-head,.mobilebar,.segmented button.active,.nav button.active,.mobilebar button.active) {
  background: var(--surface-raised); color: var(--ink); border-color: var(--line);
}
html[data-theme="dark"] :is(.profile:hover,.icon-btn:hover,.quick button:hover,.op-member-result:hover) { background: var(--fill-hover); }
html[data-theme="dark"] :is(.nav button.active,.nav button.active .ico,.nav button:hover .ico,.mobilebar button.active,.mobile-op-nav button.active) { color: var(--green); }
html[data-theme="dark"] :is(.nav .ico,.nav button[data-go] .ico) { color: var(--muted); }
html[data-theme="dark"] :is(.kpi,.settings-nav button,.profile-action) { color: var(--ink); }
html[data-theme="dark"] :is(.hero,.item,.op-row,.op-report-grid>div,.op-notice,.mobile-op-nav button.active) {
  background: var(--fill); border-color: var(--line); box-shadow: none;
}
html[data-theme="dark"] .hero { background: linear-gradient(135deg,#293524,var(--card)); }
html[data-theme="dark"] .op-row:hover { background: var(--fill-hover); }
html[data-theme="dark"] :is(.op-form input,.op-form select,.op-form textarea,.op-account-head select) {
  color: var(--ink); background: var(--fill); border-color: var(--line);
}
html[data-theme="dark"] :is(.search input,.field,.formfield input,.formfield select,.formfield textarea,textarea) { box-shadow: none; }
html[data-theme="dark"] :is(input,select,textarea):focus { background: var(--surface-raised); color: var(--ink); }
html[data-theme="dark"] :is(input,textarea)::placeholder { color: var(--muted); opacity: 1; }
html[data-theme="dark"] :is(button,a,input,select,textarea):focus-visible { outline-color: var(--green); }
html[data-theme="dark"] .btn-primary { background: #a6d568; color: #17220e; box-shadow: none; }
html[data-theme="dark"] .btn-whatsapp { background: #19874b !important; color: #fff !important; }
html[data-theme="dark"] :is(.aprobado,.activo,.enviado,.op-month.paid) { background: #293d2a; color: #b5e69b; border-color: #476443; }
html[data-theme="dark"] :is(.pendiente,.vencido,.op-month.pending) { background: #403323; color: #ffd093; }
html[data-theme="dark"] .observada { background: #373044; color: #d8baff; }
html[data-theme="dark"] .rechazado { background: #462c28; color: #ffc1b7; }
html[data-theme="dark"] :is(.copiado,.revocado) { background: #333a35; color: #d0d8d1; }
html[data-theme="dark"] .profile-avatar-large { background: #314229; }
.eyebrow,.table th,.detail small,.founder-mark,.profile-security h3{text-transform:none;letter-spacing:.01em}
.pagehead{justify-content:flex-start}.pagehead>.pagehead-actions,.pagehead>button,.pagehead>.action-row,.pagehead>a{margin-left:18px}.pagehead-actions{justify-content:flex-start}
.profile>span:last-child{min-width:0;text-align:left}.profile strong,.profile small{line-height:1.2}.profile small{display:block;margin-top:3px}
@media(max-height:820px) and (min-width:701px){.sidebar{padding-block:10px}.brand{padding-bottom:10px}.brandmark{width:40px;height:40px;flex-basis:40px}.nav{gap:4px}.nav-group{padding:3px}.nav button{min-height:30px;padding-block:3px}.profile{min-height:46px;margin-top:5px}}
html[data-theme="dark"] .brandmark { background: #F6F6F6; border-radius: 10px; padding: 3px; }
html[data-theme="dark"] #loginScreen {
  background:
    linear-gradient(90deg, rgba(4,36,26,.28), rgba(13,45,32,.10)),
    url("assets/login-office-cimientos-v1.jpg") center / cover no-repeat !important;
}
#loginScreen { overflow-y: hidden; }
@media (max-width: 900px) { #loginScreen { overflow-y: auto; } }
#passwordSetupForm h2 { font-size: 21px; }
#passwordSetupForm p { font-size: 12px; line-height: 1.5; }
#passwordSetupForm a { color: var(--green); }
#passwordSetupForm #setupError { color: var(--danger); }

/* Barra lateral 2026: jerarquía iOS, lectura cómoda y navegación estable. */
@media (min-width: 981px) {
  .app { grid-template-columns: 276px minmax(0, 1fr); }
}

.sidebar {
  padding: 22px 16px 16px;
  background: color-mix(in srgb, var(--bg), #fff 66%);
}

.sidebar .brand {
  flex: 0 0 auto;
  gap: 14px;
  min-height: 72px;
  padding: 5px 10px 17px;
}

.sidebar .brandmark {
  width: 52px;
  height: 52px;
  flex-basis: 52px;
}

.sidebar .brand strong {
  font-size: 15px;
  line-height: 1.2;
}

.sidebar .brand span {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.25;
}

.sidebar .nav {
  flex: 1 1 auto;
  min-height: 0;
  gap: 8px;
  padding: 1px 2px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.sidebar .nav::-webkit-scrollbar { display: none; }

.sidebar .nav-group {
  padding: 6px;
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, .55);
  box-shadow: inset 0 0 0 1px rgba(29, 29, 31, .055);
}

.sidebar .nav-label {
  margin: 1px 10px 5px;
  color: color-mix(in srgb, var(--muted), var(--ink) 12%);
  font-size: 10px;
  font-weight: 760;
  line-height: 1.2;
}

.sidebar .nav button {
  width: 100%;
  min-height: 39px;
  padding: 6px 9px;
  gap: 10px;
  border-radius: 15px;
  font-size: 13px;
}

.sidebar .nav .ico,
.sidebar .nav button[data-go] .ico {
  width: 27px !important;
  height: 27px !important;
  flex: 0 0 27px;
  border-radius: 9px;
}

.sidebar .nav button.active {
  background: color-mix(in srgb, var(--green), #fff 88%);
  color: color-mix(in srgb, var(--green), #14220f 18%);
  box-shadow: none;
}

.sidebar .nav button.active .ico {
  background: var(--green);
  color: #fff;
}

.sidebar .profile {
  flex: 0 0 auto;
  min-height: 62px;
  margin-top: 4px;
  padding: 10px 11px;
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, .82);
  box-shadow: inset 0 0 0 1px rgba(29, 29, 31, .07), 0 8px 24px rgba(30, 38, 25, .055);
}

.sidebar .profile .avatar,
.sidebar .profile-photo {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
}

.sidebar .profile strong { font-size: 12.5px; }
.sidebar .profile small { font-size: 10.5px; }
.sidebar .profile::after { content: "›"; margin-left: auto; color: #78817b; font-size: 25px; font-weight: 400; }

html[data-theme="dark"] .sidebar {
  background: color-mix(in srgb, var(--bg), #263027 18%);
}

html[data-theme="dark"] .sidebar .nav-group {
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 0 0 1px var(--line);
}

html[data-theme="dark"] .sidebar .nav button.active {
  background: color-mix(in srgb, var(--green), transparent 82%);
  color: var(--green);
}

@media (max-height: 860px) and (min-width: 981px) {
  .sidebar { padding-block: 13px 11px; }
  .sidebar .brand { min-height: 58px; padding-bottom: 10px; }
  .sidebar .brandmark { width: 43px; height: 43px; flex-basis: 43px; }
  .sidebar .nav { gap: 5px; }
  .sidebar .nav-group { padding: 4px 5px; border-radius: 17px; }
  .sidebar .nav-label { margin-bottom: 2px; font-size: 9px; }
  .sidebar .nav button { min-height: 32px; padding-block: 3px; font-size: 12px; }
  .sidebar .nav .ico,
  .sidebar .nav button[data-go] .ico { width: 24px !important; height: 24px !important; flex-basis: 24px; }
  .sidebar .profile { min-height: 52px; padding-block: 7px; }
  .sidebar .profile .avatar,
  .sidebar .profile-photo { width: 34px; height: 34px; flex-basis: 34px; }
}

/* Dashboard institucional 2026 — referencia aprobada del 23/09. */
:root {
  --cimientos-dark: #1C4629;
  --cimientos-lime: #7AAB00;
  --cimientos-orange: #F56000;
  --cimientos-charcoal: #3A3937;
  --green: #1C4629;
  --ios-tint: #1C4629;
  --orange: #F56000;
}

body {
  background:
    radial-gradient(circle at 88% 12%, rgba(122,171,0,.10), transparent 31rem),
    linear-gradient(150deg, #f7f9f4 0%, #f0f6ec 56%, #f7f8f5 100%);
}

@media (min-width: 981px) {
  .app { grid-template-columns: 238px minmax(0, 1fr); }
}

.sidebar {
  position: relative;
  padding: 21px 14px 14px;
  background: rgba(255,255,255,.93);
  border-right: 1px solid rgba(28,70,41,.075);
  backdrop-filter: blur(26px) saturate(125%);
}

.sidebar .brand {
  min-height: 78px;
  padding: 0 9px 18px;
  justify-content: flex-start;
  background: url("assets/logo-cimientos.svg") 9px 0 / 184px auto no-repeat;
}

.brand-logo-full {
  display: block;
  width: min(216px, 100%);
  height: auto;
}

.sidebar .nav {
  gap: 0;
  padding: 0 3px 9px;
}

.sidebar .nav-group {
  padding: 7px 0 6px;
  border: 0;
  border-bottom: 1px solid rgba(58,57,55,.09);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.sidebar .nav-group:first-child { padding-top: 0; }
.sidebar .nav-group:last-child { border-bottom: 0; }

.sidebar .nav-label {
  margin: 0 10px 4px;
  color: #626863;
  font-size: 9px;
  font-weight: 780;
}

.sidebar .nav button {
  min-height: 34px;
  padding: 4px 9px;
  gap: 9px;
  border-radius: 12px;
  color: #334039;
  font-size: 12px;
}

.sidebar .nav button:hover { background: rgba(122,171,0,.08); }

.sidebar .nav button.active {
  background: linear-gradient(90deg, rgba(122,171,0,.17), rgba(122,171,0,.08));
  color: #4d7d0e;
  box-shadow: none;
}

.sidebar .nav .ico,
.sidebar .nav button[data-go] .ico {
  width: 26px !important;
  height: 26px !important;
  flex-basis: 26px;
  border-radius: 9px;
  color: #65716a;
}

.sidebar .nav button.active .ico {
  background: linear-gradient(145deg, #83ba12, #65a409);
  color: #fff;
  box-shadow: 0 7px 15px rgba(122,171,0,.22);
}

.sidebar .nav .ico svg { width: 17px; height: 17px; stroke-width: 1.8; }

.sidebar .profile {
  min-height: 56px;
  padding: 8px 10px;
  border-radius: 18px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(58,57,55,.085), 0 9px 24px rgba(28,70,41,.06);
}

.sidebar .profile .avatar,
.sidebar .profile-photo {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  background: rgba(122,171,0,.12);
  color: #5c8d12;
}

.sidebar-toggle {
  position: absolute;
  z-index: 4;
  top: 70px;
  right: -13px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(58,57,55,.10);
  border-radius: 50%;
  background: #fff;
  color: var(--cimientos-dark);
  box-shadow: 0 7px 18px rgba(28,70,41,.12);
  cursor: pointer;
  transition-property: color, background-color, box-shadow, scale;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(.2,0,0,1);
}

.sidebar-toggle:hover { background: #f4f8ee; box-shadow: 0 9px 22px rgba(28,70,41,.16); }
.sidebar-toggle:active { scale: .96; }
.sidebar-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: rotate 220ms cubic-bezier(.2,0,0,1); }
html[data-theme="dark"] .sidebar-toggle { background: #242a25; border-color: rgba(255,255,255,.12); color: #b7dc77; }
html[data-theme="dark"] .sidebar-toggle:hover { background: #303830; }
.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; }

@media (min-width: 981px) {
  .app,
  .sidebar,
  .sidebar .brand,
  .sidebar .nav button,
  .sidebar .profile {
    transition-property: grid-template-columns, padding, width, min-height;
    transition-duration: 220ms;
    transition-timing-function: cubic-bezier(.2,0,0,1);
  }

  .app.sidebar-collapsed { grid-template-columns: 84px minmax(0, 1fr); }
  .app.sidebar-collapsed .sidebar { padding: 18px 10px 13px; }
  .app.sidebar-collapsed .sidebar .brand {
    min-height: 66px;
    padding: 0 0 14px;
    background: url("assets/logo-icon-final.png") center 0 / 48px auto no-repeat;
  }
  .app.sidebar-collapsed .sidebar-toggle { top: 61px; }
  .app.sidebar-collapsed .sidebar-toggle svg { rotate: 180deg; }
  .app.sidebar-collapsed .sidebar .nav { padding-inline: 0; }
  .app.sidebar-collapsed .sidebar .nav-group { padding: 5px 0; }
  .app.sidebar-collapsed .sidebar .nav-label,
  .app.sidebar-collapsed .sidebar .nav button > span,
  .app.sidebar-collapsed .sidebar .profile > span:not(.avatar):not(.profile-photo),
  .app.sidebar-collapsed .sidebar .profile::after { display: none; }
  .app.sidebar-collapsed .sidebar .nav button {
    width: 46px;
    min-height: 38px;
    margin-inline: auto;
    padding: 4px;
    justify-content: center;
  }
  .app.sidebar-collapsed .sidebar .nav .ico,
  .app.sidebar-collapsed .sidebar .nav button[data-go] .ico {
    width: 30px !important;
    height: 30px !important;
    flex-basis: 30px;
  }
  .app.sidebar-collapsed .sidebar .profile {
    width: 52px;
    min-height: 52px;
    margin-inline: auto;
    padding: 8px;
    justify-content: center;
  }
}

@media (max-width: 980px) {
  .sidebar-toggle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .app,
  .sidebar,
  .sidebar-toggle,
  .sidebar-toggle svg,
  .sidebar .brand,
  .sidebar .nav button,
  .sidebar .profile { transition: none !important; }
}

main { padding: 22px 28px 48px; }

.topbar {
  min-height: 68px;
  margin-bottom: 20px;
  padding: 8px 13px;
  border: 1px solid rgba(58,57,55,.06);
  border-radius: 24px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 10px 34px rgba(28,70,41,.045);
  backdrop-filter: blur(22px);
}

.topbar .search { max-width: 760px; }
.topbar .search input { min-height: 48px; border-radius: 18px; background: rgba(58,57,55,.045); }
.topbar .icon-btn { width: 48px; height: 48px; margin-left: 2px; border-radius: 18px; }
.topbar .search + .icon-btn { margin-left: auto; }

#view-inicio { max-width: 1510px; margin: 0 auto; }

.dashboard-head-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(235px, 1fr);
  gap: 18px;
  margin-bottom: 17px;
}

.dashboard-welcome {
  position: relative;
  min-height: 172px;
  overflow: hidden;
  border: 1px solid rgba(28,70,41,.10);
  border-radius: 30px;
  background:
    linear-gradient(90deg, rgba(250,252,248,.97) 0%, rgba(250,252,248,.90) 44%, rgba(236,245,226,.42) 66%, rgba(28,70,41,.20) 100%),
    url("assets/login-office-cimientos-v1.jpg") 66% 58% / cover;
  box-shadow: 0 12px 36px rgba(28,70,41,.045);
}

.dashboard-welcome .pagehead {
  min-height: 172px;
  margin: 0;
  padding: 27px 32px;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(34px, 8vw, 115px);
}

.dashboard-welcome .eyebrow {
  color: #5f9614;
  font-size: 13px;
  letter-spacing: 0;
}

.dashboard-welcome .pagehead h1 {
  margin: 5px 0 2px;
  color: var(--cimientos-dark);
  font-size: clamp(40px, 4.5vw, 59px);
  font-weight: 880;
  line-height: .94;
}

.dashboard-welcome .pagehead p { color: #68716b; font-size: 14px; }

.dashboard-welcome .btn-primary {
  min-width: 185px;
  min-height: 52px;
  border-radius: 20px;
  background: linear-gradient(100deg, #68a917, #7fc019);
  box-shadow: 0 14px 27px rgba(104,169,23,.23);
}

.dashboard-motto {
  min-height: 172px;
  display: flex;
  align-items: center;
  padding: 30px 36px;
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(255,255,255,.84), rgba(227,241,220,.78));
  color: var(--cimientos-dark);
  font-size: clamp(21px, 2.1vw, 30px);
  font-weight: 850;
  line-height: 1.25;
}

#view-inicio .dashboard-status {
  min-height: 112px;
  display: grid;
  grid-template-columns: 70px minmax(0,1fr) auto;
  gap: 20px;
  padding: 18px 24px;
  border: 1px solid rgba(28,70,41,.08);
  border-radius: 27px;
  background: rgba(255,255,255,.91);
  box-shadow: 0 9px 30px rgba(28,70,41,.045);
}

.dashboard-status-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  background: rgba(122,171,0,.11);
  color: #65a409;
}

.dashboard-status-icon svg,
#copySummary svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#view-inicio .dashboard-status h2 { margin-bottom: 4px; font-size: 19px; }
#copySummary { display: inline-flex; align-items: center; gap: 9px; min-width: 175px; justify-content: center; }
#copySummary svg { width: 20px; height: 20px; }

#view-inicio .kpis { gap: 14px; margin-bottom: 17px; }

#view-inicio .kpi {
  min-height: 142px;
  display: grid;
  grid-template-columns: 64px minmax(0,1fr);
  gap: 18px;
  align-items: center;
  padding: 20px;
  border-radius: 27px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 9px 28px rgba(28,70,41,.045);
}

#view-inicio .kpi::before { display: none; }

#view-inicio .kpi > b {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  background: rgba(122,171,0,.11);
  color: #65a409;
}

#view-inicio .kpi:nth-child(2) > b { background: rgba(245,96,0,.11); color: var(--cimientos-orange); }
#view-inicio .kpi:nth-child(4) > b { background: rgba(58,57,55,.08); color: var(--cimientos-charcoal); }

#view-inicio .kpi > b svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#view-inicio .kpi > span { min-width: 0; color: var(--cimientos-charcoal); }
#view-inicio .kpi strong { margin: 0 0 2px; color: #161b18; font-size: 32px; line-height: 1; }
#view-inicio .kpi em { display: block; color: #667069; font-size: 12px; font-style: normal; font-weight: 700; }
#view-inicio .kpi small { display: block; margin-top: 7px; color: #67a315; font-size: 10px; }
#view-inicio .kpi:nth-child(2) small { color: var(--cimientos-orange); }
#view-inicio .kpi:nth-child(4) small { color: #777b78; }

.dashboard-lower {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(320px, .95fr);
  gap: 17px;
}

#view-inicio .dashboard-lower > .panel {
  min-height: 374px;
  padding: 25px;
  border-radius: 28px;
  background: rgba(255,255,255,.91);
  box-shadow: 0 9px 30px rgba(28,70,41,.045);
}

#view-inicio .panel-head h2 { color: #202622; font-size: 18px; }
#view-inicio .panel-head .linkbtn { color: #5f9614; font-size: 12px; }
#view-inicio .panel-head .linkbtn span { margin-left: 7px; font-size: 22px; vertical-align: -2px; }

#view-inicio .dashboard-activity .list { gap: 8px; }
#view-inicio .dashboard-activity .item {
  min-height: 68px;
  padding: 12px 15px;
  border-radius: 18px;
  background: rgba(58,57,55,.035);
}
#view-inicio .dashboard-activity .dot { background: #7fbd16; }

#view-inicio .dashboard-shortcuts { display: flex; flex-direction: column; }
#view-inicio .quick { gap: 10px; }
#view-inicio .quick button {
  min-height: 100px;
  border-radius: 20px;
  background: rgba(255,255,255,.74);
  font-size: 12px;
}

#view-inicio .quick b,
#view-inicio .quick button:nth-child(n) b {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  background: rgba(122,171,0,.10);
  color: #5f9a10;
}

.dashboard-brand-strip {
  position: relative;
  min-height: 112px;
  margin-top: auto;
  padding: 29px 34px;
  overflow: hidden;
  border-radius: 23px;
  background: linear-gradient(125deg, #073d29, #075127 58%, #6cae08 145%);
  color: #fff;
  font-size: 23px;
  font-weight: 850;
  line-height: 1.05;
}

.dashboard-brand-strip::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -70px;
  width: 230px;
  height: 190px;
  border: 30px solid rgba(122,171,0,.38);
  border-radius: 52% 48% 0 0;
  transform: rotate(-24deg);
}

.dashboard-brand-strip span {
  display: block;
  width: 33px;
  height: 3px;
  margin-bottom: 13px;
  border-radius: 99px;
  background: #7fbd16;
}

@media (max-width: 1180px) {
  .dashboard-head-grid { grid-template-columns: 1fr; }
  .dashboard-motto { display: none; }
  .dashboard-welcome .pagehead { gap: 38px; }
  #view-inicio .kpis { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 980px) and (min-width: 701px) {
  .sidebar .brand { min-height: 64px; padding: 0; background: url("assets/logo-icon-final.png") center / 50px no-repeat; }
  .sidebar .brand-logo-full { opacity: 0; width: 50px; }
  .dashboard-lower { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  main { padding: 14px 13px 92px; }
  .topbar { min-height: 58px; margin-bottom: 13px; padding: 6px; border-radius: 20px; }
  .dashboard-head-grid { margin-bottom: 12px; }
  .dashboard-welcome { min-height: 190px; border-radius: 25px; }
  .dashboard-welcome .pagehead { min-height: 190px; padding: 24px; align-items: flex-start; gap: 20px; }
  .dashboard-welcome .pagehead h1 { font-size: 39px; }
  .dashboard-welcome .btn-primary { min-width: 0; min-height: 46px; }
  #view-inicio .dashboard-status { grid-template-columns: 54px minmax(0,1fr); padding: 17px; }
  .dashboard-status-icon { width: 52px; height: 52px; border-radius: 17px; }
  #copySummary { grid-column: 1/-1; width: 100%; }
  #view-inicio .kpis { grid-template-columns: 1fr 1fr; }
  #view-inicio .kpi { min-height: 150px; grid-template-columns: 1fr; gap: 10px; padding: 16px; }
  #view-inicio .kpi > b { width: 48px; height: 48px; border-radius: 15px; }
  #view-inicio .kpi strong { font-size: 28px; }
  .dashboard-lower { grid-template-columns: 1fr; }
  #view-inicio .dashboard-lower > .panel { min-height: auto; padding: 18px; }
  .dashboard-brand-strip { margin-top: 13px; }
}

html[data-theme="dark"] body {
  background: radial-gradient(circle at 88% 12%, rgba(122,171,0,.10), transparent 31rem), var(--bg);
}
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .topbar { background: rgba(25,30,26,.94); border-color: var(--line); }
html[data-theme="dark"] .sidebar .nav-group { border-color: var(--line); }
html[data-theme="dark"] .sidebar .nav button { color: var(--ink); }
html[data-theme="dark"] .sidebar .nav button.active { background: rgba(122,171,0,.15); color: #b6dc73; }
html[data-theme="dark"] .sidebar .profile,
html[data-theme="dark"] .dashboard-motto,
html[data-theme="dark"] #view-inicio .dashboard-status,
html[data-theme="dark"] #view-inicio .kpi,
html[data-theme="dark"] #view-inicio .dashboard-lower > .panel { background: var(--card); border-color: var(--line); }
html[data-theme="dark"] .dashboard-welcome {
  background: linear-gradient(90deg, rgba(26,34,27,.98), rgba(26,34,27,.88) 55%, rgba(28,70,41,.48)), url("assets/login-office-cimientos-v1.jpg") 66% 58% / cover;
}
html[data-theme="dark"] .dashboard-welcome .pagehead h1,
html[data-theme="dark"] .dashboard-motto,
html[data-theme="dark"] #view-inicio .panel-head h2,
html[data-theme="dark"] #view-inicio .kpi strong { color: var(--ink); }
html[data-theme="dark"] #view-inicio .kpi em { color: var(--muted); }
html[data-theme="dark"] #view-inicio .quick button,
html[data-theme="dark"] #view-inicio .dashboard-activity .item { background: var(--fill); border-color: var(--line); color: var(--ink); }

/* Sistema visual unificado -------------------------------------------------
   Esta capa final evita que los módulos históricos vuelvan a definir una
   escala propia. El dashboard conserva su composición editorial; el resto
   del panel comparte exactamente los mismos controles y superficies. */
:root {
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-control-h: 42px;
  --ui-control-sm: 34px;
  --ui-radius-control: 14px;
  --ui-radius-card: 22px;
  --ui-radius-modal: 26px;
  --ui-font-label: 11px;
  --ui-font-body: 13px;
  --ui-font-title: 32px;
  --ui-shadow-card: 0 1px 2px rgba(28,70,41,.025), 0 10px 28px rgba(28,70,41,.04);
}

/* Encabezados y ritmo de página */
.view:not(#view-inicio) { max-width: 1460px; margin-inline: auto; }
.view:not(#view-inicio) > .pagehead {
  min-height: 78px;
  margin: 4px 0 var(--ui-space-5);
  align-items: center;
  gap: var(--ui-space-4);
}
.view:not(#view-inicio) > .pagehead h1 {
  margin: 3px 0;
  font-size: clamp(28px, 2.6vw, var(--ui-font-title));
  line-height: 1.08;
  letter-spacing: -.035em;
}
.view:not(#view-inicio) > .pagehead p { max-width: 680px; font-size: var(--ui-font-body); line-height: 1.45; }
.view:not(#view-inicio) .eyebrow { font-size: 10px; letter-spacing: .08em; }
.pagehead-actions,
.action-row { gap: var(--ui-space-2); }

/* Acciones */
.btn,
.pagehead-actions .btn,
.pagehead > .btn {
  min-height: var(--ui-control-h);
  padding: 0 16px;
  border-radius: var(--ui-radius-control);
  font-size: 12px;
  line-height: 1;
}
.btn-sm { min-height: var(--ui-control-sm); padding-inline: 12px; border-radius: 12px; font-size: 11px; }
.btn:active { transform: scale(.96); }
.btn-primary { background: var(--cimientos-dark); box-shadow: 0 7px 18px rgba(28,70,41,.14); }
.btn-secondary { background: var(--surface-raised); border: 1px solid var(--line-strong); box-shadow: 0 1px 2px rgba(28,70,41,.025); }
.icon-btn { width: var(--ui-control-h); height: var(--ui-control-h); border-radius: var(--ui-radius-control); }

/* Superficies */
.view:not(#view-inicio) .card,
.modal .card {
  border-radius: var(--ui-radius-card);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--ui-shadow-card);
}
.view:not(#view-inicio) .panel { padding: var(--ui-space-5); }
.panel-head { min-height: 34px; margin-bottom: var(--ui-space-4); gap: var(--ui-space-3); }
.panel-head h2,
.panel h2 { font-size: 17px; line-height: 1.25; }
.item,
.op-row { border-radius: var(--ui-radius-control); }
.empty { min-height: 116px; display: grid; place-items: center; padding: var(--ui-space-6); line-height: 1.5; }

/* Campos y formularios */
.field,
.formfield input,
.formfield select,
.op-form input,
.op-form select,
.op-account-head select {
  min-height: var(--ui-control-h);
  border-radius: var(--ui-radius-control);
  padding: 9px 13px;
  font-size: var(--ui-font-body);
}
.formfield textarea,
.op-form textarea,
.settings-panel textarea {
  min-height: 94px;
  border-radius: var(--ui-radius-control) !important;
  padding: 11px 13px !important;
  font-size: var(--ui-font-body);
  resize: vertical;
}
.formfield label,
.op-form label,
.op-contribution-toolbar label,
.op-report-toolbar label {
  gap: 6px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: var(--ui-font-label);
  font-weight: 750;
  line-height: 1.3;
}
.formgrid,
.op-form { gap: var(--ui-space-4); }
.formfield small,
.op-field-help,
.op-help { font-size: 10px; line-height: 1.45; }

/* Filtros y tablas */
.toolbar { min-height: 46px; margin-bottom: var(--ui-space-4); gap: var(--ui-space-2); }
.segmented { padding: 3px; border-radius: var(--ui-radius-control); }
.segmented button { min-height: 34px; padding: 7px 12px; border-radius: 11px; font-size: 11px; }
.tablewrap { border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.table th { height: 42px; padding: 10px 13px; font-size: 9px; letter-spacing: .055em; }
.table td { height: 52px; padding: 11px 13px; font-size: 12px; line-height: 1.4; }
.badge { min-height: 24px; align-items: center; padding: 4px 9px; font-size: 9.5px; }

/* Configuración y módulos operativos */
.settings-layout { grid-template-columns: 190px minmax(0,1fr); gap: var(--ui-space-4); }
.settings-nav { padding: var(--ui-space-2); border-radius: var(--ui-radius-card); }
.settings-nav button { min-height: 40px; padding: 9px 12px; border-radius: 12px; font-size: 12px; }
.settings-panel { min-height: 410px; padding: var(--ui-space-6); border-radius: var(--ui-radius-card); }
.op-kpis,
.op-kpis-four,
.op-report-grid { gap: var(--ui-space-3); }
.op-kpi { min-height: 98px; padding: var(--ui-space-4); }
.op-kpi strong { font-size: 22px; }
.op-report-grid > div,
.op-account-summary > div { border-radius: var(--ui-radius-control); }

/* Diálogos */
.modal { width: min(680px, 100%); padding: var(--ui-space-6); border-radius: var(--ui-radius-modal); }
.modal-head { min-height: 42px; margin-bottom: var(--ui-space-2); }
.modal h2 { font-size: 20px; line-height: 1.2; }
.op-modal { width: min(720px,100%); }
.detail { border-radius: var(--ui-radius-control); padding: var(--ui-space-3); }
.toast { border-radius: var(--ui-radius-control); }

html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .tablewrap { background: var(--card); }

@media (max-width: 980px) {
  :root { --ui-font-title: 30px; }
  main { padding-inline: 20px; }
  .settings-layout { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  :root { --ui-control-h: 44px; --ui-radius-card: 20px; --ui-font-title: 27px; }
  main { padding-inline: 13px; }
  .view:not(#view-inicio) > .pagehead { min-height: auto; align-items: stretch; }
  .view:not(#view-inicio) .panel { padding: var(--ui-space-4); }
  .pagehead-actions,
  .action-row { width: 100%; }
  .pagehead-actions .btn,
  .action-row .btn { flex: 1 1 auto; }
  .modal { padding: var(--ui-space-5); border-radius: 22px; }
}