/* ==========================================================================
   QUOMYA — OBJETIVOS V1
   Wave S4.6. Scoped entirely to `.qy-objetivos-screen`.

   `objectives.module.js` and `objectivesPace.module.js` are NOT modified:
   `renderChartsObjectivesSection()` and `renderObjectivesSettingsSection()`
   are the same real renderers still embedded unstyled inside Ajustes
   (`settings.module.js`). This file overrides only their legacy markup's
   presentation when it renders inside the migrated Objetivos route -- same
   CSS-only technique already validated for the shared sale editor (S4.4)
   and for this exact objectives markup inside Evolución (S4.5,
   `.qy-evolucion-objectives`). Ajustes keeps rendering the identical
   functions in light theme, untouched.
   ========================================================================== */

.qy-objetivos-screen,
.qy-objetivos-screen * {
  box-sizing: border-box;
}

.qy-objetivos-screen {
  gap: var(--qy-space-6);
  padding-block: var(--qy-space-6) var(--qy-space-4);
  color: var(--qy-color-text-primary);
  overflow: visible;
}

/* ---- progress: renderChartsObjectivesSection() -------------------------
   Identical shared markup/classes to S4.5's `.qy-evolucion-objectives`. */

.qy-objetivos-progress .charts-objectives-card {
  margin: 0;
  padding: 0;
  color: var(--qy-color-text-primary);
  background: transparent;
  border: 0;
  box-shadow: none;
}

.qy-objetivos-progress .section-title-row h3,
.qy-objetivos-progress .charts-objective-grid strong,
.qy-objetivos-progress .objective-progress-card strong,
.qy-objetivos-progress .objective-progress-card b {
  color: var(--qy-color-text-primary) !important;
}

/*
 * `.objective-pace-icon` is excluded deliberately. It is a <span> inside the
 * card, so this broad `!important` rule matched it directly and beat the
 * icon's own colour rule further down -- the glyph rendered secondary-grey on
 * its solid semantic fill (1.01:1). Narrowing the selector is preferable to
 * escalating the icon rule to `!important` as well.
 */
.qy-objetivos-progress .section-title-row p,
.qy-objetivos-progress .objective-progress-card
  :is(span, small, p):not(.objective-pace-icon) {
  color: var(--qy-color-text-secondary) !important;
}

.qy-objetivos-progress .objective-progress-card {
  color: var(--qy-color-text-primary) !important;
  background: var(--qy-color-surface-2) !important;
  border-color: var(--qy-color-border-strong) !important;
  box-shadow: none !important;
}

.qy-objetivos-progress .objective-progress-track {
  background: var(--qy-color-surface-3) !important;
}

/*
 * `objectives.css` lays the heading out as a flex row with no shrink guard on
 * the percentage, so a long objective name squeezed the `<b>` until "0%" broke
 * across two lines ("0" over "%"). Wrapping is not overflow, so the automated
 * clipping probe did not catch it -- only the 390/1440 visual review did.
 * The percentage is a financial figure and must never break.
 */
.qy-objetivos-progress .objective-progress-heading {
  align-items: flex-start;
}

.qy-objetivos-progress .objective-progress-heading > div {
  min-width: 0;
}

