/* =========================================================
   Politrack Tenant UI v2 — Liquid Glass (iOS)
   Light/Dark + Sidebar solid (iOS Settings vibe)
   - Sidebar sin hover (solo collapsed/pinned)
   - Fondo fijo + iPad sin overflow horizontal
   - Botones premium squircle
   ========================================================= */

:root{
  /* Brand */
  --pt-accent: #fb275d;
  --pt-accent-2: #ba1d45;
  /* Aliases (compat) */
--pt-primary: var(--pt-accent);
--pt-primary-2: var(--pt-accent-2);


  /* Layout */
  --pt-radius: 18px;
  --pt-radius-lg: 26px;
  --pt-gap: 18px;

  --pt-sidebar-w: 270px;
  --pt-sidebar-collapsed: 86px;
  --pt-topbar-h: 64px;

  /* Motion */
  --pt-ease: cubic-bezier(.2,.8,.2,1);

  /* Light tokens */
  --pt-bg: #f4f6fb;
  --pt-bg-2: #eef2ff;

  --pt-surface-solid: rgba(255,255,255,.92);
  --pt-surface: rgba(255,255,255,.72);
  --pt-surface-2: rgba(255,255,255,.58);

  --pt-border: rgba(15,23,42,.10);
  --pt-border-2: rgba(15,23,42,.07);

  --pt-text: #0b1220;
  --pt-muted: rgba(15,23,42,.58);

  --pt-shadow: 0 14px 40px rgba(15,23,42,.08);
  --pt-shadow-2: 0 10px 26px rgba(15,23,42,.10);

  --pt-blur: blur(18px) saturate(165%);

  /* Chart helpers */
  --pt-chart-grid: rgba(15,23,42,.10);
  --pt-chart-fill: rgba(251, 39, 93, 0.10);

  /* Focus */
  --pt-focus: 0 0 0 4px rgba(251,39,93,.18);

  /* Typography */
  --pt-font: ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "SF Pro Display", Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* Dark tokens */
html.pt-theme-dark,
body.pt-theme-dark{
  --pt-bg: #05070c;
  --pt-bg-2: #070a12;

  --pt-surface-solid: rgba(17,24,39,.92);
  --pt-surface: rgba(17,24,39,.72);
  --pt-surface-2: rgba(17,24,39,.56);

  --pt-border: rgba(148,163,184,.18);
  --pt-border-2: rgba(148,163,184,.12);

  --pt-text: #e5e7eb;
  --pt-muted: rgba(226,232,240,.62);

  --pt-shadow: 0 18px 50px rgba(0,0,0,.45);
  --pt-shadow-2: 0 10px 26px rgba(0,0,0,.42);

  --pt-chart-grid: rgba(226,232,240,.16);
  --pt-chart-fill: rgba(251,39,93, 0.12);
}

*{ box-sizing: border-box; }
a{ color: var(--pt-accent); text-decoration: none; }
a:hover{ text-decoration: underline; }
img{ max-width: 100%; height: auto; display: block; }
button, input, select, textarea{ font: inherit; color: inherit; }

html, body{ height: 100%; width: 100%; max-width: 100%; }
html{ color-scheme: light dark; }

/* =========================================================
   Fondo fijo (Liquid) — no se mueve con el scroll
   ========================================================= */
body{
  margin: 0;
  font-family: var(--pt-font);
  color: var(--pt-text);
  background: transparent !important;
  overflow-x: hidden;
  overscroll-behavior: none;
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
}

/* Fondo iOS/liquid con azul + rosa */
body.pt-app{
  background:
    radial-gradient(1200px 900px at 22% -10%, rgba(59,130,246,.20), transparent 55%),
    radial-gradient(900px 650px at 88% 0%, rgba(251,39,93,.14), transparent 60%),
    radial-gradient(1100px 800px at 55% 110%, rgba(147,197,253,.22), transparent 55%),
    linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
}


body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(1200px 900px at 25% -10%, rgba(251,39,93,.14), transparent 55%),
    radial-gradient(1100px 900px at 85% 0%, rgba(186,29,69,.10), transparent 55%),
    linear-gradient(180deg, var(--pt-bg), var(--pt-bg-2));
  transform: translateZ(0);
}


html.pt-theme-dark body::before,
body.pt-theme-dark::before{
  background:
    radial-gradient(1200px 900px at 25% -10%, rgba(251,39,93,.12), transparent 55%),
    radial-gradient(1100px 900px at 85% 0%, rgba(186,29,69,.10), transparent 55%),
    linear-gradient(180deg, var(--pt-bg), var(--pt-bg-2));
}

body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .03;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 30%, rgba(0,0,0,.7) 0 1px, transparent 2px);
  background-size: 240px 240px;
  mix-blend-mode: overlay;
}

/* =========================================================
   Layout (flex) — NO grid
   ========================================================= */
.layout.pt-layout{
  min-height: 100vh;
  display: flex;
  gap: var(--pt-gap);
  padding: 14px;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.main.pt-main{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  overflow-x: clip;
}

.content{
  padding: 14px 10px 28px;
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  min-width: 0;
}

/* =========================================================
   Premium squircle buttons (iOS-like)
   ========================================================= */
.pt-sqbtn,
.topbar-burger,
.pt-icon-btn,
.sidebar-icon{
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--pt-border);
  background: rgba(255,255,255,.34);
  backdrop-filter: var(--pt-blur);
  -webkit-backdrop-filter: var(--pt-blur);
  transition: transform .16s var(--pt-ease), box-shadow .16s var(--pt-ease), background .16s var(--pt-ease), border-color .16s var(--pt-ease);
  box-shadow:
    0 10px 22px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.55);
}

html.pt-theme-dark .pt-sqbtn,
body.pt-theme-dark .pt-sqbtn,
html.pt-theme-dark .topbar-burger,
body.pt-theme-dark .topbar-burger,
html.pt-theme-dark .pt-icon-btn,
body.pt-theme-dark .pt-icon-btn,
html.pt-theme-dark .sidebar-icon,
body.pt-theme-dark .sidebar-icon{
  background: rgba(17,24,39,.34);
  box-shadow:
    0 14px 28px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.pt-sqbtn::before,
.topbar-burger::before,
.pt-icon-btn::before,
.sidebar-icon::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events:none;
  opacity: .75;
  background:
    radial-gradient(140px 80px at 30% 10%, rgba(255,255,255,.55), transparent 55%),
    radial-gradient(120px 90px at 85% 20%, rgba(255,255,255,.22), transparent 60%);
  mix-blend-mode: overlay;
}

html.pt-theme-dark .pt-sqbtn::before,
html.pt-theme-dark .topbar-burger::before,
html.pt-theme-dark .pt-icon-btn::before,
html.pt-theme-dark .sidebar-icon::before,
body.pt-theme-dark .pt-sqbtn::before,
body.pt-theme-dark .topbar-burger::before,
body.pt-theme-dark .pt-icon-btn::before,
body.pt-theme-dark .sidebar-icon::before{
  opacity: .18;
}

.pt-sqbtn:hover,
.topbar-burger:hover,
.pt-icon-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(251,39,93,.22);
  box-shadow:
    0 16px 34px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.65);
}

.pt-sqbtn:active,
.topbar-burger:active,
.pt-icon-btn:active{
  transform: translateY(0);
  box-shadow:
    0 10px 18px rgba(15,23,42,.08),
    inset 0 2px 8px rgba(0,0,0,.08);
}

/* =========================================================
   Sidebar — iOS Settings solid
   ========================================================= */
.sidebar.pt-sidebar{
  width: var(--pt-sidebar-collapsed);
  flex: 0 0 auto;
  border-radius: var(--pt-radius-lg);
  background: var(--pt-surface-solid);
  border: 1px solid var(--pt-border);
  box-shadow: var(--pt-shadow);
  backdrop-filter: var(--pt-blur);
  -webkit-backdrop-filter: var(--pt-blur);
  overflow: hidden;
  position: sticky;
  top: 14px;
  height: calc(100vh - 28px);
}

body.pt-sidebar-pinned .sidebar.pt-sidebar{
  width: var(--pt-sidebar-w);
}

.sidebar-inner.pt-sidebar__inner{
  height: 100%;
  display: flex;
  flex-direction: column;
}

.sidebar-header.pt-sidebar__header{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--pt-border-2);
}

