/* Estilos mejorados para botones que funcionan en tema claro y oscuro */

/* Botón de guardar/crear principal - funciona en ambos temas */
.fi-btn-primary,
.fi-btn[data-color="primary"],
button[type="submit"] {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    border: none !important;
    color: white !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.fi-btn-primary:hover,
.fi-btn[data-color="primary"]:hover,
button[type="submit"]:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4) !important;
}

/* Botón de cancelar - adaptable a ambos temas */
.fi-btn-secondary,
.fi-btn[data-color="gray"] {
    background: linear-gradient(135deg, #6b7280, #4b5563) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    padding: 10px 20px !important;
    transition: all 0.3s ease !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.fi-btn-secondary:hover,
.fi-btn[data-color="gray"]:hover {
    background: linear-gradient(135deg, #4b5563, #374151) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(75, 85, 99, 0.3) !important;
}

/* Botón Ver (azul) - visible en ambos temas */
.fi-ac-btn-action[data-color="sky"],
.fi-btn[data-color="sky"] {
    background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.fi-ac-btn-action[data-color="sky"]:hover,
.fi-btn[data-color="sky"]:hover {
    background: linear-gradient(135deg, #0284c7, #0369a1) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4) !important;
}

/* Botón Editar (ámbar) - visible en ambos temas */
.fi-ac-btn-action[data-color="amber"],
.fi-btn[data-color="amber"] {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.fi-ac-btn-action[data-color="amber"]:hover,
.fi-btn[data-color="amber"]:hover {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4) !important;
}

/* Botón PDF (verde) - visible en ambos temas */
.fi-ac-btn-action[data-color="emerald"],
.fi-btn[data-color="emerald"] {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.fi-ac-btn-action[data-color="emerald"]:hover,
.fi-btn[data-color="emerald"]:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important;
}

/* Botón Eliminar (rosa) - visible en ambos temas */
.fi-ac-btn-action[data-color="rose"],
.fi-btn[data-color="rose"] {
    background: linear-gradient(135deg, #f43f5e, #e11d48) !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.fi-ac-btn-action[data-color="rose"]:hover,
.fi-btn[data-color="rose"]:hover {
    background: linear-gradient(135deg, #e11d48, #be123c) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.4) !important;
}

/* Botón Cerrar (naranja) - visible en ambos temas */
.fi-ac-btn-action[data-color="orange"],
.fi-btn[data-color="orange"] {
    background: linear-gradient(135deg, #f97316, #ea580c) !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.fi-ac-btn-action[data-color="orange"]:hover,
.fi-btn[data-color="orange"]:hover {
    background: linear-gradient(135deg, #ea580c, #c2410c) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4) !important;
}

/* Botón "Agregar Médico" del repeater - visible en ambos temas */
.fi-fo-repeater-add-item-btn {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.fi-fo-repeater-add-item-btn:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4) !important;
}

/* Campos de formulario adaptativos para ambos temas */
.fi-select-input {
    border: 2px solid #d1d5db !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

/* En tema claro */
html:not(.dark) .fi-select-input {
    background-color: white !important;
    color: #374151 !important;
}

/* En tema oscuro */
.dark .fi-select-input {
    background-color: #374151 !important;
    color: white !important;
    border-color: #4b5563 !important;
}

.fi-select-input:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
}

/* Inputs adaptativos */
.fi-input {
    border: 2px solid #d1d5db !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

/* En tema claro */
html:not(.dark) .fi-input {
    background-color: white !important;
    color: #374151 !important;
}

/* En tema oscuro */
.dark .fi-input {
    background-color: #374151 !important;
    color: white !important;
    border-color: #4b5563 !important;
}

.fi-input:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
}

/* Botón "Nueva Nómina" en la esquina superior derecha */
.fi-btn[href*="create"],
.fi-header-actions .fi-btn {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.fi-btn[href*="create"]:hover,
.fi-header-actions .fi-btn:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4) !important;
}