/* Vonzay: vista móvil de Postiz para postiz.vonzay.com (inyectada por Caddy, sin recompilar).
   Basada en fit-mobile.css (Fit Center) + arreglos del 2026-10-05. Todo va limitado a <=900px. */

/* Injected floating buttons are hidden on desktop. */
#fit-rail-toggle, #fit-ch-toggle { display: none; }

@media (max-width: 900px) {
  /* ---------- 1) Reclaim space: trim the big outer paddings & gaps ---------- */
  .min-h-screen.p-\[12px\] { padding: 4px !important; }
  .flex-1.flex.gap-\[8px\] { gap: 3px !important; }
  .bg-newBgColorInner.flex-1.flex-col.flex.p-\[20px\].gap-\[12px\] {
    padding: 8px !important;
    gap: 6px !important;
  }

  /* ---------- 2) Header: shorter, with room for the two toggles ---------- */
  .bg-newBgColorInner.h-\[80px\].px-\[20px\] {
    height: 56px !important;
    min-height: 56px !important;
    padding-inline-start: 90px !important;
    padding-inline-end: 8px !important;
    gap: 8px !important;
  }
  .bg-newBgColorInner.h-\[80px\].px-\[20px\] .text-\[24px\] { font-size: 17px !important; }
  .bg-newBgColorInner.h-\[80px\].px-\[20px\] .gap-\[20px\] { gap: 9px !important; }

  /* ---------- 3) Left icon-rail: hidden by default, drawer when open ------- */
  body:not(.fit-rail-open) div:has(> #left-menu) {
    width: 0 !important; min-width: 0 !important; overflow: hidden !important;
  }
  body:not(.fit-rail-open) #left-menu { display: none !important; }
  body.fit-rail-open #left-menu {
    display: flex !important;
    z-index: 1000;
    background: var(--newBgColorInner, #15151f);
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55);
    border-radius: 0 12px 12px 0;
  }

  /* ---------- 4) Channels column: hidden by default, drawer when open ------ */
  body:not(.fit-ch-open) div.flex.relative.flex-col.w-\[260px\],
  body:not(.fit-ch-open) div.flex.relative.flex-col.w-\[100px\] {
    display: none !important;
  }
  body.fit-ch-open div.flex.relative.flex-col.w-\[260px\] {
    display: flex !important;
    position: fixed !important;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(86vw, 300px) !important;
    height: 100% !important;
    z-index: 1000;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55);
  }

  /* ---------- 5) Filters bar: row + wrap instead of a tall stacked column -- */
  .flex.flex-col.md\:flex-row.gap-\[8px\].items-center {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
  }
  .min-w-\[200px\] { min-width: 0 !important; }
  .min-w-\[200px\] .text-\[14px\] { font-size: 13px !important; white-space: nowrap; }
  .w-\[74px\] { width: 56px !important; }

  /* ---------- 6) The two floating toggle buttons (rail + channels) -------- */
  #fit-rail-toggle, #fit-ch-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 13px;
    z-index: 1001;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 9px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #fit-rail-toggle { inset-inline-start: 10px; }
  #fit-ch-toggle  { inset-inline-start: 50px; }
  #fit-rail-toggle:active, #fit-ch-toggle:active { background: rgba(255, 255, 255, .2); }
  #fit-rail-toggle svg, #fit-ch-toggle svg { width: 20px; height: 20px; display: block; }

  /* ---------- 7) Week grid: thin time column, WIDER day columns + h-scroll - */
  [class*="grid-template-columns:136px"] {
    grid-template-columns: 46px repeat(7, minmax(118px, 1fr)) !important;
    gap: 3px !important;
  }
  [class*="grid-template-columns:136px"] > .pe-4 {
    padding: 2px 1px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    white-space: nowrap;
  }

  /* ---------- 8) Post edit/preview modal: fit the phone, keep NATIVE scroll -
     We deliberately do NOT flatten the inner scrollers into one page: the
     per-channel settings panel needs a definite-height ancestor for its own
     scroll area, and flattening it stops "Settings" from opening. So instead we
     keep Postiz's native model (each section scrolls) and just make it fit. --- */
  /* let the modal fit the screen width (it forces min 600px on desktop) */
  .min-w-\[600px\] { min-width: 0 !important; }
  .h-full.flex-1.p-\[40px\].flex.relative { padding: 6px !important; }
  /* stack "Create Post" (editor) over "Post Preview"; each keeps its own scroll */
  .bg-newBgColorInner.rounded-\[20px\].flex-col > .flex-1.flex {
    flex-direction: column !important;
  }
  .bg-newBgColorInner.rounded-\[20px\].flex-col > .flex-1.flex > * {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
  }
  .w-\[580px\] { width: 100% !important; }
  /* trim the 65px section headers */
  .bg-newBgColorInner.rounded-\[20px\].flex-col .h-\[65px\] {
    height: 48px !important;
    font-size: 16px !important;
  }

  /* ---------- 8b) Modal footer: rows — [Delete | Date] / [Draft | Update] - */
  .h-\[84px\].py-\[20px\].border-t {
    height: auto !important;
    min-height: 0 !important;
    flex-wrap: wrap !important;
    padding: 8px !important;
    gap: 8px !important;
  }
  /* tags + repeat group on its own row */
  .h-\[84px\].py-\[20px\].border-t > .flex-1.flex.ps-\[20px\] {
    flex: 1 1 100% !important;
    padding-inline-start: 0 !important;
    justify-content: center;
  }
  /* action group becomes a 2x2 grid: Delete, Date / Save as Draft, Update */
  .h-\[84px\].py-\[20px\].border-t > .pe-\[20px\].flex.items-center.justify-end {
    flex: 1 1 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding-inline-end: 0 !important;
  }
  .h-\[84px\].py-\[20px\].border-t > .pe-\[20px\].flex.items-center.justify-end > * {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center;
  }
  .h-\[84px\].py-\[20px\].border-t .min-w-\[180px\] { min-width: 0 !important; width: 100% !important; }

  /* hide our floating toggles while any modal/popup is open */
  body:has(.bg-popup) #fit-rail-toggle,
  body:has(.bg-popup) #fit-ch-toggle { display: none !important; }

  /* ---------- 9) Hide the floating assistant bubble + Discord widget ------ */
  .copilotKitButton,
  div.copilotKitButton,
  #support-discord { display: none !important; }

  /* ---------- 10) DAY view: was a collapsed absolute box (icons overlapped,
     no scroll). Make it flow with its own vertical scroll. ----------------- */
  .flex.flex-col.gap-\[10px\].flex-1.relative > .absolute.start-0.top-0.w-full.h-full {
    position: relative !important;
    height: auto !important;
    max-height: calc(100dvh - 150px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* ---------- 11) (2026-10-05) Barra superior: los botones de menú y canales
     ya no tapan el contenido de los cajones. Los cajones empiezan debajo de
     la barra y el botón del cajón abierto queda resaltado. ------------------ */
  body.fit-rail-open #left-menu { padding-top: 58px !important; }
  body.fit-ch-open div.flex.relative.flex-col.w-\[260px\] > .absolute { top: 58px !important; height: calc(100% - 58px) !important; }
  body.fit-rail-open #fit-rail-toggle,
  body.fit-ch-open #fit-ch-toggle { background: #8d479b !important; }
  #fit-rail-toggle, #fit-ch-toggle { width: 38px; height: 38px; top: 11px; }
  #fit-ch-toggle { inset-inline-start: 54px; }
  /* el título de la barra no se monta sobre los botones y se corta con "…" */
  .bg-newBgColorInner.h-\[80px\].px-\[20px\] { padding-inline-start: 100px !important; }
  .bg-newBgColorInner.h-\[80px\].px-\[20px\] h1,
  .bg-newBgColorInner.h-\[80px\].px-\[20px\] .text-\[24px\] {
    font-size: 17px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }

  /* ---------- 12) Ajustes: el menú pasa arriba como pestañas deslizables y
     el contenido ocupa todo el ancho (antes: dos columnas apretadas). ------- */
  .flex.flex-1.gap-\[1px\]:has(> .w-\[260px\] .group\/profile) { flex-direction: column !important; }
  .bg-newBgColorInner.p-\[20px\].flex.flex-col.w-\[260px\]:has(.group\/profile) {
    width: 100% !important; padding: 8px !important; flex: 0 0 auto !important;
  }
  .bg-newBgColorInner.p-\[20px\].flex.flex-col.w-\[260px\]:has(.group\/profile) > .flex-1.flex-col {
    flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important;
    gap: 6px !important; scrollbar-width: none;
  }
  .bg-newBgColorInner.p-\[20px\].flex.flex-col.w-\[260px\]:has(.group\/profile) .group\/profile {
    flex: 0 0 auto !important; white-space: nowrap; padding: 8px 12px !important; border-radius: 8px !important; height: auto !important;
  }
  .bg-newBgColorInner.p-\[20px\].flex.flex-col.w-\[260px\]:has(.group\/profile) .group\/profile .text-\[18px\],
  .bg-newBgColorInner.p-\[20px\].flex.flex-col.w-\[260px\]:has(.group\/profile) .group\/profile { font-size: 14px !important; }

  /* ---------- 13) Textos gigantes de los estados vacíos (Analytics…) ------- */
  .text-\[48px\] { font-size: 26px !important; line-height: 1.2 !important; }
  .text-\[20px\] { font-size: 15px !important; }

  /* ---------- 14) Cualquier fila de formulario/tarjeta que se sale por la
     derecha en el móvil: que no desborde la pantalla. ------------------------ */
  main, .flex-1.bg-newBgLineColor { max-width: 100vw; }
}