.sidebar-logo-link.pt-sidebar__logo{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.sidebar-logo{ height: 40px; margin-left:50px; }
.sidebar-logo--mini{ display:none; }

.pt-sidebar-scroll{
  padding: 10px 10px 12px;
  overflow: auto;
  flex: 1;
}

.sidebar-user-link.pt-sidebar__user{
  padding: 12px 12px 8px;
  border-bottom: 1px solid var(--pt-border-2);
}

.sidebar-user{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.45);
  border: 1px solid var(--pt-border-2);
}
html.pt-theme-dark .sidebar-user,
body.pt-theme-dark .sidebar-user{
  background: rgba(17,24,39,.45);
}

.sidebar-avatar{
  width: 38px; height: 38px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  color: #fff;
  background: linear-gradient(135deg, var(--pt-accent), var(--pt-accent-2));
  box-shadow: 0 12px 18px rgba(251,39,93,.22);
}
.avatar-initial{ font-weight: 900; }

.sidebar-user-info{ min-width: 0; }
.sidebar-user-name{ font-weight: 900; font-size: 13px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.sidebar-user-role{ font-size: 12px; color: var(--pt-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }

.sidebar-section-title{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pt-muted);
  padding: 10px 10px 6px;
}

.sidebar-menu{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 6px 10px;
}

.sidebar-menu a{
  position: relative;
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 5px 12px;
  border-radius: 10px;
  color: var(--pt-text);
  border: 1px solid transparent;
  transition: background .16s var(--pt-ease), transform .16s var(--pt-ease), border-color .16s var(--pt-ease);
}

.sidebar-menu a:hover{
  background: rgba(251,39,93,.08);
  border-color: rgba(251,39,93,.16);
  transform: translateY(-1px);
  text-decoration: none;
}

.sidebar-menu a.active{
  background: rgba(251,39,93,.14);
  border-color: rgba(251,39,93,.22);
  box-shadow: 0 12px 18px rgba(251,39,93,.10);
}

.sidebar-icon{
  width: 42px; height: 42px;
  display:grid;
  place-items:center;
  border-radius: 16px;
}

.sidebar-text{
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Colapsado real (desktop): ocultar textos y secciones */
body.pt-sidebar-collapsed:not(.pt-sidebar-pinned) .sidebar-text,
body.pt-sidebar-collapsed:not(.pt-sidebar-pinned) .sidebar-section-title,
body.pt-sidebar-collapsed:not(.pt-sidebar-pinned) .sidebar-user-info,
body.pt-sidebar-collapsed:not(.pt-sidebar-pinned) .sidebar-footer{
  display: none;
}

/* En colapsado: centrar el bloque usuario */
body.pt-sidebar-collapsed:not(.pt-sidebar-pinned) .sidebar-user{
  justify-content: center;
  padding: 10px;
}

/* Logo mini en colapsado */
body.pt-sidebar-collapsed:not(.pt-sidebar-pinned) .sidebar-logo--full{ display:none; }
body.pt-sidebar-collapsed:not(.pt-sidebar-pinned) .sidebar-logo--mini{ display:block; height: 39px; margin-left: 10px; }

/* Footer */
.sidebar-footer{
  padding: 12px 14px;
  border-top: 1px solid var(--pt-border-2);
  font-size: 12px;
  color: var(--pt-muted);
}

/* Tooltips (cuando colapsado) */
.pt-tip{
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--pt-surface-solid);
  border: 1px solid var(--pt-border);
  box-shadow: var(--pt-shadow-2);
  white-space: nowrap;
  font-size: 12px;
  color: var(--pt-text);
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s var(--pt-ease), transform .14s var(--pt-ease);
}
body.pt-sidebar-collapsed:not(.pt-sidebar-pinned) .sidebar-menu a:hover .pt-tip{
  opacity: 1;
  transform: translateY(-50%) translateX(2px);
}

/* =========================================================
   Mobile sidebar (drawer)
   ========================================================= */
.pt-sidebar-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s var(--pt-ease);
  z-index: 70;
}
body.pt-sidebar-open .pt-sidebar-overlay{
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 980px){
  .layout.pt-layout{ padding: 10px; gap: 10px; }

  .sidebar.pt-sidebar{
    position: fixed;
    top: 10px;
    left: 10px;
    height: calc(100vh - 20px);
    width: min(var(--pt-sidebar-w), calc(100vw - 20px));
    transform: translateX(calc(-100% - 16px));
    transition: transform .22s var(--pt-ease);
    z-index: 80;
  }
  body.pt-sidebar-open .sidebar.pt-sidebar{ transform: translateX(0); }

  /* Drawer SIEMPRE full (aunque el estado guardado sea colapsado) */
  .sidebar-text,
  .sidebar-section-title,
  .sidebar-user-info,
  .sidebar-footer{ display: block !important; }

  .sidebar-logo--full{ display:block !important; }
  .sidebar-logo--mini{ display:none !important; }
}

/* =========================================================
   Topbar — clean glass + icon swap burger
   ========================================================= */
.topbar{
  height: var(--pt-topbar-h);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  margin: 0 10px;
  border-radius: var(--pt-radius-lg);
  background: var(--pt-surface);
  border: 1px solid var(--pt-border);
  box-shadow: var(--pt-shadow);
  backdrop-filter: var(--pt-blur);
  -webkit-backdrop-filter: var(--pt-blur);
  position: sticky;
  top: 14px;
  z-index: 50;
  max-width: 100%;
}

.topbar-left{ display:flex; align-items:center; gap: 12px; min-width: 0; }
.topbar-heading{ min-width: 0; }
.topbar-title{ font-weight: 950; font-size: 15px; letter-spacing: .01em; }
.topbar-subtitle{
  font-size: 12px;
  color: var(--pt-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 56vw;
}

.topbar-right{ display:flex; align-items:center; gap: 10px; min-width: 0; }

.topbar-burger{
  width: 46px; height: 46px;
  display:grid;
  place-items:center;
  cursor:pointer;
}

/* Iconos dentro del burger: por estado (data-pt-state del JS) */
.topbar-burger .pt-burger-ico{ display:none; }
.topbar-burger[data-pt-state="pinned"]  .pt-burger-ico--menu{ display:block; }
.topbar-burger[data-pt-state="collapsed"] .pt-burger-ico--arrow{ display:block; }
.topbar-burger[data-pt-state="open"] .pt-burger-ico--menu{ display:block; }
.topbar-burger[data-pt-state="closed"] .pt-burger-ico--menu{ display:block; }

@media (max-width: 980px){
  .topbar-burger .pt-burger-ico--arrow{ display:none !important; }
  .topbar-burger .pt-burger-ico--menu{ display:block !important; }
}

.topbar-search{
  position: relative;
  display:flex;
  align-items:center;
  max-width: 100%;
}
.topbar-search input{
  width: min(360px, 34vw);
  padding: 10px 40px 10px 14px;
  border-radius: 18px;
  border: 1px solid var(--pt-border);
  background: rgba(255,255,255,.45);
  outline: none;
  transition: box-shadow .16s var(--pt-ease), border-color .16s var(--pt-ease), background .16s var(--pt-ease);
  max-width: 100%;
}
.topbar-search input:focus{
  box-shadow: var(--pt-focus);
  border-color: rgba(251,39,93,.35);
}
html.pt-theme-dark .topbar-search input,
body.pt-theme-dark .topbar-search input{
  background: rgba(17,24,39,.45);
}

.topbar-search-icon{
  position:absolute;
  right: 12px;
  display:grid;
  place-items:center;
  color: var(--pt-muted);
}

.pt-icon-btn{
  width: 46px; height: 46px;
  display:grid;
  place-items:center;
  cursor:pointer;
}

.pt-theme-ico--sun{ display:none; }
html.pt-theme-dark .pt-theme-ico--moon,
body.pt-theme-dark .pt-theme-ico--moon{ display:none; }
html.pt-theme-dark .pt-theme-ico--sun,
body.pt-theme-dark .pt-theme-ico--sun{ display:inline-block; }

.topbar-campaign-pill{
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(251,39,93,.12);
  border: 1px solid rgba(251,39,93,.18);
  color: var(--pt-text);
  font-weight: 900;
  font-size: 12px;
  max-width: 220px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.topbar-logout{
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--pt-border);
  background: rgba(255,255,255,.28);
  color: var(--pt-text);
  font-weight: 900;
  font-size: 12px;
}
.topbar-logout:hover{ text-decoration:none; border-color: rgba(251,39,93,.25); }

@media (max-width: 720px){
  .topbar{ margin: 0 6px; }
  .topbar-search{ display:none; }
  .topbar-subtitle{ display:none; }
  .topbar-campaign-pill{ display:none; }
}

/* =========================================================
   Cards / grids (dashboard)
   ========================================================= */
.metric-row{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pt-gap);
  margin-top: 14px;
}

