/* ============================================================
   Store admin · Color picker (Coloris, theme "polaroid")
   ------------------------------------------------------------
   El input lleva data-coloris. Coloris envuelve el input en
   <div class="clr-field"> y agrega un <button> a la derecha
   con el swatch del color actual. Acá sólo le damos la apariencia
   del resto de los inputs del admin.
   ============================================================ */

/* Ancho compacto y consistente entre styleguide y producción.
   El HEX nunca necesita más espacio que esto, y mantenerlo
   acotado evita que se estire dentro de paneles anchos. */
.sa-color-field {
    display: block !important;
    width: 100% !important;
    max-width: 280px !important;
}
.sa-color-field .clr-field {
    width: 100% !important;
}
.sa-color-field .clr-field > input {
    width: 100% !important;
    height: 36px !important;
    padding: 0 44px 0 10px !important;
    border: 1px solid var(--sa-border) !important;
    border-radius: var(--sa-radius-sm) !important;
    background: var(--sa-surface) !important;
    color: var(--sa-text) !important;
    font: inherit !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.sa-color-field .clr-field > input:hover { border-color: var(--sa-border-strong) !important; }
.sa-color-field .clr-field > input:focus {
    outline: none !important;
    border-color: var(--sa-primary) !important;
    box-shadow: var(--sa-focus-ring) !important;
}
/* Swatch que Coloris inyecta a la derecha */
.sa-color-field .clr-field button {
    width: 28px !important;
    height: 22px !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    border-radius: var(--sa-radius-xs) !important;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.10) !important;
}
.sa-color-field .clr-field button::after { border-radius: inherit !important; }

/* Panel abierto de Coloris (theme polaroid) -------------------
   Aplicamos los tokens del styleguide para que se sienta parte
   del sistema (radios, borders, fonts, focus ring). */
.clr-picker.clr-polaroid {
    width: 244px !important;
    padding: 12px 12px 14px !important;
    border-radius: var(--sa-radius-md) !important;
    background: var(--sa-surface) !important;
    border: 1px solid var(--sa-border) !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14) !important;
    font-family: var(--sa-font) !important;
}
/* Puntita arriba: que use el surface del styleguide */
.clr-picker.clr-polaroid::before { color: var(--sa-surface) !important; }

/* Área de saturación + brillo */
.clr-polaroid .clr-gradient {
    width: 100% !important;
    height: 130px !important;
    margin: 0 0 10px !important;
    border-radius: var(--sa-radius-sm) !important;
}
.clr-marker {
    width: 12px !important;
    height: 12px !important;
    border: 2px solid #fff !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) !important;
}

/* Hue + alpha sliders */
.clr-polaroid .clr-hue,
.clr-polaroid .clr-alpha {
    width: 100% !important;
    height: 10px !important;
    margin: 6px 0 !important;
    border-radius: 999px !important;
}
.clr-polaroid .clr-hue div,
.clr-polaroid .clr-alpha div {
    width: 14px !important;
    height: 14px !important;
    border: 2px solid #fff !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) !important;
}

/* Fila inferior: preview cuadrado + input hex.
   El preview contiene un <button class="clr-close"> que sirve para
   cerrar el picker. Lo hacemos absoluto cubriendo todo el preview,
   transparente, y mostramos una "X" encima usando Bootstrap Icons.
   El color de la X se calcula por contraste en JS (var --sa-coloris-x-color). */
.clr-polaroid .clr-preview {
    position: relative !important;
    width: 28px !important;
    height: 28px !important;
    margin: 12px 0 4px 0 !important;
    border-radius: var(--sa-radius-xs) !important;
    overflow: hidden !important;
}
.clr-polaroid .clr-preview::before,
.clr-polaroid .clr-preview::after { border-radius: inherit !important; }
.clr-polaroid .clr-preview .clr-close {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: inherit !important;
    background: transparent !important;
    color: transparent !important;
    font-size: 0 !important;
    text-indent: 0 !important;
    cursor: pointer !important;
    z-index: 2 !important;
}
.clr-polaroid .clr-preview .clr-close::before {
    content: "\F659" !important; /* bi-x-lg de Bootstrap Icons */
    position: absolute !important;
    inset: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: "bootstrap-icons" !important;
    font-size: 10px !important;
    line-height: 1 !important;
    color: var(--sa-coloris-x-color, #ffffff) !important;
    text-shadow: var(--sa-coloris-x-shadow, 0 1px 2px rgba(0, 0, 0, 0.45)) !important;
    pointer-events: none !important;
    transition: transform 0.15s ease !important;
}
.clr-polaroid .clr-preview .clr-close:hover::before { transform: scale(1.15) !important; }
.clr-polaroid input.clr-color {
    width: calc(100% - 40px) !important;
    height: 30px !important;
    margin: 12px 0 4px auto !important;
    padding: 0 10px !important;
    border: 1px solid var(--sa-border) !important;
    border-radius: var(--sa-radius-sm) !important;
    background: var(--sa-surface) !important;
    color: var(--sa-text) !important;
    font-family: var(--sa-font) !important;
    font-size: 13px !important;
    text-align: left !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
}
.clr-polaroid input.clr-color:focus {
    border-color: var(--sa-primary) !important;
    box-shadow: var(--sa-focus-ring) !important;
}

/* Botón Clear (cuando está activado): estética .sa-btn--secondary */
.clr-polaroid .clr-clear {
    height: 32px !important;
    margin: 8px 0 0 !important;
    padding: 0 14px !important;
    border-radius: var(--sa-radius-sm) !important;
    background: var(--sa-surface) !important;
    color: var(--sa-text) !important;
    border: 1px solid var(--sa-border) !important;
    font-family: var(--sa-font) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* Segmented (Hex/RGB/HSL) — sólo se muestra si hay más de un formato */
.clr-polaroid .clr-segmented {
    border-color: var(--sa-border) !important;
    border-radius: var(--sa-radius-sm) !important;
    color: var(--sa-muted) !important;
    font-family: var(--sa-font) !important;
    font-size: 12px !important;
}
.clr-polaroid .clr-segmented label { padding: 5px 0 !important; }
.clr-polaroid .clr-segmented input:checked + label {
    background: var(--sa-text) !important;
    color: #fff !important;
    border-radius: calc(var(--sa-radius-sm) - 1px) !important;
}

/* Sin swatches: si por alguna razón aparecieran, no ocupan espacio */
.clr-polaroid .clr-swatches { display: none !important; }