/*
 * Rubalegre UI Base v0.1
 * ----------------------
 * "UI Freeze": un componente entra acá únicamente después de haber sido
 * usado con éxito por al menos dos recorridos funcionales independientes.
 * Hoy entran: identidad (color/tipografía), botones, formularios, listados,
 * chips de estado. NO entran: sidebar, tarjetas, tablas complejas,
 * dashboard, navegación entre módulos, widgets — ninguno tiene consumidor
 * real todavía. Ver rubalegre-platform/README.md § UI Freeze.
 */

/* ── Tokens ────────────────────────────────────────────────────────────── */

:root {
  /* Identidad institucional (Rubalegre / Rafael Torre) — verificada contra
     capturas reales de plataforma.rafaeltorre.com (BuddyBoss), no supuesta */
  --rb-crema:   #F5F0E8;
  --rb-bordo:   #7A1626;
  --rb-dorado:  #C9A84C;
  --rb-verde:   #1B5E20;
  --rb-rojo:    #B32D2E;
  --rb-texto:   #2B2320;
  --rb-borde:   #DCD0BC;

  /* Derivados — variaciones de uso, no nuevos colores */
  --rb-bordo-hover:  #5C0F1C;
  --rb-crema-panel:  #FFFFFF;
  --rb-texto-suave:  #6B6055;

  /* Tipografía — 100% sans-serif, igual que la plataforma real (BuddyBoss).
     'Lora' se descarta: era una suposición mía basada en el tema WP por
     defecto, no en el producto real. Corregido tras ver capturas. */
  --rb-fuente-titulo: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rb-fuente-base:   'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Espaciado y forma */
  --rb-radio:      8px;
  --rb-radio-chip: 999px;
  --rb-sombra:     0 1px 2px rgba(43, 35, 32, 0.08);
}

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700;800&display=swap');

/* ── Base ──────────────────────────────────────────────────────────────── */

