/* /portal/assets/portal.css — portal de abonados.
   Mismo lenguaje visual que el panel gestion (design system V2 "Crecer").
   Tokens propios (no depende de v2.css) que respetan data-theme light/dark. */

/* ---- tokens (copiados de gestion/tickets/v2.css) ---- */
:root[data-theme="light"], :root:not([data-theme]) {
  --v2-bg-app:    #f7f7f5;
  --v2-bg-card:   #ffffff;
  --v2-bg-hover:  #f0f0ec;
  --v2-bg-active: #ebebe6;
  --v2-border:    #e5e5e0;
  --v2-border-strong: #d4d4cd;
  --v2-text:      #1a1a1a;
  --v2-text-2:    #5a5a55;
  --v2-text-mute: #8a8a82;
  --v2-accent:    #2d6a4f;
  --v2-accent-bg: #e8f3ec;
  --v2-warn:      #b86e00;
  --v2-warn-bg:   #fdf3e4;
  --v2-urg:       #c8312b;
  --v2-urg-bg:    #fbe8e6;
  --v2-info:      #2563eb;
  --v2-info-bg:   #e6efff;
  --v2-radius:    8px;
  --v2-radius-sm: 5px;
}
:root[data-theme="dark"] {
  --v2-bg-app:    #0e0e10;
  --v2-bg-card:   #18181b;
  --v2-bg-hover:  #222226;
  --v2-bg-active: #2a2a2f;
  --v2-border:    #2a2a2f;
  --v2-border-strong: #3a3a40;
  --v2-text:      #f0f0f0;
  --v2-text-2:    #b0b0b0;
  --v2-text-mute: #7a7a7a;
  --v2-accent:    #4ade80;
  --v2-accent-bg: #14301f;
  --v2-warn:      #f59e0b;
  --v2-warn-bg:   #3a2a0e;
  --v2-urg:       #f87171;
  --v2-urg-bg:    #3a1818;
  --v2-info:      #60a5fa;
  --v2-info-bg:   #1a2540;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
.pt-body {
  background: var(--v2-bg-app);
  color: var(--v2-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 13.5px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* ---- Topbar ---- */
.pt-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px; height: 56px;
  background: var(--v2-bg-card);
  border-bottom: 1px solid var(--v2-border);
  position: sticky; top: 0; z-index: 20;
}
.pt-top__brand {
  font-weight: 700; font-size: 15px; letter-spacing: -.3px;
  color: var(--v2-text); text-decoration: none; display: flex; align-items: center; gap: 9px;
}
.pt-top__brand span { color: var(--v2-accent); }
.pt-top__brand em {
  font-style: normal; font-weight: 600; font-size: 11px; color: var(--v2-text-mute);
  border-left: 1px solid var(--v2-border); padding-left: 9px; letter-spacing: .3px; text-transform: uppercase;
}
.pt-top__right { display: flex; align-items: center; gap: 10px; }
.pt-top__org {
  font-size: 12.5px; color: var(--v2-text-2); font-weight: 600;
  max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 5px 11px; background: var(--v2-bg-app); border: 1px solid var(--v2-border); border-radius: 100px;
}
.pt-top__icon {
  background: var(--v2-bg-card); border: 1px solid var(--v2-border); border-radius: var(--v2-radius-sm);
  color: var(--v2-text-2); cursor: pointer; width: 32px; height: 32px; font-size: 15px; line-height: 1;
}
.pt-top__icon:hover { background: var(--v2-bg-hover); color: var(--v2-text); }
.pt-top__logout {
  font-size: 12.5px; color: var(--v2-text-2); text-decoration: none; font-weight: 500;
  padding: 6px 13px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius-sm); background: var(--v2-bg-card);
}
.pt-top__logout:hover { background: var(--v2-bg-hover); color: var(--v2-text); }

/* ---- Main ---- */
.pt-main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 30px 22px 56px; }
.pt-foot { text-align: center; padding: 20px; font-size: 11px; color: var(--v2-text-mute); }

/* ---- Flash ---- */
.pt-flash {
  padding: 11px 14px; border-radius: var(--v2-radius); font-size: 13px; margin-bottom: 16px;
  border: 1px solid var(--v2-border); display: flex; align-items: center; gap: 8px;
}
.pt-flash--ok,
.pt-flash--info { background: var(--v2-accent-bg); color: var(--v2-accent); border-color: transparent; }
.pt-flash--err { background: var(--v2-urg-bg); color: var(--v2-urg); border-color: transparent; }

/* ---- Auth cards (login / activar / reset) ---- */
.pt-auth {
  max-width: 380px; margin: 7vh auto 0; background: var(--v2-bg-card);
  border: 1px solid var(--v2-border); border-radius: var(--v2-radius); padding: 32px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
}
.pt-auth__title { font-size: 20px; font-weight: 650; margin: 0 0 5px; letter-spacing: -.4px; }
.pt-auth__sub { font-size: 13px; color: var(--v2-text-2); margin: 0 0 22px; line-height: 1.5; }
.pt-auth__foot { font-size: 12px; color: var(--v2-text-mute); margin-top: 20px; text-align: center; }
.pt-link { color: var(--v2-accent); text-decoration: none; font-weight: 600; }
.pt-link:hover { text-decoration: underline; }

