/* ═══════════════════════════════════════════════════════════════════════════
   CAMPANA DE AVISOS (recordatorios) — barra superior, píldora, franja y panel
   ───────────────────────────────────────────────────────────────────────────
   Se carga en todas las pantallas (_Layout) y todo lo propio lleva el prefijo av-.
   Reglas que no se negocian:
     · Nunca empuja el contenido del punto de venta: la píldora de lo urgente vive DENTRO de la barra superior;
       la franja bajo la barra solo existe en teléfono y fuera del punto de venta.
     · Sin sonido, sin parpadeos, sin ventanas que se abren solas.
     · El iPad de la caja (5.ª gen.) es lento: sin backdrop-filter, una sola sombra (el panel), animaciones solo de
       opacidad/transform y de 150 ms.
     · Cada nivel se distingue por COLOR y por FORMA (icono), nunca solo por color.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --av-warn: #c2570c;
    --av-warn-dk: #9a5700;
    --av-warn-lo: rgba(255, 149, 0, 0.14);
    --av-z: 1045;          /* el panel queda sobre la barra (1040) */
    --av-z-scrim: 1044;
}

/* En el punto de venta hay capas flotantes de 7000 a 8000 y modales de 9000+: el panel va entre medio. */
body[data-avisos-modo="pos"] {
    --av-z: 8200;
    --av-z-scrim: 8199;
}

/* ── En la barra superior ─────────────────────────────────────────────────── */
.av-slot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    min-width: 0;
}

.av-bell {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--t2);
    font-size: 1.25rem;
    transition: background var(--swift), color var(--swift);
}

.av-bell:hover,
.av-bell[aria-expanded="true"] {
    background: var(--surface-3);
    color: var(--t1);
}

.av-bell:focus-visible,
.av-pill:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.av-bell.is-n1 { background: var(--accent-lo); color: var(--accent); }
.av-bell.is-n2 { background: var(--av-warn-lo); color: var(--av-warn-dk); }
.av-bell.is-n3 { background: var(--danger-lo); color: var(--danger-dk); }
.av-bell.is-n1:hover, .av-bell.is-n1[aria-expanded="true"] { background: var(--accent-tint); color: var(--accent); }
.av-bell.is-n2:hover, .av-bell.is-n2[aria-expanded="true"] { background: var(--warning-tint); color: var(--av-warn-dk); }
.av-bell.is-n3:hover, .av-bell.is-n3[aria-expanded="true"] { background: var(--danger-tint); color: var(--danger-dk); }

.av-count {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 19px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 2px var(--surface);
}

.av-count[hidden] { display: none; }
.av-bell.is-n2 .av-count { background: var(--av-warn); }
.av-bell.is-n3 .av-count { background: var(--danger-dk); }

@media (pointer: coarse) {
    .av-bell { width: 44px; height: 44px; }
}

/* La píldora: solo con algo urgente o vencido de HOY, y solo desde 768 px (en teléfono va la franja). */
.av-pill {
    display: none;
    align-items: center;
    gap: 0.4rem;
    max-width: 320px;
    min-height: 34px;
    padding: 0 0.8rem;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.av-pill-txt {
    overflow: hidden;
    text-overflow: ellipsis;
}

.av-pill.is-n2 {
    background: var(--av-warn-lo);
    border-color: rgba(194, 87, 12, 0.35);
    color: var(--av-warn-dk);
}

.av-pill.is-n3 {
    background: var(--danger-lo);
    border-color: rgba(199, 39, 31, 0.35);
    color: var(--danger-dk);
}

@media (min-width: 768px) {
    .av-pill:not([hidden]) { display: inline-flex; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .av-pill { max-width: 200px; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .av-pill { max-width: 260px; }
}

/* ── Franja de lo urgente (solo teléfono, solo fuera del punto de venta) ──── */
.av-strip { display: none; }

@media (max-width: 767.98px) {
    .av-strip:not([hidden]) {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.55rem 1rem;
        border-bottom: 1px solid var(--hairline);
        font-size: 0.8125rem;
        font-weight: 600;
    }

    .av-strip.is-n2 { background: var(--av-warn-lo); color: var(--av-warn-dk); }
    .av-strip.is-n3 { background: var(--danger-lo); color: var(--danger-dk); }

    .av-strip .bi { flex: 0 0 auto; }

    .av-strip-txt {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .av-strip-ver {
        flex: 0 0 auto;
        min-height: 32px;
        padding: 0 0.8rem;
        border: 1px solid currentColor;
        border-radius: var(--r-pill);
        background: transparent;
        color: inherit;
        font-size: 0.8125rem;
        font-weight: 600;
    }
}

/* ── El panel ─────────────────────────────────────────────────────────────── */
.av-scrim {
    position: fixed;
    inset: 0;
    z-index: var(--av-z-scrim);
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease-out;
}

.av-panel {
    position: fixed;
    z-index: var(--av-z);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r4);
    box-shadow: var(--shadow-lg);
    color: var(--t1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 150ms ease-out, transform 150ms ease-out, visibility 0s linear 150ms;
}

.av-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
}

@media (min-width: 576px) {
    .av-panel {
        top: calc(var(--navbar-h) + 6px);
        right: 16px;
        width: 380px;
        max-height: min(78vh, 640px);
    }

    .av-scrim { display: none; }
}

/* Teléfono: hoja inferior */
@media (max-width: 575.98px) {
    .av-panel {
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 85vh;
        max-height: 85dvh;
        padding-bottom: env(safe-area-inset-bottom);
        border-bottom: 0;
        border-radius: var(--r4) var(--r4) 0 0;
        transform: translateY(24px);
    }

    .av-scrim.is-open {
        opacity: 1;
        pointer-events: auto;
    }
}

.av-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 1rem 0.9rem 0.8rem 1.1rem;
}

.av-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.av-title small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--t3);
}

