/*
 * rl-stability-integration-v1.css - 2D-BW-U2 integration styles (loaded with the page; small).
 * The calculator's own styles stay in the owner-approved, byte-identical U1R sheet
 * (assets/css/rl-stability-ui-v1.css), which loads lazily on first open.
 * Everything here is namespaced rl-stab-* / rl-tools-* or scoped to #rl-herramientas. Only existing V2 tokens
 * and conventions are used: the warm carbon / amber / orange / cream palette, the existing radii, the 44 px
 * touch targets and the Orgánicas «Volver» and dotted focus conventions.
 */

/* ---------- TAB SWITCHING: identical mechanism to Calibres / Colaboradores / Orgánicas ---------- */
body.entry-state-selector.rl-tab-herramientas #rl-herramientas { display: block; }
body.entry-state-selector.rl-tab-herramientas .app { display: none !important; }
body.rl-tab-herramientas #compareTrayVisor { display: none !important; }
body.rl-tab-herramientas #compareTray,
body.rl-tab-herramientas #compareInline { display: none !important; }

#rl-herramientas [hidden] { display: none !important; }

/* ---------- Herramientas hub ---------- */
.rl-tools-wrap { width: 100%; max-width: 1520px; margin-inline: auto; }
.rl-tools-head { margin-bottom: 30px; }
.rl-tools-h1 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.1;
  color: var(--brand-2, #9f9a63);
  margin: 0;
}
.rl-tools-lead {
  font-size: clamp(14.5px, 1.2vw, 16px);
  line-height: 1.68;
  color: rgba(196, 188, 160, .78);
  max-width: 68ch;
  margin: 14px 0 0;
}
.rl-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 24px;
  align-items: stretch;
}
.rl-tools-card {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 44px;
  padding: 20px 20px 18px;
  border: 1px solid rgba(197, 175, 105, .22);
  border-radius: 16px;
  background: rgba(10, 11, 12, .62);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
  color: #f3f0e6;
  transition: border-color .14s, background .14s;
}
.rl-tools-card:hover { border-color: rgba(222, 106, 26, .55); background: rgba(18, 19, 17, .78); }
.rl-tools-card:focus-visible { outline: 2px solid #ed7c2a; outline-offset: 3px; }
.rl-tools-card__kicker {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: #f7d7b8;
}
.rl-tools-card__title { font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.rl-tools-card__desc { font-size: 14.5px; line-height: 1.55; color: rgba(196, 188, 160, .85); }
.rl-tools-card__go { margin-top: auto; font-size: 13px; font-weight: 700; color: #ed7c2a; }

/* ---------- «Volver» buttons (Orgánicas convention) ---------- */
.rl-stab-back,
.rl-tools-back {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 4px;
  background: none;
  border: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  color: rgba(196, 188, 160, .82);
  transition: color .14s;
}
.rl-tools-back { margin-bottom: 4px; }
.rl-stab-back:hover,
.rl-tools-back:hover { color: rgba(226, 218, 190, .98); }
.rl-stab-back:focus-visible,
.rl-tools-back:focus-visible { outline: 1px dotted rgba(197, 187, 135, .72); outline-offset: 3px; }
.rl-stab-back__arrow { font-size: 14px; }

/* The calculator view inside #rl-herramientas uses the full approved standalone layout (max 1320 px). The
   section already provides the page gutter, so the calculator's own outer padding is trimmed at the sides. */
#rl-tools-stability-host .rls-app { padding-left: 0; padding-right: 0; padding-top: 8px; }

/* IA-03: sticky offset below the fixed header (value set by the integration JS from the measured nav). */
#rl-tools-stability-host .rls-result.rls-result--sticky { top: var(--rl-stab-sticky-top, 68px); }
.rl-stab-host .rls-result.rls-result--sticky.rl-stab-nosticky,
#rl-tools-stability-host .rls-result.rls-result--sticky.rl-stab-nosticky { position: static; }

.rl-stab-status { padding: 24px 0; color: rgba(196, 188, 160, .85); font-size: 15px; }
.rl-stab-status--error { color: #f0b3a8; }

/* ---------- Mode A: action under «Paso de estría» (outside the governed grid) ---------- */
.rl-stab-cta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.rl-stab-cta[hidden] { display: none !important; }
/* «Paso de estría» is always the 8th item of #drawerSpecs, i.e. the right-hand column while the grid has two. */
.rl-stab-cta__inner { grid-column: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.rl-stab-cta__btn {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(222, 106, 26, .62);
  background: rgba(222, 106, 26, .10);
  color: #f7d7b8;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  transition: background .14s, border-color .14s;
}
.rl-stab-cta__btn:hover { background: rgba(222, 106, 26, .22); border-color: #ed7c2a; }
.rl-stab-cta__btn:focus-visible { outline: 2px solid #ed7c2a; outline-offset: 3px; }
.rl-stab-cta__hint { margin: 0; font-size: 12.5px; line-height: 1.45; color: rgba(196, 188, 160, .72); }
/* Same breakpoint at which #drawerSpecs collapses to one column. */
@media (max-width: 720px) {
  .rl-stab-cta { grid-template-columns: minmax(0, 1fr); }
  .rl-stab-cta__inner { grid-column: 1; align-items: stretch; }
}

/* ---------- Mode A: full-viewport dialog above the drawer ---------- */
.rl-stab-dialog {
  position: fixed;
  inset: 0;
  z-index: 5600; /* above the rifle drawer (901 / 5010) and the header (900); below the legal sheet and the cookie layer */
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(900px 500px at 12% -10%, rgba(159, 154, 99, .16), transparent 58%),
    radial-gradient(1000px 600px at 92% 0%, rgba(222, 106, 26, .16), transparent 46%),
    linear-gradient(180deg, #070707, #0c0f0b 22%, #11140f 58%, #0a0c0a 100%);
  color: #f3f0e6;
}
.rl-stab-dialog[hidden] { display: none !important; }
.rl-stab-dialog__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: max(4px, env(safe-area-inset-top, 0px)) clamp(12px, 3vw, 40px) 4px;
  border-bottom: 1px solid rgba(197, 187, 135, .14);
  background: rgba(10, 12, 10, .92);
}
.rl-stab-dialog__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ---------- U2R-02: «Herramientas» never clipped (classes set by the integration JS after measuring) ----------
   html.rl-nav-fold     : at >= 1280 px the 8 tabs do not fit beside the inline information nav, so the header
                          uses production's own < 1280 px arrangement: the information nav folds into «Más».
                          Selectors mirror the two 2D-BR-H1 rules they override (+1 id, same !important).
   html.rl-herr-in-more : the 8 tabs still do not fit, so «Herramientas» leaves the tab zone (never clipped)
                          and is offered as the first item of «Más» (dropdown >= 721 px, bottom sheet <= 720 px).
   html.rl-herr-in-strip: 2D-BW-U2R2 (owner M1) - the bar is the mobile swipe strip (<= 720 px or touch-primary), where
                          no set of tabs fits and the user swipes: «Herramientas» stays in it like every other tab
                          (and is still offered in «Más»). */
@media (min-width: 1280px) {
  html.rl-nav-fold #rl-tabs #rlInfoNav > button.rl-info-tab:not(.rl-info-more),
  html.rl-nav-fold #rl-tabs #rlInfoNav > .rl-legal-wrap { display: none !important; }
  html.rl-nav-fold #rl-tabs #rlInfoNav > .rl-more-wrap { display: block !important; }
}
html.rl-herr-in-more:not(.rl-herr-in-strip) #rl-tabs #rl-tab-herramientas { display: none !important; }
/* U2R2: the 2D-BR-H1 edge fade masks the zone's last 28 px at every scroll position. On the mobile strip an end spacer
   of the same width lets the last tab («Herramientas») scroll fully clear of the fade, so its whole label is readable. */
html.rl-herr-in-strip #rl-tabs #rlTabsPrimary.is-scrollable::after { content: ''; flex: 0 0 28px; }
html:not(.rl-herr-in-more) .rl-stab-more-item { display: none !important; }
/* Herramientas is a destination, not an information page: primary weight inside «Más». */
#rlMoreDropdown #rl-more-herramientas,
#rl-legal-mobile-sheet #rl-lms-herramientas { font-weight: 700; color: rgba(236, 228, 204, .92); }
#rlMoreDropdown #rl-more-herramientas[aria-current="page"],
#rl-legal-mobile-sheet #rl-lms-herramientas[aria-current="page"] { color: #ed7c2a; }
/* Active state while the active tab lives in «Más»: the same orange underline language as .rl-tab.active. */
#rl-tabs #rl-itab-mas.rl-stab-more-active {
  color: #ed7c2a;
  box-shadow: inset 0 -3px 0 #ed7c2a;
  background: rgba(237, 124, 42, .06);
}