/* Sistema de proporciones: módulo de 8 px y escala tipográfica 1.25 (tercera mayor),
   como en las demás piezas de ARXEUM. */
:root {
  --m: 8px;
  --t-1: 0.8rem;   /* 12.8 */
  --t0: 1rem;      /* 16 */
  --t1: 1.25rem;   /* 20 */
  --t2: 1.5625rem; /* 25 */
  --t3: 1.953rem;  /* 31.25 */

  --basalto: #1e1d1b;
  --cal: #f1eee7;
  --bronce: #a07a45;
  --concreto: #a7a39c;
  --acento: #a9482a; /* color propio de Resident's Helper */

  --fondo: var(--cal);
  --tinta: var(--basalto);
  --campo: #fbfaf6;
  --linea: #d6d2c9;
  --tenue: #7d7a74;
  --titulo: 'EB Garamond', Georgia, serif;
  --texto: 'Archivo', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #1e1d1b; --tinta: #f1eee7; --campo: #2a2926; --linea: #3d3b37; --tenue: #a7a39c;
  }
  :root:not([data-theme="light"]) .por img { filter: invert(1); }
}
:root[data-theme="dark"] { --fondo: #1e1d1b; --tinta: #f1eee7; --campo: #2a2926; --linea: #3d3b37; --tenue: #a7a39c; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font: 400 var(--t0)/1.5 var(--texto);
  padding-bottom: env(safe-area-inset-bottom);
}
button { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

/* ---------- Portada: réplica de la composición de la RH1 ---------- */
.portada {
  min-height: 100vh; min-height: 100dvh; background: var(--acento); color: var(--cal);
  padding: calc(var(--m) * 7 + env(safe-area-inset-top)) calc(var(--m) * 2.5) calc(var(--m) * 4);
  display: flex; flex-direction: column;
}
.portada > * { width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; }
.palabra { display: block; fill: currentColor; height: auto; }
.cabeza { margin: 0; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: calc(var(--m) * 2.5); }
.cabeza .residents { width: 100%; }
.cabeza .monograma { width: calc(var(--m) * 9); height: calc(var(--m) * 9); color: var(--cal); transform: translateY(-14%); }

.modulos { display: grid; margin-top: calc(var(--m) * 6); }
.modulos a {
  display: grid; grid-template-columns: 1fr calc(var(--m) * 13) calc(var(--m) * 2.5); align-items: center; gap: calc(var(--m) * 1.5);
  padding: calc(var(--m) * 2.5) 0; text-decoration: none; position: relative;
}
.modulos a + a::before {
  content: ''; position: absolute; top: 0; left: 12%; right: 22%; border-top: 1px solid rgba(30, 29, 27, .35);
}
.titulo-mod { display: block; height: calc(var(--m) * 2.4); width: auto; fill: currentColor; margin-bottom: var(--m); }
.desc { display: block; font-size: 0.9rem; line-height: 1.35; padding-left: calc(var(--m) * 1.5); opacity: .95; }
.iso { width: 100%; height: auto; max-height: calc(var(--m) * 12); }
.iso path { stroke: var(--basalto); stroke-width: 1; fill: none; stroke-linejoin: round; }
.iso .b { fill: #fff; }
.iso .s { fill: #d9d5cc; }
.iso .s2 { fill: #bdb8ae; }
.iso .j { stroke-width: .45; }
.iso .e { stroke-width: 1.2; }
.iso .v { stroke: #fff; stroke-width: 2.6; }
.flecha { width: 100%; fill: var(--cal); transition: transform .15s; }
.modulos a:active .flecha, .modulos a:hover .flecha { transform: translateX(3px); }

.cierre { margin-top: auto; padding-top: calc(var(--m) * 6); display: grid; justify-items: end; gap: calc(var(--m) * 1.5); }
.cierre .helper { width: 62%; }
.cierre .por {
  margin: 0; font-size: var(--t-1); letter-spacing: .14em; text-transform: uppercase;
  display: flex; gap: var(--m); align-items: center;
}
.cierre .por img { height: 9px; filter: invert(1) brightness(1.1); }
.acerca-link { font-size: var(--t-1); color: var(--cal); opacity: .8; }

/* Banda de Acerca de */
.banda {
  background: var(--acento); color: var(--cal); text-align: center;
  padding: calc(var(--m) * 4 + env(safe-area-inset-top)) calc(var(--m) * 2) calc(var(--m) * 3);
}
.monograma { width: calc(var(--m) * 7); height: calc(var(--m) * 7); display: block; margin: 0 auto calc(var(--m) * 2); color: var(--cal); }
.banda h1 { font: 600 var(--t3)/1 var(--titulo); margin: 0; }
.por {
  margin: calc(var(--m) * 1.5) 0 0; font-size: var(--t-1); letter-spacing: .14em; text-transform: uppercase;
  display: flex; gap: var(--m); justify-content: center; align-items: center;
}
.banda .por img { height: 9px; filter: invert(1) brightness(1.1); }

/* ---------- Cabecera de módulos ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: calc(var(--m) * 6) 1fr;
  background: var(--fondo); border-bottom: 1px solid var(--linea);
  padding-top: env(safe-area-inset-top);
}
.inicio { display: grid; place-items: center; background: var(--acento); color: var(--cal); }
.inicio svg { width: calc(var(--m) * 3); height: calc(var(--m) * 3); }
.pestanas { display: grid; grid-template-columns: repeat(4, 1fr); }
.pestanas a {
  text-align: center; text-decoration: none; padding: calc(var(--m) * 1.75) 2px calc(var(--m) * 1.5);
  font-weight: 500; font-size: 0.72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tenue); border-bottom: 2px solid transparent;
}
.pestanas a[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--acento); }

main { max-width: 560px; margin: 0 auto; padding: 0 calc(var(--m) * 2); }
.panel { padding: calc(var(--m) * 2) 0 var(--m); }
h2 {
  font: 600 var(--t1)/1.2 var(--titulo); margin: calc(var(--m) * 4) 0 calc(var(--m) * 1.5);
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--m);
}
h2 small { font: 500 var(--t-1) var(--texto); color: var(--acento); letter-spacing: .04em; }

/* ---------- Dibujos con cotas ---------- */
.dibujo { margin: calc(var(--m) * 2) 0 0; background: var(--campo); border: 1px solid var(--linea); border-radius: 4px; padding: var(--m); }
.dibujo svg { width: 100%; height: auto; display: block; }
.dibujo path, .dibujo ellipse { fill: none; stroke-linejoin: round; }
.dibujo .pieza { stroke: var(--tinta); stroke-width: 1.6; }
.dibujo .oculta { stroke-dasharray: 4 4; stroke-width: 1; }
.dibujo .aparejo { stroke: var(--linea); stroke-width: 1; }
.dibujo .vano { stroke: var(--tinta); stroke-width: 1.2; stroke-dasharray: 5 3; fill: var(--campo); }
.dibujo .capa { fill: var(--acento); fill-opacity: .18; stroke: var(--acento); stroke-width: 1; }
.dibujo .cota { color: var(--tenue); transition: color .15s; }
.dibujo .cota path { stroke: currentColor; stroke-width: 1; }
.dibujo .cota .tenue { stroke-dasharray: 2 2; }
.dibujo .cota .punto { fill: currentColor; stroke: none; }
.dibujo text { fill: currentColor; font: italic 500 13px var(--titulo); text-anchor: middle; }
.dibujo text.izq { text-anchor: end; }
.dibujo text.grande { font-size: 18px; }
.dibujo .tenue-txt { fill: var(--tenue); font-size: 11px; }
.dibujo .cota.activa { color: var(--acento); }
.dibujo .cota.activa path { stroke-width: 2; }
.dibujo .cota.activa text { font-weight: 600; }

/* ---------- Opciones ---------- */
.opciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--m); }
.opciones.dos { grid-template-columns: 1fr 1fr; }
.opciones button {
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--m) / 2);
  padding: calc(var(--m) * 1.25) calc(var(--m) * 0.75); border: 1px solid var(--linea); border-radius: 4px;
  background: var(--campo); cursor: pointer; font-size: 0.9rem; text-align: center;
}
.opciones button[aria-pressed="true"] { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.opciones.resistencia button { align-items: flex-start; text-align: left; padding: calc(var(--m) * 1.25) calc(var(--m) * 1.5); }
.opciones small { color: var(--tenue); font-size: 0.74rem; line-height: 1.3; }
.opciones svg { width: 56px; height: 36px; }
.opciones svg path, .opciones svg ellipse, .tarjetas svg path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.tarjetas svg .relleno { fill: var(--acento); fill-opacity: .25; stroke: none; }
.opciones button:disabled { opacity: .35; cursor: not-allowed; }

/* ---------- Campos ---------- */
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--m) calc(var(--m) * 1.5); margin-top: calc(var(--m) * 2); }
.campos label {
  display: grid; grid-template-columns: 1fr auto; align-items: end;
  border-bottom: 1px solid var(--linea); padding: calc(var(--m) * 0.75) 0 calc(var(--m) / 2);
}
.campos label.ancho { grid-column: span 2; }
.campos span, .marca span, .bulto > span {
  grid-column: span 2; font-size: 0.74rem; color: var(--tenue); text-transform: uppercase; letter-spacing: .08em;
}
.campos input {
  min-width: 0; width: 100%; border: 0; background: none; color: var(--tinta);
  font: 500 var(--t1) var(--texto); padding: 2px 0; outline: none;
}
.campos label:focus-within { border-bottom-color: var(--acento); }
.campos i { font-style: normal; color: var(--tenue); font-size: 0.85rem; padding-bottom: 5px; }