.av-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 30px;
    padding: 0 0.7rem;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--accent-lo);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--swift);
}

.av-link[hidden] { display: none; }
.av-link:hover { background: var(--accent-tint); color: var(--accent); }
.av-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.av-x {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--surface-3);
    color: var(--t3);
    font-size: 0.8rem;
    transition: background var(--swift), color var(--swift);
}

.av-x:hover { background: var(--border-3); color: var(--t1); }
.av-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.av-body {
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 0.5rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border-top: 1px solid var(--hairline);
}

/* Resumen por nivel: lo que hay, de un vistazo, antes de la lista */
.av-resumen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.75rem 1.1rem 0.15rem;
}

.av-sum {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 26px;
    padding: 0 0.65rem 0 0.55rem;
    border-radius: var(--r-pill);
    background: var(--surface-3);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--t2);
    font-variant-numeric: tabular-nums;
}

.av-sum.is-n1 { background: var(--accent-lo); color: var(--accent); }
.av-sum.is-n2 { background: var(--av-warn-lo); color: var(--av-warn-dk); }
.av-sum.is-n3 { background: var(--danger-lo); color: var(--danger-dk); }

/* Grupos */
.av-group-t {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.9rem 1.1rem 0.3rem;
    border: 0;
    background: none;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--t2);
    text-align: left;
}

button.av-group-t { cursor: pointer; }
button.av-group-t:hover { color: var(--t1); }
button.av-group-t:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r2); }

.av-group-t .av-n {
    min-width: 1.35rem;
    padding: 0 0.4rem;
    border-radius: var(--r-pill);
    background: var(--surface-3);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.35rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--t3);
}

.av-group-t .av-caret { margin-left: auto; font-size: 0.75rem; color: var(--t4); transition: transform var(--swift); }
.av-group.is-colapsado .av-caret { transform: rotate(-90deg); }
.av-group.is-colapsado .av-items { display: none; }

/* Un aviso: fila redondeada, con icono sobre fondo del color del nivel (color Y forma, nunca solo color) */
.av-item {
    position: relative;
    margin: 0.2rem 0.5rem 0;
    padding: 0.75rem 0.7rem 0.8rem;
    border-radius: var(--r3);
    transition: background var(--swift);
}

.av-item.is-n2 { background: rgba(255, 149, 0, 0.07); }
.av-item.is-n3 { background: rgba(255, 59, 48, 0.06); }
.av-item.is-foco { background: var(--accent-lo); box-shadow: inset 0 0 0 1.5px var(--accent-tint); }

.av-row {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
}

.av-ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: var(--surface-3);
    font-size: 1.05rem;
    color: var(--t3);
}

.av-item.is-n1 .av-ico { background: var(--accent-tint); color: var(--accent); }
.av-item.is-n2 .av-ico { background: var(--warning-tint); color: var(--av-warn-dk); }
.av-item.is-n3 .av-ico { background: var(--danger-tint); color: var(--danger-dk); }
.av-item.is-hecho .av-ico { background: var(--success-tint); color: var(--success-dk); }

.av-txt {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 0.05rem;
}

.av-t {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--t1);
    overflow-wrap: anywhere;
}

.av-m {
    margin-top: 0.2rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--t3);
}

/* Lo que importa del tiempo («faltan 45 min», «hace 21 min», «Venció el vie 23 oct») va en pastilla */
.av-m b {
    display: inline;
    padding: 0.1rem 0.5rem;
    border-radius: var(--r-pill);
    background: var(--surface-3);
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--t2);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.av-item.is-n3 .av-m b { background: var(--danger-tint); color: var(--danger-dk); }
.av-item.is-n2 .av-m b { background: var(--warning-tint); color: var(--av-warn-dk); }

.av-act {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.65rem;
    padding-left: calc(36px + 0.7rem);
}

/* Medidor de stock: cuánto queda respecto del mínimo */
.av-meter {
    height: 6px;
    margin: 0.5rem 0 0.4rem;
    border-radius: var(--r-pill);
    background: var(--border-2);
    overflow: hidden;
}

.av-meter > i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--warning);
}

.av-item.is-n3 .av-meter > i { background: var(--danger); }

