/* ============================================================
   MelaPro — Sistema de diseño base
   Paleta: identidad negro y dorado, sobria y profesional (aprobada
   primero solo para Inicio en v2.5.6, extendida a toda la app en
   v2.5.26). Fondo negro limpio, dorado moderado reservado para
   nombre de marca, iconos principales, enlaces/estados activos y el
   botón de acción destacada; el resto del texto usa un tono claro
   neutro (no dorado, para no saturar). Excepción intencional: la
   Vista previa del presupuesto (el documento que se imprime o se
   envía al cliente) conserva la paleta clara original — ver el
   bloque ".vista-previa-imprimible" más abajo, que redeclara estas
   mismas variables con sus valores originales solo dentro de ese
   contenedor.
   ============================================================ */

:root {
  --color-bg: #0E0E0E;
  --color-white: #171717;
  --color-gray: #1D1D1D;
  --color-gray-line: #2A2A2A;
  --color-primary: #EDEDE8;
  --color-primary-dark: #B8925A;
  --color-primary-soft: #C9A66B;
  --color-accent-wood: #C9A66B;
  --color-text: #EDEDE8;
  --color-text-muted: #9A9A94;
  --color-danger: #E0685A;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;

  --shadow-card: none;

  --nav-height: 64px;
  --header-height: 64px;

  --font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Vista previa del presupuesto: es el documento que se muestra o
   imprime para el cliente, así que conserva siempre la paleta clara
   original sin importar el tema oscuro del resto de la app (en
   pantalla y al imprimir). Redeclara las mismas variables con sus
   valores de siempre; todos los componentes de aquí adentro (mismas
   clases que el resto de la app) las heredan automáticamente sin
   necesitar reglas propias. */
.vista-previa-imprimible {
  --color-bg: #F6F3EE;
  --color-white: #FFFFFF;
  --color-gray: #E7E3DB;
  --color-gray-line: #DCD7CC;
  --color-primary: #1F3D3A;
  --color-primary-dark: #142B29;
  --color-primary-soft: #2C5652;
  --color-accent-wood: #B8875A;
  --color-text: #23302D;
  --color-text-muted: #6C7873;
  --color-danger: #A33A2E;
  --shadow-card: 0 1px 2px rgba(20, 30, 28, 0.04), 0 4px 14px rgba(20, 30, 28, 0.06);
  background: var(--color-bg);
  color: var(--color-text);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

button {
  font-family: inherit;
  cursor: pointer;
}

button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-primary-soft);
  outline-offset: 2px;
}

img {
  max-width: 100%;
  display: block;
}

.app {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  background: var(--color-bg);
}

/* ---------- Encabezado ---------- */

.app-header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: var(--color-bg);
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid transparent;
}

.app-header__brand {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.app-header__name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.2px;
}

.app-header__tagline {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-gray-line);
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.icon-btn svg {
  width: 20px;
  height: 20px;
}

/* ---------- Pantallas ---------- */

.screen {
  display: none;
  padding: 4px 20px calc(var(--nav-height) + 28px);
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100dvh - var(--header-height));
}

.screen.is-active {
  display: block;
}

.screen-provisional {
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100dvh - var(--header-height));
  display: flex;
  flex-direction: column;
}

.provisional-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0 20px;
}

.back-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-gray-line);
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
}

.back-btn svg {
  width: 18px;
  height: 18px;
}

.provisional-title {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--color-primary);
  font-weight: 700;
}

.provisional-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 12px 80px;
}

.provisional-message {
  color: var(--color-text-muted);
  font-size: 15px;
  max-width: 280px;
  line-height: 1.5;
}

.provisional-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 16px;
  background: var(--color-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-wood);
}

.provisional-icon svg {
  width: 26px;
  height: 26px;
}

/* ---------- Resumen (tarjetas KPI) ---------- */

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 12px 0 20px;
}

.summary-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-card);
}

.summary-card__value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}

.summary-card__label {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

/* ---------- Botón principal ---------- */

.btn-primary {
  width: 100%;
  min-height: 52px;
  background: var(--color-accent-wood);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: var(--shadow-card);
  margin-bottom: 24px;
}

.btn-primary:active {
  background: var(--color-primary-dark);
}

.btn-primary svg {
  width: 18px;
  height: 18px;
}

/* ---------- Accesos principales ---------- */

.section-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-text-muted);
  margin: 4px 0 12px;
}

.access-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 26px;
}

.access-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-line);
  border-radius: var(--radius-md);
  min-height: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 6px;
  text-align: center;
}

.access-card:active {
  background: var(--color-gray);
}

.access-card__icon {
  width: 30px;
  height: 30px;
  color: var(--color-primary);
}

.access-card__icon svg {
  width: 100%;
  height: 100%;
}

.access-card__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.2;
}

/* ---------- Actividad reciente ---------- */

.empty-state {
  background: var(--color-white);
  border: 1px dashed var(--color-gray-line);
  border-radius: var(--radius-md);
  padding: 28px 16px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
}

.empty-state__icon {
  width: 34px;
  height: 34px;
  margin: 0 auto 10px;
  color: var(--color-accent-wood);
  opacity: 0.85;
}

.empty-state__icon svg {
  width: 100%;
  height: 100%;
}

