* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
        body {
            font-family: Helvetica, sans-serif;
			margin: 0;
        }
        #captura-contenido{
			   width: 100vw;   /* 100% del viewport, no del padre */
		min-height: 100vh;  /* que siempre abarque todo el alto de pantalla */
		margin: 0 auto;
		overflow: hidden; 
		}
        .cintilla {
            background-color: black;
            width: 100%;
            height: 60vh; /* aproximadamente 2.5 cm */
          /*  display: flex;
            justify-content: space-between;
            align-items: center; */
	      position: relative;
	
		  
            
        }
		
	.cintilla img {
    max-width: 100%;
    height: auto;
    display: block;
    
}

.patron-izquierdo, .patron-derecho {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Centra verticalmente */
  height: 100%; /* igual a la altura de la cintilla */
    max-height: 100%; 	
      margin: 0;            /* elimina márgenes */
    padding: 0;           /* elimina relleno */
    display: block;    
	  max-width: 20%; /* así nunca rebasan */
    object-fit: cover;
}

.patron-izquierdo {
    left: 0;
}

.patron-derecho {
    right: 0;
}

.logo-texto-container {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.logo {
       max-width: 40vw; /* o el tamaño que quieras */
    height: auto;
}
  

        .texto-nota {
            color: #a6a6a6;
            font-size: 60px;
            text-transform: uppercase;
            font-weight: bold;
            font-family: Helvetica, sans-serif;
		  padding-left: calc(4cm + 20px);	
        }
	  .cintilla-naranja{
		background-color: #fc9c21;
          width: 100%;
          height: 1cm;  
		margin-bottom: 5vh;
	  }
	  
	  
	/*Sección del formulario*/
    .seccion-dividida {
            display: flex;
            width: 100%;
            min-height: 500px;
            padding: 20px;
		 height:85vh;
        }
        
        .mitad-izquierda {
            width: 50%;
		 display:flex;
		  align-items: center;	
		   padding-right: 15px;
		 flex-direction: column;
		 justify-content:center;
        }
        
        .mitad-derecha {
		    width: 50%;
            display: flex;
            flex-direction: column;
            padding-left: 15px;
            gap: 20px;
            align-items: center; /* Centramos los elementos horizontalmente */
		  justify-content: center;
        }
        
        .formulario-rosado {
            display: flex;
            flex-direction: column;
            gap: 17px;
		 width: 80%; /* Ancho reducido del formulario */
            max-width: 700px; /* Ancho máximo para no estirarse demasiado */
        }
        
        .campo-formulario {
            background-color: #fee7ca; /* Color rosado */
            border-radius: 40px; /* Esquinas redondeadas */
            padding: 15px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .etiqueta {
            font-weight: bold;
		  font-size: 20px;
            color: black;
            font-family: Helvetica, sans-serif;
            min-width: 120px;
        }
        
        .input-datos {
		  border: none;
		  background: transparent;
		  border-bottom: 1px solid #333;
		  text-align: center;
            flex-grow: 1;
            margin-left: 20px;
		 font-size:18px;
		  font-weight: bold;
            padding: 8px 12px;
            font-family: Helvetica, sans-serif;
		 min-height: 10px; 
        }	
	
	
	   
         
            
	
	       /* Estilos para la mitad derecha */
		.padre-periodo {
		width:100%;
		display:flex;
		align-items:center;
		flex-direction:column;
		margin-bottom:20vh;
		}			
        .periodo-container {
            background-color: #fee7ca;
		  width: 80%;
            border-radius: 40px;
            padding: 15px 20px;
            text-align: center;
            font-weight: bold;
		  font-size: 20px;
            color: black;
            font-family: Helvetica, sans-serif;
        }
        
        .periodo-input {
            border: none;
            background: transparent;
            border-bottom: 1px solid #333;
            width: 15%;
            text-align: center;
            font-weight: bold;
            font-family: Helvetica, sans-serif;
            margin: 0 5px;
		font-size:17px
		
        }
        
        .info-container {
            background-color: #d9d9d9;
		  width: 80%;
		  height:50vh;
		  
            border-radius: 0px;
            padding: 35px;
            font-family: Helvetica, sans-serif;
		  display: flex;
		  flex-direction: column;
		  justify-content: space-between; 
        }
        
        .info-line {
            margin-bottom: 20px;
            display: flex;
		  
		  align-items: center; /* Alinea en la parte superior si el texto es largo */
		  gap: 10px; /* Espacio fijo entre label y value */
		
        }
        
        .info-label {
            font-weight: bold;
		 font-size:20px;
            
        }
        
        .info-value {
          
		  font-size:17px;
        }
	
	
	/* Estilo de la tabla */
	       .tabla {
            display: flex;
            flex-direction: column;
            gap: 10px; /* Espacio entre filas */
            width: 100%;
            max-width: 1200px;
            margin: 10px auto;
            font-family: Helvetica, sans-serif;
        }
        
        .fila {
            display: flex;
            gap: 10px; /* Espacio entre celdas */
        }
        
        .celda {
            padding: 20px;
            background-color: #f5f5f5;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .celda-titulo.col-5 {
		background-color: #fed524;
		color: black;
	   }
        .celda-titulo {
            font-weight: bold;
            background-color: black;
            text-align: center;
		  color: #ffffff;
		  font-size:20px;
        }
	  
        
        .col-1 {
            flex: 1; 
        }
        
        .col-2 {
            flex: 1; 
        }
        
        .col-3 {
            flex: 1; 
        }
        .col4 {
		flex: 2;
		}
        .celda.col-4 {
            flex: 2; 
            display: flex;
            gap: 10px; /* Espacio entre las dos partes */
            padding: 0; /* Eliminamos el padding para que lo tengan los sub-contenedores */
        }
	   .col-4-parte1 {
            flex: 1; /* 1/3 del espacio de col-4 */
            display: flex;
            flex-direction: column;
            gap: 5px; /* Espacio entre los inputs verticales */
            padding: 10px;
        }
        
        .col-4-parte2 {
            flex: 2; /* 2/3 del espacio de col-4 */
            padding: 10px;
		  align-items: center;
            justify-content: center;
		  position: relative;
            display: block;
		  word-break: break-all;
		   overflow-wrap: break-word;
        }
        
        .col-5 {
            flex: 1; 
        }
        
        .input-celda {
		 background-color:#f5f5f5;	
            width: 100%;
            padding: 8px;
            border: 0px solid #ddd;
		 font-size:15px;
            border-radius: 4px;
            box-sizing: border-box;
		 text-align: center;
		 font-family: Helvetica, sans-serif;
        }
	  .input-celda:focus {
		outline: none;      
		border: none;       
		box-shadow: none;   
	  } 
	  
	  .text-celda {
		background-color: #f5f5f5;
		width: 100%;
		height:100%;
		padding: 8px;
		border: 0px solid #ddd;
		font-size: 15px;
		border-radius: 4px;
		box-sizing: border-box;
		font-family: Helvetica, sans-serif;
		min-height: 80px;
		resize: none; /* Opcional: deshabilita el redimensionamiento */
		word-break: break-all;
	}
	.text-celda, 

	
	.text-celda:focus {
		outline: none;      
		border: none;       
		box-shadow: none;  
	}
	   
	  .fila .celda{
		 border: 1px solid #d9d9d9; 
		 border-radius: 0px;
	  }
	  
	  .input-mitad {
            flex: 1; 
        }
	  
	  
	
	.input-dinero::-webkit-outer-spin-button,
	.input-dinero::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	/* Quitar flechas en Firefox */
	.input-dinero[type=number] {
		-moz-appearance: textfield;
	}

	.input-dinero{
		font-family: Helvetica, sans-serif;
	}
	
	.celda-titulo.col-4 {
		display: flex;
		align-items: center;
          justify-content: center;
	   }
	   
	/*Controles de la tabla */
	    .controles-tabla {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
            padding: 10px;
        }
        
        .boton-tabla {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }
        
        .boton-tabla:hover {
            background-color: #45a049;
        }
        
        .boton-tabla.eliminar {
            background-color: #f44336;
        }
        
        .boton-tabla.eliminar:hover {
            background-color: #d32f2f;
        }
        
        .boton-tabla.vacio {
            background-color: #2196F3;
        }
        
        .boton-tabla.vacio:hover {
            background-color: #0b7dda;
        }
	  .total{
		background-color: #fee7ca; 
		color:#545454;
		border-radius: 20px; 
		padding: 15px 20px; 
		font-family: Helvetica, sans-serif; 
		font-size: 20px; 
		font-weight: bold; 
		width: 15%;
		align-items: center;
          justify-content: center;
		text-align:center;
		max-width: 25vw;
		margin: 20px 50px 20px auto;
	  }
	@media (max-width: 950px) {
    .cintilla {
        height: 50vh; /* menos alto en móvil */
		 width: 100%;
		   position: relative;
    overflow: hidden;
    }
    .cintilla img {
    max-width: 100%;
    height: auto;
    display: block;

}

    .logo {
        max-width: 60vw; /* logo ocupa más ancho porque hay menos espacio */
	   margin-top:10vh;
	   
    }

    .patron-izquierdo, .patron-derecho {
        height: 80%; /* los patrones se reducen */
    }
	.seccion-dividida{
	height:400px;
	}
	 .formulario-rosado{
	 width:100%;
	 }
	.campo-formulario{
	flex-direction: column; 
	 align-items: flex-start;
	}
	.etiqueta{
	width:100%;
	font-size: 13px;
	font-weight:bold;
	
	}
	.input-datos{
	width:100%;
	text-align:left;
	margin:0;
	font-size:11px;
	font-weight: bold;
	text-align:left;
	padding: 2px 12px;
	box-sizing: border-box; 
	min-height: 1.5em;
	
	}
	.cintilla-naranja{
	margin-bottom: 1vw;
	}
	.padre-periodo{
	margin-bottom:20vh;
	}
	.periodo-container{
	width:90%;
	flex-direction: column;
	}
	.info-line{
	flex-direction: column;
	gap: 5px;
	align-items:center;
	}
	.info-label{
		font-size:18px;
	}
	  .info-value {
        font-size: 16px;
        word-wrap: break-word; /* rompe palabras largas si es necesario */
	   text-align:center;
    }
	
	    .info-container {
		 height:70vh;
        width: 90%;     /* ocupa más espacio en móvil */
        padding: 20px;  /* menos padding para caber mejor */
    }
.tabla{
	margin-left:10px;
}
.celda-titulo{
font-size:16px;
text-align:center;
align-items:center;
}
 
.fila {
    display: grid;
    grid-template-columns: 15% 15% 15% 35% 15%; /* misma proporción siempre */
    gap: 5px;
}

.celda, .celda-titulo {
    padding: 10px;

    border-radius: 4px;
    box-sizing: border-box;
}

/* subdivisión de col-4 */
.col-4 {
    display: grid;
    grid-template-columns: 33.33% 66.66%;
    gap: 10px;
    padding: 0;
}

.total-wrapper {
  display: flex;
  justify-content: flex-end; /* empuja a la derecha */
  margin: 20px 50px 20px auto;
}

.total {
  background-color: #fee7ca;
  color: #545454;
  border-radius: 20px;
  padding: 15px 20px;
  font-family: Helvetica, sans-serif;
  font-size: 20px;
  font-weight: bold;
  width: auto; 
  max-width: 250px; /* tamaño límite */
  text-align: center;
}
}



@media (max-width: 480px) {
    .cintilla {
        height: 20vh;
		width: 100%;
    }
	
	    .cintilla img {
    max-width: 100%;
    height: auto;
    display: block;
}
    .logo {
        max-width: 70vw;
		margin-top:0;
    }
	
.campo-formulario{
	flex-direction: column; 
	}
.info-container{
	height:50vh;
	}
.padre-periodo{
	margin-bottom:10vh;
	}
	
 .info-label{
		font-size:13px;
	}
.periodo-container{
	width:80%;
	flex-direction: column;
	font-size:13px;
	}
.periodo-input{
width:20%;
font-size:11px;
}
}