/* Calculadora de presupuestos - estilos.
   Colores y modo oscuro: variables al principio (:root y :root[data-theme=dark]). */
/* Tipografía sin conexión: si descargás la fuente y la ponés en fonts/, se usa aunque no haya internet */
@font-face {
  font-family: "BG Local";
  font-weight: 800;
  src:
    local("Bricolage Grotesque ExtraBold"),
    url("fonts/BricolageGrotesque-ExtraBold.woff2") format("woff2");
}
:root {
  --bg: #f1f1f1;
  --card: #fff;
  --tx: #222;
  --pr: #0e677f;
  --ac: #84dcc6;
  --mu: #6b7a7e;
  --bd: #dfe3e3;
  --onpr: #fff;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
:root[data-theme="dark"] {
  --bg: #1b1b1b;
  --card: #262626;
  --tx: #f1f1f1;
  --pr: #84dcc6;
  --ac: #0e677f;
  --mu: #9aa6a8;
  --bd: #383838;
  --onpr: #222;
}
html {
  scroll-padding-top: env(safe-area-inset-top, 0px);
}
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
body {
  margin: 0;
  font:
    800 15px/1.4 "BG Local",
    "Bricolage Grotesque",
    system-ui,
    sans-serif;
  letter-spacing: -0.01em;
  background: var(--bg);
  color: var(--tx);
}
h2,
h3,
h4 {
  margin: 4px 0 8px;
  font-weight: 800;
}
h2 {
  font-size: 22px;
  margin-bottom: 8px;
}
h3 {
  font-size: 16px;
  margin-bottom: 8px;
}
h4 {
  font-size: 14px;
  color: var(--mu);
}
button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: inherit;
}
input,
select,
textarea {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 2px solid var(--bd);
  background: var(--bg);
  color: var(--tx);
  text-transform: none;
}
textarea {
  min-height: 64px;
}
button {
  cursor: pointer;
}
.app {
  max-width: 1360px;
  margin: 0 auto;
  padding: 10px 12px;
}
#hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
}
.logo img {
  height: 36px;
  border-radius: 10px;
}
.logo-home {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
}
.logo-home:hover {
  opacity: 0.96;
}
.logo-home:focus-visible {
  outline: 3px solid var(--pr);
  outline-offset: 4px;
  border-radius: 9px;
}
.brand-stack {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 36px;
  flex: none;
}
.brand-stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
}
.brand-dark {
  display: none;
}
:root[data-theme="dark"] .brand-light {
  display: none;
}
:root[data-theme="dark"] .brand-dark {
  display: block;
}
.mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--pr);
  position: relative;
  overflow: hidden;
}
.mark:after {
  content: "";
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ac);
}
.hr,
.row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.row {
  margin: 6px 0;
}
.row > input {
  flex: 1;
  min-width: 110px;
  width: auto;
}
.ib {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--pr);
  background: transparent;
  color: var(--pr);
  display: grid;
  place-items: center;
  flex: none;
}
nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: sticky;
  top: calc(12px + env(safe-area-inset-top, 0px));
}
nav h4 {
  margin: 10px 4px 2px;
}
nav h4:first-child {
  margin-top: 0;
}
nav .chip {
  text-align: left;
  border-radius: 14px;
  white-space: normal;
}
.gw {
  position: relative;
}
.menu {
  position: absolute;
  right: 0;
  top: 48px;
  z-index: 30;
  background: var(--card);
  border: 2px solid var(--bd);
  border-radius: 16px;
  padding: 8px;
  display: grid;
  gap: 6px;
  min-width: 190px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.menu .chip {
  text-align: left;
  border-radius: 12px;
}
.chip {
  border: 2px solid var(--bd);
  background: var(--card);
  color: var(--tx);
  padding: 8px 14px;
  border-radius: 99px;
  white-space: nowrap;
}
.chip.on {
  background: var(--pr);
  border-color: var(--pr);
  color: var(--onpr);
}
.btn {
  background: var(--pr);
  color: var(--onpr);
  border: 2px solid var(--pr);
  border-radius: 12px;
  padding: 10px 14px;
}
.btn.s {
  background: transparent;
  color: var(--pr);
}
.grid {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 330px;
  grid-template-areas: "nav main sum";
  gap: 12px;
  align-items: start;
}
nav {
  grid-area: nav;
}
main {
  grid-area: main;
  min-width: 0;
}
.sum {
  grid-area: sum;
  max-height: calc(100vh - 24px);
  overflow: auto;
}
#hd {
  flex-wrap: wrap;
}
.sum {
  position: sticky;
  top: calc(12px + env(safe-area-inset-top, 0px));
  background: var(--card);
  border-radius: 18px;
  padding: 12px 14px;
  border: 2px solid var(--bd);
}
.sum .btn {
  width: 100%;
  margin-top: 8px;
}
.sum .row .btn {
  flex: 1;
  width: auto;
}
.cq {
  display: grid;
  padding: 4px 0;
}
.r {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
}
.tot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 28px;
  color: var(--pr);
  padding: 8px 0;
}
hr {
  border: 0;
  border-top: 2px solid var(--bd);
  margin: 8px 0;
}
.mg {
  background: var(--bg);
  border-radius: 12px;
  padding: 10px;
  margin-top: 8px;
  font-size: 13px;
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.card {
  background: var(--card);
  border: 2px solid var(--bd);
  border-radius: 14px;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
  align-content: start;
}
.card.on {
  border-color: var(--pr);
  background: color-mix(in srgb, var(--ac) 20%, var(--card));
}
.card.pk {
  border-style: dashed;
}
.card.free {
  opacity: 0.7;
}
.top {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  cursor: pointer;
}
.top input {
  width: 20px;
  height: 20px;
  accent-color: var(--pr);
  margin: 0;
  flex: none;
}
.pr {
  font-size: 20px;
  color: var(--pr);
}
.mu {
  color: var(--mu);
  font-size: 13px;
}
.ln {
  font-size: 13px;
}
.tag {
  background: var(--ac);
  color: #222;
  border-radius: 99px;
  padding: 3px 10px;
  font-size: 12px;
  justify-self: start;
}
.st {
  display: flex;
  align-items: center;
  gap: 6px;
}
.st button {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 2px solid var(--pr);
  background: transparent;
  color: var(--pr);
  flex: none;
}
.st input {
  width: 64px;
  text-align: center;
}
.panel {
  background: var(--card);
  border: 2px solid var(--bd);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.fg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
label.f {
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--mu);
}
.chk {
  display: flex;
  gap: 8px;
  align-items: center;
}
.chk input {
  width: 20px;
  height: 20px;
  accent-color: var(--pr);
}
.pe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 6px 8px;
  padding: 8px;
  border: 2px solid var(--bd);
  border-radius: 12px;
  margin-bottom: 8px;
  align-items: end;
}
.pe > :first-child {
  grid-column: 1/-1;
}
.pe.off {
  opacity: 0.55;
}
.pe label.f {
  font-size: 11px;
  gap: 2px;
}
.pe input,
.pe select {
  padding: 6px 8px;
  font-size: 13px;
  border-radius: 8px;
}
.pe .chk {
  padding-bottom: 6px;
  font-size: 13px;
}
.pe .chk input {
  width: 18px;
  height: 18px;
  padding: 0;
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.stats div {
  background: var(--bg);
  border-radius: 12px;
  padding: 10px;
}
.stats b {
  display: block;
  font-size: 20px;
  color: var(--pr);
}
#toast {
  position: fixed;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%);
  background: var(--tx);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: 12px;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
  z-index: 99;
  max-width: 90vw;
}
#toast.show {
  opacity: 1;
}
.bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--card);
  border-top: 2px solid var(--bd);
  padding: 10px 16px;
  justify-content: space-between;
  align-items: center;
  z-index: 20;
}
#doc {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.6);
  overflow: auto;
  padding: 16px;
}
#doc.open {
  display: block;
}
.dbar {
  max-width: 800px;
  margin: 0 auto 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  color: #fff;
}
.sheet {
  background: #fff;
  color: #222;
  max-width: 800px;
  margin: 0 auto;
  padding: 36px;
  border-radius: 12px;
}
.sheet h1 {
  margin: 0;
  font-size: 28px;
  color: #0e677f;
}
.sheet table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
}
.sheet th,
.sheet td {
  padding: 7px 6px;
  border-bottom: 1px solid #ddd;
  text-align: left;
}
.sheet .r2 {
  text-align: right;
}
.sheet .cat td {
  background: #84dcc633;
  color: #0e677f;
}
.sheet .tt {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
}
.sheet .big {
  font-size: 24px;
  color: #0e677f;
  border-top: 2px solid #0e677f;
  margin-top: 6px;
  padding-top: 8px;
}
.sheet p {
  margin: 4px 0;
}
.sheet .mu {
  color: #666;
}
/* Botón de guardado pendiente */
.btn.dirty {
  background: var(--pr);
  color: var(--onpr);
}
.btn.dirty:after {
  content: " •";
}
/* Buscador de Configuración › Precios: queda fijo arriba al bajar */
.sch {
  position: sticky;
  top: calc(8px + env(safe-area-inset-top, 0px));
  z-index: 5;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.chips .chip {
  padding: 6px 12px;
  font-size: 13px;
}
/* Tablet: menú arriba en fila, formulario + resumen en dos columnas */
@media (max-width: 1100px) {
  .app {
    padding: 12px;
  }
  .grid {
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-areas: "nav nav" "main sum";
    gap: 14px;
  }
  nav {
    flex-direction: row;
    flex-wrap: wrap;
    position: static;
  }
  nav h4 {
    display: none;
  }
  nav .chip {
    padding: 7px 12px;
    font-size: 14px;
    border-radius: 99px;
  }
  .cards {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }
  .stats {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  }
  .tot {
    font-size: 24px;
  }
}
/* Celular: una sola columna y barra inferior con el total */
@media (max-width: 700px) {
  .grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "nav" "main" "sum";
  }
  nav {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  nav .chip {
    white-space: nowrap;
  }
  .sum {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .bar {
    display: flex;
  }
  .app {
    padding-bottom: 90px;
  }
  .sheet {
    padding: 18px;
  }
  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }
}

@media print {
  .app,
  .bar,
  #toast,
  .dbar {
    display: none !important;
  }
  #doc.open {
    position: static;
    background: none;
    padding: 0;
    display: block;
  }
  .sheet {
    border-radius: 0;
    padding: 0;
  }
  :root {
    padding: 0;
  }
  body {
    background: #fff;
  }
}

