/* /app/static/css/style.css */

/* ---  Paleta de Colores (Tonos Tierra)  --- */
:root {
    --primary: #f8f9fa;       /* Gris claro - Fondo principal con mejor contraste */
    --primary-rgb: 248, 249, 250;
    --primary-hover: #e9ecef;  /* Gris un poco más oscuro (hover) */
    --secondary: #6c757d;      /* Gris (Bootstrap) - Para elementos secundarios*/
    --light: #f8f9fa;       /* Gris claro (Bootstrap) - Lo usamos para fondos de tarjetas */
    --dark: #444;        /* Gris muy oscuro (casi negro) - Para texto */
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --white: #fff;
    --accent: #20B2AA;       /* Turquesa de tu logo - ¡USAR COMO ACENTO! */
    --link-color: #0056b3;   /* Azul oscuro para enlaces (contraste) */
    --link-hover-color: #003d7a;
}

/* Navbar - Usamos el color de acento para que el logo se integre */
.navbar {
    background-color: var(--accent) !important;  /* Fondo turquesa */
}

.navbar-brand,
.navbar-nav .nav-link {
    color: var(--white-color) !important;   /* Texto blanco */
}
.navbar-nav .nav-link:hover {
  color: #ddd !important; /*Color al pasar el mouse*/
}

/* ---  Botones  --- */
.btn-primary {
    background-color: #007bff !important; /* Azul estándar de Bootstrap para botones */
    border-color: #007bff !important;
    color: var(--white) !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: #0056b3 !important; /* Azul más oscuro para hover */
  border-color: #0056b3 !important;
  color: var(--white) !important;
}

/* ---  Fondo del Contenedor Principal  --- */
.container {
    background-color: var(--primary); /* Usamos el beige claro */
    /* ... resto de tus estilos del container ... */
}
/* ---  Tipografía  --- */
body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--dark);          /* Texto oscuro */
    background-color: var(--light); /* Fondo claro */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--dark);      /* Encabezados en color oscuro para mejor contraste */
}

/* ---  Contenedor Principal  --- */
.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 20px;
    background-color: white;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

/* ---  Navbar  --- */
/* Nota: El navbar ahora usa colores personalizados del usuario o el color de acento */
/* Esta regla solo se aplica si no hay colores personalizados */
.navbar:not(.navbar-custom) {
    background-color: var(--accent) !important;  /* Fondo turquesa por defecto */
    margin-bottom: 3rem;
    padding: 0.8rem 1rem;
    border-radius: 0;
}

.navbar-brand,
.navbar-nav .nav-link {
    color: var(--white-color) !important;  /* Texto blanco */
    font-weight: 500;
}

.navbar-nav .nav-link:hover {
    color: #ddd !important; /* Color al pasar el mouse (un gris claro)*/
    text-decoration: underline;
}

.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5) !important;
}
.navbar-toggler-icon {
    /*Usar el color blanco, para que se vea*/
    background-color: rgba(255, 255, 255, 0.5) !important;
}

/* ---  Botones  --- */
/* Usamos las variables de Bootstrap directamente, y las personalizamos aquí */
.btn-primary {
    background-color: #007bff !important; /* Azul estándar de Bootstrap para botones */
    border-color: #007bff !important;
    color: white !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: #0056b3 !important; /* Azul más oscuro para hover */
    border-color: #0056b3 !important;
    color: white !important;
}

/* ---  Tablas  --- */
.table {
    background-color: var(--white-color);
    border-collapse: collapse;
}

.table th {
    background-color: var(--light);
    border-bottom: 2px solid #dee2e6; /* Borde gris estándar */
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(139, 69, 19, 0.05);  /* Un marrón muy claro, sutil */
}

/* ---  Tarjetas (Cards) --- */
.card {
    border: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
    border-radius: 5px;
}

.card-header {
    font-weight: 600;
    padding: 0.75rem 1.25rem;
    /*  El color de fondo se define con clases de Bootstrap (bg-*) en el HTML */
}

.card-body {
    padding: 1.25rem;
}

/* ---  Alertas (Flashes)  --- */
.alert {
    border-radius: 5px;
    padding: 0.8rem 1.2rem;
    margin-bottom: 1rem;
}

/* ---  Formularios  --- */
.form-group {
    margin-bottom: 1.5rem;
}

.form-control {
    border-radius: 5px;
    padding: 0.6rem 1rem;
    border: 1px solid #ccc;
}

.form-control:focus {
    border-color: #007bff; /* Azul estándar de Bootstrap */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Sombra azul al hacer foco */
}

.form-check-input:checked + .form-check-label {
    color: var(--dark);
    font-weight: bold;
}

.form-check {
    margin-bottom: 0.5rem;
}
label {
    font-weight: 600;
}

/* ---  Enlaces --- */
a { /*Este a se aplica a todos los enlaces, para que no haya problemas con otros colores*/
    color: var(--link-color);
    text-decoration: none;
}
a:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}
/* ---  Select 2 --- */
.select2-container--default .select2-selection--multiple{
	border: 1px solid #ced4da;
	border-radius: 0.25rem
}
.select2-container--default.select2-container--focus .select2-selection--multiple{
	border-color: #007bff; /* Azul estándar de Bootstrap */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* ---  Corrección para bg-primary con text-white --- */
/* Cuando se usa bg-primary con text-white, usar azul de Bootstrap para buen contraste */
/* Sobrescribir bg-primary solo en contextos donde se necesita texto blanco */
.bg-primary.text-white,
.bg-primary.text-white *,
.card-header.bg-primary,
.card-header.bg-primary *,
.bg-primary .text-white,
.bg-primary .text-white * {
    background-color: #007bff !important; /* Azul estándar de Bootstrap */
    color: white !important;
}

/* Para mensajes en chat que usan bg-primary text-white */
.message-bubble.bg-primary,
.message-bubble.bg-primary *,
.d-inline-block.bg-primary.text-white,
.d-inline-block.bg-primary.text-white * {
    background-color: #007bff !important;
    color: white !important;
}

/* Para cards completas con bg-primary */
.card.bg-primary,
.card.bg-primary * {
    background-color: #007bff !important;
    color: white !important;
}

/* Para thead con bg-primary */
thead.bg-primary,
thead.bg-primary * {
    background-color: #007bff !important;
    color: white !important;
}