/* ========================================
   COMPONENTES - NotIA Design System
   ======================================== */

/* ========================================
   CARDS
   ======================================== */

.card {
  background: var(--background-white);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-normal);
  overflow: hidden;
  position: relative;
}

.card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.card-header {
  background: var(--background-light);
  border-bottom: 1px solid var(--border-light);
  padding: var(--spacing-lg);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.card-body {
  padding: var(--spacing-lg);
}

.card-footer {
  background: var(--background-light);
  border-top: 1px solid var(--border-light);
  padding: var(--spacing-md) var(--spacing-lg);
}

/* Variantes de Cards */
.card-primary {
  border-left: 4px solid var(--primary-color);
}

.card-success {
  border-left: 4px solid var(--success-color);
}

.card-warning {
  border-left: 4px solid var(--warning-color);
}

.card-danger {
  border-left: 4px solid var(--danger-color);
}

.card-info {
  border-left: 4px solid var(--info-color);
}

/* Card con gradiente */
.card-gradient {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
  color: var(--text-white);
  border: none;
}

.card-gradient .card-header {
  background: rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-white);
}

.card-gradient .card-body {
  color: var(--text-white);
}

/* ========================================
   BOTONES
   ======================================== */

.btn {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  border-radius: var(--border-radius);
  border: 1px solid transparent;
  padding: var(--spacing-sm) var(--spacing-lg);
  cursor: pointer;
  transition: var(--transition-normal);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  position: relative;
  overflow: hidden;
}

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(13, 92, 99, 0.25);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Tamaños de botones */
.btn-sm {
  font-size: var(--font-size-sm);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--border-radius-sm);
}

.btn-lg {
  font-size: var(--font-size-lg);
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--border-radius-lg);
}

.btn-xl {
  font-size: var(--font-size-xl);
  padding: var(--spacing-lg) var(--spacing-2xl);
  border-radius: var(--border-radius-lg);
}

/* Colores de botones */
.btn-primary {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-white);
}

.btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--text-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.btn-secondary {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--text-primary);
}

