/* CONECTA JUNTOS - Línea Gráfica Personalizada */
/* Basado en los requerimientos de Conecta Juntos */

:root {
  /* Colores oficiales de CONECTA JUNTOS */
  --conecta-bg: #ffffff;
  --conecta-primary-red: #e30613;
  --conecta-primary-blue: #294273;
  --conecta-accent: #3d6fe3;
  --conecta-accent-23: rgba(61, 111, 227, 0.23);
  --conecta-input-bg: #e2e2e2;
  --conecta-text: #383636;
  --conecta-text-muted: #a1a1a1;
  --conecta-text-inverted: #ffffff;
  --conecta-frisos: #e30613;
  --conecta-comp-1: #eda635;
  --conecta-comp-2: #efd933;
  --conecta-comp-3: #8ce249;

  /* Colores para elementos específicos */
  --conecta-primary: var(--conecta-primary-red);
  --conecta-success: var(--conecta-primary-blue);
  --conecta-info: var(--conecta-accent);
  --conecta-warning: var(--conecta-comp-1);
}

/* Tipografía - Calibri como familia principal */
body,
html,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div,
a,
button,
input,
label {
  font-family: 'Calibri', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* Personalización del Login */
.auth-wrapper {
  background-color: var(--conecta-bg) !important;
}

/* Logo y título principal */
.auth-logo {
  color: var(--conecta-primary) !important;
}

.auth-title {
  color: var(--conecta-text) !important;
  font-weight: 600;
}

.auth-subtitle {
  color: var(--conecta-text-muted) !important;
}

/* Formulario de login */
.auth-form {
  background-color: var(--conecta-bg) !important;
}

/* Inputs del formulario */
.form-control {
  background-color: white !important;
  border: 1px solid var(--conecta-input-bg) !important;
  color: var(--conecta-text) !important;
  font-family: 'Calibri', sans-serif !important;
}

.form-control:focus {
  background-color: var(--conecta-bg) !important;
  border-color: var(--conecta-accent) !important;
  box-shadow: 0 0 0 0.2rem var(--conecta-accent-23) !important;
  color: var(--conecta-text) !important;
}

.form-control::placeholder {
  color: var(--conecta-text-muted) !important;
}

/* Labels */
.form-label {
  color: var(--conecta-text) !important;
  font-weight: 500;
}

/* Botón primario (Iniciar Sesión) */
.btn-primary {
  background-color: var(--conecta-primary) !important;
  border-color: var(--conecta-primary) !important;
  color: var(--conecta-bg) !important;
  font-weight: 600;
  font-family: 'Calibri', sans-serif !important;
}

.btn-primary:hover {
  background-color: #c0050f !important;
  border-color: #c0050f !important;
  color: var(--conecta-bg) !important;
}

.btn-primary:focus {
  background-color: var(--conecta-primary) !important;
  border-color: var(--conecta-primary) !important;
  box-shadow: 0 0 0 0.2rem var(--conecta-accent-23) !important;
}

/* Enlaces */
a {
  color: var(--conecta-accent) !important;
}

a:hover {
  color: var(--conecta-primary) !important;
}

/* Checkbox "Recordarme" */
.form-check-input:checked {
  background-color: var(--conecta-accent) !important;
  border-color: var(--conecta-accent) !important;
}

.form-check-input:focus {
  border-color: var(--conecta-accent) !important;
  box-shadow: 0 0 0 0.2rem var(--conecta-accent-23) !important;
}

.form-check-label {
  color: var(--conecta-text) !important;
}

/* Botones sociales */
.btn-outline-secondary {
  border-color: var(--conecta-input-bg) !important;
  color: var(--conecta-text) !important;
}

.btn-outline-secondary:hover {
  background-color: var(--conecta-accent-23) !important;
  border-color: var(--conecta-accent) !important;
  color: var(--conecta-accent) !important;
}

/* Divider */
.divider {
  color: var(--conecta-text-muted) !important;
}

.divider::before,
.divider::after {
  background-color: var(--conecta-input-bg) !important;
}

/* Footer del login */
.auth-footer {
  color: var(--conecta-text-muted) !important;
}

/* Personalización específica para el template */
.auth-cover-bg {
  background-color: var(--conecta-bg) !important;
}

.auth-cover-wrapper {
  background-color: var(--conecta-bg) !important;
}

/* Ajustes para el logo SVG */
.auth-logo img,
.auth-logo svg {
  max-height: 40px;
}

/* Mejoras de accesibilidad */
.btn:focus,
.form-control:focus,
.form-check-input:focus {
  outline: 2px solid var(--conecta-accent) !important;
  outline-offset: 2px;
}

/* Estados de validación */
.is-invalid {
  border-color: var(--conecta-primary) !important;
}

.invalid-feedback {
  color: var(--conecta-primary) !important;
}

/* Dashboard y elementos principales */
.card-header {
  background-color: rgba(61, 111, 227, 0.1) !important;
  color: var(--conecta-primary-blue) !important;
  border-bottom: 1px solid rgba(61, 111, 227, 0.2) !important;
  padding: 0.75rem 1rem !important;
}

.card-title {
  color: var(--conecta-primary-blue) !important;
  font-weight: 600;
  font-size: 1rem !important;
  margin-bottom: 0 !important;
}

/* Botones y elementos de acción */
.btn-success {
  background-color: var(--conecta-primary-blue) !important;
  border-color: var(--conecta-primary-blue) !important;
  color: var(--conecta-text-inverted) !important;
}

.btn-success:hover {
  background-color: #1e2f5a !important;
  border-color: #1e2f5a !important;
  color: var(--conecta-text-inverted) !important;
}

/* Elementos activos y destacados */
.bg-success {
  background-color: var(--conecta-primary-blue) !important;
}

.text-success {
  color: var(--conecta-primary-blue) !important;
}

.border-success {
  border-color: var(--conecta-primary-blue) !important;
}

/* Alertas y notificaciones */
.alert-success {
  background-color: rgba(41, 66, 115, 0.1) !important;
  border-color: var(--conecta-primary-blue) !important;
  color: var(--conecta-primary-blue) !important;
}

/* Badges y etiquetas */
.badge-success {
  background-color: var(--conecta-primary-blue) !important;
  color: var(--conecta-text-inverted) !important;
}

/* Elementos de navegación activos */
.nav-link.active {
  background-color: var(--conecta-primary-blue) !important;
  color: var(--conecta-text-inverted) !important;
}

/* Progress bars */
.progress-bar-success {
  background-color: var(--conecta-primary-blue) !important;
}

/* Elementos de estado */
.status-success {
  color: var(--conecta-primary-blue) !important;
}

/* Iconos y elementos gráficos */
.icon-success {
  color: var(--conecta-primary-blue) !important;
}

/* Override de colores verdes del template */
.bg-light-success {
  background-color: rgba(41, 66, 115, 0.1) !important;
}

.text-light-success {
  color: var(--conecta-primary-blue) !important;
}

/* Elementos específicos del dashboard */
.welcome-card {
  background: linear-gradient(135deg, var(--conecta-primary-blue) 0%, var(--conecta-accent) 100%) !important;
  color: var(--conecta-text-inverted) !important;
}

/* Cabeceras de secciones del dashboard - más compactas y suaves */
.dashboard-section .card-header {
  background-color: rgba(41, 66, 115, 0.08) !important;
  color: var(--conecta-primary-blue) !important;
  border-bottom: 1px solid rgba(41, 66, 115, 0.15) !important;
  padding: 0.5rem 1rem !important;
  border-radius: 0.375rem 0.375rem 0 0 !important;
}

/* Padding superior para secciones del dashboard */
.dashboard-section {
  padding-top: 1rem !important;
}

.dashboard-section .card-body {
  padding-top: 1rem !important;
}

.dashboard-section .card-title {
  color: var(--conecta-primary-blue) !important;
  font-weight: 600;
  font-size: 0.95rem !important;
  margin-bottom: 0 !important;
}

/* Iconos en cabeceras más pequeños */
.dashboard-section .card-header i {
  font-size: 1rem !important;
  margin-right: 0.5rem !important;
}

/* Accesos directos */
.access-card {
  transition: all 0.3s ease;
}

.access-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(41, 66, 115, 0.15) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .auth-title {
    font-size: 1.5rem;
  }

  .auth-subtitle {
    font-size: 0.9rem;
  }
}

/* Only reset intranet layout styles inside the Angular microfrontend component */
.mf-registro-postulaciones app-layout .container,
.mf-registro-postulaciones app-layout .row,
.mf-registro-postulaciones app-layout [class*="col-"] {
  all: revert !important;
}

/* Tarjetas del dashboard */
.access-card {
  transition: all 0.3s ease;
}

.access-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(41, 66, 115, 0.15) !important;
}

/* Descripción de las tarjetas del dashboard */
.card-description {
  font-size: 0.75rem !important;
  line-height: 1.4 !important;
  color: var(--conecta-text-muted) !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0 !important;
  transition: font-size 0.3s ease, color 0.3s ease;
  text-align: center !important;
}

/* Efecto hover en la descripción - texto aumenta de tamaño */
.access-card:hover .card-description {
  font-size: 0.85rem !important;
  color: var(--conecta-text) !important;
}

/* Ajuste del título */
.access-card .card-title {
  margin-bottom: 0.25rem !important;
}