/* ═══════════════════════════════════════════════════════════════════════
 * `_notes.css` — nota de estado kernel, fuente UNICA para los dos shells
 * ═══════════════════════════════════════════════════════════════════════
 * Movido desde `_components.css` (IT265) por el mismo motivo que IT76
 * movio la tira de KPIs a `_kpi_strip.css`: `_components.css` lo carga
 * SOLO el storefront publico, y el app-shell tambien necesita la nota.
 * Sin este archivo, un dashboard que escribiera `.sf-note--danger`
 * renderizaba una fila sin fondo, sin borde y sin tono — la clase estaba
 * en el HTML y la regla no llegaba nunca (misma familia que IT263).
 *
 * Lo cargan `layouts/app_shell.html` y `storefront/base_storefront.html`.
 * NO duplicar las reglas en ninguno de los dos: una sola definicion.
 * ═════════════════════════════════════════════════════════════════════ */

/* ============================================================
 * NOTA DE ESTADO — `.sf-note` (IT263, S25/S28/S29)
 * ------------------------------------------------------------
 * El bloque "esto pasó / esto significa / esto sigue" estaba
 * escrito a mano con utilidades Tailwind en la pagina de
 * seguimiento, en el checkout, en payment_result y en los
 * paneles admin del storefront. Seis copias del mismo tile con
 * tonos distintos y — lo que rompio — pares `dark:` que NO
 * EXISTEN en el bundle compilado:
 *
 *     dark:bg-amber-500/10      -> 0 reglas en static/css/tailwind.css
 *     dark:border-amber-500/40  -> 0 reglas
 *
 * La clase estaba en el HTML, la regla no estaba en el CSS: en
 * dark quedaba el fondo crema de light con texto amber-300
 * encima (1.9:1). Y no se puede recompilar Tailwind — package.json
 * no esta en el working tree.
 *
 * Por eso el tono se resuelve ACA, con `color-mix()` sobre los
 * tokens `--sf-*`: el acento se mezcla contra la SUPERFICIE para
 * el fondo y contra la TINTA para el texto, asi que el pareo dark
 * sale solo (ambos lados del mix flipean con el tema) y ningun
 * consumidor puede volver a congelar un hex de light mode.
 * Guard: apps/core/ui/tests/test_no_phantom_tailwind_dark_storefront.py
 * ============================================================ */
.sf-note {
    --sf-note-accent: var(--sf-color-info);
    display: flex;
    align-items: flex-start;
    gap: var(--sf-space-3);
    padding: var(--sf-space-4);
    border-radius: var(--sf-radius-xl);
    border: 1px solid color-mix(in srgb, var(--sf-note-accent) 38%, var(--sf-color-border));
    background: color-mix(in srgb, var(--sf-note-accent) 10%, var(--sf-color-bg-elevated));
    color: var(--sf-color-text);
}
/* Disco de estado: el mismo tono del `.sf-note` pero como ancla visual de un
   encabezado (el estado del pedido, de un ticket, de una integracion). */
.sf-state-disc {
    --sf-note-accent: var(--sf-color-info);
    flex: none;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--sf-radius-full);
    font-size: 1.2rem;
    background: color-mix(in srgb, var(--sf-note-accent) 16%, var(--sf-color-bg-elevated));
    border: 1px solid color-mix(in srgb, var(--sf-note-accent) 32%, var(--sf-color-border));
    color: color-mix(in srgb, var(--sf-note-accent) 70%, var(--sf-color-text));
}

/* Los tonos son compartidos: `.sf-note` y `.sf-state-disc` leen el mismo
   `--sf-note-accent`, asi que un tono nuevo se agrega en UN solo lugar.
   VAN DESPUES de las dos clases base: los modificadores tienen la MISMA
   especificidad (0,1,0) que la base, asi que solo ganan por orden. Con el
   bloque arriba, el `--sf-note-accent: info` de `.sf-state-disc` pisaba a
   `.sf-state-disc--warning` y el disco del pedido reservado salia azul. */
