/* Cotizador Gebruder. Azul = lo que ve el cliente; ámbar = lo que solo ve el vendedor. */
:root {
  --fondo: #f3f5f9; --hoja: #ffffff; --hundido: #e9edf4; --tinta: #141c29; --suave: #566275; --linea: #d6dce6;
  --azul: #2c56c9; --azul-claro: #e5ecfb; --ambar: #8a5000; --ambar-claro: #fcefd8; --rojo: #b83232; --verde: #1d7f53;
  --letra: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --datos: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --r: 10px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* sin esto, display:grid de .paso/.panel/.campo le gana al atributo hidden */
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 16px/1.55 var(--letra); }
.ancho { max-width: 1160px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.barra { background: var(--hoja); border-bottom: 1px solid var(--linea); }
.barra .ancho { padding-block: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.marca { font-weight: 600; font-size: 18px; color: var(--tinta); text-decoration: none; }
.marca span { font-weight: 400; color: var(--suave); margin-left: 8px; font-size: 15px; }
.cotizador { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; padding-block: 28px 64px; align-items: start; }
.formulario { display: grid; gap: 20px; min-width: 0; }
.paso { background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--r); padding: 20px; display: grid; gap: 14px; min-width: 0; }
.paso h2 { margin: 0; font-size: 19px; display: flex; gap: 10px; align-items: baseline; }
.paso h2 span { font: 500 13px var(--datos); color: var(--suave); }
.giros { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.giro { font: inherit; font-size: 14px; text-align: left; padding: 12px; border: 1px solid var(--linea); border-radius: 8px; background: var(--hoja); color: var(--tinta); cursor: pointer; }
.giro[aria-pressed="true"] { border-color: var(--azul); background: var(--azul-claro); color: var(--azul); font-weight: 600; }
.campo { display: grid; gap: 6px; font-size: 14px; color: var(--suave); }
.campo input { font: inherit; color: var(--tinta); padding: 10px 12px; border: 1px solid var(--linea); border-radius: 8px; background: var(--hoja); }
.colores { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.colores legend { font-size: 14px; color: var(--suave); padding: 0; margin-bottom: 6px; }
.color { appearance: none; margin: 0; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--hoja); outline: 1px solid var(--linea); cursor: pointer; }
.color:checked { outline: 3px solid var(--tinta); }
.pregunta { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.pregunta legend { font-size: 15px; padding: 0; margin-bottom: 4px; }
.opciones { display: flex; flex-wrap: wrap; gap: 6px; }
.opcion { position: relative; }
.opcion input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.opcion span { display: inline-block; font-size: 14px; padding: 8px 12px; border: 1px solid var(--linea); border-radius: 8px; }
.opcion input:checked + span { background: var(--tinta); color: var(--hoja); border-color: var(--tinta); }
.opcion input:focus-visible + span, .giro:focus-visible, .btn:focus-visible, .color:focus-visible, .modulo input:focus-visible, .enlace:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.grupo { font: 600 12px var(--letra); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); margin: 10px 0 2px; }
.modulo { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px; border-radius: 8px; cursor: pointer; }
.modulo:hover { background: var(--hundido); }
.modulo input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--azul); }
.modulo b { font-weight: 500; }
.modulo small { display: block; color: var(--suave); font-size: 13px; }
.precio-modulo { font: 400 13px var(--datos); color: var(--suave); white-space: nowrap; }
.sugerido { font: 600 10px var(--letra); letter-spacing: .06em; text-transform: uppercase; color: var(--verde); margin-left: 6px; }
.base { margin: 0; font-size: 14px; color: var(--suave); background: var(--hundido); padding: 10px 12px; border-radius: 8px; }
.btn { font: 600 15px var(--letra); padding: 12px 18px; border-radius: 8px; border: 0; background: var(--azul); color: var(--hoja); cursor: pointer; justify-self: start; text-decoration: none; display: inline-block; }
.btn.sec { background: transparent; color: var(--tinta); border: 1px solid var(--linea); }
.btn:disabled { opacity: .6; cursor: wait; }
.enlace { font: inherit; font-size: 13px; background: none; border: 0; padding: 0; color: var(--suave); text-decoration: underline; cursor: pointer; justify-self: start; }
.aviso { margin: 0; font-size: 14px; color: var(--rojo); }
#aviso-descuento { color: var(--ambar); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.paneles { display: grid; gap: 16px; position: sticky; top: 16px; min-width: 0; }
.panel { background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--r); padding: 18px; display: grid; gap: 10px; }
.panel-cliente { border-color: color-mix(in srgb, var(--azul) 45%, var(--linea)); }
.panel-vendedor { background: var(--ambar-claro); border-color: transparent; }
.panel-vendedor .eti { color: var(--ambar); }
.eti { margin: 0; font: 600 12px var(--letra); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.grande { margin: 0; font: 600 30px/1.1 var(--letra); font-variant-numeric: tabular-nums; }
.nota { margin: 0; font-size: 13px; color: var(--suave); }
.vacio { margin: 0; color: var(--suave); }
.renglones { margin: 0; display: grid; gap: 6px; }
.renglones div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; border-bottom: 1px solid var(--linea); padding-bottom: 6px; }
.renglones dt { color: var(--suave); }
.renglones dd { margin: 0; font-family: var(--datos); text-align: right; }
.negativo { color: var(--rojo); }
.desglose { width: 100%; border-collapse: collapse; font-size: 12px; }
.desglose th, .desglose td { text-align: left; padding: 4px 2px; border-bottom: 1px solid color-mix(in srgb, var(--ambar) 25%, transparent); }
.desglose td + td, .desglose th + th { font-family: var(--datos); text-align: right; white-space: nowrap; }
.guion { display: grid; gap: 8px; font-size: 13px; }
.guion p { margin: 0; }
.entrar { display: grid; gap: 10px; }
#descuento { width: 100%; accent-color: var(--ambar); }
/* En escritorio los paneles pegados no pueden ser más altos que la pantalla: con el del vendedor abierto, la barra del descuento y el guion se alcanzan con su propio scroll. */
@media (min-width: 881px) {
  .paneles { max-height: calc(100vh - 32px); overflow-y: auto; }
}
@media (max-width: 880px) {
  .cotizador { grid-template-columns: minmax(0, 1fr); padding-bottom: 150px; }
  .paneles { position: static; }
  /* En celular el precio va fijo abajo, compacto. */
  .panel-cliente { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; border-radius: 14px 14px 0 0; gap: 4px;
    padding: 12px max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    box-shadow: 0 -6px 24px rgb(20 28 41 / .12); }
  .panel-cliente .renglones div:not(:first-child), .panel-cliente #numeros > .nota:last-child { display: none; }
  .grande { font-size: 24px; }
}
@media print { .panel-vendedor { display: none !important; } }
/* ---- Maqueta (mq-*): la plataforma de ejemplo, en el color del negocio (--mq-color) ---- */
.mq { --mq-color: #0b7f82; display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 460px; background: var(--hoja); border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; }
.mq-menu { background: var(--hundido); padding: 14px 10px; display: grid; align-content: start; gap: 4px; border-right: 1px solid var(--linea); }
.mq-marca { display: flex; gap: 10px; align-items: center; padding: 4px 6px 14px; }
.mq-inicial { width: 34px; height: 34px; border-radius: 9px; background: var(--mq-color); color: var(--hoja); display: grid; place-items: center; font-weight: 700; flex: none; }
.mq-menu button { font: inherit; font-size: 14px; text-align: left; padding: 8px 10px; border-radius: 7px; border: 0; background: none; color: var(--suave); cursor: pointer; }
.mq-menu button:hover { background: var(--hoja); color: var(--tinta); }
.mq-menu button[aria-current="page"] { background: var(--hoja); color: var(--mq-color); font-weight: 600; }
.mq-menu button:focus-visible { outline: 2px solid var(--mq-color); outline-offset: 1px; }
.mq-cuerpo { display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.mq-arriba { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--linea); }
.mq-buscar { flex: 1; max-width: 280px; font-size: 13px; color: var(--suave); padding: 7px 10px; border-radius: 7px; background: var(--hundido); }
.mq-usuario { width: 28px; height: 28px; border-radius: 50%; background: var(--hundido); color: var(--mq-color); display: grid; place-items: center; font: 700 12px var(--letra); flex: none; }
.mq-pantalla { padding: 16px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.mq-pantalla h3 { margin: 0; font-size: 18px; }
.mq-franja { margin: 0; font-size: 12px; text-align: center; padding: 7px 12px; background: var(--hundido); color: var(--suave); }
.mq-cifras { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.mq-cifra { padding: 12px; border-radius: 9px; border: 1px solid var(--linea); display: grid; gap: 2px; }
.mq-cifra span { font-size: 12px; color: var(--suave); }
.mq-cifra b { font-size: 20px; font-variant-numeric: tabular-nums; }
.mq-barras { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: end; height: 130px; padding: 10px 12px 0; border: 1px solid var(--linea); border-radius: 9px; }
.mq-barras div { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; height: 100%; font: 400 11px var(--datos); color: var(--suave); text-align: center; }
/* flex y no grid: en una fila de grid automática el height:% de la barra se resolvía a 0 y no se veía ninguna.
   --p (0 a 100) la pone maqueta.mjs en cada barra: 100 llena lo que queda arriba del mes y cada valor conserva su proporción. */
.mq-barras i { display: block; flex: none; height: calc((100% - 22px) * var(--p, 0) / 100); background: var(--mq-color); border-radius: 4px 4px 0 0; }
.mq-tabla { overflow-x: auto; border: 1px solid var(--linea); border-radius: 9px; }
.mq-tabla table { border-collapse: collapse; width: 100%; font-size: 13px; min-width: 480px; }
.mq-tabla th { font: 600 11px var(--letra); letter-spacing: .06em; text-transform: uppercase; color: var(--suave); text-align: left; padding: 10px 12px; background: var(--hundido); }
.mq-tabla td { padding: 9px 12px; border-top: 1px solid var(--linea); }
.mq-semana { display: grid; grid-template-columns: repeat(5, minmax(110px, 1fr)); gap: 6px; overflow-x: auto; }
.mq-dia { display: grid; gap: 6px; align-content: start; }
.mq-dia > span { font: 600 11px var(--letra); letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
.mq-cita { font-size: 12px; line-height: 1.3; padding: 7px 8px; border-radius: 7px; background: color-mix(in srgb, var(--mq-color) 14%, var(--hoja)); }
.mq-cita b { display: block; font: 500 11px var(--datos); color: var(--suave); }
.mq-tablero { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(130px, 1fr); gap: 8px; overflow-x: auto; }   /* una columna por etapa: con 3 etapas no sobra un cuarto vacío */
.mq-col { background: var(--hundido); border-radius: 9px; padding: 8px; display: grid; gap: 6px; align-content: start; }
.mq-col > span { font: 600 12px var(--letra); }
.mq-tarjeta { background: var(--hoja); border: 1px solid var(--linea); border-radius: 7px; padding: 8px; font-size: 12px; }
.mq-ficha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: 9px; overflow: hidden; }
.mq-ficha div { background: var(--hoja); padding: 10px 12px; display: grid; gap: 2px; }
.mq-ficha div:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* con campos impares la última celda ocupa todo el renglón y no deja ver el fondo */
.mq-ficha span { font-size: 11px; color: var(--suave); letter-spacing: .04em; text-transform: uppercase; }
.mq-boton-menu { display: none; font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 7px; border: 1px solid var(--linea); background: var(--hoja); color: var(--tinta); cursor: pointer; }
@media (max-width: 767px) {
  .mq { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; position: relative; }
  /* .mq-cuerpo se disuelve: barra, pantalla y franja quedan como renglones de .mq y el menú abierto flota en el renglón de la pantalla,
     pegado bajo la barra. Así el botón «Menú» nunca se tapa y siempre lo cierra. */
  .mq-cuerpo { display: contents; }
  .mq-menu { display: none; border-right: 0; }
  .mq.abierto .mq-menu { display: grid; position: absolute; grid-row: 2; grid-column: 1; top: 0; left: 0; right: 0; z-index: 2; max-height: min(70vh, 100%); overflow-y: auto; border-bottom: 1px solid var(--linea); box-shadow: 0 12px 24px rgb(20 28 41 / .16); }
  .mq-boton-menu { display: inline-block; }
  .mq-ficha { grid-template-columns: minmax(0, 1fr); }
}

/* ---- La liga /c/FOLIO ---- */
.liga { display: grid; gap: 24px; padding-block: 28px 64px; }
.liga h1 { margin: 0; font-size: clamp(26px, 4vw, 36px); line-height: 1.15; }
.liga h2 { margin: 8px 0 0; font-size: 20px; }
.liga-cuerpo { display: grid; gap: 24px; }
.liga-cotizacion { display: grid; gap: 16px; align-content: start; min-width: 0; }
@media (min-width: 900px) { .liga-cuerpo { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; } }
.resumen { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.resumen div { background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 4px; }
.pagos { overflow-x: auto; }
.pagos table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14px; background: var(--hoja); border: 1px solid var(--linea); }
.pagos th, .pagos td { padding: 12px 14px; text-align: left; vertical-align: top; border-top: 1px solid var(--linea); }
.pagos thead th { border-top: 0; font-size: 15px; }
.pagos tbody th { font-weight: 500; color: var(--suave); width: 26%; }
.pagos small { display: block; color: var(--suave); font-size: 12px; }
.lista-modulos { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.lista-modulos li { background: var(--hoja); border: 1px solid var(--linea); border-radius: 9px; padding: 10px 12px; display: grid; gap: 2px; font-size: 14px; }
.lista-modulos.tambien li { border-style: dashed; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
@media print {
  .barra, .acciones, .mq-menu, .mq-arriba { display: none !important; }
  .mq { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .mq, .mq * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }   /* sin esto Chrome omite los fondos: la inicial y las barras saldrían vacías en el PDF */
  body { background: #fff; }
}