@charset "UTF-8";
@font-face {
  font-family: "Bohemian";
  src: url(/assets/fonts/Bohemian_typewriter-474630b195975442b459ac7eaf2e402667c14b2dc695fe5a3cee84cb1a4785fd.ttf);
  /* Solo los caracteres que la fuente dibuja de verdad (algunos estan vacios): el resto, p. ej. en otros
     idiomas, sale con la fuente de respaldo en vez de en blanco */
  unicode-range: U+20-5D, U+5F-7E, U+A1-A3, U+A5-A9, U+AB, U+AD-B1, U+B4, U+B7-B8, U+BB-CF, U+D1-D6, U+D8-DD, U+DF-EF, U+F1-FD, U+FF, U+10C-10F, U+11A-11B, U+130, U+139-13A, U+13D-13E, U+141-142, U+147-148, U+150-151, U+154-155, U+158-159, U+160-161, U+164-165, U+16E-171, U+178, U+17B-17E, U+2C7, U+2DA, U+2DC-2DD, U+37E, U+2013-2014, U+2017-201E, U+2026, U+2032-2033, U+203C, U+2044, U+20AC, U+2116, U+2122, U+2212, U+2215, U+2219, U+221E, U+2260, U+263A-263B; }
@font-face {
  font-family: "underwood";
  src: url(/assets/fonts/Underwood_Etendu_1913-90dcd9834fd41d204587e8c03a664f03b9ca23bf3db8f4c4f8b505959886a7fe.TTF);
  /* Solo los caracteres que la fuente dibuja de verdad (algunos estan vacios): el resto, p. ej. en otros
     idiomas, sale con la fuente de respaldo en vez de en blanco */
  unicode-range: U+20-22, U+24, U+26-3B, U+3D, U+3F, U+41-5A, U+5E-5F, U+61-7A, U+A2-A5, U+A7-A9, U+AB, U+AE, U+B0-B1, U+BB, U+C0, U+C2, U+C4, U+C6-CB, U+CE-CF, U+D4, U+D9, U+DB, U+E0, U+E2, U+E4, U+E6-EB, U+EE-EF, U+F4, U+F6, U+F9, U+FB-FC, U+152-153, U+2013-2014, U+201C-201D, U+2026, U+20AC; }
#editor:focus {
  outline: none; }

body {
  --delay-popup: 0.7s;
  /* Estilo comun de popups y notificaciones */
  --ui-surface: #08296A;
  --ui-text: #fff;
  --ui-radius: 10px;
  --ui-shadow: 0 10px 28px -8px rgba(8,41,106,0.55), 0 2px 6px rgba(0,0,0,0.12);
  --ui-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ui-info: #31C5F6;
  --ui-success: #3ecf8e;
  --ui-warning: #ff8a5c;
  background-color: #2494d8;
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: #595d6a;
  font-family: "Bohemian","Open Sans", sans-serif; }

.hidden {
  display: none; }

.display {
  display: unset; }

#overlay {
  display: none;
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: #F3F3F4;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99; }

#esconderse {
  position: absolute;
  left: 12px;
  top: 10px;
  text-decoration: none;
  /* font-family: monospace; */
  font-weight: bold;
  font-size: 10px;
  text-decoration: none; }

.popupexplaination::before {
  /* Siempre por encima: invisible y sin pointer-events cuando no hay hover */
  z-index: 10;
  position: absolute;
  background: var(--ui-surface);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
  color: var(--ui-text);
  font-size: 12px;
  font-weight: normal;
  text-transform: none;
  line-height: 1.35;
  letter-spacing: 0.2px;
  opacity: 0;
  text-align: center;
  padding: 7px 12px;
  pointer-events: none;
  transform: translateX(-50%) translateY(calc(-100% + 6px)) scale(0.96);
  transition: opacity 0.2s, transform 0.2s;
  content: attr(popup-msg); }

#esconderse::before {
  top: 53px;
  left: 261px;
  width: 400px; }

.popupexplaination:hover::before,
.popupexplaination:hover::after {
  opacity: 1;
  transition: opacity 0.3s var(--ui-ease) var(--delay-popup), transform 0.3s var(--ui-ease) var(--delay-popup); }

.popupexplaination:hover::before {
  transform: translateX(-50%) translateY(-100%); }

.popupexplaination::after {
  width: 0;
  height: 0;
  z-index: 10;
  content: "";
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  --arrow: 5px; }

#esconderse::after {
  border-top: var(--arrow) solid transparent;
  border-right: calc(var(--arrow)) solid var(--ui-surface);
  border-bottom: var(--arrow) solid transparent;
  top: 13px;
  left: 49px; }

.popupexplaination, .popupexplainationvisited, .popupexplaination:hover {
  color: #595d6a; }

#global_trix_wrapper {
  min-height: 177px; }

#esconderse svg {
  width: 34px; }

#esconderse svg .st3 {
  fill: #31C5F6; }

#esconderse:hover .st3 {
  fill: white; }

#esconderse p {
  margin-top: 5px;
  padding-bottom: 0;
  margin-bottom: 0;
  text-transform: uppercase; }

#esconderse p:visited {
  text-decoration: none; }

/* PESTAÑAS: un mono por chuleta, con los ojos abiertos en la activa.
   Los logos del mono solo funcionan en blanco sobre fondo de color */
#publy_tabs_cntainer {
  position: relative; }

#tabs-container {
  --tab-color: #003e7e;
  position: relative;
  flex-wrap: wrap;
  max-width: calc(100% - 213px);
  display: flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  background: white;
  padding: 8px 8px 10px;
  border-radius: 5px;
  min-height: 39px;
  min-width: 32px;
  box-shadow: rgba(0, 0, 0, 0.45) 0px 22px 20px -20px; }

#tabs-container a::selection,
#tabs-container span::selection {
  background-color: transparent; }

#tabs-container .tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px 6px 10px;
  border-radius: 999px;
  background-color: var(--tab-color);
  color: white;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s; }

#tabs-container .tab:not(.active):hover {
  background-color: #0a4b93; }

/* La pestaña con el raton (y su popup) por delante de las demas */
#tabs-container .tab {
  z-index: 1; }

#tabs-container .tab:hover,
#tabs-container .tab:focus-visible {
  z-index: 2; }

#tabs-container .tab:focus-visible {
  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--ui-info); }

#tabs-container .tab.active {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(0, 62, 126, 0.7), 0 1px 3px rgba(0, 0, 0, 0.12); }

#tabs-container .tab_num {
  min-width: 8px;
  font-size: 11px;
  font-weight: bold;
  line-height: 1; }

/* El mono: dos logos superpuestos, ojos cerrados y ojos abiertos */
#tabs-container .monkey {
  position: relative;
  width: 16px;
  height: 15px;
  transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1); }

#tabs-container .monkey svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.15s; }

#tabs-container .monkey .face {
  fill: white; }

#tabs-container .monkey .feature {
  fill: var(--tab-color); }

#tabs-container .monkey_open {
  opacity: 0; }

#tabs-container .tab:not(.active):hover .monkey {
  transform: scale(1.12); }

/* Activa: ojos abiertos y de vez en cuando parpadea */
#tabs-container .tab.active .monkey_closed {
  opacity: 0;
  animation: monkey_blink_closed 5s step-end 2s infinite; }

#tabs-container .tab.active .monkey_open {
  opacity: 1;
  animation: monkey_blink_open 5s step-end 2s infinite; }

#tabs-container .tab.active .monkey {
  animation: monkey_wake 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }

#tabs-container .tab.tab_new .monkey {
  animation: tab_pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }

#tabs-container .tab.tab_out {
  pointer-events: none;
  animation: tab_out 0.2s ease-in forwards; }

/* Barrita que se desliza bajo la pestaña activa */
#tab_indicator {
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 0;
  border-radius: 3px;
  background: var(--ui-info);
  pointer-events: none;
  transition: transform 0.35s var(--ui-ease), width 0.35s var(--ui-ease); }