.sf-note--brand,   .sf-state-disc--brand   { --sf-note-accent: var(--sf-color-primary); }
.sf-note--success, .sf-state-disc--success { --sf-note-accent: var(--sf-color-success); }
.sf-note--warning, .sf-state-disc--warning { --sf-note-accent: var(--sf-color-warning); }
.sf-note--danger,  .sf-state-disc--danger  { --sf-note-accent: var(--sf-color-danger); }
.sf-note--info,    .sf-state-disc--info    { --sf-note-accent: var(--sf-color-info); }
.sf-note--neutral, .sf-state-disc--neutral { --sf-note-accent: var(--sf-color-text-muted); }

.sf-note__icon {
    flex: none;
    margin-top: .1rem;
    font-size: 1.05rem;
    line-height: 1.35;
    color: color-mix(in srgb, var(--sf-note-accent) 70%, var(--sf-color-text));
}
.sf-note__body { min-width: 0; flex: 1 1 auto; }
.sf-note__title {
    margin: 0;
    font-size: var(--sf-font-body-sm);
    font-weight: 700;
    line-height: var(--sf-leading-snug);
    /* Mezclado contra la TINTA, no contra el acento puro: en light da un
       ambar oscuro (5.1:1 sobre su fondo) y en dark un ambar claro (7.7:1).
       Un `color: var(--sf-color-warning)` fijo fallaria AA en light. */
    color: color-mix(in srgb, var(--sf-note-accent) 55%, var(--sf-color-text));
}
.sf-note__text {
    margin: .25rem 0 0;
    font-size: var(--sf-font-body-sm);
    line-height: var(--sf-leading-relaxed);
    color: var(--sf-color-text-muted);
}
.sf-note__text + .sf-note__text { margin-top: .4rem; }
.sf-note__next {
    display: block;
    margin-top: .5rem;
    font-size: var(--sf-font-caption);
    line-height: var(--sf-leading-normal);
    color: color-mix(in srgb, var(--sf-note-accent) 45%, var(--sf-color-text));
}
.sf-note__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sf-space-2);
    margin-top: var(--sf-space-3);
}

/* ── Variante fila de tablero (IT265) ────────────────────────────────────
   La nota nacio como bloque de pagina (checkout, seguimiento): padding
   generoso, titulo + parrafo. En un panel de "que revisar ahora" van 4-6
   apiladas y con ese padding la lista no entra sin scroll. Esto es
   densidad kernel-owned (S29.1): se declara UNA vez aca, no la "achica"
   cada vertical en su template. */
.sf-note--row {
    padding: 0.6rem 0.75rem;
    gap: 0.65rem;
    border-radius: var(--sf-radius-lg);
    align-items: center;
}
.sf-note--row .sf-note__icon { margin-top: 0; font-size: 0.95rem; }
.sf-note--row .sf-note__title { font-size: var(--sf-font-body-sm); }

/* Nota accionable: la fila ENTERA es el link. Una alerta que solo se puede
   mirar es la que hace inutil al panel — «4 CxC vencidas» sin camino a las
   CxC obliga a salir a buscarlas por el menu. */
a.sf-note {
    text-decoration: none;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}
a.sf-note:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--sf-note-accent) 62%, var(--sf-color-border));
    background: color-mix(in srgb, var(--sf-note-accent) 16%, var(--sf-color-bg-elevated));
}
a.sf-note:focus-visible {
    outline: 2px solid var(--sf-note-accent);
    outline-offset: 2px;
}
.sf-note__go {
    flex: none;
    font-size: 0.75rem;
    opacity: 0.55;
    color: color-mix(in srgb, var(--sf-note-accent) 60%, var(--sf-color-text));
    transition: opacity 140ms ease, transform 140ms ease;
}
a.sf-note:hover .sf-note__go { opacity: 1; transform: translateX(2px); }