@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&family=Tilt+Neon&display=swap');

/* ═══ Temas ═══ Sedice usa variables: el Neón nocturno es el de siempre; el Cuaderno se elige en ⚙️ Configuración. */
:root {
  --bg:#0d0918; --surface-1:#130e22; --surface-2:#1c1631; --surface-3:#2a2342; --line:#3a2f57;
  --text:#f3eefe; --muted:#b9b0d4; --faint:#8a81a8;
  --accent:#ff3d9a; --accent-soft:#ffa3cf; --on-accent:#1a0714; --accent-deep:#5c1f45;
  --danger:#ff6b7d; --ok:#4dffa6; --cyan:#5ef2ff; --on-cyan:#06262a;
  --font-body:'Onest','Segoe UI',system-ui,sans-serif; --font-display:'Onest','Segoe UI',system-ui,sans-serif; --font-brand:'Tilt Neon','Onest',sans-serif;
  --glow:0 0 6px color-mix(in srgb, var(--accent) 90%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent);
  --page-bg:radial-gradient(520px 380px at 100% -60px, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(480px 400px at -10% 110%, color-mix(in srgb, #a78bfa 14%, transparent), transparent 70%), var(--bg);
  --radius:14px; --button-shadow:0 8px 26px color-mix(in srgb, var(--accent) 35%, transparent);
  color-scheme:dark;
}
:root[data-theme="cuaderno"] {
  --bg:#f4efe3; --surface-1:#faf7f0; --surface-2:#fffdf7; --surface-3:#ece5d3; --line:#cfc6b2;
  --text:#1f2a44; --muted:#4d5670; --faint:#7c8398;
  --accent:#2f6db5; --accent-soft:#2f6db5; --on-accent:#ffffff; --accent-deep:#fdeba0;
  --danger:#c0392b; --ok:#2e9d6b; --cyan:#2f9fb5; --on-cyan:#ffffff;
  --font-body:'Segoe UI',system-ui,sans-serif; --font-display:'Segoe Print','Comic Neue','Segoe UI',cursive; --font-brand:'Segoe Print','Comic Neue',cursive;
  --glow:none;
  --page-bg:linear-gradient(color-mix(in srgb, #7fb2d9 18%, transparent) 1px, transparent 1px) 0 0/20px 20px,
    linear-gradient(90deg, color-mix(in srgb, #7fb2d9 18%, transparent) 1px, transparent 1px) 0 0/20px 20px, var(--bg);
  --radius:8px; --button-shadow:3px 3px 0 var(--text);
  color-scheme:light;
}

:root{font-family:var(--font-body);color:var(--text);background:var(--bg);font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}[hidden]{display:none!important}.site-shell{min-height:100dvh;display:flex;flex-direction:column;max-width:1800px;margin:auto}.topbar{height:82px;flex:none;display:flex;align-items:center;padding:0 34px;border-bottom:1px solid var(--line);gap:13px}.brand-mark{width:38px;height:38px;background:var(--accent);border-radius:12px;display:grid;place-items:center;color:var(--on-accent);font-size:27px}.brand-copy{display:flex;flex-direction:column;line-height:1.03;gap:5px}.brand-copy strong{font-family:var(--font-display);font-size:17px;letter-spacing:.08em}.brand-copy span{font-size:10px;font-weight:700;letter-spacing:.21em;color:var(--muted)}.topbar-right{margin-left:auto;display:flex;align-items:center;gap:27px}.topbar-pill{font-size:11px;font-weight:700;letter-spacing:.16em;border:1px solid var(--surface-3);border-radius:20px;padding:9px 13px;color:var(--muted)}.live-indicator{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap}.live-indicator i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:7px;box-shadow:0 0 0 4px color-mix(in srgb, var(--ok) 13%, transparent)}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 215px;min-height:0;flex:1}.intro-panel{padding:48px 33px 25px 40px;display:flex;flex-direction:column;border-right:1px solid var(--line);overflow:hidden;background:radial-gradient(circle at 6% 85%,color-mix(in srgb, var(--accent-deep) 33%, transparent),transparent 42%),var(--surface-1)}.intro-top{display:flex;justify-content:space-between;align-items:center}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--accent)}.intro-star{font-size:38px;color:var(--accent);line-height:1}.intro-panel h1{font-family:var(--font-display);font-size:clamp(37px,3.2vw,55px);letter-spacing:-.065em;line-height:1.06;margin:55px 0 19px;font-weight:700}.accent{color:var(--accent)}.intro-panel>p{color:var(--muted);font-size:16px;line-height:1.65;max-width:360px;margin:0}.intro-card{margin-top:auto;display:flex;align-items:flex-start;gap:15px;border:1px solid var(--line);border-radius:18px;padding:19px;background:#ffffff08;max-width:390px}.card-symbol{display:grid;place-items:center;flex:none;width:32px;height:32px;background:color-mix(in srgb, var(--accent) 14%, transparent);color:var(--accent);border-radius:9px;font-size:20px}.intro-card div{display:flex;flex-direction:column;gap:5px}.intro-card strong{font-size:14px}.intro-card div span{font-size:13px;line-height:1.5;color:var(--muted)}.intro-footer{display:flex;justify-content:space-between;gap:10px;margin-top:27px;color:var(--faint);font-size:10px;font-weight:700;letter-spacing:.12em}.chat-panel{display:flex;flex-direction:column;min-width:0;min-height:calc(100dvh - 130px);background:var(--surface-1)}.chat-header{height:84px;flex:none;display:flex;justify-content:space-between;align-items:center;padding:0 26px;border-bottom:1px solid var(--surface-3)}.chat-title{display:flex;align-items:center;gap:13px}.chat-icon{display:grid;place-items:center;width:41px;height:41px;background:var(--surface-3);color:var(--accent);border-radius:13px;font-size:25px;font-weight:700}.chat-title div:last-child{display:flex;flex-direction:column;gap:4px}.chat-title strong{font-family:var(--font-display);font-size:19px}.chat-title span{color:var(--muted);font-size:13px}.member-count{display:flex;align-items:center;gap:11px;color:var(--muted);font-size:13px;white-space:nowrap}.member-avatars{display:flex;padding-left:8px}.member-avatars i{height:22px;width:22px;border-radius:50%;border:2px solid var(--surface-1);margin-left:-8px;background:#c674b0}.member-avatars i:nth-child(2){background:#8f7ddc}.member-avatars i:nth-child(3){background:#ee9b6c}.chat-body{display:flex;flex:1;flex-direction:column;min-height:0}.messages{flex:1;min-height:280px;height:0;overflow:auto;padding:26px;display:flex;flex-direction:column;gap:17px;scrollbar-color:var(--line) transparent}.empty-state{margin:auto;text-align:center;max-width:310px}.empty-icon{height:66px;width:66px;margin:0 auto 23px;border-radius:21px;background:color-mix(in srgb, var(--accent) 11%, transparent);color:var(--accent);display:grid;place-items:center;font-size:39px}.empty-state h2{font-family:var(--font-display);font-size:22px;letter-spacing:-.035em;margin:0 0 8px}.empty-state p{font-size:14px;color:var(--muted);line-height:1.55;margin:0}.message{max-width:min(80%,540px);align-self:flex-start;display:flex;gap:11px}.message.mine{align-self:flex-end;flex-direction:row-reverse}.avatar{flex:none;width:35px;height:35px;border-radius:11px;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;background:var(--surface-3);color:var(--text)}.message.mine .avatar{background:var(--accent-deep);color:var(--accent-soft)}.message-main{min-width:0}.message-meta{display:flex;gap:9px;align-items:baseline;margin-bottom:5px}.message.mine .message-meta{justify-content:flex-end}.message-meta strong{font-size:13px;color:var(--text)}.message.mine .message-meta strong{color:var(--accent-soft)}.message-meta time{font-size:11px;color:var(--faint)}.bubble{background:var(--surface-2);border:1px solid var(--surface-3);border-radius:3px 15px 15px 15px;padding:11px 14px;font-size:15px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}.message.mine .bubble{background:var(--accent-deep);border-color:var(--accent-deep);border-radius:15px 3px 15px 15px}.system-message{align-self:center;color:var(--faint);font-size:12px;text-align:center;padding:2px 8px}.date-label{align-self:center;font-size:11px;letter-spacing:.16em;font-weight:700;color:var(--faint);background:var(--surface-2);padding:7px 12px;border-radius:15px;margin-bottom:8px}.connection-notice{background:var(--accent-deep);color:var(--accent-soft);font-size:13px;padding:10px 24px}.composer{display:flex;align-items:stretch;gap:10px;padding:16px 23px 0}.composer-input-wrap{position:relative;flex:1;min-width:0}.composer input{width:100%;height:52px;padding:0 80px 0 17px;color:var(--text);border:1px solid var(--line);border-radius:13px;background:var(--surface-2);outline:none}.composer input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 11%, transparent)}.composer input::placeholder{color:var(--faint)}.char-count{position:absolute;right:14px;top:18px;font-size:11px;color:var(--faint)}.send-button{display:flex;align-items:center;gap:14px;border:none;border-radius:13px;background:var(--accent);color:var(--on-accent);font-weight:700;padding:0 19px}.send-button:hover:not(:disabled),.join-card button:hover:not(:disabled){background:var(--accent)}.send-button:disabled{opacity:.5}.send-button span:last-child{font-size:22px}.composer-note{color:var(--faint);font-size:11px;padding:10px 24px 16px}.people-panel{border-left:1px solid var(--line);background:var(--surface-1);display:flex;flex-direction:column;padding:28px 18px 24px}.people-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.16em;font-weight:700;color:var(--muted);padding:0 6px 19px}.people-head span:last-child{background:var(--surface-3);color:var(--accent-soft);border-radius:7px;padding:4px 6px;letter-spacing:0}.people-list{display:flex;flex-direction:column;gap:4px;overflow:auto}.person{display:flex;align-items:center;gap:9px;padding:9px 6px;font-size:13px;color:var(--text);min-width:0}.person i{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}.person span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.people-empty{padding:9px 6px;color:var(--faint);font-size:13px;line-height:1.5}.people-bottom{margin-top:auto;border-top:1px solid var(--surface-3);padding:24px 7px 0;color:var(--muted)}.sparkle{color:var(--accent);font-size:23px}.people-bottom p{font-size:12px;line-height:1.6}.people-bottom strong{color:var(--text)}.site-footer{height:48px;border-top:1px solid var(--line);padding:0 34px;display:flex;justify-content:space-between;align-items:center;color:var(--faint);font-size:10px;font-weight:700;letter-spacing:.12em}.site-footer span:last-child{font-weight:400;letter-spacing:0;font-size:12px}.join-overlay{position:fixed;inset:0;z-index:10;background:color-mix(in srgb, var(--bg) 85%, transparent);backdrop-filter:blur(9px);display:flex;align-items:center;justify-content:center;padding:20px}.join-card{position:relative;width:min(100%,480px);padding:37px;background:var(--surface-2);border:1px solid var(--line);border-radius:25px;box-shadow:0 35px 100px #0008;overflow:hidden}.join-decoration{position:absolute;right:-26px;top:-50px;font-size:170px;color:color-mix(in srgb, var(--accent) 7%, transparent);line-height:1}.join-card h2{position:relative;font-family:var(--font-display);font-size:clamp(30px,5vw,40px);letter-spacing:-.06em;line-height:1.12;margin:18px 0 12px}.join-card h2 em{font-style:normal;color:var(--accent)}.join-card>p{color:var(--muted);line-height:1.6;font-size:15px;margin:0 0 30px;max-width:370px}.join-card label{display:block;font-size:11px;letter-spacing:.18em;font-weight:700;color:var(--text);margin-bottom:10px}.name-input-wrap{height:54px;display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:0 15px;background:var(--surface-1);color:var(--accent)}.name-input-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent)}.name-input-wrap span{font-size:22px;font-weight:700}.name-input-wrap input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:16px}.name-input-wrap input::placeholder{color:var(--faint)}.name-helper{font-size:12px;color:var(--faint);margin-top:9px}.join-error{min-height:19px;margin:12px 0 8px;color:var(--danger);font-size:13px}.join-card button{height:53px;width:100%;border:0;border-radius:12px;background:var(--accent);color:var(--on-accent);font-weight:700;display:flex;align-items:center;justify-content:center;gap:14px}.join-card button:disabled{opacity:.6}.join-card button span{font-size:23px}.join-disclaimer{margin-top:22px;text-align:center;font-size:11px;color:var(--faint);line-height:1.5}
@media(max-width:1120px){.workspace{grid-template-columns:minmax(0,1fr)}.people-panel{display:none}.intro-panel{padding:35px 25px}.intro-panel h1{font-size:40px}}
@media(max-width:760px){.topbar{height:65px;padding:0 17px}.brand-mark{width:34px;height:34px}.brand-copy strong{font-size:14px}.brand-copy span{font-size:8px}.topbar-right{gap:8px}.topbar-pill{display:none}.live-indicator{font-size:12px}.workspace{display:flex;flex-direction:column}.intro-panel{display:none}.chat-panel{min-height:calc(100dvh - 65px);min-height:calc(100svh - 65px)}.chat-header{height:68px;padding:0 16px}.chat-title strong{font-size:17px}.chat-title span{font-size:12px}.member-avatars{display:none}.member-count{font-size:12px}.messages{padding:18px 14px;min-height:180px}.message{max-width:90%}.composer{padding:10px 12px 0;gap:7px}.composer input{height:50px;padding-left:12px}.send-button{padding:0 14px}.send-button span:first-child{display:none}.composer-note{padding:7px 13px 12px}.site-footer{display:none}.join-card{padding:28px 23px;border-radius:21px}.join-card>p{margin-bottom:24px}}
@media(max-height:650px) and (min-width:761px){.intro-panel{padding-top:25px}.intro-panel h1{margin-top:25px}.chat-panel{min-height:550px}}

/* Keep the app within the screen; scroll messages independently. */
html, body { height: 100%; overflow: hidden; }
.site-shell { height: 100dvh; min-height: 0; overflow: hidden; }
.workspace { flex: 1 1 0; min-height: 0; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
.chat-panel { flex: 1 1 0; min-height: 0; overflow: hidden; }
.chat-body { flex: 1 1 0; overflow: hidden; }
.messages { flex: 1 1 0; height: auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.messages > * { flex-shrink: 0; }
.composer, .composer-note, .connection-notice, .site-footer { flex-shrink: 0; }
.people-panel { min-height: 0; overflow: hidden; }
.people-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.people-head, .people-bottom, .person { flex-shrink: 0; }
.admin-button { border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); color: var(--accent-soft); padding: 6px 8px; line-height: 1; font-size: 14px; margin-left: 6px; }
.admin-button:hover { background: var(--line); }
.admin-card { max-width: 430px; }
.admin-card h2 { font-size: 30px; }
.admin-card p { margin-bottom: 20px; }
.modal-close { position: absolute; top: 14px; right: 16px; border: 0; background: transparent; color: var(--muted); font-size: 28px; line-height: 1; }
.admin-password { width: 100%; height: 53px; border: 1px solid var(--line); border-radius: 12px; padding: 0 15px; background: var(--surface-1); color: var(--text); outline: none; }
.admin-password:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent); }
.auth-tabs { display:flex; gap:8px; margin:0 0 22px; }
.auth-tabs button { background:var(--surface-3); color:var(--muted); height:42px; font-size:14px; }
.auth-tabs button[aria-pressed="true"] { background:var(--accent); color:var(--on-accent); }
.auth-field { margin-top:16px; }
.join-card .modal-close { width:32px; height:32px; background:transparent; color:var(--text); }
.admin-card { max-width:580px; }
.admin-toolbar, .admin-pagination { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:15px 0; }
.admin-toolbar button, .admin-pagination button, .account-row button { width:auto; height:auto; min-height:36px; padding:7px 12px; font-size:14px; }
.account-list { max-height:300px; overflow:auto; }
.account-row { display:flex; align-items:center; gap:10px; border-top:1px solid var(--line); padding:12px 0; }
.account-row div { flex:1; min-width:0; }
.account-row strong, .account-row span { display:block; overflow-wrap:anywhere; }
.account-row span { color:var(--muted); font-size:14px; margin-top:4px; }
.admin-card .danger-button { background:var(--accent-deep); color:var(--text); margin-top:16px; }
.admin-confirm { border:1px solid var(--accent-deep); padding:16px; border-radius:12px; margin-top:14px; }
.admin-confirm button { margin-top:10px; }
#adminStatus { font-size:14px; color:var(--accent-soft); }
.join-card { max-height: calc(100dvh - 40px); overflow-y: auto; }
@media (max-width: 760px) {
  .composer-note { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}

.message-menu-button { border:0; background:transparent; color:var(--faint); font-size:16px; line-height:1; padding:0 4px; border-radius:6px; }
.message-menu-button:hover { color:var(--accent-soft); background:var(--surface-3); }
.message-menu { position:fixed; z-index:20; display:flex; flex-direction:column; min-width:200px; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:6px; box-shadow:0 18px 50px #0008; }
.message-menu button, .message-menu p { border:0; background:transparent; color:var(--text); text-align:left; padding:10px 12px; border-radius:8px; font-size:14px; margin:0; }
.message-menu button:hover { background:var(--surface-3); }
.message-menu .danger { color:var(--danger); }
.message-menu p { color:var(--faint); }
.pin-warning { font-size:12px; line-height:1.5; color:var(--accent-soft); background:color-mix(in srgb, var(--accent-deep) 20%, transparent); border:1px solid var(--accent-deep); border-radius:10px; padding:10px 12px; margin:14px 0 0; }
.join-card .check-row { display:flex; gap:10px; align-items:flex-start; letter-spacing:0; font-weight:500; font-size:13px; line-height:1.45; margin:14px 0 0; color:var(--text); }
.check-row input { margin-top:2px; accent-color:var(--accent); }
.report-reasons { border:0; padding:0; margin:0 0 6px; }
.report-reasons .check-row { margin-top:10px; }
.admin-tabs { display:flex; gap:6px; margin:6px 0 4px; }
.join-card .admin-tabs button { height:38px; font-size:13px; background:var(--surface-3); color:var(--muted); }
.join-card .admin-tabs button[aria-pressed="true"] { background:var(--accent); color:var(--on-accent); }
#reportBadge:not(:empty) { background:var(--accent-deep); color:var(--text); border-radius:8px; padding:1px 6px; font-size:11px; }
.row-actions { display:flex; flex-direction:column; gap:6px; }
.join-card .row-actions button { width:auto; height:auto; min-height:32px; padding:6px 10px; font-size:13px; }
.join-card .row-actions .danger-small { background:var(--accent-deep); color:var(--text); }
.account-row .pin-line { font-family:var(--font-display); color:var(--accent-soft); letter-spacing:.2em; }
.account-row .detail-text { white-space:pre-wrap; color:var(--text); }
.admin-button.unlocked { background:var(--accent-deep); color:var(--text); }
#detailBody h3 { font-family:var(--font-display); margin:8px 0; }
#detailBody h4 { margin:18px 0 4px; font-size:12px; letter-spacing:.14em; color:var(--muted); }
.join-card #detailBack { width:auto; height:36px; padding:0 12px; background:var(--surface-3); color:var(--muted); }
.admin-confirm .admin-password { margin-top:4px; }

/* Fase B: reacciones y responder citando */
.menu-reactions { display:flex; gap:2px; padding:2px 2px 6px; border-bottom:1px solid var(--surface-3); margin-bottom:4px; }
.message-menu .menu-reactions button { padding:6px; font-size:20px; line-height:1; border-radius:8px; }
.quote { display:flex; flex-direction:column; gap:2px; width:100%; text-align:left; border:0; border-left:3px solid var(--accent); background:var(--surface-1); color:var(--muted); border-radius:8px; padding:6px 10px; margin-bottom:4px; font-size:13px; line-height:1.35; overflow:hidden; }
.quote strong { color:var(--accent-soft); font-size:12px; }
.quote span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.quote.deleted { font-style:italic; color:var(--faint); border-left-color:var(--line); }
.reactions { display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; }
.reactions:empty { display:none; }
.message.mine .reactions { justify-content:flex-end; }
.reaction-chip { border:1px solid var(--line); background:var(--surface-2); color:var(--text); border-radius:14px; padding:3px 9px; font-size:13px; }
.reaction-chip.mine { border-color:var(--accent); background:color-mix(in srgb, var(--accent-deep) 33%, transparent); }
.message.highlight .bubble { animation:highlight 1.6s ease; }
@keyframes highlight { 0%,40% { box-shadow:0 0 0 3px var(--accent); } 100% { box-shadow:0 0 0 0 transparent; } }
.reply-bar { display:flex; align-items:center; gap:10px; margin:10px 23px 0; padding:8px 12px; border-left:3px solid var(--accent); background:var(--surface-2); border-radius:10px; }
.reply-bar div { flex:1; min-width:0; display:flex; flex-direction:column; font-size:13px; }
.reply-bar strong { color:var(--accent-soft); font-size:12px; }
.reply-bar span { color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reply-bar button { border:0; background:transparent; color:var(--muted); font-size:16px; }
@media (max-width: 760px) { .reply-bar { margin:8px 12px 0; } }

/* Fase C: perfiles */
.name-button { border:0; background:transparent; padding:0; font-size:13px; font-weight:700; color:var(--text); cursor:pointer; }
.name-button:hover { text-decoration:underline; }
.message.mine .name-button { color:var(--accent-soft); }
.danger-title { color:var(--danger); }
.section-title { font-family:var(--font-display); font-size:20px; margin:30px 0 10px; padding-top:20px; border-top:1px solid var(--line); }
.picker { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.join-card .picker button { width:auto; height:auto; min-height:38px; min-width:38px; padding:6px 9px; background:var(--surface-3); color:var(--text); font-size:18px; font-weight:500; border:2px solid transparent; }
.join-card .picker button[aria-pressed="true"] { border-color:var(--accent); background:var(--accent-deep); }
.join-card .picker.colors button { min-width:30px; min-height:30px; border-radius:50%; padding:0; }
.join-card .picker.colors button[aria-pressed="true"] { border-color:var(--text); }
.join-card .picker.interests button { font-size:13px; }
.bio-input { height:auto; padding:10px 15px; resize:vertical; font:inherit; }
select.admin-password { appearance:auto; }
.profile-card { text-align:center; }
.profile-avatar { width:84px; height:84px; margin:4px auto 0; border-radius:26px; display:grid; place-items:center; font-size:44px; background:var(--surface-3); color:var(--text); font-family:var(--font-display); font-weight:700; }
.profile-card h2 { margin:14px 0 4px; }
.profile-card .profile-meta { color:var(--accent-soft); font-size:14px; margin:0 auto 12px; }
.profile-card .profile-bio { color:var(--text); white-space:pre-wrap; overflow-wrap:anywhere; margin:0 auto 12px; }
.profile-interests { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-bottom:14px; }
.profile-interests span { background:var(--surface-3); color:var(--text); border-radius:14px; padding:4px 10px; font-size:13px; }
.profile-instagram { display:inline-block; color:var(--accent-soft); margin-bottom:14px; }
.join-card .ghost-button { background:transparent; border:1px solid var(--line); color:var(--muted); margin-top:10px; }

/* Fase D: chats privados */
.dm-button { position:relative; }
.dm-badge { position:absolute; top:-6px; right:-6px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--accent); color:var(--on-accent); font-size:10px; font-weight:700; line-height:17px; }
.dm-card { max-width:560px; width:min(100%, 560px); }
.dm-list { display:flex; flex-direction:column; gap:4px; max-height:60dvh; overflow:auto; }
.join-card .dm-item { display:flex; align-items:center; gap:12px; width:100%; height:auto; padding:10px; background:transparent; color:var(--text); font-weight:400; text-align:left; border-radius:12px; }
.join-card .dm-item:hover { background:var(--surface-2); }
.dm-item.unread .dm-item-text span { color:var(--text); font-weight:600; }
.dm-avatar { flex:none; width:42px; height:42px; border-radius:13px; display:grid; place-items:center; font-size:22px; background:var(--surface-3); color:var(--text); }
.dm-item-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.dm-item-text span { color:var(--muted); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dm-item-meta { display:flex; flex-direction:column; align-items:flex-end; gap:4px; color:var(--faint); font-size:11px; }
.dm-item-meta b { background:var(--accent); color:var(--on-accent); border-radius:9px; padding:1px 7px; }
.dm-head { display:flex; align-items:center; gap:10px; padding-right:30px; margin-bottom:10px; }
.join-card .dm-head button { width:auto; height:36px; padding:0 12px; background:var(--surface-3); color:var(--text); }
.join-card .dm-head .name-button { background:transparent; font-size:18px; font-family:var(--font-display); color:var(--text); padding:0; }
.dm-request { border:1px solid var(--accent-deep); background:color-mix(in srgb, var(--accent-deep) 20%, transparent); border-radius:12px; padding:12px; margin-bottom:10px; }
.dm-request p { margin:0 0 10px; color:var(--text); }
.dm-request-actions { flex-direction:row; flex-wrap:wrap; }
.dm-messages { display:flex; flex-direction:column; gap:10px; height:min(50dvh, 420px); overflow:auto; padding:6px 2px; }
.dm-message { max-width:82%; align-self:flex-start; display:flex; flex-direction:column; }
.dm-message.mine { align-self:flex-end; align-items:flex-end; }
.dm-message.mine .bubble { background:var(--accent-deep); border-color:var(--accent-deep); border-radius:15px 3px 15px 15px; }
.dm-actions { display:flex; align-items:center; gap:4px; margin-top:3px; color:var(--faint); font-size:11px; }
.join-card .dm-actions button { width:auto; height:auto; padding:2px 6px; background:transparent; color:var(--faint); font-size:13px; font-weight:400; }
.dm-seen { text-align:right; font-size:11px; color:var(--faint); margin:2px 4px 0; }
.dm-reply-bar { margin:8px 0 0; }
.dm-composer { display:flex; gap:8px; margin-top:10px; }
.dm-composer input { flex:1; min-width:0; height:48px; padding:0 14px; color:var(--text); border:1px solid var(--line); border-radius:12px; background:var(--surface-2); outline:none; }
.join-card .dm-composer button { width:auto; height:48px; padding:0 16px; }

/* Fase E: Match */
.match-card { max-width:460px; }
.match-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.join-card .match-toolbar button { width:auto; height:36px; padding:0 12px; background:var(--surface-3); color:var(--text); font-size:13px; }
.match-card-box { min-height:320px; display:flex; align-items:center; justify-content:center; }
.swipe-card { width:100%; text-align:center; background:#171827; border:1px solid #4a3f58; border-radius:20px; padding:22px 18px; touch-action:pan-y; user-select:none; cursor:grab; transition:transform .15s ease, box-shadow .15s ease; }
.swipe-card[data-hint="like"] { box-shadow:0 0 0 3px #65dcae; }
.swipe-card[data-hint="pass"] { box-shadow:0 0 0 3px #ff9fa8; }
.swipe-card h3 { font-family:var(--font-display); font-size:24px; margin:12px 0 4px; }
.swipe-tools { display:flex; justify-content:center; gap:8px; margin-top:8px; }
.join-card .swipe-tools button { width:auto; height:30px; padding:0 10px; background:transparent; border:1px solid var(--line); color:var(--muted); font-size:12px; font-weight:500; }
.match-empty { color:var(--muted); text-align:center; line-height:1.6; }
.match-actions { display:flex; justify-content:center; gap:26px; margin:14px 0 4px; }
.join-card .match-actions button { width:64px; height:64px; border-radius:50%; font-size:26px; }
.join-card .match-actions #matchPass { background:var(--surface-3); color:var(--danger); }
.match-footer { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:12px; }
.join-card .match-footer button { width:auto; height:32px; padding:0 10px; background:transparent; color:var(--faint); font-size:12px; font-weight:500; }
.match-celebrate { position:absolute; inset:0; background:color-mix(in srgb, var(--surface-2) 95%, transparent); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:30px; text-align:center; z-index:2; }
.match-big { font-family:var(--font-display); font-size:34px; color:var(--accent); margin:0; }

/* F2 · fotos e imágenes */
.has-photo { overflow:hidden; padding:0; }
.has-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.avatar.has-photo, .dm-avatar.has-photo, .profile-avatar.has-photo { background:var(--surface-2); }
.photo-row { display:flex; gap:16px; align-items:center; margin:6px 0 4px; }
.photo-row .profile-avatar { margin:0; flex:none; }
.photo-actions { display:flex; flex-direction:column; gap:6px; flex:1; }
.photo-actions .ghost-button { margin-top:0 !important; }
.image-button, .join-card .image-button { flex:none; width:46px; height:46px; border-radius:14px; border:1px solid var(--surface-3); background:var(--surface-1); color:var(--text); font-size:20px; }
.image-button:disabled { opacity:.45; }
.join-card .dm-composer .image-button { width:42px; height:42px; background:var(--surface-1); color:var(--text); }
.message-image, .join-card .message-image { display:block; width:auto; height:auto; padding:0; margin:6px 0 4px; border:0; background:none; border-radius:14px; overflow:hidden; max-width:min(260px, 100%); cursor:zoom-in; }
.message-image img { display:block; width:100%; max-height:320px; object-fit:cover; }
.dm-message .message-image { max-width:220px; }
.dm-message.mine .message-image { margin-left:auto; }
.image-missing { font-size:13px; color:var(--muted); margin:6px 0; font-style:italic; }
.lightbox { position:fixed; inset:0; z-index:90; background:rgba(5,4,12,.92); display:grid; place-items:center; padding:16px; cursor:zoom-out; }
.lightbox[hidden] { display:none; }
.lightbox img { max-width:100%; max-height:100%; border-radius:12px; }

/* F3 · Match estilo Tinder */
.label-note { font-weight:400; letter-spacing:0; color:var(--faint); text-transform:none; }
.match-toolbar { margin-bottom:8px; }
.liked-by { margin:0; font-size:14px; font-weight:700; color:var(--accent); }
.match-filters { display:flex; gap:8px; margin-bottom:12px; }
.match-filters select { flex:1; min-width:0; height:36px; border-radius:10px; border:1px solid var(--line); background:var(--surface-1); color:var(--text); padding:0 8px; font:inherit; font-size:13px; }
.match-card-box { position:relative; height:min(58vh, 470px); min-height:340px; display:block; }
.match-card-box .match-empty { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:0 18px; }
.join-card .invite-button { width:auto; height:44px; padding:0 18px; }
.swipe-card { position:absolute; inset:0; padding:0; text-align:left; border-radius:22px; overflow:hidden; background:#241d36; border:0; box-shadow:0 18px 40px #0007; touch-action:none; user-select:none; transition:transform .25s ease, opacity .25s ease; --like:0; --pass:0; --super:0; }
.swipe-card.behind { transform:scale(.95) translateY(12px); opacity:.55; pointer-events:none; }
.swipe-photo { position:absolute; inset:0; display:grid; place-items:center; font-size:110px; border-radius:0; width:auto; height:auto; margin:0; color:#fff; }
.swipe-photo.has-photo img { width:100%; height:100%; object-fit:cover; }
.swipe-info { position:absolute; left:0; right:0; bottom:0; padding:80px 18px 16px; background:linear-gradient(transparent, #0b0816ee 45%); color:#fff; max-height:100%; overflow:auto; }
.swipe-info h3 { font-family:var(--font-display); font-size:28px; margin:0; letter-spacing:-.02em; text-shadow:0 2px 12px #0008; }
.swipe-meta { margin:2px 0 8px; font-size:14px; color:#e2dcf1; }
.swipe-chips { display:flex; flex-wrap:wrap; gap:6px; }
.swipe-chips span { font-size:12px; padding:4px 10px; border-radius:99px; background:#ffffff26; backdrop-filter:blur(6px); }
.swipe-hint { margin:8px 0 0; font-size:11px; color:#bdb6d2; }
.swipe-more { display:none; margin-top:10px; font-size:14px; line-height:1.5; }
.swipe-more p { margin:0 0 6px; }
.swipe-card.open .swipe-more { display:block; }
.swipe-card.open .swipe-hint { display:none; }
.swipe-card.open .swipe-info { top:0; padding-top:40px; background:#0b0816e6; }
.swipe-tools { display:flex; gap:8px; margin-top:10px; }
.join-card .swipe-tools button { width:auto; height:34px; padding:0 12px; background:#ffffff1f; color:var(--text); font-size:13px; font-weight:600; }
.stamps .stamp { position:absolute; top:26px; font:800 28px var(--font-display); letter-spacing:.06em; padding:2px 12px; border:4px solid; border-radius:10px; pointer-events:none; opacity:0; }
.stamp.like { left:18px; color:#4dffa6; transform:rotate(-14deg); opacity:var(--like); }
.stamp.pass { right:18px; color:#ff6b7d; transform:rotate(14deg); opacity:var(--pass); }
.stamp.super { left:50%; top:auto; bottom:42%; color:#5ef2ff; transform:translateX(-50%) rotate(-6deg); opacity:var(--super); }
.super-ribbon { position:absolute; top:14px; right:14px; background:#5ef2ff; color:#06262a; font-size:12px; font-weight:800; padding:6px 10px; border-radius:10px; box-shadow:0 0 14px #5ef2ffaa; }
.swipe-card.fly-like { transform:translateX(130%) rotate(18deg) !important; opacity:0; }
.swipe-card.fly-pass { transform:translateX(-130%) rotate(-18deg) !important; opacity:0; }
.swipe-card.fly-super { transform:translateY(-130%) !important; opacity:0; }
@media (prefers-reduced-motion: reduce) { .swipe-card { transition:none; } }
.match-toast { position:relative; z-index:2; margin:-54px auto 14px; width:max-content; max-width:90%; background:#0b0816ee; color:#fff; font-size:13px; padding:8px 14px; border-radius:99px; text-align:center; }
.match-actions { align-items:center; gap:14px; margin:14px 0 2px; }
.join-card .match-actions button { width:56px; height:56px; font-size:22px; background:var(--surface-1); border:1px solid var(--line); color:var(--text); }
.join-card .match-actions button.small { width:44px; height:44px; font-size:17px; }
.join-card .match-actions button.big { width:68px; height:68px; font-size:28px; background:var(--accent); border:0; box-shadow:0 0 22px color-mix(in srgb, var(--accent) 53%, transparent); }
.join-card .match-actions #matchSuper { border-color:color-mix(in srgb, var(--cyan) 53%, transparent); }
.join-card .match-actions button:disabled { opacity:.35; }
.likes-left { text-align:center; font-size:12px; color:var(--faint); margin:4px 0 0; }
.celebrate-pair { display:flex; justify-content:center; margin-bottom:6px; }
.celebrate-pair .profile-avatar { width:96px; height:96px; border-radius:50%; margin:0 -10px; border:3px solid var(--accent); box-shadow:0 0 22px color-mix(in srgb, var(--accent) 53%, transparent); font-size:46px; }
.icebreakers { display:flex; flex-direction:column; gap:8px; width:100%; max-width:320px; margin-bottom:6px; }
.join-card .icebreakers button { height:auto; min-height:40px; padding:8px 12px; background:var(--surface-3); color:var(--text); font-weight:500; font-size:14px; }
.match-celebrate { overflow:auto; padding:20px; }
.match-row-info { display:flex; align-items:center; gap:10px; }
.new-matches { margin-bottom:14px; }
.new-matches-title { margin:0 0 8px; font-size:12px; font-weight:700; letter-spacing:.12em; color:var(--accent); text-transform:uppercase; }
.new-matches-strip { display:flex; gap:12px; overflow-x:auto; padding-bottom:4px; }
.join-card .new-match { width:72px; height:auto; flex:none; flex-direction:column; gap:6px; background:none; color:var(--text); font-weight:500; font-size:12px; padding:0; }
.new-match .dm-avatar { width:58px; height:58px; border-radius:50%; border:2px solid var(--accent); font-size:28px; }
.new-match span:last-child { max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.join-card .new-match span, .join-card .dm-item span { font-size:inherit; }
.join-card .new-match .dm-avatar { font-size:26px; }
.join-card .match-toolbar button { white-space:nowrap; flex:none; }

/* ═══ F4 · Diseño Sedice ═══ La firma: el logo de neón (tubo que parpadea). Lo demás, calma. */
body, .site-shell { background:var(--page-bg); }
.topbar, .chat-panel, .people-panel, .chat-header, .site-footer { background:transparent; }
.topbar { backdrop-filter:blur(10px); }
.brand-mark { background:transparent; border:2px solid var(--accent); border-radius:14px 14px 14px 4px; box-shadow:var(--glow), inset 0 0 10px color-mix(in srgb, var(--accent) 30%, transparent); font-size:18px; }
.brand-word { font-family:var(--font-brand); font-weight:400; font-size:24px; letter-spacing:.01em; color:color-mix(in srgb, var(--accent) 25%, #fff); text-shadow:var(--glow); }
.brand-copy strong.brand-word { font-family:var(--font-brand); font-size:24px; letter-spacing:.01em; }
@media (prefers-reduced-motion: no-preference) { .brand-word, .brand-mark { animation:tubo 7s infinite; } }
@keyframes tubo { 0%,92%,100% { opacity:1 } 93% { opacity:.55 } 94% { opacity:1 } 95.5% { opacity:.7 } }
.live-indicator i { background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
.chat-title strong { font-weight:800; letter-spacing:-.02em; font-size:22px; }
.chat-icon { display:none; }
.bubble { background:var(--surface-2); border-color:var(--line); }
.join-card { background:var(--surface-2); border-color:var(--line); border-radius:24px; }
.join-card button, .send-button { box-shadow:var(--button-shadow); }
.join-card .ghost-button, .join-card .picker button, .join-card .auth-tabs button, .join-card .admin-tabs button, .join-card .modal-close, .join-card .match-actions button, .join-card .row-actions button { box-shadow:none; }
.join-logo { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.join-logo .brand-mark { width:42px; height:38px; display:grid; place-items:center; font-size:20px; }
.join-logo .brand-word { font-size:30px; }
.admin-button { background:var(--surface-2); border-color:var(--line); color:var(--text); border-radius:12px; min-width:38px; min-height:38px; font-size:17px; }
.theme-picker { display:flex; gap:10px; }
.join-card .theme-picker button { flex:1; height:auto; padding:12px; flex-direction:column; gap:8px; background:var(--surface-3); color:var(--text); font-weight:600; border:2px solid transparent; box-shadow:none; }
.join-card .theme-picker button[aria-pressed="true"] { border-color:var(--accent); }
.join-card .theme-picker .theme-swatch { width:100%; height:42px; border-radius:10px; font-size:inherit; }
.theme-swatch.neon { background:radial-gradient(circle at 80% 20%, #ff3d9a88, transparent 60%), #130e22; box-shadow:inset 0 0 0 2px #ff3d9a; }
.theme-swatch.cuaderno { background:linear-gradient(#7fb2d933 1px, transparent 1px) 0 0/10px 10px, linear-gradient(90deg, #7fb2d933 1px, transparent 1px) 0 0/10px 10px, #faf7f0; box-shadow:inset 0 0 0 2px #1f2a44; }
@media (max-width:760px) {
  .brand-copy span { display:none; }
  .chat-header { height:58px; }
  .member-count { gap:6px; }
  .member-count .admin-button { margin-left:0; }
}

/* Cuaderno: papel, tinta y sellos. Sin brillos. */
:root[data-theme="cuaderno"] .brand-mark { border-color:var(--text); border-radius:50%; background:#fdeba0; box-shadow:2px 2px 0 var(--text); animation:none; }
:root[data-theme="cuaderno"] .brand-word { color:var(--text); text-shadow:none; animation:none; }
:root[data-theme="cuaderno"] .join-card { border:2px solid var(--text); border-radius:6px; box-shadow:6px 6px 0 color-mix(in srgb, var(--text) 25%, transparent); }
:root[data-theme="cuaderno"] .join-card button:not(.ghost-button):not(.modal-close), :root[data-theme="cuaderno"] .send-button { border:2px solid var(--text); }
:root[data-theme="cuaderno"] .join-card .picker button, :root[data-theme="cuaderno"] .join-card .auth-tabs button { border:2px solid var(--line); }
:root[data-theme="cuaderno"] .bubble { border:1.5px solid var(--line); box-shadow:2px 2px 0 color-mix(in srgb, var(--text) 10%, transparent); }
:root[data-theme="cuaderno"] .message.mine .bubble { background:var(--accent-deep); border-color:#e2c65c; color:var(--text); }
:root[data-theme="cuaderno"] .chat-title strong, :root[data-theme="cuaderno"] .join-card h2 { font-family:var(--font-display); font-weight:700; }
:root[data-theme="cuaderno"] .eyebrow { font-family:ui-monospace, Consolas, monospace; }
:root[data-theme="cuaderno"] .join-overlay { background:color-mix(in srgb, var(--bg) 80%, transparent); }
:root[data-theme="cuaderno"] .live-indicator i { box-shadow:none; }
:root[data-theme="cuaderno"] .join-card .match-actions button.big { box-shadow:3px 3px 0 var(--text); border:2px solid var(--text); }
.join-card .danger-button, .admin-card .danger-button { background:color-mix(in srgb, var(--danger) 80%, #000); color:#fff; }
.join-card .theme-picker button:hover:not(:disabled) { background:var(--surface-3); }
:root[data-theme="cuaderno"] .join-card .danger-button { background:var(--danger); }

/* ═══ F5 · Crecimiento ═══ La confesión del día es un letrero de neón. */
.featured { flex:none; display:flex; flex-direction:column; gap:3px; text-align:left; margin:12px 16px 0; padding:12px 16px; border-radius:18px; border:2px solid color-mix(in srgb, var(--accent) 80%, transparent); background:color-mix(in srgb, var(--accent) 6%, transparent); box-shadow:var(--glow), inset 0 0 22px color-mix(in srgb, var(--accent) 18%, transparent); color:var(--text); cursor:pointer; font:inherit; }
.featured[hidden] { display:none; }
.featured-title { font-family:var(--font-brand); font-size:16px; color:color-mix(in srgb, var(--accent) 25%, #fff); text-shadow:var(--glow); }
.featured-text { font-size:14px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.featured-meta { font-size:12px; color:var(--muted); }
:root[data-theme="cuaderno"] .featured { background:#fdeba0; border:2px solid var(--text); border-radius:4px; box-shadow:4px 4px 0 color-mix(in srgb, var(--text) 25%, transparent); transform:rotate(-.6deg); }
:root[data-theme="cuaderno"] .featured-title { color:var(--text); text-shadow:none; font-family:ui-monospace, Consolas, monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.link-button { border:0; background:none; color:var(--accent-soft); font:inherit; font-weight:700; padding:0; cursor:pointer; text-decoration:underline; }
.switch-row { display:flex !important; align-items:center; justify-content:space-between; gap:12px; letter-spacing:0 !important; font-size:14px !important; font-weight:500 !important; text-transform:none; }
.switch-row input { appearance:none; width:48px; height:28px; flex:none; border-radius:99px; background:var(--surface-3); border:1px solid var(--line); position:relative; cursor:pointer; transition:background .2s; }
.switch-row input::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--muted); transition:transform .2s, background .2s; }
.switch-row input:checked { background:var(--accent); }
.switch-row input:checked::after { transform:translateX(20px); background:#fff; }
.switch-row input:disabled { opacity:.45; }