.marca { display: grid; gap: calc(var(--m) / 2); margin-top: calc(var(--m) * 2); }
.marca select {
  font: 500 var(--t0) var(--texto); color: var(--tinta); background: var(--campo);
  border: 1px solid var(--linea); border-radius: 4px; padding: calc(var(--m) * 1.25) calc(var(--m) * 1.5);
}
.bulto { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: calc(var(--m) * 1.5); margin: calc(var(--m) * 1.5) 0 var(--m); }
.bulto > span { grid-column: auto; }
.bulto .opciones button { padding: var(--m) calc(var(--m) * 0.75); }

.vanos, .renglones { display: grid; gap: var(--m); margin-top: var(--m); }
.vano-fila, .renglon { display: grid; grid-template-columns: 1fr 1fr auto; gap: calc(var(--m) * 1.5); align-items: end; }
.renglon { grid-template-columns: 1.5fr 1fr 1fr auto; }
.vano-fila label, .renglon label {
  display: grid; grid-template-columns: 1fr auto; align-items: end; min-width: 0;
  border-bottom: 1px solid var(--linea); padding: calc(var(--m) * 0.75) 0 calc(var(--m) / 2);
}
.vano-fila label:focus-within, .renglon label:focus-within { border-bottom-color: var(--acento); }
.vano-fila span, .renglon span { grid-column: span 2; font-size: 0.7rem; color: var(--tenue); text-transform: uppercase; letter-spacing: .06em; }
.vano-fila input, .renglon input, .renglon select {
  min-width: 0; width: 100%; border: 0; background: none; color: var(--tinta); font: 500 var(--t0) var(--texto); padding: 2px 0; outline: none;
}
.renglon select { grid-column: span 2; }
.vano-fila i, .renglon i { font-style: normal; color: var(--tenue); font-size: 0.8rem; padding: 0 0 4px 4px; }
.quitar { border: 0; background: none; color: var(--tenue); font-size: var(--t1); cursor: pointer; padding: 0 calc(var(--m) / 2); }
.agregar {
  margin-top: var(--m); border: 1px dashed var(--linea); background: none; border-radius: 4px;
  padding: var(--m) calc(var(--m) * 1.5); color: var(--acento); font-weight: 500; cursor: pointer; font-size: 0.9rem;
}
.traer { margin-top: calc(var(--m) * 2); padding: calc(var(--m) * 1.5); background: var(--campo); border: 1px solid var(--linea); border-radius: 4px; }
.traer p { margin: 0; font-size: 0.9rem; }
.traer .botones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--m); }
.traer .agregar:disabled { color: var(--tenue); cursor: not-allowed; }

