/* =========================================================================
   Sistema de diseño — blanco y gris frío, un acento grafito, mucho aire.
   Retinte de septiembre: la paleta cálida quedaba bien en papel pero no
   leía "premium" en pantalla. El grafito hace un solo trabajo (foco,
   selección, enlaces) y deja que el blanco y el gris carguen el resto.
   ========================================================================= */

:root {
  /* Superficies — blanco y gris frío, sin tinte cálido */
  --bg:            #F7F7F8;
  --surface:       #FFFFFF;
  --surface-2:     #FAFAFB;
  --surface-3:     #EFEFF1;

  /* Tinta */
  --ink:           #16171A;
  --ink-2:         #45474D;
  --ink-3:         #75777E;
  --ink-4:         #A7A9AF;

  /* Acento grafito: frío, casi neutro, se usa con moderación */
  --accent:        #2E323A;
  --accent-2:      #4A4E58;
  --accent-soft:   #EFEFF2;
  --accent-line:   #D6D7DB;

  /* Semánticos: son el semáforo de cobro, no decoración. Se mantienen
     reconocibles como ámbar/verde/rojo aunque el resto se enfríe. */
  --ok:            #3D6B52;
  --ok-soft:       #E7EEEA;
  --warn:          #8A6A2E;
  --warn-soft:     #F3ECE0;
  --danger:        #8C4A45;
  --danger-soft:   #F2E7E5;

  /* Líneas */
  --line:          #E7E7EA;
  --line-2:        #D4D5D9;

  /* Espacio */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* Radios: geometría casi recta, apenas suavizada */
  --r1: 3px; --r2: 5px; --r3: 7px; --r4: 9px; --r-pill: 6px;

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --shadow-1: 0 1px 2px rgba(15, 16, 19, .04);
  --shadow-2: 0 4px 16px -6px rgba(15, 16, 19, .12);
  --shadow-3: 0 24px 60px -20px rgba(15, 16, 19, .24);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --topbar-h: 72px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  font-feature-settings: 'cv05' 1, 'ss01' 1, 'tnum' 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; letter-spacing: -.01em; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-underline-offset: 3px; }

::selection { background: var(--accent-soft); color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r1);
}

/* ======================================================== estructura */

.shell { min-height: 100dvh; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--s5);
  padding: 0 var(--s6);
  background: rgba(247, 247, 248, .86);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: var(--s3); text-decoration: none; color: inherit; }

.brand__mark {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  border-radius: var(--r1);
  font-family: var(--serif); font-size: 13px; color: var(--accent);
}

.brand__name { font-family: var(--serif); font-size: 17px; line-height: 1.15; white-space: nowrap; }
.brand__sub  { font-size: 10.5px; color: var(--ink-4); letter-spacing: .09em; text-transform: uppercase; }

.nav { display: flex; gap: var(--s1); margin-left: auto; }

.nav__item {
  appearance: none; border: 0; background: transparent;
  padding: 9px 18px; border-radius: var(--r-pill);
  color: var(--ink-3); font-size: 14px; font-weight: 500;
  cursor: pointer; transition: background .18s var(--ease), color .18s var(--ease);
  white-space: nowrap;
}
.nav__item:hover { background: var(--surface-3); color: var(--ink); }
.nav__item[aria-current='page'] { background: var(--ink); color: #fff; }

.main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: var(--s8) var(--s6) var(--s9); }
.view { animation: entrar .38s var(--ease) both; }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ======================================================== tipografía */

.eyebrow {
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 600;
}

.display   { font-family: var(--serif); font-size: clamp(30px, 4.2vw, 42px); line-height: 1.1; letter-spacing: -.022em; }
.title     { font-family: var(--serif); font-size: 25px; line-height: 1.2; letter-spacing: -.015em; }
.subtitle  { font-family: var(--serif); font-size: 19px; line-height: 1.3; }
.lead      { font-size: 16px; color: var(--ink-2); max-width: 62ch; }
.muted     { color: var(--ink-3); }
.small     { font-size: 13px; }
.tiny      { font-size: 11.5px; color: var(--ink-4); }
.num       { font-variant-numeric: tabular-nums; }

/* ======================================================== secciones */

.section { margin-bottom: var(--s8); }
.section__head { display: flex; align-items: flex-end; gap: var(--s4); margin-bottom: var(--s5); flex-wrap: wrap; }
.section__head > .grow { flex: 1; min-width: 0; }
.rule { height: 1px; background: var(--line); border: 0; margin: var(--s6) 0; }

.stack   { display: flex; flex-direction: column; }
.stack-2 { gap: var(--s2); } .stack-3 { gap: var(--s3); }
.stack-4 { gap: var(--s4); } .stack-5 { gap: var(--s5); } .stack-6 { gap: var(--s6); }
.row     { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.row--tight { gap: var(--s2); }
.spacer  { flex: 1; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ======================================================== tarjetas */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  padding: var(--s5);
}
.card--flat  { background: var(--surface-2); }
.card--quiet { border-style: dashed; background: transparent; }
.card--pad-lg { padding: var(--s6); }

/* ======================================================== botones */

.btn {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 11px 20px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  font-size: 14px; font-weight: 500; white-space: nowrap;
  transition: background .16s var(--ease), border-color .16s var(--ease),
              transform .16s var(--ease), box-shadow .16s var(--ease), color .16s var(--ease);
}
.btn:hover  { background: var(--surface-3); border-color: var(--ink-4); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .4; pointer-events: none; }

.btn--primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--primary:hover { background: #2E3036; border-color: #2E3036; box-shadow: var(--shadow-2); }

.btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-2); border-color: var(--accent-2); }

.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-3); }
.btn--ghost:hover { background: var(--surface-3); color: var(--ink); }

.btn--danger { color: var(--danger); border-color: transparent; background: transparent; }
.btn--danger:hover { background: var(--danger-soft); border-color: transparent; }