/* ---- Forms ---- */
.pt-form { display: block; }
.pt-label { display: block; font-size: 11.5px; font-weight: 600; margin: 15px 0 5px; color: var(--v2-text-2); letter-spacing: .2px; }
.pt-input, .pt-textarea {
  width: 100%; padding: 9px 11px; font: inherit; font-size: 13.5px;
  border: 1px solid var(--v2-border); border-radius: var(--v2-radius-sm);
  background: var(--v2-bg-card); color: var(--v2-text); transition: border-color .15s, box-shadow .15s;
}
.pt-input:focus, .pt-textarea:focus {
  outline: none; border-color: var(--v2-accent);
  box-shadow: 0 0 0 3px var(--v2-accent-bg);
}
.pt-textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
.pt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Botones (igual que .v2-btn de gestion) ---- */
.pt-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 16px; font: inherit; font-size: 13px; font-weight: 500;
  border-radius: var(--v2-radius-sm); border: 1px solid var(--v2-border); cursor: pointer;
  background: var(--v2-bg-card); color: var(--v2-text); text-decoration: none;
}
.pt-btn:hover { background: var(--v2-bg-hover); }
.pt-btn--primary { background: var(--v2-text); border-color: var(--v2-text); color: var(--v2-bg-card); }
.pt-btn--primary:hover { opacity: .9; background: var(--v2-text); }
.pt-btn--block { width: 100%; margin-top: 22px; padding: 10px; }
.pt-btn--ghost { background: transparent; }

/* ---- Home / lista ---- */
.pt-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.pt-hero__hi { font-size: 22px; font-weight: 650; letter-spacing: -.5px; margin: 0; }
.pt-hero__sub { font-size: 13px; color: var(--v2-text-2); margin: 5px 0 0; }

.pt-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--v2-text-mute); margin: 28px 0 11px; }

