.btn {
  /* border: none; */
  background-color: #e6e6e6;
  font-size: 0.85em;
  padding: 10px 12px;
  cursor: pointer;
  display: inline-block;
}

/* el botón Calcular (mismo tamaño en escritorio y móvil) */
#tabladiametrogrosor .btn, #tabladiametrogrosor34 .btn{
	font-size: 0.95em;
	padding: 6px 10px;
}

/* columna ARISTA: franja de color y letra siempre en línea, apoyada en la
   base de la celda (sin nowrap la celda estrecha parte la letra debajo);
   el respiro de 12px lo pone el padding-bottom inline de cada celda */
#tablamaint td:first-child, #tablamaint34 td:first-child{
	white-space: nowrap;
	vertical-align: bottom;
}
 .loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('img1/giphy.webp') 50% 50% no-repeat rgb(249,249,249);
    opacity: 1;
}
 
 #total{
	 	max-width: 1300px;
	 
 }

 
 #cabecera
 {
	margin-top: 0px;
	margin-left: 90px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
 }

 #logo
 {
	margin-top: 35px;
	margin-left: 10px;
	margin-bottom: 15px;
 }

 #logo img{
	width: 280px;
	max-width: 100%;
	height: auto;
 }

 #lineacapa{
	flex-basis: 100%;
 }

 #linea{
	width: 100%;
	height: 2px;

 }

#resto{
	  margin-left: 80px;
	  margin-right: 10px;
}

#menu{
  font-family: Arial;
  font-size:  1.08em;
  padding-bottom: 15px;
  padding-top: 15px;

 }

/* rótulo del menú (antes era la imagen Efrecuencia.jpg) */
#Efrecuencia{
	color: #8c8c8c;
	font-size: 15px;
	letter-spacing: 0.5px;
	margin: 18px 0 18px 2px;
}

.botonera{
	text-align: center;
}
 
 
/*  seccion v4 columna 1  */
 #tbV4{
	padding-top: 6px;
	}
 #imagenv4 {

	float: left;
    font-size:  1.00em;
	 
 }
 
 #diametrogrosor
 {
  float: right;
  margin-top: 15px;	
 }
  #diametrogrosor34
 {
  float: right;
  margin-top: 25px;	
 }
 
 table#tabladiametrogrosor
 {
	font-family: Arial;
	font-size: 1.09em;
    font-weight: bold;
	 
 }
  table#tabladiametrogrosor34
 {
	font-family: Arial;
	font-size: 1.09em;
    font-weight: bold;
	 
 }
 
 #tablacontenidos4
 {
	 float: left ;
	 padding-top: 15px;
  
 }
  #tablacontenidos34
 {
	 float: left ;
	 padding-top: 15px;
  
 }
  table#tabladiametrogrosor, #tabladiametrogrosor td{
  border: none;
  vertical-align: bottom;
  text-align: left;

  }
 
  table#tabladiametrogrosor34, #tabladiametrogrosor34 td{
  border: none;
  vertical-align: bottom;
  text-align: left;
  }
 
  #tablamain {
  float: left; 
  max-width: 500px; 
  
 }
 #columna2{
	float: left;
	margin-top: 15px;
	margin-left: 20px;
	padding-top: 0px;
	padding-left: 0px;
	/* mismo criterio que #columna234: a la derecha de la tabla ocupando el
	   hueco; en pantallas estrechas mandan las media queries de abajo */
	max-width: calc(100% - 545px);
}
 #columna234{
	float: left;
	margin-top: 1px;
	margin-left: 10px;
	padding-top: 0px;
	padding-left: 0px;
	/* sin tope fijo: la imagen de triángulos ocupa todo el hueco que deja la
	   tabla de aristas (545px ≈ tabla + márgenes); en pantallas estrechas
	   mandan las media queries de abajo */
	max-width: calc(100% - 545px);
}

 #tablamain th{
	font-family: Arial;
    border-bottom: solid 2px;
    border-right: dashed 1px;
 }
 

#tablamaint{
	border-collapse: collapse;
	border-top: solid 2px;
    border-bottom: solid 2px;
}

 
#tablamaint td{
    border-collapse: collapse; 
  	font-family: Arial;
    font-size:  1.3em; 
	padding-top: 5px;
	padding-bottom: 0px;
	border-right: dashed 1px;
	border-bottom: dashed 1px;
	vertical-align: bottom;
	text-align: center;
	 
 }
 
#tablamain th:last-child
{
     border-right: none;
}