/* ---------- 15) (2026-10-05) Login de Vonzay Social: una sola tarjeta centrada.
   Se quita el panel de testimonios de Postiz (en inglés y con su marca) y los enlaces
   que aquí no funcionan: el registro está cerrado y Postiz no tiene correo para recuperar
   la contraseña. Afecta a todas las pantallas /auth. ------------------------------------- */
div.bg-\[\#0E0E0E\].min-h-screen.w-screen {
  justify-content: center !important;
  align-items: center !important;
  padding: 24px 16px !important;
  background: radial-gradient(900px 520px at 50% -8%, rgba(124, 58, 237, .32), transparent 65%),
              radial-gradient(700px 420px at 50% 110%, rgba(59, 130, 246, .14), transparent 70%), #0b0b12 !important;
}
div.bg-\[\#0E0E0E\].min-h-screen.w-screen > .text-\[36px\].pt-\[88px\] { display: none !important; }
div.bg-\[\#0E0E0E\].min-h-screen.w-screen > .rounded-\[12px\].bg-\[\#1A1919\] {
  flex: 0 0 auto !important;
  width: min(460px, 100%) !important;
  min-height: 0 !important;
  padding: 40px 32px 32px !important;
  border-radius: 20px !important;
  background: rgba(22, 21, 30, .92) !important;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}
div.bg-\[\#0E0E0E\].min-h-screen.w-screen .max-w-\[440px\].h-full { height: auto !important; gap: 14px !important; }
div.bg-\[\#0E0E0E\].min-h-screen.w-screen .text-center.mt-6 p:has(a[href^="/auth"]) { display: none !important; }
/* marca: dice qué app es, porque Vonzay tiene varias (Correo, Finanzas...) */
body *:has(> svg[viewBox='0 0 101 33'])::before { content: 'Vonzay Social' !important; }
.vonzay-sub { margin: -14px 0 4px; font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .62); }
@media (max-width: 900px) {
  div.bg-\[\#0E0E0E\].min-h-screen.w-screen { padding: 12px !important; align-items: stretch !important; }
  div.bg-\[\#0E0E0E\].min-h-screen.w-screen > .rounded-\[12px\].bg-\[\#1A1919\] { padding: 32px 20px 24px !important; align-self: center; }
}

/* ---------- 16) (2026-10-05) Colores de Vonzay en toda la app. Paleta sacada del logo:
   azul marino #0d0a28, morado #8d479b, magenta #bf4990, coral #db5970.
   Postiz pinta casi todo con variables --new-* y --color-*; aquí se redefinen. ------------- */
html:root .dark {
  --new-back-drop: #05040d;
  --new-settings: #1f1b36;
  --new-border: #262140;
  --new-bgColor: #0d0b1a;
  --new-bgColorInner: #15122a;
  --new-sep: #3a3456;
  --new-bgLineColor: #1c1834;
  --new-textItemFocused: #15122a;
  --new-textItemBlur: #a49fbd;
  --new-blockSeparator: #241f3c;
  --new-btn-simple: #262140;
  --new-btn-primary: #8d479b;
  --new-ai-btn: #bf4990;
  --new-box-hover: #1f1a38;
  --new-table-border: #29233f;
  --new-table-header: #1a1630;
  --new-table-text: #a49fbd;
  --new-table-text-focused: #db5970;
  --new-small-strips: #13101f;
  --new-big-strips: #110e1d;
  --new-col-color: #221d3a;
  --new-menu-dots: #7d7799;
  --color-primary: #0d0b1a;
  --color-secondary: #0a0816;
  --color-third: #0a0816;
  --color-forth: #8d479b;
  --color-seventh: #a04fae;
  --color-custom4: #9b55a8;
  --color-custom7: #a04fae;
}
html:root .light {
  --new-back-drop: #2a1631;
  --new-textItemFocused: #6b2f78;
  --new-boxFocused: #f3e8f6;
  --new-btn-primary: #8d479b;
  --new-ai-btn: #bf4990;
  --new-table-text-focused: #bf4990;
  --color-forth: #8d479b;
  --color-seventh: #a04fae;
  --color-custom4: #9b55a8;
  --color-custom7: #a04fae;
}
/* colores fijos de Postiz que no pasan por variables */
.bg-\[\#D82D7E\] { background-color: #bf4990 !important; }
.bg-\[\#612BD3\], .bg-\[\#612bd3\] { background-color: #8d479b !important; }
.text-\[\#612BD3\], .text-\[\#612bd3\] { color: #b56fc4 !important; }
.border-\[\#612BD3\], .border-\[\#612bd3\] { border-color: #8d479b !important; }
.bg-\[\#1A1919\] { background-color: #15122a !important; }
.bg-\[\#0E0E0E\] { background-color: #0d0b1a !important; }
::selection { background: rgba(191, 73, 144, .35); }
/* login con los colores del logo */
div.bg-\[\#0E0E0E\].min-h-screen.w-screen {
  background: radial-gradient(900px 520px at 50% -8%, rgba(141, 71, 155, .38), transparent 65%),
              radial-gradient(700px 420px at 50% 110%, rgba(219, 89, 112, .14), transparent 70%), #0d0a28 !important;
}
div.bg-\[\#0E0E0E\].min-h-screen.w-screen > .rounded-\[12px\].bg-\[\#1A1919\] { background: rgba(21, 18, 42, .92) !important; }
body.fit-rail-open #fit-rail-toggle, body.fit-ch-open #fit-ch-toggle { background: #8d479b !important; }

/* ---------- 17) Copiloto de IA: Postiz no tiene llave de IA y sus llamadas se cuelgan.
   Se ocultan sus botones y ventanas (Caddy además responde al instante a /api/copilot). ------ */
.copilotKitButton, .copilotKitPopup, .copilotKitWindow, .copilotKitSidebar,
.copilotKitChat, .copilotKitDevConsole, [class*="copilotKitButton"] { display: none !important; }

/* 18. Menú: fuera Agente (copiloto sin IA), Medios y Enchufes */
a[href="/agents"], a[href="/media"], a[href="/plugs"] { display: none !important; }

/* 19. Móvil: barra inferior (Calendario, Analíticas, Configuración) en lugar del menú lateral */
#ofv-bottom { display: none; }
@media (max-width: 900px) {
  body.ofv-con-barra #ofv-bottom {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: #15122a; border-top: 1px solid rgba(255,255,255,.08);
  }
  #ofv-bottom a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: #a9a3c4; font-size: 11px; text-decoration: none; -webkit-tap-highlight-color: transparent;
  }
  #ofv-bottom a svg { width: 22px; height: 22px; }
  #ofv-bottom a.activo { color: #fff; }
  #ofv-bottom a.activo svg { color: #db5970; }
  body.light.ofv-con-barra #ofv-bottom { background: #fff; border-top-color: rgba(0,0,0,.08); }
  body.light #ofv-bottom a { color: #6b6585; }
  body.light #ofv-bottom a.activo { color: #0d0a28; }
  body.ofv-con-barra { padding-bottom: calc(60px + env(safe-area-inset-bottom)) !important; }
  body.ofv-con-barra #fit-rail-toggle { display: none !important; }
  body.ofv-con-barra #fit-ch-toggle { inset-inline-start: 10px !important; }
  body:has(.bg-popup) #ofv-bottom { display: none !important; }
}

/* ---------- 20) (2026-10-05) Cabecera del calendario: en móvil, fila 1 con
   ‹ rango › + Hoy, fila 2 con Día/Semana/Mes a todo el ancho y el selector
   calendario/lista a la derecha. El control activo (en móvil y escritorio)
   queda en morado con texto blanco, sin bordes dobles. ------------------------ */
.flex.flex-row.p-\[4px\].border.border-newTableBorder.rounded-\[8px\] .text-textItemFocused.bg-boxFocused {
  background: #8d479b !important;
  color: #fff !important;
  border-radius: 8px !important;
}
@media (max-width: 900px) {
  .flex.flex-col.md\:flex-row.gap-\[8px\].items-center {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100%;
  }
  /* fila 1: ‹ rango › + Hoy */
  .flex.flex-col.md\:flex-row.gap-\[8px\].items-center > div:nth-child(1) {
    order: 1;
    flex: 1 1 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .flex.flex-col.md\:flex-row.gap-\[8px\].items-center > div:nth-child(1) .border.h-\[42px\].border-newTableBorder.bg-newTableBorder {
    flex: 1 1 auto !important;
    height: 38px !important;
    border-radius: 11px !important;
  }
  .flex.flex-col.md\:flex-row.gap-\[8px\].items-center > div:nth-child(1) .min-w-\[200px\] { flex: 1 1 auto !important; }
  .flex.flex-col.md\:flex-row.gap-\[8px\].items-center > div:nth-child(1) > .flex-1.text-\[14px\].font-\[500\] {
    flex: 0 0 auto !important;
  }
  .flex.flex-col.md\:flex-row.gap-\[8px\].items-center > div:nth-child(1) > .flex-1.text-\[14px\].font-\[500\] .text-center.flex.h-\[42px\] { height: 38px !important; }
  .flex.flex-col.md\:flex-row.gap-\[8px\].items-center > div:nth-child(1) > .flex-1.text-\[14px\].font-\[500\] > div {
    height: 38px !important;
    padding-inline: 14px !important;
    border-radius: 11px !important;
  }
  /* fila 2: Día/Semana/Mes a todo el ancho + calendario/lista a la derecha */
  .flex.flex-col.md\:flex-row.gap-\[8px\].items-center > div:nth-child(2) {
    order: 2;
    flex: 1 1 auto !important;
    display: flex !important;
    height: 38px !important;
    border-radius: 11px !important;
    margin: 0 !important;
  }
  .flex.flex-col.md\:flex-row.gap-\[8px\].items-center > div:nth-child(2) > div {
    flex: 1 1 0 !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .flex.flex-col.md\:flex-row.gap-\[8px\].items-center > div:nth-child(3) {
    order: 3;
    flex: 0 0 auto !important;
    height: 38px !important;
    border-radius: 11px !important;
    margin: 0 !important;
  }
}

/* ---------- 21) (2026-10-05) Cabecera del calendario en v2.25: el contenedor
   cambió de clase. Fila 1 con ‹ rango › a todo el ancho y Hoy al lado; fila 2 con
   Día/Semana/Mes a todo el ancho y calendario/lista a la derecha. -------------- */
@media (max-width: 900px) {
  .text-textColor.flex.flex-row.flex-wrap.gap-\[8px\].items-center.select-none:has(> .flex.flex-row.p-\[4px\]) {
    width: 100% !important;
    gap: 8px !important;
  }
  .text-textColor.flex.flex-row.flex-wrap.gap-\[8px\].items-center.select-none > .flex.flex-grow.flex-row.items-center {
    flex: 1 1 100% !important;
    gap: 8px !important;
  }
  .text-textColor.flex.flex-row.flex-wrap.gap-\[8px\].items-center.select-none > .flex.flex-grow.flex-row.items-center > :not(.flex-1) {
    flex: 1 1 auto !important;
    height: 38px !important;
    border-radius: 11px !important;
  }
  .text-textColor.flex.flex-row.flex-wrap.gap-\[8px\].items-center.select-none > .flex.flex-grow.flex-row.items-center > :not(.flex-1) > .text-center {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .text-textColor.flex.flex-row.flex-wrap.gap-\[8px\].items-center.select-none > .flex.flex-grow.flex-row.items-center > .flex-1.text-\[14px\].font-\[500\] {
    flex: 0 0 auto !important;
  }
  .text-textColor.flex.flex-row.flex-wrap.gap-\[8px\].items-center.select-none > .flex.flex-grow.flex-row.items-center > .flex-1.text-\[14px\].font-\[500\] .text-center.flex.h-\[42px\] {
    height: 38px !important;
  }
  .text-textColor.flex.flex-row.flex-wrap.gap-\[8px\].items-center.select-none > .flex.flex-row.p-\[4px\].border {
    flex: 1 1 0 !important;
    height: 38px !important;
    border-radius: 11px !important;
    align-items: stretch !important;
  }
  .text-textColor.flex.flex-row.flex-wrap.gap-\[8px\].items-center.select-none > .flex.flex-row.p-\[4px\].border > div {
    flex: 1 1 0 !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .text-textColor.flex.flex-row.flex-wrap.gap-\[8px\].items-center.select-none > .flex.flex-row.p-\[4px\].border ~ div {
    flex: 0 0 auto !important;
    height: 38px !important;
  }
}