/* components/tienda-kds.css
   Las piezas de la librería KDS que usa la tienda, con la ropa del storefront (#907).

   La pieza es la misma del panel (css/ds/ + js/components/): acá sólo cambia cómo se ve. La tienda
   habla en negro y con esquinas rectas. Va DESPUÉS de las hojas de css/ds/. */

/* kds-tooltip: la ayuda que aparece al pasar el mouse o entrar a un campo, en lugar del globito
   del navegador. */
.kds-tooltip {
    background: #000;
    border-radius: 0;
    font-size: .75rem;
    letter-spacing: .01em;
}

/* Los colores de la tienda para las piezas del KDS (#907, #996): los pasteles del checkout y el
   negro de la tinta. Se definen una vez acá y cada pieza los toma. */
:root {
    --tienda-tinta:    #000;
    --tienda-texto:    #1a1a1a;
    --tienda-borde:    #e5e5e5;
    --tienda-verde:    #A8E6CF;
    --tienda-naranja:  #FFD3B6;
    --tienda-rosa:     #FFAAA5;
    --tienda-celeste:  #B2EBF2;
    /* Los puntitos van un tono más arriba que los pasteles: son chicos y sobre blanco el
       celeste casi no se veía. Siguen siendo la misma familia de colores. */
    --kds-loader-1:    #7FD8B5;
    --kds-loader-2:    #FFBC8F;
    --kds-loader-3:    #FF8F88;
    --kds-loader-4:    #7FD9E6;
}

/* kds-toast: el aviso de arriba. Recto y con filete negro como el resto de la tienda; el color
   del tipo va en el cuadrado del ícono, en pastel y con el ícono oscuro para que se lea. */
.kds-toast {
    border-radius: 0;
    border: 1px solid var(--tienda-tinta);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
}
.kds-toast__icon {
    border-radius: 0;
    color: var(--tienda-tinta);
    box-shadow: none;
    background: var(--tienda-celeste);
}
.kds-toast__eyebrow { color: var(--tienda-tinta); }
.kds-toast__title { color: var(--tienda-texto); }
.kds-toast__bar { border-radius: 0; background: var(--tienda-tinta); opacity: .25; }
.kds-toast.is-success .kds-toast__icon { background: var(--tienda-verde); box-shadow: none; }
.kds-toast.is-error .kds-toast__icon { background: var(--tienda-rosa); box-shadow: none; }
.kds-toast.is-warning .kds-toast__icon { background: var(--tienda-naranja); box-shadow: none; }
.kds-toast.is-info .kds-toast__icon { background: var(--tienda-celeste); box-shadow: none; }
.kds-toast.is-success .kds-toast__eyebrow,
.kds-toast.is-error .kds-toast__eyebrow,
.kds-toast.is-warning .kds-toast__eyebrow,
.kds-toast.is-info .kds-toast__eyebrow { color: var(--tienda-tinta); }
.kds-toast.is-success .kds-toast__bar,
.kds-toast.is-error .kds-toast__bar,
.kds-toast.is-warning .kds-toast__bar,
.kds-toast.is-info .kds-toast__bar { background: var(--tienda-tinta); }

/* kds-note: la nota dentro de un paso (retiro sin cargo, un error del envío). Recta, con el
   pastel del tipo de fondo y el texto en tinta: nada de filete de color a la izquierda. */
