/*
 * Foro de la comunidad.
 *
 * bbPress trae su hoja pensada para fondo claro, asi que aqui pasa entera al
 * sistema Madera y Voltaje. Se carga solo en las paginas del foro.
 */

:root {
  --cec-bronce:  #C98F4F;   /* 6.78:1 sobre el fondo */
  --cec-plata:   #CFC7BC;   /* 11.31:1 */
  --cec-oro:     #E0B24C;   /* 9.59:1 */
  --cec-platino: #EDE6DA;   /* 15.26:1 */
}

/* --- Contenedores -------------------------------------------------------- */

html #bbpress-forums {
  font-family: var(--cec-font-body);
  font-size: 1.0625rem;
  color: var(--cec-ink);
  margin-bottom: var(--cec-md);
}

html #bbpress-forums ul.bbp-forums,
html #bbpress-forums ul.bbp-topics,
html #bbpress-forums ul.bbp-replies,
html #bbpress-forums ul.bbp-lead-topic {
  background: transparent;
  border: 1px solid var(--cec-line);
  border-radius: var(--cec-r-md);
  overflow: hidden;
  margin-bottom: var(--cec-md);
}

html #bbpress-forums li.bbp-header,
html #bbpress-forums li.bbp-footer,
html #bbpress-forums div.bbp-forum-header,
html #bbpress-forums div.bbp-topic-header,
html #bbpress-forums div.bbp-reply-header {
  background: var(--cec-raised);
  color: var(--cec-ink);
  border-color: var(--cec-line);
  font-size: .9375rem;
  font-weight: 700;
}

html #bbpress-forums li.bbp-body ul.forum,
html #bbpress-forums li.bbp-body ul.topic {
  background: var(--cec-surface);
  border-bottom: 1px solid var(--cec-line);
  padding: 18px 16px;
}

html #bbpress-forums li.bbp-body ul.forum:last-child,
html #bbpress-forums li.bbp-body ul.topic:last-child { border-bottom: 0; }

html #bbpress-forums li.bbp-body ul.forum:hover,
html #bbpress-forums li.bbp-body ul.topic:hover { background: var(--cec-raised); }

/* --- Titulos y enlaces --------------------------------------------------- */

html #bbpress-forums .bbp-forum-title,
html #bbpress-forums .bbp-topic-permalink {
  font-family: var(--cec-font-head);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--cec-ink);
  text-decoration: none;
}

html #bbpress-forums .bbp-forum-title:hover,
html #bbpress-forums .bbp-topic-permalink:hover { color: var(--cec-accent); }

html #bbpress-forums .bbp-forum-content,
html #bbpress-forums p.bbp-topic-meta,
html #bbpress-forums .bbp-topic-started-by,
html #bbpress-forums .bbp-forum-info .bbp-forum-content {
  color: var(--cec-muted);
  font-size: 1rem;
  line-height: 1.6;
}

html #bbpress-forums a { color: var(--cec-accent); }
html #bbpress-forums .bbp-author-name { color: var(--cec-ink); font-weight: 500; }

/* --- Contenido de las respuestas ----------------------------------------- */

html #bbpress-forums div.bbp-reply-content,
html #bbpress-forums div.bbp-topic-content {
  color: var(--cec-ink);
  font-size: 1.0625rem;
  line-height: 1.7;
}

html #bbpress-forums div.bbp-reply-content p,
html #bbpress-forums div.bbp-topic-content p { max-width: 66ch; }

html #bbpress-forums div.bbp-reply-author,
html #bbpress-forums div.bbp-topic-author {
  padding: 16px;
  text-align: left;
}

html #bbpress-forums .bbp-author-avatar img {
  border-radius: 999px;
  border: 1px solid var(--cec-line);
}

html #bbpress-forums div.bbp-reply-content,
html #bbpress-forums div.bbp-topic-content { padding: 16px 20px; }

