/* ─────────────────────────────────────────────────────────────────────────────
   notificaciones.css — pedido de permiso, pestaña del Perfil y panel del Admin
   Mobile-first: áreas táctiles grandes, nada se desborda a 360 px.
   ──────────────────────────────────────────────────────────────────────────── */

/* ── "¿Te avisamos?" (flota abajo, sobre el contenido) ─────────────────────── */
.cf-notif-pedido {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    max-width: 460px;
    margin: 0 auto;
    z-index: 1080;
    background: var(--bg-card-solid, #fff);
    color: var(--text-color, #111);
    border: 1px solid var(--border-violet, rgba(124, 58, 237, .35));
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
    transform: translateY(24px);
    opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
}
.cf-notif-pedido--visible { transform: none; opacity: 1; }
.cf-notif-pedido__fila { display: flex; gap: 12px; align-items: flex-start; }
.cf-notif-pedido__fila p { margin: 4px 0 0; font-size: .88rem; color: var(--text-muted); }
.cf-notif-pedido__ico { font-size: 1.4rem; color: var(--color-action); line-height: 1; margin-top: 2px; }
.cf-notif-pedido__acciones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.cf-notif-pedido__acciones .btn { min-height: 40px; padding-inline: 16px; }
.cf-notif-pedido .btn-primary { background: var(--color-action); border-color: var(--color-action); }

/* ── Pestaña del Perfil ──────────────────────────────────────────────────────── */
.cf-notif-estado {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid var(--border-soft, rgba(0, 0, 0, .08));
    border-radius: 14px;
    margin-bottom: 1.2rem;
}
.cf-notif-estado__ico { font-size: 1.5rem; color: var(--color-action); line-height: 1; }
.cf-notif-estado__txt { flex: 1; min-width: 0; }
.cf-notif-estado__txt p { margin: 4px 0 0; font-size: .88rem; color: var(--text-muted); overflow-wrap: anywhere; }
.cf-notif-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cf-notif-acciones .btn { min-height: 40px; }
.cf-notif-acciones .btn-primary { background: var(--color-action); border-color: var(--color-action); }
.cf-notif-meta { font-size: .8rem; color: var(--text-muted); margin: 6px 0 0; }
.cf-notif-grupo {
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 1.1rem 0 .4rem;
    font-weight: 700;
}
.cf-notif-lista { border: 1px solid var(--border-soft, rgba(0, 0, 0, .08)); border-radius: 14px; overflow: hidden; }
.cf-notif-fila {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    min-height: 56px;
}
.cf-notif-fila + .cf-notif-fila { border-top: 1px solid var(--border-soft, rgba(0, 0, 0, .08)); }
.cf-notif-fila__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cf-notif-fila__txt span { font-size: .8rem; color: var(--text-muted); }
.cf-notif-alerta { color: #F59E0B !important; }
.cf-notif-siempre {
    font-size: .72rem;
    font-weight: 700;
    color: var(--color-action);
    background: rgba(124, 58, 237, .12);
    border-radius: 999px;
    padding: 4px 10px;
    white-space: nowrap;
}
.cf-notif-switch { width: 2.6em !important; height: 1.4em; cursor: pointer; }
.cf-notif-switch:checked { background-color: var(--color-action); border-color: var(--color-action); }

/* ── Aside: link entre Sincronizar y Ayuda ───────────────────────────────────── */
.sidebar-notif-link a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 15px;
    font-size: .85rem;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: 8px;
}
.sidebar-notif-link a:hover { color: var(--color-action); }

/* ── Panel admin ─────────────────────────────────────────────────────────────── */
.adm-notif-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: .8rem 0 1rem; }
.adm-notif-tabla td { vertical-align: middle; }
.adm-notif-tabla tr[data-clave] { cursor: pointer; }
.adm-notif-badge { display: inline-block; font-size: .68rem; font-weight: 700; border-radius: 999px; padding: 2px 8px; margin: 2px 4px 0 0; background: rgba(71, 85, 105, .14); color: var(--text-muted); }
.adm-notif-badge.obl { background: rgba(124, 58, 237, .14); color: var(--color-action); }
.adm-notif-badge.per { background: rgba(163, 230, 53, .18); color: #4d7c0f; }
.adm-notif-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.adm-notif-chip {
    border: 1px solid var(--border-strong, rgba(0, 0, 0, .15));
    background: transparent;
    color: var(--text-color);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: .78rem;
    min-height: 34px;
}
.adm-notif-chip.activo { border-color: var(--color-action); color: var(--color-action); background: rgba(124, 58, 237, .1); }
.adm-notif-editor { border: 1px solid var(--border-violet, rgba(124, 58, 237, .3)); border-radius: 14px; padding: 16px; margin-top: 1rem; }
.adm-notif-cron { font-family: ui-monospace, Menlo, Consolas, monospace; }

@media (max-width: 640px) {
    .adm-notif-tabla thead { display: none; }
    .adm-notif-tabla tr { display: block; border-bottom: 1px solid var(--border-soft, rgba(0, 0, 0, .08)); padding: 8px 0; }
    .adm-notif-tabla td { display: block; border: none; padding: 2px 0; }
}