@font-face {
    font-family: 'Toast_icons';
    src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
    font-weight: normal;
    font-style: normal;
}

.toast-icons {
    font-family: 'Toast_icons' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.toast-icons.e-success::before { content: "\e701"; }
.toast-icons.e-error::before { content: "\e700"; }
.toast-icons.e-info::before { content: "\e704"; }
.toast-icons.e-warning::before { content: "\e703"; }

/* ===========================================================================
   Los avisos de la aplicacion
   ---------------------------------------------------------------------------
   El estilo de fabrica de Syncfusion es un rectangulo de color liso, esquinas de
   2 px, texto blanco y una barra de progreso arriba. Se ve como un cartel de 2014
   y ademas obliga a que todo el texto sea blanco sobre un fondo saturado.

   Lo que hay aca es una tarjeta: superficie del tema, una franja del color del
   tipo a la izquierda, el icono en una pastilla tenue y el texto en los grises
   de siempre. El color pasa a ser un acento en vez de un fondo, que es lo que
   permite que el titulo y el detalle se lean con el contraste de un texto normal.

   Va en un archivo global y no en un .razor porque el contenedor de los avisos
   cuelga de BODY, fuera de la pantalla que lo dispara: medido, el padre de
   .e-toast-container es BODY. Un estilo scoped no lo alcanza nunca.

   Contrastes sobre la superficie de cada tema (piso del proyecto: 4,5:1):
     claro   exito 7,13  error 6,47  aviso 7,09  info 8,72  secundario 5,44
     oscuro  exito 12,13 error 8,98  aviso 11,82 info 9,45  secundario 7,69
   =========================================================================== */

.e-toast-container {
    /* Superficie y textos: los mismos valores que usa Estado de Pedidos. No se
       pueden reusar sus variables --pd-* porque estan declaradas en .pedidos-wrap
       y esto vive en otra rama del arbol. */
    --tst-fondo: #ffffff;
    --tst-borde: #d7e0ee;
    --tst-texto: #1e293b;
    --tst-suave: #5b6b80;
    --tst-sombra: 0 18px 40px -14px rgba(15, 23, 42, .4), 0 2px 6px -2px rgba(15, 23, 42, .16);

    --tst-ink: #1e40af;
    --tst-pastilla: #eff6ff;
}

html.theme-dark .e-toast-container {
    --tst-fondo: #111c30;
    --tst-borde: rgba(255, 255, 255, .14);
    --tst-texto: #e5e7eb;
    --tst-suave: #9fb0c4;
    /* En oscuro una sombra negra sobre fondo negro no separa nada: lo que separa
       es el borde, y por eso arriba esta mas marcado. */
    --tst-sombra: 0 18px 40px -14px rgba(0, 0, 0, .7);

    --tst-ink: #93c5fd;
    --tst-pastilla: rgba(37, 99, 235, .18);
}

/* ---------- Un color por tipo ---------- */
.e-toast-container .e-toast.e-toast-success { --tst-ink: #166534; --tst-pastilla: #f0fdf4; }
.e-toast-container .e-toast.e-toast-danger,
.e-toast-container .e-toast.e-toast-error { --tst-ink: #b91c1c; --tst-pastilla: #fef2f2; }
.e-toast-container .e-toast.e-toast-warning { --tst-ink: #92400e; --tst-pastilla: #fffbeb; }
.e-toast-container .e-toast.e-toast-info { --tst-ink: #1e40af; --tst-pastilla: #eff6ff; }

html.theme-dark .e-toast-container .e-toast.e-toast-success { --tst-ink: #86efac; --tst-pastilla: rgba(22, 163, 74, .18); }
html.theme-dark .e-toast-container .e-toast.e-toast-danger,
html.theme-dark .e-toast-container .e-toast.e-toast-error { --tst-ink: #fca5a5; --tst-pastilla: rgba(220, 38, 38, .18); }
html.theme-dark .e-toast-container .e-toast.e-toast-warning { --tst-ink: #fcd34d; --tst-pastilla: rgba(217, 119, 6, .18); }
html.theme-dark .e-toast-container .e-toast.e-toast-info { --tst-ink: #93c5fd; --tst-pastilla: rgba(37, 99, 235, .18); }

/* ---------- La tarjeta ---------- */
/* Los !important no son pereza: Syncfusion trae estas mismas propiedades en su
   hoja con la misma especificidad y gana la que se cargue ultima, que depende del
   orden de los <link>. Con !important el resultado deja de depender de eso. */
.e-toast-container .e-toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    box-sizing: border-box;
    min-height: 0;
    padding: 14px 14px 14px 18px !important;
    border-radius: 14px !important;
    border: 1px solid var(--tst-borde) !important;
    /* La franja del color del tipo, a la izquierda. Va como box-shadow interior y
       no como border-left para no pelear con el borde de la tarjeta ni con el
       radio: un borde de 4 px cuadrado arruinaba la esquina redondeada. */
    box-shadow: inset 4px 0 0 0 var(--tst-ink), var(--tst-sombra) !important;
    background: var(--tst-fondo) !important;
    background-color: var(--tst-fondo) !important;
    color: var(--tst-texto) !important;
    overflow: hidden;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    transition: transform 160ms cubic-bezier(.2, .8, .25, 1),
                box-shadow 160ms cubic-bezier(.2, .8, .25, 1);
}

/* Se levanta apenas al pasarle el mouse: dice "esto se puede tocar" antes de que
   la persona encuentre la X. */
.e-toast-container .e-toast:hover {
    transform: translateY(-1px);
    box-shadow: inset 4px 0 0 0 var(--tst-ink),
                0 22px 46px -14px rgba(15, 23, 42, .46), 0 2px 6px -2px rgba(15, 23, 42, .18) !important;
}

html.theme-dark .e-toast-container .e-toast:hover {
    box-shadow: inset 4px 0 0 0 var(--tst-ink), 0 22px 46px -14px rgba(0, 0, 0, .8) !important;
}

/* ---------- El icono ---------- */
.e-toast-container .e-toast .e-toast-icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    margin: 0 !important;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--tst-pastilla);
    color: var(--tst-ink) !important;
    font-size: 17px !important;
}

/* ---------- El texto ---------- */
.e-toast-container .e-toast .e-toast-message {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.e-toast-container .e-toast .e-toast-title {
    font-size: 13.5px !important;
    font-weight: 650 !important;
    letter-spacing: -.01em;
    line-height: 1.35 !important;
    color: var(--tst-texto) !important;
}

.e-toast-container .e-toast .e-toast-content {
    padding: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    color: var(--tst-suave) !important;
}

/* ---------- Cerrar ---------- */
.e-toast-container .e-toast .e-toast-close-icon {
    flex: 0 0 auto;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    padding: 0 !important;
    margin: -1px -2px 0 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--tst-suave) !important;
    box-shadow: none !important;
    font-size: 13px !important;
    transition: background 140ms linear, color 140ms linear;
}

.e-toast-container .e-toast .e-toast-close-icon:hover,
.e-toast-container .e-toast .e-toast-close-icon:focus {
    background: var(--tst-pastilla) !important;
    color: var(--tst-ink) !important;
}

.e-toast-container .e-toast .e-toast-close-icon:focus-visible {
    outline: 2px solid var(--tst-ink);
    outline-offset: 1px;
}

/* ---------- La barra de tiempo ---------- */
/* Abajo y no arriba: mide lo que FALTA, y abajo no compite con el titulo. Syncfusion
   la pone arriba y de 4 px en el color pleno del tipo. */
.e-toast-container .e-toast .e-toast-progress {
    position: absolute;
    top: auto !important;
    bottom: 0;
    left: 0;
    height: 3px !important;
    border-radius: 0 3px 3px 0;
    background: var(--tst-ink) !important;
    opacity: .55;
}

/* ---------- Separacion entre avisos apilados ---------- */
.e-toast-container .e-toast + .e-toast { margin-top: 10px !important; }

/* La sombra sobresale de la tarjeta: sin este aire, el aviso de mas arriba queda
   pegado al borde de la ventana y la sombra se corta. */
.e-toast-container.e-toast-top-right { padding: 14px 16px !important; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
    .e-toast-container .e-toast { transition: none; }
    .e-toast-container .e-toast:hover { transform: none; }
}