/* Edición de packs */
.pe .full {
  grid-column: 1/-1;
}
.pe details {
  border: 2px dashed var(--bd);
  border-radius: 10px;
  padding: 6px 10px;
}
.pe summary {
  cursor: pointer;
}
.inc-g h4 {
  margin: 8px 0 2px;
}
.inc-l {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2px 10px;
}
.inc-l label {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 13px;
}
.inc-l input {
  width: 16px;
  height: 16px;
  padding: 0;
  flex: none;
}
.btn.sm {
  padding: 6px 10px;
  font-size: 13px;
}

/* Ventana de nuevo pack */
#modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.55);
  overflow: auto;
  padding: 16px;
}
#modal.open {
  display: block;
}
.mbox {
  background: var(--card);
  color: var(--tx);
  max-width: 680px;
  margin: 0 auto;
  border-radius: 16px;
  padding: 16px;
  border: 2px solid var(--bd);
}
@media print {
  #modal {
    display: none !important;
  }
}

/* Campos en fila (selectores y números chicos) */
.row > select {
  flex: 1;
  min-width: 170px;
  width: auto;
}
.row > input.sm {
  flex: none;
  width: 96px;
  min-width: 0;
}

/* Rentabilidad: ganancia grande arriba y resultado por integrante */
.stats {
  grid-template-columns: repeat(2, 1fr);
}
.stats div:first-child {
  grid-column: 1/-1;
}
.stats div:first-child b {
  font-size: 32px;
}
.stats span {
  display: block;
  font-size: 12px;
}
.mm {
  display: grid;
  grid-template-columns: 1.5fr repeat(5, 1fr);
  gap: 6px;
  padding: 8px 0;
  border-bottom: 2px solid var(--bd);
  align-items: center;
}
.mm.hd {
  font-size: 12px;
  color: var(--mu);
}
.mm.tt {
  border-bottom: 0;
  color: var(--pr);
}
@media (max-width: 700px) {
  .mm {
    grid-template-columns: repeat(2, 1fr);
  }
  .mm > :first-child {
    grid-column: 1/-1;
  }
  .mm.hd {
    display: none;
  }
  .mm > span[data-l]:before {
    content: attr(data-l) ": ";
    color: var(--mu);
    font-size: 12px;
  }
}

