/* =========================================================================
   User Panel — Frontend styles
   Usa CSS custom properties para que Elementor las sobreescriba fácilmente.
   ========================================================================= */

/* ── Variables por defecto ────────────────────────────────────────────────── */
.up-panel {
    --up-bg:              #111111;
    --up-card-bg:         #1a1a1a;
    --up-accent:          #c9a84c;
    --up-accent-text:     #000000;
    --up-text:            #d4cfc7;
    --up-text-muted:      #888888;
    --up-border:          rgba(255, 255, 255, 0.08);
    --up-header-bg:       linear-gradient(135deg, #1c1c1c, #222222);
    --up-sidebar-bg:      #161616;
    --up-sidebar-active:  #c9a84c;
    --up-radius:          16px;
    --up-radius-card:     10px;
    --up-radius-btn:      8px;
    --up-greeting-color:           #ffffff;
    --up-section-title-color:      #ffffff;
    --up-course-title-color:       #ffffff;
    --up-btn-primary-hover-bg:     var(--up-accent);
    --up-btn-outline-color:        rgba(255, 255, 255, .65);
    --up-btn-outline-border:       rgba(255, 255, 255, .2);
    --up-btn-outline-hover-bg:     rgba(255, 255, 255, .06);
    --up-btn-outline-hover-color:  #ffffff;
    --up-btn-outline-hover-border: rgba(255, 255, 255, .4);
    --up-btn-ghost-hover-color:    var(--up-text);
    --up-btn-ghost-hover-border:   rgba(255, 255, 255, .25);

    /* ── Botones de estado ─────────────── */
    --up-btn-danger-bg:            rgba(248, 113, 113, .12);
    --up-btn-danger-color:         #f87171;
    --up-btn-danger-border:        rgba(248, 113, 113, .3);
    --up-btn-danger-hover-bg:      rgba(248, 113, 113, .22);
    --up-btn-success-bg:           rgba(74, 222, 128, .12);
    --up-btn-success-color:        #4ade80;
    --up-btn-success-border:       rgba(74, 222, 128, .3);
    --up-btn-success-hover-bg:     rgba(74, 222, 128, .22);

    /* ── Suscripciones ─────────────────── */
    --up-sub-block-bg:             rgba(255, 255, 255, .03);
    --up-sub-details-bg:           rgba(255, 255, 255, .025);
    --up-status-active-bg:         rgba(74, 222, 128, .1);
    --up-status-active-color:      #4ade80;
    --up-status-onhold-bg:         rgba(251, 191, 36, .1);
    --up-status-onhold-color:      #fbbf24;
    --up-status-danger-bg:         rgba(248, 113, 113, .1);
    --up-status-danger-color:      #f87171;
    --up-status-pending-bg:        rgba(148, 163, 184, .1);
    --up-status-pending-color:     #94a3b8;
    --up-confirm-bg:               rgba(248, 113, 113, .07);
    --up-confirm-border:           rgba(248, 113, 113, .2);
    --up-confirm-text:             #f87171;
    --up-ajax-success-bg:          rgba(74, 222, 128, .1);
    --up-ajax-success-color:       #4ade80;
    --up-ajax-error-bg:            rgba(248, 113, 113, .1);
    --up-ajax-error-color:         #f87171;

    /* ── Tabla de pedidos ──────────────── */
    --up-orders-th-bg:             rgba(255, 255, 255, .03);
    --up-orders-row-hover-bg:      rgba(255, 255, 255, .02);

    /* ── Botón Cerrar sesión ──────────── */
    --up-btn-logout-bg:             var(--up-btn-danger-bg);
    --up-btn-logout-color:          var(--up-btn-danger-color);
    --up-btn-logout-border:         var(--up-btn-danger-border);
    --up-btn-logout-hover-bg:       var(--up-btn-danger-hover-bg);
    --up-btn-logout-hover-color:    var(--up-btn-danger-color);
    --up-btn-logout-hover-border:   rgba(248, 113, 113, .5);

    /* ── Botones de navegación lateral ── */
    --up-nav-btn-bg:                transparent;
    --up-nav-btn-color:             var(--up-text-muted);
    --up-nav-btn-hover-bg:          rgba(255, 255, 255, .04);
    --up-nav-btn-hover-color:       var(--up-text);
    --up-nav-btn-active-bg:         rgba(255, 255, 255, .04);
    --up-nav-btn-active-color:      var(--up-sidebar-active);
    --up-nav-btn-active-border:     var(--up-sidebar-active);

    background:    var(--up-bg);
    border-radius: var(--up-radius);
    overflow:      hidden;
    color:         var(--up-text);
    font-family:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size:     14px;
    line-height:   1.6;
}

/* ── Notice (sin sesión) ──────────────────────────────────────────────────── */
.up-notice {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    text-align:      center;
    padding:         56px 24px;
    background:      var(--up-card-bg);
    color:           var(--up-text-muted);
    gap:             14px;
}
.up-notice__icon {
    font-size: 44px;
    line-height: 1;
}
.up-notice p {
    font-size: 15px;
    margin:    0;
    color:     var(--up-text-muted);
}

/* ── Header / Bienvenida ──────────────────────────────────────────────────── */
.up-panel__header {
    display:       flex;
    align-items:   center;
    gap:           18px;
    padding:       28px 32px;
    background:    var(--up-header-bg);
    border-bottom: 1px solid var(--up-border);
}
.up-panel__avatar-img,
.up-panel__avatar img {
    width:         72px !important;
    height:        72px !important;
    border-radius: 50% !important;
    object-fit:    cover;
    border:        3px solid rgba(201, 168, 76, .35);
    display:       block;
}
.up-panel__greeting {
    font-size:   20px;
    font-weight: 700;
    color:       var(--up-greeting-color, #ffffff);
    margin:      0 0 3px !important;
    line-height: 1.2;
}
.up-panel__email {
    font-size: 13px;
    color:     var(--up-text-muted);
    margin:    0;
}
.up-panel__header-text {
    flex: 1;
    min-width: 0;
}

/* ── Botón Cerrar sesión ─────────────────────────────────────────────────── */
.up-panel__logout-btn {
    display:         flex;
    align-items:     center;
    gap:             7px;
    margin-left:     auto;
    padding:         8px 14px;
    background:      var(--up-btn-logout-bg) !important;
    color:           var(--up-btn-logout-color) !important;
    border:          1px solid var(--up-btn-logout-border) !important;
    border-radius:   var(--up-radius-btn);
    font-size:       13px;
    font-weight:     600;
    text-decoration: none;
    white-space:     nowrap;
    transition:      background .15s ease, border-color .15s ease, color .15s ease;
    flex-shrink:     0;
}
.up-panel__logout-btn:hover {
    background:      var(--up-btn-logout-hover-bg) !important;
    border-color:    var(--up-btn-logout-hover-border) !important;
    color:           var(--up-btn-logout-hover-color) !important;
    text-decoration: none;
}

/* ── Body: sidebar + content ─────────────────────────────────────────────── */
.up-panel__body {
    display: flex;
    min-height: 400px;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.up-panel__sidebar {
    display:        flex;
    flex-direction: column;
    width:          210px;
    flex-shrink:    0;
    background:     var(--up-sidebar-bg);
    border-right:   1px solid var(--up-border);
    padding:        18px 0;
    gap:            2px;
}
.up-panel__nav-item {
    display:        flex;
    align-items:    center;
    gap:            10px;
    padding:        12px 20px;
    background:     var(--up-nav-btn-bg);
    border:         none;
    border-left:    3px solid transparent;
    color:          var(--up-nav-btn-color);
    font-size:      13px;
    font-weight:    500;
    cursor:         pointer;
    text-align:     left;
    width:          100%;
    transition:     all .15s ease;
    border-radius:  0;
    line-height:    1.3;
}
.up-panel__nav-item:hover {
    background: var(--up-nav-btn-hover-bg);
    color:      var(--up-nav-btn-hover-color);
}
.up-panel__nav-item.is-active {
    border-left-color: var(--up-nav-btn-active-border);
    color:             var(--up-nav-btn-active-color);
    background:        var(--up-nav-btn-active-bg);
    font-weight:       700;
}
.up-panel__nav-icon {
    font-size: 16px;
    flex-shrink: 0;
}

/* ── Content area ────────────────────────────────────────────────────────── */
.up-panel__content {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
}
.up-panel__tab {
    display: none;
}
.up-panel__tab.is-active {
    display: block;
}

/* ── Section ─────────────────────────────────────────────────────────────── */
.up-panel__section {
    padding:       28px 32px;
    background:    var(--up-card-bg);
    min-height:    100%;
}
.up-panel__section-title {
    display:         flex !important;
    align-items:     center;
    gap:             10px;
    font-size:       13px;
    font-weight:     700;
    color:           var(--up-section-title-color, #ffffff);
    text-transform:  uppercase;
    letter-spacing:  .7px;
    margin:          0 0 22px !important;
    padding-bottom:  14px !important;
    border-bottom:   1px solid var(--up-border) !important;
}

/* ── Sub-section title ───────────────────────────────────────────────────── */
.up-subsection-title {
    font-size:   12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color:       var(--up-text-muted);
    margin:      0 0 14px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BOTONES
   Usamos .up-panel .up-btn para mayor especificidad y evitar que el tema
   pise los estilos del plugin.
───────────────────────────────────────────────────────────────────────────── */
.up-panel .up-btn {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             6px !important;
    padding:         10px 20px !important;
    border-radius:   var(--up-radius-btn) !important;
    font-size:       13px !important;
    font-weight:     600 !important;
    cursor:          pointer !important;
    text-decoration: none !important;
    border:          2px solid transparent !important;
    transition:      all .2s ease !important;
    white-space:     nowrap !important;
    line-height:     1.3 !important;
    box-shadow:      none !important;
}
.up-panel .up-btn:focus-visible {
    outline: 2px solid var(--up-accent);
    outline-offset: 2px;
}
.up-panel .up-btn--primary {
    background:   var(--up-accent);
    color:        var(--up-accent-text);
    border-color: var(--up-accent);
}
.up-panel .up-btn--primary:hover {
    background:   var(--up-btn-primary-hover-bg, var(--up-accent));
    border-color: var(--up-btn-primary-hover-bg, var(--up-accent));
    filter: brightness(1.1);
}
.up-panel .up-btn--outline {
    background:   transparent;
    color:        var(--up-btn-outline-color);
    border-color: var(--up-btn-outline-border);
}
.up-panel .up-btn--outline:hover {
    background:   var(--up-btn-outline-hover-bg);
    border-color: var(--up-btn-outline-hover-border);
    color:        var(--up-btn-outline-hover-color);
}
.up-panel .up-btn--ghost {
    background:   transparent;
    color:        var(--up-text-muted);
    border-color: var(--up-border);
}
.up-panel .up-btn--ghost:hover {
    color:        var(--up-btn-ghost-hover-color);
    border-color: var(--up-btn-ghost-hover-border);
}
.up-panel .up-btn--danger {
    background:   var(--up-btn-danger-bg);
    color:        var(--up-btn-danger-color);
    border-color: var(--up-btn-danger-border);
}
.up-panel .up-btn--danger:hover {
    background: var(--up-btn-danger-hover-bg);
}
.up-panel .up-btn--success {
    background:   var(--up-btn-success-bg);
    color:        var(--up-btn-success-color);
    border-color: var(--up-btn-success-border);
}
.up-panel .up-btn--success:hover {
    background: var(--up-btn-success-hover-bg);
}
.up-panel .up-btn--sm {
    padding:   7px 14px !important;
    font-size: 12px !important;
}
.up-panel .up-btn--xs {
    padding:       4px 10px !important;
    font-size:     11px !important;
    border-radius: calc(var(--up-radius-btn) * .7) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SUSCRIPCIONES
───────────────────────────────────────────────────────────────────────────── */
.up-subs-wrap {
    margin-bottom: 32px;
}
.up-sub-block {
    background:    var(--up-sub-block-bg);
    border:        1px solid var(--up-border);
    border-radius: var(--up-radius-card);
    padding:       20px;
    margin-bottom: 14px;
}
.up-sub-block__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             10px;
    margin-bottom:   14px;
}
.up-sub-name {
    font-size:   14px;
    font-weight: 700;
    color:       var(--up-text);
}
.up-sub-status {
    display:      inline-flex;
    align-items:  center;
    gap:          7px;
    font-size:    12px;
    font-weight:  600;
    padding:      5px 12px;
    border-radius: 50px;
}
.up-sub-dot {
    width:         7px;
    height:        7px;
    border-radius: 50%;
    flex-shrink:   0;
}
.up-sub-status--active   { background: var(--up-status-active-bg);  color: var(--up-status-active-color); }
.up-sub-status--active   .up-sub-dot { background: var(--up-status-active-color); }
.up-sub-status--on-hold  { background: var(--up-status-onhold-bg);  color: var(--up-status-onhold-color); }
.up-sub-status--on-hold  .up-sub-dot { background: var(--up-status-onhold-color); }
.up-sub-status--cancelled,
.up-sub-status--expired  { background: var(--up-status-danger-bg); color: var(--up-status-danger-color); }
.up-sub-status--cancelled .up-sub-dot,
.up-sub-status--expired   .up-sub-dot { background: var(--up-status-danger-color); }
.up-sub-status--pending  { background: var(--up-status-pending-bg); color: var(--up-status-pending-color); }
.up-sub-status--pending  .up-sub-dot { background: var(--up-status-pending-color); }
.up-sub-status--unknown  { background: rgba(255,255,255,.06); color: var(--up-text-muted); }

.up-sub-details {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   8px 20px;
    margin:                0 0 16px;
    padding:               14px;
    background:            var(--up-sub-details-bg);
    border-radius:         8px;
}
@media (max-width: 480px) {
    .up-sub-details { grid-template-columns: 1fr; }
}
.up-sub-detail-row {
    display:        flex;
    flex-direction: column;
    gap:            2px;
}
.up-sub-detail-row--warn dd {
    color: #fbbf24;
}
.up-sub-detail-row dt {
    font-size:      10px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color:          var(--up-text-muted);
}
.up-sub-detail-row dd {
    font-size:   13px;
    color:       var(--up-text);
    margin:      0;
}
.up-sub-block__footer {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         10px;
    margin-top:  4px;
}
.up-sub-confirm {
    background:    var(--up-confirm-bg);
    border:        1px solid var(--up-confirm-border);
    border-radius: 8px;
    padding:       14px;
    width:         100%;
}
.up-sub-confirm__msg {
    font-size: 13px;
    color:     var(--up-confirm-text);
    margin:    0 0 12px;
}
.up-sub-confirm__actions {
    display: flex;
    gap:     8px;
}
.up-sub-ajax-msg {
    font-size:   13px;
    padding:     10px 14px;
    border-radius: 7px;
    margin-top:  8px;
}
.up-sub-ajax-msg.is-success {
    background: var(--up-ajax-success-bg);
    color:      var(--up-ajax-success-color);
}
.up-sub-ajax-msg.is-error {
    background: var(--up-ajax-error-bg);
    color:      var(--up-ajax-error-color);
}

/* ─────────────────────────────────────────────────────────────────────────────
   HISTORIAL DE PEDIDOS
───────────────────────────────────────────────────────────────────────────── */
.up-orders-wrap {
    margin-top: 32px;
}
.up-orders-table-wrap {
    overflow-x: auto;
    border:     1px solid var(--up-border);
    border-radius: var(--up-radius-card);
}
.up-orders-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       13px;
}
.up-orders-table th {
    padding:        10px 14px;
    text-align:     left;
    font-size:      10px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color:          var(--up-text-muted);
    background:     var(--up-orders-th-bg);
    border-bottom:  1px solid var(--up-border);
    white-space:    nowrap;
}
.up-orders-table td {
    padding:       10px 14px;
    color:         var(--up-text);
    border-bottom: 1px solid var(--up-border);
    vertical-align: middle;
}
.up-orders-table tr:last-child td {
    border-bottom: none;
}
.up-orders-table tr:hover td {
    background: var(--up-orders-row-hover-bg);
}
.up-order-status {
    display:      inline-block;
    padding:      3px 10px;
    border-radius: 50px;
    font-size:    11px;
    font-weight:  600;
}
.up-order-status--completed  { background: rgba(74,222,128,.1);  color: #4ade80; }
.up-order-status--processing { background: rgba(96,165,250,.1);  color: #60a5fa; }
.up-order-status--pending    { background: rgba(251,191,36,.1);  color: #fbbf24; }
.up-order-status--on-hold    { background: rgba(148,163,184,.1); color: #94a3b8; }
.up-order-status--cancelled,
.up-order-status--refunded,
.up-order-status--failed     { background: rgba(248,113,113,.1); color: #f87171; }

/* ─────────────────────────────────────────────────────────────────────────────
   CURSOS
───────────────────────────────────────────────────────────────────────────── */
.up-courses-controls {
    margin-bottom: 24px;
}
.up-search-input {
    width:        100%;
    max-width:    360px;
    padding:      10px 14px;
    background:   rgba(255,255,255,.06);
    border:       1px solid var(--up-border);
    border-radius: 8px;
    color:        var(--up-text);
    font-size:    13px;
    outline:      none;
    transition:   border-color .2s;
}
.up-search-input:focus {
    border-color: var(--up-accent);
}
.up-search-input::placeholder {
    color: var(--up-text-muted);
}
.up-courses-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   16px;
}
@media (max-width: 900px) {
    .up-courses-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .up-courses-grid { grid-template-columns: 1fr; }
}
.up-course-card {
    background:    rgba(255,255,255,.03);
    border:        1px solid var(--up-border);
    border-radius: var(--up-radius-card);
    overflow:      hidden;
    transition:    transform .2s ease, border-color .2s ease;
}
.up-course-card:hover {
    transform:    translateY(-3px);
    border-color: rgba(255, 255, 255, .18);
}
.up-course-card.is-hidden {
    display: none;
}
.up-course-thumb img {
    width:        100%;
    aspect-ratio: 16 / 9;
    object-fit:   cover;
    display:      block;
}
.up-course-body {
    padding: 14px 16px 16px;
}
.up-course-cat {
    display:        block;
    font-size:      10px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color:          var(--up-accent);
    margin-bottom:  4px;
}
.up-course-title {
    font-size:   13px;
    font-weight: 600;
    color:       var(--up-course-title-color, #ffffff);
    margin:      0 0 12px !important;
    line-height: 1.35;
}

/* ── Progress bar ────────────────────────────────────────────────────────── */
.up-progress {
    display:       flex;
    align-items:   center;
    gap:           8px;
    margin-bottom: 12px;
}
.up-progress__bar {
    flex:          1;
    height:        4px;
    background:    rgba(255,255,255,.1);
    border-radius: 2px;
    overflow:      hidden;
}
.up-progress__fill {
    height:        100%;
    background:    var(--up-accent);
    border-radius: 2px;
    transition:    width .4s ease;
}
.up-progress__pct {
    font-size:  11px;
    color:      var(--up-text-muted);
    white-space: nowrap;
    min-width:  32px;
    text-align: right;
}

/* ── Empty states ────────────────────────────────────────────────────────── */
.up-empty-hint {
    font-size: 13px;
    color:     var(--up-text-muted);
    margin:    8px 0 0;
}
.up-empty-block {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    padding:        44px 20px;
    color:          var(--up-text-muted);
    gap:            12px;
}
.up-empty-block__icon {
    font-size:   42px;
    line-height: 1;
}
.up-empty-block p {
    margin: 0;
    font-size: 14px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FORMULARIO DE PERFIL
───────────────────────────────────────────────────────────────────────────── */
.up-profile-form {
    max-width: 620px;
}
.up-form-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   16px 20px;
    margin-bottom:         20px;
}
@media (max-width: 560px) {
    .up-form-grid { grid-template-columns: 1fr; }
}
.up-form-field {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}
.up-form-field--full {
    grid-column: 1 / -1;
}
.up-form-label {
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color:          var(--up-text-muted);
}
.up-form-input {
    padding:       10px 14px;
    background:    rgba(255,255,255,.06);
    border:        1px solid var(--up-border);
    border-radius: 7px;
    color:         var(--up-text);
    font-size:     13px;
    outline:       none;
    width:         100%;
    transition:    border-color .2s, box-shadow .2s;
    box-sizing:    border-box;
}
.up-form-input:focus {
    border-color: var(--up-accent);
    box-shadow:   0 0 0 3px rgba(201,168,76,.12);
}
.up-form-input::placeholder {
    color: var(--up-text-muted);
}

/* ── Password section (details/summary) ─────────────────────────────────── */
.up-pass-section {
    border:        1px solid var(--up-border);
    border-radius: 8px;
    overflow:      hidden;
    margin-bottom: 22px;
}
.up-pass-section__toggle {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     14px 18px;
    font-size:   13px;
    font-weight: 600;
    color:       var(--up-text);
    cursor:      pointer;
    user-select: none;
    list-style:  none;
    background:  rgba(255,255,255,.03);
    transition:  background .15s;
}
.up-pass-section__toggle::-webkit-details-marker {
    display: none;
}
.up-pass-section__toggle::before {
    content:  '▶';
    font-size: 10px;
    transition: transform .2s;
}
.up-pass-section[open] .up-pass-section__toggle::before {
    transform: rotate(90deg);
}
.up-pass-section__toggle:hover {
    background: rgba(255,255,255,.06);
}
.up-pass-fields {
    padding:    16px 18px;
    margin:     0;
    background: transparent;
}

/* ── Form footer ─────────────────────────────────────────────────────────── */
.up-form-footer {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         14px;
}
.up-form-msg {
    font-size:     13px;
    padding:       9px 14px;
    border-radius: 7px;
}
.up-form-msg.is-success {
    background: rgba(74,222,128,.1);
    color:      #4ade80;
}
.up-form-msg.is-error {
    background: rgba(248,113,113,.1);
    color:      #f87171;
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .up-panel__header {
        padding: 20px 20px;
    }
    .up-panel__body {
        flex-direction: column;
    }
    .up-panel__sidebar {
        width:         100%;
        flex-direction: row;
        flex-wrap:     wrap;
        padding:       8px 10px;
        border-right:  none;
        border-bottom: 1px solid var(--up-border);
        gap:           4px;
    }
    .up-panel__nav-item {
        flex:          0 0 auto;
        padding:       8px 14px;
        border-left:   none;
        border-bottom: 3px solid transparent;
        border-radius: 6px;
        font-size:     12px;
    }
    .up-panel__nav-item.is-active {
        border-left-color:   transparent;
        border-bottom-color: var(--up-sidebar-active);
    }
    .up-panel__section {
        padding: 20px 18px;
    }
    .up-sub-details {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 480px) {
    .up-panel__greeting {
        font-size: 17px !important;
    }
    .up-panel__avatar-img,
    .up-panel__avatar img {
        width:  54px !important;
        height: 54px !important;
    }
    .up-panel__avatar-img,
    .up-panel__avatar img {
        width:  54px !important;
        height: 54px !important;
    }
}

/* ==========================================================================
   WooCommerce — Detalles expandibles de pedido
   ========================================================================== */
.up-order-actions-td {
    display:     flex;
    align-items: center;
    gap:         6px;
    flex-wrap:   wrap;
}
.up-order-toggle-btn.is-open {
    background:   rgba(201, 168, 76, .1);
    border-color: rgba(201, 168, 76, .35);
    color:        var(--up-accent);
}
.up-order-details-row td {
    padding:       0 !important;
    border-bottom: 1px solid var(--up-border);
}
.up-order-details {
    padding:    16px 20px;
    background: rgba(255, 255, 255, .015);
}
.up-order-items {
    width:           100%;
    border-collapse: collapse;
    font-size:       12px;
    margin-bottom:   12px;
}
.up-order-items th {
    padding:        6px 10px;
    text-align:     left;
    font-size:      10px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color:          var(--up-text-muted);
    border-bottom:  1px solid var(--up-border);
}
.up-order-items td {
    padding:       7px 10px;
    color:         var(--up-text);
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.up-order-items tr:last-child td {
    border-bottom: none;
}
.up-order-invoice {
    margin-top: 12px;
}

/* ==========================================================================
   TutorLMS — Sub-navegación interna (Mis Cursos / Q&A / Calendario / Quiz)
   ========================================================================== */
.up-tutor-subnav {
    display:        flex;
    flex-wrap:      wrap;
    gap:            6px;
    margin-bottom:  32px;
    padding-bottom: 20px;
    border-bottom:  1px solid var(--up-border);
}
.up-tutor-subnav__btn {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       7px 14px;
    background:    rgba(255, 255, 255, .04);
    border:        1px solid var(--up-border);
    border-radius: 6px;
    color:         var(--up-text-muted);
    font-size:     12px;
    font-weight:   600;
    cursor:        pointer;
    transition:    all .15s ease;
    white-space:   nowrap;
}
.up-tutor-subnav__btn:hover {
    background: rgba(255, 255, 255, .07);
    color:      var(--up-text);
}
.up-tutor-subnav__btn.is-active {
    background:   rgba(201, 168, 76, .12);
    border-color: rgba(201, 168, 76, .4);
    color:        var(--up-accent);
}
.up-tutor-tab {
    display: none !important;
}
.up-tutor-tab.is-active {
    display: block !important;
}

/* ==========================================================================
   TutorLMS — Preguntas y Respuestas
   ========================================================================== */
.up-qa-list {
    display:        flex;
    flex-direction: column;
    gap:            14px;
}
.up-qa-item {
    background:    rgba(255, 255, 255, .03);
    border:        1px solid var(--up-border);
    border-left:   3px solid var(--up-border);
    border-radius: var(--up-radius-card);
    padding:       16px 18px;
}
.up-qa-item--answered   { border-left-color: #4ade80; }
.up-qa-item--unanswered { border-left-color: #fbbf24; }

.up-qa-item__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             8px;
    margin-bottom:   10px;
}
.up-qa-item__meta {
    display:     flex;
    align-items: center;
    gap:         10px;
}
.up-qa-course {
    font-size:      11px;
    font-weight:    700;
    color:          var(--up-accent);
    text-transform: uppercase;
    letter-spacing: .4px;
}
.up-qa-date {
    font-size: 11px;
    color:     var(--up-text-muted);
}
.up-qa-status {
    font-size:     11px;
    font-weight:   600;
    padding:       3px 10px;
    border-radius: 50px;
}
.up-qa-status--answered   { background: rgba(74, 222, 128, .1); color: #4ade80; }
.up-qa-status--unanswered { background: rgba(251, 191, 36, .1); color: #fbbf24; }

.up-qa-title {
    font-size:   13px;
    font-weight: 600;
    color:       var(--up-text);
    margin:      0 0 6px !important;
}
.up-qa-question-body {
    font-size: 13px;
    color:     var(--up-text-muted);
}
.up-qa-question-body p { margin: 0; }

.up-qa-answer {
    margin-top:  12px;
    padding-top: 12px;
    border-top:  1px solid var(--up-border);
}
.up-qa-answer__label {
    display:        block;
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color:          #4ade80;
    margin-bottom:  6px;
}
.up-qa-answer__body {
    font-size: 13px;
    color:     var(--up-text);
}
.up-qa-answer__body p { margin: 0; }

/* ==========================================================================
   TutorLMS — Calendario / Clases en vivo
   ========================================================================== */
.up-calendar-list {
    display:        flex;
    flex-direction: column;
    gap:            12px;
}
.up-cal-item {
    display:       flex;
    align-items:   center;
    gap:           16px;
    background:    rgba(255, 255, 255, .03);
    border:        1px solid var(--up-border);
    border-radius: var(--up-radius-card);
    padding:       14px 18px;
}
.up-cal-item__date {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    min-width:      46px;
    padding:        8px 12px;
    background:     rgba(201, 168, 76, .1);
    border:         1px solid rgba(201, 168, 76, .25);
    border-radius:  8px;
    flex-shrink:    0;
}
.up-cal-day {
    font-size:   22px;
    font-weight: 700;
    color:       var(--up-accent);
    line-height: 1;
}
.up-cal-month {
    font-size:      10px;
    font-weight:    700;
    text-transform: uppercase;
    color:          var(--up-text-muted);
    margin-top:     3px;
}
.up-cal-item__body {
    flex:      1;
    min-width: 0;
}
.up-cal-title {
    font-size:   14px;
    font-weight: 600;
    color:       var(--up-text);
    margin:      0 0 4px !important;
}
.up-cal-course {
    display:        block;
    font-size:      11px;
    font-weight:    600;
    color:          var(--up-accent);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom:  4px;
}
.up-cal-meta {
    font-size: 12px;
    color:     var(--up-text-muted);
}
@media (max-width: 480px) {
    .up-cal-item   { flex-wrap: wrap; }
    .up-cal-item__date { min-width: 0; }
}

/* ==========================================================================
   TutorLMS — Cuestionarios
   ========================================================================== */
.up-quiz-wrap { }
.up-quiz-table-wrap {
    overflow-x:    auto;
    border:        1px solid var(--up-border);
    border-radius: var(--up-radius-card);
}
.up-quiz-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       13px;
}
.up-quiz-table th {
    padding:        10px 14px;
    text-align:     left;
    font-size:      10px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color:          var(--up-text-muted);
    background:     var(--up-orders-th-bg);
    border-bottom:  1px solid var(--up-border);
    white-space:    nowrap;
}
.up-quiz-table td {
    padding:        10px 14px;
    color:          var(--up-text);
    border-bottom:  1px solid var(--up-border);
    vertical-align: middle;
}
.up-quiz-table tr:last-child td { border-bottom: none; }
.up-quiz-course {
    font-size: 12px;
    color:     var(--up-text-muted);
}
.up-quiz-score {
    display:     flex;
    align-items: center;
    gap:         8px;
    white-space: nowrap;
}
.up-quiz-status {
    display:      inline-block;
    padding:      3px 10px;
    border-radius: 50px;
    font-size:    11px;
    font-weight:  600;
}
.up-quiz-status--pass      { background: rgba(74,  222, 128, .1); color: #4ade80; }
.up-quiz-status--fail      { background: rgba(248, 113, 113, .1); color: #f87171; }
.up-quiz-status--completed { background: rgba(96,  165, 250, .1); color: #60a5fa; }
.up-quiz-status--review    { background: rgba(251, 191,  36, .1); color: #fbbf24; }
.up-quiz-status--pending   { background: rgba(148, 163, 184, .1); color: #94a3b8; }

/* ==========================================================================
   Integración: Tus Beneficios (requiere Teducas - Manejo de Suscripciones)
   ========================================================================== */

/* ── Grilla de tarjetas ────────────────────────────────────────────────────── */
.up-benefits-wrap {
    display:        flex;
    flex-direction: column;
    gap:            28px;
}

.up-benefits-plan-title {
    font-size:      11px !important;
    font-weight:    700 !important;
    text-transform: uppercase;
    letter-spacing: .6px;
    color:          var(--up-text-muted) !important;
    margin:         0 0 14px !important;
}

.up-benefits-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap:                   16px;
}

/* ── Tarjeta de beneficio ──────────────────────────────────────────────────── */
.up-benefit-card {
    background:    var(--up-bg);
    border:        1px solid var(--up-border);
    border-radius: var(--up-radius-card);
    padding:       20px;
    display:       flex;
    flex-direction: column;
    gap:           12px;
    transition:    border-color .2s ease, box-shadow .2s ease;
}

.up-benefit-card:hover {
    border-color: var(--up-accent);
    box-shadow:   0 4px 20px rgba(0, 0, 0, .25);
}

/* Acento de color por tipo */
.up-benefit-card--pdf      { --benefit-accent: #e74c3c; }
.up-benefit-card--link     { --benefit-accent: var(--up-accent); }
.up-benefit-card--whatsapp { --benefit-accent: #25d366; }
.up-benefit-card--html     { --benefit-accent: #8b5cf6; }

.up-benefit-card {
    border-top:  3px solid var(--benefit-accent, var(--up-accent));
}

/* ── Icono ─────────────────────────────────────────────────────────────────── */
.up-benefit-card__icon {
    font-size:   32px;
    line-height: 1;
}

/* ── Cuerpo ────────────────────────────────────────────────────────────────── */
.up-benefit-card__body {
    display:        flex;
    flex-direction: column;
    gap:            12px;
    flex:           1;
}

/* ==========================================================================
   Modal — Detalles de pedido
   ========================================================================== */

body.up-modal-open {
    overflow: hidden;
}

.up-order-modal {
    position:        fixed;
    inset:           0;
    z-index:         99999;
    display:         none;
    align-items:     center;
    justify-content: center;
    padding:         16px;
}

.up-order-modal__overlay {
    position:   absolute;
    inset:      0;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(4px);
}

.up-order-modal__box {
    position:       relative;
    background:     var(--up-card-bg);
    color:          var(--up-text);
    border-radius:  14px;
    border:         1px solid var(--up-border);
    width:          100%;
    max-width:      680px;
    max-height:     88vh;
    display:        flex;
    flex-direction: column;
    box-shadow:     0 24px 64px rgba(0, 0, 0, .6);
    overflow:       hidden;
}

.up-order-modal__close {
    position:      absolute;
    top:           12px;
    right:         14px;
    background:    transparent;
    border:        none;
    color:         var(--up-text-muted);
    font-size:     18px;
    line-height:   1;
    cursor:        pointer;
    padding:       4px 8px;
    border-radius: 6px;
    transition:    color .2s, background .2s;
    z-index:       1;
}
.up-order-modal__close:hover {
    color:      var(--up-section-title-color);
    background: var(--up-border);
}

.up-order-modal__body {
    overflow-y: auto;
    padding:    28px 28px 24px;
    flex:       1;
}

/* Loader */
.up-order-modal__loader {
    display:         flex;
    align-items:     center;
    gap:             12px;
    justify-content: center;
    padding:         40px 0;
    color:           var(--up-text-muted);
    font-size:       14px;
}

.up-modal-spinner {
    display:      inline-block;
    width:        20px;
    height:       20px;
    border:       2px solid var(--up-border);
    border-top-color: var(--up-accent);
    border-radius: 50%;
    animation:    up-spin .7s linear infinite;
}
@keyframes up-spin {
    to { transform: rotate(360deg); }
}

/* Contenido WooCommerce inyectado */
.up-order-modal__content {
    font-size:        14px;
    line-height:      1.6;
    color:            var(--up-text);
    background-color: var(--up-card-bg);
}

/* Reset agresivo: neutralizar fondos blancos de WooCommerce */
.up-order-modal__content *,
.up-order-modal__content *::before,
.up-order-modal__content *::after {
    box-sizing: border-box;
}
.up-order-modal__content table,
.up-order-modal__content thead,
.up-order-modal__content tbody,
.up-order-modal__content tfoot,
.up-order-modal__content tr,
.up-order-modal__content td,
.up-order-modal__content th {
    background-color: transparent;
    border-color:     var(--up-border);
    color:            var(--up-text);
}

/* Reset básico para que el HTML de WC no herede estilos raros */
.up-order-modal__content h1,
.up-order-modal__content h2,
.up-order-modal__content h3,
.up-order-modal__content h4 {
    color: var(--up-section-title-color);
}
.up-order-modal__content h2 {
    font-size:   18px;
    font-weight: 600;
    margin:      0 0 16px;
}
.up-order-modal__content p {
    margin: 0 0 10px;
    color:  var(--up-text);
}
.up-order-modal__content table {
    width:            100%;
    border-collapse:  collapse;
    margin-bottom:    16px;
    background-color: transparent;
}
.up-order-modal__content table th,
.up-order-modal__content table td {
    padding:          8px 10px;
    border-bottom:    1px solid var(--up-border);
    text-align:       left;
    color:            var(--up-text);
    background-color: transparent;
}
.up-order-modal__content table th {
    color:          var(--up-text-muted);
    font-weight:    500;
    font-size:      12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* WooCommerce .shop_table thead */
.up-order-modal__content .shop_table thead tr th,
.up-order-modal__content .shop_table tr th,
.up-order-modal__content .woocommerce-table thead tr th {
    background-color: transparent !important;
    color:            var(--up-text-muted) !important;
    border-color:     var(--up-border) !important;
}

/* WooCommerce notices (mensaje de estado del pedido) */
.up-order-modal__content .woocommerce-info,
.up-order-modal__content .woocommerce-message,
.up-order-modal__content .woocommerce-error {
    background-color: var(--up-sub-block-bg);
    border-color:     var(--up-border);
    color:            var(--up-text);
    list-style:       none;
    padding:          12px 16px;
    margin-bottom:    16px;
    border-radius:    8px;
}

/* Dirección de facturación / envío */
.up-order-modal__content address {
    background-color: var(--up-sub-block-bg);
    border:           1px solid var(--up-border);
    border-radius:    8px;
    padding:          12px 16px;
    color:            var(--up-text);
    font-style:       normal;
    margin-bottom:    16px;
}
.up-order-modal__content tfoot th,
.up-order-modal__content tfoot td {
    border-bottom: none;
    border-top:    1px solid var(--up-border);
}
/* Fila total: forzar fondo transparente contra estilos agresivos del tema/WC */
.up-order-modal__content tfoot tr:last-child th,
.up-order-modal__content tfoot tr:last-child td,
.up-order-modal__content .order-total th,
.up-order-modal__content .order-total td,
.up-order-modal__content .order-total > th,
.up-order-modal__content .order-total > td {
    background-color: var(--up-modal-total-bg, transparent) !important;
    color:            var(--up-modal-total-color, var(--up-accent)) !important;
    font-weight:      700;
}

/* Botones dentro del modal (ej. Factura) */
.up-order-modal__content .button,
.up-order-modal__content .wc-action-button,
.up-order-modal__content a.button {
    display:          inline-block;
    background:       color-mix(in srgb, var(--up-accent) 12%, transparent);
    color:            var(--up-accent);
    border:           1px solid color-mix(in srgb, var(--up-accent) 35%, transparent);
    border-radius:    8px;
    padding:          8px 18px;
    font-size:        13px;
    font-weight:      600;
    text-decoration:  none;
    cursor:           pointer;
    transition:       background .2s, border-color .2s;
    margin:           4px 4px 4px 0;
}
.up-order-modal__content .button:hover,
.up-order-modal__content .wc-action-button:hover,
.up-order-modal__content a.button:hover {
    background:   color-mix(in srgb, var(--up-accent) 22%, transparent);
    border-color: color-mix(in srgb, var(--up-accent) 60%, transparent);
    color:        var(--up-accent);
}

/* Sección de acciones / order-again */
.up-order-modal__content .woocommerce-order-overview,
.up-order-modal__content ul.woocommerce-order-overview {
    list-style:  none;
    margin:      0 0 20px;
    padding:     0;
    display:     flex;
    flex-wrap:   wrap;
    gap:         8px 20px;
}
.up-order-modal__content .woocommerce-order-overview li,
.up-order-modal__content ul.woocommerce-order-overview li {
    font-size:  13px;
    color:      var(--up-text-muted);
}
.up-order-modal__content .woocommerce-order-overview li strong,
.up-order-modal__content ul.woocommerce-order-overview li strong {
    color: var(--up-text);
}

/* Mensaje de error modal */
.up-modal-error {
    color:      #f87171;
    text-align: center;
    padding:    32px 0;
}

@media (max-width: 560px) {
    .up-order-modal__box {
        max-height: 94vh;
        border-radius: 10px;
    }
    .up-order-modal__body {
        padding: 20px 16px;
    }
}
}

.up-benefit-card__title {
    font-size:   14px;
    font-weight: 600;
    color:       var(--up-text);
    margin:      0;
    line-height: 1.4;
}

/* ── Botón de beneficio ────────────────────────────────────────────────────── */
.up-benefit-btn {
    align-self:  flex-start;
    margin-top:  auto;
}

/* ── Botón WhatsApp ────────────────────────────────────────────────────────── */
.up-btn--whatsapp {
    background:   #25d366;
    color:        #fff !important;
    border-color: #1ebe5d;
}
.up-btn--whatsapp:hover {
    background:   #1ebe5d;
    border-color: #17a350;
    color:        #fff !important;
}

/* ── Bloque HTML libre ─────────────────────────────────────────────────────── */
.up-benefit-html {
    font-size:  13px;
    color:      var(--up-text-muted);
    line-height: 1.6;
}
.up-benefit-html a {
    color: var(--up-accent);
}
.up-benefit-html p:last-child {
    margin-bottom: 0;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .up-benefits-grid {
        grid-template-columns: 1fr;
    }
}