@charset "UTF-8";
:root, :host {
  --fa-font-solid: normal 900 1em/1 "Font Awesome 7 Free";
  --fa-font-regular: normal 400 1em/1 "Font Awesome 7 Free";
  --fa-font-light: normal 300 1em/1 "Font Awesome 7 Pro";
  --fa-font-thin: normal 100 1em/1 "Font Awesome 7 Pro";
  --fa-font-duotone: normal 900 1em/1 "Font Awesome 7 Duotone";
  --fa-font-duotone-regular: normal 400 1em/1 "Font Awesome 7 Duotone";
  --fa-font-duotone-light: normal 300 1em/1 "Font Awesome 7 Duotone";
  --fa-font-duotone-thin: normal 100 1em/1 "Font Awesome 7 Duotone";
  --fa-font-brands: normal 400 1em/1 "Font Awesome 7 Brands";
  --fa-font-sharp-solid: normal 900 1em/1 "Font Awesome 7 Sharp";
  --fa-font-sharp-regular: normal 400 1em/1 "Font Awesome 7 Sharp";
  --fa-font-sharp-light: normal 300 1em/1 "Font Awesome 7 Sharp";
  --fa-font-sharp-thin: normal 100 1em/1 "Font Awesome 7 Sharp";
  --fa-font-sharp-duotone-solid: normal 900 1em/1 "Font Awesome 7 Sharp Duotone";
  --fa-font-sharp-duotone-regular: normal 400 1em/1 "Font Awesome 7 Sharp Duotone";
  --fa-font-sharp-duotone-light: normal 300 1em/1 "Font Awesome 7 Sharp Duotone";
  --fa-font-sharp-duotone-thin: normal 100 1em/1 "Font Awesome 7 Sharp Duotone";
  --fa-font-slab-regular: normal 400 1em/1 "Font Awesome 7 Slab";
  --fa-font-slab-press-regular: normal 400 1em/1 "Font Awesome 7 Slab Press";
  --fa-font-whiteboard-semibold: normal 600 1em/1 "Font Awesome 7 Whiteboard";
  --fa-font-thumbprint-light: normal 300 1em/1 "Font Awesome 7 Thumbprint";
  --fa-font-notdog-solid: normal 900 1em/1 "Font Awesome 7 Notdog";
  --fa-font-notdog-duo-solid: normal 900 1em/1 "Font Awesome 7 Notdog Duo";
  --fa-font-etch-solid: normal 900 1em/1 "Font Awesome 7 Etch";
  --fa-font-jelly-regular: normal 400 1em/1 "Font Awesome 7 Jelly";
  --fa-font-jelly-fill-regular: normal 400 1em/1 "Font Awesome 7 Jelly Fill";
  --fa-font-jelly-duo-regular: normal 400 1em/1 "Font Awesome 7 Jelly Duo";
  --fa-font-chisel-regular: normal 400 1em/1 "Font Awesome 7 Chisel";
  --fa-font-utility-semibold: normal 600 1em/1 "Font Awesome 7 Utility";
  --fa-font-utility-duo-semibold: normal 600 1em/1 "Font Awesome 7 Utility Duo";
  --fa-font-utility-fill-semibold: normal 600 1em/1 "Font Awesome 7 Utility Fill";
}

.svg-inline--fa {
  box-sizing: content-box;
  display: var(--fa-display, inline-block);
  height: 1em;
  overflow: visible;
  vertical-align: -0.125em;
  width: var(--fa-width, 1.25em);
}

.svg-inline--fa.fa-2xs {
  vertical-align: 0.1em;
}

.svg-inline--fa.fa-xs {
  vertical-align: 0em;
}

.svg-inline--fa.fa-sm {
  vertical-align: -0.0714285714em;
}

.svg-inline--fa.fa-lg {
  vertical-align: -0.2em;
}

.svg-inline--fa.fa-xl {
  vertical-align: -0.25em;
}

.svg-inline--fa.fa-2xl {
  vertical-align: -0.3125em;
}

.svg-inline--fa.fa-pull-left,
.svg-inline--fa .fa-pull-start {
  float: inline-start;
  margin-inline-end: var(--fa-pull-margin, 0.3em);
}

.svg-inline--fa.fa-pull-right,
.svg-inline--fa .fa-pull-end {
  float: inline-end;
  margin-inline-start: var(--fa-pull-margin, 0.3em);
}

.svg-inline--fa.fa-li {
  width: var(--fa-li-width, 2em);
  inset-inline-start: calc(-1 * var(--fa-li-width, 2em));
  inset-block-start: 0.25em; /* syncing vertical alignment with Web Font rendering */
}

.fa-layers-counter, .fa-layers-text {
  display: inline-block;
  position: absolute;
  text-align: center;
}

.fa-layers {
  display: inline-block;
  height: 1em;
  position: relative;
  text-align: center;
  vertical-align: -0.125em;
  width: var(--fa-width, 1.25em);
}

.fa-layers .svg-inline--fa {
  inset: 0;
  margin: auto;
  position: absolute;
  transform-origin: center center;
}

.fa-layers-text {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
}

