/* ==========================================================================
   SIINCO Order Form — «Dominio primero» (issue #192)

   El panel de la vitrina, la barra con el dominio elegido (vitrina y Configurar) y
   la tarjeta «falta agregar tu dominio» del carrito. Hoja APARTE porque la barra
   vive en pantallas que cargan hojas distintas: products.tpl carga products.css y
   nada del carrito; configureproduct.tpl y viewcart.tpl cargan siinco-cart.css.
   Una regla en dos hojas es una que diverge; aquí está una vez y la cargan las tres.

   Sin `#order-standard_cart` a propósito: en la vitrina ese contenedor no existe, y
   ninguna de estas clases la toca el all.min.css de fábrica (son nuestras).

   Colores y tipografías por token, con respaldo (tests/tokens.test.js).
   ========================================================================== */

.siinco-dominio,
.siinco-dominio * {
    box-sizing: border-box;
}

/* ---------- Posición ---------- */

.siinco-dominio {
    margin: 0 0 28px;
}

/* 🔴 Pegajosa SÓLO una vez confirmado el dominio (la clase la pone el JS): mientras
   el panel está abierto, un bloque de 300 px pegado al borde estorbaría más que
   ayudar. `top` lo ajusta el JS al alto de la cabecera del tema, que también es
   pegajosa; con z-index por debajo de su 100, la barra nunca la tapa. */
.siinco-dominio--fijo {
    position: sticky;
    top: 0;
    z-index: 50;
}

/* ---------- El panel ---------- */