.metric-card,
.chart-card,
.section-card{
  border-radius: var(--pt-radius-lg);
  background: var(--pt-surface);
  border: 1px solid var(--pt-border);
  box-shadow: var(--pt-shadow);
  backdrop-filter: var(--pt-blur);
  -webkit-backdrop-filter: var(--pt-blur);
  overflow: hidden; /* evita overflow fantasma iPad */
}

.metric-card{ padding: 14px 14px 12px; position: relative; }
.metric-card::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  border-radius: inherit;
  background:
    radial-gradient(700px 240px at 20% 0%, rgba(255,255,255,.55), transparent 55%),
    radial-gradient(540px 220px at 100% 30%, rgba(255,255,255,.28), transparent 60%);
  opacity:.55;
  mix-blend-mode: overlay;
}
html.pt-theme-dark .metric-card::before,
body.pt-theme-dark .metric-card::before{ opacity: .18; }

.metric-card-header{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 10px;
  position: relative;
}
.metric-label{ font-size: 12px; color: var(--pt-muted); font-weight: 900; }
.metric-tag{
  font-size: 11px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--pt-border-2);
}
html.pt-theme-dark .metric-tag,
body.pt-theme-dark .metric-tag{ background: rgba(17,24,39,.55); }
.metric-tag-soft{ background: rgba(251,39,93,.12); border-color: rgba(251,39,93,.18); }
.metric-tag-outline{ background: transparent; border-color: rgba(251,39,93,.22); }

.metric-card-body{ position: relative; margin-top: 10px; }
.metric-value{ font-weight: 950; font-size: 28px; letter-spacing: -0.02em; }
.metric-helper{ margin: 8px 0 0; font-size: 12px; color: var(--pt-muted); }

.chart-row{
  display:grid;
  grid-template-columns: 1.55fr 1fr;
  gap: var(--pt-gap);
  margin-top: var(--pt-gap);
}

.chart-card{ padding: 14px; }
.chart-card-header{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.chart-card-header h2{ margin: 0; font-size: 14px; font-weight: 950; }
.chart-card-subtitle{ margin: 6px 0 0; font-size: 12px; color: var(--pt-muted); }
.chart-card-badge{
  font-size: 11px;
  font-weight: 900;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(251,39,93,.12);
  border: 1px solid rgba(251,39,93,.18);
}

.chart-wrapper{ height: 260px; max-width: 100%; overflow: hidden; }
.chart-wrapper canvas{ display:block; width: 100% !important; max-width: 100% !important; }

.progress-circles{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.progress-circle{
  --percent: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  background:
    conic-gradient(var(--pt-accent) calc(var(--percent) * 1%), rgba(15,23,42,.08) 0);
  display:grid;
  place-items:center;
}
html.pt-theme-dark .progress-circle,
body.pt-theme-dark .progress-circle{
  background:
    conic-gradient(var(--pt-accent) calc(var(--percent) * 1%), rgba(226,232,240,.14) 0);
}
.progress-circle-inner{
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  border-radius: 999px;
  background: var(--pt-surface-solid);
  border: 1px solid var(--pt-border);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap: 2px;
  text-align:center;
}
.progress-circle-value{ font-weight: 950; font-size: 18px; }
.progress-circle-label{ font-size: 11px; color: var(--pt-muted); font-weight: 900; }

.section-grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--pt-gap);
  margin-top: var(--pt-gap);
}

.section-card{ padding: 14px; }
.section-card-header h2{ margin: 0; font-size: 14px; font-weight: 950; }
.section-card-header p{ margin: 6px 0 0; font-size: 12px; color: var(--pt-muted); }

.table-wrapper{
  margin-top: 12px;
  border-radius: 18px;
  border: 1px solid var(--pt-border-2);
  overflow: hidden;
  background: rgba(255,255,255,.35);
}
html.pt-theme-dark .table-wrapper,
body.pt-theme-dark .table-wrapper{ background: rgba(17,24,39,.35); }

