/* ==========================================================================
   SISTEMA DE COLORES POR ROLES DE USUARIO
   ========================================================================== */

/* 
  Este sistema de colores proporciona una identificación visual rápida
  de diferentes roles de usuario en la aplicación mediante colores distintivos.
  Se utiliza en fondos, textos y componentes de interfaz para mejorar
  la usabilidad y experiencia del usuario.
*/

/* ==========================================================================
   FONDOS POR ROL DE USUARIO
   ========================================================================== */

/* 
  Fondo para rol Administrador - Azul corporativo
  - Color institucional principal para usuarios con máximo nivel de acceso
  - Representa autoridad, confianza y control del sistema
*/
.bg-rol-admin {
  background-color: #194073 !important; /* Azul marino principal de la aplicación */
}

/* 
  Fondo para rol Técnico - Verde para indicar operatividad
  - Color asociado con acciones técnicas, mantenimiento y soporte
  - Simboliza funcionalidad, resolución de problemas y operaciones
*/
.bg-rol-tecnico {
  background-color: #378c8c !important; /* Verde azulado para acciones operativas */
}

/* 
  Fondo para rol Usuario - Azul verdoso para usuarios estándar
  - Color para usuarios regulares con acceso básico al sistema
  - Representa participación estándar y uso cotidiano
*/
.bg-rol-usuario {
  background-color: #2A708C !important; /* Azul verdoso para usuarios base */
}

/* 
  Fondo para rol Negocio - Azul oscuro para entidades comerciales
  - Color para usuarios relacionados con operaciones comerciales
  - Simboliza profesionalismo, negocios y transacciones
*/
.bg-rol-negocio {
  background-color: #24435a !important; /* Azul oscuro para contexto comercial */
}

/* 
  Fondo para rol Otro - Gris para roles no especificados
  - Color neutral para roles misceláneos o no categorizados
  - Representa estados secundarios, neutrales o genéricos
*/
.bg-rol-otro {
  background-color: #6c757d !important; /* Gris neutral para estados secundarios */
}

/* ==========================================================================
   COLORES DE TEXTO POR ROL DE USUARIO
   ========================================================================== */

/* 
  Texto color rol Administrador
  - Color de texto coherente con el fondo de administrador
  - Mantiene consistencia visual en toda la interfaz
*/
.text-rol-admin {
  color: #194073 !important; /* Mismo azul marino para consistencia de marca */
}

/* 
  Texto color rol Técnico
  - Verde para texto relacionado con funciones técnicas
  - Facilita identificación rápida de contenido técnico
*/
.text-rol-tecnico {
  color: #378c8c !important; /* Verde azulado para texto de técnicos */
}

/* 
  Texto color rol Usuario
  - Azul verdoso para texto relacionado con usuarios regulares
  - Distingue contenido orientado a usuarios finales
*/
.text-rol-usuario {
  color: #2A708C !important; /* Azul verdoso para texto de usuarios */
}

/* 
  Texto color rol Negocio
  - Azul oscuro para texto relacionado con operaciones comerciales
  - Identifica contenido empresarial y de negocio
*/
.text-rol-negocio {
  color: #24435a !important; /* Azul oscuro para texto comercial */
}

/* 
  Texto color rol Otro
  - Gris para texto de roles misceláneos o no categorizados
  - Proporciona visibilidad sin destacar excesivamente
*/
.text-rol-otro {
  color: #6c757d !important; /* Gris neutral para texto de roles misceláneos */
}

/* ==========================================================================
   ENCABEZADOS DE TARJETAS CON GRADIENTES POR ROL
   ========================================================================== */

/* 
  Sistema de encabezados con gradientes para tarjetas (cards)
  - Proporciona un efecto visual atractivo y moderno
  - Crea jerarquía visual clara entre diferentes roles
  - Los gradientes de 135 grados crean sensación de dinamismo
*/

