html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}



    /* --- Estilos para la página de Login/Registro --- */

    /*  El fondo de color y el centrado */
    body.login-register-body {
        background-color: #f6f6f4; /* Un color hueso/gris claro similar al de Mailchimp */
        display: flex;
        justify-content: center; /* Centra horizontalmente */
        align-items: center; /* Centra verticalmente */
        min-height: 100vh; /* Ocupa toda la altura de la pantalla */
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        padding: 20px;
        padding-bottom: 60px;
    }

/* El logo "PET" en la esquina */
.page-logo {
    position: absolute;
    top: 24px;
    left: 24px;
    font-size: 1.5rem;
    font-weight: bold;
    color: #222;
    text-decoration: none;
}

/*  El contenedor blanco del formulario */
.login-container {
    background-color: #ffffff;
    padding: 2.5rem 3rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    max-width: 450px;
    width: 100%;
    text-align: center;
}

    .login-container h2 {
        font-size: 2.5rem;
        font-weight: 600;
        margin-bottom: 1rem;
        color: #333;
    }

    /*  Enlace de "Crear cuenta" */
    .login-container .register-link {
        margin-bottom: 2rem;
        display: block;
        color: #555;
    }

        .login-container .register-link a {
            color: #007c89; /* Un color teal/azul */
            text-decoration: none;
            font-weight: 500;
        }

    /* El botón de Login  */
    .login-container .btn-login {
        width: 100%;
        padding: 0.8rem;
        font-size: 1rem;
        font-weight: bold;
        background-color: #007c89; /* Color primario (teal) */
        border: none;
    }

        .login-container .btn-login:hover {
            background-color: #005f69; /* Un poco más oscuro */
        }

    /* Enlaces de "Olvidé" */
    .login-container .forgot-links {    
        margin-top: 1.5rem;
        font-size: 0.9rem;
    }

        .login-container .forgot-links a {
            color: #007c89;
            text-decoration: none;
            margin: 0 10px;
        }


/* --- Estilos para la Barra de Navegación Principal --- */

/* Fondo de la barra de navegación */
.navbar-custom {
    background-color: #ffffff; /* Blanco limpio */
    border-bottom: 1px solid #e0e0e0; /* Línea de separación sutil */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); /* Sombra ligera */
    padding: 0.5rem 1rem;
}

/* Marca/Logo "PET" */
.navbar-brand {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333 !important; /* Mantenemos un color oscuro */
}

/* Enlaces de navegación */
.navbar-nav .nav-link {
    color: #555 !important;
    font-weight: 500;
    margin: 0 5px;
    padding: 8px 15px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

    /* Efecto hover en los enlaces */
    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active {
        background-color: #f0f8ff; /* Fondo muy suave al pasar el ratón */
        color: #007c89 !important; /* Color de acento (teal) */
    }

/* Botones de acción (ej. Cerrar Sesión) */
.navbar-nav .btn-link {
    color: #007c89 !important; /* Usamos el color de acento */
    font-weight: bold;
}

/* El fondo principal del contenido */
body {
    background-color: #f6f6f4; /* Mismo gris claro del Login */
    min-height: 100vh;
}

/* Contenedor del contenido principal */
.main-content {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 2rem;
    margin-top: 20px;
    min-height: 80vh; /* Para que el contenido tenga un fondo blanco */
}



/* --- Estilos para el Footer del Layout Simple --- */

.footer-simple {
    position: fixed; /* Lo fija en la ventana del navegador */
    bottom: 10px; /* A 10px de la parte inferior */
    left: 0;
    width: 100%;
    text-align: center;
    color: #b0b0b0; /* Un color gris muy claro para que no distraiga */
    font-size: 0.85rem;
}