/* ============================================================
   modals.css — Modales, overlays, dropdowns de usuario
   Modificar aquí: estética de popups, formularios en modales
   ============================================================ */

/* ── Overlay base ── */
.moverlay{
  position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:200;
  display:none;align-items:center;justify-content:center;
}
.moverlay.open{display:flex}

/* ── Modal contenedor ── */
.modal{
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:20px;padding:24px;width:100%;max-width:460px;
  max-height:85vh;overflow-y:auto;
}
.modal-wide{max-width:620px}

.modal-title{
  font-family:var(--fh);font-size:20px;font-weight:800;
  margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;
}
.modal-x{
  background:none;border:none;color:var(--text2);font-size:18px;
  width:32px;height:32px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;transition:background .15s;flex-shrink:0;
}
.modal-x:hover{background:var(--surface3)}

.modal-field{margin-bottom:16px}
.modal-field label{display:block;font-size:13px;font-weight:700;color:var(--text2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px}
.modal-field input,.modal-field textarea,.modal-field select{
  width:100%;background:var(--surface3);border:1px solid var(--border);
  border-radius:10px;padding:11px 14px;font-family:var(--fb);
  font-size:14px;color:var(--text);outline:none;transition:border-color .2s;
}
.modal-field input:focus,.modal-field textarea:focus,.modal-field select:focus{border-color:var(--accent)}
.modal-field textarea{resize:none;line-height:1.6}
.modal-field select option{background:var(--surface2)}

.modal-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}

/* ── Modal share ── */
.share-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px}
.share-btn{
  display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-radius:12px;border:1px solid var(--border2);background:transparent;
  font-size:14px;font-weight:600;color:var(--text);transition:all .15s;cursor:pointer;
}
.share-btn:hover{background:var(--surface3);border-color:var(--border2)}
.share-icon{font-size:20px}

/* ── Modal post edit ── */
.edit-ta{
  width:100%;border:none;outline:none;resize:none;
  font-family:var(--fb);font-size:16px;color:var(--text);
  background:var(--surface3);border-radius:10px;padding:12px 14px;
  line-height:1.6;min-height:100px;
}

/* ── Modal confirmación ── */
.confirm-msg{font-size:15px;color:var(--text2);line-height:1.6;margin-bottom:20px}

/* ── Policy / Docs ── */
.policy-content{font-size:14px;color:var(--text2);line-height:1.8;max-height:400px;overflow-y:auto}
.policy-content h3{font-size:15px;font-weight:700;color:var(--text);margin:16px 0 6px}
.policy-content h3:first-child{margin-top:0}
.policy-content p{margin-bottom:12px}

/* ── User dropdown ── */
.user-widget{position:relative}
.user-dd{
  position:absolute;bottom:calc(100% + 10px);left:0;
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,.7);
  min-width:280px;overflow:hidden;z-index:100;display:none;
}
.user-dd.open{display:block}
.dd-profile{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--border);
}
.dd-av{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;overflow:hidden;
  background:var(--surface3);
}
.dd-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.dd-name{font-size:14px;font-weight:700}
.dd-sub{font-size:12px;color:var(--text2)}
.dd-item{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:12px 16px;border:none;background:transparent;
  font-family:var(--fb);font-size:14px;color:var(--text);
  transition:background .12s;text-align:left;cursor:pointer;
}
.dd-item:hover{background:var(--surface3)}
.dd-item.danger{color:var(--like)}
.dd-item .dd-icon{font-size:18px;width:24px;text-align:center}
.dd-divider{height:1px;background:var(--border)}

/* Theme toggle dentro del dropdown */
.dd-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
.toggle-switch{
  width:40px;height:22px;border-radius:9999px;background:var(--surface3);
  border:1px solid var(--border2);position:relative;cursor:pointer;transition:background .2s;
}
.toggle-switch.on{background:var(--accent);border-color:var(--accent)}
.toggle-knob{
  position:absolute;top:2px;left:2px;width:16px;height:16px;
  border-radius:50%;background:#fff;transition:left .2s;
}
.toggle-switch.on .toggle-knob{left:20px}

/* Sub-menú de info */
.info-submenu{
  background:var(--surface);border-top:1px solid var(--border);
  display:none;padding:4px 0;
}
.info-submenu.open{display:block}
.info-sub-item{
  display:block;width:100%;padding:10px 16px 10px 48px;
  border:none;background:transparent;font-family:var(--fb);
  font-size:13px;color:var(--text2);text-align:left;transition:background .12s;cursor:pointer;
}
.info-sub-item:hover{background:var(--surface3);color:var(--text)}

/* Guest dropdown */
.guest-dd{
  position:absolute;bottom:calc(100% + 10px);left:0;
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,.7);
  min-width:240px;overflow:hidden;z-index:100;display:none;
  padding:16px;
}
.guest-dd.open{display:block}
.guest-dd-title{font-family:var(--fh);font-size:16px;font-weight:800;margin-bottom:8px}
.guest-dd-sub{font-size:13px;color:var(--text2);line-height:1.5;margin-bottom:14px}
.guest-dd-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:11px;border:1px solid var(--border2);
  border-radius:9999px;background:transparent;font-size:14px;font-weight:600;
  color:var(--text);transition:all .2s;cursor:pointer;
}
.guest-dd-btn:hover{background:rgba(255,255,255,.05)}

/* ── Guest dropdown (user-dd variant) ───────────────────────────────────── */
.dd-guest-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border2);
  border-radius: 9999px;
  background: transparent;
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.dd-guest-item:hover { background: var(--surface3); }
.dd-guest-item.primary {
  background: #1a73e8;
  border-color: #1a73e8;
  color: #fff;
}
.dd-guest-item.primary:hover { background: #1765cc; border-color: #1765cc; }

/* Widget usuario cuando es invitado: cursor pointer para invitar a hacer click */
.sl-user--guest { cursor: pointer; }
.sl-user--guest .u-name {
  font-weight: 700;
  color: var(--accent);
}