/* =========================================================================
   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 !important;
}
.up-panel__tab.is-active {
    display: block !important;
}

/* ── 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)
   ========================================================================== */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.up-benefits-wrap {
    display:        flex;
    flex-direction: column;
    gap:            36px;
}

/* ── Título del plan (solo con múltiples planes) ─────────────────────────── */
.up-benefits-plan-title {
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    font-size:      10px !important;
    font-weight:    700 !important;
    text-transform: uppercase;
    letter-spacing: .8px;
    color:          var(--up-accent) !important;
    margin:         0 0 18px !important;
    padding:        4px 12px;
    background:     rgba(201, 168, 76, .1);
    border:         1px solid rgba(201, 168, 76, .2);
    border-radius:  50px;
}

/* ── Grilla de tarjetas ──────────────────────────────────────────────────── */
.up-benefits-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:                   14px;
}

/* ── Variables de acento por tipo ────────────────────────────────────────── */
.up-benefit-card--pdf      { --benefit-accent: #e74c3c; --benefit-accent-rgb: 231, 76, 60; }
.up-benefit-card--link     { --benefit-accent: #c9a84c; --benefit-accent-rgb: 201, 168, 76; }
.up-benefit-card--whatsapp { --benefit-accent: #25d366; --benefit-accent-rgb: 37, 211, 102; }
.up-benefit-card--html     { --benefit-accent: #8b5cf6; --benefit-accent-rgb: 139, 92, 246; }

/* ── Tarjeta base ────────────────────────────────────────────────────────── */
.up-benefit-card {
    position:       relative;
    background:     var(--up-card-bg);
    border:         1px solid var(--up-border);
    border-top:     3px solid var(--benefit-accent, var(--up-accent));
    border-radius:  var(--up-radius-card);
    padding:        20px;
    display:        flex;
    flex-direction: column;
    gap:            14px;
    overflow:       hidden;
    transition:     border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}

.up-benefit-card::after {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     radial-gradient(
        circle at top left,
        rgba(var(--benefit-accent-rgb, 201, 168, 76), .07) 0%,
        transparent 65%
    );
    opacity:        0;
    transition:     opacity .3s ease;
    pointer-events: none;
}

.up-benefit-card:hover {
    border-color: rgba(var(--benefit-accent-rgb, 201, 168, 76), .5);
    box-shadow:   0 6px 28px rgba(var(--benefit-accent-rgb, 201, 168, 76), .14);
    transform:    translateY(-2px);
}

.up-benefit-card:hover::after {
    opacity: 1;
}

/* ── Insignia de tipo ────────────────────────────────────────────────────── */
.up-benefit-card__badge {
    display:        inline-flex;
    align-items:    center;
    gap:            4px;
    align-self:     flex-start;
    font-size:      10px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding:        3px 9px;
    border-radius:  50px;
    color:          var(--benefit-accent, var(--up-accent));
    background:     rgba(var(--benefit-accent-rgb, 201, 168, 76), .12);
    border:         1px solid rgba(var(--benefit-accent-rgb, 201, 168, 76), .22);
}

/* ── Icono ───────────────────────────────────────────────────────────────── */
.up-benefit-card__icon {
    width:           46px;
    height:          46px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       24px;
    line-height:     1;
    border-radius:   12px;
    background:      rgba(var(--benefit-accent-rgb, 201, 168, 76), .1);
    border:          1px solid rgba(var(--benefit-accent-rgb, 201, 168, 76), .16);
    flex-shrink:     0;
}

/* ── Cuerpo ──────────────────────────────────────────────────────────────── */
.up-benefit-card__body {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    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:   rgba(37, 211, 102, .15);
    color:        #25d366 !important;
    border-color: rgba(37, 211, 102, .3);
}
.up-btn--whatsapp:hover {
    background:   rgba(37, 211, 102, .25);
    border-color: rgba(37, 211, 102, .5);
    color:        #25d366 !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;
}

/* ── Imagen de portada en tarjeta ────────────────────────────────────────── */
.up-benefit-card__cover {
    width:         calc(100% + 40px);
    height:        150px;
    margin:        -20px -20px 0;
    overflow:      hidden;
    border-radius: calc(var(--up-radius-card) - 1px) calc(var(--up-radius-card) - 1px) 0 0;
}

.up-benefit-card__cover img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform .35s ease;
}

.up-benefit-card:hover .up-benefit-card__cover img {
    transform: scale(1.05);
}

/* ═════════════════════════════════════════════════════════════════════════
   Separador y título de sección de videos
   ═════════════════════════════════════════════════════════════════════════ */
.up-video-section-divider {
    display:        flex;
    align-items:    center;
    gap:            12px;
    margin:         32px 0 20px;
    color:          var(--up-text-muted);
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .8px;
}

.up-video-section-divider::before,
.up-video-section-divider::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: var(--up-border);
}

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

/* ── Grilla de videos ────────────────────────────────────────────────────── */
.up-videos-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap:                   18px;
    margin-top:            4px;
}

/* ── Tarjeta de video ────────────────────────────────────────────────────── */
.up-video-card {
    background:      var(--up-card-bg);
    border:          1px solid var(--up-border);
    border-radius:   var(--up-radius-card);
    overflow:        hidden;
    display:         flex;
    flex-direction:  column;
    transition:      border-color .25s ease, box-shadow .25s ease, transform .2s ease;
    text-decoration: none;
    color:           inherit;
    cursor:          pointer;
}

.up-video-card:hover {
    border-color: rgba(201, 168, 76, .5);
    box-shadow:   0 6px 28px rgba(201, 168, 76, .1);
    transform:    translateY(-2px);
}

/* ── Thumbnail del video ─────────────────────────────────────────────────── */
.up-video-card__thumbnail {
    position:     relative;
    width:        100%;
    aspect-ratio: 16 / 9;
    background:   rgba(255, 255, 255, .03);
    overflow:     hidden;
    cursor:       pointer;
}

/* ── Icono de play centrado sobre el thumbnail ───────────────────────────── */
.up-video-play-icon {
    position:         absolute;
    inset:            0;
    z-index:          2;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    pointer-events:   none;
}

.up-video-play-icon::before {
    content:         '\25B6'; /* ▶ */
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           52px;
    height:          52px;
    background:      rgba(0, 0, 0, .6);
    border:          2px solid rgba(255, 255, 255, .85);
    border-radius:   50%;
    backdrop-filter: blur(6px);
    transition:      background .25s ease, transform .2s ease;
    font-size:       20px;
    padding-left:    3px; /* visual centering of the triangle */
    color:           #fff;
}

.up-video-card:hover .up-video-play-icon::before {
    background:   rgba(201, 168, 76, .85);
    border-color: var(--up-accent, #c9a84c);
    transform:    scale(1.1);
}

.up-video-card__thumbnail img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform .4s ease;
}

.up-video-card__thumbnail:hover img {
    transform: scale(1.05);
}

.up-video-card__thumbnail iframe {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    border:   none;
}

/* Gradiente sutil sobre el thumbnail */
.up-video-card__thumbnail::before {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     linear-gradient(to top, rgba(0, 0, 0, .55) 0%, transparent 55%);
    z-index:        1;
    pointer-events: none;
}

/* ── Placeholder cuando no hay portada ───────────────────────────────────── */
.up-video-card__thumb-placeholder {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    height:          100%;
    font-size:       48px;
    color:           rgba(255, 255, 255, .1);
    background:      rgba(255, 255, 255, .03);
}

/* ── Botón de reproducción ───────────────────────────────────────────────── */
.up-video-play-btn {
    position:        absolute;
    inset:           0;
    z-index:         2;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      transparent;
    border:          none;
    cursor:          pointer;
    text-decoration: none;
    transition:      background .2s ease;
}

.up-video-play-btn:hover {
    background: rgba(0, 0, 0, .15);
}

.up-video-play-btn__icon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           52px;
    height:          52px;
    background:      rgba(0, 0, 0, .65);
    border:          2px solid rgba(255, 255, 255, .85);
    border-radius:   50%;
    color:           #fff;
    font-size:       20px;
    line-height:     1;
    padding-left:    4px;
    backdrop-filter: blur(6px);
    transition:      background .25s ease, border-color .25s ease, transform .2s ease;
}