.fa-layers-counter {
  background-color: var(--fa-counter-background-color, #ff253a);
  border-radius: var(--fa-counter-border-radius, 1em);
  box-sizing: border-box;
  color: var(--fa-inverse, #fff);
  line-height: var(--fa-counter-line-height, 1);
  max-width: var(--fa-counter-max-width, 5em);
  min-width: var(--fa-counter-min-width, 1.5em);
  overflow: hidden;
  padding: var(--fa-counter-padding, 0.25em 0.5em);
  right: var(--fa-right, 0);
  text-overflow: ellipsis;
  top: var(--fa-top, 0);
  transform: scale(var(--fa-counter-scale, 0.25));
  transform-origin: top right;
}

.fa-layers-bottom-right {
  bottom: var(--fa-bottom, 0);
  right: var(--fa-right, 0);
  top: auto;
  transform: scale(var(--fa-layers-scale, 0.25));
  transform-origin: bottom right;
}

.fa-layers-bottom-left {
  bottom: var(--fa-bottom, 0);
  left: var(--fa-left, 0);
  right: auto;
  top: auto;
  transform: scale(var(--fa-layers-scale, 0.25));
  transform-origin: bottom left;
}

.fa-layers-top-right {
  top: var(--fa-top, 0);
  right: var(--fa-right, 0);
  transform: scale(var(--fa-layers-scale, 0.25));
  transform-origin: top right;
}

.fa-layers-top-left {
  left: var(--fa-left, 0);
  right: auto;
  top: var(--fa-top, 0);
  transform: scale(var(--fa-layers-scale, 0.25));
  transform-origin: top left;
}

.fa-1x {
  font-size: 1em;
}

.fa-2x {
  font-size: 2em;
}

.fa-3x {
  font-size: 3em;
}

.fa-4x {
  font-size: 4em;
}

.fa-5x {
  font-size: 5em;
}

.fa-6x {
  font-size: 6em;
}

.fa-7x {
  font-size: 7em;
}

.fa-8x {
  font-size: 8em;
}

.fa-9x {
  font-size: 9em;
}

.fa-10x {
  font-size: 10em;
}

.fa-2xs {
  font-size: 0.625em; /* converts a 10px size into an em-based value that's relative to the scale's 16px base */
  line-height: 0.1em; /* sets the line-height of the icon back to that of it's parent */
  vertical-align: 0.225em; /* vertically centers the icon taking into account the surrounding text's descender */
}

.fa-xs {
  font-size: 0.75em; /* converts a 12px size into an em-based value that's relative to the scale's 16px base */
  line-height: 0.0833333333em; /* sets the line-height of the icon back to that of it's parent */
  vertical-align: 0.125em; /* vertically centers the icon taking into account the surrounding text's descender */
}

.fa-sm {
  font-size: 0.875em; /* converts a 14px size into an em-based value that's relative to the scale's 16px base */
  line-height: 0.0714285714em; /* sets the line-height of the icon back to that of it's parent */
  vertical-align: 0.0535714286em; /* vertically centers the icon taking into account the surrounding text's descender */
}

.fa-lg {
  font-size: 1.25em; /* converts a 20px size into an em-based value that's relative to the scale's 16px base */
  line-height: 0.05em; /* sets the line-height of the icon back to that of it's parent */
  vertical-align: -0.075em; /* vertically centers the icon taking into account the surrounding text's descender */
}

.fa-xl {
  font-size: 1.5em; /* converts a 24px size into an em-based value that's relative to the scale's 16px base */
  line-height: 0.0416666667em; /* sets the line-height of the icon back to that of it's parent */
  vertical-align: -0.125em; /* vertically centers the icon taking into account the surrounding text's descender */
}

.fa-2xl {
  font-size: 2em; /* converts a 32px size into an em-based value that's relative to the scale's 16px base */
  line-height: 0.03125em; /* sets the line-height of the icon back to that of it's parent */
  vertical-align: -0.1875em; /* vertically centers the icon taking into account the surrounding text's descender */
}

.fa-width-auto {
  --fa-width: auto;
}

.fa-fw,
.fa-width-fixed {
  --fa-width: 1.25em;
}

.fa-ul {
  list-style-type: none;
  margin-inline-start: var(--fa-li-margin, 2.5em);
  padding-inline-start: 0;
}

.fa-ul > li {
  position: relative;
}

.fa-li {
  inset-inline-start: calc(-1 * var(--fa-li-width, 2em));
  position: absolute;
  text-align: center;
  width: var(--fa-li-width, 2em);
  line-height: inherit;
}

/* Heads Up: Bordered Icons will not be supported in the future!
  - This feature will be deprecated in the next major release of Font Awesome (v8)!
  - You may continue to use it in this version *v7), but it will not be supported in Font Awesome v8.
*/
/* Notes:
* --@{v.$css-prefix}-border-width = 1/16 by default (to render as ~1px based on a 16px default font-size)
* --@{v.$css-prefix}-border-padding =
  ** 3/16 for vertical padding (to give ~2px of vertical whitespace around an icon considering it's vertical alignment)
  ** 4/16 for horizontal padding (to give ~4px of horizontal whitespace around an icon)
*/
.fa-border {
  border-color: var(--fa-border-color, #eee);
  border-radius: var(--fa-border-radius, 0.1em);
  border-style: var(--fa-border-style, solid);
  border-width: var(--fa-border-width, 0.0625em);
  box-sizing: var(--fa-border-box-sizing, content-box);
  padding: var(--fa-border-padding, 0.1875em 0.25em);
}

.fa-pull-left,
.fa-pull-start {
  float: inline-start;
  margin-inline-end: var(--fa-pull-margin, 0.3em);
}

.fa-pull-right,
.fa-pull-end {
  float: inline-end;
  margin-inline-start: var(--fa-pull-margin, 0.3em);
}

.fa-beat {
  animation-name: fa-beat;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, ease-in-out);
}

.fa-bounce {
  animation-name: fa-bounce;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1));
}

.fa-fade {
  animation-name: fa-fade;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
}

.fa-beat-fade {
  animation-name: fa-beat-fade;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
}

.fa-flip {
  animation-name: fa-flip;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, ease-in-out);
}

.fa-shake {
  animation-name: fa-shake;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, linear);
}

.fa-spin {
  animation-name: fa-spin;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 2s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, linear);
}

.fa-spin-reverse {
  --fa-animation-direction: reverse;
}

.fa-pulse,
.fa-spin-pulse {
  animation-name: fa-spin;
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, steps(8));
}

