/* ===========================================================================
   FORO76 — estilos de la pantalla del socio.
   Reusa las variables del portal (--red, --ink, --mut, --line, --surf, --ok).
   No pisa nada de las otras pantallas: todas las clases van con prefijo foro/f.
   =========================================================================== */

/* barra de arriba: buscar + nuevo tema */
.forobar{display:flex;gap:12px;align-items:center;margin:18px 0 20px;flex-wrap:wrap}
.forosearch{display:flex;gap:8px;flex:1;min-width:220px}
.forosearch input{flex:1;margin:0}
.forobar .btn.p{white-space:nowrap}

/* lista de temas del feed */
.forolist{display:flex;flex-direction:column;gap:10px}
.forocard{display:block;border:1px solid var(--line,#e4e4e1);border-radius:12px;
  padding:14px 16px;background:var(--paper,#fff);cursor:pointer;text-decoration:none;
  color:inherit;transition:border-color .12s,box-shadow .12s}
.forocard:hover{border-color:var(--red,#e11b22);box-shadow:0 4px 14px rgba(0,0,0,.06)}
.fctop{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.fctit{font-size:15px;line-height:1.4;color:var(--ink,#111113);font-weight:500}
.fcmeta{display:flex;gap:12px;align-items:center;margin-top:8px;flex-wrap:wrap;
  font-size:12.5px;color:var(--mut,#6c6c73)}
.fctec{background:var(--surf,#faf9f7);border:1px solid var(--line,#e4e4e1);
  border-radius:20px;padding:1px 9px;font-size:11.5px;color:var(--mut,#6c6c73)}
.fctec.gen{border-color:#c9ddf3;background:#eef5fd;color:#1f5fa5}

/* pastilla de estado */
.fpill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;
  padding:2px 9px;border-radius:20px;white-space:nowrap;
  background:#eef5fd;color:#1f5fa5}
.fpill i{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}
.fpill.ok{background:#e9f6ee;color:#1e7a45}
.fpill.gris{background:#f1efe8;color:#6c6c73}

/* feed vacio */
.forovacio{text-align:center;padding:40px 20px;border:1px dashed var(--line,#d9d7cf);
  border-radius:14px;display:flex;flex-direction:column;gap:8px;align-items:center}
.forovacio b{font-size:16px;color:var(--ink,#111113)}
.forovacio span{font-size:13.5px;color:var(--mut,#6c6c73);max-width:360px}
.forovacio .btn{margin-top:8px}

/* volver */
.fback{display:inline-block;font-size:13px;color:var(--mut,#6c6c73);cursor:pointer;
  margin-bottom:8px;text-decoration:none}
.fback:hover{color:var(--red,#e11b22)}

/* campos del alta */
.forocampo{margin:0 0 16px}
.forocampo label{display:block;font-size:12.5px;font-weight:600;color:var(--ink,#111113);margin-bottom:6px}
.forocampo textarea,.forocampo input,.forocampo select{width:100%;margin:0;
  border:1px solid var(--line,#e4e4e1);border-radius:10px;padding:10px 12px;
  font-size:14px;font-family:inherit;color:var(--ink,#111113);background:#fff}
.forocampo textarea{resize:vertical;min-height:90px}
.forocampo select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236C6C73' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
.forocampo select:disabled{background-color:var(--surf,#faf9f7);color:var(--mut2,#9a9aa1);cursor:default}
.uhint{font-size:12px;color:var(--mut2,#9a9aa1);margin-top:5px;line-height:1.4}

.foroerr{font-size:13px;color:var(--red,#d91c26);margin-top:8px;min-height:0}
.forobtns{display:flex;justify-content:flex-end;margin-top:8px}

/* aviso azul de parecidos */
.foroaviso{background:#eef5fd;border:1px solid #c9ddf3;border-radius:10px;
  padding:12px 14px;font-size:13.5px;color:#1f5fa5;line-height:1.5;margin-bottom:16px}
.foroaviso.gris{background:var(--surf,#faf9f7);border-color:var(--line,#e4e4e1);color:var(--mut,#6c6c73)}

/* franja "ninguno me sirve" */
.foronada{border-top:1px solid var(--line,#e4e4e1);margin-top:18px;padding-top:16px;
  text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}
.foronada span{font-size:13.5px;color:var(--mut,#6c6c73)}

/* preview del titulo */
.foroprev{background:var(--surf,#faf9f7);border-radius:10px;padding:12px 14px;
  margin:14px 0;font-size:14px;line-height:1.5}
.fpr-r{display:block;font-size:11px;color:var(--mut2,#9a9aa1);text-transform:uppercase;
  letter-spacing:.03em;margin-bottom:4px}
.foroprev b{font-weight:500;color:var(--ink,#111113)}
.fpr-c{color:var(--mut,#6c6c73)}

/* ---- LA CABECERA DE LA SALA ----
   Es la celda mas visible: titulo grande y una franja con quien la abrio y
   cuando. Con fondo y borde para que se lea como un encabezado de verdad y no
   como texto suelto. */
.forohd{margin:6px 0 20px;background:var(--surf,#faf9f7);
  border:1px solid var(--line,#e4e4e1);border-radius:12px;padding:16px 18px}
.forohd-tit{font-size:19px;font-weight:600;line-height:1.35;color:var(--ink,#111113)}
.forohd-meta{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap;
  font-size:12.5px;color:var(--mut,#6c6c73)}
.forohd-abrio{margin-top:10px;padding-top:10px;border-top:1px solid var(--line,#e4e4e1);
  font-size:12.5px;color:var(--mut,#6c6c73)}
.forohd-abrio b{color:var(--ink,#111113);font-weight:600}

/* cada mensaje, estilo chat */
.foromsg{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line,#efeee9)}
.foromsg:last-of-type{border-bottom:0}
.foromsg.autor{background:var(--surf,#faf9f7);border-radius:12px;padding:14px;border-bottom:0;margin-bottom:6px}
.foromsg.resuelve{background:#e9f6ee;border-radius:12px;padding:14px;border-bottom:0;border:1px solid #bfe0cd}
.favatar{width:38px;height:38px;border-radius:50%;flex:none;display:flex;
  align-items:center;justify-content:center;font-size:13px;font-weight:600;
  background:#e7e6f4;color:#4a44a0}
.favatar.of{background:var(--red,#e11b22);color:#fff}
.fbody{flex:1;min-width:0}
.fbautor{font-size:13px;font-weight:600;color:var(--ink,#111113);margin-bottom:4px;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fmaq{font-weight:400;font-size:12px;color:var(--mut2,#9a9aa1)}
/* la fecha y hora del mensaje: empujada a la derecha, tono suave. Es lo que
   convierte la charla en historial. */
.ffecha{margin-left:auto;font-weight:400;font-size:11.5px;color:var(--mut2,#9a9aa1);white-space:nowrap}
.fresuelve{font-weight:600;font-size:11px;color:#1e7a45;background:#dff0e6;
  border-radius:20px;padding:1px 8px}
.ftexto{font-size:14px;line-height:1.6;color:var(--ink2,#2c2c2a);white-space:pre-wrap}
.fmarcar{display:inline-block;margin-top:8px;font-size:12.5px;color:var(--red,#e11b22);
  cursor:pointer;border-bottom:1px solid currentColor}

/* responder */
.fresponder{margin-top:18px;border-top:1px solid var(--line,#e4e4e1);padding-top:16px}
.fresponder textarea{width:100%;margin:0 0 10px;border:1px solid var(--line,#e4e4e1);
  border-radius:10px;padding:10px 12px;font-size:14px;font-family:inherit;resize:vertical;min-height:70px}
.frbtns{display:flex;justify-content:space-between;align-items:center;gap:12px}
.fsalir{font-size:12.5px;color:var(--mut2,#9a9aa1);cursor:pointer}
.fsalir:hover{color:var(--red,#e11b22)}

/* sala cerrada */
.forocerrado{margin-top:18px;background:var(--surf,#faf9f7);border:1px solid var(--line,#e4e4e1);
  border-radius:10px;padding:14px;font-size:13.5px;color:var(--mut,#6c6c73);text-align:center;line-height:1.5}
.forocerrarbox{margin-top:14px;text-align:center;font-size:13px;color:var(--mut,#6c6c73)}
.fcerrar-no{color:var(--mut2,#9a9aa1);cursor:pointer;border-bottom:1px solid currentColor;margin-left:4px}
.fcerrar-no:hover{color:var(--red,#e11b22)}

@media(max-width:600px){
  .forobar{flex-direction:column;align-items:stretch}
  .forohd-tit{font-size:17px}
  .ffecha{margin-left:0}
}