/* Contenido semanal en las tarjetas */
.wk {
  display: grid;
  gap: 6px;
  background: var(--bg);
  border-radius: 12px;
  padding: 10px;
}
.wkr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}
.wkr .st input {
  width: 56px;
  padding: 6px;
}

/* Detalle desplegable de tareas */
.dt {
  border-top: 2px dashed var(--bd);
  margin-top: 6px;
  padding-top: 6px;
}
.dt > summary {
  cursor: pointer;
  color: var(--pr);
  font-size: 13px;
  text-decoration: underline;
}
.dl {
  display: grid;
  margin-top: 6px;
}
.tr {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--bd);
  align-items: start;
  font-size: 13px;
}
.tr .n {
  color: var(--pr);
}
.tr .tn small {
  display: block;
  font-size: 12px;
}
.hc {
  background: var(--bg);
  color: var(--pr);
  border-radius: 99px;
  padding: 2px 10px;
  font-size: 12px;
  white-space: nowrap;
  justify-self: end;
}
.dm {
  background: color-mix(in srgb, var(--ac) 20%, var(--card));
  border-radius: 12px;
  padding: 10px;
  margin: 6px 0;
}
.dmh {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.dm .dt {
  border-top: 0;
  margin-top: 2px;
}
.se {
  background: var(--bg);
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 13px;
}
.se small {
  display: block;
}

/* Rentabilidad: tareas por integrante */
.tg {
  border: 2px solid var(--bd);
  border-radius: 12px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.tg > summary {
  cursor: pointer;
  display: flex;
  gap: 8px;
  align-items: center;
}
.tk {
  display: grid;
  grid-template-columns:
    minmax(0, 1.6fr) auto minmax(110px, 1fr) minmax(110px, 1fr)
    auto;
  gap: 6px 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed var(--bd);
  font-size: 13px;
}
.tk select,
.tk input {
  padding: 6px 8px;
  font-size: 13px;
  border-radius: 8px;
}
.tk .tn small {
  display: block;
  font-size: 12px;
}
.tk .pa {
  display: flex;
  gap: 4px;
  align-items: center;
}
.tk .pa input {
  width: 64px;
}
.mmx {
  padding: 0 0 8px;
  border-bottom: 2px solid var(--bd);
}
.mmx .dt {
  border-top: 0;
  margin-top: 0;
}
@media (max-width: 700px) {
  .tk {
    grid-template-columns: 1fr auto;
  }
  .tk select,
  .tk .pa {
    grid-column: 1/-1;
  }
}
.hp {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -2px 0 10px;
}
.hp .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.pv {
  display: grid;
  grid-template-columns: 1fr auto 120px auto;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line, rgba(128, 128, 128, 0.25));
}
.pv .pn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pv .pn small {
  font-size: 12px;
}
.pv input[type="number"] {
  width: 100%;
}
.pv.off {
  opacity: 0.55;
}
@media (max-width: 560px) {
  .pv {
    grid-template-columns: 1fr 110px;
  }
  .pv > .mu {
    display: none;
  }
}
.mbox .chips {
  margin: 6px 0 10px;
}
.pv {
  grid-template-columns: 1fr 100px 120px auto;
}
.pv .hh {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pv .hh input {
  width: 100%;
}
@media (max-width: 560px) {
  .pv {
    grid-template-columns: 1fr 100px 110px;
  }
  .pv .chk {
    grid-column: 1/-1;
  }
}
.cards.pcs {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.card.pkc {
  padding: 18px;
  border-style: solid;
  gap: 8px;
  position: relative;
}
.card.pkc .top span {
  font-size: 1.15em;
  font-weight: 800;
}
.card.pkc .pr {
  font-size: 1.7em;
  font-weight: 800;
  line-height: 1.1;
}
.card.pkc .pr small {
  font-size: 0.5em;
  font-weight: 500;
}
.pst {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pst span {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--ac) 25%, transparent);
}
.card.best {
  border: 3px solid var(--pr);
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--ac) 28%, var(--card)),
    var(--card)
  );
  box-shadow: 0 8px 24px color-mix(in srgb, var(--pr) 25%, transparent);
}
@media (min-width: 700px) {
  .cards.pcs .card.best {
    grid-column: 1/-1;
  }
}
.badge {
  justify-self: start;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 4px 12px;
  border-radius: 99px;
  background: var(--pr);
  color: var(--bg, #fff);
}
.cond {
  margin: 12px 0;
}
.cond textarea {
  width: 100%;
  margin-top: 6px;
  min-height: 70px;
}
.cond .row input {
  flex: 1;
}

/* ==========================================================================
   MENÚ LATERAL DESPLEGABLE (grupos: Marca, Redes y contenido, Web)
   ========================================================================== */
nav .ng {
  border: 2px solid var(--bd);
  border-radius: 14px;
  background: var(--card);
  overflow: hidden;
}
nav .ng > summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  color: var(--mu);
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  transition: color 0.2s;
}
nav .ng > summary::-webkit-details-marker {
  display: none;
}
nav .ng > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s;
}
nav .ng[open] > summary::after {
  transform: rotate(-135deg);
}
nav .ng > summary:hover {
  color: var(--pr);
}
nav .ng .gi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 6px 6px;
}
nav .ng .chip {
  border-width: 1px;
  padding: 6px 10px;
}
@media (max-width: 1100px) {
  nav {
    flex-direction: column;
    flex-wrap: nowrap;
    overflow: visible;
  }
  nav .ng .gi {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   RESUMEN LATERAL: formulario del cliente + presupuestos guardados
   ========================================================================== */
.clf {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
}
.clf input,
.clf textarea {
  padding: 7px 10px;
  font-size: 14px;
}
.clf textarea {
  min-height: 44px;
  resize: vertical;
}
.sum .sv {
  border: 2px dashed var(--bd);
  border-radius: 12px;
  padding: 6px 10px;
  margin-bottom: 6px;
}
.sum .sv summary {
  cursor: pointer;
  color: var(--mu);
  font-size: 13px;
}

/* ==========================================================================
   PRECIOS VIGENTES: categorías minimizadas
   ========================================================================== */
details.pvc > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
details.pvc > summary::-webkit-details-marker {
  display: none;
}
details.pvc > summary h3 {
  margin: 0;
}
details.pvc > summary::after {
  content: "+";
  font-size: 20px;
  color: var(--pr);
  transition: transform 0.25s;
}
details.pvc[open] > summary::after {
  transform: rotate(45deg);
}
details.pvc[open] > summary {
  margin-bottom: 6px;
}

/* ==========================================================================
   PDF DE RENTABILIDAD: filas de tareas bajo cada integrante
   ========================================================================== */
.sheet h3 {
  margin: 18px 0 6px;
  color: #0e677f;
  font-size: 16px;
}
.sheet tr.sub td {
  font-size: 12px;
  color: #666;
  padding: 2px 6px;
  border-bottom: 0;
}

/* ==========================================================================
   ANIMACIONES (se desactivan si el sistema pide menos movimiento)
   ========================================================================== */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes drop {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes bump {
  40% {
    transform: scale(1.06);
  }
}
/* Pantalla nueva: entra suave; las tarjetas y paneles escalonados */
main.anim > h2,
main.anim > .panel,
main.anim > h4,
main.anim > p {
  animation: rise 0.35s ease both;
}
main.anim .cards > .card {
  animation: rise 0.4s ease both;
}
main.anim .cards > .card:nth-child(2) {
  animation-delay: 0.04s;
}
main.anim .cards > .card:nth-child(3) {
  animation-delay: 0.08s;
}
main.anim .cards > .card:nth-child(4) {
  animation-delay: 0.12s;
}
main.anim .cards > .card:nth-child(n + 5) {
  animation-delay: 0.16s;
}
/* Tarjetas, botones y chips: respuesta al pasar el mouse / tocar */
.card,
.chip,
.btn,
.ib,
.panel,
input,
select,
textarea {
  transition:
    transform 0.18s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--pr) 14%, transparent);
}
.card.best:hover {
  transform: translateY(-3px);
}
.chip:hover,
.ib:hover {
  border-color: var(--pr);
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--pr) 25%, transparent);
}
.btn:active,
.chip:active,
.ib:active,
.st button:active {
  transform: scale(0.96);
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--pr);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac) 45%, transparent);
}
/* Contenido que se despliega (menús, detalles, categorías) */
details.just[open] > :not(summary) {
  animation: drop 0.25s ease both;
}
/* Ventanas, hoja de impresión y avisos */
#modal.open .mbox {
  animation: pop 0.25s ease both;
}
#doc.open {
  animation: fade 0.2s ease both;
}
#doc.open .sheet {
  animation: rise 0.35s ease both;
}
.menu {
  animation: drop 0.2s ease both;
}
#toast {
  transform: translate(-50%, 12px);
  transition:
    opacity 0.25s,
    transform 0.25s;
}
#toast.show {
  transform: translate(-50%, 0);
}
/* El total late un poquito cuando cambia */
.tot b.chg {
  animation: bump 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}