html #bbpress-forums div.odd, html #bbpress-forums ul.odd { background: var(--cec-surface); }
html #bbpress-forums div.even, html #bbpress-forums ul.even { background: var(--cec-bg); }

/* --- Insignias de rango ---------------------------------------------------
   El rango nunca depende solo del color: lleva el nombre escrito y un numero
   de estrellas, asi que se entiende en escala de grises igual de bien.
   ------------------------------------------------------------------------- */

/* Ningun texto del sitio baja de 15px, insignias incluidas. */
.cec-rango {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-family: var(--cec-font-body);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .03em;
  white-space: nowrap;
}

.cec-rango__estrellas { font-size: .9375rem; letter-spacing: .06em; }

/* bbPress anuncia el rol interno de WordPress bajo cada mensaje. En un foro
   publico eso es ruido y ademas deja ver la estructura de permisos del sitio.
   El rango ya cumple la funcion de identificar a quien escribe. */
html #bbpress-forums div.bbp-author-role { display: none; }
.cec-rango__nombre { color: inherit; }
.cec-rango__puntos { font-weight: 500; opacity: .85; }

.cec-rango--nuevo   { color: var(--cec-muted); }
.cec-rango--bronce  { color: var(--cec-bronce); }
.cec-rango--plata   { color: var(--cec-plata); }
.cec-rango--oro     { color: var(--cec-oro); }
.cec-rango--platino { color: var(--cec-platino); }

/* Solo el rango mas alto lleva relleno: asi destaca sin necesitar otro color. */
.cec-rango--platino {
  background: var(--cec-platino);
  color: var(--cec-on-accent);
  border-color: var(--cec-platino);
}

/* --- Mi rango ------------------------------------------------------------- */

.cec-mirango {
  background: var(--cec-surface);
  border: 1px solid var(--cec-line);
  border-radius: var(--cec-r-md);
  padding: var(--cec-md);
  margin-block: var(--cec-md);
}

.cec-mirango__linea { margin: 0 0 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cec-mirango__meta { margin: 0 0 12px; color: var(--cec-muted); font-size: 1rem; }
.cec-mirango__meta b { color: var(--cec-accent); }
.cec-mirango--invitado { color: var(--cec-muted); }

.cec-barra {
  height: 10px;
  border-radius: 999px;
  background: var(--cec-raised);
  border: 1px solid var(--cec-line);
  overflow: hidden;
}
.cec-barra > span {
  display: block;
  height: 100%;
  background: var(--cec-accent);
  border-radius: 999px;
}

/* --- Tabla de participacion ---------------------------------------------- */

.cec-clasificacion th[scope="row"] {
  font-family: var(--cec-font-head);
  font-size: 1.1rem;
  color: var(--cec-accent);
  font-variant-numeric: tabular-nums;
  width: 1%;
}
.cec-clasificacion td { vertical-align: middle; }
.cec-clasificacion-nota,
.cec-clasificacion-vacia {
  color: var(--cec-muted);
  font-size: 1rem;
  margin-top: 12px;
  max-width: 66ch;
}

/* --- Formularios del foro ------------------------------------------------- */

html #bbpress-forums fieldset.bbp-form {
  background: var(--cec-surface);
  border: 1px solid var(--cec-line);
  border-radius: var(--cec-r-md);
  padding: var(--cec-md);
}

html #bbpress-forums fieldset.bbp-form legend {
  font-family: var(--cec-font-head);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--cec-ink);
  padding-inline: 8px;
}

html #bbpress-forums fieldset.bbp-form label {
  color: var(--cec-ink);
  font-weight: 500;
  font-size: .9375rem;
}

