/* Componentes visuales reutilizables por cualquier calculadora del sitio:
   selector de modo, tarjetas de material, filas de abertura, avisos,
   bloque de resultado y detalle técnico desplegable. */

/* Header y footer del sitio: se repiten igual en la home y en cada
   calculadora (no hay build step para compartir un partial). */
.sitio-header {
  position: relative;
  border-bottom: 1px solid var(--color-border);
  padding: var(--espacio-4) 0;
}

.sitio-header__interior {
  display: flex;
  align-items: center;
  gap: var(--espacio-5);
}

.sitio-marca {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.15s ease;
}

.sitio-marca:hover {
  opacity: 0.85;
}

/* Logo completo (isotipo + wordmark), un único asset — ver
   assets/img/logo-dimetral-completo.svg. Se fija por alto y el ancho
   queda automático para no deformar el aspect-ratio. */
.sitio-logo-completo {
  height: 28px;
  width: auto;
  flex: none;
}

.sitio-nav {
  display: none;
  align-items: center;
  gap: var(--espacio-5);
  margin: 0 auto 0 0;
}

.sitio-nav a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}

.sitio-nav a:hover {
  color: var(--color-text);
}

.sitio-menu-movil {
  margin-left: auto;
}

.sitio-menu-movil summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radio-sm);
  padding: var(--espacio-1) var(--espacio-3);
}

.sitio-menu-movil summary::-webkit-details-marker {
  display: none;
}

.sitio-menu-movil[open] summary {
  color: var(--color-text);
}

.sitio-menu-movil__lista {
  position: absolute;
  right: var(--espacio-4);
  margin-top: var(--espacio-2);
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-md);
  padding: var(--espacio-2);
  display: flex;
  flex-direction: column;
  min-width: 180px;
  z-index: 10;
}

.sitio-menu-movil__lista a {
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
  padding: var(--espacio-2) var(--espacio-3);
  border-radius: var(--radio-sm);
}

.sitio-menu-movil__lista a:hover {
  background: var(--color-surface);
}

.sitio-header__cta {
  margin-left: auto;
}

@media (min-width: 720px) {
  .sitio-nav {
    display: flex;
  }

  .sitio-header__cta {
    margin-left: 0;
  }

  .sitio-menu-movil {
    display: none;
  }
}

.sitio-footer {
  border-top: 1px solid var(--color-border);
  margin-top: var(--espacio-7);
  padding: var(--espacio-6) 0;
}

.sitio-footer__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-4) var(--espacio-6);
}

.sitio-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sitio-footer__nav a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}

.sitio-footer__nav a:hover {
  color: var(--color-text);
}

.sitio-footer__nota {
  margin: 0 0 0 auto;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.paso {
  margin-bottom: var(--espacio-6);
}

.paso__pregunta {
  margin-bottom: var(--espacio-3);
}

/* Selector Simple / Pro */
.selector-modo {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radio-md);
  padding: 3px;
  background: var(--color-bg);
  margin-bottom: var(--espacio-5);
}

.selector-modo__opcion {
  border: none;
  background: transparent;
  padding: var(--espacio-2) var(--espacio-4);
  border-radius: var(--radio-sm);
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text-muted);
}

.selector-modo__opcion[aria-pressed='true'] {
  background: var(--color-surface-strong);
  color: var(--color-primary-dark);
  box-shadow: var(--sombra-sm);
}

/* Campo de formulario genérico */
.campo {
  margin-bottom: var(--espacio-4);
}

.campo__ayuda {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: var(--espacio-1);
}

.campo__error {
  font-size: 0.85rem;
  color: var(--color-danger);
  margin-top: var(--espacio-1);
}

.campo-con-unidad {
  position: relative;
}

.campo-con-unidad input {
  padding-right: 26px;
}

.campo-con-unidad__sufijo {
  position: absolute;
  top: 50%;
  right: var(--espacio-2);
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-size: 0.85rem;
  pointer-events: none;
}

.fila-medidas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espacio-4);
}

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  border-radius: var(--radio-sm);
  padding: var(--espacio-2) var(--espacio-4);
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 600;
}

.btn--primario {
  background: var(--color-primary);
  color: var(--color-on-accent);
}

.btn--primario:hover {
  background: var(--color-primary-hover);
}

.btn--secundario {
  background: var(--color-surface-strong);
  border-color: var(--color-border);
  color: var(--color-text);
}

.btn--secundario:hover {
  border-color: var(--color-primary);
}

.btn--enlace {
  background: none;
  border: none;
  color: var(--color-primary);
  padding: var(--espacio-1) 0;
  font-weight: 600;
}

.btn--icono {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radio-sm);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  cursor: pointer;
}

.btn--icono:hover {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

/* Aberturas */
.aberturas-lista {
  list-style: none;
  margin: 0 0 var(--espacio-3);
  padding: 0;
  display: flex;
  flex-direction: column;
}

.aberturas-lista:empty {
  margin-bottom: 0;
}

.abertura-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.aberturas-lista li.abertura-fila:last-child {
  border-bottom: none;
}

.abertura-fila__campo {
  flex: 1 1 100px;
  min-width: 90px;
}

.abertura-fila__campo select,
.abertura-fila__campo input {
  width: 100%;
  padding: var(--espacio-1) var(--espacio-2);
}

.abertura-fila__campo--tipo {
  flex-basis: 110px;
}

.abertura-fila__campo--cantidad {
  flex: 0 1 64px;
  min-width: 56px;
}

.abertura-fila__eliminar {
  flex: 0 0 auto;
  margin-left: auto;
  width: 28px;
  height: 28px;
}

.abertura-fila__error {
  flex-basis: 100%;
  margin: 0;
}

/* Tarjetas de tipo de ladrillo */
.ladrillos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--espacio-3);
  margin-bottom: var(--espacio-3);
}

