/* ==========================================================================
   FordCanTool – Asgaros Soft Skin (v1)
   Objetivo: integrar con la estética de la web SIN cambiar layout.
   ========================================================================== */

#af-wrapper{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  color:#333;
}

/* Fondo suave tipo home */
body .asgarosforum-wrapper,
body #af-wrapper{
  background: transparent;
}

/* Contenedor principal del foro (suave, sin “rediseño”) */
#af-wrapper{
  background:#f6f7f7;
  border-radius:16px;
  padding:16px;
}

/* Paneles/zonas del foro: bordes y sombra muy ligera */
#af-wrapper .content-container,
#af-wrapper .content-element,
#af-wrapper .notices-panel,
#af-wrapper #statistics,
#af-wrapper #read-unread{
  border-radius:14px;
}

/* “Bloques” principales con borde fino como tu home */
#af-wrapper .content-element,
#af-wrapper .content-container,
#af-wrapper #statistics-body,
#af-wrapper .notices-panel{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}

/* Títulos azules: mantenerlos, pero más refinados */
#af-wrapper .title-element{
  border-radius:12px;
  overflow:hidden;
}

/* Botones coherentes con tu azul */
#af-wrapper .af-button,
#af-wrapper button,
#af-wrapper input[type="submit"]{
  background:#2271b1;
  border:none;
  border-radius:12px;
  padding:10px 14px;
  color:#fff;
}
#af-wrapper .af-button:hover,
#af-wrapper button:hover,
#af-wrapper input[type="submit"]:hover{
  filter:brightness(.93);
}

/* Inputs estilo limpio */
#af-wrapper input[type="search"],
#af-wrapper input[type="text"],
#af-wrapper textarea,
#af-wrapper select{
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  padding:10px 12px;
}

/* Avisos tipo “callout” como tu home */
#af-wrapper .notices-panel .notice{
  background:#f6f7f7;
  border-left:5px solid #2271b1;
  padding:14px 18px;
  border-radius:12px;
  color:#333;
}

/* Pequeños textos/meta */
#af-wrapper small,
#af-wrapper .forum-stats,
#af-wrapper .forum-lastpost-small{
  color:#555;
}

/* Mobile: menos padding para que no se vea “gordo” */
@media (max-width: 520px){
  #af-wrapper{
    padding:12px;
    border-radius:14px;
  }
  #af-wrapper .content-element,
  #af-wrapper .content-container,
  #af-wrapper .notices-panel{
    border-radius:12px;
  }
}

/* ==========================================================================
   FordCanTool – Asgaros Soft Skin (v1.1)
   A) Suavizar bloques azules
   B) Micro-tipografía
   C) Badges de rol
   ========================================================================== */

/* --------------------------
   A) Bloques azules (títulos / secciones)
   -------------------------- */
#af-wrapper .title-element{
  border-radius:14px;
  padding:10px 14px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

/* Si el azul es muy “plano”, darle un borde inferior sutil */
#af-wrapper .title-element{
  border-bottom:1px solid rgba(255,255,255,.25);
}

/* --------------------------
   B) Micro-tipografía
   -------------------------- */
#af-wrapper h1,
#af-wrapper h2,
#af-wrapper h3{
  letter-spacing:-0.2px;
}

#af-wrapper .forum-title,
#af-wrapper .topic-title,
#af-wrapper a.forum-title,
#af-wrapper a.topic-title{
  font-weight:700;
}

#af-wrapper small,
#af-wrapper .forum-stats,
#af-wrapper .forum-lastpost-small,
#af-wrapper .af-meta{
  font-size:13px;
  color:#6b7280;
  line-height:1.55;
}

/* Separadores y “·” más discretos */
#af-wrapper .forum-stats,
#af-wrapper .forum-lastpost-small{
  opacity:.95;
}

/* --------------------------
   C) Badges de rol (suave)
   Nota: depende de clases; si no aplica, lo afinamos tras ver HTML.
   -------------------------- */
#af-wrapper .profile-link.highlight-admin,
#af-wrapper .profile-link.highlight-moderator,
#af-wrapper .profile-link.highlight-author{
  position:relative;
  padding-right:8px;
}

/* Admin */
#af-wrapper .profile-link.highlight-admin::after{
  content:"ADMIN";
  display:inline-block;
  margin-left:8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.3px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(185,28,28,.25);
  color:#b91c1c;
  background:rgba(185,28,28,.06);
  vertical-align:middle;
}

/* Moderator */
#af-wrapper .profile-link.highlight-moderator::after{
  content:"MOD";
  display:inline-block;
  margin-left:8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.3px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(124,58,237,.25);
  color:#7c3aed;
  background:rgba(124,58,237,.06);
  vertical-align:middle;
}

/* Author (OP) – muy discreto */
#af-wrapper .profile-link.highlight-author::after{
  content:"OP";
  display:inline-block;
  margin-left:8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.3px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(31,111,235,.22);
  color:#2271b1;
  background:rgba(34,113,177,.06);
  vertical-align:middle;
}

/* Mobile: badges un pelín más compactos */
@media (max-width: 520px){
  #af-wrapper .profile-link.highlight-admin::after,
  #af-wrapper .profile-link.highlight-moderator::after,
  #af-wrapper .profile-link.highlight-author::after{
    font-size:10px;
    padding:2px 7px;
    margin-left:6px;
  }
}

/* ==========================================================================
   Ajuste fino: centrar verticalmente títulos azules
   ========================================================================== */

#af-wrapper .title-element{
  display:flex;
  align-items:center;        /* centra vertical */
  min-height:48px;           /* altura visual equilibrada */
  padding:0 18px;            /* padding horizontal limpio */
}

/* Texto del título */
#af-wrapper .title-element{
  line-height:1.2;
}

/* En móvil, un pelín menos alto */
@media (max-width: 520px){
  #af-wrapper .title-element{
    min-height:44px;
    padding:0 16px;
  }
}

/* ==========================================================================
   Mejora: Estadísticas + botón "Nuevo debate"
   ========================================================================== */

/* --- Estadísticas: contenedor como card --- */
#af-wrapper #statistics{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  overflow:hidden;
  margin-top:18px;
}

/* Cabecera gris -> más “home style”, menos bloque */
#af-wrapper #statistics .title-element,
#af-wrapper #statistics .title-element-dark{
  background:#f6f7f7 !important;
  color:#333 !important;
  border-bottom:1px solid rgba(0,0,0,.08);
  box-shadow:none !important;
  border-radius:0 !important;
  min-height:48px;
}

/* Cuerpo con aire */
#af-wrapper #statistics-body{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:10px 14px 14px 14px;
}

/* Elementos stats: separación suave */
#af-wrapper .statistics-element{
  padding:10px 0;
}

/* Línea inferior (online users): que no parezca “tabla” */
#af-wrapper #statistics-online-users{
  border-top:1px solid rgba(0,0,0,.08);
  padding-top:10px;
  margin-top:10px;
}

/* --- Botón "Nuevo debate": micro ajuste coherente --- */
#af-wrapper a.af-button,
#af-wrapper .af-button{
  border-radius:12px;
  padding:10px 14px;
  font-weight:700;
  letter-spacing:.1px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

/* Si el botón lleva icono, alinearlo fino */
#af-wrapper a.af-button i,
#af-wrapper .af-button i{
  margin-right:8px;
}

/* Mobile: un pelín menos sombra */
@media (max-width: 520px){
  #af-wrapper a.af-button,
  #af-wrapper .af-button{
    box-shadow:0 4px 12px rgba(0,0,0,.08);
  }
}