/*
  Archivo de paleta de colores (public/css/palette.css)
  - Edita los valores de las variables abajo para que coincidan con tu paleta.
  - Este archivo se carga directamente desde el componente Livewire para permitir pruebas rápidas
    sin recompilar assets. Para integración definitiva, importa estas variables en tu CSS principal.
*/
:root {
  /* Colores principales */
  --primary: #FF8100;            /* color principal */
  --primary-contrast: #FFBF6E;   /* texto sobre primary */

  /* Colores secundarios */
  --secondary: #6c757d;
  --success: #28a745;
  --danger: #dc3545;
  --warning: #ffc107;
  --info: #17a2b8;

  /* Utilitarios */
  --light: #f8f9fa;
  --dark: #343a40;
  --muted: #6c757d;

  /* Botones predeterminados */
  --btn-bg: var(--light);
  --btn-border: #959595;
  --btn-text: #212529;
}



/* Ejemplo de uso: .btn-primary { background: var(--primary); color: var(--primary-contrast); } */

/* Reglas para forzar que los componentes Bootstrap utilicen la paleta */
.btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-contrast) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: #e36900 !important;
  border-color: #e36900 !important;
}

.btn-outline-primary {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: var(--primary) !important;
  color: var(--primary-contrast) !important;
}

.btn-outline-secondary {
  color: var(--btn-text) !important;
  border-color: var(--btn-border) !important;
}

/* Success and danger buttons to match palette */
.btn-success {
  background-color: var(--success) !important;
  border-color: var(--success) !important;
  color: #fff !important;
}
.btn-success:hover, .btn-success:focus {
  background-color: color-mix(in srgb, var(--success) 85%, black) !important;
  border-color: color-mix(in srgb, var(--success) 85%, black) !important;
}

.btn-outline-success {
  color: var(--success) !important;
  border-color: var(--success) !important;
}
.btn-outline-success:hover, .btn-outline-success:focus {
  background-color: var(--success) !important;
  color: #fff !important;
}

.btn-danger {
  background-color: var(--danger) !important;
  border-color: var(--danger) !important;
  color: #fff !important;
}
.btn-danger:hover, .btn-danger:focus {
  background-color: color-mix(in srgb, var(--danger) 85%, black) !important;
  border-color: color-mix(in srgb, var(--danger) 85%, black) !important;
}

.btn-outline-danger {
  color: var(--danger) !important;
  border-color: var(--danger) !important;
}
.btn-outline-danger:hover, .btn-outline-danger:focus {
  background-color: var(--danger) !important;
  color: #fff !important;
}

/* Paginación: usar paleta y reducir tamaño si es necesario */
.pagination-wrapper .page-item.active .page-link,
.pagination .page-item.active .page-link {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-contrast) !important;
}
.pagination-wrapper .page-link,
.pagination .page-link {
  color: var(--btn-text) !important;
}
.pagination-wrapper .page-link:hover,
.pagination .page-link:hover {
  background-color: rgba(255,129,0,0.08) !important;
  border-color: var(--primary) !important;
}

/* Badges */
.badge-primary {
  background-color: var(--primary) !important;
  color: var(--primary-contrast) !important;
}

/* Asegurar precedencia en selectores del tema */
body .btn.btn-primary, body .pagination .page-link {
  box-shadow: none !important;
}