/* ==========================================================================
   Organizador · Gestión y Servicios (Fase 5): Mi perfil, Mi equipo, Ayuda, Tricket Ads
   ========================================================================== */

/* ---------- Botones y campos compartidos ---------- */
.pf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap; border: 0; padding: 11px 20px; border-radius: 99px;
  background: var(--lime); color: var(--ink); font: 700 14px var(--font-ui); cursor: pointer;
  transition: transform .18s var(--spring), box-shadow .2s ease, background-color .2s ease;
}
.pf-btn:not(.static):not(:disabled):hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(30, 30, 255, .2); }
.pf-btn:not(.static):not(:disabled):active { transform: translateY(-1px); }
.pf-btn:disabled { opacity: .6; cursor: default; }
.pf-btn.static { cursor: default; }
.pf-btn.lime { background: var(--lime); color: var(--ink); }
.pf-btn.blue { background: var(--blue); color: #fff; }
.pf-btn.line { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px #D6D6E6; }
.pf-btn.big { padding: 14px 26px; font-size: 15px; }
.pf-btn.sm { padding: 9px 14px; font-size: 13px; }
.pf-btn.pf-sq { border-radius: 13px; padding: 0 16px; font-size: 13px; }
.pf-lnk { border: 0; background: transparent; padding: 0; font: 700 13px var(--font-ui); color: var(--blue); cursor: pointer; transition: transform .18s var(--spring); }
.pf-lnk:hover { transform: translateY(-2px); }

.pf-field { display: flex; flex-direction: column; gap: 6px; font: 700 12px var(--font-ui); color: var(--body-2); min-width: 0; text-align: left; }
.pf-in {
  width: 100%; min-width: 0; padding: 11px 13px; border-radius: 13px; border: 1.5px solid var(--input-border);
  background: #fff; font: 600 14px var(--font-ui); color: var(--ink); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.pf-in:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(30, 30, 255, .1); }
textarea.pf-in { font-weight: 500; resize: vertical; line-height: 1.45; }
.pf-slug { display: flex; border: 1.5px solid var(--input-border); border-radius: 13px; overflow: hidden; background: var(--paper); }
.pf-slug:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(30, 30, 255, .1); }
.pf-slug span { padding: 11px 4px 11px 13px; font: 700 13px var(--font-mono); color: var(--muted); }
.pf-slug input { flex: 1; min-width: 0; border: 0; padding: 11px 10px 11px 0; background: transparent; font: 700 13px var(--font-mono); color: var(--ink); outline: none; }
.pf-g2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.drag { outline: 3px dashed var(--blue); outline-offset: 3px; }

/* ---------- Mi perfil · elegir tipo ---------- */
.pf-ask {
  display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 36px; border-radius: 24px;
  background: #fff; text-align: center; transition: box-shadow .25s ease;
}
.pf-ask:hover { box-shadow: var(--shadow-card); }
.pf-ask-h { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pf-ask-h .ti { font: 800 34px/1.05 var(--font-display); letter-spacing: -.02em; }
.pf-ask-h .su { max-width: 520px; font: 500 15px/1.5 var(--font-ui); color: var(--muted); }
.pf-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; width: 100%; max-width: 720px; }
.pf-type {
  display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 24px; border: 2px solid;
  text-align: left; color: var(--ink); cursor: pointer;
  transition: transform .18s var(--spring), box-shadow .2s ease, background-color .2s ease, border-color .2s;
}
.pf-type:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(30, 30, 255, .16); }
.pf-type .ic { width: 52px; height: 52px; border-radius: 16px; background: var(--blue); display: grid; place-items: center; }
.pf-type .t { font: 800 22px var(--font-display); }
.pf-type .d { font: 500 14px/1.45 var(--font-ui); color: var(--body-2); }
.pf-setup { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 720px; padding-top: 22px; border-top: 1px solid var(--line-soft); text-align: left; }
.pf-h { font: 800 22px var(--font-display); }
.pf-sbox { border-radius: 22px; overflow: hidden; border: 1.5px solid #ECECF3; }
.pf-scover { position: relative; display: block; height: 130px; cursor: pointer; transition: box-shadow .2s ease; }
.pf-scover span { position: absolute; right: 12px; top: 12px; padding: 6px 10px; border-radius: 99px; background: rgba(11, 11, 38, .55); color: #fff; font: 700 11px var(--font-ui); }
.pf-srow { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 14px; margin-top: -40px; padding: 0 18px 16px; }
.pf-sav {
  width: 88px; height: 88px; border-radius: 26px; border: 5px solid #fff; flex: none; cursor: pointer;
  display: grid; place-items: center; font: 800 30px var(--font-display); color: var(--blue);
  box-shadow: 0 8px 20px rgba(11, 11, 38, .15); transition: transform .2s var(--spring), box-shadow .2s ease;
}
.pf-sav:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(30, 30, 255, .18); }
.pf-shint { padding-bottom: 6px; font: 600 12px var(--font-ui); color: var(--muted); }
.pf-acts { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

/* ---------- Mi perfil · perfil creado ---------- */
.pf-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pf-tl { display: flex; align-items: center; gap: 10px; }
.pf-chip { padding: 6px 12px; border-radius: 99px; background: var(--blue); color: #fff; font: 700 12px var(--font-ui); }
.pf-card { border-radius: 28px; background: #fff; overflow: hidden; }
.pf-cover { position: relative; display: block; height: 220px; cursor: pointer; transition: box-shadow .2s ease; }
.pf-cbtn { position: absolute; right: 16px; top: 16px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 99px; background: rgba(11, 11, 38, .55); color: #fff; font: 700 12px var(--font-ui); backdrop-filter: blur(6px); transition: transform .2s var(--spring); }
.pf-cover:hover .pf-cbtn { transform: translateY(-2px); }
.pf-body { display: flex; flex-direction: column; gap: 18px; padding: 0 32px 32px; }
.pf-head { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-top: -56px; }
.pf-av {
  position: relative; z-index: 3; width: 124px; height: 124px; border-radius: 36px; border: 6px solid #fff; flex: none; cursor: pointer;
  display: grid; place-items: center; font: 800 44px var(--font-display); color: var(--blue);
  box-shadow: 0 10px 30px rgba(11, 11, 38, .18); transition: transform .2s var(--spring), box-shadow .2s ease;
}
.pf-av:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(30, 30, 255, .18); }
.pf-av .ed { position: absolute; right: -6px; bottom: -6px; width: 36px; height: 36px; border-radius: 50%; background: var(--blue); border: 3px solid #fff; display: grid; place-items: center; }
.pf-id { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 4px; padding-bottom: 6px; }
.pf-id .r { display: flex; align-items: center; gap: 8px; min-width: 0; text-align: left; }
.pf-id .nm { font: 800 32px/1 var(--font-display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.pf-id .ck { width: 22px; height: 22px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font: 800 12px var(--font-ui); flex: none; }
.pf-id .sub { font: 600 13px var(--font-ui); color: var(--muted); overflow-wrap: anywhere; }
.pf-hb { display: flex; gap: 8px; padding-bottom: 6px; }
.pf-stats { display: flex; gap: 28px; flex-wrap: wrap; }
.pf-stats div { display: flex; flex-direction: column; }
.pf-stats b { font: 800 24px var(--font-display); }
.pf-stats span { font: 600 12px var(--font-ui); color: var(--muted); }
.pf-bio { margin: 0; max-width: 720px; font: 500 15px/1.55 var(--font-ui); color: var(--body-2); white-space: pre-line; }
.pf-bio:empty { display: none; }
.pf-sec { font: 700 17px var(--font-ui); }
.pf-vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.pf-vid { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: var(--ink); }
.pf-vid video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-vid a { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #fff; text-decoration: none; background: repeating-linear-gradient(135deg, #1E1EFF 0 12px, #2A2AFF 12px 24px); }
.pf-vid .pl { width: 52px; height: 52px; border-radius: 50%; background: var(--lime); display: grid; place-items: center; transition: transform .2s var(--spring); }
.pf-vid a:hover .pl { transform: scale(1.08); }
.pf-vid .tt { max-width: 85%; font: 700 12px var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-evs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.pf-ev { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; border: 1.5px solid #ECECF3; cursor: pointer; transition: transform .2s var(--spring), box-shadow .2s ease; }
.pf-ev:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.pf-ev .th { height: 120px; }
.pf-ev .bd { display: flex; flex-direction: column; gap: 6px; padding: 14px; }
.pf-ev .nm { font: 800 17px/1.15 var(--font-display); }
.pf-ev .mt { font: 500 12px var(--font-ui); color: var(--muted); }
.pf-ev .fr { align-self: flex-start; padding: 5px 10px; border-radius: 99px; background: var(--lime); font: 700 12px var(--font-ui); }
.pf-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 14px; align-items: start; }
.pf-box { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 24px; background: #fff; transition: box-shadow .25s ease; }
.pf-box:hover { box-shadow: var(--shadow-card); }
.pf-vh { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pf-vh label { cursor: pointer; }
.pf-vadd { display: flex; gap: 8px; }
.pf-vadd .pf-in { flex: 1; }
.pf-vadd .pf-btn { flex: none; }
.pf-vdrop { padding: 16px; border-radius: 16px; border: 2px dashed #C8C8E0; background: #FAFAFD; text-align: center; font: 600 13px var(--font-ui); color: var(--muted); cursor: pointer; transition: transform .2s var(--spring), box-shadow .2s ease; }
.pf-vdrop:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(30, 30, 255, .18); }
.pf-vrow { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.pf-vrow .ic { width: 34px; height: 34px; border-radius: 10px; background: var(--lavender); display: grid; place-items: center; flex: none; }
.pf-vrow .tt { flex: 1; min-width: 0; font: 600 13px var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-del { width: 30px; height: 30px; border-radius: 9px; border: 0; background: var(--danger-bg); color: var(--danger); font: 800 14px var(--font-ui); cursor: pointer; transition: transform .18s var(--spring); }
.pf-del:hover { transform: translateY(-2px); }

@media (max-width: 640px) {
  .pf-ask { padding: 24px 18px; }
  .pf-ask-h .ti { font-size: 26px; }
  .pf-g2 { grid-template-columns: minmax(0, 1fr); }
  .pf-cover { height: 150px; }
  .pf-body { padding: 0 18px 22px; }
  .pf-head { margin-top: -44px; gap: 14px; }
  .pf-av { width: 96px; height: 96px; border-radius: 28px; font-size: 34px; }
  .pf-id { min-width: 0; flex-basis: 100%; }
  .pf-id .nm { font-size: 26px; }
  .pf-hb { flex-basis: 100%; }
  .pf-hb .pf-btn { flex: 1; }
  .pf-cbtn { font-size: 11px; right: 10px; top: 10px; }
  .pf-box { padding: 18px; }
}

/* ---------- Mi equipo ---------- */
.tm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 14px; align-items: start; }
.tm-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tm-box { padding: 24px; border-radius: 24px; background: #fff; display: flex; flex-direction: column; gap: 12px; min-width: 0; transition: box-shadow .25s ease, transform .25s ease; }
.tm-box:hover { box-shadow: 0 20px 44px rgba(30, 30, 255, .12); transform: translateY(-4px); }
.tm-box.dark { background: var(--ink); color: #fff; }
.tm-bh { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.tm-t { font: 700 17px var(--font-ui); }
.tm-t.sm { font-size: 16px; }
.tm-cnt { font: 600 12px var(--font-ui); color: var(--muted); }
.tm-box.dark .tm-cnt { color: #8A8AB0; }
.tm-chip { white-space: nowrap; padding: 3px 9px; border-radius: 99px; font: 700 11px var(--font-ui); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tm-you { padding: 3px 8px; border-radius: 99px; background: var(--lime); font: 700 11px var(--font-ui); }

.tm-mrow { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid #F0F0F6; border-radius: 12px; transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.tm-mrow:hover { background: #F7F7FF; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(30, 30, 255, .1); }
.tm-av { position: relative; width: 42px; height: 42px; border-radius: 14px; border: 0; color: var(--blue); font: 800 14px var(--font-ui); cursor: pointer; transition: transform .18s var(--spring), box-shadow .2s ease; }
.tm-av .dot { position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid #fff; }
.tm-mid { border: 0; background: transparent; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 4px; min-width: 0; color: var(--ink); cursor: pointer; }
.tm-mid .r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tm-mid .nm { font: 700 14px var(--font-ui); }
.tm-mid .sub { font: 500 12px var(--font-ui); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tm-acts { display: flex; gap: 6px; }
.tm-ib { width: 36px; height: 36px; border-radius: 12px; border: 1.5px solid #DDDDEA; background: #fff; display: grid; place-items: center; cursor: pointer; transition: transform .18s var(--spring), box-shadow .2s ease; }
.tm-ib.wa { border: 0; background: #E7F9EE; }
.tm-av:hover, .tm-ib:hover, .tm-pill:hover, .tm-cta:not(:disabled):hover, .tm-bct:hover, .tm-sq:hover, .tm-sb:hover, .tm-cell:hover, .tm-evb:hover, .tm-evo:hover, .tm-evdone:hover, .tm-tpl:hover, .tm-prio button:hover, .tm-on:hover, .tm-x:hover, .tm-del:hover, .tm-line:hover, .tm-save:not(:disabled):hover, .tm-seg button:hover, .tm-mav:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(30, 30, 255, .2); }

.tm-g2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.tm-field { display: flex; flex-direction: column; gap: 6px; font: 700 12px var(--font-ui); color: var(--body-2); min-width: 0; }
.tm-lbl { font: 700 12px var(--font-ui); color: var(--body-2); }
.tm-in { width: 100%; min-width: 0; padding: 11px 13px; border-radius: 13px; border: 1.5px solid #DDDDEA; background: #fff; font: 600 14px var(--font-ui); color: var(--ink); outline: none; transition: border-color .15s, box-shadow .15s; }
.tm-in:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(30, 30, 255, .1); }
.tm-in.tm-mono { font-family: var(--font-mono); font-size: 13px; }
textarea.tm-in { font-weight: 500; resize: vertical; line-height: 1.45; }
select.tm-in { cursor: pointer; }
select.tm-in:disabled { background: var(--paper); color: var(--muted); cursor: default; }
.tm-evw { position: relative; }
.tm-evb { padding: 11px 13px; border-radius: 13px; border: 1.5px solid #DDDDEA; background: #fff; width: 100%; min-width: 0; display: flex; align-items: center; gap: 8px; text-align: left; font: 600 14px var(--font-ui); color: var(--ink); cursor: pointer; transition: transform .18s var(--spring), box-shadow .2s ease, border-color .2s; }
.tm-evb.open { border-color: var(--blue); }
.tm-evb .lb { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-evb .ar { font: 800 13px var(--font-ui); color: var(--blue); transform: rotate(90deg); transition: transform .2s ease; }
.tm-evb.open .ar { transform: rotate(-90deg); }
.tm-evm { position: absolute; left: 0; right: 0; top: 100%; margin-top: 6px; z-index: 5; background: #fff; border-radius: 16px; box-shadow: 0 16px 40px rgba(11, 11, 38, .2); border: 1px solid #ECECF3; padding: 6px; display: flex; flex-direction: column; max-height: 300px; overflow: auto; }
.tm-evo { border: 0; background: transparent; padding: 10px; border-radius: 10px; display: flex; align-items: center; gap: 10px; text-align: left; font: 600 13px var(--font-ui); color: var(--ink); cursor: pointer; transition: transform .18s var(--spring), box-shadow .2s ease, background-color .2s ease; }
.tm-evo.on { background: #ECECFF; }
.tm-evo .ck { width: 20px; height: 20px; border-radius: 6px; border: 2px solid #C8C8D8; background: #fff; color: #fff; display: grid; place-items: center; font: 800 11px var(--font-ui); flex: none; }
.tm-evo.on .ck { border-color: var(--blue); background: var(--blue); }
.tm-evdone { margin-top: 4px; border: 0; background: var(--blue); color: #fff; padding: 10px; border-radius: 10px; font: 700 13px var(--font-ui); cursor: pointer; transition: transform .18s var(--spring), box-shadow .2s ease; }
.tm-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.tm-pill { white-space: nowrap; border: 1.5px solid #DDDDEA; background: #fff; color: var(--ink); padding: 7px 12px; border-radius: 99px; font: 700 12px var(--font-ui); cursor: pointer; transition: transform .18s var(--spring), box-shadow .2s ease, background-color .2s ease; }
.tm-pill.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.tm-cta { border: 0; background: var(--lime); color: var(--ink); padding: 13px; border-radius: 99px; font: 700 14px var(--font-ui); display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: transform .18s var(--spring), box-shadow .2s ease, background-color .2s ease; }
.tm-cta:disabled { opacity: .6; cursor: default; }
.tm-box.dark .tm-cta { padding: 12px; }
.tm-bct { white-space: nowrap; border: 0; background: #1E1E48; color: #fff; padding: 7px 12px; border-radius: 99px; font: 700 12px var(--font-ui); cursor: pointer; transition: transform .18s var(--spring), box-shadow .2s ease; }
.tm-bct.on { background: var(--lime); color: var(--ink); }
.tm-bctx { padding: 12px 14px; border-radius: 14px; border: 0; background: #16163A; color: #fff; font: 500 14px/1.5 var(--font-ui); resize: vertical; outline: none; }
.tm-bctx::placeholder { color: #8A8AB0; }

.tm-roles { gap: 4px; }
.tm-rtop { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.tm-rtl { display: flex; flex-direction: column; gap: 2px; }
.tm-radd { display: flex; gap: 6px; }
.tm-radd .tm-in { width: 200px; }
.tm-sq { white-space: nowrap; border: 0; background: var(--blue); color: #fff; padding: 0 16px; border-radius: 13px; font: 700 13px var(--font-ui); cursor: pointer; transition: transform .18s var(--spring), box-shadow .2s ease; }
.tm-scroll { overflow-x: auto; padding: 4px 2px 6px; margin: 0 -2px; }
.tm-phead, .tm-prow { display: grid; gap: 8px; }
.tm-phead { padding-bottom: 10px; align-items: end; }
.tm-phead > .lb { font: 700 12px var(--font-ui); color: var(--muted); }
.tm-rh { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.tm-rin { width: 100%; padding: 5px 8px; border-radius: 9px; border: 1.5px solid var(--blue); font: 700 12px var(--font-ui); outline: none; text-align: center; }
.tm-rha { display: flex; gap: 4px; align-items: center; }
.tm-rha .cnt { font: 700 10px var(--font-mono); color: #8A8AA0; }
.tm-sb { width: 24px; height: 24px; border-radius: 8px; border: 1px solid #E4E4EE; background: #fff; display: grid; place-items: center; padding: 0; cursor: pointer; transition: transform .18s var(--spring), box-shadow .2s ease; }
.tm-sb.del { border: 0; background: #FFE0EF; }
.tm-prow { align-items: center; padding: 8px 0; border-top: 1px solid #F0F0F6; border-radius: 12px; transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.tm-prow:hover { background: #F7F7FF; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(30, 30, 255, .1); }
.tm-prow > .lb { font: 600 14px var(--font-ui); padding-left: 4px; }
.tm-cell { justify-self: center; width: 28px; height: 28px; border-radius: 9px; border: 1.5px solid #DDDDEA; background: #fff; color: var(--lime); font: 800 13px var(--font-ui); cursor: pointer; transition: transform .18s var(--spring), box-shadow .2s ease, background-color .2s ease; }
.tm-cell.on { background: var(--blue); border-color: var(--blue); }

.tm-seg { display: flex; gap: 4px; padding: 4px; background: var(--paper); border-radius: 99px; overflow-x: auto; max-width: 100%; }
.tm-seg button { white-space: nowrap; border: 0; padding: 6px 11px; border-radius: 99px; font: 700 12px var(--font-ui); background: transparent; color: var(--body-2); cursor: pointer; transition: transform .18s var(--spring), box-shadow .2s ease, background-color .2s ease; }
.tm-seg button.on { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(11, 11, 38, .08); }
.tm-frow, .tm-lrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid #F0F0F6; border-radius: 12px; transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.tm-lrow { gap: 10px; padding: 9px 0; }
.tm-frow:hover, .tm-lrow:hover { background: #F7F7FF; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(30, 30, 255, .1); }
.tm-frow .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tm-frow .tx b { font: 700 13px var(--font-ui); }
.tm-frow .tx span { font: 500 13px var(--font-ui); color: var(--body-2); }
.tm-lrow .tx { font: 500 13px var(--font-ui); min-width: 0; }
.tm-frow .wh, .tm-lrow .wh { font: 600 11px var(--font-mono); color: #8A8AA0; white-space: nowrap; }
.tm-nolog { font: 500 13px var(--font-ui); color: #8A8AA0; padding: 10px 0; }

/* Modal de miembro y confirmación */
.tm-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(11, 11, 38, .55); display: flex; align-items: center; justify-content: center; padding: 24px; animation: tmFade .2s ease; }
.tm-scrim.conf { z-index: 80; background: rgba(11, 11, 38, .5); }
@keyframes tmFade { from { opacity: 0; } }
@keyframes tmPop { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.tm-modal { width: 100%; max-width: 920px; max-height: 92vh; overflow: auto; background: var(--paper); border-radius: 28px; display: flex; flex-direction: column; animation: tmPop .25s var(--spring); }
.tm-mh { padding: 18px 24px; background: #fff; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid #E4E4EE; flex-wrap: wrap; }
.tm-mav { position: relative; width: 56px; height: 56px; border-radius: 18px; color: var(--blue); display: grid; place-items: center; font: 800 18px var(--font-ui); cursor: pointer; flex: none; transition: transform .2s var(--spring), box-shadow .2s ease; }
.tm-mav .plus { position: absolute; right: -5px; bottom: -5px; width: 24px; height: 24px; border-radius: 50%; background: var(--blue); border: 2px solid #fff; display: grid; place-items: center; }
.tm-mid2 { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 160px; }
.tm-mid2 .nm { font: 800 22px/1 var(--font-display); overflow-wrap: anywhere; }
.tm-mid2 .r { display: flex; gap: 6px; align-items: center; }
.tm-mid2 .dr { font: 600 12px var(--font-ui); color: var(--muted); }
.tm-on { white-space: nowrap; border: 0; padding: 9px 14px; border-radius: 99px; font: 700 13px var(--font-ui); display: flex; align-items: center; gap: 8px; cursor: pointer; transition: transform .18s var(--spring), box-shadow .2s ease; }
.tm-on span { width: 8px; height: 8px; border-radius: 50%; }
.tm-x { border: 0; background: var(--paper); width: 40px; height: 40px; border-radius: 50%; font: 700 18px var(--font-ui); cursor: pointer; transition: transform .18s var(--spring), box-shadow .2s ease; }
.tm-mb { padding: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 14px; align-items: start; }
.tm-mb .tm-box { gap: 12px; }
.tm-tpls { display: flex; flex-direction: column; gap: 6px; }
.tm-tpl { text-align: left; border: 1px dashed #C8C8E0; background: #FAFAFD; padding: 8px 10px; border-radius: 10px; font: 600 12px var(--font-ui); color: var(--body-2); cursor: pointer; transition: transform .18s var(--spring), box-shadow .2s ease; }
.tm-prio { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tm-prio span { font: 700 12px var(--font-ui); color: var(--body-2); margin-right: 4px; }
.tm-prio button { white-space: nowrap; border: 0; padding: 6px 12px; border-radius: 99px; font: 700 12px var(--font-ui); cursor: pointer; transition: transform .18s var(--spring), box-shadow .2s ease; }
.tm-mf { padding: 16px 24px; background: #fff; border-top: 1px solid #E4E4EE; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; position: sticky; bottom: 0; }
.tm-del { white-space: nowrap; border: 0; background: #D0105F; color: #fff; padding: 12px 18px; border-radius: 99px; font: 700 13px var(--font-ui); display: flex; align-items: center; gap: 8px; cursor: pointer; transition: transform .18s var(--spring), box-shadow .2s ease; }
.tm-selfnote { font: 600 12px var(--font-ui); color: var(--muted); }
.tm-line { white-space: nowrap; border: 1.5px solid #D6D6E6; background: #fff; color: var(--ink); padding: 12px 18px; border-radius: 99px; font: 700 13px var(--font-ui); cursor: pointer; transition: transform .18s var(--spring), box-shadow .2s ease; }
.tm-save { white-space: nowrap; border: 0; background: var(--lime); color: var(--ink); padding: 13px 20px; border-radius: 99px; font: 700 14px var(--font-ui); cursor: pointer; transition: transform .18s var(--spring), box-shadow .2s ease; }
.tm-save:disabled { opacity: .6; cursor: default; }
.tm-conf { width: 100%; max-width: 420px; background: #fff; border-radius: 26px; padding: 26px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 30px 60px rgba(11, 11, 38, .3); animation: tmPop .25s var(--spring); }
.tm-conf .ic { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; font: 800 22px var(--font-ui); }
.tm-conf .ti { font: 800 24px/1.1 var(--font-display); letter-spacing: -.02em; }
.tm-conf .bd { font: 500 14px/1.5 var(--font-ui); color: var(--body-2); overflow-wrap: anywhere; }
.tm-conf .bt { display: flex; gap: 10px; margin-top: 6px; }
.tm-conf .bt button { flex: 1; padding: 13px; font-size: 14px; }

@media (max-width: 640px) {
  .tm-box { padding: 18px; }
  .tm-g2 { grid-template-columns: minmax(0, 1fr); }
  .tm-radd { width: 100%; }
  .tm-radd .tm-in { width: auto; flex: 1; }
  .tm-scrim { padding: 10px; align-items: flex-end; }
  .tm-modal { max-height: 94vh; border-radius: 24px; }
  .tm-mh { position: relative; padding: 14px 64px 14px 16px; }
  .tm-x { position: absolute; top: 14px; right: 14px; }
  .tm-mb { padding: 12px; }
  .tm-mf { padding: 12px 16px; }
  .tm-mf .tm-del, .tm-mf .tm-line, .tm-mf .tm-save { flex: 1; justify-content: center; }
  .tm-mf > span[style] { display: none; }
  .tm-mrow { grid-template-columns: 42px minmax(0, 1fr); }
  .tm-acts { grid-column: 2; }
}

/* ---------- Ayuda ---------- */
.hp-hero { border-radius: 28px; background: var(--ink); color: #fff; padding: 28px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.hp-ht { display: flex; flex-direction: column; gap: 6px; max-width: 520px; }
.hp-ht .k { font: 700 11px var(--font-mono); letter-spacing: .1em; color: var(--lime); }
.hp-ht .t { font: 800 32px/1.05 var(--font-display); letter-spacing: -.02em; }
.hp-ht .s { font: 500 14px/1.5 var(--font-ui); color: #B8B8D0; }
.hp-chs { display: flex; gap: 10px; flex-wrap: wrap; }
.hp-ch { padding: 14px 18px; border-radius: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 150px; text-decoration: none; transition: transform .18s var(--spring), box-shadow .2s ease; }
.hp-ch b { font: 700 14px var(--font-ui); }
.hp-ch span { font: 500 12px var(--font-ui); opacity: .8; }
.hp-ch:hover, .hp-rq:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(30, 30, 255, .16); }
.hp-sec { display: flex; flex-direction: column; gap: 10px; }
.hp-st { font: 700 17px var(--font-ui); }
.hp-rqs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.hp-rq { text-align: left; padding: 14px; border-radius: 18px; background: #fff; border: 2px solid transparent; display: flex; flex-direction: column; gap: 8px; color: var(--ink); cursor: pointer; transition: transform .18s var(--spring), box-shadow .2s ease, border-color .2s; }
.hp-rq .ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; }
.hp-rq b { font: 700 14px var(--font-ui); }
.hp-rq > span:last-child { font: 500 12px/1.35 var(--font-ui); color: var(--muted); }
.hp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 14px; align-items: start; }
.hp-box { padding: 24px; border-radius: 24px; background: #fff; display: flex; flex-direction: column; gap: 12px; min-width: 0; transition: box-shadow .25s ease, transform .25s ease; }
.hp-box.list { gap: 4px; }
.hp-box:hover { box-shadow: 0 20px 44px rgba(30, 30, 255, .12); transform: translateY(-4px); }
.hp-nh { display: flex; align-items: center; gap: 10px; }
.hp-nh .ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.hp-pr { display: flex; align-items: center; gap: 8px; }
.hp-pr > span { font: 700 12px var(--font-ui); color: var(--body-2); }
.hp-seg { display: flex; gap: 4px; padding: 4px; background: var(--paper); border-radius: 99px; }
.hp-seg button { white-space: nowrap; border: 0; padding: 6px 12px; border-radius: 99px; font: 700 12px var(--font-ui); cursor: pointer; transition: transform .18s var(--spring), box-shadow .2s ease; }
.hp-field { display: flex; flex-direction: column; gap: 6px; font: 700 12px var(--font-ui); color: var(--body-2); min-width: 0; }
.hp-in { width: 100%; min-width: 0; padding: 11px 13px; border-radius: 13px; border: 1.5px solid #DDDDEA; background: #fff; font: 600 14px var(--font-ui); color: var(--ink); outline: none; transition: border-color .15s, box-shadow .15s; }
.hp-in:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(30, 30, 255, .1); }
textarea.hp-in { font-weight: 500; resize: vertical; line-height: 1.45; }
select.hp-in { cursor: pointer; }
.hp-cta { border: 0; background: var(--lime); color: var(--ink); padding: 13px; border-radius: 99px; font: 700 14px var(--font-ui); cursor: pointer; transition: transform .18s var(--spring), box-shadow .2s ease, background-color .2s ease; }
.hp-cta:disabled { opacity: .6; cursor: default; }
.hp-cta:not(:disabled):hover, .hp-seg button:hover, .hp-x:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(30, 30, 255, .2); }
.hp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 0; border: 0; border-top: 1px solid #F0F0F6; border-radius: 12px; background: transparent; text-align: left; color: var(--ink); cursor: pointer; transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.hp-row:hover { background: #F7F7FF; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(30, 30, 255, .1); }
.hp-row .tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hp-row .t { font: 700 14px var(--font-ui); }
.hp-row .t em { font-style: normal; font-weight: 600; color: var(--muted); }
.hp-row .m { font: 500 13px var(--font-ui); color: var(--body-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-row .c { font: 600 11px var(--font-mono); color: #8A8AA0; }
.hp-row .rt { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.hp-chip { white-space: nowrap; padding: 4px 10px; border-radius: 99px; font: 700 11px var(--font-ui); }
.hp-new { white-space: nowrap; padding: 3px 8px; border-radius: 99px; background: var(--lime); font: 700 10px var(--font-ui); }

.hp-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(11, 11, 38, .55); display: flex; align-items: center; justify-content: center; padding: 24px; animation: tmFade .2s ease; }
.hp-modal { width: 100%; max-width: 640px; max-height: 88vh; background: #fff; border-radius: 28px; display: flex; flex-direction: column; overflow: hidden; animation: tmPop .25s var(--spring); }
.hp-tload { display: flex; align-items: center; gap: 10px; padding: 40px; font: 600 14px var(--font-ui); color: var(--muted); }
.hp-th { display: flex; align-items: flex-start; gap: 12px; padding: 20px 24px; border-bottom: 1px solid #E4E4EE; }
.hp-thl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hp-thl .r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hp-thl .c { font: 600 11px var(--font-mono); color: #8A8AA0; }
.hp-thl .t { font: 800 22px/1.1 var(--font-display); }
.hp-thl .e { font: 600 12px var(--font-ui); color: var(--muted); }
.hp-x { border: 0; background: var(--paper); width: 40px; height: 40px; border-radius: 50%; font: 700 18px var(--font-ui); cursor: pointer; flex: none; transition: transform .18s var(--spring), box-shadow .2s ease; }
.hp-thread { flex: 1; min-height: 160px; overflow: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; background: var(--paper); }
.hp-bub { max-width: 82%; display: flex; flex-direction: column; gap: 4px; }
.hp-bub .w { font: 600 11px var(--font-ui); color: #8A8AA0; }
.hp-bub .b { padding: 12px 14px; border-radius: 16px; font: 500 14px/1.5 var(--font-ui); white-space: pre-line; overflow-wrap: anywhere; }
.hp-bub.me { align-self: flex-end; align-items: flex-end; }
.hp-bub.me .b { background: var(--blue); color: #fff; border-bottom-right-radius: 6px; }
.hp-bub.them .b { background: #fff; color: var(--ink); border-bottom-left-radius: 6px; box-shadow: 0 2px 10px rgba(11, 11, 38, .06); }
.hp-wait { align-self: center; padding: 8px 14px; border-radius: 99px; background: #fff; font: 600 12px var(--font-ui); color: var(--muted); text-align: center; }
.hp-rep { display: flex; gap: 10px; align-items: flex-end; padding: 16px 24px; border-top: 1px solid #E4E4EE; }
.hp-rep .hp-in { flex: 1; }
.hp-rep .hp-cta { padding: 13px 22px; }

@media (max-width: 640px) {
  .hp-hero { padding: 22px; }
  .hp-ht .t { font-size: 26px; }
  .hp-chs { width: 100%; flex-direction: column; }
  .hp-ch { min-width: 0; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
  .hp-ch span { text-align: right; overflow-wrap: anywhere; }
  .hp-rqs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-box { padding: 18px; }
  .hp-scrim { padding: 10px; align-items: flex-end; }
  .hp-modal { max-height: 92vh; border-radius: 24px; }
  .hp-th, .hp-thread, .hp-rep { padding-left: 16px; padding-right: 16px; }
}