details.pvc > summary .mu {
  margin-left: auto;
}

/* Configuración general: grupo aparte al final del menú lateral */
nav .ng.cfg {
  margin-top: 8px;
  border-style: dashed;
}

/* Formatos del contenido semanal (tiempo y precio de cada uno) */
.fmt {
  margin-top: 6px;
}
.fmt summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--pr);
}
.fr {
  display: grid;
  grid-template-columns: 1fr 64px auto 90px auto;
  gap: 6px;
  align-items: center;
  padding: 4px 0;
}
.fr input {
  width: 100%;
}

/* Encabezado: botones de solo icono */
.ib.hs.dirty {
  background: var(--pr);
  color: var(--onpr);
  position: relative;
}
.ib.hs.dirty:after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ac);
}

/* Rentabilidad: caja superior (total / empresa / equipo) con el % al lado */
.rtTop {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
}
.rtTop .stats {
  grid-template-columns: 1fr;
  margin-top: 0;
}
.rtTop .stats div:first-child {
  grid-column: auto;
}
.rtTop .stats div:first-child b {
  font-size: 28px;
}
.rtTop .stats b {
  font-size: 22px;
}
.rtPct {
  background: var(--bg);
  border-radius: 12px;
  padding: 10px;
  min-width: 130px;
}
.rtPct input {
  width: 70px;
}
@media (max-width: 480px) {
  .rtTop {
    grid-template-columns: 1fr;
  }
}
.mm {
  grid-template-columns: 1.5fr repeat(2, 1fr);
}
@media (max-width: 700px) {
  .mm {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Precios de mercado */
.pv .mkr {
  grid-column: 1/-1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 12px;
}
.pv .mkr input {
  width: 150px;
}
.mkl {
  padding: 3px 8px;
  border: 2px solid var(--pr);
  border-radius: 999px;
  color: var(--pr);
  text-decoration: none;
  font-size: 12px;
}
.mkd {
  flex: 1;
  min-width: 120px;
}

/* Tareas: varias personas por tarea */
.tk {
  grid-template-columns: minmax(0, 1.6fr) auto minmax(220px, 2.4fr);
}
.tk .who {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.tk .pp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg);
  border-radius: 999px;
  padding: 2px 4px 2px 10px;
}
.tk .pp input {
  width: 58px;
}
.tk .pp .ib {
  width: 26px;
  height: 26px;
  border-width: 1.5px;
  font-size: 14px;
}
.tk .ps.bad {
  color: #b3261e;
}
@media (max-width: 700px) {
  .tk {
    grid-template-columns: 1fr auto;
  }
  .tk .who {
    grid-column: 1/-1;
  }
}
.tk .who select {
  width: auto;
  flex: 1 1 140px;
  min-width: 0;
}
.tk .who .ps {
  flex: 1 1 100%;
}

/* Tareas del presupuesto: orden (nombre y horas arriba, personas abajo) */
.tg > .row {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 8px 10px;
  align-items: center;
  margin: 8px 0 10px;
}
.tg > .row select {
  width: 100%;
  min-width: 0;
}
.tk {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  padding: 10px 0;
}
.tk .tn {
  font-weight: 600;
}
.tk .hc {
  justify-self: end;
}
.tk .who {
  grid-column: 1/-1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
}
.tk .who select {
  flex: 0 1 190px;
  width: auto;
}
.tk .who .ps {
  flex: 0 0 auto;
  margin-left: auto;
}
@media (max-width: 560px) {
  .tg > .row {
    grid-template-columns: auto 1fr;
  }
}

/* Tareas del presupuesto: editar nombre y horas */
.tk .tn .tnm {
  width: 100%;
  font-weight: 600;
  background: transparent;
  border: 2px solid transparent;
  padding: 4px 6px;
}
.tk .tn .tnm:hover,
.tk .tn .tnm:focus {
  border-color: var(--bd);
  background: var(--bg);
}
.tk .th {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-self: end;
}
.tk .th input {
  width: 64px;
}
.tk .th .ib {
  width: 28px;
  height: 28px;
  border-width: 1.5px;
  font-size: 14px;
}
.tdel {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 8px 0;
}
.tdel .chip {
  font-size: 12px;
  opacity: 0.8;
}

/* Rentabilidad: texto pequeño bajo el monto de la empresa y cobro por mes */
.stats small {
  display: block;
  font-size: 12px;
  margin-top: 2px;
}

/* Pack desde cero: elementos propios */
.npc {
  display: grid;
  grid-template-columns: minmax(120px, 2fr) 70px 80px 90px auto auto;
  gap: 6px;
  align-items: end;
  padding: 6px 0;
  border-top: 1px dashed var(--bd);
}
.npc > input {
  align-self: end;
}
.npc .f {
  font-size: 11px;
  margin: 0;
}
.npc b {
  align-self: center;
  white-space: nowrap;
}
.npc input {
  width: 100%;
  min-width: 0;
}
@media (max-width: 560px) {
  .npc {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .npc > input:first-child {
    grid-column: 1/-1;
  }
}

/* Archivo */
.ar {
  display: grid;
  grid-template-columns: 150px 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--bd);
}
.ar .an small {
  display: block;
}
.at {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--bg);
  text-align: center;
}
.at.p {
  color: var(--pr);
}
.at.r {
  color: #b45309;
}
@media (max-width: 560px) {
  .ar {
    grid-template-columns: 1fr auto auto;
  }
  .ar .at {
    grid-column: 1/-1;
    justify-self: start;
  }
}