.qy-objetivos-progress .objective-progress-heading > b,
.qy-objetivos-progress .objective-value-line > span,
.qy-objetivos-progress .objective-progress-footer > b {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* The long name itself wraps normally instead of forcing the row wider. */
.qy-objetivos-progress .objective-progress-heading strong {
  overflow-wrap: anywhere;
}

/* "Configurar" broke mid-word ("Config urar") at 390px. */
.qy-objetivos-progress .section-title-row {
  flex-wrap: wrap;
}

.qy-objetivos-progress .section-title-row .secondary-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.qy-objetivos-progress .secondary-btn {
  min-height: var(--qy-touch-min);
  color: var(--qy-color-text-primary) !important;
  background: var(--qy-color-surface-3) !important;
  border-color: var(--qy-color-border-interactive) !important;
}

.qy-objetivos-progress .empty-mini {
  color: var(--qy-color-text-secondary) !important;
  background: var(--qy-color-surface-2) !important;
  border-color: var(--qy-color-border-strong) !important;
}

.qy-objetivos-progress .empty-mini strong {
  color: var(--qy-color-text-primary) !important;
}

/* ---- pace insight: objectivesPace.module.js -----------------------------
   Real derived text. `pace.status` is one of four verified values:
   "achieved" (✓), "ahead" (↑), "on-track" (↗), "behind" (!). The icon and
   the title text already carry the meaning in the untouched renderer, so
   these overrides only supply dark-compatible colour -- never color-only.
   `achieved` and `ahead` share the collected tone (both are positive) and
   stay distinguishable by their different icon and title. */

.qy-objetivos-screen .objective-pace-insight {
  margin-top: var(--qy-space-2);
  padding-top: var(--qy-space-2);
  border-top: 1px solid var(--qy-color-border);
}

.qy-objetivos-screen .objective-pace-heading strong {
  color: var(--qy-color-text-primary) !important;
}

.qy-objetivos-screen .objective-pace-heading small,
.qy-objetivos-screen .objective-pace-details span {
  color: var(--qy-color-text-secondary) !important;
}

.qy-objetivos-screen .objective-pace-details strong {
  color: var(--qy-color-text-primary) !important;
}

/*
 * `objectives-pace-v15-15-a.css` paints this block for LIGHT surfaces with
 * hardcoded literals, not tokens: base `rgba(231, 250, 246, 0.66)`,
 * `.pace-ahead`/`.pace-achieved` `#E7FAF6`, `.pace-behind` `#FFF5E4`. Those
 * are not reached by the S4.1 legacy-alias layer, so on the migrated dark
 * screen they render as light islands. They are overridden here at equal
 * specificity, scoped to this screen only -- Ajustes keeps the light values.
 */
.qy-objetivos-screen .objective-pace-insight {
  border-color: var(--qy-color-border-strong);
  border-left-color: var(--qy-color-brand);
  background: var(--qy-color-surface-1);
}

.qy-objetivos-screen .objective-pace-insight.pace-ahead,
.qy-objetivos-screen .objective-pace-insight.pace-achieved {
  border-color: var(--qy-color-border-strong);
  border-left-color: var(--qy-color-collected);
  background: var(--qy-color-collected-soft);
}

.qy-objetivos-screen .objective-pace-insight.pace-behind {
  border-color: var(--qy-color-border-strong);
  border-left-color: var(--qy-color-pending);
  background: var(--qy-color-pending-soft);
}

/*
 * The icon is a filled circle, so its foreground is judged against its own
 * fill, never against the panel. Each state pairs a semantic fill with the
 * dark ink that clears AA on it -- the anchors are light enough that white
 * would not. Setting only `color` here (an earlier revision of this file did)
 * left the amber `behind` glyph on the amber fill and made it invisible.
 */
.qy-objetivos-screen .objective-pace-icon {
  background: var(--qy-color-brand);
  color: var(--qy-color-text-on-brand);
}

.qy-objetivos-screen .pace-achieved .objective-pace-icon,
.qy-objetivos-screen .pace-ahead .objective-pace-icon {
  background: var(--qy-color-collected);
  color: var(--qy-color-text-on-brand);
}

.qy-objetivos-screen .pace-on-track .objective-pace-icon {
  background: var(--qy-color-brand);
  color: var(--qy-color-text-on-brand);
}

.qy-objetivos-screen .pace-behind .objective-pace-icon {
  background: var(--qy-color-pending);
  color: var(--qy-color-text-on-brand);
}

/* ---- settings: renderObjectivesSettingsSection() ------------------------
   Real create/edit/delete form, also embedded unstyled in Ajustes. */

.qy-objetivos-settings .settings-panel,
.qy-objetivos-settings .objective-settings-item {
  border: 1px solid var(--qy-color-border-strong) !important;
  border-radius: var(--qy-radius-lg) !important;
  background: var(--qy-color-surface-2) !important;
  box-shadow: none !important;
}

.qy-objetivos-settings .settings-panel > summary,
.qy-objetivos-settings .objective-settings-item > summary {
  min-height: var(--qy-touch-min);
  color: var(--qy-color-text-primary) !important;
}

.qy-objetivos-settings .objective-settings-item summary strong {
  color: var(--qy-color-text-primary) !important;
}

.qy-objetivos-settings .objective-settings-item summary small {
  color: var(--qy-color-text-secondary) !important;
}

.qy-objetivos-settings .objective-settings-item summary em {
  color: var(--qy-color-text-primary) !important;
  background: var(--qy-color-surface-3) !important;
}

.qy-objetivos-settings .settings-inner-card {
  color: var(--qy-color-text-primary);
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.qy-objetivos-settings .settings-inner-card h3 {
  color: var(--qy-color-text-primary) !important;
}

.qy-objetivos-settings .settings-help-copy {
  color: var(--qy-color-text-secondary) !important;
}

.qy-objetivos-settings .form-field label {
  color: var(--qy-color-text-secondary) !important;
  background: transparent !important;
}

.qy-objetivos-settings .form-field input,
.qy-objetivos-settings .form-field select,
.qy-objetivos-settings .form-field textarea {
  color: var(--qy-color-text-primary) !important;
  background: var(--qy-color-surface-1) !important;
  border: 1px solid var(--qy-color-border-interactive) !important;
}

.qy-objetivos-settings .form-field input::placeholder,
.qy-objetivos-settings .form-field textarea::placeholder {
  color: var(--qy-color-text-tertiary) !important;
}

.qy-objetivos-settings .form-field input:focus,
.qy-objetivos-settings .form-field select:focus,
.qy-objetivos-settings .form-field textarea:focus {
  border-color: var(--qy-color-brand) !important;
  outline: none !important;
  box-shadow: var(--qy-focus-ring) !important;
}

/* `compact-visual-v15-14-2.css` gives `.check-row` a 40px min-height; the
   label is the real tap target for its 18px checkbox, so it is raised to the
   48px touch minimum here rather than leaving a sub-44px target. */
.qy-objetivos-settings .check-row {
  min-height: var(--qy-touch-min);
  color: var(--qy-color-text-secondary) !important;
}

.qy-objetivos-settings .secondary-btn {
  color: var(--qy-color-text-primary) !important;
  background: var(--qy-color-surface-3) !important;
  border: 1px solid var(--qy-color-border-interactive) !important;
}

.qy-objetivos-settings .danger-btn {
  color: var(--qy-color-cancelled-text) !important;
  background: var(--qy-color-cancelled-soft) !important;
  border: 1px solid var(--qy-color-cancelled) !important;
}

.qy-objetivos-settings .empty-mini {
  color: var(--qy-color-text-secondary) !important;
  background: var(--qy-color-surface-1) !important;
  border-color: var(--qy-color-border-strong) !important;
}

.qy-objetivos-settings .empty-mini strong {
  color: var(--qy-color-text-primary) !important;
}

/* ---- responsive ---------------------------------------------------------- */

@media (max-width: 559px) {
  .qy-objetivos-screen {
    gap: var(--qy-space-5);
    padding-top: var(--qy-space-5);
  }

  .qy-objetivos-screen .qy-dashboard-panel {
    padding: var(--qy-space-4);
  }
}

@media (min-width: 1180px) {
  .qy-objetivos-screen {
    gap: var(--qy-space-8);
    padding-block: var(--qy-space-8);
  }
}

/* ==========================================================================
   S4.11C — OBJETIVOS: DOS SUPERFICIES, UNA JERARQUÍA

   La tarjeta exterior contiene el progreso. Cada objetivo puede elevarse un
   único escalón; su lectura de ritmo se integra mediante divisor y acento,
   sin volver a dibujar una tercera tarjeta dentro de la segunda.
   ========================================================================== */

.qy-objetivos-screen > .qy-objetivos-progress {
  border-color: transparent;
  background:
    linear-gradient(180deg, var(--qy-color-surface-highlight), transparent 72px),
    var(--qy-color-surface-1);
  box-shadow: var(--qy-elevation-raised);
}

.qy-objetivos-progress .charts-objective-grid {
  gap: var(--qy-space-4);
}

.qy-objetivos-progress .objective-progress-card {
  position: relative;
  overflow: hidden;
  border: 0 !important;
  border-left: 3px solid var(--qy-color-brand) !important;
  border-radius: var(--qy-radius-lg) !important;
  background: var(--qy-color-surface-2) !important;
  box-shadow: 0 1px 0 var(--qy-color-surface-highlight) inset !important;
}

.qy-objetivos-progress .objective-progress-card.is-achieved {
  border-left-color: var(--qy-color-collected) !important;
  background:
    linear-gradient(135deg, var(--qy-color-collected-soft), transparent 72%),
    var(--qy-color-surface-2) !important;
}

.qy-objetivos-progress .objective-value-line > strong {
  color: var(--qy-color-text-primary) !important;
  font-size: clamp(1.25rem, 5vw, 1.65rem);
  font-weight: 700;
}

.qy-objetivos-progress .objective-progress-heading > b,
.qy-objetivos-progress .objective-progress-footer > b {
  color: var(--qy-color-brand-text) !important;
}

.qy-objetivos-progress .objective-progress-card.is-achieved
  :is(.objective-progress-heading > b, .objective-progress-footer > b) {
  color: var(--qy-color-collected-text) !important;
}

.qy-objetivos-screen .objective-pace-insight,
.qy-objetivos-screen .objective-pace-insight.pace-ahead,
.qy-objetivos-screen .objective-pace-insight.pace-achieved,
.qy-objetivos-screen .objective-pace-insight.pace-behind {
  margin-top: var(--qy-space-1);
  padding: var(--qy-space-3) 0 0;
  border: 0;
  border-top: 1px solid var(--qy-color-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.qy-objetivos-screen > .qy-objetivos-settings {
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.qy-objetivos-settings .objectives-settings-panel {
  border-color: transparent !important;
  background:
    linear-gradient(180deg, var(--qy-color-surface-highlight), transparent 72px),
    var(--qy-color-surface-1) !important;
  box-shadow: var(--qy-elevation-raised) !important;
}

.qy-objetivos-settings .objective-settings-item {
  border: 0 !important;
  border-left: 3px solid var(--qy-color-brand) !important;
  background: var(--qy-color-surface-2) !important;
  box-shadow: 0 1px 0 var(--qy-color-surface-highlight) inset !important;
}

.qy-objetivos-settings .objective-settings-item > summary {
  transition:
    background-color var(--qy-motion-fast) var(--qy-motion-ease),
    color var(--qy-motion-fast) var(--qy-motion-ease);
}

.qy-objetivos-settings .objective-settings-item > summary:hover {
  background: var(--qy-color-hover);
}

.qy-objetivos-settings .settings-inner-card + .settings-inner-card {
  padding-top: var(--qy-space-5);
  border-top: 1px solid var(--qy-color-border) !important;
}

@media (prefers-reduced-motion: reduce) {
  .qy-objetivos-screen :is(
    .objective-progress-card,
    .objective-progress-track > span,
    .objective-settings-item > summary
  ) {
    animation: none;
    transition: none;
  }
}

/* ==========================================================================
   S4.11D — CONTRASTE DEL ICONO DE RITMO EN RESUMEN

   El propietario encontró flechas de objetivo con contraste insuficiente. Al
   medirlas, la pantalla Objetivos NO era el problema: S4.6 ya emparejó ahí
   cada relleno semántico con la tinta oscura que lo despeja (bloque de
   arriba, "The icon is a filled circle...").

   El hueco estaba en RESUMEN. El bloque de objetivos del panel lateral pinta
   el mismo aviso de ritmo, pero fuera del ámbito `.qy-objetivos-screen`, así
   que ahí seguía mandando `objectives-pace-v15-15-a.css` con su tinta blanca
   sobre relleno claro:

     ✗  blanco sobre --qy-color-pending      ~2.1:1
     ✗  blanco sobre --qy-color-brand-deep   ~4.2:1

   Ambos por debajo del 4.5:1 que exige un glifo de 12px en negrita, y el
   disco ámbar de "necesitas acelerar" es el peor de los dos: es exactamente
   la flecha que se señaló.

   Se extiende a Resumen el MISMO emparejamiento que ya usa Objetivos. No se
   inventa una segunda convención: las dos pantallas dicen lo mismo con los
   mismos tokens. La lógica que elige estado y glifo no se toca;
   `objectivesPace.module.js` queda intacto.
   ========================================================================== */

.qy-dashboard-screen .objective-pace-icon {
  background: var(--qy-color-brand);
  color: var(--qy-color-text-on-brand);
}

.qy-dashboard-screen .pace-on-track .objective-pace-icon {
  background: var(--qy-color-brand);
  color: var(--qy-color-text-on-brand);
}

.qy-dashboard-screen .pace-achieved .objective-pace-icon,
.qy-dashboard-screen .pace-ahead .objective-pace-icon {
  background: var(--qy-color-collected);
  color: var(--qy-color-text-on-brand);
}

.qy-dashboard-screen .pace-behind .objective-pace-icon {
  background: var(--qy-color-pending);
  color: var(--qy-color-text-on-brand);
}

/*
   Geometría del disco, común a las dos pantallas.

   A 25px con `line-height: 1` una flecha con ascendente (↗, ↑) quedaba
   rozando el borde superior de su propio círculo. Se le da un punto más de
   caja y de interlineado, y se prohíbe el recorte: el glifo no puede
   recortarse contra el disco que lo contiene.
*/
.qy-objetivos-screen .objective-pace-icon,
.qy-dashboard-screen .objective-pace-icon {
  width: 26px;
  height: 26px;
  font-size: 0.82rem;
  line-height: 1.1;
  overflow: visible;
}