@charset "UTF-8";
/**
 * tom-select.css (v2.5.2)
 * Copyright (c) contributors
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
 * file except in compliance with the License. You may obtain a copy of the License at:
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 * ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 *
 */
.ts-control {
  border: 1px solid #d0d0d0;
  padding: 8px 8px;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  box-shadow: none;
  border-radius: 3px;
  display: flex;
  flex-wrap: wrap;
}

.ts-wrapper.multi.has-items .ts-control {
  padding: 6px 8px 3px;
}

.full .ts-control {
  background-color: #fff;
}

.disabled .ts-control, .disabled .ts-control * {
  cursor: default !important;
}

.focus .ts-control {
  box-shadow: none;
}

.ts-control > * {
  vertical-align: baseline;
  display: inline-block;
}

.ts-wrapper.multi .ts-control > div {
  cursor: pointer;
  margin: 0 3px 3px 0;
  padding: 2px 6px;
  background: #f2f2f2;
  color: #303030;
  border: 0px solid #d0d0d0;
  overflow: auto;
}

.ts-wrapper.multi .ts-control > div.active {
  background: #e8e8e8;
  color: #303030;
  border: 0px solid #cacaca;
}

.ts-wrapper.multi.disabled .ts-control > div, .ts-wrapper.multi.disabled .ts-control > div.active {
  color: rgb(124.5, 124.5, 124.5);
  background: white;
  border: 0px solid white;
}

.ts-control > input {
  flex: 1 1 auto;
  min-width: 7rem;
  display: inline-block !important;
  padding: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-indent: 0 !important;
  border: 0 none !important;
  background: none !important;
  line-height: inherit !important;
  -webkit-user-select: auto !important;
  -moz-user-select: auto !important;
  -ms-user-select: auto !important;
  user-select: auto !important;
  box-shadow: none !important;
}

.ts-control > input::-ms-clear {
  display: none;
}

.ts-control > input:focus {
  outline: none !important;
}

.has-items .ts-control > input {
  margin: 0px 4px !important;
}

.ts-control.rtl {
  text-align: right;
}

.ts-control.rtl.single .ts-control:after {
  left: 15px;
  right: auto;
}

.ts-control.rtl .ts-control > input {
  margin: 0px 4px 0px -2px !important;
}

.disabled .ts-control {
  opacity: 0.5;
  background-color: #fafafa;
}

.input-hidden .ts-control > input {
  opacity: 0;
  position: absolute;
  left: -10000px;
}

.ts-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 10;
  border: 1px solid #d0d0d0;
  background: #fff;
  margin: 0.25rem 0 0;
  border-top: 0 none;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 3px 3px;
}

.ts-dropdown [data-selectable] {
  cursor: pointer;
  overflow: hidden;
}

.ts-dropdown [data-selectable] .highlight {
  background: rgba(125, 168, 208, 0.2);
  border-radius: 1px;
}

.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results,
.ts-dropdown .create {
  padding: 5px 8px;
}

.ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] [data-selectable].option {
  cursor: inherit;
  opacity: 0.5;
}

.ts-dropdown [data-selectable].option {
  opacity: 1;
  cursor: pointer;
}

.ts-dropdown .optgroup:first-child .optgroup-header {
  border-top: 0 none;
}

.ts-dropdown .optgroup-header {
  color: #303030;
  background: #fff;
  cursor: default;
}

.ts-dropdown .active {
  background-color: #f5fafd;
  color: #495c68;
}

.ts-dropdown .active.create {
  color: #495c68;
}

.ts-dropdown .create {
  color: rgba(48, 48, 48, 0.5);
}

.ts-dropdown .spinner {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 5px 8px;
}

.ts-dropdown .spinner::after {
  content: " ";
  display: block;
  width: 24px;
  height: 24px;
  margin: 3px;
  border-radius: 50%;
  border: 5px solid #d0d0d0;
  border-color: #d0d0d0 transparent #d0d0d0 transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.ts-dropdown-content {
  overflow: hidden auto;
  max-height: 200px;
  scroll-behavior: smooth;
}

.ts-wrapper.plugin-drag_drop .ts-dragging {
  color: transparent !important;
}

.ts-wrapper.plugin-drag_drop .ts-dragging > * {
  visibility: hidden !important;
}

.plugin-checkbox_options:not(.rtl) .option input {
  margin-right: 0.5rem;
}

.plugin-checkbox_options.rtl .option input {
  margin-left: 0.5rem;
}

/* stylelint-disable function-name-case */
.plugin-clear_button {
  --ts-pr-clear-button: 1em;
}

.plugin-clear_button .clear-button {
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 2px;
  margin-right: 0 !important;
  background: transparent !important;
  transition: opacity 0.5s;
  cursor: pointer;
}

.plugin-clear_button.form-select .clear-button, .plugin-clear_button.single .clear-button {
  right: max(var(--ts-pr-caret), 8px);
}

.plugin-clear_button.focus.has-items .clear-button, .plugin-clear_button:not(.disabled):hover.has-items .clear-button {
  opacity: 1;
}

.ts-wrapper .dropdown-header {
  position: relative;
  padding: 10px 8px;
  border-bottom: 1px solid #d0d0d0;
  background: color-mix(#fff, #d0d0d0, 85%);
  border-radius: 3px 3px 0 0;
}

.ts-wrapper .dropdown-header-close {
  position: absolute;
  right: 8px;
  top: 50%;
  color: #303030;
  opacity: 0.4;
  margin-top: -12px;
  line-height: 20px;
  font-size: 20px !important;
}

.ts-wrapper .dropdown-header-close:hover {
  color: black;
}

.plugin-dropdown_input.focus.dropdown-active .ts-control {
  box-shadow: none;
  border: 1px solid #d0d0d0;
}

.plugin-dropdown_input .dropdown-input {
  border: 1px solid #d0d0d0;
  border-width: 0 0 1px;
  display: block;
  padding: 8px 8px;
  box-shadow: none;
  width: 100%;
  background: transparent;
}

.plugin-dropdown_input .items-placeholder {
  border: 0 none !important;
  box-shadow: none !important;
  width: 100%;
}

.plugin-dropdown_input.has-items .items-placeholder, .plugin-dropdown_input.dropdown-active .items-placeholder {
  display: none !important;
}

.ts-wrapper.plugin-input_autogrow.has-items .ts-control > input {
  min-width: 0;
}

.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input {
  flex: none;
  min-width: 4px;
}

.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-ms-input-placeholder {
  color: transparent;
}

.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::placeholder {
  color: transparent;
}

.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
  display: flex;
}

.ts-dropdown.plugin-optgroup_columns .optgroup {
  border-right: 1px solid #f2f2f2;
  border-top: 0 none;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}

.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
  border-right: 0 none;
}

.ts-dropdown.plugin-optgroup_columns .optgroup::before {
  display: none;
}

.ts-dropdown.plugin-optgroup_columns .optgroup-header {
  border-top: 0 none;
}

.ts-wrapper.plugin-remove_button .item {
  display: inline-flex;
  align-items: center;
}

.ts-wrapper.plugin-remove_button .item .remove {
  color: inherit;
  text-decoration: none;
  vertical-align: middle;
  display: inline-block;
  padding: 0 6px;
  border-radius: 0 2px 2px 0;
  box-sizing: border-box;
}

.ts-wrapper.plugin-remove_button .item .remove:hover {
  background: rgba(0, 0, 0, 0.05);
}

.ts-wrapper.plugin-remove_button.disabled .item .remove:hover {
  background: none;
}

