/* ============================================================ Panel y Centro de notificaciones — Sistema Integral PdM Scope: .pdm-notif (sirve para el dropdown de la campana y la página /notifs/centro). Colores EXPLÍCITOS para garantizar contraste tanto en claro como en oscuro (.dark en ). ============================================================ */ .pdm-notif{ --pn-bg:#ffffff; --pn-bg-soft:#f8fafc; --pn-border:#e5e7eb; --pn-text:#0f172a; --pn-text2:#475569; --pn-text3:#64748b; --pn-unread:#eff6ff; --pn-hover:#f1f5f9; --pn-accent:#2563eb; --pn-accent-bg:#dbeafe; --pn-accent-tx:#1e40af; font-family:'Inter',ui-sans-serif,system-ui,sans-serif; color:var(--pn-text); } .dark .pdm-notif{ --pn-bg:#1e293b; --pn-bg-soft:#0f172a; --pn-border:#334155; --pn-text:#f1f5f9; --pn-text2:#cbd5e1; --pn-text3:#94a3b8; --pn-unread:rgba(59,130,246,.16); --pn-hover:#273449; --pn-accent:#60a5fa; --pn-accent-bg:rgba(96,165,250,.18); --pn-accent-tx:#bfdbfe; } /* ---- Cabecera ---- */ .pn-head{display:flex;align-items:center;justify-content:space-between; gap:8px;padding:12px 14px;border-bottom:1px solid var(--pn-border);} .pn-head .pn-title-wrap{display:flex;align-items:center;gap:8px;min-width:0;} .pn-head h3{font-size:15px;font-weight:700;margin:0;color:var(--pn-text);} .pn-badge{font-size:11px;font-weight:700;background:#dc2626;color:#fff; border-radius:20px;padding:1px 7px;line-height:1.4;} .pn-link{font-size:12px;font-weight:600;color:var(--pn-accent); background:none;border:none;cursor:pointer;padding:0;white-space:nowrap;} .pn-link:hover{text-decoration:underline;} /* ---- Filtros (chips) ---- */ .pn-filters{display:flex;gap:6px;flex-wrap:wrap;padding:10px 14px; border-bottom:1px solid var(--pn-border);} .pn-chip{font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px; background:var(--pn-bg-soft);color:var(--pn-text2); border:1px solid var(--pn-border);cursor:pointer;white-space:nowrap; transition:background .12s,color .12s;} .pn-chip:hover{background:var(--pn-hover);} .pn-chip.active{background:var(--pn-accent);color:#fff;border-color:var(--pn-accent);} /* ---- Dropdown de la campana ---- Se monta en y se posiciona con JS (position:fixed) justo arriba de la campana, así nunca lo recorta el sidebar (256px). El display lo controla la clase .hidden — usamos :not(.hidden) para que SÍ le gane a .hidden. */ .pdm-notif.pn-drop{position:fixed;z-index:70;background:var(--pn-bg); border:1px solid var(--pn-border);border-radius:12px; box-shadow:0 14px 38px rgba(0,0,0,.30);overflow:hidden; width:360px;max-width:calc(100vw - 24px);max-height:80vh;} .pdm-notif.pn-drop:not(.hidden){display:flex;flex-direction:column;} .pdm-notif.pn-drop .pn-body{flex:1 1 auto;min-height:0;} /* ---- Cuerpo (lista de apartados) ---- */ .pn-body{overflow-y:auto;} .pdm-notif.pn-page .pn-body{max-height:none;} /* página completa */ /* ---- Apartado (módulo) ---- */ .pn-sec{border-bottom:1px solid var(--pn-border);} .pn-sec-head{display:flex;align-items:center;gap:7px;padding:9px 12px; background:var(--pn-bg-soft);cursor:pointer;user-select:none;} .pn-grip{cursor:grab;color:var(--pn-text3);font-size:0;line-height:0; padding:2px;border-radius:4px;flex:none;} .pn-grip:hover{background:var(--pn-hover);} .pn-grip svg{width:14px;height:14px;display:block;} .pn-sec.dragging{opacity:.45;} .pn-sec.drag-over{outline:2px dashed var(--pn-accent);outline-offset:-2px;} .pn-chev{width:14px;height:14px;flex:none;color:var(--pn-text2); transition:transform .15s;} .pn-sec.collapsed .pn-chev{transform:rotate(-90deg);} .pn-sec-name{font-size:12.5px;font-weight:700;color:var(--pn-text2); letter-spacing:.01em;} .pn-sec-count{font-size:11px;color:var(--pn-text3);font-weight:600;} .pn-sec-dot{width:7px;height:7px;border-radius:50%;flex:none;margin-left:2px;} .pn-sec-unread{margin-left:auto;font-size:10px;font-weight:700;color:#fff; background:var(--pn-accent);border-radius:20px;padding:1px 6px;min-width:16px; text-align:center;} .pn-sec.collapsed .pn-sec-items{display:none;} /* ---- Ítem ---- */ .pn-item{display:flex;gap:10px;padding:11px 14px 11px 12px; border-left:3px solid transparent;background:var(--pn-bg); text-decoration:none;color:inherit;transition:background .1s;} .pn-item + .pn-item{border-top:1px solid var(--pn-border);} .pn-item:hover{background:var(--pn-hover);} .pn-item.unread{background:var(--pn-unread);} .pn-item.t-info{border-left-color:#3b82f6;} .pn-item.t-success{border-left-color:#10b981;} .pn-item.t-warning{border-left-color:#f59e0b;} .pn-item.t-error{border-left-color:#ef4444;} .pn-ico{font-size:17px;line-height:1.3;flex:none;} .pn-main{flex:1;min-width:0;} .pn-it-title{font-size:13.5px;font-weight:600;color:var(--pn-text); line-height:1.35;} .pn-it-msg{font-size:12px;color:var(--pn-text2);margin-top:1px; line-height:1.4;overflow-wrap:anywhere;} .pn-it-time{font-size:11px;color:var(--pn-text3);margin-top:3px;} .pn-it-dot{width:8px;height:8px;border-radius:50%;background:var(--pn-accent); margin-top:4px;flex:none;} /* ---- Wrapper + botón toggle leída/no-leída ---- */ .pn-item-wrap{position:relative;} .pn-item-wrap + .pn-item-wrap{border-top:1px solid var(--pn-border);} .pn-item-wrap .pn-item + .pn-item{border-top:0;} /* usa el border del wrap */ .pn-toggle{position:absolute;top:8px;right:8px; width:26px;height:26px;border-radius:50%; background:transparent;border:1px solid transparent;color:var(--pn-text3); font-size:13px;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center; opacity:0;transition:opacity .12s, background .12s, color .12s, border-color .12s; z-index:2;} .pn-item-wrap:hover .pn-toggle{opacity:1;} .pn-item-wrap.unread .pn-toggle{opacity:.7;} .pn-toggle:hover{background:var(--pn-hover);color:var(--pn-text); border-color:var(--pn-border);} .pn-toggle:disabled{cursor:default;opacity:.4;} .pn-toggle:focus-visible{opacity:1;outline:2px solid var(--pn-accent); outline-offset:1px;} /* ---- Pie ---- */ .pn-foot{text-align:center;padding:10px;border-top:1px solid var(--pn-border); background:var(--pn-bg);} /* ---- Estados vacío / carga ---- */ .pn-empty{padding:28px 16px;text-align:center;color:var(--pn-text3); font-size:12.5px;} .pn-empty svg{width:34px;height:34px;margin:0 auto 8px;opacity:.5;display:block;} /* ---- Búsqueda (centro) ---- */ .pn-search{position:relative;padding:10px 14px;border-bottom:1px solid var(--pn-border);} .pn-search input{width:100%;font-size:13px;padding:8px 10px 8px 32px; border:1px solid var(--pn-border);border-radius:8px;background:var(--pn-bg-soft); color:var(--pn-text);outline:none;} .pn-search input:focus{border-color:var(--pn-accent); box-shadow:0 0 0 3px var(--pn-accent-bg);} .pn-search svg{position:absolute;left:24px;top:50%;transform:translateY(-50%); width:16px;height:16px;color:var(--pn-text3);pointer-events:none;} /* ---- Layout de la página centro ---- */ .pn-page-wrap{max-width:760px;margin:0 auto;padding:18px 14px 40px;} .pn-page-title{display:flex;align-items:center;gap:10px;margin:0 0 14px;} .pn-page-title h1{font-size:20px;font-weight:800;margin:0;color:var(--pn-text);} .pdm-notif.pn-page{background:var(--pn-bg);border:1px solid var(--pn-border); border-radius:14px;overflow:hidden;} .pn-hint{font-size:11.5px;color:var(--pn-text3);padding:8px 14px; background:var(--pn-bg-soft);border-bottom:1px solid var(--pn-border); display:flex;align-items:center;gap:6px;} .pn-hint svg{width:14px;height:14px;flex:none;}