.up-video-play-btn:hover .up-video-play-btn__icon {
    background:   rgba(201, 168, 76, .85);
    border-color: var(--up-accent);
    transform:    scale(1.1);
}

/* ── Cuerpo de la tarjeta de video ───────────────────────────────────────── */
.up-video-card__body {
    padding:        14px 16px 16px;
    display:        flex;
    flex-direction: column;
    gap:            8px;
    flex:           1;
}

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

.up-video-card__desc {
    font-size:   12px;
    color:       var(--up-text-muted);
    margin:      0;
    line-height: 1.55;
}

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

/* ════════════════════════════════════════════════════════════════════════════
   MODAL DE VIDEO
════════════════════════════════════════════════════════════════════════════ */
.up-video-modal {
    /* ── Variables del reproductor (personalizables vía Elementor) ────────── */
    --up-vm-overlay-bg:       rgba(0, 0, 0, .86);
    --up-vm-bg:               #000;
    --up-vm-controls-bg:      #1a1a1a;
    --up-vm-accent:           var(--up-accent, #c9a84c);
    --up-vm-btn-color:        rgba(255, 255, 255, .7);
    --up-vm-btn-hover-bg:     rgba(255, 255, 255, .1);
    --up-vm-btn-hover-color:  #fff;
    --up-vm-title-color:      rgba(255, 255, 255, .9);
    --up-vm-time-color:       rgba(255, 255, 255, .6);

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

.up-video-modal__overlay {
    position:   absolute;
    inset:      0;
    background: var(--up-vm-overlay-bg);
    cursor:     pointer;
}

.up-video-modal__box {
    position:     relative;
    z-index:      1;
    width:        100%;
    max-width:    860px;
    background:   var(--up-vm-bg);
    border-radius: 12px;
    overflow:     hidden;
    box-shadow:   0 24px 64px rgba(0, 0, 0, .7);
}

/* ── Header del modal — overlay sobre el player ────────────────────────── */
.up-video-modal__header {
    position:        absolute;
    top:             0;
    left:            0;
    right:           0;
    z-index:         60;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
    padding:         10px 16px;
    background:      linear-gradient(to bottom, rgba(0,0,0,.75) 0%, transparent 100%);
    opacity:         0;
    transition:      opacity .25s ease;
    pointer-events:  none;
}

.up-video-modal__title {
    font-size:   13px;
    font-weight: 600;
    color:       var(--up-vm-title-color);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
    flex:        1;
}

.up-video-modal__close {
    flex-shrink:     0;
    width:           30px;
    height:          30px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      transparent;
    border:          none;
    color:           var(--up-vm-btn-color);
    font-size:       16px;
    cursor:          pointer;
    border-radius:   6px;
    transition:      background .2s ease, color .2s ease;
    line-height:     1;
}

.up-video-modal__close:hover {
    background: var(--up-vm-btn-hover-bg);
    color:      var(--up-vm-btn-hover-color);
}

/* ── Área del reproductor — ocupa el 100% del box ──────────────────────── */
.up-video-modal__player {
    position:     relative;
    display:      block;
    width:        100%;
    aspect-ratio: 16 / 9;
    background:   var(--up-vm-bg);
    overflow:     hidden;
    user-select:  none;
    -webkit-user-select: none;
}

.up-video-modal__frame-wrap {
    position: absolute;
    inset:    0;
}

.up-video-modal__frame-wrap iframe {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    border:   none;
    display:  block;
}

/* Shield: capa invisible sobre el iframe — pointer-events none para no
   interrumpir la reproducci\u00f3n; el click derecho se bloquea v\u00eda JS en el
   contenedor padre (.up-video-modal__player). */
.up-video-modal__shield {
    position:       absolute;
    inset:          0;
    z-index:        10;
    background:     transparent;
    pointer-events: none;
}

/* Prevenir arrastre / selección de texto en el modal */
.up-video-modal__box * {
    -webkit-user-drag: none;
    user-drag:         none;
}

@media (max-width: 600px) {
    .up-video-modal {
        padding: 8px;
    }
    .up-video-modal__box {
        border-radius: 8px;
    }
}

/* ===== MODAL DE VIDEO: controles + auto-ocultar al estilo YouTube ===== */

/* -- Controles: overlay sobre el player (bottom), oculto hasta hover/move -- */
.up-video-modal__controls {
    position:    absolute;
    bottom:      0;
    left:        0;
    right:       0;
    z-index:     60;
    display:     flex;
    flex-direction: column;
    background:  linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.45) 65%, transparent 100%);
    padding-top: 28px;
    opacity:     0;
    transition:  opacity .25s ease;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

/* -- UI visible: header + controles aparecen al mover el mouse -- */
.up-video-modal__box.is-ui-visible .up-video-modal__header,
.up-video-modal__box.is-ui-visible .up-video-modal__controls {
    opacity:        1;
    pointer-events: auto;
}

/* Siempre visible fuera de pantalla completa (no hay hover en mobile, y el modal
   tiene tamaño fijo) */
.up-video-modal:not(:fullscreen):not(:-webkit-full-screen) .up-video-modal__header,
.up-video-modal:not(:fullscreen):not(:-webkit-full-screen) .up-video-modal__controls {
    opacity:        1;
    pointer-events: auto;
}

/* -- Boton generico del modal (fullscreen + play/pause) -- */
.up-video-modal__btn {
    flex-shrink:     0;
    width:           30px;
    height:          30px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      transparent;
    border:          none;
    color:           rgba(255,255,255,.6);
    font-size:       15px;
    cursor:          pointer;
    border-radius:   6px;
    transition:      background .2s ease, color .2s ease;
    line-height:     1;
    padding:         0;
}
.up-video-modal__btn:hover {
    background: rgba(255,255,255,.12);
    color:      #fff;
}

.up-video-modal__play-pause {
    font-size: 14px;
    width:     34px;
    height:    34px;
}

.up-video-modal__fullscreen-btn {
    font-size: 16px;
}

.up-video-modal__controls-spacer { flex: 1; }

.up-video-modal__hint {
    font-size:   11px;
    color:       rgba(255,255,255,.35);
    white-space: nowrap;
}

/* -- Modo pantalla completa CSS-fallback (sin Fullscreen API) -- */
.up-video-modal--fs {
    padding:    0 !important;
    background: #000 !important;
}
.up-video-modal--fs .up-video-modal__player {
    aspect-ratio: auto !important;
}

/* -- Pantalla completa nativa: JS aplica inline-styles; CSS solo base -- */
.up-video-modal:fullscreen,
.up-video-modal:-webkit-full-screen,
.up-video-modal:-moz-full-screen {
    display:    flex !important;
    padding:    0 !important;
    background: #000 !important;
}
.up-video-modal:fullscreen .up-video-modal__box,
.up-video-modal:-webkit-full-screen .up-video-modal__box,
.up-video-modal:-moz-full-screen .up-video-modal__box {
    border-radius: 0 !important;
    max-width:     none !important;
    overflow:      hidden !important;
}
.up-video-modal:fullscreen .up-video-modal__player,
.up-video-modal:-webkit-full-screen .up-video-modal__player,
.up-video-modal:-moz-full-screen .up-video-modal__player {
    aspect-ratio: auto !important;
    overflow:     hidden !important;
}
.up-video-modal:fullscreen .up-video-modal__frame-wrap,
.up-video-modal:-webkit-full-screen .up-video-modal__frame-wrap,
.up-video-modal:-moz-full-screen .up-video-modal__frame-wrap {
    overflow: hidden !important;
}

@media (max-width: 600px) {
    .up-video-modal { padding: 6px; }
    .up-video-modal__hint { display: none; }
}
/* ═══════════════════════════════════════════════════════════════════════════
   SHIELD: mascara activa — bloquea TODO contacto con el iframe
   El shield cubre el reproductor completo con pointer-events:auto, lo que
   significa que el mouse/touch NUNCA llega al iframe de YouTube o Drive.
   Los controles personalizados controlan el video via postMessage (YouTube)
   o reproducción automática (Drive).
   ═══════════════════════════════════════════════════════════════════════════ */
.up-video-modal__shield {
    pointer-events: auto !important;
    cursor:         default;
    z-index:        20 !important;
}

/* Cursor oculto: cubre todo el modal incluyendo el shield */
.up-video-modal.is-cursor-hidden,
.up-video-modal.is-cursor-hidden * {
    cursor: none !important;
}

/* Con el shield activo el bottom-cover es redundante; lo ocultamos */
.up-video-modal__bottom-cover {
    display: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
   REPRODUCTOR COMPLETO — big-play, seek, volumen, tiempo, fullscreen
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Botón play grande centrado ────────────────────────────────────────── */
.up-video-modal__big-play {
    position:        absolute;
    inset:           0;
    margin:          auto;
    width:           72px;
    height:          72px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      rgba(0, 0, 0, .55);
    border:          2px solid rgba(255, 255, 255, .85);
    border-radius:   50%;
    color:           #fff;
    font-size:       26px;
    cursor:          pointer;
    z-index:         30;
    pointer-events:  auto;
    backdrop-filter: blur(4px);
    /* oculto por defecto — JS añade .is-visible cuando está pausado */
    opacity:         0;
    transform:       scale(.8);
    transition:      opacity .2s ease, transform .2s ease, background .2s ease;
}
.up-video-modal__big-play.is-visible {
    opacity:   1;
    transform: scale(1);
}
.up-video-modal__big-play:hover {
    background: rgba(201, 168, 76, .85);
    border-color: var(--up-accent, #c9a84c);
    transform: scale(1.08);
}
.up-video-modal__big-play .up-vmbp-icon {
    padding-left: 4px; /* centrado visual del triángulo */
}

/* ── Controles completos ────────────────────────────────────────────────── */
.up-video-modal__controls {
    display:        flex;
    flex-direction: column;
    gap:            0;
    background:     var(--up-vm-controls-bg);
    border-top:     1px solid rgba(255, 255, 255, .08);
    flex-shrink:    0;
    user-select:    none;
    -webkit-user-select: none;
}

/* ── Seek bar (barra de progreso) ───────────────────────────────────────── */
.up-video-modal__seek-wrap {
    position:   relative;
    height:     20px;
    width:      100%;
    box-sizing: border-box;
    align-self: stretch;
    padding:    0 10px;
    cursor:     pointer;
    /* sin display:flex — los hijos son position:absolute */
}

.up-video-modal__seek-track {
    position:      absolute;
    left:          10px;
    right:         10px;
    top:           50%;
    transform:     translateY(-50%);
    height:        4px;
    background:    rgba(255, 255, 255, .15);
    border-radius: 2px;
    overflow:      hidden;
    pointer-events: none;
}

.up-video-modal__seek-fill {
    height:        100%;
    width:         0%;
    background:    var(--up-vm-accent);
    border-radius: 2px;
    pointer-events: none;
    transition:    width .1s linear;
}

/* Range input sobre el track (transparente — solo controla el valor) */
.up-video-modal__seek {
    position:           absolute;
    left:               10px;
    right:              10px;
    top:                0;
    bottom:             0;
    width:              auto;   /* left + right definen el ancho */
    height:             100%;
    -webkit-appearance: none;
    appearance:         none;
    background:         transparent;
    cursor:             pointer;
    outline:            none;
    margin:             0;
    padding:            0;
    z-index:            1;
}
.up-video-modal__seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:              12px;
    height:             12px;
    border-radius:      50%;
    background:         var(--up-vm-accent);
    cursor:             pointer;
    transition:         transform .15s ease;
}
.up-video-modal__seek:hover::-webkit-slider-thumb,
.up-video-modal__seek:focus::-webkit-slider-thumb {
    transform: scale(1.4);
}
.up-video-modal__seek::-moz-range-thumb {
    width:        12px;
    height:       12px;
    border-radius:50%;
    background:   var(--up-vm-accent);
    cursor:       pointer;
    border:       none;
}
.up-video-modal__seek:disabled {
    opacity:  .3;
    cursor:   not-allowed;
}

/* ── Fila de botones ────────────────────────────────────────────────────── */
.up-video-modal__controls-row {
    display:     flex;
    align-items: center;
    gap:         4px;
    padding:     6px 10px 8px;
}

/* ── Botones genéricos de control ───────────────────────────────────────── */
.up-video-modal__btn {
    width:           32px;
    height:          32px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      transparent;
    border:          none;
    border-radius:   6px;
    color:           var(--up-vm-btn-color);
    font-size:       15px;
    cursor:          pointer;
    flex-shrink:     0;
    transition:      background .18s ease, color .18s ease;
    padding:         0;
    line-height:     1;
}
.up-video-modal__btn:hover {
    background: var(--up-vm-btn-hover-bg);
    color:      var(--up-vm-btn-hover-color);
}
.up-video-modal__btn:disabled {
    opacity: .3;
    cursor:  not-allowed;
}

/* Play/pause: ligeramente más grande */
.up-video-modal__play-pause {
    font-size: 16px;
    width:     36px;
    height:    36px;
}

/* ── Tiempo ──────────────────────────────────────────────────────────────── */
.up-video-modal__time {
    font-size:   12px;
    color:       var(--up-vm-time-color);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    margin-left: 4px;
    line-height: 1;
}

.up-video-modal__controls-spacer { flex: 1; }

/* ── Grupo de volumen (icono + slider) ──────────────────────────────────── */
.up-video-modal__volume-group {
    display:     flex;
    align-items: center;
    gap:         4px;
}

/* Range input de volumen */
.up-video-modal__vol {
    width:              68px;
    height:             4px;
    -webkit-appearance: none;
    appearance:         none;
    border-radius:      2px;
    background:         linear-gradient(
        to right,
        var(--up-accent, #c9a84c) 0%,
        var(--up-accent, #c9a84c) 100%,
        rgba(255,255,255,.2) 100%,
        rgba(255,255,255,.2) 100%
    );
    cursor:   pointer;
    outline:  none;
}
.up-video-modal__vol::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:        10px;
    height:       10px;
    border-radius:50%;
    background:   #fff;
    cursor:       pointer;
}
.up-video-modal__vol::-moz-range-thumb {
    width:        10px;
    height:       10px;
    border-radius:50%;
    background:   #fff;
    cursor:       pointer;
    border:       none;
}
.up-video-modal__vol:disabled {
    opacity: .3;
    cursor:  not-allowed;
}

/* ── Nota para Drive ─────────────────────────────────────────────────────── */
.up-video-modal__drive-note {
    font-size:  11px;
    color:      rgba(255, 255, 255, .4);
    text-align: center;
    padding:    0 10px 6px;
    font-style: italic;
}

/* Close en header */
.up-video-modal__close {
    flex-shrink: 0;
    font-size:   16px;
}

/* ── Pantalla completa ──────────────────────────────────────────────────── */
.up-video-modal__fullscreen-btn { font-size: 14px; }

/* Volume gradient actualizado via JS con CSS custom property */
.up-video-modal__vol {
    --vol-pct: 100%;
    background: linear-gradient(
        to right,
        var(--up-vm-accent) 0%,
        var(--up-vm-accent) var(--vol-pct),
        rgba(255,255,255,.2) var(--vol-pct),
        rgba(255,255,255,.2) 100%
    );
}

@media (max-width: 480px) {
    .up-video-modal__vol { width: 48px; }
    .up-video-modal__time { font-size: 11px; }
}