/* Administración: modo edición */
#uibar {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  background: var(--pr);
  color: var(--onpr);
  padding: 8px 12px;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  max-width: calc(100vw - 16px);
  font-size: 13px;
}
#uibar select {
  width: auto;
  padding: 4px 8px;
}
#uibar .btn {
  background: var(--card);
  color: var(--tx);
}
.uiedit #main *:hover,
.uiedit #hd *:hover,
.uiedit #tabs *:hover,
.uiedit #sum *:hover {
  outline: 2px dashed var(--pr);
  outline-offset: 1px;
  cursor: text;
}
#uimodal {
  position: fixed;
  inset: 0;
  z-index: 130;
  background: rgba(0, 0, 0, 0.4);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#uimodal.open {
  display: flex;
}
#uimodal .mbox {
  background: var(--card);
  border-radius: 16px;
  padding: 16px;
  width: min(440px, 100%);
}
.ub {
  text-decoration: none;
}
input[type="color"] {
  padding: 2px;
  height: 40px;
}

/* Búsqueda automática de precios */
.pv .mkres {
  grid-column: 1/-1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 12px;
}
.mkres:empty {
  display: none;
}
.mu.bad {
  color: #b3261e;
}

/* Diseño de la página */
#lyc {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 5;
}
.lya {
  position: absolute;
  overflow: hidden;
}
.lya .lyt {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.25;
}
.lya .lyb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  margin: 0;
}
.lya .lyl {
  margin-top: 2px;
}
.lyhid {
  display: none !important;
}
.lyghost {
  opacity: 0.3;
  outline: 2px dashed #ff3d7f;
}
body.lyedit [data-lyk] {
  cursor: move;
  user-select: none;
}
body.lyedit [data-lyk]:hover {
  outline: 1px dashed #ff3d7f;
}
body.lyedit {
  padding-bottom: 150px;
}
#lysel {
  position: absolute;
  z-index: 200;
  border: 2px solid #ff3d7f;
  pointer-events: none;
}
#lysel .lyh {
  position: absolute;
  width: 11px;
  height: 11px;
  background: #fff;
  border: 2px solid #ff3d7f;
  border-radius: 3px;
  pointer-events: auto;
}
#lysel .lyh[data-h="nw"] {
  left: -7px;
  top: -7px;
  cursor: nwse-resize;
}
#lysel .lyh[data-h="n"] {
  left: calc(50% - 6px);
  top: -7px;
  cursor: ns-resize;
}
#lysel .lyh[data-h="ne"] {
  right: -7px;
  top: -7px;
  cursor: nesw-resize;
}
#lysel .lyh[data-h="e"] {
  right: -7px;
  top: calc(50% - 6px);
  cursor: ew-resize;
}
#lysel .lyh[data-h="se"] {
  right: -7px;
  bottom: -7px;
  cursor: nwse-resize;
}
#lysel .lyh[data-h="s"] {
  left: calc(50% - 6px);
  bottom: -7px;
  cursor: ns-resize;
}
#lysel .lyh[data-h="sw"] {
  left: -7px;
  bottom: -7px;
  cursor: nesw-resize;
}
#lysel .lyh[data-h="w"] {
  left: -7px;
  top: calc(50% - 6px);
  cursor: ew-resize;
}
#lysel .lyn {
  position: absolute;
  left: 0;
  top: -24px;
  background: #ff3d7f;
  color: #fff;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 6px;
  white-space: nowrap;
}
.lyg {
  position: absolute;
  background: #ff3d7f;
  z-index: 190;
  pointer-events: none;
}
#lybar {
  position: fixed;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 210;
  background: var(--card);
  color: var(--tx);
  border: 2px solid var(--bd);
  border-radius: 16px;
  padding: 8px 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  display: grid;
  gap: 6px;
  max-width: calc(100vw - 20px);
  font-size: 12px;
}
#lybar .lyr {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
}
#lybar .sp {
  flex: 1;
}
#lybar label {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  gap: 2px;
}
#lybar label.c {
  flex-direction: row;
  align-items: center;
}
#lybar input[type="number"] {
  width: 64px;
}
#lybar input[type="text"] {
  width: 150px;
}
#lybar input,
#lybar select {
  padding: 4px 6px;
  font-size: 12px;
}
#lybar input[type="color"] {
  width: 44px;
  height: 28px;
  padding: 1px;
}
#lybar button[disabled] {
  opacity: 0.4;
}