.ts-wrapper.plugin-remove_button .remove-single {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 23px;
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item {
  padding-right: 0 !important;
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
  border-left: 1px solid #d0d0d0;
  margin-left: 6px;
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove {
  border-left-color: #cacaca;
}

.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove {
  border-left-color: white;
}

.ts-wrapper.plugin-remove_button.rtl .item {
  padding-left: 0 !important;
}

.ts-wrapper.plugin-remove_button.rtl .item .remove {
  border-right: 1px solid #d0d0d0;
  margin-right: 6px;
}

.ts-wrapper.plugin-remove_button.rtl .item.active .remove {
  border-right-color: #cacaca;
}

.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove {
  border-right-color: white;
}

:root {
  --ts-pr-clear-button: 0px;
  --ts-pr-caret: 0px;
  --ts-pr-min: .75rem;
}

.ts-wrapper.single .ts-control, .ts-wrapper.single .ts-control input {
  cursor: pointer;
}

.ts-control:not(.rtl) {
  padding-right: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;
}

.ts-control.rtl {
  padding-left: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;
}

.ts-wrapper {
  position: relative;
}

.ts-dropdown,
.ts-control,
.ts-control input {
  color: #303030;
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
}

.ts-control,
.ts-wrapper.single.input-active .ts-control {
  background: #fff;
  cursor: text;
}

.ts-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}


/* ==========================================================
   Tom Select — overrides para Flycrew Manage
   Replica el estilo del React Select del frontend.
   Control fijo a 40px de alto, tags compactos inline.
   ========================================================== */
/* --- Wrapper: forzar 40px total (single), auto para multi --- */
.ts-wrapper {
  min-height: 40px;
  max-height: 40px;
}

.ts-wrapper.multi {
  max-height: none;
}

/* --- Control (input principal) ---
   40px = 1px border top + 38px content + 1px border bottom
   padding vertical: 0 para que line-height controle centrado
*/
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0 36px 0 12px;
  height: 38px;
  min-height: 38px !important;
  max-height: 38px;
  background: var(--background-color);
  font-size: 15px;
  line-height: 38px;
  box-shadow: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  overflow: hidden;
  flex-wrap: nowrap;
}

/* Multi: ajustar para tags compactos con wrap */
.ts-wrapper.multi .ts-control {
  padding: 4px 36px 4px 8px;
  gap: 4px;
  line-height: 1;
  height: auto;
  min-height: 38px !important;
  max-height: none;
  flex-wrap: wrap;
  overflow: visible;
}

