/* EncuestasPagadas — colores del logo
   Negro:       #1a1a1a
   Verde oliva: #4a6741
   Amarillo/oro:#c8a84b
*/

:root {
    --ep-black:   #1a1a1a;
    --ep-green:   #4a6741;
    --ep-gold:    #c8a84b;
    --ep-green-l: #5d7f53;
    --ep-gold-l:  #d4b060;
    --ep-bg:      #f5f5f0;
    --ep-white:   #ffffff;
    --ep-red:     #c0392b;
    --ep-red-l:   #fdf0ef;
    --ep-border:  #e0ddd5;
    --ep-text:    #1a1a1a;
    --ep-muted:   #6b6b5e;
    --ep-radius:  8px;
}

/* ── Contenedor general ────────────────────────────────────── */
.ep-dashboard,
.ep-tx-history,
.ep-survey-wall {
    font-family: inherit;
    color: var(--ep-text);
    max-width: 860px;
    margin: 0 auto;
}

/* ── Alerta de pagos negativos ─────────────────────────────── */
.ep-alert {
    border-radius: var(--ep-radius);
    padding: 14px 18px;
    margin-bottom: 20px;
}
.ep-alert-danger {
    background: var(--ep-red-l);
    border-left: 4px solid var(--ep-red);
}
.ep-alert-danger strong {
    display: block;
    color: var(--ep-red);
    margin-bottom: 8px;
}
.ep-alert-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border-top: 1px solid rgba(192,57,43,.15);
    font-size: .9rem;
}
.ep-amount-negative {
    font-weight: 700;
    color: var(--ep-red);
}
.ep-alert-date {
    color: var(--ep-muted);
    font-size: .8rem;
    margin-left: auto;
}

/* ── Cabecera de perfil ────────────────────────────────────── */
.ep-profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}
.ep-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--ep-black);
    color: var(--ep-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    flex-shrink: 0;
}
.ep-profile-info h2 {
    margin: 0 0 2px;
    font-size: 1.15rem;
}
.ep-member-since {
    margin: 0;
    color: var(--ep-muted);
    font-size: .85rem;
}

/* ── Grid de estadísticas ──────────────────────────────────── */
.ep-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}
.ep-stat-card {
    background: var(--ep-white);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ep-stat-primary {
    border-top: 3px solid var(--ep-gold);
}
.ep-stat-secondary {
    border-top: 3px solid var(--ep-green);
}
.ep-stat-warn {
    border-top: 3px solid var(--ep-red);
}
.ep-stat-label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ep-muted);
}
.ep-stat-value {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--ep-black);
}
.ep-stat-sub {
    font-size: .82rem;
    color: var(--ep-red);
}

/* ── Formulario de retiro ──────────────────────────────────── */
.ep-payout-form {
    background: var(--ep-white);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    padding: 20px;
    margin-bottom: 24px;
}
.ep-payout-form h3 {
    margin: 0 0 14px;
    font-size: 1rem;
    color: var(--ep-black);
}
.ep-payout-form form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}
.ep-payout-form select,
.ep-payout-form input {
    padding: 9px 12px;
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    font-size: .9rem;
    background: var(--ep-bg);
    color: var(--ep-text);
    flex: 1 1 160px;
}
.ep-payout-form select:focus,
.ep-payout-form input:focus {
    outline: 2px solid var(--ep-gold);
    border-color: var(--ep-gold);
}

/* ── Botones ───────────────────────────────────────────────── */
.ep-btn {
    padding: 9px 20px;
    border: none;
    border-radius: var(--ep-radius);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}
.ep-btn-primary {
    background: var(--ep-gold);
    color: var(--ep-black);
}
.ep-btn-primary:hover {
    background: var(--ep-gold-l);
}
.ep-btn-dismiss {
    padding: 4px 10px;
    font-size: .78rem;
    border: 1px solid var(--ep-red);
    border-radius: 4px;
    background: transparent;
    color: var(--ep-red);
    cursor: pointer;
}

/* ── Barra de progreso ─────────────────────────────────────── */
.ep-payout-locked {
    margin-bottom: 24px;
    padding: 16px;
    background: var(--ep-bg);
    border-radius: var(--ep-radius);
}
.ep-progress-bar {
    height: 8px;
    background: var(--ep-border);
    border-radius: 4px;
    overflow: hidden;
    margin: 8px 0 4px;
}
.ep-progress-fill {
    height: 100%;
    background: var(--ep-gold);
    border-radius: 4px;
    transition: width .4s;
}

