/*
 * 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: var(--kds-note-radio, .625rem);
    font-size: var(--kds-note-fs, .85rem);
    line-height: var(--kds-note-lh, 1.45);
    color: var(--kds-note-texto, 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;
    color: var(--kds-note-icono, inherit);
}

/* Ícono + texto: con --kds-note-alineada: flex (lo fija un tema, con su aire y su eje), el texto que baja de línea
   queda alineado con su primera línea, no debajo del ícono. Sin el valor, la nota queda como siempre. */
.kds-note:has(> i:first-child + span:last-child) {
    display: var(--kds-note-alineada, block);
    gap: var(--kds-note-alineada-aire, normal);
    align-items: var(--kds-note-alineada-eje, normal);
}

.kds-note:has(> i:first-child + span:last-child) > i:first-child {
    flex: none;
    margin-right: var(--kds-note-alineada-icono-sep, .4rem);
}

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

/* Los colores salen de los papeles (tokens.css), así siguen al tema y al modo; el respaldo es el de siempre. */
.kds-note--info {
    color: var(--kds-note-texto, var(--kds-info, var(--color-cyan-dark, #309c9f)));
    background: var(--kds-info-fondo, color-mix(in srgb, var(--color-cyan, #83d5cf) 14%, transparent));
    border-color: var(--kds-info-borde, color-mix(in srgb, var(--color-cyan, #83d5cf) 45%, transparent));
}

.kds-note--warning {
    color: var(--kds-note-texto, var(--kds-aviso-texto, var(--ds-text-on-warning, #334155)));
    background: var(--kds-aviso-fondo, color-mix(in srgb, var(--color-amber, #E8B30E) 12%, transparent));
    border-color: var(--kds-aviso-borde, 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(--kds-note-icono, var(--color-amber-dark, #C4960A));
}

.kds-note--danger {
    color: var(--kds-note-texto, var(--kds-peligro-texto, var(--color-rose-dark, #D03355)));
    background: var(--kds-peligro-fondo, color-mix(in srgb, var(--color-rose, #E6607B) 9%, transparent));
    border-color: var(--kds-peligro-borde, 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(--kds-note-texto, var(--kds-exito-texto, var(--color-green-dark, #4f8a3a)));
    background: var(--kds-exito-fondo, color-mix(in srgb, var(--color-green, #77b65d) 12%, transparent));
    border-color: var(--kds-exito-borde, 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(--kds-note-enlace-activo, var(--color-teal, #2EB8A8));
    text-decoration-thickness: 2px;
}

/* La guía de pasos de un módulo que se estrena (.kds-pasos) se mudó a kds-pasos.css (#2033). */