/* Portal del cliente — reusa las variables --sc-* de styles.css.
   Prefijo pt- (portal). Evitamos "ad-" porque los bloqueadores lo esconden. */

.pt-body {
    background: var(--sc-soft);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------------- Barra */
.pt-topbar {
    background: #fff;
    border-bottom: 1px solid var(--sc-line);
    padding: 12px 20px;
}

.pt-topbar__inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.pt-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: .92rem;
}

.pt-nav__nombre { color: var(--sc-ink-soft); }
.pt-nav a { color: var(--sc-primary); text-decoration: none; font-weight: 600; }

/* ---------------------------------------------------------------- Layout */
.pt-main { flex: 1; padding: 26px 18px 50px; }
.pt-ancho { max-width: 900px; margin: 0 auto; }

.pt-centro {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.pt-titulo { font-size: 1.7rem; color: var(--sc-ink); margin: 0 0 18px; }

.pt-tarjeta {
    background: #fff;
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-radius);
    padding: 22px;
    margin-bottom: 16px;
    box-shadow: var(--sc-shadow-sm);
}

.pt-tarjeta--angosta { width: 100%; max-width: 400px; margin: 0; }
.pt-tarjeta--destacada { border-top: 3px solid var(--sc-primary); }

.pt-tarjeta h1 { font-size: 1.45rem; margin: 0 0 6px; color: var(--sc-ink); }
.pt-tarjeta h2 { font-size: 1.15rem; margin: 0 0 14px; color: var(--sc-ink); }
.pt-h3 { font-size: .98rem; color: var(--sc-ink-soft); margin: 24px 0 10px; }

.pt-sub { color: var(--sc-ink-soft); font-size: .93rem; margin: 0 0 16px; }
.pt-ayuda { display: block; margin-top: 8px; font-size: .84rem; color: var(--sc-ink-soft); }
.pt-nota { font-size: .86rem; color: var(--sc-ink-soft); font-style: italic; }

/* ---------------------------------------------------------------- Avisos */
.pt-alerta { padding: 12px 14px; border-radius: 10px; margin-bottom: 16px; font-size: .93rem; }
.pt-alerta--ok { background: #e7f7ee; color: #14663c; }
.pt-alerta--error { background: #fdeaea; color: #96222b; }

/* ---------------------------------------------------------------- Servicios */
.pt-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 13px 14px;
    border: 1px solid var(--sc-line);
    border-left: 4px solid var(--sc-accent);
    border-radius: 10px;
    margin-bottom: 9px;
}

.pt-item--vencida { border-left-color: #c0392b; }
.pt-item--por-vencer { border-left-color: #e8a33d; }
.pt-item--al-dia { border-left-color: #2fa46b; }

.pt-item__sub { display: block; margin-top: 3px; font-size: .85rem; color: var(--sc-ink-soft); }

.pt-chip {
    display: inline-block;
    font-size: .8rem;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--sc-soft);
    color: var(--sc-primary);
    white-space: nowrap;
}

.pt-chip--vencida { background: #fdeaea; color: #96222b; }
.pt-chip--por-vencer { background: #fdf1dc; color: #91620d; }
.pt-chip--al-dia { background: #e7f7ee; color: #14663c; }

/* ---------------------------------------------------------------- Tablas */
.pt-tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.pt-tabla th, .pt-tabla td {
    padding: 9px 6px;
    text-align: left;
    border-bottom: 1px solid var(--sc-line);
}
.pt-tabla thead th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--sc-ink-soft);
}
.pt-tabla .der { text-align: right; }
.pt-tabla tfoot th { border-bottom: none; padding-top: 12px; }

.pt-btn-mini {
    display: inline-block;
    border: 1px solid var(--sc-line);
    color: var(--sc-primary);
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .84rem;
    text-decoration: none;
}

.pt-btn-mini:hover { border-color: var(--sc-primary); }

/* ---------------------------------------------------------------- Datos fiscales */
.pt-fiscal {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--sc-line);
}

.pt-datos { list-style: none; padding: 0; margin: 0; font-size: .92rem; }
.pt-datos li { padding: 7px 0; border-bottom: 1px solid var(--sc-line); }
.pt-datos li span {
    display: inline-block;
    min-width: 130px;
    color: var(--sc-ink-soft);
    font-size: .84rem;
}

.pt-condiciones { white-space: pre-wrap; font-size: .93rem; line-height: 1.6; margin: 0; }

.pt-volver {
    display: inline-block;
    margin-top: 14px;
    color: var(--sc-ink-soft);
    font-size: .86rem;
    text-decoration: none;
}

/* ---------------------------------------------------------------- Pie */
.pt-pie {
    text-align: center;
    padding: 20px;
    font-size: .86rem;
    color: var(--sc-ink-soft);
}

.pt-pie a { color: var(--sc-primary); }

@media (max-width: 600px) {
    .pt-item { flex-direction: column; align-items: flex-start; }
    .pt-tabla { font-size: .86rem; }
}