/* --- Focus state: borde azul como React Select --- */
.ts-wrapper.single .ts-control:focus-within,
.ts-wrapper.multi .ts-control:focus-within,
.ts-wrapper.single.focus .ts-control,
.ts-wrapper.multi.focus .ts-control {
  background: var(--focus-background-color);
  border-color: var(--focus-border-color);
  box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
  /* El anillo va en el CONTROL y no en el input interno: el vendor apaga el
     foco de ese input con `outline: none !important` (tom-select.css), asi que
     la regla global de reset.css nunca le gana — y aunque ganara, el anillo
     rodearia la cajita de escritura en vez del control completo. */
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Valor seleccionado. El CSS del paquete deja un #303030 fijo que el `.item`
   hereda del control, y sobre el input oscuro queda casi ilegible. Se fija el
   color explicitamente en el control Y en el item (el `.item` es el que se ve en
   el select simple; en claro #303030 -> negro es imperceptible). */
.ts-wrapper .ts-control,
.ts-wrapper .ts-control > .item {
  color: var(--text-primary);
  opacity: 1;
}

/* --- Input de búsqueda dentro del control --- */
.ts-control > input {
  font-size: 15px;
  color: var(--text-primary);
  line-height: 38px;
  padding: 0 !important;
  margin: 0 !important;
  height: 38px;
}

.ts-wrapper.multi .ts-control > input {
  line-height: 24px;
  height: 24px;
}

/* Select simple con valor y foco (`input-active`, tras elegir con un clic): el
   input de búsqueda vuelve al flujo y, con el `width: 100%` global de los
   inputs, se quedaba con casi todo el ancho. El item elegido quedaba en ~90px,
   su nombre se partía en dos líneas y el alto fijo del control cortaba la
   mitad. El input no reclama ancho de base y el item va en una línea. */
.ts-wrapper.single .ts-control > input {
  flex: 1 1 0;
  min-width: 0;
}

.ts-wrapper.single .ts-control > .item {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Placeholder --- */
.ts-wrapper .ts-control > input::placeholder {
  color: var(--text-muted);
  font-size: 15px;
}

/* --- Items seleccionados (tags en multiselect) ---
   `.keywords-chip`: los chips de palabras gatillo (Agentes y Auto DM, #1216)
   no son un tom-select (su lógica vive en `manage--keywords`), pero se ven
   igual que uno múltiple: por eso van agrupados en estas mismas reglas. */
.ts-wrapper.multi .ts-control > div,
.keywords-chip {
  background: var(--soft-gray-bg);
  color: var(--text-soft);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 1px 6px;
  margin: 0;
  font-size: 13px;
  line-height: 22px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* Botón remove del plugin remove_button */
.ts-wrapper .ts-control > div > .remove {
  border-left: 1px solid var(--border-color);
  margin-left: 4px;
  padding-left: 4px;
  font-size: 13px;
  line-height: 1;
  color: var(--text-muted);
}

.ts-wrapper .ts-control > div > .remove:hover {
  color: var(--error-color);
}

/* --- Rotulo del control vacio (plugin dropdown_input) ---
   El buscador se muda al desplegable y en el control queda un input de solo
   lectura (.items-placeholder) con "Seleccionar...". El vendor lo esconde
   mientras el desplegable esta abierto; en el simple sin valor se mantiene,
   asi el control no queda en blanco mientras se busca. */
.ts-wrapper.single.plugin-dropdown_input.dropdown-active:not(.has-items) .items-placeholder {
  display: block !important;
}

.ts-wrapper .ts-control > .items-placeholder {
  cursor: pointer;
  background: transparent;
}

/* El múltiple no rotula el control vacío: su llamada es el link "+ Agregar". */
.ts-wrapper.multi.plugin-dropdown_input .items-placeholder {
  display: none !important;
}

/* --- Múltiple: chips sueltos + link "+ Agregar" ---
   Sin caja: el control no lleva borde, fondo ni anillo al abrir (el vendor
   le pone borde gris con `.plugin-dropdown_input.focus.dropdown-active`,
   especificidad 0,4,0 — por eso el selector repite `.plugin-dropdown_input`).
   El anillo de foco queda solo para teclado (`:focus-visible`). */
.ts-wrapper.multi.plugin-dropdown_input .ts-control,
.ts-wrapper.multi.plugin-dropdown_input.focus .ts-control,
.ts-wrapper.multi.plugin-dropdown_input.focus.dropdown-active .ts-control {
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  padding: 4px 0;
  gap: 10px;
  min-height: 35px !important;
}

.ts-wrapper.multi.plugin-dropdown_input .ts-control:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: 8px;
}

/* Chip estilo Intercom: bloque gris claro sin borde, esquinas suaves, texto
   al tamaño del cuerpo y la "×" oscura y separada del nombre. */
.ts-wrapper.multi.plugin-dropdown_input .ts-control > div,
.keywords-chip {
  border: 0;
  border-radius: 8px;
  padding: 0 10px;
  height: 27px;
  line-height: 27px;
  font-size: 15px;
  color: var(--text-primary);
}

/* Lo que al chip de tom-select le pone el CSS del paquete (tom-select.css,
   plugin remove_button) y los de palabras no reciben por no vivir en un
   `.ts-wrapper`: sin aire a la derecha (lo pone la "×") y el hover de la "×". */
.keywords-chip {
  padding-right: 0;
}

.keywords-chip > .remove:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* La "×" es todo el sector derecho del chip: se estira al alto completo y
   pone ella el aire derecho, porque el vendor fuerza `padding-right: 0
   !important` en el item con remove_button (tom-select.css). */
.ts-wrapper.multi.plugin-dropdown_input .ts-control > div > .remove,
.keywords-chip > .remove {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  border-left: 0;
  margin-left: 4px;
  padding: 0 10px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-primary);
}

.ts-wrapper .ts-control > .ts-add-link,
.keywords-add-link {
  background: transparent;
  border: 0;
  padding: 0 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 27px;
  /* Negro en claro, blanco en oscuro: mismo token que el texto del chip. */
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
}

.ts-wrapper .ts-control > .ts-add-link:hover,
.keywords-add-link:hover {
  text-decoration: underline;
}

/* --- Buscador dentro del desplegable (plugin dropdown_input) ---
   Lupa por CSS: pseudo-elemento sobre el wrap con un SVG inline como mascara,
   asi toma el color del tema (`--text-muted`) en claro y en oscuro.
   El panel de palabras gatillo (`.keywords-panel*`) comparte el look, pero su
   input agrega en vez de buscar: lleva un "+" en lugar de la lupa. */
.ts-dropdown .dropdown-input-wrap,
.keywords-panel-input-wrap {
  position: relative;
  border-bottom: 1px solid var(--border-color);
}

.ts-dropdown .dropdown-input-wrap::before,
.keywords-panel-input-wrap::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background-color: var(--text-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events: none;
}

.keywords-panel-input-wrap::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* El input del panel repite el wrap en el selector para pesar 0,3,0, como el
   del desplegable: el `input[type="text"]:focus` global (manage/_form.scss,
   0,2,1) le pondria borde y fondo al enfocarlo. */
.ts-dropdown.plugin-dropdown_input .dropdown-input,
.keywords-panel .keywords-panel-input-wrap > .keywords-panel-input {
  display: block;
  width: 100%;
  border: 0;
  padding: 10px 12px 10px 36px;
  font-size: 15px;
  line-height: 20px;
  height: auto;
  color: var(--text-primary);
  background: transparent;
  box-shadow: none;
}

/* El anillo de foco global (reset.css) rodearia solo la cajita de escritura
   dentro del desplegable, que ya es el contenedor visible: sin anillo. */
.ts-dropdown.plugin-dropdown_input .dropdown-input:focus,
.ts-dropdown.plugin-dropdown_input .dropdown-input:focus-visible,
.keywords-panel .keywords-panel-input-wrap > .keywords-panel-input:focus,
.keywords-panel .keywords-panel-input-wrap > .keywords-panel-input:focus-visible {
  outline: none;
  box-shadow: none;
}

.ts-dropdown.plugin-dropdown_input .dropdown-input::placeholder,
.keywords-panel .keywords-panel-input-wrap > .keywords-panel-input::placeholder {
  color: var(--text-muted);
}

/* --- Chevron con separador vertical (replica React Select) --- */
.ts-wrapper.single .ts-control::after {
  content: "";
  display: block;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--text-muted);
  pointer-events: none;
}

/* Separador vertical antes del chevron */
.ts-wrapper.single .ts-control::before {
  content: "";
  display: block;
  position: absolute;
  right: 32px;
  top: 25%;
  height: 50%;
  width: 1px;
  background: var(--border-color);
  pointer-events: none;
}

/* --- Clear button (plugin clear_button) --- */
.ts-wrapper .clear-button {
  color: var(--text-muted);
  font-size: 16px;
  margin-right: 4px;
}

.ts-wrapper .clear-button:hover {
  color: var(--text-soft);
}

/* --- Dropdown --- */
.ts-dropdown,
.keywords-panel {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-top: 4px;
  background: var(--surface-bg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-size: 15px;
  z-index: 9999;
  overflow: hidden;
}

.ts-dropdown .option {
  padding: 8px 12px;
  cursor: pointer;
  color: var(--text-soft);
}

/* Hover/active: azul claro como React Select */
.ts-dropdown .option:hover,
.ts-dropdown .active {
  background: var(--nav-color-hover);
  color: var(--text-primary);
}

.ts-dropdown .option.selected {
  background: var(--soft-gray-bg);
  color: var(--text-primary);
}

/* --- No results ---
   `.keywords-panel-help`: la línea "Presiona Enter para agregar" del panel de
   palabras gatillo ocupa el lugar del mensaje de sin resultados. */
.ts-no-results,
.keywords-panel-help {
  padding: 8px 12px;
  color: var(--text-muted);
  font-size: 14px;
}

/* --- Loading indicator --- */
.ts-wrapper.loading .ts-control::after {
  border: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border-top: 2px solid var(--text-muted);
  animation: ts-spin 0.5s linear infinite;
}

@keyframes ts-spin {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}
/*
 * TipTap Editor styles for manage namespace.
 * Only styles that Tailwind cannot cover: ProseMirror internal classes,
 * placeholder pseudo-elements, toolbar button states, and prose content defaults.
 */
/* --- Wrapper (replica estilos de textarea en form.css) --- */
.tiptap-wrapper {
  position: relative;
  border: 1px solid var(--border-color, #eaeaea);
  border-radius: var(--border-radius, 6px);
  background-color: var(--background-color, #f8f8f8);
}

/* El anillo va en el WRAPPER y no en el .ProseMirror que recibe el foco: el
   contenteditable es solo el area de texto, y un anillo ahi dejaria afuera al
   toolbar — el editor es una unidad. Por eso el `outline: none` del ProseMirror
   (mas abajo) se queda: no apaga el foco, lo delega en su contenedor. */
.tiptap-wrapper:focus-within {
  border-color: var(--focus-border-color, #c8c8c8);
  background-color: var(--focus-background-color, white);
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Variante sin chrome: el editor se funde con la tarjeta que lo contiene
   (composer del muro). Sin borde, sin fondo y sin focus ring — la tarjeta ya
   provee el contorno, y un doble marco se ve como un input dentro de un input. */
.tiptap-wrapper--bare,
.tiptap-wrapper--bare:focus-within {
  border-color: transparent;
  background-color: transparent;
  outline: none;
}

/* --- Toolbar --- */
.tiptap-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-color);
}

/* Toolbar al pie del area editable (estilo compositor). Es una FILA UNICA:
   a la izquierda las herramientas de insercion, a la derecha lo que el caller
   mande por `toolbar_extra` (en el composer: categoria + Cancelar + Publicar). */
.tiptap-toolbar--bottom {
  border-bottom: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

/* Contenedor exclusivo del JS: _buildToolbar hace innerHTML = "" sobre el, asi
   que el slot `extra` tiene que ser su hermano y no su hijo. */
.tiptap-toolbar-items {
  display: flex;
  align-items: center;
  gap: 2px;
}

.tiptap-toolbar-extra {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 15px;
  min-width: 0;
}

.tiptap-wrapper--bare .tiptap-toolbar {
  padding-left: 0;
  padding-right: 0;
}

.tiptap-wrapper--bare > .tiptap-editor-content {
  padding: 0;
}

/* En el composer los iconos son grandes y aireados (referencia: Skool), no los
   botones compactos de 28px del toolbar de admin. */
.tiptap-wrapper--bare .tiptap-toolbar-items .tiptap-toolbar-btn {
  width: 36px;
  height: 36px;
  font-size: 19px;
  color: var(--text-soft);
}

.tiptap-wrapper--bare .tiptap-toolbar-items .tiptap-toolbar-btn:hover {
  color: var(--text-primary);
}

.tiptap-toolbar-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 14px;
  color: var(--text-primary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}

.tiptap-toolbar-btn:hover {
  background: var(--soft-gray-bg);
}

/* El amarillo de marca es fijo en ambos modos, asi que el icono del boton
   activo DEBE volver a negro: hereda --text-primary del boton base, que en
   oscuro es casi blanco y seria ilegible sobre amarillo. */
.tiptap-toolbar-btn--active {
  background: #feec17;
  color: #000;
}

.tiptap-toolbar-btn--active:hover {
  background: #feec17;
}

/* Capacidad anunciada pero todavia no disponible (GIF), o sin nada que hacer
   en este momento (deshacer/rehacer con el historial vacio). Visible para que
   se sepa que existe, inerte para que nadie pierda tiempo intentandolo. */
.tiptap-toolbar-btn--disabled,
.tiptap-toolbar-btn--disabled:hover {
  opacity: 0.4;
  cursor: not-allowed;
  background: transparent;
}

/* Separa deshacer/rehacer del resto de la fila. */
.tiptap-toolbar-sep {
  width: 1px;
  height: 18px;
  background: var(--border-color);
  margin: 0 4px;
  flex-shrink: 0;
  /* La toolbar superior no centra sus hijos (align-items por defecto) y un
     alto fijo la dejaria pegada arriba; se centra sola. */
  align-self: center;
}

.tiptap-wrapper--bare .tiptap-toolbar-items .tiptap-toolbar-sep {
  height: 22px;
}

/* --- Bubble menu (formato por seleccion) ---
   Solo apariencia: la extension de TipTap escribe visibility/opacity/position/
   left/top inline en este mismo nodo. Definir posicionamiento aca lo romperia. */
.tiptap-bubble-menu {
  display: flex;
  gap: 2px;
  padding: 4px;
  background: var(--surface-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  z-index: 9999;
}

/* --- Drag handle (mover bloques, estilo Notion) ---
   La extension escribe position/left/top/visibility/pointer-events inline y
   lo cuelga de un wrapper absoluto DENTRO del area editable, que tiene
   overflow-y: auto. Sin gutter el handle quedaria recortado por el borde
   izquierdo (o abriria scroll horizontal).

   ProseMirror procesa el drop SOLO si cae sobre su propio nodo. Por eso el
   gutter es padding del .ProseMirror (el area conserva el suyo): quien
   arrastra desde el handle baja en vertical por la columna del gutter y
   suelta ahi, o debajo del ultimo bloque. Y `flow-root` hace del
   .ProseMirror un BFC: sin el, el margen inferior del ultimo bloque se
   colapsa hacia afuera y el .ProseMirror termina unos px antes que el area,
   dejando una franja muerta justo donde se suelta "al final".
   El handle mide 14px para caber entero en los 20px del gutter: en el
   composer (bare) el area no tiene padding propio que lo ampare. */
.tiptap-editor-content--drag-handle {
  --tiptap-drag-gutter: 20px;
  --tiptap-drag-handle-width: 14px;
}

.tiptap-editor-content--drag-handle .ProseMirror {
  display: flow-root;
  padding: 0 5px 0 var(--tiptap-drag-gutter);
}

.tiptap-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tiptap-drag-handle-width);
  height: 24px;
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 13px;
  cursor: grab;
  transition: background-color 0.15s ease, color 0.15s ease;
  z-index: 10;
  /* El plugin (controllers/tiptap/drag_handle.js) escribe position/top/left
     inline: `left` es el borde izquierdo del .ProseMirror, cuyo padding abre
     el gutter donde vive el handle. */
}

.tiptap-drag-handle:hover {
  background: var(--soft-gray-bg);
  color: var(--text-primary);
}

.tiptap-drag-handle[data-dragging=true] {
  cursor: grabbing;
}

/* --- Paneles flotantes del toolbar (encabezados, Personalizar, GIF, Producto) ---
   Mismos tokens del tema que el bubble menu: en modo oscuro `bg-white` +
   texto claro dejaba los menus ilegibles. El layout (fixed/absolute, radios,
   sombra, medidas) sigue viviendo en las clases utilitarias del JS. */
.tiptap-picker-panel {
  background: var(--surface-bg);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

.tiptap-picker-item {
  background: transparent;
  color: var(--text-primary);
  transition: background-color 0.15s ease;
}

.tiptap-picker-item:hover {
  background: var(--soft-gray-bg);
}

/* --- @menciones del muro (#1531, D5) ---
   El span lo produce el editor y viaja guardado en el HTML de la publicacion y
   del comentario: no hay markup propio donde poner utilidades de Tailwind.
   Negrita con el color de acento, sin enlace; igual en el editor y al leer. */
span[data-type=mention] {
  font-weight: 700;
  color: var(--main-color-accent, var(--text-primary));
}

/* --- Color pickers (replica InputColor.module.css del frontend) --- */
.tiptap-color-input {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.tiptap-color-input input[type=color] {
  position: absolute;
  width: 28px;
  height: 28px;
  min-height: 0;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  padding: 0;
  margin: 0;
  border: none;
  appearance: none;
  opacity: 0;
  z-index: 1;
  cursor: pointer;
}

.tiptap-color-input > span {
  display: block;
  position: absolute;
  top: 1px;
  right: 1px;
  left: 1px;
  bottom: 1px;
  z-index: 0;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.tiptap-color-input > span > i {
  display: block;
  position: absolute;
  right: 1px;
  left: 1px;
  bottom: 1px;
  height: 4px;
  border-radius: 0 0 3px 3px;
  z-index: 0;
}

.tiptap-color-input > span > em {
  display: flex;
  position: absolute;
  right: 3px;
  left: 3px;
  top: 2px;
  bottom: 6px;
  font-size: 12px;
  font-style: normal;
  z-index: 0;
  justify-content: center;
  align-items: center;
  color: var(--text-primary);
}

/* --- Tooltips (replica MUI Tooltip del frontend) --- */
.tiptap-tooltip-wrap {
  position: relative;
  display: inline-flex;
}

.tiptap-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  /* Mismo tema que el bubble menu (.tiptap-bubble-menu): solo tokens, asi
     se invierte en oscuro. */
  background: var(--surface-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 20;
}

/* Flecha: cuadrado rotado con el mismo fondo y solo los bordes que quedan
   hacia afuera (derecho e inferior tras rotar 45deg); asi muestra el borde
   del tooltip en claro y en oscuro sin un color propio. */
.tiptap-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: var(--surface-bg);
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  transform: translateX(-50%) rotate(45deg);
}

.tiptap-tooltip-wrap:hover .tiptap-tooltip {
  display: block;
}

/* --- Editor content area --- */
.tiptap-editor-content {
  position: relative;
  overflow-y: auto;
  padding: 12px;
}

/* ProseMirror core */
.tiptap-editor-content .ProseMirror {
  outline: none;
  min-height: inherit;
}

.tiptap-editor-content .ProseMirror > * + * {
  margin-top: 0px;
}

/* Placeholder */
.tiptap-editor-content .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  float: left;
  height: 0;
  pointer-events: none;
}

.tiptap-editor-content .ProseMirror [data-placeholder]::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  float: left;
  height: 0;
  pointer-events: none;
}

/* --- Prose content: hereda estilos de .text .text-default (text.css) via clases en el div --- */
.tiptap-editor-content .ProseMirror blockquote {
  border-left: 3px solid var(--border-color);
  padding-left: 1em;
  color: var(--text-soft);
}

.tiptap-editor-content .ProseMirror img {
  max-width: 100%;
  height: auto;
}

/* Image float classes (from CustomImageExtension) */
.tiptap-editor-content .ProseMirror img.custom-image-float-left {
  float: left;
  margin-right: 1em;
  margin-bottom: 0.5em;
}

.tiptap-editor-content .ProseMirror img.custom-image-float-right {
  float: right;
  margin-left: 1em;
  margin-bottom: 0.5em;
}

.tiptap-editor-content .ProseMirror img.custom-image-float-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.tiptap-editor-content .ProseMirror img.custom-image-float-none {
  display: inline;
}

/* Video embed responsive container */
.tiptap-editor-content .ProseMirror .video-embed-iframe {
  position: relative;
  padding-bottom: 56.25%;
  width: 100%;
  height: 0;
}

.tiptap-editor-content .ProseMirror .video-embed-iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Embed node */
.tiptap-editor-content .ProseMirror .custom-embed {
  position: relative;
  aspect-ratio: 16/9;
}

/* Selected node (images, videos, embeds) — yellow outline like frontend */
.tiptap-editor-content .ProseMirror .ProseMirror-selectednode {
  outline: 2px solid #feec17;
}

/* Code blocks */
.tiptap-editor-content .ProseMirror pre {
  background: var(--soft-gray-bg);
  border-radius: 6px;
  padding: 12px;
  font-family: monospace;
  overflow-x: auto;
}

.tiptap-editor-content .ProseMirror code {
  background: var(--soft-gray-bg);
  border-radius: 3px;
  padding: 2px 4px;
  font-family: monospace;
  font-size: 0.9em;
}

/* Horizontal rule */
.tiptap-editor-content .ProseMirror hr {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 1em 0;
}

/* --- Media zone integrada (thumbs + boton adjuntar dentro del wrapper) --- */
/* El selector con `>` evita que un .tiptap-media-zone anidado por accidente
   en otro componente herede estos estilos. */
.tiptap-wrapper > .tiptap-media-zone {
  border-top: 1px solid var(--border-color);
  padding: 8px 12px;
  border-radius: 0 0 var(--border-radius, 6px) var(--border-radius, 6px);
}

/* En el composer la zona de medias es solo la grilla de adjuntos (el boton de
   adjuntar vive en la fila de herramientas). Sin padding propio para no dejar
   16px de aire muerto cuando no hay ningun archivo: el separador visual lo
   pone el padding de la toolbar de abajo. */
.tiptap-wrapper--bare > .tiptap-media-zone {
  border-top: none;
  padding: 0;
}

/* Variante sin separadores internos (composer de comentarios): el wrapper
   conserva su contorno, pero la toolbar y la zona de medias se apoyan sobre el
   mismo lienzo que el area editable. En una caja de tres filas, dos hairlines
   la convierten en una tabla; el aire de los paddings ya separa lo suficiente. */
.tiptap-wrapper--seamless > .tiptap-toolbar,
.tiptap-wrapper--seamless > .tiptap-media-zone {
  border-top: none;
  border-bottom: none;
}

/* Sin la hairline, el padding superior de la zona de medias se suma al inferior
   del area editable: aire de mas entre el texto y el boton de adjuntar. */
.tiptap-wrapper--seamless > .tiptap-media-zone {
  padding-top: 0;
}

/* --- Loading overlay --- */
.tiptap-loading-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.9);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tiptap-loading-spinner {
  font-size: 14px;
  color: var(--text-soft);
}

/* Chip de variable/token de personalizacion ({{customer-name}}).
   Vive en CSS y no en clases Tailwind dentro de strings de JS: el content scan
   de Tailwind no cubre de forma confiable las clases construidas en JS (ver
   .claude/rules/frontend.md), y ademas asi el color sale de tokens y sigue al
   modo claro/oscuro en un solo lugar. */
.tiptap-token-chip {
  display: inline-flex;
  align-items: center;
  vertical-align: baseline;
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--token-chip-bg);
  color: var(--token-chip-text);
}

/* Switch toggle — replica Switch.module.css del frontend.
   Tailwind no puede generar peer-checked:bg-[var()] dinámico,
   así que el color checked se maneja con CSS custom property. */
.peer:checked ~ .switch-slider {
  background-color: var(--switch-color, #000);
}

.peer:focus ~ .switch-slider {
  box-shadow: 0 0 1px var(--switch-color, #000);
}

/* El input del switch es `sr-only` (ver SwitchHelper): sigue siendo focuseable
   con teclado, pero mide 1px, asi que el anillo de commons/reset.css se
   dibujaria sobre nada. Se traslada al riel, que es lo que se ve. Mismo caso
   que tom-select y tiptap: el anillo va en el contenedor visible del widget,
   no en el elemento interno que recibe el foco. */
.peer:focus-visible ~ .switch-slider {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Perilla ENCENDIDA: se calcula contra el riel (ver --switch-knob-on en
   manage/variables.css). Apagada queda blanca, que es el bg-white del helper
   sobre el riel gris/oscuro. Va en CSS y no en Tailwind porque depende del
   estado :checked del hermano anterior. */
.peer:checked ~ .switch-knob {
  background-color: var(--switch-knob-on, #fff);
}

.comment-highlight {
  scroll-margin-top: calc(var(--preview-bar-h, 44px) + 16px);
}

@keyframes comment-highlight-fade {
  from {
    background-color: rgba(255, 214, 10, 0.35);
  }
}
.comment-highlight > div > [data-comment-bubble] {
  animation: comment-highlight-fade 2s ease-out 0.3s backwards;
}

.text-templates {
  font-size: 16px;
  /* Block formatting context — contiene los floats de imagenes (ver
     `img.custom-image-float-*` mas abajo). Sin esto, una imagen flotada
     hace colapsar la altura del bloque y el contenido siguiente se monta
     encima. `flow-root` es la solucion moderna sin efectos colaterales
     (no corta tooltips/sombras como `overflow: hidden`). */
  display: flow-root;
}
.text-templates img {
  max-width: 100%;
}
.text-templates {
  /* Alineacion de imagenes — el CustomImageExtension de TipTap genera estas
     clases desde el atributo `float` del nodo de imagen. Aplica tanto al
     render publico de la pagina como al iframe preview fuera del modo edit.
     (Durante el modo edit, las reglas vienen de `_editor_selection.html.erb`
     prefijadas con `.inline-tt-content`). */
}
.text-templates img.custom-image-float-left {
  float: left;
  margin-right: 1em;
  margin-bottom: 0.5em;
}
.text-templates img.custom-image-float-right {
  float: right;
  margin-left: 1em;
  margin-bottom: 0.5em;
}
.text-templates img.custom-image-float-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.text-templates img.custom-image-float-none {
  display: inline;
}
.text-templates strong {
  font-weight: bold;
}
.text-templates h1, .text-templates h2, .text-templates h3, .text-templates h4, .text-templates h5, .text-templates h6 {
  font-weight: bold;
  line-height: 1.4;
}
.text-templates h1 + p, .text-templates h1 + ul, .text-templates h1 + li, .text-templates h2 + p, .text-templates h2 + ul, .text-templates h2 + li, .text-templates h3 + p, .text-templates h3 + ul, .text-templates h3 + li, .text-templates h4 + p, .text-templates h4 + ul, .text-templates h4 + li, .text-templates h5 + p, .text-templates h5 + ul, .text-templates h5 + li, .text-templates h6 + p, .text-templates h6 + ul, .text-templates h6 + li {
  margin-top: 5px;
}
.text-templates a {
  color: inherit;
  text-decoration: underline;
}
.text-templates h1 {
  font-size: 48px;
  line-height: 1.3;
}
.text-templates h2 {
  font-size: 36px;
  line-height: 1.3;
}
.text-templates h3 {
  font-size: 27px;
}
.text-templates h4 {
  font-size: 24px;
}
.text-templates h5 {
  font-size: 21px;
}
.text-templates h6 {
  font-size: 18px;
}
.text-templates p,
.text-templates ul,
.text-templates ol {
  margin-bottom: 15px;
}
.text-templates p,
.text-templates li {
  line-height: 1.5;
}
.text-templates ul,
.text-templates ol {
  margin-left: 40px !important;
}
.text-templates ol li {
  list-style-type: decimal;
}
.text-templates ul li {
  list-style-type: disc;
}

/* Breakpoints de los titulos: van FUERA de `.text-templates`, con el selector
   escrito completo a proposito. Cuando estos `@media` vivian ANIDADOS dentro de
   `.text-templates h1/h2`, dart-sass los sacaba del bloque padre SIN arrastrar el
   selector y emitia `@media (max-width: 700px) { h2 { font-size: 28px } }` a nivel
   GLOBAL. Como manage.scss, manage_plan.scss y page.scss consumen este archivo, esa
   regla pisaba todos los h1/h2 sin font-size propio del panel bajo 1000px: los
   titulos se veian gigantes en mobile. NO volver a anidar estos @media. */
@media (max-width: 1000px) {
  .text-templates h1 {
    font-size: 46px;
  }
}
@media (max-width: 700px) {
  .text-templates h1 {
    font-size: 36px;
  }
  .text-templates h2 {
    font-size: 28px;
  }
}
/* Modal — equivalente a Modal.tsx (react-modal)
   Animacion fadeIn que replica Modal.module.css
   Se necesita CSS custom porque Tailwind no soporta
   animaciones con keyframes personalizados inline. */
@keyframes modal-fade-in {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
/* El panel base NO tiene animacion — la animacion se activa
   via la clase --open que agrega el Stimulus controller. */
.modal-panel {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Sin `forwards`: el reposo abierto lo declara la clase con transform: none.
   Con forwards el panel quedaba en translateY(0), y cualquier transform, aunque
   sea nulo, vuelve al panel el bloque contenedor de sus hijos position: fixed:
   el lightbox de medias (fixed inset-0) quedaba recortado por el overflow del
   panel. */
.modal-panel--open {
  opacity: 1;
  transform: none;
  animation: modal-fade-in 0.4s ease;
}

/* Sizes — replican Modal.module.css del frontend */
.modal-size-xsmall {
  width: 200px;
}
@media screen and (max-width: 220px) {
  .modal-size-xsmall {
    width: 100%;
    min-height: 100%;
    border-radius: 0;
  }
}

.modal-size-small {
  width: 280px;
}
@media screen and (max-width: 300px) {
  .modal-size-small {
    width: 100%;
    min-height: 100%;
    border-radius: 0;
  }
}

.modal-size-default {
  width: 450px;
}
@media screen and (max-width: 470px) {
  .modal-size-default {
    width: 100%;
    min-height: 100%;
    border-radius: 0;
  }
}

.modal-size-large {
  width: 600px;
}
@media screen and (max-width: 620px) {
  .modal-size-large {
    width: 100%;
    min-height: 100%;
    border-radius: 0;
  }
}

.modal-size-xlarge {
  width: 1200px;
}
@media screen and (max-width: 1220px) {
  .modal-size-xlarge {
    width: 100%;
    min-height: 100%;
    border-radius: 0;
  }
}

.modal-size-content {
  width: min-content;
}
@media screen and (max-width: 300px) {
  .modal-size-content {
    width: 100%;
    min-height: 100%;
    border-radius: 0;
  }
}

/* ==========================================================================
   Ancla lateral — modal_dialog(anchor: :side) (issue #573, ADR 0016)

   El MISMO panel, anclado al borde derecho. Tres geometrias, una sola de ellas
   elegida por la persona; las decide el JS (manage--modal) y las marca con un
   modificador sobre el overlay, nunca mas de uno a la vez:

     .modal-anchor-side--panel     franja de 500px bajo la barra superior. Sin
                                   fondo oscuro, sin bloqueo de scroll: la
                                   pantalla de atras sigue viva. Acoplado y
                                   suelto son ESTA misma geometria — lo unico
                                   que cambia es si el layout cede espacio
                                   (ver .wrap-app-content-body en manage.scss).
     .modal-anchor-side--drawer    viewport <= 700px: pantalla completa desde
                                   la derecha, con fondo oscuro. Sin toggle.
     .modal-anchor-side--expanded  la persona pidio modal: fondo oscuro y el
                                   panel centrado con su modal-size-*, exacto
                                   al ancla centrada.

   Movimiento: el ancla lateral entra por TRANSICION y no por keyframe (la
   animacion de entrada del ancla centrada, modal-fade-in, se conserva intacta).
   Con transiciones, alternar panel <-> modal con el panel ya abierto no vuelve
   a animar la entrada: el estado final (`--open`) es el mismo en las tres
   geometrias y la unica propiedad que cambia es la posicion, que salta. El
   cross-fade corto de ese salto lo hace el JS.

   --modal-side-top: 47px = topbar del layout manage (46 + 1 de borde), el
   mismo numero que top-[47px] en layouts/manage/_content. El panel arranca bajo
   la barra superior y no la tapa: es chrome global. */
:root {
  --modal-side-width: 500px;
  --modal-side-top: 47px;
}

@keyframes modal-side-fade {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
/* --- Panel: franja al costado ------------------------------------------- */
.modal-anchor-side--panel {
  /* Los clics atraviesan el overlay hasta el calendario; solo el panel los
     recibe. Sin fondo: el modificador no pinta nada. */
  pointer-events: none;
}

.modal-anchor-side--panel .modal-panel,
.modal-anchor-side--drawer .modal-panel {
  pointer-events: auto;
  position: fixed;
  top: var(--modal-side-top);
  right: 0;
  bottom: 0;
  width: var(--modal-side-width);
  max-height: none;
  border-radius: 0;
  border-left: 1px solid var(--border-container-color);
  box-shadow: -8px 0 24px rgba(var(--shadow-rgb), 0.08);
  /* Reposo: fuera de pantalla por la derecha. Al abrir, `--open` lo trae a
     transform:none; al cerrar vuelve aca y el transitionend dispara la
     limpieza del controller. */
  opacity: 1;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

/* --- Drawer: pantalla completa (viewport chico) -------------------------- */
.modal-anchor-side--drawer {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.modal-anchor-side--drawer .modal-panel {
  /* Inconsistencia deliberada con el panel: a pantalla completa no hay "al
     lado", hay "encima" — tapa tambien la barra superior. */
  top: 0;
  width: 100%;
  border-left: none;
  box-shadow: none;
}

/* --- Expandido: el modal centrado de siempre ----------------------------- */
.modal-anchor-side--expanded {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.modal-anchor-side--expanded .modal-panel {
  /* Entrada desde abajo + opacidad, la misma lectura que modal-fade-in pero
     como transicion, para no volver a animar al alternar. */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Estado ABIERTO, comun a las tres geometrias: sin animacion de entrada (la
   del ancla centrada queda anulada aqui) y en su lugar de reposo. Va DESPUES
   de las geometrias y con un selector mas especifico (0,3,0): cada geometria
   define su reposo sobre .modal-panel, y esta regla lo pisa mientras --open
   este puesta. */
.modal-anchor-side .modal-panel.modal-panel--open {
  animation: none;
  opacity: 1;
  transform: none;
}

/* Reemplazo en el lugar (tocar otro chip con el panel abierto): la superficie
   nueva nace ya abierta, sin volver a deslizarse. */
.modal-anchor-side .modal-panel.modal-panel--instant {
  transition: none;
}

/* Cross-fade del toggle Expandir/Contraer: la posicion salta y la opacidad
   lo suaviza. */
.modal-anchor-side .modal-panel.modal-panel--swap {
  animation: modal-side-fade 0.12s ease-out;
}

/* --- Toggle Expandir/Contraer -------------------------------------------- */
.modal-anchor-toggle__collapse {
  display: none;
}

.modal-anchor-side--expanded .modal-anchor-toggle__expand {
  display: none;
}

.modal-anchor-side--expanded .modal-anchor-toggle__collapse {
  display: inline-block;
}

/* A pantalla completa no hay dos formas entre las que elegir. La preferencia
   guardada queda dormida, no se borra. */
.modal-anchor-side--drawer .modal-anchor-toggle {
  display: none;
}

/* --- Barra de carga de la hilera de tabs ---------------------------------

   Mientras el frame global espera al servidor (cambiar de pestaña, submitear
   un form del panel) Turbo le pone [busy]. Ese atributo es TODO el mecanismo:
   no hay JS, no hay estado que se pueda quedar pegado.

   El feedback va aca y no sobre el frame a proposito: #modal esta excluido de
   la regla global `turbo-frame[busy]` (el porque, entero, en application.css),
   asi que el aviso lo da esta barra, que no toca la opacidad de nadie.

   Corre SOBRE el border-b que la hilera ya tiene (bottom: -1px), asi que no
   agrega altura: el panel no se mueve un pixel al encenderse ni al apagarse.
   Los extremos del segmento se desvanecen con el gradiente, en vez de cortar.

   El delay de 300ms con `backwards` es lo que evita reintroducir el parpadeo
   que vinimos a arreglar: `backwards` mantiene el primer keyframe —el segmento
   fuera de pantalla— durante la espera, asi que un request corto (en local, 11ms)
   termina sin haber mostrado nada. La barra aparece solo cuando la espera es real. */
@keyframes modal-nav-loading {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(250%);
  }
}
/* La misma barra para quien pidio menos movimiento: enciende y se queda. */
@keyframes modal-nav-loading-steady {
  to {
    opacity: 0.4;
  }
}
turbo-frame#modal[busy] .modal-pane-nav::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 40%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--main-color-accent), transparent);
  animation: modal-nav-loading 1s ease-in-out 300ms infinite backwards;
}

@media (prefers-reduced-motion: reduce) {
  .modal-anchor-side .modal-panel {
    transition: none;
  }
  .modal-anchor-side .modal-panel.modal-panel--swap {
    animation: none;
  }
  /* Sin movimiento: la linea se queda quieta y atenuada a lo ancho de la
     hilera. Sigue diciendo "esperando" y no se confunde con el subrayado de la
     pestaña activa, que es corto y va bajo una sola tab.

     Pero el delay se CONSERVA. Un `animation: none` a secas se lleva puesto el
     plazo junto con el movimiento, y entonces un request de 11ms vuelve a
     parpadear: justo el sintoma que este cambio vino a sacar, servido a quien
     pidio menos animacion. Por eso, en vez de apagar la animacion, se cambia
     por un keyframe sin desplazamiento que con `forwards` enciende la linea
     recien cumplidos los 300ms y la deja quieta. */
  turbo-frame#modal[busy] .modal-pane-nav::after {
    animation: modal-nav-loading-steady 1ms linear 300ms forwards;
    opacity: 0;
    width: 100%;
    background: var(--main-color-accent);
  }
}
/* Ancla superior (modal_dialog anchor: :top) — el detalle del post del muro
   con la geometria de Skool (.flycrew/skool-comunidad.md, C13): panel de 791px
   pegado a 62px del borde superior, que llega hasta abajo y scrollea adentro;
   esquinas de 10 arriba, la sombra de tres capas de Skool y fondo gris sin
   blur. CSS propio porque pisa el chrome del panel que modal_dialog arma con
   utilidades (max-h, radio, overflow) solo para esta geometria. */
.modal-anchor-top {
  align-items: flex-start;
  padding: 0;
  overflow: hidden;
  background: rgba(144, 144, 144, 0.6);
}

.modal-anchor-top .modal-panel {
  width: 791px;
  margin-top: 62px;
  height: calc(100dvh - 62px);
  max-height: none;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.32), 0 2px 6px rgba(60, 64, 67, 0.15), 0 1px 8px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
}

.modal-anchor-top .modal-panel:has([data-manage--post-sticky-header-target=bar]:not([hidden])) {
  border-radius: 0;
}

@media screen and (max-width: 811px) {
  .modal-anchor-top .modal-panel {
    width: 100%;
  }
}
.delivery-composer .tiptap-wrapper {
  border: 0;
}
.delivery-composer .tiptap-editor-content {
  min-height: 131px !important;
}
.delivery-composer .tiptap-editor-content .ProseMirror > :first-child {
  margin: 0 0 16px;
  padding: 8px 0 0;
  font-size: 23px;
  line-height: 27px;
  font-weight: 900;
}
.delivery-composer .tiptap-editor-content .ProseMirror p {
  font-size: 16px;
  line-height: 24px;
}
.delivery-composer .tiptap-toolbar--bottom {
  gap: 0;
  padding: 24px 0 8px;
}
.delivery-composer .tiptap-toolbar-items {
  gap: 8px;
  margin-right: 8px;
}
.delivery-composer .tiptap-toolbar-items .tiptap-toolbar-btn {
  width: 40px;
  height: 40px;
  font-size: 18px;
  color: var(--text-muted);
}
.delivery-composer [data-tiptap-item=undo],
.delivery-composer [data-tiptap-item=redo],
.delivery-composer .tiptap-toolbar-sep {
  display: none;
}

.delivery-reply-quote [data-comment-avatar] > :not([data-level-badge]) {
  width: 32px;
  height: 32px;
}
.delivery-reply-quote [data-level-badge] {
  left: 17px;
  top: 17px;
  width: 18px;
  height: 18px;
  font-size: 10px;
}
.delivery-reply-quote [data-comment-bubble] {
  flex: 1;
  min-width: 0;
  background-color: var(--alert-warning-bg);
}
.delivery-reply-quote [data-comment-head] {
  height: 24px;
}
.delivery-reply-quote [data-comment-text] {
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.delivery-comment-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}
.delivery-comment-form:has(.is-editor-empty) .delivery-comment-submit {
  display: none;
}
.delivery-comment-form .tiptap-wrapper {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
  min-height: 42px;
  padding: 0 13px;
  border-radius: 15px;
}
.delivery-comment-form .tiptap-editor-content {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 24px !important;
  padding: 8px 0;
}
.delivery-comment-form .tiptap-editor-content .ProseMirror {
  min-height: 24px !important;
  font-size: 16px;
  line-height: 24px;
}
.delivery-comment-form .tiptap-editor-content .ProseMirror > :last-child {
  margin-bottom: 0;
}
.delivery-comment-form .tiptap-media-zone,
.delivery-comment-form .tiptap-media-zone > [data-controller~=manage--media-upload] {
  display: contents;
}
.delivery-comment-form .tiptap-media-zone [data-controller~=manage--media-gallery] {
  order: 1;
}
.delivery-comment-form .tiptap-media-zone [data-controller~=manage--media-gallery]:has([data-manage--media-lightbox-target=item]),
.delivery-comment-form .tiptap-media-zone [data-manage--media-upload-target=progressSection],
.delivery-comment-form .tiptap-media-zone [data-manage--media-upload-target=errorSection] {
  flex-basis: 100%;
}
.delivery-comment-form .tiptap-media-zone [data-controller~=manage--media-gallery]:has([data-manage--media-lightbox-target=item]) {
  margin-top: 16px;
}
.delivery-comment-form .tiptap-media-zone [data-manage--media-gallery-target=track] {
  flex-wrap: wrap;
  gap: 16px;
  overflow: visible;
}
.delivery-comment-form .tiptap-media-zone [data-manage--media-gallery-target=prev],
.delivery-comment-form .tiptap-media-zone [data-manage--media-gallery-target=next] {
  display: none !important;
}
.delivery-comment-form .tiptap-media-zone [data-manage--media-lightbox-target=item] {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background-color: var(--surface-bg);
}
.delivery-comment-form .tiptap-media-zone [data-manage--media-lightbox-target=item] > button:first-of-type {
  width: 100%;
}
.delivery-comment-form .tiptap-media-zone [data-manage--media-lightbox-target=item] > button:first-of-type img {
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}
.delivery-comment-form .tiptap-media-zone [data-manage--media-lightbox-target=item] > button:first-of-type > div {
  width: 100%;
  max-width: 100%;
  aspect-ratio: auto;
}
.delivery-comment-form .tiptap-media-zone [data-manage--media-lightbox-target=item] > button:first-of-type > div:has(> i) {
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  padding: 12px;
}
.delivery-comment-form .tiptap-media-zone [data-manage--media-lightbox-target=item] > button:first-of-type > div:has(> i) > i {
  font-size: 24px;
}
.delivery-comment-form .tiptap-media-zone [data-manage--media-lightbox-target=item] > button:first-of-type > div:has(> i) > span {
  font-size: 13px;
  line-height: 19.5px;
  color: var(--text-muted);
}
.delivery-comment-form .tiptap-media-zone [data-manage--media-lightbox-target=item] > button:not(:first-of-type) {
  top: 5px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 16px;
  box-shadow: none;
}
.delivery-comment-form .tiptap-media-zone [data-manage--media-lightbox-target=item] > button[data-action~="click->manage--media-lightbox#open"]:not(:first-of-type) {
  left: 5px;
}
.delivery-comment-form .tiptap-media-zone [data-manage--media-lightbox-target=item] > button[data-action~="click->manage--media-upload#removePending"] {
  right: 5px;
}
@media (hover: hover) {
  .delivery-comment-form .tiptap-media-zone [data-manage--media-lightbox-target=item] > button:not(:first-of-type) {
    visibility: hidden;
  }
  .delivery-comment-form .tiptap-media-zone [data-manage--media-lightbox-target=item]:hover > button {
    visibility: visible;
  }
}
.delivery-comment-form [data-media-add-tile] {
  display: none;
  order: 1;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border: 2px dashed var(--border-color);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 20px;
}
.delivery-comment-form [data-manage--media-gallery-target=track]:has([data-manage--media-lightbox-target=item]) [data-media-add-tile] {
  display: flex;
}
.delivery-comment-form .tiptap-media-zone [data-manage--media-upload-target=uploadBtn] {
  order: 2;
  margin-left: 4px;
}
.delivery-comment-form .tiptap-toolbar {
  order: 3;
  gap: 4px;
  margin: 0 4px;
  padding: 0;
  border: 0;
}
.delivery-comment-form .tiptap-toolbar [data-tiptap-item=bold],
.delivery-comment-form .tiptap-toolbar [data-tiptap-item=paragraph],
.delivery-comment-form .tiptap-toolbar [data-tiptap-item=italic],
.delivery-comment-form .tiptap-toolbar [data-tiptap-item=underline],
.delivery-comment-form .tiptap-toolbar-sep {
  display: none;
}
.delivery-comment-form .tiptap-toolbar-btn {
  width: 40px;
  height: 40px;
  font-size: 18px;
  color: var(--text-muted);
}
.delivery-comment-form .tiptap-media-zone [data-manage--media-upload-target=uploadBtn] {
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  justify-content: center;
  color: var(--text-muted);
  font-size: 18px;
}
.delivery-comment-form .tiptap-media-zone [data-manage--media-upload-target=uploadBtn] > span {
  display: none;
}

@media (max-width: 599.95px) {
  body:has(.delivery-composer) {
    overflow: hidden;
  }
  .delivery-composer .tiptap-editor-content {
    min-height: 136px !important;
  }
  .delivery-composer .tiptap-editor-content .ProseMirror > :first-child {
    margin: 0 0 16px;
    padding: 5px 0;
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
  }
  .delivery-composer .tiptap-editor-content .ProseMirror p {
    font-size: 16px;
    line-height: 24px;
  }
  .delivery-composer .tiptap-toolbar--bottom {
    gap: 0;
    margin-top: 24px;
    padding: 8px 0;
    border-top: 1px solid var(--border-color);
  }
  .delivery-composer .tiptap-toolbar-items {
    gap: 0;
    margin-right: 0;
  }
  .delivery-composer .tiptap-toolbar-items .tiptap-toolbar-btn {
    width: 40px;
    height: 40px;
    font-size: 18px;
    color: var(--text-muted);
  }
  .delivery-composer .tiptap-toolbar-extra select {
    max-width: 100%;
    text-overflow: ellipsis;
  }
  .delivery-composer [data-tiptap-item=undo],
  .delivery-composer [data-tiptap-item=redo],
  .delivery-composer .tiptap-toolbar-sep {
    display: none;
  }
  .delivery-comment-bar .delivery-comment-avatar,
  .delivery-comment-bar .delivery-comment-submit {
    display: none !important;
  }
  .delivery-comment-bar form {
    gap: 0 6px;
  }
  .delivery-comment-bar form:not(:has(.is-editor-empty)) .delivery-comment-send {
    display: inline-flex !important;
  }
  .delivery-comment-bar form[data-reply-pristine]:not(:has(.is-editor-empty)) .delivery-comment-send {
    display: none !important;
  }
  .delivery-comment-bar .tiptap-wrapper {
    align-items: center;
  }
  .delivery-comment-bar .tiptap-editor-content {
    flex: 1 1 0;
  }
  .delivery-comment-bar .tiptap-toolbar {
    order: 1;
    gap: 0;
    margin: 0;
  }
  .delivery-comment-bar .tiptap-media-zone [data-manage--media-upload-target=uploadBtn] {
    order: 2;
    margin-left: 0;
    margin-right: -12px;
  }
  .delivery-comment-bar .tiptap-media-zone [data-controller~=manage--media-gallery] {
    order: 3;
  }
  .delivery-comment-bar .tiptap-toolbar [data-tiptap-item]:not([data-tiptap-item=gif]) {
    display: none;
  }
}
body {
  height: auto;
  min-height: 100%;
}

:root {
  --preview-bar-h: 44px;
}

.layout-preview-bar {
  position: sticky;
  top: 0;
  z-index: 895;
  height: var(--preview-bar-h);
  padding: 0 8px;
  background: var(--preview-chrome-bg, #141414);
}

.layout-app {
  --community_bg-color: #f4f4f4;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--nav-color, #f4f4f4);
}