/* TsBot — panel (login, 2FA, invitación, vista de superusuario). Usa los tokens de site.css. */
[hidden] { display: none !important; }
.pn { padding-top: 48px; padding-bottom: 88px; min-height: calc(100vh - 80px); }
.pn-loading { margin: 0; padding: 96px 0; text-align: center; font: 500 13px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }

/* acceso: tarjeta + ilustración */
/* acceso: mascota y «Acceso protegido» a la IZQUIERDA, el formulario a la derecha (en el teléfono la mascota se oculta
   y el formulario queda primero) */
.pn-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 64px; align-items: center; min-height: calc(100vh - 80px - 136px); }
.pn-auth > .pn-side { order: -1; }
.pn-card { padding: 36px 36px 32px; display: flex; flex-direction: column; gap: 18px; border-color: #22394a; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.pn-card-wide { max-width: 560px; }
.pn-auth:has(.pn-card-wide) { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); }
.pn-card h1 { font-size: clamp(30px, 3vw, 40px); line-height: 1.08; font-weight: 700; }
.pn-lead { margin: 0; color: var(--muted); font-size: 16px; }
.pn-email { color: var(--text-strong); font-weight: 600; word-break: break-all; }
.pn-form { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
.pn-field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 500; color: var(--soft); }
.pn-field input { width: 100%; font: 400 16px/1.25 var(--body); color: var(--text-strong); background: var(--bg-2); border: 1px solid var(--line-3); border-radius: 10px; padding: 14px 16px; outline: none; transition: border-color .15s, box-shadow .15s; }
.pn-field input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34,188,214,.18); }
.pn-code input { font: 600 26px/1 var(--mono); letter-spacing: .38em; text-align: center; padding: 16px 12px; }
.pn-code.is-recovery input { font-size: 18px; letter-spacing: .12em; }
.pn-submit { width: 100%; margin-top: 4px; }
.pn-submit:disabled { opacity: .55; cursor: not-allowed; }
.pn-msg { margin: 0; padding: 11px 14px; border-radius: 10px; font-size: 14px; line-height: 1.45; background: var(--accent-bg); border: 1px solid var(--accent-line); color: #ffd2c6; }
.pn-fine { margin: 0; font-size: 13px; color: var(--muted-2); }
.pn-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pn-link { background: none; border: 0; padding: 4px 0; font: 500 14px/1.3 var(--body); color: var(--cyan); cursor: pointer; }
.pn-link:hover { color: var(--cyan-soft); }
.pn-link-muted { color: var(--muted-2); }
.pn-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.pn-side { position: relative; min-height: 520px; display: flex; align-items: flex-end; justify-content: center; }
.pn-side .glow { top: 40%; }
.pn-mascot { position: absolute; left: 50%; top: 0; width: min(300px, 62%); transform: translateX(-50%); animation: float 6s ease-in-out infinite; }
.pn-points { position: relative; width: min(360px, 100%); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 20px 50px rgba(0,0,0,.5); border-color: #22394a; }
.pn-point { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--soft); }
.pn-point i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); flex-shrink: 0; }

