:root {

    --principal_componentes:#33cccc; /*#FFC107 ;*/
    --resaltado_componentes: #34a8a8;/*#ffa807;*/

}

.form-control:focus {
    outline: none; !important; /* Elimina el contorno azul predeterminado */
    border-color: var( --principal_componentes); !important;
    box-shadow: 0 0 5px var( --principal_componentes); !important;/* Agrega un brillo alrededor */
    transition: 0.3s ease-in-out; !important;
}

.form-control {
    outline: none; !important; /* Elimina el contorno azul predeterminado */
    border-color: var(--relleno2); !important;/* Cambia el color del borde */

}


 .btn-principal{
    background: var(--principal_componentes)!important;
    border-color: var(--principal_componentes)!important;
    color: var(--fuente_primaria);
    transition: 0.3s;
}
 .btn-principal:hover{
    background: var(--resaltado_componentes)!important;
    border-color: var(--resaltado_componentes)!important;
    color: var(--fuente_primaria);
}
 .añadir_pagina{
 display: block; /* Lo hace ocupar todoo el ancho disponible */
    width: 60%; /* Ajusta el ancho según lo necesites */
    max-width: 400px; /* Para que no sea excesivamente grande en pantallas grandes */
    margin: 20px auto; /* Lo centra horizontalmente */
    padding: 15px; /* Espaciado interno para que se vea más grande */
    background-color: gray; /* Color de fondo */
    color: white; /* Color del texto para que contraste */
    border: none; /* Elimina el borde predeterminado */
    border-radius: 5px; /* Le da bordes ligeramente redondeados */
    text-align: center; /* Centra el texto dentro del botón */
    font-size: 16px; /* Tamaño del texto */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    transition: background 0.3s ease; /* Efecto suave al cambiar el color */
}

.añadir_pagina:hover {
    background-color: darkgray; /* Cambio de color al pasar el mouse */
}.boton-guardar {
    position: fixed;
    bottom: 15px;
    right: 20px;
    background-color: #28a745; /* Verde éxito */
    color: white;
    padding: 12px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease;
    z-index: 1000;
}

.boton-guardar:hover {
    background-color: #218838;
}

@media (max-width: 768px) {
    .boton-guardar {
        bottom: 10px;
        right: 10px;
        padding: 10px 15px;
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .boton-guardar {
        bottom: 5px;
        right: 5px;
        padding: 8px 12px;
        font-size: 12px;
    }
}


#dropZone {
    transition: all 0.3s ease;
    cursor: pointer;
}

.border-dashed {
    border-style: dashed !important;
}



/* Drag & Drop Zone */
#dropZone {
    transition: all 0.3s ease;
    border: 2px dashed #dee2e6;
}

#dropZone.dragover {
    border-color: #0d6efd;
    background-color: rgba(13, 110, 253, 0.05);
}

#fileInfo {
    font-size: 0.9em;
}

/* Previsualización de imagen */
.img-preview {
    max-width: 200px;
    margin-top: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.dragover {
    border-color: #0d6efd !important;
    background-color: rgba(13, 110, 253, 0.05) !important;
}

.text-danger {
    color: #dc3545 !important;
}