/* Herramientas de exploración de proyectos. Comparten la identidad de LOMAR. */
[hidden] { display: none !important; }

.project-lab {
  background: var(--paper-soft);
  scroll-margin-top: 90px;
}

.project-lab .section-heading { max-width: 760px; }
.lab-intro { display: flex; justify-content: space-between; align-items: end; gap: 32px; }
.lab-intro .section-heading { margin-bottom: 28px; }
.lab-caption { flex-shrink: 0; margin: 0 0 34px; font-size: .82rem; font-weight: 600; color: var(--muted); }
.tool-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: #e9edf5; margin-bottom: 20px; }
.tool-tab { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 58px; padding: 12px; border: 0; border-radius: 8px; background: transparent; color: #4d5870; font: 600 .88rem var(--font-body); transition: background 160ms, color 160ms, box-shadow 160ms; }
.tool-tab > span:first-child { font-size: .72rem; opacity: .65; }
.tool-tab:hover { background: rgba(255,255,255,.65); color: var(--ink); }
.tool-tab[aria-selected="true"] { background: var(--paper); color: var(--violet); box-shadow: 0 3px 14px rgba(10,15,30,.08); }
.project-lab :is(button, a, input, select, textarea):focus-visible,
.tool-attachment button:focus-visible { outline: 3px solid var(--violet); outline-offset: 4px; }
.project-lab :is(button, .button):disabled { opacity: .48; cursor: not-allowed; transform: none; box-shadow: none; animation: none; }
.tool-panel { border: 1px solid var(--line); border-radius: 14px; background: var(--paper); overflow: hidden; box-shadow: 0 16px 50px rgba(10,15,30,.045); }
.tool-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(240px, 1fr); align-items: stretch; }
.tool-main { min-width: 0; padding: 34px; }
.tool-aside { min-width: 0; padding: 34px 28px; color: #fff; background: radial-gradient(ellipse at 100% 0%, rgba(106,53,255,.3), transparent 70%), var(--ink); }
.tool-aside h3, .tool-aside h4 { color: #fff; }
.tool-aside p, .tool-aside li { color: #d6d9e8; }
.tool-kicker { margin: 0 0 10px; color: var(--violet); font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.tool-aside .tool-kicker { color: var(--lilac); }
.tool-title { margin: 0 0 12px; font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.35; letter-spacing: -.03em; }
.tool-title:focus { outline: none; }
.tool-description { margin: 0 0 24px; font-size: .93rem; line-height: 1.7; color: var(--muted); }
.project-lab form, .project-lab fieldset { min-width: 0; }
.project-lab fieldset { margin: 0 0 22px; padding: 0; border: 0; }
.project-lab legend { padding: 0; margin-bottom: 14px; font-weight: 700; line-height: 1.5; }
.tool-field { display: flex; flex-direction: column; gap: 9px; min-width: 0; margin-bottom: 20px; color: var(--copy); font-size: .87rem; font-weight: 600; }
.tool-field :is(input:not([type="radio"]):not([type="checkbox"]), select, textarea),
.project-lab .tool-main select { width: 100%; min-width: 0; min-height: 48px; padding: 12px; border: 1px solid #bac3d4; border-radius: var(--radius); background: #fff; color: var(--copy); font: 400 .94rem var(--font-body); }
.project-lab input[type="range"] { width: 100%; accent-color: var(--violet); cursor: pointer; }
.project-lab :is(input[type="radio"], input[type="checkbox"]) { width: 18px; height: 18px; flex: 0 0 auto; margin: 3px 0 0; accent-color: var(--violet); }
.tool-fields, .tool-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tool-fields .tool-field { margin-bottom: 8px; }
.tool-choice { display: flex; align-items: flex-start; gap: 12px; min-width: 0; min-height: 90px; padding: 18px 15px; border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; transition: border-color 160ms, background 160ms; }
.tool-choice:hover { border-color: var(--lilac); background: #faf8ff; }
.tool-choice:has(input:checked) { border-color: var(--violet); background: #f5f0ff; box-shadow: inset 0 0 0 1px var(--violet); }
.tool-choice span { min-width: 0; }
.tool-choice strong { display: block; font-size: .88rem; font-weight: 700; line-height: 1.45; }
.tool-choice small { display: block; margin-top: 5px; font-size: .76rem; line-height: 1.5; color: var(--muted); }
.tool-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 24px; }
.project-lab .button, .tool-button { min-height: 46px; padding: 13px 18px; font-size: .85rem; line-height: 1.4; text-align: center; animation: none; }
.tool-button { display: inline-flex; justify-content: center; align-items: center; border: 1px solid #bfc7d6; border-radius: var(--radius); background: #fff; color: var(--copy); font-weight: 700; transition: background 160ms, border-color 160ms; }
.tool-button:hover { background: var(--paper-soft); border-color: var(--violet); }
.tool-aside .tool-button { color: #fff; background: rgba(255,255,255,.07); border-color: #626a80; }
.tool-note { color: var(--muted); font-size: .78rem; font-weight: 400; line-height: 1.7; }
.tool-aside .tool-note { color: #bcc3d6; }
.tool-error { margin: 16px 0; color: #a32938; font-size: .87rem; line-height: 1.5; }
.tool-error:empty { display: none; }
.tool-step-label { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 10px; color: var(--muted); font-size: .77rem; font-weight: 600; }
progress.tool-progress { display: block; width: 100%; height: 5px; margin-bottom: 28px; overflow: hidden; border: 0; border-radius: 10px; background: #e7e8f0; accent-color: var(--violet); }
progress.tool-progress::-webkit-progress-bar { background: #e7e8f0; border-radius: 10px; }
progress.tool-progress::-webkit-progress-value { background: var(--violet); border-radius: 10px; }
progress.tool-progress::-moz-progress-bar { background: var(--violet); border-radius: 10px; }
.tool-pill { display: inline-flex; align-items: center; width: fit-content; padding: 6px 10px; border: 1px solid #ddd0ff; border-radius: 30px; color: #5922d0; background: #f4edff; font-size: .73rem; font-weight: 700; line-height: 1.4; }
.tool-aside .tool-pill { color: #dfd0ff; background: rgba(177,139,255,.12); border-color: #66528e; }
.tool-summary-list { display: grid; gap: 12px; margin: 18px 0; }
.tool-summary-list div { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.tool-summary-list dt { margin-bottom: 5px; color: var(--muted); font-size: .78rem; }
.tool-summary-list dd { margin: 0; font-weight: 600; font-size: .9rem; line-height: 1.6; }
ul.tool-summary-list { padding: 0; list-style: none; font-size: .87rem; line-height: 1.6; }
ul.tool-summary-list > li { padding-bottom: 10px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.tool-aside .tool-summary-list div { border-color: #343b50; }
.tool-aside .tool-summary-list dt { color: #b7bed2; }
.tool-result { margin-top: 24px; padding: 22px; border: 1px solid #dfd5f6; border-radius: 10px; background: #faf8ff; }
.tool-result h3, .tool-result h4 { margin: 0 0 12px; line-height: 1.45; }
.tool-result p { line-height: 1.65; }
.tool-result:focus { outline: none; }
.tool-aside .tool-result { background: rgba(255,255,255,.04); border-color: #4d426c; }
.tool-stat { padding: 18px 0; border-bottom: 1px solid #343b50; }
.tool-stat > :is(span, small):not(.tool-stat-value) { display: block; font-size: .8rem; line-height: 1.6; }
.tool-stat-value { display: block; margin: 6px 0; font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.7rem); font-weight: 700; line-height: 1.2; letter-spacing: -.05em; overflow-wrap: anywhere; }
.tool-aside .tool-stat-value { color: #fff; }
.tool-check-list { margin: 20px 0; padding-left: 18px; font-size: .86rem; line-height: 1.8; }
.tool-check-list li + li { margin-top: 8px; }
.demo-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 24px 0; padding: 0; list-style: none; counter-reset: demo-step; }
.demo-steps li { padding: 12px 8px; border-top: 3px solid var(--line); color: var(--muted); font-size: .73rem; line-height: 1.5; }
.demo-steps li > span { display: none; }
.demo-steps li::before { counter-increment: demo-step; content: '0' counter(demo-step); display: block; margin-bottom: 6px; font-weight: 700; }
.demo-steps li[data-state="active"], .demo-steps li[data-state="current"] { border-color: var(--violet); color: var(--violet); }
.demo-steps li[data-state="done"], .demo-steps li[data-state="complete"] { border-color: #268461; color: #19694c; }
.demo-metrics { display: grid; gap: 8px; }
.demo-order { margin-top: 20px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-soft); font-size: .88rem; line-height: 1.7; }
.demo-log { margin: 18px 0 0; padding-left: 18px; font-size: .78rem; line-height: 1.8; }
.demo-log li + li { margin-top: 8px; }
.project-lab [aria-disabled="true"] { opacity: .48; cursor: not-allowed; }
.tool-attachment { padding: 16px; border: 1px solid #66528e; border-radius: var(--radius); background: rgba(106,53,255,.1); }
.tool-attachment strong { display: block; color: #fff; font-size: .9rem; }
.tool-attachment pre { max-height: 230px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 .8rem/1.7 var(--font-body); color: #e1daf3; }
.tool-attachment .tool-button { font-size: .76rem; min-height: 38px; padding: 9px 12px; }

@media (max-width: 980px) {
  .lab-intro { display: block; }
  .lab-caption { margin-top: -10px; margin-bottom: 24px; }
  .tool-layout { grid-template-columns: minmax(0, 1.5fr) minmax(225px, 1fr); }
  .tool-main, .tool-aside { padding: 26px 22px; }
}
@media (max-width: 760px) {
  .tool-layout { grid-template-columns: 1fr; }
  .tool-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-tab { min-height: 52px; font-size: .8rem; padding: 10px 6px; }
  .tool-main, .tool-aside { padding: 25px 20px; }
  .tool-aside { border-top: 1px solid #343b50; }
  .tool-stat-value { font-size: 2rem; }
}
@media (max-width: 420px) {
  .tool-choice-grid, .tool-fields { grid-template-columns: 1fr; }
  .tool-main, .tool-aside { padding: 23px 16px; }
  .tool-actions > * { width: 100%; }
  .tool-choice { min-height: 76px; }
  .demo-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .project-lab *, .project-lab *::before { transition: none !important; animation: none !important; }
  body.has-reveal .project-lab .reveal { opacity: 1; filter: none; transform: none; will-change: auto; }
}