.pt-table{
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.pt-table th, .pt-table td{
  padding: 12px 12px;
  font-size: 12px;
  border-bottom: 1px solid var(--pt-border-2);
  vertical-align: top;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.pt-table th{
  text-align:left;
  font-weight: 950;
  color: var(--pt-muted);
  background: rgba(255,255,255,.35);
}
html.pt-theme-dark .pt-table th,
body.pt-theme-dark .pt-table th{ background: rgba(17,24,39,.35); }
.pt-table tr:hover td{ background: rgba(251,39,93,.06); }

.text-muted{ color: var(--pt-muted); font-size: 12px; }

.tag-role, .tag-promoter{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 11px;
  border: 1px solid var(--pt-border-2);
  background: rgba(255,255,255,.45);
}
html.pt-theme-dark .tag-role,
html.pt-theme-dark .tag-promoter,
body.pt-theme-dark .tag-role,
body.pt-theme-dark .tag-promoter{
  background: rgba(17,24,39,.45);
}
.tag-promoter{ border-color: rgba(251,39,93,.20); background: rgba(251,39,93,.10); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1200px){
  .metric-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-row{ grid-template-columns: 1fr; }
  .section-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 540px){
  .metric-row{ grid-template-columns: 1fr; }
  .content{ padding: 12px 6px 26px; }
  .chart-wrapper{ height: 240px; }
}

/* iPad/iOS: inputs legibles (evita zoom raro) */
@media (max-width: 1024px){
  .topbar-search input{ font-size: 16px; }
}
/* =========================================================
   PATCH — Kill Horizontal Scroll (iPad / Safari / Desktop)
   Pegar al FINAL del tenant-v2.css
   ========================================================= */

/* 1) Corta overflow-x global (sin afectar scroll vertical) */
html, body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
  overscroll-behavior-x: none;
}

/* 2) Asegura que el layout y el main nunca excedan el viewport */
.layout,
.layout.pt-layout,
.main,
.main.pt-main,
.content,
.topbar{
  max-width: 100%;
  min-width: 0;
}

/* 3) Flex/grid children: permitir shrink real (muy común que aquí nazca el overflow) */
.layout > *{
  min-width: 0;
}

/* 4) Canvas/Charts: nunca deben empujar el layout */
.chart-wrapper,
.chart-wrapper canvas,
canvas{
  max-width: 100% !important;
  display: block;
}

/* 5) Tablas: evita que una columna larga “empuje” horizontal */
.table-wrapper{ overflow: hidden; }
.pt-table{
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
}
.pt-table th,
.pt-table td{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 6) Elementos típicos que se salen (svg/img) */
img, svg{
  max-width: 100%;
}

/* 7) iOS Safari: refuerzos para evitar “rubber band” lateral */
@supports (-webkit-touch-callout: none){
  body{
    overflow-x: hidden !important;
  }
}

/* =========================================================
   PATCH — Tooltip hover no debe crear scroll horizontal
   (especialmente iPad/Safari)
   ========================================================= */

/* El scroll interno del sidebar NO debe permitir X */
.pt-sidebar-scroll{
  overflow-x: hidden !important;
  overscroll-behavior-x: none;
}

/* El tooltip en colapsado provoca overflow -> lo apagamos */
body.pt-sidebar-collapsed .pt-tip{
  display: none !important;
}

/* Si el sidebar está expandido, el tooltip sí puede existir,
   pero lo acotamos para que no empuje nada raro */
.pt-tip{
  max-width: min(260px, calc(100vw - 140px));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Reforzamos que ningún hover/tooltip cree ancho en el layout */
.layout.pt-layout,
.main.pt-main,
.content,
.topbar{
  overflow-x: clip;
}

/* =========================================================
   PATCH — Iconos del sidebar: más cuadrados (premium)
   ========================================================= */

/* Base: el “tile” del icono */
.sidebar-icon{
  width: 38px;               /* un pelín más grande = más premium */
  height: 38px;
  border-radius: 12px !important;   /* antes 14px -> se veía ovalado */
}

/* Si tus SVG se ven chicos, centramos mejor */
.sidebar-icon svg{
  width: 20px;
  height: 20px;
}

/* El item completo: el hover/active no debe verse como cápsula */
.sidebar-menu a{
  border-radius: 14px !important;   /* antes 16px */
}

/* Estado activo: mantiene marco pero más “tile” */
.sidebar-menu a.active{
  border-radius: 14px !important;
}

/* Colapsado: el icono luce mejor con un tile más “tight” */
body.pt-sidebar-collapsed .sidebar-icon{
  border-radius: 12px !important;
}

/* (Opcional) Avatar también más “tile iOS” */
.sidebar-avatar{
  border-radius: 12px !important;
}
/* =========================================================
   PATCH — Sidebar icon buttons “squared” + sin tooltip bubble
   - Evita óvalos (el <a> se vuelve square en colapsado)
   - Asegura que el icon wrapper no se estire
   - Oculta el tooltip .pt-tip que causaba scroll horizontal
   ========================================================= */

/* 1) El tooltip custom es el culpable del overflow horizontal */
.pt-tip{ display:none !important; }

/* 2) Asegura que los items ocupen el ancho completo cuando está expandido */
.sidebar .sidebar-menu a{
  width: 100%;
}

/* 3) Icon wrapper: cuadrado, premium */
.sidebar .sidebar-icon{
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  border-radius: 14px !important; /* esquinas suaves, no píldora */
  overflow: hidden;
}

/* 4) COLAPSADO: el <a> pasa a ser botón square centrado (ya no óvalo) */
body.pt-sidebar-collapsed .sidebar .sidebar-menu{
  align-items: center; /* centra los botones dentro del sidebar */
}

body.pt-sidebar-collapsed .sidebar .sidebar-menu a{
  width: 60px !important;
  height: 60px !important;
  padding: 0 !important;
  justify-content: center !important;
  gap: 0 !important;
  border-radius: 18px !important; /* square con esquinas */
}

/* 5) En colapsado, el iconito un poco más grande y centrado */
body.pt-sidebar-collapsed .sidebar .sidebar-menu a .sidebar-icon{
  width: 46px !important;
  height: 46px !important;
  flex-basis: 46px !important;
  border-radius: 16px !important;
}

/* 6) Refuerzo anti-overflow horizontal (por si algún canvas/tablas empujan) */
html, body{
  overflow-x: hidden;
}
.layout, .main, .content{
  max-width: 100%;
  overflow-x: clip;
}
/* =========================================================
   PATCH — Burger cambia a flecha cuando sidebar está colapsado
   ========================================================= */

.topbar-burger{
  position: relative;
}

/* ambos iconos alineados perfecto */
.topbar-burger .pt-burger-ico{
  display: grid;
  place-items: center;
}

/* por defecto: burger visible, flecha oculta */
.topbar-burger .pt-burger-ico--menu{ display: grid; }
.topbar-burger .pt-burger-ico--arrow{ display: none; }

/* SOLO desktop: si está colapsado, mostramos flecha */
@media (min-width: 981px){
  body.pt-sidebar-collapsed .topbar-burger .pt-burger-ico--menu{ display: none; }
  body.pt-sidebar-collapsed .topbar-burger .pt-burger-ico--arrow{ display: grid; }
}

/* Móvil/iPad drawer: siempre burger (no flecha) */
@media (max-width: 980px){
  .topbar-burger .pt-burger-ico--menu{ display: grid !important; }
  .topbar-burger .pt-burger-ico--arrow{ display: none !important; }
}
/* =========================================================
   FIX PRO — Topbar blur estable (sticky + backdrop-filter)
   - Mantiene blur SIEMPRE (no toggles)
   - Reduce jitter al aislar pintura y mover glass a ::before
   ========================================================= */

.topbar{
  position:sticky;
  top: 14px;
  transform: translate3d(0, 0, 0);
  z-index: 50;

  /* El contenedor ya no aplica blur directo */
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;

  /* estabilidad */
  isolation: isolate;
  contain: paint;
}

/* La capa glass real vive aquí */
.topbar::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events:none;

  background: var(--pt-surface);
  border: 1px solid var(--pt-border);
  box-shadow: var(--pt-shadow);

  backdrop-filter: var(--pt-blur);
  -webkit-backdrop-filter: var(--pt-blur);
}

/* Opcional: brillo sutil tipo iOS encima del glass */
.topbar::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events:none;
  background:
    radial-gradient(800px 220px at 20% 0%, rgba(255,255,255,.30), transparent 60%),
    radial-gradient(650px 220px at 100% 20%, rgba(255,255,255,.16), transparent 60%);
  opacity: .60;
  mix-blend-mode: overlay;
}

html.pt-theme-dark .topbar::after,
body.pt-theme-dark .topbar::after{
  opacity: .18;
}

/* Asegura que el contenido del topbar quede encima */
.topbar > *{
  position: relative;
  z-index: 1;
}
/* =========================================================
   KPI Cards v2 — Icon corner + Mobile slider (scroll-snap)
   Pegar al FINAL del tenant-v2.css
   ========================================================= */

/* Icono en esquina (premium / app vibe) */
.metric-card{ position: relative; }

.metric-icon{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--pt-muted);
  background: rgba(255,255,255,.34);
  border: 1px solid var(--pt-border-2);
  backdrop-filter: var(--pt-blur);
  -webkit-backdrop-filter: var(--pt-blur);
  box-shadow:
    0 10px 22px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.55);
}

html.pt-theme-dark .metric-icon,
body.pt-theme-dark .metric-icon{
  background: rgba(17,24,39,.34);
  box-shadow:
    0 14px 28px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.metric-icon svg{
  width: 18px;
  height: 18px;
  display: block;
}

/* Da aire al header para que no se cruce con el icono */
.metric-card-header{ padding-right: 54px; }

/* ===== Mobile slider (teléfono) ===== */
@media (max-width: 720px){
  .metric-row.metric-slider{
    display: flex !important;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 2px 6px 10px;
    margin-left: -6px;
    margin-right: -6px;
  }

  .metric-row.metric-slider::-webkit-scrollbar{ display:none; }
  .metric-row.metric-slider{ scrollbar-width: none; }

  /* “Peek” de la siguiente card */
  .metric-row.metric-slider .metric-card{
    flex: 0 0 84%;
    scroll-snap-align: start;
  }
}

/* En pantall*
/* =========================================================
   Citizens (admin/citizens) — Styles
   Scope: body.pt-page-citizens
   ========================================================= */

body.pt-page-citizens .content-header{
  margin-bottom: 14px;
}
body.pt-page-citizens .content-header h1{
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: .01em;
}
body.pt-page-citizens .content-header p{
  margin: 0;
  color: var(--pt-muted);
  font-size: 12px;
}

/* Alerts */
body.pt-page-citizens .alert{
  border-radius: 16px;
  border: 1px solid var(--pt-border);
  background: var(--pt-surface);
  box-shadow: var(--pt-shadow-2);
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  margin: 0 0 10px;
}
body.pt-page-citizens .alert-mt{ margin-top: 8px; }
body.pt-page-citizens .alert-success{
  border-color: rgba(34,197,94,.25);
  background: rgba(34,197,94,.10);
}
body.pt-page-citizens .alert-error{
  border-color: rgba(239,68,68,.28);
  background: rgba(239,68,68,.10);
}
body.pt-page-citizens .alert-info{
  border-color: rgba(59,130,246,.25);
  background: rgba(59,130,246,.10);
}

/* Card (reutiliza look glass) */
body.pt-page-citizens .card{
  border-radius: var(--pt-radius-lg);
  background: var(--pt-surface);
  border: 1px solid var(--pt-border);
  box-shadow: var(--pt-shadow);
  backdrop-filter: var(--pt-blur);
  -webkit-backdrop-filter: var(--pt-blur);
  overflow: hidden;
  padding: 14px;
}
body.pt-page-citizens .card + .section-card{ margin-top: var(--pt-gap); }

body.pt-page-citizens .card-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
body.pt-page-citizens .card-head h2,
body.pt-page-citizens .section-card-head h2{
  margin: 0;
  font-size: 14px;
  font-weight: 950;
}
body.pt-page-citizens .subtitle{
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--pt-muted);
}

