/* ============================================================
   CALCULADORA DE JORNAL SEMANAL — CONSTRUCCIÓN CIVIL
   Diseño: calculadora-jornal_1.html. Vista única, sin pasos.
   Todas las clases y variables llevan prefijo cj para no chocar
   con style.css.
   ============================================================ */

:root {
  --cj-bg:        #F6F9FC;
  --cj-card:      #FFFFFF;
  --cj-soft:      #F1F5FB;
  --cj-ink:       #0D1028;
  --cj-ink-2:     #3D4053;
  --cj-muted:     #5B5F72;
  --cj-line:      #E2E7EE;
  --cj-line-2:    #C5CDDA;

  --cj-blue:      #0056AC;
  --cj-blue-2:    #0071E3;
  --cj-blue-soft: #E4F0FF;
  --cj-on-blue:   #FFFFFF;

  --cj-green:     #126B49;
  --cj-green-2:   #1B9D6B;
  --cj-green-soft:#E8F4ED;

  --cj-red:       #BF0909;
  --cj-amber:     #8C5A00;
  --cj-amber-soft:#FFF3E7;

  --cj-sans: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --cj-mono: "Roboto Mono", ui-monospace, Menlo, monospace;
  --cj-r: 10px;
  --cj-shadow: 0 1px 2px rgba(13,16,40,.05), 0 10px 30px rgba(13,16,40,.07);
}


.cj *, .cj *::before, .cj *::after { box-sizing: border-box; }

.cj {
  width: 100%;
  max-width: 54rem;
  margin-inline: auto;
  font-family: var(--cj-sans);
  font-size: 15px;
  line-height: 1.45;
  color: var(--cj-ink);
  background: var(--cj-card);
  border: 1px solid var(--cj-line);
  border-radius: var(--cj-r);
  box-shadow: var(--cj-shadow);
  overflow: hidden;
}

.cj p, .cj h2, .cj h3, .cj legend, .cj fieldset { margin: 0; padding: 0; border: 0; }
.cj button { font-family: inherit; font-size: inherit; cursor: pointer; }
.cj :focus-visible { outline: 3px solid var(--cj-blue-2); outline-offset: 2px; border-radius: 4px; }

/* ---------- 1. EL MONTO, SIEMPRE ARRIBA ---------- */

.cj-hero {
  padding: 16px 20px 15px;
  background: var(--cj-green-soft);
  border-bottom: 1px solid var(--cj-line);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px 20px;
}
.cj-hero .block { display: grid; gap: 1px; }
.cj-hero .lbl {
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--cj-ink-2);
}
.cj-hero .amt {
  font-size: clamp(2.1rem, 8vw, 2.9rem);
  font-weight: 900; letter-spacing: -.035em; line-height: 1.02;
  font-variant-numeric: tabular-nums;
  color: var(--cj-green);
}
.cj-hero .who { font-size: 13px; color: var(--cj-muted); }
.cj-hero .norma {
  margin-left: auto;
  font-family: var(--cj-mono); font-size: 10.5px; line-height: 1.5;
  color: var(--cj-muted); text-align: right;
}

/* ---------- 2. DOS COLUMNAS EN UNA SOLA VISTA ---------- */

.cj-cols { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.cj-pane { padding: 16px 20px 18px; display: grid; gap: 14px; align-content: start; }
.cj-pane + .cj-pane { border-left: 1px solid var(--cj-line); background: var(--cj-soft); }

@media (max-width: 680px) {
  .cj-cols { grid-template-columns: 1fr; }
  .cj-pane + .cj-pane { border-left: 0; border-top: 1px solid var(--cj-line); }
}

.cj-group { display: grid; gap: 7px; }
.cj-lbl {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cj-muted);
}
.cj-lbl .thin { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 12px; }

/* opciones compactas */

.cj-row { display: grid; gap: 6px; }
.cj-row-3 { grid-template-columns: repeat(3, 1fr); }
.cj-row-6 { grid-template-columns: repeat(6, 1fr); }