/* ---------- Ghost example cards (empty state) ---------- */
.empty-state__guia {
  margin-top: 6px;
  font-size: 13px;
  font-style: italic;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.ghost-wrap {
  pointer-events: none;
  user-select: none;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0.3;
}

.ghost-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 4px;
  display: block;
}

/* ---------- Navegación inferior ---------- */

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--nav-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--color-white);
  border-top: 1px solid var(--color-gray-line);
  display: flex;
  max-width: 560px;
  margin: 0 auto;
  z-index: 30;
}

.nav-btn {
  flex: 1;
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--color-text-muted);
  min-height: 44px;
}

.nav-btn svg {
  width: 22px;
  height: 22px;
}

.nav-btn span {
  font-size: 10.5px;
  font-weight: 500;
}

.nav-btn.is-active {
  color: var(--color-primary);
}

.nav-btn.is-active span {
  font-weight: 700;
}

/* ---------- Utilidades ---------- */

/* ---------- Portada editable ---------- */

/* La pantalla inicial existente (misma estructura, mismos botones):
   ya no centra su contenido verticalmente ni tiene padding lateral
   fijo, porque ahora empieza con la imagen aprobada a todo lo ancho,
   seguida de los controles. Se conserva únicamente el margen superior
   de zona segura (notch/cámara) para que la imagen no quede tapada
   por el propio dispositivo. min-height se conserva para que, cuando
   el contenido es más bajo que la pantalla, la sección siga
   ocupando al menos el alto visible. */
.portada {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: env(safe-area-inset-top);
}

/* Identidad visual aprobada de Melapro GS: elemento <img> real e
   independiente (no un fondo detrás del contenido), con el archivo
   de imagen entregado tal cual, sin recrear ni regenerar nada.
   width: 100% + height: auto + object-fit: contain conservan su
   proporción exacta (610x1393): nunca se deforma, nunca se recorta.
   Al ser un elemento normal dentro del flujo de la pantalla (no un
   background-image), los controles de más abajo quedan siempre
   debajo de ella, nunca superpuestos. */
.portada__imagen-aprobada {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* El logotipo editable, el nombre, la descripción, el contacto y el
   mensaje de personalización (todos dinámicos, provenientes de
   configuracion.negocio) quedan ocultos en esta pantalla para que la
   imagen aprobada se vea limpia, sin nada duplicado encima. Siguen
   existiendo en el HTML exactamente igual que antes y portada.js
   los sigue actualizando con total normalidad (no se modificó ese
   archivo): esto es una ocultación puramente visual, vía CSS. */
.portada__logo,
.portada__nombre,
.portada__profesional,
.portada__descripcion,
.portada__contacto,
.portada__mensaje-vacio {
  display: none;
}

.portada__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.logo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-wood);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.5px;
}

/* Zona inferior limpia para los controles: al quedar fuera del flujo
   de la imagen (que ya ocupó su propio espacio arriba), estos
   botones nunca cubren el logotipo, el nombre, los servicios, la
   fotografía ni el eslogan de la imagen aprobada. */
.portada__estado-vacio,
.portada__estado-listo {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 28px calc(24px + env(safe-area-inset-bottom));
}

.portada__estado-vacio .btn-primary,
.portada__estado-listo .btn-primary {
  margin-bottom: 0;
}

.link-btn {
  background: transparent;
  border: none;
  color: var(--color-primary-soft);
  font-size: 14px;
  font-weight: 600;
  min-height: 44px;
  padding: 4px 10px;
}

.link-btn:active {
  opacity: 0.65;
}

/* ---------- Formulario de configuración de negocio ---------- */

.config-form-wrap {
  padding-bottom: 40px;
}

.config-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.campo-imagen {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 6px;
}

.campo-imagen__vista {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--color-gray);
  flex-shrink: 0;
  box-shadow: var(--shadow-card);
}

.campo-imagen__vista img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.campo-imagen__acciones {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.btn-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-gray-line);
  background: var(--color-white);
  color: var(--color-primary);
  font-size: 13.5px;
  font-weight: 600;
}

