/* ===================================================
   Vinartes Afiliados — Public Styles v1.3
   =================================================== */

:root {
    --va-primary:     #021F67;
    --va-primary-dk:  #011448;
    --va-accent:      #E9E3DD;
    --va-accent-dk:   #d4ccc4;
    --va-gold:        #c9a96e;
    --va-text:        #2c2c2c;
    --va-muted:       #6b7280;
    --va-border:      #ddd8d2;
    --va-bg:          #f5f2ef;
    --va-card-bg:     #ffffff;
    --va-radius:      12px;
    --va-shadow:      0 4px 20px rgba(2,31,103,0.10);
    --va-transition:  0.2s ease;
}

.va-public-wrap       { max-width: 900px; margin: 0 auto; padding: 20px 15px; font-family: inherit; color: var(--va-text); }
.va-registration-wrap { max-width: 580px; }

/* === CARDS === */
.va-card          { background: var(--va-card-bg); border-radius: var(--va-radius); box-shadow: var(--va-shadow); padding: 24px; margin-bottom: 20px; }
.va-card h2,
.va-card h3       { margin-top: 0; margin-bottom: 16px; color: var(--va-primary); font-size: 18px; }

/* === FORM CARD === */
.va-form-card { background: var(--va-card-bg); border-radius: var(--va-radius); box-shadow: var(--va-shadow); overflow: hidden; }