.cj-opt { position: relative; display: block; }
.cj-opt input {
  position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.cj-opt > span {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 6px 8px;
  border: 1.5px solid var(--cj-line-2); border-radius: 8px;
  background: var(--cj-card);
  font-size: 15px; font-weight: 500; text-align: center;
  transition: border-color .12s, background .12s, color .12s;
}
.cj-opt input:checked + span {
  border-color: var(--cj-blue); background: var(--cj-blue); color: var(--cj-on-blue); font-weight: 700;
}
.cj-opt input:focus-visible + span { outline: 3px solid var(--cj-blue-2); outline-offset: 2px; }
.cj-opt .day { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cj-opt .price { font-family: var(--cj-mono); font-size: 11px; font-weight: 400; opacity: .85; display: block; }

/* agrupadores: fieldset en block + cuerpo en grid (evita display:grid sobre fieldset) */
.cj-fs { display: block; }
.cj-fs > legend { float: none; margin-bottom: 7px; }
.cj-fs-body { display: grid; gap: 6px; }

.cj-opt-wide > span { justify-content: flex-start; min-height: 40px; font-size: 14px; }
.cj-opt-wide > span::before {
  content: ""; flex: 0 0 16px; width: 16px; height: 16px;
  border: 1.5px solid var(--cj-line-2); border-radius: 50%;
}
.cj-opt-wide input:checked + span::before {
  border-color: currentColor; background: currentColor;
  box-shadow: inset 0 0 0 3px var(--cj-blue);
}

/* chips de condiciones */

.cj-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cj-chip-opt { position: relative; }
.cj-chip-opt input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cj-chip-opt > span {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 38px; padding: 6px 12px;
  border: 1.5px solid var(--cj-line-2); border-radius: 99px;
  background: var(--cj-card);
  font-size: 14px; font-weight: 500;
  transition: border-color .12s, background .12s, color .12s;
}
.cj-chip-opt > span::before { content: "+"; font-weight: 700; color: var(--cj-muted); }
.cj-chip-opt input:checked + span {
  border-color: var(--cj-green); background: var(--cj-green); color: var(--cj-on-blue); font-weight: 700;
}
.cj-chip-opt input:checked + span::before { content: "✓"; color: inherit; }
.cj-chip-opt input:focus-visible + span { outline: 3px solid var(--cj-blue-2); outline-offset: 2px; }

/* select de especialidad */

.cj select {
  width: 100%; min-height: 40px; padding: 8px 10px;
  font-family: inherit; font-size: 14px;
  color: var(--cj-ink); background: var(--cj-card);
  border: 1.5px solid var(--cj-line-2); border-radius: 8px;
}
.cj select[hidden] { display: none; }

/* horas extras */

.cj-he { display: grid; gap: 6px; }
.cj-he-row {
  display: flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 4px 4px 4px 12px;
  border: 1.5px solid var(--cj-line-2); border-radius: 8px;
  background: var(--cj-card);
}
.cj-he-row .t { font-size: 14px; font-weight: 500; }
.cj-he-row .t small { display: block; font-size: 11.5px; font-weight: 400; color: var(--cj-muted); line-height: 1.3; }
.cj-he-row .ctrl { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.cj-he-row button {
  width: 34px; height: 34px;
  border: 1.5px solid var(--cj-line-2); border-radius: 7px;
  background: var(--cj-card); color: var(--cj-ink);
  font-size: 18px; font-weight: 700; line-height: 1;
}
.cj-he-row button:disabled { opacity: .35; cursor: not-allowed; }
.cj-he-row output {
  min-width: 2.1ch; text-align: center;
  font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ---------- 3. DETALLE ---------- */

.cj-detail { display: grid; gap: 0; }
.cj-line { border-bottom: 1px solid var(--cj-line); }
.cj-line:last-of-type { border-bottom: 0; }
.cj-line > button {
  width: 100%; display: flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 7px 0;
  background: none; border: 0; text-align: left; color: inherit;
}
.cj-line .nm { font-size: 14px; font-weight: 500; }
.cj-line .q {
  width: 17px; height: 17px; flex: 0 0 17px;
  border: 1.5px solid var(--cj-line-2); border-radius: 50%;
  color: var(--cj-muted); font-size: 10px; font-weight: 700;
  display: grid; place-items: center; line-height: 1;
}
.cj-line > button[aria-expanded="true"] .q { background: var(--cj-blue); border-color: var(--cj-blue); color: var(--cj-on-blue); }
.cj-line .vl {
  margin-left: auto;
  font-family: var(--cj-mono); font-size: 14px; font-weight: 500;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cj-line.neg .vl { color: var(--cj-red); }
.cj-note {
  padding: 0 24px 11px 0;
  font-size: 13px; line-height: 1.45; color: var(--cj-ink-2);
  display: grid; gap: 6px;
}
.cj-note[hidden] { display: none; }
.cj-note .src {
  justify-self: start;
  font-family: var(--cj-mono); font-size: 10.5px;
  padding: 2px 6px; border: 1px solid var(--cj-line-2); border-radius: 4px; color: var(--cj-muted);
}

/* fila de encabezado con el selector de pensión al costado */
.cj-head-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cj-pension { display: flex; gap: 4px; margin-left: auto; }
.cj-pension .cj-opt > span {
  min-height: 30px; padding: 3px 12px; font-size: 13px; border-radius: 99px;
}

.cj-sum {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 0 2px; margin-top: 2px;
  border-top: 1.5px solid var(--cj-line-2);
  font-size: 14px; font-weight: 700;
}
.cj-sum .vl { margin-left: auto; font-family: var(--cj-mono); font-variant-numeric: tabular-nums; }

.cj-flag {
  padding: 9px 11px;
  background: var(--cj-amber-soft);
  border-left: 3px solid var(--cj-amber);
  border-radius: 0 6px 6px 0;
  font-size: 12.5px; line-height: 1.4; color: var(--cj-ink-2);
}
.cj-flag b { color: var(--cj-amber); }
.cj-flag[hidden] { display: none; }

/* ---------- 4. PIE ---------- */

.cj-foot {
  padding: 11px 20px 13px;
  border-top: 1px solid var(--cj-line);
  display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline;
  font-size: 12.5px; color: var(--cj-muted);
}
.cj-foot .reset {
  margin-left: auto;
  background: none; border: 0; padding: 4px 2px;
  color: var(--cj-blue); font-size: 12.5px; font-weight: 700; text-decoration: underline;
}

.cj-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .cj * { transition: none !important; } }

/* ---------- Ajustes de integración en la landing ---------- */
/* los h1–h4 globales usan Archivo: el título de la tarjeta sigue la fuente del diseño */
.cj h2 { font-family: var(--cj-sans); line-height: inherit; }
/* la tarjeta flota sobre el fondo oscuro difuminado de la sección */
.calc .cj { box-shadow: 0 30px 70px -28px rgba(0,0,0,.65); border-color: transparent; }
.calc .cj + .refstrip { max-width: 54rem; margin-inline: auto; }