html #bbpress-forums input[type="text"],
html #bbpress-forums input[type="password"],
html #bbpress-forums input[type="email"],
html #bbpress-forums select,
html #bbpress-forums textarea,
html #bbpress-forums .wp-editor-area {
  background: var(--cec-raised);
  color: var(--cec-ink);
  border: 1px solid var(--cec-line);
  border-radius: var(--cec-r-sm);
  min-height: 48px;
  padding: 12px 14px;
  font-family: var(--cec-font-body);
  font-size: 1.0625rem;
  width: 100%;
}

html #bbpress-forums button,
html #bbpress-forums input[type="submit"],
html #bbpress-forums .bbp-submit-wrapper button {
  background: var(--cec-accent);
  color: var(--cec-on-accent);
  border: 1px solid var(--cec-accent);
  border-radius: 999px;
  font-family: var(--cec-font-body);
  font-weight: 700;
  font-size: 1rem;
  min-height: 48px;
  padding: 12px 26px;
  cursor: pointer;
}

html #bbpress-forums button:hover,
html #bbpress-forums input[type="submit"]:hover { background: #EFC463; border-color: #EFC463; }

html #bbpress-forums div.bbp-template-notice {
  background: var(--cec-raised);
  border: 1px solid var(--cec-bronze);
  border-radius: var(--cec-r-sm);
  color: var(--cec-ink);
}
html #bbpress-forums div.bbp-template-notice.error { border-color: var(--cec-danger, #F2A98F); }
html #bbpress-forums div.bbp-template-notice p { color: var(--cec-ink); }

/* Paginacion y navegacion del foro. */
html #bbpress-forums .bbp-pagination-links a,
html #bbpress-forums .bbp-pagination-links span.current {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cec-line);
  border-radius: var(--cec-r-sm);
  color: var(--cec-ink);
  text-decoration: none;
  margin-right: 6px;
}
html #bbpress-forums .bbp-pagination-links span.current {
  background: var(--cec-accent);
  color: var(--cec-on-accent);
  border-color: var(--cec-accent);
  font-weight: 700;
}

html #bbpress-forums .bbp-pagination-count { color: var(--cec-muted); font-size: .9375rem; }

/* La barra de estilos del editor de bbPress tambien viene clara. */
html #bbpress-forums div.bbp-the-content-wrapper .quicktags-toolbar {
  background: var(--cec-raised);
  border-color: var(--cec-line);
}
html #bbpress-forums div.bbp-the-content-wrapper input[type="button"] {
  background: var(--cec-raised);
  color: var(--cec-ink);
  border: 1px solid var(--cec-line);
  border-radius: var(--cec-r-sm);
  min-height: 36px;
  padding: 6px 12px;
  font-size: .875rem;
}

/* --- Movil ---------------------------------------------------------------- */

@media (max-width: 720px) {
  html #bbpress-forums li.bbp-body ul.forum,
  html #bbpress-forums li.bbp-body ul.topic { padding: 16px 12px; }

  html #bbpress-forums li.bbp-forum-info,
  html #bbpress-forums li.bbp-topic-title { width: 100%; float: none; }

  html #bbpress-forums li.bbp-forum-reply-count,
  html #bbpress-forums li.bbp-forum-topic-count,
  html #bbpress-forums li.bbp-topic-voice-count,
  html #bbpress-forums li.bbp-topic-reply-count {
    width: auto;
    float: none;
    display: inline-block;
    margin-right: 18px;
    color: var(--cec-muted);
    font-size: .9375rem;
  }

  html #bbpress-forums li.bbp-forum-freshness,
  html #bbpress-forums li.bbp-topic-freshness { width: 100%; float: none; text-align: left; }

  html #bbpress-forums div.bbp-reply-author,
  html #bbpress-forums div.bbp-topic-author {
    width: 100%;
    float: none;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--cec-line);
  }
  html #bbpress-forums .bbp-author-avatar img { width: 40px; height: 40px; }
  html #bbpress-forums div.bbp-reply-content,
  html #bbpress-forums div.bbp-topic-content { margin-left: 0; padding: 16px 12px; }
  .cec-rango { margin-top: 0; }
}