/* Vista previa de la chuleta al dejar el raton encima (estilo .popupexplaination) */
#tabs-container .tab::before {
  top: -6px;
  left: 50%;
  width: max-content;
  max-width: 220px;
  white-space: normal;
  /* Sombra hacia arriba para no ensuciar la pestaña que queda debajo */
  box-shadow: 0 -4px 14px -6px rgba(8, 41, 106, 0.45); }

/* La vista previa sale casi al momento y con una entrada corta */
#tabs-container .tab:hover::before,
#tabs-container .tab:hover::after {
  transition: opacity 0.12s ease-out 0.1s, transform 0.12s ease-out 0.1s; }

#tabs-container .tab::after {
  border-left: var(--arrow) solid transparent;
  border-right: var(--arrow) solid transparent;
  border-top: var(--arrow) solid var(--ui-surface);
  top: -6px;
  left: calc(50% - var(--arrow)); }

/* Globo de los botones del editor: mismo estilo y tiempos que el de las pestañas (ver toolbar_popups) */
#tb_popup {
  position: fixed;
  z-index: 20;
  width: max-content;
  max-width: 220px;
  padding: 7px 12px;
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: 0 -4px 14px -6px rgba(8, 41, 106, 0.45);
  color: var(--ui-text);
  font-size: 12px;
  font-weight: normal;
  line-height: 1.35;
  letter-spacing: 0.2px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) translateY(calc(-100% + 6px)) scale(0.96);
  transition: opacity 0.2s, transform 0.2s; }

#tb_popup.on {
  opacity: 1;
  transform: translateX(-50%) translateY(-100%);
  transition: opacity 0.12s ease-out 0.1s, transform 0.12s ease-out 0.1s; }

#tb_popup::after {
  --arrow: 5px;
  content: "";
  position: absolute;
  top: 100%;
  left: calc(50% - var(--arrow));
  border-left: var(--arrow) solid transparent;
  border-right: var(--arrow) solid transparent;
  border-top: var(--arrow) solid var(--ui-surface); }

/* Con la barra pegada arriba no cabe encima: sale debajo del boton, con la flecha hacia arriba */
#tb_popup.below {
  box-shadow: 0 4px 14px -6px rgba(8, 41, 106, 0.45);
  transform: translateX(-50%) translateY(-6px) scale(0.96); }

#tb_popup.below.on {
  transform: translateX(-50%); }

#tb_popup.below::after {
  top: auto;
  bottom: 100%;
  border-top: 0;
  border-bottom: var(--arrow) solid var(--ui-surface); }

/* Borrar desde la pastilla (activa o no) */
#tabs-container .tab_close {
  position: absolute;
  top: -5px;
  right: -5px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  box-shadow: var(--ui-shadow);
  color: var(--tab-color);
  font-family: "Open Sans", sans-serif;
  font-size: 8px;
  line-height: 1;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.15s, transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1), background-color 0.15s, color 0.15s; }

#tabs-container.can_delete .tab .tab_close {
  display: flex; }

#tabs-container .tab:hover .tab_close {
  opacity: 1;
  transform: none; }

#tabs-container .tab_close:hover {
  background: var(--ui-warning);
  color: white; }

/* Boton de nueva chuleta */
#new_tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  margin-left: 2px;
  border: 1.5px dashed #b8c4d6;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s; }

#new_tab:hover {
  border-color: var(--ui-info);
  background-color: #eef6fc; }

#new_tab svg {
  width: 13px;
  fill: #102D6A;
  transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1); }

#new_tab:hover svg {
  transform: rotate(90deg); }

#new_tab::before {
  top: -10px;
  width: 304px;
  left: 156px; }

#new_tab::after {
  border-left: var(--arrow) solid transparent;
  border-right: var(--arrow) solid transparent;
  border-top: var(--arrow) solid var(--ui-surface);
  top: -10px;
  left: 12px; }

/* Parpadeo: el logo de ojos cerrados aparece un instante */
@keyframes monkey_blink_open {
  0% {
    opacity: 1; }
  94% {
    opacity: 0; }
  97% {
    opacity: 1; } }
@keyframes monkey_blink_closed {
  0% {
    opacity: 0; }
  94% {
    opacity: 1; }
  97% {
    opacity: 0; } }
@keyframes monkey_wake {
  0% {
    transform: scale(0.85); }
  100% {
    transform: scale(1); } }
@keyframes tab_pop {
  0% {
    transform: scale(0); }
  100% {
    transform: scale(1); } }
@keyframes tab_out {
  to {
    opacity: 0;
    transform: scale(0.6); } }
@media (prefers-reduced-motion: reduce) {
  #tabs-container *, #tab_indicator {
    animation: none !important;
    transition: none !important; } }
button {
  cursor: pointer; }

h1 {
  font-size: 40px;
  font-family: "underwood","Open Sans", sans-serif; }

/*h1::after{
  content:"®";
  font-family: "Verdana", sans-serif;
  text-decoration:none;
  vertical-align:super;
  font-size:11px;
}*/
h2 {
  font-family: "underwood","Open Sans", sans-serif; }

/* CABECERA: titulo con trazo de rotulador, subtitulo de etiqueta y pasos numerados */
.hero_title {
  margin: 6px 0 4px;
  font-size: 44px;
  font-weight: normal;
  line-height: 1.1;
  color: #3f4350; }

/* Trazo de rotulador detras de la mitad baja del titulo (el verde de la seleccion del editor) */
.hero_title .marker {
  padding: 0 8px;
  background: linear-gradient(transparent 52%, #cfefc9 52%, #cfefc9 90%, transparent 90%);
  border-radius: 4px; }

/* ® de marca registrada del titulo (solo en español, va en el texto traducido) */
.hero_title sup {
  margin-left: 2px;
  font-family: "Open Sans", sans-serif;
  font-size: 0.32em;
  vertical-align: super;
  line-height: 0; }

.hero_subtitle {
  margin: 0 0 18px;
  font-family: "Bohemian","Open Sans", sans-serif;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8a8f9c; }

/* Pasos plegados: la altura se anima desde JS (toggle_steps) */
.steps {
  overflow: hidden;
  transition: max-height 0.3s var(--ui-ease), opacity 0.25s, margin 0.3s var(--ui-ease); }

.steps.steps_hidden {
  max-height: 0 !important;
  margin-bottom: 0;
  opacity: 0; }

/* Boton discreto bajo los pasos: solo texto gris pequeño con una flecha */
.steps_toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: -4px 0 6px auto;
  padding: 2px 4px;
  border: none;
  background: none;
  font-family: "Bohemian","Open Sans", sans-serif;
  font-size: 10px;
  color: #a3a8b4;
  cursor: pointer;
  transition: color 0.15s; }

.steps_toggle:hover,
.steps_toggle:focus-visible {
  color: var(--ui-surface); }

.steps_toggle svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s var(--ui-ease); }

.steps_toggle[aria-expanded="false"] svg {
  transform: rotate(180deg); }

.steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  text-align: left; }

.steps li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 10px;
  background: #f2f8fd;
  font-size: 12px;
  line-height: 1.4; }

.steps .step_num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #003e7e;
  color: white;
  font-size: 11px;
  font-weight: bold;
  line-height: 1; }

.steps .step_text {
  padding-top: 0; }

/* Icono + del boton de nueva chuleta, dentro del texto del paso 4 */
.steps .inline_plus {
  width: 13px;
  height: 13px;
  fill: #102D6A;
  vertical-align: -2px; }