.btn--sm { padding: 7px 14px; font-size: 13px; }
.btn--lg { padding: 15px 30px; font-size: 15px; }
.btn--block { width: 100%; }
.btn--icon { padding: 8px; width: 34px; height: 34px; border-radius: var(--r-pill); }

/* ======================================================== pastillas */

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--ink-2);
  font-size: 12px; font-weight: 500; line-height: 1.5; white-space: nowrap;
  border: 1px solid transparent;
}
.pill--accent { background: var(--accent-soft); color: var(--accent); }
.pill--ok     { background: var(--ok-soft);     color: var(--ok); }
.pill--warn   { background: var(--warn-soft);   color: var(--warn); }
.pill--danger { background: var(--danger-soft); color: var(--danger); }
.pill--outline{ background: transparent; border-color: var(--line-2); color: var(--ink-3); }
.pill--sm     { padding: 2px 9px; font-size: 11px; }

.pill-toggle {
  cursor: pointer; user-select: none;
  background: transparent; border: 1px solid var(--line-2); color: var(--ink-3);
  transition: all .16s var(--ease);
}
.pill-toggle:hover { border-color: var(--ink-4); color: var(--ink); }
.pill-toggle[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: #fff; }

.pill-group { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ======================================================== disclosure (flecha ↓) */

.disc {
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface);
  overflow: hidden;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.disc[open] { border-color: var(--line-2); box-shadow: var(--shadow-1); }
.disc + .disc { margin-top: var(--s2); }

.disc__head {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: var(--s3);
  padding: 14px var(--s4);
  font-weight: 500; font-size: 14px;
  transition: background .16s var(--ease);
}
.disc__head::-webkit-details-marker { display: none; }
.disc__head:hover { background: var(--surface-2); }

.disc__chev {
  margin-left: auto; flex: none;
  width: 22px; height: 22px; display: grid; place-items: center;
  color: var(--ink-4);
  transition: transform .26s var(--ease), color .18s var(--ease);
}
.disc[open] .disc__chev { transform: rotate(180deg); color: var(--accent); }
.disc__head:hover .disc__chev { color: var(--accent); }

.disc__body {
  padding: 0 var(--s4) var(--s4);
  color: var(--ink-2); font-size: 14px;
  animation: abrir .26s var(--ease) both;
}
@keyframes abrir { from { opacity: 0; transform: translateY(-4px); } }

.disc--plain { border: 0; background: transparent; }
.disc--plain .disc__head { padding: 10px 0; }
.disc--plain .disc__body { padding: 0 0 var(--s4); }

/* Botón-explicación: la acción y su explicación en un solo bloque. */
.action {
  border: 1px solid var(--line); border-radius: var(--r3);
  background: var(--surface); overflow: hidden;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.action:hover { border-color: var(--accent-line); box-shadow: var(--shadow-2); }
.action[open] { border-color: var(--accent-line); }

.action__head {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s5);
}
.action__head::-webkit-details-marker { display: none; }

.action__icon {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r2);
  background: var(--accent-soft); color: var(--accent);
}
.action__text { flex: 1; min-width: 0; }
.action__title { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
.action__hint  { display: block; font-size: 12.5px; color: var(--ink-4); margin-top: 1px; line-height: 1.4; }
.action__body  { padding: 0 var(--s5) var(--s5); }
.action__body > .rule:first-child { margin-top: 0; }

/* ======================================================== campos */

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label { font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.field__hint  { font-size: 11.5px; color: var(--ink-4); }

.input, .select, .textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r2);
  background: var(--surface);
  font-size: 14.5px;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-4); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.textarea { resize: vertical; min-height: 78px; line-height: 1.55; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%234A4E58' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 38px;
}

.input--num { text-align: right; font-variant-numeric: tabular-nums; }

.input-group { display: flex; align-items: stretch; }
.input-group .input { border-radius: var(--r2) 0 0 var(--r2); border-right: 0; }
.input-group__suffix {
  display: grid; place-items: center; padding: 0 13px;
  border: 1px solid var(--line-2); border-radius: 0 var(--r2) var(--r2) 0;
  background: var(--surface-3); color: var(--ink-3);
  font-size: 13px; white-space: nowrap;
}

.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 7px 0; }
.check input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; flex: none; }
.check__text  { font-size: 14px; line-height: 1.45; }
.check__hint  { font-size: 11.5px; color: var(--ink-4); }

/* ======================================================== buscador */

.search { position: relative; }
.search__icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--ink-4); pointer-events: none; }
.search__input {
  width: 100%; padding: 17px 52px 17px 50px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: var(--surface); font-size: 16px;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.search__input::placeholder { color: var(--ink-4); }
.search__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.search__clear { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }

/* ======================================================== resultados */

.res { border: 1px solid var(--line); border-radius: var(--r3); background: var(--surface); overflow: hidden; }
.res__item {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s5);
  cursor: pointer; width: 100%; text-align: left;
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  transition: background .14s var(--ease);
}
.res__item:last-child { border-bottom: 0; }
.res__item:hover, .res__item.is-active { background: var(--surface-2); }
.res__item:hover .res__name { color: var(--accent); }