@media (prefers-reduced-motion: reduce) {
  .fa-beat,
  .fa-bounce,
  .fa-fade,
  .fa-beat-fade,
  .fa-flip,
  .fa-pulse,
  .fa-shake,
  .fa-spin,
  .fa-spin-pulse {
    animation: none !important;
    transition: none !important;
  }
}
@keyframes fa-beat {
  0%, 90% {
    transform: scale(1);
  }
  45% {
    transform: scale(var(--fa-beat-scale, 1.25));
  }
}
@keyframes fa-bounce {
  0% {
    transform: scale(1, 1) translateY(0);
  }
  10% {
    transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
  }
  30% {
    transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
  }
  50% {
    transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
  }
  57% {
    transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
  }
  64% {
    transform: scale(1, 1) translateY(0);
  }
  100% {
    transform: scale(1, 1) translateY(0);
  }
}
@keyframes fa-fade {
  50% {
    opacity: var(--fa-fade-opacity, 0.4);
  }
}
@keyframes fa-beat-fade {
  0%, 100% {
    opacity: var(--fa-beat-fade-opacity, 0.4);
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(var(--fa-beat-fade-scale, 1.125));
  }
}
@keyframes fa-flip {
  50% {
    transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg));
  }
}
@keyframes fa-shake {
  0% {
    transform: rotate(-15deg);
  }
  4% {
    transform: rotate(15deg);
  }
  8%, 24% {
    transform: rotate(-18deg);
  }
  12%, 28% {
    transform: rotate(18deg);
  }
  16% {
    transform: rotate(-22deg);
  }
  20% {
    transform: rotate(22deg);
  }
  32% {
    transform: rotate(-12deg);
  }
  36% {
    transform: rotate(12deg);
  }
  40%, 100% {
    transform: rotate(0deg);
  }
}
@keyframes fa-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.fa-rotate-90 {
  transform: rotate(90deg);
}

.fa-rotate-180 {
  transform: rotate(180deg);
}

.fa-rotate-270 {
  transform: rotate(270deg);
}

.fa-flip-horizontal {
  transform: scale(-1, 1);
}

.fa-flip-vertical {
  transform: scale(1, -1);
}

.fa-flip-both,
.fa-flip-horizontal.fa-flip-vertical {
  transform: scale(-1, -1);
}

.fa-rotate-by {
  transform: rotate(var(--fa-rotate-angle, 0));
}

.svg-inline--fa .fa-primary {
  fill: var(--fa-primary-color, currentColor);
  opacity: var(--fa-primary-opacity, 1);
}

.svg-inline--fa .fa-secondary {
  fill: var(--fa-secondary-color, currentColor);
  opacity: var(--fa-secondary-opacity, 0.4);
}

.svg-inline--fa.fa-swap-opacity .fa-primary {
  opacity: var(--fa-secondary-opacity, 0.4);
}

.svg-inline--fa.fa-swap-opacity .fa-secondary {
  opacity: var(--fa-primary-opacity, 1);
}

.svg-inline--fa mask .fa-primary,
.svg-inline--fa mask .fa-secondary {
  fill: black;
}