.shortcut_tip {
  margin: 10px 0 0;
  font-size: 11px;
  text-align: center;
  color: #8a8f9c; }

trix-editor {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 14px;
  letter-spacing: 0px;
  width: 564px;
  min-height: 130px;
  position: relative; }

/* Seleccion: celeste en toda la web y, en el editor, verde fosforito claro de rotulador con las letras
   en verde oscuro. Colores literales porque no todos los navegadores aplican variables en ::selection */
::selection {
  background-color: #33B8F3;
  color: white; }

trix-editor::selection,
trix-editor *::selection {
  background-color: #cfefc9;
  color: #198851; }

trix-toolbar {
  text-align: center; }

/* La barra del editor acompana al bajar por textos largos: se queda pegada arriba de la ventana mientras se ve
   el editor (sticky dentro de su bloque, asi que no flota sobre el pie). Fondo blanco para que el texto pase por
   debajo y sombra solo cuando esta pegada (clase stuck, ver sticky_toolbar en chuletator.js) */
#global_trix_wrapper trix-toolbar {
  position: sticky;
  top: 10px;
  /* hueco arriba: se ve el fondo y la barra parece flotar */
  z-index: 15;
  margin-top: -6px;
  padding: 6px 0 2px; }

/* La pastilla (como la isla del iPhone) es una capa detras de los botones que sobresale 8px por los lados: asi la
   barra no se ensancha y los botones no saltan de linea si van justos (Safari los hace algo mas anchos).
   En reposo no se nota: blanco sobre blanco */
#global_trix_wrapper trix-toolbar::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: -1;
  width: calc(var(--island-width, 100%) + 16px);
  border-radius: 14px;
  background: #fff;
  transform: translateX(-50%);
  transition: box-shadow 0.25s var(--ui-ease); }

#global_trix_wrapper trix-toolbar.stuck::before {
  box-shadow: 0 10px 28px -10px rgba(8, 41, 106, 0.45), 0 0 0 1px rgba(8, 41, 106, 0.08); }

/* Con zoom de pellizco (movil) lo fijo se coloca respecto a la pagina entera y no a lo que se ve: la barra
   saltaria, asi que mientras hay zoom deja de flotar (clase pinch_zoomed en <html>, ver watch_pinch_zoom) */
html.pinch_zoomed #global_trix_wrapper trix-toolbar {
  position: relative;
  top: 0; }

#head {
  padding-left: 0;
  text-align: center; }

#wrapper {
  position: relative;
  right: 0; }

/* RESIZE CHULETA: esquina doblada que se agarra para cambiar el ancho */
#preview_paper {
  --fold-size: 22px;
  position: relative;
  display: inline-block;
  margin-top: 4px;
  margin-bottom: 14px; }

/* El papel es celeste muy claro y se intensifica mientras se arrastra la esquina
   (sin sombra, que asomaria bajo la esquina doblada). Al imprimir sale en blanco */
#preview_chuleta {
  background-color: #f2f8fd;
  transition: width 0.18s cubic-bezier(0.25, 0.9, 0.35, 1.15), background-color 0.2s; }

#preview_paper.resizing #preview_chuleta {
  background-color: #e4f2fc; }

/* Linea de cota bajo la chuleta, con marcas en los extremos, como en un plano */
#width_guide {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 7px;
  border-left: 1px solid var(--ui-surface);
  border-right: 1px solid var(--ui-surface);
  background: linear-gradient(var(--ui-surface), var(--ui-surface)) center/100% 1px no-repeat;
  pointer-events: none;
  opacity: 0;
  transform: scaleX(0.97);
  transition: opacity 0.15s, transform 0.2s var(--ui-ease); }

#preview_paper.resizing #width_guide {
  opacity: 0.55;
  transform: none; }

#preview_paper.at_limit #width_guide {
  border-color: var(--ui-warning);
  background-image: linear-gradient(var(--ui-warning), var(--ui-warning));
  opacity: 0.9; }

#preview_paper.settle #preview_chuleta {
  animation: paper_settle 0.45s ease-out; }

#preview_paper.at_limit {
  animation: paper_limit 0.35s ease-in-out; }

/* Texto seleccionado en el editor, marcado en la previsualizacion. El texto (.sel_mark) se queda en su
   sitio y el fondo son rectangulos aparte (.sel_bg, ver paint_selection_bg) en una capa por debajo de
   todo el texto: con los renglones tan juntos, el fondo nunca tapa letras de otras lineas */
.sel_bg {
  position: absolute;
  z-index: -1;
  background: #cfefc9;
  border-radius: 1px;
  pointer-events: none; }

#preview_chuleta {
  position: relative; }

#preview_chuleta, .template_zone {
  isolation: isolate; }

/* Numero en un cuadrado negro con esquinas redondeadas: en la hoja impresa y debajo de la previsualizacion */
/* Tamaño de letra y distancia entre lineas, debajo de la previsualizacion */
#size_info {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0 0 2px;
  font-family: "Open Sans", sans-serif;
  font-size: 10px;
  color: #555; }

#size_info .print_value {
  display: inline-block;
  min-width: 20px;
  margin-left: 3px;
  padding: 2px 6px;
  box-sizing: border-box;
  border-radius: 5px;
  background: #000;
  color: #fff;
  font-weight: bold;
  line-height: 1.3;
  text-align: center; }

/* Mientras se arrastra la esquina se ve la cota del ancho en ese sitio */
#preview_paper.resizing + #size_info {
  visibility: hidden; }

/* Texto que no cabe en la plantilla, marcado tambien en el editor (highlight_editor_overflow) */
::highlight(tpl_overflow) {
  background-color: #ffdbd2;
  color: #cf432e; }

/* PLANTILLAS: selector bajo el titulo de la previsualizacion */
#template_picker {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  margin: 6px 0 4px; }

#template_picker button {
  padding: 3px 7px;
  white-space: nowrap;
  border: 1px solid var(--ui-surface);
  border-radius: 999px;
  background: white;
  color: var(--ui-surface);
  font-family: "Bohemian","Open Sans", sans-serif;
  font-size: 11px;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s; }

#template_picker button:hover {
  background: #e4f2fc; }

#template_picker button[aria-pressed="true"] {
  background: var(--ui-surface);
  color: var(--ui-text); }

/* Con plantilla no se usa la chuleta normal ni se puede cambiar el ancho */
#preview_paper.with_template > :not(#template_view) {
  display: none !important; }

/* .print_template es la copia que se imprime (build_print_area) */
#template_view, .print_template {
  position: relative;
  box-sizing: content-box;
  font-family: "Open Sans";
  color: black; }

#template_view[hidden] {
  display: none; }

.template_img {
  position: absolute;
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none; }

.template_zone {
  position: absolute;
  box-sizing: border-box;
  padding: 1pt;
  overflow: visible;
  word-wrap: break-word;
  overflow-wrap: break-word; }

/* Las zonas son estrechas: sangrado de listas pequeño */
.template_zone ul,
.template_zone ol {
  padding-left: 1.2em; }

/* En pantalla se marcan las zonas donde va el texto */
#template_view .template_zone {
  outline: 1px dashed rgba(36, 148, 216, 0.45); }

/* Lo que no cabe se ve en rojo pastel para que el usuario lo ajuste (los mismos colores que en el editor,
   ::highlight(tpl_overflow)) */
/* El fondo va en una capa por debajo del verde de la seleccion (.sel_bg, z-index:-1) para que al
   seleccionar texto en rojo tambien se vea marcado */
#template_view .template_overflow {
  position: relative; }

#template_view .template_overflow::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -2;
  background-color: #ffdbd2; }

#template_view .template_overflow,
#template_view .template_overflow * {
  color: #cf432e !important; }

#placeholder {
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--fold-size);
  height: var(--fold-size);
  cursor: ew-resize;
  touch-action: none;
  transition: width 0.25s cubic-bezier(0.3, 1.6, 0.5, 1), height 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); }

/* Hueco blanco que deja la esquina al doblarse (tapa el borde punteado) */
#placeholder::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: -1px;
  bottom: -1px;
  background: white;
  clip-path: polygon(100% 0, 100% 100%, 0 100%); }

