/*
 * REDEBOOK WEB - RESPONSIVE LAYER
 * Version: 0.9.0
 *
 * IMPORTANTE:
 * Este archivo se carga DESPUÉS de style.css.
 * Las reglas adaptativas nuevas deberían agregarse acá y no mezclarse
 * con la lógica PHP ni con Redebook Core.
 *
 * Breakpoints:
 *   Escritorio grande : >= 1200 px
 *   Escritorio/tablet : 768 - 1199 px
 *   Celular           : <= 767 px
 *   Celular pequeño   : <= 420 px
 */

/* ---------- Base adaptable para todos los tamaños ---------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

img, video, canvas, svg {
  max-width: 100%;
}

.rb-wrap,
.rb-feed,
.rb-directory,
.rb-people-page,
.rb-profile-shell,
.rb-app-main {
  min-width: 0;
}

.rb-btn,
.rb-action,
button,
input,
textarea,
select {
  max-width: 100%;
}

.rb-btn,
.rb-action,
button {
  touch-action: manipulation;
}

.rb-post-content,
.rb-bio,
.rb-notification-body,
.rb-person-main,
.rb-comment-content {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---------- Escritorio grande ---------- */
@media (min-width: 1200px) {
  .rb-wrap {
    width: min(calc(100% - 48px), 1200px);
  }

  .rb-feed {
    width: min(calc(100% - 48px), 760px);
  }

  .rb-profile-shell {
    width: min(calc(100% - 48px), 900px);
  }

  .rb-directory,
  .rb-people-page {
    width: min(calc(100% - 48px), 900px);
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- Tablet / notebook angosta ---------- */
@media (min-width: 768px) and (max-width: 1199px) {
  .rb-wrap {
    width: min(calc(100% - 32px), 980px);
  }

  .rb-feed {
    width: min(calc(100% - 32px), 720px);
  }

  .rb-top {
    gap: 12px;
  }

  .rb-top .rb-actions {
    gap: 8px;
  }

  .rb-top .rb-btn {
    padding-inline: 13px;
  }

  .rb-profile-shell,
  .rb-directory,
  .rb-people-page {
    width: min(calc(100% - 32px), 820px);
    margin-inline: auto;
  }

  .rb-profile-body {
    grid-template-columns: 1fr 1fr;
  }

  .rb-media-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================
   CELULAR
   ============================================================ */
@media (max-width: 767px) {
  :root {
    --rb-mobile-gutter: 12px;
    --rb-mobile-nav-height: 68px;
  }

  html {
    font-size: 16px;
  }

  body {
    padding-bottom: calc(var(--rb-mobile-nav-height) + env(safe-area-inset-bottom));
  }

  /* Contenedores: ocupar realmente el viewport móvil */
  .rb-wrap,
  .rb-feed,
  .rb-directory,
  .rb-people-page,
  .rb-profile-shell,
  .rb-app-main {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-left: var(--rb-mobile-gutter);
    padding-right: var(--rb-mobile-gutter);
  }

  /* Encabezado web móvil */
  .rb-top {
    width: 100%;
    min-width: 0;
    height: 62px;
    padding: 0;
    gap: 8px;
  }

  .rb-brand {
    min-width: 0;
  }

  .rb-mark {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
  }

  .rb-brand {
    font-size: .9rem;
  }

  .rb-top .rb-actions {
    display: none !important;
  }

  /* Navegación inferior tipo aplicación */
  .rb-mobile-nav {
    display: grid !important;
    position: fixed;
    z-index: 9000;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: calc(var(--rb-mobile-nav-height) + env(safe-area-inset-bottom));
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 0 4px env(safe-area-inset-bottom);
    margin: 0;
    background: rgba(7, 19, 31, .97);
    border-top: 1px solid var(--border);
    backdrop-filter: blur(16px);
  }

  .rb-mobile-nav a {
    min-width: 0;
    min-height: 56px;
    padding: 7px 2px;
    justify-content: center;
    text-align: center;
    overflow: hidden;
  }

  .rb-mobile-nav a span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Títulos y espaciado */
  .rb-feed,
  .rb-directory,
  .rb-people-page,
  .rb-app-main {
    padding-top: 18px;
    padding-bottom: 22px;
  }

  .rb-feed > h1,
  .rb-directory > h1,
  .rb-people-page h1 {
    font-size: clamp(1.7rem, 8vw, 2.15rem);
    margin-bottom: 18px;
  }

  .rb-kicker {
    margin-bottom: 10px;
  }

  /* Composer */
  .rb-composer {
    width: 100%;
    padding: 12px;
    border-radius: 18px;
    margin-bottom: 14px;
  }

  .rb-composer textarea {
    width: 100%;
    min-width: 0;
    min-height: 92px;
    padding: 12px;
    border-radius: 13px;
  }

  .rb-media-picker {
    width: 100%;
    gap: 8px;
  }

  .rb-file-button {
    min-height: 42px;
  }

  .rb-selected-files {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .rb-composer-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    width: 100%;
  }

  .rb-composer-foot select,
  .rb-composer-foot .rb-btn {
    width: 100%;
    min-height: 44px;
  }

  /* Publicaciones */
  .rb-post {
    width: 100%;
    min-width: 0;
    padding: 12px;
    margin: 12px 0;
    border-radius: 18px;
  }

  .rb-post-head {
    min-width: 0;
    align-items: center;
  }

  .rb-post-head > div {
    min-width: 0;
  }

  .rb-post-avatar {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }

  .rb-post-user {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rb-post-meta {
    font-size: .75rem;
    overflow-wrap: anywhere;
  }

  .rb-post-content {
    margin: 12px 0 6px;
    font-size: .98rem;
    line-height: 1.55;
  }

  /* Fotos del feed */
  .rb-post-media {
    width: 100%;
    min-width: 0;
    gap: 3px;
    border-radius: 14px;
  }

  .rb-post-media a {
    min-width: 0;
    min-height: 120px;
    max-height: 360px;
  }

  .rb-post-media img {
    width: 100%;
    height: 100%;
    max-height: 360px;
    object-fit: cover;
  }

  /* Interacciones */
  .rb-post-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 2px;
  }

  .rb-post-actions .rb-action {
    width: 100%;
    min-width: 0;
    padding: 10px 3px;
    font-size: .75rem;
    white-space: normal;
    line-height: 1.25;
    text-align: center;
  }

  .rb-post-actions .rb-action-danger {
    grid-column: 1 / -1;
    justify-self: start;
    width: auto;
  }

  /* Comentarios en feed */
  .rb-comments {
    width: 100%;
    min-width: 0;
  }

  .rb-comment {
    width: 100%;
    min-width: 0;
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .rb-comment-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    min-width: 0;
    gap: 7px;
  }

  .rb-comment-form input {
    width: 100%;
    min-width: 0;
  }

  .rb-comment-form .rb-btn {
    min-width: 66px;
    padding-inline: 10px;
  }

  /* Perfiles */
  .rb-profile-shell {
    padding-top: 10px;
    padding-bottom: 26px;
  }

  .rb-cover {
    width: 100%;
    height: clamp(150px, 45vw, 210px);
    border-radius: 18px;
  }

  .rb-profile-head {
    width: 100%;
    min-width: 0;
    margin-top: -42px !important;
    padding: 0 8px !important;
    display: flex;
    flex-direction: column;
    align-items: stretch !important;
    gap: 12px;
  }

  .rb-profile-head .rb-identity {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: row !important;
    align-items: flex-end !important;
    gap: 12px;
  }

  .rb-profile-head .rb-avatar {
    width: 88px !important;
    height: 88px !important;
    flex: 0 0 88px;
  }

  .rb-name {
    min-width: 0;
    padding-bottom: 5px;
  }

  .rb-name h1 {
    font-size: 1.5rem;
    overflow-wrap: anywhere;
  }

  .rb-name p {
    overflow-wrap: anywhere;
  }

  .rb-profile-head > .rb-btn,
  .rb-social-actions {
    width: 100%;
  }

  .rb-social-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .rb-social-actions .rb-btn {
    flex: 1 1 auto;
  }

  .rb-social-counts {
    padding-inline: 8px;
    flex-wrap: wrap;
  }

  .rb-profile-body {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px;
    margin-top: 20px;
  }

  .rb-box {
    width: 100%;
    min-width: 0;
    padding: 18px;
  }

  /* Formularios y edición */
  .rb-form-page {
    width: 100%;
    min-height: calc(100dvh - 62px - var(--rb-mobile-nav-height));
    padding: 18px var(--rb-mobile-gutter) 28px;
    display: block;
  }

  .rb-form-card {
    width: 100%;
    max-width: 100%;
    padding: 18px;
    border-radius: 20px;
  }

  .rb-field input,
  .rb-field textarea,
  .rb-field select,
  .rb-file {
    width: 100%;
    min-width: 0;
    font-size: 16px; /* evita zoom automático en iOS */
  }

  .rb-media-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px;
  }

  .rb-upload-box {
    width: 100%;
    min-width: 0;
    padding: 14px;
  }

  .rb-preview-cover {
    height: 150px;
  }

  /* Directorio / solicitudes / personas */
  .rb-search {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px;
    width: 100%;
  }

  .rb-search input,
  .rb-search .rb-btn {
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }

  .rb-people-results,
  .rb-notification-list {
    width: 100%;
    min-width: 0;
  }

  .rb-person,
  .rb-notification {
    width: 100%;
    min-width: 0;
    padding: 12px;
    gap: 10px;
  }

  .rb-person {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .rb-person-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    width: 100%;
  }

  .rb-person-actions .rb-btn {
    flex: 1 1 120px;
  }

  .rb-person-main {
    min-width: 0;
  }

  .rb-person-main strong,
  .rb-person-main span,
  .rb-person-main small {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .rb-notification {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
  }

  /* Portada pública */
  .rb-hero {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 26px;
    min-height: auto;
    padding: 32px 0;
  }

  .rb-hero h1 {
    font-size: clamp(2.55rem, 15vw, 4rem);
  }

  .rb-lead {
    font-size: 1rem;
  }

  .rb-visual {
    width: 100%;
    min-height: 270px;
  }

  .rb-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Footer normal no compite con barra móvil */
  .rb-footer {
    width: 100%;
    padding-bottom: 18px;
    gap: 10px;
  }

  /* ========================================================
     VISOR MULTIMEDIA MÓVIL
     Esta sección RESETEA las reglas heredadas del visor PC.
     ======================================================== */
  .rb-lightbox.is-open {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: block !important;
    width: 100vw !important;
    width: 100dvw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  .rb-lightbox.is-open .rb-lightbox-stage {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(220px, 44dvh) minmax(0, 56dvh) !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  .rb-lightbox.is-open .rb-lightbox-media {
    position: relative !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  .rb-lightbox.is-open .rb-lightbox-image {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 0 !important;
  }

  .rb-lightbox.is-open .rb-lightbox-social {
    position: relative !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: hidden !important;
    border: 0 !important;
    border-top: 1px solid var(--border) !important;
    background: var(--panel) !important;
  }

  .rb-lightbox.is-open .rb-lightbox-post-head {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    transform: none !important;
  }

  .rb-lightbox.is-open .rb-lightbox-post-avatar {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    margin: 0 !important;
    transform: none !important;
  }

  .rb-lightbox.is-open .rb-lightbox-post-head > div:last-child {
    min-width: 0 !important;
  }

  .rb-lightbox.is-open .rb-lightbox-name,
  .rb-lightbox.is-open .rb-lightbox-user {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .rb-lightbox.is-open .rb-lightbox-post-copy {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: 74px !important;
    overflow-y: auto !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    transform: none !important;
  }

  .rb-lightbox.is-open .rb-lightbox-stats {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 8px 4px !important;
    transform: none !important;
    font-size: .70rem !important;
    text-align: center !important;
  }

  .rb-lightbox.is-open .rb-lightbox-stats span {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .rb-lightbox.is-open .rb-lightbox-actions {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  .rb-lightbox.is-open .rb-lightbox-actions button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 7px 2px !important;
    transform: none !important;
    font-size: .71rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .rb-lightbox.is-open .rb-lightbox-comments {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    transform: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .rb-lightbox.is-open .rb-lightbox-comment {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    margin: 0 !important;
    transform: none !important;
  }

  .rb-lightbox.is-open .rb-lightbox-comment-form {
    flex: 0 0 auto !important;
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px 10px max(8px, env(safe-area-inset-bottom)) !important;
    transform: none !important;
    gap: 7px !important;
    background: var(--panel) !important;
  }

  .rb-lightbox.is-open .rb-lightbox-comment-form input {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    font-size: 16px !important;
  }

  .rb-lightbox.is-open .rb-lightbox-comment-form .rb-btn {
    width: auto !important;
    min-width: 62px !important;
    height: 42px !important;
    padding-inline: 10px !important;
    font-size: .78rem !important;
  }

  .rb-lightbox.is-open .rb-lightbox-close {
    position: fixed !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 100001 !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    transform: none !important;
  }

  .rb-lightbox.is-open .rb-lightbox-prev,
  .rb-lightbox.is-open .rb-lightbox-next {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    width: 38px !important;
    height: 38px !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
  }

  .rb-lightbox.is-open .rb-lightbox-prev {
    left: 6px !important;
    right: auto !important;
  }

  .rb-lightbox.is-open .rb-lightbox-next {
    right: 6px !important;
    left: auto !important;
  }

  .rb-lightbox.is-open .rb-lightbox-counter {
    position: absolute !important;
    left: 8px !important;
    bottom: 8px !important;
    transform: none !important;
    z-index: 10 !important;
  }
}

/* ---------- Celulares pequeños ---------- */
@media (max-width: 420px) {
  :root {
    --rb-mobile-gutter: 9px;
  }

  .rb-brand {
    font-size: .82rem;
  }

  .rb-feed > h1,
  .rb-directory > h1,
  .rb-people-page h1 {
    font-size: 1.7rem;
  }

  .rb-post {
    padding: 10px;
  }

  .rb-post-actions .rb-action {
    font-size: .69rem;
    padding-inline: 1px;
  }

  .rb-profile-head .rb-avatar {
    width: 80px !important;
    height: 80px !important;
    flex-basis: 80px;
  }

  .rb-name h1 {
    font-size: 1.35rem;
  }

  .rb-lightbox.is-open .rb-lightbox-stage {
    grid-template-rows: minmax(200px, 40dvh) minmax(0, 60dvh) !important;
  }

  .rb-lightbox.is-open .rb-lightbox-post-copy {
    max-height: 58px !important;
  }

  .rb-lightbox.is-open .rb-lightbox-stats {
    font-size: .64rem !important;
  }

  .rb-lightbox.is-open .rb-lightbox-actions button {
    font-size: .66rem !important;
  }
}

/* ---------- Accesibilidad / movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ==========================================================
   v0.9.1 - TAMANO NORMALIZADO DEL VISOR DE IMAGENES
   ----------------------------------------------------------
   Objetivo:
   Cualquier imagen, vertical/horizontal/cuadrada, se muestra dentro
   de un "marco" de tamaño predecible. Nunca define ella misma el
   tamaño del modal.

   PC:
   - visor general: hasta 1360 x 820 px
   - panel de imagen: ocupa todo el espacio disponible
   - imagen: contain (se ve completa, con bandas si hace falta)

   CELULAR:
   - panel de imagen: 42dvh
   - el resto queda reservado para autor/interacciones/comentarios
   ========================================================== */

@media (min-width: 821px) {
  .rb-lightbox.is-open {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px !important;
  }

  .rb-lightbox.is-open .rb-lightbox-stage {
    position: relative !important;
    inset: auto !important;
    width: min(1360px, calc(100vw - 36px)) !important;
    height: min(820px, calc(100dvh - 36px)) !important;
    max-width: min(1360px, calc(100vw - 36px)) !important;
    max-height: min(820px, calc(100dvh - 36px)) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 390px !important;
    grid-template-rows: minmax(0, 1fr) !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    transform: none !important;
  }

  .rb-lightbox.is-open .rb-lightbox-media {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px !important;
    background: #000 !important;
    overflow: hidden !important;
  }

  .rb-lightbox.is-open .rb-lightbox-image {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 !important;
    transform: none !important;
  }

  .rb-lightbox.is-open .rb-lightbox-social {
    width: 390px !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
}

@media (max-width: 820px) {
  .rb-lightbox.is-open .rb-lightbox-stage {
    grid-template-rows: 42dvh minmax(0, 58dvh) !important;
  }

  .rb-lightbox.is-open .rb-lightbox-media {
    width: 100% !important;
    height: 42dvh !important;
    min-height: 0 !important;
    max-height: 42dvh !important;
    padding: 0 !important;
    background: #000 !important;
  }

  .rb-lightbox.is-open .rb-lightbox-image {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .rb-lightbox.is-open .rb-lightbox-social {
    height: 58dvh !important;
    min-height: 0 !important;
    max-height: 58dvh !important;
  }
}

@media (max-width: 420px) {
  .rb-lightbox.is-open .rb-lightbox-stage {
    grid-template-rows: 38dvh minmax(0, 62dvh) !important;
  }

  .rb-lightbox.is-open .rb-lightbox-media {
    height: 38dvh !important;
    max-height: 38dvh !important;
  }

  .rb-lightbox.is-open .rb-lightbox-social {
    height: 62dvh !important;
    max-height: 62dvh !important;
  }
}


/* v0.10 - publicaciones dentro del perfil */
@media(max-width:767px){
  .rb-profile-publisher,
  .rb-profile-posts{
    width:100%;
    min-width:0;
    margin-top:18px;
  }

  .rb-profile-publisher .rb-composer,
  .rb-profile-posts .rb-post{
    width:100%;
    max-width:100%;
  }

  .rb-profile-section-title{
    font-size:1.2rem;
    padding-inline:2px;
  }

  .rb-post-video,
  .rb-post-video video{
    width:100%;
    max-width:100%;
  }

  .rb-post-video video{
    max-height:62dvh;
  }
}

@media(max-width:767px){.rb-repost-label{width:100%;min-width:0;padding-inline:2px;margin-top:10px;font-size:.76rem;overflow-wrap:anywhere}}

/* v0.10.5 - hilos de comentarios en celular */
@media(max-width:767px){
  .rb-comment-replies{
    margin-left:8px;
    padding-left:9px;
  }
  .rb-reply-form{
    flex-wrap:wrap;
  }
  .rb-reply-form input{
    flex-basis:100%;
  }
}

/* v0.10.9 - edición de comentarios en celular */
@media(max-width:767px){
  .rb-comment-edit-form{
    flex-wrap:wrap;
  }
  .rb-comment-edit-form input{
    flex-basis:100%;
  }
}

/* v0.10.10 - editar publicaciones en celular */
@media(max-width:767px){
  .rb-post-edit-actions{justify-content:stretch}
  .rb-post-edit-actions .rb-btn{flex:1}
}

/* v0.10.13 - selector de reacciones en celular */
@media(max-width:767px){
  .rb-reaction-picker,
  .rb-lb-reaction-picker{
    max-width:calc(100vw - 24px);
    overflow-x:auto;
  }
  .rb-reaction-option{
    flex:0 0 40px;
    width:40px;
    height:40px;
  }
}

@media(max-width:767px){
 .rb-messages-page{margin:0;padding:0 0 72px}.rb-messages-shell{display:block;min-height:calc(100vh - 145px);border-radius:0;border-left:0;border-right:0}
 .rb-conversation-list{border-right:0}.rb-messages-shell.has-thread .rb-conversation-list{display:none}
 .rb-messages-shell:not(.has-thread) .rb-chat-panel{display:none}.rb-chat-panel{height:calc(100vh - 145px)}
 .rb-chat-head{display:flex;align-items:center;gap:8px}.rb-chat-back{display:block!important;font-size:34px;color:inherit;text-decoration:none}
 .rb-chat-head>a:last-child{flex:1}.rb-chat-messages{max-height:none;min-height:0}.rb-message>div{max-width:84%}
 .rb-chat-form{padding:10px}.rb-chat-form .rb-btn{padding-left:14px;padding-right:14px}
}

@media(max-width:767px){
 .rb-chat-messages{padding:14px 12px;gap:6px}
 .rb-message>div{max-width:84%;padding:8px 10px}
 .rb-chat-form{bottom:0;background:var(--panel)}
}

/* v0.10.80 - reacciones de comentarios */
@media (max-width:767px){
  .rb-comment-actions{gap:6px}
  .rb-comment-reactions{width:100%;margin-top:3px}
  .rb-comment-reaction-btn{min-width:34px;justify-content:center}
}

/* Web v0.10.81 — centrado visual de perfiles en celular */
@media (max-width:767px){
  .rb-profile-shell{
    width:min(calc(100% - 18px),560px);
    margin-left:auto;
    margin-right:auto;
  }
  .rb-profile-head{
    align-items:center!important;
    text-align:center;
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .rb-profile-head .rb-identity{
    width:auto;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center;
    gap:8px;
    text-align:center;
  }
  .rb-profile-head .rb-avatar{
    margin-left:auto;
    margin-right:auto;
  }
  .rb-name{
    width:100%;
    padding-bottom:0;
    text-align:center;
  }
  .rb-profile-head > .rb-btn{
    width:auto;
    min-width:132px;
    align-self:center;
  }
  .rb-social-actions{
    width:100%;
    justify-content:center;
    align-items:center;
  }
  .rb-social-actions .rb-btn,
  .rb-social-actions .rb-link-danger,
  .rb-social-actions .rb-social-privacy-note{
    flex:0 1 auto;
  }
  .rb-social-counts{
    width:100%;
    margin-left:0!important;
    margin-right:0!important;
    padding-inline:0;
    justify-content:center;
    text-align:center;
  }
  .rb-profile-extension-tabs{
    width:100%;
    justify-content:center;
    padding-inline:0!important;
  }
  .rb-profile-extension-tab{
    flex:0 1 auto!important;
    min-width:140px;
    justify-content:center;
    text-align:center;
  }
  .rb-profile-body{
    margin-left:auto;
    margin-right:auto;
  }
}

/* v0.10.82 — acciones y reacciones de comentarios legibles en móvil */
@media (max-width:767px){
  .rb-comment-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:5px 8px;
    width:100%;
    min-width:0;
  }
  .rb-comment-actions > button{
    order:1;
    flex:0 0 auto;
    white-space:nowrap;
    word-break:normal;
    overflow-wrap:normal;
  }
  .rb-comment-reactions{
    order:2;
    flex:1 1 100%;
    width:100%;
    min-width:0;
    display:flex;
    flex-wrap:nowrap;
    gap:4px;
    margin:3px 0 0;
    padding:1px 0 3px;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .rb-comment-reactions::-webkit-scrollbar{display:none}
  .rb-comment-reaction-btn{
    flex:0 0 auto;
    min-width:34px;
    min-height:24px;
    justify-content:center;
    white-space:nowrap;
    padding:2px 7px;
  }
  .rb-comment-replies{
    margin-left:8px;
    padding-left:8px;
  }
  .rb-comment-replies .rb-comment-replies{
    margin-left:5px;
    padding-left:5px;
  }
}


/* v0.10.83 — comentarios con selector de reacciones tipo Redebook */
.rb-comment-reaction-control{position:relative;display:inline-flex;align-items:center;gap:2px;min-width:0;vertical-align:middle}
.rb-comment-reaction-main{padding:0!important;min-height:auto!important;gap:4px;font-size:11px;line-height:1.2;white-space:nowrap}
.rb-comment-reaction-main .rb-reaction-icon,.rb-comment-reaction-main .rb-reaction-label,.rb-comment-reaction-main .rb-reaction-count{pointer-events:none}
.rb-comment-reaction-main .rb-reaction-count{font-size:10px}
.rb-comment-reaction-more{padding:0 2px!important;min-height:auto!important;font-size:11px;line-height:1.2;white-space:nowrap}
.rb-comment-reaction-control .rb-reaction-picker{bottom:calc(100% + 6px);left:0;right:auto}
.rb-comment-reaction-picker{padding:4px 6px}
.rb-comment-reaction-option{width:36px;height:36px;font-size:1.2rem}
.rb-comment-reaction-option.active{outline:1px solid var(--primary)}
@media (max-width:767px){
  .rb-comment-actions{display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px;width:100%;min-width:0}
  .rb-comment-actions > button{order:1;flex:0 0 auto;white-space:nowrap;word-break:normal;overflow-wrap:normal}
  .rb-comment-actions > .rb-comment-reaction-control{order:2;flex:0 0 auto;max-width:100%}
  .rb-comment-reaction-control .rb-reaction-picker{max-width:min(290px,calc(100vw - 40px));overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .rb-comment-reaction-control .rb-reaction-picker::-webkit-scrollbar{display:none}
  .rb-comment-replies{margin-left:8px;padding-left:8px}
}

/* v0.10.84 — selector compacto único también en móvil */
@media(max-width:767px){
  .rb-comment-actions>.rb-comment-reaction-control{order:2;flex:0 0 auto;width:auto;margin:0}
  .rb-comment-reaction-main{white-space:nowrap}
  .rb-comment-reaction-control .rb-reaction-picker,
  .rb-lb-reaction-wrap .rb-lb-reaction-picker{max-width:min(300px,calc(100vw - 34px));overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .rb-comment-reaction-control .rb-reaction-picker::-webkit-scrollbar,
  .rb-lb-reaction-wrap .rb-lb-reaction-picker::-webkit-scrollbar{display:none}
}

/* v0.11.2 — contador de mensajes no leídos en navegación móvil */
@media(max-width:720px){
  .rb-mobile-nav .rb-mobile-messages-link{position:relative!important;overflow:visible!important}
  .rb-mobile-nav .rb-mobile-message-badge{display:block;position:absolute!important;z-index:5;top:3px!important;left:calc(50% + 7px)!important;right:auto!important;transform:translateX(-50%);min-width:16px;height:16px;padding:0 4px;border:1px solid #fff;border-radius:999px;background:#ff9900!important;color:#2d1900!important;font-size:10px;font-weight:800;line-height:14px;text-align:center;box-sizing:border-box;box-shadow:0 1px 2px rgba(0,0,0,.18);pointer-events:none}
  .rb-mobile-nav .rb-mobile-message-badge[hidden]{display:none!important}
}

/* v0.11.3 — badge móvil de notificaciones */
@media(max-width:767px){
 .rb-mobile-nav .rb-mobile-notifications-link{position:relative!important;overflow:visible!important}
 .rb-mobile-nav .rb-mobile-notification-badge{display:block;position:absolute!important;z-index:5;top:3px!important;left:calc(50% + 7px)!important;right:auto!important;transform:translateX(-50%);min-width:16px;height:16px;padding:0 4px;border:1px solid #fff;border-radius:999px;background:#ff9900!important;color:#2d1900!important;font-size:10px;font-weight:800;line-height:14px;text-align:center;box-sizing:border-box;pointer-events:none}
 .rb-mobile-nav .rb-mobile-notification-badge[hidden]{display:none!important}
}


/* v0.11.7 — menú Perfil móvil */
@media(max-width:620px){
 .rb-mobile-nav>.rb-mobile-profile-menu{display:block;position:relative;min-width:0;overflow:visible}
 .rb-mobile-nav>.rb-mobile-profile-menu>summary{list-style:none;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;color:inherit}
 .rb-mobile-nav>.rb-mobile-profile-menu>summary::-webkit-details-marker{display:none}
 .rb-mobile-profile-popover{position:absolute;right:3px;bottom:calc(100% + 7px);z-index:1200;min-width:170px;display:grid;background:#fff;border:1px solid #b9c3d8;box-shadow:0 -2px 8px rgba(0,0,0,.2)}
 .rb-mobile-profile-popover a{display:block!important;padding:10px 12px!important;text-align:left!important;color:#136eb4!important;background:#fff!important;font-size:12px!important;font-weight:700!important;border-bottom:1px solid #d8dcea!important}
 .rb-mobile-profile-popover a:last-child{border-bottom:0!important}
 .rb-mobile-profile-popover .rb-mobile-profile-logout{color:#a83838!important}
}

.rb-profile-nav-menu:not([open]) .rb-profile-nav-popover{display:none!important}
.rb-mobile-profile-menu:not([open]) .rb-mobile-profile-popover{display:none!important}