/* ════════════════════════════════════════════════════════════════
   GestionDo · Portal del socio · refresco de aspecto
   Se carga después de todo lo demás: manda sobre las reglas viejas.
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Fichas de color y medidas (no se tocan los colores de tema,
       que los pone el selector de color en caliente) ── */
:root{
  --bg-app:#f5f6fb; --bg-card:#ffffff; --bg-card-2:#f7f8fc;
  --text:#141a2c; --muted:#6b7490;
  --border:#e7e9f2; --border-strong:#d2d7e7;
  --radius:20px; --radius-sm:14px; --radius-xs:10px;
  --header-h:62px;
  --shadow-sm:0 1px 2px rgba(20,26,44,0.05),0 5px 16px rgba(20,26,44,0.055);
  --shadow-md:0 2px 6px rgba(20,26,44,0.06),0 14px 34px rgba(20,26,44,0.11);
  --shadow-lg:0 4px 10px rgba(20,26,44,0.07),0 26px 60px rgba(20,26,44,0.16);
}
body.dark-mode{
  --bg-app:#0c1120; --bg-card:#151d31; --bg-card-2:#111829;
  --text:#eaf0fa; --muted:#93a1bd;
  --border:rgba(255,255,255,0.09); --border-strong:rgba(255,255,255,0.18);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.35),0 6px 18px rgba(0,0,0,0.30);
  --shadow-md:0 2px 8px rgba(0,0,0,0.40),0 16px 38px rgba(0,0,0,0.42);
  --shadow-lg:0 4px 12px rgba(0,0,0,0.45),0 28px 64px rgba(0,0,0,0.50);
}
body.dark-mode .card{ background:var(--bg-card); border-color:var(--border); }

/* ── 2. Que nada de texto quede cortado ── */
.tab-pane *,.app-header *,.drawer-item *,.overlay-full *{ min-width:0; }
.card p,.card div,.card span,.card li,.card td,.card th,.card label,
.card h2,.card h3,.card h4,.card b,.card strong,.card small{ overflow-wrap:break-word; }
.header-logo,.cumple-avatar,.cal-date-box,.btn-icon,.menu-btn,
.chat-send-btn,.di-ico,.dw-val{ flex-shrink:0; }

