/* ============================================================
   Twingital Featured Pro — Frontend CSS
   Usa variables CSS del plugin base con fallback propio
   ============================================================ */

/* ── Botón "Destacar" en cada item de mis publicaciones ───── */
.tfp-feature-btn {
    background: var(--tdp-primary, #2563eb) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--tdp-btn-radius, 8px) !important;
    font-size: 12px !important;
    padding: 5px 12px !important;
    cursor: pointer !important;
    white-space: nowrap;
}
.tfp-feature-btn:hover { opacity: .88 !important; }

.tfp-active-badge {
    display: inline-flex; align-items: center;
    color: #fff; font-size: 11px; font-weight: 700;
    padding: 4px 10px; border-radius: 20px;
    white-space: nowrap; gap: 4px;
}

/* ── Tabs inyectadas ─────────────────────────────────────── */
.tdp-db-tab[data-tab="tfp-featured"],
.tdp-db-tab[data-tab="tfp-payments"] {
    /* hereda los estilos del plugin base */
}

/* ── Paneles inyectados ───────────────────────────────────── */
.tfp-injected-pane { padding: 0; }
.tfp-panel-header  { margin-bottom: 20px; }
.tfp-panel-header h3 { margin: 0 0 4px; font-size: 18px; }
.tfp-panel-desc { color: #64748b; font-size: 13px; margin: 0; }

/* ── Spinner / loading ───────────────────────────────────── */
.tfp-loading-state {
    display: flex; align-items: center; gap: 10px;
    color: #94a3b8; padding: 20px 0; font-size: 14px;
}
.tfp-spinner {
    display: inline-block; width: 18px; height: 18px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--tdp-primary, #2563eb);
    border-radius: 50%;
    animation: tfp-spin .7s linear infinite; flex-shrink: 0;
}
@keyframes tfp-spin { to { transform: rotate(360deg); } }

/* ── Lista de mis destacados ─────────────────────────────── */
.tfp-featured-list,
.tfp-payments-list { display: flex; flex-direction: column; gap: 10px; }

.tfp-featured-item,
.tfp-payment-item {
    display: flex; align-items: center; gap: 14px;
    background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: 10px; padding: 12px 16px;
}
.tfp-fi-thumb {
    width: 52px; height: 52px; border-radius: 8px;
    object-fit: cover; flex-shrink: 0;
}
.tfp-fi-thumb-ph {
    width: 52px; height: 52px; border-radius: 8px;
    background: #e2e8f0; display: flex; align-items: center;
    justify-content: center; font-size: 22px; flex-shrink: 0;
}
.tfp-fi-info { flex: 1; min-width: 0; }
.tfp-fi-title { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.tfp-fi-title a { color: #1e293b; text-decoration: none; }
.tfp-fi-title a:hover { color: var(--tdp-primary, #2563eb); }
.tfp-fi-meta {
    display: flex; flex-wrap: wrap; gap: 8px;
    font-size: 12px; color: #64748b; align-items: center;
}
.tfp-fi-actions { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }

/* Badges de estado */
.tfp-fi-badge {
    display: inline-block; font-size: 11px; font-weight: 700;
    padding: 2px 8px; border-radius: 20px;
}
.tfp-status-active    { background: #dcfce7; color: #166534; }
.tfp-status-expired   { background: #f1f5f9; color: #64748b; }
.tfp-status-cancelled { background: #fee2e2; color: #991b1b; }
.tfp-status-completed { background: #dcfce7; color: #166534; }
.tfp-status-pending   { background: #fef9c3; color: #713f12; }
.tfp-status-refunded  { background: #fef3c7; color: #92400e; }
.tfp-status-failed    { background: #fee2e2; color: #991b1b; }

.tfp-days-urgent { color: #ef4444 !important; font-weight: 700; }
.tfp-days-ok     { color: #16a34a; }

/* Empty state */
.tfp-empty-state { text-align: center; padding: 32px 16px; color: #94a3b8; }
.tfp-empty-icon  { font-size: 48px; display: block; margin-bottom: 12px; }

/* ── MODAL OVERLAY ───────────────────────────────────────── */
.tfp-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 999999;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    backdrop-filter: blur(2px);
}
body.tfp-modal-open { overflow: hidden; }

/* ── MODAL BOX ───────────────────────────────────────────── */
.tfp-modal-box {
    background: #fff; border-radius: 16px;
    width: 100%; max-width: 580px; max-height: 90vh;
    overflow-y: auto; padding: 28px 28px 32px;
    position: relative;
    box-shadow: 0 24px 60px rgba(0,0,0,.22);
    animation: tfp-modal-in .2s ease;
}
@keyframes tfp-modal-in {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.tfp-modal-close {
    position: absolute; top: 14px; right: 14px;
    background: #f1f5f9; border: none; border-radius: 50%;
    width: 30px; height: 30px; cursor: pointer;
    font-size: 14px; line-height: 30px; text-align: center;
    color: #64748b; transition: background .15s;
}
.tfp-modal-close:hover { background: #e2e8f0; color: #1e293b; }

.tfp-modal-header { margin-bottom: 22px; }
.tfp-modal-title  { margin: 0 0 4px; font-size: 20px; }
.tfp-modal-subtitle {
    color: var(--tdp-primary, #2563eb);
    font-weight: 600; font-size: 14px; margin: 0;
    min-height: 20px;
}

/* ── PASOS ───────────────────────────────────────────────── */
.tfp-modal-step { margin-bottom: 22px; }
.tfp-step-label {
    display: flex; align-items: center; gap: 10px;
    font-weight: 700; font-size: 15px; margin-bottom: 14px;
    color: #1e293b;
}
.tfp-step-num {
    background: var(--tdp-primary, #2563eb); color: #fff;
    width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800; flex-shrink: 0;
}

/* Selector */
.tfp-select {
    width: 100%; padding: 10px 12px;
    border: 1px solid #dde1e7; border-radius: 8px;
    font-size: 15px; background: #fff;
    display: block; margin-bottom: 12px;
}

/* ── GRID DE PLANES ─────────────────────────────────────── */
.tfp-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
}
.tfp-plan-card {
    border: 2px solid #e2e8f0; border-radius: 12px;
    padding: 16px; cursor: pointer; position: relative;
    display: flex; flex-direction: column; gap: 6px;
    transition: border-color .18s, transform .18s, box-shadow .18s;
}
.tfp-plan-card:hover {
    border-color: var(--tdp-primary, #2563eb);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(37,99,235,.12);
}
.tfp-plan-card.selected {
    border-color: var(--tdp-primary, #2563eb);
    background: #eff6ff;
}
.tfp-plan-card.selected::after {
    content: '✓'; position: absolute; top: 10px; right: 10px;
    background: var(--tdp-primary, #2563eb); color: #fff;
    width: 20px; height: 20px; border-radius: 50%;
    font-size: 11px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.tfp-plan-badge-label {
    display: inline-block; color: #fff;
    font-size: 11px; font-weight: 700;
    padding: 2px 10px; border-radius: 20px; align-self: flex-start;
}
.tfp-plan-name     { font-size: 15px; font-weight: 700; margin: 4px 0 0; }
.tfp-plan-price    { font-size: 24px; font-weight: 800; color: var(--tdp-primary, #2563eb); }
.tfp-plan-free     { color: #16a34a !important; }
.tfp-plan-duration { color: #64748b; font-size: 12px; }
.tfp-plan-desc     { color: #64748b; font-size: 12px; margin: 0; }
.tfp-plan-features { list-style: none; padding: 0; margin: 4px 0 0; }
.tfp-plan-features li { font-size: 11px; color: #475569; padding: 2px 0; }
.tfp-plan-select-btn {
    width: 100%; text-align: center !important; margin-top: 8px !important;
    font-size: 13px !important;
}

/* ── PASARELAS ───────────────────────────────────────────── */
.tfp-gw-option {
    display: flex; align-items: center; gap: 12px;
    border: 2px solid #e2e8f0; border-radius: 10px;
    padding: 12px 16px; cursor: pointer; margin-bottom: 8px;
    transition: border-color .15s, background .15s;
}
.tfp-gw-option:hover    { border-color: var(--tdp-primary, #2563eb); }
.tfp-gw-option.selected { border-color: var(--tdp-primary, #2563eb); background: #eff6ff; }
.tfp-gw-icon  { font-size: 22px; flex-shrink: 0; }
.tfp-gw-info  { flex: 1; }
.tfp-gw-info strong { display: block; font-size: 14px; }
.tfp-gw-info span   { font-size: 12px; color: #64748b; }
.tfp-gw-check {
    display: none; background: var(--tdp-primary, #2563eb);
    color: #fff; width: 20px; height: 20px; border-radius: 50%;
    text-align: center; line-height: 20px; font-size: 11px; font-weight: 800;
}
.tfp-gw-option.selected .tfp-gw-check { display: block; }

/* ── RESUMEN DEL PEDIDO ─────────────────────────────────── */
.tfp-order-summary {
    background: #f8fafc; border-radius: 8px;
    padding: 12px 16px; margin: 14px 0;
}
.tfp-summary-row {
    display: flex; justify-content: space-between;
    font-size: 14px; color: #475569; padding: 2px 0;
}
.tfp-summary-row strong { color: #1e293b; }

/* ── BOTÓN PAGAR ─────────────────────────────────────────── */
.tfp-pay-btn {
    width: 100% !important; display: block !important;
    padding: 14px 20px !important; font-size: 16px !important;
    font-weight: 700 !important; text-align: center !important;
    border-radius: var(--tdp-btn-radius, 8px) !important;
    background: var(--tdp-primary, #2563eb) !important;
    color: #fff !important; border: none !important;
    cursor: pointer; transition: opacity .15s;
    margin-top: 4px;
}
.tfp-pay-btn:disabled { opacity: .45; cursor: not-allowed !important; }

/* ── MENSAJES DEL MODAL ──────────────────────────────────── */
.tfp-modal-msg {
    padding: 12px 16px; border-radius: 8px;
    margin-top: 12px; font-size: 14px;
}
.tfp-msg-success { background: #dcfce7; color: #166534; }
.tfp-msg-error   { background: #fee2e2; color: #991b1b; }

/* ── NOTICES GENERALES ───────────────────────────────────── */
.tfp-notice { padding: 12px 16px; border-radius: 8px; font-size: 14px; }
.tfp-notice-warning {
    background: #fef9c3; color: #713f12;
    border: 1px solid #fde68a;
}

/* ── GRID DE DESTACADOS (shortcode) ─────────────────────── */
.tfp-featured-grid {
    display: grid; gap: 20px;
}
.tfp-cols-1 { grid-template-columns: 1fr; }
.tfp-cols-2 { grid-template-columns: repeat(2,1fr); }
.tfp-cols-3 { grid-template-columns: repeat(3,1fr); }
.tfp-cols-4 { grid-template-columns: repeat(4,1fr); }
.tfp-cols-5 { grid-template-columns: repeat(5,1fr); }
.tfp-cols-6 { grid-template-columns: repeat(6,1fr); }
@media(max-width:900px) {
    .tfp-cols-3,.tfp-cols-4,.tfp-cols-5,.tfp-cols-6 { grid-template-columns: repeat(2,1fr); }
}
@media(max-width:600px) { .tfp-featured-grid { grid-template-columns: 1fr; } }

.tfp-featured-card {
    background: var(--tdp-card-bg, #fff);
    border-radius: var(--tdp-radius, 12px);
    box-shadow: var(--tdp-shadow, 0 2px 12px rgba(0,0,0,.08));
    overflow: hidden; position: relative;
    display: flex; flex-direction: column;
    transition: transform .2s, box-shadow .2s;
    border: 2px solid var(--tdp-feat-badge, #f59e0b);
}
.tfp-featured-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
.tfp-card-img-link {
    display: block; position: relative;
    aspect-ratio: 16/10; overflow: hidden;
}
.tfp-card-img-link img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .3s;
}
.tfp-featured-card:hover .tfp-card-img-link img { transform: scale(1.04); }
.tfp-badge {
    position: absolute; top: 10px; left: 10px;
    color: #fff; font-size: 11px; font-weight: 700;
    padding: 3px 10px; border-radius: 20px;
}
.tfp-card-body { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.tfp-card-title { margin: 0; font-size: 16px; }
.tfp-card-title a { color: var(--tdp-card-text, #1e293b); text-decoration: none; }
.tfp-card-location { color: #64748b; font-size: 13px; margin: 0; }
.tfp-card-excerpt  { color: #64748b; font-size: 13px; margin: 0; flex: 1; }
.tfp-card-btn {
    display: inline-block; margin-top: 8px;
    background: var(--tdp-btn-bg, var(--tdp-primary, #2563eb)) !important;
    color: var(--tdp-btn-text, #fff) !important;
    border-radius: var(--tdp-btn-radius, 8px) !important;
    border: none !important; text-align: center;
}

/* ── CAROUSEL ────────────────────────────────────────────── */

/* ── TICKER ──────────────────────────────────────────────── */
.tfp-ticker-wrap {
    overflow: hidden; background: var(--tdp-primary,#2563eb);
    color: #fff; padding: 10px 0; display: flex; align-items: center;
}
.tfp-ticker-label {
    background: rgba(0,0,0,.2); padding: 0 16px;
    font-weight: 700; font-size: 13px; white-space: nowrap;
    flex-shrink: 0;
}
.tfp-ticker-track {
    display: inline-flex; gap: 40px;
    animation: tfp-ticker-scroll linear infinite; white-space: nowrap;
}
.tfp-ticker-item a { color: #fff; text-decoration: none; font-size: 13px; }
@keyframes tfp-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ── SINGLE LISTING sidebar box ─────────────────────────── */
.tfp-single-featured-box {
    background: linear-gradient(135deg, var(--tfp-badge-color,#f59e0b) 0%, color-mix(in srgb, var(--tfp-badge-color,#f59e0b) 75%, #000) 100%);
    color: #fff; border-radius: 12px; padding: 16px 20px;
    margin-bottom: 20px; text-align: center;
}
.tfp-single-badge  { font-size: 18px; font-weight: 800; display: block; }
.tfp-single-plan   { font-size: 13px; opacity: .85; margin: 4px 0 0; }
.tfp-single-expiry { font-size: 12px; opacity: .85; }
.tfp-expiry-urgent { color: #fef08a !important; font-weight: 700; opacity: 1 !important; }

/* ── Badge extra en card (hook tdp_listing_card_footer) ─── */
.tfp-card-badge {
    position: absolute; top: 10px; right: 10px;
    display: flex; flex-direction: column; align-items: flex-end; gap: 3px; z-index: 10;
}
.tfp-badge-label {
    background: var(--tfp-badge-color, var(--tdp-feat-badge, #f59e0b));
    color: #fff; font-size: 11px; font-weight: 700;
    padding: 3px 10px; border-radius: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.tfp-badge-expires {
    background: #ef4444; color: #fff; font-size: 10px;
    padding: 2px 8px; border-radius: 20px;
}

/* ── Panel de Transferencia Bancaria ──────────────────────── */
.tfp-bank-panel {
    margin-top: 4px;
}
.tfp-bank-header {
    display: flex; align-items: flex-start; gap: 14px;
    background: #eff6ff; border: 1px solid #bfdbfe;
    border-radius: 10px; padding: 14px 16px; margin-bottom: 16px;
}
.tfp-bank-icon  { font-size: 30px; flex-shrink: 0; line-height: 1; }
.tfp-bank-header strong { display: block; font-size: 15px; margin-bottom: 2px; }
.tfp-bank-header p { margin: 0; font-size: 13px; color: #475569; }

.tfp-bank-data {
    width: 100%; border-collapse: collapse; margin-bottom: 18px;
    font-size: 14px;
}
.tfp-bank-data th {
    text-align: left; padding: 7px 12px 7px 0;
    color: #64748b; font-weight: 600; white-space: nowrap;
    width: 110px; vertical-align: top;
    border-bottom: 1px solid #f1f5f9;
}
.tfp-bank-data td {
    padding: 7px 0;
    color: #1e293b; word-break: break-all;
    border-bottom: 1px solid #f1f5f9;
}

.tfp-copyable { display: flex; align-items: center; gap: 8px; }
.tfp-copy-btn {
    background: none; border: 1px solid #dde1e7;
    border-radius: 4px; padding: 2px 6px;
    cursor: pointer; font-size: 13px;
    color: #64748b; transition: background .15s;
}
.tfp-copy-btn:hover { background: #f1f5f9; }
.tfp-copy-btn.copied { color: #16a34a; border-color: #86efac; background: #dcfce7; }

.tfp-bank-receipt-section { margin-top: 8px; }

.tfp-receipt-upload-zone {
    display: block;              /* label necesita display:block */
    border: 2px dashed #cbd5e1; border-radius: 10px;
    padding: 20px; text-align: center; cursor: pointer;
    transition: border-color .15s, background .15s;
    background: #fafbfc;
    user-select: none;
}
.tfp-receipt-upload-zone:hover,
.tfp-receipt-upload-zone.tfp-zone-over {
    border-color: var(--tdp-primary,#2563eb);
    background: #eff6ff;
}
.tfp-receipt-placeholder {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.tfp-receipt-placeholder span:first-child { font-size: 28px; }
.tfp-receipt-placeholder span:last-child  { font-size: 13px; color: #64748b; }

/* ── Aviso inline "ya destacada" ─────────────────────────── */
.tfp-inline-notice {
    display: inline-block;
    background: #fef9c3;
    color: #713f12;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 8px;
    animation: tfp-fadein .2s ease;
}
@keyframes tfp-fadein {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════
   CAROUSEL v2 — Elementor Widget
═══════════════════════════════════════════════════════════ */

/*
 * ESTRUCTURA HTML:
 * .tfp-carousel-wrap          ← position:relative, overflow:visible (para que flechas asomen)
 *   .tfp-carousel-arrow-bar   ← flechas en posición top (si aplica)
 *   .tfp-carousel-prev/next   ← flechas en posición middle (absoluto sobre el viewport)
 *   .tfp-carousel-viewport    ← overflow:hidden — solo este tiene clip
 *     .tfp-carousel-track     ← flex, se mueve con translateX
 *       .tfp-carousel-slide   ← cada tarjeta
 *   .tfp-carousel-arrow-bar   ← flechas en posición bottom (si aplica)
 *   .tfp-carousel-dots
 */

/* Wrap: posición relativa pero SIN overflow:hidden para que las flechas asomen */
.tfp-carousel-wrap {
    position: relative;
    outline: none;
    /* Padding lateral para que las flechas absolutas no queden recortadas por el tema */
    padding-left: 0;
    padding-right: 0;
}

/* Solo el viewport tiene el clip */
.tfp-carousel-viewport {
    overflow: hidden;
    width: 100%;
    position: relative;
}

/* Track: flex, se mueve con JS */
.tfp-carousel-track {
    display: flex;
    align-items: flex-start;
    will-change: transform;
    /* NO poner overflow aquí */
}

/* Slide */
.tfp-carousel-slide {
    flex-shrink: 0;
    box-sizing: border-box;
    /* El ancho se calcula con CSS inline por instancia en el widget PHP */
}

/* ── Igual altura ─────────────────────────────────────── */
.tfp-carousel-wrap.tfp-equal-height .tfp-carousel-track {
    align-items: stretch;
}
.tfp-carousel-wrap.tfp-equal-height .tfp-featured-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.tfp-carousel-wrap.tfp-equal-height .tfp-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.tfp-carousel-wrap.tfp-equal-height .tfp-el-card-btn {
    margin-top: auto;
}

/* ── Imagen ──────────────────────────────────────────── */
.tfp-el-img-wrap {
    position: relative;
    overflow: hidden;
    background: #f1f5f9;
    /* padding-bottom se aplica inline por instancia */
}
.tfp-el-img-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
    display: block;
}
.tfp-featured-card:hover .tfp-el-img-wrap img {
    transform: scale(1.04);
}
.tfp-card-img-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: #cbd5e1;
}

/* ── Tarjeta ─────────────────────────────────────────── */
.tfp-featured-card {
    background: var(--tdp-card-bg, #fff);
    border-radius: var(--tdp-radius, 12px);
    overflow: hidden;
    position: relative;
    transition: transform .25s ease, box-shadow .25s ease;
    border: 1px solid rgba(0,0,0,.07);
    width: 100%;
}

/* ── Body ────────────────────────────────────────────── */
.tfp-card-body { padding: 16px; }

.tfp-card-category {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tdp-primary, #2563eb);
    margin-bottom: 6px;
}
.tfp-el-card-title {
    margin: 0 0 6px;
    font-size: 16px;
    line-height: 1.3;
}
.tfp-el-card-title a {
    color: var(--tdp-card-text, #1e293b);
    text-decoration: none;
    transition: color .15s;
}
.tfp-el-card-title a:hover { color: var(--tdp-primary, #2563eb); }
.tfp-card-location {
    color: #64748b;
    font-size: 13px;
    margin: 0 0 8px;
}
.tfp-el-card-excerpt {
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 12px;
}
.tfp-el-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: var(--tdp-btn-bg, var(--tdp-primary, #2563eb)) !important;
    color: var(--tdp-btn-text, #fff) !important;
    border-radius: var(--tdp-btn-radius, 8px) !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer;
    transition: opacity .15s;
    margin-top: 8px;
    align-self: flex-start;
}
.tfp-el-card-btn:hover { opacity: .86; }

/* ── FLECHAS (posición centrada/middle — sobre el viewport) ─ */
.tfp-carousel-prev,
.tfp-carousel-next {
    position: absolute;
    /* top calculado respecto al .tfp-carousel-viewport */
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;        /* por encima del viewport y las tarjetas */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tdp-primary, #2563eb);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    box-shadow: 0 3px 12px rgba(0,0,0,.2);
    transition: opacity .15s, transform .15s;
    /* Asegurar que sean clickeables aunque queden sobre el borde */
    pointer-events: all;
}
/*
 * Las flechas "middle" están dentro del .tfp-carousel-wrap (hermanas del viewport),
 * por lo que top:50% es relativo al wrap, no al viewport.
 * Para que apunten al centro del viewport (que no incluye dots), usamos
 * el top relativo al wrap y dejamos que el offset horizontal las saque lateralmente.
 */
.tfp-carousel-prev { left: -20px; }
.tfp-carousel-next { right: -20px; }

.tfp-carousel-prev:hover,
.tfp-carousel-next:hover {
    opacity: .85;
    transform: translateY(-50%) scale(1.1);
}
.tfp-carousel-prev:disabled,
.tfp-carousel-next:disabled {
    opacity: .25;
    cursor: default;
    pointer-events: none;
}

/*
 * FIX CLAVE: El contenedor padre del widget de Elementor puede tener
 * overflow:hidden o padding que corte las flechas.
 * Agregamos padding lateral al wrap para que las flechas quepan sin recortarse.
 * El widget puede sobreescribir esto con el control "Desplazamiento horizontal".
 */
.tfp-carousel-wrap.tfp-arrows-outside {
    padding-left: 24px;
    padding-right: 24px;
}
/* Flechas interiores (sobre la imagen/tarjeta) */
.tfp-carousel-wrap.tfp-arrows-inside .tfp-carousel-prev {
    left: 8px;
}
.tfp-carousel-wrap.tfp-arrows-inside .tfp-carousel-next {
    right: 8px;
}

/* ── Flechas en arrow-bar (top/bottom) ───────────────── */
.tfp-carousel-arrow-bar {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.tfp-carousel-arrow-bar + .tfp-carousel-viewport,
.tfp-carousel-viewport + .tfp-carousel-arrow-bar {
    margin-top: 12px;
}
.tfp-carousel-arrow-bar .tfp-carousel-prev,
.tfp-carousel-arrow-bar .tfp-carousel-next {
    position: static;
    transform: none;
}
.tfp-carousel-arrow-bar .tfp-carousel-prev:hover,
.tfp-carousel-arrow-bar .tfp-carousel-next:hover {
    transform: scale(1.1);
}

/* ── Dots ────────────────────────────────────────────── */
.tfp-carousel-dots {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}
.tfp-carousel-dot.active {
    background: var(--tdp-primary, #2563eb);
    transform: scale(1.35);
}
.tfp-carousel-dot:hover { opacity: .7; }

/* ── Modo centrado ───────────────────────────────────── */
.tfp-carousel-slide { transition: opacity .3s ease; }
.tfp-carousel-wrap.tfp-center .tfp-carousel-slide         { opacity: .55; }
.tfp-carousel-wrap.tfp-center .tfp-carousel-slide.tfp-slide-active { opacity: 1; }
.tfp-carousel-wrap.tfp-center .tfp-slide-active .tfp-featured-card {
    box-shadow: 0 10px 32px rgba(0,0,0,.14);
}
/* ── CAROUSEL: fix overflow del contenedor Elementor ─────── */
/* Elementor pone overflow:hidden en .elementor-widget-container
   lo que corta las flechas absolutas. Lo sobreescribimos. */
.elementor-widget-tfp_featured_carousel .elementor-widget-container {
    overflow: visible !important;
}
/* El wrap siempre visible para que las flechas asomen */
.tfp-carousel-wrap {
    overflow: visible !important;
    position: relative;
}
/* Solo el viewport tiene el clip */
.tfp-carousel-viewport {
    overflow: hidden;
    width: 100%;
}
/* Track: flex, no overflow */
.tfp-carousel-track {
    display: flex;
    align-items: flex-start;
    will-change: transform;
}
/* Slide: ancho via CSS inline del widget (no padding aquí) */
.tfp-carousel-slide {
    flex-shrink: 0;
    box-sizing: border-box;
    min-width: 0;
}
/* Flechas: posición sobre el viewport, centradas verticalmente */
.tfp-carousel-prev,
.tfp-carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tdp-primary, #2563eb);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    box-shadow: 0 3px 12px rgba(0,0,0,.25);
    transition: opacity .15s, transform .15s;
    pointer-events: all;
}
/* Posición por defecto: pegado al borde del viewport */
.tfp-carousel-prev { left: 8px; }
.tfp-carousel-next { right: 8px; }
/* Con clase tfp-arrows-outside: afuera del viewport */
.tfp-carousel-wrap.tfp-arrows-outside { padding: 0 28px; }
.tfp-carousel-wrap.tfp-arrows-outside .tfp-carousel-prev { left: -12px; }
.tfp-carousel-wrap.tfp-arrows-outside .tfp-carousel-next { right: -12px; }

.tfp-carousel-prev:hover,
.tfp-carousel-next:hover { opacity: .85; transform: translateY(-50%) scale(1.08); }
.tfp-carousel-prev:disabled,
.tfp-carousel-next:disabled { opacity: .25; cursor: default; pointer-events: none; }

/* Arrow bar (top/bottom) */
.tfp-carousel-arrow-bar {
    display: flex; justify-content: center; gap: 10px;
}
.tfp-carousel-arrow-bar .tfp-carousel-prev,
.tfp-carousel-arrow-bar .tfp-carousel-next {
    position: static; transform: none;
}
.tfp-carousel-arrow-bar .tfp-carousel-prev:hover,
.tfp-carousel-arrow-bar .tfp-carousel-next:hover { transform: scale(1.08); }

/* Dots */
.tfp-carousel-dots {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: 6px; margin-top: 14px;
}
.tfp-carousel-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #cbd5e1; cursor: pointer;
    transition: background .2s, transform .2s;
}
.tfp-carousel-dot.active {
    background: var(--tdp-primary, #2563eb);
    transform: scale(1.35);
}