@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;
}

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

/* --- Items seleccionados (tags en multiselect) --- */
.ts-wrapper.multi .ts-control > div {
  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);
}

/* --- 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 {
  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 --- */
.ts-no-results {
  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). Visible para que se
   sepa que viene, inerte para que nadie pierda tiempo intentandolo. */
.tiptap-toolbar-btn--disabled,
.tiptap-toolbar-btn--disabled:hover {
  opacity: 0.4;
  cursor: not-allowed;
  background: transparent;
}

/* --- 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;
}

/* --- 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%);
  background: #000;
  color: #fff;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 20;
}

.tiptap-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #000;
}

.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);
}

.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;
}

.modal-panel--open {
  animation: modal-fade-in 0.4s ease forwards;
}

/* 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: 340px;
}
@media screen and (max-width: 360px) {
  .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);
  }
}
body {
  height: auto;
  min-height: 100%;
}

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

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

.layout-preview-frame {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: var(--preview-bar-h) 8px 8px;
  background: var(--preview-chrome-bg, #141414);
}

.layout-app.layout-app--framed {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

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