.notification-demo{background:#0b141a;border:1px solid #26333a;border-radius:14px;max-width:350px;min-height:510px;margin:auto;position:relative;overflow:hidden;box-shadow:0 12px 28px #1d253026}.demo-header{background:#10191e;border-bottom:1px solid #2b373d;align-items:center;gap:10px;padding:12px 16px;display:flex}.demo-avatar{background:#fff;border-radius:50%;place-items:center;width:40px;height:40px;display:grid}.demo-avatar img{object-fit:contain;width:28px;height:28px}.demo-header strong,.demo-header span{display:block}.demo-header strong{color:#f5f7f8;font-size:15px}.demo-header span{color:#aab8bb;font-size:12px}.demo-header .demo-header-dots{color:#e9edef;letter-spacing:2px;margin-left:auto;font-size:23px}.demo-chat{background-color:#111b21;background-image:radial-gradient(at 12% 20%,#0000 0 13px,#ffffff08 14px 15px,#0000 16px),radial-gradient(at 80% 66%,#0000 0 18px,#ffffff08 19px 20px,#0000 21px);background-size:92px 105px;min-height:450px;padding:18px 16px 24px}.demo-day{letter-spacing:.04em;color:#c6d0d2;background:#26343b;border-radius:6px;width:max-content;margin:0 auto 14px;padding:4px 9px;font-size:10px}.message{color:#e9edef;opacity:0;background:#202c33;border-radius:4px 10px 10px;padding:14px 14px 0;font-family:ui-sans-serif,system-ui,sans-serif;font-size:14px;line-height:1.5;transition:opacity .45s,transform .45s;position:relative;overflow:hidden;transform:translateY(12px);box-shadow:0 1px 2px #0005}.message-arrived{opacity:1;transform:translateY(0)}.message p{margin:0 0 12px}.message strong{font-weight:600}.radicado{overflow-wrap:anywhere}.message-link{color:#47c886;overflow-wrap:anywhere;text-decoration:underline}.message-note{color:#d1d7db;font-size:12px}.message-time{text-align:right;color:#aebac1;margin:0 0 8px;font-size:10px;display:block}.message-action{text-align:center;color:#35c47b;width:calc(100% + 28px);font:inherit;cursor:pointer;background:0 0;border-top:1px solid #34444b;margin:0 -14px;padding:10px;font-size:14px;font-weight:600;display:block}.detail-layer{z-index:2;visibility:hidden;pointer-events:none;transition:visibility .35s;position:absolute;inset:0}.detail-layer.is-open{visibility:visible;pointer-events:auto}.detail-backdrop{opacity:0;background:#0009;transition:opacity .35s;position:absolute;inset:0}.is-open .detail-backdrop{opacity:1}.detail-panel{color:#e9edef;background:#10171b;border-radius:20px 20px 0 0;flex-direction:column;transition:transform .45s cubic-bezier(.2,.8,.2,1);display:flex;position:absolute;inset:38px 0 0;transform:translateY(105%)}.is-open .detail-panel{transform:translateY(0)}.detail-handle{background:#8a969c;border-radius:4px;width:38px;height:4px;margin:10px auto}.detail-header{justify-content:space-between;align-items:center;padding:12px 16px;font-size:14px;display:flex}.detail-header button{color:#e9edef;cursor:pointer;background:0 0;border:0;font-size:26px;line-height:1}.detail-content{flex:1;padding:12px 18px;font-size:13px;line-height:1.45;overflow:auto}.detail-content h3{margin:0 0 15px;font-size:16px;font-weight:700}.detail-content h4{margin:18px 0 12px;font-size:16px;font-weight:700}.detail-content p{margin:12px 0}.detail-label{color:#9ca9ae;font-size:11px}.detail-radicado{overflow-wrap:anywhere}.detail-secondary{color:#aebac1}.detail-document{color:#53c684}.detail-updated{font-size:11px}.detail-footer{border-top:1px solid #26343a;padding:12px 16px 16px}.detail-footer button{color:#052e16;cursor:pointer;background:#22c063;border:0;border-radius:999px;width:100%;padding:10px;font-weight:700}.message-action:focus-visible,.detail-header button:focus-visible,.detail-footer button:focus-visible{outline-offset:-3px;outline:2px solid #fff}@media (max-width:760px){.notification-demo{border-radius:12px;max-width:none;min-height:480px}.demo-chat{min-height:420px;padding:16px}.message{font-size:13.5px;line-height:1.55}}@media (prefers-reduced-motion:reduce){.message,.detail-panel,.detail-backdrop,.detail-layer{transition:none}}
