/* ==========================================================================
   Cotizador de moldes — capa de aplicación sobre el sistema Industry.
   Todo se toma de los tokens de industry.css: nada de hex ni px sueltos
   que los tokens ya cubran.
   ========================================================================== */

@keyframes scan { 0% { transform: translateY(0); } 100% { transform: translateY(240px); } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.btn, .seg-opt { white-space: nowrap; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.kicker {
  font: 400 10px ui-monospace, Menlo, monospace; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-neutral-600);
}

/* ------------------------------------------------------------------ Marco */
.app { display: flex; min-height: 100vh; background: var(--color-bg); color: var(--color-text); }

.lateral {
  width: 236px; flex: none; border-right: 1px solid var(--color-divider);
  padding: 20px 0; display: flex; flex-direction: column; gap: 28px;
  position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto;
}
.marca { font-family: var(--font-heading); font-weight: 600; font-size: 19px; letter-spacing: -.01em; }
.marca span { color: var(--color-accent); }

.menu { display: flex; flex-direction: column; }
.menu button {
  position: relative; display: grid; grid-template-columns: 26px 1fr auto; align-items: center;
  gap: 8px; text-align: left; background: transparent; border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 7%, transparent);
  padding: 10px 20px; cursor: pointer; font-family: var(--font-body); font-size: 14px;
  color: var(--color-text);
}
.menu button:hover { background: color-mix(in srgb, var(--color-accent) 9%, transparent); }
.menu button .n { font: 400 10px ui-monospace, Menlo, monospace; color: var(--color-neutral-500); }
.menu button.activo::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--color-accent);
}
.menu button.activo { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.menu button:disabled { opacity: .4; cursor: not-allowed; }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cabecera {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 32px; border-bottom: 1px solid var(--color-divider);
  position: sticky; top: 0; background: var(--color-bg); z-index: 20;
}
.cuerpo { flex: 1; padding: 28px 32px 64px; }

@media (max-width: 860px) {
  .app { flex-direction: column; }
  .lateral { width: 100%; height: auto; position: static; border-right: 0;
             border-bottom: 1px solid var(--color-divider); }
  .cuerpo, .cabecera { padding-inline: 18px; }
}

/* ------------------------------------------------------------- Rejillas */
.rejilla { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.rejilla-2 { display: grid; gap: 26px; grid-template-columns: 1.35fr .85fr; align-items: start; }
@media (max-width: 1080px) { .rejilla-2 { grid-template-columns: 1fr; } }
.pila { display: flex; flex-direction: column; gap: 20px; }
.fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.crece { margin-left: auto; }
.marcos { position: relative; }

/* --------------------------------------------------------------- Dropzone */
.dropzone {
  padding: 44px 28px; display: flex; flex-direction: column; align-items: center;
  gap: 14px; text-align: center; cursor: pointer;
  background: repeating-linear-gradient(45deg, transparent, transparent 9px,
    color-mix(in srgb, var(--color-accent) 6%, transparent) 9px,
    color-mix(in srgb, var(--color-accent) 6%, transparent) 10px);
}
.dropzone.sobre { background-color: color-mix(in srgb, var(--color-accent) 10%, transparent); }

/* ---------------------------------------------------------------- Visor 3D */
.visor { position: relative; background: var(--color-surface); overflow: hidden; }
.visor canvas { display: block; width: 100%; cursor: grab; }
.visor canvas:active { cursor: grabbing; }
.visor .barrido {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--color-accent); opacity: .5; animation: scan 2.6s linear infinite alternate;
  pointer-events: none;
}
.visor .pie {
  position: absolute; left: 12px; bottom: 10px;
  font: 400 10px ui-monospace, Menlo, monospace; letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-neutral-700);
}
.visor .mandos { position: absolute; right: 10px; top: 10px; display: flex; gap: 5px; }
.visor .mandos button {
  background: color-mix(in srgb, var(--color-text) 10%, transparent); border: 0;
  color: var(--color-text); font: 400 10px ui-monospace, Menlo, monospace;
  letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px; cursor: pointer;
}
.visor .mandos button:hover { background: color-mix(in srgb, var(--color-accent) 26%, transparent); }

/* --------------------------------------------------------------- Confianza */
.medidor { display: flex; flex-direction: column; gap: 6px; }
.medidor-pista { height: 8px; background: color-mix(in srgb, var(--color-text) 10%, transparent); }
.medidor-relleno { height: 100%; background: var(--color-accent); transition: width .5s ease; }
.medidor-relleno.baja { background: var(--color-neutral-500); }
.medidor-relleno.media { background: var(--color-accent-500); }
.medidor-relleno.alta { background: var(--color-accent-700); }

