/* Paneles: portal de afiliadas y administración. Misma piel de lino y neumorfismo. */
.panel-body { background: var(--lino); --neu-bg: var(--lino); --neu-dark: rgba(140, 105, 70, .26); --neu-light: rgba(255, 255, 255, .8); }
.demo-banner { background: var(--turquesa-hondo); color: var(--lino); font-size: .86rem; text-align: center; padding: 8px 16px; }
.demo-banner b { color: #fff; }
.pn-wrap { width: min(1180px, 100%); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) 64px; }
.pn-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px; padding: 28px 0 18px; }
.pn-head h1 { font-family: var(--ff-display); font-weight: 400; font-size: clamp(2rem, 6vw, 3rem); line-height: 1; margin: .1em 0 0; }
.pn-chip { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; padding: .5em .9em; border-radius: 999px; background: rgba(20, 90, 92, .1); color: var(--turquesa-hondo); }
.pn-grid { display: grid; gap: 16px; }
.pn-grid.k4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.pn-grid.k3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.pn-grid.k2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.pn-card { padding: 20px 22px; border-radius: 26px; background: var(--neu-bg); box-shadow: 9px 9px 22px var(--neu-dark), -9px -9px 22px var(--neu-light); min-width: 0; }
.pn-card h2 { font-family: var(--ff-display); font-weight: 400; font-size: 1.45rem; margin: 0 0 .6em; }
.pn-kpi small { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--tierra-2); }
.pn-kpi strong { display: block; font-family: var(--ff-display); font-weight: 400; font-size: 2.2rem; line-height: 1.1; margin-top: 6px; }
.pn-kpi span { font-size: .82rem; color: var(--tierra-2); }
.pn-kpi.accent { background: var(--turquesa-hondo); color: var(--lino); box-shadow: 9px 9px 22px var(--neu-dark); }
.pn-kpi.accent small, .pn-kpi.accent span { color: rgba(241, 227, 207, .8); }
.pn-sec { margin-top: 28px; }
.pn-link { display: grid; gap: 10px; }
.pn-copy { display: flex; gap: 8px; align-items: center; padding: 8px 8px 8px 16px; border-radius: 999px; background: var(--neu-bg); box-shadow: inset 4px 4px 10px var(--neu-dark), inset -4px -4px 10px var(--neu-light); }
.pn-copy code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.pn-copy .btn { padding: .65em 1.1em; }
.pn-progress { height: 14px; border-radius: 999px; background: var(--neu-bg); box-shadow: inset 3px 3px 8px var(--neu-dark), inset -3px -3px 8px var(--neu-light); overflow: hidden; margin: 12px 0 8px; }
.pn-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--turquesa), var(--turquesa-hondo)); }
.pn-steps { display: flex; justify-content: space-between; font-size: .78rem; color: var(--tierra-2); }
.pn-chart { width: 100%; height: auto; display: block; }
.pn-chart text { font: 500 11px var(--ff-body); fill: var(--tierra-2); }
.pn-legend { display: flex; gap: 16px; font-size: .82rem; color: var(--tierra-2); margin-top: 6px; }
.pn-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.pn-table-wrap { overflow-x: auto; margin: 0 -6px; padding: 0 6px; }
.pn-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.pn-table th { text-align: left; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--tierra-2); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid rgba(43, 31, 23, .15); white-space: nowrap; }
.pn-table td { padding: 12px 10px; border-bottom: 1px solid rgba(43, 31, 23, .08); vertical-align: middle; }
.pn-table td.num, .pn-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pn-table tr:last-child td { border-bottom: 0; }
.st { display: inline-block; font-size: .76rem; font-weight: 600; padding: .3em .7em; border-radius: 999px; white-space: nowrap; }
.st-wait { background: rgba(185, 135, 79, .18); color: #7A5424; }
.st-ok { background: rgba(46, 156, 154, .16); color: var(--turquesa-hondo); }
.st-paid { background: rgba(43, 31, 23, .1); color: var(--tierra); }
.st-off { background: rgba(176, 88, 40, .14); color: var(--terracota); }
.st-new { background: rgba(31, 78, 150, .12); color: var(--lapis); }
.pn-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 12px; }
.pn-tabs button { flex: none; border: 0; cursor: pointer; font: inherit; font-weight: 500; padding: .65em 1.15em; border-radius: 999px; background: var(--neu-bg); color: var(--tierra); box-shadow: 5px 5px 12px var(--neu-dark), -5px -5px 12px var(--neu-light); }
.pn-tabs button[aria-selected="true"] { color: var(--turquesa-hondo); font-weight: 600; box-shadow: inset 4px 4px 10px var(--neu-dark), inset -4px -4px 10px var(--neu-light); }
.pn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pn-list li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(43, 31, 23, .08); }
.pn-list li:last-child { border-bottom: 0; }
.pn-list small { display: block; color: var(--tierra-2); font-size: .8rem; }
.pn-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.pn-actions .btn { padding: .55em .95em; font-size: .84rem; }
.pn-rules { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; color: var(--tierra-2); font-size: .92rem; }
.pn-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; z-index: 100; background: var(--tierra); color: var(--lino); padding: .8em 1.3em; border-radius: 999px; font-weight: 600; font-size: .9rem; transition: opacity .25s, transform .3s var(--ease-out); pointer-events: none; }
.pn-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 640px) {
  .pn-table.stack thead { display: none; }
  .pn-table.stack tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid rgba(43, 31, 23, .1); }
  .pn-table.stack td { border: 0; padding: 2px 0; }
  .pn-table.stack td[data-k]::before { content: attr(data-k) " · "; color: var(--tierra-2); font-size: .78rem; }
  .pn-table.stack td.num { text-align: right; }
}