table.edu {
        color: #7A7A7A; 
        font-family: "Archivo", sans-serif; font-weight: 300; 
        border-collapse: separate;  border-spacing: 0; border-radius: 10px; 
        width: 100%;   
        }
    
    p.edu {
        color: #7A7A7A; 
        font-family: "Archivo", sans-serif; font-weight: 300; 
        border-collapse: separate; border-spacing: 0;  
        width: 100%; 
        text-align:center  
        }
        
    th.edu, td.edu {
        border: 1px solid #CCAE86; 
        padding: 3px; 
        text-align: center;  
        }
     
    th.edu { 
        width:auto; 
        background-color: #CCAE86; 
        color: #fff; 
        
        }
        
    .esquinasupizq {     
         border-top-left-radius: 10px;
    }
    
    .esquinasupder {     
         border-top-right-radius: 10px;
    }
    
    /*
    .input-field { 
        width: auto;  
        text-align: center; 
        border-radius: 10px
        }
     */   
        
    input[type="date"].edicion, input[type="time"].edicion { 
        height: 20px; 
        width: auto;  
        text-align: center; 
        border-radius: 10px;  
        color:#D073B8;
        font-weight: 500;
    }
    
    input[type="text"].edicion, textarea.edicion{ 
          
        text-align: center; 
        border-radius: 10px;
        color: #D073B8;
        font-weight: 500;
    }
    
    select.edicion { 
        text-align: center;  
        width: auto;  
        vertical-align: middle; 
        border-radius: 10px; 
        height: auto;   
        color: #D073B8;
        font-weight: 500;
    }
    
    
    /*
    .input-field, select.edu { 
        text-align: center;  
        width: auto;  
        vertical-align: middle; 
        border-radius: 10px; 
        height: auto;   
        color: red;
    }
    */
    .button { 
        background-color: #CCAE86; 
        color: #fff;  
        padding: 3px 6px;  
        text-decoration: none; 
        display: inline-block; 
        font-size: 12px; 
        cursor: pointer; 
        border-radius: 3px; 
        margin-left: 2px; 
        margin-right: 2px; 
    }
    
    a.button, label.button { 
        padding: 4.1px 6.5px;
        
    }
    
    
    /* Este se usará principalmente en el formulario de configuración */
    
    .form-container { 
        max-width: 1000px; 
        margin-left: auto; margin-right: auto; 
     
        border-radius: 8px; 
     /*   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
        color: #7A7A7A; font-family: "Archivo", sans-serif; font-weight: 100; font-size:16px;
        background-color: transparent;
    }
    
    .input-group { 
        margin-bottom: 10px;
        width: auto;
    }
    
    .grupo_linea { 
        display: flex; justify-content: flex-start; 
    }
    
    .linea { 
        margin-right: 10px; 
        display: flex;
    }
    
    .input-group label { 
        display: block; 
        margin-bottom: 5px;  
    }
    
    .select_conf { 
        width:350px;  
    }
    
    .dropdown-expand {
        height: auto;
    }
    
    .dropdown-expand:focus {
        size: 4; /* No es válido en CSS, ver explicación abajo */
    }

    
    .input-group input[type=text], .input-group input[type=date],  .input-group input[type=number], .input-group input[type=tel], .input-group input[type=email], .input-group textarea, .input-group .select_conf {  
        padding-top: 1px; /* Reducir el espacio superior */
        padding-bottom: 1px;
        border: 2px solid #CCAE86; 
        border-radius: 10px; 
        color: #503C21;
        font-size: 15px;
        
    }
    .grupo_linea input[type="checkbox"]:checked {
        background-color: #CCAE86;
}
    
    a.button { 
         background-color: #CCAE86 ;
     }
     
     
    
    /** de momento no se está usando **/
    .input-group input[type=text]::placeholder,  .input-group input[type=number]::placeholder, .input-group input[type=tel]::placeholder, .input-group input[type=email]::placeholder, .input-group textarea::placeholder, .input-group .select_conf::placeholder {  
        text-align: left;
        color: #7A7A7A; font-family: "Archivo", sans-serif; font-weight: 100; font-style: italic;
    }
    
    .input-group input[type=tel] {
        text-align: left;  
    }
    
    .input-group input[type=radio] { 
        margin-right: 10px; 
    }
    
    .input-group input[type=file] { 
        border: 1px solid #ccc; border-radius: 4px; 
        padding: 10px;  
        margin: 5px 0; 
    }
    
    .button-container {
        text-align: center;  
        margin-top: 10px; 
    }
   
    .button_conf { 
        background-color: white; 
        color: #CCAE86; padding: 6px 30px 6px 30px; 
        text-align: center; 
        border-radius: 20px; border: 2px solid #CCAE86; 
        cursor: pointer; 
    }
    
    .button_conf:hover { 
        background-color: #CCAE86;
        color: white;
        border: 2px solid #D073B8;
    }
    
    
    
    /*
    .button_clear_signature { 
        background-color: white ; 
        color: #9C6DFE; padding: 8px 35px 8px 35px; 
        text-align: center; 
        border-radius: 20px; border: 1px solid #9C6DFE; 
        cursor: pointer; 
    }
    */
    .mensaje_telefono { 
        color: #D073B8; 
        font-family: "Archivo", sans-serif; font-weight: 400;  font-size: 15px;
        text-align:justify;
        margin-right: 2px;
        margin-left: 2px;
    }
    
    
    
    .contenedor-horizontal  {
        white-space: nowrap;
        display: flex;
    }

    .div-horizontal {
        flex: 1;
        display: inline-block;
        width: auto; 
        padding: 10px;
     }
     
      .recorte{
        width: 95%; 
    }
    
    .firma{
        border:solid 1px #CCAE86; 
        border-radius: 4px; 
        width:340px;
        height:150px;
        padding:3px;
        cursor: crosshair;
        position:relative;
        margin: 10px auto;
        display: block; 
        background-color:white;}
        
    #cargando {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            color: #9C6DFE;
            background-color: rgba(255, 255, 255, 0.7); /* Fondo semitransparente */
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999; /* Asegura que esté por encima de otros elementos */
        }
        
        .hidden {
            display: none;
            }
        
       
    
 /* ----------------------------------------------------- VERSIÓN MOVIL ------------------------------------- */   
 
     @media screen and (max-width: 500px) { 
            table.edu {
              font-size: 12px;  
            }
            
            th.edu, td.edu {
                max-width: 60px;
            }
            
             
             textarea.edicion{ 
                height: 55px; 
                max-width: 60px;
                color: #D073B8;
                padding-right: 0px;
                padding-left: 0px;
                font-size: 12px;
                font-weight: 500;
            }
            
            input[type="date"].edicion { 
                height: 35px; 
                max-width: 50px;  
                padding-right: 0px;
                padding-left: 0px;
                font-size: 12px;
                font-weight: 500;
            }
            
            input[type="time"].edicion { 
                height: 20px; 
                max-width: 50px;  
                padding-right: 0px;
                padding-left: 0px;
                font-size: 12px;
                font-weight: 500;
            }
            
            select.edicion { 
                height: 55px;
                max-width: 60px;  
                font-size: 12px;
                padding-right: 0px;
                padding-left: 0px;
                font-weight: 500;
            }
            
             .edu input:focus { 
                 font-size: 10px;
             }
            
            .button { 
                margin-top:5px; 
            }
            
             
                 
            .contenedor-horizontal {
                flex-direction: column; /* Cambiamos la dirección a columna para que los elementos estén uno encima del otro */
                
            }
            
            .div-horizontal {
                display: block; 
                width: 100%; 
                margin-top: -20px;
                margin-bottom: 10px;
            }
            /*
            .input-group {
                margin-bottom: 10px; /* Reduce el espacio entre los grupos de entrada 
            }
               
            .input-field {
                width: 100%; 
            }
            */ 
             .recorte{
                width: 100%; /* Ajusta el ancho de los campos de entrada para ocupar todo el ancho disponible */
            }
            
            .input-group input[type=text],  .input-group input[type=number], .input-group input[type=tel], .input-group input[type=email], .input-group textarea, .input-group .select_conf {  
                    font-size: 13px;
                     border: 1px solid #CCAE86;
                }
                
            .input-group textarea {  
                    height: 100px;
                }  
                
            .linea {  
                   font-size: 13px;
                }    
                
             .button_conf { 
                    padding: 4px 20px 4px 20px; 
                    font-size: 15px;
                    border: 1px solid #9C6DFE; 
                    }    
                    
            .mensaje_telefono { 
                font-size: 13px;        
            }

    
    }