/* Lazzo — Tablón de anuncios (avisos)
   Lo pinta js/features/tablon/tablon.js dentro de #tablon-dashboard.
   Va inline en el dashboard a propósito: no es un overlay, así que no entra en
   el stack de z-index (toast 1500 / overlays ≤1400 / .modal-overlay 600).

   Estética de corcho real: los tonos tostados salen de la paleta cálida que ya
   tiene la app (--bg #fdf6f0, --c2 melocotón). La textura es 100% CSS con
   gradientes — nada de imágenes: no hay peticiones extra, no toca la CSP y no
   engorda el precache. */

.tablon-card { padding: 14px 14px 12px; }

/* ── Cabecera (fuera del corcho, sobre el fondo normal de la tarjeta) ── */
.tablon-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.tablon-head-t {
  display: flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: .92rem; color: var(--text);
}
.tablon-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 99px; background: var(--c1); color: #fff;
  font-size: .68rem; font-weight: 700;
}
.tablon-add {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0;
  border: none; border-radius: 9px; cursor: pointer;
  background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff;
  box-shadow: 0 2px 6px rgba(123, 94, 167, .28);
}

/* ── El corcho ── */
.tablon-board {
  position: relative;
  padding: 14px 12px 12px;
  border-radius: 10px;
  background-color: #dcbc93;
  /* Moteado del corcho: cuatro capas de puntos a tamaños distintos para que no
     se vea el patrón repetido. Alfas bajas = corcho nuevo, no corcho sucio. */
  background-image:
    radial-gradient(circle at 18% 26%, rgba(150, 112, 68, .18) 0 2px, transparent 3px),
    radial-gradient(circle at 68% 62%, rgba(178, 140, 96, .16) 0 3px, transparent 4px),
    radial-gradient(circle at 42% 82%, rgba(132,  98, 58, .13) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 14%, rgba(196, 162, 118, .20) 0 2px, transparent 3px);
  background-size: 37px 37px, 53px 53px, 29px 29px, 43px 43px;
  /* Marco de madera + profundidad hacia dentro */
  border: 3px solid #b58a58;
  box-shadow:
    inset 0 2px 10px rgba(120, 86, 48, .22),
    inset 0 -1px 4px rgba(255, 244, 224, .22),
    0 1px 2px rgba(0, 0, 0, .08);
}

/* ── Notas de papel ── */
.tablon-list { display: flex; flex-direction: column; gap: 9px; }

.tablon-item {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 11px;
  background: #fffdf5;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(74, 48, 22, .26), 0 0 0 1px rgba(120, 88, 50, .13);
}
/* Ligera rotación alterna: da el aire de papeles clavados a mano sin que el
   texto deje de leerse ni se muevan las zonas de toque. */
.tablon-list .tablon-item:nth-child(odd)  { transform: rotate(-.45deg); }
.tablon-list .tablon-item:nth-child(even) { transform: rotate( .4deg); }

/* Chincheta de los fijados */
.tablon-item.fijado { position: relative; margin-top: 7px; }
.tablon-item.fijado::before {
  /* top/left explicitos: con position:absolute sin coordenadas, el ::before de
     un contenedor flex cae en su "posicion estatica" y acaba donde no toca. */
  content: ''; position: absolute; top: -6px; left: 13px;
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ff8b7a 0 22%, #d7392a 60%, #9e2318 100%);
  box-shadow: 0 2px 3px rgba(60, 30, 10, .45);
}

.tablon-check {
  background: none; border: none; padding: 1px 0 0; cursor: pointer;
  color: #a8927c; flex-shrink: 0; line-height: 0;
}
.tablon-item.hecho .tablon-check { color: #2f9e63; }

.tablon-body { flex: 1; min-width: 0; cursor: pointer; }
.tablon-txt {
  display: block; font-size: .86rem; line-height: 1.35; color: #3a2f28;
  word-break: break-word;
}
.tablon-item.hecho {
  background: #f4ede0;
  box-shadow: 0 1px 3px rgba(74, 48, 22, .20);
}
.tablon-item.hecho .tablon-txt {
  text-decoration: line-through; color: #8a7a6c;
}

.tablon-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 3px;
}
.tablon-chip {
  font-size: .64rem; font-weight: 700; padding: 1px 7px; border-radius: 99px;
  background: color-mix(in srgb, var(--c1) 14%, transparent); color: var(--c1);
}
.tablon-autor {
  font-size: .66rem; color: #9a8779; text-transform: uppercase; letter-spacing: .03em;
}

/* ── Sección "Hechos" (sobre el corcho) ── */
.tablon-toggle {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: 100%; margin-top: 11px; padding: 6px 10px;
  background: rgba(255, 250, 240, .50); border: none; border-radius: 99px;
  color: #5a4426; text-shadow: 0 1px 0 rgba(255, 252, 245, .55);
  font-size: .72rem; font-weight: 700; font-family: var(--sans); cursor: pointer;
}
.tablon-list-hechos { margin-top: 9px; }

/* ── Vacío ── */
.tablon-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 4px; padding: 18px 10px 16px;
  color: #5f4a2c;
}
.tablon-empty i { color: rgba(90, 62, 30, .60); }
.tablon-empty p {
  margin: 3px 0 0; font-size: .84rem; font-weight: 700; color: #493618;
  text-shadow: 0 1px 1px rgba(255, 240, 220, .35);
}
.tablon-empty span { font-size: .72rem; line-height: 1.4; color: #5f4a2c; }

/* ── Chips de hijo en el modal (fondo normal, no corcho) ── */
#aviso-hijo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tablon-hchip {
  padding: 6px 11px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--border); background: var(--card);
  color: var(--muted); font-size: .76rem; font-weight: 600; font-family: var(--sans);
}
.tablon-hchip.on {
  border-color: var(--c1); color: #fff;
  background: linear-gradient(135deg, var(--c1), var(--c2));
}