.rb-ui {
  font-family: var(--rb-fuente-base);
  color: var(--rb-texto);
  background: var(--rb-crema);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.rb-pagina {
  max-width: 40rem;
  margin: 0 auto;
  /* v1.0.2: el top compensa la barra superior fija (ri-iconbar), que desde esta
     versión también vive en Comunicación y Tareas, no solo en Inicio. Misma
     cuenta que usa .ri-main: altura de la admin bar de WP + alto del propio
     iconbar + un respiro real antes del contenido. */
  padding: calc(var(--wp-admin--admin-bar--height, 32px) + 4.75rem) 1rem 3rem;
  width: 100%;
  box-sizing: border-box;
}

/* Responsive real — antes era un ancho fijo de 40rem en cualquier
   pantalla, sin ningún @media en todo el archivo (agregado 2026-08-2x).
   Mobile-first: en pantallas chicas usa casi todo el ancho disponible;
   a partir de tablet/desktop crece progresivamente en vez de quedar
   siempre en 640px, que se sentía angosto y "cuadrado" en monitores
   grandes — sobre todo con paneles anchos como "Publicar en más
   cuadernos". */
@media (min-width: 640px) {
  .rb-pagina { max-width: 46rem; padding: calc(var(--wp-admin--admin-bar--height, 32px) + 4.75rem) 1.5rem 3.5rem; }
}
@media (min-width: 1024px) {
  .rb-pagina { max-width: 60rem; padding: calc(var(--wp-admin--admin-bar--height, 32px) + 4.75rem) 2rem 4rem; }
}
@media (min-width: 1440px) {
  .rb-pagina { max-width: 72rem; }
}
@media (max-width: 48.9375rem) {
  /* admin bar de WP pasa a 46px por debajo de este ancho — mismo ajuste que .ri-main en Inicio */
  .rb-pagina { padding-top: calc(46px + 4.75rem); }
}

.rb-barra-superior {
  display: flex; flex-wrap: wrap; gap: 0.6em;
  padding: 0.8rem 1rem;
}
@media (min-width: 640px) {
  .rb-barra-superior { padding: 0.8rem 1.5rem; }
}

.rb-nota {
  font-style: italic;
  color: var(--rb-texto-suave);
}

.rb-ui h1, .rb-ui h2, .rb-ui h3 {
  font-family: var(--rb-fuente-titulo);
  font-weight: 700;
  color: var(--rb-bordo);
  line-height: 1.3;
  margin: 0 0 0.5em;
}

.rb-ui h1 { font-size: 1.75rem; }
.rb-ui h2 { font-size: 1.25rem; }
.rb-ui h3 { font-size: 1rem; }

.rb-ui a          { color: var(--rb-bordo); text-decoration: underline; text-underline-offset: 2px; }
.rb-ui a:hover     { color: var(--rb-bordo-hover); }
.rb-ui a:focus-visible,
.rb-ui button:focus-visible,
.rb-ui input:focus-visible,
.rb-ui select:focus-visible,
.rb-ui textarea:focus-visible {
  outline: 2px solid var(--rb-dorado);
  outline-offset: 2px;
}

/* ── Botones — uno primario, uno secundario, nada más ────────────────────
   Consumidores reales: Guardar borrador / Publicar (primario),
   Volver al listado / Espacios (equivalente hoy a un link, candidato a
   secundario el día que se convierta en botón real). */

.rb-btn {
  font-family: var(--rb-fuente-base);
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.55em 1.1em;
  border-radius: var(--rb-radio);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              transform 0.12s ease, box-shadow 0.15s ease;
}
.rb-btn:active { transform: scale(0.96); }

.rb-btn-primario {
  background: linear-gradient(155deg, var(--rb-bordo) 0%, var(--rb-bordo-hover) 100%);
  color: var(--rb-crema-panel);
  box-shadow: 0 2px 6px rgba(122, 22, 38, 0.28);
}
.rb-btn-primario:hover {
  background: linear-gradient(155deg, var(--rb-bordo-hover) 0%, #43070f 100%);
  box-shadow: 0 3px 10px rgba(122, 22, 38, 0.38);
  transform: translateY(-1px);
}

.rb-btn-secundario {
  background: var(--rb-crema-panel);
  color: var(--rb-bordo);
  border-color: var(--rb-borde);
  box-shadow: var(--rb-sombra);
}
.rb-btn-secundario:hover {
  background: rgba(122, 22, 38, 0.06);
  border-color: var(--rb-bordo);
  transform: translateY(-1px);
}

/* Bug real (encontrado 2026-09-23): la regla genérica ".rb-ui a" (más abajo)
   tiene más especificidad que ".rb-btn-primario"/".rb-btn-secundario" solas
   (dos selectores contra uno), así que un <a> usado como botón perdía su
   color propio y volvía al color de link genérico — con fondo y texto del
   mismo bordo en el primario, ilegible ("rojo con rojo"), y subrayado de
   yapa. Nunca se había notado porque casi todos los .rb-btn-primario/
   secundario del proyecto son <button>, no <a> — el primero en pisar esto
   fue el botón "Nueva tarea" de Tareas. Se corrige acá, para cualquier
   .rb-btn que alguna vez sea un enlace, en cualquier módulo. */
.rb-ui a.rb-btn { text-decoration: none; }
.rb-ui a.rb-btn-primario { color: var(--rb-crema-panel); }
.rb-ui a.rb-btn-secundario { color: var(--rb-bordo); }

.rb-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Formularios — consumido por: crear aviso, crear CCA ────────────────── */

.rb-campo {
  margin: 0 0 1.1em;
  display: block;
}

.rb-campo label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.35em;
  color: var(--rb-texto);
}

.rb-campo .rb-ayuda {
  font-size: 0.8125rem;
  color: var(--rb-texto-suave);
  margin-top: 0.3em;
}

.rb-ui input[type="text"],
.rb-ui input[type="email"],
.rb-ui input[type="search"],
.rb-ui textarea,
.rb-ui select {
  font-family: var(--rb-fuente-base);
  font-size: 0.9375rem;
  color: var(--rb-texto);
  background: var(--rb-crema-panel);
  border: 1px solid var(--rb-borde);
  border-radius: var(--rb-radio);
  padding: 0.6em 0.75em;
  width: 100%;
  max-width: 28rem;
  box-sizing: border-box;
}

.rb-ui textarea { max-width: 100%; resize: vertical; }

.rb-check {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.9375rem;
}
.rb-check input[type="checkbox"] { width: auto; accent-color: var(--rb-bordo); }

/* ── Listados — consumido por: avisos, CCA (Comunicación) ───────────────── */

.rb-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rb-borde);
}

