:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --ink:#101114;
  --muted:#6b7280;
  --line:#e8eaf2;
  --pill:#f3e8ff;
  --accent:#d60000;
  --accent2:#1166cc;
  --shadow: 0 10px 30px rgba(16,17,20,.06);
  --radius:18px;
  --radius2:14px;
  --topbar-h:56px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:var(--bg);
}



.app-shell{
  display:grid;
  grid-template-columns: 280px 1fr 300px;
  gap:18px;
  padding:18px;
  max-width: 1400px;
  margin: 0 auto;
}


/* Layout columns: lock each rail into its grid column (prevents auto-placement quirks). */
.sidebar{grid-column:1;}
.main{grid-column:2;}
.right{grid-column:3;}
/* Overlay should never take a grid slot (it is fixed and toggled). */
.mobile-overlay{grid-column:1 / -1; grid-row:1 / -1; pointer-events:none;}
.mobile-overlay.active{pointer-events:auto;}
.sidebar,.right,.main{
  min-width:0;
}

.sidebar{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  box-shadow: var(--shadow);
  position:sticky;
  top:18px;
  height: calc(100vh - 36px);
  overflow:auto;
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px;
  border-radius:var(--radius2);
  background: linear-gradient(180deg, #fff, #faf7ff);
  border:1px solid var(--line);
}
.brand-logo{
  width:44px;height:44px;
  border-radius:14px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:#8c1876;
  color:#fff;
  font-weight:800;
}
.brand-logo img{width:100%;height:100%;object-fit:cover}
.brand-fallback{display:none}
.brand-logo img[style*="display: none"] + .brand-fallback{display:block}
.brand-title{font-weight:800;letter-spacing:.2px}
.brand-sub{font-size:12px;color:var(--muted)}

.auth-card{
  margin-top:14px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:var(--radius2);
  background: #fff7fb;
}
.auth-title{font-weight:800;font-size:13px;letter-spacing:.6px}
.auth-sub{margin-top:6px;color:var(--muted);font-size:13px}

.nav{margin-top:12px;display:flex;flex-direction:column;gap:8px}

.nav-group{display:flex;flex-direction:column;gap:6px}
.nav-group-title{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#7b7a8a;
  font-weight:900;
  padding:6px 10px 2px;
}

.nav-item{
  text-decoration:none;
  color:#2a2536;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid transparent;
  background: transparent;
  display:flex;
  align-items:center;
  gap:10px;
}

.nav-ico{
  width:34px;height:34px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  display:grid;
  place-items:center;
  box-shadow:0 10px 26px rgba(40, 30, 80, .05);
  color:#5b5a6b;
}
.nav-ico svg{width:18px;height:18px;display:block}
.nav-text{font-weight:600}

.nav-item:hover{
  background:#f7f7fb;
  border-color:var(--line);
}

.nav-item.active{
  background:#ffebef;
  border-color:#ffd0d8;
}
.nav-item.active .nav-ico{
  border-color:#ffd0d8;
  color:#b30000;
  background: #fff;
}
.nav-item.active .nav-text{font-weight:700}

.nav-sep{height:12px}

.sidebar-foot{margin-top:14px;padding:10px;color:var(--muted);font-size:12px}

.main{
  min-height: calc(100vh - 36px);
}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  position:sticky;
  top:18px;
  z-index:10;
}
.topbar-left{display:flex;align-items:center;gap:10px}
.page-title{font-size:20px;font-weight:900}
.pill{
  background:var(--pill);
  border:1px solid #ead8ff;
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
  color:#5b1c7a;
  font-weight:700;
}
.icon-btn{
  border:1px solid var(--line);
  background:#fff;
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
}

.content{
  margin-top:0px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  padding:16px;
  min-height: calc(100vh - 36px - 70px);
}

.right{
  background:transparent;
  position:sticky;
  top:18px;
  height: calc(100vh - 36px);
  overflow:auto;
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
  box-shadow: var(--shadow);
  margin-bottom:14px;
}
.card-title{font-weight:900;margin-bottom:10px}
.muted{color:var(--muted)}