.ladrillo-card {
  text-align: left;
  border: 2px solid var(--color-border);
  border-radius: var(--radio-md);
  background: var(--color-surface);
  padding: var(--espacio-3);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
}

.ladrillo-card:hover {
  border-color: var(--color-primary-surface);
}

.ladrillo-card[aria-pressed='true'] {
  border-color: var(--color-primary);
  background: var(--color-primary-surface);
}

.ladrillo-card[aria-pressed='true'] .icono-ladrillo__cuerpo,
.ladrillo-card[aria-pressed='true'] .icono-ladrillo__hueco {
  stroke: var(--color-primary);
}

.icono-ladrillo {
  width: 100%;
  height: 34px;
  margin-bottom: var(--espacio-1);
}

/* El ícono queda neutro por defecto; solo se tiñe de acento cuando la
   tarjeta está seleccionada (ver .ladrillo-card[aria-pressed] más abajo). */
.icono-ladrillo__cuerpo {
  fill: var(--color-surface-strong);
  stroke: var(--color-text-muted);
  stroke-width: 1.5;
}

.icono-ladrillo__cuerpo--macizo {
  fill: var(--color-surface-strong);
  stroke: var(--color-text-muted);
}

.icono-ladrillo__hueco {
  fill: var(--color-bg);
  stroke: var(--color-text-muted);
  stroke-width: 1;
  opacity: 0.7;
}

.icono-ladrillo__veta {
  stroke: var(--color-text-muted);
  stroke-width: 1;
  opacity: 0.5;
}

.ladrillo-card__nombre {
  font-weight: 700;
}

.ladrillo-card__detalle {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

/* Tarjeta de selección visual genérica: la usa hormigón para "¿Qué vas a
   construir?" y cualquier calculadora futura que necesite un patrón
   similar. Deliberadamente independiente de .ladrillo-card para no
   acoplar calculadoras entre sí. */
.tarjetas-seleccion {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--espacio-3);
  margin-bottom: var(--espacio-3);
}

.tarjeta-seleccion {
  text-align: left;
  border: 2px solid var(--color-border);
  border-radius: var(--radio-md);
  background: var(--color-surface);
  padding: var(--espacio-3);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
}

.tarjeta-seleccion:hover {
  border-color: var(--color-primary-surface);
}

.tarjeta-seleccion[aria-pressed='true'] {
  border-color: var(--color-primary);
  background: var(--color-primary-surface);
}

.tarjeta-seleccion__nombre {
  font-weight: 700;
}

.tarjeta-seleccion__detalle {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.icono-seleccion {
  width: 100%;
  height: 34px;
  margin-bottom: var(--espacio-1);
}

/* Avisos de transparencia */
.aviso {
  border-radius: var(--radio-md);
  padding: var(--espacio-3) var(--espacio-4);
  font-size: 0.92rem;
  margin-bottom: var(--espacio-3);
}

.aviso p {
  margin: 0 0 var(--espacio-2);
}

.aviso p:last-child {
  margin-bottom: 0;
}

.aviso--sutil {
  background: var(--color-surface-strong);
  color: var(--color-text-muted);
}

.aviso--destacado {
  background: var(--color-warning-surface);
  border: 1px solid var(--color-warning-border);
  color: var(--color-warning);
}

.aviso__titulo {
  font-weight: 700;
  display: block;
  margin-bottom: var(--espacio-1);
  color: var(--color-text);
}

/* Errores de negocio (bloquean el cálculo) */
.error-banner {
  background: var(--color-danger-surface);
  color: var(--color-danger);
  border-radius: var(--radio-md);
  padding: var(--espacio-3) var(--espacio-4);
  margin-bottom: var(--espacio-4);
  font-weight: 600;
}

/* Bloque de resultado */
.resultado {
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radio-lg);
  padding: var(--espacio-5);
  margin-bottom: var(--espacio-4);
}

.resultado__pregunta {
  margin: 0 0 var(--espacio-1);
  color: var(--color-text-muted);
  font-weight: 600;
}

.resultado__numero {
  margin: 0 0 var(--espacio-3);
  font-size: clamp(2.2rem, 1.8rem + 2vw, 3rem);
  color: var(--color-primary-dark);
}

.resultado__recomendacion {
  font-size: 1.05rem;
  color: var(--color-text);
  font-weight: 600;
}

.resultado__nota {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: var(--espacio-3);
}

.resumen-lista {
  margin: var(--espacio-4) 0 0;
  display: grid;
  gap: var(--espacio-2);
}

.resumen-lista__fila {
  display: flex;
  justify-content: space-between;
  gap: var(--espacio-3);
  padding: var(--espacio-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.resumen-lista__fila:last-child {
  border-bottom: none;
  font-weight: 700;
}

/* Detalle técnico desplegable */
.detalle-tecnico {
  border: 1px solid var(--color-border);
  border-radius: var(--radio-md);
  padding: var(--espacio-3) var(--espacio-4);
  margin-bottom: var(--espacio-6);
}

.detalle-tecnico summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.detalle-tecnico summary::-webkit-details-marker {
  display: none;
}

.detalle-tecnico summary::after {
  content: ' ↓';
}

.detalle-tecnico[open] summary::after {
  content: ' ↑';
}

.pasos-lista {
  margin: var(--espacio-3) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--espacio-2);
}

.pasos-lista__item {
  display: grid;
  gap: 2px;
  padding: var(--espacio-2) 0;
  border-bottom: 1px dashed var(--color-border);
}

.pasos-lista__formula {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

.pasos-lista__resultado {
  font-weight: 700;
}