:root {
    --spp-green: #16873E;
    --spp-blue: #1F4DC1;
    --spp-ink: #1d2327;
    --spp-ink-soft: #667085;
    --spp-border: #d8dde2;
    --spp-bg: #f4f6f9;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--spp-bg);
    color: var(--spp-ink);
}
.spp-header {
    background: var(--spp-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 28px;
}
.spp-logo { font-size: 20px; font-weight: 800; }
.spp-logo b:first-child { color: #7fe0a0; }
.spp-logo b:last-child { color: #fff; }
.spp-header nav a { color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; }

.spp-main { max-width: 1140px; margin: 0 auto; padding: 50px 24px; }
.spp-main h1 { font-size: 2rem; margin-bottom: 6px; }
.spp-sub { color: var(--spp-ink-soft); margin-bottom: 30px; }

/* Planes en vertical: una tarjeta por fila, con la información a la
   izquierda y el precio/botón a la derecha. Con pocos planes se leen
   mucho mejor que en columnas apretadas. */
/* ── Tarjetas de planes ──
   Una al lado de otra, con el contenido apilado y centrado dentro:
   nombre → precio → características → botón. */
.spp-plans {
    display: grid;
    /* Columnas de ancho fijo y centradas: con dos o tres planes quedan
       en el medio, debajo del título, en vez de pegados a la izquierda.
       Con cuatro o más se reparten igual que antes. */
    grid-template-columns: repeat(auto-fit, minmax(190px, 228px));
    justify-content: center;
    gap: 14px;
    align-items: stretch;
}
@media (max-width: 760px) { .spp-plans { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }
@media (max-width: 420px) { .spp-plans { grid-template-columns: 1fr; } }

.spp-plan-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--spp-border);
    border-radius: 8px;
    padding: 0 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(22,26,35,.05);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.spp-plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px -12px rgba(22,26,35,.25);
    border-color: var(--spp-green);
}

/* Cabecera con el nombre del plan: grande y de trazo ligero, con aire
   alrededor. Es lo primero que se lee, no hace falta gritarlo. */
.spp-plan-card h2 {
    width: 100%;
    margin: 0;
    padding: 20px 12px;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: .01em;
    color: #fff;
    background: var(--spp-blue);
    border-bottom: 1px solid rgba(255,255,255,.18);
}

.spp-plan-info { width: 100%; }
.spp-plan-action { width: 100%; margin-top: auto; padding: 0 16px 4px; }
/* El botón no pega con los bordes: queda metido hacia dentro, con el
   mismo aire a los dos lados. */
.spp-plan-action .spp-btn {
    display: block;
    width: 100%;
    padding: 12px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    box-sizing: border-box;
}

/* Precio en una sola línea, del mismo tamaño que el resto del texto
   del cuerpo: manda la cabecera y manda el botón, el precio acompaña. */
.spp-price {
    font-size: 18px;
    font-weight: 600;
    color: var(--spp-green);
    margin: 0;
    padding: 22px 10px 18px;
    line-height: 1.2;
    white-space: nowrap;
}
.spp-price span { font-size: 14px; color: var(--spp-green); font-weight: 400; }

/* Características como lista separada por líneas suaves */
.spp-desc {
    font-size: 13px;
    color: var(--spp-ink-soft);
    margin: 0 0 20px;
    padding: 14px 16px 0;
    line-height: 2.1;
    border-top: 1px solid #eef1f5;
}

.spp-btn {
    display: inline-block;
    background: var(--spp-green);
    color: #fff;
    padding: 10px 22px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
}
.spp-btn:hover { background: #126b31; }
.spp-btn--outline { background: transparent; color: var(--spp-blue); border: 1px solid var(--spp-blue); }
.spp-btn--outline:hover { background: var(--spp-blue); color: #fff; }

.spp-error, .spp-empty {
    background: #fff;
    border: 1px solid var(--spp-border);
    border-radius: 8px;
    padding: 18px;
    color: var(--spp-ink-soft);
}

.spp-footer {
    text-align: center;
    padding: 26px;
    color: var(--spp-ink-soft);
    font-size: 12.5px;
}

/* ── Encabezado del sitio (barra blanca superior) ── */
.spp-site-top { background: #fff; border-bottom: 1px solid var(--spp-border); }
.spp-site-top__inner {
    max-width: 1140px; margin: 0 auto; padding: 14px 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.spp-site-logo { font-size: 20px; font-weight: 800; text-decoration: none; }
.spp-site-logo b:first-child { color: var(--spp-green); }
.spp-site-logo b:last-child { color: var(--spp-blue); }
.spp-site-top__links { display: flex; align-items: center; gap: 18px; font-size: 13.5px; }
.spp-site-top__links a { color: var(--spp-ink-soft); text-decoration: none; }
.spp-site-top__links a:hover { color: var(--spp-blue); }
.spp-site-greet { color: var(--spp-ink-soft); font-size: 13.5px; }
.spp-site-cart {
    border: 1px solid var(--spp-border); border-radius: 4px;
    padding: 6px 14px; color: var(--spp-ink) !important;
}
.spp-site-cart:hover { border-color: var(--spp-blue); }

/* ── Barra de navegación azul oscuro ── */
.spp-site-nav { background: #1b3a63; }
.spp-site-nav__inner {
    max-width: 1140px; margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.spp-site-nav a {
    color: rgba(255,255,255,.85); text-decoration: none;
    padding: 13px 16px; font-size: 14px;
}
.spp-site-nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.spp-site-nav a.is-active { background: rgba(255,255,255,.12); color: #fff; }
.spp-site-nav__right { margin-left: auto; }


/* ===== Portada para cliente con sesión abierta (estilo área de cliente WHMCS) ===== */
.spp-client-area {
    max-width: 1180px;
    margin: 0 auto;
    padding: 26px 20px 10px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 28px;
    align-items: start;
}
.spp-side-panel {
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    margin-bottom: 18px;
}
.spp-side-panel__head {
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
    padding: 11px 14px;
    font-size: 15px;
    color: #4a5056;
}
.spp-side-panel__body { padding: 14px; }
.spp-side-panel__body strong { display: block; font-size: 15px; margin-bottom: 2px; }
.spp-side-panel__body span { display: block; font-size: 13.5px; color: #4a5056; line-height: 1.5; }
.spp-side-update {
    display: block;
    margin-top: 14px;
    background: #4cae4c;
    color: #fff;
    text-align: center;
    text-decoration: none;
    padding: 9px 12px;
    border-radius: 4px;
    font-size: 14px;
}
.spp-side-update:hover { background: #449d44; }
.spp-side-panel__links { padding: 6px 0; }
.spp-side-panel__links a {
    display: block;
    padding: 9px 14px;
    font-size: 14px;
    color: #337ab7;
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
}
.spp-side-panel__links a:last-child { border-bottom: 0; }
.spp-side-panel__links a:hover { background: #f7f9fb; }
.spp-side-panel__links a.is-active {
    background: #eef4fa;
    color: #1d2327;
    font-weight: 600;
    box-shadow: inset 3px 0 0 #337ab7;
}

.spp-client-hello {
    margin: 0;
    font-size: 38px;
    font-weight: 400;
    color: #2a6496;
    line-height: 1.15;
}
.spp-breadcrumb {
    margin: 10px 0 0;
    padding-bottom: 16px;
    border-bottom: 1px solid #e3e7eb;
    font-size: 14px;
    color: #9aa2ab;
}
.spp-breadcrumb a { color: #337ab7; text-decoration: none; }
.spp-breadcrumb a:first-child { color: #9aa2ab; }
.spp-breadcrumb span { margin: 0 6px; }

.spp-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid #e3e7eb;
    background: #f7f7f7;
    margin: 22px 0 26px;
}
.spp-stat {
    position: relative;
    padding: 18px 16px 20px;
    border-right: 1px solid #e3e7eb;
    text-decoration: none;
    color: inherit;
    display: block;
}
.spp-stat:last-child { border-right: 0; }
.spp-stat:hover { background: #fff; }
.spp-stat__num { display: block; font-size: 34px; font-weight: 300; color: #4a5056; line-height: 1; }
.spp-stat__ico { position: absolute; top: 16px; right: 16px; font-size: 26px; opacity: .35; }
.spp-stat__label {
    display: block;
    margin-top: 12px;
    padding-top: 9px;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #8a9199;
    border-top: 3px solid #ccc;
}
.spp-stat--blue .spp-stat__label { border-top-color: #428bca; }
.spp-stat--green .spp-stat__label { border-top-color: #5cb85c; }
.spp-stat--red .spp-stat__label { border-top-color: #d9534f; }
.spp-stat--orange .spp-stat__label { border-top-color: #f0ad4e; }

.spp-client-sub { font-size: 20px; font-weight: 600; margin: 26px 0 14px; }

.spp-alert-pend {
    border: 1px solid #f5c87f;
    background: #fdf5e6;
    border-radius: 4px;
    padding: 14px 16px;
    margin-bottom: 22px;
    font-size: 14px;
}
.spp-alert-pend strong { display: block; margin-bottom: 8px; color: #8a5d00; }
.spp-alert-pend__item {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    padding: 6px 0;
    border-top: 1px solid #f3e2c0;
}

.spp-mine { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.spp-mine-card {
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    padding: 16px;
}
.spp-mine-card__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.spp-mine-name { font-size: 16px; font-weight: 700; word-break: break-all; }
.spp-mine-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.spp-mine-badge--active { background: #dcfce7; color: #166534; }
.spp-mine-badge--suspended { background: #fee2e2; color: #991b1b; }
.spp-mine-badge--pending { background: #fef3c7; color: #92400e; }
.spp-mine-badge--failed { background: #fee2e2; color: #991b1b; }
.spp-mine-plan { margin: 9px 0 2px; font-size: 13.5px; color: #667085; }
.spp-mine-due { margin: 0; font-size: 13px; color: #4a5056; }
.spp-mine-actions { margin-top: 13px; display: flex; gap: 8px; flex-wrap: wrap; }
.spp-btn--small { padding: 6px 14px; font-size: 13px; }

@media (max-width: 900px) {
    .spp-client-area { grid-template-columns: 1fr; }
    .spp-stats { grid-template-columns: repeat(2, 1fr); }
    .spp-stat:nth-child(2) { border-right: 0; }
    .spp-stat:nth-child(1), .spp-stat:nth-child(2) { border-bottom: 1px solid #e3e7eb; }
    .spp-client-hello { font-size: 28px; }
}

/* ===== Tabla de productos y servicios (estilo WHMCS) ===== */
.spp-dt { margin-top: 4px; }
.spp-dt__bar {
    background: #4d555f;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    flex-wrap: wrap;
}
.spp-dt__count { color: #fff; font-size: 14px; }
.spp-dt__search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #c8ced6;
    border-radius: 3px;
    padding: 6px 10px;
    min-width: 240px;
    color: #8a9199;
}
.spp-dt__search input {
    border: 0;
    outline: none;
    font: inherit;
    font-size: 14px;
    width: 100%;
    background: transparent;
    color: #2b2f33;
}
.spp-dt__table { width: 100%; border-collapse: collapse; background: #fff; }
.spp-dt__table thead th {
    background: #f5f5f5;
    border-bottom: 3px solid #8dc63f;
    padding: 13px 14px;
    font-size: 15px;
    font-weight: 400;
    color: #4a5056;
    text-align: center;
    white-space: nowrap;
}
.spp-dt__table thead th.is-sortable { cursor: pointer; user-select: none; }
.spp-dt__table thead th.is-sortable::after { content: ' ⇅'; color: #9aa2ab; font-size: 12px; }
.spp-dt__table th.spp-dt__ico { width: 56px; border-bottom-color: #e3e7eb; background: #fff; }
.spp-dt__table td {
    border-bottom: 1px solid #eceff2;
    padding: 16px 14px;
    text-align: center;
    font-size: 14.5px;
    vertical-align: middle;
}
.spp-dt__table tbody tr { cursor: pointer; }
.spp-dt__table tbody tr:hover { background: #f9fbfd; }
.spp-dt__table td.spp-dt__ico { font-size: 22px; opacity: .45; }
.spp-dt__name { display: block; font-weight: 700; color: #2b2f33; text-decoration: none; }
.spp-dt__name:hover { color: #337ab7; }
.spp-dt__sub { display: block; font-size: 13.5px; color: #337ab7; margin-top: 2px; }
.spp-dt__price { display: block; color: #4a5056; }
.spp-dt__price + .spp-dt__sub { color: #8a9199; }
.spp-dt__state {
    display: inline-block;
    min-width: 150px;
    padding: 9px 16px;
    border: 1px solid #ccd2d8;
    border-radius: 3px;
    background: #fff;
    font-size: 14px;
    color: #4a5056;
}
.spp-dt__state--active { border-color: #8dc63f; color: #4b7d10; }
.spp-dt__state--suspended { border-color: #d9534f; color: #a3251a; }
.spp-dt__state--pending { border-color: #f0ad4e; color: #8a5d00; }
.spp-dt__state--failed { border-color: #d9534f; color: #a3251a; }
.spp-dt__state--terminated { border-color: #ccd2d8; color: #8a9199; }
.spp-dt__foot {
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 20px;
    flex-wrap: wrap;
    font-size: 14px;
    color: #4a5056;
}
.spp-dt__perpage select {
    font: inherit;
    padding: 5px 8px;
    border: 1px solid #c8ced6;
    border-radius: 3px;
    background: #fff;
    margin: 0 4px;
}
.spp-dt__pager { display: flex; }
.spp-dt__pager button {
    font: inherit;
    font-size: 14px;
    background: #fff;
    border: 1px solid #ccd2d8;
    margin-left: -1px;
    padding: 7px 14px;
    cursor: pointer;
    color: #4a5056;
}
.spp-dt__pager button:first-child { border-radius: 3px 0 0 3px; }
.spp-dt__pager button:last-child { border-radius: 0 3px 3px 0; }
.spp-dt__pager button:hover:not(:disabled) { background: #f0f3f6; }
.spp-dt__pager button.is-active { background: #4d555f; border-color: #4d555f; color: #fff; }
.spp-dt__pager button:disabled { color: #b9c0c7; cursor: default; }

@media (max-width: 760px) {
    .spp-dt__table thead { display: none; }
    .spp-dt__table tbody tr { display: block; border-bottom: 1px solid #e3e7eb; padding: 8px 0; }
    .spp-dt__table td { display: block; border: 0; text-align: left; padding: 5px 14px; }
    .spp-dt__table td.spp-dt__ico { display: none; }
    .spp-dt__state { min-width: 0; }
}

/* Encabezado de la tienda centrado sobre las tarjetas de planes. */
.spp-store-head { text-align: center; margin-bottom: 34px; }
.spp-store-head h1 { margin-bottom: 10px; }
.spp-store-head .spp-sub {
    max-width: 620px;
    margin: 0 auto;
}

/* ── Pestañas de la tienda: radio y TV ────────────────────────────── */
.spp-store-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0 0 22px;
    flex-wrap: wrap;
}
.spp-store-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    border: 1px solid var(--spp-border, #dde2e8);
    border-radius: 999px;
    background: #fff;
    color: #4a5056;
    text-decoration: none;
    font-size: 15px;
}
.spp-store-tabs a:hover { border-color: #b9c4d0; color: #2b2f33; }
.spp-store-tabs a.is-active {
    background: var(--spp-green, #1f8a3b);
    border-color: var(--spp-green, #1f8a3b);
    color: #fff;
    font-weight: 600;
}

/* ── "Estás viendo el portal como…" ───────────────────────────────── */
/* Barra que sale cuando el administrador entra a ver el portal con la
   cuenta de un cliente, con su botón para regresar al panel. */
.spp-suplantando {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    background: #8a5a00;
    color: #fff;
    padding: 9px 16px;
    font-size: 14.5px;
    text-align: center;
}
.spp-suplantando strong { font-weight: 700; }
.spp-suplantando a {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 4px;
    padding: 5px 12px;
    text-decoration: none;
    white-space: nowrap;
}
.spp-suplantando a:hover { background: rgba(255, 255, 255, 0.3); }