/* ═══════════════════════════════════════════════════════════════════
   FLUX Subscription Control — shell y piezas de la consola.
   Se apoya en los tokens de flux.css; la jerarquía sigue los mockups V1
   (menú oscuro, barra superior, tarjetas, tablas con estado en pastilla).
   ═══════════════════════════════════════════════════════════════════ */

.sc-body { background: var(--flux-gray-100); min-height: 100vh; }

/* ── Menú lateral ── */
.sc-lateral {
    position: fixed; inset: 0 auto 0 0; width: 232px; z-index: 20;
    background: var(--flux-ink-900); color: var(--flux-gray-400);
    display: flex; flex-direction: column; padding: 1.1rem .75rem;
}
.sc-marca { display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; padding: 0 .5rem 1.2rem; }
.sc-marca img { height: 26px; }
.sc-marca span { font-size: .72rem; line-height: 1.1; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--flux-lime-500); font-weight: 600; border-left: 1px solid var(--flux-ink-500); padding-left: .6rem; }
.sc-nav { display: flex; flex-direction: column; gap: 2px; }
.sc-nav a, .sc-pie a {
    display: flex; align-items: center; gap: .7rem; padding: .55rem .75rem; border-radius: var(--radius-md);
    color: var(--flux-gray-400); text-decoration: none; font-size: .9rem; font-weight: 500;
}
.sc-nav a:hover, .sc-pie a:hover { background: var(--flux-ink-700); color: #fff; }
.sc-nav a.activo { background: var(--flux-lime-500); color: var(--flux-ink-900); font-weight: 600; }
.sc-nav .flux-ico, .sc-pie .flux-ico { width: 18px; height: 18px; flex: none; }
.sc-pie { margin-top: auto; border-top: 1px solid var(--flux-ink-600); padding-top: .75rem; }

/* ── Área principal ── */
.sc-principal { margin-left: 232px; min-width: 0; }
.sc-barra {
    position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .7rem 1.75rem; background: var(--flux-gray-050); border-bottom: 1px solid var(--flux-gray-300);
}
.sc-buscar { display: flex; align-items: center; gap: .5rem; background: var(--flux-gray-100); border: 1px solid var(--flux-gray-300);
    border-radius: var(--radius-pill); padding: .3rem .9rem; width: min(360px, 100%); }
.sc-buscar input { border: 0; background: transparent; outline: none; width: 100%; font-size: .875rem; }
.sc-buscar .flux-ico { width: 16px; height: 16px; color: var(--flux-gray-500); }
.sc-usuario { display: flex; align-items: center; gap: .6rem; font-size: .8rem; line-height: 1.15; }
.sc-usuario small { display: block; color: var(--flux-gray-600); }
.sc-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--flux-ink-800); color: var(--flux-lime-500); font-weight: 700; }
.sc-contenido { padding: 1.5rem 1.75rem 3rem; max-width: 1400px; }