.svg-inline--fa.fa-inverse {
  fill: var(--fa-inverse, #fff);
}

.fa-stack {
  display: inline-block;
  height: 2em;
  line-height: 2em;
  position: relative;
  vertical-align: middle;
  width: 2.5em;
}

.fa-inverse {
  color: var(--fa-inverse, #fff);
}

.svg-inline--fa.fa-stack-1x {
  --fa-width: 1.25em;
  height: 1em;
  width: var(--fa-width);
}

.svg-inline--fa.fa-stack-2x {
  --fa-width: 2.5em;
  height: 2em;
  width: var(--fa-width);
}

.fa-stack-1x,
.fa-stack-2x {
  inset: 0;
  margin: auto;
  position: absolute;
  z-index: var(--fa-stack-z-index, auto);
}

/*
 * Caja reservada para los iconos FontAwesome (modo SVG+JS) ANTES del swap.
 *
 * El HTML trae <i class="fa-regular fa-..."> vacíos (0x0 px) que dom.watch()
 * reemplaza por <svg class="svg-inline--fa"> cuando el bundle ejecuta. En una
 * carga fría el primer paint ocurre antes, y al aparecer los iconos empujan
 * rótulos, tabs y empty-states. Esta regla les da desde el inicio la misma
 * caja que tendrá el <svg> (1.25em x 1em, vertical-align -0.125em: los valores
 * de .svg-inline--fa / .fa-fw) para que el reflow no mueva nada.
 *
 * :where() deja la especificidad en 0: cualquier clase utilitaria del mismo
 * elemento (hidden, w-*, h-*, text-*) sigue ganando, como ganaba antes.
 * En modo replace (el usado) el <i> desaparece al convertirse, así que la
 * regla no toca a los <svg> ya insertados.
 */
:where(i[class*=fa-]) {
  display: inline-block;
  width: 1.25em;
  height: 1em;
  vertical-align: -0.125em;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body.loading {
  opacity: 0;
}

html,
body {
  height: 100%;
}

html,
body,
#__next {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

body,
#__next {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

picture img {
  width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
b {
  font-weight: bold;
}

em,
i {
  font-style: italic;
}

/* El proyecto omite el preflight de Tailwind a proposito (usa este reset), asi
   que aca va lo que el preflight aportaba para los links: sin `color: inherit`
   todo <a> sin clase de color hereda el azul del user-agent (#0000EE), que se
   pierde contra fondos oscuros o invertidos (ej: el toast de flash, que usa
   var(--text-primary) de fondo). Con inherit el link toma el color del texto
   que lo rodea y sigue al tema claro/oscuro. */
a {
  color: inherit;
  text-decoration: none;
}

/* input {
  outline: none;
  border: none;
  border-radius: 0;
} */
/* input,
textarea,
button {
  appearance: none;
} */
button {
  appearance: none;
}

input,
select,
textarea,
button {
  font-family: inherit;
}

button {
  position: relative;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 100%;
  color: var(--text-primary, black);
}

/* Anillo de foco unico de todo Flycrew.

   Vive aca porque commons/reset.css es lo unico que cargan los tres entries
   (application, admin, page). Los tokens --focus-ring-* los define cada panel
   —manage/variables.css atado al acento de la compañia, admin/theme.css atado
   a --admin-primary—, asi que esta regla pinta el anillo con el color correcto
   sin saber en cual de los dos esta.

   Es :focus-visible y no :focus a proposito: el navegador solo lo activa
   cuando el foco llego por teclado (o en campos de texto, siempre). Con :focus
   el anillo aparecia tambien al hacer click con el mouse, que es justo el ruido
   que llevo a que alguien escribiera `outline: none !important` aca en primer
   lugar — y de paso apago el foco de TODOS los botones del producto y del
   admin, incluida la navegacion por teclado.

   Un elemento que necesite otro tratamiento NO debe volver a `outline: none`:
   debe apagarlo solo para el puntero, no para el teclado. */
:focus-visible {
  outline: var(--focus-ring, 2px solid currentColor);
  outline-offset: var(--focus-ring-offset, 2px);
}

body {
  font-family: var(--graphik-font), Helvetica, Arial, sans-serif;
  /* Color de texto base del producto. El fallback conserva el negro exacto en
     los layouts que no emiten los tokens del tema. */
  color: var(--text-primary, #000000);
}

/* 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);
  }
}
@font-face {
  font-family: "Graphik";
  src: url("/assets/graphik/Graphik-Regular-6424b31d.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
/* El peso destacado del producto (bold) usa el trazo Medium, no Semibold:
   unifica todo el énfasis de la app en una sola cara. El Semibold queda
   reservado como 900 para un peso de mayor impacto (aún sin asignar). */
@font-face {
  font-family: "Graphik";
  src: url("/assets/graphik/Graphik-Medium-98f8a53f.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Graphik";
  src: url("/assets/graphik/Graphik-Semibold-351751c1.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
}
:root {
  --graphik-font: "Graphik", sans-serif;
}

:root {
  --font-small: 13px;
  --item-font-default: 15px;
  --valor-grid-col: 8.33%;
  /* COLORES */
  --soft-gray-bg: #f2f2f2; /* base; theme_style_tag la sobreescribe con el gris teñido del tema */
  --shadow-rgb: 55, 63, 71; /* base RGB de sombras (tono paper); teñida por theme_style_tag */
  /* SUPERFICIES Y TEXTO — valores del modo claro.
     Los overrides del modo oscuro los emite ThemeHelper#theme_style_tag bajo
     :root.dark (derivados del hue del tema de la compañía). Aca viven solo los
     valores claros base, igual que --soft-gray-bg y --shadow-rgb.

     Regla semantica: cada superficie usa la variable de SU tipo. --surface-bg
     es fondo de tarjeta/paper (reemplaza los bg-white); NO usarla como borde ni
     como fondo de input (eso es --background-color). */
  --surface-bg: #ffffff;
  /* Escala de texto de 3 roles. --text-soft colapsa los #333/#555 historicos y
     --text-muted los #888/#999. NO usar un token de texto en un fondo. */
  --text-primary: #000000;
  --text-soft: #555555;
  --text-muted: #888888;
  /* Skeletons de carga */
  --skeleton-base: #eef0f2;
  --skeleton-highlight: #f8f9fa;
  /* Borde/sombra de las tarjetas (paper). En claro son tres capas de sombra
     sutil; en oscuro theme_style_tag lo reemplaza por un anillo de 1px, porque
     una sombra casi negra es invisible sobre una pagina oscura. Va como token
     (y no como clase Tailwind) para que el modo lo pueda cambiar entero. */
  --paper-shadow:
    0 2px 8px rgba(var(--shadow-rgb), 0.03),
    0 1px 2px rgba(var(--shadow-rgb), 0.07),
    0 0 0 1px rgba(var(--shadow-rgb), 0.03);
  /* Riel del switch apagado. La perilla es blanca en ambos modos, asi que el
     riel debe ser mas oscuro que ella en claro y mas claro que el fondo en
     oscuro. */
  --switch-track: #ccc;
  /* Riel del switch ENCENDIDO. En claro es el negro historico; en oscuro
     theme_style_tag lo pasa al acento del tema, que es como lo resuelve el
     mercado (iOS/Material: riel encendido = acento, perilla blanca). Un riel
     negro sobre una pagina oscura no se distinguia del estado apagado. */
  --switch-on: #000000;
  /* Color de la perilla cuando el switch esta ENCENDIDO. En claro el riel
     encendido siempre es negro, asi que la perilla es blanca. En oscuro el riel
     es el acento y la perilla se calcula por luminancia (text_color_for), porque
     con un acento claro —el tema por defecto deriva BLANCO— una perilla blanca
     sobre riel blanco desaparece. Apagada la perilla es blanca en ambos modos:
     el riel apagado es gris/oscuro. */
  --switch-knob-on: #ffffff;
  /* Borde del radio/checkbox SIN marcar. En claro es el negro historico; en
     oscuro theme_style_tag lo baja a un gris medio, porque un anillo de 2px
     casi blanco sobre superficie oscura grita mas que el propio contenido (el
     mercado usa un borde atenuado para el estado no seleccionado). El relleno
     del estado marcado sigue siendo --text-primary. */
  --control-border: #000000;
  /* Anillo de foco / estado activo, unico para todo el producto.

     Va como OUTLINE y no como box-shadow porque el outline no ocupa espacio en
     el layout: se puede pintar sobre un elemento dentro de una grilla apretada
     (un chip del calendario, una celda de tabla) sin correr ni un pixel a sus
     vecinos. El offset lo despega del borde para que se lea tambien sobre
     superficies teñidas.

     El color SIGUE al tema elegido en Apariencia. Se ata a --main-color-accent
     y no al --main-color crudo: el accent es el color de marca ya ajustado
     hasta cumplir MIN_ACCENT_CONTRAST contra la superficie (theme_style_tag lo
     oscurece en claro y lo aclara en oscuro), asi que una marca clara no deja
     el anillo invisible y el modo oscuro sale gratis — ese token ya se
     redefine bajo :root.dark.

     El fallback NO es cosmetico: cuatro layouts (page, marketing, onboarding,
     public_refunds) no emiten theme_style_tag, y sin el la variable quedaria en
     guaranteed-invalid value y el outline no se pintaria.

     No confundir con --focus-border-color, que es el borde gris de un input
     enfocado (chrome del campo). Este es el anillo que marca el elemento
     activo. El panel Admin:: tiene ademas su propio --admin-focus-ring, que es
     un color rgba para el halo suave de sus inputs — otra cosa. */
  --focus-ring-color: var(--main-color-accent, var(--text-primary));
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring: var(--focus-ring-width) solid var(--focus-ring-color);
  /* Rellenos de estado de los BOTONES. En claro son los colores saturados
     historicos (sin cambio). En oscuro theme_style_tag los pasa a "tonales":
     fondo oscuro teñido + texto claro, que es como los resuelve el mercado
     (Material 3 y el propio panel Admin) porque un relleno saturado a pantalla
     completa deslumbra sobre un fondo oscuro. */
  --state-success-bg: var(--color-green);
  --state-success-text: #000000;
  --state-warning-bg: #fded1a;
  --state-warning-text: #000000;
  --state-error-bg: #ff2f37;
  --state-error-text: #ffffff;
  /* Chip de variable/token del editor de emails ({{customer-name}}). */
  --token-chip-bg: #f1ecff;
  --token-chip-text: #6b46c1;
  /* BADGES de estado. En claro son los pasteles historicos con texto negro.
     En oscuro pasan a la forma "container" del mercado: fondo oscuro teñido del
     mismo hue + texto claro del mismo hue. Un pastel claro en oscuro se lee
     como un parche que grita. */
  --badge-error-bg: #fcd9dd;
  --badge-error-text: #000000;
  --badge-success-bg: #c8fcc8;
  --badge-success-text: #000000;
  --badge-info-bg: #dbecfc;
  --badge-info-text: #000000;
  --badge-warning-bg: #fcf39d;
  --badge-warning-text: #000000;
  /* Hues fuera de la escala semantica: violeta de etapa intermedia y color de
     marca de cada canal. Aca el texto SI va tintado (y no negro como los cuatro
     de arriba): es lo que hace reconocible a Instagram/WhatsApp de un vistazo,
     que es justamente para lo que existe la pill. */
  --badge-purple-bg: #f1ebff;
  --badge-purple-text: #6d28d9;
  --badge-instagram-bg: #fce8f3;
  --badge-instagram-text: #c13584;
  --badge-whatsapp-bg: #e7f9ee;
  --badge-whatsapp-text: #128c4a;
  /* HUE saturado de cada familia semantica. Es un token propio y NO el de texto
     del badge porque en claro ese texto es negro — y un punto (o un monto, o un
     borde) negro no dice de que estado se trata. En oscuro theme_style_tag lo
     iguala al texto del container, que ya es el hue aclarado.

     Se usa para todo lo que deba llevar el COLOR del estado sobre una
     superficie: el punto de badge(dot: true), el marcador de la columna del
     Pipeline, un monto en verde, un mensaje de error en rojo, el borde de un
     bloque tintado. Un solo token por familia = punto y pill no pueden
     divergir. */
  /* PALETA DE IDENTIDAD de agentes (Agentes): 8 tonos estilo calendario para
     distinguir un agente de otro (barra de la tarjeta del pipeline, dots de
     leyenda, swatches del editor). Es IDENTIDAD, no semantica: por eso evita los
     hues semanticos exactos de abajo (un agente "rojo" pareceria en error).
     Las claves espejan Agents::Agent::COLORS; el par oscuro lo emite
     ThemeHelper::DARK_AGENT_COLORS (hay un spec que verifica la paridad). */
  --agent-blue: #2563eb;
  --agent-purple: #9333ea;
  --agent-pink: #db2777;
  --agent-teal: #0d9488;
  --agent-orange: #ea580c;
  --agent-cyan: #0891b2;
  --agent-indigo: #4f46e5;
  --agent-lime: #65a30d;
  --hue-error: #dc2626;
  --hue-success: #16a34a;
  --hue-info: #0477f8;
  --hue-warning: #d97706;
  --hue-purple: #7c3aed;
  --hue-instagram: #e1306c;
  --hue-whatsapp: #25d366;
  --hue-neutral: #999999;
  --color-black: #000000;
  --color-yellow: #feec17;
  --color-blue: #0477f8;
  --color-grey: #fafafa;
  --color-greyBorder: #dbdbdb;
  --color-green: #2bda31;
  --color-red: #ff2f37;
  --color-placeholder: #eee;
  --animation-button: linear;
  /*FORM*/
  --default-size: 40px;
  --border-color: #eaeaea;
  --background-color: #f8f8f8;
  --border-radius: 6px;
  --color-black: black;
  --color-white: white;
  --focus-border-color: #c8c8c8;
  --focus-background-color: white;
  --opacity-disabled: 0.5;
  --dark-background: #2b2b2b;
  --error-color: #ff2f37;
  --success-background: #e7ffed;
  --success-border-color: #4ceb86;
  /*GRAFICOS — paleta de series de Chart.js. Es una PALETA, no una semantica: el
    mismo verde es "Nuevas suscripciones" en Ventas y "En vivo" en Asistencia, y
    el mapeo serie->color vive en cada controller. Chart.js pinta en <canvas>,
    donde estas variables NO aplican solas: el JS las lee con getComputedStyle
    (ver app/javascript/utils/theme/tokens.js). Los valores oscuros los emite
    ThemeHelper#dark_chart_tokens; si tocas uno de estos hex, actualiza tambien
    ThemeHelper::CHART_SERIES_COLORS — hay un spec que verifica que coincidan.*/
  --chart-series-1: #ffc05f;
  --chart-series-2: #2b7ff2;
  --chart-series-3: #6bd58b;
  --chart-series-4: #D43DEE;
  /* Triplete R, G, B porque el heatmap interpola alpha por celda. Igual que
     --shadow-rgb: de un hex no se puede sacar el alpha. */
  --chart-heatmap-base-rgb: 0, 143, 251;
}

.heading {
  margin: 0 0 30px 0;
}

@media (max-width: 500px) {
  .heading {
    margin: 0 0 20px 0;
  }
}
.heading h1 {
  font-size: 32px;
  line-height: 1.3em;
}

@media (max-width: 500px) {
  .heading h1 {
    font-size: 24px;
  }
}
.heading h1 + p {
  margin: 10px 0;
}

.heading h3 {
  font-size: 24px;
  line-height: 1.3;
}

@media (max-width: 500px) {
  .heading h3 {
    font-size: 21px;
  }
}
.heading h3 + p {
  margin: 10px 0;
}

.heading h4 {
  font-size: 21px;
  line-height: 1.3;
}

@media (max-width: 500px) {
  .heading h4 {
    font-size: 18px;
  }
}
.heading h4 + p {
  margin: 10px 0;
}

.heading p {
  line-height: 1.4;
}

.heading time {
  font-size: 16px;
  display: block;
  margin-top: 5px;
}

.title {
  margin-bottom: 10px;
}

.title h6 {
  font-weight: bold;
}

.headingActions {
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.headingOption {
  margin-left: 10px;
}

.headingOptions {
  display: flex;
  align-items: center;
}

.headingOptions > * {
  margin-left: 20px;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=time],
input[type=date],
input[type=number],
input[type=url],
input[type=datetime-local],
textarea, select {
  width: 100%;
  color: var(--text-primary);
  font-size: 16px;
  height: var(--default-size);
  padding: 0 12px;
  border: 1px solid var(--border-color);
  background-color: var(--background-color);
  border-radius: var(--border-radius);
}

/* Placeholder: sin regla propia el navegador aplica su gris por defecto, que
   sobre el fondo oscuro de los inputs queda casi ilegible. Se ata al token de
   texto atenuado para que siga al modo. */
input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
  opacity: 1; /* Firefox lo baja a 0.54 por defecto y ensucia el token */
}

input[type=submit] {
  cursor: pointer;
}

select:focus,
selectOption:focus,
input[type=text]:focus,
input[type=tel]:focus,
input[type=email]:focus,
input[type=datetime-local]:focus,
textarea:focus {
  border-color: var(--focus-border-color);
  background-color: var(--focus-background-color);
}

/* Patron "input oculto + control visible": el <label> es lo que se ve y el
   radio/checkbox va escondido adentro — con style inline de 0x0 en option_item,
   con sr-only en el selector de templates de landing. En los dos casos el input
   sigue siendo focuseable con teclado, pero no ocupa area, asi que el anillo de
   commons/reset.css se dibujaria sobre nada. Se traslada al label.

   Es hijo DIRECTO a proposito: en el switch el input tambien es sr-only pero
   cuelga del span del riel, no del label, y ahi el anillo ya lo pinta
   manage/switch.scss — con un descendiente suelto saldrian dos anillos. */
label:has(> .option-item-input:focus-visible),
label:has(> input.sr-only:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

textarea {
  padding: 12px;
  height: 100px;
  line-height: 1.4;
}

select {
  width: 100%;
}

input[type=text]:disabled,
input[type=tel]:disabled,
textarea:disabled,
select:disabled {
  opacity: var(--opacity-disabled);
}

input[type=radio],
input[type=checkbox] {
  background-color: var(--surface-bg);
  appearance: none;
  position: relative;
  margin: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--control-border);
  display: grid;
  place-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

input[type=radio] {
  border-radius: 50%;
}

input[type=radio]:before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  border-radius: 50%;
  background: var(--text-primary);
  transition: all 0.1s linear;
}

input[type=radio]:checked:before {
  transform: scale(1);
}

input[type=checkbox] {
  border-radius: 6px;
}

input[type=checkbox]:before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  border-radius: 2px;
  background: var(--text-primary);
  transition: all 0.1s linear;
}

input[type=checkbox]:checked:before {
  transform: scale(1);
}

.inputSuccess {
  background: var(--success-background) !important;
  border-color: var(--success-border-color) !important;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(108, 93, 211, 0.7);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(108, 93, 211, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(108, 93, 211, 0);
  }
}
.btn {
  max-width: 100%;
  width: auto;
  justify-content: auto;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  color: black;
  border: 2px solid transparent;
  min-width: 0;
  transition: all 200ms linear;
}

.btn span {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex-shrink: 0;
}

@media (hover) {
  .btn:hover {
    transform: translateY(-1px);
  }
}
.btn:active {
  transform: scale(0.995);
}

.default {
  background: var(--soft-gray-bg);
}

.default.btnOutline {
  border-color: black;
  color: black;
}

.primary {
  background: #000;
  color: white;
}

.error {
  background: var(--color-red);
  color: white;
}

.error.btnOutline {
  border-color: var(--color-red);
  color: var(--color-red);
}

.success {
  background: #2bda31;
}

.success.btnOutline {
  border-color: #2bda31;
  color: #2bda31;
}

.grey {
  background: #303030;
  color: white;
}

.grey.btnOutline {
  border-color: #303030;
  color: #303030;
}

.white {
  background: white;
  color: black;
}

.white.btnOutline {
  border-color: white;
  color: white;
}

.yellow {
  background: #fded1a;
  color: black;
}

.paypal {
  background: #ffc43a;
  color: black;
}

.transparent {
  background: none;
  color: black;
}

@media (hover) {
  .transparent:hover {
    background: #ebebeb;
  }
}
.byAi {
  background: #4c44f6;
  color: white;
}

.disabled {
  cursor: default;
  opacity: 0.5;
  transform: none !important;
}

.sizeDefault {
  height: 40px;
  padding: 0 15px;
  width: auto;
  font-size: 15px;
  border-radius: 8px;
}

.sizeDefault.onlyIcon {
  width: 40px;
}

.sizeXSmall {
  height: 22px;
  padding: 0 8px;
  font-size: 11px;
  border-radius: 4px;
}

.sizeSmall {
  height: 28px;
  padding: 0 10px;
  font-size: 13px;
  border-radius: 5px;
}

.sizeSmall.isDropdown svg {
  font-size: 11px;
}

.sizeSmall.onlyIcon {
  width: 28px;
}

.sizeMedium {
  height: 32px;
  padding: 0 12px;
  font-size: 14px;
  border-radius: 8px;
}

.sizeMedium.isDropdown {
  padding-right: 6px;
}

.sizeMedium.onlyIcon {
  width: 32px;
}

.sizeLarge {
  height: 55px;
  padding: 0 30px;
  font-size: 18px;
  border-radius: 10px;
}

.circle {
  border-radius: 40px;
}

@media (max-width: 500px) {
  .sizeLarge {
    height: 44px;
    font-size: 16px;
    padding: 0 20px;
  }
}
.sizeLarge.onlyIcon {
  width: 55px;
}

.sizeXLarge {
  height: 64px;
  padding: 0 30px;
  font-size: 24px;
  border-radius: 10px;
}

@media (max-width: 500px) {
  .sizeXLarge {
    height: 56px;
    font-size: 21px;
    padding: 0 20px;
  }
}
.sizeXLarge.onlyIcon {
  width: 64px;
}

.full {
  width: 100% !important;
  justify-content: center;
}

.onlyIcon {
  justify-content: center;
  padding: 0;
}

.isPulse {
  animation: pulse 2s infinite;
}

.btnOutline {
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  background: none !important;
}

.custom {
  background-color: var(--custom-color);
  color: white;
}

.advice {
  padding: 20px;
  .advice-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    h6 {
      font-weight: bold;
    }
    p {
      font-size: 16px;
      color: #000000;
      line-height: 1.4;
    }
  }
}

.text {
  &.text-default {
    img {
      max-width: 100%;
    }
    strong {
      font-weight: bold;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-weight: bold;
      margin-bottom: 10px;
      font-size: 1rem;
      line-height: 1.5;
    }
    p,
    ul,
    ol {
      margin-bottom: 15px;
    }
    p,
    li {
      line-height: 1.5;
    }
    a {
      color: inherit;
      text-decoration: underline;
    }
    ul,
    ol {
      margin-left: 20px !important;
    }
    ol li {
      list-style-type: decimal;
    }
    ul li {
      list-style-type: disc;
    }
    figure {
      margin-bottom: 20px;
    }
    figure.image {
      display: flex;
      align-items: center;
      flex-direction: column;
    }
    figure.image img {
      flex-shrink: 0;
    }
    figure.image-style-side {
      max-width: 50%;
      float: right;
      margin-left: 20px;
    }
    figure figcaption {
      padding: 0 10px;
      margin-top: 5px;
      font-size: 11px;
      line-height: 1.5;
      text-align: center;
    }
    img.custom-image-float-right {
      max-width: 50%;
      float: right;
      margin-left: 20px;
    }
    img.custom-image-float-left {
      max-width: 50%;
      float: left;
      margin-right: 20px;
    }
    .text-link {
      word-break: break-all;
    }
  }
  /* Escala tipografica real para la Biblioteca (lecciones de curso).
     Fuente unica de estilos del contenido de leccion: la consumen el show
     (rich_text) y el area editable de TipTap del editor, por lo que ambos
     modos se ven identicos (WYSIWYG). Debe declararse DESPUES de
     .text-default para ganarle al aplanado h1-h6 = 1rem con igual
     especificidad. Fuera de la Biblioteca (showcase, home del plan) se
     mantiene el aplanado de .text-default. */
  &.text-course {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-weight: bold;
      line-height: 1.3;
    }
    /* h1 = titulo de la leccion (en el editor, el nodo 0 del documento TipTap). */
    h1 {
      font-size: 32px;
    }
    h2 {
      font-size: 26px;
    }
    h3 {
      font-size: 22px;
    }
    h4 {
      font-size: 18px;
    }
    h5,
    h6 {
      font-size: 16px;
    }
  }
  /* Escala tipografica del muro (feed). Fuente unica del estilo del titulo
     de un post: la consume el post card (h6), y el titulo del composer —hoy
     el primer nodo del documento de TipTap— toma la misma escala del aplanado
     h1-h6 de .text-default, por lo que escribir y leer se ven identicos
     (WYSIWYG) — espejo de .text-course. Los valores replican ese aplanado
     porque el diseño del muro ES el default; la clase existe para que un
     cambio futuro en el post lo herede solo el compositor. */
  &.text-feed {
    /* URLs o palabras sin espacios mas anchas que la tarjeta: quebrar solo
       cuando no queda otra (anywhere), sin partir palabras normales. Es
       heredable, asi que cubre p/a/li tanto en el post card como en el area
       editable del composer (ambos consumen .text-feed). */
    overflow-wrap: anywhere;
    h6 {
      font-weight: bold;
      font-size: 1rem;
      line-height: 1.5;
      margin-bottom: 10px;
    }
  }
}

body {
  background-color: var(--bg-color);
}

.rowModule {
  padding: 45px 0;
}

@media screen and (max-width: 700px) {
  .rowModule {
    padding: 35px 0;
  }
}
@media screen and (max-width: 500px) {
  .rowModule {
    padding: 15px 0;
  }
}
.row {
  width: var(--width-page);
  margin: 0 auto;
}

.gridCol {
  padding: var(--grid-padding-col);
}

.col-1 {
  width: calc(var(--valor-grid-col) * 1);
}

.col-2 {
  width: calc(var(--valor-grid-col) * 2);
}

.col-3 {
  width: calc(var(--valor-grid-col) * 3);
}

@media (max-width: 1000px) {
  .col-3 {
    width: calc(var(--valor-grid-col) * 4);
  }
}
@media (max-width: 700px) {
  .col-3 {
    width: calc(var(--valor-grid-col) * 6);
  }
}
@media (max-width: 500px) {
  .col-3 {
    width: calc(var(--valor-grid-col) * 12);
  }
}
.col-4 {
  width: calc(var(--valor-grid-col) * 4);
}

@media (max-width: 1000px) {
  .col-4 {
    width: calc(var(--valor-grid-col) * 6);
  }
}
@media (max-width: 700px) {
  .col-4 {
    width: calc(var(--valor-grid-col) * 12);
  }
}
.col-5 {
  width: calc(var(--valor-grid-col) * 5);
}

@media (max-width: 1000px) {
  .col-5 {
    width: calc(var(--valor-grid-col) * 6);
  }
}
@media (max-width: 700px) {
  .col-5 {
    width: calc(var(--valor-grid-col) * 12);
  }
}
.col-6 {
  width: calc(var(--valor-grid-col) * 6);
}

@media (max-width: 700px) {
  .col-6 {
    width: calc(var(--valor-grid-col) * 12);
  }
}
.col-7 {
  width: calc(var(--valor-grid-col) * 7);
}

@media (max-width: 700px) {
  .col-7 {
    width: calc(var(--valor-grid-col) * 12);
  }
}
.col-8 {
  width: calc(var(--valor-grid-col) * 8);
}

@media (max-width: 700px) {
  .col-8 {
    width: calc(var(--valor-grid-col) * 12);
  }
}
.col-9 {
  width: calc(var(--valor-grid-col) * 9);
}

@media (max-width: 700px) {
  .col-9 {
    width: calc(var(--valor-grid-col) * 12);
  }
}
.col-10 {
  width: calc(var(--valor-grid-col) * 10);
}

@media (max-width: 700px) {
  .col-10 {
    width: calc(var(--valor-grid-col) * 12);
  }
}
.col-11 {
  width: calc(var(--valor-grid-col) * 11);
}

@media (max-width: 700px) {
  .col-11 {
    width: calc(var(--valor-grid-col) * 12);
  }
}
.col-12 {
  width: calc(var(--valor-grid-col) * 12);
}

.cardItemContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
}

.cardItemIcon {
  font-size: 46px;
  margin-bottom: 10px;
  color: var(--color-templateMain);
}

.cardItemBody {
  text-align: center;
}

.reviewItem {
  background: var(--color-templateBglight);
  border-radius: 20px;
  height: 100%;
}

.reviewItemStarts {
  display: flex;
  color: var(--color-templateMain);
  margin: 0 0 10px;
}

.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;
  img {
    max-width: 100%;
  }
  /* 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`). */
  img.custom-image-float-left {
    float: left;
    margin-right: 1em;
    margin-bottom: 0.5em;
  }
  img.custom-image-float-right {
    float: right;
    margin-left: 1em;
    margin-bottom: 0.5em;
  }
  img.custom-image-float-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  img.custom-image-float-none {
    display: inline;
  }
  strong {
    font-weight: bold;
  }
  h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    line-height: 1.4;
  }
  h1, h2, h3, h4, h5, h6 {
    & + p,
    & + ul,
    & + li {
      margin-top: 5px;
    }
  }
  a {
    color: inherit;
    text-decoration: underline;
  }
  h1 {
    font-size: 48px;
    line-height: 1.3;
  }
  h2 {
    font-size: 36px;
    line-height: 1.3;
  }
  h3 {
    font-size: 27px;
  }
  h4 {
    font-size: 24px;
  }
  h5 {
    font-size: 21px;
  }
  h6 {
    font-size: 18px;
  }
  p,
  ul,
  ol {
    margin-bottom: 15px;
  }
  p,
  li {
    line-height: 1.5;
  }
  ul,
  ol {
    margin-left: 40px !important;
  }
  ol li {
    list-style-type: decimal;
  }
  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;
  }
}
.socialLinksPage {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}

