/* Tuit (egv.es/tuit/) — tres columnas al estilo Twitter/Bluesky. Reutiliza los tokens de ../../css/style.css y
   las clases comunes de ../../cuenta/css/cuenta.css (recurso-cabecera, cuenta-error/ok/aviso, avatar-mini/grande);
   aquí solo lo que no existe todavía. */

[data-tuit-aviso]{transition:opacity .4s ease;}
[data-tuit-aviso].tuit-aviso-oculto{opacity:0;}

/* El H1 "Tuit" queda solo para lectores de pantalla (Eugeni: quitar la palabra de encima de la caja de escribir),
   así que se recupera el aire de sobra de arriba (.cuenta-container trae 40px de padding-top de serie). */
/* justify-content:center centra las tres columnas dentro del contenedor (suman ~1190 px y el contenedor llega a 1400).
   El <main> central hereda `main{padding-top:var(--header-h)}` de style.css: se anula para que arranque a la misma altura
   que las columnas laterales. */
.tuit-layout{display:grid;grid-template-columns:270px minmax(0,600px) 270px;justify-content:center;gap:24px;align-items:start;margin-top:-26px;}
.tuit-col{min-width:0;}
.tuit-col-centro{padding-top:0;}
.tuit-col-izq,.tuit-col-der{position:sticky;top:20px;}

.tuit-perfil{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:14px;
}
.tuit-contador-total{margin:0;font-size:13.5px;}
.tuit-nav{display:flex;flex-direction:column;gap:6px;font-size:14px;}
.tuit-nav a{color:var(--primary-2);font-weight:600;}
.tuit-nav a:hover{text-decoration:underline;}

.tuit-info{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;
}
.tuit-info h2{font-size:15px;font-weight:800;margin-bottom:8px;}
.tuit-info p{margin-bottom:8px;font-size:13.5px;}

