/*
 * UiMetadata.Notifications — tokens (sobrescribibles desde el tema del consumidor).
 * Cada uno cae en las variables del tema de la app y, si no existen, en un valor claro por defecto.
 */
:root {
    --notif-surface: var(--modal-surface, var(--bg-card, #ffffff));
    --notif-surface-hover: var(--hover-bg, rgba(0, 0, 0, .05));
    --notif-border: var(--border-soft, #e5e7eb);
    --notif-text: var(--text-main, #111827);
    --notif-muted: var(--text-muted, #6b7280);
    --notif-accent: var(--color-primary, #2563eb);
    --notif-danger: var(--color-danger, #dc2626);
    --notif-success: var(--color-success, #16a34a);
    --notif-warning: var(--color-warning, #d97706);
    --notif-shadow: var(--modal-shadow, 0 8px 25px rgba(0, 0, 0, .15));
    --notif-radius: 12px;
    --notif-panel-width: 380px;
}

.ui-notif { position: relative; display: inline-flex; }

.ui-notif-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--notif-border);
    border-radius: 50%;
    background: transparent;
    color: var(--notif-text);
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.ui-notif-button:hover, .ui-notif-button[aria-expanded="true"] { background: var(--notif-surface-hover); border-color: var(--notif-accent); }
.ui-notif-button:focus-visible { outline: 2px solid var(--notif-accent); outline-offset: 2px; }

.ui-notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--notif-danger);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
    box-sizing: border-box;
}
.ui-notif-badge[hidden], .ui-notif-panel[hidden] { display: none; }

.ui-notif-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1000;
    width: min(var(--notif-panel-width), 92vw);
    max-height: min(70vh, 32rem);
    max-height: min(70dvh, 32rem);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--notif-border);
    border-radius: var(--notif-radius);
    background: var(--notif-surface);
    color: var(--notif-text);
    box-shadow: var(--notif-shadow);
    overflow: hidden;
}

.ui-notif-head, .ui-notif-inbox-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--notif-border);
}
.ui-notif-inbox-head { border-bottom: 0; padding-left: 0; padding-right: 0; }
.ui-notif-inbox-title { margin: 0; font-size: 1.3rem; }
.ui-notif-foot { padding: .55rem .9rem; border-top: 1px solid var(--notif-border); text-align: center; }

.ui-notif-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--notif-accent);
    font-size: .82rem;
    cursor: pointer;
    text-decoration: none;
}
.ui-notif-link:hover:not(:disabled) { text-decoration: underline; }
.ui-notif-link:disabled { color: var(--notif-muted); cursor: default; }

.ui-notif-list { margin: 0; padding: 0; list-style: none; overflow-y: auto; }
.ui-notif-list-page { border: 1px solid var(--notif-border); border-radius: var(--notif-radius); background: var(--notif-surface); overflow: hidden; }

.ui-notif-item { position: relative; display: flex; align-items: stretch; border-bottom: 1px solid var(--notif-border); }
.ui-notif-item:last-child { border-bottom: 0; }
.ui-notif-item.unread { background: var(--interactive-accent-glow, rgba(37, 99, 235, .06)); }

.ui-notif-main {
    flex: 1;
    display: flex;
    /* Centrado contra TODO el bloque (título + cuerpo + hora), no solo contra la primera línea: con un cuerpo de
       varias líneas, flex-start deja el icono pegado arriba y align-items:center (aquí) lo centra respecto a la
       altura real de la tarjeta — así es como se ve "centrado" a simple vista, no solo en la métrica de una línea. */
    align-items: center;
    gap: .6rem;
    min-width: 0;
    padding: .7rem .9rem;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.ui-notif-main:hover { background: var(--notif-surface-hover); }
.ui-notif-main:focus-visible { outline: 2px solid var(--notif-accent); outline-offset: -2px; }

.ui-notif-sev {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--notif-surface-hover);
    color: var(--notif-muted);
}
.ui-notif-sev-icon { display: block; }
.ui-notif-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
.ui-notif-title { font-size: .9rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.ui-notif-item:not(.unread) .ui-notif-title { font-weight: 500; }
.ui-notif-text { font-size: .82rem; color: var(--notif-muted); overflow-wrap: anywhere; }
.ui-notif-time { font-size: .74rem; color: var(--notif-muted); }
/* Punto de "no leído" fijo en la esquina superior derecha de la tarjeta (.ui-notif-item es position:relative),
   independiente de cómo se centre el icono — antes colgaba de la fila icono+título y se movía con ella. */
.ui-notif-dot { position: absolute; top: .8rem; right: 2.6rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--notif-accent); }

.ui-notif-remove {
    flex: none;
    width: 2rem;
    border: 0;
    background: none;
    color: var(--notif-muted);
    font-size: 1.1rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s;
}
.ui-notif-item:hover .ui-notif-remove, .ui-notif-remove:focus-visible { opacity: 1; }
.ui-notif-remove:hover { color: var(--notif-danger); }

.ui-notif-info .ui-notif-sev { color: var(--notif-accent); background: color-mix(in srgb, var(--notif-accent) 14%, transparent); }
.ui-notif-success .ui-notif-sev { color: var(--notif-success); background: color-mix(in srgb, var(--notif-success) 14%, transparent); }
.ui-notif-warning .ui-notif-sev { color: var(--notif-warning); background: color-mix(in srgb, var(--notif-warning) 14%, transparent); }
.ui-notif-error .ui-notif-sev { color: var(--notif-danger); background: color-mix(in srgb, var(--notif-danger) 14%, transparent); }

.ui-notif-empty, .ui-notif-status { padding: 1.4rem .9rem; text-align: center; color: var(--notif-muted); font-size: .88rem; list-style: none; margin: 0; }
.ui-notif-status-error { color: var(--notif-danger); }

.ui-notif-more { display: block; margin: .8rem auto 0; padding: .4rem 1.2rem; border: 1px solid var(--notif-border); border-radius: 999px; background: transparent; color: var(--notif-text); cursor: pointer; }
.ui-notif-more[hidden] { display: none; }

@media (hover: none) { .ui-notif-remove { opacity: 1; } }

/* En móvil el panel ocupa el ancho de la pantalla, anclado al borde, en vez de desbordar por la izquierda. */
@media (max-width: 599px) {
    .ui-notif { position: static; }
    .ui-notif-panel { position: fixed; top: calc(4rem + env(safe-area-inset-top, 0px)); left: 4vw; right: 4vw; width: auto; }
}