/* invitación */
.pn-steps { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pn-steps li { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 2px solid var(--line-3); font-size: 13px; color: var(--muted-2); }
.pn-steps b { font: 500 12px/1 var(--mono); color: var(--muted-2); }
.pn-steps li.is-done { border-top-color: var(--teal); color: var(--soft); }
.pn-steps li[aria-current="step"] { border-top-color: var(--accent); color: var(--text-strong); }
.pn-steps li[aria-current="step"] b { color: var(--accent-soft); }
.pn-step { display: flex; flex-direction: column; gap: 16px; }
.pn-step .btn { align-self: flex-start; }
.pn-step .pn-submit { align-self: stretch; }
.pn-enroll { display: grid; grid-template-columns: 206px minmax(0, 1fr); gap: 20px; align-items: start; }
.pn-qr { background: #fff; border-radius: 12px; padding: 8px; width: 206px; height: 206px; }
.pn-qr img { display: block; width: 190px; height: 190px; image-rendering: pixelated; }
.pn-secret { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pn-secret > code { font: 500 16px/1.6 var(--mono); color: var(--cyan-soft); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 14px; word-break: normal; overflow-wrap: anywhere; user-select: all; }
.pn-details summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.pn-details code { display: block; margin-top: 8px; font: 500 12px/1.5 var(--mono); color: var(--muted); word-break: break-all; user-select: all; }
.pn-codes { list-style: none; margin: 0; padding: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px; counter-reset: rc; }
.pn-codes li { font: 500 16px/1.4 var(--mono); color: var(--text-strong); counter-increment: rc; display: flex; gap: 10px; }
.pn-codes li::before { content: counter(rc, decimal-leading-zero); color: var(--muted-2); font-size: 12px; line-height: 1.9; }
.pn-check { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--soft); cursor: pointer; }
.pn-check input { width: 18px; height: 18px; accent-color: var(--cyan); }

/* vista de superusuario */
.pn-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.pn-head h1 { font-size: clamp(34px, 3.6vw, 48px); line-height: 1.05; font-weight: 700; margin-top: 12px; }
.pn-user { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pn-user-email { font: 500 13px/1 var(--mono); color: var(--muted); padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#app-msg { margin-bottom: 20px; }
.pn-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.pn-kpi { padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pn-kpi b { font: 700 40px/1.05 var(--display); color: var(--text-strong); }
.pn-kpi b .unit { font: 500 16px/1 var(--mono); color: var(--muted-2); margin-left: 8px; }
.pn-kpi small { font-size: 13px; color: var(--muted-2); }
.pn-kpi-hot { border-color: var(--accent-line); background: linear-gradient(180deg, #1a0f0b 0%, var(--surface) 100%); }
.pn-kpi-hot b { color: var(--accent-soft); }
.pn-table-card { padding: 6px 0 20px; overflow: hidden; }
.pn-table-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; flex-wrap: wrap; }
.pn-table-head h2 { font-size: 22px; font-weight: 600; }
.pn-legend { display: flex; gap: 8px; flex-wrap: wrap; }
.pn-table-wrap { overflow-x: auto; }
.pn-table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 15px; }
.pn-table th { text-align: left; font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); padding: 12px 16px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.pn-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
.pn-table th:first-child, .pn-table td:first-child { padding-left: 24px; }
.pn-table th:last-child, .pn-table td:last-child { padding-right: 24px; }
.pn-table .num { text-align: right; font-family: var(--mono); font-size: 14px; }
.pn-table th.num { font: 500 11px/1.3 var(--mono); }
.pn-table tbody tr:hover { background: rgba(34,188,214,.035); }
.pn-table tr.is-due td:first-child { box-shadow: inset 3px 0 0 var(--accent-soft); }
.pn-table tr.is-over td:first-child { box-shadow: inset 3px 0 0 #ff4d4d; }
.pn-table tr.is-off td { opacity: .5; }
.pn-name b { display: block; font-weight: 600; color: var(--text-strong); }
.pn-name span { font-size: 13px; color: var(--muted-2); }
.pn-table .mono { font-size: 14px; }
.pn-empty-row td { text-align: center; color: var(--muted-2); padding: 36px 16px; }
.pn-table-fine { padding: 16px 24px 0; }
.pill { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--mono); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line-3); color: var(--soft); white-space: nowrap; }
.pill-ok { color: var(--cyan-soft); border-color: var(--teal-line); background: var(--teal-deep); }
.pill-due { color: #ffd2c6; border-color: #b8401a; background: var(--accent-bg); }
.pill-over { color: #ffd6d6; border-color: #a52a2a; background: #2b0d0d; }
.pill-free { color: #cfe7ee; border-color: #1d3a47; background: #0b1820; }
.pill-off { color: var(--muted-2); }
/* Plan y extras (superusuario › Instancias) */
.pn-plan-note { font-size: 13px; line-height: 1.45; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--teal-line); background: var(--teal-deep); color: var(--cyan-soft); }
.pn-plan-note.is-legacy { border-color: #b8401a; background: var(--accent-bg); color: #ffd2c6; }
.pn-plan-use { margin: -4px 0 6px 30px; font-size: 12px; line-height: 1.4; color: var(--muted-2); }
.pn-empty { padding: 56px 32px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.pn-empty img { width: 120px; }
.pn-empty h2 { font-size: 28px; font-weight: 700; }

/* ───────── panel del superusuario: barra lateral + páginas (lote 1 de TsBot Control) ───────── */
.pn-stepup { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--mono); color: var(--cyan-soft); padding: 11px 12px; border: 1px solid var(--teal-line); border-radius: 10px; background: var(--teal-deep); }
.pn-stepup .dot { animation: pulse 1.6s ease-in-out infinite; }
.pn-shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 28px; align-items: start; }
.pn-sidenav { position: sticky; top: 104px; }
.pn-nav { display: flex; flex-direction: column; gap: 2px; padding: 10px; border: 1px solid var(--line-2); border-radius: 16px; background: linear-gradient(180deg, #0f1821 0%, var(--surface) 60%); box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.pn-nav-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; color: var(--soft); font-size: 15px; font-weight: 500; line-height: 1.2; transition: background .15s, color .15s; }
.pn-nav-item svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--muted-2); transition: color .15s; }
a.pn-nav-item:hover { background: rgba(34,188,214,.06); color: var(--text-strong); }
a.pn-nav-item:hover svg { color: var(--cyan); }
.pn-nav-item[aria-current="page"] { color: var(--text-strong); background: linear-gradient(90deg, rgba(34,188,214,.16), rgba(34,188,214,.02)); box-shadow: inset 3px 0 0 var(--cyan); }
.pn-nav-item[aria-current="page"] svg { color: var(--cyan); filter: drop-shadow(0 0 6px rgba(34,188,214,.55)); }
.pn-nav-item.is-soon { opacity: .42; cursor: not-allowed; font-size: 14px; padding-top: 8px; padding-bottom: 8px; }
.pn-nav-sep { margin: 16px 12px 6px; font: 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.pn-nav-badge { margin-left: auto; min-width: 22px; text-align: center; font: 600 11px/1 var(--mono); color: #fff; background: var(--accent); padding: 5px 7px; border-radius: 999px; box-shadow: 0 0 12px rgba(217,54,12,.55); }
.pn-main { min-width: 0; }
.pn-page { animation: pnIn .28s ease-out; }
@keyframes pnIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* pestañas y barra de herramientas */
.pn-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.pn-toolbar-end { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pn-tabs { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg-2); overflow-x: auto; max-width: 100%; scrollbar-width: thin; }
.pn-tab { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1 var(--body); padding: 11px 14px; border: 0; border-radius: 9px; background: none; color: var(--muted); white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.pn-tab:hover { color: var(--text-strong); }
.pn-tab[aria-selected="true"] { background: var(--surface); color: var(--text-strong); box-shadow: inset 0 0 0 1px var(--line-3), 0 0 18px rgba(34,188,214,.08); }
.pn-tab-count { font: 600 11px/1 var(--mono); color: #fff; background: var(--accent); padding: 4px 6px; border-radius: 999px; }
.pn-scrape { font: 500 12px/1.3 var(--mono); color: var(--muted-2); }
.pn-scrape.is-run { color: var(--cyan-soft); }
.pn-scrape.is-run::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--cyan); animation: pulse 1.2s ease-in-out infinite; }
.pn-btn-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pn-btn-icon:disabled svg { animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-danger { background: #a3281a; color: #fff; }
.btn-danger:hover { background: #c33222; color: #fff; }
.pn-btn-bad { color: #ffb3a6; }

/* tablas de los módulos */
.pn-table-head .pn-fine { flex-basis: 100%; max-width: 900px; }
.pn-table.pn-table-auto { min-width: 780px; }
.pn-table-auto td { white-space: normal; }
.pn-table .pn-actions-col { text-align: right; }
.pn-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.pn-actions .btn, .pn-btn-xs { font-size: 13px; padding: 8px 11px; border-radius: 8px; }
.pn-table td.pn-actions-cell { min-width: 150px; }
.pn-stack { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; min-width: 0; }
.pn-stack b { font-weight: 600; color: var(--text-strong); }
.pn-stack span { font-size: 13px; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pn-table td.pn-nowrap { white-space: nowrap; }
.pn-table.pn-audit { min-width: 900px; }
.pn-audit td.pn-user-cell { min-width: 140px; }
.pn-audit td.pn-detail { min-width: 200px; }
.pn-cols { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pn-dim { color: var(--muted-2); }
.pn-detail { font: 500 12px/1.5 var(--mono); color: var(--muted); max-width: 360px; overflow-wrap: anywhere; }
.pn-user-cell { font: 500 12px/1.4 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.pn-wa { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pn-wa .mono { font-size: 13px; letter-spacing: .02em; }
.pn-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pn-kpi b.pn-kpi-sm { font-size: 22px; }
.pn-search { font: 400 14px/1.2 var(--body); color: var(--text-strong); background: var(--bg-2); border: 1px solid var(--line-3); border-radius: 10px; padding: 11px 14px; min-width: 260px; outline: none; }
.pn-search:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34,188,214,.18); }
.pn-more { display: flex; justify-content: center; padding: 16px 24px 0; }
.pn-more:has(> [hidden]) { display: none; }

/* formularios de los módulos */
.pn-field select, .pn-field textarea { width: 100%; font: 400 16px/1.35 var(--body); color: var(--text-strong); background: var(--bg-2); border: 1px solid var(--line-3); border-radius: 10px; padding: 12px 14px; outline: none; transition: border-color .15s, box-shadow .15s; }
.pn-field textarea { resize: vertical; min-height: 44px; font-size: 14px; }
.pn-field select:focus, .pn-field textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34,188,214,.18); }
.pn-field-sm { font-size: 13px; gap: 6px; }
.pn-field-sm input, .pn-field-sm select { font-size: 15px; padding: 0 13px; height: 46px; }
.pn-field-sm input[type=checkbox] { height: auto; }
.pn-help { font-size: 12px; color: var(--muted-2); }
.pn-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.pn-form-card { padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pn-form-card h2 { font-size: 20px; font-weight: 600; }
.pn-grid-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.pn-row-between { justify-content: space-between; }
.pn-tpl-lang button { font-size: 12px; }
.pn-tpl-fields { display: flex; flex-direction: column; gap: 10px; }
.pn-fine.is-ok { color: var(--cyan-soft); }
.pn-fine.is-warn { color: #ffb3a6; }
.pn-switch { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--soft); cursor: pointer; }
.pn-switch input { appearance: none; -webkit-appearance: none; position: relative; flex-shrink: 0; width: 42px; height: 24px; margin: 0; border-radius: 999px; background: var(--line-3); cursor: pointer; transition: background .18s; }
.pn-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #dfe7ee; transition: transform .18s; }
.pn-switch input:checked { background: var(--teal); box-shadow: 0 0 14px rgba(0,124,153,.55); }
.pn-switch input:checked::after { transform: translateX(18px); background: #fff; }
.pn-switch input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.pn-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; padding: 18px 20px; margin-bottom: 18px; }
.pn-filters .pn-field { min-width: 160px; }
.pn-filters .pn-grow { flex: 1 1 220px; }
.pn-preview { margin-top: 18px; padding-bottom: 18px; }
.pn-preview-body { padding: 0 24px; display: flex; flex-direction: column; gap: 12px; }
.pn-preview-body h3 { font-size: 16px; margin-top: 6px; }
.pn-msgcard { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg-2); }
.pn-msgcard pre { margin: 4px 0 0; font: 500 13px/1.55 var(--mono); color: var(--soft); white-space: pre-wrap; overflow-wrap: anywhere; }
.pn-list { margin: 0; padding-left: 18px; color: var(--soft); font-size: 14px; }

/* diálogos */
.pn-dlg { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; color: var(--text); background: var(--surface); border: 1px solid #22394a; border-radius: 18px; box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 0 1px rgba(34,188,214,.06); }
.pn-dlg-sm { width: min(440px, calc(100vw - 32px)); }
.pn-dlg[open] { animation: pnDlg .2s ease-out; }
@keyframes pnDlg { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.pn-dlg::backdrop { background: rgba(3,6,10,.72); backdrop-filter: blur(4px); }
.pn-dlg-form { display: flex; flex-direction: column; gap: 14px; padding: 26px 26px 22px; max-height: calc(100dvh - 50px); overflow-y: auto; }
.pn-dlg h2 { font-size: 24px; font-weight: 700; line-height: 1.15; }
.pn-dlg-lead { font-size: 14px; }
.pn-dlg-body { display: flex; flex-direction: column; gap: 12px; }
.pn-dlg-info { font-size: 14px; color: var(--soft); }
.pn-dlg-info.is-warn { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--accent-line); background: var(--accent-bg); color: #ffd2c6; }
.pn-dlg-info.is-ok { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--teal-line); background: var(--teal-deep); color: var(--cyan-soft); }
.pn-dlg-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.pn-mini-wrap { max-height: 50vh; overflow: auto; border: 1px solid var(--line-2); border-radius: 12px; }
.pn-mini { width: 100%; border-collapse: collapse; font-size: 14px; }
.pn-mini th { text-align: left; font: 500 10px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); padding: 10px 12px; border-bottom: 1px solid var(--line-2); position: sticky; top: 0; background: var(--surface); }
.pn-mini td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pn-mini-actions { white-space: nowrap; text-align: right; }
.pn-mini-actions .btn { font-size: 12px; padding: 6px 9px; border-radius: 7px; margin-left: 4px; }
.pn-linkbox { display: flex; gap: 8px; }
.pn-linkbox input { flex: 1; min-width: 0; font: 500 13px/1.3 var(--mono); color: var(--cyan-soft); background: var(--bg-2); border: 1px solid var(--line-3); border-radius: 10px; padding: 11px 12px; }
.pn-toast { position: fixed; right: 20px; bottom: 20px; z-index: 50; max-width: min(420px, calc(100vw - 40px)); padding: 14px 18px; border-radius: 12px; font-size: 14px; color: var(--text-strong); background: #0f1a23; border: 1px solid var(--teal-line); box-shadow: inset 3px 0 0 var(--cyan), 0 20px 50px rgba(0,0,0,.55); animation: pnIn .2s ease-out; }
.pn-toast.is-bad { border-color: var(--accent-line); box-shadow: inset 3px 0 0 var(--accent-soft), 0 20px 50px rgba(0,0,0,.55); }

/* solicitudes de servidor */
.pn-req-row { cursor: pointer; }
.pn-req-table .pn-stack b { white-space: nowrap; }
.pn-req-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.pn-req-tag { font: 500 11px/1 var(--mono); padding: 5px 8px; border-radius: 999px; color: var(--cyan-soft); border: 1px solid var(--teal-line); background: rgba(11,35,48,.7); white-space: nowrap; }
.pn-req-detail { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.pn-req-main { padding: 26px 28px; display: flex; flex-direction: column; gap: 20px; min-width: 0;
  background: radial-gradient(ellipse at 0% 0%, rgba(0,124,153,.18), transparent 55%), var(--surface); border-color: #22394a; }
.pn-req-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.pn-req-hero > div:first-child { display: flex; flex-direction: column; gap: 6px; }
.pn-req-ref { font-size: 38px; line-height: 1; letter-spacing: .06em; color: var(--text-strong); text-shadow: 0 0 20px rgba(34,188,214,.35); }
.pn-req-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pn-req-facts > div, .pn-req-contact > div { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-2); min-width: 0; }
.pn-req-facts b, .pn-req-contact b { font: 600 20px/1.2 var(--display); color: var(--text-strong); overflow-wrap: anywhere; }
.pn-req-extras { display: flex; flex-wrap: wrap; gap: 8px; }
.pn-req-extras .pn-req-tag { font-size: 12px; padding: 7px 11px; }
.pn-req-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pn-req-msg-wrap { display: flex; flex-direction: column; gap: 8px; }
.pn-req-msg { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-2); font-size: 15px; color: var(--soft); white-space: pre-wrap; overflow-wrap: anywhere; }
.pn-req-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pn-req-actions .btn { flex: 1 1 auto; }
.pn-soon-wrap { display: inline-flex; cursor: not-allowed; align-self: flex-start; }
.pn-soon-wrap .btn { pointer-events: none; }
.pn-req-next { border-style: dashed; }
.pn-req-facts > .pn-req-wide { grid-column: 1 / -1; }
.pn-req-bot { display: flex; flex-direction: column; gap: 10px; }
.pn-req-war { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.pn-req-war > div { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-2); min-width: 0; }
.pn-req-war b { font: 600 18px/1.2 var(--display); color: var(--text-strong); overflow-wrap: anywhere; }
.pn-req-tags.is-e .pn-req-tag { color: #ffd2c6; border-color: var(--accent-line); background: rgba(42,19,12,.7); }
.pn-req-tag.is-warn { color: #ffd9a0; border-color: #7a5a1a; background: rgba(90,60,10,.35); }
.pn-req-tag.is-ok { color: #9ff0c0; border-color: #1f6b43; background: rgba(21,80,48,.4); }
.pn-setup { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 14px; font-size: 14px; }
.pn-setup dt { color: var(--muted-2); font: 500 12px/1.6 var(--mono); }
.pn-setup dd { margin: 0; color: var(--text-strong); overflow-wrap: anywhere; }

/* planes y precios */
.pn-prices { display: flex; flex-direction: column; gap: 18px; }
.pn-prices > .pn-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.pn-prices-lead { max-width: 720px; }
.pn-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pn-sub-h { margin: 6px 0 0; font-size: 15px; font-weight: 600; color: var(--soft); }
.pn-field input[type=number] { padding: 11px 12px; font-size: 15px; }
.pn-field-inline { max-width: 260px; }
.pn-mini-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pn-mini-table th { text-align: left; font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); padding: 0 8px 8px 0; }
.pn-mini-table td { padding: 5px 8px 5px 0; vertical-align: middle; }
.pn-mini-table input { width: 100%; font: 400 15px/1.2 var(--body); color: var(--text-strong); background: var(--bg-2); border: 1px solid var(--line-3); border-radius: 9px; padding: 9px 10px; outline: none; }
.pn-mini-table input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34,188,214,.18); }
.pn-pr-grid td, .pn-pr-grid th { text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.pn-pr-grid td:first-child, .pn-pr-grid th:first-child { text-align: left; }
.pn-pr-grid td { font-family: var(--mono); color: var(--text-strong); }
.pn-pr-grid td.is-changed { color: #ffe0a6; background: rgba(90,60,10,.22); }
.pn-pr-grid td.is-changed s { color: var(--muted-2); margin-right: 6px; font-size: 12px; }
.pn-dirty { font: 500 12px/1 var(--mono); color: #ffd9a0; padding: 6px 10px; border-radius: 999px; border: 1px solid #7a5a1a; background: rgba(90,60,10,.3); }
.pn-pr-extras td { vertical-align: middle; }
.pn-pr-extras input[type=number], .pn-pr-extras input[type=text] { width: 100%; min-width: 64px; font: 400 14px/1.2 var(--body); color: var(--text-strong); background: var(--bg-2); border: 1px solid var(--line-3); border-radius: 8px; padding: 8px 9px; outline: none; }
.pn-pr-extras input:focus { border-color: var(--cyan); }
.pn-pr-extras td:nth-child(2) input { min-width: 124px; font-family: var(--mono); font-size: 13px; }
.pn-pr-preview .pn-table-wrap { overflow-x: auto; }
.pn-pr-extras .pn-switch { gap: 0; }
.pn-pr-extras tr.is-inactive .pn-stack b { color: var(--muted-2); }
.pn-pr-extras .pn-round { display: block; font: 500 11px/1.3 var(--mono); color: #ffd9a0; margin-top: 3px; }
.pn-soon-pill { font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 999px; padding: 3px 6px; margin-left: 6px; }
@media (max-width: 1100px) {
  .pn-prices > .pn-cols { grid-template-columns: minmax(0, 1fr); }
  .pn-req-war { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .pn-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pn-pr-extras tr { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px 10px !important; }
  .pn-pr-extras td { display: flex !important; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
  .pn-pr-extras td::before { content: attr(data-label); font: 500 10px/1.2 var(--mono); text-transform: uppercase; color: var(--muted-2); }
  .pn-pr-extras td:first-child { grid-column: 1 / 3 !important; grid-row: 1; }
  .pn-pr-extras td:first-child::before { display: none; }
  .pn-pr-extras td.pn-actions-cell { grid-column: 3; grid-row: 1; align-items: flex-end; }
  .pn-pr-extras td.pn-actions-cell::before { display: none; }
  .pn-pr-extras input[type=number], .pn-pr-extras input[type=text], .pn-pr-extras td:nth-child(2) input { min-width: 0; }
  .pn-pr-grid td, .pn-pr-grid th { padding: 7px 5px; font-size: 12px; }
  .pn-pr-grid th { font-size: 10px; letter-spacing: .02em; white-space: normal; }
  .pn-pr-grid td.is-changed s { display: block; margin: 0; }
}

@media (max-width: 1100px) {
  .pn-shell { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pn-req-detail { grid-template-columns: minmax(0, 1fr); }
  .pn-sidenav { position: static; }
  .pn-nav { flex-direction: row; overflow-x: auto; padding: 6px; gap: 4px; scrollbar-width: thin; }
  .pn-nav-item { white-space: nowrap; padding: 10px 12px; }
  .pn-nav-item[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--cyan); }
  .pn-nav-sep, .pn-nav-item.is-soon { display: none; }
  .pn-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .pn-auth, .pn-auth:has(.pn-card-wide) { grid-template-columns: 1fr; min-height: 0; justify-items: center; }
  .pn-card { width: 100%; max-width: 560px; }
  .pn-side { display: none; }
  .pn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .pn { padding-top: 28px; }
  .pn-card { padding: 26px 20px 24px; }
  .pn-enroll { grid-template-columns: 1fr; justify-items: center; }
  .pn-secret { width: 100%; }
  .pn-codes { grid-template-columns: 1fr; }
  .pn-kpis { gap: 12px; }
  .pn-kpi { padding: 16px; }
  .pn-kpi b { font-size: 30px; }
  .pn-head { align-items: flex-start; }
  .pn-user-email { max-width: 100%; }
  .pn-table-head, .pn-table-fine { padding-left: 16px; padding-right: 16px; }
  /* en el teléfono cada instancia es una tarjeta (la etiqueta sale de data-label) */
  .pn-table { min-width: 0; }
  .pn-table thead { display: none; }
  .pn-table, .pn-table tbody, .pn-table td { display: block; }
  .pn-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 16px; border-bottom: 1px solid var(--line); }
  .pn-table td, .pn-table td:first-child, .pn-table td:last-child { padding: 0; border: 0; white-space: normal; }
  .pn-table td.num { text-align: left; }
  .pn-table td::before { content: attr(data-label); display: block; margin-bottom: 4px; font: 500 10px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
  .pn-table td.pn-name { grid-column: 1 / -1; }
  .pn-table td.pn-name::before { display: none; }
  .pn-table tr.is-due td:first-child, .pn-table tr.is-over td:first-child { box-shadow: none; }
  .pn-table tr.is-due { box-shadow: inset 3px 0 0 var(--accent-soft); }
  .pn-table tr.is-over { box-shadow: inset 3px 0 0 #ff4d4d; }
  .pn-empty-row { display: block !important; }
  .pn-empty-row td::before { display: none; }
  /* módulos del superusuario en el teléfono */
  .pn-table.pn-table-auto, .pn-table.pn-audit { min-width: 0; }
  .pn-audit td.pn-user-cell, .pn-audit td.pn-detail { min-width: 0; }
  .pn-table td.pn-nowrap { white-space: normal; }
  .pn-table td.pn-actions-cell { grid-column: 1 / -1; min-width: 0; }
  .pn-table td.pn-actions-cell:empty { display: none; }
  .pn-actions { justify-content: flex-start; }
  .pn-detail { max-width: none; grid-column: 1 / -1; }
  .pn-toolbar { flex-direction: column; align-items: stretch; }
  .pn-toolbar-end { justify-content: space-between; }
  .pn-kpis-3 { grid-template-columns: 1fr; }
  .pn-grid-fields { grid-template-columns: 1fr; }
  .pn-form-card { padding: 18px 16px; }
  .pn-filters { padding: 14px 16px; }
  .pn-filters .pn-field, .pn-filters .btn { flex: 1 1 100%; min-width: 0; }
  .pn-search { min-width: 0; width: 100%; }
  .pn-preview-body { padding: 0 16px; }
  .pn-dlg-form { padding: 20px 18px 18px; }
  .pn-dlg h2 { font-size: 21px; }
  .pn-user .btn { flex: 1 1 auto; }
  .pn-stepup { order: -1; }
  .pn-req-main { padding: 20px 16px; }
  .pn-req-ref { font-size: 30px; }
  .pn-req-facts, .pn-req-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pn-req-facts b, .pn-req-contact b { font-size: 17px; }
  .pn-table.pn-req-table td.pn-name { grid-column: 1 / -1; }
}