/* ---------- Formulario (composer) ---------- */
.tuit-form{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 16px;margin-bottom:22px;
}
.tuit-form-fila{display:flex;gap:12px;align-items:flex-start;}
.tuit-form-fila .avatar-mini{width:38px;height:38px;margin-top:2px;}
.tuit-form textarea{
  flex:1;min-width:0;resize:vertical;min-height:44px;max-height:220px;
  border:0;background:transparent;color:var(--text);font:inherit;font-size:16px;line-height:1.4;padding:8px 0;
}
.tuit-form textarea:focus{outline:none;}
.tuit-form-pie{display:flex;align-items:center;gap:12px;margin:10px 0 0 50px;}
.tuit-icono-imagen{
  font-size:20px;line-height:1;cursor:pointer;padding:6px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.tuit-icono-imagen:hover{background:var(--surface-2);}
.tuit-contador-chars{margin-left:auto;font-size:12.5px;color:var(--text-faint);}
.tuit-contador-chars.is-cerca{color:var(--warning);}
.tuit-contador-chars.is-pasado{color:var(--danger);font-weight:700;}

.tuit-preview{position:relative;margin:10px 0 0 50px;max-width:320px;}
.tuit-preview img{display:block;width:100%;border-radius:var(--radius-sm);border:1px solid var(--border);}
.tuit-quitar-imagen{
  position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;
  background:rgba(0,0,0,.65);color:#fff;font-size:14px;line-height:1;border:0;
  display:flex;align-items:center;justify-content:center;
}
.tuit-quitar-imagen:hover{background:rgba(0,0,0,.85);}

/* ---------- Lista de tuits ---------- */
.tuit-lista{display:flex;flex-direction:column;gap:12px;list-style:none;padding:0;margin:0;}
.tuit-tarjeta{
  position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;
}
/* Cabecera al estilo Bluesky/Twitter: avatar a la izquierda (redondo) y, a la derecha, nombre + @usuario + hora
   en una sola línea, con el texto del tuit justo debajo — ya no hay una fila de cabecera separada al final. */
.tuit-fila{display:flex;gap:10px;align-items:flex-start;}
.tuit-avatar{width:40px;height:40px;margin-top:1px;}
.tuit-cuerpo{flex:1;min-width:0;}
.tuit-tarjeta-cabecera{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px;margin-bottom:2px;}
.tuit-tarjeta-cabecera strong{font-size:14.5px;overflow-wrap:anywhere;}
.tuit-tarjeta-cabecera .muted{font-size:12.5px;overflow-wrap:anywhere;}
.tuit-texto{font-size:15px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;margin-bottom:8px;}
.tuit-imagen{display:block;max-width:100%;height:auto;border-radius:var(--radius-sm);border:1px solid var(--border);margin-bottom:8px;}
.tuit-enlace{
  display:inline-block;font-size:13px;font-weight:600;color:var(--primary-2);
  padding:6px 10px;border:1px solid var(--border);border-radius:999px;overflow-wrap:anywhere;max-width:100%;
}
.tuit-enlace:hover{border-color:var(--primary);}

/* Barra de acciones al estilo Bluesky (28/09/2026, calcada de una captura suya: comentar, republicar, me gusta,
   compartir y "···"). Decorativa salvo lo que ya existía de verdad: el "me gusta" solo cambia de aspecto en este
   navegador (sin guardarse) y el menú "···" es donde ahora vive el borrado real de un tuit propio. */
.tuit-acciones{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:8px;border-top:1px solid var(--border);}
.tuit-accion{
  display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;cursor:pointer;
  padding:6px 10px;border-radius:999px;font-size:13px;line-height:1;color:var(--text-faint);
}
.tuit-accion:hover{background:var(--surface-2);color:var(--text);}
.tuit-accion span[aria-hidden]{font-size:16px;}
.tuit-accion-num{font-size:12.5px;}
.tuit-accion-like:hover{background:rgba(248,113,113,.12);color:var(--danger);}
.tuit-accion-like[aria-pressed="true"]{color:var(--danger);}

.tuit-menu{position:relative;}
.tuit-menu-btn[aria-expanded="true"]{background:var(--surface-2);color:var(--text);}
.tuit-menu-dropdown{
  position:absolute;right:0;top:calc(100% + 4px);min-width:190px;z-index:5;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  box-shadow:0 12px 30px rgba(0,0,0,.28);padding:6px;
}
.tuit-menu-dropdown[hidden]{display:none;}
.tuit-menu-dropdown form{margin:0;}
.tuit-menu-item{
  display:block;width:100%;text-align:left;background:transparent;border:0;padding:9px 10px;
  border-radius:var(--radius-sm);font-size:13.5px;color:var(--text);cursor:pointer;
}
.tuit-menu-item:hover{background:var(--surface-2);}
.tuit-menu-item-borrar{color:var(--danger);}
.tuit-menu-item-borrar:hover{background:rgba(248,113,113,.12);}
.tuit-menu-item-inerte{color:var(--text-faint);cursor:default;}
.tuit-menu-item-inerte:hover{background:transparent;}

/* ---------- Responsive: mismo criterio que empleo/ocasión (columna derecha baja, luego todo en una columna) ---------- */
@media (max-width:1150px){
  .tuit-layout{grid-template-columns:minmax(0,1fr) 280px;}
  .tuit-col-izq{display:none;}
}
@media (max-width:820px){
  .tuit-layout{display:flex;flex-direction:column;gap:16px;}
  .tuit-col-der{position:static;}
  .tuit-form-pie,.tuit-preview{margin-left:0;}
}

/* ---------- Reacciones, republicados y comentarios (30/09/2026) ---------- */
a.tuit-accion{text-decoration:none;}
.tuit-form-accion{margin:0;display:inline-flex;}
.tuit-accion-inerte{cursor:default;opacity:.55;}
.tuit-accion-inerte:hover{background:transparent;color:var(--text-faint);}
.tuit-accion-retuit:hover{background:rgba(52,211,153,.12);color:var(--success,#34d399);}
.tuit-accion-retuit[aria-pressed="true"]{color:var(--success,#34d399);font-weight:700;}
.tuit-accion:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.tuit-accion.tuit-copiado{color:var(--success,#34d399);}
.tuit-retuiteado{margin:0 0 6px 50px;font-size:12.5px;color:var(--text-faint);font-weight:600;}

.tuit-volver{margin:0 0 12px;font-size:14px;}
.tuit-volver a{color:var(--primary-2);font-weight:600;}
.tuit-comentarios{margin-top:22px;}
.tuit-comentarios h2{font-size:16px;font-weight:800;margin-bottom:12px;}
.tuit-sin-comentarios{font-size:14px;}
.tuit-form-comentar{margin-bottom:14px;}
.tuit-comentarios-lista{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
.tuit-comentario{
  display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:12px 14px;
}
.tuit-comentario .tuit-texto{margin-bottom:4px;}
.tuit-comentario form{margin:0;}
.tuit-comentario-borrar{
  background:transparent;border:0;cursor:pointer;color:var(--text-faint);font-size:12.5px;padding:4px 0;
}
.tuit-comentario-borrar:hover{color:var(--danger);text-decoration:underline;}
@media (max-width:820px){ .tuit-retuiteado{margin-left:0;} }
/* A 320 px la fila de 6 botones medía más que la pantalla (medido: 348 px de ancho con un viewport de 320). */
@media (max-width:420px){
  .tuit-tarjeta{padding:12px;}
  .tuit-accion{padding:6px 5px;gap:4px;}
  .tuit-fila{gap:8px;}
}
.tuit-texto a,.tuit-etiqueta{color:#4da3ff;}
html[data-theme="light"] .tuit-texto a,html[data-theme="light"] .tuit-etiqueta{color:#0b57d0;}
.tuit-texto a{text-decoration:underline;}
.tuit-etiqueta{font-weight:600;}

/* @menciones y nombre del autor: enlazan al perfil */
.tuit-mencion,.tuit-texto a.tuit-mencion{color:#4da3ff;text-decoration:none;}
html[data-theme="light"] .tuit-mencion{color:#0b57d0;}
.tuit-mencion:hover{text-decoration:underline;}
.tuit-autor{color:inherit;text-decoration:none;}
.tuit-autor:hover{text-decoration:underline;}

/* Perfil público */
.tuit-perfil-cab{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:14px;padding-bottom:6px;}
.tuit-perfil-cab > *:not(.tuit-banner):not(.tuit-perfil-fila):not(.tuit-pestanas){margin-left:16px;margin-right:16px;}
.tuit-banner{position:relative;aspect-ratio:3/1;background:var(--primary-grad);overflow:hidden;}
.tuit-banner img{width:100%;height:100%;object-fit:cover;display:block;}
.tuit-banner-editar{position:absolute;right:10px;bottom:10px;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);color:#fff;text-decoration:none;font-size:18px;}
.tuit-banner-editar:hover,.tuit-banner-editar:focus-visible{background:rgba(0,0,0,.8);}
.tuit-banner-previo{border-radius:10px;margin:6px 0;}
.tuit-perfil-fila{display:flex;justify-content:space-between;align-items:flex-start;padding:0 16px;}
.tuit-perfil-fila .tuit-perfil-avatar{width:92px;height:92px;margin-top:-46px;border:4px solid var(--surface);font-size:38px;flex:none;}
.tuit-perfil-botones{display:flex;align-items:center;gap:8px;padding-top:10px;}
.tuit-perfil-botones form{margin:0;}
.tuit-perfil-menu-btn{border:1px solid var(--border);border-radius:50%;width:36px;height:36px;}
.tuit-perfil-botones .tuit-menu-dropdown{right:0;left:auto;white-space:nowrap;}
.tuit-perfil-nombre{font-size:22px;line-height:1.2;margin:8px 16px 0;overflow-wrap:anywhere;}
.tuit-perfil-usuario{color:var(--text-muted);margin:0 16px 8px;}
.tuit-perfil-cifras{display:flex;flex-wrap:wrap;gap:4px 16px;margin-bottom:10px;color:var(--text-muted);}
.tuit-perfil-cifras strong{color:var(--text);}
.tuit-perfil-bio{white-space:pre-wrap;overflow-wrap:anywhere;margin-bottom:12px;}
.tuit-pestanas{display:flex;border-top:1px solid var(--border);margin-top:8px;}
.tuit-pestanas a{flex:1;text-align:center;padding:12px 8px;color:var(--text-muted);font-weight:600;text-decoration:none;border-bottom:3px solid transparent;}
.tuit-pestanas a:hover{background:var(--surface-2);}
.tuit-pestanas a.is-activa{color:var(--text);border-bottom-color:#4da3ff;}
.tuit-form-perfil{display:flex;flex-direction:column;gap:8px;}
.tuit-form-perfil textarea{width:100%;}
.tuit-check{display:flex;gap:8px;align-items:center;}
@media (max-width:480px){.tuit-perfil-fila .tuit-perfil-avatar{width:76px;height:76px;margin-top:-38px;font-size:30px;}}

/* Retoque según la captura de Bluesky (1/10/2026): sin tarjeta, banner 4:1, botones en píldora, pestañas con subrayado corto */
.tuit-perfil-cab{background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0;padding-bottom:0;}
.tuit-banner{aspect-ratio:4/1;}
.tuit-banner-volver{position:absolute;left:10px;top:10px;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);color:#fff;text-decoration:none;font-size:18px;}
.tuit-banner-volver:hover,.tuit-banner-volver:focus-visible{background:rgba(0,0,0,.8);}
.tuit-perfil-fila .tuit-perfil-avatar{width:92px;height:92px;margin-top:-46px;border:4px solid var(--bg);}
.tuit-perfil-botones .btn{border-radius:999px;}
.tuit-perfil-nombre{font-size:26px;font-weight:800;}
.tuit-pestanas{border-top:0;margin-top:14px;}
.tuit-pestanas a{border-bottom:0;padding:12px 8px 0;}
.tuit-pestanas a span{display:inline-block;padding-bottom:10px;border-bottom:3px solid transparent;}
.tuit-pestanas a.is-activa{border-bottom:0;}
.tuit-pestanas a.is-activa span{border-bottom-color:#4da3ff;}
.tuit-pestanas a:hover{background:transparent;color:var(--text);}
.tuit-perfil-cab{overflow:visible;}
.tuit-perfil-fila{position:relative;z-index:2;}
.tuit-perfil-fila .tuit-perfil-avatar{position:relative;z-index:2;}
.tuit-banner{z-index:0;}

/* Buscador y tendencias (columna derecha) */
.tuit-buscador{margin-bottom:14px;}
.tuit-buscador input{width:100%;padding:11px 16px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;}
.tuit-buscador input:focus{outline:2px solid #4da3ff;outline-offset:1px;}
.tuit-tendencias{list-style:none;margin:0;padding:0;}
.tuit-tendencias li{display:flex;flex-direction:column;padding:7px 0;}
.tuit-tendencias .muted{font-size:12.5px;}
a.tuit-etiqueta{text-decoration:none;}
a.tuit-etiqueta:hover{text-decoration:underline;}
.tuit-col-der .tuit-info{margin-bottom:14px;}
.tuit-layout-texto{grid-template-columns:minmax(0,600px);}
.tuit-legal{font-size:12.5px;color:var(--text-muted);line-height:1.8;margin:0 4px;}
.tuit-legal a{color:var(--text-muted);}
.tuit-legal a:hover{text-decoration:underline;}

/* Pestañas «Para ti / Siguiendo» de la portada, cifras enlazadas y listas de seguidores */
.tuit-pestanas-linea{border-bottom:1px solid var(--border);margin:0 0 12px;}
.tuit-perfil-cifras a{color:var(--text-muted);text-decoration:none;}
.tuit-perfil-cifras a:hover{text-decoration:underline;}
.tuit-personas{list-style:none;margin:0;padding:0;}
.tuit-persona{display:flex;gap:10px;align-items:flex-start;padding:12px 4px;border-bottom:1px solid var(--border);}
.tuit-persona .avatar-mini{flex:none;}
.tuit-persona-datos{min-width:0;}
.tuit-persona-datos strong{display:block;overflow-wrap:anywhere;}
.tuit-persona-datos p{margin:2px 0 0;font-size:13.5px;overflow-wrap:anywhere;}

/* Respuestas a comentarios (hilos) y tuits citados */
.tuit-comentario-resp{margin-left:28px;}
.tuit-comentario-acciones{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.tuit-respondiendo{font-size:13px;color:var(--text-muted);margin:0 0 6px;}
.tuit-cita{display:block;border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin:6px 0 8px;color:inherit;text-decoration:none;}
a.tuit-cita:hover{background:var(--surface-2);}
.tuit-cita-cab{display:block;font-size:13.5px;overflow-wrap:anywhere;}
.tuit-cita-texto{display:block;font-size:14px;line-height:1.4;margin-top:2px;overflow-wrap:anywhere;white-space:pre-wrap;}
.tuit-cita-img{display:block;max-width:100%;max-height:200px;border-radius:8px;margin-top:6px;}
.tuit-cita-falta{font-size:13.5px;}

/* Columna izquierda: tarjetas de plan (gratuito operativo / Starter en preparación) */
.tuit-col-izq .tuit-info{margin-bottom:14px;}
.tuit-plan-etiqueta{display:inline-block;padding:2px 10px;border-radius:999px;border:1px solid var(--border);font-size:12.5px;font-weight:700;}
.tuit-plan-ok{border-color:#16a34a;color:#16a34a;}
.tuit-plan-precio{font-size:18px !important;font-weight:800;}
#tuitCuenta strong{color:var(--text);}
.tuit-vestibulo{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--primary-2);font-size:14px;}
.tuit-vestibulo:hover strong{text-decoration:underline;}
.tuit-vestibulo .muted{font-size:13px;}
.tuit-btn-registro{display:block;width:100%;text-align:center;}

/* Aviso para quien lee sin cuenta: solo en pantallas estrechas, donde la columna izquierda (con «Registrarse») se oculta */
.tuit-aviso-estrecho{display:none;margin-bottom:14px;}
.tuit-aviso-botones{display:flex;flex-wrap:wrap;gap:8px;margin:0 !important;}
@media (max-width:1150px){ .tuit-aviso-estrecho{display:block;} }
.tuit-herramientas{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:6px;}
.tuit-herramientas a{display:block;padding:8px 10px;border:1px solid var(--border);border-radius:10px;font-weight:600;font-size:14px;color:var(--primary-2);text-decoration:none;}
.tuit-herramientas a:hover,.tuit-herramientas a:focus-visible{border-color:var(--primary-2);}