.res__main  { flex: 1; min-width: 0; }
.res__name  { font-size: 14.5px; font-weight: 500; }
.res__meta  { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.res__price { text-align: right; flex: none; }
.res__amount{ font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.res__unit  { font-size: 11px; color: var(--ink-4); }

.res__empty { padding: var(--s7) var(--s5); text-align: center; color: var(--ink-3); }

/* ======================================================== partidas */

.linea {
  border: 1px solid var(--line); border-radius: var(--r3);
  background: var(--surface); overflow: hidden;
}
.linea + .linea { margin-top: var(--s3); }
.linea__head { display: flex; align-items: flex-start; gap: var(--s4); padding: var(--s5); }
.linea__idx {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-pill); background: var(--surface-3);
  font-size: 12px; font-weight: 600; color: var(--ink-3);
}
.linea__body { padding: 0 var(--s5) var(--s5); border-top: 1px solid var(--line); margin-top: 0; padding-top: var(--s5); }
.linea__total { text-align: right; flex: none; }

.desglose { background: var(--surface-2); border-radius: var(--r2); padding: var(--s4); font-size: 13px; }
.desglose__row { display: flex; align-items: baseline; gap: var(--s3); padding: 5px 0; }
.desglose__row + .desglose__row { border-top: 1px dashed var(--line); }
.desglose__label { color: var(--ink-3); flex: 1; min-width: 0; }
.desglose__val { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.desglose__row--total { border-top: 1px solid var(--line-2) !important; margin-top: 4px; padding-top: 9px; font-weight: 600; }

/* ======================================================== resumen */

.resumen {
  position: sticky; top: calc(var(--topbar-h) + var(--s5));
  border: 1px solid var(--line-2); border-radius: var(--r3);
  background: var(--surface); overflow: hidden;
}
.resumen__body { padding: var(--s5); }
.resumen__row { display: flex; justify-content: space-between; gap: var(--s3); padding: 7px 0; font-size: 14px; }
.resumen__row .k { color: var(--ink-3); }
.resumen__row .v { font-variant-numeric: tabular-nums; font-weight: 500; }
.resumen__total {
  background: var(--ink); color: #fff;
  padding: var(--s4) var(--s5);
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3);
}
.resumen__total .k { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .72; }
.resumen__total .v { font-size: 22px; font-family: var(--serif); font-variant-numeric: tabular-nums; }

.margen-bar { height: 5px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.margen-bar__fill { height: 100%; border-radius: 2px; transition: width .5s var(--ease), background .3s var(--ease); }

/* ======================================================== kpi */

.kpi { border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); padding: var(--s4); }
.kpi__label { font-size: 11.5px; color: var(--ink-4); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.kpi__value { font-family: var(--serif); font-size: 25px; line-height: 1.25; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi__note  { font-size: 12px; color: var(--ink-3); }

/* ======================================================== tabla */

.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla th {
  text-align: left; padding: 11px var(--s3);
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 600;
  border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
.tabla td { padding: 13px var(--s3); border-bottom: 1px solid var(--line); vertical-align: middle; }
.tabla tbody tr { transition: background .14s var(--ease); }
.tabla tbody tr:hover { background: var(--surface-2); }
.tabla .r { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r3); background: var(--surface); }
.tabla-wrap > .tabla { min-width: 780px; }

/* ======================================================== modal */

.modal-bg {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(15, 16, 19, .34);
  backdrop-filter: blur(3px);
  display: grid; place-items: start center;
  padding: var(--s6) var(--s4) var(--s8);
  overflow-y: auto;
  animation: fundir .2s var(--ease) both;
}
@keyframes fundir { from { opacity: 0; } }

.modal {
  width: min(100%, 700px);
  background: var(--surface);
  border-radius: var(--r4);
  box-shadow: var(--shadow-3);
  animation: subir .3s var(--ease) both;
}
.modal--ancho { width: min(100%, 980px); }
@keyframes subir { from { opacity: 0; transform: translateY(20px) scale(.985); } }

.modal__head {
  display: flex; align-items: flex-start; gap: var(--s4);
  padding: var(--s6) var(--s6) var(--s4);
  border-bottom: 1px solid var(--line);
}
.modal__body { padding: var(--s6); }
.modal__foot {
  display: flex; gap: var(--s3); justify-content: flex-end; align-items: center;
  padding: var(--s4) var(--s6) var(--s6);
  border-top: 1px solid var(--line); flex-wrap: wrap;
}

/* ======================================================== avisos */

.nota {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: 13px var(--s4);
  border-radius: var(--r2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-2);
}
.nota--accent { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.nota--warn   { background: var(--warn-soft);   border-color: #E2D8C2;            color: var(--warn); }
.nota--ok     { background: var(--ok-soft);     border-color: #CFDCD3;            color: var(--ok); }
.nota--danger { background: var(--danger-soft); border-color: #E4CCC8;            color: var(--danger); }
.nota svg { flex: none; margin-top: 2px; opacity: .75; }

.toast-zona { position: fixed; bottom: var(--s5); left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: var(--s2); align-items: center; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: var(--s3);
  padding: 13px 22px; border-radius: var(--r-pill);
  background: var(--ink); color: #fff; font-size: 14px;
  box-shadow: var(--shadow-3);
  animation: toast-in .3s var(--ease) both;
}
.toast--err { background: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }

/* ======================================================== vacío */

.vacio { text-align: center; padding: var(--s9) var(--s5); }
.vacio__icon {
  width: 56px; height: 56px; margin: 0 auto var(--s4);
  display: grid; place-items: center; border-radius: var(--r3);
  background: var(--surface-3); color: var(--ink-4);
}

/* ======================================================== ayuda */

.faq-cat { margin-bottom: var(--s7); }
.faq-cat__title { font-family: var(--serif); font-size: 21px; margin-bottom: var(--s4); }
.formula {
  font-family: var(--mono); font-size: 12.5px;
  background: var(--surface-3); border-radius: var(--r2);
  padding: var(--s4); margin: var(--s3) 0;
  color: var(--ink-2); line-height: 1.85; overflow-x: auto; white-space: pre;
}
.formula b { color: var(--accent); font-weight: 600; }

.paso { display: flex; gap: var(--s4); padding: var(--s3) 0; }
.paso__n {
  width: 24px; height: 24px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent);
  font-size: 11.5px; font-weight: 700;
}

/* ======================================================== layout cotizador */

.cotizador { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s6); align-items: start; }
@media (max-width: 1040px) { .cotizador { grid-template-columns: 1fr; } .resumen { position: static; } }

@media (max-width: 720px) {
  .topbar { height: auto; flex-direction: column; align-items: stretch; gap: var(--s3); padding: var(--s4); position: static; }
  .nav { margin-left: 0; overflow-x: auto; padding-bottom: 2px; }
  .js-tutorial { align-self: flex-start; }
  .main { padding: var(--s6) var(--s4) var(--s8); }
  .modal__head, .modal__body, .modal__foot { padding-left: var(--s4); padding-right: var(--s4); }
}

/* ======================================================== utilidades */

.hidden { display: none !important; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-0 { margin-top: 0; } .mt-3 { margin-top: var(--s3); } .mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); } .mt-6 { margin-top: var(--s6); }
.mb-0 { margin-bottom: 0; } .mb-3 { margin-bottom: var(--s3); } .mb-4 { margin-bottom: var(--s4); }
.mb-5 { margin-bottom: var(--s5); }
.text-r { text-align: right; } .text-c { text-align: center; }
.w-full { width: 100%; }

/* ======================================================== tutorial guiado */

.tour { position: fixed; inset: 0; z-index: 300; pointer-events: none; }

.tour__foco {
  position: fixed;
  border-radius: var(--r2);
  box-shadow: 0 0 0 9999px rgba(15, 16, 19, .58);
  border: 1.5px solid rgba(255, 255, 255, .9);
  transition: left .32s var(--ease), top .32s var(--ease),
              width .32s var(--ease), height .32s var(--ease), opacity .2s var(--ease);
  pointer-events: none;
}

.tour__globo {
  position: fixed;
  width: min(360px, calc(100vw - 28px));
  background: var(--surface);
  border-radius: var(--r3);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  pointer-events: auto;
  transition: left .32s var(--ease), top .32s var(--ease), opacity .22s var(--ease);
}

.tour__barra { height: 2px; background: var(--surface-3); }
.tour__barra-fill { height: 100%; background: var(--accent); transition: width .35s var(--ease); }

.tour__cuerpo { padding: var(--s5); }
.tour__titulo { font-family: var(--serif); font-size: 18px; line-height: 1.25; margin: 10px 0 0; }
.tour__texto  { font-size: 13.5px; color: var(--ink-2); margin-top: 8px; line-height: 1.6; }
.tour__pie    { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s5); }

.tour__x {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: var(--ink-4); padding: 2px; line-height: 0; border-radius: var(--r1);
}
.tour__x:hover { color: var(--ink); background: var(--surface-3); }

/* ======================================================== detalle táctil */

.btn, .pill-toggle, .res__item, .nav__item { -webkit-tap-highlight-color: transparent; }

.res__item:active { background: var(--surface-3); }
.pill-toggle:active { transform: scale(.97); }

.kpi__value, .resumen__total .v { transition: color .25s var(--ease); }

.linea { animation: linea-in .32s var(--ease) both; }
@keyframes linea-in { from { opacity: 0; transform: translateY(10px); } }

/* ======================================================== tablero de ahorro */

:root {
  /* Serie categórica validada: separación CVD 15.4, visión normal 17.2 */
  --dato-1: #155FA8;
  --dato-2: #B98216;
  --dato-3: #9C4530;
}

.hero-ahorro {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--s6); align-items: center;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r3); padding: var(--s6);
}
@media (max-width: 780px) { .hero-ahorro { grid-template-columns: 1fr; gap: var(--s5); } }

.hero-ahorro__cifra {
  font-family: var(--serif);
  font-size: clamp(38px, 6vw, 62px); line-height: 1; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums; margin-top: 8px;
}
.hero-ahorro__lado {
  display: grid; gap: var(--s4);
  border-left: 1px solid var(--line); padding-left: var(--s6);
}
@media (max-width: 780px) {
  .hero-ahorro__lado { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: var(--s5); }
}
.hero-ahorro__sub {
  font-family: var(--serif); font-size: 24px; line-height: 1.15;
  font-variant-numeric: tabular-nums; margin-top: 4px;
}

/* Barra de composición: 2 px de aire entre segmentos, extremos redondeados */
.barra-comp { display: flex; gap: 2px; height: 30px; }
.barra-comp__seg { border-radius: 2px; transition: opacity .16s var(--ease); }
.barra-comp__seg:first-child { border-radius: 4px 2px 2px 4px; }
.barra-comp__seg:last-child  { border-radius: 2px 4px 4px 2px; }
.barra-comp:hover .barra-comp__seg { opacity: .55; }
.barra-comp .barra-comp__seg:hover { opacity: 1; }

.leyenda { display: flex; flex-wrap: wrap; gap: var(--s5); }
.leyenda__item { display: flex; align-items: flex-start; gap: 9px; }
.leyenda__punto { width: 10px; height: 10px; border-radius: 2px; margin-top: 5px; flex: none; }

/* Columnas mensuales */
.barras { display: flex; align-items: flex-end; justify-content: flex-start; gap: var(--s3); min-height: 180px; overflow-x: auto; padding-bottom: 2px; }
.barras__col { flex: 1; min-width: 46px; max-width: 96px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.barras__valor { font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
.barras__pista { width: 100%; height: 130px; display: flex; align-items: flex-end; background: var(--surface-3); border-radius: 3px; }
.barras__barra {
  width: 100%; background: var(--dato-2);
  border-radius: 4px 4px 2px 2px;
  transition: opacity .16s var(--ease);
}
.barras:hover .barras__barra { opacity: .5; }
.barras__col:hover .barras__barra { opacity: 1; }
.barras__etq  { font-size: 11.5px; color: var(--ink-2); font-weight: 500; }
.barras__etq2 { font-size: 10.5px; color: var(--ink-4); }

/* ======================================================== servicios */

.servicio {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: var(--s4); align-items: start;
  padding: var(--s4) 0; border-bottom: 1px solid var(--line);
}
.servicio:last-child { border-bottom: 0; }
.servicio__icono {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: var(--r2); background: var(--accent-soft); color: var(--accent);
}
.servicio__t { font-size: 14.5px; font-weight: 600; }
.servicio__d { font-size: 13px; color: var(--ink-3); margin-top: 3px; line-height: 1.5; }
@media (max-width: 620px) { .servicio { grid-template-columns: 34px minmax(0, 1fr); } .servicio > .pill { grid-column: 2; justify-self: start; } }

/* ======================================================== mensajes */

.mensaje-caja {
  border: 1px solid var(--line); border-radius: var(--r2);
  background: var(--surface-2); padding: var(--s4);
  font-size: 13px; line-height: 1.6; color: var(--ink-2);
  white-space: pre-wrap; max-height: 260px; overflow-y: auto;
}

/* En teléfono los botones del encabezado bajan debajo del texto, en vez de
   estrujar la descripción en una columna de cinco palabras.
   Descendiente ("view header"), no hijo directo ("view > header"): el
   medidor mete su header un nivel más adentro que el resto de las vistas
   (pantallaLista envuelve todo en un div sin clase), y con el combinador de
   hijo directo esta regla nunca lo alcanzaba: el título quedaba en una
   columna angosta, palabra por palabra. */
@media (max-width: 620px) {
  .view header .row { flex-direction: column; align-items: stretch; }
  .view header .row > div[style*="flex:1"] { min-width: 100%; }
  .view header .row > .row { justify-content: flex-start; }
  .view header .row > .row .btn { flex: 1; }
}

/* ======================================================== texto grande
   Modo de lectura cómoda. Escala toda la interfaz desde la raíz para que
   nadie tenga que pelearse con el zoom del navegador. */

html.texto-grande { font-size: 118%; }
html.texto-mayor  { font-size: 136%; }
html.texto-mayor body,
html.texto-grande body { font-size: 17px; line-height: 1.68; }
html.texto-mayor .small,
html.texto-grande .small  { font-size: 15px; }
html.texto-mayor .tiny,
html.texto-grande .tiny   { font-size: 13.5px; }
html.texto-mayor .lead,
html.texto-grande .lead   { font-size: 18.5px; }
html.texto-mayor .btn,
html.texto-grande .btn    { padding: 14px 24px; font-size: 16px; }
html.texto-grande .btn--sm{ padding: 10px 18px; font-size: 15px; }
html.texto-mayor .input,
html.texto-mayor .select,
html.texto-mayor .textarea,
html.texto-grande .input,
html.texto-grande .select,
html.texto-grande .textarea { padding: 14px 16px; font-size: 16.5px; }
html.texto-mayor .search__input,
html.texto-grande .search__input { padding: 20px 54px; font-size: 18px; }
html.texto-mayor .pill,
html.texto-grande .pill   { font-size: 14px; padding: 6px 14px; }
html.texto-mayor .pill--sm,
html.texto-grande .pill--sm { font-size: 13px; padding: 4px 11px; }
html.texto-mayor .tabla,
html.texto-grande .tabla  { font-size: 15.5px; }
html.texto-mayor .tabla,
html.texto-mayor .tabla td,
html.texto-grande .tabla td { padding: 16px var(--s3); }
html.texto-mayor .nav__item,
html.texto-grande .nav__item { padding: 12px 20px; font-size: 16px; }
html.texto-mayor .field__label,
html.texto-grande .field__label { font-size: 14.5px; }
html.texto-mayor .action__title,
html.texto-grande .action__title { font-size: 17px; }
html.texto-mayor .action__hint,
html.texto-grande .action__hint  { font-size: 14px; }
html.texto-mayor .desglose,
html.texto-grande .desglose { font-size: 15px; }
html.texto-mayor .chat,
html.texto-grande .chat { width: min(440px, calc(100vw - 24px)); }

.topbar__acciones { display: flex; gap: var(--s2); align-items: center; }
.tamano {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: var(--surface); padding: 3px;
}
.tamano__btn {
  appearance: none; cursor: pointer;
  /* "baseline" alineaba la "A" y el signo por línea base de texto, que cae
     distinto según el tamaño de fuente: A- y A+ quedaban descentrados y
     además distintos entre sí, porque A+ usa una fuente más grande.
     "center" los centra como par, en los dos botones por igual. */
  display: inline-flex; align-items: center; gap: 1px;
  min-width: 40px; height: 32px; justify-content: center;
  border: 0; border-radius: 4px; background: transparent; color: var(--ink);
  font-weight: 600; font-size: 14px; line-height: 1;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.tamano__btn--mas { font-size: 17px; }
.tamano__signo { font-size: 13px; font-weight: 700; }
.tamano__btn:hover:not(:disabled) { background: var(--surface-3); }
.tamano__btn:disabled { opacity: .32; cursor: default; }
.tamano__etq {
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 600; padding: 0 6px; min-width: 52px; text-align: center;
}
html.texto-grande .tamano__btn { min-width: 46px; height: 36px; font-size: 15px; }
html.texto-mayor  .tamano__btn { min-width: 50px; height: 40px; font-size: 16px; }

/* ======================================================== asistente */

.chat {
  position: fixed;
  right: var(--s5); bottom: var(--s5);
  z-index: 150;
  width: min(400px, calc(100vw - 24px));
  max-height: min(620px, calc(100dvh - 48px));
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r3);
  box-shadow: var(--shadow-3);
  animation: chat-in .26s var(--ease) both;
}
@keyframes chat-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }

@media (max-width: 620px) {
  .chat { right: 8px; left: 8px; bottom: 8px; width: auto; max-height: calc(100dvh - 16px); }
}

.chat__cabeza {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s4) var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
}
.chat__punto {
  width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none;
  box-shadow: 0 0 0 3px var(--ok-soft);
}

.chat__hilo {
  flex: 1; overflow-y: auto;
  padding: var(--s4) var(--s5);
  display: flex; flex-direction: column; gap: var(--s4);
  scroll-behavior: smooth;
}

.chat__msg { max-width: 92%; font-size: 14px; line-height: 1.58; }
.chat__msg--bot {
  align-self: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  padding: var(--s4);
  color: var(--ink-2);
}
.chat__msg--yo {
  align-self: flex-end;
  background: var(--ink); color: #fff;
  border-radius: var(--r2);
  padding: 10px var(--s4);
}
.chat__tema {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; margin-bottom: 6px;
}

.chat__sugerencias { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.chat__chip {
  appearance: none; cursor: pointer; text-align: left;
  border: 1px solid var(--line-2); background: var(--surface);
  border-radius: var(--r1); padding: 9px 12px;
  font-size: 13px; color: var(--ink); line-height: 1.45;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.chat__chip:hover { border-color: var(--accent); background: var(--accent-soft); }

.chat__contacto { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }

.chat__pie {
  display: flex; gap: var(--s2); align-items: center;
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 0 0 var(--r3) var(--r3);
}
.chat__pie .input { flex: 1; }

/* ======================================================== aviso de respaldo */

.respaldo-aviso {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s4);
  border: 1px solid #E2D8C2; background: var(--warn-soft);
  border-radius: var(--r2); color: var(--warn);
  font-size: 13.5px;
}
.respaldo-aviso .btn { margin-left: auto; }

/* Alta de producto: los dos caminos, como tarjetas grandes */
.opcion-alta {
  appearance: none; cursor: pointer; width: 100%; text-align: left;
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s5);
  border: 1px solid var(--line); border-radius: var(--r3);
  background: var(--surface);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease);
}
.opcion-alta:hover { border-color: var(--accent-line); box-shadow: var(--shadow-2); }
.opcion-alta:active { transform: translateY(1px); }