.link{color:var(--accent);font-weight:800;text-decoration:none}
.link:hover{text-decoration:underline}

.impact-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.impact-box{border:1px solid var(--line);border-radius:16px;padding:12px}
.impact-val{font-size:22px;font-weight:900}
.impact-lbl{font-size:12px;color:var(--muted)}

.btn{
  width:100%;
  border:none;
  border-radius:16px;
  padding:12px 14px;
  font-weight:800;
  cursor:pointer;
  margin-top:10px;
}
.btn-primary{background:var(--accent);color:#fff}
.btn-blue{background:var(--accent2);color:#fff}
.btn-ghost{background:#fff;border:1px solid var(--line)}
.btn:disabled{opacity:.6;cursor:not-allowed}

select.select{
  appearance:none;
  border:1px solid var(--line);
  background:#fff;
  border-radius:14px;
  padding:10px 14px;
  font-weight:800;
  color:#2a2540;
  box-shadow: 0 10px 26px rgba(40, 30, 80, .06);
}

.grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
}

/* Horizontal carousel for vote selection (mobile-friendly) */
.carousel-wrap{display:flex;align-items:center;gap:10px;}
.carousel-btn{
  width:40px;height:40px;border-radius:12px;
  border:1px solid var(--line);background:#fff;cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.06);
}
.carousel-btn:active{transform:translateY(1px);}
.carousel-track{
  flex:1;overflow:auto;display:flex;gap:14px;
  padding:6px 2px;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
}
.carousel-track::-webkit-scrollbar{height:8px;}
.carousel-track::-webkit-scrollbar-thumb{background:#eadbf3;border-radius:10px;}
.carousel-item{min-width:220px;scroll-snap-align:center;}

@media (max-width: 980px){
  .grid{grid-template-columns: repeat(2, minmax(0,1fr));}
  .carousel-item{min-width:190px;}
}

.candidate-card{
  border:1px solid var(--line);
  border-radius:22px;
  padding:12px;
  background:#fff;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.candidate-photo{
  width:100%;
  aspect-ratio: 1 / 1;
  border-radius:18px;
  border:1px solid var(--line);
  overflow:hidden;
  background:#f2f4f8;
  display:grid;
  place-items:center;
}
.candidate-photo img{width:100%;height:100%;object-fit:cover}
.candidate-name{font-weight:900;line-height:1.1}
.candidate-meta{font-size:12px;color:var(--muted)}

.actions-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.actions-row .btn{width:auto;flex:1;min-width:140px;margin-top:0}
.vote-grid-three{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}
.candidate-card-grid{
  position:relative;
  padding:10px;
  border-radius:20px;
  gap:8px;
  min-width:0;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.candidate-card-grid:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(214, 0, 0, .08);
}
.candidate-card-grid.is-current-vote{
  border-color:#f2a8b4;
  box-shadow:0 0 0 2px rgba(214, 0, 0, .10);
  background:linear-gradient(180deg, #ffffff 0%, #fff7f8 100%);
}
.candidate-photo-grid{
  border-radius:16px;
}
.candidate-name-grid{
  font-size:15px;
  min-height:2.5em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.btn-vote-card{
  margin-top:auto;
  padding:10px 8px;
  border-radius:14px;
  background:#eb6673;
  color:#fff;
  font-size:13px;
  font-weight:900;
  letter-spacing:.3px;
}
.vote-actions-bottom .btn{
  max-width:220px;
}
@media (max-width: 980px){
  .vote-grid-three{
    gap:10px;
  }
  .candidate-card-grid{
    padding:8px;
    border-radius:18px;
  }
  .candidate-photo-grid{
    border-radius:14px;
  }
  .candidate-name-grid{
    font-size:12px;
    min-height:2.9em;
  }
  .btn-vote-card{
    font-size:11px;
    border-radius:12px;
    padding:9px 6px;
  }
}
@media (max-width: 520px){
  .vote-grid-three{
    gap:8px;
  }
  .candidate-card-grid{
    padding:7px;
    border-radius:16px;
  }
  .candidate-name-grid{
    font-size:11px;
    min-height:3em;
  }
  .btn-vote-card{
    font-size:10px;
    padding:8px 4px;
  }
}

.notice{
  border:1px solid #ffd0d8;
  background:#ffebef;
  border-radius:18px;
  padding:12px;
  margin-bottom:12px;
}

.results-list{display:flex;flex-direction:column;gap:12px}
.result-item{
  display:grid;
  grid-template-columns: 54px 1fr 80px;
  gap:12px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:22px;
  padding:12px;
}
.result-avatar{width:54px;height:54px;border-radius:18px;border:1px solid var(--line);overflow:hidden;background:#f2f4f8}
.result-avatar img{width:100%;height:100%;object-fit:cover}
.result-name{font-weight:900}
.result-sub{font-size:12px;color:var(--muted)}
.bar{
  height:10px;
  background:#eef0f6;
  border-radius:999px;
  overflow:hidden;
  margin-top:6px;
}
.bar > div{height:100%;background:var(--accent)}
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:#fff7d6;
  border:1px solid #ffe08a;
  font-size:12px;
  font-weight:900;
}

.wall-tabs{
  display:flex;
  gap:10px;
  align-items:center;
  overflow:auto;
  padding-bottom:8px;
}
.tab-pill{
  flex:0 0 auto;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
}
.tab-pill.active{border-color:#ffd0d8;background:#ffebef;font-weight:900}
.tab-pill.hot{border-color:#ffe0b2;background:#fffaf2}
.tab-pill.hot .tab-hot{display:inline-flex;align-items:center;justify-content:center;margin-left:2px;font-size:15px;line-height:1}
.tab-pill.active{box-shadow:0 0 0 3px rgba(214,0,0,.10)}
.tab-pill.active .tab-avatar{border-color:#ffb3c1; box-shadow:0 0 0 3px rgba(214,0,0,.10)}
.tab-avatar{width:34px;height:34px;border-radius:999px;border:1px solid var(--line);overflow:hidden;background:#f2f4f8}
.tab-avatar img{width:100%;height:100%;object-fit:cover}
.wall-hero{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 12px;
  padding:14px 16px;
  border:1px solid #ffd0d8;
  border-radius:20px;
  background:linear-gradient(180deg,#fff7f8 0%,#ffffff 100%);
}
.wall-hero.global{
  border-color:#d7dde8;
  background:linear-gradient(180deg,#f8fafc 0%,#ffffff 100%);
}
.wall-hero-avatar{
  width:58px;
  height:58px;
  flex:0 0 58px;
  border-radius:999px;
  overflow:hidden;
  border:2px solid #ffd0d8;
  background:#fff;
}
.wall-hero-avatar img{width:100%;height:100%;object-fit:cover}
.wall-hero-copy{min-width:0}
.wall-hero-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:4px;
  padding:5px 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid #ffe0e6;
  font-size:12px;
  font-weight:900;
  color:#8f2230;
}
.wall-hero-title{
  font-size:18px;
  font-weight:900;
  line-height:1.2;
  color:#171717;
}
.wall-hero-subtitle{
  margin-top:4px;
  color:#667085;
  font-size:13px;
}
.tab-avatar img{width:100%;height:100%;object-fit:cover}

.post-card{
  border:1px solid var(--line);
  border-radius:22px;
  padding:12px;
  margin-top:12px;
  background:#fff;
}
.post-head{display:flex;gap:10px;align-items:center}
.user-avatar{width:42px;height:42px;border-radius:999px;border:1px solid var(--line);overflow:hidden;background:#f2f4f8}
.user-avatar img{width:100%;height:100%;object-fit:cover}
.user-name{font-weight:900}
.time{margin-left:auto;color:var(--muted);font-size:12px}
.post-text{margin-top:10px;white-space:pre-wrap}
.react-row{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.react-btn{
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:8px 10px;
  cursor:pointer;
  display:flex;
  gap:8px;
  align-items:center;
}
.reply-box{margin-top:10px;border-top:1px dashed var(--line);padding-top:10px}
.reply-item{border:1px solid var(--line);border-radius:18px;padding:10px;margin-top:10px;background:#fafbff}
.reply-form{display:flex;gap:10px;margin-top:10px}
.reply-form input{flex:1;border:1px solid var(--line);border-radius:14px;padding:10px}

.composer{display:flex;gap:10px;align-items:flex-end;margin-top:12px}
.composer textarea{flex:1;border:1px solid var(--line);border-radius:18px;padding:12px;min-height:52px;resize:vertical;font-family:inherit;font-size:inherit;line-height:1.35}
.composer .btn{width:160px;margin-top:0}
.composer textarea::placeholder{font-family:inherit;color:var(--muted)}

.modal{position:fixed;inset:0;display:none;z-index:80;overflow:auto;padding:18px}
.modal[aria-hidden="false"]{display:block}
.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal-card{position:relative;max-width:min(920px,100%);margin:6vh auto;background:#fff;border-radius:22px;border:1px solid var(--line);box-shadow:0 25px 60px rgba(16,24,40,.22);overflow:hidden}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(220,38,38,.08),rgba(255,255,255,0))}
.modal-title{font-weight:900}
.modal-body{padding:18px}

/* Form polish inside modals */
.modal label{display:block;font-size:12px;font-weight:800;color:#475569;margin:10px 0 6px}
.modal input[type='text'],.modal input[type='url'],.modal input[type='number'],.modal input[type='file'],.modal select,.modal textarea{width:100%;border-radius:12px;border:1px solid rgba(15,23,42,.12);padding:10px 12px;background:#fff;outline:none}
.modal textarea{min-height:110px;resize:vertical}
.modal input:focus,.modal select:focus,.modal textarea:focus{border-color:rgba(220,38,38,.55);box-shadow:0 0 0 4px rgba(220,38,38,.12)}
.modal .grid2{gap:12px}
.modal .row{gap:12px}
.modal .btn{border-radius:999px;font-weight:900}
.modal .btn.primary{box-shadow:0 10px 24px rgba(220,38,38,.18)}
.modal .btn.ghost{background:#f1f5f9}
.modal .iconBtn{width:34px;height:34px;border-radius:10px}

/* Section header (Mi Partido / lista legislativa) */
.sectionHead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.sectionTitle{min-width:0}
.subtitleLine{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Modal actions: keep margins + responsive */
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
.modal-actions .btn{margin-top:0}

@media (max-width: 520px){
  .sectionHead{align-items:flex-start;flex-direction:column}
  .subtitleLine{white-space:normal}
  .modal-actions{flex-direction:column}
  .modal-actions .btn{width:100%}
  .composer{flex-direction:column;align-items:stretch}
  .composer textarea{width:100%}
  .composer .btn{width:100%}

}
.hint{margin-top:10px;color:var(--muted);font-size:12px}

.toplist{display:flex;flex-direction:column;gap:8px}
.topline{display:flex;align-items:center;gap:10px}
.toprank{width:26px;height:26px;border-radius:10px;background:#f2f4f8;border:1px solid var(--line);display:grid;place-items:center;font-weight:900}

/* Responsive */
#btnMobileMenu{display:none}
#btnMobileMenu

.mobile-overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  display:none;
  z-index:39;
}
.mobile-overlay.active{display:block}
body.no-scroll{overflow:hidden}
.mobile-menu-btn{display:none}

/* Mobile top bar (hidden on desktop; shown on small screens) */
.topbar{
  position:fixed;
  top:0;left:0;right:0;
  height:var(--topbar-h);
  background: var(--accent);
  z-index:60; /* must stay above the drawer */
  display:none;
  border-radius:0 !important;
}
.topbar-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  gap:10px;
}
.topbar-left-spacer{width:54px;flex:0 0 auto;}
.topbar-brand{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:900;letter-spacing:-.2px;}
.topbar-logo{width:26px;height:26px;border-radius:8px;object-fit:cover;background: rgba(255,255,255,.18);}
.topbar-title{font-size:14px;line-height:1;}

/*
  Responsive grid strategy (important):
  - Keep 3 columns as long as possible to avoid the right rail jumping above/into the left sidebar.
  - Only when space is truly tight, stack the right rail *below* the main and spanning full width.
*/

@media (max-width: 1250px){
  .app-shell{grid-template-columns: 260px 1fr 280px; gap:16px; padding:16px}
}

@media (max-width: 980px){
  /* Two columns: left + main. Keep the right rail on the main side (not under/inside the sidebar). */
  .app-shell{grid-template-columns: 260px 1fr; grid-auto-rows:auto;}
  .sidebar{grid-column:1; grid-row:1 / span 2;}
  .main{grid-column:2; grid-row:1;}
  .right{
    display:block;
    grid-column: 2;
    grid-row: 2;
    position:static;
    height:auto;
    overflow:visible;
    top:auto;
    margin-top:18px;
  }
}


@media (max-width: 1024px){

  /* Force a slightly taller topbar on responsive */
  :root{ --topbar-h:64px; }

  /* Mobile top bar + keep hamburger above it */
  .topbar{display:block}
  .sidebar .brand{display:none}
  .main{padding-top:72px}

  /* 
    Responsive requirements:
    - Drawer under the red topbar
    - 100% square corners (NO border-radius anywhere)
    - Slightly wider (290px)
  */

  /* Kill rounding across the responsive shell */
  .app-shell,
  .container,
  body,
  .sidebar{
    border-radius:0 !important;
  }

  /* Overlay must not cover the topbar */
  .mobile-overlay{top:var(--topbar-h); z-index:50;}


  /* Hamburger looks "embedded" (inside the topbar), not floating */
  #btnMobileMenu{
    display:inline-flex;
    position:static;
    z-index:auto;
    width:44px;
    height:44px;
    align-items:center;
    justify-content:center;
    /* keep the desktop rounded feel */
    border-radius:12px;
    box-shadow:none;
    /* white button for strong contrast against the red topbar */
    background: #fff;
    border: 1px solid rgba(255,255,255,.85);
    color: var(--accent);
    cursor:pointer;
  }

  /* make sure the button stays visually aligned */
  .topbar-inner{padding:0 14px;}

  .main{padding-top:64px}
  .app-shell{grid-template-columns: 1fr; padding:12px}

/* Sidebar as left drawer (TikTok-style) */
.sidebar{
  position:fixed;
  top:var(--topbar-h);
  left:0;
  bottom:0;
  right:auto;
  width:290px;
  height:auto;
  max-height: calc(100vh - var(--topbar-h));
  overflow:auto;
  transform: translateX(-115%);
  transition: transform .24s ease;
  z-index:55;
  border-radius:0 !important;
}
.sidebar.open{transform: translateX(0)}

.main{min-height:auto}
.content{min-height: auto}
.grid{grid-template-columns: repeat(2, minmax(0,1fr))}
}

@media (max-width: 480px){
  .grid{grid-template-columns: 1fr}
  .actions-row .btn{min-width: 0}
}


/* Auth card user header */
.auth-user{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.auth-photo{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid #f0e6ff;background:#fff}
.auth-name{font-weight:900;color:#2c2540;line-height:1.1}

/* --- Generic UI atoms used by extra screens (Bancadas / Congreso) --- */
.h1{font-size:22px;font-weight:900;letter-spacing:.2px}

.input{
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  border-radius:14px;
  padding:10px 12px;
  outline:none;
}
.input:focus{border-color:#e7c3cf; box-shadow:0 0 0 3px rgba(214,0,0,.06)}

.list{display:flex;flex-direction:column;gap:12px}
.list-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
}
.list-item:hover{border-color:#ffd0d8; box-shadow:0 8px 22px rgba(214,0,0,.06)}
.grow{flex:1;min-width:0}
.title{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.avatar{
  width:54px;
  height:54px;
  border-radius:18px;
  border:1px solid var(--line);
  overflow:hidden;
  background:#f2f4f8;
  display:grid;
  place-items:center;
  font-size:22px;
}
.avatar img{width:100%;height:100%;object-fit:cover}

.bannerPrev{
  width:240px;
  height:88px;
  border-radius:18px;
  border:1px solid var(--line);
  overflow:hidden;
  background:#f2f4f8;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:12px;
}
.bannerPrev img{width:100%;height:100%;object-fit:cover}

.btn-outline{background:#fff;border:1px solid var(--line);color:var(--ink)}
.btn-outline:hover{border-color:#ffd0d8}

/* --- Bancadas layout polish --- */
.party-header{display:flex;gap:14px;align-items:center}
.party-logo{width:64px;height:64px;border-radius:22px}
.party-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.party-badge-ok{background:#eafff0;border-color:#bdeccd;color:#0b7a3a}

.party-section{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}

.ejes-grid{display:grid;grid-template-columns: repeat(2, minmax(0,1fr));gap:10px}
.eje-item{border:1px solid var(--line);border-radius:18px;padding:10px;background:#fafbff}
.eje-k{font-weight:900;font-size:12px;color:#2a2540}
.eje-v{margin-top:4px;color:#1f2937;font-size:13px;line-height:1.25}

.filters-row{display:flex;gap:10px;flex-wrap:wrap}
.filters-row .input{width:auto;flex:1;min-width:220px}
.filters-row select.input{min-width:180px}
.filters-row .mini{min-width:160px}

.cand-list{display:grid;grid-template-columns: repeat(2, minmax(0,1fr));gap:12px}
.cand-card{border:1px solid var(--line);border-radius:22px;background:#fff;padding:12px;display:flex;gap:12px;align-items:center}
.cand-photo{width:56px;height:56px;border-radius:18px;border:1px solid var(--line);overflow:hidden;background:#f2f4f8;flex:0 0 auto}
.cand-photo img{width:100%;height:100%;object-fit:cover}
.cand-name{font-weight:900;line-height:1.15}
.cand-sub{font-size:12px;color:var(--muted)}

@media (max-width: 980px){
  .ejes-grid{grid-template-columns: 1fr}
  .cand-list{grid-template-columns: 1fr}
}



/* Congreso - buscador de perfiles */
.grid2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px){
  .grid3{ grid-template-columns: 1fr; }
}

@media (max-width: 780px){
  .grid2{ grid-template-columns: 1fr; }
}
.card.hoverable{
  transition: transform .12s ease, box-shadow .12s ease;
}
.card.hoverable:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.08);
}
.card-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
}
.card-col{ flex:1; min-width:0; }
.card-title{
  font-weight:800;
  font-size:15px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.card-sub{
  margin-top:4px;
  color: var(--muted);
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.avatar-lg{
  width:52px;
  height:52px;
  border-radius:14px;
  object-fit:cover;
  border:1px solid rgba(17,24,39,0.08);
  background:#fff;
}
.chev{
  font-size:22px;
  color: rgba(17,24,39,0.35);
  margin-left:6px;
}

.badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid rgba(17,24,39,0.08);
  background:#fff;
  color: rgba(17,24,39,0.75);
  margin-right:6px;
}
.badge-ok{
  background:#F2FDF7;
  border-color: rgba(16,185,129,0.28);
  color:#065F46;
}
.badge-dip{
  background:#E6F7EC;
  border-color: rgba(34,197,94,0.28);
  color:#0F172A;
}
.badge-sen{
  background:#FFF7CC;
  border-color: rgba(234,179,8,0.35);
  color:#0F172A;
}

.profile-hero{
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:14px;
  border:1px solid rgba(17,24,39,0.06);
  border-radius:16px;
  background: linear-gradient(180deg, rgba(140,24,118,0.06), rgba(140,24,118,0.02));
}
.profile-photo{
  width:92px;
  height:92px;
  border-radius:22px;
  object-fit:cover;
  background:#fff;
  border:1px solid rgba(17,24,39,0.08);
}
.profile-meta{ flex:1; min-width:0; }
.profile-name{
  font-weight:900;
  font-size:22px;
  letter-spacing:-0.02em;
}
.profile-sub{
  margin-top:4px;
  color: var(--muted);
}
.backlink{
  color: var(--muted);
  font-weight:700;
  text-decoration:none;
}
.backlink:hover{ text-decoration:underline; }
.h2{
  font-weight:900;
  font-size:16px;
  margin:0;
}
.stack{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.pill{
  padding:10px 12px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(17,24,39,0.06);
  font-size:13px;
  color: rgba(17,24,39,0.85);
}
.stats-grid{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:10px;
}
@media (max-width: 1100px){
  .stats-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 780px){
  .profile-hero{ flex-direction:column; }
  .stats-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.stat{
  padding:12px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(17,24,39,0.06);
}
.stat-k{
  color: var(--muted);
  font-size:12px;
  font-weight:800;
}
.stat-v{
  margin-top:6px;
  font-size:18px;
  font-weight:900;
}

.poll{
  margin-top:10px;
  padding:14px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(17,24,39,0.06);
}
.poll-q{
  font-weight:900;
  margin-bottom:12px;
}
.poll-row{ margin-bottom:10px; }
.poll-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:13px;
}
.poll-label{ font-weight:800; }
.poll-meta{ color: var(--muted); font-weight:800; }
.poll-bar{
  margin-top:6px;
  height:10px;
  border-radius:999px;
  background: rgba(17,24,39,0.06);
  overflow:hidden;
}
.poll-fill{
  height:100%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(140,24,118,0.9), rgba(140,24,118,0.45));
}

/* --- Perfil legislativo (estilo LinkedIn sobrio) --- */
.profile-shell{border:1px solid rgba(17,24,39,0.06); border-radius:18px; overflow:hidden; background:#fff;}
.profile-banner{
  height:140px;
  background: radial-gradient(1200px 240px at 0% 0%, rgba(214,0,0,0.16), transparent 60%),
              radial-gradient(900px 260px at 100% 0%, rgba(140,24,118,0.18), transparent 55%),
              linear-gradient(180deg, rgba(17,24,39,0.03), rgba(17,24,39,0.0));
  border-bottom:1px solid rgba(17,24,39,0.06);
}
.profile-card{
  padding:14px;
}
.profile-top{display:flex; gap:14px; align-items:flex-start; margin-top:0; padding-top:12px;}
.profile-avatar{
  width:96px; height:96px;
  border-radius:22px;
  border:3px solid #fff;
  background:#fff;
  object-fit:cover;
  box-shadow:0 16px 34px rgba(16,17,20,.12);
  margin-top:-46px;
}
.profile-head{flex:1; min-width:0;}
.profile-headline{margin-top:2px; color:var(--muted); font-weight:800;}
.profile-loc{margin-top:6px; color:rgba(17,24,39,0.7); font-weight:800; font-size:13px;}
.profile-badges{margin-top:10px; display:flex; gap:8px; flex-wrap:wrap;}
.profile-actions{margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.btn-inline{width:auto; margin-top:0; padding:11px 14px; border-radius:14px;}
.btn-soft{background:#fff; border:1px solid var(--line); color:#2a2536;}
.btn-soft:hover{background:#f7f7fb;}
.mini-hint{font-size:12px; color:var(--muted); font-weight:800;}

.profile-sections{margin-top:14px; display:grid; grid-template-columns: 1.3fr 0.7fr; gap:12px;}
.section-card{background:#fff; border:1px solid rgba(17,24,39,0.06); border-radius:18px; padding:14px;}
.section-title{font-weight:900; margin-bottom:10px;}
.kv{display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px dashed rgba(17,24,39,0.10);}
.kv:last-child{border-bottom:none; padding-bottom:0;}
.kv .k{color:var(--muted); font-weight:900; font-size:12px;}
.kv .v{font-weight:900;}

.list-bullets{margin:0; padding-left:18px; color:rgba(17,24,39,0.85);}
.list-bullets li{margin:8px 0;}

@media (max-width: 980px){
  .profile-sections{grid-template-columns: 1fr;}
}

/* Cards de búsqueda de perfiles */
.leg-card{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(17,24,39,0.06);
  background:#fff;
}
.leg-card:hover{box-shadow:0 16px 34px rgba(16,17,20,.08)}
.leg-card .leg-photo{width:54px;height:54px;border-radius:16px;border:1px solid rgba(17,24,39,0.08);object-fit:cover;background:#fff;}
.leg-card .leg-main{flex:1; min-width:0;}
.leg-card .leg-name{font-weight:900;}
.leg-card .leg-sub{margin-top:2px;color:var(--muted);font-weight:800;font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.leg-card .leg-chips{margin-top:8px; display:flex; gap:6px; flex-wrap:wrap;}


@media (max-width: 720px){
  .profile-top{flex-direction:column; align-items:flex-start; gap:10px;}
  .profile-avatar{width:88px; height:88px; border-radius:20px; margin-top:-40px;}
  .profile-actions{gap:8px;}
  .profile-name{font-size:22px; line-height:1.15;}
}


/* =========================
   Splash (first open only)
   ========================= */
.splash-overlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
  z-index: 3000;
}
.splash-overlay[aria-hidden="false"]{ display:flex; }

.splash-card{
  position: relative;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.25);
  overflow: hidden;
  max-width: 520px;
  width: min(520px, 92vw);
}

.splash-img{
  display: block;
  width: 100%;
  height: auto;
  max-height: 86vh;
  object-fit: contain;
  background: #fff;
}

.splash-close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.92);
  display: grid;
  place-items: center;
  font-size: 18px;
  cursor: pointer;
  z-index: 1;
}
.splash-close:hover{ background:#fff; }
.splash-close:active{ transform: scale(0.98); }

@media (max-width: 520px){
  .splash-overlay{ padding: 12px; }
  .splash-card{ border-radius: 16px; width: min(520px, 94vw); }
  .splash-close{ top: 8px; right: 8px; }
}


/* Auto-links in comments */
.post-text a.auto-link{
  color: #1a73e8;
  text-decoration: underline;
  word-break: break-word;
}
.post-text a.auto-link:hover{
  filter: brightness(0.9);
}


/* --- Bancada public detail (match Flutter layout) --- */
.bancada-hero{display:flex; gap:18px; align-items:stretch}
.bancada-logo{width:260px; min-width:220px; border-radius:22px; background:#f7f8fb; border:1px solid rgba(20,25,35,.08); overflow:hidden; display:flex; align-items:center; justify-content:center}
.bancada-logo img{width:100%; height:100%; object-fit:contain; padding:10px}
.bancada-logo-ph{font-size:72px; font-weight:1000; color:#9aa3b2}
.bancada-info{flex:1; min-width:0}
.bancada-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.bancada-download .btn{width:100%; justify-content:center}

.ejes-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
.eje-item{border:1px solid rgba(20,25,35,.08); background:#fbfcff; border-radius:14px; padding:10px}
.eje-k{font-weight:900; font-size:13px}
.eje-v{font-size:13px; color:#4b5565; margin-top:4px; line-height:1.25}

.pres-card{display:flex; gap:14px; align-items:flex-start}
/* Foto presidencial: cuadrada, fija (no se estira al expandir texto) */
.pres-photo{width:240px; height:240px; min-width:220px; border-radius:18px; background:#f7f8fb; border:1px solid rgba(20,25,35,.08); overflow:hidden; display:flex; align-items:center; justify-content:center; flex:0 0 240px}
.pres-photo img{width:100%; height:100%; object-fit:cover}
.pres-ph{font-size:42px; opacity:.6}

.vp-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px}
.vp-card{border:1px solid rgba(20,25,35,.08); border-radius:18px; padding:12px; background:#fff}
.vp-photo{height:120px; border-radius:14px; background:#f7f8fb; border:1px solid rgba(20,25,35,.08); overflow:hidden; display:flex; align-items:center; justify-content:center}
.vp-photo img{width:100%; height:100%; object-fit:cover}
.vp-ph{font-size:36px; opacity:.6}
.vp-name{font-weight:900; margin-top:10px}
.vp-sub{color:#6b7280; font-size:13px; margin-top:4px}

@media (max-width: 900px){
  .bancada-hero{flex-direction:column}
  .bancada-logo{width:100%; height:220px}
  .ejes-grid{grid-template-columns:1fr}
  .pres-card{flex-direction:column}
  /* En móvil ocupa el ancho, pero mantiene proporción cuadrada */
  .pres-photo{width:100%; height:auto; aspect-ratio:1 / 1; flex:0 0 auto; max-height:320px}
  .vp-grid{grid-template-columns:1fr}
}