/* ---------- Resultados ---------- */
.total {
  display: flex; align-items: baseline; gap: var(--m); margin-top: calc(var(--m) * 2.5);
  padding: calc(var(--m) * 1.75) calc(var(--m) * 2); background: var(--tinta); color: var(--fondo); border-radius: 4px;
}
.total span { flex: 1; font-size: var(--t-1); text-transform: uppercase; letter-spacing: .12em; }
.total output { font: 600 var(--t3) var(--titulo); }

.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--m); margin-top: calc(var(--m) * 2.5); }
.cifras.dos { grid-template-columns: 1fr 1fr; }
.cifras div { background: var(--tinta); color: var(--fondo); border-radius: 4px; padding: calc(var(--m) * 1.5) calc(var(--m) * 1.25); }
.cifras output { display: block; font: 600 var(--t2) var(--titulo); }
.cifras span { font-size: 0.72rem; letter-spacing: .04em; }

.resultado { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin-top: var(--m); }
.resultado th, .resultado td { padding: calc(var(--m) * 1.25) calc(var(--m) / 2); border-bottom: 1px solid var(--linea); text-align: right; font-size: 0.92rem; }
.resultado thead th { font-weight: 500; font-size: 0.72rem; color: var(--tenue); text-transform: uppercase; letter-spacing: .08em; }
.resultado tbody th, .resultado tfoot th { text-align: left; font-weight: 500; }
.resultado tfoot td, .resultado tfoot th { font-weight: 600; border-bottom: 0; }
.resultado .pedir { font-weight: 600; }
.nota { font-size: var(--t-1); color: var(--tenue); margin: var(--m) 0 0; }
.aviso { font-size: var(--t-1); color: var(--tenue); margin: 0; padding: var(--m) calc(var(--m) * 1.5); border-left: 3px solid var(--acento); background: var(--campo); }
.marca + .aviso { margin-top: var(--m); }
.tabla-ref { margin-top: calc(var(--m) * 4); }
.tabla-ref summary { font: 600 var(--t0) var(--titulo); cursor: pointer; color: var(--acento); }