/* La barra superior envuelve en vez de recortar botones. Con seis pestañas y
   el modo de texto grande no cabe en una sola fila en pantallas medianas. */
.topbar {
  height: auto;
  min-height: var(--topbar-h);
  flex-wrap: wrap;
  padding-top: 10px;
  padding-bottom: 10px;
  row-gap: 10px;
}
.nav { overflow-x: auto; max-width: 100%; }
.topbar__acciones { flex-wrap: wrap; }

@media (max-width: 1080px) {
  .nav { margin-left: 0; order: 3; width: 100%; }
  .topbar__acciones { margin-left: auto; }
}

/* El nivel Mayor hereda todo lo de Grande y sube otro escalón donde importa. */
html.texto-mayor body { font-size: 19px; line-height: 1.7; }
html.texto-mayor .small  { font-size: 16.5px; }
html.texto-mayor .tiny   { font-size: 15px; }
html.texto-mayor .lead   { font-size: 20.5px; }
html.texto-mayor .btn    { padding: 16px 26px; font-size: 17.5px; }
html.texto-mayor .btn--sm{ padding: 12px 20px; font-size: 16.5px; }
html.texto-mayor .input,
html.texto-mayor .select,
html.texto-mayor .textarea { padding: 16px 18px; font-size: 18px; }
html.texto-mayor .search__input { padding: 22px 56px; font-size: 19.5px; }
html.texto-mayor .pill   { font-size: 15px; padding: 7px 15px; }
html.texto-mayor .pill--sm { font-size: 14px; padding: 5px 12px; }
html.texto-mayor .tabla  { font-size: 17px; }
html.texto-mayor .tabla td { padding: 18px var(--s3); }
html.texto-mayor .nav__item { padding: 14px 22px; font-size: 17.5px; }
html.texto-mayor .field__label { font-size: 16px; }
html.texto-mayor .action__title { font-size: 18.5px; }
html.texto-mayor .action__hint  { font-size: 15.5px; }
html.texto-mayor .desglose { font-size: 16.5px; }
html.texto-mayor .display  { font-size: clamp(34px, 4.6vw, 48px); }
html.texto-mayor .title    { font-size: 28px; }