/* ── 3. Barra de arriba: cabe todo y el nombre no se parte ── */
.app-header{
  height:var(--header-h); padding:0 12px; gap:8px;
  background:linear-gradient(118deg,var(--t1) 0%,#2c2352 44%,var(--t2) 80%,var(--t3) 100%);
  background-size:220% 220%;
  border-bottom:none;
  box-shadow:0 2px 16px rgba(var(--theme-rgb),0.26);
}
.app-header::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,var(--gold),rgba(255,255,255,0.18) 70%,transparent);
  pointer-events:none;
}
.header-logo{ width:34px; height:34px; border-width:1.5px; }
.header-user{ margin-left:9px; flex:1; min-width:0; }
.header-name{
  font-size:0.85rem; letter-spacing:0.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.header-sub{
  font-size:0.66rem; color:rgba(255,255,255,0.72);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.header-right{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.btn-icon{
  width:34px; height:34px; font-size:0.98rem;
  background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.22);
}
.menu-btn{ width:34px; height:34px; margin-right:2px; background:rgba(255,255,255,0.16); }
#btn-ayuda-tab{
  width:34px !important; height:34px !important; border-radius:50% !important;
  font-size:1.05rem !important; font-weight:800 !important;
}

/* ── 4. Cajón lateral: ahora también guarda los ajustes ── */
#side-drawer{ width:87%; max-width:322px; border-radius:0 22px 22px 0; }
.drawer-head{ padding:18px 18px; }
.drawer-head .dh-title{ font-size:0.95rem; letter-spacing:0.6px; }
.drawer-list{ padding:6px 0 14px; }
.drawer-item{
  padding:13px 18px; gap:12px; font-size:0.9rem; font-weight:650;
  border-left-width:3px; border-radius:0 12px 12px 0;
}
.drawer-item>span:not(.di-ico):not(.dw-val){
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1;
}
.drawer-item .di-ico{ font-size:1.2rem; }
.drawer-sep{ background:var(--border); margin:8px 16px; }
.drawer-group-label{
  font-size:0.6rem; font-weight:800; text-transform:uppercase; letter-spacing:1.2px;
  color:var(--muted); padding:12px 20px 4px;
}
.dw-val{
  margin-left:auto; max-width:46%;
  font-size:0.74rem; font-weight:800; color:var(--muted);
  background:var(--bg-card-2); border:1px solid var(--border);
  border-radius:999px; padding:3px 9px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dw-sel{ position:relative; }
#theme-toggle.di-ico{ padding:0; margin:0; font-size:1.2rem; width:24px; color:inherit; background:none; border:none; }
.dw-sel select{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; border:none; background:none; cursor:pointer; font-size:16px;
}
body.dark-mode #side-drawer{ background:var(--bg-card); }
body.dark-mode .dw-val{ background:rgba(255,255,255,0.05); }

/* ── 5. Tarjetas: todas iguales, sin salto al pasar el dedo ── */
.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  padding:16px; margin-bottom:12px;
  transition:box-shadow 0.25s ease;
}
.card:hover{ transform:none; box-shadow:var(--shadow-md); }
@media (hover:none){ .card:hover{ box-shadow:var(--shadow-sm); } }
.card-accent{ border-left:4px solid var(--primary); }

/* ── 6. Títulos de tarjeta: se leen, ya no gritan en mayúsculas ── */
.card-title{
  font-family:'Sora','Outfit',sans-serif;
  font-size:0.98rem; font-weight:800;
  color:var(--text);
  text-transform:none; letter-spacing:0;
  line-height:1.28;
  margin-bottom:13px; padding-bottom:10px;
  border-bottom:1px solid var(--border);
  border-image:none;
  gap:10px; flex-wrap:wrap;
  overflow-wrap:break-word;
}
body.dark-mode .card-title{ color:#f1f4fc; border-bottom-color:var(--border); }

/* ── 7. Botones: sin mayúsculas forzadas, así entra el texto ── */
.btn-primary{
  text-transform:none; letter-spacing:0.1px;
  font-size:0.95rem; font-weight:800;
  border-radius:14px; padding:13px 16px;
  white-space:normal;
}
.btn-primary:active{ transform:scale(0.97); }
.btn-sec{ white-space:normal; }
.chat-ch-btn{ border-width:1.5px; font-weight:700; }

/* ── 8. Chat: el cuadro de escribir siempre se ve ── */
.chat-msgs{ height:52vh; min-height:220px; max-height:520px; }
.chat-input-row{ gap:8px; margin-top:10px; align-items:center; }
.chat-input{ border-width:1.5px; }
#chat-readonly-note{ line-height:1.45; }

/* ── 9. Perfil: el nombre completo, debajo de la foto ── */
.pf-nombre{
  font-family:'Sora','Outfit',sans-serif;
  font-size:1.16rem; font-weight:900; line-height:1.22;
  margin-top:11px; color:var(--text);
  overflow-wrap:break-word;
}
.pf-cint{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-size:0.86rem; color:var(--muted); margin-top:4px;
}

/* ── 10. Campos de texto: mismo aspecto en todas las pantallas ── */
.card input[type=text],.card input[type=number],.card input[type=date],
.card input[type=email],.card input[type=password],.card select,.card textarea{
  border-radius:var(--radius-xs);
}
.card input:focus,.card select:focus,.card textarea:focus{
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-glow);
}
body.dark-mode .card input,body.dark-mode .card select,body.dark-mode .card textarea,
body.dark-mode .dir-aviso-form input,body.dark-mode .dir-aviso-form textarea,
body.dark-mode .dir-aviso-form select{
  background:var(--bg-card-2); border-color:var(--border); color:var(--text);
}
body.dark-mode .dir-aviso-form{ background:var(--bg-card-2); border-color:var(--border); }
body.dark-mode .cumple-card{
  background:linear-gradient(135deg,rgba(245,166,35,0.10),rgba(245,166,35,0.04));
  border-color:rgba(245,166,35,0.28);
}
body.dark-mode .cal-event,body.dark-mode .chat-ch-btn{
  background:var(--bg-card); border-color:var(--border); color:var(--muted);
}
body.dark-mode .chat-ch-btn.active{ color:#fff; }

/* ── 11. Compañeros de hoy: la inicial centrada y el punto de color en la esquina ── */
.m-avatar{
  position:relative; width:54px; height:54px; margin:0 auto 6px;
  display:flex; align-items:center; justify-content:center;
  overflow:visible; border:2px solid var(--border);
  font-family:'Sora','Outfit',sans-serif; font-size:1.16rem; font-weight:800;
  color:var(--muted); line-height:1;
}
.m-avatar img{ border-radius:50%; }
.m-sema{
  position:absolute; right:-3px; bottom:-3px;
  font-size:0.72rem; line-height:1;
  background:var(--bg-card); border:2px solid var(--bg-card);
  border-radius:999px; padding:1px 2px;
  display:flex; align-items:center; justify-content:center;
}
.m-name{ font-size:0.68rem; font-weight:700; }

/* ── 12. Tabla de rachas: que el "#10" no se parta en dos ── */
.racha-pos{
  min-width:34px; width:auto; white-space:nowrap;
  font-variant-numeric:tabular-nums; font-weight:800; flex-shrink:0;
}
.racha-name{ white-space:normal; overflow:visible; text-overflow:clip; line-height:1.25; }

/* ── 13. Cuadros de texto grandes con el mismo aspecto ── */
textarea.gd-ta{
  width:100%; box-sizing:border-box; resize:vertical;
  min-height:76px; padding:11px 13px;
  font-family:inherit; font-size:0.92rem; line-height:1.45;
  color:var(--text); background:var(--bg-card-2);
  border:1.5px solid var(--border); border-radius:var(--radius-xs);
}
textarea.gd-ta:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); }

/* ── 14. La cabecera del cajón se queda fija al bajar la lista ── */
.drawer-head{ position:sticky; top:0; z-index:3; }

/* ── 15. Avisos en modo noche: los verdes y los rojos también se leen ── */
body.dark-mode .aviso-card{ background:var(--bg-card); border-color:var(--border); }
body.dark-mode .aviso-card.info{
  background:linear-gradient(135deg,rgba(39,174,96,0.14),rgba(39,174,96,0.05));
  border-color:rgba(39,174,96,0.34);
}
body.dark-mode .aviso-card.urgente{
  background:linear-gradient(135deg,rgba(231,76,60,0.16),rgba(231,76,60,0.05));
  border-color:rgba(231,76,60,0.38);
}
body.dark-mode .aviso-titulo,body.dark-mode .aviso-body{ color:#eaf0fa; }