/* ── Encabezados ── */
.sc-migas { font-size: .8rem; color: var(--flux-gray-600); margin-bottom: .35rem; }
.sc-migas a { color: var(--flux-gray-600); text-decoration: none; }
.sc-migas a:hover { color: var(--flux-ink-900); text-decoration: underline; }
.sc-titulo { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.sc-titulo h1 { font-size: 1.6rem; margin: 0; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.sc-titulo p { margin: .2rem 0 0; color: var(--flux-gray-600); font-size: .9rem; }
.sc-acciones { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ── Tarjetas ── */
.sc-card { background: var(--flux-gray-050); border: 1px solid var(--flux-gray-300); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: 1.1rem 1.25rem; }
.sc-card h2 { font-size: 1rem; margin: 0 0 .9rem; }
.sc-card + .sc-card { margin-top: 1rem; }
.sc-grid { display: grid; gap: 1rem; }
.sc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-grid-2-1 { grid-template-columns: 2fr 1fr; }
.sc-grid-1-2 { grid-template-columns: 1fr 2fr; }

.sc-kpi { padding: 1rem 1.2rem; }
.sc-kpi .etiqueta { font-size: .78rem; color: var(--flux-gray-600); }
.sc-kpi .valor { font-size: 1.55rem; font-weight: 700; color: var(--flux-ink-900); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }
.sc-kpi .valor.rojo { color: var(--flux-danger); }
.sc-kpi .nota { font-size: .75rem; color: var(--flux-gray-600); }

/* ── Datos en pares ── */
.sc-datos { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.25rem; font-size: .875rem; margin: 0; }
.sc-datos dt { color: var(--flux-gray-600); font-weight: 400; }
.sc-datos dd { margin: 0; color: var(--flux-ink-900); font-variant-numeric: tabular-nums; }
.sc-datos .total { font-weight: 700; }

/* ── Tablas ── */
.sc-tabla { width: 100%; font-size: .85rem; border-collapse: separate; border-spacing: 0; }
.sc-tabla th { font-weight: 600; color: var(--flux-gray-700); font-size: .78rem; padding: .6rem .7rem; border-bottom: 1px solid var(--flux-gray-300); background: var(--flux-gray-100); white-space: nowrap; }
.sc-tabla td { padding: .6rem .7rem; border-bottom: 1px solid var(--flux-gray-200); vertical-align: middle; }
.sc-tabla tr:last-child td { border-bottom: 0; }
.sc-tabla tbody tr:hover td { background: var(--flux-gray-100); }
.sc-tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-tabla a.fila { color: inherit; text-decoration: none; font-weight: 600; }
.sc-tabla a.fila:hover { text-decoration: underline; }
.sc-tabla-envoltura { overflow-x: auto; border: 1px solid var(--flux-gray-300); border-radius: var(--radius-lg); background: var(--flux-gray-050); }
.sc-tabla-envoltura .sc-tabla th:first-child { border-top-left-radius: var(--radius-lg); }
.sc-vacio { text-align: center; color: var(--flux-gray-600); padding: 2rem 1rem !important; }

/* ── Pastillas de estado ── */
.sc-estado { display: inline-block; padding: .15rem .6rem; border-radius: var(--radius-pill); font-size: .74rem; font-weight: 600; white-space: nowrap; }
.sc-estado.verde { background: var(--flux-success-soft); color: #1f7a2b; }
.sc-estado.ambar { background: var(--flux-warning-soft); color: #8a5a00; }
.sc-estado.rojo { background: var(--flux-danger-soft); color: #b42318; }
.sc-estado.azul { background: var(--flux-info-soft); color: var(--flux-info); }
.sc-estado.gris { background: var(--flux-gray-200); color: var(--flux-gray-700); }
.sc-estado.lima { background: var(--flux-lime-100); color: #4a6b00; }

/* ── Filtros ── */
.sc-filtros { display: flex; gap: .5rem; flex-wrap: wrap; align-items: end; margin-bottom: 1rem; }
.sc-filtros .form-select, .sc-filtros .form-control { font-size: .85rem; min-width: 160px; width: auto; }
.sc-filtros label { font-size: .72rem; color: var(--flux-gray-600); display: block; margin-bottom: .15rem; }

/* ── Pestañas ── */
.sc-pestanas { display: flex; gap: .25rem; border-bottom: 1px solid var(--flux-gray-300); margin-bottom: 1.25rem; overflow-x: auto; }
.sc-pestanas a { padding: .6rem .9rem; font-size: .875rem; color: var(--flux-gray-600); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500; }
.sc-pestanas a:hover { color: var(--flux-ink-900); }
.sc-pestanas a.activa { color: var(--flux-ink-900); border-bottom-color: var(--flux-ink-900); font-weight: 600; }

/* ── Línea de tiempo ── */
.sc-historial { list-style: none; margin: 0; padding: 0; }
.sc-historial li { display: grid; grid-template-columns: 14px 130px 1fr; gap: .75rem; align-items: center; padding: .45rem 0; font-size: .85rem; position: relative; }
.sc-historial li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--flux-gray-400); }
.sc-historial li.verde::before { background: var(--flux-success); }
.sc-historial li.ambar::before { background: var(--flux-warning); }
.sc-historial li.rojo::before { background: var(--flux-danger); }
.sc-historial small { color: var(--flux-gray-600); }

.sc-cobranza { display: flex; justify-content: space-between; position: relative; padding: 1rem 0 .25rem; }
.sc-cobranza::before { content: ""; position: absolute; left: 6%; right: 6%; top: 1.55rem; height: 2px; background: var(--flux-gray-300); }
.sc-cobranza div { position: relative; text-align: center; flex: 1; font-size: .78rem; color: var(--flux-gray-600); }
.sc-cobranza b { display: block; color: var(--flux-ink-900); font-size: .85rem; margin-top: .4rem; }
.sc-cobranza i { display: block; margin: 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--flux-gray-300); }

/* ── Asistente (registrar pago) ── */
.sc-pasos { display: flex; gap: 1.5rem; margin-bottom: 1.25rem; font-size: .85rem; color: var(--flux-gray-500); flex-wrap: wrap; }
.sc-pasos span { display: flex; align-items: center; gap: .45rem; }
.sc-pasos b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--flux-gray-300); color: var(--flux-gray-700); font-size: .75rem; }
.sc-pasos .hecho b, .sc-pasos .actual b { background: var(--flux-ink-900); color: var(--flux-lime-500); }
.sc-pasos .actual { color: var(--flux-ink-900); font-weight: 600; }

.sc-saldo-aplicar { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sc-barra-progreso { height: 8px; border-radius: var(--radius-pill); background: var(--flux-gray-200); overflow: hidden; }
.sc-barra-progreso > span { display: block; height: 100%; background: var(--flux-success); }

.sc-aviso { background: var(--flux-info-soft); color: #1e3a8a; border-radius: var(--radius-lg); padding: .75rem 1rem; font-size: .85rem; }
.sc-aviso.ambar { background: var(--flux-warning-soft); color: #7a4f00; }
.sc-aviso.rojo { background: var(--flux-danger-soft); color: #9b1c1c; }

/* ── Gráficas simples ── */
.sc-barras { display: flex; align-items: flex-end; gap: .75rem; height: 170px; padding-top: .5rem; }
.sc-barras div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: .3rem; font-size: .72rem; color: var(--flux-gray-600); }
.sc-barras span.b { width: 100%; max-width: 46px; background: var(--flux-ink-800); border-radius: 6px 6px 2px 2px; min-height: 2px; }
.sc-barras div:last-child span.b { background: var(--flux-lime-500); }
.sc-dona { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.sc-dona ul { list-style: none; margin: 0; padding: 0; font-size: .82rem; }
.sc-dona li { display: flex; align-items: center; gap: .5rem; padding: .15rem 0; }
.sc-dona li i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.sc-mono { font-family: var(--font-mono); font-size: .8rem; word-break: break-all; }
.sc-ayuda { font-size: .78rem; color: var(--flux-gray-600); }

@media (max-width: 1100px) {
    .sc-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sc-grid-3, .sc-grid-2-1, .sc-grid-1-2 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .sc-lateral { position: static; width: auto; flex-direction: row; align-items: center; padding: .5rem; overflow-x: auto; }
    .sc-marca span, .sc-pie { display: none; }
    .sc-marca { padding: 0 .5rem; }
    .sc-nav { flex-direction: row; }
    .sc-nav a span { white-space: nowrap; }
    .sc-principal { margin-left: 0; }
    .sc-barra { padding: .6rem 1rem; }
    .sc-usuario span:last-child { display: none; }
    .sc-contenido { padding: 1rem 1rem 3rem; }
    .sc-grid-4, .sc-grid-2 { grid-template-columns: 1fr; }
}
@media print {
    .sc-lateral, .sc-barra, .no-imprimir { display: none !important; }
    .sc-principal { margin: 0; }
}

/* ── Portal del cliente (V2) y páginas sueltas (login, registro, link de pago) ── */
.sc-casa { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem .9rem; color: #fff; font-size: .8rem; line-height: 1.15; }
.sc-casa small { display: block; color: var(--flux-gray-500); }
.sc-casa .sc-avatar { background: var(--flux-lime-500); color: var(--flux-ink-900); }
.sc-salir { display: flex; align-items: center; gap: .7rem; padding: .55rem .75rem; border: 0; background: transparent; width: 100%;
    color: var(--flux-gray-400); font-size: .9rem; font-weight: 500; border-radius: var(--radius-md); text-align: left; }
.sc-salir:hover { background: var(--flux-ink-700); color: #fff; }
.sc-salir .flux-ico { width: 18px; height: 18px; }
.sc-campana { position: relative; color: var(--flux-gray-600); display: inline-flex; padding: .35rem; border-radius: 50%; }
.sc-campana .flux-ico { width: 20px; height: 20px; }
.sc-campana i { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--flux-danger); }

.sc-solo { background: var(--flux-ink-900); }
.sc-solo-centro { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; }
.sc-solo-tarjeta { width: 100%; max-width: 520px; }
.sc-solo-tarjeta .sc-card { padding: 1.6rem 1.6rem 1.4rem; }
.sc-solo-tarjeta.ancha { max-width: 760px; }
.sc-solo-logo { display: flex; justify-content: center; margin-bottom: 1.25rem; }
.sc-solo-logo img { height: 40px; width: auto; }
.sc-solo-pie { text-align: center; color: var(--flux-gray-500); font-size: .8rem; margin-top: 1rem; }
.sc-solo-pie a { color: var(--flux-lime-500); }

.sc-pasos-registro { display: flex; gap: .5rem; align-items: center; justify-content: center; font-size: .78rem; color: var(--flux-gray-500); margin-bottom: 1.25rem; flex-wrap: wrap; }
.sc-pasos-registro b { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--flux-ink-600); color: #fff; font-size: .72rem; margin-right: .3rem; }
.sc-pasos-registro .actual b { background: var(--flux-lime-500); color: var(--flux-ink-900); }
.sc-pasos-registro .actual { color: #fff; }

.sc-pin { font-family: var(--font-mono); font-size: 2rem; letter-spacing: .3em; font-weight: 700; color: var(--flux-ink-900); }
.sc-tarjeta-guardada { display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; border: 1px solid var(--flux-gray-300); border-radius: var(--radius-lg); background: var(--flux-gray-100); }
.sc-tarjeta-guardada .marca { text-transform: uppercase; font-weight: 700; font-size: .8rem; background: var(--flux-ink-900); color: #fff; padding: .25rem .5rem; border-radius: 4px; }
.sc-prueba { background: linear-gradient(135deg, var(--flux-lime-100), #fff); border: 1px solid var(--flux-lime-300); }
.sc-prueba .dias { font-size: 2rem; font-weight: 700; color: var(--flux-ink-900); }
.sc-lista-flujo { display: flex; gap: .5rem; flex-wrap: wrap; font-size: .8rem; color: var(--flux-gray-600); }
.sc-lista-flujo span { padding: .3rem .6rem; border: 1px solid var(--flux-gray-300); border-radius: var(--radius-pill); background: #fff; }