.btn-secundario--ancho {
  width: 100%;
  min-height: 48px;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.campo__etiqueta {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* Sufijo de unidad ("(cm)", "(mm)", "(m)") junto a las etiquetas
   Ancho/Alto/Profundidad del formulario de medidas. Peso normal y
   color atenuado para no competir visualmente con la etiqueta. */
.campo__sufijo-unidad {
  font-weight: 400;
  color: var(--color-text-muted);
}

.campo__input {
  min-height: 46px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-gray-line);
  background: var(--color-white);
  padding: 0 14px;
  font-size: 15px;
  color: var(--color-text);
  font-family: inherit;
  width: 100%;
}

.campo__textarea {
  min-height: 76px;
  padding: 10px 14px;
  resize: none;
  line-height: 1.4;
}

.campo__input--error {
  border-color: var(--color-danger);
}

.campo__error {
  font-size: 12.5px;
  color: var(--color-danger);
  margin: -4px 0 0;
}

.config-form__botones {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

/* ---------- Módulo Clientes: lista y registro ---------- */

.clientes-lista__acciones {
  margin: 4px 0 14px;
}

.clientes-lista__acciones .btn-primary {
  margin-bottom: 0;
}

/* Acción compacta del presupuesto: el SVG conserva tamaño de icono
   aunque el botón ocupe todo el ancho del celular. */
.presupuesto__agregar-material {
  gap: 8px;
}

.presupuesto__agregar-material svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.clientes-buscar {
  margin-bottom: 16px;
}

.clientes-lista__mensaje {
  font-size: 13px;
  color: var(--color-danger);
  margin: -6px 0 14px;
}

.medida-guardada-aviso {
  display: grid;
  gap: 4px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid #2d8a60;
  border-radius: 14px;
  background: #12261a;
  color: #6fcf97;
  font-size: 14px;
  line-height: 1.45;
}

.clientes-lista__grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 24px;
}

.cliente-card {
  display: block;
  width: 100%;
  background: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}

.cliente-card:active {
  background: var(--color-gray);
}

.cliente-card__nombre {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
}

.cliente-card__telefono {
  margin-top: 3px;
  font-size: 14px;
  color: var(--color-text);
}

.cliente-card__ciudad {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.cliente-card__acceso,
.expediente-cliente__proyecto-acceso {
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-primary-soft);
}

#clientes-vacio,
#clientes-sin-resultados {
  margin-bottom: 12px;
}

/* ---------- Ficha del cliente ---------- */

.ficha-cliente {
  padding-bottom: 40px;
}

.ficha-cliente__nombre {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 18px;
}

.expediente-cliente__proyectos {
  margin: 0 0 20px;
}

.expediente-cliente__titulo {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--color-primary);
}