/* Solapa con el estilo de los botones del editor (trix-toolbar .button_group):
   borde #bbb mas claro arriba y #888 en el borde inferior, fondo blanco con linea #ddd */
#placeholder .fold {
  --fold-bg: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

#placeholder .fold::before,
#placeholder .fold::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

#placeholder .fold::before {
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background: linear-gradient(135deg, #ccc 0%, #bbb 30%, #888 50%); }

#placeholder .fold::after {
  clip-path: polygon(1px 1px, calc(100% - 2.5px) 1px, 1px calc(100% - 2.5px));
  background: linear-gradient(135deg, var(--fold-bg) calc(50% - 2.5px), #ddd calc(50% - 2.5px)); }

#preview_paper #placeholder:hover .fold,
#preview_paper.resizing #placeholder .fold {
  --fold-bg: #cbeefa; }

/* Aviso al dejar el raton sobre la esquina, mismo estilo que .popupexplaination (ver --ui-*) */
#placeholder .resize_tip {
  position: absolute;
  bottom: calc(100% + 9px);
  right: -6px;
  width: 180px;
  padding: 7px 12px;
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
  line-height: 1.35;
  letter-spacing: 0.2px;
  background: var(--ui-surface);
  color: var(--ui-text);
  font-size: 12px;
  text-align: center;
  cursor: default;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  transform-origin: bottom right;
  transition: opacity 0.2s, transform 0.2s; }

#placeholder .resize_tip::after {
  --arrow: 5px;
  content: "";
  position: absolute;
  top: 100%;
  right: 12px;
  border-left: var(--arrow) solid transparent;
  border-right: var(--arrow) solid transparent;
  border-top: var(--arrow) solid var(--ui-surface); }

#placeholder:hover .resize_tip {
  opacity: 1;
  transform: none;
  transition: opacity 0.3s var(--ui-ease) var(--delay-popup), transform 0.3s var(--ui-ease) var(--delay-popup); }

#preview_paper.resizing #placeholder .resize_tip {
  opacity: 0;
  transition: none; }

/* Nada de la esquina ni de la cota se puede seleccionar, y si se cuela la seleccion es transparente */
#placeholder,
#placeholder *,
#width_badge {
  -webkit-user-select: none;
  user-select: none; }

#placeholder::selection,
#placeholder *::selection,
#width_badge::selection {
  background: transparent; }

/* Flecha sobre la esquina doblada */
#placeholder .arrows {
  position: absolute;
  top: 6%;
  left: 6%;
  font-family: "Open Sans", sans-serif;
  font-size: 11px;
  font-weight: bold;
  line-height: 1;
  color: rgba(0, 0, 0, 0.6);
  pointer-events: none;
  transition: font-size 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); }

/* Ancho en cm, en el centro de la cota */
#width_badge {
  position: absolute;
  left: 50%;
  bottom: -17px;
  z-index: 2;
  padding: 3px 9px;
  border-radius: 10px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
  color: var(--ui-text);
  letter-spacing: 0.2px;
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) translateY(-4px) scale(0.85);
  transition: opacity 0.15s, transform 0.2s, background 0.2s; }

/* Mientras no se haya usado, la esquina "llama" la atención 3 veces al cargar
   (y luego una vez cada 2 minutos desde chuletator.js) */
#preview_paper:not(.used) #placeholder {
  animation: fold_peek 4s ease-in-out 1.5s 3; }

#preview_paper:not(.used) #placeholder .arrows {
  animation: arrows_nudge 4s ease-in-out 1.5s 3; }

#preview_paper #placeholder:hover,
#preview_paper.resizing #placeholder {
  --fold-size: 30px;
  animation: none; }

#preview_paper #placeholder:hover .arrows,
#preview_paper.resizing #placeholder .arrows {
  font-size: 14px;
  color: #000;
  animation: arrows_nudge_hover 1.2s ease-in-out infinite; }

/* Durante el arrastre el ancho sigue al raton sin transicion */
body.resizing_chuleta #preview,
body.resizing_chuleta #preview_chuleta {
  transition: none; }

#preview_paper.resizing #width_badge {
  opacity: 1;
  transform: translateX(-50%); }

#preview_paper.at_limit #width_badge {
  background: var(--ui-warning); }

#preview_paper.settle #placeholder {
  animation: fold_snap 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }

body.resizing_chuleta {
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none; }

#preview {
  transition: width 0.18s cubic-bezier(0.25, 0.9, 0.35, 1.15); }

@keyframes fold_peek {
  0%, 70%, 100% {
    width: 22px;
    height: 22px; }
  78% {
    width: 32px;
    height: 32px; }
  86% {
    width: 20px;
    height: 20px; }
  92% {
    width: 26px;
    height: 26px; } }
@keyframes arrows_nudge {
  0%, 70%, 100% {
    transform: translateX(0); }
  76% {
    transform: translateX(3px); }
  84% {
    transform: translateX(-2px); }
  92% {
    transform: translateX(3px); } }
@keyframes arrows_nudge_hover {
  0%, 100% {
    transform: translateX(-1px); }
  50% {
    transform: translateX(3px); } }
@keyframes fold_snap {
  0% {
    width: 34px;
    height: 34px; }
  60% {
    width: 18px;
    height: 18px; }
  100% {
    width: 22px;
    height: 22px; } }
@keyframes paper_settle {
  0% {
    box-shadow: 0 0 0 0 rgba(36, 148, 216, 0.45); }
  100% {
    box-shadow: 0 0 0 10px rgba(36, 148, 216, 0); } }
@keyframes paper_limit {
  0%, 100% {
    transform: translateX(0); }
  25% {
    transform: translateX(-4px); }
  50% {
    transform: translateX(3px); }
  75% {
    transform: translateX(-2px); } }
@media (prefers-reduced-motion: reduce) {
  #placeholder, #placeholder .arrows, #preview_paper, #preview_chuleta, #preview {
    animation: none !important;
    transition: none !important; } }
#global_wrapper {
  position: relative;
  width: 918px; }

#foot_wrap, #container {
  width: 579px; }

#foot_wrap {
  margin-top: -24px; }

#container {
  position: relative;
  align: center;
  margin-bottom: 30px;
  padding: 10px 20px;
  padding-bottom: 80px; }

#container::after {
  --size-corner: 35px;
  position: absolute;
  border-top: var(--size-corner) solid white;
  border-left: var(--size-corner) solid transparent;
  content: "";
  bottom: -34px;
  right: 17px; }

#container::before {
  position: absolute;
  width: 275px;
  height: 300px;
  content: "";
  bottom: -213px;
  right: -211px;
  /* Genio animado: las nubes flotan y cada 5 minutos se despierta (animaciones dentro del SVG) */
  background-image: url(/assets/images/monorean_genie-fb1a32d8eddbbc5c994d263e72dc96347c9ad84009540270ba604686292efd1c.svg);
  -moz-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1); }

/* Acompaña al hacer scroll; la posicion la pone place_preview() (chuletator.js),
   siempre a la misma distancia del editor */
#preview {
  position: fixed;
  top: 8px;
  left: 651px;
  width: 300px;
  padding: 10px 10px;
  z-index: 1;
  padding-right: 17px; }

#preview h3 {
  margin-bottom: 0; }

#preview_chuleta {
  min-height: 200px;
  font-size: 5px;
  line-height: 0.9em; }

#preview, #container {
  /*Sombra*/
  -webkit-box-shadow: 7px 9px 75px -13px rgba(0, 0, 0, 0.48);
  -moz-box-shadow: 7px 9px 75px -13px rgba(0, 0, 0, 0.48);
  box-shadow: 7px 9px 75px -13px rgba(0, 0, 0, 0.48);
  background-color: white;
  border-radius: 15px; }

#footer_container {
  position: absolute;
  width: 100%;
  z-index: 1;
  margin-top: 30px;
  margin-bottom: 10px; }

