/* ==================== DARK MODE - ESTILOS ESPECÍFICOS DE BOTONES ==================== */

/* IMPORTANTE: Todos los estilos aquí SOLO se aplican cuando .dark existe en <html> */

/* ==================== BOTÓN LIMPIAR (NORMAL) ==================== */

/* Botón normal .btn → Fondo transparente + borde blanco en dark mode */
.dark .btn:not(.btn-success):not(.btn-danger):not(.btn-black):not(.btn-outline-green):not(.btn-outline-red):not(.dispatch-packages-open-btn):not(.dispatch-packages-create-btn) {
  background-color: transparent !important;
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
}

.dark .btn:not(.btn-success):not(.btn-danger):not(.btn-black):not(.btn-outline-green):not(.btn-outline-red):not(.dispatch-packages-open-btn):not(.dispatch-packages-create-btn):hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: #ffffff !important;
}

.dark .btn:not(.btn-success):not(.btn-danger):not(.btn-black):not(.btn-outline-green):not(.btn-outline-red):not(.dispatch-packages-open-btn):not(.dispatch-packages-create-btn):active {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

/* SVG paths dentro de botones normales */
.dark .btn:not(.btn-success):not(.btn-danger):not(.btn-black):not(.btn-outline-green):not(.btn-outline-red):not(.dispatch-packages-open-btn):not(.dispatch-packages-create-btn) svg path {
  fill: #ffffff !important;
}

/* Botón outline negro sin clase .btn (modal de confirmación y casos similares) */
.dark .btn-outline-black,
.dark .modal-footer .btn-outline-black,
.dark .delete-product-modal .btn-outline-black {
  background-color: transparent !important;
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
}

.dark .btn-outline-black:hover,
.dark .modal-footer .btn-outline-black:hover,
.dark .delete-product-modal .btn-outline-black:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: #ffffff !important;
}