.rb-lista-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0.85em 0.25em;
  border-bottom: 1px solid var(--rb-borde);
}

.rb-lista-item__principal {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  min-width: 0;
}

.rb-lista-item__titulo {
  font-weight: 500;
  color: var(--rb-texto);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rb-lista-item__titulo:hover { text-decoration: underline; }

.rb-lista-vacia {
  padding: 1.5em 0.25em;
  color: var(--rb-texto-suave);
  font-style: italic;
}

/* ── Chips de estado — el elemento distintivo de RB27 ────────────────────
   Único concepto que se repite en absolutamente todo el sistema: cada
   recurso tiene un estado, cada permiso tiene una decisión. */

.rb-chip {
  font-family: var(--rb-fuente-base);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.25em 0.7em;
  border-radius: var(--rb-radio-chip);
  white-space: nowrap;
  display: inline-block;
}

.rb-chip-borrador   { background: rgba(201, 168, 76, 0.18); color: #8A6D1F; }
.rb-chip-publicado  { background: rgba(27, 94, 32, 0.12);   color: var(--rb-verde); }
.rb-chip-archivado  { background: rgba(43, 35, 32, 0.08);   color: var(--rb-texto-suave); }
.rb-chip-eliminado  { background: rgba(179, 45, 46, 0.14);  color: var(--rb-rojo); }
.rb-chip-error      { background: rgba(179, 45, 46, 0.12);  color: var(--rb-rojo); }
.rb-chip-tipo       { background: var(--rb-crema-panel); color: var(--rb-bordo); border: 1px solid var(--rb-bordo); }

/* Badge de rol/contexto — distinto de los chips de estado. Patrón real:
   "Docente", "PRIVADO", "Grupo". Consumidor: autor de un mensaje/respuesta. */
.rb-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2em 0.65em;
  border-radius: var(--rb-radio-chip);
  background: rgba(122, 22, 38, 0.08);
  color: var(--rb-bordo);
  display: inline-block;
}
.rb-badge-dorado { background: rgba(201, 168, 76, 0.25); color: #8A6D1F; }

/* ── Alertas — pantallas de error/sin-autorización del router ───────────── */

.rb-alerta {
  border-left: 4px solid var(--rb-rojo);
  background: rgba(179, 45, 46, 0.06);
  padding: 0.9em 1.1em;
  border-radius: 0 var(--rb-radio) var(--rb-radio) 0;
  margin: 1em 0;
}
.rb-alerta h2 { color: var(--rb-rojo); font-size: 1.05rem; margin-bottom: 0.25em; }
.rb-alerta p  { margin: 0; }

/* ── Avatar — círculo con inicial, patrón real de BuddyBoss ──────────────
   Consumidores: entrada de mensaje (historial), caja de redacción. */

.rb-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--rb-bordo);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.rb-avatar-sm { width: 1.75rem; height: 1.75rem; font-size: 0.75rem; }

/* ── Entrada de mensaje ("historial") — copiado del patrón real de
   BuddyBoss: avatar + nombre + fecha + contenido. Consumidor: conversación
   de CCA. */

.rb-post {
  display: flex;
  gap: 0.75em;
  padding: 1em 0;
  border-bottom: 1px solid var(--rb-borde);
}
.rb-post:last-child { border-bottom: none; }

.rb-post__cuerpo { flex: 1; min-width: 0; }

.rb-post__cabecera {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  flex-wrap: wrap;
  margin-bottom: 0.2em;
}

.rb-post__nombre { font-weight: 600; font-size: 0.9rem; color: var(--rb-texto); }
.rb-post__fecha  { font-size: 0.8rem; color: var(--rb-texto-suave); }

.rb-post__contenido {
  background: var(--rb-crema);
  border-radius: var(--rb-radio);
  padding: 0.7em 0.9em;
  font-size: 0.9375rem;
}

/* ── Caja de redacción ("compose box") — mismo patrón que "Escribí algo en
   el grupo..." de BuddyBoss. Consumidor: crear aviso/CCA, responder. */

.rb-compose {
  display: flex;
  gap: 0.75em;
  background: var(--rb-crema-panel);
  border: 1px solid var(--rb-borde);
  border-radius: var(--rb-radio);
  padding: 1em;
  margin-bottom: 1.25em;
  width: 100%;
  box-sizing: border-box;
}
.rb-compose__cuerpo { flex: 1; min-width: 0; }
.rb-compose textarea,
.rb-compose input[type="text"] { width: 100%; max-width: 100%; box-sizing: border-box; }

.rb-compose__privado {
  display: flex; align-items: center; gap: 0.6em; margin: 0.5em 0;
  flex-wrap: wrap;
}
.rb-check { display: flex; align-items: center; gap: 0.35em; font-size: 0.85em; cursor: pointer; }
.rb-compose__privado select {
  font-size: 0.85em; padding: 0.3em 0.6em; border-radius: var(--rb-radio-chip);
  border: 1px solid var(--rb-borde);
}
.rb-compose__privado select:disabled { opacity: 0.5; }

.rb-bubble--privada { border: 1px dashed var(--rb-dorado); }
.rb-bubble__candado { font-size: 0.85em; opacity: 0.75; cursor: help; }

.rb-compose__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75em;
  margin-top: 0.75em;
  border-top: 1px solid var(--rb-borde);
  padding-top: 0.75em;
}
.rb-compose__adjunto {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-size: 0.85rem; color: var(--rb-texto-suave); cursor: pointer;
  padding: 0.4em 0.6em; border-radius: var(--rb-radio);
  transition: background .15s ease;
}
.rb-compose__adjunto:hover { background: rgba(122,22,38,0.06); }