/* Boton de imprimir: igual que los botones del editor (trix-toolbar .button_group en trix_modified.scss) */
#footer_container > button {
  display: inline-block;
  box-sizing: border-box;
  height: 30px;
  padding: 0 14px;
  margin: 0 8px 4px 0;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: inset 0 -1px 0 #ddd;
  outline: none;
  font-family: "Bohemian","Open Sans", sans-serif;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6); }

#footer_container > button:hover {
  background-color: #cfefc9; }
  #footer_container > button:hover::selection {
    background-color: transparent; }

#footer_container > button:active {
  color: #000; }

#footer_container > button:focus-visible {
  box-shadow: inset 0 -1px 0 #ddd, 0 0 0 2px var(--ui-info); }

/* Recordatorio del comando rapido dentro del boton (Alt+I) */
/* Mientras se mantiene Alt pulsada el boton imprime todas las chuletas */
#print_button .print_all,
body.alt_down #print_button .print_one {
  display: none; }

body.alt_down #print_button .print_all {
  display: inline; }

#footer_container .button_shortcut {
  margin-left: 6px;
  opacity: 0.6;
  white-space: nowrap; }

#footer_container .button_shortcut kbd {
  min-width: 8px;
  padding: 0 3px;
  font-size: 9px;
  line-height: 1.4;
  vertical-align: 1px; }

#footer_container::selection, #footer_container > button::selection {
  background-color: white; }

#patrocinado, #aviso_legal, #community {
  font-size: 15px;
  color: white;
  margin: 0 auto;
  width: 550px;
  text-align: center; }

#community {
  margin: 54px auto -36px;
  display: flex;
  align-items: center;
  justify-content: center; }
  #community svg {
    width: 120px;
    height: 80px;
    margin-left: 20px;
    filter: brightness(0) saturate(100%) invert(14%) sepia(32%) saturate(6751%) hue-rotate(199deg) brightness(97%) contrast(101%); }
  #community a {
    display: inherit;
    align-items: inherit;
    justify-content: inherit;
    color: #003E7E;
    text-decoration: none; }
    #community a b {
      font-size: 25px; }
  #community a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    color: white;
    filter: brightness(0) saturate(100%) invert(100%) sepia(91%) saturate(38%) hue-rotate(254deg) brightness(110%) contrast(110%); }

#patrocinado {
  margin: 54px auto 0;
  /* La tarjeta ocupa toda la fila. Debajo, en una misma fila: a la izquierda el mensaje (o, con la publicidad
     oculta, el pie compacto, que ocupa la misma celda) y a la derecha el boton Ocultar/Descubre */
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center; }

#patrocinado > #sponsor_body {
  grid-column: 1 / -1; }

#patrocinado > #sponsor_tagline_wrap,
#patrocinado > #sponsor_mini {
  grid-area: 2 / 1; }

#patrocinado > #sponsor_toggle {
  grid-area: 2 / 2; }

#patrocinado .sponsor_tagline {
  margin: 8px 0 0;
  text-align: left; }

#patrocinado a {
  text-decoration: underline;
  color: inherit; }

/* Publicidad plegable: al ocultarla se enrolla hacia arriba (altura, escala y transparencia; sponsor_toggle) */
.sponsor_fold {
  overflow: hidden;
  transform-origin: top center;
  transition: max-height 0.45s var(--ui-ease), opacity 0.3s, transform 0.45s var(--ui-ease), filter 0.3s; }

.sponsor_fold.sponsor_hidden {
  max-height: 0 !important;
  opacity: 0;
  transform: scaleY(0.6) translateY(-12px);
  filter: blur(2px); }

/* Pie compacto (al estilo de fizzy.do) que aparece cuando se oculta la publicidad */
#sponsor_mini {
  max-height: 0;
  margin: 8px 0 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  text-align: left;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  transition: max-height 0.45s var(--ui-ease), opacity 0.35s 0.15s, transform 0.45s var(--ui-ease) 0.1s, visibility 0s 0.45s; }

#patrocinado.sponsor_off #sponsor_mini {
  max-height: 60px;
  opacity: 1;
  visibility: visible;
  overflow: visible;
  /* que el salto del mono y la ola de letras no se recorten */
  transform: none;
  transition: max-height 0.45s var(--ui-ease), opacity 0.35s 0.15s, transform 0.45s var(--ui-ease) 0.1s, visibility 0s; }

#sponsor_mini sup {
  font-size: 0.75em;
  line-height: 0; }

#patrocinado #sponsor_mini a.mini_monorean {
  display: inline-block;
  margin-left: 2px;
  text-decoration: none;
  color: white;
  vertical-align: -0.41em;
  transition: color 0.15s; }

#patrocinado #sponsor_mini a.mini_monorean svg {
  display: block;
  width: auto;
  height: 1.7em;
  fill: currentColor; }

/* El boton, como el de ocultar instrucciones pero en blanco sobre el azul del pie */
#patrocinado .sponsor_toggle {
  margin: 8px 0 0 16px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65); }

#patrocinado .sponsor_toggle:hover,
#patrocinado .sponsor_toggle:focus-visible {
  color: white; }

#patrocinado a svg {
  fill: white;
  width: 120px; }

#patrocinado .no-deco {
  text-decoration: none; }

#patrocinado .monorean {
  color: red;
  width: 120px;
  height: 80px;
  /* background-image: url("monorean_brand.svg"); */
  background-size: 100%;
  background-repeat: no-repeat;
  display: block;
  margin: 0 auto; }

/* Hover del logo: las ondas emiten, el mono salta y las letras hacen la ola */
#patrocinado .monorean svg path,
#sponsor_mini .mini_monorean svg path {
  transform-box: fill-box;
  transform-origin: 50% 100%; }

#patrocinado .monorean .wave,
#sponsor_mini .mini_monorean .wave {
  transform-origin: 100% 100%; }

#patrocinado .monorean:hover .wave_in,
#sponsor_mini .mini_monorean:hover .wave_in {
  animation: logo_wave 1.2s ease-out infinite; }

#patrocinado .monorean:hover .wave_out,
#sponsor_mini .mini_monorean:hover .wave_out {
  animation: logo_wave 1.2s ease-out 0.15s infinite; }

#patrocinado .monorean:hover .face,
#sponsor_mini .mini_monorean:hover .face {
  animation: logo_jump 0.7s cubic-bezier(0.3, 1.6, 0.5, 1); }

#patrocinado .monorean:hover .letter,
#sponsor_mini .mini_monorean:hover .letter {
  animation: logo_letter 0.5s ease-in-out calc(0.2s + var(--i) * 0.05s); }

@keyframes logo_wave {
  0% {
    opacity: 0.25;
    transform: scale(0.85); }
  35% {
    opacity: 1;
    transform: scale(1.06); }
  100% {
    opacity: 0.25;
    transform: scale(1); } }
@keyframes logo_jump {
  0% {
    transform: translateY(0) rotate(0); }
  35% {
    transform: translateY(-14%) rotate(-8deg); }
  65% {
    transform: translateY(0) rotate(5deg); }
  100% {
    transform: translateY(0) rotate(0); } }
@keyframes logo_letter {
  0%, 100% {
    transform: translateY(0); }
  45% {
    transform: translateY(-28%); } }
@media (prefers-reduced-motion: reduce) {
  #patrocinado .monorean *,
  #sponsor_mini .mini_monorean * {
    animation: none !important; } }
/* PIE: tarjeta de Monorean (video + logo + Monorean Cam) */
.sponsor_card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 18px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.45); }

.video_facade,
.video_frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 10px;
  overflow: hidden; }

/* El boton no respeta aspect-ratio: el hueco 16:9 se reserva con padding-top */
.video_facade {
  position: relative;
  height: 0;
  padding: 56.25% 0 0;
  background: #000;
  cursor: pointer; }

.video_facade img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  transition: transform 0.3s, opacity 0.2s; }