/* Buttons */
body.pt-page-citizens .btn-primary,
body.pt-page-citizens .btn-secondary,
body.pt-page-citizens .btn-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .16s var(--pt-ease), box-shadow .16s var(--pt-ease), background .16s var(--pt-ease), border-color .16s var(--pt-ease);
}
body.pt-page-citizens .btn-primary{
  color: #fff;
  background: linear-gradient(135deg, var(--pt-accent), var(--pt-accent-2));
  box-shadow: 0 12px 20px rgba(251,39,93,.22);
}
body.pt-page-citizens .btn-primary:hover{ transform: translateY(-1px); }
body.pt-page-citizens .btn-secondary{
  background: rgba(255,255,255,.30);
  border-color: var(--pt-border);
  box-shadow: 0 10px 18px rgba(15,23,42,.08);
}
html.pt-theme-dark body.pt-page-citizens .btn-secondary{
  background: rgba(17,24,39,.30);
}
body.pt-page-citizens .btn-secondary:hover{ transform: translateY(-1px); border-color: rgba(251,39,93,.22); }
body.pt-page-citizens .btn-link{
  padding: 10px 8px;
  background: transparent;
  border-color: transparent;
  color: var(--pt-accent);
}
body.pt-page-citizens .btn-link:hover{ text-decoration: underline; }

/* Filters */
body.pt-page-citizens .filters-row{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
body.pt-page-citizens .field-group label{
  display:block;
  font-size: 11px;
  font-weight: 900;
  color: var(--pt-muted);
  margin: 0 0 6px;
}
body.pt-page-citizens .field-group input,
body.pt-page-citizens .field-group select,
body.pt-page-citizens .field-group textarea{
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--pt-border);
  background: rgba(255,255,255,.45);
  outline: none;
  transition: box-shadow .16s var(--pt-ease), border-color .16s var(--pt-ease), background .16s var(--pt-ease);
}
html.pt-theme-dark body.pt-page-citizens .field-group input,
html.pt-theme-dark body.pt-page-citizens .field-group select,
html.pt-theme-dark body.pt-page-citizens .field-group textarea{
  background: rgba(17,24,39,.45);
}
body.pt-page-citizens .field-group input:focus,
body.pt-page-citizens .field-group select:focus,
body.pt-page-citizens .field-group textarea:focus{
  box-shadow: var(--pt-focus);
  border-color: rgba(251,39,93,.35);
}

body.pt-page-citizens .filters-footer{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--pt-border-2);
  font-size: 12px;
  color: var(--pt-muted);
}
body.pt-page-citizens .filters-actions{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* Table tools */
body.pt-page-citizens .section-card-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
}
body.pt-page-citizens .pt-table-tools{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}
body.pt-page-citizens .pt-perpage{
  display:flex;
  align-items:center;
  gap: 8px;
  color: var(--pt-muted);
  font-size: 12px;
  font-weight: 800;
}
body.pt-page-citizens .pt-perpage select{
  padding: 8px 10px;
  border-radius: 12px;
}

/* Colvis dropdown */
body.pt-page-citizens .pt-colvis{ position: relative; }
body.pt-page-citizens .pt-colvis-menu{
  position:absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 220px;
  background: var(--pt-surface-solid);
  border: 1px solid var(--pt-border);
  border-radius: 16px;
  box-shadow: var(--pt-shadow);
  padding: 10px;
  display:none;
  z-index: 60;
}
body.pt-page-citizens .pt-colvis.is-open .pt-colvis-menu{ display:block; }
body.pt-page-citizens .pt-colvis-item{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 12px;
  padding: 8px 8px;
  border-radius: 12px;
}
body.pt-page-citizens .pt-colvis-item:hover{ background: rgba(251,39,93,.08); }

/* Data grid */
body.pt-page-citizens .data-grid-card{
  border-radius: 18px;
  border: 1px solid var(--pt-border-2);
  background: rgba(255,255,255,.25);
  overflow:hidden;
}
html.pt-theme-dark body.pt-page-citizens .data-grid-card{
  background: rgba(17,24,39,.25);
}
body.pt-page-citizens .data-grid-wrapper{
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
body.pt-page-citizens table.data-grid{
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
}
body.pt-page-citizens table.data-grid th,
body.pt-page-citizens table.data-grid td{
  padding: 12px 12px;
  font-size: 12px;
  border-bottom: 1px solid var(--pt-border-2);
  vertical-align: top;
  white-space: nowrap;
}
body.pt-page-citizens table.data-grid th{
  text-align:left;
  font-weight: 950;
  color: var(--pt-muted);
  background: rgba(255,255,255,.30);
}
html.pt-theme-dark body.pt-page-citizens table.data-grid th{
  background: rgba(17,24,39,.30);
}
body.pt-page-citizens table.data-grid tr:hover td{
  background: rgba(251,39,93,.06);
}

/* Pager */
body.pt-page-citizens .pt-pager{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  color: var(--pt-muted);
  font-size: 12px;
}
body.pt-page-citizens .pt-pager-links{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}
body.pt-page-citizens .pt-page,
body.pt-page-citizens .pt-page-current{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid var(--pt-border);
  text-decoration:none;
  font-weight: 900;
}
body.pt-page-citizens .pt-page{ background: rgba(255,255,255,.25); color: var(--pt-text); }
html.pt-theme-dark body.pt-page-citizens .pt-page{ background: rgba(17,24,39,.25); }
body.pt-page-citizens .pt-page-current{
  background: rgba(251,39,93,.14);
  border-color: rgba(251,39,93,.22);
}

/* Modal */
body.pt-page-citizens .pt-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 90;
}
body.pt-page-citizens .pt-modal.is-open{ display:block; }
body.pt-page-citizens .pt-modal-overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.35);
}
body.pt-page-citizens .pt-modal-dialog{
  position: relative;
  width: min(920px, calc(100vw - 24px));
  margin: 16px auto;
  border-radius: 22px;
  border: 1px solid var(--pt-border);
  background: var(--pt-surface-solid);
  box-shadow: var(--pt-shadow);
  overflow:hidden;
}
body.pt-page-citizens .pt-modal-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--pt-border-2);
}
body.pt-page-citizens .pt-modal-header h2{
  margin: 0;
  font-size: 14px;
  font-weight: 950;
}
body.pt-page-citizens .pt-modal-close{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid var(--pt-border);
  background: rgba(255,255,255,.30);
  cursor:pointer;
  font-size: 20px;
  line-height: 1;
}
html.pt-theme-dark body.pt-page-citizens .pt-modal-close{
  background: rgba(17,24,39,.30);
}
body.pt-page-citizens .pt-modal-body{
  padding: 14px 16px 18px;
}
body.pt-page-citizens .pt-modal-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
body.pt-page-citizens .pt-modal-span-2{ grid-column: span 2; }
body.pt-page-citizens .form-actions{ margin-top: .9rem; display:flex; gap: 10px; align-items:center; flex-wrap:wrap; }

body.pt-page-citizens .cp-help{
  display:block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--pt-muted);
  font-weight: 800;
}
body.pt-page-citizens .checkbox-scroll{
  max-height: 170px;
  overflow: auto;
  padding: 10px 10px;
  border-radius: 16px;
  border: 1px solid var(--pt-border-2);
  background: rgba(255,255,255,.25);
}
html.pt-theme-dark body.pt-page-citizens .checkbox-scroll{
  background: rgba(17,24,39,.25);
}
body.pt-page-citizens .checkline{
  display:block;
  font-size: .85rem;
  margin-bottom: .2rem;
}

body.pt-page-citizens .is-hidden{ display:none !important; }

/* Responsive */
@media (max-width: 980px){
  body.pt-page-citizens .filters-row{ grid-template-columns: 1fr; }
  body.pt-page-citizens table.data-grid{ min-width: 860px; }
}
@media (max-width: 720px){
  body.pt-page-citizens .card-head{ flex-direction: column; align-items: stretch; }
  body.pt-page-citizens .filters-footer{ flex-direction: column; align-items: flex-start; }
  body.pt-page-citizens .pt-modal-grid{ grid-template-columns: 1fr; }
  body.pt-page-citizens .pt-modal-span-2{ grid-column: auto; }
}
/* ===== Citizens: head del listado (título + herramientas) ===== */
.section-card-head{
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: center;
  gap: 16px;
}