/* ======================================================================
   BRUMA INTERNA · INTERFAZ SIMPLIFICADA
   Se agregan al final para priorizar esta versión sin alterar reglas
   antiguas de la calculadora y conservar compatibilidad con respaldos.
   ====================================================================== */
body {
  font-weight: 500;
  line-height: 1.48;
  letter-spacing: 0;
}
h2,h3,h4,.logo,.tot,.pr {font-weight: 800}
.btn,.chip,.top,.nav-main,.qgroup {font-weight: 700}
.mu {font-weight: 450;line-height: 1.5}
.app {max-width: 1440px;padding: 16px 20px 90px}
#hd {margin-bottom: 16px;padding: 4px 2px 8px}
.grid {grid-template-columns: 196px minmax(0, 1fr) 310px; gap: 18px}
nav {gap: 7px}
.navtitle {font-size: 11px;letter-spacing: .13em;font-weight: 800;color: var(--mu);padding: 8px 12px}
nav .nav-main {border-radius: 13px;text-align: left;padding: 12px 14px;font-size: 14px;white-space: normal}
nav .nav-main:not(.on) {border-color: transparent;background: transparent}
nav .nav-main:not(.on):hover {background: var(--card);border-color: var(--bd)}
.quote-top {background: var(--card);border: 2px solid var(--bd);border-radius: 18px;padding: 17px 18px;margin-bottom: 16px}
.quote-top h2 {margin: 0 0 3px}
.quote-top p {margin: 0 0 14px}
.quote-groups,.setting-tabs {display:flex;flex-wrap:wrap;gap:8px;margin: 12px 0 14px}
.qgroup {padding: 9px 14px;border: 1.5px solid var(--bd);border-radius: 12px;background: var(--bg);color: var(--tx);cursor:pointer}
.qgroup.active {background: var(--pr);color:var(--onpr);border-color:var(--pr)}
.quote-search {display:flex;flex-direction:column;gap:5px;max-width:580px}
.quote-search input {background:var(--bg);padding: 12px 14px}
.quote-section {margin: 8px 0 26px}
.quote-section h2 {padding: 0 2px;margin-bottom: 6px}
.quote-section > h4 {margin-top: 14px}
.cards {grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.card {border: 1.5px solid var(--bd);padding: 14px 15px;gap:8px;box-shadow:0 2px 8px rgba(0,0,0,.025)}
.card.pk {border-style:solid}
.card.on {border-width:2px}
.card .mu {font-size: 12.5px}
.card .top {align-items:center;font-weight: 700}
.card .pr {margin-top: 6px}
.card.best {background: var(--card);box-shadow:none;border:1.5px solid var(--bd)}
.cards.pcs .card.best {grid-column:auto}
.card:hover {transform:none;box-shadow:0 3px 12px color-mix(in srgb,var(--pr) 10%,transparent)}
.quote-options {margin-top: 22px}
.quote-options>summary,.catalog-more>summary,.catalog-group>summary {cursor:pointer;font-weight:700;list-style:none}
.quote-options>summary::-webkit-details-marker,.catalog-more>summary::-webkit-details-marker,.catalog-group>summary::-webkit-details-marker {display:none}
.quote-options>summary:after,.catalog-more>summary:after,.catalog-group>summary:after {content:'⌄';float:right;color:var(--pr)}
.quote-options[open]>summary:after,.catalog-more[open]>summary:after,.catalog-group[open]>summary:after {content:'⌃'}
.quote-options>summary .mu {display:block;font-weight:450}
.quote-options .panel {border-radius:10px;background:var(--bg);margin-top:12px}
.setting-tabs {margin-bottom:20px}
.setting-tabs .chip {white-space: normal}
.catalog-group {padding:0;overflow:hidden}
.catalog-group>summary {padding:13px 16px;display:flex;align-items:center;gap:10px}
.catalog-group>summary .mu {margin-left:auto}
.catalog-group>summary:after {float:none;margin-left:8px}
.catalog-group .catalog-rows {padding: 4px 12px}
.catalog-group>.row {padding:0 12px 12px}
.catalog-more {margin-top:12px}
.catalog-more>summary {padding:6px 0}
.catalog-more[open]>summary {margin-bottom:14px}
.catalog-more input#pvPct {max-width:140px}
.sum {padding: 16px 17px;border-radius:18px;box-shadow:0 5px 18px rgba(0,0,0,.035)}
.sum h3 {font-size:17px}
.sum .tot {font-size:25px}
.sum .tot b {white-space:nowrap}
.text-link {background:none;border:0;padding:0;color:var(--pr);text-decoration:underline;cursor:pointer;font:inherit;font-size:13px;font-weight:650}
.history-shortcut {text-align:left;margin:5px 0 7px}
.saved-prices {background:color-mix(in srgb,var(--ac) 20%,var(--card));border-radius:10px;padding:9px;font-size:12px;line-height:1.5}
.ar.quote-history {grid-template-columns: 110px minmax(120px,1fr) auto auto auto}
.ar .at {max-width:100%;overflow-wrap:anywhere}
.ar .an {min-width:0;overflow-wrap:anywhere}
.ar .an small {line-height:1.4}
@media (max-width: 1100px) {
 .grid {grid-template-columns:minmax(0,1fr) 305px;grid-template-areas:'nav nav' 'main sum'}
 nav {display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;align-items:center}
 .navtitle {padding:8px 6px}
 nav .nav-main {white-space:nowrap}
}
@media (max-width: 700px) {
 .app {padding: 12px 12px 100px}
 .grid {grid-template-columns:minmax(0,1fr);grid-template-areas:'nav' 'main' 'sum';gap:12px}
 nav {display:flex;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;position:static}
 .navtitle {display:none}
 nav .nav-main {white-space:nowrap;flex:0 0 auto;font-size:13px;padding:9px 11px}
 .quote-top {padding:14px}
 .quote-groups {flex-wrap:nowrap;overflow-x:auto;padding-bottom:5px}
 .qgroup {white-space:nowrap;flex:none}
 .quote-section {margin-bottom:20px}
 .cards,.cards.pcs {grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
 .ar.quote-history {grid-template-columns: minmax(0,1fr) auto auto}
 .ar.quote-history .at {grid-column:1/-1;justify-self:start}
 .ar.quote-history .an {grid-column:1/-1}
 .ar.quote-history .ib {grid-column:auto}
 .setting-tabs {flex-wrap:nowrap;overflow-x:auto}
 .setting-tabs .chip {white-space:nowrap}
}
@media (max-width: 400px) {.cards,.cards.pcs {grid-template-columns: 1fr}.sum .tot{font-size:22px}}
.quote-subnav {display:flex;gap:6px;flex-wrap:wrap;margin: -4px 0 13px}
.quote-subnav .chip {font-size:12px;padding: 6px 10px;border-width:1.5px}
.budget-price {display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--mu);background:var(--bg);padding:8px;border-radius:10px}
.budget-price input {width:130px;max-width:100%;font-size:13px;padding:5px 7px;border-width:1px;background:var(--card)}
@media (max-width:700px){.quote-subnav{flex-wrap:nowrap;overflow-x:auto}.quote-subnav .chip{flex:none;white-space:nowrap}}
.archive-detail {grid-column:1/-1;padding:8px 10px 3px;background:var(--bg);border-radius:10px;font-size:12px}
.archive-detail>summary {cursor:pointer;color:var(--pr);font-weight:700}
.archive-detail>.r {padding:5px 0;gap:20px}

/* Texto de lectura más liviano; Bricolage queda para títulos y cifras. */
body {font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:400}
h2,h3,h4,.logo,.tot,.pr {font-family:"BG Local","Bricolage Grotesque",system-ui,sans-serif}

/* ====================================================================
   Constructor de packs V3: tareas seleccionables y edición en línea.
   ==================================================================== */
#modal .pack-builder {max-width:1100px;padding:0;overflow:visible;border-radius:20px}
#modal .pack-builder-header {display:flex;justify-content:space-between;align-items:start;gap:16px;padding:20px 22px 12px}
#modal .pack-builder-header h2 {font-size:24px;margin:2px 0 2px}
#modal .pack-builder-header p {margin:0}
#modal .pack-builder-header .ib {flex:0 0 34px;width:34px;height:34px}
.pack-builder-info {display:grid;grid-template-columns:minmax(180px,2fr) minmax(120px,1fr) minmax(150px,1.5fr);gap:12px;padding:10px 22px 18px;border-bottom:1px solid var(--bd)}
.pack-builder-info .pack-desc {grid-column:1/-1}
.pack-builder-info input,.pack-builder-info select {background:var(--bg);padding:8px 10px}
.pack-builder-info .unit-hint {font-size:13px;cursor:help;color:var(--pr)}
.pack-builder-layout {display:grid;grid-template-columns:minmax(0,1fr) 252px;gap:20px;padding:20px 22px 24px;align-items:start}
.pack-section-intro h3 {margin:0 0 4px;font-size:17px}
.pack-section-intro p {margin:0 0 12px}
.pack-category {border:1.5px solid var(--bd);background:var(--card);border-radius:12px;overflow:hidden;margin-bottom:9px}
.pack-category>summary {cursor:pointer;list-style:none;display:flex;gap:10px;align-items:center;padding:12px 14px;font-weight:700;user-select:none}
.pack-category>summary::-webkit-details-marker {display:none}
.pack-category[open]>summary {background:color-mix(in srgb,var(--ac) 11%,var(--card));border-bottom:1px solid var(--bd)}
.pack-cat-count {margin-left:auto;font-size:11px;color:var(--mu);font-weight:500;white-space:nowrap}
.pack-chevron {font-size:17px;color:var(--pr)}
.pack-category[open] .pack-chevron {transform:rotate(180deg)}
.pack-category-body {padding:9px 12px 12px}
.pack-select-all {display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;padding:5px 3px 10px}
.pack-select-all input,.pack-item-name input {width:18px;height:18px;margin:0;accent-color:var(--pr);flex:0 0 auto}
.pack-rows {display:grid;gap:4px}
.pack-item {display:grid;grid-template-columns:minmax(0,1fr) 75px 112px;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--bd);border-radius:9px;transition:background .12s,border-color .12s;min-width:0}
.pack-item.selected {background:color-mix(in srgb,var(--ac) 13%,var(--card));border-color:color-mix(in srgb,var(--pr) 40%,var(--bd))}
.pack-item-name {display:flex;align-items:center;gap:9px;min-width:0;font-size:13px;cursor:pointer}
.pack-item-name>span {min-width:0;overflow-wrap:anywhere;line-height:1.3}
.pack-item-name small {font-size:11px}
.pack-cell {display:grid;gap:3px;min-width:0}
.pack-cell small {font-size:10px;color:var(--mu);font-weight:650}
.pack-cell input {font-size:13px;font-weight:550;width:100%;min-width:0;padding:5px 5px;border:1px solid var(--bd);border-radius:7px;text-align:right;background:var(--card)}
.pack-add {margin:10px 1px 0;font-weight:700}
.pack-add-form {background:var(--bg);border:1px solid var(--bd);padding:12px;border-radius:12px;margin-top:10px;display:grid;gap:10px}
.pack-add-top {display:flex;align-items:center;justify-content:space-between;gap:10px}
.pack-add-top .ib {width:27px;height:27px}
.pack-add-form input,.pack-add-form select {background:var(--card);padding:8px}
.pack-add-fields {display:grid;grid-template-columns:repeat(auto-fit,minmax(98px,1fr));gap:10px}
.pack-add-fields .f {min-width:0}
.pack-add-form .chk {font-size:12px}
.pack-custom {grid-template-columns:minmax(0,1fr) 65px 95px 28px}
.pack-custom-num,.pack-custom-price {font-size:12px;text-align:right}
.pack-custom .ib {width:27px;height:27px;border-width:1px}
.pack-advanced {margin-top:14px;border:1px dashed var(--bd);border-radius:11px;padding:12px}
.pack-advanced>summary {cursor:pointer;font-weight:650;color:var(--pr);font-size:13px}
.pack-advanced .panel {display:grid;gap:12px;margin:10px 0 0;background:var(--bg)}
.pack-builder-summary {position:sticky;top:18px;border:1px solid var(--bd);border-radius:13px;padding:16px;background:var(--bg);display:grid;gap:11px}
.pack-builder-summary h3 {margin:0}
.pack-builder-summary p {margin:0}
.pack-builder-summary input {background:var(--card)}
.pack-builder-summary #npP {font-size:20px;font-weight:750;border-color:var(--pr)}
.pack-builder-summary .btn {width:100%}
.pack-builder-summary #npAutoBtn {text-align:left;font-size:12px}
#modal .service-builder {max-width:540px;display:grid;gap:12px}
#modal .service-builder .pack-builder-header {padding:0;margin-bottom:8px}
#modal .service-builder input,#modal .service-builder select {background:var(--bg)}
@media(max-width:860px){
 #modal .pack-builder {max-width:700px}
 .pack-builder-layout {grid-template-columns:1fr;gap:14px}
 .pack-builder-summary {position:static;order:-1;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}
 .pack-builder-summary h3,.pack-builder-summary #npInfo,.pack-builder-summary #npAuto,.pack-builder-summary>p.mu {grid-column:1/-1}
 .pack-builder-summary .btn {margin:0}
}
@media(max-width:540px){
 #modal {padding:5px}
 #modal .pack-builder {border-radius:13px}
 #modal .pack-builder-header {padding:14px 12px 8px}
 #modal .pack-builder-header h2 {font-size:21px}
 .pack-builder-info {padding:8px 12px 12px;grid-template-columns:1fr 1fr;gap:8px}
 .pack-builder-info>.f:first-child,.pack-builder-info>.pack-desc {grid-column:1/-1}
 .pack-builder-layout {padding:12px;gap:12px}
 .pack-builder-summary {padding:11px;gap:7px}
 .pack-item {grid-template-columns:minmax(0,1fr) 59px 84px;gap:5px;padding:6px}
 .pack-item-name {font-size:12px;gap:5px}
 .pack-cell input {font-size:12px;padding:5px 3px}
 .pack-cat-count {font-size:10px}
 .pack-category>summary {padding:10px 9px}
 .pack-custom {grid-template-columns:minmax(0,1fr) 44px 72px 27px}
 .pack-custom-num,.pack-custom-price {font-size:11px}
 .pack-category-body {padding:8px}
}
@media(max-width:540px) {
 /* En celular primero se eligen servicios; el total editable queda al final. */
 .pack-builder-summary {order:2}
 .pack-builder-catalog {order:1}
}