.video_facade:hover img {
  opacity: 1;
  transform: scale(1.04); }

/* Boton de play: circulo blanco con el triangulo en azul */
.video_play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.6);
  transition: transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1); }

.video_play::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 15px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #003e7e; }

.video_facade:hover .video_play {
  transform: scale(1.1); }

.sponsor_info {
  text-align: center; }

.sponsor_by {
  margin: 0;
  font-size: 12px;
  opacity: 0.85; }

#patrocinado .sponsor_info .monorean {
  width: 110px;
  height: 72px;
  margin: 4px auto 6px; }

#patrocinado .sponsor_info .monorean svg {
  width: 110px; }

.sponsor_cam {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.4; }

.sponsor_cam a {
  font-weight: bold; }

#patrocinado .sponsor_cta {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  background: white;
  color: #003e7e;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.15s, transform 0.15s; }

#patrocinado .sponsor_cta:hover {
  background: #eef6fc;
  transform: translateY(-1px); }

.sponsor_tagline {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.5; }

/* Solo guarda los textos de los avisos de guardado/recuperado */
#flasher {
  display: none; }

/* NOTIFICACIONES: mismo estilo que los popups (ver --ui-*). Nacen en dos sitios: los globales debajo del
   titulo y los de la chuleta debajo de la previsualizacion (toast_holder en chuletator.js) */
/* Avisos globales: encima del subtitulo, centrados (posicion en place_title_toasts) */
#toasts_title {
  position: absolute;
  z-index: 2147483647;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none; }

#toasts_title .toast:last-child {
  margin-bottom: 0; }

/* Avisos de guardado: debajo del panel de la previsualizacion, centrados con el */
#toasts_preview {
  position: absolute;
  top: calc(100% + 12px);
  /* Mismo ancho que el panel blanco de la previsualizacion */
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  pointer-events: none; }

#toasts_preview .toast {
  box-sizing: border-box; }

/* El texto ocupa el hueco y la X queda siempre a la derecha */
#toasts_preview .toast_text {
  flex: 1; }

.toast {
  --toast-accent: var(--ui-info);
  display: flex;
  align-items: center;
  gap: 10px;
  max-height: 100px;
  margin-bottom: 10px;
  padding: 9px 10px 9px 9px;
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
  color: var(--ui-text);
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: 0.2px;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-24px) scale(0.96);
  transition: all 0.4s var(--ui-ease); }

.toast_success {
  --toast-accent: var(--ui-success); }

.toast_warning {
  --toast-accent: var(--ui-warning); }

.toast.toast_in {
  opacity: 1;
  transform: none; }

.toast.toast_out {
  opacity: 0;
  transform: translateY(-16px) scale(0.96);
  max-height: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0; }

.toast_icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--toast-accent);
  color: var(--ui-surface);
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  font-weight: bold;
  line-height: 1; }

.toast_success .toast_icon::before {
  content: "\2713"; }

.toast_warning .toast_icon::before {
  content: "!"; }

.toast_info .toast_icon::before {
  content: "i";
  font-family: Georgia, serif;
  font-style: italic; }

.toast.toast_bump {
  animation: toast_bump 0.3s ease-out; }

.toast_close {
  margin-left: 4px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--ui-text);
  font-family: "Open Sans", sans-serif;
  font-size: 11px;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.2s; }

.toast_close:hover {
  opacity: 1; }

/* MODAL DE CONFIRMACION: tarjeta blanca como los paneles de la web */
#modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2147483646;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(8, 41, 106, 0.45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.18s ease-out; }

#modal[hidden] {
  display: none; }

#modal.modal_in {
  opacity: 1; }

#modal .modal_card {
  width: 340px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 26px 26px 22px;
  border-radius: 15px;
  background: white;
  box-shadow: 7px 9px 75px -13px rgba(0, 0, 0, 0.48);
  text-align: center;
  transform: translateY(10px) scale(0.96);
  transition: transform 0.22s var(--ui-ease); }

#modal.modal_in .modal_card {
  transform: none; }

#modal .modal_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #003e7e; }

#modal .modal_icon svg {
  width: 34px;
  height: 33px; }

#modal .modal_icon .face {
  fill: white; }

#modal .modal_icon .feature {
  fill: #003e7e; }

#modal h4 {
  margin: 14px 0 6px;
  /* Bohemian y no Underwood: Underwood no tiene "¿" ni vocales con tilde */
  font-family: "Bohemian","Open Sans", sans-serif;
  font-size: 19px;
  font-weight: bold;
  line-height: 1.25;
  color: var(--ui-surface); }

#modal p {
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.4;
  color: #595d6a;
  overflow-wrap: anywhere; }

#modal .modal_buttons {
  display: flex;
  gap: 10px;
  justify-content: center; }

#modal button {
  min-width: 110px;
  height: 34px;
  padding: 0 18px;
  border-radius: 999px;
  font-family: "Bohemian","Open Sans", sans-serif;
  font-size: 12px;
  cursor: pointer;
  outline: none;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; }

#modal button:focus-visible {
  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--ui-info); }

#modal .modal_cancel {
  border: 1px solid #c9d3e0;
  background: white;
  color: var(--ui-surface); }

#modal .modal_cancel:hover {
  background: #eef6fc;
  border-color: var(--ui-info); }

#modal .modal_ok {
  border: 1px solid var(--ui-warning);
  background: var(--ui-warning);
  color: white; }

#modal .modal_ok:hover {
  background: #f4713f;
  border-color: #f4713f; }

/* Linea de ayuda bajo los botones (Enter / c) */
#modal .modal_hint {
  margin: 14px 0 0;
  font-size: 11px;
  font-style: italic;
  color: #999; }

/* Modo informativo (comandos rapidos): solo un boton Cerrar, en azul */
#modal.modal_info .modal_cancel,
#modal.modal_info .modal_hint {
  display: none; }

#modal.modal_info .modal_ok {
  border-color: var(--ui-surface);
  background: var(--ui-surface); }

#modal.modal_info .modal_ok:hover {
  border-color: #0a4b93;
  background: #0a4b93; }

#modal.modal_info #modal_text {
  display: none; }

#modal.modal_info .modal_card {
  width: 430px; }

/* Lista de comandos rapidos */
#modal .shortcuts {
  display: grid;
  gap: 8px;
  margin: 6px 0 20px;
  text-align: left; }

#modal .shortcut {
  display: flex;
  align-items: center;
  gap: 12px; }

#modal .shortcut dt {
  flex: none;
  width: 122px;
  text-align: right;
  white-space: nowrap;
  font-size: 11px;
  color: #999; }

#modal .shortcut dd {
  margin: 0;
  font-size: 13px;
  color: #595d6a; }

/* Una combinacion de teclas (Alt + N) no se parte en dos lineas */
.keys {
  white-space: nowrap; }

/* Teclas con el estilo de los botones del editor (modal de comandos y texto explicativo) */
kbd {
  display: inline-block;
  min-width: 14px;
  padding: 2px 6px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 4px;
  background: #fff;
  box-shadow: inset 0 -1px 0 #ddd;
  font-family: "Open Sans", sans-serif;
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
  color: #333; }

/* En la cabecera (pasos y linea del atajo), mas pequeñas para no descuadrar la linea */
.shortcut_tip kbd,
.steps kbd {
  min-width: 10px;
  padding: 0 4px;
  font-size: 10px;
  line-height: 1.4; }

@media (prefers-reduced-motion: reduce) {
  #modal, #modal .modal_card {
    transition: none; } }
@keyframes toast_bump {
  0%, 100% {
    transform: scale(1); }
  40% {
    transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: opacity 0.2s;
    transform: none !important;
    animation: none !important; } }
/* Textos legales del pie, compactos */
#aviso_legal {
  margin-top: 28px;
  font-size: 12px; }

#aviso_legal .legal_links {
  margin: 0 0 6px; }