/* El bloque del título NO debe dominar el ancho */
.section-card-head > div:first-child{
  min-width: 220px;
  max-width: 520px;     /* ajusta si quieres más/menos */
}

/* Tipografía un poco más compacta */
.section-card-head h2{
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.15;
}

.section-card-head p{
  margin: .25rem 0 0;
  font-size: .85rem;
  line-height: 1.25;
  opacity: .85;
  display: -webkit-box;
  -webkit-line-clamp: 2;       /* máximo 2 líneas */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Herramientas a la derecha: que quepan y hagan wrap si hace falta */
.pt-table-tools{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap; /* clave para que no se rompa */
}

/* IMPORTANTE para dropdowns (colvis) */
.section-card-head{ overflow: visible; }
.pt-colvis{ position: relative; }
.pt-colvis-menu{
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 80;
  min-width: 220px;
}

/* Responsive: en pantallas chicas apilar */
@media (max-width: 900px){
  .section-card-head{
    grid-template-columns: 1fr;
  }
  .section-card-head > div:first-child{
    max-width: 100%;
  }
  .pt-table-tools{
    justify-content: flex-start;
  }
}

/* ==========================================================================
   Shared UI components (global)
   - These are intentionally generic so other pages (Profile, Billing, Security)
     can reuse the same classes without duplicating inline styles.
   - Citizens page keeps its own overrides via body.pt-page-citizens selectors.
   ========================================================================== */

/* Cards */
.card{
  background: var(--pt-surface-solid);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-lg);
  box-shadow: var(--pt-shadow);
  padding: 18px;
}
.card h2{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -.01em;
}
.subtitle{
  margin: 0;
  color: var(--pt-muted);
  font-size: 13px;
  line-height: 1.35;
}

/* Alerts */
.alert{
  border: 1px solid var(--pt-border);
  background: var(--pt-surface-solid);
  border-radius: 16px;
  padding: 12px 14px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  margin: 0 0 12px;
}
.alert-success{ border-color: rgba(34,197,94,.28); background: rgba(34,197,94,.08); color: #14532d; }
.alert-error{   border-color: rgba(239,68,68,.28); background: rgba(239,68,68,.08); color: #7f1d1d; }
.alert-warning{ border-color: rgba(245,158,11,.28); background: rgba(245,158,11,.10); color: #7c2d12; }
.alert-info{    border-color: rgba(59,130,246,.28); background: rgba(59,130,246,.10); color: #1e3a8a; }

/* Buttons */
.btn,
.btn-primary,
.btn-secondary{
  appearance: none;
  border: 1px solid var(--pt-border);
  background: var(--pt-surface-solid);
  color: var(--pt-text);
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 950;
  letter-spacing: -.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  text-decoration: none;
}
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(15,23,42,.10);
}
.btn:active,
.btn-primary:active,
.btn-secondary:active{
  transform: translateY(0);
  box-shadow: none;
}
.btn[disabled],
.btn-primary[disabled],
.btn-secondary[disabled]{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn-primary{
  background: linear-gradient(135deg, var(--pt-accent), var(--pt-accent-2));
  border-color: rgba(251,39,93,.35);
  color: #fff;
  box-shadow: 0 16px 34px rgba(251,39,93,.20);
}
.btn-primary:hover{ box-shadow: 0 18px 40px rgba(251,39,93,.26); }
.btn-secondary{
  background: rgba(2,6,23,.03);
}

/* Forms */
.field-group{ margin-bottom: 12px; }
.field-group label{
  display:block;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,.70);
}
.field-group input,
.field-group select,
.field-group textarea{
  width: 100%;
  height: 44px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--pt-border);
  background: var(--pt-surface-solid);
  color: var(--pt-text);
  outline: none;
  box-shadow: 0 10px 22px rgba(15,23,42,.05);
}
.field-group textarea{
  min-height: 110px;
  height: auto;
  padding-top: 12px;
  padding-bottom: 12px;
  resize: vertical;
}
.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus{
  border-color: rgba(251,39,93,.45);
  box-shadow: 0 0 0 4px rgba(251,39,93,.14), 0 12px 26px rgba(15,23,42,.08);
}
.field-error input,
.field-error select,
.field-error textarea{
  border-color: rgba(239,68,68,.45);
  box-shadow: 0 0 0 4px rgba(239,68,68,.12), 0 12px 26px rgba(15,23,42,.08);
}
.field-error-text{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 900;
  color: #991b1b;
}

/* Links */
.link{
  color: var(--pt-accent-2);
  font-weight: 900;
  text-decoration: none;
}
.link:hover{ text-decoration: underline; }

/* Layout helpers */
.grid-two{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items:start;
}
@media (max-width: 980px){
  .grid-two{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Profile page
   ========================================================================== */
body.pt-page-profile .profile-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 14px;
}
body.pt-page-profile .pt-muted{ color: var(--pt-muted); }
body.pt-page-profile .pt-note{ color: var(--pt-muted); font-size: 12.5px; }
body.pt-page-profile .pt-tabs{
  display:flex;
  gap: 8px;
  align-items:center;
  width: fit-content;
  background: var(--pt-surface-solid);
  border: 1px solid var(--pt-border);
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 10px 25px rgba(15,23,42,.06);
}
body.pt-page-profile .pt-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 950;
  font-size: 13px;
  color: rgba(15,23,42,.60);
  line-height: 1;
  transition: .15s ease;
  white-space: nowrap;
}
body.pt-page-profile .pt-tab:hover{ color: var(--pt-text); background: rgba(2,6,23,.04); }
body.pt-page-profile .pt-tab.is-active{
  background: linear-gradient(135deg, var(--pt-accent), var(--pt-accent-2));
  color:#fff;
  box-shadow: 0 14px 30px rgba(251,39,93,.22);
}

/* Account Settings (General tab) */
body.pt-page-profile .as-wrap{ max-width: 1120px; margin: 0 auto; }
body.pt-page-profile .as-card{
  background: var(--pt-surface-solid);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-lg);
  box-shadow: var(--pt-shadow);
  overflow: hidden;
}
body.pt-page-profile .as-head{
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  display:flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
body.pt-page-profile .as-title{
  margin:0;
  font-size: 16px;
  font-weight: 950;
  color: var(--pt-text);
}
body.pt-page-profile .as-sub{
  margin:4px 0 0;
  color: var(--pt-muted);
  font-size: 13px;
}
body.pt-page-profile .as-body{ padding: 18px; }
body.pt-page-profile .as-section{ padding: 14px 0; }
body.pt-page-profile .as-section + .as-section{ border-top: 1px solid rgba(15,23,42,.08); }
body.pt-page-profile .as-section-title{
  margin:0 0 6px;
  font-size: 13px;
  font-weight: 950;
  color: var(--pt-text);
}
body.pt-page-profile .as-section-sub{
  margin:0 0 14px;
  color: var(--pt-muted);
  font-size: 13px;
}
body.pt-page-profile .as-profilebar{
  display:flex;
  gap: 12px;
  align-items:center;
  margin-bottom: 12px;
}
body.pt-page-profile .as-avatar{
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  background: rgba(251,39,93,.12);
  color: var(--pt-accent-2);
  font-weight: 950;
  font-size: 18px;
  flex: 0 0 auto;
}
body.pt-page-profile .as-profilemeta{ min-width: 0; display:grid; gap: 3px; }
body.pt-page-profile .as-name{
  font-weight: 950;
  color: var(--pt-text);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
body.pt-page-profile .as-email{
  color: var(--pt-muted);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
body.pt-page-profile .as-chips{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
body.pt-page-profile .as-chip{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(2,6,23,.02);
  color: rgba(15,23,42,.78);
  font-size: 12px;
  font-weight: 900;
}
body.pt-page-profile .as-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body.pt-page-profile .as-actions{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  margin-top: 12px;
}
body.pt-page-profile .as-note{ margin-top: 10px; font-size: 12.5px; color: var(--pt-muted); }

/* Billing blocks */
body.pt-page-profile .billing-kv{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
body.pt-page-profile .billing-kv-item{
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(2,6,23,.02);
  border-radius: 16px;
  padding: 12px;
}
body.pt-page-profile .billing-kv-label{
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,.62);
  margin-bottom: 4px;
}
body.pt-page-profile .billing-kv-value{
  font-size: 14px;
  font-weight: 950;
  color: var(--pt-text);
}
body.pt-page-profile .billing-kv-warn{ color: #7c2d12; }

body.pt-page-profile .plan-usage-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
body.pt-page-profile .usage-row{
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(2,6,23,.02);
  border-radius: 18px;
  padding: 12px;
}
body.pt-page-profile .usage-row-top{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  gap: 10px;
}
body.pt-page-profile .usage-row-label{
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,.62);
}
body.pt-page-profile .usage-row-value{
  font-size: 18px;
  font-weight: 950;
  color: var(--pt-text);
  margin-top: 2px;
}
body.pt-page-profile .usage-row-muted{
  color: rgba(15,23,42,.55);
  font-size: 12px;
  font-weight: 900;
  margin-left: 4px;
}
body.pt-page-profile .usage-badge{
  display:inline-flex;
  align-items:center;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.65);
  font-size: 11.5px;
  font-weight: 950;
  color: rgba(15,23,42,.75);
  margin-left: 8px;
}

body.pt-page-profile .usage-bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.08);
  overflow:hidden;
  margin-top: 10px;
}
body.pt-page-profile .usage-fill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
}
body.pt-page-profile .usage-fill--ok{ background: rgba(34,197,94,.75); }
body.pt-page-profile .usage-fill--warn{ background: rgba(245,158,11,.85); }
body.pt-page-profile .usage-fill--danger{ background: rgba(239,68,68,.80); }

body.pt-page-profile .usage-meta{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,.62);
}