.dark .btn-outline-black:active,
.dark .modal-footer .btn-outline-black:active,
.dark .delete-product-modal .btn-outline-black:active {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

.dark .btn-outline-black:focus,
.dark .modal-footer .btn-outline-black:focus,
.dark .delete-product-modal .btn-outline-black:focus {
  outline: 2px solid #ffffff !important;
  outline-offset: -2px;
}

.dark .btn-outline-black svg path,
.dark .modal-footer .btn-outline-black svg path,
.dark .delete-product-modal .btn-outline-black svg path {
  fill: #ffffff !important;
}

/* Despacho: Abrir/Crear bulto mantienen intención verde en dark mode */
.dark .dispatch-packages-open-btn,
.dark .dispatch-packages-create-btn {
  background-color: rgba(10, 191, 91, 0.06) !important;
  border: 1px solid var(--green-status) !important;
  color: var(--green-status) !important;
}

.dark .dispatch-packages-open-btn:hover,
.dark .dispatch-packages-create-btn:hover {
  background-color: rgba(10, 191, 91, 0.14) !important;
  border-color: var(--green-status) !important;
  color: var(--green-status) !important;
}

.dark .dispatch-packages-open-btn:active,
.dark .dispatch-packages-create-btn:active {
  background-color: rgba(10, 191, 91, 0.2) !important;
}

.dark .dispatch-packages-open-btn svg path,
.dark .dispatch-packages-create-btn svg path {
  fill: var(--green-status) !important;
}

/* Botón disabled */
.dark .btn:disabled {
  background-color: transparent !important;
  border-color: #4a4a4a !important;
  color: #4a4a4a !important;
  opacity: 0.5 !important;
}

.dark .btn:disabled svg path {
  fill: #4a4a4a !important;
}

/* ==================== BOTÓN BUSCAR (VERDE - SUCCESS) ==================== */

/* Los botones verdes usan verde más claro en dark mode según Figma */
.dark .btn-success {
  background-color: var(--btn-success-bg) !important;
  color: #ffffff !important;
  border-color: var(--btn-success-bg) !important;
}

.dark .btn-success:hover {
  background-color: #09A84F !important;
  border-color: #09A84F !important;
}

.dark .btn-success:active {
  background-color: #088F43 !important;
}

/* SVG paths dentro de botones success (mantener blanco) */
.dark .btn-success svg path {
  fill: #ffffff !important;
}

/* Botón success disabled */
.dark .btn-success:disabled {
  background-color: #E3E6E8 !important;
  border-color: #E3E6E8 !important;
  color: #8d8d8d !important;
  opacity: 0.5 !important;
}

.dark .btn-success:disabled svg path {
  fill: #8d8d8d !important;
}

/* ==================== BOTÓN DANGER (ROJO - ELIMINAR/CANCELAR) ==================== */

/* Botón danger rojo sólido (mismo color en light y dark mode) */
.dark .btn-danger {
  background-color: #a40f16 !important;
  color: #ffffff !important;
  border-color: #a40f16 !important;
}

.dark .btn-danger:hover {
  background-color: #8a0c12 !important;
  border-color: #8a0c12 !important;
}

.dark .btn-danger:active {
  background-color: #70090e !important;
}

/* SVG paths dentro de botones danger (mantener blanco) */
.dark .btn-danger svg path {
  fill: #ffffff !important;
}

/* Botón danger disabled */
.dark .btn-danger:disabled {
  background-color: #E3E6E8 !important;
  border-color: #E3E6E8 !important;
  color: #8d8d8d !important;
  opacity: 0.5 !important;
}

.dark .btn-danger:disabled svg path {
  fill: #8d8d8d !important;
}

/* Botón negro sólido: se invierte a blanco en modo oscuro, como el canon flotante. */
.dark .btn-black {
  background-color: #ffffff !important;
  color: #161616 !important;
  border-color: #ffffff !important;
}

.dark .btn-black:hover {
  background-color: #f4f4f4 !important;
  border-color: #f4f4f4 !important;
}

.dark .btn-black:active {
  background-color: #e3e6e8 !important;
  border-color: #e3e6e8 !important;
}

.dark .btn-black:disabled {
  background-color: #e3e6e8 !important;
  border-color: #e3e6e8 !important;
  color: #8d8d8d !important;
}

/* ==================== BOTÓN OUTLINE GREEN (REIMPRIMIR ÚLTIMA) ==================== */

.dark .btn-outline-green {
  background-color: transparent !important;
  border: 2px solid var(--green-status) !important;
  color: var(--green-status) !important;
}

.dark .btn-outline-green:hover {
  background-color: rgba(10, 191, 91, 0.1) !important;
  border-color: var(--green-status) !important;
}

.dark .btn-outline-green:active {
  background-color: rgba(10, 191, 91, 0.2) !important;
}

.dark .btn-outline-green:focus {
  outline: 2px solid var(--green-status) !important;
  outline-offset: -2px;
}

.dark .btn-outline-green .btn-icon svg path {
  fill: var(--green-status) !important;
}

.dark .btn-outline-green svg path {
  fill: var(--green-status) !important;
}

.dark .btn-outline-green svg {
  fill: var(--green-status) !important;
}

/* ==================== BOTÓN OUTLINE RED (ANULAR IMPRESIÓN) ==================== */

.dark .btn-outline-red {
  background-color: transparent !important;
  border: 2px solid var(--red-status) !important;
  color: var(--red-status) !important;
}

.dark .btn-outline-red:hover {
  background-color: rgba(255, 107, 107, 0.1) !important;
  border-color: var(--red-status) !important;
}

.dark .btn-outline-red:active {
  background-color: rgba(255, 107, 107, 0.2) !important;
}

.dark .btn-outline-red:focus {
  outline: 2px solid var(--red-status) !important;
  outline-offset: -2px;
}

.dark .btn-outline-red .btn-icon svg path {
  fill: var(--red-status) !important;
}

.dark .btn-outline-red svg path {
  fill: var(--red-status) !important;
}

.dark .btn-outline-red svg {
  fill: var(--red-status) !important;
}

/* ==================== CANDADO EN CAMPOS BLOQUEADOS ==================== */

/* Candado dentro de campos disabled */
.dark .icon-locked {
  filter: brightness(3) !important;
}

.dark .icon-locked path {
  fill: #ffffff !important;
}

/* ==================== BOTONES CON ESTILOS INLINE (FALLBACK) ==================== */

/* Si existen botones con estilos inline background transparente y borde negro */
.dark button[style*="background: transparent"][style*="border: 1px solid #0B0B0B"],
.dark button[style*="background: transparent"][style*="border: 1px solid #0b0b0b"],
.dark button[style*="background:transparent"][style*="border:1px solid #0B0B0B"],
.dark button[style*="background:transparent"][style*="border:1px solid #0b0b0b"] {
  background: transparent !important;
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
}

.dark button[style*="background: transparent"][style*="border: 1px solid #0B0B0B"]:hover,
.dark button[style*="background: transparent"][style*="border: 1px solid #0b0b0b"]:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.dark button[style*="background: transparent"][style*="border: 1px solid #0B0B0B"] svg path,
.dark button[style*="background: transparent"][style*="border: 1px solid #0b0b0b"] svg path {
  fill: #ffffff !important;
}

/* Botones verdes con estilos inline */
.dark button[style*="background: #077e38"],
.dark button[style*="background:#077e38"],
.dark button[style*="background: #077E38"],
.dark button[style*="background:#077E38"] {
  background: #077e38 !important;
  color: #ffffff !important;
  border-color: #077e38 !important;
}

.dark button[style*="background: #077e38"]:hover,
.dark button[style*="background:#077e38"]:hover {
  background: #066b30 !important;
}

.dark button[style*="background: #077e38"] svg path,
.dark button[style*="background:#077e38"] svg path {
  fill: #ffffff !important;
}

/* ==================== FOCUS STATES ==================== */

.dark .btn:focus {
  outline: 2px solid currentColor !important;
  outline-offset: -2px;
}

.dark .btn-success:focus {
  outline: 2px solid #077e38 !important;
  outline-offset: -2px;
}

.dark .btn-danger:focus {
  outline: 2px solid var(--red-status) !important;
  outline-offset: -2px;
}

/* ==================== FORM ACTIONS ==================== */

/* Contenedor de botones */
.dark .form-actions {
  background-color: transparent !important;
}

.dark .card-header-actions {
  background-color: transparent !important;
}

/* ==================== BTN-TEXT Y BTN-ICON ==================== */

/* Asegurar que el texto del botón sea visible */
.dark .btn-text {
  color: inherit !important;
}

/* Asegurar que los íconos hereden el color correcto */
.dark .btn-icon svg {
  fill: inherit;
  stroke: inherit;
}

/* ==================== BOTONES EN TABLAS ==================== */

/* Botones dentro de tablas - mantener colores específicos */
.dark table .btn-success {
  background-color: var(--green-status) !important;
  border-color: var(--green-status) !important;
  color: #ffffff !important;
}

.dark table .btn-danger {
  background-color: var(--red-status) !important;
  border-color: var(--red-status) !important;
  color: #ffffff !important;
}

/* Canon global de acciones en filas de tabla (basado en Lista de pedidos) */
.dark .btn-add-to-detail,
.dark .table-action-btn-check {
  background: var(--table-action-check-bg) !important;
  color: var(--table-action-check-fg) !important;
}

.dark .btn-add-to-detail:hover,
.dark .table-action-btn-check:hover {
  background: var(--table-action-check-hover-bg) !important;
  color: var(--table-action-check-hover-fg) !important;
}

.dark .btn-delete-row {
  background: var(--table-action-delete-bg) !important;
  color: var(--table-action-delete-fg) !important;
}

.dark .btn-delete-row:hover {
  background: var(--table-action-delete-hover-bg) !important;
  color: var(--table-action-delete-hover-fg) !important;
}

.dark .table-action-btn-edit {
  background: var(--table-action-edit-bg) !important;
  color: var(--table-action-edit-fg) !important;
}

.dark .table-action-btn-edit:hover {
  background: var(--table-action-edit-hover-bg) !important;
  color: var(--table-action-edit-hover-fg) !important;
}

.dark .btn-add-to-detail svg path,
.dark .btn-delete-row svg path,
.dark .table-action-btn-check svg path {
  fill: currentColor !important;
  stroke: currentColor !important;
}

.dark .table-action-btn-edit svg path {
  fill: currentColor !important;
  stroke: none !important;
}

/* ==================== BOTONES DE TOGGLE/COLLAPSE ==================== */

.dark .toggle-form-btn,
.dark .toggle-btn {
  background-color: transparent !important;
  border-color: var(--border-primary) !important;
}

.dark .toggle-form-btn svg path,
.dark .toggle-btn svg path {
  fill: var(--text-primary) !important;
}

.dark .toggle-form-btn:hover,
.dark .toggle-btn:hover {
  background-color: var(--bg-hover) !important;
}

/* ==================== BOTONES FLOTANTES - BOTONERA ==================== */

/* Contenedor de botones flotantes - fondo más oscuro en dark mode */
.dark .floating-buttons-container {
  background-color: rgba(30, 30, 30, 0.88) !important;
  border-color: #3a3a3a !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.62), 0 8px 22px rgba(0, 0, 0, 0.48) !important;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}

.dark .floating-btn-overflow {
  background-color: rgba(30, 30, 30, 0.9) !important;
  color: #ffffff !important;
  border: 1px solid #8d99a1 !important;
  outline: 1px solid #8d99a1 !important;
  outline-offset: 0;
}

.dark .floating-btn-overflow:hover {
  background-color: rgba(46, 46, 46, 0.95) !important;
  border-color: #dfe3e6 !important;
  outline-color: #dfe3e6 !important;
}

.dark .floating-btn-overflow svg path {
  fill: #ffffff !important;
}

.dark .floating-overflow-menu {
  background-color: rgba(30, 30, 30, 0.9) !important;
  border-color: #3a3a3a !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.62), 0 8px 22px rgba(0, 0, 0, 0.48) !important;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}

/* Botón toggle (flecha) */
.dark .floating-toggle-btn {
  background-color: #1e1e1e !important;
  border-color: #3a3a3a !important;
}

.dark .floating-toggle-btn:hover {
  background-color: #2a2a2a !important;
}

.dark .floating-toggle-btn svg path {
  fill: #ffffff !important;
}

/* Botón verde flotante */
.dark .floating-btn-green {
  background-color: var(--btn-success-bg) !important;
  color: #ffffff !important;
}

.dark .floating-btn-green:hover {
  background-color: #09A84F !important;
}

.dark .floating-btn-green svg path {
  fill: #ffffff !important;
}

/* Botón negro flotante */
.dark .floating-btn-black {
  background-color: #ffffff !important;
  color: #161616 !important;
  border: 1px solid #ffffff !important;
}

.dark .floating-btn-black:hover {
  background-color: #f4f4f4 !important;
}

.dark .floating-btn-black svg path {
  fill: #161616 !important;
}

/* Botón outline negro flotante */
.dark .floating-btn-outline-black {
  background-color: transparent !important;
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
}

.dark .floating-btn-outline-black:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.dark .floating-btn-outline-black svg path {
  fill: #ffffff !important;
}

/* Botón outline rojo flotante */
.dark .floating-btn-outline-red {
  background-color: transparent !important;
  border: 1px solid var(--red-status) !important;
  color: var(--red-status) !important;
}

.dark .floating-btn-outline-red:hover {
  background-color: rgba(255, 107, 107, 0.1) !important;
}

.dark .floating-btn-outline-red svg path {
  fill: var(--red-status) !important;
}

/* Botón rojo flotante */
.dark .floating-btn-red {
  background-color: var(--btn-danger-bg) !important;
  color: #ffffff !important;
}

.dark .floating-btn-red:hover {
  background-color: #E85C5C !important;
}

.dark .floating-btn-red svg path {
  fill: #ffffff !important;
}