/* ======================================================== portada */

.nav__grupo {
  align-self: center;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 600;
  padding-right: var(--s3); margin-right: var(--s1);
  border-right: 1px solid var(--line);
  white-space: nowrap;
}

.portada { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); align-items: start; }
@media (max-width: 860px) { .portada { grid-template-columns: 1fr; } }

.opcion {
  border: 1px solid var(--line); border-radius: var(--r4); background: var(--surface);
  overflow: hidden; box-shadow: var(--shadow-1);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.opcion:hover { border-color: var(--accent-line); box-shadow: var(--shadow-2); }

.opcion__principal {
  display: flex; align-items: flex-start; gap: var(--s4); width: 100%; text-align: left;
  padding: var(--s6) var(--s5) var(--s5); border: 0; background: transparent; cursor: pointer;
  color: inherit;
}
.opcion__icono {
  width: 48px; height: 48px; flex: none; border-radius: var(--r3);
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.opcion__texto { flex: 1; min-width: 0; }
.opcion__titulo { display: block; font-family: var(--serif); font-size: 23px; line-height: 1.2; letter-spacing: -.015em; }
.opcion__lead { display: block; font-size: 14px; color: var(--ink-2); margin-top: 7px; line-height: 1.55; }
.opcion__flecha { color: var(--ink-4); transform: rotate(-90deg); flex: none; margin-top: 12px; }
.opcion__principal:hover .opcion__flecha { color: var(--accent); }

.opcion__cifras {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4);
  padding: 0 var(--s5) var(--s5);
}
.opcion__cifra { font-family: var(--serif); font-size: 21px; line-height: 1.2; margin-top: 2px; }

.opcion__menu { border-top: 1px solid var(--line); background: var(--surface-2); }
.opcion__punto {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  width: 100%; text-align: left; padding: 13px var(--s5);
  border: 0; border-bottom: 1px solid var(--line); background: transparent;
  cursor: pointer; color: inherit;
}
.opcion__punto:last-child { border-bottom: 0; }
.opcion__punto:hover { background: var(--surface-3); }
.opcion__punto svg { color: var(--ink-4); transform: rotate(-90deg); }
.opcion__punto-t { display: block; font-size: 14.5px; font-weight: 500; }
.opcion__punto-n { display: block; font-size: 11.5px; color: var(--ink-4); margin-top: 1px; }

.portada__pie { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

/* ======================================================== medidor */

/* Deja aire abajo para la barra de totales y el teclado de la aplicación. */
.medidor { padding-bottom: 300px; }

.cuarto { border: 1px solid var(--line); border-radius: var(--r3); background: var(--surface); }
.cuarto__head { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); }
.cuarto__nombre { flex: 1; min-width: 0; border-color: transparent; background: transparent; padding-inline: 8px; font-weight: 500; }
.cuarto__nombre:hover, .cuarto__nombre:focus { border-color: var(--line-2); background: var(--surface); }
.cuarto__body { padding: 0 var(--s5) var(--s5); }

.cuarto__total { text-align: right; flex: none; line-height: 1.25; }
.cuarto__m2 { display: block; font-size: 16px; font-weight: 600; }
.cuarto__ml { display: block; font-size: 11.5px; color: var(--ink-4); }

.cuarto__eco { margin-top: 6px; min-height: 16px; display: flex; flex-direction: column; gap: 2px; }
.cuarto__error { font-size: 11.5px; color: var(--danger); }

/* Los campos de medida son el corazón de la pantalla: se ven más grandes. */
.js-medida { font-size: 17px; letter-spacing: .01em; }

.totales {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; gap: var(--s5); align-items: center;
  padding: var(--s3) var(--s5);
  padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom));
  background: var(--ink); color: #fff;
  box-shadow: 0 -6px 24px -12px rgba(15, 16, 19, .5);
}
.totales__bloque { display: flex; flex-direction: column; gap: 1px; }
.totales__bloque--fin { margin-left: auto; text-align: right; }
.totales__k { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; opacity: .62; }
.totales__v { font-size: 17px; font-weight: 600; font-family: var(--serif); }

