/* =========================================================================
   portal.css — Shell del PORTAL DE CLIENTES (nuevo módulo, clientes/portal/).
   Look marino alineado a la web/login (Plus Jakarta Sans). Las tarjetas de
   plan traen su propio CSS (disenoplanes/disenoplanes.css).
   ========================================================================= */

:root{
  --pt-navy:#0e1883; --pt-navy-2:#161a6b; --pt-blue:#3a44b0;
  --pt-ink:#1b2347; --pt-muted:#6b7794; --pt-line:#e6eaf2;
}

.pt-body{
  margin:0; min-height:100vh; font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  color:var(--pt-ink);
  background:linear-gradient(0deg,#173277 0%,#4260a8 51%,#eef2fb 100%) fixed;
  background-size:cover;
  display:flex; flex-direction:column;   /* footer pegado abajo aunque haya poco contenido */
}
.pt-body *{ box-sizing:border-box; }

/* ── Barra superior ── */
.pt-nav{
  position:sticky; top:0; z-index:30;
  background:linear-gradient(120deg,var(--pt-navy) 0%,#1d2a9e 60%,#2bb6e6 140%);
  box-shadow:0 8px 24px -12px rgba(7,11,38,.6);
}
.pt-nav-in{
  max-width:1180px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap;
}
.pt-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; line-height:1.1;
  text-decoration:none; color:inherit; cursor:pointer; }
.pt-brand img{ height:30px; width:auto; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.pt-slogan{ font-size:11px; font-weight:600; letter-spacing:.01em;
  color:rgba(255,255,255,.85); text-shadow:0 1px 2px rgba(0,0,0,.35); }
.pt-tabs{ display:flex; gap:4px; flex:1; flex-wrap:wrap; justify-content:center; }
.pt-tab{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; border:0; background:transparent;
  color:rgba(255,255,255,.82); font-family:inherit; font-weight:700; font-size:14px; white-space:nowrap;
  padding:9px 14px; border-radius:999px; transition:.15s;
}
.pt-tab:hover{ color:#fff; background:rgba(255,255,255,.12); }
.pt-tab.is-active{ color:var(--pt-navy); background:#fff; box-shadow:0 6px 16px -8px rgba(0,0,0,.5); }
.pt-user{ display:flex; align-items:center; gap:8px; color:#fff; font-weight:700; font-size:14px; }
.pt-user .bi-patch-check-fill{ color:#4ade80; }
.pt-user .bi-exclamation-triangle-fill{ color:#fbbf24; }
.pt-logout{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
  margin-left:2px; border-radius:9px; color:#fff; background:rgba(255,255,255,.16); text-decoration:none;
  font-size:16px; transition:background .15s; }
.pt-logout:hover{ background:rgba(255,255,255,.32); color:#fff; }

/* Desktop: la barra inferior no existe (las pestañas van arriba, en .pt-tabs). Va ANTES
   del media query de abajo para que su display:flex en móvil gane (mismo peso de selector,
   gana el que se declara después en el CSS). */
.pt-bottomnav{ display:none; }

/* ── Barra en MÓVIL: header liviano (solo marca + usuario); las pestañas bajan a
       .pt-bottomnav, fija abajo tipo app — evita el amontonamiento de todo arriba. ── */
@media (max-width:840px){
  .pt-nav-in{ padding:9px 12px; gap:8px; }
  .pt-brand img{ height:26px; }
  .pt-user{ margin-left:auto; font-size:13px; }
  .pt-tabs{ display:none; }

  .pt-bottomnav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40;
    background:#fff; border-top:1px solid var(--pt-line);
    box-shadow:0 -10px 26px -18px rgba(7,11,38,.4);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .pt-tab-bottom{
    flex:1 1 0; min-width:0; flex-direction:column; gap:2px; padding:6px 2px;
    border-radius:10px; color:var(--pt-muted); font-size:10.5px; line-height:1.15;
  }
  .pt-tab-bottom i{ font-size:19px; }
  .pt-tab-bottom span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  .pt-tab-bottom:hover{ background:#f4f7fd; color:var(--pt-navy); }
  .pt-tab-bottom.is-active{ color:var(--pt-navy); background:#eef1f8; box-shadow:none; }

  /* Que el contenido y el pie no queden tapados por la barra fija. */
  .pt-wrap{ padding-bottom:78px; }
  .pt-footer{ padding-bottom:78px; }
}

/* ── Contenido ── */
.pt-wrap{ max-width:1180px; width:100%; margin:0 auto; padding:20px 18px 40px; flex:1 0 auto; }
/* Pie compartido (comprar/_footer.php): pegado al fondo, no "mocho". */
.pt-footer{ flex:0 0 auto; padding:8px 0 32px; }
.pt-panel{ display:none; }
.pt-panel.is-active{ display:block; animation:pt-fade .2s ease; }
@keyframes pt-fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

.pt-section-head{ margin:4px 0 18px; color:#fff; text-shadow:0 2px 8px rgba(7,11,38,.4); }
.pt-h2{ font-size:24px; font-weight:800; margin:0 0 3px; }
.pt-sub{ font-size:14px; opacity:.9; margin:0; }
.pt-empty{ color:#fff; opacity:.9; text-align:center; padding:40px 0; }

/* Banner de validación de cuenta */
.pt-alert{
  display:flex; align-items:center; gap:12px; margin:0 0 18px;
  background:#fff7ed; border:1px solid #fed7aa; color:#9a3412;
  border-radius:14px; padding:13px 16px; font-size:14px; font-weight:600;
  box-shadow:0 12px 30px -18px rgba(0,0,0,.4);
}
.pt-alert .bi{ font-size:20px; color:#ea580c; flex:0 0 auto; }
.pt-alert .pt-alert-btn{
  margin-left:auto; white-space:nowrap; background:#ea580c; color:#fff; text-decoration:none;
  font-weight:800; font-size:13px; padding:8px 14px; border-radius:999px;
}

/* Tarjeta blanca genérica (Mi cuenta / Historial / Ayuda) */
.pt-card{
  background:#fff; border-radius:18px; padding:22px;
  box-shadow:0 22px 50px -26px rgba(16,24,55,.5);
}
.pt-card + .pt-card{ margin-top:16px; }
.pt-card h3{ font-size:17px; font-weight:800; margin:0 0 14px; color:var(--pt-ink); }
/* Tarjeta blanca como fieldset: la leyenda (.pt-cap) va como CHIP azul tenue sobre la línea del borde */
.pt-card-fs{ border:1.5px solid #e6eaf4; padding:20px 22px 22px; min-inline-size:0; }
.pt-cap{ float:none; width:auto; margin-left:14px; padding:4px 12px; border-radius:999px;
  font-size:12.5px; font-weight:800; color:var(--pt-navy); background:#e9eeff;
  box-shadow:0 3px 8px -5px rgba(16,24,55,.4); }
.pt-cap b{ color:var(--pt-navy); }

/* Título simple dentro de la tarjeta de historial (sin chip) */
.pt-hist-cap{ font-size:13.5px; font-weight:600; color:var(--pt-muted); margin:0 0 14px; }
.pt-hist-cap b{ color:var(--pt-navy); }

/* Selector de líneas */
.pt-lines{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 18px; }
.pt-line{
  display:flex; align-items:center; gap:8px; cursor:pointer; border:1.5px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.14); color:#fff; font-weight:700; font-size:13.5px;
  padding:8px 14px; border-radius:999px; backdrop-filter:blur(4px); transition:.15s;
}
.pt-line.is-active{ background:#fff; color:var(--pt-navy); border-color:#fff; }
.pt-line .bi{ opacity:.85; }
.pt-line .pt-l-ok{ color:#22c55e; opacity:1; }      /* línea vinculada */
.pt-line .pt-l-no{ color:#fbbf24; opacity:1; }      /* línea sin vincular */

/* ── Estado de vinculación de la línea seleccionada ── */
.pt-vinc{ display:flex; align-items:center; gap:13px; border-radius:14px; padding:14px 16px; margin:0 0 16px;
  font-size:14px; font-weight:600; box-shadow:0 14px 34px -22px rgba(0,0,0,.5); }
.pt-vinc .bi{ font-size:24px; flex:0 0 auto; }
.pt-vinc-ok{ background:#dcfce7; color:#166534; }
.pt-vinc-ok .bi{ color:#16a34a; }
.pt-vinc-no{ background:#fff7ed; color:#9a3412; }
.pt-vinc-no .bi{ color:#ea580c; }
.pt-vinc .pt-vinc-cta{ margin-left:auto; white-space:nowrap; background:#ea580c; color:#fff; text-decoration:none;
  font-weight:800; font-size:13px; padding:9px 16px; border-radius:999px; }
.pt-vinc small{ display:block; font-weight:500; opacity:.85; margin-top:1px; }
@media (max-width:560px){ .pt-vinc{ flex-wrap:wrap; } .pt-vinc .pt-vinc-cta{ margin-left:0; } }

/* Tabla simple (historial / datos) */
.pt-table{ width:100%; border-collapse:collapse; font-size:14px; }
.pt-table th{ text-align:left; color:var(--pt-muted); font-weight:700; font-size:12px;
  text-transform:uppercase; letter-spacing:.04em; padding:10px 12px; border-bottom:2px solid var(--pt-line); }
.pt-table td{ padding:12px; border-bottom:1px solid #eef1f8; }
.pt-table tbody tr{ border-radius:10px; transition:background .12s; }
.pt-table tbody tr:nth-child(odd){ background:#f4f7fd; }          /* entrelineado: registro por registro */
.pt-table tbody tr:nth-child(even){ background:#fff; }
.pt-table tbody tr:hover{ background:#e8eefc; }
.pt-table tbody tr:last-child td{ border-bottom:0; }
.pt-table .pt-amount{ font-weight:800; color:var(--pt-navy); white-space:nowrap; }
.pt-kv{ display:grid; grid-template-columns:170px 1fr; gap:0; }
.pt-kv > div{ padding:11px 10px; border-bottom:1px solid var(--pt-line); }
.pt-kv .pt-k{ color:var(--pt-muted); font-weight:700; }
@media (max-width:560px){ .pt-kv{ grid-template-columns:1fr; } .pt-kv .pt-k{ border-bottom:0; padding-bottom:0; } }

/* Formulario editable (domicilio) */
.pt-form{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
.pt-field{ display:flex; flex-direction:column; gap:6px; }
.pt-field-wide{ grid-column:1 / -1; }
.pt-field-lbl{ font-size:12.5px; font-weight:700; color:var(--pt-muted); }
.pt-input{ width:100%; padding:11px 13px; border-radius:11px; border:1.5px solid var(--pt-line);
  background:#fff; font-family:inherit; font-size:14.5px; font-weight:600; color:var(--pt-ink); }
.pt-input:focus{ outline:none; border-color:var(--pt-blue); box-shadow:0 0 0 3px rgba(58,68,176,.16); }
.pt-save-msg{ font-size:13px; font-weight:700; }
.pt-save-msg.is-ok{ color:#16a34a; }
.pt-save-msg.is-err{ color:#dc2626; }
/* Botón de acción destructiva */
.pt-btn.pt-btn-danger{ background:linear-gradient(180deg,#ef4444,#b91c1c); color:#fff; box-shadow:0 10px 22px -8px rgba(185,28,28,.5); }

/* Modal de confirmación (diseño propio, sin el confirm() del navegador) */
.pt-confirm{ position:fixed; inset:0; z-index:1200; background:rgba(9,13,40,.55); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; padding:20px; }
.pt-confirm-card{ background:#fff; border-radius:18px; max-width:380px; width:100%; padding:24px 22px 20px;
  box-shadow:0 30px 70px -25px rgba(7,11,38,.7); text-align:center; }
.pt-confirm-ic{ width:52px; height:52px; margin:0 auto 12px; border-radius:50%; background:#fef2f2; color:#dc2626;
  display:flex; align-items:center; justify-content:center; font-size:24px; }
.pt-confirm-msg{ font-size:14.5px; font-weight:600; color:var(--pt-ink); line-height:1.5; margin:0 0 18px; }
.pt-confirm-btns{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* Lista de huellas (dispositivos) activadas */
.pt-passkeys{ display:flex; flex-direction:column; gap:8px; margin-bottom:4px; }
.pt-passkey{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  background:#f4f7fd; border:1px solid var(--pt-line); border-radius:11px; padding:9px 12px; }
.pt-passkey-dev{ font-size:13.5px; font-weight:700; color:var(--pt-ink); display:flex; align-items:center; gap:8px; }
.pt-passkey-dev small{ font-weight:600; color:var(--pt-muted); }
.pt-passkey .bi-fingerprint{ color:var(--pt-blue); font-size:16px; }
@media (max-width:560px){ .pt-form{ grid-template-columns:1fr; } }

/* Botones de acción */
.pt-btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:0; font-family:inherit;
  font-weight:800; font-size:14px; color:#fff; text-decoration:none;
  background:linear-gradient(180deg,var(--pt-blue),var(--pt-navy-2));
  padding:11px 18px; border-radius:12px; box-shadow:0 10px 22px -8px rgba(22,26,107,.55);
}
.pt-btn.pt-btn-ghost{ background:#fff; color:var(--pt-navy); border:1.5px solid var(--pt-line); box-shadow:none; }
.pt-btn.pt-btn-sm{ padding:7px 13px; font-size:13px; box-shadow:none; }

/* Nota informativa bajo una tarjeta */
.pt-note{ display:flex; align-items:flex-start; gap:8px; margin:14px 0 0; padding:0;
  font-size:12.5px; color:var(--pt-muted); line-height:1.5; }
.pt-note .bi{ color:#94a3b8; margin-top:1px; flex:0 0 auto; }

/* ── Estado de línea: plan vigente + consumo ── */
.pt-plan-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  flex-wrap:wrap; padding-bottom:16px; border-bottom:1px solid var(--pt-line); margin-bottom:16px; }
.pt-plan-name{ font-size:18px; font-weight:800; color:var(--pt-ink); margin:8px 0 0; }
.pt-plan-vig{ text-align:right; display:flex; flex-direction:column; align-items:flex-end; line-height:1.05; }
.pt-plan-vig-d{ font-size:30px; font-weight:800; color:var(--pt-navy); }
.pt-plan-vig-l{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--pt-muted); }
.pt-plan-vig-f{ font-size:12px; color:var(--pt-muted); margin-top:3px; }

.pt-stats{ display:grid; gap:16px; }
.pt-stat-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.pt-stat-name{ font-size:13.5px; font-weight:700; color:var(--pt-ink); }
.pt-stat-name .bi{ color:var(--pt-muted); margin-right:4px; }
.pt-stat-val{ font-size:13px; color:var(--pt-muted); }
.pt-stat-val b{ color:var(--pt-ink); font-size:15px; }
.pt-bar{ height:9px; border-radius:999px; background:#eef1f8; overflow:hidden; }
.pt-bar-fill{ display:block; height:100%; border-radius:999px; transition:width .5s ease; }

/* Redes sociales: mismo formato de barra que Datos/Minutos/SMS (fuera del grid .pt-stats,
   por eso lleva su propio margin-top). */
.pt-stat-redes{ margin-top:16px; }
.pt-stat-redes-icons{ margin-top:10px; }

/* Bloque "Planes en promoción" bajo la tarjeta de estado (reusa .sc-grid/.sc-card de disenoplanes/). */
.pt-promos-recarga{ margin-top:18px; }
.pt-promos-recarga .pt-plan-name{ margin-bottom:14px; }
.pt-promos-recarga .pt-plan-name .bi{ color:var(--pt-accent, #f5b400); margin-right:6px; }
.pt-plan-foot{ margin-top:18px; padding-top:16px; border-top:1px solid var(--pt-line);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

.pt-card-empty{ text-align:center; }
.pt-card-empty .bi{ font-size:38px; color:#cbd5e1; }
.pt-card-empty h3{ margin:8px 0 4px; }
.pt-card-empty p{ color:var(--pt-muted); margin:0 0 16px; }

/* Spinner */
.pt-spin{ display:inline-block; width:16px; height:16px; vertical-align:-3px; margin-right:7px;
  border:2px solid #c7d0e6; border-top-color:var(--pt-navy); border-radius:50%; animation:pt-rot .7s linear infinite; }
@keyframes pt-rot{ to{ transform:rotate(360deg); } }

/* Estado de cuenta (placeholder mientras se confirma endpoint Altan) */
.pt-soon{ color:var(--pt-muted); font-style:italic; }

/* ── Cartitas de categoría (vigencias), estilo web ── */
.pt-cattabs{
  display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; padding:12px; min-inline-size:0;
  background:rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.5); border-radius:18px;
  backdrop-filter:blur(4px); box-shadow:0 14px 34px -20px rgba(7,11,38,.6);
}
.pt-cattab{
  flex:1 1 auto; min-width:96px; cursor:pointer; border:0; font-family:inherit;
  display:flex; flex-direction:column; align-items:center; gap:1px; line-height:1.15;
  padding:9px 12px; border-radius:13px; background:transparent; color:var(--pt-navy);
  transition:.18s;
}
.pt-cattab:hover{ background:rgba(255,255,255,.5); color:var(--pt-navy); transform:translateY(-1px); }
.pt-cattab.is-active{
  background:linear-gradient(135deg,#fff,#eaf0ff); color:var(--pt-navy);
  transform:scale(1.03); box-shadow:0 8px 18px -8px rgba(0,0,0,.45);
}
/* Título como CHIP azul tenue sobre la línea del marco (fieldset > legend) */
.pt-cattabs-title{ float:none; width:auto; margin-left:14px; padding:4px 12px; border-radius:999px;
  font-size:12.5px; font-weight:800; color:var(--pt-navy); background:#e9eeff;
  box-shadow:0 3px 8px -5px rgba(16,24,55,.4); }
.pt-cattab-name{ font-size:14px; font-weight:800; }
.pt-cattab-dur{ font-size:10.5px; font-weight:700; opacity:.85; }

.pt-catpanel{ display:none; }
.pt-catpanel.is-active{ display:block; animation:pt-fade .2s ease; }
.pt-cat-head{ margin:0 0 14px; color:#fff; text-shadow:0 2px 8px rgba(7,11,38,.45); }
.pt-cat-title{ font-size:22px; font-weight:800; margin:0; display:flex; align-items:center; gap:10px; }
.pt-cat-pop{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  background:#ffd400; color:var(--pt-navy); border-radius:999px; padding:3px 10px; }
.pt-cat-desc{ font-size:14px; opacity:.9; margin:4px 0 0; }

/* ── Chips de estado (validada / sin validar) ── */
.pt-chip{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:800;
  padding:3px 11px; border-radius:999px; }
.pt-chip-ok{ background:#dcfce7; color:#166534; }
.pt-chip-warn{ background:#fff7ed; color:#9a3412; }
.pt-btn-warn{ background:linear-gradient(180deg,#fb923c,#ea580c); }

/* ── Ayuda: contacto + preguntas frecuentes por tema (acordeón) ── */
.pt-help-contact{ display:flex; gap:10px; flex-wrap:wrap; }
.pt-help-theme{ margin:0 0 20px; }
.pt-help-theme > h3{ display:flex; align-items:center; gap:9px; margin:0 0 10px;
  font-size:15px; font-weight:800; color:#fff; text-shadow:0 2px 8px rgba(7,11,38,.4); }
.pt-acc{ display:flex; flex-direction:column; gap:8px; }
.pt-acc-item{ background:#fff; border-radius:12px; box-shadow:0 12px 30px -22px rgba(16,24,55,.5); }
.pt-acc-item > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px;
  padding:14px 16px; font-size:14px; font-weight:700; color:var(--pt-ink); }
.pt-acc-item > summary::-webkit-details-marker{ display:none; }
.pt-acc-chev{ margin-left:auto; color:var(--pt-blue); font-size:15px; transition:transform .2s; }
.pt-acc-item[open] > summary{ color:var(--pt-navy); }
.pt-acc-item[open] .pt-acc-chev{ transform:rotate(180deg); }
.pt-acc-body{ padding:0 16px 15px; font-size:13.5px; line-height:1.6; color:var(--pt-muted); }
.pt-acc-body b{ color:var(--pt-ink); font-weight:700; }
.pt-help-link{ display:inline-block; margin-top:6px; font-weight:800; color:var(--pt-blue); text-decoration:none; }
.pt-help-link:hover{ text-decoration:underline; }
.pt-help-vence{ display:inline-flex; align-items:center; gap:5px; margin-left:6px; font-weight:700;
  color:var(--pt-blue); white-space:nowrap; }

/* ── Login del portal ── */
.pt-login-body{ align-items:center; justify-content:center; padding:24px 16px; }
.pt-login-wrap{ width:100%; max-width:400px; margin:auto; }
.pt-login-card{ background:#fff; border-radius:20px; padding:30px 26px 26px;
  box-shadow:0 30px 70px -30px rgba(7,11,38,.65); display:flex; flex-direction:column; }
.pt-login-brand{ display:flex; justify-content:center; margin-bottom:14px; }
.pt-login-brand img{ height:44px; width:auto; object-fit:contain; }
.pt-login-title{ text-align:center; font-size:24px; font-weight:800; color:var(--pt-navy); margin:0 0 3px; }
.pt-login-sub{ text-align:center; font-size:13.5px; color:var(--pt-muted); margin:0 0 20px; }
.pt-login-input{ font-size:15px; }
.pt-login-pass{ position:relative; display:flex; align-items:center; }
.pt-login-eye{ position:absolute; right:8px; border:0; background:transparent; cursor:pointer;
  color:var(--pt-muted); font-size:17px; padding:6px; line-height:1; }
.pt-login-btn{ justify-content:center; width:100%; margin-top:20px; padding:13px; font-size:15px; }
.pt-login-err{ display:flex; align-items:flex-start; gap:8px; background:#fef2f2; color:#b91c1c;
  border:1px solid #fecaca; border-radius:11px; padding:10px 12px; font-size:13px; font-weight:600; margin-bottom:16px; }
.pt-login-ok{ display:flex; align-items:flex-start; gap:8px; background:#ecfdf5; color:#047857;
  border:1px solid #a7f3d0; border-radius:11px; padding:10px 12px; font-size:13px; font-weight:600; margin-bottom:16px; }
.pt-login-forgot{ text-align:center; margin-top:16px; font-size:13px; font-weight:700;
  color:var(--pt-blue); text-decoration:none; }
.pt-login-forgot:hover{ text-decoration:underline; }
.pt-login-foot{ text-align:center; margin:18px 0 0; font-size:12px; color:rgba(255,255,255,.85); font-weight:600; }
@media (max-width:560px){
  .pt-login-card{ padding:26px 20px 22px; border-radius:18px; }
}
/* Pestañas de recuperación (correo / SMS) */
.pt-tabsel{ display:flex; gap:6px; background:#eef1f8; border-radius:12px; padding:4px; margin:0 0 16px; }
.pt-tabsel-btn{ flex:1; border:0; cursor:pointer; font-family:inherit; font-size:13.5px; font-weight:800;
  color:var(--pt-muted); background:transparent; padding:9px 8px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center; gap:7px; transition:.15s; }
.pt-tabsel-btn.is-active{ background:#fff; color:var(--pt-navy); box-shadow:0 4px 10px -5px rgba(16,24,55,.4); }
.pt-tabpane{ display:none; }
.pt-tabpane.is-active{ display:block; }
.pt-tab-note{ font-size:12px; color:var(--pt-muted); margin:12px 0 0; display:flex; gap:6px; align-items:flex-start; }
.pt-code{ text-align:center; letter-spacing:.5em; font-size:20px; font-weight:800; }

/* Recuperar dentro del modal del login (iframe): sin fondo ni alto forzado, solo la tarjeta */
.pt-embed{ min-height:0; display:block; background:transparent; padding:0; }
.pt-embed.pt-login-body{ padding:2px; }
.pt-embed .pt-login-wrap{ max-width:100%; margin:0; }
.pt-embed .pt-login-foot{ display:none; }

/* ── Afinado MÓVIL del contenido ── */
@media (max-width:560px){
  .pt-wrap{ padding:16px 12px 32px; }
  .pt-card{ padding:16px; border-radius:14px; }
  .pt-h2{ font-size:21px; }
  .pt-cat-title{ font-size:19px; }
  .pt-table{ font-size:13px; }
  .pt-table th, .pt-table td{ padding:9px 7px; }
  /* Selector de líneas: una fila deslizable en vez de apilar */
  .pt-lines{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .pt-lines::-webkit-scrollbar{ display:none; }
  .pt-line{ flex:0 0 auto; }
  /* Banner de validación: que el botón baje en vez de apretarse */
  .pt-alert{ flex-wrap:wrap; }
  .pt-alert .pt-alert-btn{ margin-left:0; }
}

/* ── Mi cuenta: tarjetas en ACORDEÓN (details/summary) ── */
.pt-acc-card{ padding:0; overflow:hidden; }
.pt-acc-card > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:18px 22px; }
.pt-acc-card > summary::-webkit-details-marker{ display:none; }
.pt-acc-h{ font-size:17px; font-weight:800; color:var(--pt-ink); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pt-acc-card > summary .pt-acc-chev{ margin-left:auto; color:var(--pt-blue); font-size:16px; transition:transform .2s; flex:0 0 auto; }
.pt-acc-card[open] > summary .pt-acc-chev{ transform:rotate(180deg); }
.pt-acc-card > summary:hover .pt-acc-h{ color:var(--pt-navy); }
.pt-acc-content{ padding:2px 22px 22px; }
@media (max-width:560px){
  .pt-acc-card{ padding:0; }
  .pt-acc-card > summary{ padding:15px 16px; }
  .pt-acc-content{ padding:2px 16px 16px; }
  .pt-acc-h{ font-size:16px; }
}