/* ============================================================
   TOWN · VERSIÓN DE ESCRITORIO  (solo ≥ 1001px)
   El móvil NO se toca: todo vive dentro de este @media.
   Cascarón de 3 columnas:  riel de navegación · columna central (la app) · panel lateral.
   Reutiliza el mismo motor (feed, Tb, chats, comunidades…): solo cambia el marco.
   ============================================================ */
@media (min-width:1001px){

  :root{
    --dk-col:520px;          /* ancho de la columna central (cambia según la sección) */
    --dk-rail:248px;
    --dk-aside:336px;
    --dk-bg:#eef2f7;
    --dk-line:rgba(15,23,42,.09);
    --dk-ink:#0f172a;
    --dk-mut:#64748b;
  }
  html.tn-dark{ --dk-bg:#07090d; --dk-line:rgba(255,255,255,.08); --dk-ink:#f4f7fa; --dk-mut:#9aa6b2; }

  /* ---- sin marco de teléfono: la app ocupa toda la ventana ---- */
  html,body{ background:var(--dk-bg) !important; }
  #phone{ top:0 !important; left:0 !important; transform:none !important; width:100vw !important; max-width:none !important;
    height:100vh !important; height:100dvh !important; border-radius:0 !important; padding:0 !important;
    background:var(--dk-bg) !important; box-shadow:none !important; }
  html.tn-dark #phone{ background:var(--dk-bg) !important; box-shadow:none !important; }
  #phone .ph-screen{ height:100vh !important; height:100dvh !important; border-radius:0 !important;
    display:grid !important; grid-template-columns:var(--dk-rail) minmax(0,var(--dk-col)) var(--dk-aside);
    grid-template-rows:auto minmax(0,1fr); justify-content:center; column-gap:0;
    background:var(--dk-bg) !important; overflow:hidden; transition:grid-template-columns .25s ease; }
  .phone:not(.fullscreen) .ph-screen::before,.phone:not(.fullscreen) .ph-screen::after{ display:none !important; }   /* notch + cámara del marco */

  /* ---- columna central ---- */
  #phone .ph-head{ grid-column:2; grid-row:1; padding-top:10px !important; z-index:6;
    border-left:1px solid var(--dk-line); border-right:1px solid var(--dk-line); }
  #phone .ph-body{ grid-column:2; grid-row:2; min-height:0; position:relative;
    border-left:1px solid var(--dk-line); border-right:1px solid var(--dk-line);
    background:linear-gradient(180deg,#f6f9fc,#eef3f8); }
  html.tn-dark #phone .ph-body{ background:#0a0d13; }
  #phone .ph-feed{ padding-bottom:40px; }

  /* secciones que respiran más ancho (lista de chats, comunidades, perfil, notificaciones) */
  #phone[data-dk-sec="msgs"],#phone[data-dk-sec="comunidad"],#phone[data-dk-sec="profile"],#phone[data-dk-sec="notif"]{ --dk-col:760px; }
  #phone[data-dk-sec="msgs"] .ph-screen,#phone[data-dk-sec="comunidad"] .ph-screen,
  #phone[data-dk-sec="profile"] .ph-screen,#phone[data-dk-sec="notif"] .ph-screen{ grid-template-columns:var(--dk-rail) minmax(0,var(--dk-col)) 0; }
  #phone[data-dk-sec="msgs"] #dk-aside,#phone[data-dk-sec="comunidad"] #dk-aside,
  #phone[data-dk-sec="profile"] #dk-aside,#phone[data-dk-sec="notif"] #dk-aside{ display:none; }

  /* ---- riel izquierdo (era la barra inferior del móvil) ---- */
  #phone .ph-navbar{ position:static !important; grid-column:1; grid-row:1 / span 2; pointer-events:auto !important;
    display:flex; flex-direction:column; padding:22px 18px 22px 14px !important; background:transparent !important; z-index:7;
    overflow-y:auto; scrollbar-width:none; }
  #phone .ph-navbar::-webkit-scrollbar{ display:none; }
  #dk-brand{ display:flex; align-items:center; gap:11px; padding:4px 12px 22px; cursor:pointer; text-decoration:none; }
  #dk-brand img.dk-logo{ width:38px; height:38px; border-radius:11px; display:block; }
  #dk-brand img.dk-word{ height:20px; display:block; }
  html.tn-dark #dk-brand img.dk-word{ filter:brightness(0) invert(1); }
  #phone .ph-nav{ height:auto !important; flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important;
    gap:4px; padding:0 !important; background:transparent !important; box-shadow:none !important; border-radius:0 !important; }
  html.tn-dark #phone .ph-nav{ background:transparent !important; box-shadow:none !important; }
  #phone .ph-navi{ flex-direction:row !important; justify-content:flex-start; align-items:center; gap:15px !important; min-width:0 !important;
    padding:13px 14px !important; border-radius:14px; font-size:16px; font-weight:700; color:var(--dk-mut); transition:background .15s,color .15s; }
  #phone .ph-navi svg{ width:25px; height:25px; flex:none; }
  #phone .ph-navi:hover{ background:rgba(15,23,42,.06); color:var(--dk-ink); }
  html.tn-dark #phone .ph-navi{ color:var(--dk-mut); }
  html.tn-dark #phone .ph-navi:hover{ background:rgba(255,255,255,.07); color:var(--dk-ink); }
  #phone .ph-navi.on{ color:var(--dk-ink); background:rgba(15,181,191,.13); }
  html.tn-dark #phone .ph-navi.on{ color:#5eead4; background:rgba(15,181,191,.16); }
  #phone .ph-navi[data-s="home"]::after{ content:'Inicio'; }
  #phone .ph-navi[data-s="comunidad"]::after{ content:'Comunidades'; }
  #phone .ph-navi[data-s="msgs"]::after{ content:'Chats'; }
  #phone .ph-navi[data-s="profile"]::after{ content:'Tú'; }
  /* punto rojo de chats sin leer: en la esquina del ícono; el contador numérico sobra (el punto ya avisa) */
  #phone .ph-navi .dot{ position:absolute !important; top:9px !important; left:34px !important; right:auto !important; border-color:var(--dk-bg) !important; }
  #phone .ph-navi .n{ display:none !important; }
  /* ＋ → botón grande "Crear" al pie del bloque */
  #phone .ph-plus{ order:10; width:auto !important; height:50px !important; margin:16px 4px 0; border-radius:16px !important;
    display:flex !important; align-items:center; justify-content:center; gap:10px; cursor:pointer; transition:transform .15s,filter .15s; }
  #phone .ph-plus svg{ width:22px; height:22px; flex:none; }
  #phone .ph-plus::after{ content:'Crear publicación'; color:#fff; font-weight:800; font-size:15px; }
  #phone .ph-plus:hover{ filter:brightness(1.07); transform:translateY(-1px); }
  .ph-navi,.ph-plus{ -webkit-user-select:none; user-select:none; }

  /* ---- panel derecho ---- */
  #dk-aside{ grid-column:3; grid-row:1 / span 2; min-width:0; overflow-y:auto; scrollbar-width:none; padding:22px 18px 28px 26px;
    display:flex; flex-direction:column; gap:16px; color:var(--dk-ink); }
  #dk-aside::-webkit-scrollbar{ display:none; }
  .dk-card{ background:#fff; border:1px solid var(--dk-line); border-radius:20px; padding:16px; box-shadow:0 10px 28px -20px rgba(15,23,42,.35); }
  html.tn-dark .dk-card{ background:#0f141b; box-shadow:none; }
  .dk-h{ font-size:13px; font-weight:800; letter-spacing:.2px; color:var(--dk-mut); text-transform:uppercase; margin:0 0 12px; display:flex; align-items:center; justify-content:space-between; }
  .dk-h button{ border:0; background:none; font:inherit; font-size:12.5px; text-transform:none; color:var(--blue,#0fb5bf); font-weight:800; cursor:pointer; padding:0; }
  .dk-soul{ background:var(--grad,linear-gradient(135deg,#0fb5bf,#2563eb,#7c3aed)); color:#fff; border:0; }
  html.tn-dark .dk-soul{ background:var(--grad,linear-gradient(135deg,#0fb5bf,#2563eb,#7c3aed)); }
  .dk-soul .dk-st{ font-size:18px; font-weight:900; display:flex; align-items:center; gap:9px; }
  .dk-soul p{ margin:6px 0 12px; font-size:13.5px; line-height:1.45; opacity:.92; }
  .dk-chips{ display:flex; flex-wrap:wrap; gap:7px; }
  .dk-chip{ border:0; font:inherit; font-size:12.5px; font-weight:700; color:#fff; background:rgba(255,255,255,.2); border-radius:999px; padding:7px 12px; cursor:pointer; transition:background .15s; }
  .dk-chip:hover{ background:rgba(255,255,255,.34); }
  .dk-row{ display:flex; align-items:center; gap:12px; padding:9px 4px; border-radius:12px; cursor:pointer; }
  .dk-row:hover{ background:rgba(15,23,42,.04); }
  html.tn-dark .dk-row:hover{ background:rgba(255,255,255,.05); }
  .dk-row .ic{ width:42px; height:42px; border-radius:13px; display:grid; place-items:center; font-size:21px; color:#fff; flex:none; }
  .dk-row .tx{ min-width:0; flex:1; }
  .dk-row .tx b{ display:block; font-size:14.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dk-row .tx span{ display:block; font-size:12.5px; color:var(--dk-mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dk-row .go{ font-size:12.5px; font-weight:800; color:var(--blue,#0fb5bf); flex:none; }
  .dk-empty{ font-size:13px; color:var(--dk-mut); line-height:1.5; }
  .dk-foot{ font-size:11.5px; line-height:1.9; color:var(--dk-mut); padding:0 6px; }
  .dk-foot a{ color:inherit; text-decoration:none; }
  .dk-foot a:hover{ text-decoration:underline; }

  /* ---- hojas flotantes (Crear · Soul · ánimo): modal centrado en vez de hoja inferior ---- */
  .cp-contained,.tm-ov{ align-items:center !important; justify-content:center !important; }
  .cp-contained .tm-sheet,.tm-ov .tm-sheet{ width:min(540px,92vw) !important; max-width:540px !important; max-height:88vh !important;
    border-radius:26px !important; box-shadow:0 40px 90px -30px rgba(0,0,0,.55); }

  /* ---- Tb: el mazo no se estira a todo el ancho ---- */
  #phone .tb-screen{ background:transparent; }

  /* ---- visores a pantalla completa (historias · post): el contenido en columna vertical, sin estirarse ---- */
  .st-ov,.im-ov{ display:flex; justify-content:center; }
  .st-ov>*,.im-ov>*{ max-width:min(520px,100vw); width:100%; }

  /* ---- insignias del modo prueba: no tapan el riel ---- */
  #town-sim-badge,.sim-badge{ left:auto !important; right:14px !important; }
}

/* ventanas de 1001–1220px: se esconde el panel derecho para que no se aprieten las columnas */
@media (min-width:1001px) and (max-width:1220px){
  :root{ --dk-rail:84px; }
  #phone .ph-screen{ grid-template-columns:var(--dk-rail) minmax(0,var(--dk-col)) 0 !important; }
  #dk-aside{ display:none !important; }
  #dk-brand img.dk-word{ display:none; }
  #dk-brand{ justify-content:center; padding-left:0; padding-right:0; }
  #phone .ph-navi{ justify-content:center; padding:13px 0 !important; }
  #phone .ph-navi::after{ display:none !important; }
  #phone .ph-navi .dot{ top:8px !important; left:auto !important; right:22px !important; }
  #phone .ph-plus{ width:52px !important; height:52px !important; margin:16px auto 0; border-radius:18px !important; }
  #phone .ph-plus::after{ display:none; }
}

/* pantallas muy grandes: la columna central crece un poco */
@media (min-width:1700px){ :root{ --dk-col:560px; --dk-aside:380px; } }