#tablamaint td:last-child
{
     border-right: none;
}
#tablamaint td:nth-child(6)
{
     border-right: none;
}
#tablamaint td:nth-child(4)
{
    font-size:  0.9em;
}

#trianguloscapa{

	margin-top: 5px;	
	}
 #triangulos{
	max-width: 505px;
    height: auto;
 }
 #tablamamaderacapa{
	 
	 margin-top: 22px;
	 margin-right: 0px;	
 }
 
   table#tablamamadera{
  width: 505px;
  max-width: 100%;
  border-collapse: collapse;
  /* padding: 3px; */
  font-family: Arial;
  /* font-size:  1.08em;  */
  border-top: solid 2px;
  border-bottom: solid 2px;
  border-left: dashed 1px;
  border-right: dashed 1px;	

	 
 }
#tablamamadera td{
  border-collapse: collapse; 
   padding: 5px;
 border-left: dashed 1px;
 /* border-right: dashed 1px;	 */
 border-bottom: dashed 1px;
}
#tablamamadera tr:nth-child(4)
{

/*   border-bottom: solid 2px; */
}

/*  fin  seccion v4 columna 1 */
 
 
 

 #tbV34{
	padding-top: 6px;
	}

    #imagenv34
 {
	float: left;
    font-size:  1.00em;
	 
	 
 }
    #imagenv35
 {
	float: left;
    font-size:  1.00em;
	  
	 
 }
 

 
   #diametrogrosor35
 {
  float: right;
    font-size:  1.08em;
/*   margin-right: 250px;
  margin-top: 35px;	
  padding-left: 35px;
  padding-top: 15px; */
 }
 
 

  
  #tablamain34 {
  float: left; 
  max-width: 500px; 
  
 }


  #triangulos34{
	/* max-width: 505px; */
    /* height: auto; */
	margin-top: 25px;
	 
 }
   #triangulos35{
    /* max-width: 505px; */
    /* height: auto; */
	/* margin-top: 35px; */
	 
 }
 #imagenV4{
	 
	max-width: 228px;
    height: auto;
 }
 

 #tablamain34 th{
	font-family: Arial;
    border-bottom: solid 2px;
    border-right: dashed 1px;
 }
 

#tablamaint34{
	border-collapse: collapse;
	border-top: solid 2px;
    border-bottom: solid 2px;
}

 
#tablamaint34 td{
    border-collapse: collapse; 
  	font-family: Arial;
    font-size:  1.3em; 
	padding-top: 5px;
	padding-bottom: 0px;
	border-right: dashed 1px;
	border-bottom: dashed 1px;
	vertical-align: bottom;
	text-align: center;
	 
 }
 
#tablamain34 th:last-child
{
     border-right: none;
}

#tablamaint34 td:last-child
{
     border-right: none;
}
#tablamaint34 td:nth-child(6)
{
     border-right: none;
}
#tablamaint34 td:nth-child(4)
{
    font-size:  0.9em;
}

#tablamamaderacapa34{
	 
	 margin-top: 37px;
	 margin-left: 5px;	
 }
 
   table#tablamamadera34{
  width: 515px;
  max-width: 100%;
  border-collapse: collapse;
  /* padding: 3px; */
  font-family: Arial;
  /* font-size:  1.08em;  */
  border-top: solid 2px;
  border-bottom: solid 2px;
  border-left: dashed 1px;
  border-right: dashed 1px;	

	 
 }
#tablamamadera34 td{
  border-collapse: collapse; 
   padding: 5px;
 border-left: dashed 1px;
 /* border-right: dashed 1px;	 */
 border-bottom: dashed 1px;
}
#tablamamadera34 tr:nth-child(4)
{

/*   border-bottom: solid 2px; */
}

#tbV34{

padding-top: 6px;
}
#tbV35{

padding-top: 6px;
}

/* ===== botón Descargar PDF (pdf.js) ===== */
.pdfcapa{
	clear: both;
	text-align: center;
	padding: 25px 0 100px;
}
.btn-pdf{
	font-size: 0.95em;
	padding: 10px 20px;
}
.btn-pdf:disabled{
	opacity: 0.45;
	cursor: default;
}

/* ===== informe imprimible (Descargar PDF) ===== */
#printReport{ display: none; }