/* ======================================================== teclado de la aplicación */

.teclado {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--surface); border-top: 1px solid var(--line-2);
  box-shadow: 0 -10px 40px -16px rgba(15, 16, 19, .4);
  padding: var(--s3) var(--s4);
  padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom));
  transform: translateY(110%);
  transition: transform .24s var(--ease);
}
.teclado--visible { transform: translateY(0); }

.teclado__head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s2); }
.teclado__etq {
  flex: 1; min-width: 0; font-size: 12px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.teclado__rejilla {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  max-width: 460px; margin: 0 auto;
}
.teclado__tecla {
  height: 52px; border: 1px solid var(--line-2); border-radius: var(--r2);
  background: var(--surface-2); color: var(--ink);
  font-size: 21px; font-variant-numeric: tabular-nums; font-weight: 500;
  cursor: pointer; transition: background .1s var(--ease), transform .06s var(--ease);
}
.teclado__tecla:hover { background: var(--surface-3); }
.teclado__tecla:active { transform: scale(.96); background: var(--accent-soft); }
.teclado__tecla--fn { font-size: 17px; color: var(--ink-2); }
.teclado__tecla--acento { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); font-size: 26px; }
.teclado__tecla--ok { background: var(--ink); border-color: var(--ink); color: #fff; font-size: 14px; font-weight: 600; }

/* Con el teclado arriba, la barra de totales se sube para no quedar tapada.
   El teclado vive fuera de .shell, así que la relación se lee desde el body. */
body:has(.teclado--visible) .totales { bottom: 268px; }

@media (max-width: 620px) {
  .totales { gap: var(--s4); padding-inline: var(--s4); }
  .totales__v { font-size: 15px; }
  .teclado__tecla { height: 48px; font-size: 19px; }
}

html.texto-grande .teclado__tecla,
html.texto-mayor .teclado__tecla { height: 60px; font-size: 24px; }
html.texto-mayor .js-medida { font-size: 20px; }

/* ======================================================== estado de la cotización */

/* Un cuarto color, frío, para lo que ya está liquidado. Cierra la escalera
   ámbar → verde sin competir con ninguno de los dos. */
:root {
  --cerrado:      #3A5A64;
  --cerrado-soft: #E2EBEE;
  --muerto:       #85878E;
  --muerto-soft:  #EEEEF0;
}

.pill--cerrado { background: var(--cerrado-soft); color: var(--cerrado); }
.pill--muerto  { background: var(--muerto-soft);  color: var(--muerto); }
.nota--cerrado { background: var(--cerrado-soft); border-color: #C9D8DD; color: var(--cerrado); }

/* Barra de color al canto de la tarjeta: se lee el estado sin leer la cifra. */
.linea--estado { position: relative; padding-left: 4px; }
.linea--estado::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: var(--r3) 0 0 var(--r3);
}
.linea--warn::before    { background: var(--warn); }
.linea--ok::before      { background: var(--ok); }
.linea--cerrado::before { background: var(--cerrado); }
.linea--muerto::before  { background: var(--muerto); }
.linea--muerto { opacity: .62; }

.semaforo { display: flex; gap: 2px; height: 8px; border-radius: 3px; overflow: hidden; }
.semaforo__seg { transition: opacity .16s var(--ease); }
.semaforo__seg:hover { opacity: .7; }

/* ======================================================== medidor: método y agregar */

.metodo { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r2); overflow: hidden; }
.metodo__btn {
  padding: 6px 12px; font-size: 12px; font-weight: 500;
  border: 0; background: var(--surface); color: var(--ink-3); cursor: pointer;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.metodo__btn + .metodo__btn { border-left: 1px solid var(--line); }
.metodo__btn:hover { background: var(--surface-2); color: var(--ink); }
.metodo__btn[aria-pressed='true'] { background: var(--ink); color: #fff; }

.agregar {
  margin-top: var(--s5);
  border: 1px dashed var(--line-2); border-radius: var(--r3);
  padding: var(--s4); background: var(--surface-2);
}
.agregar__etq {
  display: block; font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 600; margin-bottom: 10px;
}
.agregar__chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.agregar__chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 14px; font-size: 13.5px; font-weight: 500;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-2); cursor: pointer;
  transition: border-color .14s var(--ease), background .14s var(--ease), color .14s var(--ease);
}
.agregar__chip:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.agregar__chip:active { transform: scale(.97); }
.agregar__chip svg { opacity: .6; }

