@import url('/assets/presidente-ux-additions.css?v=1');

:root{
  --bg:#f5f7fb;
  --card:#ffffff;
  --border:#e5e7eb;
  --text:#0f172a;
  --muted:#64748b;

  --primary:#5b5ce2;
  --primary2:#7c3aed;

  --shadow:0 10px 26px rgba(0,0,0,.07);
  --shadowStrong:0 22px 46px rgba(0,0,0,.16);

  --r16:16px;
  --r18:18px;
  --r22:22px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

/* ========== LOGIN ========== */
body.auth{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:18px;
}
.auth-card{
  width:100%;
  max-width:380px;
  background:var(--card);
  border:1px solid rgba(229,231,235,.9);
  border-radius:var(--r18);
  padding:28px 22px;
  box-shadow:var(--shadowStrong);
}
.brandCenter{ text-align:center; margin-bottom:22px; }
.brandCenter h1{ margin:8px 0 2px; font-size:26px; letter-spacing:-.02em; }
.small{ font-size:13px; }

label{
  display:block;
  margin:14px 0 6px;
  font-size:14px;
  font-weight:700;
  color:var(--text);
}
input, select{
  width:100%;
  padding:12px 14px;
  border:1px solid rgba(229,231,235,.95);
  border-radius:14px;
  font-size:15px;
  background:#fff;
}
input:focus, select:focus{
  outline:none;
  border-color:rgba(91,92,226,.55);
  box-shadow:0 0 0 4px rgba(91,92,226,.12);
}
.error{
  margin-top:10px;
  color:#b91c1c;
  font-weight:800;
}

/* ========== HEADER ========== */
.topbar{
  position:sticky;
  top:0;
  z-index:999;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding:10px 14px;
  background:rgba(255,255,255,.90);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(229,231,235,.9);
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.logo{
  width:44px;
  height:44px;
  border-radius:16px;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  box-shadow:0 10px 22px rgba(91,92,226,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:900;
  font-size:20px;
}
.who{
  font-size:14px;
  font-weight:800;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:62vw;
}

/* ========== BOTONES ========== */
.btn{
  border:none;
  border-radius:16px;
  padding:11px 14px;
  font-weight:850;
  cursor:pointer;
  background:#e5e7eb;
  color:var(--text);
}
.btn:active{ transform:scale(.99); }
.btn.ghost{
  background:#fff;
  border:1px solid rgba(229,231,235,.95);
}
.btn.primary{
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#fff;
  box-shadow:0 12px 28px rgba(91,92,226,.18);
}

/* ========== LAYOUT APP ========== */
.container{
  padding:14px 14px 120px;
}
h1{
  margin:8px 0 6px;
  font-size:46px;
  letter-spacing:-.03em;
}
p{ margin:0; }
.muted{ color:var(--muted); }

/* ========== KPI CARDS (más formal + iconos) ========== */
.grid3{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-top:14px;
}

.card{
  background:var(--card);
  border:1px solid rgba(229,231,235,.9);
  border-radius:22px;
  padding:18px 18px;
  box-shadow:var(--shadow);
}

/* Header de KPI (icono + label) */
.kpiHead{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.kpiIcon{
  width:28px;
  height:28px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f3f4f6;
  border:1px solid rgba(229,231,235,.9);
  font-size:15px;
  opacity:.9;
}

.kpiLabel{
  font-size:11px;
  font-weight:900;
  letter-spacing:.10em;
  color:#6b7280;
  text-transform:uppercase;
  margin:0;
}

/* Monto más formal (más pequeño que antes) */
.kpi{
  font-size:28px;        /* antes 34 */
  font-weight:900;       /* formal */
  letter-spacing:-.01em;
  color:var(--text);
}

/* ========== BARRAS ========== */
.bar{
  height:14px;
  background:#e5e7eb;
  border-radius:999px;
  overflow:hidden;
  margin-top:8px;
}
.barFill{
  height:14px;
  border-radius:999px;
}
.barFill.primary{ background:var(--primary); }
.barFill.gray{ background:#cbd5e1; }

/* ========== TABBAR FLOTA ========== */
.tabbar{
  position:fixed;
  left:14px;
  right:14px;
  bottom:14px;
  z-index:9999;

  display:flex;
  gap:10px;
  padding:10px;

  border-radius:22px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);
  border:1px solid rgba(229,231,235,.9);
  box-shadow:var(--shadowStrong);
}
.tabbar .tab{
  flex:1;
  border:none;
  background:transparent;
  border-radius:18px;
  padding:12px 10px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;

  color:#64748b;
  font-weight:850;
  font-size:12px;
}
.tabbar .ico{ font-size:18px; line-height:1; }
.tabbar .tab.active{
  background:linear-gradient(135deg,#eef2ff,#faf5ff);
  color:#3730a3;
  box-shadow:inset 0 0 0 1px rgba(199,210,254,.95);
}

/* Desktop */
@media (min-width: 860px){
  .container{ max-width:900px; margin:0 auto; }
  .grid3{ grid-template-columns:repeat(3,1fr); }
  h1{ font-size:52px; }
}
/* ===== KPI FORMAL + ICONOS ===== */

.kpiHead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.kpiIcon {
  font-size: 18px;
  line-height: 1;
}

.kpiLabel {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7b8190;
  font-weight: 600;
}

.kpi {
  font-size: 22px;        /* ⬅️ antes era muy grande */
  font-weight: 700;
  color: #111827;
}

/* Cards más sobrias */
.card {
  border-radius: 18px;
  padding: 16px;
}

/* Ajuste mobile */
@media (max-width: 420px) {
  .kpi {
    font-size: 20px;
  }
  .kpiIcon {
    font-size: 16px;
  }
}
/* ===== HEADER PRO (compacto) ===== */
.topbar{
  padding: 10px 12px;
}

.brand{
  gap: 10px;
}

.logo{
  width: 42px;
  height: 42px;
  border-radius: 14px;
}

.who{
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}

/* Botón cerrar sesión más discreto */
.btn.ghost{
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 700;
}

/* ===== Ayuda (Apoderado) ===== */
.helpBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  margin-left:8px;
  border-radius:999px;
  border:1px solid rgba(17,24,39,.18);
  background:#fff;
  color:#111827;
  font-weight:950;
  font-size:13px;
  line-height:1;
  cursor:pointer;
  opacity:.9;
}
.helpBtn:active{ transform: scale(.98); }
.helpModalCard{
  max-height: 78vh;
  display:flex;
  flex-direction:column;
  padding-bottom: 12px;
}
.helpHeader{
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.helpBody{
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  padding-top: 12px;
  padding-bottom: 12px;
}
.helpQA{ padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.helpQA:last-child{ border-bottom: none; }
.helpQ{ font-weight: 950; font-size: 18px; color:#0f172a; margin-bottom: 6px; }
.helpA{ color:#475569; font-weight: 800; line-height: 1.45; font-size: 15px; }
.helpFooter{
  position: sticky;
  bottom: 0;
  padding-top: 10px;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.08);
  display:flex;
  justify-content:flex-end;
}
/* === Menú dropdown: fijo y estable en iOS === */
#menuDropdown{
  position: fixed !important;
  right: 16px !important;
  top: 64px !important; /* ajusta fino si quieres 56/68 */
  z-index: 10050 !important;
  max-width: calc(100vw - 32px) !important;
  width: 260px;
  max-height: calc(100vh - 96px) !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* === Menú dropdown: destacar sobre fondo blanco === */
#menuDropdown{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  box-shadow:
    0 10px 25px rgba(0,0,0,0.08),
    0 2px 6px rgba(0,0,0,0.05);
}
#menuDropdown .btn{
  padding: 12px 14px;
  border-radius: 10px;
}

#menuDropdown .btn:active{
  background: rgba(108,92,231,0.08);
}




/* ===== Role accent (fintech) ===== */
:root{ --role-accent:#2563eb; }
html[data-role="apoderado"]{ --role-accent:#2563eb; }
html[data-role="tesorero"]{ --role-accent:#16a34a; }
html[data-role="presidente"]{ --role-accent:#f59e0b; }

.topbar{
  border-bottom:1px solid rgba(229,231,235,.9);
  box-shadow:0 8px 30px rgba(2,6,23,.04);
}
.topbar::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:3px;
  background:var(--role-accent);
}

/* Fintech cards */
.finGrid{ display:grid; gap:12px; }
.finCard{
  background:#fff;
  border:1px solid rgba(226,232,240,.9);
  border-radius:16px;
  box-shadow:0 18px 40px rgba(2,6,23,.06);
  padding:14px;
}
.finCard__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.finCard__title{ font-weight:950; font-size:14px; letter-spacing:.2px; }
.finBadge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  border:1px solid rgba(226,232,240,.9);
  background:rgba(2,6,23,.03);
}
.finBadge--accent{ border-color:rgba(0,0,0,.08); background:color-mix(in srgb, var(--role-accent) 12%, #fff); }
.finField{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.finLabel{ font-size:12px; font-weight:900; color:rgba(15,23,42,.6); }
.finInput{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(226,232,240,.95);
  background:#fff;
  font-weight:800;
}
.finRow{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:520px){ .finRow{ grid-template-columns:1fr; } }

.roleTags{ display:flex; flex-wrap:wrap; gap:8px; }
.roleTag{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius:999px;
  font-weight:950;
  font-size:12px;
  border:1px solid rgba(226,232,240,.95);
  background:#fff;
}
.roleTag--active{ border:2px solid color-mix(in srgb, var(--role-accent) 55%, rgba(15,23,42,.25)); background:color-mix(in srgb, var(--role-accent) 10%, #fff); }

.finBtnRow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.btn.accent{
  background:var(--role-accent);
  color:#fff;
  border-color:transparent;
}
.btn.accent:active{ transform:scale(.99); }


/* === Perfil fintech: key-value list === */
.finKV{ margin-top:10px; }
.finKV__row{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid rgba(226,232,240,.9); }
.finKV__row:first-child{ border-top:0; padding-top:2px; }
.finKV__k{ color:#64748b; font-weight:800; font-size:12px; }
.finKV__v{ color:#0f172a; font-weight:900; font-size:13px; text-align:right; }


/* ===== Perfil premium ===== */
.pfHead{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding-top:8px}
.pfAvatars{display:flex;gap:14px;align-items:flex-start}
.pfAvatarWrap{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:84px}
.pfAvatarBtn{width:68px;height:68px;border-radius:20px;border:1px solid color-mix(in srgb, var(--role-accent) 28%, rgba(226,232,240,.9));background:color-mix(in srgb, var(--role-accent) 14%, #fff);box-shadow:0 6px 18px rgba(15,23,42,.08);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.pfAvatarBtn:active{transform:scale(.99)}
.pfAvatarImg{width:100%;height:100%;object-fit:cover}
.pfAvatarTxt{font-weight:950;font-size:22px}
.pfAvatarLabel{font-size:12px;font-weight:850;color:#64748b}
.pfFile{display:none}
.pfIdentity{flex:1;min-width:220px}
.pfName{font-weight:950;font-size:20px;line-height:1.15}
.pfEmail{margin-top:4px;font-weight:800;color:#64748b}

/* Perfil - fotos premium */
.photoGrid{display:flex;gap:16px;align-items:flex-start}
.photoBtn{background:transparent;border:0;padding:0;cursor:pointer}
.photoWrap{width:92px;text-align:center}
.photoImg{width:72px;height:72px;border-radius:18px;object-fit:cover;border:1px solid rgba(0,0,0,.08);background:#f3f6ff;display:block;margin:0 auto 6px}
.photoImg.hasPhoto{background:#fff}
.photoHint{font-size:12px;opacity:.75}

/* perfil kv list (fallback) */
.kvList{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.kvRow{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid rgba(0,0,0,.06)}
.kvRow:first-child{border-top:0}
.kvKey{opacity:.7;font-weight:700}
.kvVal{font-weight:900}
.label{font-size:12px;opacity:.7;margin-bottom:6px;font-weight:700}
.input{width:100%;padding:12px 14px;border-radius:14px;border:1px solid rgba(0,0,0,.10);background:#fff;font-size:16px}
.btn{padding:10px 14px;border-radius:999px;border:1px solid rgba(0,0,0,.12);background:#fff;font-weight:800}
.btnPrimary{padding:10px 14px;border-radius:999px;border:0;background:#f4b000;color:#222;font-weight:900}
.muted{opacity:.75}


/* ===========================
   Perfil · Premium UI (v26)
   =========================== */
.profileCard{
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 8px 26px rgba(0,0,0,.06);
}
.profileHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:2px 2px 10px 2px;
}
.profileTitle{font-size:18px;font-weight:900;letter-spacing:-0.01em}
.profileSub{opacity:.72;font-size:12px;margin-top:2px}
.profileBadges{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.badgePill{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(45,108,223,.10);
  border:1px solid rgba(45,108,223,.18);
  padding:8px 10px;border-radius:999px;
  font-size:12px;white-space:nowrap
}
.badgeDot{width:8px;height:8px;border-radius:999px;background:#2d6cdf;display:inline-block}

.profileGrid{
  display:grid;
  grid-template-columns: 170px 1fr;
  gap:14px;
}
@media (max-width:520px){
  .profileGrid{grid-template-columns:1fr}
}
.avatarBlock{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.avatarPair{display:flex;gap:14px;flex-wrap:wrap}
.avatarItem{text-align:center}
.avatarWrap{position:relative;display:inline-block}
.avatarCircleXL{
  width:78px;height:78px;border-radius:999px;
  background:#fff;border:1px solid rgba(0,0,0,.08);
  overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.avatarCircleXL img{width:100%;height:100%;object-fit:cover;display:block}
.avatarInitials{font-weight:900;font-size:22px;color:#2d6cdf}
.avatarAction{
  position:absolute;right:-6px;bottom:-6px;
  width:30px;height:30px;border-radius:999px;
  background:#fff;border:1px solid rgba(0,0,0,.12);
  box-shadow:0 8px 22px rgba(0,0,0,.10);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:14px;
}
.avatarLabel{font-size:12px;opacity:.75;margin-top:8px}

.infoBlock{min-width:0}
.nameRow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.nameBig{font-size:18px;font-weight:850;letter-spacing:-0.02em}
.statusPill{font-size:13px;
  display:inline-flex;align-items:center;
  background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.08);
  padding:6px 10px;border-radius:999px;font-size:12px;opacity:.85
}
.emailLine{margin-top:4px;opacity:.85;word-break:break-word;font-size:14px}
.emailLine a{text-decoration:underline}

.formGrid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}
.actionsRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.subtleBtn{background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.06)}

.chip{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.06);
  padding:8px 10px;border-radius:999px;
  font-size:12px;opacity:.9
}

/* Premium callout */
.premiumCard{
  background:linear-gradient(135deg, rgba(255,186,0,.10), rgba(45,108,223,.08));
  border:1px solid rgba(0,0,0,.06);
}
.premiumRow{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.premiumTitle{font-weight:900;font-size:16px}
.premiumText{opacity:.8;margin-top:4px;font-size:12px;max-width:520px}
.premiumBtn{border:1px solid rgba(0,0,0,.12);background:#fff}


/* =========================
   Perfil Premium Header + Icons (v27)
   ========================= */
.topBar{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 14px;
  background:linear-gradient(90deg,var(--primary),var(--primary2));
  color:#fff;
  box-shadow:var(--shadow);
  border-bottom:1px solid rgba(255,255,255,.18);
}
.brandLeft{ display:flex; align-items:center; gap:12px; min-width:0; }
.avatarCircle{
  width:40px; height:40px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.25);
  font-weight:900;
}
.brandText{ min-width:0; }
.brandTitle{
  font-size:18px; font-weight:900; letter-spacing:.2px;
  line-height:1.05;
}
.brandSub{
  margin-top:2px;
  font-size:12px;
  opacity:.85;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:70vw;
}
.iconBtn{
  width:40px; height:40px; border-radius:14px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.12);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:none;
}
.iconBtn:active{ transform:scale(.98); }
.iconBtn .icon{ font-size:18px; line-height:1; }

.dropdown{
  position:absolute;
  top:62px; right:12px;
  width:min(320px, calc(100vw - 24px));
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  box-shadow:var(--shadowStrong);
  overflow:hidden;
  display:none;
}
.dropdown.open{ display:block; }

.cardTitleRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cardTitle{
  display:flex; align-items:center; gap:10px;
}
.secIcon{
  width:26px; height:26px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(91,92,226,.10);
  border:1px solid rgba(91,92,226,.18);
  font-size:14px;
}
.chipIcon{
  display:inline-flex; align-items:center; gap:8px;
}
.chipIcon .dot{
  width:8px; height:8px; border-radius:999px; background:currentColor; opacity:.7;
}

/* Cursapp · Button states */
button:disabled,
.btn:disabled,
.btnx:disabled,
.cpV6PrimaryBtn:disabled,
.cpV6SoftBtn:disabled,
.cpV6MiniBtn:disabled{
  opacity:.58!important;
  pointer-events:none!important;
  filter:grayscale(.08);
}
button.is-loading,
.btn.is-loading,
.btnx.is-loading{
  opacity:.68!important;
  pointer-events:none!important;
}