/* ── Tabla de transacciones ────────────────────────────────── */
.ep-tx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}
.ep-tx-table th {
    text-align: left;
    padding: 10px 12px;
    background: var(--ep-black);
    color: var(--ep-white);
    font-weight: 600;
}
.ep-tx-table th:first-child { border-radius: var(--ep-radius) 0 0 0; }
.ep-tx-table th:last-child  { border-radius: 0 var(--ep-radius) 0 0; }
.ep-tx-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--ep-border);
}
.ep-row-negative td {
    background: #fff8f7;
}
.ep-tx-amount { font-weight: 700; }
.ep-tx-positive { color: var(--ep-green); }
.ep-tx-negative { color: var(--ep-red); }

/* ── Badges ────────────────────────────────────────────────── */
.ep-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 600;
}
.ep-badge-success { background: #edf7ed; color: var(--ep-green); }
.ep-badge-warning { background: #fdf8ed; color: #8a6d00; }
.ep-badge-danger  { background: var(--ep-red-l); color: var(--ep-red); }

/* ── Survey iframe ─────────────────────────────────────────── */
.ep-survey-iframe {
    width: 100%;
    min-height: 600px;
    border: none;
    border-radius: var(--ep-radius);
    background: var(--ep-bg);
}
.ep-provider-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.ep-tab-btn {
    padding: 8px 16px;
    border: 2px solid var(--ep-border);
    border-radius: 20px;
    background: var(--ep-white);
    cursor: pointer;
    font-size: .88rem;
    font-weight: 500;
    transition: all .2s;
}
.ep-tab-btn.active,
.ep-tab-btn:hover {
    border-color: var(--ep-green);
    background: var(--ep-green);
    color: var(--ep-white);
}

/* ── Widget de saldo ───────────────────────────────────────── */
.ep-balance-widget {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .9rem;
}
.ep-bal-available {
    font-weight: 700;
    color: var(--ep-gold);
}
.ep-bal-pending {
    color: var(--ep-muted);
    font-size: .8rem;
}

/* ── Login notice ──────────────────────────────────────────── */
.ep-login-notice {
    padding: 16px;
    background: var(--ep-bg);
    border-radius: var(--ep-radius);
    border-left: 4px solid var(--ep-green);
}
.ep-login-notice a { color: var(--ep-green); font-weight: 600; }

.ep-empty { color: var(--ep-muted); font-style: italic; }
.ep-hidden { display: none; }

/* ══════════════════════════════════════════════════════════════
   APP UNIFICADA — shortcode [ep_app]
   ══════════════════════════════════════════════════════════════ */

.ep-app {
    max-width: 960px;
    margin: 0 auto;
    font-family: inherit;
    color: var(--ep-text);
}

/* ── Barra de saldo siempre visible ─────────────────────────── */
.ep-balance-bar {
    display: flex;
    gap: 0;
    background: var(--ep-black);
    border-radius: var(--ep-radius);
    overflow: hidden;
    margin-bottom: 4px;
}
.ep-bal-item {
    flex: 1;
    padding: 14px 16px;
    border-right: 1px solid rgba(255,255,255,.08);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ep-bal-item:last-child { border-right: none; }
.ep-bal-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,.5);
}
.ep-bal-amount {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ep-white);
}
.ep-bal-available { color: var(--ep-gold) !important; }
.ep-bal-pending   { color: var(--ep-green-l) !important; }

/* ── Navegación de tabs ──────────────────────────────────────── */
.ep-nav {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
    background: var(--ep-bg);
    border-radius: var(--ep-radius);
    padding: 6px;
    border: 1px solid var(--ep-border);
}
.ep-nav-btn {
    flex: 1;
    padding: 10px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--ep-muted);
    font-size: .88rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .18s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.ep-nav-btn:hover {
    background: var(--ep-white);
    color: var(--ep-black);
}
.ep-nav-btn.active {
    background: var(--ep-black);
    color: var(--ep-gold);
    font-weight: 700;
}
.ep-nav-icon { font-size: 1rem; }

/* ── Contenido de tabs ───────────────────────────────────────── */
.ep-tab { display: none; }
.ep-tab.active { display: block; }

/* ── Estado vacío de encuestas ───────────────────────────────── */
.ep-empty-state {
    text-align: center;
    padding: 60px 24px;
    background: var(--ep-white);
    border-radius: var(--ep-radius);
    border: 1px solid var(--ep-border);
}
.ep-empty-icon { font-size: 3rem; display: block; margin-bottom: 12px; }
.ep-empty-state h3 { margin: 0 0 8px; color: var(--ep-black); }
.ep-empty-state p  { color: var(--ep-muted); margin: 6px 0; font-size: .93rem; }
.ep-empty-state code {
    background: var(--ep-bg);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: .85rem;
}

/* ── Sección de perfil ───────────────────────────────────────── */
.ep-profile-section {
    background: var(--ep-white);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    padding: 24px;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 600px) {
    .ep-stats-grid { grid-template-columns: 1fr 1fr; }
    .ep-tx-table th:nth-child(2),
    .ep-tx-table td:nth-child(2) { display: none; }
    .ep-payout-form form { flex-direction: column; }
}