/* ======================================================== fotos de obra */

.fotos { border-top: 1px dashed var(--line); padding-top: var(--s4); }
.fotos__tira { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }
.fotos__tira:empty { margin-top: 0; }

.foto { position: relative; margin: 0; width: 84px; height: 84px; border-radius: var(--r2); overflow: hidden; background: var(--surface-3); }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto__quitar {
  position: absolute; top: 3px; right: 3px;
  width: 22px; height: 22px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(15, 16, 19, .74); color: #fff;
}
.foto__quitar:hover { background: var(--danger); }

@media (max-width: 620px) {
  .foto { width: 72px; height: 72px; }
  .agregar__chip { padding: 10px 14px; font-size: 14px; }
}

html.texto-mayor .agregar__chip { font-size: 17px; padding: 13px 18px; }
html.texto-mayor .metodo__btn { font-size: 15px; padding: 9px 16px; }

/* ======================================================== equipo */

.equipo-fila {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.1fr) auto auto;
  gap: var(--s2); align-items: center;
}
.equipo-fila .check { padding: 0; }
@media (max-width: 860px) {
  .equipo-fila { grid-template-columns: 1fr 1fr; }
  .equipo-fila > .btn--icon { grid-column: 2; justify-self: end; }
}

/* ======================================================== menú de hamburguesa */