/* Circular usage ring */
body.pt-page-profile .usage-ring{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-weight: 950;
  font-size: 12px;
  color: var(--pt-text);
  background:
    conic-gradient(currentColor calc(var(--p, 0)*1%), rgba(15,23,42,.10) 0);
}
body.pt-page-profile .usage-ring--ok{ color: rgba(34,197,94,.85); }
body.pt-page-profile .usage-ring--warn{ color: rgba(245,158,11,.90); }
body.pt-page-profile .usage-ring--danger{ color: rgba(239,68,68,.85); }
body.pt-page-profile .usage-ring span{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: var(--pt-surface-solid);
  color: var(--pt-text);
  border: 1px solid rgba(15,23,42,.08);
}

/* Plans grid */
body.pt-page-profile .plans-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
body.pt-page-profile .plan-card{
  background: var(--pt-surface-solid);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(15,23,42,.08);
  padding: 14px;
  display:flex;
  flex-direction: column;
  min-height: 100%;
}
body.pt-page-profile .plan-card.is-current{
  border-color: rgba(251,39,93,.30);
  box-shadow: 0 18px 46px rgba(251,39,93,.14);
}
body.pt-page-profile .plan-card-head{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items:flex-start;
  margin-bottom: 8px;
}
body.pt-page-profile .plan-title{
  margin:0;
  font-size: 14px;
  font-weight: 950;
  color: var(--pt-text);
}
body.pt-page-profile .plan-price{
  display:flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
}
body.pt-page-profile .plan-price-amount{
  font-size: 18px;
  font-weight: 950;
}
body.pt-page-profile .plan-price-interval{
  font-size: 12px;
  font-weight: 900;
  color: var(--pt-muted);
}
body.pt-page-profile .plan-desc{
  color: var(--pt-muted);
  font-size: 12.5px;
  margin: 8px 0 10px;
  min-height: 36px;
}
body.pt-page-profile .plan-features{
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display:grid;
  gap: 8px;
}
body.pt-page-profile .plan-features li{
  display:flex;
  gap: 8px;
  align-items:flex-start;
  color: rgba(15,23,42,.74);
  font-size: 12.5px;
  font-weight: 800;
}
body.pt-page-profile .plan-features li::before{
  content: "✓";
  color: rgba(34,197,94,.90);
  font-weight: 950;
  margin-top: 1px;
}
body.pt-page-profile .plan-actions{
  margin-top: auto;
}
body.pt-page-profile .plan-form{ margin: 0; }
body.pt-page-profile .badge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(2,6,23,.02);
  color: rgba(15,23,42,.78);
}
body.pt-page-profile .badge-popular{
  border-color: rgba(245,158,11,.30);
  background: rgba(245,158,11,.12);
  color: #7c2d12;
}
body.pt-page-profile .badge-current{
  border-color: rgba(34,197,94,.30);
  background: rgba(34,197,94,.10);
  color: #14532d;
}
body.pt-page-profile .plan-badges{ display:flex; gap: 8px; flex-wrap: wrap; justify-content:flex-end; }