.pt-list { display: flex; flex-direction: column; gap: 8px; }
.pt-tk {
  display: flex; align-items: center; gap: 13px; padding: 13px 15px;
  background: var(--v2-bg-card); border: 1px solid var(--v2-border); border-radius: var(--v2-radius);
  text-decoration: none; color: var(--v2-text); transition: border-color .12s, background .12s;
}
.pt-tk:hover { background: var(--v2-bg-hover); border-color: var(--v2-border-strong); }
.pt-tk > .pt-pill { flex-shrink: 0; }
.pt-tk__body { flex: 1 1 auto; min-width: 0; display: block; }
.pt-tk__title { display: block; font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-tk__meta { display: block; font-size: 11.5px; color: var(--v2-text-mute); margin-top: 2px; }
.pt-tk__time { flex-shrink: 0; font-size: 11.5px; color: var(--v2-text-mute); white-space: nowrap; }

.pt-empty {
  text-align: center; padding: 44px 22px; color: var(--v2-text-2); font-size: 13.5px;
  background: var(--v2-bg-card); border: 1px dashed var(--v2-border-strong); border-radius: var(--v2-radius); line-height: 1.6;
}

/* ---- Pills de estado ---- */
.pt-pill { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 100px; white-space: nowrap; }
.pt-pill--nueva    { background: var(--v2-info-bg);   color: var(--v2-info); }
.pt-pill--proceso  { background: var(--v2-warn-bg);   color: var(--v2-warn); }
.pt-pill--espera   { background: var(--v2-bg-active); color: var(--v2-text-2); }
.pt-pill--resuelta { background: var(--v2-accent-bg); color: var(--v2-accent); }

/* ---- Detalle / hilo ---- */
.pt-back { display: inline-block; font-size: 12.5px; color: var(--v2-text-2); text-decoration: none; margin-bottom: 14px; }
.pt-back:hover { color: var(--v2-text); }
.pt-detail__head { margin-bottom: 8px; }
.pt-detail__title { font-size: 19px; font-weight: 650; letter-spacing: -.4px; margin: 9px 0 4px; }
.pt-detail__meta { font-size: 12px; color: var(--v2-text-mute); margin-bottom: 4px; }

.pt-thread { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; }
.pt-msg {
  padding: 12px 14px; border-radius: var(--v2-radius); border: 1px solid var(--v2-border);
  background: var(--v2-bg-card); max-width: 86%;
}
.pt-msg--in  { align-self: flex-end; background: var(--v2-accent-bg); border-color: transparent; }
.pt-msg--sys { align-self: center; background: transparent; border: none; color: var(--v2-text-mute); font-size: 11.5px; text-align: center; max-width: 100%; padding: 4px; }
.pt-msg__who { font-size: 11px; font-weight: 600; color: var(--v2-text-2); margin-bottom: 4px; letter-spacing: .2px; }
.pt-msg--in .pt-msg__who { color: var(--v2-accent); }
.pt-msg__txt { font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.pt-msg__txt a { color: var(--v2-info); }
.pt-msg__time { font-size: 10.5px; color: var(--v2-text-mute); margin-top: 6px; }

.pt-reply { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--v2-border); }

/* ---- Nav superior ---- */
.pt-nav {
  display: flex; gap: 4px; padding: 0 22px;
  background: var(--v2-bg-card); border-bottom: 1px solid var(--v2-border);
  position: sticky; top: 56px; z-index: 19; overflow-x: auto;
}
.pt-nav__item {
  padding: 12px 14px; font-size: 13px; font-weight: 600; color: var(--v2-text-2);
  text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap;
}
.pt-nav__item:hover { color: var(--v2-text); }
.pt-nav__item.is-active { color: var(--v2-accent); border-bottom-color: var(--v2-accent); }

/* ---- Dashboard cards ---- */
.pt-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.pt-card {
  display: flex; flex-direction: column; padding: 20px; gap: 4px;
  background: var(--v2-bg-card); border: 1px solid var(--v2-border); border-radius: var(--v2-radius);
  text-decoration: none; color: var(--v2-text); transition: border-color .12s, transform .12s, box-shadow .12s;
}
.pt-card:hover { border-color: var(--v2-border-strong); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.pt-card__icon { font-size: 26px; line-height: 1; margin-bottom: 6px; }
.pt-card__title { font-size: 15px; font-weight: 650; letter-spacing: -.2px; }
.pt-card__desc { font-size: 12.5px; color: var(--v2-text-2); line-height: 1.45; flex: 1; }
.pt-card__stat { font-size: 22px; font-weight: 700; color: var(--v2-accent); margin-top: 10px; }
.pt-card__stat small { font-size: 12px; font-weight: 500; color: var(--v2-text-mute); }

/* ---- Estadisticas ---- */
.pt-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.pt-kpi { background: var(--v2-bg-card); border: 1px solid var(--v2-border); border-radius: var(--v2-radius); padding: 16px; }
.pt-kpi__n { font-size: 26px; font-weight: 700; letter-spacing: -.5px; }
.pt-kpi__l { font-size: 11.5px; color: var(--v2-text-2); margin-top: 2px; font-weight: 500; }
.pt-kpi--accent .pt-kpi__n { color: var(--v2-accent); }
.pt-kpi--warn  .pt-kpi__n { color: var(--v2-warn); }
.pt-kpi--info  .pt-kpi__n { color: var(--v2-info); }

.pt-panel { background: var(--v2-bg-card); border: 1px solid var(--v2-border); border-radius: var(--v2-radius); padding: 18px; margin-top: 14px; }
.pt-bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding-top: 10px; }
.pt-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; height: 100%; justify-content: flex-end; }
.pt-bar__fill { width: 100%; max-width: 38px; background: var(--v2-accent); border-radius: 4px 4px 0 0; min-height: 3px; }
.pt-bar__n { font-size: 11px; font-weight: 600; color: var(--v2-text-2); }
.pt-bar__lbl { font-size: 10px; color: var(--v2-text-mute); white-space: nowrap; }

.pt-mtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.pt-mtable thead th { text-align: right; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--v2-text-mute); padding: 11px 16px; border-bottom: 1px solid var(--v2-border); }
.pt-mtable thead th:first-child { text-align: left; }
.pt-mtable tbody td { text-align: right; padding: 10px 16px; border-bottom: 1px solid var(--v2-border); }
.pt-mtable tbody td:first-child { text-align: left; font-weight: 600; }
.pt-mtable tbody tr:last-child td { border-bottom: none; }
.pt-mtable tbody tr:hover { background: var(--v2-bg-hover); }

.pt-rows { display: flex; flex-direction: column; gap: 9px; }
.pt-row { display: grid; grid-template-columns: 110px 1fr 42px; align-items: center; gap: 10px; }
.pt-row__lbl { font-size: 12.5px; color: var(--v2-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-row__track { background: var(--v2-bg-app); border-radius: 100px; height: 8px; overflow: hidden; }
.pt-row__fill { height: 100%; background: var(--v2-accent); border-radius: 100px; }
.pt-row__n { font-size: 12.5px; font-weight: 600; text-align: right; }

/* ---- Descargas ---- */
.pt-dl { display: flex; align-items: center; gap: 13px; padding: 14px 15px; background: var(--v2-bg-card); border: 1px solid var(--v2-border); border-radius: var(--v2-radius); }
.pt-dl__ext { flex-shrink: 0; width: 44px; height: 44px; border-radius: 8px; background: var(--v2-accent-bg); color: var(--v2-accent); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.pt-dl { gap: 13px; }
.pt-dl > .pt-dl__ext { flex-shrink: 0; }
.pt-dl__body { flex: 1 1 auto; min-width: 0; display: block; }
.pt-dl__title { display: block; font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-dl__desc { display: block; font-size: 12px; color: var(--v2-text-2); margin-top: 2px; line-height: 1.4; }
.pt-dl__meta { display: block; font-size: 11px; color: var(--v2-text-mute); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-dl > .pt-btn { flex-shrink: 0; }