/* ---------- Acerca de ---------- */
.texto { max-width: 560px; margin: 0 auto; padding: calc(var(--m) * 3) 0 calc(var(--m) * 5); }
.texto .lema { font: 500 var(--t1)/1.3 var(--titulo); text-align: center; margin: calc(var(--m) * 3) 0; }
.enlaces { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--m); text-align: center; }
.enlaces a { color: var(--acento); font-weight: 500; }
.version { color: var(--tenue); font-size: var(--t-1); margin-top: calc(var(--m) * 3); }
.volver { display: inline-block; margin-top: var(--m); color: var(--acento); text-decoration: none; font-weight: 500; }

/* ---------- Pie ---------- */
.pie { max-width: 560px; margin: calc(var(--m) * 3) auto 0; padding: 0 calc(var(--m) * 2) calc(var(--m) * 3.5); text-align: center; }
.compartir {
  width: 100%; padding: calc(var(--m) * 1.75); border: 0; border-radius: 4px;
  background: var(--acento); color: var(--cal); font-weight: 500; letter-spacing: .06em; cursor: pointer;
}
.pie p { font-size: var(--t-1); color: var(--tenue); margin: calc(var(--m) * 2) 0 0; }
#acerca .banda { margin: 0 calc(var(--m) * -2); }
#acerca .version { text-align: center; margin-bottom: var(--m); }
.resultado td.vacio { text-align: left; color: var(--tenue); font-size: var(--t-1); }
.marca select { width: 100%; }

.pieza-fila { display: grid; grid-template-columns: 1fr calc(var(--m) * 14); gap: calc(var(--m) * 1.5); align-items: end; }
.pieza-fila .marca { margin-top: 0; }
.mini { width: 100%; height: auto; overflow: visible; }
.mini path { fill: none; stroke-linejoin: round; }
.mini .pieza { stroke: var(--tinta); stroke-width: 1.4; }
.mini .cota { color: var(--tenue); transition: color .15s; }
.mini .cota path { stroke: currentColor; stroke-width: 1; }
.mini text { fill: currentColor; font: italic 500 12px var(--titulo); text-anchor: middle; }
.mini text.izq { text-anchor: end; }
.mini .cota.activa { color: var(--acento); }
.mini .cota.activa path { stroke-width: 2; }

