/* ── BDM Domain Search – Estilos v1.1.5 ─────────────────────────────────── */

:root {
    --bdm-primary:      #1a56db;
    --bdm-primary-dark: #1241a8;
    --bdm-success:      #057a55;
    --bdm-success-bg:   #f0fdf4;
    --bdm-success-bd:   #bbf7d0;
    --bdm-danger:       #9b1c1c;
    --bdm-danger-bg:    #fff5f5;
    --bdm-danger-bd:    #fecaca;
    --bdm-warning:      #92400e;
    --bdm-warning-bg:   #fffbeb;
    --bdm-warning-bd:   #fde68a;
    --bdm-muted:        #6b7280;
    --bdm-border:       #d1d5db;
    --bdm-radius:       10px;
    --bdm-font:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.bdm-ds-wrapper {
    font-family: var(--bdm-font);
    max-width: 820px;
    margin: 0 auto;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */

/* Zona de búsqueda: siempre ancho completo, sin columnas */
.bdm-ds-search-area {
    width: 100%;
    margin-bottom: 0;
}

/* Zona de resultados + carrito: dos columnas en escritorio */
.bdm-ds-body {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 4px;
}

/* Columna de resultados: crece todo lo que puede */
.bdm-ds-results-col {
    flex: 1 1 0;
    min-width: 0;
}

/* Columna del carrito lateral: ancho fijo, se pega al scroll */
.bdm-ds-cart-col {
    flex: 0 0 220px;
    width: 220px;
    position: sticky;
    top: 80px;
    align-self: flex-start;
    margin-top: 12px;
}

/* En móvil (< 580px): vuelve a layout vertical, carrito arriba de resultados */
@media (max-width: 580px) {
    .bdm-ds-body {
        flex-direction: column;
        gap: 8px;
    }
    .bdm-ds-cart-col {
        flex: none;
        width: 100%;
        position: static;
    }
}

/* ── Caja de búsqueda ─────────────────────────────────────────────────────── */

.bdm-ds-search-box {
    background: #fff;
    border: 2px solid var(--bdm-border);
    border-radius: var(--bdm-radius);
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.bdm-ds-input-row {
    display: flex;
    align-items: center;
    border: 2px solid #b0b7c3;        /* borde siempre visible en tema claro */
    border-radius: 8px;
    overflow: hidden;
    transition: border-color .15s;
    background: #fff;
}
.bdm-ds-input-row:focus-within {
    border-color: var(--bdm-primary);
    box-shadow: 0 0 0 3px rgba(26,86,219,.15);
}

.bdm-ds-input {
    flex: 1;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 18px;
    font-family: var(--bdm-font);
    padding: 12px 6px 12px 16px;
    color: #111827;
    background: transparent;
    min-width: 0;
}
.bdm-ds-input::placeholder { color: #9ca3af; }

.bdm-ds-tld-hint {
    font-size: 18px;
    color: #9ca3af;
    padding: 0 8px 0 0;
    white-space: nowrap;
    user-select: none;
}

.bdm-ds-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--bdm-primary);
    color: #fff;
    border: none;
    padding: 0 22px;
    height: 52px;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--bdm-font);
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}
.bdm-ds-btn:hover    { background: var(--bdm-primary-dark); }
.bdm-ds-btn:disabled { opacity: .6; cursor: not-allowed; }

.bdm-ds-btn-spinner {
    display: none;
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: bdm-spin .6s linear infinite;
}
.bdm-ds-loading .bdm-ds-btn-spinner { display: block; }
.bdm-ds-loading .bdm-ds-btn-text    { display: none; }

@keyframes bdm-spin { to { transform: rotate(360deg); } }

.bdm-ds-tip {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--bdm-muted);
}
.bdm-ds-tip em { font-style: normal; font-weight: 600; color: #374151; }

/* ── Lista de resultados ──────────────────────────────────────────────────── */

.bdm-ds-results {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Tarjeta de resultado ─────────────────────────────────────────────────── */

.bdm-ds-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-radius: var(--bdm-radius);
    border: 1.5px solid var(--bdm-border);
    background: #fff;
    gap: 12px;
    animation: bdm-fadein .2s ease both;
}

@keyframes bdm-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.bdm-ds-result:nth-child(1) { animation-delay: .00s; }
.bdm-ds-result:nth-child(2) { animation-delay: .04s; }
.bdm-ds-result:nth-child(3) { animation-delay: .08s; }
.bdm-ds-result:nth-child(4) { animation-delay: .12s; }
.bdm-ds-result:nth-child(5) { animation-delay: .16s; }
.bdm-ds-result:nth-child(6) { animation-delay: .20s; }

/* Colores por estado */
.bdm-ds-result.bdm-state-available   { border-color: var(--bdm-success-bd); background: var(--bdm-success-bg); }
.bdm-ds-result.bdm-state-registered,
.bdm-ds-result.bdm-state-protected   { border-color: var(--bdm-danger-bd);  background: var(--bdm-danger-bg);  }
.bdm-ds-result.bdm-state-transferable { border-color: var(--bdm-warning-bd); background: var(--bdm-warning-bg); }
.bdm-ds-result.bdm-state-error        { border-color: var(--bdm-border);     background: #f9fafb; }

/* Lado izquierdo: punto de color + nombre de dominio */
.bdm-ds-result-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.bdm-ds-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.bdm-state-available   .bdm-ds-dot { background: #22c55e; }
.bdm-state-registered  .bdm-ds-dot,
.bdm-state-protected   .bdm-ds-dot { background: #ef4444; }
.bdm-state-transferable .bdm-ds-dot { background: #f59e0b; }
.bdm-state-error        .bdm-ds-dot { background: #9ca3af; }

.bdm-ds-domain-name {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Lado derecho: precio + badge ── NEW ────────────────────────────────────── */

.bdm-ds-result-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Precio */
.bdm-ds-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.bdm-ds-price-amount {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
}

/* Precio en tarjeta de dominio disponible → color verde */
.bdm-state-available .bdm-ds-price-amount { color: var(--bdm-success); }

.bdm-ds-price-label {
    font-size: 11px;
    color: var(--bdm-muted);
    white-space: nowrap;
}

/* Badge de estado */
.bdm-ds-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
.bdm-state-available    .bdm-ds-badge { background: #dcfce7; color: var(--bdm-success); }
.bdm-state-registered   .bdm-ds-badge,
.bdm-state-protected    .bdm-ds-badge { background: #fee2e2; color: var(--bdm-danger); }
.bdm-state-transferable .bdm-ds-badge { background: #fef3c7; color: var(--bdm-warning); }
.bdm-state-error        .bdm-ds-badge { background: #f3f4f6; color: var(--bdm-muted); }

/* ── Skeleton loader ──────────────────────────────────────────────────────── */

.bdm-ds-skeleton {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--bdm-radius);
    border: 1.5px solid var(--bdm-border);
    background: #fff;
    animation: bdm-fadein .15s ease both;
}
.bdm-ds-skel-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #e5e7eb;
    flex-shrink: 0;
    animation: bdm-pulse 1.2s ease-in-out infinite;
}
.bdm-ds-skel-line {
    height: 14px;
    border-radius: 4px;
    background: #e5e7eb;
    animation: bdm-pulse 1.2s ease-in-out infinite;
}
.bdm-ds-skel-line.w60 { width: 60%; }
.bdm-ds-skel-line.w25 { width: 25%; margin-left: auto; }

@keyframes bdm-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .4; }
}

/* ── Mensaje de error ─────────────────────────────────────────────────────── */

.bdm-ds-error-msg {
    padding: 12px 16px;
    background: var(--bdm-danger-bg);
    border: 1.5px solid var(--bdm-danger-bd);
    border-radius: var(--bdm-radius);
    color: var(--bdm-danger);
    font-size: 14px;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .bdm-ds-input    { font-size: 16px; padding: 10px 4px 10px 12px; }
    .bdm-ds-btn      { padding: 0 14px; font-size: 14px; }
    .bdm-ds-tld-hint { font-size: 16px; }
    .bdm-ds-price-amount { font-size: 15px; }
}

/* ── Botón "Registrar dominio" en tarjeta de resultado ── v2.0 ─────────────── */

.bdm-ds-btn-register {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--bdm-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--bdm-font);
    cursor: pointer;
    transition: background .15s, opacity .15s;
    white-space: nowrap;
    text-decoration: none;
}
.bdm-ds-btn-register:hover    { background: var(--bdm-primary-dark); color: #fff; }
.bdm-ds-btn-register:disabled { opacity: .5; cursor: not-allowed; }

/* Spinner dentro del botón de registrar */
.bdm-ds-btn-register .bdm-reg-spinner {
    display: none;
    width: 12px; height: 12px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: bdm-spin .6s linear infinite;
}
.bdm-ds-btn-register.loading .bdm-reg-spinner { display: inline-block; }
.bdm-ds-btn-register.loading .bdm-reg-text    { display: none; }

/* Mensaje de éxito al añadir al carrito */
.bdm-ds-added {
    font-size: 13px;
    color: var(--bdm-success);
    font-weight: 600;
    white-space: nowrap;
}

/* ── Pestañas de búsqueda ── v4.0 ─────────────────────────────────────────── */

.bdm-ds-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 0;
}

.bdm-ds-tab {
    flex: 1;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--bdm-font);
    border: 2px solid #b0b7c3;        /* borde visible en cualquier fondo */
    border-radius: 8px 8px 0 0;
    border-bottom: none;
    background: #eef0f4;              /* fondo ligeramente gris, siempre distinguible */
    color: #4b5563;
    cursor: pointer;
    transition: all .15s;
}

.bdm-ds-tab:hover {
    background: #e4e7ed;
    color: #1f2937;
}

.bdm-ds-tab--active {
    background: #fff;
    color: var(--bdm-primary);
    border-color: #b0b7c3;
    border-bottom-color: #fff;        /* se "funde" con la caja de búsqueda */
    position: relative;
    z-index: 1;
}

/* La caja de búsqueda cuando hay pestañas encima: borde superior continuo */
.bdm-ds-tabs + .bdm-ds-panel .bdm-ds-search-box {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 2px solid #b0b7c3;
    margin-top: -2px;
    position: relative;
    z-index: 0;
}

.bdm-ds-panel--hidden {
    display: none;
}

/* ── Textarea de búsqueda por IA ──────────────────────────────────────────── */

.bdm-ds-ai-input {
    width: 100%;
    box-sizing: border-box;
    border: 2px solid var(--bdm-border);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 15px;
    font-family: var(--bdm-font);
    color: #111827;
    resize: vertical;
    min-height: 80px;
    transition: border-color .15s;
    background: transparent;
    outline: none;
}

.bdm-ds-ai-input:focus {
    border-color: var(--bdm-primary);
    box-shadow: 0 0 0 3px rgba(26,86,219,.15);
}

.bdm-ds-ai-input::placeholder { color: #9ca3af; }

.bdm-ds-ai-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.bdm-ds-ai-counter {
    font-size: 12px;
    color: var(--bdm-muted);
}

/* Mensaje de espera mientras la IA trabaja */
.bdm-ds-ai-thinking {
    text-align: center;
    padding: 24px;
    color: var(--bdm-muted);
    font-size: 14px;
}

.bdm-ds-ai-thinking::before {
    content: '✨ ';
}

/* ── Promociones ── v5.0 ──────────────────────────────────────────────────── */

/* Badge de promoción — esquina superior derecha de la tarjeta */
.bdm-ds-result {
    position: relative; /* Necesario para posicionar el badge */
}

.bdm-ds-promo-badge {
    position: absolute;
    top: -10px;
    right: 12px;
    background: #e24b4a;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: .03em;
}

/* Precio normal tachado cuando hay promo */
.bdm-ds-price-original {
    font-size: 12px;
    color: var(--bdm-muted);
    text-decoration: line-through;
    white-space: nowrap;
}

/* Precio promocional — verde y más destacado */
.bdm-ds-price-promo {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.bdm-ds-price-promo .bdm-ds-price-amount {
    color: var(--bdm-success);
    font-size: 18px;
}

/* ── Botón "Ver más" ── v6.0 ──────────────────────────────────────────────── */

.bdm-ds-load-more {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 10px;
    background: transparent;
    border: 2px dashed var(--bdm-border);
    border-radius: var(--bdm-radius);
    color: var(--bdm-primary);
    font-size: 14px;
    font-weight: 500;
    font-family: var(--bdm-font);
    cursor: pointer;
    transition: all .15s;
    text-align: center;
}
.bdm-ds-load-more:hover {
    border-color: var(--bdm-primary);
    background: #f0f5ff;
}

/* ── Búsqueda masiva ─────────────────────────────────────────────────────── */

.bdm-ds-bulk-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.5;
    resize: vertical;
    min-height: 90px;
    font-family: inherit;
    transition: border-color .15s;
}
.bdm-ds-bulk-input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}

.bdm-ds-bulk-counter {
    font-size: 12px;
    color: #9ca3af;
    align-self: center;
}

.bdm-ds-bulk-notice {
    font-size: 13px;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 12px;
}

/* Grupo por palabra buscada */
.bdm-ds-bulk-group {
    margin-bottom: 20px;
}

.bdm-ds-bulk-group-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 6px 0 8px;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 6px;
}

.bdm-ds-bulk-sld {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -.3px;
}

.bdm-ds-bulk-sld::before {
    content: "🔤 ";
    font-size: 14px;
    font-weight: 400;
}

.bdm-ds-bulk-stats {
    font-size: 12px;
    color: #6b7280;
    margin-left: auto;
}

.bdm-ds-bulk-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* En modo oscuro */
@media (prefers-color-scheme: dark) {
    .bdm-ds-bulk-input {
        background: #1f2937;
        color: #f9fafb;
        border-color: #374151;
    }
    .bdm-ds-bulk-input:focus {
        border-color: #818cf8;
        box-shadow: 0 0 0 3px rgba(129,140,248,.15);
    }
    .bdm-ds-bulk-sld { color: #f9fafb; }
    .bdm-ds-bulk-group-header { border-bottom-color: #374151; }
    .bdm-ds-bulk-notice {
        background: #422006;
        border-color: #92400e;
        color: #fcd34d;
    }
}

/* ── Mini-carrito lateral ────────────────────────────────────────────────── */

.bdm-ds-minicart {
    border: 1.5px solid #6366f1;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    margin-top: 0;
}

.bdm-ds-mc-header {
    padding: 10px 12px 8px;
    background: #eef2ff;
    border-bottom: 1px solid #c7d2fe;
}

.bdm-ds-mc-title {
    font-size: 12px;
    font-weight: 700;
    color: #3730a3;
    text-transform: uppercase;
    letter-spacing: .4px;
    display: block;
    margin-bottom: 2px;
}

.bdm-ds-mc-subtitle {
    font-size: 11px;
    color: #6366f1;
}

.bdm-ds-mc-list {
    padding: 4px 0;
    max-height: 320px;
    overflow-y: auto;
}

.bdm-ds-mc-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 4px;
    padding: 7px 12px;
    border-bottom: 1px solid #f3f4f6;
    font-size: 12px;
}
.bdm-ds-mc-item:last-child { border-bottom: none; }

.bdm-ds-mc-domain {
    font-weight: 600;
    color: #111827;
    word-break: break-all;
    font-size: 12px;
    line-height: 1.3;
}

.bdm-ds-mc-price {
    color: #6366f1;
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
}

.bdm-ds-mc-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: #d1d5db;
    font-size: 11px;
    padding: 2px 3px;
    border-radius: 3px;
    line-height: 1;
    transition: color .15s, background .15s;
}
.bdm-ds-mc-remove:hover {
    color: #ef4444;
    background: #fee2e2;
}

.bdm-ds-mc-empty {
    padding: 20px 12px;
    text-align: center;
    font-size: 12px;
    color: #9ca3af;
    line-height: 1.6;
}

.bdm-ds-mc-footer {
    padding: 10px 12px;
    border-top: 1px solid #e0e7ff;
    background: #f5f3ff;
}

.bdm-ds-mc-total {
    font-size: 12px;
    color: #4b5563;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
}
.bdm-ds-mc-total strong { color: #111827; }

.bdm-ds-mc-go {
    width: 100%;
    font-size: 13px;
    padding: 8px 12px;
    text-align: center;
}

/* Botón "Añadido" — estado tras añadir al mini-carrito */
.bdm-ds-btn-register.bdm-ds-btn-added {
    background: #f0fdf4;
    border-color: #86efac;
    color: #15803d;
    cursor: default;
    opacity: .85;
}

/* En móvil el minicart vuelve al flujo normal */
@media (max-width: 580px) {
    .bdm-ds-minicart {
        margin-bottom: 8px;
    }
    .bdm-ds-mc-list { max-height: none; }
}

@media (prefers-color-scheme: dark) {
    .bdm-ds-minicart { background: #1e1e2e; border-color: #4f46e5; }
    .bdm-ds-mc-header { background: #1e1b4b; border-bottom-color: #3730a3; }
    .bdm-ds-mc-title { color: #a5b4fc; }
    .bdm-ds-mc-subtitle { color: #818cf8; }
    .bdm-ds-mc-domain { color: #f9fafb; }
    .bdm-ds-mc-price { color: #a5b4fc; }
    .bdm-ds-mc-item { border-bottom-color: #374151; }
    .bdm-ds-mc-footer { background: #1e1b4b; border-top-color: #3730a3; }
    .bdm-ds-mc-total { color: #9ca3af; }
    .bdm-ds-mc-total strong { color: #f9fafb; }
    .bdm-ds-mc-remove:hover { background: #450a0a; }
    .bdm-ds-btn-register.bdm-ds-btn-added {
        background: #052e16; border-color: #166534; color: #86efac;
    }
}