@media print{
	/* sin márgenes de página el navegador no pinta su URL/fecha en el PDF;
	   el margen visual lo pone el padding del informe */
	@page{ size: A4; margin: 0; }
	body > :not(#printReport){ display: none !important; }
	#printReport{
		display: block !important; font-family: Arial; color: #000; padding: 12mm 14mm;
		/* sin esto el navegador descarta los fondos al imprimir y las franjas
		   de color de las aristas salen en blanco */
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
	#printReport .prcab{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		border-bottom: 2px solid #000;
		padding-bottom: 8px;
	}
	#printReport .prcab img{ width: 220px; height: auto; }
	#printReport .prcab span{ font-size: 13px; }
	#printReport h2{ font-family: Arial; font-size: 19px; margin: 14px 0 4px; }
	#printReport .prsec{ padding-top: 16px; page-break-inside: avoid; }
	#printReport .prtabla{ page-break-inside: auto; }
	#printReport .prsec h3{ font-family: Arial; font-size: 15px; margin: 0 0 8px; }
	#printReport img.prfluida{ max-width: 100%; height: auto; }
	#printReport .prpie{
		margin-top: 20px;
		border-top: 1px solid #999;
		padding-top: 6px;
		font-size: 11px;
		text-align: center;
	}
	#printReport .prpie a{ color: #555; }
}

/* ===== responsive (no cambia el aspecto de escritorio) ===== */

/* las tablas de corte ocupan el 100% sin barras de desplazamiento */
#tablacontenidos4, #tablacontenidos34{
	max-width: 100%;
}

/* imágenes grandes fluidas (pisan el width/height inline) */
#trianguloscapa img, #trianguloscapa34 img{
	max-width: 100% !important;
	height: auto !important;
}
#imagenv4 img, #imagenv34 img{
	max-width: 100%;
	height: auto;
}

@media (max-width: 1250px){
	#cabecera{ margin-left: 20px; margin-right: 10px; }
	#resto{ margin-left: 20px; }
	/* la columna de triángulos+madera encoge antes que caer bajo la tabla
	   (sus contenidos ya son fluidos); en móvil (<=820) vuelve al 100% */
	#columna2, #columna234{ max-width: min(525px, 100% - 545px); }
}

@media (max-width: 820px){
	#cabecera{ margin-left: 10px; margin-right: 10px; justify-content: center; }
	#logo{ margin-left: 0; }
	#resto{ margin-left: 10px; margin-right: 5px; }
	#menu{ padding-top: 5px; text-align: center; }
	#Efrecuencia{ margin-left: 0; }
	/* cabecera de cada domo: imagen/canvas en fila completa y centrada,
	   con diámetro y grosor debajo, también centrados */
	/* max-width 100% anula el max-width:228px de #imagenV4 (sin DOCTYPE los
	   ids no distinguen mayúsculas y esa regla encoge también este div) */
	#imagenv4, #imagenv34{ float: none; width: 100%; max-width: 100%; text-align: center; }
	#diametrogrosor, #diametrogrosor34{ float: none; margin-top: 18px; margin-bottom: 10px; display: flex; justify-content: center; }
	/* botón Calcular a la derecha de los campos, centrado y más grande */
	table#tabladiametrogrosor, table#tabladiametrogrosor34{
		display: grid;
		grid-template-columns: auto auto auto;
		align-items: center;
		column-gap: 4px;
	}
	#tabladiametrogrosor tbody, #tabladiametrogrosor34 tbody,
	#tabladiametrogrosor tr, #tabladiametrogrosor34 tr{
		display: contents;
	}
	#tabladiametrogrosor tr:last-child td, #tabladiametrogrosor34 tr:last-child td{
		grid-row: 1 / 3;
		grid-column: 3;
	}
	#tabladiametrogrosor .btn, #tabladiametrogrosor34 .btn{
		margin-left: 10px;
	}
	#columna2, #columna234{ margin-left: 0; max-width: 100%; }
	#tablamamaderacapa34{ margin-left: 0; }
	table#tablamamadera, table#tablamamadera34{ width: 100%; }
}
/* firma del desarrollador: pegada al borde derecho, a la altura del boton
   Descargar PDF (top/bottom calcan los paddings de .pdfcapa para centrarla
   verticalmente contra la fila del boton) */
.pdfcapa{ position: relative; }
.dev-credit{
	font-size: 13px;
	color: #888;
	white-space: nowrap;
	position: absolute;
	right: 0;
	top: 25px;
	bottom: 100px;
	display: flex;
	align-items: center;
}
@media (max-width: 820px){
	.dev-credit{ position: static; display: block; margin: 18px 0 0; }
}
.dev-credit a{
	text-decoration: none;
	font-weight: bold;
	margin-left: 5px; /* el display:flex del contenedor colapsa el espacio del texto */
}
.dev-credit a:hover span{
	text-decoration: underline;
}