h4 {
  font-weight:600;
  color:#ff6633
}
label {
  color:#ff6633
}
/*div {
  color:#FF9800
}*/


/* ====== BOTÓN OUTLINE (terciario) ====== */
.btn-outline {
  background-color: transparent;
  color: #FF9800;
  border: 1px solid #FF9800;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-outline:hover {
  background-color: #FF9800;
  color: #000;
}
.btn-outline:active {
  background-color: #FF9800;
  color: #000;
  opacity: .9;
}
.btn-outline:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,152,0,.25);
}
.btn-outline:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ===== Dropdown ===== */
.Select-control {
  background-color: #ffffff !important;
  border: 1px solid #FF9800 !important;
  color: #EAEAEA !important;
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 4px 8px;
  min-height: 38px;
}

.Select--single > .Select-control .Select-value,
.Select-placeholder {
  color: #EAEAEA !important;
}

.Select-menu-outer {
  background-color: #EAEAEA !important;
  border: 1px solid #FF9800 !important;
  border-radius: 8px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  z-index: 9999;
}

.Select-option {
  background-color: #FF9800 !important;
  color: #000000 !important;
  padding: 8px 12px;
  cursor: pointer;
}

.Select-option:hover {
  background-color: #FF9800 !important;
  color: #EAEAEA !important;
  font-weight: 600;
}

/* ===== DatePickerSingle ===== */
.DateInput_input {
  background-color: #ffffff !important;
  border: 1px solid #FF9800 !important;
  color: #000000 !important;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  border-radius: 8px;
  padding: 6px 10px;
}

.SingleDatePicker_picker {
  background-color: #1f1f1f !important;
  border: 1px solid #FF9800 !important;
  border-radius: 8px;
  z-index: 9999;
}

.CalendarDay__default {
  background: #1f1f1f;
  color: #EAEAEA;
  border: 1px solid #333;
}

.CalendarDay__default:hover {
  background: #FF9800;
  color: #000;
  font-weight: 600;
}

.CalendarDay__selected {
  background: #FF9800 !important;
  color: #000 !important;
  font-weight: 700;
}

.DayPickerNavigation_button {
  background: #1e1e1e !important;
  border: 1px solid #FF9800 !important;
  color: #FF9800 !important;
}

/* ====== BOTÓN NARANJO (principal) ====== */
.btn-orange {
  background-color: #FF9800;
  color: #000;
  border: 1px solid #FF9800;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow: 0 6px 18px rgba(255,152,0,.25);
}
.btn-orange:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(255,152,0,.35);
}
.btn-orange:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(255,152,0,.25);
  opacity: .95;
}
.btn-orange:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,152,0,.35);
}
.btn-orange:disabled {
  opacity: .55;
  cursor: not-allowed;
}
/* ====== BOTÓN GHOST (secundario) ====== */
.btn-ghost {
/*  background-color: #1e1e1e; */
  background-color: #ffffff;
  color: #ff9800;
  border: 1px solid #ff9800;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 200;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn-ghost:hover {
  background-color: #ff9800;
  color: #000;
  box-shadow: 0 8px 22px rgba(255,152,0,.28);
}
.btn-ghost:active {
  background-color: #FF9800;
  color: #000;
  box-shadow: 0 4px 12px rgba(255,152,0,.2);
}
.btn-ghost:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,152,0,.28);
}
.btn-ghost:disabled {
  background-color: #ffffff;
  color: #ff9800;
  border: 1px solid #ff9800;
  opacity: .55;
  cursor: not-allowed;
}

/* ===== Estilos globales para Dash DataTable ===== */
.dash-table-container .dash-table {
  font-family: sans-serif, 'Inter' !important;
  font-size: 11px !important;
  letter-spacing: 0.2px;
  color: #000000;
  background-color: #ffffff;
  border-collapse: collapse;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(255,152,0,.15);
  word-break: break-all;
}

/* Encabezado */
.dash-table-container .dash-header {
  background-color: #1f1f1f !important;
  color: #FF9800 !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-align: center !important;
  border-bottom: 1px solid #FF9800 !important;
}

/* Celdas */
.dash-table-container .dash-cell {
/*  background-color: #fbfafa !important;
  color: #000000 !important;*/
  font-weight: 0 !important;
  font-size: 11px !important;
  text-align: left !important;
  padding: 4px !important;
  border: 1px solid #333 !important;
  height: 'auto' !important;
  max-width: 200px !important;

}

/* Filas alternadas */
.dash-table-container .dash-row-odd .dash-cell {
  background-color: #f8f0f0 !important;
}

/* Hover fila completa */
.dash-table-container .dash-row:hover .dash-cell {
  background-color: #FF9800 !important;
  color: #000 !important;
  font-weight: 600;
  cursor: pointer;
}

/* Selección */
.dash-table-container .dash-row-selected .dash-cell {
  background-color: #f49506 !important;
  color: #000000 !important;
  font-weight: 900;
  cursor:pointer
}

/* Bordes suaves 
.dash-table-container .dash-cell, 
.dash-table-container .dash-header {
  border: 1px solid #333 !important;
}*/

img[src*="#thumbnail"] {
   width:20px;
   height:20px;
}