.siinco-dominio-panel {
    background: var(--siinco-surface, #ffffff);
    border: 1px solid rgba(var(--siinco-action-rgb, 37, 99, 255), 0.16);
    border-radius: var(--siinco-radius-lg, 16px);
    box-shadow: 0 10px 30px rgba(var(--siinco-ink-rgb, 15, 23, 42), 0.06);
    padding: 28px 28px 24px;
}

.siinco-dominio-titulo {
    font-family: var(--siinco-font-display, 'Plus Jakarta Sans', sans-serif);
    font-weight: 800;
    font-size: 1.35rem;
    line-height: 1.2;
    color: var(--siinco-ink, #0f172a);
    margin: 0 0 6px;
}

.siinco-dominio-intro {
    font-family: var(--siinco-font-body, 'Inter', sans-serif);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--siinco-ink-soft, #475569);
    margin: 0 0 18px;
}

.siinco-dominio-form {
    margin: 0;
}

.siinco-dominio-etiqueta {
    display: block;
    font-family: var(--siinco-font-body, 'Inter', sans-serif);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--siinco-ink-soft, #475569);
    margin: 0 0 6px;
}

.siinco-dominio-fila {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.siinco-dominio-input {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--siinco-font-body, 'Inter', sans-serif);
    font-size: 1.05rem;
    color: var(--siinco-ink, #0f172a);
    background: var(--siinco-surface, #ffffff);
    border: 1px solid var(--siinco-line-strong, #cbd5e1);
    border-radius: var(--siinco-radius, 10px);
    padding: 12px 14px;
    outline: none;
}

.siinco-dominio-input:focus {
    border-color: var(--siinco-action-bg, #2563ff);
    box-shadow: 0 0 0 3px rgba(var(--siinco-action-rgb, 37, 99, 255), 0.2);
}

.siinco-dominio--error .siinco-dominio-input {
    border-color: var(--siinco-danger, #dc2626);
}

.siinco-dominio-btn {
    flex: 0 0 auto;
    font-family: var(--siinco-font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--siinco-surface, #ffffff);
    background: linear-gradient(135deg, var(--siinco-accent, #1e40af), var(--siinco-action-bg, #2563ff));
    border: 0;
    border-radius: var(--siinco-radius, 10px);
    padding: 12px 22px;
    cursor: pointer;
    white-space: nowrap;
}

.siinco-dominio-btn:hover {
    background: linear-gradient(135deg, var(--siinco-accent-hover, #1a3799), var(--siinco-action-bg-hover, #1e56e6));
    box-shadow: 0 6px 20px rgba(var(--siinco-action-rgb, 37, 99, 255), 0.35);
}

.siinco-dominio-error {
    font-family: var(--siinco-font-body, 'Inter', sans-serif);
    font-size: 0.85rem;
    color: var(--siinco-danger-strong, #b91c1c);
    margin: 8px 0 0;
}

/* Los tres modos, como tarjetas pequeñas en una fila; el radio es nativo —en la
   vitrina no corre el bundle del carrito, así que iCheck no lo toca—. */
.siinco-dominio-modos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    border: 0;
    margin: 18px 0 0;
    padding: 0;
    min-width: 0;
}

.siinco-dominio-legend {
    grid-column: 1 / -1;
    font-family: var(--siinco-font-body, 'Inter', sans-serif);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--siinco-ink, #0f172a);
    padding: 0;
    margin: 0 0 2px;
}

.siinco-dominio-modo {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0;
    padding: 12px 14px;
    background: var(--siinco-surface-subtle, #f8fafc);
    border: 1px solid var(--siinco-line-strong, #cbd5e1);
    border-radius: var(--siinco-radius, 10px);
    cursor: pointer;
    font-weight: 400;
}

.siinco-dominio-modo:has(input:checked) {
    background: var(--siinco-tint, #eff6ff);
    border-color: var(--siinco-action-bg, #2563ff);
}

.siinco-dominio-modo input {
    margin: 3px 0 0;
    flex: 0 0 auto;
}

.siinco-dominio-modo-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.siinco-dominio-modo-texto strong {
    font-family: var(--siinco-font-body, 'Inter', sans-serif);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--siinco-ink, #0f172a);
}

.siinco-dominio-modo-texto small {
    font-family: var(--siinco-font-body, 'Inter', sans-serif);
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--siinco-ink-soft, #475569);
}

/* ---------- La barra ---------- */

.siinco-dominio-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    font-family: var(--siinco-font-body, 'Inter', sans-serif);
    font-size: 0.9rem;
    color: var(--siinco-ink-soft, #475569);
    background: var(--siinco-surface, #ffffff);
    border: 1px solid rgba(var(--siinco-action-rgb, 37, 99, 255), 0.16);
    border-radius: var(--siinco-radius-lg, 16px);
    box-shadow: 0 6px 18px rgba(var(--siinco-ink-rgb, 15, 23, 42), 0.08);
    padding: 10px 16px;
}

.siinco-dominio-barra-etiqueta {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--siinco-ink-muted, #94a3b8);
}

.siinco-dominio-barra-valor {
    font-family: var(--siinco-font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: 1rem;
    font-weight: 700;
    color: var(--siinco-ink, #0f172a);
    overflow-wrap: anywhere;
}

.siinco-dominio--error .siinco-dominio-barra-valor {
    color: var(--siinco-danger-strong, #b91c1c);
}

.siinco-dominio-barra-modo::before {
    content: '·';
    margin-right: 8px;
    color: var(--siinco-ink-muted, #94a3b8);
}

.siinco-dominio-barra-cambiar,
.siinco-dominio-barra-select {
    margin-left: auto;
    font-family: var(--siinco-font-body, 'Inter', sans-serif);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--siinco-accent, #1e40af);
    background: transparent;
    border: 1px solid var(--siinco-line-strong, #cbd5e1);
    border-radius: 999px;
    padding: 6px 14px;
    cursor: pointer;
}

.siinco-dominio-barra-select {
    margin-left: 0;
    padding-right: 10px;
}

.siinco-dominio-barra-select + .siinco-dominio-barra-cambiar {
    margin-left: 0;
}

.siinco-dominio-barra-cambiar:hover {
    border-color: var(--siinco-accent, #1e40af);
    background: var(--siinco-tint, #eff6ff);
}

/* En Configurar la barra va dentro de .cart-body, sobre el formulario; el mismo
   aspecto, sólo cambia el espacio que deja debajo. */
.siinco-dominio--configurar {
    margin: 0 0 20px;
}

/* ---------- El carrito: «falta agregar tu dominio» ---------- */

.siinco-dominio-pendiente {
    margin: 0 0 20px;
    padding: 18px 20px;
    background: var(--siinco-tint, #eff6ff);
    border: 1px solid rgba(var(--siinco-action-rgb, 37, 99, 255), 0.25);
    border-radius: var(--siinco-radius-lg, 16px);
}

.siinco-dominio-pendiente-titulo {
    font-family: var(--siinco-font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--siinco-ink, #0f172a);
    margin: 0 0 4px;
}

.siinco-dominio-pendiente-texto {
    font-family: var(--siinco-font-body, 'Inter', sans-serif);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--siinco-ink-soft, #475569);
    margin: 0 0 12px;
}

.siinco-dominio-pendiente-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
}

.siinco-dominio-pendiente-btn {
    display: inline-block;
    font-family: var(--siinco-font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--siinco-surface, #ffffff);
    background: linear-gradient(135deg, var(--siinco-accent, #1e40af), var(--siinco-action-bg, #2563ff));
    border-radius: var(--siinco-radius, 10px);
    padding: 11px 20px;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.siinco-dominio-pendiente-btn:hover {
    color: var(--siinco-surface, #ffffff);
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(var(--siinco-action-rgb, 37, 99, 255), 0.35);
}

.siinco-dominio-pendiente-omitir {
    font-family: var(--siinco-font-body, 'Inter', sans-serif);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--siinco-accent, #1e40af);
    background: transparent;
    border: 0;
    padding: 6px 0;
    cursor: pointer;
    text-decoration: underline;
}

/* ---------- Teléfono ---------- */

@media (max-width: 767px) {
    .siinco-dominio-panel {
        padding: 20px 16px 18px;
    }

    .siinco-dominio-fila {
        flex-direction: column;
    }

    .siinco-dominio-btn {
        width: 100%;
    }

    .siinco-dominio-modos {
        grid-template-columns: 1fr;
    }

    .siinco-dominio-barra {
        border-radius: var(--siinco-radius, 10px);
        padding: 10px 12px;
    }

    .siinco-dominio-barra-cambiar,
    .siinco-dominio-barra-select {
        margin-left: 0;
    }
}