/* ===== TecmiBook · estilos (clon estilo Facebook) ===== */
:root{
  --fb:#00ac18; --fbd:#009614; --bg:#f0f2f5; --panel:#fff; --line:#dddfe2;
  --text:#050505; --muted:#65676b; --green:#31a24c; --red:#d13212; --soft:#f0f2f5;
  --font:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; font-family:var(--font); }
html{ touch-action:manipulation; -webkit-text-size-adjust:100%; overflow-x:hidden; }
body{ background:var(--bg); color:var(--text); }
a{ color:var(--fb); text-decoration:none; } a:hover{ text-decoration:underline; }
svg.ic{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }

/* topbar */
.nav{ background:var(--panel); border-bottom:1px solid var(--line); height:56px; position:sticky; top:0; z-index:30; display:flex; align-items:center; padding:0 16px; gap:12px; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.nav .logo{ font-size:24px; font-weight:800; color:var(--fb); letter-spacing:-.03em; }
.nav .links{ display:flex; gap:6px; margin-left:8px; }
.nav .links a{ color:var(--muted); font-weight:600; font-size:14px; padding:8px 14px; border-radius:8px; }
.nav .links a.on{ color:var(--fb); background:#e3f7e6; }
.nav .right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.nav .me{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:14px; }
.avatar{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:14px; flex:0 0 auto; overflow:hidden; }
.avatar img{ width:100%; height:100%; object-fit:cover; }
.nav .right a.out{ color:var(--muted); font-size:13px; }

/* layout */
.wrap{ max-width:600px; margin:20px auto; padding:0 12px; }
.wide{ max-width:940px; }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:16px; box-shadow:0 1px 2px rgba(0,0,0,.05); }

/* login */
.auth{ min-height:100vh; display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:20px; max-width:980px; margin:0 auto; padding:40px 20px; }
.auth .pitch h1{ font-size:52px; color:var(--fb); font-weight:800; letter-spacing:-.03em; }
.auth .pitch p{ font-size:22px; margin-top:12px; line-height:1.4; max-width:440px; }
.auth .pitch .lab{ margin-top:18px; background:#fff4e5; border:1px solid #ffd79a; color:#7a5a12; border-radius:10px; padding:12px 14px; font-size:13.5px; max-width:440px; }
.auth .box{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:22px; box-shadow:0 2px 10px rgba(0,0,0,.1); }
.auth .box input{ width:100%; padding:14px; border:1px solid var(--line); border-radius:8px; font-size:16px; margin-bottom:12px; outline:none; }
.auth .box input:focus{ border-color:var(--fb); }
.btn{ width:100%; padding:13px; border:none; border-radius:8px; background:var(--fb); color:#fff; font-size:18px; font-weight:700; cursor:pointer; }
.btn:hover{ background:var(--fbd); }
.btn.sm{ width:auto; padding:8px 16px; font-size:14px; border-radius:7px; }
.btn.gray{ background:#e4e6eb; color:#050505; } .btn.gray:hover{ background:#d8dadf; }
.btn.green{ background:var(--green); } .btn.danger{ background:var(--red); }
.msg{ font-size:14px; margin-top:8px; min-height:18px; } .msg.err{ color:var(--red); } .msg.ok{ color:var(--green); }
.demo{ margin-top:14px; font-size:12.5px; color:var(--muted); border-top:1px solid var(--line); padding-top:12px; }

/* composer + posts */
.composer{ display:flex; gap:10px; align-items:center; }
.composer input{ flex:1; background:var(--soft); border:none; border-radius:20px; padding:11px 16px; font-size:15px; outline:none; }
.post{ display:flex; gap:10px; margin-bottom:14px; }
.post .body{ flex:1; }
.post .top{ display:flex; align-items:center; gap:8px; }
.post .name{ font-weight:700; font-size:14.5px; }
.post .time{ color:var(--muted); font-size:12px; }
.post .text{ margin-top:6px; font-size:15px; line-height:1.4; word-break:break-word; }

/* profile */
.cover{ height:140px; border-radius:12px 12px 0 0; background:linear-gradient(120deg,#00ac18,#3ad957); }
.phead{ background:#fff; border:1px solid var(--line); border-top:none; border-radius:0 0 12px 12px; padding:0 20px 18px; margin-bottom:16px; }
.phead .row{ display:flex; align-items:flex-end; gap:16px; margin-top:-40px; }
.phead .big{ width:96px; height:96px; border-radius:50%; border:4px solid #fff; font-size:34px; }
.phead h2{ font-size:26px; } .phead .u{ color:var(--muted); font-size:14px; }
.phead .bio{ margin-top:10px; font-size:15px; color:#222; }
label{ display:block; font-size:13px; font-weight:600; color:var(--muted); margin:12px 0 5px; }
.fld{ width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:8px; font-size:15px; outline:none; }
.fld:focus{ border-color:var(--fb); }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.pill{ display:inline-block; font-size:11px; font-weight:700; padding:3px 9px; border-radius:99px; background:#e3f7e6; color:var(--fb); }
.pill.warn{ background:#fdecea; color:var(--red); }
@media(max-width:760px){
  .auth{ grid-template-columns:1fr; text-align:center; } .auth .pitch h1{ font-size:40px; } .grid2{ grid-template-columns:1fr; }
  /* nav responsivo: logo + cuenta arriba, enlaces en una fila desplazable abajo */
  .nav{ flex-wrap:wrap; height:auto; padding:8px 12px; row-gap:6px; gap:8px; }
  .nav .logo{ font-size:20px; }
  .nav .right{ order:2; margin-left:auto; }
  .nav .me span{ display:none; }              /* solo el avatar en móvil */
  .nav .links{ order:3; width:100%; margin-left:0; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:2px; padding-bottom:2px; }
  .nav .links::-webkit-scrollbar{ height:0; }
  .nav .links a{ padding:8px 12px; white-space:nowrap; font-size:13.5px; flex:0 0 auto; }
  .wrap{ padding:0 10px; margin:14px auto; } .wrap.wide{ padding:0 10px; }
  .cmodal, .confirm{ max-width:100%; }
  .photo-menu{ position:fixed; left:12px; right:12px; width:auto; max-height:70vh; overflow-y:auto; top:auto; }
  .admin-grid{ grid-template-columns:1fr; }
  .appbar2{ flex-wrap:wrap; height:auto; padding:8px 12px; gap:8px; }
  .appbar2 .who{ width:100%; flex-wrap:wrap; gap:8px; }
  .auth{ padding:24px 16px; }
}

/* ===== ampliaciones: posts con imagen, borrar, amigos, picker ===== */
.post .postimg{ margin-top:8px; border-radius:10px; max-width:100%; border:1px solid var(--line); display:block; }
.post .menu{ margin-left:auto; position:relative; }
.post .menu .dots{ background:none; border:none; color:var(--muted); font-size:20px; border-radius:50%; width:32px; height:32px; cursor:pointer; }
.post .menu .dots:hover{ background:var(--soft); }
.post .menu .drop{ position:absolute; right:0; top:34px; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.15); padding:6px; display:none; z-index:5; min-width:150px; }
.post .menu .drop.on{ display:block; }
.post .menu .drop button{ width:100%; text-align:left; background:none; border:none; padding:9px 12px; border-radius:7px; font-size:14px; color:var(--red); cursor:pointer; display:flex; gap:8px; align-items:center; }
.post .menu .drop button:hover{ background:#fdecea; }
.composer2{ margin-top:10px; display:flex; gap:8px; align-items:center; }
.composer2 input{ flex:1; background:var(--soft); border:none; border-radius:16px; padding:8px 14px; font-size:13.5px; outline:none; }

.peoplegrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.pcard{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px; text-align:center; }
.pcard .avatar{ margin:0 auto 8px; }
.pcard .nm{ font-weight:700; font-size:13.5px; line-height:1.25; min-height:34px; }
.pcard .btn{ margin-top:8px; font-size:12.5px; padding:7px 10px; }
.tabbar{ display:flex; gap:6px; margin-bottom:14px; border-bottom:1px solid var(--line); }
.tabbar button{ background:none; border:none; padding:11px 14px; font-weight:700; font-size:14px; color:var(--muted); cursor:pointer; border-bottom:3px solid transparent; }
.tabbar button.on{ color:var(--fb); border-bottom-color:var(--fb); }
.count-badge{ background:var(--red); color:#fff; font-size:11px; border-radius:99px; padding:1px 7px; margin-left:5px; }

.picker{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.picker .opt{ width:52px; height:52px; border-radius:50%; overflow:hidden; border:3px solid transparent; cursor:pointer; }
.picker .opt.sel{ border-color:var(--fb); }
.picker .opt img{ width:100%; height:100%; object-fit:cover; }

/* confirm modal */
.overlay{ position:fixed; inset:0; background:rgba(15,25,45,.5); z-index:100; display:none; align-items:center; justify-content:center; padding:20px; }
.overlay.on{ display:flex; }
.confirm{ background:#fff; border-radius:14px; max-width:400px; width:100%; padding:22px; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.confirm h3{ font-size:18px; margin-bottom:8px; } .confirm p{ font-size:14px; color:var(--muted); }
.confirm .row{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }

/* ===== edición inline de perfil (hover cámara/lápiz) ===== */
.edit-av{ position:relative; cursor:pointer; }
.edit-av .cam{ position:absolute; inset:0; border-radius:50%; background:rgba(0,0,0,.45); color:#fff; display:none; align-items:center; justify-content:center; }
.edit-av:hover .cam{ display:flex; }
.edit-av .cam svg{ width:30px; height:30px; }
.name-edit{ display:inline-flex; align-items:center; gap:8px; }
.name-edit .pen{ opacity:0; color:var(--muted); cursor:pointer; transition:opacity .12s; }
.name-edit:hover .pen{ opacity:1; }
.name-edit .pen:hover{ color:var(--fb); }
.name-edit input{ font-size:24px; font-weight:800; border:1px solid var(--fb); border-radius:8px; padding:4px 8px; }
.photo-menu{ position:absolute; z-index:20; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 26px rgba(0,0,0,.18); padding:12px; width:300px; display:none; }
.photo-menu.on{ display:block; }
.photo-menu h4{ font-size:13px; margin-bottom:8px; }
.photo-menu .picker{ max-height:150px; overflow-y:auto; }
.profile-posts h3{ font-size:16px; margin:6px 4px 12px; }

/* ===== perfil público / botón de amistad ===== */
.friendbtn{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
.namelink{ color:inherit; } .namelink:hover{ text-decoration:underline; cursor:pointer; }

/* ===== admin ===== */
.appbar2{ background:var(--fb); color:#fff; height:56px; display:flex; align-items:center; padding:0 18px; gap:12px; }
.appbar2 .logo{ font-weight:800; font-size:20px; }
.appbar2 .sp{ font-size:12px; background:rgba(255,255,255,.2); padding:4px 10px; border-radius:6px; }
.appbar2 .who{ margin-left:auto; display:flex; align-items:center; gap:12px; font-size:14px; }
.admin-grid{ display:grid; grid-template-columns:1fr 1fr auto auto; gap:8px; align-items:end; }
.utable td .rolp{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:99px; }
.utable td .rolp.prof{ background:#fff3e0; color:#b25e00; } .utable td .rolp.al{ background:#e3f7e6; color:var(--fb); }
@media(max-width:720px){ .admin-grid{ grid-template-columns:1fr; } }

/* ===== composer modal (crear publicación) + media en posts ===== */
.trigger{ display:flex; gap:10px; align-items:center; }
.trigger .fake{ flex:1; background:var(--soft); border-radius:20px; padding:11px 16px; color:var(--muted); font-size:15px; cursor:pointer; }
.trigger .fake:hover{ background:#e6e8ec; }
.cmodal{ background:#fff; border-radius:14px; max-width:520px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,.3); overflow:hidden; }
.cmodal .h{ padding:14px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.cmodal .h h3{ font-size:18px; } .cmodal .h .x{ background:#e4e6eb; border:none; width:34px; height:34px; border-radius:50%; font-size:18px; cursor:pointer; }
.cmodal .b{ padding:16px 18px; }
.cmodal .who{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.cmodal .who .nm{ font-weight:700; font-size:14.5px; }
.cmodal textarea{ width:100%; border:none; outline:none; resize:none; font-size:18px; min-height:90px; font-family:var(--font); }
.cmodal .prev{ margin-top:8px; position:relative; }
.cmodal .prev img,.cmodal .prev video{ width:100%; border-radius:10px; border:1px solid var(--line); max-height:280px; object-fit:cover; }
.cmodal .prev .quitar{ position:absolute; top:8px; right:8px; background:rgba(0,0,0,.6); color:#fff; border:none; width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:16px; }
.cmodal .addbar{ border:1px solid var(--line); border-radius:10px; padding:9px 12px; display:flex; align-items:center; gap:8px; margin-top:12px; }
.cmodal .addbar span{ font-size:14px; color:var(--muted); margin-right:auto; font-weight:600; }
.cmodal .addbar label{ margin:0; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border-radius:8px; font-size:13px; font-weight:700; }
.cmodal .addbar label:hover{ background:var(--soft); }
.cmodal .addbar .foto{ color:var(--green); } .cmodal .addbar .video{ color:#e53935; }
.cmodal .pubbtn{ width:100%; margin-top:12px; }
.cmodal .peso{ font-size:12px; color:var(--muted); margin-top:6px; text-align:center; }
.post .postvid{ margin-top:8px; width:100%; border-radius:10px; border:1px solid var(--line); max-height:420px; background:#000; }

/* ===== Me gusta ===== */
.likesum{ min-height:0; display:flex; align-items:center; gap:6px; color:var(--muted); font-size:13.5px; margin-top:10px; }
.likesum:empty{ display:none; }
.likesum .tb{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:var(--fb); font-size:10px; line-height:1; }
.actbar{ display:flex; gap:4px; margin-top:6px; padding-top:6px; border-top:1px solid var(--line); }
.act{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; background:none; border:none; cursor:pointer;
  color:var(--muted); font-weight:600; font-size:14.5px; padding:8px 6px; border-radius:8px; transition:background .12s,color .12s; }
.act svg{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.act:hover{ background:var(--soft); }
.act.like.on{ color:var(--fb); }
.act.like.on svg{ fill:var(--fb); stroke:var(--fb); }