.eje-fila { display: grid; grid-template-columns: 130px 1fr 54px; gap: 10px; align-items: center; font-size: 12.5px; }
.eje-pista { height: 6px; background: color-mix(in srgb, var(--color-text) 9%, transparent); }
.eje-relleno { height: 100%; background: var(--color-accent); }

.accion {
  display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: start;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  padding-bottom: 9px; font-size: 13.5px;
}
.accion .puntos {
  font-family: ui-monospace, Menlo, monospace; font-size: 12px; text-align: center;
  padding: 2px 0; border: 1px solid var(--color-accent); color: var(--color-accent-800);
  background: var(--color-accent-100);
}

/* ------------------------------------------------------------ Panel precio */
.panel-precio {
  padding: 26px 28px; background: var(--color-accent-900); color: var(--color-bg);
  display: grid; gap: 24px;
  grid-template-columns: minmax(260px, 1.15fr) minmax(230px, 1fr) minmax(190px, .72fr);
  align-items: end;
}
@media (max-width: 1180px) { .panel-precio { grid-template-columns: 1fr; } }
.panel-precio .cifra {
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(34px, 3.2vw, 50px); line-height: 1.02; white-space: nowrap;
  letter-spacing: -.02em; margin-top: 4px;
}
.panel-precio .cifra-hasta {
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(20px, 1.9vw, 28px); line-height: 1.1; white-space: nowrap;
  opacity: .82;
}
.panel-precio .kicker { color: color-mix(in srgb, #fff 70%, transparent); }
.panel-precio .linea {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; font-size: 13.5px;
  border-bottom: 1px solid color-mix(in srgb, #fff 18%, transparent); padding-bottom: 5px;
}
.panel-precio .linea span:first-child { opacity: .72; }

.estimado-vivo { padding: 18px; }
.estimado-vivo .cifra { font-family: var(--font-heading); font-weight: 600; font-size: 34px; line-height: 1.05; }

/* ------------------------------------------------------------------ Varios */
.chip-supuesto {
  padding: 6px 10px; display: flex; gap: 8px; align-items: baseline; white-space: nowrap;
}
.tabla-envoltura { overflow-x: auto; }
.num { text-align: right; font-family: ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }
.grupo-fila td {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-accent-800); font-weight: 700;
}

.cargando { display: flex; align-items: center; justify-content: center; gap: 11px; padding: 40px; color: var(--color-neutral-600); font-size: 13px; }
.spinner {
  width: 18px; height: 18px; border: 2px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  border-top-color: var(--color-accent); border-radius: 50%; animation: girar .7s linear infinite;
}
.vacio { padding: 44px 20px; text-align: center; color: var(--color-neutral-500); font-size: 13px; }

.progreso { height: 3px; background: color-mix(in srgb, var(--color-text) 10%, transparent); }
.progreso div { height: 100%; background: var(--color-accent); transition: width .3s; }

.aviso { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: 13.5px; }

.editor-json {
  font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.55;
  width: 100%; min-height: 460px; padding: 13px; background: var(--color-accent-900);
  color: color-mix(in srgb, #fff 88%, transparent); border: 1px solid var(--color-divider);
  resize: vertical; tab-size: 2;
}
.arbol > summary {
  padding: 10px 13px; cursor: pointer; font-weight: 700; font-size: 13.5px;
  list-style: none; display: flex; align-items: center; gap: 8px;
  background: color-mix(in srgb, var(--color-text) 4%, transparent);
}
.arbol > summary::-webkit-details-marker { display: none; }
.arbol > summary::before { content: '▸'; color: var(--color-neutral-500); }
.arbol[open] > summary::before { content: '▾'; }
.arbol-campos { padding: 13px; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }

.doc { font-size: 13.5px; line-height: 1.65; max-height: 620px; overflow-y: auto; padding: 30px 34px; }
.doc h1 { font-size: 24px; margin-bottom: 12px; }
.doc h2 { font-size: 17px; margin: 22px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--color-divider); }
.doc h3 { font-size: 14px; margin: 15px 0 6px; }
.doc ul, .doc ol { margin: 0 0 11px 20px; }
.doc table { margin: 10px 0 16px; }
.doc code { font-family: ui-monospace, Menlo, monospace; font-size: 12px; background: var(--color-accent-100); padding: 1px 4px; }

.oculto { display: none !important; }

@media print {
  .lateral, .cabecera, .fila, .mandos { display: none !important; }
  .doc { max-height: none; overflow: visible; padding: 0; }
}