.hamburguesa{
  display:none; margin-left:auto; flex:none;
  width:42px; height:42px; padding:0;
  border:1px solid var(--line-2); border-radius:var(--r2);
  background:var(--surface); cursor:pointer;
  align-items:center; justify-content:center;
}
.hamburguesa:hover{background:var(--surface-3)}
.hamburguesa__lineas{display:flex;flex-direction:column;gap:4px;width:18px}
.hamburguesa__lineas i{display:block;height:2px;border-radius:1px;background:var(--ink);transition:transform .2s var(--ease),opacity .2s var(--ease)}
body.menu-abierto .hamburguesa__lineas i:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-abierto .hamburguesa__lineas i:nth-child(2){opacity:0}
body.menu-abierto .hamburguesa__lineas i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.velo{
  position:fixed; inset:0; z-index:80;
  background:rgba(15,16,19,.42); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .22s var(--ease);
}
body.menu-abierto .velo{opacity:1;pointer-events:auto}

.cajon{
  position:fixed; top:0; right:0; bottom:0; z-index:90;
  width:min(86vw,320px);
  display:flex; flex-direction:column; gap:var(--s4);
  padding:var(--s4) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom));
  background:var(--surface); border-left:1px solid var(--line);
  box-shadow:-18px 0 48px -24px rgba(15,16,19,.5);
  transform:translateX(102%); transition:transform .26s var(--ease);
  overflow-y:auto; overscroll-behavior:contain;
}
body.menu-abierto .cajon{transform:translateX(0)}

.cajon__cab{display:flex;align-items:center;gap:var(--s3);padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.cajon__grupo{flex:1;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);font-weight:600}
.cajon__lista{display:flex;flex-direction:column}
.cajon__etq{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);font-weight:600;margin-bottom:10px}

.cajon__cambio{
  display:flex; align-items:center; gap:var(--s2); width:100%;
  padding:13px var(--s4); border-radius:var(--r2);
  border:1px dashed var(--line-2); background:var(--surface-2); color:var(--ink-2);
  font-size:14px; font-weight:500; cursor:pointer;
}
.cajon__cambio:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

.cajon__pie{margin-top:auto;padding-top:var(--s4);border-top:1px solid var(--line)}
.cajon__pie .topbar__acciones{flex-direction:column;align-items:stretch;gap:var(--s3)}
/* Sin esto, el "stretch" del padre estira el control a todo el ancho del
   cajón y el bloque compacto A-/A+ queda perdido en el centro con demasiado
   aire de sobra a los lados. Se centra como bloque, del tamaño que le toca. */
.cajon__pie .tamano{align-self:center;justify-content:center}
.cajon__pie .btn{justify-content:flex-start}

/* Dentro del cajón la barra de pantallas se vuelve una lista vertical. */
.cajon .nav{flex-direction:column;gap:2px;margin-left:0;width:100%;overflow:visible}
.cajon .nav__item{text-align:left;padding:13px var(--s4);border-radius:var(--r2);font-size:15.5px}
.cajon .nav__grupo{display:none}

@media (max-width:900px){
  .hamburguesa{display:inline-flex}
  .topbar{gap:var(--s3);padding:0 var(--s4)}
  .brand__name{font-size:15.5px}
}
@media (min-width:901px){
  .cajon,.velo{display:none}
}

html.texto-mayor .cajon .nav__item{font-size:18px;padding:16px var(--s4)}

/* ======================================================== material del estimado */

.material{
  display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap;
  margin:var(--s5) 0 var(--s3);
  padding:var(--s4) var(--s5);
  border:1px dashed var(--line-2); border-radius:var(--r3);
  background:var(--surface-2);
}
.material--fijo{border-style:solid;border-color:var(--accent-line);background:var(--accent-soft)}
.material__etq{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);font-weight:600}
.material__nombre{display:block;font-size:15.5px;font-weight:600;margin-top:3px}
.material__precio{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}

/* El importe del cuarto vive junto a sus metros, no en otra pantalla. */
.cuarto__mxn{display:block;font-size:13.5px;font-weight:600;color:var(--accent);margin-top:2px}

@media (max-width:620px){
  .material{padding:var(--s4)}
  .material .btn{flex:1}
}
html.texto-mayor .cuarto__mxn{font-size:16px}