/* Texto enriquecido de La Mesa: cómo se ve lo escrito y la barra para escribirlo.
 * Usa las variables de mesa.css; los valores de después de la coma son por si
 * esto se abre suelto. */

/* ── Lo escrito: vale en el hilo, la crónica, los recados y la ficha ── */
.rt, .post .body, .carta, .doc-body, .rico-area { --rt-gold: var(--gold, #a67c3d); }

.rc-centro { text-align: center; }
.rc-derecha { text-align: right; }
.rc-justificado { text-align: justify; hyphens: auto; }
.rico-area .al-centro { text-align: center; }
.rico-area .al-derecha { text-align: right; }
.rico-area .al-justificado { text-align: justify; hyphens: auto; }

.rc-lectura, .rico-area div.rc-lectura {
  margin: 1.1em 0; padding: 12px 20px;
  background: var(--gold-bg, #f8f1e0); border-left: 3px solid var(--gold, #a67c3d);
  border-radius: 0 10px 10px 0; font-family: var(--ital, 'IM Fell English', serif); font-style: italic;
}
.rc-aparte, .rico-area div.rc-aparte {
  margin: 1.1em 0; padding: 10px 18px; font-size: .92em;
  background: var(--ultra-bg, #eef0f7); border-left: 3px solid var(--ultra, #39497a);
  border-radius: 0 10px 10px 0; color: var(--fg-2, #5c5545);
}
.rc-lectura > :last-child, .rc-aparte > :last-child { margin-bottom: 0; }

.post .body h2, .carta h2, .rico-area h2 { font-family: var(--title, Georgia, serif); font-size: 1.45em; font-weight: 600; margin: 1.1em 0 .4em; }
.post .body h3, .carta h3, .rico-area h3 { font-family: var(--title, Georgia, serif); font-size: 1.18em; font-weight: 600; margin: 1em 0 .35em; }
.post .body h4, .carta h4, .rico-area h4 { font-family: var(--caps, serif); font-size: .72em; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3, #8d8574); margin: 1em 0 .35em; }
.post .body ul, .post .body ol, .carta ul, .carta ol, .rico-area ul, .rico-area ol { margin: 0 0 .7em; padding-left: 1.4em; }
.post .body li ul, .post .body li ol, .carta li ul, .carta li ol, .rico-area li ul, .rico-area li ol { margin: .2em 0 .2em; }
.post .body blockquote, .carta blockquote, .rico-area blockquote {
  margin: 1em 0; padding: 8px 18px; border-left: 3px solid var(--gold, #a67c3d);
  background: var(--surface-2, #f5f1e6); border-radius: 0 9px 9px 0;
}
.post .body blockquote p:last-child, .carta blockquote p:last-child, .rico-area blockquote p:last-child { margin-bottom: 0; }
.post .body hr.sep, .carta hr.sep, .rico-area hr { border: 0; height: 1px; margin: 1.6em 0; background: linear-gradient(90deg, transparent, var(--gold-line, rgba(166,124,61,.42)), transparent); }
.post .body table, .carta table, .rico-area table { border-collapse: collapse; width: 100%; font-size: .92em; margin: .8em 0; }
.post .body th, .post .body td, .carta th, .carta td, .rico-area th, .rico-area td { border: 1px solid var(--line-2, #d8d0bb); padding: 5px 9px; text-align: left; vertical-align: top; }
.post .body th, .carta th, .rico-area th { background: var(--surface-2, #f5f1e6); font-weight: 600; }
.post .body .tabla-wrap, .carta .tabla-wrap, .rico-area .tabla-wrap { overflow-x: auto; }
.post .body code, .carta code, .rico-area code { font-family: ui-monospace, monospace; font-size: .86em; background: var(--surface-2, #f5f1e6); padding: 1px 5px; border-radius: 4px; }

mark.c-amarillo { background: #f3d95c99; }
mark.c-rojo { background: #f0a79aa6; }
mark.c-verde { background: #b6d9a0b3; }
mark.c-azul { background: #a9c4eab3; }
mark.c-violeta { background: #cdb5e6b3; }
mark.c-gris { background: #d6d1c4b3; }
mark { color: inherit; padding: 0 .12em; border-radius: 3px; }

.fig { display: block; margin: .8em 0; }
.fig img { max-width: 100%; height: auto; border-radius: 8px; display: block; }
.fig .pie { display: block; font-family: var(--ital, serif); font-style: italic; font-size: .88em; color: var(--fg-3, #8d8574); margin-top: 4px; }

/* ── El cuadro de escribir ── */
.rico { position: relative; }
.rico-barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px;
  padding: 5px 6px; margin: 0 0 8px;
  background: var(--surface-2, #f5f1e6); border: 1px solid var(--line-2, #d8d0bb); border-radius: 9px;
  position: sticky; top: 0; z-index: 5;
}
.rico-barra .rg { display: inline-flex; align-items: center; gap: 1px; position: relative; padding: 0 5px; border-right: 1px solid var(--line-2, #d8d0bb); }
.rico-barra .rg:last-child, .rico-barra .rg.fin { border-right: 0; }
.rico-barra .rg.fin { margin-left: auto; }
.rico-barra .rg[hidden] { display: none; }
.rico-barra .rb {
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  min-width: 30px; height: 30px; padding: 0 6px; border: 1px solid transparent; border-radius: 6px;
  background: none; color: var(--fg-2, #5c5545); cursor: pointer; font: inherit; font-size: 16px; line-height: 1;
}
.rico-barra .rb:hover:not(:disabled) { background: var(--surface, #fffdf8); border-color: var(--line-3, #c6bca3); }
.rico-barra .rb.on { background: var(--clay-bg, #fbeee9); border-color: var(--clay-hi, #c96545); color: var(--clay-lo, #8d3520); }
.rico-barra .rb:disabled { opacity: .35; cursor: default; }
.rico-barra .rb .fl { font-size: 12px; font-family: var(--caps, serif); letter-spacing: .08em; }
.rico-barra .rb.ancho { padding: 0 8px; }
.rico-barra .rb sup, .rico-barra .rb sub { font-size: 10px; }
.rmenu {
  position: absolute; top: 34px; left: 0; z-index: 20; min-width: 170px; padding: 5px;
  background: var(--surface, #fffdf8); border: 1px solid var(--gold-line, rgba(166,124,61,.42)); border-radius: 10px;
  box-shadow: 0 16px 36px -18px rgba(29,25,18,.4);
}
.rmenu[hidden] { display: none; }
.rmenu button { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; background: none; border-radius: 6px; cursor: pointer; font: inherit; font-size: 16px; }
.rmenu button:hover { background: var(--surface-2, #f5f1e6); }
.rmenu.paleta { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; width: 134px; }
.rmenu.paleta[hidden] { display: none; }
.rmenu .sw { width: 28px; height: 28px; padding: 0; border: 1px solid var(--line-3, #c6bca3); border-radius: 6px; text-align: center; }
.rmenu .sw.no { background: var(--surface, #fffdf8); color: var(--fg-3, #8d8574); font-size: 18px; line-height: 1; }

.rico-enlace { display: flex; gap: 6px; margin: 0 0 8px; }
.rico-enlace[hidden] { display: none; }
.rico-enlace input { flex: 1; font-size: 15px; padding: 6px 10px; }
.rico-enlace button { border: 1px solid var(--line-3, #c6bca3); background: var(--surface, #fffdf8); border-radius: 7px; padding: 0 12px; cursor: pointer; font: inherit; font-size: 15px; }
.rico-enlace .ok { background: var(--clay, #b1492f); color: #fff; border-color: var(--clay-lo, #8d3520); }

.rico-area {
  outline: none; padding: 2px 0 6px; font-size: 19px; line-height: 1.58; word-wrap: break-word; overflow-wrap: anywhere;
}
.rico-area p { margin: 0 0 .65em; }
.rico-area { position: relative; }
.rico-area.vacio::before { content: attr(data-ph); position: absolute; left: 0; top: 2px; color: var(--fg-4, #b3ab99); pointer-events: none; }
.rico-area a { color: var(--clay, #b1492f); text-decoration: underline; cursor: text; }
.rico-area ::selection { background: var(--clay-bg, #fbeee9); }
.rico-area .fig { display: block; position: relative; }
.rico-area .fig img { outline: 1px solid var(--line-2, #d8d0bb); }
.rico-area .fig .pie.vacio:empty::before { content: attr(data-ph); color: var(--fg-4, #b3ab99); }
.rico-area td, .rico-area th { min-width: 3em; }

.rico.en-texto .rico-area { display: none; }
.rico textarea.rico-fuente { font-family: ui-monospace, monospace; font-size: 15px; line-height: 1.5; min-height: 160px; width: 100%; border: 1px solid var(--line-2, #d8d0bb); border-radius: 8px; padding: 10px 12px; background: var(--surface, #fffdf8); }
.rico textarea.rico-fuente[hidden] { display: none; }

.rico-pie { display: flex; justify-content: flex-end; font-size: 13px; color: var(--fg-4, #b3ab99); min-height: 4px; }
.rico-pie .rico-cuenta.pasa { color: var(--wine, #8a2f2f); font-weight: 600; }
.rico-pie[data-aviso]::before { content: attr(data-aviso); margin-right: auto; color: var(--wine, #8a2f2f); font-size: 14.5px; }
.rico.bad .rico-area, .rico.bad textarea.rico-fuente { background: var(--wine-bg, #f9ecea); border-radius: 6px; }

/* El .editor de La Mesa ya trae su borde: aquí la barra va dentro y la caja de texto no pelea con él. */
.editor .rico .rico-area { min-height: 92px; }
.editor .rico textarea.rico-fuente { min-height: 140px; font-size: 15px; }

@media (max-width: 640px) {
  .rico-barra .rb { min-width: 34px; height: 34px; }
  .rico-barra .rg { padding: 0 3px; }
  .rico-barra .rg.fin { margin-left: 0; }
  .rico-barra { position: static; }
}
@media print { .rico-barra, .rico-pie { display: none; } }