.expediente-cliente__resumen {
  margin: 4px 0 10px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.expediente-cliente__lista-proyectos {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.expediente-cliente__proyecto {
  box-shadow: var(--shadow-card);
}

.ficha-cliente__bloques {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ficha-cliente__bloque {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  box-shadow: var(--shadow-card);
}

.ficha-cliente__etiqueta {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.ficha-cliente__valor {
  font-size: 15px;
  color: var(--color-text);
  white-space: pre-wrap;
  word-break: break-word;
}

.ficha-cliente__acciones {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ficha-cliente__acciones .btn-primary,
.ficha-cliente__acciones .btn-secundario {
  margin-bottom: 0;
}

.ficha-cliente__mensaje-exito {
  background: var(--color-white);
  border: 1px solid var(--color-gray-line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-primary-soft);
  margin-bottom: 14px;
}

/* ---------- Confirmación de archivar (ficha) ---------- */

.ficha-cliente__confirmacion {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-card);
  margin-top: 20px;
}

.ficha-cliente__confirmacion-texto {
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.5;
  margin: 0 0 14px;
}

/* ---------- Ver archivados (lista principal) ---------- */

.clientes-lista__ver-archivados {
  display: block;
  margin: -6px 0 14px;
  padding-left: 0;
}

/* ---------- Clientes archivados (tarjetas con botón Restaurar) ---------- */

.cliente-card-archivado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
}

.cliente-card-archivado__info {
  min-width: 0;
  flex: 1;
}

.cliente-card-archivado__acciones {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.cliente-card-archivado__restaurar {
  flex-shrink: 0;
}

.btn-texto.cliente-card-archivado__eliminar {
  padding: 4px 2px;
  font-size: 13px;
  color: var(--color-danger);
}

/* ---------- Módulo Proyectos (por cliente) ---------- */
/* Reutiliza .clientes-lista__acciones, .clientes-lista__grid y
   .empty-state ya existentes para el botón "Nuevo proyecto", la
   cuadrícula y el estado vacío (son utilidades genéricas de lista,
   no específicas de clientes); .ficha-cliente/.ficha-cliente__bloque*
   para la ficha del proyecto. Solo la tarjeta de proyecto necesita
   una clase propia, con el mismo aspecto que .cliente-card. */

.proyecto-card {
  display: block;
  width: 100%;
  background: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}

.proyecto-card:active {
  background: var(--color-gray);
}

.proyecto-card__nombre {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
}

.proyecto-card__tipo {
  margin-top: 3px;
  font-size: 14px;
  color: var(--color-text);
}

.proyecto-card__detalle {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

/* ---------- Módulo Medidas (por proyecto) ---------- */
/* Reutiliza .clientes-lista__acciones, .clientes-lista__grid,
   .clientes-lista__mensaje y .empty-state ya existentes para el
   botón "Nueva medida", la cuadrícula, el mensaje de proyecto no
   disponible y el estado vacío; .ficha-cliente/.ficha-cliente__bloque*
   para la ficha de la medida; .config-form/.campo/.campo__error para
   el formulario. Solo la tarjeta de medida necesita una clase propia,
   con el mismo aspecto que .proyecto-card. */

.medida-card {
  display: block;
  width: 100%;
  background: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}

.medida-card:active {
  background: var(--color-gray);
}

.medida-card__nombre {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
}

.medida-card__detalle {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

/* ---------- Cálculos automáticos (por proyecto) ---------- */

.calculos-info {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 14px;
}

.calculos-resumen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.calculos-resumen__bloque,
.calculo-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.calculos-resumen__bloque {
  padding: 12px 14px;
}

.calculos-resumen__etiqueta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.calculos-resumen__valor {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--color-primary);
}

.calculos-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 24px;
}

.calculos-acciones {
  margin-top: 20px;
}

.calculo-card {
  padding: 14px 16px;
}

.calculo-card__nombre {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 5px;
}

.calculo-card__detalle {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

/* ---------- Módulo Presupuesto (por proyecto) ---------- */
/* Reutiliza .clientes-lista__acciones, .clientes-lista__mensaje y
   .empty-state ya existentes para el botón "Añadir concepto", el
   mensaje de proyecto no disponible y el estado vacío;
   .config-form/.campo/.campo__error/.config-form__botones para el
   formulario. Solo necesita clases propias para: el bloque
   informativo de proyecto/cliente (solo lectura), la tarjeta de cada
   concepto (editable, sin tabla ancha), la línea de subtotal y el
   total general destacado. No se introduce ningún color nuevo: se
   reutiliza la misma paleta ya aprobada (--color-primary,
   --color-accent-wood, --color-white, --color-gray-line). */

.presupuesto-info {
  background: var(--color-white);
  border: 1px solid var(--color-gray-line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 16px;
}

.presupuesto-info__proyecto {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
}

.presupuesto-info__cliente {
  margin-top: 2px;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Microfase v2.5: número de presupuesto (P-0001), mismo estilo ya
   usado para el dato del cliente, sin introducir ningún color nuevo. */
.presupuesto-info__numero {
  margin-top: 2px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.presupuesto-seccion-titulo {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
}

.concepto-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-line);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.concepto-card__fila {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.concepto-card__fila .campo {
  flex: 1 1 120px;
  min-width: 0;
}

.concepto-card__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13.5px;
  color: var(--color-text-muted);
  padding-top: 4px;
  border-top: 1px dashed var(--color-gray-line);
}

.concepto-card__cantidad-final {
  font-size: 12.5px;
  color: var(--color-text-muted);
  margin-top: -2px;
}

.concepto-card__subtotal-valor {
  font-weight: 700;
  color: var(--color-text);
}

.concepto-card__quitar {
  align-self: flex-end;
}

.presupuesto-resumen-linea {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  color: var(--color-text);
  padding: 4px 2px;
}

.presupuesto-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  background: var(--color-white);
  border: 1px solid var(--color-accent-wood);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-top: 4px;
}

.presupuesto-total__etiqueta {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary);
}

.presupuesto-total__valor {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-accent-wood);
}

/* ---------- Documento profesional de presupuesto (v2.5.11) ---------- */

.vista-previa-imprimible {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.vista-previa__banda {
  height: 7px;
  background: var(--color-primary);
  border-radius: 4px 4px 0 0;
  margin-bottom: 22px;
}

.vista-previa__cabecera {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--color-primary);
}

.vista-previa__firma-wrap {
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.vista-previa__firma-bloque {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vista-previa__firma-linea {
  border-bottom: 1px solid #555;
  height: 40px;
}

.vista-previa__firma-etiqueta {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.vista-previa__pie {
  margin-top: 28px;
  padding-top: 12px;
  border-top: 1px solid var(--color-gray-line);
  font-size: 12px;
  color: var(--color-text-muted);
  text-align: center;
}

.vista-previa__logo {
  display: block;
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  object-fit: contain;
}

.vista-previa__identidad {
  min-width: 0;
}

.vista-previa__descripcion {
  margin-top: 4px;
  color: var(--color-text-muted);
  white-space: pre-wrap;
}

.vista-previa__tabla-contenedor {
  width: 100%;
  overflow-x: auto;
  margin-bottom: 14px;
}

.vista-previa__tabla {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 14px;
}

.vista-previa__tabla th,
.vista-previa__tabla td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--color-gray-line);
  text-align: left;
  vertical-align: top;
}

.vista-previa__tabla th {
  color: var(--color-primary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.vista-previa__tabla .vista-previa__numero {
  text-align: right;
}

/* ---------- Ayuda contextual (v2.5.13) ---------- */

.campo__encabezado,
.titulo-con-ayuda,
.accion-con-ayuda {
  display: flex;
  align-items: center;
  gap: 8px;
}

.campo__encabezado {
  justify-content: flex-start;
  margin-bottom: 7px;
}

.campo__encabezado .campo__etiqueta {
  margin-bottom: 0;
}

.titulo-con-ayuda {
  justify-content: space-between;
}

.titulo-con-ayuda .presupuesto-seccion-titulo {
  margin-right: auto;
}

.accion-con-ayuda {
  width: 100%;
}

.accion-con-ayuda .btn-secundario {
  flex: 1;
}

.accion-en-linea-con-ayuda {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ajustes-seccion {
  margin: 22px 0;
  padding: 18px;
  border: 1px solid var(--color-gray-line);
  border-radius: 16px;
  background: var(--color-white);
}

.ajustes-seccion__texto {
  margin: 0 0 16px;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.ayuda-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  background: transparent;
  color: var(--color-primary);
  font: 700 16px/1 var(--font-body);
  cursor: pointer;
}

.ayuda-icono:active {
  background: var(--color-primary-soft);
}

.campo__ayuda {
  margin: -6px 0 14px;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.4;
}

body.ayuda-abierta {
  overflow: hidden;
}

.ayuda-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px;
}

.ayuda-modal__fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(14, 28, 27, 0.58);
}

.ayuda-modal__panel {
  position: relative;
  width: min(100%, 440px);
  padding: 24px 22px 20px;
  border-radius: 22px;
  background: var(--color-white);
  box-shadow: 0 18px 48px rgba(14, 28, 27, 0.24);
}

.ayuda-modal__simbolo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--color-accent-wood);
  color: var(--color-white);
  font-weight: 700;
}

.ayuda-modal__titulo {
  margin: 0 0 10px;
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 24px;
}

.ayuda-modal__texto {
  margin: 0 0 20px;
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.ayuda-modal__siguiente {
  display: grid;
  gap: 4px;
  margin: -4px 0 20px;
  padding: 12px 14px;
  border-left: 3px solid var(--color-accent-wood);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.45;
}

.ayuda-modal__siguiente strong {
  color: var(--color-primary);
}

.ayuda-modal__panel .btn-primary {
  margin-bottom: 0;
}

.guia-paso {
  position: fixed;
  top: calc(78px + env(safe-area-inset-top, 0px));
  right: 14px;
  bottom: auto;
  left: 14px;
  z-index: 850;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 500px;
  margin: 0 auto;
  padding: 13px 42px 13px 13px;
  border: 1px solid rgba(201, 166, 107, 0.8);
  border-radius: 14px;
  background: #201a10;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.4;
  pointer-events: none;
}

.guia-paso__marca {
  color: var(--color-accent-wood);
  font-size: 22px;
  font-weight: 700;
}

.guia-paso__contenido {
  display: grid;
  gap: 2px;
}

.guia-paso__contenido strong {
  color: var(--color-primary);
}

.guia-paso__cerrar {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 22px;
  pointer-events: auto;
}

.guia-objetivo {
  position: relative;
  z-index: 2;
  animation: guia-pulso 1.5s ease-in-out infinite;
}

@keyframes guia-pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 166, 107, 0.25); }
  50% { box-shadow: 0 0 0 7px rgba(201, 166, 107, 0.42); }
}

@media (prefers-reduced-motion: reduce) {
  .guia-objetivo { animation: none; outline: 3px solid var(--color-accent-wood); }
}

/* ---------- Utilidades ---------- */

.hidden {
  display: none !important;
}

@media (min-width: 600px) {
  .app {
    box-shadow: 0 0 0 1px var(--color-gray-line);
  }
}

/* ============================================================
   Impresión (microfase v2.5): solo se activa dentro del diálogo de
   impresión/"Guardar como PDF" del navegador (window.print()); nunca
   afecta la navegación normal de la app. Oculta todo por defecto y
   muestra únicamente el contenido de la Vista previa
   (.vista-previa-imprimible y sus descendientes), sin necesidad de
   tocar el marcado de ninguna otra pantalla. Refuerza además, de
   forma explícita, que el encabezado, la barra inferior y los
   botones (marcados con .no-imprimir) nunca aparezcan impresos.
   ============================================================ */
@media print {
  @page {
    size: A4;
    margin: 14mm;
  }

  html,
  body {
    width: auto;
    min-height: 0;
    background: #fff;
  }

  body * {
    visibility: hidden;
  }

  .vista-previa-imprimible,
  .vista-previa-imprimible * {
    visibility: visible;
  }

  .vista-previa-imprimible {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #111;
  }

  .vista-previa__tabla-contenedor {
    overflow: visible;
  }

  .vista-previa__tabla {
    min-width: 0;
    font-size: 10pt;
  }

  .vista-previa__tabla thead {
    display: table-header-group;
  }

  .vista-previa__tabla tr,
  .ficha-cliente__bloque,
  .presupuesto-resumen-linea,
  .presupuesto-total {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .presupuesto-seccion-titulo {
    break-after: avoid;
    page-break-after: avoid;
  }

  .vista-previa__cabecera {
    border-bottom-color: #222;
  }

  .vista-previa__tabla th,
  .vista-previa__tabla td {
    border-bottom-color: #bbb;
  }

  .vista-previa__tabla th,
  .presupuesto-total__valor,
  .presupuesto-seccion-titulo {
    color: #111;
  }

  .vista-previa__tabla th {
    background: #f0f0f0;
  }

  .vista-previa__banda {
    background: #222 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .vista-previa__firma-wrap {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .vista-previa__pie {
    position: running(footer);
    border-top-color: #ccc;
  }

  #app-header,
  #bottom-nav,
  .no-imprimir,
  .ayuda-modal,
  .guia-paso {
    display: none !important;
  }
}

/* Fotografía de referencia para mediciones */
.medida-foto-seccion {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--color-gray-line);
  border-radius: 16px;
  background: var(--color-white);
}

.medida-foto-seccion__titulo { margin: 0; font-size: 1rem; }
.medida-foto-seccion__texto { margin: 0; color: var(--color-text-muted); line-height: 1.45; }

.medida-foto-preview {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  border-radius: 14px;
  background: #1d2423;
}

.medida-foto-lienzo { position: relative; width: 100%; }
.medida-foto-preview img { display: block; width: 100%; max-height: 420px; object-fit: contain; }
.medida-foto-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.medida-foto-sin-escala { position: absolute; top: 10px; left: 10px; z-index: 4; padding: 6px 10px; border-radius: 999px; background: rgba(20,32,28,.88); color: #fff; font-size: .78rem; font-weight: 800; }
.medidor-foto-instruccion { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 6; padding: 10px 12px; border-radius: 12px; background: rgba(20,32,28,.92); color: #fff; font-size: .82rem; font-weight: 800; line-height: 1.35; text-align: center; pointer-events: none; }
.medida-foto-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; cursor: crosshair; touch-action: manipulation; }
.medidor-foto-panel { display: grid; gap: 12px; padding: 15px; border-radius: 15px; border: 1px solid var(--color-accent-wood); background: #241c0e; }
.medidor-foto-panel__titulo { margin: 0; font-size: 1rem; }
.medidor-foto-panel__aviso, .medidor-foto-panel__paso { margin: 0; line-height: 1.45; }
.medidor-foto-panel__aviso { color: #e3c989; }
.medidor-foto-panel__subtitulo { margin: 0; font-weight: 800; color: #f0ddb0; }
.medidor-foto-panel__ejemplo { margin: -4px 0 0; padding: 10px 12px; border-left: 4px solid var(--color-accent-wood); background: rgba(0,0,0,.25); color: #d9c69b; line-height: 1.4; }
.medidor-foto-panel__paso { padding: 10px 12px; border-radius: 10px; background: var(--color-gray); color: var(--color-text); font-weight: 700; }
.medidor-foto-panel__campos { display: grid; grid-template-columns: 1.4fr .7fr 1.2fr; gap: 8px; }
.medidor-foto-progreso { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.medidor-foto-progreso span { padding: 8px; border-radius: 9px; border: 1px solid var(--color-gray-line); background: var(--color-gray); color: var(--color-text-muted); font-size: .72rem; font-weight: 700; text-align: center; }
.medidor-foto-progreso span.is-actual { border-color: var(--color-accent-wood); box-shadow: 0 0 0 2px rgba(201,166,107,.25); color: var(--color-accent-wood); }
.medidor-foto-progreso span.is-completo { border-color: #2d8a60; background: #16281f; color: #6fcf97; }
.medidor-foto-resultado { display: grid; gap: 5px; padding: 16px; border-radius: 14px; border: 2px solid #2d8a60; background: #12261a; text-align: center; }
.medidor-foto-resultado > span { color: #6fcf97; font-weight: 800; }
.medidor-foto-resultado > strong { color: #8fe3b3; font-size: 2rem; }
.medidor-foto-resultado > small { color: #7fa694; font-weight: 700; }
.medidor-foto-resultado > p { margin: 5px 0 0; color: var(--color-text-muted); line-height: 1.4; }
@media (max-width: 560px) { .medidor-foto-panel__campos, .medida-foto-acciones { grid-template-columns: 1fr; } }
.medida-foto-aviso { margin: -4px 0 0; color: var(--color-text-muted); font-size: .82rem; line-height: 1.35; }
.medida-confirmacion { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.medida-confirmacion input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; }
.medida-foto-confirmada { color: #6fcf97; font-weight: 700; }
.btn-texto { justify-self: start; border: 0; background: transparent; color: var(--color-accent-wood); text-decoration: underline; font: inherit; cursor: pointer; }
.medida-sugerencias { padding: 16px; border-radius: 16px; background: #142620; border: 1px solid #24463a; }
.medida-sugerencias__titulo { margin: 0; font-size: 1rem; color: #8fe3b3; }
.medida-sugerencias__intro { margin: 10px 0 0; color: var(--color-text-muted); line-height: 1.4; }
.medida-sugerencias__lista { margin: 10px 0 0; padding-left: 20px; color: var(--color-text); line-height: 1.45; }
.medida-sugerencias__lista li + li { margin-top: 7px; }

/* Lector de planos PDF */
.plano-panel, .plano-visor, .plano-cotas, .plano-propuesta { display: grid; gap: 12px; padding: 16px; border-radius: 16px; border: 1px solid var(--color-gray-line); background: var(--color-white); }
.plano-panel__titulo { margin: 0; font-size: 1rem; }
.plano-panel__texto, .plano-archivo, .plano-progreso { margin: 0; color: var(--color-text-muted); line-height: 1.45; }
.plano-archivo { font-weight: 700; color: var(--color-text); }
.plano-visor__controles { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plano-visor__controles .btn-secundario { width: auto; padding: 10px 12px; }
.plano-canvas-wrap { overflow: auto; border-radius: 10px; background: #d9d9d7; text-align: center; }
#plano-canvas { display: block; max-width: 100%; height: auto; margin: 0 auto; background: #fff; }
.plano-cotas__lista { display: grid; gap: 10px; }
.plano-cota { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 10px; border-radius: 12px; background: var(--color-gray); }
.plano-cota strong { grid-column: 1 / -1; }
.plano-cota__usar { border: 1px solid var(--color-accent-wood); border-radius: 999px; padding: 7px 10px; background: var(--color-white); color: var(--color-accent-wood); font: inherit; font-size: .78rem; cursor: pointer; }
.plano-propuesta { border-color: var(--color-accent-wood); background: #201a10; }
.plano-propuesta__dimensiones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 480px) { .plano-propuesta__dimensiones, .plano-cota { grid-template-columns: 1fr; } .plano-cota strong { grid-column: 1; } }

/* Calendario */
.calendario-cabecera { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 8px; text-align: center; }
.calendario-mes-btn { width: 48px; min-height: 48px; padding: 0; font-size: 1.8rem; }
.calendario-mes { font-size: 1.15rem; font-weight: 800; }
.calendario-hoy { justify-self: center; margin-top: 3px; font-size: .82rem; }
.calendario-semana, .calendario-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendario-semana { margin-top: 10px; color: var(--color-text-muted); font-size: .72rem; font-weight: 700; text-align: center; }
.calendario-grid { gap: 4px; margin-top: 5px; }
.calendario-dia { position: relative; display: grid; place-items: center; min-width: 0; aspect-ratio: 1; border: 1px solid transparent; border-radius: 10px; background: var(--color-white); color: var(--color-text); font: inherit; cursor: pointer; }
.calendario-dia small { position: absolute; right: 3px; bottom: 3px; display: grid; place-items: center; min-width: 16px; height: 16px; border-radius: 999px; background: #c99647; color: #fff; font-size: .62rem; }
.calendario-dia--vacio { background: transparent; }
.calendario-dia--hoy { border-color: #c99647; font-weight: 800; }
.calendario-dia--seleccionado { background: var(--color-accent-wood); color: #171717; }
.calendario-agenda, .calendario-form { display: grid; gap: 12px; margin-top: 18px; padding: 16px; border: 1px solid var(--color-gray-line); border-radius: 16px; background: var(--color-white); }
.calendario-agenda__titulo { margin: 0; font-size: 1.05rem; text-transform: capitalize; }
.calendario-vacio { margin: 0; color: var(--color-text-muted); }
.calendario-eventos { display: grid; gap: 9px; }
.calendario-evento { display: grid; gap: 5px; width: 100%; padding: 12px; border: 1px solid var(--color-gray-line); border-left: 5px solid #c99647; border-radius: 12px; background: var(--color-white); color: inherit; text-align: left; font: inherit; cursor: pointer; }
.calendario-evento--completado { opacity: .72; border-left-color: #39845f; }
.calendario-evento--cancelado { opacity: .62; border-left-color: var(--color-danger); }
.calendario-evento__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.calendario-evento__tipo { padding: 3px 7px; border-radius: 999px; background: rgba(201,166,107,.15); color: var(--color-accent-wood); font-size: .72rem; }
.calendario-evento__titulo { font-weight: 800; }
.calendario-evento__detalle { color: var(--color-text-muted); font-size: .84rem; }
.calendario-form__doble { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn-peligro { width: 100%; min-height: 46px; border: 1px solid var(--color-danger); border-radius: 12px; background: #2a1615; color: var(--color-danger); font: inherit; font-weight: 800; cursor: pointer; }
@media (max-width: 420px) { .calendario-form__doble { grid-template-columns: 1fr; } .calendario-dia { border-radius: 8px; font-size: .85rem; } }

/* Catálogo de materiales v2.5.22 */
.mas-opcion{width:100%;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:14px;padding:18px;margin:0 0 12px;border:1px solid var(--color-gray-line);border-radius:18px;background:var(--color-white);color:inherit;text-align:left;font:inherit}.mas-opcion__icono{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:rgba(201,166,107,.15);color:var(--color-accent-wood);font-size:25px}.mas-opcion strong,.mas-opcion small{display:block}.mas-opcion small{margin-top:5px;color:var(--color-text-muted);line-height:1.35}.catalogo-intro{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:16px;margin-bottom:14px;border-radius:16px;background:#241c0e;border:1px solid var(--color-accent-wood)}.catalogo-intro p{margin:5px 0 0;line-height:1.4}.catalogo-contador{margin:12px 0;color:var(--color-text-muted)}.catalogo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.material-card{overflow:hidden;border:1px solid var(--color-gray-line);border-radius:18px;background:var(--color-white)}.material-card__imagen{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--color-gray)}.material-card__cuerpo{padding:13px}.material-card__categoria{display:inline-block;padding:4px 8px;border-radius:99px;background:rgba(201,166,107,.15);color:var(--color-accent-wood);font-size:12px;font-weight:700}.material-card h3{margin:8px 0 7px;font-size:17px;line-height:1.2}.material-card__precio,.material-card__detalle{display:block}.material-card__detalle{min-height:34px;margin-top:5px;color:var(--color-text-muted);font-size:11px;line-height:1.35}.material-card__acciones{display:grid;gap:7px;margin-top:12px}.material-card__acciones button{min-height:43px;padding:8px;font-size:13px}.material-foto-selector{display:block;overflow:hidden;border:1px dashed var(--color-gray-line);border-radius:18px;background:var(--color-white);text-align:center;cursor:pointer}.material-foto-selector img{display:block;width:100%;max-height:270px;aspect-ratio:4/3;object-fit:cover}.material-foto-selector span{display:block;padding:12px;font-weight:700;color:var(--color-accent-wood)}@media(max-width:370px){.catalogo-grid{grid-template-columns:1fr}}@media(min-width:760px){.catalogo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.material-card__eliminar{border:0;background:transparent;color:var(--color-danger);text-decoration:underline;font:inherit;font-weight:700;cursor:pointer}.material-card__acciones .btn-primary:disabled{background:var(--color-gray-line);color:var(--color-text-muted);cursor:not-allowed}

/* ---------- Calculadora (v2.5.29) ---------- */

.calc-pantalla {
  min-height: 76px;
  margin: 4px 0 10px;
  padding: 14px 18px;
  border: 1px solid var(--color-gray-line);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-text);
  font-size: 2.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-x: auto;
  white-space: nowrap;
}

.calc-teclado {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin-top: 14px;
}

.calc-tecla {
  min-height: 58px;
  border: 1px solid var(--color-gray-line);
  border-radius: var(--radius-md);
  background: var(--color-gray);
  color: var(--color-text);
  font: inherit;
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
}

.calc-tecla:active {
  background: var(--color-gray-line);
}

.calc-tecla--secundaria {
  background: var(--color-white);
  color: var(--color-text-muted);
}

.calc-tecla--operador {
  background: rgba(201, 166, 107, 0.14);
  border-color: var(--color-accent-wood);
  color: var(--color-accent-wood);
  font-weight: 700;
}

.calc-tecla--igual {
  background: var(--color-accent-wood);
  border-color: var(--color-accent-wood);
  color: #171717;
  font-weight: 800;
}

.calc-tecla--ancha {
  grid-column: span 2;
}

.calc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 14px;
}

.calc-chip {
  padding: 8px 15px;
  border: 1px solid var(--color-gray-line);
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.calc-chip.is-activo {
  background: var(--color-accent-wood);
  border-color: var(--color-accent-wood);
  color: #171717;
}

.calculadora-resultado {
  display: grid;
  gap: 10px;
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--color-gray-line);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

.calculadora-resultado__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--color-text-muted);
}

.calculadora-resultado__fila strong {
  color: var(--color-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.calculadora-resultado__fila--destacada {
  padding-top: 10px;
  border-top: 1px solid var(--color-gray-line);
}

.calculadora-resultado__fila--destacada strong {
  color: var(--color-accent-wood);
  font-size: 1.15rem;
  font-weight: 800;
}

.btn-texto.cliente-card-archivado__duplicar {
  padding: 4px 2px;
  font-size: 13px;
  color: var(--color-accent-wood);
}

/* ── Fase A: presets de ambiente ── */
.medida-ambiente-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: -4px;
}
.ambiente-preset {
  padding: 6px 13px;
  border-radius: 999px;
  border: 1.5px solid var(--color-gray-line);
  background: var(--color-gray);
  color: var(--color-text);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ambiente-preset:active,
.ambiente-preset--activo {
  background: var(--color-accent-green, #24463a);
  border-color: var(--color-accent-green, #24463a);
  color: #fff;
}

/* ── Fase A: grid de dimensiones A×A×P ── */
.medida-dim-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.medida-dim-col { display: grid; }
.medida-dim-input {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  padding: 14px 8px !important;
}
.medida-dim-col .campo__etiqueta { font-size: .78rem; }
.medida-dim-col .campo__error { font-size: .72rem; }

/* ── Fase A: modal fullscreen preview de foto ── */
.medida-foto-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.medida-foto-modal.hidden { display: none; }
.medida-foto-modal__contenido {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 480px;
}
.medida-foto-modal__titulo {
  margin: 0;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
}
.medida-foto-modal__img {
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 12px;
}
.medida-foto-modal__botones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

/* ── Fase B: botón de IA y aviso ── */
.btn-ia {
  width: 100%;
  padding: 13px 20px;
  border-radius: 12px;
  border: 1.5px solid #7c6ad6;
  background: linear-gradient(135deg, #1a1540 0%, #251e52 100%);
  color: #c4b8ff;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .02em;
  transition: opacity .15s;
}
.btn-ia:active { opacity: .75; }
.btn-ia:disabled { opacity: .5; cursor: default; }
.medida-ia-aviso {
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: #1a1540;
  border: 1px solid #7c6ad6;
  color: #c4b8ff;
  font-size: .82rem;
  line-height: 1.4;
}

/* ── Fase C: simulador de distribución ── */
.simul-medida-info {
  margin: 0 0 8px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--color-text-muted);
}
.simul-canvas-wrap {
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #0a1510;
  border: 1px solid #24463a;
}
#simul-canvas {
  display: block;
  width: 100%;
  touch-action: none;
  cursor: grab;
}
#simul-canvas:active { cursor: grabbing; }
.simul-catalogo { margin-top: 16px; }
.simul-catalogo__titulo { margin: 0 0 10px; font-size: .85rem; font-weight: 700; color: var(--color-text-muted); }
.simul-catalogo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.simul-cat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 8px;
  border-radius: 10px;
  border: 1.5px solid var(--color-gray-line);
  background: var(--color-gray);
  cursor: pointer;
  transition: background .12s;
}
.simul-cat-btn:active { background: #24463a; }
.simul-cat-btn__nombre { font-size: .82rem; font-weight: 700; color: var(--color-text); }
.simul-cat-btn__dim { font-size: .72rem; color: var(--color-text-muted); }
.simul-nota {
  margin: 12px 0 0;
  font-size: .78rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.simul-btn-ficha { margin-top: 12px; width: 100%; }