/*
 * KummaraDS — kds-note
 * ============================================================
 * Nota/callout de estado dentro de paneles y drawers (reemplaza los
 * alert-* de Bootstrap en el admin). Tinte suave + borde del mismo color.
 *
 *   <div class="kds-note kds-note--info">
 *     <i class="fas fa-info-circle"></i> Este producto se vende solo por
 *     <strong>Unidad</strong> al precio base.
 *   </div>
 *
 * Variantes: --info (cyan) · --warning (amber) · --danger (rose) · --success (verde) ·
 *            --neutral (gris, default si no se pasa variante).
 * Admite <ul> adentro (lista de errores) y <strong> para el énfasis.
 * ============================================================
 */

.kds-note {
    padding: .6rem .9rem;
    border-radius: .625rem;
    font-size: .85rem;
    line-height: 1.45;
    color: var(--ds-text-muted, #606060);
    background: var(--ds-surface-sunken, #f8f9fa);
    border: 1px solid var(--ds-border, #e5e7eb);
    margin-bottom: 1rem;
}

.kds-note > i:first-child {
    margin-right: .4rem;
}

.kds-note ul {
    margin: .4rem 0 0;
    padding-left: 1.15rem;
    font-size: .8rem;
    max-height: 11.25rem;
    overflow-y: auto;
}

.kds-note--info {
    color: var(--color-cyan-dark, #309c9f);
    background: color-mix(in srgb, var(--color-cyan, #83d5cf) 14%, transparent);
    border-color: color-mix(in srgb, var(--color-cyan, #83d5cf) 45%, transparent);
}

.kds-note--warning {
    color: var(--ds-text-on-warning, #334155);
    background: color-mix(in srgb, var(--color-amber, #E8B30E) 12%, transparent);
    border-color: color-mix(in srgb, var(--color-amber, #E8B30E) 32%, transparent);
}

/* El icono de la nota amarilla sigue amarillo: solo el texto pasa al tono oscuro (#943). */
.kds-note--warning > i:first-child {
    color: var(--color-amber-dark, #C4960A);
}

.kds-note--danger {
    color: var(--color-rose-dark, #D03355);
    background: color-mix(in srgb, var(--color-rose, #E6607B) 9%, transparent);
    border-color: color-mix(in srgb, var(--color-rose, #E6607B) 30%, transparent);
}

/* Verde: algo que salió a favor o que no cuesta nada ("Retiro sin cargo", #907). */
.kds-note--success {
    color: var(--color-green-dark, #4f8a3a);
    background: color-mix(in srgb, var(--color-green, #77b65d) 12%, transparent);
    border-color: color-mix(in srgb, var(--color-green, #77b65d) 32%, transparent);
}

/* Los links de una nota van con el acento del sistema, no con el azul de <a>.
   Una nota explica algo y a veces ofrece el camino ("Ver cuáles"): ese camino
   es parte del texto, no un elemento de otro color que rompe el bloque. */
.kds-note a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .18em;
    text-decoration-thickness: 1px;
}

.kds-note a:hover,
.kds-note a:focus-visible {
    color: var(--color-teal, #2EB8A8);
    text-decoration-thickness: 2px;
}


/* ============================================================
   LOS PASOS DE UN MODULO QUE RECIEN SE ESTRENA
   ============================================================
   No es un tutorial ni un onboarding con pasitos que hay que ir cerrando: es la respuesta a
   "¿y ahora qué hago?" escrita donde nace la pregunta — en el vacío del listado, la primera
   pantalla que ve el que entra.

   CORREGIDO 2026-09-16 (#821): esta nota decia que aparece SOLO mientras no hay ni una
   orden. Ya no es asi, y era justamente el problema: en cuanto se creaba la primera orden
   la guia desaparecia con tres pasos todavia pendientes. Ahora acompania hasta que los
   cinco esten hechos y recien ahi se va sola, para siempre.

   Cada renglon tiene tres estados y ninguno se marca a mano: HECHO (tilde, apagado, y el
   texto pasa a hablar en pasado), ACA (el primero que falta: resaltado y clickeable, el
   renglon entero es el link al lugar donde se hace) y PENDIENTE (gris y sin link, porque
   mandar a una pantalla que va a rebotar es peor que no ofrecer nada). */
.kds-pasos {
    counter-reset: kds-paso;
    list-style: none;
    max-width: 46rem;
    margin: 1.5rem auto 0;
    padding: 1.1rem 1.2rem;
    border-top: 1px solid var(--ds-border, #eee);
    text-align: left;
}

.kds-pasos li {
    counter-increment: kds-paso;
    position: relative;
    padding: .38rem 0 .38rem 2.1rem;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--ds-text-muted, #606060);
}

.kds-pasos li::before {
    content: counter(kds-paso);
    position: absolute;
    left: 0;
    top: .42rem;
    width: 1.4rem;
    height: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ds-border, #eee);
    color: var(--ds-text-muted, #606060);
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
}

/* El paso en el que está parado ahora mismo: el único que se clickea. */
.kds-pasos__aca {
    color: var(--ds-text, #1f2937);
}

/* `li.` NO ES DECORATIVO. La regla base es `.kds-pasos li::before` (clase + elemento) y le
   gana en especificidad a `.kds-pasos__aca::before` (clase sola): sin el `li` el resaltado
   se escribia y el navegador lo descartaba en silencio. Estuvo asi desde que nacio la lista
   y nadie lo vio, porque un paso sin resaltar no parece un bug, parece un diseño. */
.kds-pasos li.kds-pasos__aca::before {
    background: var(--color-teal, #2EB8A8);
    color: #fff;
}

/* ---- LO QUE YA SE HIZO ----------------------------------------------------
   El número se cambia por un tilde y el renglón se apaga. El texto que trae el
   renglón también cambia —de "cargá la receta" a "receta cargada"— así que acá
   sólo hace falta que DEJE DE PEDIR ATENCIÓN: lo hecho se lee al pasar, no se
   vuelve a leer. Nada de tachado: lo hecho no es un error, es un logro. */
.kds-pasos__hecho {
    color: var(--ds-text-subtle, #999);
}

.kds-pasos li.kds-pasos__hecho::before {
    content: "\f00c";              /* fa-check (FA5 Solid) */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: .62rem;
    background: color-mix(in srgb, var(--color-teal, #2EB8A8) 16%, transparent);
    color: var(--color-teal-dark, #1FA090);
}

.kds-pasos__hecho strong {
    font-weight: 600;
    color: var(--ds-text-muted, #606060);
}

/* ---- EL RENGLÓN QUE LLEVA AL PASO -----------------------------------------
   El renglón ENTERO es el link, no un botoncito al final: el área de click es
   toda la línea y no hay que apuntarle a nada. La flecha dice para dónde va.

   La acción va DEBAJO del texto, no al costado: al costado cae a la altura del
   primer renglón y, cuando el texto ocupa dos líneas, queda flotando en el medio
   de la frase como si fuera parte de ella. */
.kds-pasos__ir {
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: .375rem;
    margin: -.2rem -.45rem;
    padding: .2rem .45rem;
    transition: background .15s ease;
}

.kds-pasos__ir:hover,
.kds-pasos__ir:focus-visible {
    background: color-mix(in srgb, var(--color-teal, #2EB8A8) 8%, transparent);
    color: inherit;
}

.kds-pasos__ir .kds-pasos__texto { display: block; }

.kds-pasos__boton {
    display: inline-flex;
    align-items: center;
    margin-top: .3rem;
    white-space: nowrap;
    font-weight: 600;
    font-size: .78rem;
    color: var(--color-teal-dark, #1FA090);
}

.kds-pasos__ir:hover .kds-pasos__boton i { transform: translateX(2px); }
.kds-pasos__boton i { transition: transform .15s ease; }

/* ---- LA GUÍA ARRIBA DE LA TABLA -------------------------------------------
   Mismo checklist, pero acompañando a una lista que ya tiene órdenes: acá el
   borde de arriba lo pone la tira, no la lista, y se separa de la tabla con una
   línea abajo para que no se lea como parte del listado. */
.kds-pasos-strip {
    padding: 1.1rem 1.25rem .35rem;
    border-bottom: 1px solid var(--ds-border, #eee);
    background: var(--ds-surface-sunken, #f8f9fa);
}

.kds-pasos-strip__titulo {
    max-width: 46rem;
    margin: 0 auto;
    font-size: .84rem;
    color: var(--ds-text, #212529);
}

.kds-pasos-strip__titulo i { color: var(--color-teal, #2EB8A8); }

.kds-pasos-strip .kds-pasos {
    margin-top: .5rem;
    padding-top: 0;
    border-top: 0;
}