/* ---------- Reporte ---------- */
.acciones { display: grid; grid-template-columns: 2fr 1fr; gap: var(--m); }
.reportar {
  padding: calc(var(--m) * 1.75); border: 1px solid var(--acento); border-radius: 4px; background: none;
  color: var(--acento); font-weight: 500; letter-spacing: .06em; cursor: pointer;
}
/* Con el reporte abierto solo se ve la hoja (el <svg> del monograma se queda: lo usa la hoja). */
body.con-reporte > :not(#reporte):not(svg) { display: none !important; }
.reporte { max-width: 640px; margin: 0 auto; padding: calc(var(--m) * 2); }
.rp-barra { display: grid; grid-template-columns: auto 1fr; gap: var(--m); margin-bottom: calc(var(--m) * 2); }
.rp-volver { border: 0; background: none; color: var(--acento); font-weight: 500; cursor: pointer; padding: 0 var(--m) 0 0; }
.rp-imprimir { border: 0; border-radius: 4px; background: var(--acento); color: var(--cal); font-weight: 500; letter-spacing: .04em; padding: calc(var(--m) * 1.5); cursor: pointer; }

/* La hoja siempre es papel claro, también en modo oscuro. */
.hoja {
  --tinta: var(--basalto); --tenue: #6b6862; --linea: #d6d2c9;
  background: #fff; color: var(--tinta); border-radius: 4px; padding: calc(var(--m) * 2.5) calc(var(--m) * 2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12); font-size: 0.9rem;
}
.rp-cabeza {
  display: flex; align-items: center; gap: calc(var(--m) * 1.25); margin: calc(var(--m) * -2.5) calc(var(--m) * -2) 0;
  padding: calc(var(--m) * 1.5) calc(var(--m) * 2); background: var(--acento); color: var(--cal); border-radius: 4px 4px 0 0;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rp-cabeza .monograma { width: 32px; height: 32px; flex: none; margin: 0; }
.rp-cabeza p { margin: 0; font: 600 var(--t1)/1.2 var(--titulo); }
.rp-cabeza span { font: 500 var(--t-1) var(--texto); letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.rp-meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--m); margin-top: calc(var(--m) * 2); border-bottom: 2px solid var(--acento); }
.rp-meta h1 { margin: 0; font: 600 var(--t2) var(--titulo); }
.rp-meta p { margin: 0; color: var(--tenue); font-variant-numeric: tabular-nums; }
.rp-obra { display: grid; gap: var(--m); margin-top: calc(var(--m) * 1.5); }
.rp-obra label { display: grid; grid-template-columns: 6.5em 1fr; align-items: baseline; border-bottom: 1px solid var(--linea); padding-bottom: calc(var(--m) / 2); }
.rp-obra span, .hoja h2 { font: 500 0.72rem var(--texto); color: var(--tenue); text-transform: uppercase; letter-spacing: .08em; }
.rp-obra input { min-width: 0; border: 0; background: none; color: var(--tinta); font: 500 var(--t0) var(--texto); padding: 2px 0; outline: none; }
.rp-obra label:focus-within { border-bottom-color: var(--acento); }
.rp-obra output { display: none; font-weight: 500; }
.hoja h2 { margin: calc(var(--m) * 2.5) 0 var(--m); color: var(--acento); }
.hoja h3 { margin: calc(var(--m) * 1.5) 0 0; font: 600 var(--t0) var(--titulo); }
.rp-datos, .rp-tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rp-datos th, .rp-datos td, .rp-tabla th, .rp-tabla td { padding: calc(var(--m) * 0.6) calc(var(--m) / 2); border-bottom: 1px solid var(--linea); text-align: right; }
.rp-datos th, .rp-tabla tbody th, .rp-tabla tfoot th { text-align: left; font-weight: 500; }
.rp-datos th { color: var(--tenue); font-weight: 400; }
.rp-tabla thead th { font-weight: 500; font-size: 0.7rem; color: var(--tenue); text-transform: uppercase; letter-spacing: .06em; }
.rp-tabla tfoot th, .rp-tabla tfoot td { font-weight: 600; border-bottom: 0; }
.rp-tabla td:last-child { font-weight: 600; }
.rp-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5em, 1fr)); gap: var(--m); margin: 0; }
.rp-cifras div { border: 1px solid var(--linea); border-radius: 4px; padding: var(--m); }
.rp-cifras dt { font-size: 0.72rem; color: var(--tenue); }
.rp-cifras dd { margin: 0; font: 600 var(--t1) var(--titulo); }
.rp-nota { margin: calc(var(--m) / 2) 0 0; font-size: var(--t-1); color: var(--tenue); }
.rp-compra { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tinta); }
.rp-compra li { display: flex; justify-content: space-between; gap: var(--m); padding: var(--m) calc(var(--m) / 2); border-bottom: 1px solid var(--linea); }
.rp-aviso { margin: calc(var(--m) * 1.5) 0 0; padding: var(--m) calc(var(--m) * 1.5); border-left: 3px solid var(--acento); background: #f6f3ee; font-size: var(--t-1); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rp-pie { margin-top: calc(var(--m) * 3); padding-top: var(--m); border-top: 1px solid var(--linea); color: var(--tenue); font-size: var(--t-1); text-align: center; }

@media print {
  @page { margin: 12mm; }
  body { background: #fff; padding: 0; }
  body.con-reporte > :not(#reporte):not(svg) { display: none !important; }
  .reporte { max-width: none; padding: 0; }
  .rp-barra { display: none; }
  /* Margen interior además del de página: algunos teléfonos imprimen sin margen de página. */
  .hoja { box-shadow: none; border-radius: 0; padding: 0 5mm 5mm; font-size: 10.5pt; }
  .rp-cabeza { margin: 0 -5mm; padding-left: 5mm; padding-right: 5mm; border-radius: 0; }
  .rp-obra input { display: none; }
  .rp-obra output { display: block; }
  /* Obra y Elemento son opcionales: si están vacíos no se imprime el renglón. */
  .rp-obra label:has(output:empty) { display: none; }
  .rp-tabla, .rp-compra li, .rp-cifras div { break-inside: avoid; }
  .hoja h2, .hoja h3 { break-after: avoid; }
}