/* 
  Encabezado para rol 1 (Admin) - Gradiente azul
  - Transición de azul marino a azul más oscuro
  - Refleja autoridad y control jerárquico
*/
.card-header-rol-1 {
    background: linear-gradient(135deg, #194073, #0056b3) !important;
    border-bottom: 2px solid #0056b3; /* Borde inferior más oscuro para profundidad */
}

/* 
  Encabezado para rol 2 (Técnico) - Gradiente verde azulado
  - Transición de verde azulado claro a oscuro
  - Representa competencia técnica y habilidades especializadas
*/
.card-header-rol-2 {
    background: linear-gradient(135deg, #378c8c, #2a6b6b) !important;
    border-bottom: 2px solid #2a6b6b; /* Borde inferior verde oscuro */
}

/* 
  Encabezado para rol 3 (Usuario) - Gradiente azul verdoso
  - Transición uniforme de azul verdoso (color sólido)
  - Indica participación estándar y uso regular
*/
.card-header-rol-3 {
    background: linear-gradient(135deg, #2A708C, #2A708C) !important;
    border-bottom: 2px solid #2A708C; /* Borde inferior azul verdoso oscuro */
}

/* 
  Encabezado para rol 4 (Negocio) - Gradiente azul oscuro
  - Transición uniforme de azul oscuro (color sólido)
  - Simboliza profesionalismo y contexto comercial
*/
.card-header-rol-4 {
    background: linear-gradient(135deg, #24435a, #24435a) !important;
    border-bottom: 2px solid #24435a; /* Borde inferior azul oscuro */
}

/* 
  Encabezado para rol 5 (Otro) - Gradiente gris
  - Transición de gris medio a gris oscuro
  - Representa neutralidad y roles no especificados
*/
.card-header-rol-5 {
    background: linear-gradient(135deg, #6c757d, #545b62) !important;
    border-bottom: 2px solid #545b62; /* Borde inferior gris oscuro */
}

/* ==========================================================================
   ENCABEZADOS DE TARJETAS CON COLORES SÓLIDOS
   ========================================================================== */

/* 
  Versión alternativa con colores sólidos para encabezados
  - Proporciona una opción más sutil y minimalista
  - Útil en interfaces donde los gradientes pueden ser visualmente pesados
  - Mantiene la identificación por colores pero con menor intensidad
*/

/* 
  Encabezado sólido para rol 1 (Admin) - Azul grisáceo suave
  - Color más claro que el gradiente para fondo sólido
  - Mantiene la identificación sin el efecto dinámico
*/
.card-header-rol-1-solid {
    background-color: #7d98b5 !important; /* Azul grisáceo más suave para fondo sólido */
    border-bottom: 2px solid #abc0d7; /* Borde inferior azul más claro */
}

/* 
  Encabezado sólido para rol 2 (Técnico) - Verde azulado sólido
  - Mantiene el color verde azulado estándar
  - Versión simplificada del encabezado con gradiente
*/
.card-header-rol-2-solid {
    background-color: #378c8c !important; /* Verde azulado estándar */
    border-bottom: 2px solid #2a6b6b; /* Borde inferior verde oscuro */
}

/* 
  Encabezado sólido para rol 3 (Usuario) - Azul verdoso sólido
  - Color sólido para usuarios regulares
  - Alternativa más sutil al gradiente
*/
.card-header-rol-3-solid {
    background-color: #2A708C !important; /* Azul verdoso estándar */
    border-bottom: 2px solid #2A708C; /* Borde inferior azul verdoso oscuro */
}

/* 
  Encabezado sólido para rol 4 (Negocio) - Azul oscuro sólido
  - Color comercial en versión sólida
  - Mantiene el tono profesional sin efectos visuales
*/
.card-header-rol-4-solid {
    background-color: #24435a !important; /* Azul oscuro estándar */
    border-bottom: 2px solid #24435a; /* Borde inferior azul oscuro */
}

/* 
  Encabezado sólido para rol 5 (Otro) - Gris sólido
  - Neutralidad en formato sólido
  - Alternativa minimalista para roles misceláneos
*/
.card-header-rol-5-solid {
    background-color: #6c757d !important; /* Gris estándar */
    border-bottom: 2px solid #545b62; /* Borde inferior gris oscuro */
}

/* ==========================================================================
   BOTONES PERSONALIZADOS POR COLOR
   ========================================================================== */

/* 
  Sistema de botones con paleta de colores coherente
  - Mantiene consistencia con el esquema de colores por rol
  - Proporciona opciones visuales para diferentes acciones
  - Todos los botones están contenidos en elementos con clase .card-custom
*/

/* 
  Botón azul - color primario más oscuro
  - Color principal para acciones destacadas o primarias
  - Coherente con el rol de administrador
*/
.card-custom .btn-azul {
  background-color: #194073;  /* Azul marino intenso */
  border-color: #194073;      /* Mismo color para el borde */
}

/* 
  Botón verde - color secundario para acciones ecológicas/satisfactorias
  - Ideal para acciones positivas, confirmaciones o tareas completadas
  - Relacionado con el rol de técnico
*/
.card-custom .btn-verde {
  background-color: #378c8c;  /* Verde azulado (turquesa oscuro) */
  border-color: #378c8c;      /* Borde consistente con el fondo */
}

/* 
  Botón esmeralda - tono intermedio entre azul y verde
  - Color versátil para acciones generales o intermedias
  - Asociado con el rol de usuario regular
*/
.card-custom .btn-esmeralda {
  background-color: #2A708C;  /* Azul verdoso (esmeralda oscuro) */
  border-color: #2A708C;      /* Mantiene coherencia cromática */
}

/* 
  Botón cielo - azul más claro, similar al color principal del tema
  - Alternativa más suave al azul marino principal
  - Relacionado con el rol de negocio
*/
.card-custom .btn-cielo {
  background-color: #24435a;  /* Azul oscuro (similar al color principal) */
  border-color: #24435a;      /* Borde del mismo tono */
}