/* Invoices table */
body.pt-page-profile .invoice-table-wrap{
  overflow:auto;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.08);
}
body.pt-page-profile .invoice-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 520px;
  background: var(--pt-surface-solid);
}
body.pt-page-profile .invoice-table th,
body.pt-page-profile .invoice-table td{
  padding: 12px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(15,23,42,.08);
  font-size: 12.5px;
}
body.pt-page-profile .invoice-table th{
  font-size: 12px;
  font-weight: 950;
  color: rgba(15,23,42,.65);
  background: rgba(2,6,23,.02);
}
body.pt-page-profile .invoice-table tr:last-child td{ border-bottom: 0; }
body.pt-page-profile .inv-badge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(2,6,23,.02);
  font-size: 11.5px;
  font-weight: 950;
  color: rgba(15,23,42,.78);
}
body.pt-page-profile .inv-paid{ border-color: rgba(34,197,94,.30); background: rgba(34,197,94,.10); color:#14532d; }
body.pt-page-profile .inv-open,
body.pt-page-profile .inv-draft{ border-color: rgba(59,130,246,.28); background: rgba(59,130,246,.10); color:#1e3a8a; }
body.pt-page-profile .inv-uncollectible,
body.pt-page-profile .inv-void,
body.pt-page-profile .inv-unpaid{ border-color: rgba(239,68,68,.28); background: rgba(239,68,68,.08); color:#7f1d1d; }
body.pt-page-profile .inv-actions{ white-space: nowrap; }

/* 2FA block */
body.pt-page-profile .p2fa-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(34,197,94,.28);
  background: rgba(34,197,94,.08);
  color:#14532d;
  font-weight: 950;
  margin: 10px 0 14px;
}
body.pt-page-profile .p2fa-qr{
  display:flex;
  gap:14px;
  align-items:flex-start;
  flex-wrap: wrap;
  margin-top: 10px;
}
body.pt-page-profile .p2fa-qr img{
  width:160px;
  height:160px;
  border-radius: 14px;
  border:1px solid rgba(15,23,42,.10);
  background: var(--pt-surface-solid);
}
body.pt-page-profile .p2fa-key{
  flex: 1 1 260px;
  min-width: 240px;
}
body.pt-page-profile .p2fa-key code{
  display:block;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(2,6,23,.02);
  word-break: break-all;
  font-weight: 950;
}
body.pt-page-profile .p2fa-recovery{
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(2,6,23,.02);
}
body.pt-page-profile .p2fa-recovery ul{ margin:10px 0 0; padding-left: 18px; }
body.pt-page-profile .p2fa-recovery li{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono"; font-weight: 950; }

/* Responsive */
@media (max-width: 980px){
  body.pt-page-profile .profile-head{ flex-direction: column; align-items: stretch; }
  body.pt-page-profile .pt-tabs{ width: 100%; justify-content: space-between; }
  body.pt-page-profile .pt-tab{ flex: 1 1 auto; }
  body.pt-page-profile .as-grid{ grid-template-columns: 1fr; }
  body.pt-page-profile .billing-kv{ grid-template-columns: 1fr; }
  body.pt-page-profile .plans-grid{ grid-template-columns: 1fr; }
}


/* ==========================================================================
   Shared UI components (alerts, buttons, form controls, modal)
   Added for: promote.php (and future screens)
   Scope: .pt-app to avoid affecting marketing/login pages
   ========================================================================== */

.pt-app .btn,
.pt-app a.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.28);
  background:#fff;
  color:#0f172a;
  text-decoration:none;
  font-weight:900;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  box-shadow:0 10px 22px rgba(2,6,23,.06);
}
.pt-app .btn:hover{ transform: translateY(-1px); box-shadow:0 16px 32px rgba(2,6,23,.10); }
.pt-app .btn:active{ transform: translateY(0); box-shadow:0 10px 22px rgba(2,6,23,.06); }
.pt-app .btn[disabled],
.pt-app button[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }

.pt-app .btn-primary{
  border-color: rgba(251,39,93,.35);
  background: linear-gradient(180deg, var(--pt-primary) 0%, var(--pt-primary-2) 100%);
  color:#fff;
  box-shadow:0 18px 34px rgba(251,39,93,.18);
}
.pt-app .btn-primary:hover{ box-shadow:0 22px 45px rgba(251,39,93,.22); }

.pt-app .btn-secondary{
  background: rgba(2,6,23,.02);
  border-color: rgba(148,163,184,.28);
  color:#111827;
}

.pt-app .btn-ghost{
  background: transparent;
  box-shadow:none;
}

.pt-app .alert{
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(2,6,23,.02);
  color:#0f172a;
  font-weight: 800;
}
.pt-app .alert + .alert{ margin-top: 10px; }
.pt-app .alert-success{ border-color: rgba(34,197,94,.30); background: rgba(34,197,94,.08); color:#14532d; }
.pt-app .alert-error{ border-color: rgba(239,68,68,.30); background: rgba(239,68,68,.08); color:#7f1d1d; }
.pt-app .alert-warning{ border-color: rgba(245,158,11,.32); background: rgba(245,158,11,.10); color:#7c2d12; }
.pt-app .alert-info{ border-color: rgba(59,130,246,.28); background: rgba(59,130,246,.08); color:#0b3a75; }

.pt-app .field-group{ margin-bottom: 10px; }
.pt-app .field-group label{
  display:block;
  margin-bottom: 6px;
  font-weight: 900;
  font-size: 12px;
  color:#475569;
}
.pt-app .field-group input,
.pt-app .field-group select,
.pt-app .field-group textarea{
  width:100%;
  border-radius: 14px;
  border:1px solid rgba(148,163,184,.28);
  background:#fff;
  padding: 11px 12px;
  font-weight: 800;
  color:#0f172a;
  outline:none;
  box-shadow: 0 10px 20px rgba(2,6,23,.05);
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.pt-app .field-group input:focus,
.pt-app .field-group select:focus,
.pt-app .field-group textarea:focus{
  border-color: rgba(251,39,93,.45);
  box-shadow: 0 0 0 4px rgba(251,39,93,.12), 0 16px 30px rgba(2,6,23,.07);
}
.pt-app .field-error-text{ margin-top: 6px; font-size: 12px; font-weight: 800; color:#b91c1c; }
.pt-app .field-error input,
.pt-app .field-error select,
.pt-app .field-error textarea{ border-color: rgba(239,68,68,.45); }

.pt-app .pt-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(2,6,23,.02);
  color:#334155;
  font-size: 12px;
  font-weight: 900;
}
.pt-app .pt-pill--accent{ border-color: rgba(251,39,93,.30); background: rgba(251,39,93,.10); color:#7f1230; }
.pt-app .pt-pill--ok{ border-color: rgba(34,197,94,.30); background: rgba(34,197,94,.08); color:#14532d; }
.pt-app .pt-pill--muted{ background: rgba(2,6,23,.02); color:#64748b; }

.pt-app .pt-modal{
  position: fixed;
  inset: 0;
  display:none;
  z-index: 1000;
}
.pt-app .pt-modal.is-open{ display:block; }
.pt-app .pt-modal-overlay{
  position:absolute;
  inset:0;
  background: rgba(2,6,23,.55);
  backdrop-filter: blur(6px);
}
.pt-app .pt-modal-panel{
  position: relative;
  margin: 8vh auto;
  width: min(860px, calc(100% - 24px));
  max-height: 84vh;
  border-radius: 22px;
  background: #fff;
  border:1px solid rgba(148,163,184,.22);
  box-shadow: 0 35px 85px rgba(2,6,23,.35);
  overflow: hidden;
  display:flex;
  flex-direction:column;
}
.pt-app .pt-modal-head{
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(148,163,184,.16);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}
.pt-app .pt-modal-title{
  margin:0;
  font-size: 16px;
  font-weight: 950;
  color:#0f172a;
}
.pt-app .pt-modal-subtitle{
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 800;
  color:#64748b;
}
.pt-app .pt-modal-close{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border:1px solid rgba(148,163,184,.25);
  background: rgba(2,6,23,.02);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.pt-app .pt-modal-body{
  padding: 14px 16px 16px;
  overflow:auto;
}
.pt-app .pt-modal-actions{
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(148,163,184,.16);
  display:flex;
  gap:10px;
  justify-content:flex-end;
  background: linear-gradient(180deg, rgba(255,255,255,.65) 0%, #fff 70%);
}

html.pt-scroll-lock, body.pt-scroll-lock{ overflow:hidden !important; }


/* =========================
   Promover ciudadanos (promote.php)
   ========================= */
.pt-page-promote .pt-actions-cell{
  text-align: right;
  white-space: nowrap;
}

.pt-page-promote .pt-promote-action{
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(148,163,184,.25);
  background: #fff;
  color: var(--pt-text, #0f172a);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, opacity .15s ease;
}

.pt-page-promote .pt-promote-action--promote{
  background: linear-gradient(135deg, var(--pt-primary, #ba1d45), var(--pt-primary-soft, #fb275d));
  color: #fff;
  border-color: rgba(251,39,93,.25);
  box-shadow: 0 10px 22px rgba(2,6,23,.10);
}

.pt-page-promote .pt-promote-action--change{
  background: rgba(2,6,23,.04);
  color: var(--pt-text, #0f172a);
  border-color: rgba(148,163,184,.28);
}

.pt-page-promote .pt-promote-action:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(2,6,23,.12);
}

.pt-page-promote .pt-promote-action:active{
  transform: translateY(0);
}

.pt-page-promote .pt-promote-action:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(251,39,93,.18), 0 10px 22px rgba(2,6,23,.10);
}

.pt-page-promote .pt-promote-action:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

@media (max-width: 720px){
  .pt-page-promote .pt-actions-cell{
    white-space: normal;
  }
  .pt-page-promote .pt-promote-action{
    width: 100%;
  }
}
.pt-page-citizens .pt-colvis,
.pt-page-citizens .pt-colvis-menu {
  overflow: visible !important;
  z-index: 2000;
}

/* =========================================================
   Global Search Autocomplete (Liquid Glass)
   ========================================================= */
.pt-gs-popover{
  position:absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: 90;
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 50px rgba(17,24,39,.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}
.pt-gs-popover.open{ display:block; }
.pt-gs-list{ max-height: 340px; overflow:auto; padding: 6px; }
.pt-gs-item{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 10px 10px;
  border-radius: 14px;
  text-decoration:none;
  color: inherit;
}
.pt-gs-item:hover{ background: rgba(0,0,0,.04); }
.pt-gs-item[aria-selected="true"]{ background: rgba(0,0,0,.06); }
.pt-gs-avatar{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  background: rgba(251,39,93,.12);
  border: 1px solid rgba(251,39,93,.20);
  color: #fb275d;
  flex: 0 0 auto;
}
.pt-gs-meta{ min-width: 0; flex: 1 1 auto; }
.pt-gs-title{
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-gs-sub{
  font-size: 12px;
  opacity: .72;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.pt-gs-pill{
  font-size: 12px;
  opacity: .70;
  padding-left: 10px;
  flex: 0 0 auto;
}
.pt-gs-empty{
  padding: 14px 12px;
  opacity: .75;
}
.pt-gs-all{
  display:block;
  padding: 10px 12px;
  text-decoration:none;
  border-top: 1px solid rgba(0,0,0,.06);
  font-weight: 700;
}

/* Dark mode compatibility */
html[data-theme="dark"] .pt-gs-popover,
body[data-theme="dark"] .pt-gs-popover,
body.theme-dark .pt-gs-popover{
  background: rgba(17,24,39,.92);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
html[data-theme="dark"] .pt-gs-item:hover,
body[data-theme="dark"] .pt-gs-item:hover,
body.theme-dark .pt-gs-item:hover{
  background: rgba(255,255,255,.06);
}
html[data-theme="dark"] .pt-gs-item[aria-selected="true"],
body[data-theme="dark"] .pt-gs-item[aria-selected="true"],
body.theme-dark .pt-gs-item[aria-selected="true"]{
  background: rgba(255,255,255,.08);
}
html[data-theme="dark"] .pt-gs-all,
body[data-theme="dark"] .pt-gs-all,
body.theme-dark .pt-gs-all{
  border-top-color: rgba(255,255,255,.08);
}