.rb-compose__destinatario {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rb-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ── Selector de destinatarios — patrón de mc-destinatarios.php (RB26),
   ya validado en producción con ~750 alumnos. Radio Todos/Específicos +
   lista de personas con checkbox. */

.rb-dest-radios {
  display: flex;
  gap: 0.6em;
  margin-bottom: 0.75em;
}
.rb-dest-radios label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.6em;
  border-radius: var(--rb-radio);
  border: 2px solid var(--rb-dorado);
  background: var(--rb-crema);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 2.5rem;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.rb-dest-radios label:hover { transform: translateY(-1px); }
/* Estado activo con contraste real (antes: idéntico marcado/sin marcar,
   la jerarquía visual dependía solo del puntito del radio nativo). */
.rb-dest-radios label:has(input:checked) {
  background: var(--rb-bordo);
  border-color: var(--rb-bordo);
  color: var(--rb-crema-panel);
}
.rb-dest-radios input[type="radio"] { width: auto; accent-color: var(--rb-bordo); }

.rb-dest-panel {
  border: 2px solid var(--rb-dorado);
  border-radius: var(--rb-radio);
  background: var(--rb-crema-panel);
  overflow: hidden;
}
.rb-dest-panel input[type="text"] {
  max-width: 100%;
  border: none;
  border-bottom: 1px solid var(--rb-borde);
  border-radius: 0;
}
.rb-dest-lista { max-height: 14rem; overflow-y: auto; }
.rb-dest-item {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.6em 0.85em;
  border-bottom: 1px solid var(--rb-borde);
  cursor: pointer;
  font-size: 0.875rem;
  min-height: 2.5rem;
}
.rb-dest-item:last-child { border-bottom: none; }
.rb-dest-item input[type="checkbox"] { width: auto; accent-color: var(--rb-bordo); }

/* Título de grupo (nombre del curso) dentro de "Publicar en más
   cuadernos" — agregado 2026-08-2x. */
.rb-dest-grupo-titulo {
  padding: 0.5em 0.85em 0.2em; font-size: 0.72rem; font-weight: 700;
  color: var(--rb-texto-suave); text-transform: uppercase; letter-spacing: 0.03em;
}

/* "Publicar en más cuadernos" rediseñado (2026-08-2x) — selección por
   curso completo (pills), no alumno por alumno. */
.rb-mas-cuadernos-panel {
  border: 1px solid var(--rb-borde); border-radius: var(--rb-radio);
  padding: 1em; margin: 0.6em 0; background: #fff;
}
.rb-mas-cuadernos-header {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 0.5em; margin-bottom: 0.3em;
}
.rb-mas-cuadernos-grupo-titulo {
  font-size: 0.72rem; font-weight: 700; color: var(--rb-dorado-oscuro, #8A6D1F);
  text-transform: uppercase; letter-spacing: 0.03em; margin: 0.8em 0 0.4em;
}
.rb-mas-cuadernos-pills {
  display: flex; flex-wrap: wrap; gap: 0.5em;
}
.rb-pill-check {
  display: flex; align-items: center; gap: 0.4em;
  border: 1px solid var(--rb-borde); border-radius: 0.6rem;
  padding: 0.4em 0.7em; font-size: 0.82rem; cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.rb-pill-check:hover { transform: translateY(-1px); border-color: var(--rb-dorado); }
.rb-pill-check:has(input:checked) {
  background: rgba(201, 168, 76, 0.22); border-color: var(--rb-dorado); font-weight: 600;
}
.rb-pill-check input { accent-color: var(--rb-bordo); }
.rb-btn-mas-cuadernos--activo {
  background: #b3543f; color: #fff; border-color: #b3543f;
}

/* ── Layout con menú lateral — justificado por el índice de inicio (primer
   consumidor real). Mismo patrón que la plataforma real: iconos + label,
   estado activo = fondo bordó, texto blanco. */

.rb-layout { display: flex; min-height: 100vh; }

.rb-sidebar {
  width: 15rem;
  flex-shrink: 0;
  background: var(--rb-crema-panel);
  border-right: 1px solid var(--rb-borde);
  padding: 1.5em 0.75em;
}
.rb-sidebar__item {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.7em 0.9em;
  border-radius: var(--rb-radio);
  color: var(--rb-texto);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  margin-bottom: 0.2em;
}
.rb-sidebar__item:hover { background: rgba(122, 22, 38, 0.06); }
.rb-sidebar__item.activo { background: var(--rb-bordo); color: #fff; }
.rb-sidebar__icono { font-size: 1.1rem; width: 1.4em; text-align: center; }

.rb-contenido { flex: 1; min-width: 0; }

/* ── Header superior ─────────────────────────────────────────────────── */

.rb-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9em 1.5em;
  background: var(--rb-crema-panel);
  border-bottom: 1px solid var(--rb-borde);
}
.rb-topbar__marca { display: flex; align-items: center; gap: 0.6em; font-weight: 700; color: var(--rb-bordo); }
.rb-topbar__usuario { display: flex; align-items: center; gap: 0.6em; font-size: 0.875rem; color: var(--rb-texto-suave); }

/* ── "Mensajes" (Fase 2, 2026-08-2x) — buscador + tarjetas por categoría ── */

.rm-buscador { max-width: 560px; margin: 0.8em 0 1.2em; }
.rm-buscador__input {
  width: 100%; box-sizing: border-box; padding: 0.75em 1em; font-size: 1rem;
  border: 2px solid var(--rb-borde); border-radius: 999px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.rm-buscador__input:focus {
  border-color: var(--rb-dorado); box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.18); outline: none;
}

.rm-categoria {
  display: flex; align-items: center; gap: 0.5em;
  margin: 1.4em 0 0.5em; font-size: 0.78rem; font-weight: 700;
  color: var(--rb-bordo); letter-spacing: 0.04em;
  border-bottom: 2px solid var(--rb-dorado); padding-bottom: 0.4em;
}
.rm-categoria__icono { font-size: 1rem; }
.rm-categoria__cuenta {
  margin-left: auto; background: rgba(201, 168, 76, 0.2); color: var(--rb-bordo);
  border-radius: 999px; font-size: 0.7rem; padding: 0.15em 0.6em; font-weight: 700;
}

.rm-item {
  display: flex; align-items: center; gap: 0.85em;
  padding: 0.7em 0.9em; margin-bottom: 0.4em; max-width: 560px;
  background: var(--rb-crema-panel); border: 1px solid var(--rb-borde);
  border-radius: 0.7rem; text-decoration: none; color: inherit;
  box-shadow: var(--rb-sombra);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  animation: rb-aparecer 0.3s ease both;
}
.rm-item:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 4px 14px rgba(122, 22, 38, 0.14);
  border-color: var(--rb-dorado);
}
.rm-item:active { transform: translateY(0) scale(0.99); }
.rm-item__texto { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rm-item__nombre { font-weight: 600; color: var(--rb-texto); }
.rm-item__subtitulo {
  font-size: 0.8rem; color: var(--rb-texto-suave);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rm-item__flecha {
  font-size: 1.4rem; color: var(--rb-dorado); font-weight: 700;
  transition: transform 0.15s ease;
}
.rm-item:hover .rm-item__flecha { transform: translateX(4px); }

/* ── Animación de entrada sutil — tarjetas y bloques de nivel ───────────── */

@keyframes rb-aparecer {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rb-anim { animation: rb-aparecer 0.35s ease both; }

/* Apertura de paneles colapsables (Mis docs, Más cuadernos, Programar) —
   se dispara sola cada vez que JS pasa el panel de display:none a
   display:block (el navegador vuelve a montar el elemento en el layout,
   así que la animación arranca de cero) — sin tocar el JS de toggle.
   Agregado 2026-08-2x, pedido explícito: "más vida" en transiciones. */
@keyframes rb-panel-abrir {
  from { opacity: 0; transform: translateY(-8px) scaleY(0.96); transform-origin: top; }
  to   { opacity: 1; transform: translateY(0) scaleY(1); }
}
.rb-dest-panel, .rb-mas-cuadernos-panel, #rc-programar-panel, #rt-programar-panel {
  animation: rb-panel-abrir 0.22s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

/* ── Burbujas de chat — conversación (CCA hoy, CCI cuando exista) ─────────
   Reemplaza .rb-post para vistas de conversación: visualmente tipo
   WhatsApp/Telegram, mismos datos reales (autor, contenido, fecha) que
   antes, solo cambia la presentación. */

.rb-chat { display: flex; flex-direction: column; gap: 0.6em; }

.rb-bubble-fila {
  display: flex; align-items: flex-end; gap: 0.5em; max-width: 100%;
  animation: rb-aparecer 0.3s ease both;
}
.rb-bubble-fila--propio { align-self: stretch; flex-direction: row-reverse; }
.rb-bubble-fila--otro   { align-self: stretch; }

.rb-bubble {
  padding: 0.6em 0.85em; border-radius: 1rem;
  font-size: 0.9rem; line-height: 1.4;
  flex: 1; min-width: 0;
  position: relative;
}

/* Redondeo asimétrico según el LADO (propio/otro = quién mira) — el
   color va aparte, por ROL de quién escribe (ver más abajo). */
.rb-bubble-fila--otro .rb-bubble   { border-bottom-left-radius: 0.25rem; box-shadow: 0 1px 3px rgba(43, 35, 32, 0.06); }
.rb-bubble-fila--propio .rb-bubble { border-bottom-right-radius: 0.25rem; box-shadow: 0 2px 6px rgba(43, 35, 32, 0.18); }

/* Color por ROL de quien escribe (agregado 2026-08-2x) — independiente
   de la posición. Antes el color dependía de "es mío o de otro"; ahora
   depende de si el AUTOR es staff institucional o familia/alumno,
   sin importar quién esté mirando la conversación en ese momento. */
.rb-bubble-fila--autor-staff .rb-bubble {
  background: linear-gradient(155deg, var(--rb-bordo) 0%, var(--rb-bordo-hover) 100%);
  color: #fff; border: none;
}
.rb-bubble-fila--autor-familia .rb-bubble {
  background: linear-gradient(155deg, #EFCE85 0%, var(--rb-dorado) 100%);
  color: var(--rb-texto); border: 1px solid rgba(43, 35, 32, 0.08);
}

/* "Colita" de burbuja — el color tiene que matchear el fondo real de
   cada combinación posición+rol, no solo la posición. */
.rb-bubble-fila--otro.rb-bubble-fila--autor-staff .rb-bubble::before {
  content: ''; position: absolute; bottom: 0; left: -0.4rem; width: 0.6rem; height: 0.6rem;
  background: var(--rb-bordo-hover); clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.rb-bubble-fila--otro.rb-bubble-fila--autor-familia .rb-bubble::before {
  content: ''; position: absolute; bottom: 0; left: -0.4rem; width: 0.6rem; height: 0.6rem;
  background: var(--rb-dorado); clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.rb-bubble-fila--propio.rb-bubble-fila--autor-staff .rb-bubble::after {
  content: ''; position: absolute; bottom: 0; right: -0.4rem; width: 0.6rem; height: 0.6rem;
  background: var(--rb-bordo-hover); clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.rb-bubble-fila--propio.rb-bubble-fila--autor-familia .rb-bubble::after {
  content: ''; position: absolute; bottom: 0; right: -0.4rem; width: 0.6rem; height: 0.6rem;
  background: var(--rb-dorado); clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.rb-bubble__nombre {
  font-size: 0.72rem; font-weight: 700; margin-bottom: 0.15em; display: block;
  color: inherit; opacity: 0.85;
}
.rb-bubble-fila--propio .rb-bubble__nombre { display: none; } /* no hace falta verse el propio nombre */

/* Hilo real — cita del mensaje al que se responde (2026-08-2x) */
.rb-bubble__cita {
  display: block; font-size: 0.72rem; opacity: 0.75; margin-bottom: 0.3em;
  padding: 0.2em 0.5em; border-left: 2px solid currentColor; text-decoration: none; color: inherit;
}
.rb-bubble__cita:hover { opacity: 1; }

.rb-bubble__fecha {
  font-size: 0.68rem; opacity: 0.7; margin-top: 0.25em; display: block; text-align: right;
}

/* Editar/eliminar respuesta (agregado 2026-08-2x) */
.rb-bubble__acciones {
  display: flex; gap: 0.6em; margin-top: 0.3em; font-size: 0.72rem; opacity: 0.85;
}
.rb-bubble__accion-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: inherit; text-decoration: underline; font-size: 0.72rem;
  opacity: 0.85;
}
.rb-bubble__accion-btn:hover { opacity: 1; }
.rb-bubble__accion-btn--eliminar { color: #ffb4a8; }
.rb-bubble-fila--autor-familia .rb-bubble__accion-btn--eliminar { color: var(--rb-rojo); }
.rb-bubble__editar-form { margin-top: 0.4em; }
.rb-bubble__editar-form textarea {
  width: 100%; box-sizing: border-box; font-family: inherit;
  border-radius: 0.4rem; padding: 0.4em; border: 1px solid var(--rb-borde);
  color: var(--rb-texto);
}
.rb-bubble__editar-form div { margin-top: 0.3em; display: flex; gap: 0.4em; }
/* El formulario de editar vive DENTRO de una burbuja (bordo o dorado,
   ver color por rol de autor) — .rb-nota y .rb-compose__adjunto están
   pensados para fondo claro (gris cálido), acá se pierden de contraste.
   Corregido 2026-08-2x: en este contexto puntual, heredan el color de
   la burbuja con algo de opacidad en vez del gris fijo. */
.rb-bubble__editar-form .rb-nota,
.rb-bubble__editar-form .rb-compose__adjunto {
  color: inherit; opacity: 0.85;
}
.rb-bubble__editar-form .rb-compose__adjunto:hover { background: rgba(255,255,255,0.12); }

/* Entrada escalonada de burbujas — cada una aparece un poco después que
   la anterior en vez de todas al mismo tiempo (agregado 2026-08-2x). */
.rb-chat .rb-bubble-fila:nth-child(1) { animation-delay: 0.02s; }
.rb-chat .rb-bubble-fila:nth-child(2) { animation-delay: 0.05s; }
.rb-chat .rb-bubble-fila:nth-child(3) { animation-delay: 0.08s; }
.rb-chat .rb-bubble-fila:nth-child(4) { animation-delay: 0.11s; }
.rb-chat .rb-bubble-fila:nth-child(n+5) { animation-delay: 0.14s; }

/* Adjuntos dentro de una burbuja (preview de imagen o badge de archivo) —
   agregado 2026-08-2x junto con adjuntos en respuestas del CCI. */
.rb-bubble__adjuntos {
  display: flex; flex-wrap: wrap; gap: 0.4em; margin-top: 0.4em;
}
.rb-bubble__imagen-link { display: inline-block; transition: transform 0.15s ease; }
.rb-bubble__imagen-link:hover { transform: scale(1.03); }
.rb-bubble__imagen {
  max-width: 160px; max-height: 160px; border-radius: 0.5rem;
  display: block; object-fit: cover;
  box-shadow: 0 1px 4px rgba(43, 35, 32, 0.15);
}

/* Adjuntos/docs elegidos todavía sin enviar, en el compositor de
   respuesta — solo texto chico, no un preview grande (eso queda para
   cuando llegue el mensaje, no antes de enviarlo). */
.rb-adjuntos-elegidos {
  font-size: 0.78rem; color: var(--rb-texto-suave); margin: 0.3em 0;
}
.rb-adjuntos-elegidos:empty { display: none; }

/* Chips de adjuntos elegidos, removibles individualmente antes de
   enviar — agregado 2026-08-2x (antes solo mostraba un resumen de
   texto, sin forma de sacar un archivo puntual). */
.rb-adjuntos-chips {
  display: flex; flex-wrap: wrap; gap: 0.5em; margin: 0.5em 0;
}
.rb-adjuntos-chips:empty { display: none; }
.rb-adjunto-chip {
  display: flex; align-items: center; gap: 0.5em;
  border: 1px solid var(--rb-dorado); border-radius: 0.6rem;
  padding: 0.4em 0.6em; font-size: 0.82rem; background: var(--rb-crema);
  max-width: 260px;
}
.rb-adjunto-chip__nombre {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rb-adjunto-chip__quitar {
  border: none; border-radius: 50%; width: 1.4em; height: 1.4em;
  flex-shrink: 0; cursor: pointer; font-size: 0.75rem; line-height: 1;
  background: #2563eb; color: #fff;
}
.rb-adjunto-chip__quitar:hover { background: #1d4ed8; }

/* Adjunto existente marcado para eliminar al editar (agregado
   2026-08-2x) — se ve tachado/apagado hasta que se guarda o se
   deshace, para dejar claro que todavía no pasó nada de verdad. */
.rb-adjunto-chip--marcado-eliminar {
  opacity: 0.5; text-decoration: line-through;
  border-color: var(--rb-rojo);
}
.rb-adjunto-chip--marcado-eliminar .rb-adjunto-chip__quitar { background: var(--rb-rojo); }

/* ── Cabecera de curso — banner + info, mismo patrón que la página real
   de un grupo/curso en producción. Consumidor: pantalla de curso de
   Comunicación (Anuncios/Alumnos/Documentos/Tareas). ────────────────── */

.rc-cabecera {
  border-radius: 1rem; overflow: hidden; margin-bottom: 1.5em;
  border: 1px solid var(--rb-borde); background: var(--rb-crema-panel);
}
.rc-cabecera__banner {
  height: 5.5rem;
  background: linear-gradient(135deg, var(--rc-c1, var(--rb-bordo)) 0%, var(--rc-c2, #3D0A12) 100%);
}
.rc-cabecera__info { padding: 0.9em 1.1em 1.1em; display: flex; align-items: center; gap: 0.6em; flex-wrap: wrap; }
.rc-cabecera__info h1 { margin: 0; font-size: 1.3rem; flex-basis: 100%; }

/* ── Pestañas — Anuncios / Alumnos / Documentos / Tareas ─────────────── */

.rc-tabs {
  display: flex; gap: 1.2em; margin-bottom: 1.3em;
  border-bottom: 1px solid var(--rb-borde);
}
.rc-tab {
  padding: 0.6em 0.1em; font-weight: 600; font-size: 0.9rem;
  color: var(--rb-texto-suave); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s ease, border-color .15s ease;
}
.rc-tab:hover { color: var(--rb-bordo); }
.rc-tab.activo { color: var(--rb-bordo); border-bottom-color: var(--rb-bordo); }

/* ── Placeholder "en construcción" — dos consumidores reales: el hub de
   inicio (Mis Calificaciones, Mis Recursos, etc.) y las pestañas sin
   módulo propio todavía en Comunicación (Documentos, Tareas). ───────── */

.rb-construccion {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: clamp(3rem, 10vw, 5rem) 1.5rem; color: var(--rb-texto-suave);
}
.rb-construccion__emoji { font-size: 2.5rem; margin-bottom: 0.5em; line-height: 1; }