@charset "UTF-8";
/* Hack para que funcione la pantalla completa en el timer */
.modal-overlay.show:has(.WodBusterTimer.expand) {
  backdrop-filter: none;
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

#app {
  background-color: var(--bg-color2);
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/* Hack para que funcione la pantalla completa en el timer */
.modal-overlay.show:has(.WodBusterTimer.expand) {
  backdrop-filter: none;
}

/* Mismo motivo: cuando dentro de un modal (cualquiera) se abre el editor de
   imagen o el trimmer de vídeo del ImageUploader, anulamos el backdrop-filter
   del overlay padre. backdrop-filter crea un nuevo "containing block" para
   los descendientes con position:fixed → sin esta regla, el overlay
   fullscreen del editor (image-editor-overlay / video-trimmer-overlay) se
   ancla al modal en lugar del viewport y queda encerrado / inaccesible. */
.modal-overlay.show:has(.image-editor-overlay),
.modal-overlay.show:has(.video-trimmer-overlay),
.modal-confirmar-overlay:has(.image-editor-overlay),
.modal-confirmar-overlay:has(.video-trimmer-overlay) {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Mismo problema con modales anidados (p. ej. el detalle de una insignia abierto
   dentro del modal de perfil público): el backdrop-filter del modal padre crea un
   containing block y el modal hijo se ancla a ese panel (40% de 40%) saliendo
   encogido. Al anularlo, el hijo se ancla al viewport y ocupa el mismo ancho que
   cualquier modal de primer nivel. */
.modal-overlay.show:has(.modal-blur-wrapper.show) {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

:root {
  --bg-color: #FFFFFF;
  --bg-color2: #F7F7F7;
  --bg-color3: #F0F0F0;
  --bg-color4: #EBEBEB;
  --text-color: #000000;
  --text-color-highlight: #19DAF4;
  --text-color-highlight-light: #03383F;
  /*--text-color-highlight: #19DAF4;*/
  --bg-highlight-osc: #1D1C5F;
  --text-color-highlight-t: black;
  --bg-hover: #E3E8EB;
  --bg-text-grises: #7A7A7A;
  --bg-alert: #EDEDFF;
  --tabla-text-highlight: #1F1F1F;
  --chat-username: #FFFFFF;
  --inset-box: #03383F;
}

[data-theme=Dark] {
  --bg-color: #1F1F1F;
  --bg-color2: #0F0F0F;
  --bg-color3: #353535;
  --bg-color4: #9C9C9C;
  --text-color: #FFFFFF;
  --text-color-highlight: #19DAF4;
  --text-color-highlight-light: #03383F;
  --text-color-highlight-t: black;
  --bg-highlight-osc: #3B3E18;
  --bg-hover: #555555;
  --bg-text-grises: #D6D6D6;
  --bg-alert: #3B3E18;
  --tabla-text-highlight: #FFFFFF;
  --chat-username: #000000;
  --inset-box: #03383F;
}

:root {
  --bg-color: #FFFFFF;
  --bg-color2: #F7F7F7;
  --bg-color3: #F0F0F0;
  --bg-color4: #EBEBEB;
  --text-color: #000000;
  --text-color-highlight: #4D49FC;
  --text-color-highlight-light: #EDEDFF;
  /*--text-color-highlight: #19DAF4;*/
  --bg-highlight-osc: #1D1C5F;
  --text-color-highlight-t: white;
  --bg-hover: #E3E8EB;
  --bg-text-grises: #7A7A7A;
  --bg-alert: #EDEDFF;
  --tabla-text-highlight: #1F1F1F;
  --chat-username: #FFFFFF;
}

[data-theme=Dark] {
  --bg-color: #1F1F1F;
  --bg-color2: #0F0F0F;
  --bg-color3: #353535;
  --bg-color4: #9C9C9C;
  --text-color: #FFFFFF;
  --text-color-highlight: #eafc3c;
  --text-color-highlight-light: #3B3E18;
  --text-color-highlight-t: black;
  --bg-highlight-osc: #3B3E18;
  --bg-hover: #555555;
  --bg-text-grises: #D6D6D6;
  --bg-alert: #3B3E18;
  --tabla-text-highlight: #FFFFFF;
  --chat-username: #000000;
}

/* Reset bsico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  font-family: "Public Sans", sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  display: flex;
  flex-direction: column;
}

/* Contenedor principal */
.main-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.main-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  padding-top: 55px;
}

.sin-padding-header {
  padding-top: 0 !important;
  overflow: hidden !important;
}

/* Header fijo */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: var(--bg-color);
  color: var(--text-color);
  border-bottom: 2px solid var(--bg-color3);
  z-index: 1000;
  display: flex;
  align-items: center;
  overflow: visible;
}

/* Contenedor del header para organizar logo y navegación */
.header-container,
.header-left,
.header-right {
  height: 100%;
  align-items: center;
  vertical-align: middle;
}

.header-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
  padding: 0px 20px;
  padding-left: 0px;
}

.header-left {
  display: flex;
  gap: 2rem;
  overflow: visible;
  min-width: 0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}
.header-lang {
  display: inline-flex;
  align-items: center;
}
/* Mismo criterio que .perfil-avatar-program (círculo, borde, cover), tamaño acorde al header 60px */
.header-perfil-avatar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
}
.header-perfil-avatar-btn:focus {
  outline: none;
}
.header-perfil-avatar-btn:focus-visible {
  outline: 2px solid var(--text-color-highlight);
  outline-offset: 2px;
}
.header-perfil-avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #686868;
  display: block;
  box-sizing: border-box;
}
@media (max-width: 1000px) {
  .header-right {
    gap: 0.5rem;
  }
}

/* Logo */
.logo-container {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Centra el contenido */
}

.wb-logotype-4 {
  width: 120px;
  height: 32px;
}

[data-theme=Dark] .wb-logotype-4 {
  content: url("/_assets/Imagenes/WB%20Coach-blanco.0a682079aced5515de775cf46231484075f164725c4ca834dc56039e2786fba8.svg");
}

/* Navegacin */
.nav-links {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 20px; /* Espacio entre enlaces */
  overflow: visible;
}

.div-nav {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--text-color);
  font-weight: bold;
  font-size: 16px;
  transition: color 0.3s;
  cursor: pointer;
  gap: 2px;
  position: relative;
}

.div-nav i {
  padding-top: 2px;
  font-size: 1.2rem;
}

.div-nav:active {
  transform: scale(0.95);
}

.div-nav.active,
.div-nav.active i {
  color: var(--text-color-highlight);
}

.nav-links .div-nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 3px;
  background: var(--text-color-highlight);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.nav-links .div-nav.active::after {
  transform: scaleX(1);
}

.collapse-navbar .div-nav::after {
  display: none;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-color);
  cursor: pointer;
  margin-left: auto;
}

@media (max-width: 1000px) {
  .menu-toggle {
    display: block;
    padding-top: 10px;
  }
  .hide-on-mobile {
    display: none !important;
  }
}
.collapse-navbar {
  display: none;
  position: fixed;
  top: 60px;
  left: 0;
  width: 100%;
  background-color: var(--bg-color);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 999;
}

.collapse-navbar.open {
  display: block;
}

.collapse-navbar .nav-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
}

.bottom-nav {
  display: none;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-color);
  font-size: 12px;
  cursor: pointer;
  width: 24px;
  position: relative;
  transition: color 0.2s ease;
}

.nav-item i {
  font-size: 1.2rem;
}

.bottom-nav .nav-item.active,
.bottom-nav .nav-item.active i {
  color: var(--text-color-highlight);
}

.bottom-nav .nav-item::after {
  content: "";
  position: absolute;
  left: 50%;
  right: auto;
  bottom: -10px;
  width: 1.75rem;
  max-width: 48%;
  height: 3px;
  margin-left: 0;
  background: var(--text-color-highlight);
  border-radius: 2px 2px 0 0;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.bottom-nav .nav-item.active::after {
  transform: translateX(-50%) scaleX(1);
}

.footer {
  background-color: var(--bg-color);
  color: var(--text-color);
  padding: 20px;
  text-align: center;
  flex-shrink: 0;
  width: 100%;
  margin-bottom: 0 !important;
  position: relative;
  border-top: 1px solid var(--bg-color4);
}

.home {
  position: relative;
  line-height: 130%;
}

.div {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 15px;
}

.email-icon {
  width: 20px;
  position: relative;
  height: 20px;
  overflow: hidden;
  flex-shrink: 0;
}

.holawodbustercom {
  flex: 1;
  position: relative;
  line-height: 130%;
}

.email-parent {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
}

.c-valentn-beato {
  margin: 0;
}

.socialinstagram-parent {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
}

.madrid1 {
  margin: 0;
  color: #686868;
}

.info {
  align-self: stretch;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 15px;
}

.info-contacto {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 50px;
  overflow: hidden;
  margin-top: 1rem;
  margin-left: 1rem;
}

.powered-by {
  position: relative;
  letter-spacing: 0.02em;
  line-height: 12px;
}

.wb-logotype {
  width: 120px;
  position: relative;
  height: 36px;
}

.powered-by-parent {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 5px;
  margin-left: 1rem;
  margin-bottom: 1rem;
}

.wodbustertechnologies-ltd-2021 {
  position: relative;
  letter-spacing: 0.02em;
  line-height: 12px;
  margin-bottom: 1.2rem;
}

.aviso-legal {
  margin-bottom: 1.2rem;
  margin-right: 16rem;
  position: relative;
  letter-spacing: 0.02em;
  line-height: 12px;
  text-align: right;
}

.legal {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 20px;
  font-size: 9px;
  color: #686868;
  overflow: hidden;
}

.rich-text-editor {
  display: flex;
  flex-direction: column;
  position: relative;
  flex: 1;
  min-height: 0;
}
.rich-text-editor .ql-toolbar.ql-snow {
  border: 1px solid var(--bg-color4);
  border-radius: 8px 8px 0 0;
  background: var(--bg-color3);
  padding: 4px 6px;
  flex-shrink: 0;
}
.rich-text-editor .ql-toolbar.ql-snow button {
  color: var(--text-color) !important;
  width: 28px;
  height: 28px;
}
@media (hover: hover) {
  .rich-text-editor .ql-toolbar.ql-snow button:hover {
    color: var(--text-color-highlight) !important;
  }
}
.rich-text-editor .ql-toolbar.ql-snow button.ql-active {
  color: var(--text-color-highlight) !important;
}
.rich-text-editor .ql-toolbar.ql-snow .ql-stroke {
  stroke: var(--text-color) !important;
}
.rich-text-editor .ql-toolbar.ql-snow .ql-fill {
  fill: var(--text-color) !important;
}
@media (hover: hover) {
  .rich-text-editor .ql-toolbar.ql-snow button:hover .ql-stroke {
    stroke: var(--text-color-highlight) !important;
  }
  .rich-text-editor .ql-toolbar.ql-snow button:hover .ql-fill {
    fill: var(--text-color-highlight) !important;
  }
}
.rich-text-editor .ql-toolbar.ql-snow button.ql-active .ql-stroke {
  stroke: var(--text-color-highlight) !important;
}
.rich-text-editor .ql-toolbar.ql-snow button.ql-active .ql-fill {
  fill: var(--text-color-highlight) !important;
}
.rich-text-editor .ql-container.ql-snow {
  border: 1px solid var(--bg-color4);
  border-top: none;
  border-radius: 0 0 8px 8px;
  font-size: 14px;
  font-family: inherit;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.rich-text-editor .ql-editor {
  min-height: 120px;
  overflow-y: visible;
  color: var(--text-color);
  background: var(--bg-color3);
  border-radius: 0 0 8px 8px;
  padding: 10px;
}
.rich-text-editor .ql-editor.ql-blank::before {
  color: var(--bg-text-grises);
  font-style: normal;
}
.rich-text-editor .rte-toolbar-extras {
  position: absolute;
  top: 0;
  right: 4px;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 2px;
  z-index: 10;
}
.rich-text-editor .rte-toolbar-btn {
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color);
  opacity: 0.7;
  transition: opacity 0.15s, background 0.15s;
}
@media (hover: hover) {
  .rich-text-editor .rte-toolbar-btn:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.08);
  }
}
.rich-text-editor .rte-toolbar-btn.active {
  opacity: 1;
  color: var(--text-color-highlight);
}
.rich-text-editor .rte-toolbar-btn svg {
  display: block;
}
.rich-text-editor .rte-popup {
  position: absolute;
  left: 0;
  z-index: 100;
  background: var(--bg-color2);
  border: 1px solid var(--bg-color4);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  max-width: 320px;
  min-width: 240px;
}
.rich-text-editor .rte-popup.rte-popup-top {
  top: 34px;
  right: 0;
  left: auto;
}
.rich-text-editor .rte-popup-tabs {
  display: flex;
  gap: 2px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--bg-color4);
  margin-bottom: 6px;
}
.rich-text-editor .rte-tab {
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  padding: 4px 6px;
  opacity: 0.5;
  transition: opacity 0.15s, background 0.15s;
}
@media (hover: hover) {
  .rich-text-editor .rte-tab:hover {
    background: var(--bg-color4);
    opacity: 0.8;
  }
}
.rich-text-editor .rte-tab.active {
  opacity: 1;
  background: var(--bg-color4);
}
.rich-text-editor .rte-popup-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  max-height: 180px;
  overflow-y: auto;
}
.rich-text-editor .rte-popup-grid.symbols-grid {
  grid-template-columns: repeat(9, 1fr);
}
.rich-text-editor .rte-item-btn {
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 18px;
  padding: 4px;
  line-height: 1;
  text-align: center;
  transition: background 0.12s;
}
@media (hover: hover) {
  .rich-text-editor .rte-item-btn:hover {
    background: var(--bg-color4);
  }
}
.rich-text-editor .rte-item-btn.symbol-btn {
  font-size: 16px;
  color: var(--text-color);
}

.rich-textarea {
  width: 100%;
  height: 120px;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  resize: vertical;
}

.timer-container {
  height: 100%;
  width: 100%;
}

/*SCROLL – minimal & modern*/
*::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--bg-color3);
  border-radius: 100px;
}

@media (hover: hover) {
  *::-webkit-scrollbar-thumb:hover {
    background: var(--bg-color4);
  }
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--bg-color3) transparent;
}

.blur-background {
  filter: blur(3px);
  pointer-events: none;
  user-select: none;
}

.requisitos-password {
  font-size: 0.9rem;
}

.requisitos-password ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.requisitos-password li {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #fff;
  margin-bottom: 4px;
}

.requisitos-password li.no {
  color: #f66;
}

.requisitos-password li.ok {
  color: #7fff7f;
}

:root {
  --bg-color: #FFFFFF;
  --bg-color2: #F7F7F7;
  --bg-color3: #F0F0F0;
  --bg-color4: #EBEBEB;
  --text-color: #000000;
  --text-color-highlight: #19DAF4;
  --text-color-highlight-light: #03383F;
  /*--text-color-highlight: #19DAF4;*/
  --bg-highlight-osc: #1D1C5F;
  --text-color-highlight-t: black;
  --bg-hover: #E3E8EB;
  --bg-text-grises: #7A7A7A;
  --bg-alert: #EDEDFF;
  --tabla-text-highlight: #1F1F1F;
  --chat-username: #FFFFFF;
  --inset-box: #03383F;
}

[data-theme=Dark] {
  --bg-color: #1F1F1F;
  --bg-color2: #0F0F0F;
  --bg-color3: #353535;
  --bg-color4: #9C9C9C;
  --text-color: #FFFFFF;
  --text-color-highlight: #19DAF4;
  --text-color-highlight-light: #03383F;
  --text-color-highlight-t: black;
  --bg-highlight-osc: #3B3E18;
  --bg-hover: #555555;
  --bg-text-grises: #D6D6D6;
  --bg-alert: #3B3E18;
  --tabla-text-highlight: #FFFFFF;
  --chat-username: #000000;
  --inset-box: #03383F;
}

/* ========================= */
/* CONTENEDOR GENERAL */
/* ========================= */
.contenedor-programacion {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--bg-color2);
  border-radius: 10px;
}

/* ========================= */
/* ENCABEZADOS PRINCIPALES */
/* ========================= */
h2 {
  font-family: "Manuka";
  font-size: 3rem;
  font-weight: normal;
  color: var(--text-color);
  margin-bottom: 15px;
}

h3 {
  font-family: "Manuka";
  font-size: 5rem;
  font-weight: normal;
  color: var(--text-color);
  padding: 10px;
  border-radius: 6px;
  text-transform: uppercase;
  margin-top: 0rem !important;
  margin-bottom: 0rem;
}

/* ========================= */
/* CONTENEDOR DE SEMANAS */
/* ========================= */
.semana {
  border-radius: 6px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

/* PESTAÑAS DE SEMANAS */
.semana-tabs {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.semana-tabs::-webkit-scrollbar {
  display: none;
}
.semana-tab {
  flex-shrink: 0;
  padding: 10px 18px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-color);
  opacity: 0.5;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: opacity 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.semana-tab:hover {
  opacity: 0.8;
}
.semana-tab.active {
  opacity: 1;
  border-bottom-color: var(--text-color-highlight);
  color: var(--text-color-highlight);
}
.semana-tab.active .semana-tab-nombre {
  color: var(--text-color-highlight);
}
.semana-tab.active .semana-tab-fechas {
  opacity: 0.8;
}
.semana-tab-nombre {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.semana-tab-fechas {
  font-size: 0.7rem;
  opacity: 0.6;
}
.semana-tab-bloqueada,
.semana-tab.semana-tab-bloqueada:hover {
  cursor: not-allowed;
  opacity: 0.35;
  pointer-events: auto;
}
.semana-tab-bloqueada .icon-bloqueo {
  color: var(--bg-text-grises);
  font-size: 0.75rem;
}

/* ENCABEZADO DE CADA SEMANA */
.semana h4 {
  font-size: 16px;
  font-weight: bold;
  background: #333333;
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 0;
}

.semana-header {
  background: #333333;
  color: white;
  padding: 10px;
  cursor: pointer;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 6px;
  user-select: none;
  display: flex;
  align-items: center;
}
.semana-header i {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  vertical-align: middle;
}

.semana-icon-fecha {
  color: var(--bg-text-grises);
  margin-right: 4px;
  font-size: 13px;
}

.semana-fechas-texto {
  color: var(--bg-text-grises);
  white-space: nowrap;
  margin-right: 8px;
  font-size: inherit;
}

.semana-icon-nombre {
  color: var(--text-color-highlight);
  margin-right: 4px;
  font-size: 13px;
}

.botones-semana {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
}

.btn-guardar-semana, .btn-importar-semana {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease-in-out;
}

.btn-guardar-semana i, .btn-importar-semana i {
  padding-top: 4px;
  font-size: 18px;
  color: white;
}

@media (hover: hover) {
  .btn-guardar-semana:hover i, .btn-importar-semana:hover i {
    color: lightslategrey;
  }
}
/* ========================= */
/* CONTENEDOR DE LOS DAS */
/* ========================= */
.dias-contenedor {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* Asegura que haya 7 columnas */
  align-items: start;
  gap: 8px;
  padding: 10px;
  background: var(--bg-color2);
  border-radius: 6px;
  overflow-x: scroll;
  transition: all 0.3s ease-in-out;
  overflow-y: hidden;
}

/* ========================= */
/* ESTILOS PARA CADA DA */
/* ========================= */
.dia {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  min-height: 140px;
  min-width: 11rem;
  font-size: 14px;
  border-radius: 6px;
  position: relative;
}

/*.dia-atleta-hoy {
    background-color: rgba(0, 0, 0, 0.03);
}
[data-theme="Dark"] .dia-atleta-hoy {
    background-color: rgba(255, 255, 255, 0.03);
}*/
.dia-completado-desktop {
  /* sin borde */
}

.dia-sesion-bloqueada {
  opacity: 0.5;
  filter: grayscale(0.3);
}

.dia-check-toggle {
  cursor: pointer;
  margin-right: 6px;
  font-size: 20px;
  transition: color 0.2s;
}
.dia-check-toggle.completado {
  color: var(--text-color-highlight);
}
.dia-check-toggle.pendiente {
  color: var(--text-color);
  opacity: 0.5;
}
@media (hover: hover) {
  .dia-check-toggle.pendiente:hover {
    opacity: 1;
    color: var(--text-color-highlight);
  }
}
.dia-check-toggle.solo-desktop {
  display: inline-block;
}

@media (max-width: 768px) {
  .dia-check-toggle.solo-desktop,
  .btn-collapse-dia-atleta.solo-desktop {
    display: none;
  }
}
.dia-focus {
  border: none;
  /* outline: 2px solid $color-text-highlight-t;*/
  background-color: var(--text-color-highlight);
  transition: background-color 0.2s ease-in-out;
}

.semana-focus {
  outline: 2px solid var(--text-color-highlight-t);
  background-color: var(--text-color-highlight);
  transition: background-color 0.3s ease-in-out;
}

.titulo-dia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: bold;
  border-bottom: 2px solid #D1D5DB;
  width: 100%;
  padding-bottom: 5px;
  margin-bottom: 8px;
  margin-top: 0.2rem;
}

.titulo-dia:not(:has(.botones-dia)) {
  justify-content: center;
  position: relative;
}

.btn-collapse-dia-atleta {
  background: none;
  border: none;
  color: var(--bg-text-grises);
  cursor: pointer;
  padding: 2px 4px;
  font-size: 12px;
  opacity: 0.5;
  transition: opacity 0.2s;
  position: absolute;
  right: 0;
}

.btn-collapse-dia-atleta:hover {
  opacity: 1;
}

.btn-plantilla-dia {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0%;
  color: var(--text-color);
}

.botones-dia {
  display: flex;
  gap: 5px;
  align-items: center;
  color: var(--text-color);
}

.btn-plantilla-dia i {
  font-size: 20px;
  color: var(--text-color);
  border: none;
  border-radius: 4px;
  transition: background 0.2s ease-in-out;
  padding: 2%;
}

@media (hover: hover) {
  .btn-plantilla-dia:hover i {
    background: rgba(0, 0, 0, 0.2);
  }
}
/* ========================= */
/* BOTN DE AADIR BLOQUE */
/* ========================= */
.add-bloque {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #CCCCCC;
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 6px;
  color: var(--text-color);
  width: 90%;
  text-align: center;
  transition: all 0.2s ease-in-out;
  gap: 3px;
  background: var(--bg-color);
}
.add-bloque i {
  font-size: 15px;
  padding-top: 3px;
}

@media (hover: hover) {
  .add-bloque:hover {
    background: var(--text-color-highlight);
    color: var(--text-color-highlight-t);
    border: 1px solid #CCCCCC;
  }
}
.add-bloque::before {
  font-weight: bold;
  margin-right: 6px;
}

/* ========================= */
/* RESPONSIVIDAD */
/* ========================= */
@media (max-width: 768px) {
  .dias-contenedor {
    grid-template-columns: repeat(1, 1fr); /* Se ajusta en mviles */
  }
  .dia {
    min-height: 120px;
  }
  .add-bloque {
    font-size: 12px;
    padding: 6px 10px;
  }
}
/* ========================= */
/* CONTENEDOR PRINCIPAL DETALLE */
/* ========================= */
.programacion-detalle-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 55px);
  height: calc(100dvh - 55px);
  overflow: hidden;
}

.sin-padding-header .programacion-detalle-container {
  height: 100vh;
  height: 100dvh;
}

.programacion-detalle-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

/* Pull + barra fijos; el cuerpo (contenido o loading) ocupa y centra en el resto */
.programacion-detalle-content > .pull-to-refresh-indicator {
  flex: 0 0 auto;
}

.programacion-detalle-content > .barra-superior {
  flex: 0 0 auto;
}

.programacion-detalle-content > .contenedor-programacion {
  flex: 0 0 auto;
  min-height: 0;
}

.programacion-detalle-content > .spinner-wrapper {
  flex: 1 1 auto;
  min-height: 0;
}

/* Pull-to-refresh */
.pull-to-refresh-indicator {
  height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.pull-to-refresh-indicator.releasing {
  transition: height 0.2s ease, opacity 0.2s ease;
}
.pull-to-refresh-indicator.refreshing {
  opacity: 1;
}
@media (min-width: 769px) {
  .pull-to-refresh-indicator {
    display: none;
  }
}

/* ========================= */
/* ENCABEZADO GENERAL */
/* ========================= */
.encabezado-programacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background: var(--bg-color);
  border-bottom: 2px solid var(--bg-color3);
  flex-shrink: 0;
  position: relative;
}

/* =====================================================================
   Presencia de coaches (estilo Google Sheets / Figma).
   - Avatar circular, mismo aspecto que .header-perfil-avatar.
   - Halo pulsante alrededor del avatar (anillo "está aquí ahora").
   - Badge con icono lápiz superpuesto en la esquina inferior-derecha.
   - Solo visible en escritorio.
   ===================================================================== */
.presencia-coaches {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 8px;
}
.presencia-coach {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.presencia-coach__foto {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #686868;
  display: block;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}
.presencia-coach::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--text-color-highlight);
  opacity: 0.65;
  animation: presencia-coach-pulse 1.8s ease-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes presencia-coach-pulse {
  0%   { transform: scale(0.92); opacity: 0.65; }
  70%  { transform: scale(1.18); opacity: 0;    }
  100% { transform: scale(1.18); opacity: 0;    }
}
.presencia-coach__badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-color-highlight);
  border: 2px solid var(--bg-color);
  color: var(--bg-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  z-index: 2;
}
.presencia-coach__badge i {
  font-size: 8px;
  line-height: 1;
}
.presencia-coach--more .presencia-coach__foto.presencia-coach__more {
  background: var(--bg-color3);
  color: var(--text-color);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
  .presencia-coach::after { animation: none; }
}
@media (max-width: 768px) {
  .presencia-coaches { display: none; }
}

/* Nombre de la programacin */
.encabezado-programacion h1 {
  font-size: 20px;
  font-weight: bold;
  color: var(--text-color);
  margin: 0;
}

/* Selector de mes */
.selector-mes {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-color);
}
.selector-mes > i {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-size: 14px;
}

.selector-mes select,
.selector-mes > i,
.selector-semanas-wrapper {
  margin-top: 0;
  margin-bottom: 0;
}

.mes h3 {
  margin-left: 0.4rem;
}

.selector-mes label {
  font-size: 14px;
  font-weight: bold;
  color: #555555;
}

.selector-mes select {
  border: none;
  border-radius: 4px;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-size: 14px;
  font-weight: bold;
  outline: none;
  cursor: pointer;
  font-family: "Public Sans";
  padding: 2px 4px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='%23888'%3E%3Cpath d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 10px 6px;
  padding-right: 18px;
}

.mes-fijo {
  font-family: "Public Sans";
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: bold;
  margin-left: 5px;
}

/* ========================= */
/* BARRA SUPERIOR (CON BOTONES Y OPCIONES) */
/* ========================= */
.barra-superior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-color);
  padding: 10px;
  border-bottom: 2px solid var(--bg-color3);
}

/* Estilos de los botones */
.barra-superior button {
  background: none;
  color: var(--text-color);
  font-size: 14px;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.barra-superior button:disabled {
  background: #DDDDDD;
  cursor: not-allowed;
}

/* Controles alineados */
.controles-derecha {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ========================= */
/* RESPONSIVIDAD */
/* ========================= */
@media (max-width: 768px) {
  .encabezado-programacion {
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
    gap: 10px;
  }
  .barra-superior {
    flex-direction: row;
    gap: 10px;
  }
}
.titulo {
  font-family: "Manuka";
  font-size: 5rem;
  margin-bottom: 15px;
  padding-left: 10px;
}

.contenedor-tabla {
  display: flex;
  width: 100%;
  margin-left: 0;
}

.tabla-responsive {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--bg-color3);
  border-radius: 8px;
  overflow: hidden;
}

.tabla-responsive th {
  color: var(--text-color);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.6;
  padding: 10px 12px 6px 12px;
  text-align: left;
  font-weight: 600;
}
.tabla-responsive thead tr th:first-child {
  position: relative;
  padding-left: 16px;
  opacity: 1;
}
.tabla-responsive thead tr th:first-child::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--text-color-highlight);
}

.tabla-responsive td {
  cursor: pointer;
  padding: 12px;
  text-align: left;
  vertical-align: middle;
}

.tabla-responsive tbody tr {
  background-color: var(--bg-color);
  transition: background 0.2s ease-in-out;
}

.tabla-responsive tbody tr:not(:last-child) {
  border-bottom: 1px solid var(--bg-color3);
}

@media (hover: hover) {
  .tabla-responsive tbody tr:hover {
    background-color: var(--bg-hover);
  }
}
.tabla-responsive tbody tr td:first-child {
  border-left: 4px solid var(--text-color-highlight);
}

.barra-progreso {
  width: 100px; /* Ajusta el tamao de la barra */
  height: 10px;
  background-color: #DDDDDD;
  border-radius: 5px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.progreso {
  height: 100%;
  background-color: var(--text-color-highlight);
  width: 0%; /* Por defecto, la barra empieza vaca */
  transition: width 0.5s ease-in-out;
  min-width: 2px; /* Evita que la barra desaparezca con valores bajos */
}

.programming-section {
  margin: 5rem;
  max-width: 100%;
  overflow: hidden;
}

.programming-page {
  background-color: var(--bg-color);
  border-bottom: 1px solid var(--bg-color4);
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  width: 100%;
  display: flex;
  text-align: center;
  justify-content: space-between;
  align-items: center;
}

.search-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.search-input {
  padding: 10px;
  width: 60%;
  border: 1px solid #333333;
  border-radius: 4px;
  background-color: var(--bg-color3);
  color: var(--text-color);
}

.search-and-buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.buscador-prog {
  display: inline-flex;
}

.no-programming {
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  background-color: var(--bg-color);
}

.no-programming p {
  color: var(--text-color);
  margin-bottom: 20px;
  text-align: center;
}

.container-prog {
  border: 2px dashed #737373;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.container-prog .icon-calendario {
  background: var(--bg-color4);
  padding: 10px 10px 3px 10px;
  border-radius: 30%;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

[data-theme=Dark] .container-prog .icon-calendario {
  color: #eafc3c;
}

.btn-nuevo, .btn-eliminar, .btn-copiar, .btn-cargar,
.btn-crear {
  display: inline-flex;
  padding: 10px 20px;
  background-color: #333333;
  color: var(--text-color);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

[data-theme=Dark] .btn-nuevo, .btn-eliminar, .btn-copiar, .btn-cargar,
.btn-crear {
  background-color: #444444;
}

.btn-nuevo i {
  font-size: 15px;
}

.btn-nuevo:disabled,
.btn-eliminar:disabled,
.btn-copiar:disabled,
.btn-cargar:disabled,
.btn-crear:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #CCCCCC !important;
  color: #686868 !important;
  border: 1px solid #AAAAAA !important;
}

@media (hover: hover) {
  .btn-nuevo:hover,
  .btn-eliminar:hover,
  .btn-copiar:hover,
  .btn-cargar:hover,
  .btn-crear:hover {
    background-color: var(--bg-hover);
    color: var(--text-color-highlight);
    transform: scale(1.05);
  }
}
.botones-prog {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 1;
  min-width: 0;
  margin-left: auto;
}

.botones-prog > .notif-btn,
.botones-prog > .prog-crear-wrapper {
  flex: 0 0 auto;
}

.botones-prog .save-btn {
  width: auto;
  align-items: center;
  justify-content: center;
}
.botones-prog .save-btn i {
  font-size: 18px;
  line-height: 1;
}

.botones-prog-1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 6rem;
}

.botones-prog-1 button {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  margin-top: 10px;
}

.edit-btn {
  color: var(--text-color);
  border: none;
}

.deleted-btn {
  color: #ff5757;
  border: none;
}

@media (hover: hover) {
  .edit-btn:hover, .deleted-btn:hover {
    transform: scale(1.2);
  }
}

/* ═══ Dropdown acciones bloque/día/semana/sesión ═══ */
.acciones-dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Dropdown simple (usa posicionamiento CSS, no requiere JS) */
.prog-crear-wrapper {
  position: relative;
  display: inline-block;
}
.prog-crear-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  z-index: 10001;
  min-width: 240px;
  overflow: hidden;
}
.prog-crear-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  background: none;
  border: none;
  color: #e0e0e0;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
  white-space: nowrap;
}
.prog-crear-option:hover {
  background: #2a2a2a;
}
.prog-crear-option i {
  font-size: 0.95rem;
  opacity: 0.7;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.prog-crear-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: transparent;
}
@media (max-width: 768px) {
  .prog-crear-dropdown {
    min-width: min(260px, 80vw);
  }
}
.acciones-dropdown {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  z-index: 10001;
  min-width: 250px;
  overflow: hidden;
  overflow-y: auto;
  max-height: 80vh;
  left: 0;
  top: 0;
}
.acciones-dropdown-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 15px 22px;
  background: none;
  border: none;
  color: #e0e0e0;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
  white-space: nowrap;
}
.acciones-dropdown-option:hover {
  background: #2a2a2a;
}
.acciones-dropdown-option i {
  font-size: 0.95rem;
  opacity: 0.7;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.acciones-dropdown-danger {
  color: #e74c3c;
}
.acciones-dropdown-danger:hover {
  background: rgba(231, 76, 60, 0.1);
}
.acciones-dropdown-config {
  min-width: 300px;
}
.acciones-dropdown-config .acciones-dropdown-option {
  padding: 16px 24px;
  font-size: 1rem;
}
.acciones-dropdown-option {
  border: none !important;
}
@media (max-width: 768px) {
  .acciones-dropdown {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: min(280px, 85vw);
  }
}

.perfil-avatar-program {
  width: 5em;
  height: 5em;
  min-width: 5em;
  min-height: 5em;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #686868;
}

.programacion-header-info {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
}

.programacion-nombre {
  font-size: 2.5rem;
  font-family: "Manuka";
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vista-escritorio {
  display: block;
}

.vista-movil {
  display: none;
}

.mini-calendario-wrapper {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  align-items: start;
  justify-items: center;
  overflow-x: hidden;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.mini-calendario-wrapper > .flc-btn {
  align-self: center;
}

.dia-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 38px;
}

@media (max-width: 400px) {
  .mini-calendario-wrapper {
    gap: 0.2rem;
    padding: 0.25rem 0.4rem;
  }
  .mini-calendario-wrapper button,
  .mini-calendario-wrapper .dia-item {
    padding: 0.25rem 0.1rem;
    font-size: 0.8rem;
  }
}
/*.dia-btn {
    flex: 0 0 auto;
    width: 100%;
    text-align: center;
    padding: 0.3rem;
    border-radius: 8px;
    border: none;
    background-color: $wb_Jet;
    color: white;
    font-size: 0.85rem;
    cursor: pointer;
    scroll-snap-align: center;
    transition: 0.2s ease;
    min-width: 25px;
    align-items: center;
}*/
.dia-btn {
  width: 38px;
  height: 56px;
  padding: 4px 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 8px;
  border: none;
  background-color: #333333;
  color: white;
  font-size: 0.85rem;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  scroll-snap-align: center;
  overflow: hidden;
}

@media (hover: hover) {
  .dia-btn:hover {
    background-color: var(--bg-hover);
  }
}
.dia-btn.seleccionado {
  background-color: var(--text-color-highlight);
  color: black;
  font-weight: bold;
}

.dia-btn.dia-completado {
  border: 1.5px solid var(--text-color-highlight);
}

.dia-btn.sesion-bloqueada {
  opacity: 0.35;
  pointer-events: none;
}

.mini-check-completado {
  font-size: 8px;
  color: #4CAF50;
  cursor: pointer;
  line-height: 1;
  margin-top: 1px;
}

.mini-check-pendiente {
  font-size: 8px;
  color: var(--bg-text-grises);
  opacity: 0.3;
  cursor: pointer;
  line-height: 1;
  margin-top: 1px;
}
@media (hover: hover) {
  .mini-check-pendiente:hover {
    opacity: 0.8;
    color: #4CAF50;
  }
}

.mini-check-btn {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 23px;
  margin-top: 9px;
  padding: 2px 0;
  line-height: 1;
  text-align: center;
  width: 100%;
}
.mini-check-btn.completado {
  color: var(--text-color-highlight) !important;
}
.mini-check-btn.pendiente {
  color: var(--text-color) !important;
  opacity: 0.5;
}
@media (hover: hover) {
  .mini-check-btn.pendiente:hover {
    opacity: 1;
    color: var(--text-color-highlight) !important;
  }
}

.letra-dia {
  display: block;
  min-height: 0.9rem;
  font-size: 0.75rem;
  line-height: 1;
  opacity: 0.9;
}

.numero-dia {
  display: block;
  min-width: 2ch;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.1;
}

.encabezado-fecha-mini {
  margin: 1rem 1rem 0.5rem 1rem;
  font-weight: bold;
}

.flc-btn {
  border: none;
  color: var(--text-color-highlight);
  background-color: transparent;
  font-weight: bold;
  font-size: 1rem;
}

.descripcion-campo {
  font-size: 0.85rem;
  color: gray;
  margin-bottom: 8px;
}

.input-nombre-semana {
  background: transparent !important;
  color: var(--text-color-highlight) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: inherit;
  font-family: inherit;
  font-weight: bold;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
  line-height: inherit;
  flex: 1;
  min-width: 60px;
}
.input-nombre-semana:focus {
  border-bottom: 1px solid var(--text-color-highlight) !important;
}
.input-nombre-semana::placeholder {
  color: var(--bg-text-grises);
  opacity: 0.5;
}

.selector-semanas-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
}

.selector-semanas-btn {
  border: none;
  border-radius: 4px;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-size: 14px;
  font-weight: bold;
  font-family: "Public Sans";
  outline: none;
  cursor: pointer;
  padding: 2px 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
@media (hover: hover) {
  .selector-semanas-btn:hover {
    color: var(--text-color-highlight);
  }
}

@media (max-width: 768px) {
  .selector-semanas-wrapper {
    display: none !important;
  }
}
.dropdown-semanas-lista {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1000;
  background: var(--bg-color);
  border: 1px solid var(--bg-color3);
  border-radius: 6px;
  padding: 6px 0;
  min-width: 280px;
  max-height: 300px;
  overflow-y: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.dropdown-semana-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  cursor: pointer;
  font-size: 13px;
  font-family: "Public Sans";
  color: var(--text-color);
  white-space: nowrap;
  transition: background 0.15s;
}
@media (hover: hover) {
  .dropdown-semana-item:hover {
    background: var(--bg-color3);
  }
}
.dropdown-semana-item.semana-actual {
  background: var(--bg-color2);
}
.dropdown-semana-item input[type=checkbox] {
  accent-color: var(--text-color-highlight);
  width: 15px;
  height: 15px;
  cursor: pointer;
  flex-shrink: 0;
}

.dropdown-semana-nombre {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-semana-fechas {
  color: var(--bg-text-grises);
  font-size: 11px;
  flex-shrink: 0;
}

.dropdown-semana-badge {
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--text-color-highlight);
  border: 1px solid var(--text-color-highlight);
  border-radius: 4px;
  padding: 1px 5px;
  flex-shrink: 0;
}

.programas-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.programas-main {
  flex: 1;
  min-width: 0;
}

.dueto-panel {
  background: var(--bg-color);
  border-left: 4px solid #F59E0B;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  width: 280px;
  flex-shrink: 0;
  position: sticky;
  top: 16px;
}

.dueto-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
}
@media (hover: hover) {
  .dueto-header:hover {
    background: var(--bg-hover);
  }
}

.dueto-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
  font-size: 0.9rem;
  color: var(--text-color);
}
.dueto-title > i {
  color: #F59E0B;
  font-size: 18px;
}

.dueto-count {
  background: #F59E0B;
  color: #000;
  font-size: 0.55rem;
  font-weight: bold;
  line-height: 1;
  width: 22px;
  min-width: 22px;
  min-height: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  border: 2px solid var(--bg-color2);
  box-sizing: border-box;
  flex-shrink: 0;
  box-shadow: none;
  max-width: 22px;
  max-height: 22px;
  align-self: center;
}

.dueto-toggle {
  color: var(--bg-text-grises);
  font-size: 12px;
}

.dueto-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--bg-color3);
}

.dueto-list-hidden {
  display: none;
}

@media (min-width: 769px) {
  .dueto-list-hidden {
    display: flex !important;
  }
  .dueto-toggle {
    display: none;
  }
}
.dueto-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.15s;
}
@media (hover: hover) {
  .dueto-item:hover {
    background: var(--bg-hover);
  }
}
.dueto-item:not(:last-child) {
  border-bottom: 1px solid var(--bg-color3);
}

.dueto-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #686868;
}

.dueto-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dueto-nombre {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dueto-detalle {
  font-size: 0.75rem;
  color: var(--bg-text-grises);
}

.dueto-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dueto-badge-urgent {
  background: #632121;
  color: #fff;
  border: 1px solid #FF5757;
}

.dueto-badge-warning {
  background: rgba(245, 158, 11, 0.15);
  color: #F59E0B;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

/* Sidebar que agrupa Atención requerida + Packs */
.programas-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 280px;
  flex-shrink: 0;
  position: sticky;
  top: 16px;
}
.programas-sidebar > .dueto-panel {
  width: 100%;
  position: static;
  top: auto;
}

/* En tablet/iPad (<=1000px) la cabecera ya usa el modo movil (hamburguesa) pero la
   tabla de escritorio sigue visible (>768px). Con el sidebar de 280px al lado no
   cabe y se solapa sobre la tabla, asi que apilamos: contenido principal a ancho
   completo y los paneles (Atencion requerida, Packs) debajo. */
@media (max-width: 1000px) {
  .programas-layout {
    flex-direction: column;
  }
  .programas-main {
    width: 100%;
  }
  .programas-sidebar {
    width: 100%;
    position: static;
    top: auto;
  }
}

/* Variante verde del panel: misma estructura que dueto-panel, sólo cambia el color de acento.
   El HTML usa class="dueto-panel packs-panel" para heredar TODO el estilo y este override
   pisa sólo el color (definido después → gana en empate de especificidad). */
.packs-panel {
  border-left-color: #22c55e;
}
.packs-panel .dueto-title > i {
  color: #22c55e;
}
.packs-panel .dueto-count {
  background: #22c55e;
  color: #000;
}

/* Skeleton para los paneles del sidebar de /programaciones mientras cargan
   (Atención requerida, Packs). Reserva el espacio para evitar saltos de layout. */
.panel-skeleton {
  pointer-events: none;
}
.panel-skeleton .dueto-header {
  cursor: default;
}
.panel-skeleton .dueto-item {
  cursor: default;
}
.panel-skeleton .dueto-avatar {
  border: none;
}
.skeleton-bar,
.skeleton-circle {
  display: inline-block;
  background: linear-gradient(90deg, var(--bg-color3) 25%, var(--bg-hover, rgba(255, 255, 255, 0.08)) 50%, var(--bg-color3) 75%);
  background-size: 200% 100%;
  animation: panel-skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
  vertical-align: middle;
}
.skeleton-circle {
  border-radius: 50%;
  flex-shrink: 0;
}
@keyframes panel-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Aparición suave de los paneles del sidebar al cargar (usado sólo en móvil,
   ver media query más abajo). */
@keyframes dueto-panel-appear {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Avatar circular para celdas de tabla en skeleton de /programaciones. */
.skeleton-avatar-table {
  width: 36px;
  height: 36px;
  display: inline-block;
}

/* Skeleton de cabecera de imagen en tarjetas del market (mismo alto que .card-foto). */
.skeleton-card-foto {
  display: block;
  width: 100%;
  height: 180px;
  border-radius: 3%;
}

/* Líneas de descripción del skeleton de tarjeta apiladas con separación. */
.skeleton-desc {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* En el skeleton del market, el avatar circular del autor toma el tamaño base de .autor-foto
   y descartamos su borde gris (que rodearía un placeholder vacío). */
.card-skeleton .autor-foto {
  border: none;
}

@media (max-width: 768px) {
  /* En móvil ocultamos solo los skeletons del sidebar de /programaciones: ahí la
     barra lateral se aplana sobre el contenido y los placeholders añadirían ruido.
     El resto de skeletons (modal de chats, etc.) siguen visibles. */
  .programas-sidebar .panel-skeleton {
    display: none;
  }

  .programas-layout {
    flex-direction: column;
    gap: 6px;
  }
  .programas-main {
    width: 100%;
  }
  .programas-sidebar {
    width: 100%;
    /* En móvil mantenemos el orden natural del HTML: lista principal arriba,
       "Atención requerida" y "Packs" debajo. Antes había order: -1 que los
       subía y al cargar tarde generaba un salto encima de la lista. */
    order: 1;
    position: static;
    top: auto;
    gap: 0;
  }
  .dueto-panel {
    width: 100%;
    order: -1;
    position: static;
    top: auto;
    margin: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    border: none;
    border-left: none;
    overflow: visible;
    /* Fade + ligero desplazamiento al montarse el panel en móvil.
       Sólo se ejecuta una vez al primer render (cuando llegan los datos),
       suavizando la aparición que antes era brusca. */
    animation: dueto-panel-appear 320ms ease-out both;
  }

  @media (prefers-reduced-motion: reduce) {
    .dueto-panel {
      animation: none;
    }
  }
  .dueto-header {
    padding: 0.4rem 0 0.55rem;
    min-height: 44px;
    background: transparent;
    border-radius: 0;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
  }
  @media (hover: hover) {
    .dueto-header:active {
      opacity: 0.92;
    }
  }
  .dueto-panel .dueto-title {
    flex: 1;
    min-width: 0;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--text-color);
  }
  .dueto-panel .dueto-title > i {
    font-size: 16px;
  }
  .dueto-panel .dueto-title > span:not(.dueto-count) {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dueto-toggle {
    font-size: 15px;
    opacity: 0.7;
    padding: 2px 4px;
    flex-shrink: 0;
  }
  .dueto-count {
    box-shadow: none;
    border-width: 1px;
    max-width: 22px;
    max-height: 22px;
    flex-shrink: 0;
    align-self: center;
  }
  .dueto-list {
    background: transparent;
    border-top: 1px solid var(--bg-color3);
  }
  .dueto-item {
    padding: 0.6rem 0 0.65rem;
    background: transparent;
    align-items: flex-start;
    gap: 10px;
  }
  .dueto-item:not(:last-child) {
    border-bottom: 1px solid var(--bg-color3);
  }
  .dueto-avatar {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
  }
}
.opciones-programacion-modal {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.opciones-programacion-modal .save-btn {
  justify-content: flex-start;
  width: 95%;
  text-align: left;
}
.opciones-programacion-modal .modal-confirmar-buttons {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.facturacion-resumen {
  margin: 0 0 0.75rem 0;
  padding: 0.75rem 0.9rem;
  border-radius: 8px;
  background: var(--bg-color3, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--bg-color2, rgba(0, 0, 0, 0.08));
}
.facturacion-resumen h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-color1, inherit);
}
.facturacion-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem 0.75rem;
  align-items: start;
}
.facturacion-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.facturacion-kpi-label {
  font-size: 0.75rem;
  opacity: 0.85;
  line-height: 1.2;
}
.facturacion-kpi-value {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  word-break: break-word;
}
.facturacion-kpi-note {
  margin: 0.5rem 0 0 0;
  font-size: 0.7rem;
  line-height: 1.3;
  opacity: 0.8;
}

.feedbacks-selectores {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 10px;
}
.feedbacks-selectores__fila-superior {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.feedbacks-selectores__fila-superior .feedbacks-selector {
  min-width: 0;
  margin: 0;
}
.feedbacks-selectores__fila-superior .feedbacks-selector--semana {
  flex: 2 1 260px;
}
.feedbacks-selectores__fila-superior .feedbacks-selector--dia {
  flex: 1 1 160px;
}
.feedbacks-selectores__fila-atleta {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
}
.feedbacks-selectores__fila-atleta .modal-subtitle {
  margin-bottom: 6px;
}
.feedbacks-atleta-combo {
  position: relative;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.feedbacks-selectores__fila-atleta .feedbacks-atleta-combo .perfil-input-text {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: block;
}
.feedbacks-atleta-sugerencias {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 30;
  max-height: 220px;
  overflow-y: auto;
  margin: 4px 0 0 0;
  padding: 4px;
  list-style: none;
  background: var(--bg-color2, #2a2a2a);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.feedbacks-atleta-sugerencias li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  min-width: 0;
}
@media (hover: hover) {
  .feedbacks-atleta-sugerencias li:hover {
    background: var(--bg-color3, #333);
  }
}
.feedbacks-atleta-sugerencias__foto {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.feedbacks-atleta-sugerencias__nombre {
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.feedbacks-atleta-sin-coincidencias {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 30;
  margin-top: 4px;
  padding: 10px 12px;
  font-size: 0.85rem;
  opacity: 0.9;
  background: var(--bg-color2, #2a2a2a);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
}
.feedbacks-atleta-pill.feedback-filtros__chip {
  white-space: normal;
}
.feedbacks-atleta-pill {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  cursor: default;
  user-select: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: stretch;
  gap: 8px;
  min-width: 0;
  padding: 6px 10px 6px 6px;
}
.feedbacks-atleta-pill__foto {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.feedbacks-atleta-pill__nombre {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  white-space: normal;
  word-break: break-word;
  min-width: 0;
  flex: 1 1 auto;
}
.feedbacks-atleta-pill__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  min-height: 1.5rem;
  margin-left: 2px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.9;
  flex-shrink: 0;
  border-radius: 6px;
}
@media (hover: hover) {
  .feedbacks-atleta-pill__clear:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.15);
  }
}
.feedbacks-selectores__fila-superior .perfil-input-text {
  width: 100%;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
}

.feedbacks-actividad-titulo {
  margin: 10px 10px 0 10px;
}

@media (max-width: 480px) {
  .feedbacks-selectores {
    gap: 8px;
  }
  .feedbacks-selectores__fila-superior {
    gap: 8px;
  }
  .feedbacks-selectores__fila-superior .feedbacks-selector--semana,
  .feedbacks-selectores__fila-superior .feedbacks-selector--dia {
    flex: 1 1 100%;
  }
  .feedbacks-actividad-titulo {
    margin: 4px 10px 0 10px;
  }
}

.feedback-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 9px 10px 20px 10px;
}
.feedback-filtros__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 20px;
  background-color: var(--text-color-highlight-light);
  color: white;
  border: 1px solid var(--text-color-highlight);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  filter: brightness(0.6);
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.feedback-filtros__chip.is-active {
  filter: brightness(1);
}
@media (hover: hover) {
  .feedback-filtros__chip:hover {
    opacity: 0.85;
  }
}
.feedback-filtros__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
@media (max-width: 768px) {
  .feedback-filtros__chip {
    padding: 4px 11px 4px 12px;
    gap: 6px;
    font-size: 0.72rem;
    line-height: 1.25;
    border-radius: 16px;
  }
  .feedback-filtros__count {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 0.6rem;
  }
}
@media (max-width: 480px) {
  .feedback-filtros__chip {
    padding: 3px 8px 3px 9px;
    gap: 5px;
    font-size: 0.68rem;
    line-height: 1.2;
    border-radius: 12px;
    font-weight: 600;
  }
  .feedback-filtros__count {
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    font-size: 0.55rem;
  }
}

@media (max-width: 768px) {
  .programacion-detalle-content {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  }
  .programacion-detalle-content .vista-movil {
    height: auto;
    min-height: 0;
    margin-bottom: 0;
  }
  .vista-escritorio {
    display: none;
    height: 100%;
  }
  .vista-movil {
    display: block;
    height: 100%;
  }
  .programas-main > .vista-movil {
    background: transparent;
    /* Anulamos el margin-bottom: 5rem del selector global .vista-movil:
       en /programaciones queda como hueco vacío entre la lista y la
       sección "Atención requerida" / "Packs" que vienen justo debajo.
       El espacio contra el bottom-nav ya lo aporta el padding-bottom
       de .market-container. */
    margin-bottom: 0;
  }
  .card-programacion-movil {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.25rem;
    background: transparent;
    cursor: pointer;
    transition: background 0.15s;
  }
  .card-programacion-movil:not(:last-child) {
    border-bottom: 1px solid var(--bg-color3);
  }
  .card-programacion-movil:active {
    background: var(--bg-color3);
  }
  .avatar-programacion {
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }
  .info-programacion {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
  }
  .nombre-programacion {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .subtitulo-programacion {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-color);
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
  }
  .subtitulo-programacion .subtitulo-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
  }
  .subtitulo-programacion .subtitulo-item i {
    font-size: 0.85rem;
    line-height: 1;
    position: relative;
    top: 1px;
  }
  .subtitulo-separador {
    opacity: 0.5;
  }
  .subtitulo-programacion .visibilidad-chip {
    font-size: 0.6rem;
    padding: 2px 7px;
    border-radius: 5px;
    letter-spacing: 0.02em;
  }
  .card-programacion-movil .menu-bloque-toggle {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--text-color-highlight);
    cursor: pointer;
    padding: 8px;
    flex-shrink: 0;
  }
}
@media (max-width: 768px) and (hover: hover) {
  .acciones-movil button:hover {
    color: var(--text-color-highlight);
    transform: scale(1.1);
  }
}
@media (max-width: 768px) {
  .estado-activa {
    background-color: var(--text-color-highlight) !important;
    color: var(--text-color-highlight-t) !important;
    border: 1px solid rgba(163, 230, 53, 0.4) !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    border-radius: 6px !important;
    display: inline-block !important;
  }
  .estado-desactivada {
    background-color: radial-gradient(circle, rgba(221, 46, 28, 0.8) 15%, transparent 100%) !important;
    color: var(--text-color-highlight-t) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    border-radius: 6px !important;
    display: inline-block !important;
  }
}
:root {
  --bg-color: #FFFFFF;
  --bg-color2: #F7F7F7;
  --bg-color3: #F0F0F0;
  --bg-color4: #EBEBEB;
  --text-color: #000000;
  --text-color-highlight: #19DAF4;
  --text-color-highlight-light: #03383F;
  /*--text-color-highlight: #19DAF4;*/
  --bg-highlight-osc: #1D1C5F;
  --text-color-highlight-t: black;
  --bg-hover: #E3E8EB;
  --bg-text-grises: #7A7A7A;
  --bg-alert: #EDEDFF;
  --tabla-text-highlight: #1F1F1F;
  --chat-username: #FFFFFF;
  --inset-box: #03383F;
}

[data-theme=Dark] {
  --bg-color: #1F1F1F;
  --bg-color2: #0F0F0F;
  --bg-color3: #353535;
  --bg-color4: #9C9C9C;
  --text-color: #FFFFFF;
  --text-color-highlight: #19DAF4;
  --text-color-highlight-light: #03383F;
  --text-color-highlight-t: black;
  --bg-highlight-osc: #3B3E18;
  --bg-hover: #555555;
  --bg-text-grises: #D6D6D6;
  --bg-alert: #3B3E18;
  --tabla-text-highlight: #FFFFFF;
  --chat-username: #000000;
  --inset-box: #03383F;
}

/* MODAL GENERAL */
.modal-overlay {
  position: fixed;
  top: 0;
  right: -100%;
  width: 50%;
  height: 100%;
  background: white;
  transition: right 0.3s ease-in-out;
  border-radius: 10px 0 0 10px;
  display: flex;
  flex-direction: column;
}

.modal-overlay.show {
  right: 0;
  width: 40%;
  background: var(--bg-color);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0px 0px 10px 0px rgba(15, 15, 15, 0.1);
}

.modal-overlay.show::before {
  content: "";
  position: fixed;
  inset: 0;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  background: rgba(0, 0, 0, 0.1);
  z-index: -1;
}

.modal-blur-wrapper {
  position: fixed;
  inset: 0;
  display: none;
  overscroll-behavior: contain;
}

.modal-blur-wrapper.show {
  display: block;
}

.modal-blur-wrapper.show::before {
  content: "";
  position: fixed;
  inset: 0;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  background: rgba(0, 0, 0, 0.1);
  z-index: 0;
}

/* Clic fuera del panel (solo escritorio); en móvil el panel es 100% y no recibe clics útiles aquí */
.modal-backdrop-dismiss {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: transparent;
}

@media (min-width: 769px) {
  .modal-backdrop-dismiss {
    pointer-events: auto;
    cursor: default;
  }
}
.modal-content {
  padding: 8px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow-y: scroll;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-color);
}

.modal-confirmar-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: auto;
}

/* HEADER DEL MODAL */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
}

/* TITULO PRINCIPAL */
.modal-title-container {
  display: flex;
  align-items: center;
}

.modal-title {
  font-size: 20px;
  display: flex;
  gap: 0.2rem;
}

.modal-title i {
  padding-top: 1px;
  font-size: 1.4rem;
}

.modal-subtitle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-color-highlight);
  opacity: 0.85;
  padding: 6px 0 4px;
  margin: 0;
}

.modal-subtitle i {
  font-size: 1rem;
  padding-top: 0;
}

.close-btn {
  background: none;
  border: none;
  font-size: 2rem;
  margin-bottom: 1rem;
  cursor: pointer;
  margin-left: auto;
  color: var(--text-color);
}

.titulos-modal {
  text-align: left;
  font-family: Manuka;
  font-size: 2rem;
  color: var(--text-color);
}

/* CONTENIDO DEL MODAL */
.modal-body {
  padding: 5px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* FORMULARIO */
.form-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-grow: 1;
}

.input-group {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.input-group-principal {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.descripcion-grande {
  flex-grow: 1;
  height: 100%;
}

.bloque-principal {
  display: flex;
  flex-direction: column;
  min-height: 40vh;
}

.titulo-input {
  font-family: "Manuka", sans-serif;
  font-size: 3.5rem;
  text-transform: uppercase;
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  color: var(--text-color);
}

.opciones-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 10px;
}

.opciones-container .input-group {
  flex: 1;
}

/* INPUTS */
.input-field {
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  font-size: 14px;
  background: var(--bg-color);
  color: var(--text-color);
  font-family: "Public Sans";
}

/* DESCRIPCION MAS GRANDE */
.textarea-large {
  flex-grow: 1;
  resize: none;
  width: 100%;
  min-height: 10rem;
}

/* BOTONES DE ACCION */
.action-buttons {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-left: auto;
}

.action-buttons button {
  padding: 10px 14px;
  border: 1px solid;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  gap: 1px;
}

/* BOTON GUARDAR */
.save-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--text-color);
  font-weight: 500;
  padding: 12px 18px;
  border: 2px solid var(--bg-color3);
  border-radius: 10px;
  cursor: pointer;
  transition: filter 0.15s ease;
}
/* «Leer todos» del panel de feedbacks: versión compacta del save-btn. */
.save-btn.feedbacks-marcar-todos {
  padding: 7px 12px;
  gap: 6px;
  font-size: 13px;
  border-radius: 8px;
}
.save-btn.feedbacks-marcar-todos i {
  font-size: 14px;
}
.save-btn i {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: var(--text-color-highlight);
}

[data-theme=Dark] .save-btn {
  background-color: transparent;
}

@media (hover: hover) {
  .save-btn:hover {
    opacity: 1;
    filter: brightness(1.12);
  }
}
/* Los botones de accion (Configuracion, Chats, Notificaciones, Feedbacks...) usan
   .save-btn dentro de .action-buttons; forzamos el mismo borde 2px transparente que
   el resto de .save-btn para ganar a .action-buttons button (border: 1px solid). */
.action-buttons .save-btn {
  border: 2px solid var(--bg-color3);
}
/* BOTONES SECUNDARIOS */
.secondary-btn {
  background-color: #F5F5F5;
  border: 1px solid #CCCCCC;
  color: black;
}

/* CLASIFICACION */
.classification-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.classification-btn {
  border: 1px solid black;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
}

.classification-btn.active {
  background-color: black;
  color: white;
}

.color-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-top: 10px;
}

.color-container .column {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.color-picker {
  width: 100%;
  height: 44px;
  width: 136px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  background: var(--bg-color);
}

/* RESPONSIVIDAD */
@media (max-width: 768px) {
  .modal-overlay {
    width: 100%;
    right: -100%;
    z-index: 9999;
    border-radius: 0;
  }
  .modal-overlay.show {
    right: 0;
    width: 100%;
    border-radius: 0;
    box-shadow: none;
  }
  .modal-content {
    padding: 10px;
  }
  .modal-title {
    font-size: 1.25rem;
  }
  .input-field {
    font-size: 12px;
    padding: 10px;
  }
  .textarea-large {
    min-height: 120px;
  }
  .action-buttons {
    flex-direction: row;
    gap: 5px;
  }
  .action-buttons button {
    padding: 10px 10px 5px 10px;
  }
  .save-btn i {
    font-size: 18px;
  }
  .titulos-modal {
    font-size: 1.5rem;
    letter-spacing: 0.5px;
  }
}
/****************************/
/*******Modal confirmar******/
/****************************/
.modal-confirmar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  justify-content: center;
  align-items: center;
  overscroll-behavior: contain;
}

.modal-confirmar-content {
  background: #1a1a1a;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #333;
  text-align: left;
  width: 370px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-height: 80vh;
  z-index: 10001;
}

.modal-confirmar-content h2 {
  margin-bottom: 15px;
  margin-top: 0rem;
}

.btn-cancelar {
  background: red;
  color: white;
  padding: 8px 12px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.btn-confirmar {
  background: #20A350;
  color: white;
  padding: 8px 12px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.btn-confirmar-coach {
  background: var(--bg-color3);
  color: var(--text-color);
  font-size: 12px;
  padding: 2px 4px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 0.1rem;
}
.btn-confirmar-coach i {
  padding-top: 2px;
}

.coach-badge {
  display: inline-block;
  background-color: var(--text-color-highlight);
  color: var(--text-color-highlight-t);
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.75rem;
  width: 3.5rem;
}

/* ---------- Modal "Links de invitación" ---------- */
.invitacion-estado-cell {
  max-width: 14rem;
  overflow: hidden;
}

.coach-badge.invitacion-badge-usado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  max-width: 100%;
  min-width: 0;
  background-color: #28a745;
  padding: 2px 8px;
  vertical-align: middle;
}

.invitacion-badge-label {
  flex: 0 0 auto;
  font-weight: bold;
}

.invitacion-badge-email {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  opacity: 0.95;
}
.invitacion-badge-email::before {
  content: "· ";
  opacity: 0.75;
}

.coach-badge.invitacion-badge-expirado {
  width: auto;
  background-color: #dc3545;
  padding: 2px 10px;
}

.coach-badge.invitacion-badge-activo {
  width: auto;
  background-color: var(--text-color-highlight);
  padding: 2px 10px;
}

.invitacion-generar-btn {
  margin: 4px 0 14px;
  padding: 14px 16px;
  border-radius: 10px;
  letter-spacing: 0.2px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  transition: transform 0.08s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.invitacion-generar-btn i {
  font-size: 18px;
}
.invitacion-generar-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.invitacion-generar-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.invitacion-generar-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.badge-rol {
  display: inline-block;
  font-weight: 700;
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 8px;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge-rol.creador {
  background-color: var(--text-color-highlight-light);
  color: white;
  border: 1px solid var(--text-color-highlight);
}
.badge-rol.coach {
  background-color: var(--text-color-highlight);
  color: var(--text-color-highlight-t);
  border: 1px solid var(--text-color-highlight);
}
.badge-rol.atleta {
  background-color: transparent;
  color: var(--text-color);
  border: 1px solid var(--bg-color4);
}

.visibilidad-chip {
  display: inline-block;
  font-weight: 700;
  font-size: 0.7rem;
  padding: 3px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.4;
}
.visibilidad-chip.publica {
  background-color: var(--bg-alert);
  color: var(--tabla-text-highlight);
  border: 1px solid var(--text-color-highlight);
}
.visibilidad-chip.privada {
  background-color: #632121;
  color: #FFFFFF;
  border: 1px solid #FF5757;
}

@media (hover: hover) {
  .btn-cancelar:hover, .btn-confirmar:hover {
    opacity: 0.8;
  }
}
/* Contenedor de las sugerencias */
.suggestions {
  margin-top: -0.6rem;
  background: white;
  border: 1px solid #CCCCCC;
  border-radius: 4px;
  max-height: 241px; /* Limita la altura para el scroll */
  overflow-y: auto; /* Activa el scroll cuando sea necesario */
  width: 102%;
  z-index: 1000;
  display: flex;
  flex-direction: column; /* Asegura que los elementos sean bloques */
  gap: 5px; /* Espaciado entre elementos */
  padding: 5px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

/* Elemento individual de la sugerencia */
.suggestions div {
  padding: 10px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s ease-in-out;
  border-bottom: 1px solid #DDDDDD;
}

.suggestions div:last-child {
  border-bottom: none;
}

@media (hover: hover) {
  .suggestions div:hover {
    background: #F5F5F5;
  }
}
.suggestions:empty {
  display: none;
}

.sugerencia-item {
  padding: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}

@media (hover: hover) {
  .sugerencia-item:hover {
    background-color: #DDDDDD;
  }
}
.sugerencia-activa {
  background-color: #DDDDDD;
}

.contenedor-eliminar-plantilla {
  background: none;
  color: red;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease-in-out;
  padding: 5px;
  border-radius: 50%;
  min-width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (hover: hover) {
  .contenedor-eliminar-plantilla:hover {
    transform: scale(1.5);
  }
}
/*Modal ppal*/
.modal-ppal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-ppal-content {
  background: var(--bg-color2);
  padding: 20px;
  border-radius: 8px;
  width: 40%;
  max-width: 500px;
  min-width: 300px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  animation: fadeIn 0.3s ease-in-out;
}

/* Para evitar que el clic fuera del modal lo cierre accidentalmente */
.modal-ppal-content {
  position: relative;
}

/* Animacin de entrada */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.modal-confirmar-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.modal-confirmar-opciones {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.imagen-modal {
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.modal-imagen-container {
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 80vh;
}

.modal-imagen {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.toggle-buttons {
  display: flex;
  gap: 5px;
}

.toggle-btn {
  padding: 8px 12px;
  border: 1px solid #CCCCCC;
  border-radius: 8px;
  background: var(--bg-color);
  cursor: pointer;
  color: var(--text-color);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1.2;
  box-sizing: border-box;
}
.toggle-btn i {
  font-size: 18px;
}

.añadir-recurso-btn {
  padding: 8px 12px 2px 12px;
  border: 1px solid #CCCCCC;
  border-radius: 8px;
  background: var(--bg-color);
  cursor: pointer;
  color: var(--text-color);
  transition: all 0.3s ease;
  display: flex;
  margin-top: 10px;
  gap: 5px;
}
.añadir-recurso-btn i {
  font-size: 18px;
}

.btn-tarifa {
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.2rem 0.4rem;
  border-radius: 10px;
  background-color: var(--bg-color);
  color: var(--text-color);
  cursor: pointer;
  transition: background 0.2s;
}
.btn-tarifa i {
  padding-top: 3.5px;
}

@media (hover: hover) {
  .btn-tarifa:hover {
    background: var(--text-color-highlight);
    color: var(--text-color-highlight-t);
  }
}
.toggle-btn.activo {
  background: var(--text-color-highlight);
  color: black;
  border-color: var(--text-color-highlight);
}

.divider {
  border: none;
  height: 1px;
  background-color: #DDDDDD;
  margin: 15px 0;
}

/* En .perfil-container (flex column con align-items:center) los hr colapsan
   a ancho 0; forzamos el ancho completo para que se vean como separadores. */
.perfil-container > .divider {
  width: 100%;
}

/* FAQ */
.faq-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px 16px;
  font-family: "Public Sans", sans-serif;
}
.faq-header {
  margin-bottom: 8px;
}
.faq-subtitle {
  color: var(--text-color);
  opacity: 0.6;
  font-size: 0.95rem;
  margin-top: 4px;
}
.faq-section {
  margin-bottom: 24px;
}
.faq-section-title {
  font-family: "Public Sans", sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-color-highlight);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--bg-color3);
}
.faq-item {
  background: var(--bg-color);
  border: 1px solid var(--bg-color3);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.faq-question {
  font-family: "Public Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 6px;
}
.faq-answer {
  font-size: 0.88rem;
  color: var(--text-color);
  opacity: 0.75;
  margin: 0;
  line-height: 1.5;
}
.faq-details {
  margin-top: 10px;
}
.faq-details summary {
  font-size: 0.85rem;
  color: var(--text-color-highlight);
  cursor: pointer;
  font-weight: 500;
}
.faq-steps {
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 0.85rem;
  color: var(--text-color);
  opacity: 0.8;
  line-height: 1.6;
}

.input-group-modal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
}

.input-label {
  font-weight: bold;
  font-size: 14px;
  color: #444444;
}

.input-component {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #E3E7EB;
  border-radius: 5px;
  background: #F5F5F5;
  margin-bottom: 8px;
}

.textarea-component {
  min-height: 80px;
  resize: none;
  font-family: "Public Sans";
}

.btn-sin-estilo {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.boton-confirmar-modal {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 12px 10px;
  background-color: var(--text-color-highlight);
  color: var(--text-color-highlight-t);
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.boton-confirmar-modal i {
  font-size: 18px;
}

.boton-confirmar-modal-eliminar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 12px;
  background-color: #ff5757;
  color: var(--text-color-highlight-t);
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.boton-confirmar-modal-eliminar .boton-confirmar-modal i {
  font-size: 18px;
}

.boton-cancelar-modal {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 12px;
  background: #2a2a2a;
  color: #e0e0e0;
  font-size: 16px;
  font-weight: bold;
  border: 1px solid #333;
  border-radius: 8px;
  cursor: pointer;
}

.ranking-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: none;
}

.ranking-wrapper {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  margin-top: 15px;
}

.ranking-title {
  font-weight: bold;
  margin-bottom: 5px;
  margin-top: 0px;
}

.ranking-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  background: var(--bg-color);
  padding: 10px;
  border-radius: 8px;
}

.input-field {
  flex: 1;
  padding: 8px;
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  box-sizing: border-box;
  gap: 3rem;
}

.input-resultado {
  flex: 1;
  padding: 8px;
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  box-sizing: border-box;
  margin-left: 1rem;
}

.btn-add-ranking {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0);
  color: white;
  border: 1px solid white;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  margin-top: 10px;
}
.btn-add-ranking i {
  font-size: 15px;
  padding: 2px 2px 0px 0px;
}

.btn-remove-ranking {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-color);
}

.ranking-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.ranking-label {
  color: var(--text-color);
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
}

.ranking-selects {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  width: 100%;
}

.ranking-field {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.alert-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  padding: 14px 18px;
  position: fixed;
  bottom: max(20px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  width: max-content;
  max-width: min(92vw, 460px);
  border-radius: 14px;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.35;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.alert-modal.success {
  background-color: var(--text-color-highlight-light);
  color: var(--text-color-highlight);
}

/*.alert-modal.success {
    background-color: var(--Accent-light, $wb_yellow);
    color: black;
}*/
.alert-modal.error {
  background-color: var(--Accent-light, #dc2626);
  color: white;
}

.alert-modal.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  z-index: 20000;
}

.alert-modal.hide {
  display: none;
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
}

.alert-blue {
  background-color: #3498db !important;
  color: white;
}

.alert-content {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 24px;
}
.alert-content i {
  font-size: 1.4rem;
  flex-shrink: 0;
  line-height: 1;
}

.alert-message {
  flex: 1;
  min-width: 0;
  text-align: left;
  word-break: break-word;
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .alert-modal {
    max-width: calc(100vw - 24px);
    padding: 12px 14px;
    font-size: 0.9rem;
  }
  .alert-content i {
    font-size: 1.25rem;
  }
}

.icono-default {
  font-size: 1.5rem;
  margin-right: 10px;
}

.tabla-atletas {
  height: 100%;
  border-radius: 10px;
}

.tabla-atleta-header, .fila-atleta {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #333333;
  gap: 10px;
  cursor: pointer;
}

.tabla-atleta-header {
  font-weight: bold;
  text-transform: uppercase;
}

.columna-atleta, .columna-fecha, .columna-estado {
  flex: 1;
  text-align: left;
}

.columna-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-start;
  align-items: center;
}

.columna-acciones-btn {
  flex: 1;
  text-align: right;
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}

.columna-atleta {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

.imagen-perfil-atletas {
  width: 2em;
  height: 2em;
  min-width: 2em;
  min-height: 2em;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #686868;
}

.btn-eliminar-atleta {
  background: none;
  border: none;
  color: #dc2626;
  cursor: pointer;
  font-size: 20px;
  padding-top: 5px;
}

[class^=icon-]::before,
[class*=" icon-"]::before {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

.lista-recursos {
  padding: 5px 0;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 14rem;
  overflow-y: scroll;
}

.recurso-item {
  padding: 8px 12px;
  background-color: var(--bg-color);
  color: var(--text-color);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.2s ease;
  cursor: pointer;
  font-weight: 500;
}

.recurso-item i {
  color: #dc2626;
  font-size: 18px;
}

@media (hover: hover) {
  .recurso-item:hover {
    background-color: var(--bg-color2);
  }
}
.lista-recursos + input,
.input-recurso-buscador {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #333333;
  border-radius: 6px;
  margin-top: 10px;
  box-sizing: border-box;
  background-color: var(--bg-color3);
  color: var(--text-color);
}

.lista-recursos p {
  text-align: center;
  color: #888888;
  margin-top: 10px;
}

.tags-recursos-contenedor {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding: 5px 0;
  max-width: 100%;
  word-wrap: break-word;
}

.tag-recurso {
  max-width: 100%;
  background-color: var(--bg-color);
  color: black;
  padding: 8px 8px 3px 10px;
  border: 1px solid #CCCCCC;
  border-radius: 8px;
  display: flex;
  font-size: 0.85rem;
  gap: 6px;
  position: relative;
}
.tag-recurso i {
  color: var(--text-color);
  font-size: 18px;
}
.tag-recurso hover {
  transform: scale(1.03);
}

.tag-recurso-modal {
  background-color: var(--text-color-highlight);
  color: var(--text-color-highlight-t);
  padding: 8px 12px 5px 12px;
  border: 1px solid #CCCCCC;
  border-radius: 8px;
  display: flex;
  font-size: 0.85rem;
  gap: 2px;
  position: relative;
  transform: scale(1.02);
}
.tag-recurso-modal i {
  color: var(--text-color-highlight-t);
  font-size: 15px;
  padding-top: 2px;
}

.tag-link {
  text-decoration: none;
  color: var(--text-color);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag-link-modal {
  text-decoration: none;
  color: var(--text-color-highlight-t);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-eliminar-tag {
  background: none;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  margin-left: 4px;
}

.btn-eliminar-tag-modal {
  background: none;
  border: none;
  color: var(--text-color-highlight-t);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  margin-left: 4px;
}

.tag-usuario-personalizado {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--bg-color4);
  border-radius: 20px;
  background: transparent;
  font-size: 0.85rem;
}

/* Chip clicable de "sugerencias" (atletas más elegidos): reutiliza el pill de
   tag-usuario-personalizado pero como acción para añadir/seleccionar. */
.sugerencia-usuario-chip {
  cursor: pointer;
  color: var(--text-color);
  transition: filter 0.15s ease;
}
.sugerencia-usuario-chip:hover {
  filter: brightness(1.15);
}
.sugerencia-usuario-chip .sugerencia-usuario-add {
  margin-left: 2px;
  opacity: 0.7;
  font-weight: 600;
}

.tag-usuario-foto {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  border-radius: 50%;
  object-fit: cover;
}

.tag-usuario-nombre {
  color: var(--text-color);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag-recurso-thumb {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  border-radius: 50%;
  background: var(--bg-color3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tag-recurso-thumb i {
  font-size: 11px;
  color: var(--text-color);
}

.tag-recurso-thumb-img {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  border-radius: 50%;
  object-fit: cover;
}

.nombreMBuscador {
  display: flex;
  justify-content: space-between;
  color: var(--text-color);
  background: var(--bg-color);
  width: 100%;
  padding: 1rem;
  border-bottom: 2px solid var(--bg-color3);
  gap: 0.2rem;
}

.contenedor-buscador {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
}

.input-field-buscador {
  flex: 1;
  padding: 8px;
  border: 1px solid #333333;
  border-radius: 5px;
  box-sizing: border-box;
  background-color: var(--bg-color3);
  color: var(--text-color);
}

.input-busqueda {
  background-color: var(--bg-color3);
  border: none;
  color: var(--text-color);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 14px;
  width: 100%;
  max-width: 220px;
}

.tabla-plantillas,
.tabla-plantillas-activos {
  width: 100%;
  color: var(--text-color);
  background-color: transparent;
  border-collapse: separate;
  border-spacing: 0 8px;
}

.tabla-header {
  color: var(--text-color);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.6;
}

.tabla-header th {
  text-align: left;
  padding: 0 12px 4px 12px;
  font-weight: 600;
}

.tabla-header th:last-child {
  text-align: center;
}

.no-desborde {
  overflow: hidden;
  text-overflow: ellipsis;
}

.tabla-fila {
  background-color: var(--bg-color3);
  cursor: pointer;
  transition: background 0.2s ease-in-out;
}

@media (hover: hover) {
  .tabla-fila:hover {
    background-color: var(--bg-hover);
  }
}
.tabla-fila td {
  padding: 12px;
  vertical-align: middle;
}

.tabla-fila td:first-child {
  border-left: 4px solid var(--text-color-highlight);
  border-radius: 8px 0 0 8px;
}

.tabla-fila td:last-child {
  text-align: center;
  border-radius: 0 8px 8px 0;
}

.text-fecha {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.historial-bloques-modal {
  height: 100%;
  padding: 10px;
}

.historial-bloques-modal .bloque-historial-item {
  margin-bottom: 15px;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid var(--text-color);
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
}

.comentario-completo-modal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.comentario-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Modal detalle de resultado rediseñado */
.modal-body:has(.resultado-detalle-modal) {
  min-height: 0;
}

.resultado-detalle-modal {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-height: 100%;
}

.resultado-detalle-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.5rem;
  flex-shrink: 0;
}

.resultado-detalle-foto {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.resultado-detalle-user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.resultado-detalle-user-info .nombre-atleta {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.resultado-detalle-user-info .rpe-badge {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 4px;
  width: fit-content;
}

.resultado-detalle-header .resultado-feedback-btn,
.resultado-feedback-btn {
  width: auto;
  min-width: 40px;
  height: auto;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-color-highlight);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
  box-shadow: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}

.resultado-detalle-header .resultado-feedback-btn:hover,
.resultado-feedback-btn:hover {
  opacity: 1;
  background: rgba(163, 230, 53, 0.1);
}

.resultado-feedback-btn i {
  font-size: 1rem;
  color: inherit;
}

.resultado-detalle-contenido {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 0.5rem;
  flex-shrink: 0;
}

.resultado-detalle-contenido .comentario-modal {
  margin-bottom: 0;
}

.resultado-ver-media-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border: none;
  background: none;
  color: var(--text-color-highlight);
  font-size: 0.82rem;
  cursor: pointer;
  margin-top: 4px;
}

.resultado-ver-media-btn:hover {
  opacity: 0.7;
}

.resultado-texto-truncado {
  max-height: 4.5em;
  overflow: hidden;
}

.resultado-ver-mas {
  background: none;
  border: none;
  color: var(--text-color-highlight);
  font-size: 0.78rem;
  cursor: pointer;
  padding: 2px 0;
}

.resultado-detalle-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.resultado-detalle-label {
  color: var(--text-color);
  font-size: 0.85rem;
  font-weight: 500;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.resultado-detalle-label i {
  font-size: 0.9rem;
  opacity: 0.7;
}

/* Reacciones en resultados */
.resultado-reacciones-section {
  padding-top: 0.25rem;
  margin-top: 0;
}

.resultado-reacciones-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.resultado-add-reaction-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.2);
  background: transparent;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  line-height: 1;
  padding: 0;
}

.resultado-add-reaction-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.35);
}

/* Emoji picker para resultados */
.resultado-emoji-picker-wrapper {
  position: relative;
}

.resultado-emoji-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 999998;
}

.resultado-emoji-picker {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  z-index: 999999;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 12px;
  width: 280px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  overflow: hidden;
}

/* Título fijo de comentarios */
.resultado-comentarios-titulo {
  flex-shrink: 0;
  margin: 0;
  margin-top: 15px;
  margin-bottom: 15px;
}

.resultado-sin-comentarios {
  text-align: center;
  color: rgba(255,255,255,0.3);
  font-size: 0.85rem;
  padding: 2rem 0;
  margin: auto 0;
}

/* Hilo privado de feedback coach↔atleta (separado de los comentarios sociales) */
.hilo-feedback-privado {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  align-self: stretch;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hilo-feedback-privado .resultado-detalle-label,
.hilo-feedback-privado .resultado-comentario-input {
  margin: 0;
}

/* Vista "fichas": agrupado por día → bloque */
.ficha-dia {
  margin-bottom: 18px;
}

.ficha-dia-titulo {
  margin: 0 0 8px;
  text-transform: uppercase;
}

.ficha-bloque {
  margin-bottom: 12px;
}

.ficha-bloque-titulo {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-color-highlight);
  margin: 0 0 6px;
  padding-left: 4px;
}

.ficha-resultado {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 14px;
  margin-bottom: 10px;
  cursor: default;
}

.ficha-resultado.is-leido {
  opacity: 0.85;
}

.ficha-resultado-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.ficha-resultado-bloque {
  margin: 0 !important;
}

.ficha-estado-leido {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-color-highlight);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.ficha-marcar-leido {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-color);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.ficha-marcar-leido:hover {
  background: var(--text-color-highlight);
  color: #fff;
}

.ficha-bloque-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.ficha-resultado-valor {
  align-self: center;
  color: var(--text-color-highlight);
}

.ficha-resultado-bloque-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
  flex-shrink: 0;
}

.resultado-detalle-modal .calc-tabs {
  margin-bottom: 20px;
}

/* Solo este modal: todo el contenido scrollea junto (usando el scroll de
   .modal-content) y solo el input queda fijo abajo. No afecta a otros modales.
   El hilo de feedback se "disuelve" (display:contents) para que su lista e input
   se comporten como hijos directos del modal: la lista fluye y el input se ancla. */
.resultado-detalle-modal > .hilo-feedback-privado {
  display: contents;
}

.resultado-detalle-modal .resultado-comentarios-section {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}

.resultado-detalle-modal .resultado-comentario-input {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  z-index: 2;
  background: var(--bg-color);
  padding-bottom: 4px;
}

/* Lista de fichas (Atleta - Resultado - Día - Sesión - Bloque) */
.ficha-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.ficha-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  border: none;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-color);
  transition: background 0.15s ease;
}

.ficha-fila:hover {
  background: rgba(255, 255, 255, 0.08);
}

.ficha-fila-foto {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.ficha-fila-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

.ficha-fila-atleta {
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ficha-fila-meta {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ficha-fila-resultado {
  font-weight: 700;
  color: var(--text-color-highlight);
  font-size: 0.9rem;
  flex-shrink: 0;
}

.ficha-fila-contador {
  flex-shrink: 0;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--text-color-highlight);
  background: rgba(255, 255, 255, 0.08);
}

.ficha-fila-chevron {
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

/* Ficha de atleta (detalle) */
.ficha-detalle-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.ficha-volver {
  border: none;
  background: transparent;
  color: var(--text-color);
  font-size: 1.1rem;
  padding: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ficha-volver:hover {
  color: var(--text-color-highlight);
}

.ficha-detalle-atleta {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Hilo de comentarios en resultado */
.resultado-comentarios-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 50%;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.resultado-comentarios-section::-webkit-scrollbar {
  width: 0;
  display: none;
}

.resultado-comentarios-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
}

.resultado-comentario-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.resultado-comentario-foto {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.resultado-comentario-body {
  flex: 1;
  min-width: 0;
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 6px 10px;
}

.resultado-comentario-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.resultado-comentario-nombre {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-color);
}

.resultado-comentario-fecha {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
}

.resultado-comentario-texto {
  font-size: 0.85rem;
  color: var(--text-color);
  margin: 2px 0 0;
  word-break: break-word;
}

.resultado-comentario-delete {
  background: none;
  border: none;
  color: rgba(255,255,255,0.25);
  cursor: pointer;
  padding: 2px;
  font-size: 0.7rem;
  flex-shrink: 0;
  transition: color 0.15s;
}

.resultado-comentario-delete:hover {
  color: #e74c3c;
}

.resultado-comentario-input {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  padding: 4px 4px 4px 4px;
  flex-shrink: 0;
  margin-top: 8px;
}

.resultado-comentario-input input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-color);
  font-size: 0.85rem;
  padding: 6px 4px;
  min-width: 0;
}

.resultado-comentario-input input::placeholder {
  color: rgba(255,255,255,0.35);
}

.resultado-comentario-attach-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 1rem;
  padding: 0;
  transition: color 0.15s;
}

.resultado-comentario-attach-btn:hover {
  color: rgba(255,255,255,0.7);
}

.resultado-comentario-send {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-color-highlight);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 0.95rem;
  transition: opacity 0.15s;
}

.resultado-comentario-send:disabled {
  opacity: 0.3;
  cursor: default;
}

.resultado-comentario-send:not(:disabled):hover {
  opacity: 0.85;
}

.resultado-comentario-media {
  margin-top: 4px;
}

.resultado-comentario-img {
  max-width: 100%;
  max-height: 200px;
  border-radius: 8px;
  object-fit: contain;
  cursor: pointer;
}

.calc-container.top {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-height: 0;
}

.calc-controls {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: end;
}

.calc-units {
  display: flex;
  gap: 8px;
  height: 38px;
}

.unit-pill {
  padding: 8px 12px;
  border-radius: 15px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-color);
  cursor: pointer;
  line-height: 1;
}

.unit-pill.active {
  background: var(--text-color-highlight);
  color: #000;
  border-color: transparent;
}

.calc-actions {
  display: flex;
  justify-content: flex-end;
}

.calc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 10px;
  flex: 1;
  min-height: 0;
}

.calc-cell {
  background: var(--bg-color3);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.calc-value {
  font-size: 1.15rem;
  line-height: 1;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
  color: var(--text-color-highlight);
}

.calc-percent {
  opacity: 0.8;
  font-size: 0.85rem;
  color: var(--text-color);
}

/* Resultados de las herramientas de carrera en formato lista (estilo Strava). */
.calc-run-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.calc-run-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-color3);
  border-radius: 12px;
  padding: 11px 14px;
}

.calc-run-row__icon {
  font-size: 1.05rem;
  color: var(--text-color-highlight);
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.calc-run-row__label {
  flex: 1;
  min-width: 0;
  color: var(--text-color);
  font-size: 0.95rem;
}

.calc-run-row__value {
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-color-highlight);
  font-weight: 600;
}

/* Descripción secundaria dentro de una fila (p. ej. para qué sirve una zona). */
.calc-run-row__sub {
  display: block;
  font-size: 0.72rem;
  opacity: 0.6;
  margin-top: 1px;
}

/* Leyenda de colores de intensidad (máximo → muy ligero). */
.calc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  font-size: 0.75rem;
  color: var(--text-color);
  opacity: 0.9;
}

.calc-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.calc-legend__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* Distintivo del valor VDOT. */
.calc-vdot-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg-color3);
  color: var(--text-color-highlight);
}

.calc-vdot-badge__value {
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Selector de herramientas/toggles del tab Carrera: estilo segmentado, distinto de los chips de PR. */
.calc-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.calc-seg__item {
  border: none;
  background: transparent;
  color: var(--text-color);
  opacity: 0.6;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
}

@media (hover: hover) {
  .calc-seg__item:hover {
    opacity: 1;
  }
}

.calc-seg__item.active {
  background: var(--text-color-highlight);
  color: #06232a;
  opacity: 1;
}

/* Selectores modernos SOLO dentro de la calculadora (pestañas Peso/Carrera). */
.calc-container .perfil-input-text,
.calc-container .perfil-input-select {
  background: var(--bg-color3);
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text-color-highlight);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s, background 0.15s;
}

.calc-container .perfil-input-text:hover,
.calc-container .perfil-input-select:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

.calc-container .perfil-input-text:focus,
.calc-container .perfil-input-select:focus {
  border-color: var(--text-color-highlight);
  background: var(--bg-color4);
}

/* Flecha propia para los desplegables de la calculadora. */
.calc-container .perfil-input-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 34px;
  cursor: pointer;
}

.calc-prs-vacio {
  opacity: 0.7;
  font-size: 0.9rem;
  padding: 10px 0;
}

.calc-prs-toolbar {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}
.calc-prs-trigger--flex {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}
.calc-prs-add-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  padding: 0;
  box-sizing: border-box;
  /* Mismo acento sólido que .unit-pill.active (kg / lb) */
  background: var(--text-color-highlight);
  border: 1px solid transparent;
  border-radius: 12px;
  color: #000;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
  box-shadow: none;
}
.calc-prs-add-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.calc-prs-add-btn:not(:disabled):active {
  transform: scale(0.97);
  filter: brightness(0.92);
}
.calc-prs-add-btn i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.3rem;
  height: 1.3rem;
  font-size: 1.1rem;
  line-height: 1;
  color: inherit;
}
@media (hover: hover) {
  .calc-prs-add-btn:not(:disabled):hover {
    filter: brightness(1.1);
  }
}
.calc-prs-hint {
  font-size: 0.85rem;
  opacity: 0.75;
  margin: 4px 0 0 0;
  line-height: 1.35;
}
.calc-prs-modal-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* PRs en %: un solo flujo (wrap): chips, “Ver más” y + en la misma sucesión que el último chip de la fila */
.calc-prs-compact {
  width: 100%;
  margin: 0 0 10px 0;
}
.calc-prs-compact--empty {
  margin-bottom: 8px;
}
.calc-prs-quick-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 6px 8px;
  width: 100%;
  min-width: 0;
}
.calc-prs-quick-flow .pr-chip,
.calc-prs-quick-flow .calc-prs-ver-mas {
  flex: 0 0 auto;
}
.calc-prs-ver-mas {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 8px 4px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-color-highlight);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  line-height: 1.2;
  white-space: nowrap;
}
/* Sin PRs aún: CTA alineada con .btn-nuevo */
.calc-prs-empty-cta {
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
}

/* Modal PR: pills con wrap (como .calc-prs-modal), sin scroll horizontal; “Añadir PR” debajo */
.calc-prs-modal-pills-block {
  width: 100%;
  min-width: 0;
  margin: 0 0 6px 0;
}
.calc-prs-modal-pills-block .calc-prs-modal {
  width: 100%;
  min-width: 0;
}
.calc-prs-anadir-below {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  margin: 0 0 12px 0;
  padding: 10px 14px;
  font-size: 0.9rem;
  line-height: 1.2;
  max-width: 100%;
  box-sizing: border-box;
}
/* Mismo lenguaje que .btn-nuevo en el resto de la app */
.calc-prs-anadir-toggle {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  margin-bottom: 12px;
}
.calc-prs-anadir-toggle:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* scroll vertical alternativo (otros contextos) */
.calc-prs-pills-scroll {
  max-height: 11rem;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 2px 0;
  padding: 0 0 2px 0;
}
.calc-prs-pills-scroll .calc-prs-modal {
  margin: 0;
  padding: 0;
}
/* Resumen o formulario “Nuevo” → añadir PR, luego tabla */
.calc-prs-nuevo-box + .calc-prs-table-scroll {
  margin-top: 8px;
}
.calc-prs-nuevo-box {
  margin-top: 12px;
  padding: 14px 14px 12px;
  background: var(--bg-color3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.calc-prs-nuevo-kicker {
  margin: 0 0 8px 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-color-highlight);
  opacity: 0.9;
}
.calc-prs-nuevo-box .perfil-input-container label {
  font-size: 0.88rem;
  opacity: 0.9;
}
.calc-prs-nuevo-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  width: 100%;
}
.calc-prs-nuevo-actions .boton-cancelar-modal,
.calc-prs-nuevo-actions .boton-confirmar-modal {
  width: 100%;
}

.calc-prs-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-color3);
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text-color);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-align: left;
}

.calc-prs-trigger:hover {
  border-color: var(--text-color-highlight);
}

.calc-prs-trigger-icon {
  font-size: 1rem;
  opacity: 0.7;
  color: var(--text-color-highlight);
}

.calc-prs-placeholder {
  opacity: 0.6;
  font-size: 0.9rem;
  flex: 1;
}

.calc-prs-trigger-chevron {
  margin-left: auto;
  font-size: 0.75rem;
  opacity: 0.5;
}

.calc-prs-modal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}

.pr-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 20px;
  background-color: var(--text-color-highlight-light);
  color: white;
  border: 1px solid var(--text-color-highlight);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  filter: brightness(0.6);
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.pr-chip.active {
  filter: brightness(1);
}

@media (hover: hover) {
  .pr-chip:hover {
    opacity: 0.85;
  }
}

.pr-chip-name {
  font-weight: 600;
  font-size: 0.8rem;
  color: white;
}

.pr-chip-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

@media (max-width: 768px) {
  .pr-chip {
    padding: 4px 11px 4px 12px;
    gap: 6px;
    font-size: 0.72rem;
    line-height: 1.25;
    border-radius: 16px;
  }
  .pr-chip-name {
    font-size: 0.72rem;
  }
  .pr-chip-value {
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    font-size: 0.62rem;
  }
}

@media (max-width: 480px) {
  .pr-chip {
    padding: 3px 8px 3px 9px;
    gap: 5px;
    font-size: 0.68rem;
    line-height: 1.2;
    border-radius: 12px;
  }
  .pr-chip-name {
    font-size: 0.68rem;
  }
  .pr-chip-value {
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    font-size: 0.58rem;
  }
}

.calc-prs-evolution {
  margin: 0 0 10px 0;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--text-color);
  opacity: 0.9;
  padding: 8px 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, var(--bg-color3) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.calc-prs-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 0 0 4px 0;
}

.calc-prs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  min-width: 320px;
}

.calc-prs-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-color);
  opacity: 0.75;
  padding: 8px 6px 10px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}

.calc-prs-th-actions {
  text-align: right;
  width: 1%;
}

.calc-prs-tr {
  cursor: pointer;
  transition: background 0.12s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.calc-prs-tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

.calc-prs-tr.selected {
  background: rgba(255, 255, 255, 0.07);
}

.calc-prs-tr td {
  padding: 10px 6px;
  vertical-align: middle;
}

.calc-prs-name {
  font-weight: 600;
  line-height: 1.3;
}

.calc-prs-valor,
.calc-prs-fecha {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.calc-prs-input-inline {
  max-width: 100px;
  padding: 6px 8px;
  font-size: 0.9rem;
}

.calc-prs-td-actions {
  text-align: right;
  width: 1%;
  white-space: nowrap;
}

.calc-prs-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.calc-prs-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: var(--bg-color3);
  color: var(--text-color);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  transition: border-color 0.12s, background 0.12s;
}

.calc-prs-iconbtn:hover {
  border-color: var(--text-color-highlight);
}

.calc-prs-iconbtn--danger {
  color: #f07777;
  border-color: rgba(240, 119, 119, 0.35);
}

.calc-prs-mini-ok,
.calc-prs-mini-cancel {
  display: inline-block;
  padding: 6px 10px;
  font-size: 0.8rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  line-height: 1.2;
}

.calc-prs-mini-ok {
  background: var(--text-color-highlight);
  color: #1a1a1a;
  font-weight: 600;
  border-color: transparent;
}

.calc-prs-mini-cancel {
  background: transparent;
  color: var(--text-color);
}

/* Tabla PR: en móvil, filas en tarjeta; sin scroll horizontal */
@media (max-width: 640px) {
  .calc-prs-table-scroll {
    overflow-x: visible;
  }

  .calc-prs-table.calc-prs-table--responsive {
    min-width: 0;
    display: block;
  }

  .calc-prs-table--responsive thead {
    display: none;
  }

  .calc-prs-table--responsive tbody,
  .calc-prs-table--responsive tr,
  .calc-prs-table--responsive td {
    display: block;
  }

  .calc-prs-table--responsive .calc-prs-tr {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 2px 10px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .calc-prs-table--responsive .calc-prs-tr.selected {
    border-color: var(--text-color-highlight);
    background: rgba(255, 255, 255, 0.05);
  }

  .calc-prs-table--responsive .calc-prs-tr td {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px 10px;
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    padding: 7px 0;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .calc-prs-table--responsive .calc-prs-tr td:last-child {
    border-bottom: none;
  }

  .calc-prs-table--responsive .calc-prs-tr td::before {
    content: attr(data-label);
    flex: 0 0 min(42%, 7.5rem);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.35;
    opacity: 0.8;
    padding-top: 2px;
  }

  .calc-prs-table--responsive .calc-prs-tr td > * {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
  }

  .calc-prs-table--responsive .calc-prs-td--hide-narrow {
    display: flex !important;
  }

  /* Fila acciones: misma alineación que EJERCICIO/PESO — etiqueta al inicio, iconos al final (sin desplazar “ACCIONES” hacia dentro) */
  .calc-prs-table--responsive .calc-prs-td-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100% !important;
    min-width: 0;
    white-space: normal;
    text-align: left;
  }
  .calc-prs-table--responsive .calc-prs-td-actions::before {
    flex: 0 0 min(42%, 7.5rem);
    min-width: 0;
    text-align: left;
    align-self: flex-start;
    padding-top: 2px;
  }
  .calc-prs-table--responsive .calc-prs-td-actions > * {
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
    text-align: right;
    width: auto;
    margin-left: auto;
  }
  .calc-prs-table--responsive .calc-prs-td-actions .calc-prs-actions {
    display: inline-flex;
    flex-shrink: 0;
    justify-content: flex-end;
    text-align: right;
    width: auto;
  }

  .calc-prs-table--responsive .calc-prs-name {
    text-align: right;
    word-break: break-word;
  }

  .calc-prs-table--responsive .calc-prs-fecha,
  .calc-prs-table--responsive .calc-prs-valor {
    white-space: normal;
  }

  .calc-prs-input-inline {
    max-width: none;
    width: 100%;
  }
}

.estadisticas-modal {
  padding: 10px 0;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-color);
  width: 100%;
}

.estadisticas-modal .stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--bg-color3);
  gap: 12px;
}

.estadisticas-modal .stat-row:last-child {
  border-bottom: none;
}

.estadisticas-modal .stat-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--bg-text-grises);
  white-space: nowrap;
}
.estadisticas-modal .stat-label i {
  font-size: 16px;
  color: var(--text-color);
}

.estadisticas-modal .stat-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-color);
  text-align: right;
  min-width: 60px;
  flex-shrink: 0;
}
.estadisticas-modal .stat-value.highlight {
  color: var(--text-color-highlight);
  font-size: 18px;
}

.estadisticas-modal .stat-pct {
  font-size: 12px;
  font-weight: 400;
  color: var(--bg-text-grises);
  margin-left: 4px;
}

.stat-best-athlete {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0 8px 28px;
  font-size: 13px;
  color: var(--bg-text-grises);
  border-bottom: 1px solid var(--bg-color3);
}

.stat-athlete-photo {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.stat-personal .stat-label {
  color: var(--text-color);
  font-weight: 600;
}

.stat-comparativa {
  text-align: center;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--bg-color3);
  color: var(--text-color-highlight);
  font-weight: 700;
  margin-top: 8px;
}

.stats-filtros .badge-genero {
  padding: 4px 10px;
  font-size: 12px;
}

.stats-subsection-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 4px;
  margin-top: 4px;
}
.stats-subsection-label i {
  font-size: 16px;
}

.tabla-atletas .col-estado {
  width: 70px;
}
.tabla-atletas .col-rol {
  width: 90px;
}
.tabla-atletas .col-acciones {
  width: 110px;
}
.tabla-atletas .tabla-fila {
  height: 50px;
}

@media (max-width: 500px) {
  .tabla-atletas .tabla-fila td {
    padding: 8px 4px;
    font-size: 0.8rem;
  }
  .tabla-atletas .tabla-header th {
    padding: 0 4px 4px 4px;
    font-size: 0.65rem;
  }
  .tabla-atletas .col-estado {
    width: 50px;
  }
  .tabla-atletas .col-rol {
    width: 65px;
  }
  .tabla-atletas .col-acciones {
    width: 80px;
  }
  .tabla-atletas .col-estado span {
    font-size: 0.6rem !important;
    padding: 2px 6px !important;
  }
  .tabla-atletas .imagen-perfil-atletas {
    width: 28px;
    height: 28px;
  }
  .tabla-atletas .badge-rol {
    font-size: 0.6rem;
    padding: 2px 5px;
  }
  .tabla-atletas .btn-confirmar-coach {
    font-size: 0.65rem;
    padding: 2px 4px;
  }
}
@media (max-width: 500px) {
  .tabla-facturas .tabla-fila td {
    padding: 8px 4px;
    font-size: 0.8rem;
  }
  .tabla-facturas .tabla-header th {
    padding: 0 4px 4px 4px;
    font-size: 0.65rem;
  }
  .tabla-facturas .texto-descarga {
    display: none;
  }
}
.col-payment-intent {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .col-payment-intent {
    display: none;
  }
}
@media (max-width: 768px) {
  /*    html, body {
          overflow-y: visible !important;
      }

      .main-container {
          overflow: visible !important;
      }*/
  .modal-overlay,
  .modal-overlay.show {
    z-index: 99999 !important;
  }
}
:root {
  --bg-color: #FFFFFF;
  --bg-color2: #F7F7F7;
  --bg-color3: #F0F0F0;
  --bg-color4: #EBEBEB;
  --text-color: #000000;
  --text-color-highlight: #19DAF4;
  --text-color-highlight-light: #03383F;
  /*--text-color-highlight: #19DAF4;*/
  --bg-highlight-osc: #1D1C5F;
  --text-color-highlight-t: black;
  --bg-hover: #E3E8EB;
  --bg-text-grises: #7A7A7A;
  --bg-alert: #EDEDFF;
  --tabla-text-highlight: #1F1F1F;
  --chat-username: #FFFFFF;
  --inset-box: #03383F;
}

[data-theme=Dark] {
  --bg-color: #1F1F1F;
  --bg-color2: #0F0F0F;
  --bg-color3: #353535;
  --bg-color4: #9C9C9C;
  --text-color: #FFFFFF;
  --text-color-highlight: #19DAF4;
  --text-color-highlight-light: #03383F;
  --text-color-highlight-t: black;
  --bg-highlight-osc: #3B3E18;
  --bg-hover: #555555;
  --bg-text-grises: #D6D6D6;
  --bg-alert: #3B3E18;
  --tabla-text-highlight: #FFFFFF;
  --chat-username: #000000;
  --inset-box: #03383F;
}

/* ========================= */
/* BLOQUES DENTRO DE CADA DA */
/* ========================= */
/* Contenedor de bloques dentro del da */
.bloques-contenedor {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  width: 100%;
  flex-grow: 1;
  justify-content: flex-start;
  min-width: 0; /* permite que el contenido envuelva y no desborde en columnas estrechas */
  margin-top: 0.5rem;
  transition: background 0.2s ease-in-out;
}

.bloque-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-weight: bold;
  font-size: 18px;
  gap: 0.2rem;
  padding-left: 30px;
}

/* El sortable de un día debe medir su contenido: si crece para rellenar la
   fila, empuja "+ Nuevo" hasta la altura de la columna más larga. */
.bloques-contenedor.bloques-dia {
  flex-grow: 0;
}

.bloque-header strong {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bloque-header .icon-eliminar {
  background: none;
  border: none;
  color: red;
  cursor: pointer;
  font-size: 18px;
  transition: color 0.2s ease-in-out;
  padding: 0;
  display: flex;
  align-items: center;
}

.bloque-header .icon-guardar {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  transition: color 0.2s ease-in-out;
  padding: 0;
  display: flex;
  align-items: center;
}

.bloque-header .icon-historial {
  background: none;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  font-size: 18px;
  transition: color 0.2s ease-in-out;
  padding: 0;
  display: flex;
  align-items: center;
}

@media (hover: hover) {
  .bloque-header .icon-eliminar:hover {
    color: darkred;
  }
  .bloque-header .icon-guardar:hover {
    background: #3B3E18;
  }
}
/* Solucin para el UL que envuelve los bloques */
.bloques-contenedor ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

/* Estilos individuales de cada bloque */
.bloque-container {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  background-color: var(--bg-color);
  /* Borde + sombra "themed" idénticos a los de .post-card en Social: el color-mix
     con var(--text-color) hace que en dark mode el contorno brille suavemente,
     y en light mode genere una sombra coherente con el tema. */
  border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--text-color) 8%, transparent);
  text-align: left;
  cursor: grab;
  transition: box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
  min-width: 0; /* permite que el flex no desborde en columnas estrechas */
  width: 100%;
}

.bloque-color-bar {
  height: 4px;
  width: 100%;
  border-radius: 0 0 6px 6px;
  margin-top: 5px;
}

@media (hover: hover) and (pointer: fine) {
  .bloque-container:hover {
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
    cursor: pointer;
  }
  .bloque-container:active {
    cursor: grabbing;
  }
}
@media (hover: none) and (pointer: coarse) {
  .bloque-container:hover {
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
    cursor: default !important;
  }
}
/* Contenedor del contenido dentro del bloque */
.bloque-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  margin-top: 1em;
}

.bloque-body b {
  color: var(--text-color) !important;
}

/*.bloque-item {
    background: $color-bg;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-left: 5px solid $wb_IniAzul;*/ /* Color distintivo */
/*transition: 0.2s ease-in-out;
width: 90%;*/ /* Ajuste para responsive */
/*max-width: 250px;*/ /* Limita el tamao */
/*}*/
.descripcion {
  font-size: 16px;
  color: var(--text-color);
  white-space: pre-wrap;
  text-align: left;
  margin-bottom: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
  overflow-x: clip;
}
.descripcion a {
  color: var(--text-color-highlight);
  text-decoration: underline;
}
.descripcion :where(ul, ol) {
  margin: 0.15em 0 0.15em 0;
  padding-left: 1.4em;
  max-width: 100%;
  box-sizing: border-box;
  list-style-position: outside;
}
.descripcion :where(li) {
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

/* Quill / HTML: listas (guion+espacio) — evitar que el número o la viñeta quede fuera del bloque */
.descripcion :where(ol, ul),
.bloque-body :where(ol, ul),
.bloque-notas-body :where(ol, ul) {
  list-style-position: inside;
  padding-inline-start: 0;
  margin: 0.35em 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
.descripcion :where(li),
.bloque-body :where(li),
.bloque-notas-body :where(li) {
  margin: 0.2em 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}
.descripcion :where(li > p),
.bloque-body :where(li > p),
.bloque-notas-body :where(li > p) {
  display: inline;
  margin: 0;
  padding: 0;
}

/*.bloque-item h4 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
}

.bloque-item p {
    font-size: 14px;
    color: gray;
    margin: 5px 0;
}*/
/*.tipo-resultado {
    font-size: 12px;
    font-weight: bold;
    background: $wb_BlancoHumo;
    padding: 5px 10px;
    border-radius: 5px;
    align-self: center;
}*/
.clasificaciones-container {
  width: 100%;
}

.clasificacion-item {
  font-size: 12px;
  font-weight: bold;
  color: var(--bg-text-grises);
  background: var(--bg-hover);
  padding: 3px 8px;
  border-radius: 5px;
  display: inline-block;
  margin: 0%;
  min-width: 100%;
  max-width: 100%;
  margin-top: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clasificacion-item i {
  vertical-align: middle;
}

/*.icon-ranking {
    margin-right: 3px;
}*/
.btn-add-result {
  border-radius: 8px;
  border: 1px solid var(--bg-color3);
  color: var(--text-color);
  width: 100%;
  margin-top: 10px;
  display: flex;
  height: 2rem;
  background: var(--bg-color3);
  justify-content: center;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.15s, border-color 0.15s;
}
.btn-add-result i {
  font-size: 14px;
  line-height: 1;
}

@media (hover: hover) {
  .btn-add-result:hover {
    background: var(--bg-color4, #3a3a3a);
    border-color: var(--bg-color4, #3a3a3a);
  }
}
.etiqueta-exclusivo {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: var(--text-color-highlight);
  font-size: 0.85rem;
  margin: 0.3rem 0;
  font-weight: 500;
}
.etiqueta-exclusivo i {
  padding-top: 5px;
  font-size: 20px;
}

@media (max-width: 1024px) {
  .bloque-container {
    max-width: 100%; /* antes 160px: estrangulaba el texto y desbordaba */
  }
}
@media (max-width: 768px) {
  .bloque-container {
    max-width: 100%;
    padding: 10px;
  }
  .bloque-header {
    padding-left: 34px;
    padding-top: 5px;
  }
}
@media (max-width: 480px) {
  .bloque-container {
    max-width: 100%;
    padding: 10px;
    overflow: auto;
  }
}
.clasificacion-container {
  height: 100%;
  width: 100%;
}

/*.clasificacion-filtros {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
}*/
/*.filtro-tab {
    background: none;
    border: none;
    padding: 8px;
    color: white;
    cursor: pointer;
}

.filtro-tab.activo {
    border-bottom: 2px solid yellow;
}*/
/*.clasificacion-categorias {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}*/
/*.categoria-btn {
    background: $wb_EerieNegro;
    border: 1px solid white;
    padding: 5px 15px;
    cursor: pointer;
}

.categoria-btn.activo {
    background: yellow;
    color: black;
}*/
.clasificacion-lista {
  overflow-y: auto;
}

.clasificacion-modal-item {
  display: flex;
  justify-content: space-between;
  padding: 8px;
  align-items: center;
  color: var(--text-color);
  background: var(--bg-color) !important;
  border-radius: 10px;
  margin-bottom: 10px;
  border: 1px solid var(--bg-color3);
  cursor: pointer;
  /* Altura uniforme entre filas del ranking. */
  min-height: 72px;
  box-sizing: border-box;
}

/* El nombre en una sola línea (con "…" si no cabe) para que un nombre largo
   no parta la fila en dos y la haga más alta que las demás. */
.clasificacion-modal-item .nombre-atleta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Se reserva el alto de 2 líneas de comentario aunque el texto sea corto
   (p. ej. "Comentar"), de modo que todas las filas midan igual. */
.clasificacion-modal-item .info-texto .comentario {
  min-height: 2.6em;
}

.feedback-actions {
  display: flex;
  justify-content: center;
  margin-top: 12px;
  width: 100%;
  gap: 8px;
}
.feedback-actions .btn-add-result {
  width: 50%;
  margin-top: 0;
}

.clasificacion-info {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: 23px;
}

/*.avatar {
    width: 4em;
    height: 4em;
    border-radius: 50%;
    margin-right: 10px;
    margin-left: 10px
}
*/
.nombre-atleta.destacado {
  color: yellow;
}

.fecha {
  font-size: 12px;
  color: #888888;
}

.clasificacion-resultado {
  display: flex;
  gap: 10px;
}

.valor {
  font-family: "Manuka";
  font-size: 2rem;
  white-space: nowrap;
}

/*.categoria {
    background: $wb_Jet;
    padding: 2px 5px;
    border-radius: 5px;
}*/
.info-texto {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  margin-right: 5px;
  color: var(--text-color);
}

.posicion {
  font-family: "Manuka";
  font-size: 4rem;
  width: 1rem;
  margin-right: 1.5rem;
  margin-left: 0.1em;
}

.nombre-atleta {
  margin: 0;
  margin-top: 10px;
}

.comentario {
  font-weight: 100;
  margin: 0;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 4em;
  word-wrap: break-word;
  white-space: normal;
  color: lightslategrey;
  margin-top: 5px;
}

.comentario-modal {
  font-weight: 100;
  margin: 0;
  margin-top: 5px;
  margin-bottom: 10px;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  color: lightslategrey;
  line-height: 1.5;
  overflow-y: auto;
}

.input-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.unidad-resultado {
  font-size: 14px;
  font-weight: bold;
  color: #686868;
}

.dia-empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: calc(100vh - 400px);
  padding: 1rem;
  color: #AAAAAA;
}

.mensaje-empty {
  font-size: 1.3rem;
  font-weight: 500;
}

.bloque-personalizaciones-info {
  width: 100%;
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--bg-text-grises);
}

.etiqueta-exclusivo {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  cursor: pointer;
  font-weight: 300;
  color: var(--text-color-highlight);
  margin-bottom: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.etiqueta-exclusivo i {
  padding-top: 7px;
  font-size: 20px;
  /* Alto uniforme (line-height 23 + padding-top 7) para que los iconos de
     máscara (height:1em) ocupen la misma caja que los glyphs de fuente y todas
     las filas mantengan el mismo espaciado. */
  height: 30px;
}
@media (hover: hover) {
  .etiqueta-exclusivo:hover {
    color: var(--text-color-highlight);
  }
}

.titulo-subseccion {
  margin-bottom: 0.3rem;
  font-weight: 500;
  font-size: 13px;
  color: var(--bg-text-grises);
}

.usuarios-personalizados-lista {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.usuario-personalizado-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-color);
  font-weight: 400;
}

.avatar-img {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 0.3rem;
  object-fit: cover;
  background-color: white;
}

.filtros-genero {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.badge-genero {
  padding: 6px 14px;
  border-radius: 20px;
  background-color: var(--text-color-highlight-light);
  color: white;
  border: 1px solid var(--text-color-highlight);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  filter: brightness(0.6);
}

.badge-genero.activo {
  filter: brightness(1);
}

@media (hover: hover) {
  .badge-genero:hover {
    opacity: 0.8;
  }
}
.btn-clasificacion-semanal {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.bloque-menu-wrapper {
  position: relative;
  display: inline-block;
}

.menu-bloque-toggle {
  background: transparent;
  color: var(--text-color-highlight);
  border: none;
  cursor: pointer;
  font-size: 18px;
  padding: 2px 4px;
  border-radius: 6px;
  transition: background 0.2s ease;
}

@media (max-width: 768px) {
  .botones-semana {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
  }
  .btn-clasificacion-semanal {
    background: var(--color-bg3);
    border-radius: 8px;
    padding: 6px;
    font-size: 22px;
  }
}
.sesion {
  margin-bottom: 20px;
  padding: 0;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
}

.sesion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
}

.sesion-header h4 {
  font-size: 18px;
  color: #333;
}

.botones-sesion {
  display: flex;
  gap: 10px;
}

.botones-sesion button {
  background: none;
  border: none;
  color: #333;
  cursor: pointer;
}

.bloques-sesion {
  margin-top: 10px;
}

.acciones-sesion {
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.bloques-sesion button {
  display: block;
  margin-top: 15px;
}

.contenedor-botones-dia {
  background: white;
  border: 2px dashed black;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.rpe-slider-container {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 50%;
}

.rpe-value {
  font-size: 1.3rem;
  font-weight: 700;
  width: 35px;
  text-align: center;
}

.rpe-slider {
  -webkit-appearance: none;
  appearance: none;
  flex-grow: 1;
  height: 8px;
  border-radius: 10px;
  background: var(--rpe-gradient);
  outline: none;
  cursor: pointer;
  transition: background 0.3s ease;
}

.rpe-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--rpe-color);
  border: 2px solid #fff;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease;
}

@media (hover: hover) {
  .rpe-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
  }
}
.rpe-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--rpe-color);
  border: 2px solid #fff;
  cursor: pointer;
}

.dia-empty-buttons {
  border: 1px dashed var(--text-color);
  border-radius: 10px;
  padding: 20px;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* BOTONES AÑADIR (DIA/SESION) */
.dia-add-container {
  display: flex;
  justify-content: center;
  padding: 8px 0;
}
.btn-add-dia {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.2);
  background: transparent;
  color: var(--text-color);
  opacity: 0.4;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s;
}
.btn-add-dia:hover {
  opacity: 0.8;
}
.btn-add-flat {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text-color);
  opacity: 0.45;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 8px 12px;
  transition: opacity 0.15s;
  width: 100%;
}
.btn-add-flat:hover {
  opacity: 0.85;
}
.btn-add-flat i {
  font-size: 0.75rem;
}
.dia-add-dashed {
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 16px 0;
  display: flex;
  justify-content: center;
}
.btn-add-flat-dashed {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--text-color);
  opacity: 0.4;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 6px 16px;
  transition: opacity 0.15s;
  width: 100%;
}
.btn-add-flat-dashed:hover {
  opacity: 0.8;
}
.btn-add-flat-dashed i {
  font-size: 1.05rem;
  color: var(--text-color-highlight);
}

.rpe-badge {
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: black;
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 6px;
  margin-top: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 60px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.comentario-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.bloque-notas {
  margin-top: 18px;
  border-radius: 8px;
  color: #9c9c9c;
}

.bloque-notas-header {
  display: flex;
  align-items: center;
  font-weight: 600;
  margin-bottom: 8px;
  gap: 6px;
}

.bloque-notas-header i {
  font-size: 1.2rem;
  line-height: 0;
}

/* Icono "Configuración" del programa: Lucide "settings" (SVG vía mask). Clase propia
   (no toca el glyph icon-variables, reutilizado en la calculadora). Hereda currentColor. */
.icon-settings-lucide {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Iconos Lucide (SVG vía mask, heredan currentColor y escalan con font-size) usados en
   plegar/desplegar día (fold/unfold-horizontal), plegar/desplegar bloques (fold/unfold-vertical)
   y pegar (clipboard-paste). Clases propias: no tocan glyphs reutilizados (icon-ver/icon-ocultar
   para mostrar/ocultar, icon-exportar para exportar/importar). */
.icon-fold-horizontal,
.icon-unfold-horizontal,
.icon-fold-vertical,
.icon-unfold-vertical,
.icon-clipboard-paste {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.icon-fold-horizontal {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h6'/%3E%3Cpath d='M22 12h-6'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 8v2'/%3E%3Cpath d='M12 14v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m19 9-3 3 3 3'/%3E%3Cpath d='m5 15 3-3-3-3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h6'/%3E%3Cpath d='M22 12h-6'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 8v2'/%3E%3Cpath d='M12 14v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m19 9-3 3 3 3'/%3E%3Cpath d='m5 15 3-3-3-3'/%3E%3C/svg%3E");
}
.icon-unfold-horizontal {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 12h6'/%3E%3Cpath d='M8 12H2'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 8v2'/%3E%3Cpath d='M12 14v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m19 15 3-3-3-3'/%3E%3Cpath d='m5 9-3 3 3 3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 12h6'/%3E%3Cpath d='M8 12H2'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 8v2'/%3E%3Cpath d='M12 14v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m19 15 3-3-3-3'/%3E%3Cpath d='m5 9-3 3 3 3'/%3E%3C/svg%3E");
}
.icon-fold-vertical {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-6'/%3E%3Cpath d='M12 8V2'/%3E%3Cpath d='M4 12H2'/%3E%3Cpath d='M10 12H8'/%3E%3Cpath d='M16 12h-2'/%3E%3Cpath d='M22 12h-2'/%3E%3Cpath d='m15 19-3-3-3 3'/%3E%3Cpath d='m15 5-3 3-3-3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-6'/%3E%3Cpath d='M12 8V2'/%3E%3Cpath d='M4 12H2'/%3E%3Cpath d='M10 12H8'/%3E%3Cpath d='M16 12h-2'/%3E%3Cpath d='M22 12h-2'/%3E%3Cpath d='m15 19-3-3-3 3'/%3E%3Cpath d='m15 5-3 3-3-3'/%3E%3C/svg%3E");
}
.icon-unfold-vertical {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-6'/%3E%3Cpath d='M12 8V2'/%3E%3Cpath d='M4 12H2'/%3E%3Cpath d='M10 12H8'/%3E%3Cpath d='M16 12h-2'/%3E%3Cpath d='M22 12h-2'/%3E%3Cpath d='m15 19-3 3-3-3'/%3E%3Cpath d='m15 5-3-3-3 3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-6'/%3E%3Cpath d='M12 8V2'/%3E%3Cpath d='M4 12H2'/%3E%3Cpath d='M10 12H8'/%3E%3Cpath d='M16 12h-2'/%3E%3Cpath d='M22 12h-2'/%3E%3Cpath d='m15 19-3 3-3-3'/%3E%3Cpath d='m15 5-3-3-3 3'/%3E%3C/svg%3E");
}
.icon-clipboard-paste {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H9a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1Z'/%3E%3Cpath d='M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h5.5'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v3'/%3E%3Cpath d='M11 14h10'/%3E%3Cpath d='m17 10 4 4-4 4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H9a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1Z'/%3E%3Cpath d='M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h5.5'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v3'/%3E%3Cpath d='M11 14h10'/%3E%3Cpath d='m17 10 4 4-4 4'/%3E%3C/svg%3E");
}

/* Icono "Ver estadísticas" del bloque: Lucide "chart-no-axes-combined" (SVG vía mask).
   Clase propia (no toca el glyph icon-info-3, que se reutiliza en feedback/comentarios).
   Hereda color con currentColor y escala con font-size. */
.icon-chart-combined {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16v5'/%3E%3Cpath d='M16 14v7'/%3E%3Cpath d='M20 10v11'/%3E%3Cpath d='m22 3-8.646 8.646a.5.5 0 0 1-.708 0L9.354 8.354a.5.5 0 0 0-.707 0L2 15'/%3E%3Cpath d='M4 18v3'/%3E%3Cpath d='M8 14v7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16v5'/%3E%3Cpath d='M16 14v7'/%3E%3Cpath d='M20 10v11'/%3E%3Cpath d='m22 3-8.646 8.646a.5.5 0 0 1-.708 0L9.354 8.354a.5.5 0 0 0-.707 0L2 15'/%3E%3Cpath d='M4 18v3'/%3E%3Cpath d='M8 14v7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Icono "Día pendiente de completar": Lucide "circle-dashed-check" (SVG vía mask).
   Clase propia (icon-confirmar se reutiliza en toda la app para el estado completado).
   Hereda color con currentColor y escala con font-size. */
.icon-circle-dashed-check {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.1 2.18a9.93 9.93 0 0 1 3.8 0'/%3E%3Cpath d='M17.6 3.71a9.95 9.95 0 0 1 2.69 2.7'/%3E%3Cpath d='M21.82 10.1a9.93 9.93 0 0 1 0 3.8'/%3E%3Cpath d='M20.29 17.6a9.95 9.95 0 0 1-2.7 2.69'/%3E%3Cpath d='M13.9 21.82a9.94 9.94 0 0 1-3.8 0'/%3E%3Cpath d='M6.4 20.29a9.95 9.95 0 0 1-2.69-2.7'/%3E%3Cpath d='M2.18 13.9a9.93 9.93 0 0 1 0-3.8'/%3E%3Cpath d='M3.71 6.4a9.95 9.95 0 0 1 2.7-2.69'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.1 2.18a9.93 9.93 0 0 1 3.8 0'/%3E%3Cpath d='M17.6 3.71a9.95 9.95 0 0 1 2.69 2.7'/%3E%3Cpath d='M21.82 10.1a9.93 9.93 0 0 1 0 3.8'/%3E%3Cpath d='M20.29 17.6a9.95 9.95 0 0 1-2.7 2.69'/%3E%3Cpath d='M13.9 21.82a9.94 9.94 0 0 1-3.8 0'/%3E%3Cpath d='M6.4 20.29a9.95 9.95 0 0 1-2.69-2.7'/%3E%3Cpath d='M2.18 13.9a9.93 9.93 0 0 1 0-3.8'/%3E%3Cpath d='M3.71 6.4a9.95 9.95 0 0 1 2.7-2.69'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Icono "Día completado": Lucide "circle-check" (SVG vía mask).
   Misma geometría que icon-circle-dashed-check (círculo r=10 + check idéntico) para que ambos
   estados midan y se posicionen igual. Hereda color con currentColor y escala con font-size. */
.icon-circle-check {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Icono "Personalizado" (bloque/personalización): Lucide "user-star" (SVG vía mask).
   Clase propia (no toca el glyph icon-usuario-3, reutilizado para usuario/coach/grupos/actividad).
   Hereda color con currentColor y escala con font-size. */
.icon-user-star {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 15H7a4 4 0 0 0-4 4v2'/%3E%3Cpath d='M14.048 21.593a1 1 0 0 0 1.906 0l.447-1.269a1 1 0 0 1 .604-.605l1.269-.446a1 1 0 0 0 0-1.906l-1.269-.447a1 1 0 0 1-.605-.604l-.446-1.269a1 1 0 0 0-1.906 0l-.447 1.269a1 1 0 0 1-.604.605l-1.269.446a1 1 0 0 0 0 1.906l1.269.447a1 1 0 0 1 .605.604z'/%3E%3Ccircle cx='10' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 15H7a4 4 0 0 0-4 4v2'/%3E%3Cpath d='M14.048 21.593a1 1 0 0 0 1.906 0l.447-1.269a1 1 0 0 1 .604-.605l1.269-.446a1 1 0 0 0 0-1.906l-1.269-.447a1 1 0 0 1-.605-.604l-.446-1.269a1 1 0 0 0-1.906 0l-.447 1.269a1 1 0 0 1-.604.605l-1.269.446a1 1 0 0 0 0 1.906l1.269.447a1 1 0 0 1 .605.604z'/%3E%3Ccircle cx='10' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Icono "Ranking / Ver Ranking": Lucide "medal" (SVG vía mask).
   Clase propia (no toca el glyph icon-clasificacion, reutilizado en landing/onboarding/estadísticas).
   Hereda color con currentColor y escala con font-size. */
.icon-medal {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.21 15 2.66 7.14a2 2 0 0 1 .13-2.2L4.4 2.8A2 2 0 0 1 6 2h12a2 2 0 0 1 1.6.8l1.6 2.14a2 2 0 0 1 .14 2.2L16.79 15'/%3E%3Cpath d='M11 12 5.12 2.2'/%3E%3Cpath d='m13 12 5.88-9.8'/%3E%3Cpath d='M8 7h8'/%3E%3Ccircle cx='12' cy='17' r='5'/%3E%3Cpath d='M12 18v-2h-.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.21 15 2.66 7.14a2 2 0 0 1 .13-2.2L4.4 2.8A2 2 0 0 1 6 2h12a2 2 0 0 1 1.6.8l1.6 2.14a2 2 0 0 1 .14 2.2L16.79 15'/%3E%3Cpath d='M11 12 5.12 2.2'/%3E%3Cpath d='m13 12 5.88-9.8'/%3E%3Cpath d='M8 7h8'/%3E%3Ccircle cx='12' cy='17' r='5'/%3E%3Cpath d='M12 18v-2h-.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.bloque-notas-body {
  font-size: 0.95rem;
  line-height: 1.45;
  opacity: 0.9;
  white-space: pre-line;
}

.notas-traducir {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-top: 8px;
}

.notas-traducir-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--text-color-highlight);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
}

.notas-traducir-btn i {
  font-size: 20px;
}

.notas-traducir-estado {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--bg-text-grises);
}

.notas-traducir-ia {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--bg-text-grises);
  opacity: 0.85;
}

.notas-traducir-error {
  margin-top: 4px;
  font-size: 0.8rem;
  color: #e5484d;
}

.notas-idiomas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: 100%;
}

.notas-idioma-opcion {
  padding: 10px 12px;
  background: var(--bg-color3);
  border: 1px solid var(--bg-color4);
  border-radius: 8px;
  color: var(--text-color);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.notas-idioma-opcion:hover {
  background: var(--bg-hover);
  border-color: var(--text-color-highlight);
}

.notas-idioma-opcion.active {
  background: var(--text-color-highlight-light);
  border-color: var(--text-color-highlight);
  color: var(--text-color-highlight);
}

.ia-wod-generador {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.ia-wod-generador textarea {
  width: 100%;
  resize: vertical;
}

.ia-wod-generar-btn {
  align-self: flex-end;
}

.ia-asistente {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.ia-asistente-tabs {
  display: flex;
  gap: 6px;
}

.ia-asistente-tab {
  flex: 1;
  padding: 8px 10px;
  background: var(--bg-color3);
  border: 1px solid var(--bg-color4);
  border-radius: 8px;
  color: var(--text-color);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ia-asistente-tab.active {
  background: var(--text-color-highlight-light);
  border-color: var(--text-color-highlight);
  color: var(--text-color-highlight);
}

.ia-asistente-hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--bg-text-grises);
}

.ia-asistente-cargando {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  font-size: 0.9rem;
  color: var(--text-color);
}

.ia-asistente-ajustes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ia-chip-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.ia-chip-group-col {
  flex-direction: column;
  align-items: stretch;
}

.ia-chip-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bg-text-grises);
  min-width: 78px;
}

.timer-detector {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}

.timer-detector-hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--bg-text-grises);
}

.timer-detector-sk .skeleton-bar {
  height: 14px;
  border-radius: 6px;
}
.timer-detector-sk .timer-sk-hint {
  width: 70%;
  height: 12px;
}
.timer-detector-sk .timer-sk-label {
  width: 42%;
  height: 11px;
}
.timer-detector-sk .timer-sk-field {
  width: 100%;
  height: 38px;
  border-radius: 8px;
}
.timer-detector-sk .timer-sk-btn {
  width: 100%;
  height: 44px;
  border-radius: 999px;
}

.timer-campo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timer-campo-anidado {
  padding-left: 12px;
  border-left: 2px solid var(--bg-color4);
}

.timer-campo-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bg-text-grises);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.timer-input-corto {
  max-width: 120px;
}

.timer-detector .mmss-pair input {
  width: 90px;
  flex: 0 0 auto;
}

.timer-mmss {
  display: flex;
  align-items: center;
  gap: 8px;
}
.timer-mmss input {
  width: 90px;
  text-align: center;
}
.timer-mmss span {
  font-size: 0.85rem;
  color: var(--bg-text-grises);
}

.timer-series-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-color);
}
.timer-series-check input {
  width: auto;
  margin: 0;
  cursor: pointer;
}

.timer-detector-btn {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.timer-detector-btn i {
  line-height: 0;
}

.timer-campo-suf {
  font-size: 0.85rem;
  color: var(--bg-text-grises);
}

.timer-bloque {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--bg-color4);
  border-radius: 12px;
  background: var(--bg-color2);
}

.timer-bloque-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-color-highlight);
}

.timer-bloque-quitar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: var(--bg-color3);
  color: var(--bg-text-grises);
  cursor: pointer;
}
.timer-bloque-quitar:hover {
  color: #fff;
  background: #c0392b;
}

.timer-add-bloque {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px dashed var(--bg-color4);
  border-radius: 10px;
  background: transparent;
  color: var(--text-color-highlight);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.timer-add-bloque:hover {
  border-color: var(--text-color-highlight);
}

.ia-chip {
  padding: 5px 10px;
  background: var(--bg-color3);
  border: 1px solid var(--bg-color4);
  border-radius: 14px;
  color: var(--text-color);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ia-chip.active {
  background: var(--text-color-highlight-light);
  border-color: var(--text-color-highlight);
  color: var(--text-color-highlight);
}

.ia-chip-select,
.ia-chip-input {
  flex: 1;
  min-width: 140px;
}

.ia-asistente-resultado {
  white-space: pre-wrap;
  background: var(--bg-color3);
  border: 1px solid var(--bg-color4);
  border-radius: 8px;
  padding: 12px;
  font-size: 0.9rem;
  color: var(--text-color);
  max-height: 45vh;
  overflow-y: auto;
}

.bloque-container.completado {
  border-color: color-mix(in srgb, var(--bloque-accent, var(--text-color-highlight)) 35%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--bloque-accent, var(--text-color-highlight)) 38%, transparent) !important;
}

/* Acceso rápido al historial: icono discreto anclado en la esquina inferior derecha del bloque.
   Atenuado por defecto para no romper la estética; resalta en hover/tap. */
.bloque-historial-corner {
  align-self: flex-end;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 4px 6px;
  border: none;
  background: transparent;
  color: color-mix(in srgb, var(--text-color) 48%, transparent);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
}
.bloque-historial-corner i {
  font-size: 20px;
}
.bloque-historial-corner:active {
  color: var(--text-color-highlight);
}
@media (hover: hover) {
  .bloque-historial-corner:hover {
    color: var(--text-color-highlight);
  }
}

/* Fila inferior del bloque: "Iniciar timer" a la izquierda e "Historial" a la derecha,
   ambos con el mismo estilo discreto de esquina. */
.bloque-corner-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 6px;
  width: 100%;
}
.bloque-corner-row .bloque-historial-corner {
  align-self: center;
  margin-top: 0;
  margin-left: auto;
}
.bloque-timer-corner {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 4px 6px 4px 0;
  border: none;
  background: transparent;
  color: color-mix(in srgb, var(--text-color) 48%, transparent);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
}
.bloque-timer-corner i {
  font-size: 20px;
  padding-top: 5px;
}
.bloque-timer-corner:active {
  color: var(--text-color-highlight);
}
@media (hover: hover) {
  .bloque-timer-corner:hover {
    color: var(--text-color-highlight);
  }
}

/* Skeleton de carga del historial de bloques: imita el contexto (semana/fecha) y una tarjeta
   de bloque con título y líneas de descripción. Reutiliza .skeleton-bar (shimmer global). */
.historial-skeleton-entrada {
  margin-bottom: 30px;
}
.historial-skeleton-contexto {
  display: block;
  width: 130px;
  height: 12px;
  margin-bottom: 8px;
}
.historial-skeleton-card {
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
  border-radius: 8px;
  background: var(--bg-color);
}
.historial-skeleton-card .skeleton-bar {
  display: block;
}

/* Pestaña de esquina: gris si pendiente, color del bloque si completado */
.bloque-check {
  position: absolute;
  top: -1px;
  left: -1px;
  z-index: 2;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 8px 0 100% 0;
  background: color-mix(in srgb, var(--text-color) 8%, transparent);
  color: color-mix(in srgb, var(--text-color) 45%, transparent);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  cursor: pointer;
  outline: none;
  transition: color 0.2s ease, background 0.2s ease;
}
.bloque-check::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid color-mix(in srgb, var(--text-color) 30%, transparent);
  border-top: none;
  border-left: none;
  box-sizing: border-box;
  pointer-events: none;
  transition: border-color 0.2s ease;
}
.bloque-check-mark {
  position: relative;
  z-index: 1;
  width: 15px;
  height: 11px;
  margin: 9px 0 0 6px;
  display: block;
  flex-shrink: 0;
  overflow: visible;
}
.bloque-check.completado {
  background: color-mix(in srgb, var(--bloque-accent, var(--text-color-highlight)) 16%, transparent);
  color: var(--bloque-accent, var(--text-color-highlight));
}
.bloque-check.completado::before {
  border-color: color-mix(in srgb, var(--bloque-accent, var(--text-color-highlight)) 78%, transparent);
}
.bloque-check.pendiente:active {
  background: color-mix(in srgb, var(--text-color) 14%, transparent);
  color: color-mix(in srgb, var(--text-color) 62%, transparent);
}
.bloque-check.pendiente:active::before {
  border-color: color-mix(in srgb, var(--text-color) 50%, transparent);
}
@media (hover: hover) {
  .bloque-check.pendiente:hover {
    background: color-mix(in srgb, var(--text-color) 12%, transparent);
    color: color-mix(in srgb, var(--text-color) 58%, transparent);
  }
  .bloque-check.pendiente:hover::before {
    border-color: color-mix(in srgb, var(--text-color) 48%, transparent);
  }
  .bloque-check.completado:hover {
    background: color-mix(in srgb, var(--bloque-accent, var(--text-color-highlight)) 22%, transparent);
  }
  .bloque-check.completado:hover::before {
    border-color: var(--bloque-accent, var(--text-color-highlight));
  }
}

@media (hover: hover) {
  .bloque-container.completado:hover {
    box-shadow: 0 0 16px color-mix(in srgb, var(--bloque-accent, var(--text-color-highlight)) 48%, transparent);
  }
}
:root {
  --bg-color: #FFFFFF;
  --bg-color2: #F7F7F7;
  --bg-color3: #F0F0F0;
  --bg-color4: #EBEBEB;
  --text-color: #000000;
  --text-color-highlight: #19DAF4;
  --text-color-highlight-light: #03383F;
  /*--text-color-highlight: #19DAF4;*/
  --bg-highlight-osc: #1D1C5F;
  --text-color-highlight-t: black;
  --bg-hover: #E3E8EB;
  --bg-text-grises: #7A7A7A;
  --bg-alert: #EDEDFF;
  --tabla-text-highlight: #1F1F1F;
  --chat-username: #FFFFFF;
  --inset-box: #03383F;
}

[data-theme=Dark] {
  --bg-color: #1F1F1F;
  --bg-color2: #0F0F0F;
  --bg-color3: #353535;
  --bg-color4: #9C9C9C;
  --text-color: #FFFFFF;
  --text-color-highlight: #19DAF4;
  --text-color-highlight-light: #03383F;
  --text-color-highlight-t: black;
  --bg-highlight-osc: #3B3E18;
  --bg-hover: #555555;
  --bg-text-grises: #D6D6D6;
  --bg-alert: #3B3E18;
  --tabla-text-highlight: #FFFFFF;
  --chat-username: #000000;
  --inset-box: #03383F;
}

.chat-container {
  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 55px);
  height: calc(100dvh - 55px);
  overflow: hidden;
}

.sin-padding-header .chat-container {
  height: 100vh;
  height: 100dvh;
}

.chat-body-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-messages-bulk-load-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  pointer-events: none;
  background: color-mix(in srgb, var(--bg-color) 65%, transparent);
}

.chat-header {
  display: flex;
  align-items: center;
  padding: 10px;
  background: var(--bg-color);
  flex-shrink: 0;
}

.chat-avatar {
  width: 4em;
  height: 4em;
  min-width: 4em;
  min-height: 4em;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-right: 10px;
  margin-left: 10px;
  border: 2px solid #686868;
}

.chat-username-container {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.chat-username {
  font-size: 50px;
  margin: 0;
  font-family: "Manuka";
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-messages-container {
  flex: 1;
  min-height: 0;
  padding: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-color);
}

.chat-message {
  display: flex;
  align-items: flex-start;
  margin-bottom: 4px;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.chat-message.own {
  justify-content: flex-end;
  margin-left: 0px !important;
}
.chat-message.other {
  justify-content: flex-start;
}
.chat-message.primero {
  margin-top: 15px;
}

/* ── Dropdown arrow (desktop hover only) ── */
.message-dropdown-btn {
  position: absolute;
  top: 2px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.15);
  color: rgba(255, 255, 255, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  padding: 0;
  transition: background 0.12s ease;
}
.message-dropdown-btn i {
  font-size: 10px;
  line-height: 1;
}
@media (hover: hover) {
  .message-dropdown-btn:hover {
    background: rgba(0, 0, 0, 0.3);
  }
}

.message-content.own .message-dropdown-btn {
  color: rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.08);
}
@media (hover: hover) {
  .message-content.own .message-dropdown-btn:hover {
    background: rgba(0, 0, 0, 0.15);
  }
}

@media (hover: hover) and (pointer: fine) {
  .message-content:hover .message-dropdown-btn {
    display: flex;
  }
}
.message-user-cont p,
.message-content.own p {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  color: black;
}

.message-content.other p {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  color: white;
}

.chat-message.own.primero .message-content::after {
  content: "";
  position: absolute;
  top: 0px;
  left: -7px;
  width: 0;
  height: 0;
  border-top: 15px solid skyblue;
  border-left: 15px solid transparent;
}

.chat-message.other.primero .message-content::after {
  content: "";
  position: absolute;
  top: 0px;
  left: -7px;
  width: 0;
  height: 0;
  border-top: 15px solid #555555;
  border-left: 15px solid transparent;
}

[data-theme=Dark] .chat-message.own.primero .message-content::after {
  border-top-color: var(--text-color-highlight);
}

[data-theme=Dark] .chat-message.other.primero .message-content::after {
  border-top-color: #555555;
}

.chat-message.other.primero .message-content,
.chat-message.other.continuacion .message-content {
  /* width: calc(50% - 40px);
   max-width: calc(70% - 40px);
   min-width: calc(70% - 40px);*/
}

.chat-message.other.continuacion .message-content {
  margin-left: 40px;
}

.message-avatar {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-right: 10px;
  border: 2px solid #686868;
}

.message-content {
  position: relative;
  padding: 4px 6px 4px 8px;
  border-radius: 10px;
  max-width: 65%;
  overflow: hidden;
  overflow-wrap: break-word;
  background-color: var(--text-color-highlight);
}
.message-content img, .message-content video, .message-content canvas, .message-content .chat-image-preview, .message-content .chat-video-preview-wrapper, .message-content .chat-pdf-container {
  max-width: 100%;
}

[data-theme=Dark] .message-content {
  background-color: var(--text-color-highlight);
}

.message-content:not(.other) a {
  color: #1B1464 !important;
}

.message-content.other {
  background-color: #555555;
}

[data-theme=Dark] .message-content.other {
  background-color: #555555;
}

.message-user-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 800;
  font-size: 0.85rem;
  margin-bottom: 3px;
}

.message-user-cont {
  display: inline;
}
.message-user-cont p {
  white-space: pre-line;
  margin: 0;
  display: inline;
}
.message-user-cont p::after {
  content: "";
  display: inline-block;
  width: 50px;
}

.message-time {
  font-size: 10px;
  color: rgba(0, 0, 0, 0.45);
  float: right;
  margin-left: 10px;
  white-space: nowrap;
  line-height: 22px;
}

.message-content.other .message-time {
  color: rgba(255, 255, 255, 0.6);
}

.chat-readonly-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-color3);
  color: var(--bg-text-grises);
  font-size: 13px;
  text-align: center;
  justify-content: center;
}
.chat-readonly-banner i {
  font-size: 16px;
  flex-shrink: 0;
}

.chat-input {
  display: flex;
  align-items: center;
  margin: 6px 10px 8px;
  padding: 0 8px;
  min-height: 42px;
  background: var(--bg-color);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 24px;
  transition: border-color 0.2s;
}
.chat-input:focus-within {
  border-color: rgba(255,255,255,0.3);
}
.chat-input > div {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.chat-input .btn-circle,
.chat-input label.btn-circle {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: transparent;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  vertical-align: middle;
}
.chat-input .btn-circle i,
.chat-input label.btn-circle i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
  padding: 0;
  margin: 0;
  color: rgba(255,255,255,0.4);
  font-size: 18px;
}
.chat-input [class*="icon-"]::before {
  line-height: 1 !important;
}
.chat-input .btn-circle:hover i,
.chat-input label.btn-circle:hover i {
  color: rgba(255,255,255,0.7);
}

.chat-textarea {
  flex: 1;
  resize: none;
  overflow-y: auto;
  font-size: 14px;
  line-height: 22px;
  padding: 8px 8px;
  border: none;
  border-radius: 0;
  background-color: transparent;
  color: var(--text-color);
  font-family: "Public Sans";
  box-sizing: border-box;
  max-height: 200px;
}
.chat-textarea:focus {
  outline: none;
}

.chat-image-preview {
  max-width: 100%;
  max-height: 350px;
  min-height: 120px;
  border-radius: 8px;
  display: block;
  cursor: pointer;
  /* Placeholder shimmer mientras la imagen carga (loading=lazy). Cuando
     onload marca data-loaded, el background y la animación se retiran. */
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--text-color) 8%, transparent) 25%,
    color-mix(in srgb, var(--text-color) 16%, transparent) 50%,
    color-mix(in srgb, var(--text-color) 8%, transparent) 75%
  );
  background-size: 200% 100%;
  animation: panel-skeleton-shimmer 1.4s ease-in-out infinite;
}
.chat-image-preview[data-loaded="true"] {
  min-height: 0;
  background: none;
  animation: none;
}

.chat-video-preview-wrapper {
  position: relative;
  max-width: 100%;
  max-height: 350px;
  min-height: 160px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: #000;
}
.chat-video-preview-wrapper[data-loaded="true"] {
  min-height: 0;
}
.chat-video-thumb:not([data-loaded="true"]) {
  opacity: 0;
}

.chat-video-thumb {
  max-width: 100%;
  max-height: 350px;
  display: block;
  pointer-events: none;
}

.video-thumb-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  backdrop-filter: blur(4px);
  pointer-events: none;
  font-size: 22px;
  line-height: 1;
}
.video-thumb-badge.icon-video::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% + 2px), -50%);
  line-height: 1;
}

.modal-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100vw;
  max-height: 90vh;
  overflow: hidden;
}

.modal-image {
  max-width: 100%;
  max-height: 100%;
  cursor: zoom-in;
  border-radius: 1rem;
}

/* Image viewer overlay (WhatsApp-style) */
.image-viewer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 100000;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: default;
}

.image-viewer-close {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 100001;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
@media (hover: hover) {
  .image-viewer-close:hover {
    background: rgba(255, 255, 255, 0.3);
  }
}

.image-viewer-img {
  max-width: 95vw;
  max-height: 95vh;
  object-fit: contain;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
  cursor: grab;
}
.image-viewer-img:active {
  cursor: grabbing;
}

.image-viewer-media {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 8px;
}

.back-button {
  font-size: 20px;
  border: none;
  background: transparent;
  color: var(--text-color);
  cursor: pointer;
  text-shadow: 0 0 1px black;
  transform: scale(2);
  padding-top: 5px;
}

.btn-circle {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.btn-circle i {
  font-size: 18px;
  color: var(--text-color-highlight);
}

.btn-circle, .btn-enviar {
  background-color: transparent;
}

@media (hover: hover) {
  .btn-circle:hover {
    opacity: 0.8;
  }
}
.chat-pdf-container {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px;
  border-radius: 8px;
  max-width: 80%;
}

.chat-pdf-icon img {
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.chat-pdf-name {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-video-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 450px;
  margin: 10px auto;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.youtube-thumbnail {
  width: 100%;
  height: auto;
  min-height: 140px;
  display: block;
  border-radius: 8px;
  transition: opacity 0.3s ease;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--text-color) 8%, transparent) 25%,
    color-mix(in srgb, var(--text-color) 16%, transparent) 50%,
    color-mix(in srgb, var(--text-color) 8%, transparent) 75%
  );
  background-size: 200% 100%;
  animation: panel-skeleton-shimmer 1.4s ease-in-out infinite;
}
.youtube-thumbnail[data-loaded="true"] {
  min-height: 0;
  background: none;
  animation: none;
}

.video-play-button {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
  .chat-video-container:hover .youtube-thumbnail {
    opacity: 0.7;
  }
  .chat-video-container:hover .video-play-button {
    opacity: 1;
  }
}
.lista-chats {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  overflow-y: auto;
}

.lista-chats-seccion {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-color-highlight);
  opacity: 0.85;
  padding: 18px 4px 14px;
}

.lista-chats-seccion i {
  font-size: 1rem;
}

.lista-chats-seccion + .chat-fila {
  margin-top: 2px;
}

.lista-chats .lista-chats-buscador {
  display: block;
  width: calc(100% - 20px);
  padding: 0.35rem 0.75rem;
  font-size: 0.88rem;
  margin: 4px 10px 14px;
  border-radius: 6px;
}

.lista-chats .lista-chats-buscador:focus,
.lista-chats .lista-chats-buscador:focus-visible {
  outline: none;
  border-color: var(--text-color-highlight);
  box-shadow: none;
}

.lista-chat-header {
  font-size: 18px;
  font-weight: bold;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 5px;
}

.chat-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.15s ease-in-out;
  background-color: transparent;
  color: var(--text-color);
}

.chat-fila:not(:last-child) {
  border-bottom: 1px solid var(--bg-color3);
}

@media (hover: hover) {
  .chat-fila:hover {
    background-color: var(--bg-color3);
  }
}

.chat-fila:active {
  background-color: var(--bg-color3);
}

.chat-foto {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: none;
  flex-shrink: 0;
}

.chat-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.chat-info-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.chat-info-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  flex-wrap: nowrap;
}

.nombre-chat {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.fecha-chat {
  font-size: 0.72rem;
  color: var(--bg-text-grises);
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0.8;
}

.preview-mensaje {
  font-size: 0.82rem;
  color: var(--bg-text-grises);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.preview-mensaje strong {
  font-weight: 500;
  color: var(--text-color);
  opacity: 0.85;
}

.badge-notificaciones {
  background-color: var(--text-color-highlight);
  color: var(--text-color-highlight-t);
  border-radius: 10px; /* pill para 1 o 2 dígitos */
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  box-sizing: border-box;
  font-size: 0.7rem;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  flex-grow: 0;
  overflow: visible;
  visibility: visible;
}

.cargar-mas {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.cargar-mas button {
  border: none;
  background-color: var(--text-color-highlight);
  color: var(--text-color-highlight-t);
  padding: 10px 15px;
  border-radius: 1rem;
}

.mensaje-citado {
  background-color: rgba(255, 255, 255, 0.5);
  border-left: 4px solid var(--text-color-highlight-light);
  padding: 6px 10px;
  margin: 6px 0px 6px 0px;
  border-radius: 8px;
  font-size: 0.9rem;
  color: black;
  font-style: italic;
}
.mensaje-citado .cont-puntos {
  padding-top: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1rem;
  max-height: 6rem;
}

.chat-feedback-context {
  cursor: pointer;
  margin: 2px 0 8px 0;
  padding: 6px 10px 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: rgba(0, 0, 0, 0.08);
  font-style: normal;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
@media (hover: hover) {
  .chat-feedback-context:hover {
    background: rgba(0, 0, 0, 0.12);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  }
}
.chat-message.other .chat-feedback-context {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
}
@media (hover: hover) {
  .chat-message.other .chat-feedback-context:hover {
    background: rgba(255, 255, 255, 0.14);
  }
}
.chat-feedback-context__top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.chat-feedback-context__icon {
  display: flex;
  font-size: 0.75rem;
  line-height: 1;
  opacity: 0.88;
}
.message-content.own .chat-feedback-context__kicker {
  color: rgba(0, 0, 0, 0.55);
}
.message-content.other .chat-feedback-context__kicker {
  color: rgba(255, 255, 255, 0.7);
}
.chat-feedback-context__kicker {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.message-content.own .chat-feedback-context__block {
  color: #1a1a1a;
}
.message-content.other .chat-feedback-context__block {
  color: var(--text-color-highlight);
}
.chat-feedback-context__block {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
  word-break: break-word;
}

.input-chat-all {
  flex-shrink: 0;
  background: var(--bg-color);
}

.mensaje-citado-activo {
  display: flex;
  flex-direction: column;
  background-color: #686868;
  border-left: 4px solid var(--text-color-highlight);
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.9rem;
  color: black;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  margin: 0.5rem;
  font-style: italic;
}
.mensaje-citado-activo .mensaje-citado-contenido {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.mensaje-citado-activo .mensaje-citado-contenido .contenido {
  flex: 1;
  color: #333333;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2rem;
  max-height: 3.6rem;
}
.mensaje-citado-activo .mensaje-citado-contenido button {
  background: none;
  border: 1px solid #333333;
  border-radius: 3rem;
  padding: 2px 6px;
  font-size: 1.1rem;
  color: #333333;
  cursor: pointer;
  transition: color 0.2s;
}
@media (hover: hover) {
  .mensaje-citado-activo .mensaje-citado-contenido button:hover {
    color: black;
  }
}

.fecha-separador {
  display: inline-block;
  justify-content: center;
  padding: 6px 12px;
  font-size: 0.85rem;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  margin: 1.2rem auto;
  background-color: rgba(255, 255, 255, 0.5);
  color: black;
}

.icon-chat-wrapper {
  position: relative;
  display: inline-block;
  overflow: visible;
}

.notif-dot-host {
  position: relative;
  overflow: visible;
}

.notif-btn {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  align-items: stretch;
  overflow: visible;
  max-width: 100%;
}

.notif-btn > button {
  position: relative;
  z-index: 0;
}

.notif-btn--alert > button {
  animation: notif-border-breathe 2.1s ease-in-out infinite;
}

/* El boton de soporte de la cabecera indica los no leidos con su badge; le quitamos
   el aro de alerta (que al ser redondo desentonaba con los cuadrados del programa). */
.soporte-avatar-movil.notif-btn--alert > button {
  animation: none;
  box-shadow: none;
}

.notif-btn__badge {
  position: absolute;
  top: -5px;
  right: -3px;
  z-index: 2;
  box-sizing: border-box;
  width: 22px;
  min-width: 22px;
  min-height: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  font-size: 0.55rem;
  letter-spacing: -0.02em;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: radial-gradient(circle at 32% 28%, #4ce8ff 0%, #19DAF4 52%, #12a4bd 100%);
  color: var(--text-color-highlight-t, #000);
  border: 2px solid var(--bg-color2);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 2px 6px rgba(0, 0, 0, 0.45);
}

/* Junto a texto (pestaña Amigos, cabecera solicitudes): mismo look que arriba, sin absolute */
.notif-btn__badge--inline {
  position: static;
  margin-left: 6px;
  vertical-align: middle;
  width: auto;
  min-width: 22px;
  min-height: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  pointer-events: none;
}

/* Social en barra superior / menú: badge en esquina superior derecha del ítem (no sobre el texto) */
.div-nav-social-nav {
  position: relative;
  overflow: visible;
}

.div-nav-social-nav.div-nav-social-nav--alert {
  padding-right: 10px;
}

.nav-social-link-text {
  display: inline;
}

.notif-btn__badge--header-social {
  position: absolute;
  top: -4px;
  right: -2px;
  left: auto;
  z-index: 2;
  transform: translate(55%, -18%);
  transform-origin: top right;
}

@media (max-width: 1000px) {
  .collapse-navbar .notif-btn__badge--header-social {
    transform: translate(45%, -12%);
  }
}

/* Pestaña AMIGOS: badge pegada a la derecha del texto (mismo flex + gap que .semana-tab-nombre) */
.social-tabs .semana-tab-nombre .notif-btn__badge--inline {
  margin-left: 0;
}

/* Cabecera sección (p.ej. solicitudes pendientes): esquina superior derecha */
.social-section-header--notif-corner {
  position: relative;
  align-items: flex-start;
  padding-right: 28px;
  min-height: 26px;
}

.notif-btn__badge--section-corner {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  margin: 0;
  transform: none;
}

.div-nav-social-nav--alert .icon-comunidad {
  position: relative;
  z-index: 0;
}

@keyframes notif-border-breathe {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(25, 218, 244, 0.2), 0 0 0 0 rgba(25, 218, 244, 0.08);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(25, 218, 244, 0.55), 0 0 12px rgba(25, 218, 244, 0.28);
  }
}

.notificacion-punto {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle at 32% 28%, #4ce8ff 0%, #19DAF4 52%, #12a4bd 100%);
  border: 2px solid var(--bg-color2);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 14px rgba(25, 218, 244, 0.5);
  animation: notif-dot-glow 1.45s ease-in-out infinite;
}
.notificacion-punto::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(25, 218, 244, 0.7);
  animation: notif-dot-ping 1.75s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes notif-dot-glow {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 12px rgba(25, 218, 244, 0.45);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 3px 10px rgba(0, 0, 0, 0.55), 0 0 22px rgba(25, 218, 244, 0.8);
  }
}
@keyframes notif-dot-ping {
  0% {
    transform: translate(-50%, -50%) scale(0.75);
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.35);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .notif-btn--alert > button {
    animation: none;
    box-shadow: 0 0 0 1px rgba(25, 218, 244, 0.4);
  }
  .notificacion-punto {
    animation: none;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 16px rgba(25, 218, 244, 0.55);
  }
  .notificacion-punto::after {
    display: none;
  }
}

.video-preview {
  width: 100%;
  max-height: 70vh;
  border-radius: 10px;
  background-color: #000;
}

.preview-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-height: 80vh;
  width: 100%;
}

.image-preview {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 10px;
  object-fit: contain;
}

.chat-video-thumbnail-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
}

.chat-video-thumbnail {
  width: 100%;
  max-height: 250px;
  object-fit: cover;
  background-color: #000;
  display: block;
}

.play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.4);
  transition: background 0.2s;
}

.play-overlay i {
  font-size: 3rem;
  color: white;
}

@media (hover: hover) {
  .play-overlay:hover {
    background-color: rgba(0, 0, 0, 0.6);
  }
}
.chat-audio-player {
  border-radius: 1rem;
  display: block;
  margin: 1rem auto;
  max-width: 100%;
  cursor: pointer;
  margin-top: 10px;
}

.typing-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  margin-top: 4px;
}

.typing-avatars {
  display: flex;
  align-items: center;
}

.typing-avatars .typing-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #686868;
  margin-left: -8px;
}
.typing-avatars .typing-avatar:first-child {
  margin-left: 0;
}

.typing-dots {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 0;
}
.typing-dots span {
  width: 6px;
  height: 6px;
  background-color: #686868;
  border-radius: 50%;
  animation: typingBounce 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingBounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}
.audio-pulse-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 3px;
}

.pulse-bar {
  width: 3px;
  border-radius: 2px;
  background-color: var(--text-color-highlight);
  animation: pulseBar 1s ease-in-out infinite;
  height: 8px;
}
.pulse-bar:nth-child(1) {
  animation-delay: 0.1s;
}
.pulse-bar:nth-child(2) {
  animation-delay: 0.2s;
}
.pulse-bar:nth-child(3) {
  animation-delay: 0.3s;
}
.pulse-bar:nth-child(4) {
  animation-delay: 0.4s;
}
.pulse-bar:nth-child(5) {
  animation-delay: 0.5s;
}
.pulse-bar:nth-child(6) {
  animation-delay: 0.6s;
}
.pulse-bar:nth-child(7) {
  animation-delay: 0.7s;
}
.pulse-bar:nth-child(8) {
  animation-delay: 0.8s;
}
.pulse-bar:nth-child(9) {
  animation-delay: 0.9s;
}

@keyframes pulseBar {
  0%, 100% {
    height: 6px;
    opacity: 0.4;
  }
  50% {
    height: 24px;
    opacity: 1;
  }
}
.audio-recorder-timer {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  min-width: 45px;
  text-align: center;
  color: var(--text-color);
}

.check-leido {
  font-size: 11px;
  color: var(--text-color-highlight);
  align-self: flex-end;
  margin-left: 3px;
  margin-bottom: 2px;
}
.check-leido.no-leido {
  visibility: hidden;
}

@media (max-width: 768px) {
  .notificacion-punto {
    top: -3px;
    right: -3px;
    width: 13px;
    height: 13px;
  }
}
/* ========== Lista de Notificaciones (dentro de Modal) ========== */
.notif-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 8px;
}

.notif-tab {
  flex: 1;
  padding: 8px 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255,255,255,0.45);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s;
}

.notif-tab.activa {
  color: var(--text-color-highlight);
  border-bottom-color: var(--text-color-highlight);
}

.notif-panel-list {
  display: flex;
  flex-direction: column;
}

.notif-panel-empty {
  padding: 2rem;
  text-align: center;
  color: rgba(255,255,255,0.35);
  font-size: 0.85rem;
}

.notif-panel-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.notif-panel-item:hover {
  background: rgba(255,255,255,0.04);
}

.notif-panel-item.notif-no-leida {
  background: none;
}

.notif-panel-foto {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.notif-panel-body {
  flex: 1;
  min-width: 0;
}

.notif-panel-texto {
  font-size: 0.85rem;
  color: var(--text-color);
  margin: 0;
  line-height: 1.35;
}

.notif-panel-subtexto {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  margin: 3px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notif-panel-tiempo {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.35);
}

.notif-delete-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.25);
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
  font-size: 0.75rem;
  align-self: flex-start;
  margin-top: 2px;
  transition: color 0.15s;
}

.notif-delete-btn:hover {
  color: rgba(255,255,255,0.6);
}

/* ========== Image Editor (WhatsApp-style) ========== */
.image-editor-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 100000;
  display: flex;
  flex-direction: column;
}

.image-editor-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2;
}

.image-editor-top-actions {
  display: flex;
  gap: 8px;
}

.image-editor-action-btn {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  backdrop-filter: blur(4px);
}
@media (hover: hover) {
  .image-editor-action-btn:hover {
    background: rgba(255, 255, 255, 0.25);
  }
}

.image-editor-send-btn {
  background: var(--text-color-highlight, #19daf4);
  color: #000;
  font-weight: 600;
}
@media (hover: hover) {
  .image-editor-send-btn:hover {
    opacity: 0.85;
  }
}

.image-editor-canvas-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  position: relative;
  padding: 8px;
}

.image-editor-canvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.image-editor-crop-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.image-editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 16px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2;
}

.image-editor-tool-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 12px;
  transition: all 0.2s;
  font-size: 11px;
}
@media (hover: hover) {
  .image-editor-tool-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
  }
}
.image-editor-tool-btn.active {
  color: var(--text-color-highlight, #19daf4);
  background: rgba(255, 255, 255, 0.1);
}

.image-editor-sub-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;
  flex-shrink: 0;
  background: rgba(30, 30, 30, 0.8);
}

.image-editor-color-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: transform 0.15s;
  padding: 0;
}
@media (hover: hover) {
  .image-editor-color-dot:hover {
    transform: scale(1.15);
  }
}
.image-editor-color-dot.active {
  border-color: #fff;
  transform: scale(1.2);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

.image-editor-separator {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 4px;
}

.image-editor-width-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.image-editor-width-btn.active {
  border-color: var(--text-color-highlight, #19daf4);
}

.image-editor-line-sample {
  display: block;
  width: 18px;
  background: #fff;
  border-radius: 2px;
}

.image-editor-text-input {
  position: fixed;
  z-index: 100002;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.6);
  color: inherit;
  font-size: 18px;
  font-weight: bold;
  outline: none;
  min-width: 100px;
  max-width: 60vw;
  padding: 4px 2px;
  font-family: sans-serif;
}

/* ========== Video Trimmer (WhatsApp/Instagram-style) ========== */
.video-trimmer-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 100000;
  display: flex;
  flex-direction: column;
}
.video-trimmer-overlay > .uploading-container {
  flex: 1;
}

.image-editor-overlay > .uploading-container {
  flex: 1;
}

.vt-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2;
}

.vt-duration-label {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.vt-video-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  padding: 8px;
}

.vt-video {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  object-fit: contain;
}

.vt-timeline-container {
  position: relative;
  height: 80px;
  margin: 0 16px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: #1a1a1a;
}

.vt-thumb-strip {
  display: flex;
  height: 100%;
  width: 100%;
}

.vt-thumb {
  flex: 1;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.vt-range-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  border: 2px solid var(--text-color-highlight, #19daf4);
  border-radius: 4px;
  pointer-events: none;
  z-index: 2;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.vt-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.vt-handle-left {
  transform: translateX(-100%);
  background: var(--text-color-highlight, #19daf4);
  border-radius: 6px 0 0 6px;
}

.vt-handle-right {
  transform: translateX(0);
  background: var(--text-color-highlight, #19daf4);
  border-radius: 0 6px 6px 0;
}

.vt-handle-bar {
  width: 3px;
  height: 24px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 2px;
}

.vt-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 20px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.6);
}

.vt-slider-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vt-label {
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.vt-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  outline: none;
}
.vt-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text-color-highlight, #19daf4);
  cursor: pointer;
  border: 2px solid #fff;
}
.vt-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text-color-highlight, #19daf4);
  cursor: pointer;
  border: 2px solid #fff;
}

.vt-play-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--text-color-highlight, #19daf4);
  color: #000;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
@media (hover: hover) {
  .vt-play-btn:hover {
    opacity: 0.85;
  }
}

@media (max-width: 768px) {
  .vt-timeline-container {
    height: 60px;
    margin: 0 8px;
  }
  .vt-controls {
    padding: 8px 12px 16px;
    gap: 8px;
  }
  .vt-play-btn {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
}
/* ── Scroll to bottom button ── */
.btn-scroll-bottom {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--bg-color2, #1e1e1e);
  color: var(--text-color, #eee);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.btn-scroll-bottom i {
  font-size: 16px;
}
@media (hover: hover) {
  .btn-scroll-bottom:hover {
    background: var(--bg-color3, #333);
    transform: scale(1.08);
  }
}
.btn-scroll-bottom:active {
  transform: scale(0.95);
}

/* ── Swipe to reply indicator ── */
.swipe-reply-indicator {
  position: absolute;
  left: -36px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-color2, #2a2a2a);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.swipe-reply-indicator i {
  font-size: 13px;
  color: var(--text-color-highlight);
}

/* ── Reacciones ── */
.reacciones-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: -8px;
  margin-bottom: 2px;
  padding: 0 52px;
  position: relative;
  z-index: 1;
}
.reacciones-container.own {
  justify-content: flex-end;
  padding-right: 12px;
}
.reacciones-container.other {
  justify-content: flex-start;
  padding-left: 52px;
}

.reaccion-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 12px;
  background: var(--bg-color3, #2a2a2a);
  border: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.reaccion-badge.mia {
  border-color: var(--text-color-highlight);
  background: rgba(var(--text-color-highlight), 0.15);
}
@media (hover: hover) {
  .reaccion-badge:hover {
    transform: scale(1.1);
  }
}
.reaccion-badge .reaccion-emoji {
  font-size: 16px;
}
.reaccion-badge .reaccion-count {
  font-size: 11px;
  color: var(--text-color);
  font-weight: 600;
}

/* ── Panel detalle reacciones ── */
.reaccion-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.reaccion-detalle-panel {
  position: fixed;
  z-index: 1000000;
  background: #1a1a1a;
  border: 1px solid #333;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.reaccion-detalle-panel.mobile {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85vw;
  max-width: 340px;
  max-height: 50vh;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.reaccion-detalle-panel.desktop {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  max-height: 350px;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

@keyframes slideUpSheet {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
.reaccion-detalle-drag-bar {
  width: 36px;
  height: 4px;
  background: var(--bg-text-grises);
  border-radius: 2px;
  margin: 8px auto 0;
  opacity: 0.4;
}
.desktop .reaccion-detalle-drag-bar {
  display: none;
}

.reaccion-detalle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #333;
  font-weight: 600;
  font-size: 0.95rem;
  color: #e0e0e0;
}

.reaccion-detalle-close {
  background: none;
  border: none;
  color: var(--bg-text-grises);
  cursor: pointer;
  padding: 4px;
  font-size: 16px;
}

.reaccion-detalle-list {
  overflow-y: auto;
  padding: 4px 0;
}

.reaccion-detalle-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: default;
}
@media (hover: hover) {
  .reaccion-detalle-item:hover {
    background: var(--bg-color3, #333);
  }
}
.reaccion-detalle-item.propio {
  cursor: pointer;
}

.reaccion-detalle-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.reaccion-detalle-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.reaccion-detalle-nombre {
  font-size: 14px;
  color: var(--text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reaccion-detalle-hint {
  font-size: 11px;
  color: var(--text-color-highlight);
}

.reaccion-detalle-emoji {
  font-size: 22px;
  flex-shrink: 0;
}

/* ── Menu contextual de mensaje ── */
.emoji-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
}

.mensaje-context-menu {
  position: fixed;
  z-index: 1000;
  width: 280px;
  max-height: 420px;
  background: var(--bg-color2, #1e1e1e);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: emojiPickerIn 0.15s ease-out;
}

.quick-emoji-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px 8px;
  border-bottom: 1px solid var(--bg-color3, #333);
  flex-shrink: 0;
}

.quick-emoji-btn {
  background: none;
  border: none;
  font-size: 26px;
  padding: 4px;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
}
@media (hover: hover) {
  .quick-emoji-btn:hover {
    background: var(--bg-color3, #333);
    transform: scale(1.15);
  }
}
.quick-emoji-btn:active {
  transform: scale(0.9);
}
.quick-emoji-btn.plus-btn {
  font-size: 20px;
  color: var(--text-color, #ccc);
  opacity: 0.6;
  font-weight: 700;
}
@media (hover: hover) {
  .quick-emoji-btn.plus-btn:hover {
    opacity: 1;
  }
}

.context-actions {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--bg-color3, #333);
  flex-shrink: 0;
}

.context-action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: none;
  border: none;
  color: var(--text-color, #eee);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.context-action-btn i {
  font-size: 16px;
  opacity: 0.7;
  width: 20px;
  text-align: center;
}
@media (hover: hover) {
  .context-action-btn:hover {
    background: var(--bg-color3, #333);
  }
}
.context-action-btn:active {
  background: rgba(255, 255, 255, 0.08);
}
.context-action-btn + .context-action-btn {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

@keyframes emojiPickerIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.emoji-picker-tabs {
  display: flex;
  gap: 0;
  padding: 6px 4px;
  border-bottom: 1px solid var(--bg-color3, #333);
  flex-shrink: 0;
}
.emoji-picker-tabs .emoji-tab {
  flex: 1;
  background: none;
  border: none;
  font-size: 18px;
  padding: 6px 0;
  cursor: pointer;
  border-radius: 8px;
  opacity: 0.5;
  transition: all 0.15s;
}
.emoji-picker-tabs .emoji-tab.activa {
  opacity: 1;
  background: var(--bg-color3, #333);
}
@media (hover: hover) {
  .emoji-picker-tabs .emoji-tab:hover {
    opacity: 0.8;
  }
}

.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  padding: 8px;
  overflow-y: auto;
  flex: 1;
}
.emoji-picker-grid .emoji-btn {
  background: none;
  border: none;
  font-size: 22px;
  padding: 6px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (hover: hover) {
  .emoji-picker-grid .emoji-btn:hover {
    background: var(--bg-color3, #333);
    transform: scale(1.2);
  }
}
.emoji-picker-grid .emoji-btn:active {
  transform: scale(0.95);
}

/* ── Chat message highlight (WhatsApp-style) ── */
@keyframes chat-highlight-fade {
  0% {
    background-color: rgba(25, 218, 244, 0.25);
  }
  40% {
    background-color: rgba(25, 218, 244, 0.18);
  }
  100% {
    background-color: transparent;
  }
}
.chat-message-focus {
  animation: chat-highlight-fade 2s ease-out forwards;
  border-radius: 8px;
}

.image-preview-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  max-height: 80vh;
}

.cropper-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  border-radius: 10px;
}

.cropper-container {
  max-width: 100%;
  max-height: 80vh;
  overflow: hidden;
}

.image-preview {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
}

.modal-footer {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
}

.botones-modal-div {
  display: flex;
  align-items: center;
  margin-top: 2rem;
  gap: 1rem;
}

:root {
  --bg-color: #FFFFFF;
  --bg-color2: #F7F7F7;
  --bg-color3: #F0F0F0;
  --bg-color4: #EBEBEB;
  --text-color: #000000;
  --text-color-highlight: #19DAF4;
  --text-color-highlight-light: #03383F;
  /*--text-color-highlight: #19DAF4;*/
  --bg-highlight-osc: #1D1C5F;
  --text-color-highlight-t: black;
  --bg-hover: #E3E8EB;
  --bg-text-grises: #7A7A7A;
  --bg-alert: #EDEDFF;
  --tabla-text-highlight: #1F1F1F;
  --chat-username: #FFFFFF;
  --inset-box: #03383F;
}

[data-theme=Dark] {
  --bg-color: #1F1F1F;
  --bg-color2: #0F0F0F;
  --bg-color3: #353535;
  --bg-color4: #9C9C9C;
  --text-color: #FFFFFF;
  --text-color-highlight: #19DAF4;
  --text-color-highlight-light: #03383F;
  --text-color-highlight-t: black;
  --bg-highlight-osc: #3B3E18;
  --bg-hover: #555555;
  --bg-text-grises: #D6D6D6;
  --bg-alert: #3B3E18;
  --tabla-text-highlight: #FFFFFF;
  --chat-username: #000000;
  --inset-box: #03383F;
}

.perfil-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background: var(--bg-color);
  border-radius: 12px;
  flex: 1;
  min-height: 0;
}

.titulo-perfil {
  display: flex;
  width: 100%;
}
.titulo-perfil h3 {
  font-family: "Manuka";
  font-size: 2rem !important;
  padding: 0;
}

/*.perfil-parte1 {
    width: 100%;
    display: flex;
    gap: 1rem;
    overflow: hidden;
}*/
.perfil-imagen-container {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  flex-shrink: 0;
}

.perfil-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 100%;
}

.perfil-datos-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  overflow: hidden;
}

.perfil-avatar {
  width: 100%;
  aspect-ratio: 16/9;
  display: block;
  border-radius: 8px;
  object-fit: cover;
  border: 2px dashed #737373;
}

#perfilModal .perfil-imagen-container {
  width: 60%;
  margin: 0 auto;
}

#perfilModal .perfil-avatar {
  aspect-ratio: 1;
}

.perfil-btn-cambiar-foto {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: black;
  color: #EEEEEE;
  font-size: 13px;
  border: none;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s ease;
  opacity: 70%;
}
.perfil-btn-cambiar-foto i {
  font-size: 15px;
  position: relative;
  top: 2px;
}

@media (hover: hover) {
  .perfil-btn-cambiar-foto:hover {
    opacity: 1;
  }
}
.perfil-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--text-color);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.perfil-input-text, .perfil-input-select, .perfil-input-textarea {
  padding: 10px;
  background: var(--bg-color3);
  border: 1px solid var(--bg-color4);
  border-radius: 8px;
  color: var(--text-color);
  font-size: 16px;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  overflow: hidden;
}

.perfil-input-textarea {
  resize: none;
  height: 60px;
  font-family: sans-serif;
}

/* Selector de tarifas/periodicidad del detalle de programación: los <select> llevan
   appearance:none, así que dibujamos una flecha (chevron) a la derecha para indicar que
   hay más opciones. Usamos mask + currentColor para respetar el tema. */
.detalle-programacion-container .input-wrapper {
  position: relative;
}
.detalle-programacion-container .input-wrapper > select.perfil-input-text {
  padding-right: 34px;
}
.detalle-programacion-container .input-wrapper:has(> select.perfil-input-text)::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  pointer-events: none;
  opacity: 0.7;
  background-color: var(--text-color);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
}

.perfil-datos {
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.perfil-input-container {
  width: 100%;
  gap: 6px;
  display: flex;
  flex-direction: column;
}

.perfil-btn-guardar {
  display: flex;
  justify-content: center;
  background: black;
  color: white;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s ease;
  text-align: center;
  width: 100%;
}
.perfil-btn-guardar i {
  padding: 0px 3px 0px 0px;
  font-size: 15px;
}

@media (hover: hover) {
  .perfil-btn-guardar:hover {
    background: #3B3E18;
  }
}
.foto-perfil-clasificacion {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  display: block;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #686868;
}

.perfil-avatar-program {
  width: 3em;
  height: 3em;
  min-width: 3em;
  min-height: 3em;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #686868;
}

.icon-stripe {
  width: 6rem;
  height: 3rem;
  border-radius: 50%;
}

.btn-stripe {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.stripe-onboarding {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

.stripe-onboarding-estado {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

.stripe-onboarding-estado i {
  font-size: 16px;
}

.stripe-onboarding-estado--ok {
  color: #2ecc71;
}

.stripe-onboarding-estado--warn {
  color: #f0a500;
}

.stripe-onboarding-estado--neutral,
.stripe-onboarding-estado--info {
  font-weight: 500;
  opacity: 0.75;
}

.stripe-onboarding-datos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  margin: 0;
  font-size: 13px;
}

.stripe-onboarding-datos dt {
  font-weight: 600;
  opacity: 0.7;
}

.stripe-onboarding-datos dd {
  margin: 0;
  word-break: break-word;
}

.stripe-onboarding-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(128, 128, 128, 0.3);
  border-top-color: #635bff;
  border-radius: 50%;
  animation: stripe-onboarding-spin 0.8s linear infinite;
}

@keyframes stripe-onboarding-spin {
  to {
    transform: rotate(360deg);
  }
}

.stripe-onboarding-btn {
  align-self: flex-start;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease, opacity 0.15s ease;
}

.stripe-onboarding-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.stripe-onboarding-btn:hover:not(:disabled) {
  filter: brightness(1.08);
}

.stripe-onboarding-btn--primario {
  background: #635bff;
  color: #fff;
}

.stripe-onboarding-btn--secundario {
  background: transparent;
  color: #635bff;
  border: 1px solid #635bff;
}

.rm-box {
  background-color: var(--bg-color);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  padding: 0.3rem;
}

.rm-titulo {
  font-size: 1.25rem;
  font-weight: bold;
}

/* ═══ Calculadora: pestañas y calculadora básica ═══ */
.calc-tabs {
  display: flex;
  border-bottom: 1px solid #333;
  margin-bottom: 10px;
}
.calc-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-color);
  opacity: 0.5;
  cursor: pointer;
  font-size: 0.85rem;
  transition: opacity 0.15s, border-color 0.15s;
}
.calc-tab:hover {
  opacity: 0.8;
}
.calc-tab.active {
  opacity: 1;
  border-bottom-color: var(--text-color-highlight);
}
.calc-tab i {
  font-size: 0.85rem;
}
.basic-calc {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
}
.basic-calc-display {
  background: #2a2a2a;
  border-radius: 12px;
  padding: 18px 20px;
  text-align: right;
  flex-shrink: 0;
}
.basic-calc-expression {
  font-size: 0.85rem;
  color: #888;
  min-height: 1.2em;
}
.basic-calc-value,
.basic-calc-result {
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--text-color);
  word-break: break-all;
  line-height: 1.2;
}
.basic-calc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(56px, 1fr);
  gap: 8px;
  flex: 1;
  min-height: 0;
}
.basic-calc-btn {
  padding: 0;
  border: none;
  border-radius: 12px;
  font-size: 1.35rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.1s;
  background: #2a2a2a;
  color: var(--text-color);
}
.basic-calc-btn:hover {
  background: #3a3a3a;
}
.basic-calc-btn.op {
  background: #333;
  color: var(--text-color-highlight);
}
.basic-calc-btn.op:hover {
  background: #444;
}
.basic-calc-btn.fn {
  background: #444;
  color: #ccc;
}
.basic-calc-btn.fn:hover {
  background: #555;
}
.basic-calc-btn.eq {
  background: var(--text-color-highlight);
  color: var(--text-color-highlight-t);
  font-weight: 700;
}
.basic-calc-btn.eq:hover {
  filter: brightness(1.1);
}
.basic-calc-btn.zero {
  grid-column: span 2;
}

/* Onboarding de bienvenida (modal con slides) */
.onboarding {
  display: flex;
  flex-direction: column;
}
.onboarding-carousel {
  position: relative;
}
.onboarding-track {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.onboarding-track::-webkit-scrollbar {
  display: none;
}
.onboarding-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 28px 4px;
  gap: 14px;
}
.onboarding-slide-icon {
  font-size: 3rem;
  color: var(--text-color-highlight);
  line-height: 1;
}
.onboarding-slide-icon i {
  font-size: 3rem;
}
.onboarding-slide-title {
  margin: 0;
  font-family: "Public Sans", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-color);
}
.onboarding-slide-body {
  margin: 0;
  color: var(--text-color);
  opacity: 0.85;
  line-height: 1.5;
}
.onboarding-slide-bullets {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.onboarding-slide-bullets li {
  position: relative;
  padding-left: 24px;
  color: var(--text-color);
  opacity: 0.9;
  line-height: 1.4;
}
.onboarding-slide-bullets li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--text-color-highlight);
  font-weight: 700;
}

/* ===== Tour guiado (driver.js) adaptado al tema WodBuster =====
   Forzamos color de fondo/texto porque los estilos por defecto de driver.js
   (caja blanca con texto oscuro) quedan ilegibles sobre el tema oscuro. */
.driver-popover {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
  max-width: 340px !important;
}
.driver-popover-title {
  font-family: "Public Sans", sans-serif !important;
  color: var(--text-color) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}
.driver-popover-description {
  color: var(--text-color) !important;
  opacity: 0.9;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.driver-popover-progress-text {
  color: var(--text-color) !important;
  opacity: 0.6;
  font-size: 12px !important;
}
.driver-popover-close-btn {
  color: var(--text-color) !important;
  opacity: 0.7;
}
.driver-popover-close-btn:hover {
  opacity: 1;
}
.driver-popover-footer button {
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  text-shadow: none !important;
}
.driver-popover-prev-btn {
  background-color: var(--bg-color3) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--bg-color3) !important;
}
.driver-popover-next-btn {
  background-color: var(--text-color-highlight) !important;
  color: var(--text-color-highlight-t) !important;
  border: 1px solid var(--text-color-highlight) !important;
}
.driver-popover-arrow-side-left.driver-popover-arrow {
  border-left-color: var(--bg-color) !important;
}
.driver-popover-arrow-side-right.driver-popover-arrow {
  border-right-color: var(--bg-color) !important;
}
.driver-popover-arrow-side-top.driver-popover-arrow {
  border-top-color: var(--bg-color) !important;
}
.driver-popover-arrow-side-bottom.driver-popover-arrow {
  border-bottom-color: var(--bg-color) !important;
}

.onboarding-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.onboarding-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: color-mix(in srgb, var(--text-color) 30%, transparent);
}
.onboarding-dot.active {
  background: var(--text-color-highlight);
}
.onboarding-arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text-color);
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 2;
  opacity: 0.7;
}
.onboarding-arrow:hover {
  opacity: 1;
}
.onboarding-arrow-prev {
  left: 0;
}
.onboarding-arrow-next {
  right: 0;
}
.onboarding-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.onboarding-skip {
  background: transparent;
  border: none;
  color: var(--text-color);
  opacity: 0.6;
  cursor: pointer;
  font-size: 0.95rem;
}
.onboarding-skip:hover {
  opacity: 1;
}
.onboarding-next {
  background: var(--text-color-highlight);
  color: var(--text-color-highlight-t, #000);
  border: none;
  border-radius: 10px;
  padding: 10px 22px;
  font-weight: 700;
  cursor: pointer;
}
.onboarding-next:hover {
  filter: brightness(1.08);
}

.rm-header {
  display: flex;
  justify-content: space-between;
  margin: 0.5rem;
  align-items: center;
  gap: 2px;
}

.rm-btn-nuevo {
  background: var(--bg-color);
  color: var(--text-color);
  border: 1px solid var(--text-color);
  border-radius: 6px;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.1rem;
  transition: background 0.2s ease;
}
.rm-btn-nuevo i {
  font-size: 1.2rem;
  padding-top: 2px;
}

@media (hover: hover) {
  .rm-btn-nuevo:hover {
    background-color: var(--bg-hover);
    color: var(--text-color-highlight);
  }
}
.rm-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  table-layout: auto;
}

.rm-tabla thead {
  background-color: var(--bg-color2);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--text-color);
}

.rm-tabla th,
.rm-tabla td {
  padding: 5px;
  text-align: left;
}

.rm-tabla th:nth-child(1),
.rm-tabla td:nth-child(1) {
  width: 28%;
}

.rm-tabla th:nth-child(2),
.rm-tabla td:nth-child(2) {
  width: 20%;
}

.rm-tabla th:nth-child(3),
.rm-tabla td:nth-child(3) {
  width: 30%;
}

.rm-tabla td:nth-child(3) {
  word-break: break-word;
  white-space: normal;
}

.rm-tabla th:nth-child(4),
.rm-tabla td:nth-child(4) {
  width: 15%;
  text-align: right;
}

.rm-tabla tbody tr {
  border-bottom: 1px solid var(--bg-color3);
}

.rm-actions {
  display: flex;
  gap: 0.2rem;
}

.rm-btn-editar,
.rm-btn-borrar {
  background: none;
  border: none;
  cursor: pointer;
  padding-top: 10px;
}
.rm-btn-editar i,
.rm-btn-borrar i {
  color: var(--text-color);
  font-size: 15px;
}
.rm-btn-editar i:hover,
.rm-btn-borrar i:hover {
  color: var(--text-color-highlight);
}

.rm-btn-borrar i {
  color: red;
}

.rm-loading,
.rm-vacio {
  color: #999;
  font-style: italic;
  margin-top: 1rem;
}

/* Modal interno */
.rm-modal-interno {
  background: var(--bg-color2);
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-top: 1rem;
}
.rm-modal-interno h5 {
  margin-bottom: 15px;
}

.rm-input {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 0.75rem;
  border: 1px solid #333333;
  border-radius: 4px;
}

.rm-modal-botones {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.rm-btn-guardar {
  background: var(--bg-color3);
  color: var(--text-color);
  padding: 8px 12px;
  border: 1px solid var(--bg-text-grises);
  cursor: pointer;
  border-radius: 5px;
}

.rm-btn-cancelar {
  background: red;
  color: white;
  padding: 8px 12px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.cerrarSesion {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 10px;
}

.cerrarSesion-part1 {
  width: 65%;
}

.cerrarSesion-part2 {
  width: 35%;
}

.btn-desconectar {
  display: flex;
  justify-content: center;
  background: none;
  color: var(--text-color);
  border: 1px solid var(--text-color);
  padding: 12px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s ease;
  text-align: center;
  width: 100%;
}

.perfil-autosave-msg {
  text-align: center;
  font-size: 13px;
  color: var(--text-color-highlight);
  padding: 6px 0;
  animation: fadeInOut 2s ease forwards;
}
.perfil-autosave-msg i {
  font-size: 12px;
  margin-right: 4px;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@media (hover: hover) {
  .btn-desconectar:hover {
    background-color: var(--bg-hover);
    color: var(--text-color-highlight);
  }
}
:root {
  --bg-color: #FFFFFF;
  --bg-color2: #F7F7F7;
  --bg-color3: #F0F0F0;
  --bg-color4: #EBEBEB;
  --text-color: #000000;
  --text-color-highlight: #19DAF4;
  --text-color-highlight-light: #03383F;
  /*--text-color-highlight: #19DAF4;*/
  --bg-highlight-osc: #1D1C5F;
  --text-color-highlight-t: black;
  --bg-hover: #E3E8EB;
  --bg-text-grises: #7A7A7A;
  --bg-alert: #EDEDFF;
  --tabla-text-highlight: #1F1F1F;
  --chat-username: #FFFFFF;
  --inset-box: #03383F;
}

[data-theme=Dark] {
  --bg-color: #1F1F1F;
  --bg-color2: #0F0F0F;
  --bg-color3: #353535;
  --bg-color4: #9C9C9C;
  --text-color: #FFFFFF;
  --text-color-highlight: #19DAF4;
  --text-color-highlight-light: #03383F;
  --text-color-highlight-t: black;
  --bg-highlight-osc: #3B3E18;
  --bg-hover: #555555;
  --bg-text-grises: #D6D6D6;
  --bg-alert: #3B3E18;
  --tabla-text-highlight: #FFFFFF;
  --chat-username: #000000;
  --inset-box: #03383F;
}

.market-container {
  padding: 1rem;
  background-color: var(--bg-color2);
  flex: 1;
}

.grid-market {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 0.7rem;
}

.card-programacion {
  background-color: var(--bg-color);
  border-radius: 10px;
  height: 100%;
  max-height: none;
  box-shadow: 0 0 10px var(--bg-hover);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  z-index: 1;
  /*overflow-y: hidden;*/
  /* Firefox: scroll fino y transparente */
  /*scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;*/
  /* WebKit: scroll fino y transparente */
  /*&::-webkit-scrollbar {
      width: 3px;
  }

  &::-webkit-scrollbar-thumb {
      background-color: rgba(255, 255, 255, 0.15); // muy sutil
      border-radius: 10px;
  }

  &::-webkit-scrollbar-track {
      background: transparent; // sin fondo negro
  }*/
}
@media (hover: hover) {
  .card-programacion:hover {
    transform: scale(1.03);
  }
}

.card-foto {
  width: 100%;
  height: 180px;
  min-height: 180px;
  max-height: 180px;
  object-fit: cover;
  border-radius: 3%;
}

.card-info {
  padding: 1rem;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  gap: 0.35rem;
}

.titulo-market-wrapper {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  line-height: 1.1;
  flex-shrink: 0;
  min-height: 0;
}
.titulo-market-wrapper h3 {
  font-family: "Manuka";
  font-size: 3rem;
  margin: 0.25rem 0;
  padding: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.card-descripcion-wrapper {
  overflow: hidden;
  position: relative;
  margin-bottom: 0.8rem;
}

.card-descripcion {
  font-size: 0.9rem;
  color: var(--bg-text-grises);
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  line-height: 1.2rem;
  height: 3.6rem;
}
.card-descripcion :where(ul, ol) {
  margin: 0.15em 0 0.15em 0.5em;
  padding-left: 1em;
  max-width: 100%;
  box-sizing: border-box;
  list-style-position: outside;
}
.card-descripcion :where(li) {
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}
.card-descripcion :where(p) {
  margin: 0.15em 0;
}

.etiquetas {
  margin-top: 0.5rem;
}

.etiqueta {
  display: inline-block;
  background: #333333;
  color: var(--text-color);
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
  border-radius: 4px;
  margin-right: 0.5rem;
}

.etiqueta.elite {
  background-color: #e91e63;
}

.etiqueta.presencial {
  background-color: #3f51b5;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
  flex-shrink: 0;
  padding-top: 0.35rem;
  min-height: 3rem;
  row-gap: 0.35rem;
}

.precio {
  font-size: 3rem;
  font-family: "Manuka";
  color: var(--text-color);
  line-height: 1;
}

.precio-container {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.periodicidad {
  font-size: 15px;
  opacity: 0.8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  max-width: 100%;
}

.save-btn-market {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  background-color: black;
  color: white;
  font-weight: bold;
  padding: 8px 12px 6px 8px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  max-width: 45%;
}
.save-btn-market i {
  padding-right: 2px;
  font-size: 18px;
}

[data-theme=Dark] .save-btn-market {
  background-color: #444444;
}

.market-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  gap: 10px;
}

.div-titulo-contenido {
  display: flex;
  align-items: center;
}

.titulo-market {
  display: flex;
  font-size: 1.5rem;
  font-family: "Public Sans";
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
  margin: 0;
}

.titulo-market i {
  font-size: 1.8rem;
}

.market-search-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.market-consultas-btn {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
}
/* El buscador del market y su boton de consultas comparten altura para que el
   boton de icono quede cuadrado y alineado, no mas alto/ancho que la barra. */
.market-search-wrapper .buscador-market {
  height: 40px;
  box-sizing: border-box;
}
.buscador-market {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: 6px;
  border: 1px solid #333333;
  background-color: var(--bg-color3);
  color: var(--text-color);
  width: 220px;
}

/* Fila: buscador (crece) + boton Crear a la derecha. */
.programs-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.programs-search-row .prog-crear-wrapper {
  flex: 0 0 auto;
  margin-left: auto;
}
/* El buscador y el boton Crear comparten altura para que el boton no sobresalga
   por encima/debajo de la barra. */
.programs-search-row .buscador-market {
  height: 40px;
  box-sizing: border-box;
}
/* En la fila de busqueda el boton Crear solo ajusta su tamano para cuadrar con el
   input; el look discreto (fondo, borde, icono en acento) ya viene de .save-btn. */
.programs-search-row .save-btn {
  height: 40px;
  padding: 0 16px;
  box-sizing: border-box;
}
.programs-search-row .save-btn i {
  font-size: 1.15rem;
}
/* En movil el boton es solo icono (el texto se oculta a <=768px): cuadrado que
   encaja con la altura del buscador en vez de quedar mas grande. */
@media (max-width: 768px) {
  .programs-search-row .save-btn {
    width: 40px;
    padding: 0;
  }
}

/* En escritorio el Soporte vive en el nav superior; el icono junto al avatar es solo movil. */
@media (min-width: 1001px) {
  .soporte-avatar-movil {
    display: none !important;
  }
}

/* Boton de Soporte junto al avatar en la cabecera. */
.header-soporte-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-color);
  cursor: pointer;
}
.header-soporte-btn i {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  line-height: 1;
}
.header-soporte-btn:focus {
  outline: none;
}
.header-soporte-btn:focus-visible {
  outline: 2px solid var(--text-color-highlight);
  outline-offset: 2px;
}

.card-autor {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}

.autor-foto {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #686868;
}

.autor-nombre {
  font-weight: 500;
  font-size: 0.8rem;
}

.detalle-programacion-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.detalle-contenido-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.detalle-foto {
  width: 100%;
  max-height: 250px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.detalle-autor {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem 0rem 2rem 0rem;
  gap: 0.5rem;
}

.autor-foto-1 {
  width: 40px;
  height: 40px;
  border-radius: 20%;
}

.detalle-precio {
  margin-top: 1rem;
  font-size: 2rem;
  font-weight: bold;
}

.detalle-boton-fijo {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  background-color: var(--bg-color);
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.btn-contactar {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  color: var(--text-color-highlight);
  font-weight: bold;
  padding: 10px 14px;
  border: 2px solid var(--text-color-highlight);
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
  gap: 6px;
  transition: background-color 0.2s ease;
}
.btn-contactar i {
  font-size: 15px;
}
@media (hover: hover) {
  .btn-contactar:hover {
    background-color: rgba(25, 218, 244, 0.1);
  }
}

.btn-comprar {
  display: flex;
  justify-content: center;
  background-color: black;
  color: white;
  font-weight: bold;
  padding: 10px 14px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
}
.btn-comprar i {
  font-size: 15px;
}

.cont-precio-btn {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.btn-adquirido {
  background-color: var(--text-color-highlight);
  color: var(--text-color-highlight-t);
  font-weight: bold;
  padding: 10px 14px;
  border: none;
  border-radius: 5px;
  width: 100%;
}

.botones-footer {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Indicativo "Semana de X" (previsualización Ver como usuario).
   Los selectores de los botones llevan doble clase a propósito para ganar en
   especificidad a reglas genéricas como ".action-buttons button" (padding/borde). */
.vista-usuario-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  background: var(--bg-hover);
  border: 1px solid var(--bg-color3);
  border-radius: 999px;
  padding: 2px 4px 2px 2px;
  max-width: 260px;
}
.vista-usuario-badge .vista-usuario-badge-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 0;
  background: none;
  border: none;
  border-radius: 999px;
  color: var(--text-color-highlight);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.1;
  padding: 2px 4px;
}
.vista-usuario-badge .vista-usuario-badge-label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vista-usuario-badge-foto {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.vista-usuario-badge .vista-usuario-badge-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--bg-text-grises);
  cursor: pointer;
  flex-shrink: 0;
}
.vista-usuario-badge .vista-usuario-badge-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-color-highlight);
}
.vista-usuario-badge .vista-usuario-badge-close i {
  font-size: 12px;
  line-height: 1;
}
/* Variante móvil: solo foto + cerrar (sin nombre), compacta */
.vista-usuario-badge--movil {
  max-width: none;
}

/* Etiqueta de descuento */
.badge-descuento {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: var(--text-color-highlight-light);
  color: white;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 4px 8px;
  border-radius: 8px;
  text-transform: uppercase;
  border: 1px solid var(--text-color-highlight);
}

.badge-box {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: var(--text-color-highlight-light);
  color: white;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 4px 8px;
  border-radius: 8px;
  text-transform: uppercase;
  border: 1px solid var(--text-color-highlight);
}

.badge-prueba {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background-color: #16a34a;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 4px 8px;
  border-radius: 8px;
  text-transform: uppercase;
  border: 1px solid #22c55e;
}

.badge-box.badge-pack {
  background-color: #16a34a;
  border-color: #22c55e;
  color: #ffffff;
}

.badge-suscripciones {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.78rem;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  line-height: 1;
  z-index: 2;
}

.badge-suscripciones i {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  line-height: 1;
  opacity: 0.92;
}

.badge-suscripciones span {
  display: flex;
  align-items: center;
  line-height: 1;
}

.market-paginacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 1.5rem 0 0.5rem;
}

.market-page-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-color);
  background: var(--bg-color2);
  border: 1px solid var(--bg-color3);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.market-page-btn:not(:disabled):hover {
  background: var(--bg-hover);
  color: var(--text-color-highlight);
}

.market-page-btn.active {
  background: var(--text-color-highlight);
  border-color: var(--text-color-highlight);
  color: var(--text-color-highlight-t);
  cursor: default;
}

.market-page-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.market-page-nav i {
  font-size: 0.7rem;
}

.market-page-ellipsis {
  min-width: 20px;
  text-align: center;
  color: var(--bg-text-grises);
  font-weight: 600;
}

/* ─── Editor de Pack: lista de items ─── */
.pack-items-list {
  list-style: none;
  padding: 0;
  margin: .5rem 0 0 0;
}

.pack-items-list__row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .25rem;
  border-bottom: 1px solid var(--border-color, #2a2a2a);
}

.pack-items-list__avatar {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.pack-items-list__nombre {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pack-items-list__remove {
  flex: 0 0 auto;
  margin-left: auto;
}

/* ─── PackDetalleModal (market) ─── */
.pack-incluidos {
  width: 100%;
  margin-top: 1rem;
}
.pack-incluidos__titulo {
  display: block;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: .75rem;
}
.pack-items-list__desc {
  font-size: .85rem;
  color: var(--bg-text-grises);
  margin-top: .15rem;
  word-break: break-word;
  /* Recorta a 2 líneas con ellipsis; el detalle completo está a un clic. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pack-items-list__row--clickable {
  cursor: pointer;
  transition: background .15s ease;
}
@media (hover: hover) {
  .pack-items-list__row--clickable:hover {
    background: var(--bg-hover, rgba(255, 255, 255, 0.04));
  }
}
.pack-items-list__chevron {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--bg-text-grises);
  font-size: 14px;
  opacity: .7;
}
.pack-banner-suscrito {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: 100%;
  padding: .6rem .8rem;
  margin: .75rem 0;
  border-radius: 8px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid #22c55e;
  color: #22c55e;
  font-weight: 600;
  font-size: .9rem;
}
.btn-cancelar-suscripcion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  background: #632121;
  color: #ffffff;
  font-weight: bold;
  padding: 10px 14px;
  border: 1px solid #FF5757;
  border-radius: 5px;
}
.btn-cancelar-suscripcion i {
  font-size: 15px;
}

/* ─── Editor de Pack: añadir programación ─── */
.pack-add-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .5rem;
  margin-top: .25rem;
}

.pack-add-row__select {
  flex: 1 1 220px;
  min-width: 0;
}

.pack-add-row__btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ─── Filas/tarjetas de packs en /programaciones ─── */
.tabla-responsive tr.fila-pack td:first-child {
  position: relative;
}

.badge-pack-inline {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  background-color: #16a34a;
  color: #ffffff;
  border: 1px solid #22c55e;
  font-weight: 700;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 6px;
  text-transform: uppercase;
  margin-left: .5rem;
}

/* Precios */
.precio-original {
  text-decoration: line-through;
  color: #999;
  margin-right: 0.5rem;
  font-size: 2.5rem;
  font-family: "Manuka";
}

.precio-descuento {
  color: var(--text-color-highlight);
  font-weight: bold;
  font-size: 3rem;
  font-family: "Manuka";
  line-height: 1;
}

.card-image-wrapper {
  position: relative;
  width: 100%;
}

@media (max-width: 768px) {
  .market-container {
    margin-bottom: 0;
    padding-bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px));
  }
  .titulo-market {
    font-size: 1rem;
  }
  .titulo-market i {
    font-size: 20px;
  }
}
:root {
  --bg-color: #FFFFFF;
  --bg-color2: #F7F7F7;
  --bg-color3: #F0F0F0;
  --bg-color4: #EBEBEB;
  --text-color: #000000;
  --text-color-highlight: #19DAF4;
  --text-color-highlight-light: #03383F;
  /*--text-color-highlight: #19DAF4;*/
  --bg-highlight-osc: #1D1C5F;
  --text-color-highlight-t: black;
  --bg-hover: #E3E8EB;
  --bg-text-grises: #7A7A7A;
  --bg-alert: #EDEDFF;
  --tabla-text-highlight: #1F1F1F;
  --chat-username: #FFFFFF;
  --inset-box: #03383F;
}

[data-theme=Dark] {
  --bg-color: #1F1F1F;
  --bg-color2: #0F0F0F;
  --bg-color3: #353535;
  --bg-color4: #9C9C9C;
  --text-color: #FFFFFF;
  --text-color-highlight: #19DAF4;
  --text-color-highlight-light: #03383F;
  --text-color-highlight-t: black;
  --bg-highlight-osc: #3B3E18;
  --bg-hover: #555555;
  --bg-text-grises: #D6D6D6;
  --bg-alert: #3B3E18;
  --tabla-text-highlight: #FFFFFF;
  --chat-username: #000000;
  --inset-box: #03383F;
}

@media (max-width: 768px) {
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--bg-color);
    padding: 8px 10px 10px;
    justify-content: space-around;
    align-items: flex-start;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 5000;
    border-top: 2px solid var(--bg-color3);
  }
  .bottom-nav .nav-item {
    width: auto !important;
    flex: 1 1 0;
    min-width: 0;
    gap: 1px;
    align-items: center;
    justify-content: center;
  }
  .bottom-nav .nav-item > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    min-width: 2.1rem;
    height: 2.1rem;
    min-height: 2.1rem;
    font-size: 1.55rem;
    line-height: 1;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .bottom-nav .nav-item--perfil {
    max-width: 4.5rem;
  }
  .bottom-nav .nav-item > span {
    line-height: 1.1;
    text-align: center;
  }
  .bottom-nav .nav-item--perfil > span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bottom-nav-perfil-avatar {
    display: block;
    width: 2.1rem;
    height: 2.1rem;
    min-width: 2.1rem;
    min-height: 2.1rem;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    border: 2px solid #686868;
    box-sizing: border-box;
    flex: 0 0 auto;
  }
  .bottom-nav .nav-item--social .notif-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }
  .bottom-nav .nav-item--social .notif-btn > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    min-width: 2.1rem;
    height: 2.1rem;
    min-height: 2.1rem;
    font-size: 1.55rem;
    line-height: 1;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .bottom-nav .nav-item--social .notif-btn__badge {
    top: -8px;
    right: -12px;
  }
  .footer {
    display: none;
  }
  .info-contacto {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .programming-section {
    margin: 1.5rem;
    margin-bottom: 5rem;
  }
  .programming-page {
    flex-direction: column;
    gap: 1rem;
  }
  .search-and-buttons {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
  }
  .buscador-prog {
    flex-grow: 1; /* Ocupa todo el ancho disponible */
    min-width: 60%;
  }
  .contenedor-tabla {
    width: 100%;
    overflow-x: auto;
  }
  .barra-progreso {
    width: 100%;
  }
  .opciones-td {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
  }
  .vista-escritorio {
    display: none;
  }
  .vista-movil {
    display: block;
    margin-bottom: 5rem;
  }
  .save-btn span:not(.notificacion-punto) {
    display: none;
  }
  /* «Leer todos» del panel de feedbacks: en móvil SÍ mostramos el texto (a diferencia del
     resto de save-btn, cuyo texto se oculta en la regla anterior), para que se lea «Leer todos»
     junto al icono en vez de quedar como un icono diminuto. */
  .save-btn.feedbacks-marcar-todos {
    padding: 7px 12px;
    gap: 6px;
  }
  .save-btn.feedbacks-marcar-todos span:not(.notificacion-punto) {
    display: inline;
  }
  .save-btn.feedbacks-marcar-todos i {
    font-size: 14px;
  }
  /* Cabecera móvil: /programaciones (Soporte, Nuevo) = detalle (config, chat, notif, …) */
  .programacion-detalle-container .encabezado-programacion .action-buttons .save-btn,
  .programacion-detalle-container .barra-superior .action-buttons .notif-btn .save-btn,
  .programacion-detalle-container .barra-superior .action-buttons > .save-btn,
  .botones-prog .save-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .programacion-detalle-container .encabezado-programacion .action-buttons .save-btn i,
  .programacion-detalle-container .barra-superior .action-buttons .notif-btn .save-btn i,
  .programacion-detalle-container .barra-superior .action-buttons > .save-btn i,
  .botones-prog .save-btn i {
    padding: 0;
    margin: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
  }
  .opciones-programacion-modal .save-btn span {
    display: inline !important;
  }
  .perfil-datos {
    flex-direction: column;
  }
  .cerrarSesion-part1 {
    width: 60%;
  }
  .cerrarSesion-part2 {
    width: 40%;
  }
  .btn-desconectar {
    padding: 12px 0px;
  }
  .chat-textarea {
    font-size: 16px;
    line-height: 1.5rem;
    padding: 10px 8px;
  }
  .chat-header {
    height: 4em;
  }
  .chat-avatar {
    width: 3em;
    height: 3em;
    min-width: 3em;
    min-height: 3em;
  }
  .chat-username {
    font-size: 35px;
  }
  .chat-messages-container {
    padding-top: 0;
  }
}
@media (max-width: 1000px) {
  .nav-links {
    display: none;
  }
  .language-switcher {
    display: none;
  }
  .btn-confirmar-coach span {
    display: none;
  }
  .btn-confirmar-coach i {
    padding-top: 4px;
  }
}
:root {
  --bg-color: #FFFFFF;
  --bg-color2: #F7F7F7;
  --bg-color3: #F0F0F0;
  --bg-color4: #EBEBEB;
  --text-color: #000000;
  --text-color-highlight: #19DAF4;
  --text-color-highlight-light: #03383F;
  /*--text-color-highlight: #19DAF4;*/
  --bg-highlight-osc: #1D1C5F;
  --text-color-highlight-t: black;
  --bg-hover: #E3E8EB;
  --bg-text-grises: #7A7A7A;
  --bg-alert: #EDEDFF;
  --tabla-text-highlight: #1F1F1F;
  --chat-username: #FFFFFF;
  --inset-box: #03383F;
}

[data-theme=Dark] {
  --bg-color: #1F1F1F;
  --bg-color2: #0F0F0F;
  --bg-color3: #353535;
  --bg-color4: #9C9C9C;
  --text-color: #FFFFFF;
  --text-color-highlight: #19DAF4;
  --text-color-highlight-light: #03383F;
  --text-color-highlight-t: black;
  --bg-highlight-osc: #3B3E18;
  --bg-hover: #555555;
  --bg-text-grises: #D6D6D6;
  --bg-alert: #3B3E18;
  --tabla-text-highlight: #FFFFFF;
  --chat-username: #000000;
  --inset-box: #03383F;
}

.theme-toggle-switch {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: bold;
}

.switch-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.theme-label {
  font-size: 0.8rem;
  text-align: center;
}

.icon {
  width: 24px;
  height: 24px;
  transition: color 0.3s ease, opacity 0.3s ease;
  color: var(--text-color-highlight);
}

.icon.inactive {
  opacity: 0.6;
  color: var(--text-color);
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #CCCCCC;
  transition: 0.4s;
  border-radius: 26px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #888888;
}

input:checked + .slider:before {
  transform: translateX(24px);
}

.share-capture-host {
  position: fixed;
  left: -10000px;
  top: -10000px;
  width: 1080px;
  height: 1920px;
  pointer-events: none;
  opacity: 1;
}

.dia-collapsed {
  padding: 12px;
  min-height: 140px;
  min-width: 3.5rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.dia-vertical-label {
  writing-mode: vertical-rl;
  transform: rotate(360deg);
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  opacity: 0.9;
}
.dia-vertical-label i {
  margin-bottom: 6px;
}

.main-tags-container {
  width: 100%;
}

:root {
  --bg-color: #FFFFFF;
  --bg-color2: #F7F7F7;
  --bg-color3: #F0F0F0;
  --bg-color4: #EBEBEB;
  --text-color: #000000;
  --text-color-highlight: #19DAF4;
  --text-color-highlight-light: #03383F;
  /*--text-color-highlight: #19DAF4;*/
  --bg-highlight-osc: #1D1C5F;
  --text-color-highlight-t: black;
  --bg-hover: #E3E8EB;
  --bg-text-grises: #7A7A7A;
  --bg-alert: #EDEDFF;
  --tabla-text-highlight: #1F1F1F;
  --chat-username: #FFFFFF;
  --inset-box: #03383F;
}

[data-theme=Dark] {
  --bg-color: #1F1F1F;
  --bg-color2: #0F0F0F;
  --bg-color3: #353535;
  --bg-color4: #9C9C9C;
  --text-color: #FFFFFF;
  --text-color-highlight: #19DAF4;
  --text-color-highlight-light: #03383F;
  --text-color-highlight-t: black;
  --bg-highlight-osc: #3B3E18;
  --bg-hover: #555555;
  --bg-text-grises: #D6D6D6;
  --bg-alert: #3B3E18;
  --tabla-text-highlight: #FFFFFF;
  --chat-username: #000000;
  --inset-box: #03383F;
}

.tag-selector {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.tag-search {
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--bg-color3);
  color: var(--text-color);
  border: 1px solid #333333;
  width: 100%;
}

.selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-pill-selected {
  background: var(--bg-color3);
  color: var(--text-color);
  padding: 6px 10px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  border: 1px solid var(--text-color-highlight);
}

.btn-remove-tag {
  background: none;
  border: none;
  color: red;
  margin-left: 6px;
  cursor: pointer;
}

.tag-collapse {
  border: 1px solid #333333;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-color);
}

.collapse-title {
  width: 100%;
  text-align: left;
  padding: 10px;
  background: var(--bg-color2);
  border: none;
  color: var(--text-color);
  font-weight: bold;
  cursor: pointer;
}

.arrow {
  float: right;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  gap: 8px;
}

.tag-button {
  padding: 6px 14px;
  border-radius: 20px;
  background-color: var(--bg-highlight-osc);
  color: white;
  border: 1px solid var(--text-color-highlight);
  cursor: pointer;
  transition: background 0.2s ease;
}

.tag-button.selected {
  background-color: var(--text-color-highlight-t);
  color: var(--text-color-highlight);
}

.tag-visual {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0px;
}

.tag-pill {
  background-color: var(--bg-color2);
  color: var(--text-color);
  padding: 5px 10px;
  border-radius: 7px;
  font-size: 0.85rem;
}

/* Market filters */
.market-filtros {
  margin: 8px 0 4px;
}
.market-filtros-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--bg-color);
  color: var(--text-color);
  border: 1px solid var(--bg-color3);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.market-filtros-toggle:hover {
  border-color: var(--text-color-highlight);
}
.market-filtros-toggle i {
  margin-right: 6px;
  color: var(--text-color-highlight);
}
.market-filtros-toggle-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.market-filtros-arrow {
  font-size: 0.7rem;
  opacity: 0.7;
}
.filtros-badge {
  background: var(--text-color-highlight);
  color: var(--bg-color);
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  min-width: 20px;
  text-align: center;
}
.market-filtros-panel {
  background: var(--bg-color);
  border: 1px solid var(--bg-color3);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 6px;
}
.market-filtros-categoria {
  margin-bottom: 10px;
}
.market-filtros-categoria:last-of-type {
  margin-bottom: 0;
}
.market-filtros-categoria-titulo {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-color);
  opacity: 0.7;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.market-filtros-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.market-filtros-tags .tag-pill {
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.market-filtros-tags .tag-pill:hover {
  border-color: var(--text-color-highlight);
}
.market-filtros-tags .tag-pill.active {
  background: var(--text-color-highlight);
  color: var(--bg-color);
  border-color: var(--text-color-highlight);
}
.market-filtros-limpiar {
  margin-top: 10px;
  background: transparent;
  border: 1px solid var(--bg-color3);
  color: var(--text-color);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s, border-color 0.15s;
}
.market-filtros-limpiar:hover {
  border-color: var(--text-color-highlight);
  color: var(--text-color-highlight);
}
.market-filtros-limpiar i {
  font-size: 0.75rem;
}

.tag-preview-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 5px;
}
.tag-preview-wrapper .mas-tags {
  font-size: 0.85rem;
  background-color: #F0F0F0;
  color: #333333;
  border-radius: 12px;
  padding: 2px 8px;
  white-space: nowrap;
}

.tags-en-detalle {
  margin: 10px 0px;
}
.tags-en-detalle .tag-visual {
  justify-content: center;
}

:root {
  --bg-color: #FFFFFF;
  --bg-color2: #F7F7F7;
  --bg-color3: #F0F0F0;
  --bg-color4: #EBEBEB;
  --text-color: #000000;
  --text-color-highlight: #19DAF4;
  --text-color-highlight-light: #03383F;
  /*--text-color-highlight: #19DAF4;*/
  --bg-highlight-osc: #1D1C5F;
  --text-color-highlight-t: black;
  --bg-hover: #E3E8EB;
  --bg-text-grises: #7A7A7A;
  --bg-alert: #EDEDFF;
  --tabla-text-highlight: #1F1F1F;
  --chat-username: #FFFFFF;
  --inset-box: #03383F;
}

[data-theme=Dark] {
  --bg-color: #1F1F1F;
  --bg-color2: #0F0F0F;
  --bg-color3: #353535;
  --bg-color4: #9C9C9C;
  --text-color: #FFFFFF;
  --text-color-highlight: #19DAF4;
  --text-color-highlight-light: #03383F;
  --text-color-highlight-t: black;
  --bg-highlight-osc: #3B3E18;
  --bg-hover: #555555;
  --bg-text-grises: #D6D6D6;
  --bg-alert: #3B3E18;
  --tabla-text-highlight: #FFFFFF;
  --chat-username: #000000;
  --inset-box: #03383F;
}

.loading-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10020 !important;
  background-color: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  pointer-events: auto;
  box-sizing: border-box;
  padding: max(1.5rem, env(safe-area-inset-top, 0)) max(1.5rem, env(safe-area-inset-right, 0)) max(1.5rem, env(safe-area-inset-bottom, 0)) max(1.5rem, env(safe-area-inset-left, 0));
}

.nav-progress {
  position: fixed;
  top: env(safe-area-inset-top, 0);
  left: 0;
  right: 0;
  height: 2px;
  z-index: 10012;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.1s ease;
  background: transparent;
}

.nav-progress--on {
  opacity: 1;
}

.nav-progress__track {
  position: absolute;
  inset: 0;
  background: var(--text-color-highlight);
  opacity: 0.2;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.2s ease-out;
}

.nav-progress--on .nav-progress__track {
  transform: scaleX(1);
  opacity: 0.3;
}

.nav-progress__shine {
  position: absolute;
  top: 0;
  left: 0;
  width: 38%;
  max-width: 10rem;
  height: 100%;
  background: var(--text-color-highlight);
  box-shadow: 0 0 8px var(--text-color-highlight);
  border-radius: 0 1px 1px 0;
  animation: nav-peg 0.85s ease-in-out infinite;
  opacity: 0;
  transition: opacity 0.1s ease;
}

.nav-progress--on .nav-progress__shine {
  opacity: 1;
}

@keyframes nav-peg {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(420%);
  }
}

.wb-loader,
.app-boot__mark,
.spinner,
.uploading-spinner {
  position: relative;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  box-sizing: border-box;
  border: none;
  background: none;
  margin: 0;
  padding: 0;
  display: block;
  animation: none;
}

.wb-loader::before,
.app-boot__mark::before,
.spinner::before,
.uploading-spinner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(25, 218, 244, 0.14);
  border-top-color: var(--text-color-highlight);
  border-bottom-color: rgba(25, 218, 244, 0.4);
  animation: wbLoaderSpin 0.72s linear infinite;
  will-change: transform;
  box-shadow: 0 0 14px rgba(25, 218, 244, 0.2);
}

.wb-loader::after,
.app-boot__mark::after,
.spinner::after,
.uploading-spinner::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: var(--text-color-highlight);
  box-shadow: 0 0 6px var(--text-color-highlight);
  opacity: 0.5;
  animation: wbLoaderPulse 1.1s ease-in-out infinite;
}

.wb-loader--sm,
.spinner.spinner-sm {
  width: 1.35rem;
  height: 1.35rem;
}

.wb-loader--sm::before,
.spinner.spinner-sm::before {
  border-width: 1.5px;
  box-shadow: 0 0 10px rgba(25, 218, 244, 0.18);
}

.wb-loader--sm::after,
.spinner.spinner-sm::after {
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  box-shadow: 0 0 4px var(--text-color-highlight);
}

.uploading-spinner {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
}

.uploading-spinner::before {
  border-width: 1.5px;
  box-shadow: 0 0 8px rgba(25, 218, 244, 0.16);
}

.uploading-spinner::after {
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
}

@keyframes wbLoaderSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes wbLoaderPulse {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.95);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wb-loader::before,
  .app-boot__mark::before,
  .spinner::before,
  .uploading-spinner::before {
    animation: none;
    border-color: rgba(25, 218, 244, 0.35);
    border-top-color: var(--text-color-highlight);
  }

  .wb-loader::after,
  .app-boot__mark::after,
  .spinner::after,
  .uploading-spinner::after {
    animation: none;
    opacity: 0.5;
    transform: none;
  }
}

.chat-page-loading {
  position: absolute;
  inset: 0;
  z-index: 10018;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-color);
  pointer-events: auto;
}

/* Variante usada para skeleton: el contenido fluye desde arriba y ocupa toda
   la altura del .chat-body-wrap (no centrado). Anulamos el flex centrado del
   overlay base y dejamos block + overflow para que .chat-skeleton crezca a
   min-height: 100% sin que el padre lo limite a min-content. */
.chat-page-loading--skeleton {
  display: block;
  align-items: initial;
  justify-content: initial;
  overflow-y: auto;
  padding: 0;
}

/* Mini-skeleton dentro de .chat-header mientras chat aún no está cargado.
   Reemplaza el avatar real y el "Chat.Unknown" feo. */
.chat-skel-header-avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  flex-shrink: 0;
}

.chat-skel-header-name {
  display: inline-block;
  width: 140px;
  height: 18px;
  border-radius: 6px;
  vertical-align: middle;
}

/* Skeleton de lista de chats: ocupa el alto disponible para no dejar
   huecos abajo cuando hay pantalla ancha/alta. Se aplica donde haya
   un contenedor con altura definida arriba en el árbol. */
.chats-skeleton-fill {
  min-height: 100%;
}

.dot-loader-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}

.dot-loader-inline .dot {
  width: 6px;
  height: 6px;
  background-color: white;
  border-radius: 50%;
  animation: bounce 0.8s infinite ease-in-out;
}

.dot-loader-inline .dot:nth-child(1) {
  animation-delay: 0s;
}

.dot-loader-inline .dot:nth-child(2) {
  animation-delay: 0.2s;
}

.dot-loader-inline .dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}
.uploading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.uploading-text {
  font-size: 16px;
  color: var(--text-color-highlight);
  margin-bottom: 1rem;
}

.upload-progress-bar {
  width: 80%;
  color: var(--text-color-highlight);
  margin-bottom: 0.5rem;
}

.upload-progress-percent {
  font-size: 14px;
  color: var(--text-color-highlight);
}

.boton-cargando {
  opacity: 0.6;
  cursor: not-allowed;
}

.spinner-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  min-height: 10rem;
  flex: 0 1 auto;
  padding: 1.5rem 1rem;
}

.spinner-wrapper--sized {
  min-height: 0;
  flex: 0 0 auto;
  padding: 0;
}

.spinner-wrapper--fill {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  align-self: stretch;
  width: 100%;
  min-height: 12rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.app-shell-loader,
.page-content-loading {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 1.5rem 1rem;
  min-height: min(70vh, 32rem);
}

.spinner-wrapper--section {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 1.5rem 1rem;
  min-height: 45vh;
  width: 100%;
  flex: 0 1 auto;
}

.modal-body > .spinner-wrapper {
  flex: 1 1 auto;
  min-height: 10rem;
}

/* Mismo centro de viewport en todas las rutas (independiente de cabeceras) */
.app-loader-vp {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  min-height: min(55vh, 30rem);
  flex: 1 1 auto;
}

.app-loader-vp > .wb-loader {
  position: fixed !important;
  z-index: 2000;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: 2rem !important;
  height: 2rem !important;
  margin: -1rem 0 0 -1rem !important;
  flex-shrink: 0;
  transform: none;
}

.app-loader-vp > .wb-loader.wb-loader--sm {
  width: 1.35rem !important;
  height: 1.35rem !important;
  margin: -0.675rem 0 0 -0.675rem !important;
}

.page-content-loading.app-loader-vp,
.app-shell-loader.app-loader-vp {
  min-height: min(70vh, 32rem);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 1.5rem 1rem;
  box-sizing: border-box;
}

.spinner-wrapper--section.app-loader-vp {
  min-height: min(45vh, 28rem);
  display: block;
  align-items: initial;
  justify-content: initial;
}

.spinner-wrapper--fill.app-loader-vp {
  display: block;
  align-items: initial;
  justify-content: initial;
  min-height: 0;
  flex: 1 1 auto;
}

.spinner-wrapper.app-loader-vp:not(.spinner-wrapper--section):not(.spinner-wrapper--fill) {
  display: block;
  align-items: initial;
  justify-content: initial;
}

.snatch-loader {
  --snatch-size: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-color-highlight);
}
.snatch-loader svg {
  width: var(--snatch-size);
  height: var(--snatch-size);
  overflow: visible;
}

.snatch-loader-sm {
  --snatch-size: 52px;
}

.snf-1, .snf-2, .snf-3, .snf-4, .snf-5, .snf-6 {
  opacity: 0;
}

.snf-1 {
  animation: snf1 0.8s step-end infinite;
}

.snf-2 {
  animation: snf2 0.8s step-end infinite;
}

.snf-3 {
  animation: snf3 0.8s step-end infinite;
}

.snf-4 {
  animation: snf4 0.8s step-end infinite;
}

.snf-5 {
  animation: snf5 0.8s step-end infinite;
}

.snf-6 {
  animation: snf6 0.8s step-end infinite;
}

@keyframes snf1 {
  0% {
    opacity: 1;
  }
  15% {
    opacity: 0;
  }
}
@keyframes snf2 {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
}
@keyframes snf3 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  45% {
    opacity: 0;
  }
}
@keyframes snf4 {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
}
@keyframes snf5 {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
}
@keyframes snf6 {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
}
.cj-1, .cj-2, .cj-3, .cj-4, .cj-5, .cj-6 {
  opacity: 0;
}

.cj-1 {
  animation: cj1 0.8s step-end infinite;
}

.cj-2 {
  animation: cj2 0.8s step-end infinite;
}

.cj-3 {
  animation: cj3 0.8s step-end infinite;
}

.cj-4 {
  animation: cj4 0.8s step-end infinite;
}

.cj-5 {
  animation: cj5 0.8s step-end infinite;
}

.cj-6 {
  animation: cj6 0.8s step-end infinite;
}

@keyframes cj1 {
  0% {
    opacity: 1;
  }
  15% {
    opacity: 0;
  }
}
@keyframes cj2 {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
}
@keyframes cj3 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  45% {
    opacity: 0;
  }
}
@keyframes cj4 {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
}
@keyframes cj5 {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
}
@keyframes cj6 {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
}
.wb-1, .wb-2, .wb-3, .wb-4, .wb-5 {
  opacity: 0;
}

.wb-1 {
  animation: wb1 0.8s step-end infinite;
}

.wb-2 {
  animation: wb2 0.8s step-end infinite;
}

.wb-3 {
  animation: wb3 0.8s step-end infinite;
}

.wb-4 {
  animation: wb4 0.8s step-end infinite;
}

.wb-5 {
  animation: wb5 0.8s step-end infinite;
}

@keyframes wb1 {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
}
@keyframes wb2 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}
@keyframes wb3 {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
}
@keyframes wb4 {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
}
@keyframes wb5 {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
}
.brp-1, .brp-2, .brp-3, .brp-4, .brp-5, .brp-6 {
  opacity: 0;
}

.brp-1 {
  animation: brp1 0.8s step-end infinite;
}

.brp-2 {
  animation: brp2 0.8s step-end infinite;
}

.brp-3 {
  animation: brp3 0.8s step-end infinite;
}

.brp-4 {
  animation: brp4 0.8s step-end infinite;
}

.brp-5 {
  animation: brp5 0.8s step-end infinite;
}

.brp-6 {
  animation: brp6 0.8s step-end infinite;
}

@keyframes brp1 {
  0% {
    opacity: 1;
  }
  15% {
    opacity: 0;
  }
}
@keyframes brp2 {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
}
@keyframes brp3 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  45% {
    opacity: 0;
  }
}
@keyframes brp4 {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
}
@keyframes brp5 {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
}
@keyframes brp6 {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
}
.bj-1, .bj-2, .bj-3, .bj-4, .bj-5 {
  opacity: 0;
}

.bj-1 {
  animation: bj1 0.8s step-end infinite;
}

.bj-2 {
  animation: bj2 0.8s step-end infinite;
}

.bj-3 {
  animation: bj3 0.8s step-end infinite;
}

.bj-4 {
  animation: bj4 0.8s step-end infinite;
}

.bj-5 {
  animation: bj5 0.8s step-end infinite;
}

@keyframes bj1 {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
}
@keyframes bj2 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}
@keyframes bj3 {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
}
@keyframes bj4 {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
}
@keyframes bj5 {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
}
.rmu-1, .rmu-2, .rmu-3, .rmu-4, .rmu-5 {
  opacity: 0;
}

.rmu-1 {
  animation: rmu1 0.8s step-end infinite;
}

.rmu-2 {
  animation: rmu2 0.8s step-end infinite;
}

.rmu-3 {
  animation: rmu3 0.8s step-end infinite;
}

.rmu-4 {
  animation: rmu4 0.8s step-end infinite;
}

.rmu-5 {
  animation: rmu5 0.8s step-end infinite;
}

@keyframes rmu1 {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
}
@keyframes rmu2 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}
@keyframes rmu3 {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
}
@keyframes rmu4 {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
}
@keyframes rmu5 {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
}
.bmu-1, .bmu-2, .bmu-3, .bmu-4, .bmu-5 {
  opacity: 0;
}

.bmu-1 {
  animation: bmu1 0.8s step-end infinite;
}

.bmu-2 {
  animation: bmu2 0.8s step-end infinite;
}

.bmu-3 {
  animation: bmu3 0.8s step-end infinite;
}

.bmu-4 {
  animation: bmu4 0.8s step-end infinite;
}

.bmu-5 {
  animation: bmu5 0.8s step-end infinite;
}

@keyframes bmu1 {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
}
@keyframes bmu2 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}
@keyframes bmu3 {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
}
@keyframes bmu4 {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
}
@keyframes bmu5 {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
}
.c2b-1, .c2b-2, .c2b-3, .c2b-4 {
  opacity: 0;
}

.c2b-1 {
  animation: c2b1 0.8s step-end infinite;
}

.c2b-2 {
  animation: c2b2 0.8s step-end infinite;
}

.c2b-3 {
  animation: c2b3 0.8s step-end infinite;
}

.c2b-4 {
  animation: c2b4 0.8s step-end infinite;
}

@keyframes c2b1 {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
}
@keyframes c2b2 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@keyframes c2b3 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
}
@keyframes c2b4 {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
}
.kbs-1, .kbs-2, .kbs-3, .kbs-4, .kbs-5 {
  opacity: 0;
}

.kbs-1 {
  animation: kbs1 0.8s step-end infinite;
}

.kbs-2 {
  animation: kbs2 0.8s step-end infinite;
}

.kbs-3 {
  animation: kbs3 0.8s step-end infinite;
}

.kbs-4 {
  animation: kbs4 0.8s step-end infinite;
}

.kbs-5 {
  animation: kbs5 0.8s step-end infinite;
}

@keyframes kbs1 {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
}
@keyframes kbs2 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}
@keyframes kbs3 {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
}
@keyframes kbs4 {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
}
@keyframes kbs5 {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
}
.dbs-1, .dbs-2, .dbs-3, .dbs-4, .dbs-5 {
  opacity: 0;
}

.dbs-1 {
  animation: dbs1 0.8s step-end infinite;
}

.dbs-2 {
  animation: dbs2 0.8s step-end infinite;
}

.dbs-3 {
  animation: dbs3 0.8s step-end infinite;
}

.dbs-4 {
  animation: dbs4 0.8s step-end infinite;
}

.dbs-5 {
  animation: dbs5 0.8s step-end infinite;
}

@keyframes dbs1 {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
}
@keyframes dbs2 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}
@keyframes dbs3 {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
}
@keyframes dbs4 {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
}
@keyframes dbs5 {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
}
.du-1, .du-2, .du-3, .du-4 {
  opacity: 0;
}

.du-1 {
  animation: du1 0.8s step-end infinite;
}

.du-2 {
  animation: du2 0.8s step-end infinite;
}

.du-3 {
  animation: du3 0.8s step-end infinite;
}

.du-4 {
  animation: du4 0.8s step-end infinite;
}

@keyframes du1 {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
}
@keyframes du2 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@keyframes du3 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
}
@keyframes du4 {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
}
.lng-1, .lng-2, .lng-3, .lng-4 {
  opacity: 0;
}

.lng-1 {
  animation: lng1 0.8s step-end infinite;
}

.lng-2 {
  animation: lng2 0.8s step-end infinite;
}

.lng-3 {
  animation: lng3 0.8s step-end infinite;
}

.lng-4 {
  animation: lng4 0.8s step-end infinite;
}

@keyframes lng1 {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
}
@keyframes lng2 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@keyframes lng3 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
}
@keyframes lng4 {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
}
:root {
  --bg-color: #FFFFFF;
  --bg-color2: #F7F7F7;
  --bg-color3: #F0F0F0;
  --bg-color4: #EBEBEB;
  --text-color: #000000;
  --text-color-highlight: #19DAF4;
  --text-color-highlight-light: #03383F;
  /*--text-color-highlight: #19DAF4;*/
  --bg-highlight-osc: #1D1C5F;
  --text-color-highlight-t: black;
  --bg-hover: #E3E8EB;
  --bg-text-grises: #7A7A7A;
  --bg-alert: #EDEDFF;
  --tabla-text-highlight: #1F1F1F;
  --chat-username: #FFFFFF;
  --inset-box: #03383F;
}

[data-theme=Dark] {
  --bg-color: #1F1F1F;
  --bg-color2: #0F0F0F;
  --bg-color3: #353535;
  --bg-color4: #9C9C9C;
  --text-color: #FFFFFF;
  --text-color-highlight: #19DAF4;
  --text-color-highlight-light: #03383F;
  --text-color-highlight-t: black;
  --bg-highlight-osc: #3B3E18;
  --bg-hover: #555555;
  --bg-text-grises: #D6D6D6;
  --bg-alert: #3B3E18;
  --tabla-text-highlight: #FFFFFF;
  --chat-username: #000000;
  --inset-box: #03383F;
}

/* =========================
    Landing 
============================*/
.public-layout {
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
}

.l-header {
  width: 100%;
  border-bottom: 1px solid #303030;
  padding: 1rem;
  background-color: #1F1F1F;
}
.l-header .l-header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.l-header .l-header-left {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.l-header .l-logo-container img {
  height: 40px;
  cursor: pointer;
  color: white;
}
.l-header .l-nav-links {
  display: flex;
  gap: 1.5rem;
}
.l-header .l-nav-links .l-div-nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  color: white;
  font-weight: 600;
  transition: color 0.2s;
}
@media (hover: hover) {
  .l-header .l-nav-links .l-div-nav:hover {
    color: #19DAF4;
  }
}
.l-header .l-div-nav-1 {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--text-color);
  font-weight: 400;
  font-size: 16px;
  transition: color 0.3s;
  cursor: pointer;
  gap: 5px;
}
.l-header .l-btn-login {
  border: 1px solid white;
  background: transparent;
  color: white;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 400;
  transition: background 0.2s, color 0.2s;
}
@media (hover: hover) {
  .l-header .l-btn-login:hover {
    background: #1D1C5F;
    color: #19DAF4;
  }
}

.l-btn-primary {
  background-color: #19DAF4;
  color: black;
  border: none;
  padding: 0.9rem 2rem;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}
@media (hover: hover) {
  .l-btn-primary:hover {
    background-color: rgb(16.9756097561, 16.3902439024, 55.6097560976);
    color: #19DAF4;
  }
}

.l-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6rem 10%;
  background-color: #0F0F0F;
}
.l-hero .l-hero-text {
  flex: 1;
  padding-right: 3rem;
  color: white;
}
.l-hero .l-hero-text .l-amarillo {
  color: #19DAF4;
  text-transform: uppercase;
}
.l-hero .l-hero-text .l-titulos {
  margin: 0.5rem 0rem 0.5rem 0rem;
  font-size: 4rem;
  font-weight: 800;
  font-family: "Manuka";
  line-height: 1;
  text-transform: uppercase;
}
.l-hero .l-hero-text .l-subtitulos {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  line-height: 1.5;
}
.l-hero .l-hero-image img {
  max-width: 400px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 0 40px rgba(0, 236, 255, 0.1);
}

.l-sponsor-bar {
  background-color: #0F0F0F;
  text-align: center;
  padding: 2rem 1rem 4rem 1rem;
  text-transform: uppercase;
}
.l-sponsor-bar .l-amarillo {
  color: #eafc3c;
  text-transform: uppercase;
  font-weight: 0;
}
.l-sponsor-bar .l-sponsor {
  margin-top: 1rem;
  color: darkgrey;
  font-size: 1.7rem;
}

.l-programador-section {
  background-color: #0F0F0F;
  color: white;
  padding: 6rem 10%;
}
.l-programador-section .l-programador-content {
  display: flex;
  align-items: center;
  gap: 4rem;
  flex-wrap: wrap;
}
.l-programador-section .l-programador-text {
  flex: 1;
}
.l-programador-section .l-programador-text .l-titulos {
  font-family: "Manuka";
  font-size: 3.5rem;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.l-programador-section .l-programador-text .l-subtitulos {
  font-size: 1.1rem;
  color: darkgray;
  margin-bottom: 2rem;
  line-height: 1.6;
}
.l-programador-section .l-programador-img img {
  width: 450px;
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(0, 236, 255, 0.1);
}

.l-programador-bullets-wrapper {
  margin-top: 3rem;
  border: 1px solid rgba(0, 236, 255, 0.4);
  padding: 2rem;
  border-radius: 8px;
  background-color: rgba(0, 236, 255, 0.03);
  box-shadow: 0 0 10px rgba(0, 236, 255, 0.1);
}

.l-programador-bullets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem 2rem;
}

.l-programador-item {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  color: white;
}
.l-programador-item i {
  color: #19DAF4;
  font-size: 1.3rem;
  margin-top: 2px;
}
.l-programador-item .item-text strong {
  font-weight: 700;
  color: white;
}
.l-programador-item .item-text p {
  margin: 0;
  color: darkgray;
  font-size: 0.9rem;
  line-height: 1.4;
}

.l-atleta-section {
  background-color: #0F0F0F;
  padding: 6rem 10%;
  color: white;
}

.l-atleta-content {
  display: flex;
  align-items: center;
  gap: 4rem;
  flex-wrap: wrap;
}

.l-atleta-img img {
  width: 420px;
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 0 35px rgba(0, 236, 255, 0.08);
}

.l-atleta-text {
  flex: 1;
}
.l-atleta-text .l-titulos {
  font-family: "Manuka";
  font-size: 3.5rem;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.l-atleta-text .l-subtitulos {
  font-size: 1.1rem;
  color: darkgray;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.l-atleta-bullets-wrapper {
  margin-top: 3rem;
  border: 1px solid rgba(0, 236, 255, 0.4);
  padding: 2rem 2.5rem;
  border-radius: 8px;
  background-color: rgba(0, 236, 255, 0.03);
  box-shadow: 0 0 10px rgba(0, 236, 255, 0.1);
}

.l-atleta-bullets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 3rem;
}

.l-atleta-item {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}
.l-atleta-item i {
  color: #19DAF4;
  font-size: 1.3rem;
  margin-top: 2px;
}
.l-atleta-item .item-text strong {
  color: white;
  font-weight: 700;
}
.l-atleta-item .item-text p {
  margin: 0;
  color: darkgray;
  font-size: 0.95rem;
  line-height: 1.4;
}

.l-box-section {
  background-color: #0F0F0F;
  padding: 6rem 10%;
  color: white;
}

.l-box-content {
  display: flex;
  align-items: center;
  gap: 4rem;
  flex-wrap: wrap;
}

.l-box-text {
  flex: 1;
}
.l-box-text .l-titulos {
  font-family: "Manuka";
  font-size: 3.5rem;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.l-box-text .l-subtitulos {
  font-size: 1.1rem;
  line-height: 1.6;
  color: darkgray;
  margin-bottom: 2rem;
}

.l-box-img img {
  width: 420px;
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 0 35px rgba(0, 236, 255, 0.08);
}

.l-box-bullets-wrapper {
  margin-top: 3rem;
  border: 1px solid rgba(0, 236, 255, 0.4);
  padding: 2rem 2.5rem;
  border-radius: 8px;
  background-color: rgba(0, 236, 255, 0.03);
  box-shadow: 0 0 10px rgba(0, 236, 255, 0.1);
}

.l-box-bullets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 3rem;
}

.l-box-item {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}
.l-box-item i {
  color: #19DAF4;
  font-size: 1.3rem;
  margin-top: 2px;
}
.l-box-item .item-text strong {
  color: white;
  font-weight: 700;
}
.l-box-item .item-text p {
  margin: 0;
  color: darkgray;
  font-size: 0.95rem;
  line-height: 1.4;
}

.l-footer {
  background-color: white;
  color: black;
  padding-top: 3rem;
}
.l-footer .l-info-contacto {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  text-align: left;
  padding-bottom: 3rem;
}
.l-footer .l-info-contacto span {
  color: darkgrey;
  font-size: 1rem;
  display: block;
  margin-bottom: 0.5rem;
}
.l-footer .l-info-contacto .l-footer-info {
  margin: 0;
  font-family: "Manuka";
  font-size: 2rem;
}
.l-footer .l-info-contacto .l-info-2 {
  color: darkgray;
}
.l-footer .l-info-contacto .l-home {
  font-size: 0.9rem;
  margin-left: 0.5rem;
}
.l-footer .l-info-contacto .l-email-parent, .l-footer .l-info-contacto .l-socialinstagram-parent {
  display: flex;
  align-items: center;
  margin: 1rem 0;
}
.l-footer .l-info-contacto i {
  margin-right: 0.5rem;
  color: black;
}
.l-footer .l-imagen {
  background-color: #1F1F1F;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}
.l-footer .l-imagen .wb-logotype {
  width: 100%;
  max-width: 1200px;
  height: auto;
  display: block;
}
.l-footer .l-legal {
  background-color: black;
  color: white;
  text-align: center;
  padding: 2rem 1rem;
}
.l-footer .l-legal .l-powered-by-parent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.l-footer .l-legal .l-powered-by-parent img {
  height: 20px;
}
.l-footer .l-legal .l-powered-by-parent .l-powered-by {
  font-weight: 600;
  letter-spacing: 1px;
}
.l-footer .l-legal .l-wodbustertechnologies-ltd-2021 {
  font-size: 0.8rem;
  color: dimgray;
  margin-bottom: 0.5rem;
}
.l-footer .l-legal .l-aviso-legal {
  font-size: 0.75rem;
  color: dimgray;
}

@media (max-width: 1100px) {
  .l-programador-bullets-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 900px) {
  .l-programador-content {
    flex-direction: column;
    text-align: center;
  }
  .l-programador-bullets-grid {
    grid-template-columns: 1fr;
  }
  .l-programador-item {
    text-align: left;
  }
  .l-atleta-content {
    flex-direction: column;
    text-align: center;
  }
  .l-atleta-bullets-grid {
    grid-template-columns: 1fr;
  }
  .l-atleta-item {
    text-align: left;
  }
  .l-box-content {
    flex-direction: column;
    text-align: center;
  }
  .l-box-bullets-grid {
    grid-template-columns: 1fr;
  }
  .l-box-item {
    text-align: left;
  }
}
@media (max-width: 650px) {
  .l-header .l-nav-links {
    display: none;
  }
  .l-footer .l-info-contacto {
    justify-content: flex-start;
    margin-left: 2.5rem;
  }
  .l-btn-login {
    padding: 0.4rem 0.2rem !important;
  }
}
.l-download-section {
  padding: 4rem 1.5rem;
}

.l-download-content {
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.l-download-text {
  max-width: 680px;
}

.l-download-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.l-download-img img {
  max-width: 520px;
  width: 100%;
  height: auto;
}

@media (max-width: 360px) {
  .l-div-nav-1 {
    gap: 2px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .l-btn-login {
    padding: 0.3rem 0.4rem !important;
  }
}
.share-card {
  width: 1080px;
  height: 1920px;
  background: transparent;
  padding: 80px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
}

.share-card.white {
  color: #ffffff;
}

.share-card.black {
  color: #000000;
}

.share-card.square {
  height: 1080px;
}

.share-card.align-left {
  text-align: left;
  align-items: flex-start;
}
.share-card.align-center {
  text-align: center;
  align-items: center;
}
.share-card.align-right {
  text-align: right;
  align-items: flex-end;
}

.share-header img {
  width: 220px;
}

.share-body h1 {
  font-size: 72px;
  font-family: "Manuka";
}

.share-type {
  font-size: 32px;
  opacity: 0.8;
}

.share-desc {
  font-size: 34px;
  white-space: pre-wrap;
  line-height: 1.4;
  white-space: pre-wrap;
}

.share-result {
  margin-top: 40px;
  font-size: 40px;
  background: rgba(255, 255, 255, 0.08);
  padding: 24px;
  border-radius: 16px;
}

/* Modal compartir entrenamiento (estilo Strava) */
.share-training-modal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
}
.share-training-modal__footer {
  margin-top: auto;
  padding-top: 8px;
}
.share-training-modal__hint {
  margin: 0;
  font-size: 0.82rem;
  opacity: 0.75;
}
.share-training-modal .input-group {
  margin: 0;
  flex-wrap: wrap;
  gap: 8px;
}
.share-training-modal .toggle-buttons {
  flex: 1 1 auto;
  min-width: 0;
}
.share-training-modal .toggle-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 6px;
  white-space: nowrap;
}
.share-training-preview {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  min-height: 180px;
  padding: 10px;
  border-radius: 12px;
  container-type: size;
  background:
    linear-gradient(45deg, rgba(128, 128, 128, 0.18) 25%, transparent 25%) 0 0/16px 16px,
    linear-gradient(-45deg, rgba(128, 128, 128, 0.18) 25%, transparent 25%) 0 0/16px 16px,
    var(--bg-color3);
}
/* El marco se dimensiona con min(ancho, alto-proporcional) para llenar el
   espacio disponible sin desbordar ni deformar, en ambos formatos. */
.share-training-preview__frame {
  aspect-ratio: 9 / 16;
  width: min(100cqw, calc(100cqh * 9 / 16));
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  container-type: inline-size;
}
.share-training-preview__frame--square {
  aspect-ratio: 1 / 1;
  width: min(100cqw, 100cqh);
}
/* Tamaños en cqw (proporcionales al ancho del marco) para que el ajuste de
   línea sea idéntico al de la imagen real (1080px: padding 80, título 90,
   descripción 34, logo 220). */
.share-training-preview__card {
  width: 100%;
  height: 100%;
  padding: 7.4cqw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1.5cqw;
  overflow: hidden;
}
.share-training-preview__card.white {
  color: #fff;
}
.share-training-preview__card.black {
  color: #000;
}
.share-training-preview__card.align-left {
  text-align: left;
  align-items: flex-start;
}
.share-training-preview__card.align-center {
  text-align: center;
  align-items: center;
}
.share-training-preview__card.align-right {
  text-align: right;
  align-items: flex-end;
}
.share-training-preview__logo {
  width: 20.37cqw;
  height: auto;
}
.share-training-preview__title {
  font-family: "Manuka", sans-serif;
  font-weight: normal;
  font-size: 8.33cqw;
  line-height: 1.05;
  text-transform: uppercase;
  word-break: break-word;
}
.share-training-preview__desc {
  font-size: 3.15cqw;
  line-height: 1.4;
  white-space: pre-wrap;
  opacity: 0.95;
}
:root {
  --bg-color: #FFFFFF;
  --bg-color2: #F7F7F7;
  --bg-color3: #F0F0F0;
  --bg-color4: #EBEBEB;
  --text-color: #000000;
  --text-color-highlight: #19DAF4;
  --text-color-highlight-light: #03383F;
  /*--text-color-highlight: #19DAF4;*/
  --bg-highlight-osc: #1D1C5F;
  --text-color-highlight-t: black;
  --bg-hover: #E3E8EB;
  --bg-text-grises: #7A7A7A;
  --bg-alert: #EDEDFF;
  --tabla-text-highlight: #1F1F1F;
  --chat-username: #FFFFFF;
  --inset-box: #03383F;
}

[data-theme=Dark] {
  --bg-color: #1F1F1F;
  --bg-color2: #0F0F0F;
  --bg-color3: #353535;
  --bg-color4: #9C9C9C;
  --text-color: #FFFFFF;
  --text-color-highlight: #19DAF4;
  --text-color-highlight-light: #03383F;
  --text-color-highlight-t: black;
  --bg-highlight-osc: #3B3E18;
  --bg-hover: #555555;
  --bg-text-grises: #D6D6D6;
  --bg-alert: #3B3E18;
  --tabla-text-highlight: #FFFFFF;
  --chat-username: #000000;
  --inset-box: #03383F;
}

/* ═══ Timer nativo (WodTimer.razor) ═══ */
.wodtimer {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 78vh;
  background: #1f1f1f;
  color: #fff;
  border-radius: 8px;
  padding: 0;
  text-align: center;
  user-select: none;
}

.wodtimer:fullscreen {
  min-height: 100vh;
  border-radius: 0;
}

/* Fallback de pantalla completa por CSS (móvil/iOS, donde la Fullscreen API no existe):
   overlay fijo que cubre todo el viewport por encima del modal. */
.wodtimer--full {
  position: fixed;
  inset: 0;
  z-index: 100000;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 100dvh;
  border-radius: 0;
  overflow: auto;
}

.wodtimer-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  flex: 1 1 auto;
}

.wodtimer-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: auto;
}

.wodtimer-logo img {
  width: 320px;
  max-width: 86%;
}

.wodtimer-logo span {
  font-family: Manuka, sans-serif;
  font-size: 2.3rem;
  letter-spacing: normal;
  color: #fff;
}

.wodtimer-menu-botones {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 440px;
  margin-top: auto;
  margin-bottom: 14vh;
}

.wodtimer-menu-botones button {
  border: 0;
  border-radius: 999px;
  padding: 18px 0;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  cursor: pointer;
  background: var(--text-color-highlight);
  color: var(--text-color-highlight-t);
  transition: transform 0.12s ease, filter 0.12s ease;
}

.wodtimer-menu-botones button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.wodtimer-config {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding-top: 8px;
}

.wodtimer-config-titulo {
  font-family: Manuka, sans-serif;
  font-size: 2.4rem;
  letter-spacing: normal;
  color: #fff;
  margin-bottom: 2px;
}

.wodtimer-bloques {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}

.wodtimer-bloque {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px 18px;
  width: 100%;
  padding: 20px;
  border: 1px solid #333;
  border-radius: 16px;
  background: #262626;
}

.wodtimer-bloque-cab {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
}

.wodtimer-bloque-quitar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: #353535;
  color: #ccc;
  cursor: pointer;
}
.wodtimer-bloque-quitar:hover {
  background: #c0392b;
  color: #fff;
}

.wodtimer-add-bloque {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border: 1px dashed #4a4a4a;
  border-radius: 10px;
  background: transparent;
  color: var(--text-color-highlight);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.wodtimer-add-bloque:hover {
  border-color: var(--text-color-highlight);
}

.wodtimer-campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  width: 100%;
}

.wodtimer-campo > label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
}

.wodtimer-campo > select {
  width: 100%;
  background: #2b2b2b;
  border: 1px solid #444;
  border-radius: 8px;
  color: #fff;
  padding: 10px 12px;
  font-size: 1.05rem;
}

.wodtimer-num {
  width: 100%;
  background: #2b2b2b;
  border: 1px solid #444;
  border-radius: 10px;
  color: #fff;
  padding: 12px 14px;
  font-size: 1.15rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.wodtimer-num:focus {
  outline: none;
  border-color: var(--text-color-highlight);
}

.wodtimer-config .mmss-pair {
  width: 100%;
}

.wodtimer-config .mmss-pair input {
  flex: 1;
  min-width: 0;
}

.wodtimer-config-acciones {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  width: 100%;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.mmss-pair {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mmss-pair input {
  text-align: center;
}

.mmss-unit {
  font-size: 0.85rem;
  opacity: 0.7;
}

.wodtimer-btn-pri,
.wodtimer-btn-sec {
  flex: 1;
  border: 0;
  border-radius: 999px;
  padding: 14px 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.wodtimer-btn-pri {
  background: var(--text-color-highlight);
  color: var(--text-color-highlight-t);
}

.wodtimer-btn-sec {
  background: transparent;
  color: #fff;
  border: 1px solid #555;
}

.wodtimer-run {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 480px;
  margin: auto;
  position: relative;
}

.wodtimer-fs {
  position: absolute;
  top: 0;
  right: 0;
  background: transparent;
  border: 0;
  color: #fff;
  opacity: 0.6;
  font-size: 1.2rem;
  cursor: pointer;
}

.wodtimer-fs:hover {
  opacity: 1;
}

.wodtimer-bloque-ind {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #fff;
  opacity: 0.85;
}

.wodtimer-ronda {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0.85;
}

.wodtimer-fase {
  font-family: Manuka, sans-serif;
  font-size: 2.6rem;
  letter-spacing: normal;
  color: #fff;
  min-height: 2.6rem;
}

.wodtimer-run.es-descanso .wodtimer-fase {
  color: #ffb347;
}

.wodtimer-run.es-prep .wodtimer-fase {
  color: #bbb;
}

.wodtimer-ring {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  container-type: size;
}

.wodtimer-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.wodtimer-ring .ring-bg {
  fill: none;
  stroke: #3a3a3a;
  stroke-width: 10;
}

.wodtimer-ring .ring-prog {
  fill: none;
  stroke: var(--text-color-highlight);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.1s linear;
}

.wodtimer-run.es-descanso .ring-prog {
  stroke: #ffb347;
}

.wodtimer-tiempo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Manuka, sans-serif;
  font-size: 48cqw;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.wodtimer-controles {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
}

.wodtimer-ctrl {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid #555;
  background: #2b2b2b;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.12s ease;
}

.wodtimer-ctrl:hover {
  filter: brightness(1.2);
}

.wodtimer-ctrl--play {
  width: 68px;
  height: 68px;
  border: 0;
  font-size: 1.5rem;
  background: var(--text-color-highlight);
  color: var(--text-color-highlight-t);
}

.wodtimer-ctrl--fin {
  background: #2e7d32;
  border: 0;
}

/* ═══ Clipboard indicator (pill flotante, centrado abajo) ═══ */
.clipboard-indicator {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  max-width: min(90vw, 420px);
  background: var(--bg-color3);
  border: 1px solid rgba(127, 127, 127, 0.25);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--text-color);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  animation: clipboard-pill-in 0.2s ease;
}
@keyframes clipboard-pill-in {
  from {
    opacity: 0;
    transform: translate(-50%, 12px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
.clipboard-indicator > i {
  color: var(--text-color-highlight);
  font-size: 0.9rem;
  flex-shrink: 0;
}
.clipboard-indicator-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clipboard-indicator-clear {
  background: none;
  border: none;
  color: var(--text-color);
  opacity: 0.5;
  cursor: pointer;
  padding: 2px;
  font-size: 0.75rem;
  flex-shrink: 0;
}
.clipboard-indicator-clear:hover {
  opacity: 1;
}

/* ═══ Import TrueCoach ═══ */

/* TrueCoach logo */
.import-tc-logo {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  flex-shrink: 0;
  vertical-align: middle;
  border-radius: 6px;
  object-fit: cover;
}

/* Login form centered */
.import-tc-form-wrapper {
  max-width: 480px;
  margin: 0 auto;
  padding-top: 1rem;
}
.import-tc-card {
  background: var(--bg-color2);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.import-tc-card h3 {
  font-family: "Public Sans", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-color);
  text-transform: none;
  margin: 0 0 1rem 0;
}

/* Section title */
.import-tc-section-title {
  font-family: "Public Sans", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-color);
  text-transform: none;
  margin: 0 0 1rem 0;
}

/* Fields */
.import-tc-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 1rem; }
.import-tc-field label { font-size: 0.82rem; font-weight: 600; color: var(--text-color); }
.import-tc-field input {
  padding: 10px 12px;
  border: 1px solid var(--bg-color4);
  border-radius: 8px;
  background: var(--bg-color);
  color: var(--text-color);
  font-size: 0.9rem;
}
.import-tc-select {
  padding: 10px 12px;
  border: 1px solid var(--bg-color4);
  border-radius: 8px;
  background: var(--bg-color);
  color: var(--text-color);
  font-size: 0.9rem;
  width: 100%;
}

/* Error */
.import-tc-error {
  background: rgba(220,53,69,0.1);
  color: #dc3545;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  margin-bottom: 1rem;
}

.import-tc-week-modal {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* En los pasos con lista acotada (recursos / semanas-preview) el modal NO scrollea:
   solo scrollea la lista interna y los botones de acción quedan fijos abajo. */
.modal-content:has(.import-tc-res-list),
.modal-content:has(.import-tc-preview-list) {
  overflow: hidden;
}

.import-tc-week-hint {
  font-size: 0.85rem;
  opacity: 0.7;
  margin: 0 0 12px 0;
}

/* Loading unificado de los paneles de importación TrueCoach */
.import-tc-loading {
  flex: 1 1 auto;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-color);
  opacity: 0.85;
  font-size: 0.9rem;
  text-align: center;
}

.import-tc-overwrite-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(255,170,0,0.12);
  color: var(--text-color);
  border: 1px solid rgba(255,170,0,0.4);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  margin: 12px 0 4px 0;
}

.import-tc-overwrite-warning i { color: #ff9f0a; flex-shrink: 0; }

/* Actions */
.import-tc-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 1rem; }
.import-tc-actions .boton-confirmar-modal,
.import-tc-actions .boton-confirmar-modal-eliminar,
.import-tc-actions .boton-cancelar-modal { width: auto; padding: 10px 18px; }

/* Program grid */
.import-tc-program-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 10px;
}
.import-tc-program-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--bg-color4);
  border-radius: 10px;
  background: var(--bg-color);
  color: var(--text-color);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  font-size: 0.9rem;
  text-align: left;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.import-tc-program-card:hover {
  border-color: var(--text-color-highlight);
  background: var(--text-color-highlight-light, rgba(74,144,217,0.08));
}
.import-tc-program-card:disabled { opacity: 0.7; cursor: wait; }
.import-tc-program-loading { flex: 1; text-align: center; }
.import-tc-program-info { flex: 1; min-width: 0; }
.import-tc-program-name { display: block; font-weight: 600; }
.import-tc-program-desc {
  display: block;
  font-size: 0.78rem;
  opacity: 0.6;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.import-tc-program-days { flex-shrink: 0; text-align: center; }
.import-tc-program-days-num {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-color-highlight);
  line-height: 1;
}
.import-tc-program-days-label { font-size: 0.7rem; opacity: 0.6; }

/* Preview header */
.import-tc-preview-header h3 {
  font-family: "Public Sans", sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-color);
  text-transform: none;
  margin: 0 0 4px 0;
}
.import-tc-preview-header p {
  font-size: 0.85rem;
  opacity: 0.65;
  margin: 0 0 1rem 0;
}

/* Stats bar */
.import-tc-stats {
  display: flex;
  gap: 2rem;
  justify-content: flex-start;
  margin-bottom: 1.2rem;
  padding: 12px 0;
  border-bottom: 1px solid var(--bg-color4);
}
.import-tc-stat { text-align: center; }
.import-tc-stat .stat-number {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-color-highlight);
}
.import-tc-stat .stat-label { font-size: 0.75rem; opacity: 0.7; color: var(--text-color); }

/* Options row (desktop: side by side) */
.import-tc-options-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Preview weeks */
.import-tc-preview-list {
  flex: 1 1 0;
  min-height: 120px;
  overflow-y: auto;
  margin-bottom: 1rem;
}
.import-tc-week { margin-bottom: 8px; }
.import-tc-week > summary {
  font-weight: 600;
  cursor: pointer;
  padding: 8px 12px;
  background: var(--bg-color3);
  border-radius: 8px;
  color: var(--text-color);
  font-size: 0.9rem;
}
.import-tc-week > summary.import-tc-week-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  list-style: none;
}
.import-tc-week > summary.import-tc-week-summary::-webkit-details-marker { display: none; }
.import-tc-week-summary-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.import-tc-week-use-btn {
  flex-shrink: 0;
  width: auto;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.import-tc-week-use-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Barra de la biblioteca de recursos (buscador + acciones) */
/* Biblioteca de ejercicios: el modal NO scrollea; solo la lista interna, para que
   el buscador y las pestañas queden fijos arriba y la lista llene hasta abajo. */
.modal-content:has(.ejercicios-lib) {
  overflow: hidden;
}
.modal-body:has(.ejercicios-lib) {
  min-height: 0;
}
.ejercicios-lib {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
}
.ejercicios-lib__buscador {
  margin: 0;
  flex-shrink: 0;
}
.ejercicios-lib__pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.ejercicios-lib__pills .badge-genero {
  padding: 4px 12px;
  font-size: 12px;
}
.ejercicios-lib__acciones {
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}
.ejercicios-lib__editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--bg-color3);
  border-radius: 8px;
  padding: 10px;
  flex-shrink: 0;
}
.ejercicios-lib__lista {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 2px;
}
.ejercicios-lib__item {
  border: 1px solid var(--bg-color3);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-color);
}
.ejercicios-lib__item-cabecera {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ejercicios-lib__item-nombre {
  font-weight: 600;
  color: var(--text-color);
}
.ejercicios-lib__item-desc {
  font-size: 13px;
  color: var(--bg-text-grises);
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ejercicios-lib__item-pie {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.ejercicios-lib__item-video {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-color-highlight);
}
.ejercicios-lib__item-acciones {
  margin-left: auto;
  display: flex;
  gap: 10px;
  align-items: center;
}

.recurso-lib-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.recurso-lib-toolbar > .input-field {
  flex: 1 1 160px;
  min-width: 140px;
  margin: 0;
}
.recurso-lib-toolbar-btns {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Biblioteca a pantalla completa: el modal NO scrollea; solo scrollea la lista interna
   (así el buscador y las pestañas quedan fijos arriba y no hay doble scroll). */
.modal-content:has(.recurso-lib-fullheight) {
  overflow: hidden;
}
.modal-body:has(.recurso-lib-fullheight) {
  min-height: 0;
}

/* Mismo comportamiento en el selector de recursos (ModalConfirmar): altura definida,
   el body no scrollea y el buscador queda fijo; solo scrollea la lista interna. */
.modal-confirmar-content:has(.recurso-lib-fullheight) {
  height: 80vh;
}
.modal-confirmar-body:has(.recurso-lib-fullheight) {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  align-items: stretch;
}
.modal-confirmar-opciones:has(.recurso-lib-fullheight) {
  flex: 1 1 auto;
  min-height: 0;
}

/* Lista de biblioteca virtualizada: layout en bloque (Virtualize no admite flex+gap) */
.lista-recursos--virtual {
  display: block;
}
.lista-recursos--virtual .recurso-item {
  margin-bottom: 6px;
}

/* Skeleton (Placeholder) de las filas de la biblioteca mientras carga cada ventana */
.recurso-lib-skel-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--bg-color3);
  border-radius: 8px;
}
.recurso-lib-skel-thumb {
  width: 64px;
  height: 48px;
  border-radius: 6px;
  flex-shrink: 0;
}
.recurso-lib-skel-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.recurso-lib-skel-line {
  height: 12px;
  width: 70%;
}
.recurso-lib-skel-line--sm {
  width: 40%;
  height: 10px;
}
/* Capa de skeleton que cubre la lista durante la (re)carga: evita ver contenido
   obsoleto/parpadeos mientras Virtualize trae la nueva ventana. */
.recurso-lib-skel-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  background: var(--bg-color);
  z-index: 2;
  overflow: hidden;
}

/* Toolbar de la biblioteca: en móvil los botones se colapsan a solo icono para no desbordar. */
.recurso-lib-toolbar-btns .añadir-recurso-btn {
  align-items: center;
  justify-content: center;
}
@media (max-width: 768px) {
  .recurso-lib-toolbar-btns .añadir-recurso-btn .btn-label {
    display: none;
  }
  .recurso-lib-toolbar-btns .añadir-recurso-btn {
    gap: 0;
    padding: 8px 12px;
  }
}

/* Importar recursos desde TrueCoach */
.import-tc-res-trigger {
  color: var(--text-color);
  background: var(--bg-color3);
  border: 1px solid var(--bg-color4);
}
.import-tc-res-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.import-tc-res-toolbar .input-field { flex: 1 1 auto; min-width: 0; }
.import-tc-res-count {
  font-size: 0.8rem;
  opacity: 0.65;
  margin-bottom: 8px;
  color: var(--text-color);
}
.import-tc-res-selall {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--color-principal, var(--text-color-highlight));
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.import-tc-res-selall:hover { text-decoration: underline; }
.import-tc-res-list {
  display: block;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.import-tc-res-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--bg-color3);
  border-radius: 8px;
  cursor: pointer;
  box-sizing: border-box;
  height: 48px;
  margin-bottom: 6px;
}
.import-tc-res-item.is-sel {
  outline: 1px solid var(--text-color-highlight);
  outline-offset: -1px;
  background: var(--bg-color3);
}
.import-tc-res-item input[type="checkbox"] { flex-shrink: 0; }
.import-tc-res-thumb {
  flex-shrink: 0;
  width: 48px;
  height: 34px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-color3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.import-tc-res-thumb img { width: 100%; height: 100%; object-fit: cover; }
.import-tc-res-thumb i { font-size: 18px; color: var(--text-color); }
.import-tc-res-name {
  flex: 1;
  min-width: 0;
  font-size: 0.88rem;
  color: var(--text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.import-tc-day { padding: 6px 0 6px 12px; border-left: 3px solid var(--text-color-highlight); margin: 6px 0; }
.import-tc-day-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.import-tc-day-header strong { font-size: 0.85rem; color: var(--text-color); }
.import-tc-block-count { font-size: 0.75rem; opacity: 0.6; color: var(--text-color); }
.import-tc-block-preview {
  display: flex; flex-direction: column; gap: 2px;
  padding: 4px 8px;
  background: var(--bg-color);
  border-radius: 6px;
  margin-bottom: 4px;
}
.import-tc-block-preview .block-name { font-size: 0.82rem; font-weight: 600; color: var(--text-color); }
.import-tc-block-preview .block-desc {
  font-size: 0.75rem;
  color: var(--text-color);
  opacity: 0.65;
  white-space: pre-line;
}

/* Mobile */
@media (max-width: 768px) {
  .import-tc-program-grid {
    grid-template-columns: 1fr;
    overflow: hidden;
  }
  .import-tc-options-row { grid-template-columns: 1fr; }
  .import-tc-stats { justify-content: center; }
  .import-tc-program-info { overflow: hidden; }
}

/* —— Panel admin (superadmin) —— */
/* Pestañas: reutiliza .semana-tabs / .semana-tab (mismo patrón que semanas en programación) */
.admin-panel-tabs.semana-tabs {
  justify-content: flex-start;
  flex-wrap: nowrap;
  width: 100%;
  margin-bottom: 22px;
  padding: 4px 2px 10px 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.admin-panel-tabs.semana-tabs::-webkit-scrollbar {
  height: 4px;
}
.admin-panel-tabs.semana-tabs::-webkit-scrollbar-thumb {
  background: var(--bg-color4);
  border-radius: 4px;
}

.admin-tab-body {
  padding-bottom: 2rem;
}

/* Barra búsqueda: input + botón compacto a la derecha */
.admin-toolbar {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 14px;
}

.admin-toolbar-input {
  flex: 1;
  min-width: 0;
}

.admin-btn-search {
  flex-shrink: 0;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  width: auto;
  min-width: auto;
  max-width: none;
  font-size: 0.88rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background-color: var(--text-color-highlight);
  color: var(--text-color-highlight-t);
  transition: opacity 0.15s, transform 0.1s;
}

.admin-btn-search:hover {
  opacity: 0.92;
}

.admin-btn-search:active {
  transform: scale(0.98);
}

.admin-cobros-automaticos {
  margin-bottom: 0.5rem;
}

.admin-section-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  color: var(--text-color);
}

.admin-cobros-automaticos .admin-muted {
  margin: 0 0 0.5rem 0;
  line-height: 1.45;
}

.admin-btn-cobros-manuales {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--text-color-highlight);
  background: var(--bg-color3);
  color: var(--text-color);
  cursor: pointer;
  font: inherit;
}

.admin-btn-cobros-manuales:hover {
  background: var(--bg-color4);
}

hr.divider.admin-cobros-divider {
  margin: 1.25rem 0;
}

.admin-filters.admin-filters--pagos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
}

.admin-btn-search--filters {
  margin-left: auto;
}

.admin-logs-filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}

.admin-logs-filters-nivel {
  max-width: 100%;
}

.admin-logs-filters-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 520px) {
  .admin-logs-filters-dates {
    grid-template-columns: 1fr;
  }
}

.admin-logs-filters-searchrow {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 10px;
}

.admin-logs-filters-texto {
  flex: 1;
  min-width: 0;
}

.admin-btn-search--logs {
  flex-shrink: 0;
  align-self: flex-end;
  padding: 10px 16px;
  min-height: 42px;
}

@media (max-width: 640px) {
  .admin-toolbar {
    flex-wrap: nowrap;
  }
  .admin-toolbar .admin-btn-search {
    width: auto;
    min-width: 96px;
    padding: 10px 14px;
  }
}

.admin-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--bg-color4);
  background: var(--bg-color3);
  color: var(--text-color);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

@media (hover: hover) {
  .admin-btn-ghost:hover {
    background: var(--bg-hover);
    border-color: var(--text-color-highlight);
    color: var(--text-color-highlight);
  }
}

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

/* ===== Panel de Estadísticas ===== */
.admin-period-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.admin-period-btn {
  flex: 1 1 0;
  min-width: 70px;
  padding: 8px 10px;
  border: 1px solid var(--bg-text-grises);
  border-radius: 8px;
  background: transparent;
  color: var(--bg-text-grises);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.admin-period-btn:hover {
  color: var(--text-color);
}

.admin-period-btn.active {
  background: var(--text-color-highlight);
  border-color: var(--text-color-highlight);
  color: #fff;
}

.admin-stats-kpis {
  margin-bottom: 18px;
}

.admin-stats-section-title {
  margin: 22px 0 12px;
  font-family: "Public Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: none;
  color: var(--bg-text-grises);
}

.admin-stat-card--accent {
  background: linear-gradient(135deg, var(--text-color-highlight) 0%, var(--text-color-highlight-light) 100%);
  color: #fff;
}

.admin-stat-card--warn .admin-stat-value {
  color: #e5484d;
}

.admin-stat-card--accent .admin-stat-label,
.admin-stat-card--accent .admin-stat-value,
.admin-stat-card--accent .admin-stat-delta {
  color: #fff;
}

.admin-stats-card {
  background: var(--bg-color3);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  min-width: 0;
}

.admin-stats-card--wide {
  width: 100%;
}

.admin-test-badge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.admin-test-badge__select {
  padding: 8px 10px;
  border: 1px solid var(--bg-text-grises);
  border-radius: 8px;
  background: var(--bg-color);
  color: var(--text-color);
  font-size: 0.85rem;
}

.admin-test-badge .admin-period-btn {
  flex: 0 0 auto;
}

.admin-stats-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.admin-stats-card-head i {
  font-size: 1.1rem;
  color: var(--text-color-highlight);
}

.admin-stats-card-head h3 {
  margin: 0;
  padding: 0;
  font-family: "Public Sans", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-transform: none;
  color: var(--text-color);
}

.admin-stats-info-btn {
  margin-left: auto;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--bg-text-grises);
  cursor: pointer;
  transition: color 0.15s ease;
}

.admin-stats-info-btn:hover,
.admin-stats-info-btn.active {
  color: var(--text-color-highlight);
}

.admin-stats-info-text {
  margin: -4px 0 14px;
  padding: 8px 10px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--bg-text-grises);
  background: rgba(127, 127, 127, 0.1);
  border-radius: 8px;
}

.admin-stats-tops {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

/* Listas Top */
.admin-top-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-top-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-top-row--clickable {
  cursor: pointer;
  padding: 4px;
  margin: -4px;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.admin-top-row--clickable:hover {
  background: rgba(127, 127, 127, 0.12);
}

.admin-top-chevron {
  flex-shrink: 0;
  font-size: 0.7rem;
  color: var(--bg-text-grises);
  opacity: 0.6;
}

.admin-top-rank {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(127, 127, 127, 0.28);
  color: var(--text-color);
}

.admin-top-row--rank1 .admin-top-rank { background: #f5c518; color: #4a3b00; }
.admin-top-row--rank2 .admin-top-rank { background: #c0c6cf; color: #2c2f33; }
.admin-top-row--rank3 .admin-top-rank { background: #cd7f32; color: #3a2200; }

.admin-top-photo {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-color3);
}

.admin-top-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-top-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-top-sub {
  font-size: 0.72rem;
  color: var(--bg-text-grises);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-top-sub--extra {
  font-style: italic;
}

.admin-top-bar {
  margin-top: 4px;
  height: 6px;
  border-radius: 4px;
  background: rgba(127, 127, 127, 0.18);
  overflow: hidden;
}

.admin-top-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--text-color-highlight);
  transition: width 0.4s ease;
}

.admin-top-value {
  flex-shrink: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-color);
  white-space: nowrap;
}

/* Gráfica de barras mensual */
.admin-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 180px;
  overflow-x: auto;
  padding-top: 18px;
}

.admin-chart-bar-col {
  flex: 1 1 0;
  min-width: 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  overflow: hidden;
}

.admin-pagos-resumen {
  margin: 4px 0 16px;
}

.admin-chart-bar-col--clickable {
  cursor: pointer;
}
.admin-chart-bar-col--clickable:hover .admin-chart-bar-fill {
  filter: brightness(1.12);
}
.admin-chart-bar-col--clickable:hover .admin-chart-bar-label {
  color: var(--bg-text);
}

.admin-chart-bar-col--active .admin-chart-bar-fill {
  box-shadow: 0 0 0 2px var(--bg-color3), 0 0 0 4px var(--text-color-highlight);
}
.admin-chart-bar-col--active .admin-chart-bar-label,
.admin-chart-bar-col--active .admin-chart-bar-value {
  color: var(--text-color-highlight);
  font-weight: 600;
}

.admin-month-selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 6px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--bg-color3);
  border: 1px solid var(--text-color-highlight);
  font-size: 0.85rem;
  color: var(--bg-text);
}

.admin-month-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: var(--text-color-highlight);
  color: #fff;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.8rem;
}
.admin-month-clear i {
  font-size: 0.7rem;
}
.admin-month-clear:hover {
  filter: brightness(1.08);
}

.admin-chart-bar-value {
  font-size: 0.6rem;
  color: var(--bg-text-grises);
  white-space: nowrap;
  height: 0.7rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-chart-bar-track {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: flex-end;
  min-height: 0;
}

.admin-chart-bar-fill {
  width: 100%;
  min-height: 2px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--text-color-highlight) 0%, var(--text-color-highlight-light) 100%);
  transition: height 0.4s ease;
}

.admin-chart-bar-label {
  font-size: 0.65rem;
  color: var(--bg-text-grises);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .admin-stats-tops {
    grid-template-columns: 1fr;
  }
}

.admin-stat-card {
  background: var(--bg-color3);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.admin-anomalia-card {
  border: 1px solid transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s ease;
}

.admin-anomalia-card:hover,
.admin-anomalia-card--active {
  border-color: var(--text-color-highlight);
}

.admin-anomalias-cards {
  margin-bottom: 20px;
}

.admin-stat-label {
  font-size: 0.75rem;
  color: var(--bg-text-grises);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-color);
  overflow-wrap: anywhere;
}

.admin-stat-value.admin-stat-warn {
  color: #ff8a65;
}

.admin-stat-delta {
  font-size: 0.72rem;
  color: var(--bg-text-grises);
}

.admin-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 14px;
}

.admin-table-outer {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tabla-responsive.admin-data-table--logs {
  min-width: 480px;
}

.tabla-responsive.admin-data-table--logs .admin-log-msg {
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

@media (max-width: 768px) {
  .tabla-responsive.admin-data-table--logs th,
  .tabla-responsive.admin-data-table--logs td {
    padding: 8px 10px;
    font-size: 0.78rem;
  }
  .tabla-responsive.admin-data-table--logs td:first-child {
    white-space: nowrap;
  }
}

.tabla-responsive.admin-data-table tbody tr {
  cursor: default;
}

.tabla-responsive.admin-data-table td {
  cursor: default;
}

.tabla-responsive.admin-data-table--logs tbody tr {
  cursor: pointer;
}

.tabla-responsive.admin-data-table--logs td {
  cursor: pointer;
}

.admin-cell-actions {
  cursor: default !important;
}

.admin-filter-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--bg-text-grises);
}

.admin-filter-grow {
  flex: 1;
  min-width: 180px;
}

.admin-nowrap { white-space: nowrap; }
.admin-muted { font-size: 0.85rem; color: var(--bg-text-grises); margin-bottom: 8px; }
.admin-msg-error { color: #ff8a65; padding: 12px; }
.admin-truncate { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 768px) {
  .admin-col-hide-sm {
    display: none !important;
  }

  .tabla-responsive.admin-data-table--logs {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
  }

  .tabla-responsive.admin-data-table--programaciones,
  .tabla-responsive.admin-data-table--usuarios,
  .tabla-responsive.admin-data-table--pagos {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
  }

  .tabla-responsive.admin-data-table--programaciones td,
  .tabla-responsive.admin-data-table--usuarios td:not(.admin-cell-actions),
  .tabla-responsive.admin-data-table--pagos td {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

.tabla-responsive.admin-data-table--programaciones tbody tr,
.tabla-responsive.admin-data-table--usuarios tbody tr {
  cursor: pointer;
}

.tabla-responsive.admin-data-table--programaciones .admin-cell-actions,
.tabla-responsive.admin-data-table--usuarios .admin-cell-actions {
  cursor: default !important;
}

.admin-pager-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 14px;
}

.admin-pager {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 0;
  padding: 3px 6px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 999px;
  border: 1px solid var(--bg-color4);
}

.admin-pager-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-color);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-size: 0.75rem;
}

.admin-pager-btn i {
  font-size: 0.65rem;
  opacity: 0.85;
}

@media (hover: hover) {
  .admin-pager-btn:not(:disabled):hover {
    background: var(--bg-hover);
    color: var(--text-color-highlight);
  }
}

.admin-pager-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.admin-pager-info {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--bg-text-grises);
  padding: 0 6px;
  min-width: 5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.admin-badge-level {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
}

.admin-badge-level.err { background: rgba(255, 82, 82, 0.2); color: #ff8a80; }
.admin-badge-level.wrn { background: rgba(255, 193, 7, 0.15); color: #ffd54f; }
.admin-badge-level.inf { background: rgba(128, 128, 128, 0.25); color: var(--bg-text-grises); }

.admin-log-msg { cursor: pointer; }
.admin-log-stack-preview { font-size: 0.72rem; color: var(--bg-text-grises); }

.admin-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.admin-modal {
  background: var(--bg-color);
  border: 1px solid var(--bg-color3);
  border-radius: 10px;
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  overflow: auto;
  padding: 16px;
}

.admin-modal-wide { max-width: 640px; }

.admin-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-weight: 600;
}

.admin-modal-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-log-pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.8rem;
  background: var(--bg-color3);
  padding: 10px;
  border-radius: 6px;
  max-height: 40vh;
  overflow: auto;
}

.admin-log-stack {
  margin-top: 8px;
  color: var(--bg-text-grises);
}

.admin-modal-section-title {
  margin: 16px 0 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-color);
}

.admin-prog-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-prog-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg-color3);
  border: 1px solid var(--bg-color4);
  color: var(--text-color);
  text-decoration: none;
  font-size: 0.88rem;
  transition: border-color 0.15s, background 0.15s;
}

@media (hover: hover) {
  .admin-prog-row:hover {
    border-color: var(--text-color-highlight);
    background: var(--bg-hover);
  }
}

.admin-prog-name {
  flex: 1;
  min-width: 0;
  font-weight: 500;
}

.admin-badge {
  flex-shrink: 0;
  font-size: 0.65rem;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-color-highlight);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

@media (max-width: 768px) {
  .admin-filters:not(.admin-filters--pagos) {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-filter-grow { min-width: 0; }
}

/* ── Encuestas (estilo WhatsApp) ── */
.chat-poll {
  min-width: 240px;
  max-width: 360px;
  font-size: 0.95rem;
  text-align: left;
  color: inherit;
}
.chat-message.own .chat-poll { color: #111; }
.chat-message.other .chat-poll { color: #fff; }
.chat-message.own .chat-poll__bar { background: rgba(0, 0, 0, 0.15); }
.chat-message.own .chat-poll__bar-fill { background: rgba(0, 0, 0, 0.55); }
.chat-message.own .chat-poll__footer { border-top-color: rgba(0, 0, 0, 0.18); }
.chat-message.own .chat-poll__indicator { color: rgba(0, 0, 0, 0.65); }
.chat-message.own .chat-poll__option.marcada .chat-poll__indicator,
.chat-message.own .chat-poll__option.votada .chat-poll__indicator {
  background: rgba(0, 0, 0, 0.85);
  border-color: rgba(0, 0, 0, 0.85);
  color: #fff;
}
.chat-message.own .chat-poll__submit {
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
}
.chat-poll__hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
  margin-bottom: 6px;
}
.chat-poll__hdr i { font-size: 0.85rem; }
.chat-poll__title {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  margin-bottom: 4px;
  word-break: break-word;
}
.chat-poll__subtitle {
  font-size: 0.78rem;
  opacity: 0.7;
  margin-bottom: 10px;
}
.chat-poll__options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-poll__option {
  all: unset;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .15s ease;
}
.chat-poll__option:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.05);
}
.chat-poll__option:disabled {
  cursor: default;
}
.chat-message.own .chat-poll__option:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
}
.chat-poll__option-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.chat-poll__indicator {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 2px solid currentColor;
  opacity: 0.55;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  box-sizing: border-box;
}
.chat-poll__indicator.radio { border-radius: 50%; }
.chat-poll__indicator.check { border-radius: 4px; }
.chat-poll__indicator i { display: none; }
.chat-poll__option.marcada .chat-poll__indicator,
.chat-poll__option.votada .chat-poll__indicator {
  opacity: 1;
  background: var(--text-color-highlight, #19daf4);
  border-color: var(--text-color-highlight, #19daf4);
  color: #111;
}
.chat-poll__option.marcada .chat-poll__indicator i,
.chat-poll__option.votada .chat-poll__indicator i {
  display: inline;
}
.chat-poll__option-text {
  flex: 1;
  word-break: break-word;
  line-height: 1.3;
}
.chat-poll__option-count {
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.85;
  flex-shrink: 0;
}
.chat-poll__bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(128, 128, 128, 0.25);
  overflow: hidden;
}
.chat-poll__bar-fill {
  height: 100%;
  background: var(--text-color-highlight, #19daf4);
  border-radius: 2px;
  max-width: 100%;
  transition: width .3s ease;
}
.chat-poll__submit {
  margin-top: 12px;
  width: 100%;
  padding: 9px;
  border-radius: 999px;
  border: none;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  background: var(--text-color-highlight, #19daf4);
  color: #111;
}
.chat-poll__submit:disabled { opacity: 0.5; cursor: not-allowed; }
.chat-poll__footer {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(128, 128, 128, 0.25);
  display: flex;
  justify-content: center;
}
.chat-poll__see-votes {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.85;
  font-size: 0.82rem;
  cursor: pointer;
  padding: 4px 8px;
  text-decoration: underline;
}
.chat-poll__see-votes:hover { opacity: 1; }

/* Modal "Resultados" */
.chat-poll-results-overlay {
  position: fixed;
  inset: 0;
  z-index: 2050;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.chat-poll-results {
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  background: var(--bg-color, #1a1a1a);
  color: var(--text-color, #fff);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}
.chat-poll-results__hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--bg-color3, #333);
}
.chat-poll-results__title,
.chat-poll-results__hdr h3 {
  flex: 1;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: normal;
  color: inherit;
  word-break: break-word;
}
.chat-poll-results .chat-poll__bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
}
.chat-poll-results .chat-poll__bar-fill {
  background: var(--text-color-highlight, #19DAF4);
}
.chat-poll-results__close {
  background: none;
  border: none;
  color: inherit;
  font-size: 1rem;
  cursor: pointer;
  padding: 6px;
  opacity: 0.8;
}
.chat-poll-results__close:hover { opacity: 1; }
.chat-poll-results__body {
  padding: 8px 16px 18px;
  overflow-y: auto;
}
.chat-poll-results__group {
  padding: 12px 0;
  border-bottom: 1px solid var(--bg-color3, #333);
}
.chat-poll-results__group:last-child { border-bottom: none; }
.chat-poll-results__group-hdr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  font-weight: 600;
}
.chat-poll-results__op-text { word-break: break-word; }
.chat-poll-results__op-count { font-size: 0.85rem; opacity: 0.85; }
.chat-poll-results__voters {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.chat-poll-results__voters li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 0.9rem;
}
.chat-poll-results__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.chat-poll-results__empty {
  margin: 8px 0 0;
  font-size: 0.8rem;
  opacity: 0.6;
}

/* Modal "Crear encuesta" */
.chat-poll-create-overlay {
  position: fixed;
  inset: 0;
  z-index: 2050;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.chat-poll-create {
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  background: var(--bg-color, #1a1a1a);
  color: var(--text-color, #fff);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}
.chat-poll-create__hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--bg-color3, #333);
}
.chat-poll-create__title,
.chat-poll-create__hdr h3 {
  flex: 1;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  color: inherit;
}
.chat-poll-create__close,
.chat-poll-create__send {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.chat-poll-create__close:hover:not(:disabled),
.chat-poll-create__send:hover:not(:disabled) {
  background: var(--bg-color3, #333);
}
.chat-poll-create__close:disabled,
.chat-poll-create__send:disabled { opacity: 0.4; cursor: not-allowed; }
.chat-poll-create__send {
  background: var(--text-color-highlight, #19daf4);
  color: #111;
}
.chat-poll-create__send:hover:not(:disabled) {
  background: var(--text-color-highlight, #19daf4);
  filter: brightness(1.05);
}
.chat-poll-create__body {
  padding: 14px 16px 18px;
  overflow-y: auto;
}
.chat-poll-create__section { margin-bottom: 18px; }
.chat-poll-create__section:last-child { margin-bottom: 0; }
.chat-poll-create__label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
  margin-bottom: 8px;
}
.chat-poll-create__input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--bg-color3, #333);
  background: var(--bg-color2, #222);
  color: inherit;
  font-size: 0.95rem;
}
.chat-poll-create__input:focus {
  outline: none;
  border-color: var(--text-color-highlight, #19daf4);
}
.chat-poll-create__textarea { resize: vertical; min-height: 56px; }
.chat-poll-create__op-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.chat-poll-create__op-grip {
  opacity: 0.4;
  cursor: grab;
  flex-shrink: 0;
}
.chat-poll-create__op-x {
  flex-shrink: 0;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 6px;
  opacity: 0.7;
  font-size: 0.95rem;
}
.chat-poll-create__op-x:hover { opacity: 1; }
.chat-poll-create__add-op {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--text-color-highlight, #19daf4);
  cursor: pointer;
  padding: 6px 4px;
  font-size: 0.9rem;
  font-weight: 600;
}
.chat-poll-create__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  font-size: 0.95rem;
}
.chat-poll-create__switch {
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}
.chat-poll-create__switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}
.chat-poll-create__switch-track {
  position: absolute;
  inset: 0;
  background: var(--bg-color3, #444);
  border-radius: 999px;
  transition: background .15s ease;
}
.chat-poll-create__switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: left .15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.chat-poll-create__switch input:checked ~ .chat-poll-create__switch-track {
  background: var(--text-color-highlight, #19daf4);
}
.chat-poll-create__switch input:checked ~ .chat-poll-create__switch-thumb {
  left: 20px;
}

/* ============================
   Social (Fase 1)
   ============================ */

.feed-view, .social-amigos-tab {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px;
}

.social-amigos-tab {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.estado-vacio {
  text-align: center;
  padding: 32px 16px;
  border: 1px dashed var(--bg-color3);
  border-radius: 10px;
  margin: 12px 0;
}

/* Composer */
.post-composer {
  background: var(--bg-color);
  border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--text-color) 8%, transparent);
}
.post-composer-header {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.post-composer-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.post-composer-textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  overflow-y: auto;
  background: transparent;
  border: none;
  outline: none;
  color: inherit;
  font: inherit;
  padding: 6px 0;
  min-height: 2.5rem;
  line-height: 1.4;
}
.post-composer-recursos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.post-composer-recurso {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-color3);
}
.post-composer-recurso img,
.post-composer-recurso video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
.post-composer-recurso .btn-eliminar-tag {
  position: absolute;
  top: 4px;
  right: 4px;
}
.post-composer-acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  gap: 8px;
}
.post-composer-add-btn {
  background: transparent;
  border: 1px solid var(--bg-color3);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  cursor: pointer;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  transition: background 0.15s ease;
}
.post-composer-add-btn:hover {
  background: var(--bg-color3);
}
.post-composer-send {
  margin-left: auto;
  flex-shrink: 0;
}

/* Lista de posts */
.lista-posts {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* PostCard: tarjeta tipo “isla”; sin líneas internas (ver cabecera / acciones / comentarios) */
.post-card {
  background: var(--bg-color);
  border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--text-color) 8%, transparent);
}
.post-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding-bottom: 0;
  border-bottom: none;
}
.post-card-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.post-card-titulo {
  display: flex;
  flex-direction: column;
}
.post-card-autor {
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
/* Distintivo de perfil verificado (tick) junto al nombre en la parte social */
.post-card-verificado {
  color: var(--text-color-highlight);
  font-size: 0.8rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  position: relative;
  top: 0.5px;
}
/* Fila del toggle "Verificado" en la ficha de usuario del panel de admin */
.admin-verificado-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 8px 0;
}
.post-card-fecha {
  font-size: 0.75rem;
  opacity: 0.6;
  margin-top: 3px;
}
.post-card-texto {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 6px 0 14px 0;
}
.post-card-referencia {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  background: var(--bg-color3);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 10px;
  font-size: 0.9rem;
}
.post-card-referencia-detalle {
  margin-left: auto;
  font-weight: 600;
}
.post-card-acciones {
  display: flex;
  gap: 12px;
  border-top: none;
  padding-top: 10px;
}
.post-card-accion {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.post-card-accion:hover {
  background: var(--bg-color3);
}
/* Agrupa corazón + contador como un único bloque visual (split-button)
   manteniendo dos botones independientes: corazón = toggle like, número = abrir modal. */
.post-card-like-group {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.post-card-like-group .post-card-accion-like {
  padding-right: 2px;
}
.post-card-like-group .post-card-accion-like-count {
  padding-left: 2px;
}
.post-card-like-group .post-card-accion-like-count:disabled {
  cursor: default;
  opacity: 0.85;
}

/* Vista previa de comentarios estilo Strava: bajo el post y antes del input,
   mostramos los últimos N comentarios cargados con el feed (sin llamada extra).
   Layout compacto: avatar pequeño + nombre en negrita + texto en línea. */
.post-card-comentarios-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.post-card-comentario-preview-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.4;
}
.post-card-comentario-preview-foto {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-top: 1px;
}
.post-card-comentario-preview-body {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}
.post-card-comentario-preview-nombre {
  font-weight: 600;
  margin-right: 6px;
}
.post-card-comentario-preview-texto {
  opacity: 0.95;
}
/* Link discreto para expandir la lista completa de comentarios. */
.post-card-ver-comentarios {
  background: transparent;
  border: none;
  color: var(--text-secondary, #888);
  cursor: pointer;
  padding: 4px 0;
  font-size: 0.85rem;
  text-align: left;
  align-self: flex-start;
  margin-top: 4px;
}
.post-card-ver-comentarios:hover,
.post-card-ver-comentarios:focus-visible {
  color: var(--text-color, inherit);
  outline: none;
  text-decoration: underline;
}
/* Mini-input inline bajo el post: respiramos del preview/acciones sin alterar el
   estilo del input cuando se usa dentro del panel expandido. */
.post-card > .resultado-comentario-input {
  margin-top: 12px;
}

/* Comentarios de post */
.post-comentarios {
  border-top: none;
  margin-top: 6px;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.post-comentario {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.post-comentario-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.post-comentario-cuerpo {
  flex: 1;
  min-width: 0;
  background: var(--bg-color3);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.9rem;
}
.post-comentario-autor {
  display: block;
  font-weight: 600;
  font-size: 0.8rem;
  margin-bottom: 2px;
}
.post-comentario-texto {
  white-space: pre-wrap;
  word-break: break-word;
}
.post-comentario-input {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.post-comentario-input .input-field {
  flex: 1;
}

/* Perfil publico */
.perfil-publico-cabecera {
  display: flex;
  align-items: center;
  gap: 12px;
}
.perfil-publico-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.perfil-publico-avatar--zoom {
  cursor: zoom-in;
  transition: transform 0.15s ease;
}
.perfil-publico-avatar--zoom:hover {
  transform: scale(1.05);
}
.perfil-publico-cabecera-texto {
  flex: 1;
  min-width: 0;
}
.perfil-publico-cabecera-acciones {
  flex-shrink: 0;
  margin-left: auto;
}
.perfil-publico-cabecera-acciones .boton-confirmar-modal,
.perfil-publico-cabecera-acciones .boton-cancelar-modal {
  width: auto;
  padding: 8px 14px;
  font-size: 0.9rem;
  white-space: nowrap;
}
.perfil-publico-nombre {
  margin: 0;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-color);
  text-transform: none;
  letter-spacing: normal;
  word-break: break-word;
}
.perfil-publico-sep {
  height: 0;
  margin: 16px 0 12px;
}
.perfil-publico-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-color3);
  color: var(--bg-text-grises, inherit);
  margin-top: 4px;
}
/* Botón de verificar/desverificar perfil (solo superadmins) en el modal de perfil público */
.perfil-publico-verificar-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--text-color-highlight);
  background: transparent;
  color: var(--text-color-highlight);
  cursor: pointer;
  margin-top: 6px;
  transition: all 0.2s ease;
}
.perfil-publico-verificar-btn:hover:not(:disabled) {
  background: var(--text-color-highlight);
  color: var(--text-color-highlight-t);
}
.perfil-publico-verificar-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.perfil-publico-bloqueo-msg {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.4;
}

/* Card del bloque cuando se comparte como Post (TipoPost.Bloque). Mismo estilo que el bloque
   original: barra lateral con su color + nombre + descripcion. */
.post-card-bloque {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--bg-color3);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
}
.post-card-bloque-color {
  width: 6px;
  flex-shrink: 0;
}
.post-card-bloque-body {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
}
.post-card-bloque-titulo {
  display: block;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.post-card-bloque-descripcion {
  margin: 0;
  font-size: 0.85rem;
  white-space: pre-wrap;
  opacity: 0.85;
}

/* Resultado en feed: bajo la card del bloque, sin separador; varias clasificaciones en columna */
.post-card-resultado-inline {
  width: 100%;
  box-sizing: border-box;
  margin: 6px 0 10px;
  padding-top: 0;
  border-top: none;
}
.post-card-resultado-line {
  margin-bottom: 12px;
}
.post-card-resultado-line:last-child {
  margin-bottom: 0;
}
.post-card-resultado-inline__label {
  margin: 0 0 6px 0;
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--text-color);
  opacity: 0.88;
  display: flex;
  align-items: center;
  gap: 7px;
  letter-spacing: 0.02em;
}
.post-card-resultado-inline__label i {
  color: var(--text-color-highlight);
  font-size: 1.05rem;
  opacity: 0.95;
}
.post-card-resultado-inline__score {
  display: block;
  font-family: inherit;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--text-color-highlight);
  min-width: 0;
}

/* Modal compartir al feed (bloque): sin filas duplicadas de adjuntos */
.social-share-feed-modal__field {
  width: 100%;
  min-height: 88px;
  resize: vertical;
  margin-top: 4px;
}
.social-share-feed-modal__attach {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.social-share-feed-modal__attach-hint {
  font-size: 0.82rem;
  opacity: 0.65;
  flex: 1;
  min-width: 0;
}
/* Modal "Compartir al feed": layout tipo app (vista previa + modo + comentario + pie) */
.social-share-feed-modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
}
.social-share-feed-modal__bloque-preview {
  margin-bottom: 14px;
}
.social-share-feed-modal .input-group {
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.social-share-feed-modal__comment-label {
  display: block;
  font-size: 0.95rem;
  font-weight: 650;
  margin: 4px 0 6px 0;
  color: var(--text-color);
}
.modal-confirmar-buttons .social-share-feed-modal__footer {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
  margin: 0;
}
.social-share-feed-modal__footer .boton-confirmar-modal,
.social-share-feed-modal__footer .boton-cancelar-modal {
  flex: 1;
  width: auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.25;
  text-align: center;
}
@media (hover: hover) {
  .social-share-feed-modal__footer .boton-cancelar-modal:hover {
    filter: brightness(1.06);
  }
}
/* Cabecera ModalConfirmar: anula el h2 global (Manuka 3rem) — mismo criterio que .modal-title */
.modal-confirmar-overlay .modal-confirmar-content .modal-header h2 {
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--text-color);
  letter-spacing: normal;
  text-transform: none;
  margin: 0;
}

/* Social: layout escritorio + panel lateral tipo Strava */
.social-body-layout {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 4px 0;
}
.social-tabs {
  max-width: 1180px;
  margin: 0 auto;
}
/* Misma altura visual FEED / AMIGOS (la badge no desalinea la fila) */
.social-tabs.semana-tabs .semana-tab {
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 48px;
  padding-top: 6px;
  padding-bottom: 10px;
  box-sizing: border-box;
}
.social-tabs.semana-tabs .semana-tab-nombre {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  line-height: 1.2;
}
.social-main-column {
  flex: 1;
  min-width: 0;
}
.social-sidebar-desktop {
  display: none;
}
@media (min-width: 992px) {
  .social-sidebar-desktop {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 0 0 300px;
    position: sticky;
    top: 8px;
    align-self: flex-start;
    /* El sidebar puede superar la ventana (perfil + racha + sugerencias); scroll interno
       para que la isla de sugerencias no quede fuera de pantalla sin scroll de página. */
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}
.social-sidebar-desktop-inner {
  background: var(--bg-color);
  border-radius: 12px;
  padding: 16px 14px;
  border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--text-color) 8%, transparent);
}
.social-sidebar-profile {
  text-align: center;
  margin-bottom: 14px;
}
.social-sidebar-avatar-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
}
.social-sidebar-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}
.social-sidebar-name {
  font-weight: 700;
  font-size: 1rem;
  margin-top: 10px;
  line-height: 1.25;
  word-break: break-word;
}
.social-sidebar-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 6px;
  text-align: center;
  margin-bottom: 6px;
  width: 100%;
  justify-items: center;
}
.social-sidebar-stat {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.social-sidebar-stat-num {
  display: block;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
}
.social-sidebar-stat-lbl {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.65;
  margin-top: 2px;
}
.social-sidebar-hint {
  font-size: 0.7rem;
  opacity: 0.55;
  margin: 0 0 8px 0;
  line-height: 1.35;
  text-align: center;
}
.social-sidebar-posts-line {
  text-align: center;
  margin: 0 0 14px 0;
  font-size: 0.85rem;
}
.social-sidebar-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--bg-color3);
}
.social-sidebar-section-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.6;
  margin-bottom: 6px;
}
.social-sidebar-recent {
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.3;
}
.social-sidebar-muted {
  opacity: 0.55;
}
.social-sidebar-muted.small {
  font-size: 0.78rem;
  margin-top: 4px;
}

.social-sidebar-progress .social-sidebar-compare {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.social-sidebar-compare-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.85rem;
}
.social-sidebar-compare-label {
  opacity: 0.75;
}
.social-sidebar-compare-value {
  font-weight: 700;
  font-size: 0.95rem;
}
.social-sidebar-compare-delta {
  font-size: 0.75rem;
  opacity: 0.7;
}
.social-sidebar-compare-delta.positive {
  color: var(--text-color-highlight);
  opacity: 1;
}
.social-sidebar-compare-delta.negative {
  color: #ef4444;
  opacity: 1;
}

.social-suggestions {
  margin-bottom: 4px;
}
.social-suggestion-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  flex: 1;
  text-align: left;
}
.social-suggestion-reason {
  font-size: 0.75rem;
  opacity: 0.6;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.social-suggestion-sent {
  font-size: 0.78rem;
  opacity: 0.55;
  white-space: nowrap;
}

/* Sugerencias de amistad en el feed (solo móvil, estilo Strava) */
.social-suggestions-feed {
  margin: 4px 0 14px;
}
.social-suggestions-feed .social-suggestions {
  margin-bottom: 0;
}
.social-suggestions-feed .social-section-divider {
  display: none;
}
@media (min-width: 992px) {
  .social-suggestions-feed {
    display: none;
  }
}
/* Isla propia de sugerencias en escritorio, bajo la isla de racha/progreso */
.social-suggestions-island {
  margin-top: 16px;
}
.social-suggestions-island .social-section-header {
  margin-top: 0;
}
.social-suggestions-island .social-suggestions {
  margin-bottom: 0;
}
.social-suggestions-island .social-section-divider {
  display: none;
}

/* Carrusel de sugerencias (scroll horizontal en móvil, flechas en escritorio) */
.social-suggestions-nav {
  margin-left: auto;
  display: none;
  gap: 6px;
}
@media (min-width: 992px) {
  .social-suggestions-nav {
    display: flex;
  }
}
.social-suggestions-arrow {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--bg-color3);
  background: var(--bg-color);
  color: var(--text-color);
  cursor: pointer;
  font-size: 0.62rem;
  transition: background 0.15s ease;
}
.social-suggestions-arrow:hover {
  background: var(--bg-color3);
}

.social-suggestions {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.social-suggestions-track {
  display: flex;
  gap: 10px;
  max-width: 100%;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 2px 8px;
}
.social-suggestions-track::-webkit-scrollbar {
  display: none;
}

/* Modo lote (escritorio): lista compacta de filas que cabe en la isla sin scroll */
.social-suggestions-lote {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px;
}

.social-suggestion-card {
  flex: 0 0 132px;
  box-sizing: border-box;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-color2);
  border: 1px solid var(--bg-color3);
  border-radius: 12px;
  padding: 14px 10px 12px;
}
.social-suggestion-card-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-color);
}
.social-suggestion-card-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 8px;
}
.social-suggestion-card-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-color);
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.social-suggestion-card-reason {
  font-size: 0.72rem;
  color: var(--text-color);
  opacity: 0.6;
  text-align: center;
  line-height: 1.2;
  margin-top: 3px;
  width: 100%;
  min-height: 2.4em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.social-suggestion-card-btn {
  margin-top: 10px;
  width: 100%;
}
.social-suggestion-card-sent {
  margin-top: 12px;
  font-size: 0.75rem;
  opacity: 0.55;
}

/* Ranking semanal de amigos (feed) */
.social-ranking-card {
  background: var(--bg-color2);
  border: 1px solid var(--bg-color3);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.social-ranking-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.social-ranking-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.95rem;
}
.social-ranking-title i {
  color: var(--text-color-highlight);
  font-size: 1rem;
}
.social-ranking-sub {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.55;
}
.social-ranking-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.social-ranking-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 10px;
}
.social-ranking-row.is-me {
  background: color-mix(in srgb, var(--text-color-highlight) 16%, transparent);
}
.social-ranking-pos {
  width: 24px;
  flex-shrink: 0;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
}
.social-ranking-user {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.social-ranking-avatar {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  object-fit: cover;
}
.social-ranking-name {
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-color);
}
.social-ranking-count {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.social-ranking-count strong {
  font-size: 0.95rem;
}
.social-ranking-count i {
  font-size: 0.85rem;
  opacity: 0.6;
}
.social-ranking-vermas {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 6px 0;
  background: transparent;
  border: none;
  color: var(--color-principal);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.social-ranking-vermas:hover {
  text-decoration: underline;
}
.social-ranking-foot {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--bg-color3);
  font-size: 0.8rem;
  opacity: 0.7;
  text-align: center;
}

/* Racha estilo Strava (tres métricas + semana), colores de la app */
.social-streak-strava {
  width: 100%;
}
.social-streak-strava-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.65;
  margin-bottom: 10px;
  font-weight: 650;
  color: var(--text-color);
}
.social-streak-strava-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.social-streak-strava-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.social-streak-strava-flame {
  font-size: 1.65rem;
  line-height: 1;
  flex-shrink: 0;
}
.social-streak-strava-metrics {
  display: flex;
  flex-direction: row;
  flex: 1;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}
.social-streak-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
  text-align: center;
}
.social-streak-metric-value {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-color-highlight);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.social-streak-metric-label {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.65;
  margin-top: 4px;
  line-height: 1.2;
  color: var(--text-color);
}
.social-streak-week-shell {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}
.social-streak-week-strip--strava {
  gap: 0.38rem;
  padding: 0;
}
.dia-btn.social-streak-dia.social-streak-dia--strava {
  width: 100%;
  max-width: 42px;
  height: 58px;
  min-height: 58px;
  max-height: 58px;
  background: color-mix(in srgb, var(--bg-color) 90%, var(--text-color) 6%);
  border: 1px solid color-mix(in srgb, var(--text-color) 12%, transparent);
  border-radius: 10px;
}
.dia-btn.social-streak-dia.social-streak-dia--strava.seleccionado {
  box-shadow: 0 0 0 2px var(--text-color-highlight);
  border-color: color-mix(in srgb, var(--text-color-highlight) 40%, transparent);
  /* No rellenar con el highlight global (.dia-btn.seleccionado); texto claro */
  background: color-mix(in srgb, var(--bg-color) 90%, var(--text-color) 6%);
  color: #fff;
}
.dia-btn.social-streak-dia.social-streak-dia--strava.seleccionado .letra-dia,
.dia-btn.social-streak-dia.social-streak-dia--strava.seleccionado .numero-dia {
  color: #fff;
}
.dia-btn.social-streak-dia.social-streak-dia--strava.social-streak-dia--done:not(.seleccionado) {
  background: color-mix(in srgb, var(--text-color-highlight) 16%, var(--bg-color3));
  border-color: color-mix(in srgb, var(--text-color-highlight) 32%, transparent);
}
.dia-btn.social-streak-dia.social-streak-dia--strava .letra-dia {
  font-size: 0.65rem;
  opacity: 0.78;
}
.dia-btn.social-streak-dia.social-streak-dia--strava .numero-dia {
  font-weight: 700;
}

/* Racha social: mismo lenguaje visual que mini-calendario (dia-btn) */
.social-streak-headline {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.social-streak-headline--sidebar {
  margin-bottom: 10px;
}
.social-streak-emoji {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}
.social-streak-headline--sidebar .social-streak-emoji {
  font-size: 1.35rem;
}
.social-streak-headline-copy {
  min-width: 0;
  flex: 1;
}
.social-streak-line-primary,
.social-streak-line-secondary {
  margin: 0;
  line-height: 1.25;
  font-size: 0.82rem;
  color: var(--text-color);
  opacity: 0.92;
}
.social-streak-line-secondary {
  font-size: 0.76rem;
  opacity: 0.62;
  margin-top: 3px;
}
.social-streak-line-primary .social-streak-num,
.social-streak-line-secondary .social-streak-num {
  font-weight: 800;
  margin-right: 0.28em;
  color: var(--text-color);
  opacity: 1;
}
.social-streak-week-strip {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 0.35rem;
  width: 100%;
  padding: 2px 0 0;
}
.social-streak-week-strip--sidebar {
  gap: 0.2rem;
}
.social-streak-dia-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
}
.dia-btn.social-streak-dia {
  /* Misma altura siempre (con o sin icono pesa) — como mini-calendario */
  display: grid;
  grid-template-rows: 1fr 1fr 16px;
  align-items: center;
  justify-items: center;
  width: 38px;
  max-width: 38px;
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  padding: 2px;
  box-sizing: border-box;
  cursor: default;
  pointer-events: none;
  gap: 0;
  overflow: hidden;
}
.dia-btn.social-streak-dia .letra-dia {
  opacity: 0.85;
  align-self: end;
}
.dia-btn.social-streak-dia .numero-dia {
  font-size: 0.95rem;
  align-self: center;
}
.social-streak-pesa {
  display: block;
  font-size: 0.82rem;
  line-height: 1;
  opacity: 1;
  align-self: center;
  margin-top: 0;
  -webkit-font-smoothing: antialiased;
  color: var(--text-color-highlight);
}
.dia-btn.social-streak-dia.seleccionado .social-streak-pesa {
  opacity: 1;
  color: var(--text-color-highlight);
}
.social-sidebar-link-row {
  width: 100%;
  margin-top: 14px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-color3);
  border: none;
  border-radius: 10px;
  color: inherit;
  font: inherit;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 500;
}
.social-sidebar-link-row:hover {
  filter: brightness(1.06);
}

/* ============================================================ */
/* Social: cabecera de seccion y filas de amigos / solicitudes  */
/* ============================================================ */
.social-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 8px;
}
.social-section-title {
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-color);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0;
}
.social-section-count {
  opacity: 0.6;
  font-size: 0.9rem;
}
.social-section-divider {
  border: none;
  border-top: 1px solid var(--bg-color3);
  margin: 16px 0;
}

.social-friend-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.social-friend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background-color: var(--bg-color);
  border: 1px solid var(--bg-color3);
  border-radius: 10px;
  transition: background-color 0.15s ease;
}
@media (hover: hover) {
  .social-friend-row:hover {
    background-color: var(--bg-color2);
  }
}

.social-friend-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.social-friend-avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--bg-color3);
  flex-shrink: 0;
}

.social-friend-name {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.social-friend-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.social-friend-btn {
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s ease;
}
.social-friend-btn:hover {
  filter: brightness(1.1);
}
.social-friend-btn-primary {
  background-color: var(--text-color-highlight);
  color: var(--text-color-highlight-t);
}
.social-friend-btn-secondary {
  background-color: var(--bg-color3);
  color: var(--text-color);
}

@media (max-width: 480px) {
  .social-friend-row {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px;
  }
  .social-friend-info {
    flex: 1 1 auto;
    min-width: 0;
  }
  .social-friend-actions {
    flex-shrink: 0;
    justify-content: flex-end;
  }
  .social-friend-btn {
    padding: 6px 10px;
    font-size: 0.8rem;
  }
}

.nav-social-label {
  display: inline-flex;
  align-items: center;
}

/* ============================================================ */
/* Social: refinamiento PostCard (acciones, boton eliminar)      */
/* ============================================================ */
.post-card-eliminar {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 4px;
  font-size: 0.95rem;
  border-radius: 50%;
  flex-shrink: 0;
  transition: color 0.15s ease, background 0.15s ease;
}
.post-card-eliminar:hover {
  color: #e74c3c;
  background: rgba(255, 255, 255, 0.06);
}

/* ============================================================ */
/* Menú "..." (editar / eliminar) y modo edición del post       */
/* ============================================================ */

.post-card-menu-wrapper {
  position: relative;
  flex-shrink: 0;
}
.post-card-menu-btn {
  background: none;
  border: none;
  color: var(--text-color-highlight);
  cursor: pointer;
  padding: 4px 8px;
  font-size: 1rem;
  border-radius: 50%;
  transition: background 0.15s ease, filter 0.15s ease;
}
.post-card-menu-btn:hover {
  background: rgba(25, 218, 244, 0.1);
  filter: brightness(1.1);
}
.post-card-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  background: var(--bg-color-secondary, #1f1f1f);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 30;
  min-width: 140px;
  overflow: hidden;
}
.post-card-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text-color, #fff);
  padding: 10px 14px;
  font-size: 0.9rem;
  cursor: pointer;
}
.post-card-menu-item:hover {
  background: rgba(255, 255, 255, 0.07);
}
.post-card-menu-item-danger {
  color: #e74c3c;
}
.post-card-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: transparent;
}
.post-card-editado {
  opacity: 0.6;
  font-style: italic;
  margin-left: 4px;
}
.post-card-edicion {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 4px;
}
.post-card-edicion-acciones {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.post-card-edicion-botones {
  display: flex;
  gap: 8px;
}
.post-card-edicion-botones .boton-confirmar-modal,
.post-card-edicion-botones .boton-cancelar-modal {
  width: auto;
  padding: 8px 16px;
  font-size: 0.9rem;
  min-height: 36px;
}
.post-card-edicion-error {
  color: #e74c3c;
  font-size: 0.85rem;
}

.post-card-accion {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.65);
  padding: 6px 10px;
  transition: color 0.15s ease, background 0.15s ease;
}
.post-card-accion i {
  font-size: 1.1rem;
  line-height: 1;
}
.post-card-accion.activa {
  color: var(--text-color-highlight);
}
.post-card-accion.activa i {
  color: var(--text-color-highlight);
}

/* ============================================================ */
/* Social mobile: barra de racha (mismo patron dia-btn que programacion) */
/* ============================================================ */
.social-mobile-streak {
  display: none;
}
@media (max-width: 991px) {
  .social-mobile-streak {
    display: block;
  }
  /* Carrusel horizontal tipo Strava: 1 slide por viewport, swipe con snap. */
  .social-mobile-streak-track {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .social-mobile-streak-track::-webkit-scrollbar {
    display: none;
  }
  .social-mobile-streak-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    min-width: 0;
  }
  .social-mobile-streak-panel {
    background: transparent;
    border-bottom: none;
    padding: 12px 1rem 14px;
    margin-bottom: 0;
  }
  /* Cards de stats y actividad reciente: mismo aire que el slide de racha. */
  .social-mobile-stat-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .social-mobile-stat-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color-highlight);
  }
  .social-mobile-stats {
    display: flex;
    justify-content: space-around;
    gap: 12px;
  }
  .social-mobile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
  }
  .social-mobile-stat-num {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-color-highlight);
  }
  .social-mobile-stat-lbl {
    font-size: 0.78rem;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .social-mobile-recent {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
  }
  .social-mobile-recent-date {
    font-size: 0.8rem;
    opacity: 0.65;
  }
  .social-mobile-recent-empty {
    font-size: 0.9rem;
    opacity: 0.6;
    font-style: italic;
  }
}

/* ============================================================ */
/* Social: pagina sin gutter horizontal en movil + contenido alineado */
/* ============================================================ */
@media (max-width: 768px) {
  .market-container.social-page-root {
    padding-left: 0;
    padding-right: 0;
  }
  .social-tabs {
    padding: 0 1rem;
  }
  .social-mobile-streak-panel {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .feed-view {
    padding: 8px 10px;
    max-width: 100%;
    margin: 0;
  }
  .social-amigos-tab {
    padding: 8px 12px;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
  }
  .post-card-medios-badge {
    right: 10px;
  }
  .lista-posts {
    gap: 14px;
  }
  .social-body-layout {
    padding: 8px 0 0;
    margin: 0;
  }
  .post-card-medios-nav {
    display: none;
  }
  .post-card-media,
  .post-card-video-wrapper {
    border-radius: 0;
  }
}

/* ============================================================ */
/* Social: carrusel de recursos (snap + rueda en escritorio vía JS) */
/* ============================================================ */
.post-card-medios-outer {
  position: relative;
  margin-bottom: 10px;
}
.post-card-medios-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  pointer-events: none;
}
.post-card-medios-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.post-card-medios-nav:hover {
  background: rgba(0, 0, 0, 0.65);
}
.post-card-medios-prev {
  left: 6px;
}
.post-card-medios-next {
  right: 6px;
}
.post-card-medios {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  gap: 0;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.post-card-medios::-webkit-scrollbar {
  height: 5px;
}
.post-card-media {
  flex: 0 0 100%;
  scroll-snap-align: start;
  width: 100%;
  max-height: min(70vh, 480px);
  object-fit: cover;
  border-radius: 8px;
  background: #000;
  cursor: pointer;
}
.post-card-video-wrapper {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
}
.post-card-video-wrapper .post-card-media {
  flex: none;
  display: block;
  pointer-events: none;
}
.post-card-medios-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 0 12px;
}
.post-card-medios-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.post-card-medios-dot.active {
  background: var(--text-color-highlight);
  transform: scale(1.25);
}

/* ============================================================ */
/* Menciones (@usuario) en posts y comentarios                  */
/* ============================================================ */

/* Render dentro del texto del post/comentario. */
.post-mention {
  color: var(--text-color-highlight);
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
  padding: 0 1px;
  transition: background 0.15s ease;
}
.post-mention:hover,
.post-mention:focus {
  text-decoration: underline;
  outline: none;
}

/* Wrapper del textarea/input con dropdown flotante. */
.mention-textarea-wrapper {
  position: relative;
  flex: 1;
  min-width: 0;
}
.mention-textarea-wrapper > textarea,
.mention-textarea-wrapper > input {
  width: 100%;
  box-sizing: border-box;
}

/* Dropdown flotante anclado al input. */
.mention-autocomplete {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 50;
  max-height: 220px;
  overflow-y: auto;
  background: var(--bg-color2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mention-autocomplete-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-color);
  font-size: 0.95rem;
  text-align: left;
  width: 100%;
}

.mention-autocomplete-item:hover,
.mention-autocomplete-item:focus {
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}

.mention-autocomplete-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.mention-autocomplete-nombre {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Asignación atleta-coach ===== */
/* El modal no scrollea entero: scrollean los dos paneles internos (sin asignar / coaches),
   de modo que el buscador y la cabecera "Sin asignar" quedan siempre visibles arriba. */
.modal-content:has(.asignaciones-coach) {
  overflow: hidden;
}
.modal-body:has(.asignaciones-coach) {
  min-height: 0;
}
.asignaciones-coach {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  flex: 1;
  min-height: 0;
}
.asignaciones-coach__buscador {
  padding: 0.5rem 0;
  flex-shrink: 0;
}
.asignaciones-coach__panel {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Sin asignar: como máximo la mitad del alto disponible; si hay pocos, se encoge. */
.asignaciones-coach__panel--sin-asignar {
  flex: 0 1 auto;
  max-height: 50%;
}
/* Coaches: ocupan el resto, con su propio scroll. */
.asignaciones-coach__panel--coaches {
  flex: 1 1 0;
  margin-top: 8px;
  padding-top: 4px;
  border-top: 1px solid rgba(127, 127, 127, 0.25);
}
/* La cabecera de cada coach se queda pegada arriba mientras se scrollean sus atletas. */
.asignaciones-coach__panel--coaches .asignaciones-coach__seccion-coach {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-color);
}
.asignaciones-coach__vacio {
  padding: 1.2rem 1rem;
  text-align: center;
  color: var(--text-color-highlight);
  opacity: 0.85;
}
.asignaciones-coach__vacio-seccion {
  padding: 0.35rem 0.4rem 0.6rem;
  font-size: 0.82rem;
  color: var(--text-color-highlight);
  opacity: 0.7;
}
.asignaciones-coach__seccion-coach {
  gap: 0.5rem;
}
.asignaciones-coach__coach-foto {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.asignaciones-coach__contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--text-color-highlight-light);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.asignacion-fila {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.4rem;
  border-radius: 10px;
}
.asignacion-fila:hover {
  background: rgba(127, 127, 127, 0.08);
}
.asignacion-fila__foto {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.asignacion-fila__nombre {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 500;
}
.asignacion-fila__select {
  flex-shrink: 0;
  width: auto;
  max-width: 45%;
  min-width: 120px;
  padding: 6px 10px;
  font-size: 0.8rem;
}
.feedbacks-selectores__fila-coach {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.feedbacks-selectores__fila-coach .modal-subtitle {
  margin-bottom: 6px;
}
.lista-chats-filtro-coach {
  margin: 4px 10px 10px;
}
@media (max-width: 768px) {
  .asignacion-fila__select {
    min-width: 110px;
    max-width: 50%;
    font-size: 0.74rem;
  }
}

/* ===== Insignias: tiers, vitrina del perfil y celebración ===== */
/* Color por nivel: bronce → plata → oro → platino → esmeralda → diamante */
.insignia-tier-1 { --insignia-color: #cd7f32; }
.insignia-tier-2 { --insignia-color: #8f9aab; }
.insignia-tier-3 { --insignia-color: #d9a514; }
.insignia-tier-4 { --insignia-color: #4fb8c9; }
.insignia-tier-5 { --insignia-color: #2eaf64; }
.insignia-tier-6 { --insignia-color: #6e8bff; }
.insignia-tier-7 { --insignia-color: #b06bff; }
.insignia-tier-8 { --insignia-color: #ff6b9d; }
.insignia-tier-9 { --insignia-color: #ff7a45; }
.insignia-tier-10 { --insignia-color: #ffc933; }

.insignias-vitrina {
  margin: 4px 0 16px;
}
.insignias-vitrina__titulo {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 0.95rem;
}
.insignias-vitrina__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}
.insignia-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--insignia-color, #9aa4b2) 45%, transparent);
  background: color-mix(in srgb, var(--insignia-color, #9aa4b2) 8%, transparent);
  text-align: center;
}
.insignia-card.is-locked {
  --insignia-color: #9aa4b2;
  opacity: 0.65;
  border-style: dashed;
  background: transparent;
}
.insignia-card__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--insignia-color) 18%, transparent);
  color: var(--insignia-color);
  font-size: 22px;
}
.insignia-card.is-locked .insignia-card__icono {
  filter: grayscale(1);
}
.insignia-card__nombre {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
}
.insignia-card__nivel {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--insignia-color);
}
.insignia-card__progreso {
  width: 100%;
  height: 5px;
  margin-top: 4px;
  border-radius: 999px;
  background: rgba(127, 127, 127, 0.18);
  overflow: hidden;
}
.insignia-card__progreso-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--insignia-color);
  transition: width 0.4s ease;
}
.insignia-card__progreso-texto {
  font-size: 0.66rem;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}
.insignia-card__max {
  color: var(--insignia-color);
  font-weight: 700;
  opacity: 1;
}

/* La insignia es un botón: reseteamos estilos y damos feedback de pulsable. */
button.insignia-card {
  font: inherit;
  color: inherit;
  cursor: pointer;
  width: 100%;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
button.insignia-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--insignia-color, #9aa4b2) 28%, transparent);
}
button.insignia-card:active {
  transform: translateY(0);
}
.insignias-vitrina__hint {
  margin: -2px 0 10px;
  font-size: 0.76rem;
  opacity: 0.6;
}

/* ===== Detalle de insignia: descripción + escalera de niveles ===== */
.insignia-detalle {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 2px 8px;
}
.insignia-detalle__desc {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  opacity: 0.85;
}
.insignia-detalle__estado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--insignia-color, #d9a514) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--insignia-color, #d9a514) 35%, transparent);
}
.insignia-detalle__estado-num {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--insignia-color, #d9a514);
  font-variant-numeric: tabular-nums;
}
.insignia-detalle__estado-lbl {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}
.insignia-detalle__niveles-titulo {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.6;
  font-weight: 700;
}
.insignia-detalle__niveles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.insignia-nivel {
  --insignia-color: #9aa4b2;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(127, 127, 127, 0.18);
  background: rgba(127, 127, 127, 0.05);
}
.insignia-nivel.is-done {
  border-color: color-mix(in srgb, var(--insignia-color) 45%, transparent);
  background: color-mix(in srgb, var(--insignia-color) 9%, transparent);
}
.insignia-nivel.is-next {
  border-color: color-mix(in srgb, var(--text-color-highlight) 55%, transparent);
  background: color-mix(in srgb, var(--text-color-highlight) 8%, transparent);
}
.insignia-nivel__marca {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(127, 127, 127, 0.18);
  color: var(--text-color);
  font-size: 0.85rem;
  font-weight: 700;
}
.insignia-nivel.is-done .insignia-nivel__marca {
  background: var(--insignia-color);
  color: white;
}
.insignia-nivel.is-next .insignia-nivel__marca {
  background: var(--text-color-highlight);
  color: white;
}
.insignia-nivel__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.insignia-nivel__titulo {
  font-weight: 600;
  font-size: 0.9rem;
}
.insignia-nivel__umbral {
  font-weight: 400;
  opacity: 0.65;
  font-variant-numeric: tabular-nums;
}
.insignia-nivel__fecha {
  font-size: 0.74rem;
  color: var(--insignia-color);
  font-weight: 600;
}
.insignia-nivel__barra {
  height: 6px;
  border-radius: 999px;
  background: rgba(127, 127, 127, 0.2);
  overflow: hidden;
}
.insignia-nivel__barra-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--text-color-highlight);
  transition: width 0.4s ease;
}
.insignia-nivel__restante {
  font-size: 0.74rem;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

/* Notificación "insignia obtenida": medalla en lugar de avatar */
.notif-insignia-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, #d9a514 18%, transparent);
  color: #d9a514;
  font-size: 20px;
}

/* Celebración a pantalla completa al ganar una insignia */
.insignia-celebracion-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: insignia-overlay-in 0.25s ease;
}
.insignia-celebracion {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(360px, 92vw);
  padding: 28px 24px 22px;
  border-radius: 18px;
  background: var(--bg-color, #fff);
  color: var(--text-color);
  border: 1px solid color-mix(in srgb, var(--insignia-color, #d9a514) 50%, transparent);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
  text-align: center;
  animation: insignia-pop 0.45s cubic-bezier(0.22, 1.4, 0.36, 1);
}
.insignia-confeti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.insignia-confeti__pieza {
  position: absolute;
  top: -16px;
  border-radius: 2px;
  opacity: 0;
  will-change: transform, opacity;
  animation-name: insignia-confeti-caida;
  animation-timing-function: cubic-bezier(0.4, 0.2, 0.7, 1);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes insignia-confeti-caida {
  0% { transform: translate3d(0, -20px, 0) rotateZ(0deg); opacity: 0; }
  8% { opacity: 1; }
  100% { transform: translate3d(var(--confeti-drift, 0), 105vh, 0) rotateZ(var(--confeti-rot, 180deg)); opacity: 1; }
}
.insignia-celebracion__medalla {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--insignia-color, #d9a514) 20%, transparent);
  color: var(--insignia-color, #d9a514);
  font-size: 42px;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--insignia-color, #d9a514) 12%, transparent);
  animation: insignia-medalla 1.6s ease-in-out infinite alternate;
}
.insignia-celebracion__titulo {
  margin: 10px 0 0;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
}
.insignia-celebracion__nombre {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
}
.insignia-celebracion__nivel {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--insignia-color, #d9a514);
  color: white;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.insignia-celebracion__desc {
  margin: 6px 0 12px;
  font-size: 0.85rem;
  opacity: 0.8;
}
.insignia-celebracion__logro {
  margin: 8px 0 14px;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-color);
}
@keyframes insignia-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes insignia-pop {
  0% { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes insignia-medalla {
  from { transform: translateY(0); }
  to { transform: translateY(-5px); }
}

/* Tarjeta "Tu semana" (recap semanal generado por IA) */
.resumen-semanal-card {
  background: var(--bg-color2);
  border: 1px solid var(--bg-color3);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.resumen-semanal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.resumen-semanal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.95rem;
}
.resumen-semanal-title i {
  color: var(--text-color-highlight);
  font-size: 1rem;
}
.resumen-semanal-sub {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.55;
}
.resumen-semanal-mensaje {
  margin: 0 0 12px;
  font-size: 0.92rem;
  line-height: 1.5;
}
.resumen-semanal-empty {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.7;
}
.resumen-semanal-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.resumen-semanal-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.resumen-semanal-stat-val {
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.resumen-semanal-stat-lbl {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
}
.resumen-semanal-trend {
  font-size: 0.72rem;
  font-weight: 700;
}
.resumen-semanal-trend.up { color: #37b24d; }
.resumen-semanal-trend.down { color: #e8590c; }
.resumen-semanal-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.resumen-semanal-chip-titulo {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
  width: 100%;
}
.resumen-semanal-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--text-color-highlight) 14%, transparent);
}
.resumen-semanal-chip i {
  font-size: 0.85rem;
  color: var(--text-color-highlight);
}

/* Informe detallado dentro del modal "Tu semana" */
.resumen-informe {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  min-height: 0;
}
.resumen-informe .resumen-semanal-stats {
  gap: 16px 28px;
}
/* Footer con "Volver" + acción principal en la vista de compartir */
.resumen-share-acciones {
  display: flex;
  gap: 10px;
}
.resumen-share-acciones .boton-confirmar-modal {
  flex: 1;
}

/* Gráficas de evolución mensual (SVG) */
.resumen-evolucion {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 4px;
}
.evo-chart__title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
  margin-bottom: 2px;
}
.evo-chart__svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.evo-chart__area {
  fill: var(--evo-color);
  opacity: 0.13;
  stroke: none;
}
.evo-chart__line {
  fill: none;
  stroke: var(--evo-color);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.evo-chart__dot {
  fill: var(--bg-color2);
  stroke: var(--evo-color);
  stroke-width: 2;
}
.evo-chart__val {
  fill: currentColor;
  font-size: 11px;
  font-weight: 700;
}
.evo-chart__lbl {
  fill: currentColor;
  opacity: 0.5;
  font-size: 10px;
}

/* Vista previa escalada dentro del modal "Tu semana" */
.resumen-share-preview-frame {
  width: 270px;
  height: 480px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  background:
    linear-gradient(45deg, rgba(128, 128, 128, 0.28) 25%, transparent 25%) 0 0/18px 18px,
    linear-gradient(-45deg, rgba(128, 128, 128, 0.28) 25%, transparent 25%) 0 0/18px 18px,
    #5a5a5a;
}
.resumen-share-preview-frame.square {
  height: 270px;
}
.resumen-share-preview-frame > .resumen-share-card {
  transform: scale(0.25);
  transform-origin: top left;
}

/* Host fuera de pantalla para capturar la imagen a resolucion real (1080px) */
.resumen-share-capture-host {
  position: fixed;
  left: -10000px;
  top: -10000px;
  width: 1080px;
  height: 1920px;
  pointer-events: none;
}

/* Tarjeta branded exportable "Tu semana" (fondo transparente, texto blanco/negro) */
.resumen-share-card {
  width: 1080px;
  height: 1920px;
  background: transparent;
  padding: 90px 80px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.resumen-share-card.square {
  height: 1080px;
}
.resumen-share-card.white {
  color: #ffffff;
}
.resumen-share-card.black {
  color: #000000;
}
.resumen-share-logo {
  width: 240px;
  height: auto;
  margin-bottom: 70px;
}
.resumen-share-kicker {
  font-family: "Manuka", sans-serif;
  font-size: 130px;
  line-height: 0.95;
  text-transform: uppercase;
}
.resumen-share-week {
  font-size: 40px;
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: 0.75;
  margin-top: 12px;
  margin-bottom: 70px;
}
.resumen-share-grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 70px;
}
.resumen-share-metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.resumen-share-num {
  font-family: "Manuka", sans-serif;
  font-size: 140px;
  line-height: 0.9;
}
.resumen-share-lbl {
  font-size: 34px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.7;
}
.resumen-share-section {
  margin-bottom: 46px;
}
.resumen-share-section-title {
  font-size: 36px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 18px;
}
.resumen-share-item {
  font-size: 46px;
  line-height: 1.35;
}
.resumen-share-msg {
  margin-top: auto;
  font-size: 42px;
  line-height: 1.45;
  opacity: 0.95;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.resumen-share-card.square .resumen-share-msg {
  -webkit-line-clamp: 2;
}

/* Banner "Tu semana" en programaciones: solo visible en movil (en escritorio esta en la nav) */
.tu-semana-banner {
  display: none;
}
/* Separacion clara entre el banner de Estadisticas y la cabecera de Programas
   (solo movil, que es donde ambos conviven; en escritorio el banner no existe). */
.sep-estadisticas-programas {
  display: none;
}
@media (max-width: 1000px) {
  .sep-estadisticas-programas {
    display: block;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin: 0 0 1rem;
  }
}
@media (max-width: 1000px) {
  .tu-semana-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    margin: 0.5rem 0 1rem;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-color);
    font-weight: 500;
    cursor: pointer;
  }
  .tu-semana-banner__info {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .tu-semana-banner__info i {
    color: var(--text-color);
    opacity: 0.7;
    font-size: 1rem;
  }
  .tu-semana-banner > i {
    color: var(--text-color);
    opacity: 0.45;
  }
}

/* ---- Tipo de entreno: selector (Crear Bloque) + icono junto al título ---- */
.tipo-entreno-icono {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.tipo-entreno-icono-font {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.tipo-entreno-titulo {
  width: 22px;
  height: 22px;
  font-size: 22px;
  line-height: 1;
  margin-right: 7px;
  position: relative;
  top: -1px;
}
.tipo-entreno-selector {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
}
.tipo-entreno-opcion {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 6px;
  border: 1px solid var(--bg-color3);
  border-radius: 10px;
  background: var(--bg-color);
  color: var(--text-color);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tipo-entreno-opcion:hover {
  border-color: var(--tipo-color);
}
.tipo-entreno-opcion .tipo-entreno-opcion-icono {
  width: 26px;
  height: 26px;
  font-size: 26px;
  line-height: 1;
  color: var(--tipo-color);
}
.tipo-entreno-opcion span {
  font-size: 12px;
  line-height: 1.1;
  text-align: center;
}
.tipo-entreno-opcion.activo {
  border-color: var(--tipo-color);
  box-shadow: 0 0 0 1.5px var(--tipo-color) inset;
}
.tipo-entreno-opcion.activo span {
  color: var(--tipo-color);
  font-weight: 600;
}
/* Selector de icono para el tipo "Otro" (set curado de Lucide). */
.tipo-entreno-otro-picker {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tipo-entreno-otro-buscador {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--bg-color3);
  border-radius: 8px;
  background: var(--bg-color);
  color: var(--text-color);
  font-size: 13px;
}
.tipo-entreno-otro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 6px;
  padding: 2px;
}
.tipo-entreno-otro-opcion {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--bg-color3);
  border-radius: 8px;
  background: var(--bg-color);
  color: var(--text-color);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.tipo-entreno-otro-opcion:hover {
  border-color: var(--text-color-highlight);
}
.tipo-entreno-otro-opcion .tipo-entreno-opcion-icono {
  width: 22px;
  height: 22px;
}
.tipo-entreno-otro-opcion.activo {
  border-color: var(--text-color-highlight);
  box-shadow: 0 0 0 1.5px var(--text-color-highlight) inset;
  color: var(--text-color-highlight);
}