.kds-note {
    border-radius: 0;
    color: var(--tienda-texto);
}
.kds-note--info {
    color: var(--tienda-texto);
    background: color-mix(in srgb, var(--tienda-celeste) 35%, #fff);
    border-color: var(--tienda-celeste);
}
.kds-note--warning {
    color: var(--tienda-texto);
    background: color-mix(in srgb, var(--tienda-naranja) 35%, #fff);
    border-color: var(--tienda-naranja);
}
.kds-note--warning > i:first-child { color: var(--tienda-tinta); }
.kds-note--danger {
    color: var(--tienda-texto);
    background: color-mix(in srgb, var(--tienda-rosa) 30%, #fff);
    border-color: var(--tienda-rosa);
}
.kds-note--success {
    color: var(--tienda-texto);
    background: color-mix(in srgb, var(--tienda-verde) 35%, #fff);
    border-color: var(--tienda-verde);
}
.kds-note a:hover,
.kds-note a:focus-visible { color: var(--tienda-tinta); }

/* Los puntitos dentro de un botón de la tienda mientras espera (el del panel es .btn). */
.btn-primario > .ds-loader,
.btn-primario-inverse > .ds-loader,
.cart-cta-primary > .ds-loader {
    display: inline-flex;
    gap: 4px;
    vertical-align: middle;
}
.btn-primario > .ds-loader span,
.btn-primario-inverse > .ds-loader span,
.cart-cta-primary > .ds-loader span {
    width: 7px;
    height: 7px;
}

/* kds-confirm: la pregunta antes de algo que no se deshace (vaciar el carrito, quitar un
   producto). Recta y en tinta, sin el borde de colores girando del panel; el botón que confirma
   va negro y el cuadrado del ícono en rosa pastel cuando es para borrar. */
.kds-confirm { background: rgba(0, 0, 0, .45); }
.kds-confirm__card {
    border-radius: 0;
    padding: 0;
    background: var(--tienda-tinta);
    animation: none;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
}
.kds-confirm__inner {
    border-radius: 0;
    border: 1px solid var(--tienda-tinta);
}
.kds-confirm__icon {
    border-radius: 0;
    background: var(--tienda-celeste);
    color: var(--tienda-tinta);
}
.kds-confirm__icon.danger { background: var(--tienda-rosa); }
.kds-confirm__title {
    color: var(--tienda-texto);
    font-weight: 700;
}
.kds-confirm__btn {
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .8rem;
    padding: .7rem 1.2rem;
}
.kds-confirm__btn--ghost {
    border: 1px solid var(--tienda-tinta);
    color: var(--tienda-tinta);
}
.kds-confirm__btn--ghost:hover { background: var(--tienda-tinta); color: #fff; }
.kds-confirm__btn--primary,
.kds-confirm__btn--danger {
    background: var(--tienda-tinta);
    color: #fff;
    border: 1px solid var(--tienda-tinta);
}
.kds-confirm__btn--primary:hover,
.kds-confirm__btn--danger:hover { background: #333; filter: none; }
.kds-confirm__btn:focus-visible { outline: 2px solid var(--tienda-tinta); outline-offset: 2px; }

/* Los puntitos dentro de un botón de la tienda van antes del texto ("Enviando"). */
.btn-primario > .ds-loader,
.btn-primario-inverse > .ds-loader,
.cart-cta-primary > .ds-loader { margin-right: .5rem; }

/* kds-segmented en la tienda: los íconos de "cómo ver los productos" (#1006). Rectos, pegados,
   el elegido en tinta. */
.kds-segmented { border-bottom: 0; padding: 0; gap: 0; }
.kds-segmented__seg {
    border-radius: 0;
    border: 1px solid var(--tienda-borde);
    color: var(--tienda-texto);
    padding: .45rem .7rem;
}
.kds-segmented__seg + .kds-segmented__seg { border-left: 0; }
.kds-segmented__seg:hover { background: #f4f4f4; color: var(--tienda-tinta); }
.kds-segmented__seg.is-active {
    background: var(--tienda-tinta);
    border-color: var(--tienda-tinta);
    color: #fff;
    box-shadow: none;
}
.kds-segmented__seg:focus-visible { outline: 2px solid var(--tienda-tinta); outline-offset: 2px; }

/* kds-table en la tienda: el encabezado negro del carrito y filas con filete gris. */
.kds-table {
    --kds-table-head-bg: var(--tienda-tinta);
    --kds-table-row-hover: #f6f6f6;
    font-size: .85rem;
    color: var(--tienda-texto);
}
.kds-table thead th { letter-spacing: .06em; }

/* kds-qty: el "− cantidad +" (#1006). Recto y con el filete de la tienda; el foco en negro en
   lugar del verde agua del panel. */
.kds-qty {
    border-radius: 0;
    border-color: #c9c9c9;
}
.kds-qty:focus-within {
    border-color: var(--tienda-tinta);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .1);
}
.kds-qty__btn { color: var(--tienda-tinta); }

/* kds-drawer: el panel lateral (Equivalencias del catálogo, #1006). Recto, con el ícono y el
   título en la tinta de la tienda. */
.kds-drawer.is-open { box-shadow: -14px 0 40px -14px rgba(0, 0, 0, .45); }
.kds-drawer__backdrop { background: rgba(0, 0, 0, .35); }
.kds-drawer__head { border-bottom-color: var(--tienda-borde); }
.kds-drawer__title { color: var(--tienda-texto); }
.kds-drawer__title i { color: var(--tienda-tinta); }

/* kds-modal: la ventana centrada (el agregar rápido, #1000). Recta, con el ícono en negro en lugar
   del degradé verde agua del panel. */
.kds-modal { border-radius: 0; box-shadow: 0 24px 60px rgba(0, 0, 0, .22); }
.kds-modal-ov { background: rgba(0, 0, 0, .4); }
.kds-modal__hd-ic { border-radius: 0; background: var(--tienda-tinta); color: #fff; }
.kds-modal__ttl { color: var(--tienda-texto); }

/* kds-badge: la disponibilidad (#1021). La misma etiqueta en la ficha, la grilla, la lista, la tabla,
   el carrito, el buscador y las sugerencias. Recta, con los pasteles de la tienda y el texto siempre
   oscuro (sobre amarillo, la regla del KDS). Sin animación: el color ya dice la importancia. */
.tienda-stock.kds-badge {
    border-radius: 0;
    font-size: .78rem;
    padding: .38em .7em;
    color: var(--tienda-texto);
}
.tienda-stock.kds-badge i { color: inherit; }
.tienda-stock.kds-badge--danger  { background: var(--tienda-rosa); }
.tienda-stock.kds-badge--info    { background: var(--tienda-celeste); }
.tienda-stock.kds-badge--warning { background: var(--tienda-naranja); }
.tienda-stock.kds-badge--success { background: var(--tienda-verde); }
.tienda-stock.kds-badge--sm { font-size: .7rem; padding: .3em .55em; }
.tienda-stock--cantidad { font-size: .85rem; color: var(--tienda-texto); }
.tienda-stock--compacta { font-size: .78rem; }
.sf-sug__item .tienda-stock { flex-shrink: 0; margin-left: .5rem; }
.minicart-stock { margin-top: .3rem; }

/* kds-input y kds-telefono (#1408): la caja del teléfono se viste como los campos que tiene al lado. En el
   registro y el ingreso, los de Bootstrap (redondeados, con el foco azul); en el perfil y el checkout, rectos,
   con el filete gris y la tinta al entrar. Con un error, la caja y el aviso en el rojo de los errores de esa
   pantalla, también con el foco adentro. El botón de WhatsApp, en tinta: la tienda habla en negro. */
.kds-input:focus-within {
    border-color: #86b7fe;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}
.kds-input:has(.is-invalid) { border-color: var(--bs-form-invalid-border-color, #dc3545); }
.kds-input:has(.is-invalid):focus-within { box-shadow: 0 0 0 .25rem rgba(220, 53, 69, .25); }
.kds-input__accion {
    border-radius: 0;
    background: transparent;
    color: var(--tienda-tinta);
}
.kds-input__accion:hover { background: #f4f4f4; }
.kds-telefono__aviso {
    margin-top: .25rem;
    font-size: .875em;
    color: var(--bs-secondary-color, #6c757d);
}
.kds-telefono__aviso.kds-field__error { color: var(--bs-form-invalid-color, #dc3545); }

.form-group .kds-input,
.step-content .kds-input {
    border-color: #ddd;
    border-radius: 0;
}
.form-group .kds-telefono > .kds-telefono__pais,
.step-content .kds-telefono > .kds-telefono__pais { border-radius: 0; }
.form-group .kds-input:focus-within { border-color: #333; box-shadow: none; }
.step-content .kds-input:focus-within { border-color: var(--checkout-texto, #333); box-shadow: none; }
.form-group .kds-input:has(.is-invalid) { border-color: var(--bs-form-invalid-border-color, #dc3545); }
.step-content .kds-input:has(.is-invalid) { border-color: #b42318; }
.step-content .kds-telefono__aviso {
    margin-top: .3rem;
    font-size: .8rem;
    line-height: 1.35;
}
.step-content .kds-telefono__aviso.kds-field__error { color: #b42318; }