/* HEADER: crema con texto azul */
.va-form-header {
    background: #E9E3DD;
    color: #021F67;
    padding: 32px 32px 26px;
    text-align: center;
    border-bottom: 3px solid #d4ccc4;
}
.va-form-logo      { display: block; margin: 0 auto 16px; max-width: 200px; height: auto; }
.va-form-header h2 { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: #021F67; }
.va-form-header p  { margin: 0; color: #021F67; opacity: 0.72; font-size: 14px; }

.va-form        { padding: 28px 32px; }
.va-form-footer { text-align: center; padding: 16px 32px; border-top: 1px solid var(--va-border); color: var(--va-muted); font-size: 14px; }
.va-form-footer a { color: var(--va-primary); font-weight: 600; text-decoration: none; }
.va-form-footer a:hover { text-decoration: underline; }

/* === FORM FIELDS === */
.va-field       { margin-bottom: 18px; }
.va-field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; color: #021F67; }
.va-field input,
.va-field textarea,
.va-field select {
    width: 100%; padding: 11px 14px;
    border: 1.5px solid var(--va-border);
    border-radius: 8px; font-size: 15px;
    transition: border-color var(--va-transition), box-shadow var(--va-transition);
    box-sizing: border-box; background: #fff; color: var(--va-text);
}
.va-field input:focus,
.va-field textarea:focus,
.va-field select:focus {
    outline: none;
    border-color: #021F67;
    box-shadow: 0 0 0 3px rgba(2,31,103,0.10);
}
.va-form-2col      { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.va-form-row       { margin-bottom: 0; }
.va-checkbox-label { display: flex; align-items: flex-start; gap: 10px; font-weight: normal; cursor: pointer; }
.va-checkbox-label input { width: auto; margin-top: 3px; flex-shrink: 0; accent-color: #021F67; }
.va-checkbox-label a { color: #021F67; }
.va-field-hint  { display: block; margin-top: 5px; font-size: 12px; color: var(--va-muted); }
.va-optional    { font-weight: normal; color: var(--va-muted); font-size: 13px; }

/* === BUTTONS === */
.va-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 22px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; border: 2px solid transparent; text-decoration: none; transition: all var(--va-transition); }
.va-btn-primary       { background: #021F67; color: #E9E3DD; border-color: #021F67; }
.va-btn-primary:hover { background: #011448; border-color: #011448; color: #E9E3DD; }
.va-btn-outline       { background: transparent; color: #021F67; border-color: #021F67; }
.va-btn-outline:hover { background: #021F67; color: #E9E3DD; }
.va-btn-full     { width: 100%; }
.va-btn-sm       { padding: 7px 14px; font-size: 13px; }
.va-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* === MESSAGES === */
.va-message         { padding: 14px 18px; border-radius: 8px; margin-bottom: 16px; font-weight: 500; }
.va-message-success { background: #d1fae5; color: #065f46; border-left: 4px solid #10b981; }
.va-message-error   { background: #fee2e2; color: #991b1b; border-left: 4px solid #ef4444; }
.va-notice          { padding: 16px 20px; border-radius: 8px; margin-bottom: 20px; }
.va-notice-warning  { background: #fef3c7; color: #92400e; border-left: 4px solid #f59e0b; }
.va-notice-info     { background: #E9E3DD; color: #021F67; border-left: 4px solid #021F67; }
.va-notice-inline   { background: #fef3c7; color: #78350f; padding: 10px 14px; border-radius: 6px; font-size: 14px; }

/* === DASHBOARD HEADER — crema / azul === */
.va-dashboard-header {
    background: #E9E3DD;
    border-radius: var(--va-radius);
    padding: 22px 28px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid #d4ccc4;
    box-shadow: var(--va-shadow);
}
.va-dashboard-header-left { display: flex; align-items: center; gap: 16px; }
.va-dashboard-logo        { max-width: 130px; height: auto; display: block; }
.va-dashboard-header h2   { margin: 0 0 4px; font-size: 20px; font-weight: 700; color: #021F67; }
.va-dashboard-header p    { margin: 0; font-size: 14px; color: #021F67; opacity: 0.7; }
.va-header-actions .va-btn-outline       { color: #021F67; border-color: rgba(2,31,103,0.35); font-size: 13px; padding: 7px 14px; }
.va-header-actions .va-btn-outline:hover { background: #021F67; color: #E9E3DD; border-color: #021F67; }

/* Código de afiliado */
.va-code { display: inline-block; background: #021F67; color: #E9E3DD; padding: 3px 12px; border-radius: 6px; font-size: 15px; font-weight: 700; letter-spacing: 1.5px; }

/* === STATS GRID === */
.va-stats-grid   { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 20px; }
.va-stat-card    { text-align: center; padding: 20px 15px !important; }
.va-stat-icon    { font-size: 26px; margin-bottom: 8px; }
.va-stat-value   { font-size: 20px; font-weight: 700; color: #021F67; margin-bottom: 4px; }
.va-stat-label   { font-size: 11px; color: var(--va-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.va-stat-highlight                { border: 2px solid #c9a96e !important; }
.va-stat-highlight .va-stat-value { color: #021F67; }

/* === TABS === */
.va-tabs       { display: flex; gap: 4px; border-bottom: 2px solid var(--va-border); margin-bottom: 20px; overflow-x: auto; }
.va-tab        { background: none; border: none; padding: 11px 18px; font-size: 14px; font-weight: 600; color: var(--va-muted); cursor: pointer; border-radius: 8px 8px 0 0; transition: all var(--va-transition); white-space: nowrap; }
.va-tab:hover  { color: #021F67; background: rgba(2,31,103,0.05); }
.va-tab.active { color: #021F67; border-bottom: 3px solid #021F67; margin-bottom: -2px; background: rgba(2,31,103,0.04); }
.va-tab-content        { display: none; }
.va-tab-content.active { display: block; }

/* === LINK BOX === */
.va-link-box        { background: var(--va-bg); border-radius: 8px; padding: 16px; margin-bottom: 16px; border: 1px solid var(--va-border); }
.va-link-box strong { display: block; margin-bottom: 8px; font-size: 14px; color: #021F67; }
.va-copy-row        { display: flex; gap: 8px; }
.va-link-input      { flex: 1; padding: 9px 12px; border: 1.5px solid var(--va-border); border-radius: 7px; font-size: 13px; background: #fff; color: var(--va-text); }
.va-help            { margin: 8px 0 0; font-size: 13px; color: var(--va-muted); }

/* === TABLES === */
.va-table                  { width: 100%; border-collapse: collapse; font-size: 14px; }
.va-table th               { background: #E9E3DD; padding: 10px 12px; text-align: left; font-weight: 700; font-size: 12px; color: #021F67; text-transform: uppercase; letter-spacing: 0.5px; }
.va-table td               { padding: 12px 12px; border-bottom: 1px solid var(--va-border); vertical-align: middle; }
.va-table tr:last-child td { border-bottom: none; }
.va-table-responsive       { display: block; overflow-x: auto; }

/* === RADIO GROUP === */
.va-radio-group                    { display: flex; gap: 12px; flex-wrap: wrap; }
.va-radio-label                    { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 10px 16px; border: 2px solid var(--va-border); border-radius: 8px; font-weight: 600; transition: all var(--va-transition); }
.va-radio-label input              { margin: 0; accent-color: #021F67; }
.va-radio-label:has(input:checked) { border-color: #021F67; background: rgba(2,31,103,0.05); color: #021F67; }
.va-payment-fields                 { margin-top: 16px; }

/* === LOGIN PASSWORD TOGGLE === */
.va-password-wrap       { position: relative; }
.va-password-wrap input { padding-right: 44px; }
.va-toggle-pass         { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 18px; padding: 0; line-height: 1; opacity: 0.5; transition: opacity 0.2s; }
.va-toggle-pass:hover   { opacity: 1; }
.va-remember-row        { display: flex; justify-content: space-between; align-items: center; }
.va-forgot-link         { font-size: 13px; color: var(--va-muted); text-decoration: none; }
.va-forgot-link:hover   { color: #021F67; text-decoration: underline; }

/* === RESPONSIVE === */
@media (max-width: 600px) {
    .va-form                  { padding: 20px 18px; }
    .va-form-header           { padding: 24px 20px 20px; }
    .va-form-2col             { grid-template-columns: 1fr; }
    .va-dashboard-header      { flex-direction: column; align-items: flex-start; gap: 14px; }
    .va-dashboard-header-left { flex-direction: column; align-items: flex-start; gap: 8px; }
    .va-stats-grid            { grid-template-columns: repeat(2, 1fr); }
    .va-copy-row              { flex-direction: column; }
    .va-radio-group           { flex-direction: column; }
}