#aviso_legal .sep {
  margin: 0 8px;
  opacity: 0.6; }

#aviso_legal .legal_small {
  max-width: 470px;
  margin: 0 auto 24px;
  font-size: 10.5px;
  line-height: 1.5;
  opacity: 0.75; }

#foot_wrap #aviso_legal a {
  text-decoration: none;
  color: inherit; }

#aviso_legal a:visited {
  text-decoration: none;
  color: inherit; }

/* Enlaces de texto del pie: al pasar el raton se ponen del verde del titulo y se subrayan con un trazo
   de rotulador (SVG con bordes irregulares) que se dibuja de izquierda a derecha */
#foot_wrap .sponsor_tagline a,
#foot_wrap .sponsor_cam a,
#foot_wrap #aviso_legal a {
  padding-bottom: 0.2em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 6.5C40 4 75 8 110 5.5S170 4.5 197 6.5' stroke='%23cfefc9' stroke-width='7' stroke-linecap='round' fill='none' opacity='.85'/%3E%3Cpath d='M6 8.5C60 7.5 130 9.5 194 8' stroke='%23cfefc9' stroke-width='2.5' stroke-linecap='round' fill='none' opacity='.55'/%3E%3Cpath d='M8 4.5C70 3.5 140 5 192 4' stroke='%23cfefc9' stroke-width='1.5' stroke-linecap='round' fill='none' opacity='.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 0.4em;
  transition: background-size 0.25s cubic-bezier(0.25, 0.9, 0.35, 1), color 0.15s; }

#foot_wrap .sponsor_tagline a:hover,
#foot_wrap .sponsor_cam a:hover,
#foot_wrap #aviso_legal a:hover {
  color: #cfefc9;
  text-decoration: none;
  background-size: 100% 0.4em; }

.tm {
  font-family: "Open Sans", sans-serif;
  text-decoration: none; }

@media all and (min-width: 1383px) {
  #foot_wrap, #container {
    width: 44vw; }

  trix-editor {
    width: 43vw; }

  #global_wrapper {
    margin: auto;
    padding-right: 25vw; }

  #container_wrapper {
    position: absolute;
    left: calc(39vw - 91vw);
    margin-left: 49vw; }

  #container {
    width: 44vw; } }
/* @media all and (max-width: 1284) and (min-width: 1900px){
  #preview{
    left: 662px;
  }
  #foot_wrap, #container {
    width: 703px;
  }
  trix-editor {
    width: 684px;
  }
} */
@media all and (min-width: 3500px) {
  #foot_wrap, #container {
    width: 1577.36px; }

  trix-editor {
    width: 1554.41px; } }
/* IMPRESION: solo se imprime #print_area (chuleta + publicidad) */
#print_area {
  display: none; }

@page {
  margin: 1cm; }
@media print {
  html, body {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: white !important; }

  body.printing > *:not(#print_area) {
    display: none !important; }

  body.printing #print_area {
    display: block; } }
/* Estilos de lo que se imprime. Fuera de @media print para poder medir las chuletas antes de imprimir
   (paginate_print_items); en pantalla #print_area esta oculto salvo mientras se mide, fuera de la vista */
#print_area {
  color: black;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact; }

#print_area .print_chuleta {
  box-sizing: content-box;
  page-break-inside: auto; }

/* Plantilla Tipp-Ex (con cotas) y a su derecha el aviso de escala, centrado con la plantilla */
#print_area .print_tipex_row {
  display: flex;
  align-items: center;
  gap: 0.4cm;
  break-inside: avoid; }

#print_area .print_tipex_note {
  flex: 0 1 6.5cm;
  margin: 0;
  font-family: "Open Sans", sans-serif;
  font-size: 10px;
  line-height: 1.5;
  color: #333; }

#print_area .print_tipex_note p {
  margin: 0 0 4px; }

#print_area .print_tipex_note .print_note_scale {
  font-weight: bold;
  color: #000; }

/* Plantilla con sus cotas (SVG de add_print_dimensions) */
#print_area .print_dims {
  position: relative;
  display: inline-block;
  break-inside: avoid; }

#print_area .print_dims > svg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible; }

/* Publicidad: a la izquierda la tarjeta de Monorean (logo + lema) y a la derecha el credito
   con los datos de la chuleta debajo, todo centrado. Va debajo de la chuleta, alineada a la izquierda */
#print_area .print_publicidad {
  display: flex !important;
  align-items: center;
  gap: 18px;
  margin-top: 1cm;
  font-family: "Open Sans", sans-serif;
  font-size: 10px;
  color: #555;
  text-align: center;
  page-break-inside: avoid;
  break-inside: avoid; }

#print_area .print_info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px; }

#print_area .print_tech {
  display: flex;
  gap: 18px;
  margin: 0;
  line-height: 1.5; }

/* Numero en un cuadrado negro con esquinas redondeadas */
#print_area .print_value {
  display: inline-block;
  min-width: 20px;
  margin-left: 3px;
  padding: 2px 6px;
  box-sizing: border-box;
  border-radius: 5px;
  background: #000;
  color: #fff;
  font-weight: bold;
  line-height: 1.3;
  text-align: center; }

#print_area .print_card {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  border: 1px solid #bbb;
  border-radius: 10px; }

#print_area .print_logo {
  width: 120px;
  height: auto;
  flex: none; }

#print_area .print_credit,
#print_area .print_slogan {
  margin: 0;
  line-height: 1.5; }

#print_area .print_slogan {
  color: #000; }

/* Mientras se mide: con los estilos de impresion pero fuera de la vista */
#print_area.print_measure {
  display: block;
  position: absolute;
  left: -10000px;
  top: 0;
  visibility: hidden; }

/* Imprimir todas: chuletas seguidas con su titulo, sin partirse, y la publicidad en cada folio */
#print_area .print_page {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  break-after: page;
  page-break-after: always; }

#print_area .print_page:last-child {
  break-after: auto;
  page-break-after: auto; }

#print_area .print_page > .print_publicidad {
  align-self: stretch;
  justify-content: flex-start; }

#print_area .print_item {
  margin-bottom: 1.5cm;
  break-inside: avoid;
  page-break-inside: avoid; }

#print_area .print_item.print_item_oversize {
  break-inside: auto;
  page-break-inside: auto; }

#print_area .print_item_title {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 6px;
  font-family: "Open Sans", sans-serif;
  font-size: 10px;
  color: #555; }

#print_area .print_item_name {
  font-size: 12px;
  font-weight: bold;
  color: #000; }

#print_area .print_item_title .print_tech {
  display: flex;
  gap: 14px; }

#print_area.print_all .print_page > .print_publicidad {
  margin-top: 0; }

/* SELECTOR DE IDIOMA (lang_picker.html): arriba a la derecha de la cabecera, discreto como "Ocultar
   instrucciones". El panel usa el mismo estilo que los popups (--ui-*) */
#lang_picker {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 40; }

/* Con selector, el titulo deja sitio a los lados (simetrico, para que siga centrado) y, si es largo, se
   encoge hasta caber en una linea (fit_hero_title en chuletator.js) */
#lang_picker ~ .hero_title {
  margin-left: 112px;
  /* fit_hero_title lo ajusta al ancho real del boton del selector */
  margin-right: 112px;
  white-space: nowrap; }

#lang_picker ~ .hero_title.wraps {
  white-space: normal; }

#lang_button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: 11px;
  color: #8a8f9c;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s; }

#lang_button:hover,
#lang_button[aria-expanded="true"] {
  color: #3d414d;
  background: #f1f4f9; }

#lang_button:focus-visible {
  outline: 2px solid var(--ui-info);
  outline-offset: 1px; }

#lang_picker .lang_code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.06em; }

#lang_button .lang_code {
  padding: 1px 4px;
  border: 1px solid currentColor;
  border-radius: 4px;
  opacity: 0.75; }

