/* Estilos para la etiqueta personalizada */
.control-label-custom {
    display: block;       /* Para que ocupe todo el ancho y podamos alinear el texto */
    text-align: right;    /* Alinear a la derecha */
    font-size: 18px;      /* Tamaño de fuente similar al h5, o como desees */
    font-weight: bold;    /* Negrita */
    color: #333;          /* Color oscuro. Puedes usar #555 o el color de tu tema AdminLTE */
    padding-top: 8px;     /* Ajusta este valor para alineación vertical con el input-lg */
    margin-bottom: 0;     /* Elimina el margen inferior por defecto de los labels de Bootstrap */
    line-height: 1;       /* Ajusta si es necesario */
}


/* Estilo para el título "SUBIR IMAGEN" */
.control-label-upload {
    display: block; /* Para que tome su propia línea */
    font-size: 16px; /* Un tamaño de fuente razonable */
    font-weight: bold; /* Para que destaque */
    color: #333; /* Color de texto oscuro */
    margin-bottom: 15px; /* Espacio debajo del título */
    text-align: center; /* Centrar el título */
}

/* Contenedor para la funcionalidad de subida */
.upload-area {
    border: 2px dashed #ddd; /* Borde punteado para indicar un área de "drop" o selección */
    padding: 20px; /* Espacio interno */
    text-align: center; /* Centrar el contenido */
    background-color: #f8f8f8; /* Un fondo ligeramente gris */
    border-radius: 8px; /* Esquinas redondeadas */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); /* Sombra interna sutil */
    transition: all 0.3s ease; /* Transición suave para efectos hover/focus */
}

/* Efecto al pasar el mouse por encima o al enfocar (cuando se hace clic para abrir el selector de archivo) */
.upload-area:hover,
.upload-area:focus-within { /* focus-within es para cuando el input dentro está enfocado */
    background-color: #f0f0f0; /* Fondo un poco más oscuro al interactuar */
    border-color: #bbb; /* Borde más oscuro */
}

/* Ocultar el input de tipo file original */
.upload-area input[type="file"] {
    display: none; /* Esto es clave: oculta el input por defecto */
}

/* Estilo para el botón de "Seleccionar Archivo" */
.btn-upload {
    /* Clases de Bootstrap como btn btn-primary ya le dan buen estilo. */
    /* Asegúrate de que el icono 'fa-upload' de Font Awesome esté disponible */
    margin-top: 10px; /* Espacio sobre el botón si el mensaje de ayuda está encima */
    margin-bottom: 15px; /* Espacio debajo del botón antes de la imagen */
    padding: 10px 25px; /* Más padding para un botón más grande */
    font-size: 16px; /* Tamaño de fuente del botón */
    border-radius: 5px; /* Botón con esquinas redondeadas */
    cursor: pointer; /* Indica que es clickeable */
}

/* Estilo para el texto de ayuda */
.file-info {
    font-size: 12px; /* Tamaño de fuente más pequeño */
    color: #777; /* Color de texto gris */
    margin-top: 5px; /* Espacio entre el botón y este texto */
    margin-bottom: 15px; /* Espacio entre el texto y la imagen */
}

/* Estilo para la previsualización de la imagen */
.previsualizar {
    max-width: 150px; /* Un poco más grande para la previsualización */
    height: auto; /* Mantiene la proporción */
    border: 1px solid #ddd; /* Borde sutil alrededor de la imagen */
    border-radius: 5px; /* Esquinas redondeadas para la imagen */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra ligera */
}