/* Color Palette (FiberPRO) */
:root {
--primary-blue: #0036A1;
--accent-orange: #FF8308;
--text-dark: #212529; /* Standard dark text, used on light backgrounds */
--text-light: #f8f9fa; /* Standard light text, used on dark backgrounds */
--bg-light: #e9ecef; /* Light background for containers if needed */
--card-bg: #ffffff; /* White background for main content/table cells */

/* Custom shades derived from your palette or Bootstrap defaults */
--fiberpro-green: #28a745;
--fiberpro-red: #dc3545;
--fiberpro-yellow: #ffc107;
--fiberpro-cyan: #17a2b8;
--fiberpro-dark-grey: #343a40;
--fiberpro-light-grey: #f8f9fa;
--fiberpro-cobertura-orange: #e04b00;
--fiberpro-border-gray: #ccc;

/* Bootstrap Overrides (mapping Bootstrap's conceptual colors to your specific values) */
--bs-primary: var(--primary-blue);
--bs-secondary: #6c757d; /* Mantener Bootstrap secondary para el botón "Regresar" */
--bs-success: var(--fiberpro-green);
--bs-info: var(--fiberpro-cyan);
--bs-warning: var(--accent-orange);
--bs-danger: var(--fiberpro-red);
--bs-dark: var(--fiberpro-dark-grey);
--bs-light: var(--fiberpro-light-grey);
--bs-white: #fff;
--bs-gray-400: #ced4da;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
/* Fondo con el azul primario y un degradado suave */
background: linear-gradient(135deg, var(--primary-blue) 0%, #0046B3 100%);
color: var(--text-dark); /* Color de texto por defecto */
margin: 0;
padding: 0;
display: flex;
justify-content: center; /* Centrar contenido horizontalmente */
align-items: center; /* Centrar contenido verticalmente */
min-height: 100vh; /* Asegura que ocupe al menos toda la altura de la ventana */
}

.container.main-content {
flex: 1;
background-color: var(--bs-white);
padding: 30px;
border-radius: 15px;
margin-top: 30px;
margin-bottom: 30px;
max-width: 800px;
}

.page-header {
background-color: var(--primary-blue);
color: var(--text-light);
padding: 10px;  
display: flex;
justify-content: center; /* Changed to space-between for desktop to match screenshot */
align-items: center;
margin-bottom: 10px;
}

.page-header .logo-section {
display: flex;
align-items: center;
}

.page-header .logo-section img {
height: 80px;
}

.page-header .page-main-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-light);
    text-align: left;
    flex-grow: 1;
  }


/* Estilo para las etiquetas de formulario */
.form-label {
font-weight: bold;
color: var(--text-dark); /* Color de texto oscuro para las etiquetas */
margin-bottom: 8px;
}

/* Estilos para los input-group-text (iconos dentro de los campos) */
.input-group-text {
background-color: var(--primary-blue); /* Fondo azul para el icono */
border-color: var(--primary-blue);
color: var(--text-light); /* Texto blanco para el icono */
border-top-left-radius: 0.25rem !important; /* Mantener esquinas redondeadas si es el primer elemento */
border-bottom-left-radius: 0.25rem !important;
}

/* Estilos de los campos de entrada */
.form-control {
border-color: var(--bs-gray-400); /* Borde gris suave para los campos */
}
.form-control:focus {
border-color: var(--accent-orange); /* Borde naranja al enfocar */
box-shadow: 0 0 0 0.25rem rgba(255, 131, 8, 0.25); /* Sombra naranja al enfocar */
}

/* Botón "Cambiar Contraseña" */
.btn-primary {
background-color: var(--accent-orange) !important; /* El naranja acento para el botón principal */
border-color: var(--accent-orange) !important;
color: var(--text-light) !important; /* Texto blanco */
font-weight: bold;
font-size: 1.1rem;
padding: 10px 0;
border-radius: 8px;
transition: background-color 0.3s ease;
}
.btn-primary:hover {
background-color: #e04b00 !important; /* Tono más oscuro de naranja al pasar el ratón */
border-color: #e04b00 !important;
}

/* Estilos para los iconos dentro de los botones */
.btn .fas {
margin-right: 8px; /* Espacio entre el icono y el texto del botón */
}

/* Mensajes flash (alertas) */
.alert {
border-radius: 8px;
margin-top: 20px;
font-size: 0.95rem;
}
.alert-success {
background-color: var(--fiberpro-green);
color: white;
border-color: var(--fiberpro-green);
}
.alert-danger {
background-color: var(--fiberpro-red);
color: white;
border-color: var(--fiberpro-red);
}
.alert-warning {
background-color: var(--fiberpro-yellow);
color: black;
border-color: var(--fiberpro-yellow);
}

.forgot-password-section {
    margin-top: 20px !important; /* Más espacio arriba para separarlo del formulario */
    font-size: 0.95rem; /* Tamaño de fuente ligeramente más pequeño */
}

.forgot-password-section a {
    color: var(--primary-blue); /* Tu color azul primario */
    font-weight: bold;
    text-decoration: none; /* Quitar el subrayado por defecto */
    transition: color 0.3s ease; /* Transición suave para el hover */
}

.forgot-password-section a:hover {
    color: var(--accent-orange); /* Naranja acento al pasar el ratón */
    text-decoration: underline; /* Subrayado al pasar el ratón */
}

/* Botón "Regresar al Dashboard" */
.btn-secondary {
    background-color: var(--primary-blue) !important; /* Azul primario para el botón de regresar */
    border-color: var(--primary-blue) !important;
    color: var(--text-light) !important;
    font-weight: bold;
    font-size: 1.1rem;
    padding: 10px 0;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}
.btn-secondary:hover {
    background-color: #002b82 !important; /* Tono más oscuro de azul al pasar el ratón */
    border-color: #002b82 !important;
}

.btn-success {
    /* El color por defecto para success debería ser tu --fiberpro-green */
    background-color: var(--fiberpro-green) !important; 
    border-color: var(--fiberpro-green) !important;
    color: var(--text-light) !important; /* Texto blanco */
    font-weight: bold;
    font-size: 1.1rem;
    padding: 10px 0;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}
.btn-success:hover {
    background-color: #218838 !important; 
    border-color: #218838 !important;
}


@media screen and (max-width: 680px) {
  .page-header .logo-section img {
    height: 50px;
  }
  
  .page-header .page-main-title {
    font-size: 1.6rem;
  }
  
  .container.main-content {
    padding: 15px;
    border-radius: 5px;
    max-width: 95% !important;
  }
  
  }