.btnSocial {
  display: flex;
  background: black;
  color: white;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}

.btnSocialWrap {
  padding: 5px;
}
@media screen and (max-width: 700px) {
  .btnSocialWrap {
    padding: 3px;
  }
}

.default {
  width: 44px;
  height: 44px;
  font-size: 18px;
}
@media screen and (max-width: 700px) {
  .default {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
}

.small {
  width: 32px;
  height: 32px;
  font-size: 16px;
}
@media screen and (max-width: 700px) {
  .small {
    width: 24px;
    height: 24px;
    font-size: 13px;
  }
}

.priceCardTitle {
  margin-bottom: 20px;
  display: grid;
  gap: 10px;
  text-align: center;
}

.priceCardTitle h5 {
  font-weight: bold;
  font-size: 19px;
}

.priceCardTitle h3 {
  font-size: 32px;
}

.priceCardTitle h6 {
  font-size: 14px;
  font-weight: normal;
}

.priceCardAction {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.reviewItemPhoto {
  position: relative;
  height: 0;
  padding-bottom: 100%;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}

.reviewItemActions {
  margin-top: 10px;
}

.reviewItemContent {
  padding: 40px;
}

.videoItem {
  position: relative;
  width: 100%;
  height: auto;
  padding-bottom: 56.25%;
}

.videoItem video,
.videoItem iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  object-fit: cover;
}