.btn-secondary:hover {
  background: var(--secondary-dark);
  border-color: var(--secondary-dark);
  color: var(--text-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.btn-success {
  background: var(--success-color);
  border-color: var(--success-color);
  color: var(--text-white);
}

.btn-success:hover {
  background: #218838;
  border-color: #1e7e34;
  color: var(--text-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.btn-danger {
  background: var(--danger-color);
  border-color: var(--danger-color);
  color: var(--text-white);
}

.btn-danger:hover {
  background: #c82333;
  border-color: #bd2130;
  color: var(--text-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.btn-warning {
  background: var(--warning-color);
  border-color: var(--warning-color);
  color: var(--text-primary);
}

.btn-warning:hover {
  background: #e0a800;
  border-color: #d39e00;
  color: var(--text-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.btn-info {
  background: var(--info-color);
  border-color: var(--info-color);
  color: var(--text-white);
}

.btn-info:hover {
  background: #138496;
  border-color: #117a8b;
  color: var(--text-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

/* Botones outline */
.btn-outline-primary {
  background: transparent;
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.btn-outline-primary:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-white);
}

.btn-outline-secondary {
  background: transparent;
  border-color: var(--secondary-color);
  color: var(--secondary-color);
}

.btn-outline-secondary:hover {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--text-primary);
}

/* Botones con iconos */
.btn-icon {
  padding: var(--spacing-sm);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon.btn-sm {
  width: 32px;
  height: 32px;
  padding: var(--spacing-xs);
}

.btn-icon.btn-lg {
  width: 48px;
  height: 48px;
  padding: var(--spacing-md);
}

/* ========================================
   FORMULARIOS
   ======================================== */

.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-label {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
  display: block;
}

.form-control {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--text-primary);
  background: var(--background-white);
  border: 2px solid #BDBDBD !important; /* Borde más visible y grueso */
  border-radius: var(--border-radius);
  padding: var(--spacing-sm) var(--spacing-md);
  transition: var(--transition-normal);
  width: 100%;
  line-height: 1.5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; /* Sombra sutil para mejor visibilidad */
}

.form-control:hover {
  border-color: #9E9E9E !important; /* Borde más oscuro al pasar el mouse */
}

.form-control:focus {
  outline: none !important;
  border-color: var(--primary-color) !important;
  border-width: 2px !important;
  box-shadow: 0 0 0 3px rgba(13, 92, 99, 0.15) !important;
  background: var(--background-white) !important;
}

.form-control::placeholder {
  color: #9E9E9E !important;
  font-style: italic;
  opacity: 0.7;
}

.form-control:disabled {
  background: var(--background-light);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* Estados de validación */
.form-control.is-valid {
  border-color: var(--success-color);
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

.form-control.is-invalid {
  border-color: var(--danger-color);
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

.valid-feedback {
  color: var(--success-color);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-xs);
}

.invalid-feedback {
  color: var(--danger-color);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-xs);
}

/* Input groups */
.input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.input-group-text {
  background: var(--background-light);
  border: 1px solid var(--border-color);
  border-right: none;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.input-group .form-control {
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  border-left: none;
}

.input-group .form-control:focus {
  border-left: 1px solid var(--primary-color);
}

/* ========================================
   TABLAS
   ======================================== */

.table {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  background: var(--background-white);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.table th {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  background: var(--background-light);
  border-bottom: 2px solid var(--border-color);
  padding: var(--spacing-md);
  text-align: left;
  vertical-align: middle;
}

.table td {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--text-primary);
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}

.table tbody tr:hover {
  background: var(--background-light);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

/* Variantes de tabla */
.table-striped tbody tr:nth-of-type(odd) {
  background: var(--background-light);
}

.table-hover tbody tr:hover {
  background: var(--background-light);
}

/* ========================================
   ALERTAS
   ======================================== */

.alert {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--border-radius);
  border: 1px solid transparent;
  margin-bottom: var(--spacing-lg);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.alert-success {
  background: rgba(40, 167, 69, 0.1);
  border-color: var(--success-color);
  color: var(--success-color);
}

.alert-danger {
  background: rgba(220, 53, 69, 0.1);
  border-color: var(--danger-color);
  color: var(--danger-color);
}

.alert-warning {
  background: rgba(255, 193, 7, 0.1);
  border-color: var(--warning-color);
  color: var(--warning-color);
}

.alert-info {
  background: rgba(23, 162, 184, 0.1);
  border-color: var(--info-color);
  color: var(--info-color);
}

.alert-primary {
  background: rgba(13, 92, 99, 0.1);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

/* ========================================
   BADGES
   ======================================== */

.badge {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.badge-primary {
  background: var(--primary-color);
  color: var(--text-white);
}

.badge-secondary {
  background: var(--secondary-color);
  color: var(--text-primary);
}

.badge-success {
  background: var(--success-color);
  color: var(--text-white);
}

.badge-danger {
  background: var(--danger-color);
  color: var(--text-white);
}

.badge-warning {
  background: var(--warning-color);
  color: var(--text-primary);
}

.badge-info {
  background: var(--info-color);
  color: var(--text-white);
}

/* ========================================
   PROGRESS BARS
   ======================================== */

.progress {
  background: var(--background-light);
  border-radius: var(--border-radius-pill);
  height: 8px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-bar {
  background: var(--primary-color);
  height: 100%;
  transition: width 0.6s ease;
  border-radius: var(--border-radius-pill);
}

.progress-bar-success {
  background: var(--success-color);
}

.progress-bar-warning {
  background: var(--warning-color);
}

.progress-bar-danger {
  background: var(--danger-color);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  .card {
    margin-bottom: var(--spacing-md);
  }
  
  .card-header,
  .card-body,
  .card-footer {
    padding: var(--spacing-md);
  }
  
  .btn {
    width: 100%;
    margin-bottom: var(--spacing-sm);
  }
  
  .btn-sm {
    width: auto;
  }
  
  .table {
    font-size: var(--font-size-xs);
  }
  
  .table th,
  .table td {
    padding: var(--spacing-sm);
  }
}