/* ==================================== */
/* 1. ESTILOS BASE Y FONDO              */
/* ==================================== */
body {
    font-family: sans-serif;
    background-image: url('fondo.jpg'); 
    background-size: cover; 
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #6dd5ed; 
    
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

.container {
    background: white; 
    padding: 40px 50px;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: 90%;
    max-width: 450px; 
}

/* Permitir que el contenedor de administración sea más ancho */
.container[style*="max-width: 500px"] {
    max-width: 500px !important;
}

h1 {
    color: #2193b0;
    margin-bottom: 30px;
    font-size: 1.5em;
}

/* ==================================== */
/* 2. DISEÑO RESPONSIVO (MÓVIL)         */
/* ==================================== */
@media (max-width: 600px) {
    .container {
        /* 💥 Reducir padding horizontal y expandir ancho para móvil 💥 */
        padding: 30px 20px; 
        width: 95%; 
        max-width: 100%; 
    }
}


/* ==================================== */
/* 3. LOGO Y PIE DE PÁGINA (CRÉDITOS)   */
/* ==================================== */
.logo-superior {
    display: block; 
    max-width: 75px; 
    height: auto;
    margin: 0 auto 15px auto; 
}

.footer-creditos {
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px solid #eee; 
    font-size: 0.75em; 
    color: #999; 
    text-align: center;
}


/* ==================================== */
/* 4. FORMULARIOS Y CAMPOS DE ENTRADA   */
/* ==================================== */
.form-group {
    margin-bottom: 20px;
    text-align: left; 
}

.container input[type="text"], 
.container input[type="password"] {
    width: 100%; 
    padding: 12px; 
    margin-top: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; 
}


/* --- Estilos de Archivo Input (Botón de Subida) --- */
input[type="file"] {
    display: block; 
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

label[for="file"] {
    display: block;
    cursor: pointer;
    background-color: #6dd5ed;
    color: white;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    transition: background-color 0.3s;
}

label[for="file"]:hover {
    background-color: #2193b0;
}

.nota {
    font-size: 0.9em;
    color: #666;
}


/* ==================================== */
/* 5. BOTONES Y LINKS (GLOBAL)          */
/* ==================================== */
/* Estilo Sólido (Máxima prioridad para enlaces) */
button, a.button { 
    background-color: #0d47a1;
    color: white !important; 
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s;
    
    text-decoration: none !important; 
    display: inline-block !important; 
    box-sizing: border-box; 
}

button:hover, a.button:hover {
    background-color: #0c3b88;
}

/* Botón Iniciar Sesión / Generar Enlace */
.container form button[type="submit"] {
    width: 100%;
    margin-top: 15px;
}

/* Separador para botones de retorno (Subir otro archivo) */
.button-separador {
    margin-top: 30px; 
}


/* ==================================== */
/* 6. BARRA DE SESIÓN Y MONITOREO       */
/* ==================================== */
.info-sesion {
    font-size: 0.9em;
    color: #666; 
    padding-bottom: 10px; 
    margin-bottom: 20px; 
    border-bottom: 1px solid #eee; 
    text-align: right; 
}

.info-sesion a {
    color: #0d47a1; 
    text-decoration: none; 
    transition: color 0.3s;
}

.info-sesion a:hover {
    color: #2193b0; 
    text-decoration: underline; 
}


/* ==================================== */
/* 7. BARRA DE COPIA (RESULTADO)        */
/* ==================================== */
.link-resultado {
    margin-top: 30px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
}

.copiar-container {
    display: flex; 
    border: 1px solid #ccc; 
    border-radius: 5px;
    overflow: hidden; 
    margin-bottom: 0; 
}

#enlaceCompartir {
    flex-grow: 1; 
    padding: 10px;
    border: none; 
    font-size: 1.1em;
    background-color: #f9f9f9; 
    cursor: text; 
}

.btn-copiar {
    background-color: #007bff; 
    color: white;
    padding: 10px 15px; 
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 1em; 
    line-height: 1.2; 
    flex-shrink: 0; 
}

.btn-copiar:hover {
    background-color: #0056b3; 
}


/* ==================================== */
/* 8. TABLAS DE ADMINISTRACIÓN          */
/* ==================================== */

.container table {
    margin-bottom: 30px;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
}

.container table th, 
.container table td {
    padding: 10px;
    border: 1px solid #ddd;
    vertical-align: middle;
}

/* --- Regla Específica para el Contenedor de Login --- */
.container.login-form {
    max-width: 350px;
}

/* --- Estilos para el Toggle de Contraseña (Ojito) --- */
.password-container {
    position: relative; /* Contenedor para posicionar el icono */
    width: 100%;
}

.password-container input {
    /* Aseguramos que el padding derecho deje espacio para el icono */
    padding-right: 40px !important; 
}

.toggle-password {
    position: absolute;
    top: 50%;
    right: 10px; /* Separación del borde */
    transform: translateY(-50%);
    cursor: pointer;
    user-select: none; /* Evita que el texto se seleccione */
    font-size: 1.2em;
    color: #999;
    z-index: 10;
}