/* Botones propios del panel (btn-outline-secondary se ve sin borde en este tema) */
.av-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 34px;
    padding: 0 0.95rem;
    border: 1px solid var(--border-3);
    border-radius: var(--r-pill);
    background: var(--surface);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--t2);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--swift), border-color var(--swift), color var(--swift);
}

.av-btn:hover { background: var(--surface-3); color: var(--t1); }
.av-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.av-btn[disabled] { opacity: 0.5; pointer-events: none; }

.av-btn.is-primario {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.av-btn.is-primario:hover { background: var(--accent-hi); color: #fff; }
.av-item.is-n3 .av-btn.is-primario { border-color: var(--danger-dk); background: var(--danger-dk); }
.av-item.is-n3 .av-btn.is-primario:hover { filter: brightness(1.08); }

.av-btn.is-suave {
    border-color: transparent;
    background: transparent;
    color: var(--t3);
}

.av-btn.is-suave:hover { background: var(--surface-3); color: var(--t1); }

@media (pointer: coarse) {
    .av-btn { min-height: 40px; }
    .av-x { width: 40px; height: 40px; }
    .av-link { min-height: 36px; }
}

/* «Más»: abre en el mismo lugar */
.av-mas {
    margin: 0.65rem 0 0 calc(36px + 0.7rem);
    padding: 0.7rem 0.8rem 0.8rem;
    border-radius: var(--r3);
    background: var(--surface);
    border: 1px solid var(--hairline);
}

.av-mas-t {
    margin: 0 0 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--t3);
}

.av-mas-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.av-mas-fila + .av-mas-t { margin-top: 0.75rem; }

.av-chip {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 0.8rem;
    border: 1px solid var(--border-3);
    border-radius: var(--r-pill);
    background: var(--surface);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--t2);
    transition: background var(--swift), border-color var(--swift), color var(--swift);
}

.av-chip:hover { border-color: var(--accent); background: var(--accent-lo); color: var(--accent); }
.av-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (pointer: coarse) {
    .av-chip { min-height: 38px; }
}

/* Vacío */
.av-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 2.6rem 1.5rem 2.8rem;
    text-align: center;
    color: var(--t3);
    font-size: 0.8125rem;
}

.av-vacio b { font-size: 0.95rem; font-weight: 700; color: var(--t1); }

.av-vacio-ico {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 0.6rem;
    border-radius: 50%;
    background: var(--success-tint);
    font-size: 1.6rem;
    color: var(--success-dk);
}

.av-vacio-ico.is-gris { background: var(--surface-3); color: var(--t4); }

/* Mensajes en el propio panel (errores, «Deshacer»): barra oscura al pie, como un aviso del sistema */
.av-aviso {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.4rem 0.75rem 0.75rem;
    padding: 0.35rem 0.4rem 0.35rem 0.9rem;
    border-radius: var(--r3);
    background: var(--t1);
    font-size: 0.8125rem;
    color: #fff;
}

.av-aviso[hidden] { display: none; }
.av-aviso.is-error { background: var(--danger-dk); }
.av-aviso span { flex: 1 1 auto; min-width: 0; padding: 0.3rem 0; }
.av-aviso .av-btn.is-suave { color: #8ec5ff; }
.av-aviso .av-btn.is-suave:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* Mis avisos */
.av-mis { padding: 0.9rem 1rem 1.1rem; }
.av-mis h3 { margin: 0.5rem 0 0.15rem; font-size: 1rem; font-weight: 700; }
.av-hint { margin: 0 0 0.9rem; font-size: 0.78rem; color: var(--t3); }
.av-campo { display: block; margin-bottom: 0.8rem; }

.av-campo > span {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--t2);
}

.av-campo .form-control { font-size: 0.9rem; }

.av-check {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0 0 0.7rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--t2);
}

.av-check input {
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.12rem;
}

.av-nota {
    margin: 0 0 0.8rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--r2);
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    font-size: 0.78rem;
    color: var(--t3);
}

.av-mis-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

/* Falta aceptar WhatsApp: un punto en la campana + una invitación al tope del panel + la casilla resaltada en «Mis avisos».
   Sin parpadeo ni sonido; nunca se abre sola. */
.av-dot {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--av-warn);
    box-shadow: 0 0 0 2px var(--surface);
}

.av-dot[hidden] { display: none; }

.av-invita {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.75rem;
    row-gap: 0.15rem;
    margin: 0.8rem 0.9rem 0.2rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r3);
    background: var(--surface-2);
}

.av-invita-ico {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--success-tint);
    color: var(--success-dk);
    font-size: 1.1rem;
}

.av-invita-t { align-self: end; font-size: 0.875rem; font-weight: 700; color: var(--t1); }
.av-invita-s { font-size: 0.78rem; line-height: 1.4; color: var(--t3); }

.av-invita-acc {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    margin-top: 0.6rem;
}

.av-falta { margin: 0 0 0.45rem; }

.av-check.is-falta {
    padding: 0.65rem 0.75rem;
    border-radius: var(--r2);
    background: var(--warning-tint);
}

@media (pointer: coarse) {
    .av-dot { right: 6px; bottom: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .av-panel,
    .av-scrim { transition: none; }
}