/* V3.1 · Cantidad y horas por pieza dentro del constructor de packs. */
.pack-item.pack-has-quantity {grid-template-columns:minmax(125px,1fr) 76px 76px 116px}
.pack-item.pack-has-quantity .pack-quantity input {text-align:center}
.pack-item .pack-cell input:focus {border-color:var(--pr)}
@media (max-width:680px) {
  .pack-item.pack-has-quantity {grid-template-columns:minmax(85px,1fr) 55px 55px 80px;gap:5px}
  .pack-item.pack-has-quantity .pack-cell input {font-size:12px;padding:5px 2px}
  .pack-item.pack-has-quantity .pack-item-name {font-size:12px;gap:5px}
  .pack-item.pack-has-quantity .pack-cell small {font-size:9px;line-height:1.1}
}
@media (max-width:390px) {
  .pack-item.pack-has-quantity {grid-template-columns:minmax(75px,1fr) 48px 48px 69px;gap:4px;padding:6px 4px}
}

.pack-builder-summary #npMode {font-size:11px;font-weight:500;line-height:1.35}
/* V4 · Acceso compartido y estado de sincronización */
.cloud-access {position:fixed;z-index:9999;inset:0;background:var(--bg);display:grid;place-items:center;padding:24px}
.cloud-access[hidden],.cloud-tools[hidden],.cloud-message[hidden],.cloud-warning[hidden]{display:none!important}
.cloud-login{width:min(440px,100%);background:var(--card);border:1px solid var(--bd);border-radius:24px;box-shadow:0 18px 65px #0002;padding:32px;display:grid;gap:16px}
.cloud-login h2{font-size:26px;margin:0;color:var(--tx)}
.cloud-login p{margin:0;color:var(--mu);font-weight:400}
.cloud-login label{display:grid;gap:8px}
.cloud-login button{min-height:48px}
.cloud-login #cloud-login-error{color:#b91c1c;min-height:1em}
.cloud-logo{width:58px;height:58px;display:grid;place-items:center}
.cloud-logo .brand-stack{width:58px;height:58px}
.cloud-logo img{border-radius:16px;box-shadow:0 10px 24px #0002}
.cloud-tools{position:fixed;right:12px;bottom:12px;z-index:80;display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--bd);border-radius:999px;padding:6px 12px;box-shadow:0 3px 14px #0002}
.cloud-tools button,.cloud-message button,.cloud-warning button{cursor:pointer;border:0;border-radius:9px;background:var(--pr);color:var(--onpr);padding:5px 10px}
.cloud-status{font-size:12px;color:var(--tx)}.cloud-status.error{color:#b91c1c}
.cloud-message,.cloud-warning{position:fixed;z-index:90;bottom:60px;left:12px;right:12px;padding:12px 16px;border:1px solid var(--bd);background:var(--card);border-radius:12px;font-size:13px;box-shadow:0 4px 30px #0002}
.cloud-warning{bottom:108px;color:#b91c1c}
@media(max-width:700px){.cloud-tools{bottom:85px}.cloud-message{bottom:133px}.cloud-warning{bottom:188px}}

/* Mensajes de error de conexión visibles incluso antes de iniciar sesión. */
.cloud-setup-help {background:var(--bg);border:1px solid var(--bd);padding:12px;border-radius:12px}
.cloud-login button:disabled {opacity:.55;cursor:wait}