.lang_chevron {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s var(--ui-ease); }

#lang_button[aria-expanded="true"] .lang_chevron {
  transform: rotate(180deg); }

#lang_panel {
  position: absolute;
  text-align: left;
  top: calc(100% + 6px);
  right: 0;
  width: 272px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  color: var(--ui-text);
  box-shadow: var(--ui-shadow);
  transform-origin: top right;
  animation: lang_panel_in 0.18s var(--ui-ease); }

#lang_panel[hidden],
#lang_panel [hidden] {
  display: none !important; }

@keyframes lang_panel_in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98); }
  to {
    opacity: 1;
    transform: none; } }
#lang_search {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.07);
  color: inherit;
  font: inherit;
  font-size: 12px;
  outline: none; }

#lang_search::placeholder {
  color: rgba(255, 255, 255, 0.45); }

#lang_search:focus {
  border-color: #cfefc9; }

#lang_panel .lang_group {
  margin: 10px 8px 4px;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45); }

#lang_panel .lang_list {
  position: relative;
  /* para medir las filas desde la lista al desplazarla con las flechas */
  max-height: 296px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent; }

#lang_panel .lang_row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  color: inherit;
  font-size: 12.5px;
  line-height: 1.35;
  text-decoration: none; }

#lang_panel .lang_row .lang_code {
  flex: none;
  width: 42px;
  color: rgba(255, 255, 255, 0.5); }

#lang_panel .lang_row:hover,
#lang_panel .lang_row:focus-visible,
#lang_panel .lang_row.lang_active {
  background: rgba(255, 255, 255, 0.09);
  outline: none; }

#lang_panel .lang_row:hover .lang_code,
#lang_panel .lang_row:focus-visible .lang_code,
#lang_panel .lang_row.lang_active .lang_code {
  color: #cfefc9; }

#lang_panel .lang_check {
  width: 12px;
  height: 12px;
  margin-left: auto;
  fill: none;
  stroke: #cfefc9;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round; }

#lang_panel .lang_none {
  margin: 10px 8px 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6); }

@media (prefers-reduced-motion: reduce) {
  #lang_panel {
    animation: none; } }
/* BARRA DE SUGERENCIA DE IDIOMA (lang_picker.html): arriba en el centro, con el estilo de los popups */
#lang_suggest {
  position: fixed;
  top: 12px;
  /* Centrada sin left:50% (que le dejaria solo media pantalla de ancho y partiria el texto) */
  left: 0;
  right: 0;
  width: max-content;
  margin: 0 auto;
  z-index: 2147483646;
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  max-width: calc(100vw - 32px);
  padding: 7px 8px 7px 14px;
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  color: var(--ui-text);
  box-shadow: var(--ui-shadow);
  font-size: 12.5px;
  line-height: 1.35;
  animation: lang_suggest_in 0.35s var(--ui-ease); }

#lang_suggest[hidden] {
  display: none; }

#lang_suggest.lang_suggest_out {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.2s, transform 0.2s var(--ui-ease); }

@keyframes lang_suggest_in {
  from {
    opacity: 0;
    transform: translateY(-12px); }
  to {
    opacity: 1;
    transform: none; } }
#lang_suggest .lang_suggest_go {
  flex: none;
  padding: 5px 11px;
  border-radius: 7px;
  background: #cfefc9;
  color: var(--ui-surface);
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s; }

#lang_suggest .lang_suggest_go:hover,
#lang_suggest .lang_suggest_go:focus-visible {
  background: #fff;
  outline: none; }

#lang_suggest .lang_suggest_skip {
  flex: none;
  padding: 5px 6px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.65);
  font: inherit;
  white-space: nowrap;
  cursor: pointer; }

#lang_suggest .lang_suggest_skip:hover,
#lang_suggest .lang_suggest_skip:focus-visible {
  color: #fff;
  outline: none; }

@media (prefers-reduced-motion: reduce) {
  #lang_suggest {
    animation: none; } }
/* CABECERA CON LOGO (todos los idiomas menos es). Columna izquierda: logo grande de Monorean y, pisandolo
   un poco, "Cheat Sheet" inclinado con trazo de rotulador. A su derecha: arriba el boton de esconderse y
   abajo el subtitulo, alineado con la linea de "Cheat Sheet" */
#head.brand_left {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  justify-items: start;
  align-items: start;
  text-align: left;
  padding: 12px 14px 0 14px; }

#head.brand_left > * {
  grid-column: 1 / -1; }

#head.brand_left .hero_title {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin: 0 !important;
  white-space: normal !important;
  font-size: 30px;
  /* "Cheat Sheet", mas pequeño que el logo */
  line-height: 1.1;
  text-align: left; }

#head.brand_left .hero_logo {
  display: block;
  height: 52px;
  width: auto; }

#head.brand_left .hero_title .marker {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: inline-block;
  margin: 0 0 8px 138px;
  top: -17px;
  padding: 0 20px 0 12px;
  background: none;
  border-radius: 0;
  transform: rotate(-4deg);
  transform-origin: left center; }

/* Trazo de rotulador: el verde de siempre (el de la seleccion del editor) */
#head.brand_left .hero_title .marker::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 52%;
  bottom: 10%;
  background: #cfefc9;
  border-radius: 4px; }

/* El boton de esconderse no se ve: queda como comando rapido Alt+W */
#head.brand_left #esconderse {
  display: none; }

#head.brand_left .hero_subtitle {
  color: #4a4f5e;
  /* mas oscuro que el gris base: contraste con el fondo */
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  margin: 36px 0 0 18px;
  font-size: 10px;
  line-height: 1.5; }

#head.brand_left .steps {
  width: 100%;
  box-sizing: border-box; }

#head.brand_left .steps_toggle {
  justify-self: end; }

/* Subtitulo: el nombre del producto va subrayado con el mismo rotulador verde del titulo */
.hero_subtitle .marker {
  padding: 0 3px;
  background: linear-gradient(transparent 38%, #cfefc9 38%, #cfefc9 96%, transparent 96%);
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone; }

/* ROTULADOR A MANO: el trazo verde (#cfefc9) es un svg con curvas y puntas redondas, estirado al ancho del
   texto, mas alto de un lado que del otro y con una segunda pasada que rompe el borde recto */
#head.brand_left .hero_title .marker::before {
  left: -8px;
  right: 0;
  top: 36%;
  bottom: -10%;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'><g fill='none' stroke='%23cfefc9' stroke-linecap='round' stroke-linejoin='round'><path d='M4 14 C32 8 62 17 101 12 S168 15 196 9' stroke-width='14'/><path d='M8 17 C48 13 90 19 130 15 S178 17 193 13' stroke-width='8'/></g></svg>") no-repeat center/100% 100%;
  border-radius: 0;
  transform: rotate(-1deg); }

.hero_subtitle .marker {
  padding: 0 5px;
  margin: 0 -2px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'><g fill='none' stroke='%23cfefc9' stroke-linecap='round' stroke-linejoin='round'><path d='M4 14 C32 8 62 17 101 12 S168 15 196 9' stroke-width='14'/><path d='M8 17 C48 13 90 19 130 15 S178 17 193 13' stroke-width='8'/></g></svg>") no-repeat 0 100%/100% 85%;
  border-radius: 0; }

/* Subtitulo: subrayado a mano con rotulador de punta fina, por debajo del texto (sustituye al trazo grueso) */
.hero_subtitle .marker {
  padding: 0 2px 4px;
  margin: 0 -1px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'><g fill='none' stroke='%2358c443' stroke-linecap='round' stroke-linejoin='round'><path d='M2 5.2 C28 2.6 62 6.2 100 4 S168 6 198 3.2' stroke-width='2.4'/><path d='M12 6.4 C58 4.6 104 7 150 5.4' stroke-width='1.4' opacity='.75'/></g></svg>") no-repeat 0 100%/100% 7px;
  border-radius: 0; }